:root {
  --ink: #152033;
  --muted: #647084;
  --line: #dfe7f1;
  --surface: #ffffff;
  --soft: #f6f8fc;
  --blue: #1f62d2;
  --blue-dark: #133f8f;
  --teal: #0fa39a;
  --gold: #f2b84b;
  --coral: #e96d5b;
  --violet: #7557d8;
  --shadow: 0 24px 70px rgba(22, 33, 52, 0.13);
  --page-bg-start: #f3f7ff;
  --page-bg-end: #fbfcfe;
  --header-bg: rgba(255, 255, 255, 0.88);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--ink);
  background:
    linear-gradient(180deg, var(--page-bg-start) 0, var(--page-bg-end) 560px),
    var(--page-bg-end);
  font-family: "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", Arial, sans-serif;
  line-height: 1.6;
}

body > main {
  display: flex;
  flex-direction: column;
}

body > main > .hero {
  order: 10;
}

body > main > .quick-panel {
  order: 20;
}

body > main > .mega {
  order: 30;
}

body > main > #plan {
  order: 40;
}

body > main > #support {
  order: 50;
}

body > main > #careerPlanning {
  order: 55;
}

body > main > #system {
  order: 60;
}

body > main > #courses {
  order: 70;
}

body > main > #learn-center {
  order: 80;
}

body > main > .dashboard-section {
  order: 90;
  display: none;
}

body > main > #career {
  order: 100;
  display: none;
}

body > main > #enterprise {
  order: 110;
}

body > main > .faq-section {
  order: 120;
}

body > main > #about {
  order: 130;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select {
  font: inherit;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: auto 1fr minmax(360px, 460px) auto;
  gap: clamp(12px, 1.5vw, 24px);
  align-items: center;
  min-height: 78px;
  padding: 14px clamp(20px, 2vw, 64px);
  background: var(--header-bg);
  border-bottom: 1px solid rgba(223, 231, 241, 0.86);
  box-shadow: 0 14px 38px rgba(21, 32, 51, 0.06);
  backdrop-filter: blur(20px);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: 196px;
}

.brand-mark {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  color: #fff;
  font-weight: 800;
  background: linear-gradient(135deg, var(--blue), var(--teal));
  border-radius: 8px;
  box-shadow: 0 12px 26px rgba(31, 98, 210, 0.22);
}

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

.brand strong {
  font-size: 18px;
}

.brand small {
  color: var(--muted);
  font-size: 12px;
}

.main-nav {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 4px;
  min-width: 0;
  font-size: 14px;
}

.main-nav a,
.mobile-menu a {
  padding: 8px 6px;
  color: #304058;
  border-radius: 7px;
}

.main-nav a {
  white-space: nowrap;
}

.main-nav a:hover,
.mobile-menu a:hover {
  color: var(--blue);
  background: #eef5ff;
}

/* About Us and website guide: public directory, cards, and shared back-office editor. */
.business-guide-body .student-guide-sop-directory-head strong,
.business-guide-body .student-guide-sop-nav button,
.business-guide-body .about-guide-nav button {
  font-size: 16px;
}

.business-guide-body .student-guide-sop-directory-head strong {
  font-size: 18px;
}

.business-guide-body .about-guide-layout {
  display: grid;
  grid-template-columns: minmax(220px, 0.28fr) minmax(0, 1fr);
  min-height: 360px;
  overflow: hidden;
  background: #fff;
  border: 1px solid #d3e2f1;
  border-radius: 10px;
}

.business-guide-body .about-guide-directory {
  padding: 20px 14px;
  background: #f8fbff;
  border-right: 1px solid #d3e2f1;
}

.business-guide-body .about-guide-nav {
  display: grid;
  gap: 7px;
}

.business-guide-body .about-guide-nav button {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  color: #40536d;
  text-align: left;
  line-height: 1.45;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 7px;
  cursor: pointer;
}

.business-guide-body .about-guide-nav button:hover,
.business-guide-body .about-guide-nav button:focus-visible,
.business-guide-body .about-guide-nav button[aria-selected="true"] {
  color: #fff;
  background: linear-gradient(135deg, #169f9a, #286ed4);
  border-color: transparent;
  outline: none;
}

.business-guide-body .about-guide-content {
  min-width: 0;
  padding: clamp(22px, 3vw, 38px);
}

.business-guide-body .about-guide-theme { display: none; }
.business-guide-body .about-guide-theme.active { display: grid; gap: 20px; }
.business-guide-body .about-guide-theme > h2 {
  margin: 0;
  padding-bottom: 14px;
  color: #17365d;
  border-bottom: 1px solid #dbe7f2;
  font-size: clamp(22px, 2.2vw, 30px);
}

.business-guide-body .about-guide-copy {
  color: #40536d;
  font-size: 16px;
  line-height: 2;
  overflow-wrap: anywhere;
}

.business-guide-body .about-guide-hero-image,
.business-guide-body .about-guide-hero-image img { margin: 0; width: 100%; }
.business-guide-body .about-guide-hero-image img {
  display: block;
  max-height: 520px;
  object-fit: contain;
  background: #f7fafc;
  border: 1px solid #dbe7f2;
  border-radius: 8px;
}

.business-guide-body .about-people-grid,
.business-guide-body .about-organization-grid,
.business-guide-body .about-gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.business-guide-body .about-organization-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.business-guide-body .about-content-card-link { color: inherit; text-decoration: none; }
.business-guide-body .about-content-card {
  height: 100%;
  overflow: hidden;
  background: #f8fbff;
  border: 1px solid #d9e6f3;
  border-radius: 9px;
  box-shadow: 0 8px 20px rgba(33, 52, 77, 0.05);
}
.business-guide-body .about-content-card-image { aspect-ratio: 16 / 10; background: #eef4f8; }
.business-guide-body .about-people-grid .about-content-card-image { aspect-ratio: 4 / 3; background: #fff; }
.business-guide-body .about-organization-grid .about-content-card-image { aspect-ratio: 16 / 9; padding: 16px; background: #fff; }
.business-guide-body .about-content-card-image img { width: 100%; height: 100%; object-fit: cover; }
.business-guide-body .about-people-grid .about-content-card-image img {
  object-fit: contain;
  object-position: center center;
}
.business-guide-body .about-organization-grid .about-content-card-image img { object-fit: contain; }
.business-guide-body .about-content-card-copy { display: grid; gap: 8px; padding: 16px; }
.business-guide-body .about-content-card-copy h3,
.business-guide-body .about-content-card-copy p { margin: 0; }
.business-guide-body .about-content-card-copy strong { color: #168b8c; font-size: 14px; }
.business-guide-body .about-content-card-copy p { color: #566981; line-height: 1.75; }

/* About Us uploads: keep every image stage white when contain-fit leaves side or top/bottom gutters. */
.business-guide-body .about-guide-theme .about-content-card-image,
.business-guide-body .about-guide-theme .about-guide-hero-image {
  background: #fff;
}

.admin-body .about-admin-layout {
  display: grid;
  grid-template-columns: minmax(300px, 0.9fr) minmax(430px, 1.1fr);
  gap: 18px;
  align-items: start;
}
.admin-body .content-management-tabs { margin-bottom: 18px; }
.admin-body .about-theme-admin-list,
.admin-body .about-item-admin-list { display: grid; gap: 10px; max-height: 720px; overflow-y: auto; }
.admin-body .about-admin-record {
  display: grid;
  gap: 12px;
  padding: 13px;
  background: #f8fbff;
  border: 1px solid #d6e4f2;
  border-radius: 9px;
}
.admin-body .about-admin-record.is-selected { border-color: #229baf; box-shadow: 0 0 0 2px rgba(34, 155, 175, 0.1); }
.admin-body .about-admin-record > div:first-child { display: grid; gap: 5px; min-width: 0; }
.admin-body .about-admin-record small { color: #657990; }
.admin-body .about-admin-record .record-actions { position: static; display: flex; flex-wrap: wrap; gap: 7px; }
.admin-body .about-visible-field { display: flex; flex-direction: row; align-items: center; gap: 9px; }
.admin-body .about-visible-field input { width: 18px; min-height: 18px; }

@media (min-width: 1100px) {
  .business-guide-body .business-guide-tabs { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

@media (min-width: 641px) and (max-width: 1099px) {
  .business-guide-body .business-guide-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 800px) {
  .admin-body .about-admin-layout { grid-template-columns: minmax(0, 1fr); }
  .admin-body .about-theme-admin-list,
  .admin-body .about-item-admin-list { max-height: none; overflow: visible; }
  .business-guide-body .about-guide-layout { grid-template-columns: 1fr; min-height: 0; }
  .business-guide-body .about-guide-directory { border-right: 0; border-bottom: 1px solid #d3e2f1; }
  .business-guide-body .about-guide-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .business-guide-body .about-guide-content { padding: 20px 16px; }
  .business-guide-body .about-organization-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .business-guide-body .business-guide-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .business-guide-body .about-people-grid,
  .business-guide-body .about-gallery-grid,
  .business-guide-body .about-organization-grid { grid-template-columns: minmax(0, 1fr); }
  .admin-body .about-admin-record .record-actions > button { flex: 1 1 calc(50% - 7px); }
}

/* ADMIN role guides use the same balanced editor/list layout as other settings. */
.admin-body .role-guide-admin-grid {
  grid-template-columns: minmax(280px, 0.88fr) minmax(420px, 1.12fr);
  align-items: start;
}

.admin-body .role-guide-admin-grid > .role-card:first-child {
  grid-row: auto;
}

.role-guide-editor-card,
.role-guide-list-card,
.role-guide-step-record > div:first-child {
  min-width: 0;
}

.role-guide-editor-actions,
.role-guide-step-record,
.role-guide-step-record .record-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.role-guide-editor-actions {
  flex-wrap: wrap;
  margin-top: 2px;
}

.role-guide-editor-actions > button {
  flex: 1 1 150px;
}

.admin-body .role-guide-editor-actions .about-image-delete-button {
  color: #b42318;
  border-color: #ffd1d1;
  background: #fff5f5;
}

.admin-body .role-guide-editor-actions .about-image-delete-button:hover,
.admin-body .role-guide-editor-actions .about-image-delete-button:focus-visible {
  color: #fff;
  border-color: #d92d20;
  background: #d92d20;
}

.admin-body .role-guide-editor-actions .about-image-delete-button:active {
  transform: translateY(1px);
}

.role-guide-editor-status {
  min-height: 20px;
}

.role-guide-editor-status.is-error {
  color: #bd4141;
}

.role-guide-admin-image-preview {
  display: block;
  width: min(100%, 560px);
  max-height: 260px;
  object-fit: contain;
  object-position: left top;
  padding: 6px;
  background: #fff;
  border: 1px solid #d6e4f2;
  border-radius: 7px;
}

.role-guide-admin-image-preview[hidden] {
  display: none;
}

.role-guide-role-list,
.role-guide-step-list {
  display: grid;
  gap: 10px;
}

.role-guide-role-list {
  max-height: 720px;
  overflow-y: auto;
  padding-right: 3px;
  scrollbar-gutter: stable;
}

.role-guide-role-record {
  overflow: hidden;
  background: #f8fbff;
  border: 1px solid #d6e4f2;
  border-radius: 9px;
}

.role-guide-role-record > summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  color: #17365d;
  cursor: pointer;
  list-style: none;
}

.role-guide-role-record > summary::-webkit-details-marker {
  display: none;
}

.role-guide-role-record > summary strong {
  overflow-wrap: anywhere;
}

.role-guide-role-record > summary span {
  color: #61758d;
  font-size: 12px;
}

.role-guide-role-record > summary span:last-child {
  color: #078d89;
  font-weight: 800;
}

.role-guide-role-record[open] > summary span:last-child {
  font-size: 0;
}

.role-guide-role-record[open] > summary span:last-child::after {
  content: "收起";
  font-size: 12px;
}

.role-guide-role-body {
  display: grid;
  gap: 12px;
  padding: 13px 14px 14px;
  border-top: 1px solid #d6e4f2;
}

.role-guide-step-record {
  justify-content: space-between;
}

.role-guide-step-record {
  padding: 11px 12px;
  background: #fff;
  border: 1px solid #dce8f3;
  border-radius: 8px;
}

.role-guide-step-record strong,
.role-guide-step-record small {
  display: block;
  overflow-wrap: anywhere;
}

.role-guide-step-record strong {
  color: #17365d;
}

.role-guide-step-record small {
  margin-top: 4px;
  color: #718096;
}

.admin-body .role-guide-step-record .record-actions {
  position: static;
  flex: 0 0 auto;
  justify-content: flex-end;
}

.role-guide-step-record .danger {
  color: #b34343;
  border-color: #e8bcbc;
  background: #fff7f7;
}

.business-guide-body .student-guide-sop {
  display: grid;
  grid-template-columns: minmax(188px, 0.27fr) minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid #d3e2f1;
  border-radius: 10px;
  background: #fff;
}

.business-guide-body .student-guide-sop-directory {
  padding: 19px 13px;
  background: #f8fbff;
  border-right: 1px solid #d3e2f1;
}

.business-guide-body .student-guide-sop-directory-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 8px 13px;
  color: #1f6bd4;
}

.business-guide-body .student-guide-sop-directory-head strong {
  padding-bottom: 5px;
  border-bottom: 2px solid #1f6bd4;
}

.business-guide-body .student-guide-sop-nav {
  display: grid;
  gap: 4px;
}

.business-guide-body .student-guide-sop-nav button {
  width: 100%;
  min-height: 38px;
  padding: 8px 10px;
  color: #4d6078;
  text-align: left;
  font: inherit;
  font-size: 13px;
  line-height: 1.45;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
}

.business-guide-body .student-guide-sop-nav button:hover,
.business-guide-body .student-guide-sop-nav button:focus-visible,
.business-guide-body .student-guide-sop-nav button[aria-selected="true"] {
  color: #fff;
  background: linear-gradient(135deg, #169f9a, #286ed4);
  border-color: transparent;
  outline: none;
}

.business-guide-body .student-guide-sop-content {
  min-width: 0;
  padding: 30px 34px;
}

.business-guide-body .student-guide-sop-heading {
  margin: 0 0 24px;
  padding-bottom: 16px;
  color: #172033;
  border-bottom: 1px solid #dbe7f2;
  font-size: clamp(22px, 2.1vw, 29px);
}

.business-guide-body .student-guide-sop-step {
  display: none;
}

.business-guide-body .student-guide-sop-step.active {
  display: grid;
  gap: 15px;
}

.business-guide-body .student-guide-sop-step h2 {
  margin: 0;
  padding-bottom: 14px;
  color: #17365d;
  border-bottom: 1px solid #dbe7f2;
  font-size: clamp(19px, 1.8vw, 24px);
}

.business-guide-body .student-guide-sop-copy {
  color: #40536d;
  line-height: 1.9;
  white-space: normal;
}

.business-guide-body .student-guide-sop-image {
  display: grid;
  gap: 9px;
  margin: 2px 0 0;
}

.business-guide-body .student-guide-sop-image img {
  display: block;
  width: 100%;
  max-height: 600px;
  object-fit: contain;
  object-position: center top;
  background: #f8fbff;
  border: 1px solid #d3e2f1;
  border-radius: 8px;
}

.business-guide-body .student-guide-sop-image figcaption {
  color: #718096;
  font-size: 12px;
  line-height: 1.6;
}

@media (max-width: 760px) {
  .admin-body .role-guide-admin-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .role-guide-role-list {
    max-height: none;
    overflow-y: visible;
    padding-right: 0;
  }

  .role-guide-role-record > summary {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .role-guide-role-record > summary span:nth-child(2) {
    grid-column: 1;
    grid-row: 2;
  }

  .role-guide-role-record > summary span:last-child {
    grid-column: 2;
    grid-row: 1 / span 2;
  }

  .role-guide-step-record {
    align-items: stretch;
    flex-direction: column;
  }

  .role-guide-step-record .record-actions,
  .role-guide-step-record .record-actions > button {
    width: 100%;
  }

  .role-guide-step-record .record-actions > button {
    flex: 1 1 0;
  }

  .business-guide-body .student-guide-sop {
    grid-template-columns: 1fr;
  }

  .business-guide-body .student-guide-sop-directory {
    border-right: 0;
    border-bottom: 1px solid #d3e2f1;
  }

  .business-guide-body .student-guide-sop-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .business-guide-body .student-guide-sop-content {
    padding: 22px 18px;
  }
}

/* Factory category ordering stays fully visible on phones; other wide ADMIN
   record tables retain their established horizontal rails. */
@media (max-width: 760px) {
  .factory-admin-category-shell {
    overflow-x: hidden !important;
  }

  .factory-admin-category-shell > .factory-admin-category-head,
  .factory-admin-category-shell > #factoryCategoryList {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .factory-admin-category-shell > .factory-admin-category-head {
    grid-template-columns: minmax(72px, 0.8fr) minmax(0, 1.2fr) 82px !important;
  }

  .factory-admin-category-shell > #factoryCategoryList > .factory-category-item.mobile-record-wide {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
}

/* 20260806 recruiter mobile navigation rails and business-manager duplicate
   menu removal. Desktop layouts and permission rules remain unchanged. */
@media (max-width: 760px) {
  .recruit-teach-body[data-work-mode="recruiter"] .recruit-teach-shell,
  .recruit-teach-body[data-work-mode="recruiter"] .recruit-teach-grid,
  .recruit-teach-body[data-work-mode="recruiter"] .work-panel,
  .recruit-teach-body[data-work-mode="recruiter"] .teacher-tab-panel {
    min-width: 0;
    max-width: 100%;
  }

  .recruit-teach-body[data-work-mode="recruiter"] .role-workbench-nav,
  .recruit-teach-body[data-work-mode="recruiter"] .recruiter-work > .teacher-work-tabs:not(.recruiter-resume-tabs) {
    box-sizing: border-box;
    gap: 8px;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
  }

  .recruit-teach-body[data-work-mode="recruiter"] .role-workbench-nav > a,
  .recruit-teach-body[data-work-mode="recruiter"] .recruiter-work > .teacher-work-tabs:not(.recruiter-resume-tabs) > button {
    flex: 0 0 118px !important;
    width: 118px !important;
    min-width: 118px !important;
    max-width: 118px !important;
    min-height: 42px;
    padding: 7px 10px !important;
    white-space: nowrap;
  }

  .recruit-teach-body[data-work-mode="recruiter"] .profile-sub-tabs {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px;
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
  }

  .recruit-teach-body[data-work-mode="recruiter"] .profile-sub-tabs > button {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 42px;
    padding: 7px 10px !important;
    white-space: nowrap;
  }

  .business-manager-body .command-shell > .command-menu {
    display: none !important;
  }

  .business-manager-body .command-shell {
    grid-template-columns: minmax(0, 1fr);
  }
}

.home-site-header {
  grid-template-columns: auto minmax(0, 1fr) minmax(260px, 320px) auto;
  gap: 10px;
  padding-inline: 20px;
}

.home-site-header .main-nav {
  gap: 2px;
  font-size: 13px;
}

.home-site-header .main-nav a {
  padding-inline: 4px;
}

@media (max-width: 1400px) {
  .home-site-header {
    grid-template-columns: auto 1fr auto;
  }

  .home-site-header .main-nav,
  .home-site-header .search {
    display: none;
  }

  .home-site-header .menu-button {
    display: block;
  }
}

.search {
  display: grid;
  grid-template-columns: 1fr auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}

.search input {
  min-width: 0;
  padding: 10px 12px;
  border: 0;
  outline: 0;
}

.search button,
.lead-form button {
  border: 0;
  color: #fff;
  background: var(--ink);
  cursor: pointer;
}

.search button {
  padding: 0 16px;
}

.search.voice-search {
  grid-template-columns: 52px minmax(230px, 1fr) auto;
  align-items: stretch;
}

.voice-search-field {
  display: grid;
  align-content: center;
  min-width: 0;
  gap: 2px;
  padding: 7px 14px 7px 2px;
}

.voice-search-field input {
  width: 100%;
  min-width: 0;
  padding: 0;
  color: var(--ink);
  border: 0;
  outline: 0;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
}

.voice-search-field span {
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.voice-record-button {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 52px;
  padding: 0;
  border: 0;
  border-right: 1px solid var(--line);
  color: var(--blue);
  background:
    radial-gradient(circle at center, #ffffff 0 42%, #f5f9ff 43% 100%);
  cursor: pointer;
  transition:
    background 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.search .voice-record-button {
  border: 0;
  border-right: 1px solid var(--line);
  color: var(--blue);
  background:
    radial-gradient(circle at center, #ffffff 0 42%, #f5f9ff 43% 100%);
}

.search .voice-record-button:hover,
.strict-search .voice-record-button:hover {
  background:
    radial-gradient(circle at center, #ffffff 0 38%, #eaf3ff 39% 100%);
}

.search.voice-search > .voice-record-button,
.strict-search.voice-search > .voice-record-button {
  min-width: 52px;
  color: var(--blue);
  background:
    radial-gradient(circle at center, #ffffff 0 42%, #f5f9ff 43% 100%);
  border-right: 1px solid var(--line);
}

.voice-record-button.is-recording {
  background:
    radial-gradient(circle at center, #e9f3ff 0 40%, #f5f9ff 41% 100%);
  box-shadow: inset 0 0 0 1px rgba(31, 98, 210, 0.1);
}

.voice-record-button.is-pressed,
.voice-record-button:active {
  transform: scale(0.94);
  box-shadow: inset 0 3px 8px rgba(31, 98, 210, 0.18);
}

.voice-record-button.is-recording::after {
  position: absolute;
  inset: 9px;
  content: "";
  border: 1px solid rgba(31, 98, 210, 0.32);
  border-radius: 999px;
  animation: voice-record-pulse 1.1s ease-out infinite;
}

.voice-record-icon {
  position: relative;
  z-index: 1;
  width: 18px;
  height: 24px;
  transform-origin: center;
  transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.voice-record-button.is-pressed .voice-record-icon,
.voice-record-button:active .voice-record-icon {
  transform: scale(0.86);
}

.voice-record-icon::before {
  position: absolute;
  top: 0;
  left: 5px;
  width: 8px;
  height: 14px;
  content: "";
  border: 2.5px solid var(--blue);
  border-radius: 999px;
}

.voice-record-icon::after {
  position: absolute;
  left: 2px;
  bottom: 0;
  width: 14px;
  height: 11px;
  content: "";
  border-right: 2.5px solid var(--blue);
  border-bottom: 2.5px solid var(--blue);
  border-left: 2.5px solid var(--blue);
  border-radius: 0 0 999px 999px;
}

@keyframes voice-record-pulse {
  0% {
    opacity: 0.7;
    transform: scale(0.84);
  }

  100% {
    opacity: 0;
    transform: scale(1.25);
  }
}

.menu-button {
  display: none;
  width: 44px;
  height: 44px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.menu-button span {
  display: block;
  height: 2px;
  margin: 5px 0;
  background: var(--ink);
}

.mobile-menu {
  display: none;
}

.hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.98fr) minmax(360px, 520px);
  gap: clamp(18px, 3vw, 42px);
  align-items: center;
  min-height: calc(100vh - 78px);
  padding: clamp(58px, 8vw, 96px) clamp(20px, 3.4vw, 56px) clamp(64px, 7vw, 86px);
  overflow: hidden;
  background:
    linear-gradient(112deg, rgba(255, 255, 255, 0.96) 0 47%, rgba(255, 255, 255, 0.78) 47% 100%),
    linear-gradient(135deg, rgba(31, 98, 210, 0.18), rgba(15, 163, 154, 0.12)),
    #eef5ff;
}

.hero::after {
  position: absolute;
  right: -14vw;
  top: -24vw;
  width: 52vw;
  height: 52vw;
  content: "";
  background: radial-gradient(circle, rgba(242, 184, 75, 0.2) 0 26%, transparent 27% 100%);
  pointer-events: none;
}

.eyebrow {
  margin: 0 0 10px;
  color: var(--blue);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  max-width: 760px;
  margin-bottom: 18px;
  font-size: clamp(42px, 5.4vw, 76px);
  line-height: 1.06;
  letter-spacing: 0;
}

h2 {
  font-size: clamp(26px, 3vw, 42px);
  line-height: 1.2;
  letter-spacing: 0;
}

h3 {
  font-size: 20px;
  line-height: 1.35;
}

.hero-text {
  max-width: 760px;
  color: #475467;
  font-size: 18px;
  line-height: 1.85;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 10px 20px;
  border-radius: 8px;
  font-weight: 700;
}

.button.primary {
  color: #fff;
  background: linear-gradient(135deg, var(--blue), var(--teal));
  box-shadow: 0 12px 28px rgba(32, 103, 214, 0.22);
}

.button.ghost {
  color: var(--blue-dark);
  background:
    linear-gradient(135deg, rgba(31, 98, 210, 0.12), rgba(15, 163, 154, 0.12)),
    #fff;
  border: 1px solid rgba(31, 98, 210, 0.28);
  box-shadow: 0 10px 24px rgba(32, 103, 214, 0.1);
}

.button.ghost:hover {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(135deg, var(--blue), var(--teal));
  box-shadow: 0 14px 30px rgba(32, 103, 214, 0.2);
}

.hero-stats {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  max-width: 820px;
  margin: 34px 0 0;
}

.hero-stats a {
  display: grid;
  min-width: 0;
  color: inherit;
  text-decoration: none;
  padding: 16px 18px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(223, 231, 241, 0.9);
  border-radius: 8px;
  box-shadow: 0 10px 28px rgba(21, 32, 51, 0.05);
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.hero-stats a:hover {
  transform: translateY(-2px);
  border-color: rgba(31, 98, 210, 0.3);
  box-shadow: 0 16px 34px rgba(21, 32, 51, 0.09);
}

.hero-stats dt {
  color: var(--blue);
  font-size: 28px;
  font-weight: 800;
}

.hero-stats dd {
  margin: 0;
  color: var(--muted);
  white-space: nowrap;
  word-break: keep-all;
  font-size: 15px;
}

.hero-copy,
.hero-visual {
  position: relative;
  z-index: 1;
}

.hero-visual {
  padding: 12px;
  background: rgba(255, 255, 255, 0.58);
  border: 1px solid rgba(255, 255, 255, 0.84);
  border-radius: 22px;
  box-shadow: var(--shadow);
  justify-self: start;
  width: min(100%, 520px);
}

.hero-visual img {
  display: block;
  width: 100%;
  min-height: 340px;
  object-fit: cover;
  border-radius: 14px;
}

.leaderboard-visual {
  display: grid;
  gap: 14px;
  align-self: center;
}

.leaderboard-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.76);
  border: 1px solid rgba(219, 231, 247, 0.95);
  border-radius: 14px;
  box-shadow: 0 12px 28px rgba(28, 39, 58, 0.06);
  backdrop-filter: blur(10px);
}

.leaderboard-tabs button {
  flex: 1 1 98px;
  min-height: 46px;
  padding: 9px 13px;
  color: #2c3a4f;
  background: #f7fafc;
  border: 1px solid #dce7f5;
  border-radius: 999px;
  font: inherit;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transition:
    color 0.2s ease,
    background 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease;
}

.leaderboard-tabs button:first-child {
  flex-basis: 116px;
  color: #fff;
  background:
    linear-gradient(135deg, #1f62d2 0%, #168fbd 58%, #18a39d 100%);
  border-color: transparent;
  text-align: center;
  box-shadow: 0 12px 24px rgba(31, 98, 210, 0.2);
}

.leaderboard-tabs button:hover,
.leaderboard-tabs button.active {
  color: #fff;
  background: linear-gradient(135deg, #1f62d2, #17a39d);
  border-color: transparent;
  box-shadow: 0 12px 24px rgba(31, 98, 210, 0.18);
  transform: translateY(-2px);
}

.leaderboard-card {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  height: clamp(360px, 48vh, 470px);
  min-height: 0;
  overflow: hidden;
  padding: 24px;
  background:
    linear-gradient(135deg, rgba(31, 98, 210, 0.09), transparent 38%),
    linear-gradient(160deg, #fff 0%, #f7fbff 100%);
  border: 1px solid #d9e5f5;
  border-radius: 8px;
  box-shadow: 0 12px 30px rgba(28, 39, 58, 0.07);
}

.leaderboard-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid #e2ebf7;
}

.leaderboard-head[hidden] {
  display: none;
}

.leaderboard-head span {
  display: inline-block;
  margin-bottom: 6px;
  color: var(--teal);
  font-size: 13px;
  font-weight: 900;
}

.leaderboard-head [data-leaderboard-home] {
  cursor: pointer;
}

.leaderboard-head h2 {
  margin: 0;
  font-size: 28px;
  line-height: 1.15;
}

.leaderboard-head h2 {
  cursor: pointer;
}

.leaderboard-head h2:hover {
  color: #2067d6;
}

.leaderboard-head p {
  max-width: 260px;
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}

.leaderboard-list {
  display: grid;
  gap: 10px;
  min-height: 0;
  max-height: 100%;
  align-content: start;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-color: #9fb4cf #edf3f9;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  touch-action: pan-y;
}

.leaderboard-list.is-flash {
  grid-template-rows: auto;
  align-content: start;
  max-height: none;
  overflow: hidden;
  padding: 12px;
  background: #f8fbff;
  border: 1px dashed #d7e3f2;
  border-radius: 8px;
}

.leaderboard-card.has-flash {
  height: auto;
  min-height: 0;
}

.leaderboard-list::-webkit-scrollbar {
  width: 9px;
}

.leaderboard-list::-webkit-scrollbar-track {
  background: #edf3f9;
  border-radius: 999px;
}

.leaderboard-list::-webkit-scrollbar-thumb {
  background: #9fb4cf;
  border: 2px solid #edf3f9;
  border-radius: 999px;
}

.leaderboard-list::-webkit-scrollbar-thumb:hover {
  background: #7895b9;
}

.leaderboard-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 86px 70px;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid #e5edf7;
  border-radius: 8px;
}

.leaderboard-row.is-link {
  color: inherit;
  text-decoration: none;
}

.leaderboard-row.is-link:hover {
  border-color: #8bb8ff;
  box-shadow: 0 10px 24px rgba(37, 99, 217, 0.1);
}

.leaderboard-rank {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  color: #fff;
  background: #111827;
  border-radius: 8px;
  font-weight: 900;
}

.leaderboard-row:first-child .leaderboard-rank {
  background: #f0a91f;
}

.leaderboard-placeholder-row .leaderboard-rank {
  background: transparent;
}

.leaderboard-student strong,
.leaderboard-score strong,
.leaderboard-progress strong {
  display: block;
  color: #111827;
  font-size: 15px;
}

.leaderboard-student span,
.leaderboard-score span,
.leaderboard-progress span {
  color: var(--muted);
  font-size: 12px;
}

.leaderboard-progress {
  text-align: right;
}

.leaderboard-empty {
  min-height: 150px;
  display: grid;
  align-content: center;
  gap: 10px;
  padding: 24px;
  color: var(--muted);
  background: #fff;
  border: 1px dashed #d7e3f2;
  border-radius: 8px;
  text-align: left;
}

.leaderboard-empty p {
  max-width: 760px;
  margin: 0 auto;
  line-height: 1.7;
}

.leaderboard-flash-carousel {
  position: relative;
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  min-height: 0;
  overflow: hidden;
  background: #fff;
  border: 0;
  border-radius: 6px;
}

.leaderboard-flash-carousel:not(.is-default) {
  aspect-ratio: 2 / 1;
}

.leaderboard-flash-slide {
  position: relative;
  inset: auto;
  display: none;
  width: 100%;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

.leaderboard-flash-slide.active {
  display: block;
}

.leaderboard-flash-slide img {
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: cover;
  object-position: center top;
  display: block;
}

.leaderboard-flash-default {
  display: grid;
  align-content: center;
  width: 100%;
  height: 100%;
  padding: clamp(22px, 4vw, 42px);
  color: #fff;
  background: linear-gradient(135deg, #17365d 0%, #2167d4 58%, #1ea7a4 100%);
}

.leaderboard-flash-default span {
  width: fit-content;
  margin-bottom: 10px;
  padding: 4px 9px;
  color: #17365d;
  background: #fff;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 800;
}

.leaderboard-flash-default strong {
  font-size: clamp(26px, 4vw, 40px);
  line-height: 1.15;
}

.leaderboard-flash-default p {
  max-width: 560px;
  margin: 12px 0 0;
  color: rgba(255, 255, 255, 0.88);
  line-height: 1.7;
}

.leaderboard-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: min(220px, 100%);
  min-height: 42px;
  margin: 16px auto 0;
  color: var(--blue);
  background: #fff;
  border: 1px solid #dbe7f7;
  border-radius: 8px;
  font-weight: 900;
}

.leaderboard-more[hidden] {
  display: none;
}

.leaderboard-more b {
  width: 9px;
  height: 9px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 0.2s ease;
}

.leaderboard-more.expanded b {
  transform: rotate(225deg) translateY(-2px);
}

.pricing-page .pricing-query {
  width: 100%;
  max-width: 1480px;
  background: linear-gradient(180deg, #ffffff 0, #f5f8fc 100%);
}

.pricing-page {
  min-height: 100vh;
  background: #f5f8fc;
}

.pricing-page .site-header {
  grid-template-columns: auto minmax(0, 1fr);
  gap: 28px;
  box-shadow: none;
}

.pricing-page-nav {
  flex-wrap: nowrap;
  justify-content: center;
  gap: clamp(6px, 1vw, 14px);
  min-width: 0;
}

.pricing-page-nav a {
  flex: 0 0 auto;
  padding-inline: clamp(8px, 0.9vw, 12px);
  white-space: nowrap;
}

.pricing-page-nav a.active {
  color: var(--blue);
  font-weight: 900;
}

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

.pricing-menu {
  position: sticky;
  top: 96px;
  display: grid;
  gap: 8px;
}

.pricing-menu button {
  min-height: 48px;
  padding: 11px 14px;
  color: #24364f;
  text-align: left;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  font: inherit;
  font-weight: 900;
  box-shadow: 0 8px 22px rgba(28, 39, 58, 0.05);
}

.pricing-menu button.active,
.pricing-menu button:hover {
  color: #fff;
  background: #1f62d2;
  border-color: #1f62d2;
}

.pricing-panel {
  display: grid;
  grid-template-rows: auto auto auto;
  align-content: start;
  gap: 20px;
  height: auto;
  min-height: 760px;
  padding: 22px;
  overflow: visible;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 18px 42px rgba(28, 39, 58, 0.07);
}

.pricing-panel-head {
  display: grid;
  gap: 8px;
  padding-bottom: 18px;
  border-bottom: 1px solid #e7edf6;
}

.pricing-panel-head span {
  color: var(--teal);
  font-size: 13px;
  font-weight: 900;
}

.pricing-panel-head h3,
.pricing-panel-head p,
.pricing-detail h4,
.pricing-detail p {
  margin: 0;
}

.pricing-panel-head h3 {
  font-size: clamp(24px, 3vw, 36px);
}

.pricing-panel-head p,
.pricing-detail p {
  color: var(--muted);
}

.pricing-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  align-content: start;
  min-height: 0;
  max-height: 520px;
  padding-right: 4px;
  overflow-y: auto;
  scrollbar-gutter: stable;
}

.pricing-platform-overview {
  display: grid;
  gap: 20px;
  padding-top: 22px;
  border-top: 1px solid #e7edf6;
}

.pricing-platform-description {
  max-width: 1080px;
  margin: 0;
  color: #53647b;
  font-size: 16px;
  line-height: 1.95;
}

.pricing-platform-stats {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  margin: 0;
}

.pricing-platform-stats a {
  display: grid;
  gap: 2px;
  min-width: 0;
  min-height: 94px;
  align-content: center;
  padding: 14px 18px;
  color: inherit;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 10px 28px rgba(21, 32, 51, 0.06);
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.pricing-platform-stats a:hover {
  transform: translateY(-2px);
  border-color: rgba(31, 98, 210, 0.35);
  box-shadow: 0 16px 34px rgba(21, 32, 51, 0.1);
}

.pricing-platform-stats dt {
  color: var(--blue);
  font-size: 28px;
  font-weight: 900;
  line-height: 1.25;
}

.pricing-platform-stats dd {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  white-space: nowrap;
}

@media (max-width: 760px) {
  .pricing-platform-overview {
    gap: 16px;
    padding-top: 18px;
  }

  .pricing-platform-description {
    font-size: 15px;
    line-height: 1.8;
  }

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

  .pricing-platform-stats a {
    min-height: 82px;
    padding: 12px 14px;
  }

  .pricing-platform-stats a:last-child {
    grid-column: 1 / -1;
  }
}

/* ADMIN enterprise license reviews: monthly tables, range filters and exports. */
.admin-system-body [data-command-panel="messageManage"] .license-review-records-card {
  display: grid;
  width: 100%;
  gap: 14px;
  padding: 20px;
}

.admin-system-body [data-command-panel="messageManage"] .license-review-records-intro,
.admin-system-body [data-command-panel="messageManage"] .license-review-period-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.admin-system-body [data-command-panel="messageManage"] .license-review-records-intro {
  padding-bottom: 14px;
  border-bottom: 1px solid #e1eaf5;
}

.admin-system-body [data-command-panel="messageManage"] .license-review-records-intro span {
  display: block;
  margin-bottom: 4px;
  color: var(--teal);
  font-size: 12px;
  font-weight: 900;
}

.admin-system-body [data-command-panel="messageManage"] .license-review-records-intro h3,
.admin-system-body [data-command-panel="messageManage"] .license-review-period-heading h4 {
  margin: 0;
}

.admin-system-body [data-command-panel="messageManage"] .license-review-records-intro p {
  max-width: 580px;
  margin: 0;
  color: #637089;
  font-size: 13px;
  line-height: 1.6;
  text-align: right;
}

.admin-system-body [data-command-panel="messageManage"] .license-review-toolbar {
  display: grid;
  grid-template-columns: minmax(170px, 220px) auto minmax(170px, 220px) minmax(190px, auto);
  align-items: end;
  justify-content: end;
  gap: 10px;
  padding: 12px 14px;
  background: #f8fbff;
  border: 1px solid #dce7f4;
  border-radius: 9px;
}

.admin-system-body [data-command-panel="messageManage"] .license-review-toolbar label {
  display: grid;
  gap: 5px;
  color: #475467;
  font-size: 12px;
  font-weight: 800;
}

.admin-system-body [data-command-panel="messageManage"] .license-review-toolbar > span {
  padding-bottom: 9px;
  color: #7a879d;
  font-size: 12px;
  font-weight: 800;
}

.admin-system-body [data-command-panel="messageManage"] .license-review-toolbar input,
.admin-system-body [data-command-panel="messageManage"] .license-review-toolbar button {
  min-height: 40px;
  border-radius: 7px;
}

.admin-system-body [data-command-panel="messageManage"] .license-review-toolbar input {
  width: 100%;
  padding: 0 11px;
  color: #172033;
  background: #fff;
  border: 1px solid #cad8e9;
}

.admin-system-body [data-command-panel="messageManage"] .license-review-toolbar button {
  padding: 0 18px;
  color: #fff;
  background: linear-gradient(135deg, var(--teal), var(--blue));
  border: 0;
  font-weight: 900;
  cursor: pointer;
}

.admin-system-body [data-command-panel="messageManage"] [data-license-review-records] {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.admin-system-body [data-command-panel="messageManage"] .license-review-period {
  min-width: 0;
  overflow: hidden;
  background: #fff;
  border: 1px solid #dce7f4;
  border-radius: 10px;
}

.admin-system-body [data-command-panel="messageManage"] .license-review-period-heading {
  padding: 14px 16px;
  background: linear-gradient(135deg, #f5fbff, #f7fffd);
  border-bottom: 1px solid #dce7f4;
}

.admin-system-body [data-command-panel="messageManage"] .license-review-period-heading div > span {
  display: inline-flex;
  margin-bottom: 5px;
  padding: 3px 8px;
  color: #fff;
  background: linear-gradient(135deg, var(--blue), var(--teal));
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
}

.admin-system-body [data-command-panel="messageManage"] .license-review-period-heading div > span.history {
  background: linear-gradient(135deg, #667085, #475467);
}

.admin-system-body [data-command-panel="messageManage"] .license-review-period-heading > strong {
  padding: 5px 10px;
  color: #176c79;
  background: #e9f8f6;
  border-radius: 999px;
  font-size: 12px;
}

.admin-system-body [data-command-panel="messageManage"] .license-review-table-scroll {
  max-height: 320px;
  overflow: auto;
}

.admin-system-body [data-command-panel="messageManage"] .license-review-table {
  width: 100%;
  min-width: 2050px;
  border-collapse: collapse;
}

.admin-system-body [data-command-panel="messageManage"] .license-review-table th,
.admin-system-body [data-command-panel="messageManage"] .license-review-table td {
  padding: 11px 12px;
  color: #42526a;
  border-bottom: 1px solid #e7edf5;
  font-size: 12px;
  line-height: 1.45;
  text-align: left;
  vertical-align: middle;
  white-space: nowrap;
}

.admin-system-body [data-command-panel="messageManage"] .license-review-table th {
  position: sticky;
  z-index: 1;
  top: 0;
  color: #344054;
  background: #f6f8fc;
  font-weight: 900;
}

.admin-system-body [data-command-panel="messageManage"] .license-review-table tbody tr:hover {
  background: #f8fbff;
}

.admin-system-body [data-command-panel="messageManage"] .license-review-table tbody tr:last-child td {
  border-bottom: 0;
}

.admin-system-body [data-command-panel="messageManage"] .license-address-cell {
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.admin-system-body [data-command-panel="messageManage"] .license-file-cell small,
.admin-system-body [data-command-panel="messageManage"] .license-review-status + small {
  display: block;
  max-width: 180px;
  margin-top: 3px;
  overflow: hidden;
  color: #7a879d;
  text-overflow: ellipsis;
}

.admin-system-body [data-command-panel="messageManage"] .license-file-link {
  color: var(--blue);
  font-weight: 900;
}

.admin-system-body [data-command-panel="messageManage"] .license-review-status {
  display: inline-flex;
  padding: 4px 8px;
  color: #475467;
  background: #eef2f7;
  border-radius: 999px;
  font-weight: 900;
}

.admin-system-body [data-command-panel="messageManage"] .license-review-status.pending {
  color: #975a16;
  background: #fff4dc;
}

.admin-system-body [data-command-panel="messageManage"] .license-review-status.approved {
  color: #087765;
  background: #e6f7f3;
}

.admin-system-body [data-command-panel="messageManage"] .license-review-status.rejected {
  color: #b42318;
  background: #fff0ee;
}

.admin-system-body [data-command-panel="messageManage"] .license-review-actions {
  display: flex;
  gap: 6px;
}

.admin-system-body [data-command-panel="messageManage"] .license-review-actions button {
  min-height: 32px;
  padding: 0 11px;
  color: var(--blue);
  background: #fff;
  border: 1px solid #a9c7f4;
  border-radius: 6px;
  font-weight: 800;
  cursor: pointer;
}

.admin-system-body [data-command-panel="messageManage"] .license-review-actions button.danger {
  color: #c8322b;
  border-color: #f0aba7;
}

.admin-system-body [data-command-panel="messageManage"] .license-review-empty td {
  padding: 28px 16px;
  color: #7a879d;
  text-align: center;
}

.admin-system-body [data-command-panel="messageManage"] .license-review-period.is-current {
  border-top: 3px solid #ff5a63;
}

.admin-system-body [data-command-panel="messageManage"] .license-review-period.is-history {
  border-top: 3px solid #79cf00;
}

.admin-system-body [data-command-panel="messageManage"] .license-review-selection-toolbar,
.admin-system-body [data-command-panel="messageManage"] .license-review-summary-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 14px;
  background: #fbfcff;
  border-bottom: 1px solid #e2eaf4;
}

.admin-system-body [data-command-panel="messageManage"] .license-review-selection-toolbar > div,
.admin-system-body [data-command-panel="messageManage"] .license-review-history-selection,
.admin-system-body [data-command-panel="messageManage"] .license-review-date-range,
.admin-system-body [data-command-panel="messageManage"] .license-review-summary-toolbar > div {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.admin-system-body [data-command-panel="messageManage"]
  .license-review-selection-toolbar > .license-review-history-selection {
  flex-wrap: nowrap;
  width: auto;
  min-width: 0;
}

.admin-system-body [data-command-panel="messageManage"] .license-review-history-selection > strong {
  flex: 0 0 auto;
  white-space: nowrap;
}

.admin-system-body [data-command-panel="messageManage"] .license-review-history-selection > button {
  flex: 1 1 0;
  width: auto;
  min-width: 76px;
  max-width: 108px;
  white-space: nowrap;
}

.leaderboard-data-summary {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
  min-height: 150px;
  text-align: center;
}

.leaderboard-data-summary strong {
  display: block;
  color: var(--blue);
  font-size: 28px;
}

.leaderboard-data-summary span {
  color: var(--muted);
  font-size: 12px;
}

.admin-system-body [data-command-panel="messageManage"]
  .license-review-selection-toolbar:not(.license-review-history-toolbar) > div:last-child {
  flex: 0 1 auto;
  flex-wrap: nowrap;
  max-width: 100%;
  padding-bottom: 2px;
  overflow-x: auto;
}

.admin-system-body [data-command-panel="messageManage"]
  .license-review-selection-toolbar:not(.license-review-history-toolbar) > div:last-child button {
  flex: 0 0 auto;
  width: auto;
  white-space: nowrap;
}

.admin-system-body [data-command-panel="messageManage"] .license-review-selection-toolbar strong {
  color: #26344c;
  font-size: 13px;
}

.admin-system-body [data-command-panel="messageManage"] .license-review-selection-toolbar span,
.admin-system-body [data-command-panel="messageManage"] .license-review-summary-toolbar p {
  margin: 0;
  color: #667085;
  font-size: 12px;
}

.admin-system-body [data-command-panel="messageManage"] .license-review-selection-toolbar button,
.admin-system-body [data-command-panel="messageManage"] .license-review-summary-toolbar button {
  min-height: 35px;
  padding: 0 13px;
  color: #fff;
  background: linear-gradient(135deg, var(--teal), var(--blue));
  border: 1px solid transparent;
  border-radius: 7px;
  font-weight: 900;
  cursor: pointer;
}

.admin-system-body [data-command-panel="messageManage"] .license-review-selection-toolbar button.ghost,
.admin-system-body [data-command-panel="messageManage"] .license-review-summary-toolbar button.ghost {
  color: var(--blue);
  background: #fff;
  border-color: #b8cdf0;
}

.admin-system-body [data-command-panel="messageManage"] .license-review-selection-toolbar button.danger {
  color: #b42318;
  background: #fff5f4;
  border-color: #f1aaa5;
}

.admin-system-body [data-command-panel="messageManage"] .license-review-selection-toolbar button:disabled,
.admin-system-body [data-command-panel="messageManage"] .license-review-summary-toolbar button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.admin-system-body [data-command-panel="messageManage"] .license-review-date-range label {
  display: grid;
  gap: 3px;
  color: #475467;
  font-size: 11px;
  font-weight: 800;
}

.admin-system-body [data-command-panel="messageManage"] .license-review-date-range input {
  min-height: 35px;
  padding: 0 9px;
  color: #172033;
  background: #fff;
  border: 1px solid #cad8e9;
  border-radius: 7px;
}

.admin-system-body [data-command-panel="messageManage"] .license-reason-cell {
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.admin-system-body [data-command-panel="messageManage"] .license-review-summary {
  min-width: 0;
  overflow: hidden;
  background: #fff;
  border: 1px solid #dce7f4;
  border-radius: 10px;
}

.admin-system-body [data-command-panel="messageManage"] .license-review-period-heading div > span.summary {
  background: linear-gradient(135deg, #7747d8, #316bd4);
}

.admin-system-body [data-command-panel="messageManage"] .license-review-summary-table-wrap {
  max-height: 300px;
  overflow: auto;
}

.admin-system-body [data-command-panel="messageManage"] .license-review-summary-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
}

.admin-system-body [data-command-panel="messageManage"] .license-review-summary-table th,
.admin-system-body [data-command-panel="messageManage"] .license-review-summary-table td {
  padding: 11px 14px;
  color: #42526a;
  border-bottom: 1px solid #e7edf5;
  font-size: 12px;
  text-align: left;
}

.admin-system-body [data-command-panel="messageManage"] .license-review-summary-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  color: #344054;
  background: #f6f8fc;
  font-weight: 900;
}

@media (max-width: 760px) {
  .admin-system-body [data-command-panel="messageManage"] .license-review-records-intro {
    align-items: flex-start;
    flex-direction: column;
  }

  .admin-system-body [data-command-panel="messageManage"] .license-review-records-intro p {
    max-width: none;
    text-align: left;
  }

  .admin-system-body [data-command-panel="messageManage"] .license-review-toolbar {
    grid-template-columns: minmax(0, 1fr);
    justify-content: stretch;
  }

  .admin-system-body [data-command-panel="messageManage"] .license-review-toolbar > span {
    display: none;
  }

  .admin-system-body [data-command-panel="messageManage"] .license-review-selection-toolbar,
  .admin-system-body [data-command-panel="messageManage"] .license-review-summary-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .admin-system-body [data-command-panel="messageManage"] .license-review-selection-toolbar > div,
  .admin-system-body [data-command-panel="messageManage"] .license-review-summary-toolbar > div {
    width: 100%;
  }
}

@media (max-width: 460px) {
  .pricing-platform-stats {
    grid-template-columns: 1fr;
  }

  .pricing-platform-stats a:last-child {
    grid-column: auto;
  }
}

.pricing-page .pricing-card {
  height: auto;
}

.pricing-card {
  display: grid;
  grid-template-rows: auto auto auto 1fr auto;
  align-content: start;
  gap: 12px;
  height: 100%;
  min-height: 0;
  padding: 18px;
  background: #f8fbff;
  border: 1px solid #dfe9f6;
  border-radius: 8px;
}

.pricing-card.is-selected {
  border-color: #2d73cf;
  box-shadow: inset 0 0 0 1px rgba(45, 115, 207, 0.22);
}

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

.pricing-card-actions > button {
  width: 100%;
  min-width: 0;
  min-height: 36px;
  padding: 6px 10px;
  font-size: 14px;
  white-space: nowrap;
}

.pricing-buy-now {
  color: #fff;
  background: #169d96;
  border: 1px solid #12877f;
  border-radius: 6px;
  font-weight: 800;
  cursor: pointer;
}

.pricing-point-exchange-link {
  grid-column: 1 / -1;
  display: grid;
  min-height: 38px;
  place-items: center;
  color: #fff;
  background: linear-gradient(135deg, var(--blue), var(--teal));
  border: 1px solid transparent;
  border-radius: 6px;
  font-weight: 900;
}

.pricing-point-cost strong {
  font-size: 30px;
}

.pricing-card.featured {
  background:
    linear-gradient(135deg, rgba(17, 167, 162, 0.12), transparent 42%),
    #fff;
  border-color: rgba(17, 167, 162, 0.32);
  box-shadow: 0 14px 32px rgba(17, 167, 162, 0.12);
}

.pricing-card.featured.is-selected {
  border-color: #2d73cf;
  box-shadow: inset 0 0 0 1px rgba(45, 115, 207, 0.22), 0 14px 32px rgba(17, 167, 162, 0.12);
}

.pricing-card h4,
.pricing-card p {
  margin: 0;
}

.pricing-card > strong,
.pricing-card-price > strong {
  color: #172033;
  font-size: 30px;
  line-height: 1;
}

.pricing-card-price {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 8px 14px;
  min-height: 42px;
}

.pricing-sale-price {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  white-space: nowrap;
}

.pricing-sale-price small {
  color: #d9483b;
  font-weight: 900;
}

.pricing-sale-price strong {
  color: #d52d20;
  font-size: 34px;
  line-height: 1;
}

.pricing-original-price {
  color: #7b8799;
  font-size: 14px;
  white-space: nowrap;
}

.pricing-original-price del {
  text-decoration-thickness: 2px;
}

.pricing-card small {
  color: var(--muted);
}

.pricing-card ul,
.pricing-detail ul {
  display: grid;
  gap: 8px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.pricing-card li,
.pricing-detail li {
  padding-left: 20px;
  color: #43526a;
  background: radial-gradient(circle at 6px 10px, var(--teal) 0 4px, transparent 5px) no-repeat;
}

.pricing-card li {
  background-image: radial-gradient(circle at 6px 10px, #2d73cf 0 4px, transparent 5px);
}

.pricing-detail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.8fr);
  gap: 18px;
  padding: 20px;
  background: #f7fafc;
  border: 1px solid #e3ebf4;
  border-radius: 8px;
}

.pricing-audience-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  background: #f6faff;
  border: 1px solid #dbe8f8;
  border-radius: 8px;
}

.pricing-audience-bar strong {
  color: var(--blue-dark);
  font-size: 14px;
}

.pricing-audience-bar a {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  color: var(--blue);
  font-weight: 900;
}

.cart-count,
[data-cart-count] {
  display: inline-grid;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  place-items: center;
  color: #fff;
  background: #e53935;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
}

.cart-count[hidden],
[data-cart-count][hidden] {
  display: none;
}

.cart-panel {
  display: grid;
  gap: 10px;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid #dbe8f8;
  border-radius: 8px;
}

.cart-panel[hidden] {
  display: none;
}

.cart-panel-head,
.cart-panel-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  gap: 12px;
  align-items: center;
}

.cart-panel-head {
  grid-template-columns: minmax(0, 1fr) auto;
  color: var(--blue-dark);
}

.cart-panel-check {
  display: grid;
  place-items: center;
}

.cart-panel-check input {
  width: 18px;
  height: 18px;
  accent-color: var(--blue);
}

.cart-panel-head span,
.cart-panel-item span {
  color: var(--muted);
  font-size: 13px;
}

.cart-panel-list {
  display: grid;
  gap: 8px;
}

.cart-panel-item {
  padding: 10px;
  background: #f7fafc;
  border: 1px solid #e3ebf4;
  border-radius: 7px;
}

.cart-panel-item.is-course-unavailable {
  background: #f1f3f6;
  border-color: #c7ced8;
  opacity: 0.68;
}

.cart-panel-item.is-course-unavailable b,
.cart-panel-item.is-course-unavailable strong,
.cart-panel-item.is-course-unavailable span {
  color: #737b87;
}

.cart-panel-item b {
  color: #172033;
}

.cart-panel-item button {
  min-height: 32px;
  padding: 0 12px;
  color: #b42318;
  background: #fff1f0;
  border: 1px solid #ffd1cc;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 900;
}

.cart-panel-item button:hover {
  color: #fff;
  border-color: transparent;
  background: #d92d20;
}

.cart-point-box {
  margin-top: 2px;
  padding: 12px;
  border: 1px solid #d7e5f7;
  border-radius: 8px;
  background: #f8fbff;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr)) auto;
  gap: 10px;
  align-items: center;
}

.cart-point-box div {
  display: grid;
  gap: 4px;
}

.cart-point-box span,
.cart-point-box p {
  margin: 0;
  color: #5d6b82;
  font-size: 12px;
}

.cart-point-box strong {
  color: #132033;
  font-size: 15px;
}

.cart-point-box button {
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid #1f6ed4;
  border-radius: 8px;
  background: linear-gradient(135deg, #2563d9, #18a39b);
  color: #fff;
  font-weight: 900;
  cursor: pointer;
}

.cart-point-box button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.cart-point-box p {
  grid-column: 1 / -1;
}

.pricing-add-cart {
  min-height: 38px;
  margin-top: auto;
  padding: 0 14px;
  color: #fff;
  background: linear-gradient(135deg, #2563d9, #18a39b);
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 900;
}

.cart-recharge-pay-box {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
  gap: 10px;
  align-items: center;
  padding: 12px;
  background: #f8fbff;
  border: 1px solid #d7e5f7;
  border-radius: 8px;
}

.cart-recharge-pay-box div {
  display: grid;
  gap: 4px;
}

.cart-recharge-pay-box span,
.cart-recharge-pay-box p {
  margin: 0;
  color: #5d6b82;
  font-size: 12px;
  font-weight: 800;
}

.cart-recharge-pay-box strong {
  color: #132033;
  font-size: 16px;
}

.cart-recharge-pay-box .cart-recharge-discount {
  padding: 8px;
  background: #fff8e1;
  border: 1px solid #f6c343;
  border-radius: 7px;
}

.cart-recharge-pay-box button {
  min-height: 40px;
  padding: 0 16px;
  color: #fff;
  background: linear-gradient(135deg, #2563d9, #18a39b);
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 900;
}

.cart-recharge-pay-box button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.cart-recharge-pay-box p {
  grid-column: 1 / -1;
}

.product-level {
  display: inline-flex;
  width: fit-content;
  min-height: 28px;
  align-items: center;
  padding: 4px 10px;
  color: #0f766e;
  background: #e9f8f5;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 900;
}

.product-price {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px 10px;
  align-items: end;
  min-height: 84px;
  align-content: end;
}

.product-price del {
  color: #98a2b3;
  font-size: 15px;
  line-height: 1;
  text-decoration-thickness: 2px;
}

.product-price strong {
  color: #172033;
  font-size: 30px;
  line-height: 1;
}

.product-price small {
  grid-column: 1 / -1;
  width: fit-content;
  padding: 3px 8px;
  color: #b42318;
  background: #fff1f0;
  border-radius: 999px;
  font-weight: 900;
}

.product-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: auto;
  align-self: end;
}

.product-stock {
  margin: 0;
  color: #53627a;
  font-size: 13px;
  font-weight: 800;
}

.pricing-card.is-sold-out {
  opacity: 0.82;
}

.pricing-card.is-registration-unavailable {
  background: #f1f3f6;
  border-color: #c7ced8;
  box-shadow: none;
}

.pricing-card.is-registration-unavailable > *:not(.pricing-registration-unavailable) {
  filter: grayscale(1);
  opacity: 0.72;
}

.pricing-card.is-registration-unavailable .pricing-card-actions > button:disabled {
  background: #aeb7c3;
  border-color: #aeb7c3;
  color: #fff;
  cursor: not-allowed;
  opacity: 1;
}

.pricing-registration-unavailable {
  margin: 0 0 4px;
  color: #6b7280;
  font-weight: 800;
}

.admin-body .course-product-actions .offline {
  color: #6b7280;
  border-color: #cbd5e1;
  background: #f8fafc;
}

.product-actions button,
.product-actions a {
  display: inline-grid;
  place-items: center;
  min-height: 40px;
  padding-inline: 10px;
  border-radius: 7px;
  font-weight: 900;
  white-space: nowrap;
  word-break: keep-all;
  overflow-wrap: normal;
  line-height: 1.1;
}

.product-actions button:disabled,
.product-actions a.disabled {
  color: #8a94a6 !important;
  background: #e5e7eb !important;
  border-color: #d1d5db !important;
  cursor: not-allowed;
  box-shadow: none;
  pointer-events: none;
}

.product-actions button:first-child,
.product-actions a:first-child {
  color: var(--blue);
  background: #fff;
  border: 1px solid #cfe0f6;
}

.product-actions button:last-child,
.product-actions a:last-child {
  color: #fff;
  background: linear-gradient(135deg, var(--blue), var(--teal));
}

.product-actions a:only-child {
  grid-column: 1 / -1;
}

.quick-panel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px;
  max-width: 1180px;
  margin: -22px auto 0;
  padding: 0 20px;
  position: relative;
  z-index: 3;
}

.quick-panel a {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 82px;
  padding: 18px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 16px 36px rgba(28, 39, 58, 0.08);
  font-weight: 800;
}

.leaderboard-shortcuts {
  justify-self: end;
  grid-template-columns: repeat(5, minmax(74px, 104px));
  gap: 12px;
  width: auto;
  max-width: none;
  margin: 0 -12px 2px auto;
  padding: 0;
}

.leaderboard-shortcuts a {
  flex-direction: column;
  justify-content: center;
  gap: 7px;
  min-height: 84px;
  padding: 6px 4px;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: #232b37;
  text-align: center;
  font-size: 17px;
  line-height: 1.15;
}

.leaderboard-shortcuts .icon {
  width: 38px;
  height: 38px;
}

.icon {
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: #eaf2ff;
  color: var(--blue);
}

.icon::before,
.icon::after {
  position: absolute;
  content: "";
  box-sizing: border-box;
}

.icon.business::before {
  width: 18px;
  height: 15px;
  border: 3px solid currentColor;
  border-radius: 4px;
  transform: translateY(2px);
}

.icon.business::after {
  top: 9px;
  width: 10px;
  height: 6px;
  border: 3px solid currentColor;
  border-bottom: 0;
  border-radius: 5px 5px 0 0;
}

.icon.cart {
  background: #fff6df;
  color: var(--gold);
}

.icon.cart::before {
  width: 20px;
  height: 14px;
  border: 3px solid currentColor;
  border-top: 0;
  border-radius: 0 0 5px 5px;
  transform: translateY(-1px);
}

.icon.cart::after {
  left: 10px;
  bottom: 8px;
  width: 15px;
  height: 4px;
  background:
    radial-gradient(circle, currentColor 0 2px, transparent 2.5px) left center / 6px 4px no-repeat,
    radial-gradient(circle, currentColor 0 2px, transparent 2.5px) right center / 6px 4px no-repeat;
}

.icon.center {
  background: #e9fbf9;
  color: var(--teal);
}

.icon.center::before {
  width: 19px;
  height: 19px;
  border: 3px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
}

.icon.center::after {
  right: 9px;
  bottom: 9px;
  width: 9px;
  height: 3px;
  background: currentColor;
  border-radius: 999px;
  transform: rotate(35deg);
  transform-origin: right center;
}

.icon.login {
  background: #fff0ee;
  color: var(--coral);
}

.icon.login::before {
  bottom: 8px;
  width: 20px;
  height: 14px;
  border: 3px solid currentColor;
  border-top: 0;
  border-radius: 0 0 5px 5px;
}

.icon.login::after {
  top: 8px;
  width: 15px;
  height: 12px;
  border: 3px solid currentColor;
  border-bottom: 0;
  border-radius: 9px 9px 0 0;
}

.icon.workbench {
  background: #eaf8f6;
  color: var(--teal);
}

.icon.workbench::before {
  width: 21px;
  height: 16px;
  border: 3px solid currentColor;
  border-radius: 4px;
  transform: translateY(2px);
}

.icon.workbench::after {
  top: 8px;
  width: 11px;
  height: 6px;
  border: 3px solid currentColor;
  border-bottom: 0;
  border-radius: 5px 5px 0 0;
}

.icon.course {
  background: #eef4ff;
  color: var(--blue);
}

.icon.course::before {
  width: 18px;
  height: 22px;
  border: 3px solid currentColor;
  border-radius: 4px;
}

.icon.course::after {
  width: 10px;
  height: 3px;
  background: currentColor;
  border-radius: 999px;
  box-shadow: 0 6px 0 currentColor;
}

.icon.teaching {
  background: #edf7ff;
  color: #1f62d2;
}

.icon.teaching::before {
  width: 19px;
  height: 15px;
  border: 3px solid currentColor;
  border-radius: 4px;
  transform: translateY(3px);
}

.icon.teaching::after {
  top: 8px;
  width: 13px;
  height: 8px;
  border: 3px solid currentColor;
  border-bottom: 0;
  border-radius: 6px 6px 0 0;
}

.mega {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  max-width: 1180px;
  margin: 34px auto 0;
  padding: 0 20px;
}

.mega-column {
  padding: 26px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 14px 34px rgba(21, 32, 51, 0.05);
}

.mega-column h2 {
  margin-bottom: 18px;
  font-size: 22px;
}

.tag-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.tag-grid a {
  padding: 9px 13px;
  color: #28405f;
  background: var(--soft);
  border: 1px solid #e4eaf2;
  border-radius: 7px;
}

.tag-grid.compact a {
  color: #635129;
  background: #fff8e5;
  border-color: #f5e3ad;
}

.section {
  max-width: 1180px;
  margin: 0 auto;
  padding: 92px 20px;
}

.section-heading {
  max-width: 820px;
  margin-bottom: 38px;
}

#system .section-heading {
  max-width: none;
}

#system .section-heading h2 {
  white-space: nowrap;
}

.section-heading p:not(.eyebrow),
.split p,
.three-up p,
.about-body p {
  color: var(--muted);
}

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

.process article,
.course-card,
.three-up article {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.process article {
  min-height: 210px;
  padding: 22px;
  box-shadow: 0 14px 34px rgba(21, 32, 51, 0.05);
}

.process span {
  display: inline-grid;
  width: 44px;
  height: 44px;
  margin-bottom: 22px;
  place-items: center;
  color: #fff;
  font-weight: 800;
  background: linear-gradient(135deg, var(--blue), var(--teal));
  border-radius: 8px;
}

.system-section {
  padding-top: 58px;
}

.system-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.system-grid article {
  position: relative;
  min-height: 250px;
  padding: 22px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 12px 30px rgba(21, 32, 51, 0.045);
}

.system-grid article::before {
  position: absolute;
  right: -28px;
  bottom: -34px;
  width: 100px;
  height: 100px;
  content: "";
  background: rgba(32, 103, 214, 0.08);
  border-radius: 50%;
}

.system-grid b {
  display: inline-flex;
  margin-bottom: 18px;
  color: var(--teal);
  font-size: 14px;
}

.talent-hub-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.talent-hub-card {
  position: relative;
  display: grid;
  min-height: 260px;
  padding: 28px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 16px 38px rgba(21, 32, 51, 0.055);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.talent-hub-card::before {
  position: absolute;
  right: -46px;
  bottom: -56px;
  width: 150px;
  height: 150px;
  content: "";
  background: rgba(31, 98, 210, 0.08);
  border-radius: 50%;
}

.talent-hub-card::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(135deg, rgba(15, 163, 154, 0.08), transparent 42%);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.talent-hub-card:hover,
.talent-hub-card.active {
  border-color: rgba(31, 98, 210, 0.48);
  box-shadow: 0 24px 58px rgba(21, 32, 51, 0.12);
  transform: translateY(-4px);
}

.talent-hub-card:hover::after,
.talent-hub-card.active::after {
  opacity: 1;
}

.talent-hub-card span,
.talent-hub-card h3,
.talent-hub-card p,
.talent-hub-card b {
  position: relative;
  z-index: 1;
}

.talent-hub-card span {
  width: fit-content;
  height: fit-content;
  padding: 5px 10px;
  color: #fff;
  background: linear-gradient(135deg, var(--blue), var(--teal));
  border-radius: 6px;
  font-size: 13px;
  font-weight: 800;
}

.talent-hub-card h3 {
  margin: 24px 0 12px;
  font-size: 24px;
}

.talent-hub-card p {
  color: var(--muted);
}

.talent-hub-card b {
  align-self: end;
  color: var(--blue);
}

.career-planning-section {
  padding-top: 54px;
  padding-bottom: 54px;
}

.career-planning-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.career-planning-card {
  position: relative;
  display: grid;
  min-height: 260px;
  padding: 28px;
  overflow: hidden;
  background: #fff;
  border: 1px solid #dbe7f7;
  border-radius: 8px;
  box-shadow: 0 18px 42px rgba(21, 32, 51, 0.07);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.career-planning-card::before {
  position: absolute;
  right: -46px;
  bottom: -56px;
  width: 150px;
  height: 150px;
  content: "";
  background: rgba(124, 85, 255, 0.1);
  border-radius: 50%;
}

.career-planning-card::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(135deg, rgba(124, 85, 255, 0.08), transparent 42%);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.career-planning-card:hover {
  border-color: rgba(124, 85, 255, 0.46);
  box-shadow: 0 24px 58px rgba(21, 32, 51, 0.12);
  transform: translateY(-4px);
}

.career-planning-card:hover::after {
  opacity: 1;
}

.career-planning-card span,
.career-planning-card h3,
.career-planning-card p,
.career-planning-card b {
  position: relative;
  z-index: 1;
}

.career-planning-card span {
  width: fit-content;
  height: fit-content;
  padding: 5px 10px;
  color: #fff;
  background: linear-gradient(135deg, #7c55ff, var(--blue));
  border-radius: 6px;
  font-size: 13px;
  font-weight: 800;
}

.career-planning-card h3 {
  margin: 24px 0 12px;
  font-size: 24px;
}

.career-planning-card p {
  color: var(--muted);
}

.career-planning-card b {
  align-self: end;
  color: var(--blue);
}

.talent-detail {
  display: block;
  margin-top: 28px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}

.talent-detail-side {
  max-width: 820px;
  padding: 0;
  color: var(--ink);
  background: transparent;
  border-radius: 0;
}

.talent-detail-side span {
  display: inline-flex;
  margin-bottom: 12px;
  padding: 0;
  color: var(--blue);
  background: transparent;
  border-radius: 0;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.talent-detail-side h3 {
  margin-bottom: 14px;
  font-size: clamp(30px, 4vw, 46px);
  line-height: 1.18;
}

.talent-detail-side p {
  margin: 0 0 28px;
  color: var(--muted);
  font-size: 16px;
}

.talent-detail-body {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  max-width: none;
}

.talent-panel {
  position: relative;
  display: block;
  min-height: 330px;
  padding: 28px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 16px 38px rgba(21, 32, 51, 0.055);
}

.talent-panel::before {
  position: absolute;
  right: -46px;
  bottom: -56px;
  width: 150px;
  height: 150px;
  content: "";
  background: rgba(31, 98, 210, 0.08);
  border-radius: 50%;
}

.talent-panel::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(135deg, rgba(15, 163, 154, 0.08), transparent 42%);
  pointer-events: none;
}

.talent-panel h4,
.talent-panel p,
.talent-panel ul,
.talent-panel a {
  position: relative;
  z-index: 1;
}

.talent-panel.active {
  border-color: rgba(31, 98, 210, 0.48);
  box-shadow: 0 24px 58px rgba(21, 32, 51, 0.12);
}

.talent-panel h4 {
  margin: 0 0 14px;
  font-size: 24px;
  line-height: 1.25;
}

.talent-panel p {
  color: var(--muted);
}

.talent-panel ul {
  display: grid;
  gap: 10px;
  padding: 0;
  margin: 20px 0 24px;
  list-style: none;
}

.talent-panel li {
  padding-left: 28px;
  color: #334155;
  background:
    radial-gradient(circle at 8px 12px, var(--teal) 0 5px, transparent 6px)
    no-repeat;
}

.talent-panel a {
  display: inline-flex;
  min-height: auto;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: var(--blue);
  background: transparent;
  border-radius: 0;
  font-weight: 800;
}

.path-builder {
  display: grid;
  grid-template-columns: minmax(240px, 0.8fr) minmax(320px, 1fr);
  gap: 22px;
  align-items: start;
  margin-top: 24px;
  padding: 26px;
  color: #fff;
  background:
    linear-gradient(135deg, rgba(31, 98, 210, 0.22), transparent 42%),
    #152033;
  border-radius: 8px;
  box-shadow: 0 24px 60px rgba(21, 32, 51, 0.16);
}

.path-builder p {
  color: #c8d2df;
}

.path-form {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 12px;
}

.path-form label {
  display: grid;
  gap: 7px;
  color: #dbe5f1;
  font-size: 13px;
  font-weight: 700;
}

.path-form select,
.path-form button {
  min-height: 46px;
  padding: 10px 12px;
  border: 0;
  border-radius: 7px;
}

.path-form button {
  align-self: end;
  color: #fff;
  background: linear-gradient(135deg, var(--teal), var(--blue));
  cursor: pointer;
}

.path-result {
  grid-column: 2;
  padding: 18px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
}

.path-result strong {
  display: block;
  margin-bottom: 8px;
  color: #fff;
}

.smart-support {
  background: #fff;
}

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

.smart-support-card {
  display: grid;
  align-content: start;
  gap: 18px;
  min-height: 236px;
  padding: 22px;
  color: #172033;
  text-align: left;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
}

.smart-support-card span {
  display: inline-grid;
  width: 40px;
  height: 40px;
  place-items: center;
  color: #fff;
  background: linear-gradient(135deg, var(--blue), var(--teal));
  border-radius: 8px;
  font-weight: 900;
}

.smart-support-card strong {
  font-size: 24px;
}

.smart-support-card p {
  margin: 0;
  color: var(--muted);
}

.smart-support-card:hover,
.smart-support-card.active {
  border-color: var(--blue);
  box-shadow: 0 18px 44px rgba(21, 32, 51, 0.09);
  transform: translateY(-2px);
}

.smart-support-detail {
  display: none;
  grid-template-columns: minmax(260px, 0.82fr) minmax(0, 1fr);
  gap: 24px;
  margin-top: 18px;
  padding: 24px;
  background: #172033;
  border-radius: 8px;
  box-shadow: 0 18px 42px rgba(21, 32, 51, 0.12);
}

.smart-support-detail.is-open {
  display: grid;
}

.smart-support-detail > div {
  color: #fff;
}

.smart-support-detail span {
  display: inline-block;
  margin-bottom: 12px;
  color: #83e0d7;
  font-size: 13px;
  font-weight: 900;
}

.smart-support-detail h3 {
  margin-bottom: 12px;
  font-size: 28px;
}

.smart-support-detail p {
  margin: 0;
  color: #c8d2df;
}

.support-panel {
  display: none;
  padding: 24px;
  background: #fff;
  border-radius: 8px;
}

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

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

.support-panel li {
  padding-left: 28px;
  color: #344054;
  background:
    radial-gradient(circle at 8px 12px, var(--teal) 0 5px, transparent 6px)
    no-repeat;
}

.band {
  max-width: none;
  padding-inline: max(20px, calc((100vw - 1180px) / 2 + 20px));
  background:
    linear-gradient(180deg, #eef5ff 0, #f7fbff 100%);
}

.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 24px;
}

.tabs button {
  padding: 9px 14px;
  color: #344054;
  border: 1px solid #cdd8e7;
  border-radius: 7px;
  background: #fff;
  cursor: pointer;
}

.tabs button.active {
  color: #fff;
  border-color: var(--blue);
  background: var(--blue);
}

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

.course-card {
  display: grid;
  grid-column: span 2;
  align-content: start;
  gap: 12px;
  min-height: 280px;
  padding: 26px;
  background:
    linear-gradient(145deg, rgba(31, 98, 210, 0.05), transparent 42%),
    #fff;
  border: 1px solid #dce7f5;
  border-radius: 12px;
  box-shadow: 0 16px 38px rgba(21, 32, 51, 0.06);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.course-card:hover {
  transform: translateY(-3px);
  border-color: rgba(31, 98, 210, 0.28);
  box-shadow: 0 24px 54px rgba(21, 32, 51, 0.12);
}

.course-card.is-hidden {
  display: none;
}

.course-grid .course-card:nth-child(4) {
  grid-column: 1 / span 3;
  justify-self: stretch;
  width: auto;
}

.course-grid .course-card:nth-child(5) {
  grid-column: 4 / span 3;
  justify-self: stretch;
  width: auto;
}

.course-grid.is-filtered .course-card:not(.is-hidden) {
  grid-column: 1 / -1;
  align-content: center;
  min-height: 230px;
}

.course-grid.is-filtered .course-card:not(.is-hidden) p {
  max-width: 760px;
}

.course-grid.is-filtered .course-card:not(.is-hidden) ul {
  margin-top: 12px;
}

.course-type {
  width: fit-content;
  padding: 7px 11px;
  color: var(--blue-dark);
  background: #e9f1ff;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
}

.course-card h3 {
  margin-top: 6px;
  font-size: 22px;
  line-height: 1.25;
}

.course-card p {
  color: #344054;
}

.course-card ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
  margin: auto 0 0;
  list-style: none;
}

.course-card li {
  padding: 6px 9px;
  color: #475467;
  background: #f5f7fb;
  border-radius: 999px;
  font-size: 13px;
}

.split {
  display: grid;
  grid-template-columns: minmax(280px, 0.8fr) minmax(320px, 1fr);
  gap: 42px;
  align-items: center;
}

.timeline {
  display: grid;
  gap: 12px;
}

.timeline div {
  display: flex;
  align-items: center;
  min-height: 58px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 10px 28px rgba(28, 39, 58, 0.05);
}

.timeline span {
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  margin-right: 12px;
  background: var(--teal);
  border-radius: 50%;
  box-shadow: 0 0 0 6px rgba(17, 167, 162, 0.12);
}

.about-intro {
  display: grid;
  gap: 34px;
}

.about-intro-head {
  max-width: 840px;
}

.about-intro-head p:not(.eyebrow),
.about-intro-card p,
.about-intro-list p {
  color: var(--muted);
}

.about-intro-layout {
  display: grid;
  grid-template-columns: minmax(320px, 0.86fr) minmax(420px, 1fr);
  gap: 18px;
  align-items: stretch;
}

.about-intro-card,
.about-intro-list article {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 14px 34px rgba(21, 32, 51, 0.055);
}

.about-intro-card {
  position: relative;
  min-height: 360px;
  padding: 30px;
  overflow: hidden;
}

.about-intro-card.primary {
  color: #fff;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.18), transparent 44%),
    linear-gradient(135deg, var(--blue), var(--teal));
  border: 0;
}

.about-intro-card::after {
  position: absolute;
  right: -58px;
  bottom: -76px;
  width: 190px;
  height: 190px;
  content: "";
  background: rgba(255, 255, 255, 0.16);
  border-radius: 50%;
}

.about-intro-card span {
  display: inline-flex;
  margin-bottom: 24px;
  padding: 6px 10px;
  color: var(--blue-dark);
  background: #fff;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 800;
}

.about-intro-card h3 {
  max-width: 420px;
  margin-bottom: 16px;
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1.18;
}

.about-intro-card p {
  position: relative;
  z-index: 1;
  max-width: 520px;
  margin-bottom: 0;
  color: rgba(255, 255, 255, 0.88);
}

.about-intro-list {
  display: grid;
  gap: 14px;
}

.about-intro-list article {
  position: relative;
  min-height: 110px;
  padding: 22px 24px 22px 56px;
}

.about-intro-list article::before {
  position: absolute;
  left: 24px;
  top: 28px;
  width: 13px;
  height: 13px;
  content: "";
  background: var(--teal);
  border-radius: 50%;
  box-shadow: 0 0 0 6px rgba(17, 167, 162, 0.12);
}

.about-intro-list b {
  display: block;
  margin-bottom: 6px;
  font-size: 18px;
}

.about-intro-list p {
  margin-bottom: 0;
}

.dashboard-section {
  padding-top: 24px;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 1fr;
  gap: 16px;
}

.dashboard-grid article {
  min-height: 230px;
  padding: 24px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 12px 30px rgba(28, 39, 58, 0.05);
}

.profile-card {
  color: #fff;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.18), transparent 42%),
    linear-gradient(135deg, #1f62d2, #0fa39a) !important;
  border: 0 !important;
}

.profile-card p {
  color: rgba(255, 255, 255, 0.86);
}

.avatar {
  display: grid;
  width: 58px;
  height: 58px;
  margin-bottom: 18px;
  place-items: center;
  color: var(--blue);
  background: #fff;
  border-radius: 8px;
  font-size: 24px;
  font-weight: 800;
}

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

.check-list li {
  padding-left: 26px;
  background:
    radial-gradient(circle at 8px 12px, var(--teal) 0 5px, transparent 6px)
    no-repeat;
}

.score-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid #edf1f6;
}

.score-row:last-child {
  border-bottom: 0;
}

.score-row b {
  color: var(--blue);
  font-size: 24px;
}

.role-console {
  max-width: none;
  padding-inline: max(20px, calc((100vw - 1180px) / 2 + 20px));
  background: linear-gradient(180deg, #f5f8fd 0, #eef5f2 100%);
}

.role-layout {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

.role-auth-panel,
.role-card,
.role-summary article,
.role-summary .summary-profile-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 14px 34px rgba(28, 39, 58, 0.06);
}

.role-auth-panel {
  position: sticky;
  top: 96px;
  display: grid;
  gap: 16px;
  padding: 20px;
}

.role-panel-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

.role-panel-head span,
.role-summary span,
.stat-item span,
.record-list span {
  color: var(--muted);
  font-size: 13px;
}

.role-panel-head strong {
  color: var(--blue);
}

.role-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  padding: 4px;
  background: #edf2f8;
  border-radius: 8px;
}

.role-tabs button,
.role-ghost-button {
  min-height: 38px;
  color: #43526a;
  background: transparent;
  border: 0;
  border-radius: 6px;
  font-weight: 800;
}

.role-tabs button.active {
  color: var(--blue);
  background: #fff;
  box-shadow: 0 6px 18px rgba(28, 39, 58, 0.08);
}

.auth-deep-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.auth-deep-links a {
  display: grid;
  min-height: 36px;
  place-items: center;
  color: var(--blue);
  background: #f6f9ff;
  border: 1px solid #dbe7f7;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 800;
}

.auth-deep-links a.active {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(135deg, var(--blue), var(--teal));
}

.role-form {
  display: grid;
  gap: 12px;
}

.auth-form {
  display: none;
}

.auth-form.active {
  display: grid;
}

.role-form label {
  display: grid;
  gap: 6px;
  color: #43526a;
  font-size: 13px;
  font-weight: 800;
}

.role-form input,
.role-form select,
.role-form textarea {
  width: 100%;
  min-height: 42px;
  min-width: 0;
  padding: 10px 12px;
  color: #172033;
  background: #fff;
  border: 1px solid #dbe3ee;
  border-radius: 7px;
  font: inherit;
}

.role-form textarea {
  resize: vertical;
}

.role-check-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.role-check-section {
  display: grid;
  gap: 8px;
}

.role-check-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.role-check-group-title {
  display: flex;
  align-items: center;
  min-height: 20px;
  color: #44546a;
  font-size: 12px;
  font-weight: 900;
}

.role-check-option {
  display: flex !important;
  min-height: 40px;
  align-items: center;
  gap: 8px !important;
  padding: 8px 10px;
  color: #172033 !important;
  background: #fff;
  border: 1px solid #dbe3ee;
  border-radius: 7px;
  cursor: pointer;
}

.role-check-option input {
  width: 16px;
  min-width: 16px;
  height: 16px;
  min-height: 16px;
  padding: 0;
  accent-color: var(--blue);
}

.role-check-option span {
  font-size: 13px;
  font-weight: 900;
}

.user-edit-form #userTeacherScopeList {
  grid-column: 1 / -1;
}

.teacher-scope-options {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.teacher-scope-options .role-check-option {
  display: grid !important;
  grid-template-columns: minmax(0, 1.2fr) minmax(112px, 0.8fr);
  align-items: center;
  min-height: 56px;
  padding: 8px 10px;
  cursor: default;
}

.teacher-scope-options .role-check-option span {
  overflow: visible;
  line-height: 1.35;
  overflow-wrap: anywhere;
  white-space: normal;
}

.teacher-scope-options .role-check-option select {
  width: 100%;
  min-height: 32px;
  padding: 6px 8px;
  border: 1px solid #dbe3ee;
  border-radius: 6px;
  background: #fff;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
}

@media (max-width: 900px) {
  .teacher-scope-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .teacher-scope-options {
    grid-template-columns: 1fr;
  }
}

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

.test-account-grid button {
  min-height: 42px;
  color: #155bd4;
  background: #f6f9ff;
  border: 1px solid #cfe0f6;
  border-radius: 7px;
  font-weight: 900;
}

.role-lookup-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: end;
}

.role-lookup-row button {
  min-height: 42px;
  padding: 0 14px;
}

.role-lookup-result {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  color: #172033;
  background: #f8fbff;
  border: 1px solid #dbe8f7;
  border-radius: 7px;
  font-size: 13px;
}

.role-lookup-result strong,
.role-lookup-result span,
.role-lookup-result p {
  margin: 0;
}

.role-lookup-result.is-empty {
  color: var(--muted);
  background: transparent;
  border-style: dashed;
}

.role-form button {
  min-height: 44px;
  border-radius: 7px;
  background: linear-gradient(135deg, var(--teal), var(--blue));
}

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

.role-ghost-button {
  border: 1px solid #dbe3ee;
}

.role-tip {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.role-workbench {
  display: grid;
  gap: 18px;
}

.role-summary,
.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.role-summary article,
.role-summary .summary-profile-card,
.stat-item {
  display: grid;
  gap: 8px;
  min-height: 94px;
  padding: 18px;
}

.role-summary strong,
.stat-item strong {
  color: #172033;
  font-size: 24px;
  line-height: 1.1;
}

.role-summary .summary-profile-card {
  width: 100%;
  text-align: left;
  font: inherit;
  cursor: pointer;
}

.role-summary .summary-profile-card small {
  color: var(--muted);
  font-size: 12px;
}

.role-summary .summary-profile-card.active,
.role-summary .summary-profile-card:hover {
  border-color: #9bc9ff;
  background: #f6fbff;
}

.permission-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 44px;
  padding: 12px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.permission-list span,
.role-matrix span {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 5px 10px;
  color: #145d57;
  background: #e9f8f5;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
}

.command-shell {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  align-items: start;
}

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

.command-menu button {
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 2px 12px;
  min-height: 76px;
  padding: 13px;
  color: #43526a;
  text-align: left;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 10px 26px rgba(28, 39, 58, 0.05);
}

.command-menu button span {
  grid-row: span 2;
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  color: #fff;
  background: #667085;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 900;
}

.command-menu button strong {
  color: #172033;
  line-height: 1.2;
}

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

.command-menu button.active {
  border-color: rgba(31, 98, 210, 0.32);
  box-shadow: 0 18px 36px rgba(31, 98, 210, 0.12);
}

.command-menu button.active span {
  background: linear-gradient(135deg, var(--teal), var(--blue));
}

.command-stage {
  min-height: 520px;
  padding: 24px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 18px 42px rgba(28, 39, 58, 0.07);
}

.command-panel {
  display: none;
}

.command-panel.active {
  display: grid;
  gap: 18px;
}

.command-heading {
  display: grid;
  gap: 8px;
  padding-bottom: 18px;
  border-bottom: 1px solid #e8eef6;
}

.command-heading span {
  color: var(--blue);
  font-size: 13px;
  font-weight: 900;
}

.command-heading h3,
.command-heading p {
  margin: 0;
}

.command-heading h3 {
  font-size: clamp(22px, 3vw, 34px);
}

.command-heading p {
  max-width: 760px;
  color: var(--muted);
}

.overview-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 16px;
}

.user-management-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.72fr);
  gap: 16px;
  align-items: start;
}

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

.user-management-main .role-card:last-child {
  grid-column: 1 / -1;
}

.overview-grid .role-card:first-child {
  grid-row: span 2;
}

.role-card {
  display: grid;
  align-content: start;
  gap: 14px;
  min-height: 220px;
  padding: 22px;
}

.role-card h3,
.role-card p {
  margin: 0;
}

.role-card p {
  color: var(--muted);
}

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

.stat-item {
  background: #f7fafc;
  border: 1px solid #e3ebf4;
  border-radius: 8px;
}

.role-matrix,
.record-list,
.company-grid {
  display: grid;
  gap: 10px;
}

.matrix-row,
.record-item,
.company-item {
  display: grid;
  gap: 7px;
  padding: 12px;
  background: #f7fafc;
  border: 1px solid #e3ebf4;
  border-radius: 8px;
}

.role-matrix-row {
  position: relative;
  min-height: 86px;
  padding-bottom: 42px;
}

.role-delete-button {
  position: absolute;
  right: 12px;
  bottom: 10px;
  min-height: 28px;
  padding: 0 10px;
  color: #b42318;
  background: #fff5f5;
  border: 1px solid #ffd1d1;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.role-delete-button:hover {
  color: #fff;
  border-color: transparent;
  background: #d92d20;
}

.matrix-row strong,
.record-item strong,
.company-item strong {
  color: #172033;
}

.company-grid {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  max-height: 520px;
  overflow: auto;
}

.company-item span {
  color: var(--blue);
  font-size: 13px;
  font-weight: 900;
}

/* Company management: keep the company name and region on separate rows. */
.admin-body .company-grid .company-item {
  align-content: start;
  padding-right: 14px;
}

.admin-body .company-item > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.admin-body .company-item > div > strong,
.admin-body .company-item > div > span {
  display: block;
  min-width: 0;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.admin-body .company-item .danger {
  justify-self: start;
}

.record-item p {
  margin: 0;
  color: #43526a;
  font-size: 14px;
}

.course-teacher-list {
  display: grid;
  gap: 6px;
  color: #43526a;
  font-size: 13px;
}

.course-teacher-label {
  color: #172033;
  font-weight: 900;
}

.course-teacher-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  line-height: 1.35;
}

.course-teacher-row button {
  min-height: 26px;
  padding: 0 8px;
  color: #b42318;
  background: #fff5f5;
  border: 1px solid #ffd1d1;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.course-teacher-row button:hover {
  color: #fff;
  background: #d92d20;
  border-color: transparent;
}

.course-teacher-empty {
  color: #7a8799;
}

.role-hidden {
  display: none !important;
}

.assigned-role-panel {
  position: sticky;
  top: 96px;
}

.assigned-role-panel > p {
  margin: 0;
  color: var(--muted);
}

.assigned-role-list {
  display: grid;
  gap: 10px;
  max-height: 620px;
  overflow: auto;
}

.user-side-list {
  max-height: 620px;
  overflow: auto;
}

.user-list-item {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 54px;
  gap: 8px 10px;
  align-items: center;
  padding: 13px 10px 13px 14px;
  background: #f7fafc;
  border-bottom: 1px solid #dfe8f3;
}

.user-list-item:last-child {
  border-bottom: 0;
}

.user-list-item.is-disabled {
  background: #f6f7f9;
  opacity: 0.72;
}

.user-list-item strong,
.user-list-item span {
  display: block;
}

.user-list-item span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.user-list-item b {
  color: #04786f;
  font-size: 12px;
  text-align: center;
  white-space: nowrap;
}

.user-list-item .record-actions {
  position: static;
  grid-column: 2;
  justify-content: center;
}

.user-edit-summary {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.user-edit-summary span {
  min-width: 0;
  padding: 8px 10px;
  overflow: hidden;
  color: #34435c;
  background: #f8fbff;
  border: 1px solid #dfe8f3;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-edit-form {
  grid-template-columns: 1fr;
}

.user-edit-form button {
  grid-column: 1 / -1;
}

.role-switch-field {
  display: flex !important;
  min-height: 38px;
  flex-direction: row !important;
  align-items: center;
  gap: 8px !important;
  padding: 8px 10px;
  border: 1px solid #dbe3ee;
  border-radius: 7px;
}

.role-switch-field input {
  width: 16px;
  min-width: 16px;
  height: 16px;
  min-height: 16px;
  padding: 0;
  accent-color: var(--blue);
}

.assigned-role-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 14px;
  background: #f7fafc;
  border: 1px solid #dfe8f3;
  border-radius: 8px;
}

.assigned-role-item.is-disabled {
  background: #f6f7f9;
  opacity: 0.72;
}

.assigned-role-item strong,
.assigned-role-item span {
  display: block;
}

.assigned-role-item span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
}

.role-switch {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 92px;
  min-height: 36px;
  justify-content: center;
  color: #43526a;
  background: #eef2f7;
  border: 1px solid #d7e1ec;
  border-radius: 999px;
  font-weight: 900;
}

.role-switch span {
  position: relative;
  width: 28px;
  height: 16px;
  background: #98a2b3;
  border-radius: 999px;
}

.role-switch span::after {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 10px;
  height: 10px;
  content: "";
  background: #fff;
  border-radius: 50%;
  transition: transform 0.18s ease;
}

.role-switch.is-on {
  color: #0f766e;
  background: #e9f8f5;
  border-color: #bce7df;
}

.role-switch.is-on span {
  background: linear-gradient(135deg, var(--teal), var(--blue));
}

.role-switch.is-on span::after {
  transform: translateX(12px);
}

.three-up {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.three-up article {
  min-height: 300px;
  padding: 28px;
}

.three-up article:nth-child(1) {
  border-top: 5px solid var(--coral);
}

.three-up article:nth-child(2) {
  border-top: 5px solid var(--blue);
}

.three-up article:nth-child(3) {
  border-top: 5px solid var(--gold);
}

.three-up a {
  display: inline-flex;
  margin-top: 16px;
  color: var(--blue);
  font-weight: 800;
}

.enterprise {
  max-width: none;
  padding-inline: max(20px, calc((100vw - 1180px) / 2 + 20px));
  background:
    linear-gradient(180deg, #fff8e8 0, #fffdf7 100%);
}

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

.enterprise-grid article {
  min-height: 230px;
  padding: 24px;
  background: #fff;
  border: 1px solid #f1d99d;
  border-radius: 8px;
}

.enterprise-grid h3 {
  color: #704f07;
}

.faq-section {
  padding-top: 58px;
}

.faq-list {
  display: grid;
  gap: 12px;
}

.faq-list details {
  padding: 20px 22px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.faq-list summary {
  cursor: pointer;
  font-weight: 800;
}

.faq-list p {
  margin: 12px 0 0;
  color: var(--muted);
}

.about {
  border-top: 1px solid var(--line);
}

.about-body {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.about-body p {
  min-height: 220px;
  padding: 24px;
  margin: 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.floating-service {
  position: fixed;
  right: 18px;
  top: 60%;
  z-index: 10;
  display: grid;
  gap: 8px;
  width: 118px;
  padding: 10px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(246, 250, 255, 0.94)),
    linear-gradient(135deg, rgba(31, 98, 210, 0.08), rgba(17, 167, 162, 0.08));
  border: 1px solid rgba(207, 224, 243, 0.95);
  border-radius: 18px;
  box-shadow: 0 20px 44px rgba(25, 57, 102, 0.16);
  transform: translateY(-50%);
  backdrop-filter: blur(10px);
}

.floating-service,
.strict-service {
  overflow: visible;
}

.floating-service a {
  position: relative;
  display: flex;
  min-height: 38px;
  align-items: center;
  gap: 7px;
  padding: 0 10px;
  color: #344054;
  text-align: left;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid #dce8f4;
  border-radius: 10px;
  box-shadow: 0 8px 18px rgba(31, 98, 210, 0.06);
  font-size: 12px;
  font-weight: 900;
  text-decoration: none;
  transition:
    color 0.18s ease,
    background 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease;
}

.floating-service-title {
  display: block;
  padding: 2px 4px 4px;
  color: #607089;
  text-align: center;
  font-size: 12px;
  font-weight: 900;
}

.floating-service a::before {
  content: "";
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  background: linear-gradient(135deg, #18a39b, #1f6ed4);
  border-radius: 999px;
  box-shadow: 0 0 0 4px rgba(31, 98, 210, 0.08);
}

.floating-service a:hover {
  color: #fff;
  background: linear-gradient(135deg, #2067d6, #11a7a2);
  border-color: transparent;
  box-shadow: 0 12px 24px rgba(31, 98, 210, 0.2);
  transform: translateX(-2px);
}

.floating-service a:hover::before {
  background: #fff;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.2);
}

.online-service-dialog {
  position: fixed;
  right: 22px;
  bottom: 78px;
  z-index: 80;
  width: min(420px, calc(100vw - 28px));
}

.staff-support-launcher {
  position: fixed;
  right: 22px;
  top: calc(50% + 188px);
  bottom: auto;
  z-index: 78;
  display: grid;
  gap: 4px;
  min-width: 92px;
  padding: 12px 14px;
  color: #fff;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, #1f6ed4, #18a39b);
  box-shadow: 0 18px 38px rgba(31, 110, 212, 0.28);
  cursor: pointer;
}

.staff-support-launcher span {
  font-weight: 900;
  font-size: 13px;
}

.staff-support-launcher b {
  position: absolute;
  top: -8px;
  right: -6px;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  color: #fff;
  background: #ef4444;
  border: 2px solid #fff;
  border-radius: 999px;
  font-size: 12px;
  line-height: 18px;
}

.staff-support-dialog {
  position: fixed;
  right: 22px;
  top: 24px;
  bottom: 24px;
  z-index: 82;
  width: min(360px, calc(100vw - 28px));
}

.staff-support-card {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  height: 100%;
  max-height: none;
  overflow: hidden;
  background: #fff;
  border: 1px solid #d8e6f5;
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(23, 32, 51, 0.22);
}

.staff-support-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px 12px;
  color: #fff;
  background: linear-gradient(135deg, #1f6ed4, #18a39b);
}

.staff-support-head span {
  display: block;
  margin-bottom: 4px;
  font-size: 12px;
  font-weight: 900;
}

.staff-support-head h2 {
  margin: 0;
  font-size: 18px;
  line-height: 1.25;
}

.staff-support-head button {
  width: 28px;
  height: 28px;
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
}

.staff-support-layout {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 0;
  height: auto;
  background: #f6f9fd;
}

.staff-support-list {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 150px;
  align-content: start;
  gap: 6px;
  padding: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  border-right: 0;
  border-bottom: 1px solid #e2edf8;
}

.staff-support-list button {
  display: block;
  width: 100%;
  padding: 8px 9px;
  text-align: left;
  color: #172033;
  background: #fff;
  border: 1px solid #dce8f5;
  border-radius: 10px;
  cursor: pointer;
}

.staff-support-list button.active {
  color: #0f5fbf;
  border-color: #9bc9ff;
  background: #eef7ff;
}

.staff-support-list strong {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  font-size: 12px;
  line-height: 1.2;
}

.staff-support-list strong > span {
  min-width: 0;
  overflow: hidden;
  color: inherit;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.staff-support-list strong > small {
  flex: 0 0 auto;
  padding: 2px 4px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 800;
}

.staff-support-list strong > small.is-pending {
  color: #b45309;
  background: #fff7ed;
}

.staff-support-list strong > small.is-replied {
  color: #0f766e;
  background: #ecfdf5;
}

.staff-support-chat {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.staff-support-card .support-chat-admin-body {
  max-height: none;
  min-height: 0;
}

.online-service-card {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  height: min(700px, calc(100vh - 100px));
  max-height: min(700px, calc(100vh - 100px));
  overflow: hidden;
  background: #fff;
  border: 1px solid #d8e6f5;
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(23, 32, 51, 0.2);
}

.online-service-head {
  position: relative;
  padding: 14px 22px 12px;
  color: #fff;
  background: linear-gradient(160deg, #18a95d, #54d987 58%, #edfdf4);
}

.online-service-head button {
  position: absolute;
  top: 8px;
  right: 14px;
  width: 26px;
  height: 26px;
  color: #fff;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-size: 28px;
  line-height: 1;
}

.online-service-head span {
  font-weight: 900;
  font-size: 12px;
}

.online-service-head h2 {
  max-width: 260px;
  margin: 5px 0 4px;
  font-size: 21px;
  line-height: 1.16;
}

.online-service-head p {
  margin: 0;
  color: rgba(255, 255, 255, 0.9);
  font-size: 12px;
}

.online-service-panel {
  display: none;
  min-height: 0;
  overflow: hidden;
  background: #f6f9fd;
}

.online-service-panel.is-active {
  display: grid;
}

.online-service-panel[data-online-service-panel="chat"].is-active {
  grid-template-rows: minmax(0, 1fr) auto;
}

.online-service-home-list {
  display: grid;
  align-content: start;
  max-height: none;
  gap: 10px;
  overflow: auto;
  padding: 14px;
}

.online-service-home-card {
  display: grid;
  gap: 6px;
  padding: 12px;
  background: #fff;
  border: 1px solid #e1e9f3;
  border-radius: 12px;
  box-shadow: 0 8px 18px rgba(23, 32, 51, 0.06);
}

.online-service-home-card summary {
  display: grid;
  gap: 4px;
  cursor: pointer;
  list-style: none;
}

.online-service-home-card summary::-webkit-details-marker {
  display: none;
}

.online-service-home-card summary span {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  color: #94a3b8;
  font-size: 10px;
}

.online-service-home-card strong {
  min-width: 0;
  overflow: hidden;
  color: #172033;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.online-service-home-card p {
  margin: 0;
  color: #475569;
  line-height: 1.5;
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.online-service-home-card div {
  color: #334155;
  line-height: 1.55;
  font-size: 12px;
  white-space: pre-line;
}

.online-service-body,
.support-chat-admin-body {
  display: grid;
  align-content: start;
  max-height: 400px;
  gap: 8px;
  overflow: auto;
  padding: 12px 16px;
  background: #f6f9fd;
}

.online-service-card .online-service-body {
  max-height: none;
  min-height: 0;
}

.support-chat-bubble {
  display: grid;
  max-width: 82%;
  gap: 2px;
  padding: 7px 9px;
  background: #fff;
  border: 1px solid #e1e9f3;
  border-radius: 12px;
  box-shadow: none;
}

.support-chat-bubble.is-user {
  justify-self: end;
  color: #fff;
  background: linear-gradient(135deg, #1f6ed4, #18a39b);
  border-color: transparent;
}

.support-chat-bubble.is-staff {
  justify-self: start;
  color: #1e293b;
  background: #fff;
  border-color: #e1e9f3;
}

.support-chat-bubble.is-system {
  max-width: 100%;
  background: #fffaf0;
  border-color: #fde7b5;
}

.support-chat-bubble strong {
  max-width: 100%;
  overflow: hidden;
  font-size: 11px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.support-chat-bubble p {
  margin: 0;
  line-height: 1.45;
  font-size: 12px;
}

.support-chat-bubble small {
  color: inherit;
  opacity: 0.68;
  font-size: 10px;
}

.support-chat-empty {
  padding: 18px;
  color: #64748b;
  text-align: center;
  background: #fff;
  border: 1px dashed #cddbeb;
  border-radius: 12px;
}

.online-service-form,
.support-chat-reply-form {
  display: grid;
  gap: 7px;
  padding: 11px 16px 12px;
  background: #fff;
  border-top: 1px solid #e3edf7;
}

.online-service-form textarea,
.support-chat-reply-form textarea {
  resize: vertical;
  min-height: 62px;
  padding: 10px 12px;
  border: 1px solid #d8e3f1;
  border-radius: 10px;
  font: inherit;
}

.online-service-form button,
.support-chat-reply-form button {
  min-height: 34px;
  padding: 7px 12px;
  color: #fff;
  background: linear-gradient(135deg, #1f6ed4, #18a39b);
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 900;
}

.online-service-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  padding: 8px 0 6px;
  background: #fff;
  border-top: 1px solid #e3edf7;
}

.online-service-tabs button {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 3px;
  min-height: 48px;
  color: #94a3b8;
  background: transparent;
  border: 0;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
}

.online-service-tabs svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.online-service-tabs button.is-active {
  color: #18a95d;
}

[data-online-service-trigger] {
  position: relative;
}

.online-service-unread-count {
  position: absolute;
  top: -7px;
  right: -7px;
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  color: #fff;
  background: #ef4444;
  border: 2px solid #fff;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  line-height: 16px;
  box-shadow: 0 5px 12px rgba(239, 68, 68, 0.28);
}

.online-service-unread-count[hidden] {
  display: none;
}

.support-chat-admin {
  overflow: hidden;
  border: 1px solid #dfe8f3;
  border-radius: 10px;
  background: #fff;
}

.support-chat-admin-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  background: #f8fbff;
  border-bottom: 1px solid #e3edf7;
}

.support-chat-admin-head span,
.support-chat-readonly {
  color: #64748b;
  font-size: 13px;
}

.support-chat-readonly {
  margin: 0;
  padding: 14px;
  background: #fff;
}

.service-phone-popover {
  position: absolute;
  right: 100%;
  top: 48px;
  z-index: 30;
  width: 252px;
  max-height: min(520px, 70vh);
  margin-right: 10px;
  padding: 16px;
  overflow-y: auto;
  text-align: left;
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid #dce7f5;
  border-radius: 8px;
  box-shadow: 0 18px 42px rgba(23, 32, 51, 0.14);
  backdrop-filter: blur(8px);
}

.service-phone-popover[hidden] {
  display: none;
}

.service-phone-popover-item {
  display: grid;
  gap: 10px;
  padding: 0 0 16px;
  border-bottom: 1px solid #edf2f7;
}

.service-phone-popover-item:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.service-consult-heading {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 24px;
}

.service-consult-icon {
  position: relative;
  width: 18px;
  height: 18px;
  border: 1.5px solid #9aa8ba;
  border-radius: 999px;
  background: #f8fbff;
}

.service-consult-icon::before,
.service-consult-icon::after {
  position: absolute;
  left: 50%;
  content: "";
  transform: translateX(-50%);
}

.service-consult-icon::before {
  top: 4px;
  width: 4px;
  height: 4px;
  border: 1.3px solid #9aa8ba;
  border-radius: 999px;
}

.service-consult-icon::after {
  bottom: 3px;
  width: 10px;
  height: 5px;
  border: 1.3px solid #9aa8ba;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

.service-consult-heading strong {
  color: #172033;
  font-size: 18px;
  line-height: 1.1;
  font-weight: 900;
  letter-spacing: 0;
}

.service-phone-popover-item > b {
  color: #172033;
  font-size: 15px;
  font-weight: 900;
}

.service-phone-popover p {
  margin: 0;
  color: #66758c;
  font-size: 12px;
  line-height: 1.5;
}

.service-consult-phone {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-height: 38px;
  padding: 0 10px;
  color: #172033;
  background: #f8fbff;
  border: 1px solid #d7e5fb;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
}

.service-consult-phone i {
  position: relative;
  flex: 0 0 auto;
  width: 13px;
  height: 13px;
  border: 1.5px solid #8b97a9;
  border-radius: 3px;
}

.service-consult-phone i::before {
  position: absolute;
  right: 3px;
  bottom: 3px;
  width: 9px;
  height: 9px;
  content: "";
  border: 1.5px solid #8b97a9;
  border-radius: 3px;
  background: #fff;
}

.service-consult-phone:hover {
  color: #155bd4;
  border-color: #bcd3f6;
  box-shadow: 0 8px 16px rgba(21, 91, 212, 0.1);
}

.service-phone-qr {
  display: block;
  width: 178px;
  height: 178px;
  margin: 0 auto;
  padding: 8px;
  object-fit: contain;
  border: 1px solid #dfe8f3;
  border-radius: 8px;
  background: #fff;
}

.public-account-popover {
  top: 146px;
}

.public-account-popover-item {
  justify-items: center;
  text-align: center;
}

.site-footer {
  display: grid;
  grid-template-columns: minmax(260px, 0.8fr) minmax(320px, 1fr);
  gap: 32px;
  padding: 56px clamp(20px, 6vw, 88px);
  color: #fff;
  background: #172033;
}

.site-footer p {
  color: #c8d2df;
}

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

.lead-form input,
.lead-form select,
.lead-form textarea {
  min-height: 46px;
  min-width: 0;
  padding: 10px 12px;
  color: #172033;
  border: 0;
  border-radius: 7px;
  background: #fff;
}

.lead-form textarea {
  height: 46px;
  max-height: 46px;
  resize: none;
  overflow-y: auto;
  line-height: 1.45;
}

.lead-form button {
  min-height: 46px;
  border-radius: 7px;
  background: linear-gradient(135deg, var(--teal), var(--blue));
}

.lead-form-status {
  grid-column: 1 / -1;
  min-height: 18px;
  margin: 0;
  font-size: 0.9rem;
  color: #dbeafe;
}

.strict-home {
  display: none;
}

.footer-links {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 16px 28px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  color: #dbe5f1;
}

.auth-body {
  min-height: 100vh;
  background:
    linear-gradient(120deg, rgba(31, 98, 210, 0.12), rgba(15, 163, 154, 0.08)),
    #f6f9ff;
}

.auth-topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: grid;
  grid-template-columns: minmax(168px, 220px) minmax(0, 1fr) minmax(168px, 220px);
  align-items: center;
  gap: 18px;
  min-height: 74px;
  padding: 12px clamp(18px, 4vw, 64px);
  background: rgba(255, 255, 255, 0.92);
  border-bottom: 1px solid rgba(223, 231, 241, 0.9);
  box-shadow: 0 12px 32px rgba(21, 32, 51, 0.06);
  backdrop-filter: blur(18px);
}

.auth-topbar-logo {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: 10px;
  min-width: max-content;
  color: var(--ink);
  font-weight: 900;
}

.auth-topbar-logo span {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  color: var(--blue);
  background: #fff;
  border: 1px solid #dbe7f7;
  border-radius: 9px;
  box-shadow: 0 8px 20px rgba(31, 98, 210, 0.1);
}

.auth-topbar-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  justify-self: center;
  gap: clamp(10px, 1.4vw, 20px);
  min-width: 0;
  overflow-x: auto;
  color: #25344d;
  text-align: center;
  white-space: nowrap;
  font-size: 14px;
}

.auth-topbar-nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 36px;
  padding: 6px 0;
  font-weight: 800;
}

.auth-topbar-nav a:hover {
  color: var(--blue);
}

.role-workbench-nav {
  gap: 8px;
}

.role-workbench-nav a {
  min-width: 92px;
  min-height: 38px;
  padding: 8px 14px;
  color: #174fae;
  background: #f5f8ff;
  border: 1px solid #c9daf3;
  border-radius: 8px;
  font-weight: 800;
  text-align: center;
}

.role-workbench-nav a:hover,
.role-workbench-nav a:focus-visible {
  color: #0b5fd7;
  background: #eaf2ff;
  border-color: #8eb5eb;
}

.role-workbench-nav .role-workbench-home-link {
  color: #174fae;
  background: #fff;
}

.role-workbench-nav .role-workbench-classroom-link {
  color: #174fae;
  background: #f4f7fd;
  border-color: #b8cbea;
}

.role-workbench-nav .role-workbench-classroom-link:hover,
.role-workbench-nav .role-workbench-classroom-link:focus-visible {
  color: #0b5fd7;
  background: #eaf2ff;
  border-color: #8eb5eb;
}

.role-workbench-nav .factory-nav-logout {
  min-width: 92px;
}

.factory-body.admin-body .admin-header .main-nav.role-workbench-nav {
  gap: 5px;
}

.factory-body.admin-body .admin-header .main-nav.role-workbench-nav a,
.factory-body.admin-body .admin-header .main-nav.role-workbench-nav .factory-nav-logout {
  min-width: 80px;
  padding-inline: 8px;
}

.auth-page {
  display: grid;
  min-height: calc(100vh - 74px);
  place-items: center;
  padding: clamp(18px, 4vw, 52px);
}

.auth-shell {
  display: grid;
  grid-template-columns: minmax(300px, 0.9fr) minmax(340px, 0.7fr);
  width: min(1080px, 100%);
  overflow: hidden;
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid rgba(223, 231, 241, 0.96);
  border-radius: 16px;
  box-shadow: 0 28px 80px rgba(21, 32, 51, 0.16);
}

.auth-visual {
  display: grid;
  min-height: 620px;
  align-content: space-between;
  padding: clamp(28px, 5vw, 56px);
  color: #fff;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.18), transparent 42%),
    linear-gradient(135deg, #152033, #1f62d2 58%, #0fa39a);
}

.auth-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  width: fit-content;
  font-weight: 900;
}

.auth-brand span {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  color: var(--blue);
  background: #fff;
  border-radius: 8px;
}

.auth-visual h1 {
  max-width: 540px;
  margin-bottom: 18px;
  font-size: clamp(38px, 5vw, 64px);
}

.auth-visual p:not(.eyebrow) {
  max-width: 520px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 18px;
}

.auth-visual .eyebrow {
  color: #b8fff6;
}

.auth-feature-list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.auth-feature-list span {
  display: grid;
  min-width: 0;
  min-height: 54px;
  place-content: center;
  gap: 2px;
  padding: 7px 11px;
  color: #eafffb;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  font-weight: 800;
  text-align: center;
}

.auth-feature-list b {
  font-size: 18px;
  line-height: 1;
}

.auth-feature-list small {
  overflow: hidden;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.auth-card {
  display: grid;
  align-content: center;
  gap: 18px;
  padding: clamp(28px, 5vw, 54px);
  background: #fff;
}

.auth-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  padding: 5px;
  background: #edf2f8;
  border-radius: 8px;
}

.auth-tabs button {
  min-height: 44px;
  color: #43526a;
  background: transparent;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 900;
}

.auth-tabs button.active {
  color: var(--blue);
  background: #fff;
  box-shadow: 0 8px 20px rgba(28, 39, 58, 0.08);
}

.auth-page-form {
  display: none;
  gap: 14px;
}

.auth-page-form.active {
  display: grid;
}

.auth-page-form label {
  display: grid;
  gap: 7px;
  color: #43526a;
  font-size: 14px;
  font-weight: 800;
}

.required-mark {
  color: #d92d20;
  font-weight: 900;
}

.auth-page-form input,
.auth-page-form select {
  min-height: 48px;
  min-width: 0;
  padding: 11px 13px;
  color: var(--ink);
  background: #f8fbff;
  border: 1px solid #cfdae8;
  border-radius: 8px;
  outline: 0;
}

.auth-page-form input:focus,
.auth-page-form select:focus {
  border-color: rgba(31, 98, 210, 0.58);
  box-shadow: 0 0 0 3px rgba(31, 98, 210, 0.1);
}

/* Keep masked password glyphs stable during browser autofill and focus changes. */
.auth-page-form input[type="password"],
.auth-page-form input[type="text"][data-password-toggle-ready="true"] {
  font-family: Arial, sans-serif;
  font-size: 16px;
  font-kerning: none;
  font-variant-ligatures: none;
  font-feature-settings: "kern" 0;
  letter-spacing: 0 !important;
}

.auth-page-form input[type="password"]:-webkit-autofill {
  font-family: Arial, sans-serif !important;
  font-kerning: none;
  font-variant-ligatures: none;
  font-feature-settings: "kern" 0;
  letter-spacing: 0 !important;
}

.auth-code-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 118px;
  gap: 10px;
}

.auth-code-row button,
.auth-page-form > button,
.auth-wechat-bind-form > button {
  min-height: 48px;
  color: #fff;
  background: linear-gradient(135deg, var(--blue), var(--teal));
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 900;
}

.auth-code-row button {
  background: #152033;
}

.auth-message {
  padding: 0 2px;
  color: #52627a;
  font-size: 14px;
  line-height: 1.6;
}

.profile-card-form .auth-message.is-error {
  color: #c62828;
  font-weight: 700;
}

.profile-card-form input[aria-invalid="true"] {
  border-color: #d84545;
  box-shadow: 0 0 0 3px rgba(216, 69, 69, 0.12);
}

.auth-message[hidden] {
  display: none;
}

.auth-wechat-panel {
  gap: 14px;
}

.auth-wechat-qr-card {
  display: grid;
  grid-template-columns: 148px minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  padding: 14px;
  background: #f8fbff;
  border: 1px solid #dbe7f7;
  border-radius: 8px;
}

.auth-wechat-qr-card img {
  width: 148px;
  aspect-ratio: 1;
  object-fit: contain;
  background: #fff;
  border: 1px solid #d5e1ef;
  border-radius: 6px;
}

.auth-wechat-qr-card > div {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.auth-wechat-qr-card strong {
  color: #172033;
  font-size: 18px;
}

.auth-wechat-qr-card span {
  color: #60718a;
  font-size: 13px;
  line-height: 1.55;
}

.auth-wechat-qr-card button {
  width: fit-content;
  min-height: 34px;
  padding: 0 12px;
  color: var(--blue);
  background: #fff;
  border: 1px solid #bfd3eb;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 900;
}

.auth-wechat-bind-form {
  display: grid;
  gap: 14px;
}

.auth-wechat-bind-form p {
  margin: 0;
  color: #5b6b82;
  font-size: 13px;
  line-height: 1.55;
}

.auth-wechat-bind-form label {
  display: grid;
  gap: 7px;
  color: #43526a;
  font-size: 14px;
  font-weight: 800;
}

.auth-wechat-bind-form input {
  min-width: 0;
  min-height: 48px;
  padding: 11px 13px;
  color: var(--ink);
  background: #f8fbff;
  border: 1px solid #cfdae8;
  border-radius: 8px;
  outline: 0;
}

.profile-shell {
  grid-template-columns: minmax(300px, 0.82fr) minmax(360px, 0.68fr);
}

.profile-visual {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.18), transparent 42%),
    linear-gradient(135deg, #0f766e, #1f62d2);
}

.profile-card-form h2 {
  margin-bottom: 0;
  font-size: clamp(28px, 4vw, 42px);
}

.profile-link-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
}

.profile-link-row a {
  color: var(--blue);
  font-weight: 900;
}

.classroom-page {
  display: grid;
  gap: 24px;
  width: min(1160px, calc(100% - 32px));
  margin: 0 auto;
  padding: clamp(24px, 5vw, 56px) 0 64px;
}

.classroom-hero {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  padding: clamp(24px, 4vw, 42px);
  color: #fff;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.14), transparent 42%),
    linear-gradient(135deg, #172033, #2067d6 62%, #0fa39a);
  border-radius: 18px;
  box-shadow: 0 24px 70px rgba(21, 32, 51, 0.16);
}

.classroom-hero h1 {
  max-width: 720px;
  margin: 0 0 12px;
  font-size: clamp(34px, 5vw, 58px);
  line-height: 1.08;
}

.classroom-hero h1 em {
  display: inline-grid;
  min-width: 24px;
  height: 24px;
  margin-left: 10px;
  place-items: center;
  vertical-align: top;
  color: #fff;
  background: #e53935;
  border-radius: 999px;
  font-size: 13px;
  font-style: normal;
  font-weight: 900;
  line-height: 1;
}

.classroom-hero h1 em[hidden] {
  display: none;
}

.classroom-hero p:not(.eyebrow) {
  max-width: 760px;
  margin: 0;
  color: rgba(255, 255, 255, 0.82);
}

.auth-forgot-row {
  display: flex;
  justify-content: flex-end;
  margin-top: -12px;
}

.auth-forgot-row[hidden] {
  display: none;
}

.auth-forgot-row button {
  min-height: 30px;
  padding: 2px 4px;
  color: var(--blue);
  background: transparent;
  border: 0;
  font-weight: 800;
  cursor: pointer;
}

.auth-forgot-row button:hover {
  color: #174fae;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.auth-reset-back {
  min-height: 40px;
  padding: 8px 14px;
  color: var(--blue);
  background: #f5f8ff;
  border: 1px solid rgba(31, 98, 210, 0.22);
  border-radius: 8px;
  font-weight: 800;
  cursor: pointer;
}

.auth-reset-back:hover {
  background: #eaf1ff;
  border-color: rgba(31, 98, 210, 0.42);
}

.auth-reset-heading {
  display: grid;
  gap: 6px;
  padding: 12px 14px;
  color: #43526a;
  background: #f5f8ff;
  border: 1px solid rgba(31, 98, 210, 0.18);
  border-radius: 8px;
}

.auth-reset-heading strong {
  color: #152033;
  font-size: 17px;
}

.auth-reset-heading span {
  font-size: 13px;
  line-height: 1.6;
}

.auth-page-form > .auth-reset-back {
  color: var(--blue);
  background: #f5f8ff;
}

/* Compact classroom banner so its scale matches the workspace panels below. */
.classroom-page .classroom-hero {
  gap: 16px;
  padding: 22px 30px;
}

.classroom-page .classroom-hero .eyebrow {
  margin: 0 0 7px;
  font-size: 12px;
  line-height: 1.35;
}

.classroom-page .classroom-hero h1 {
  margin-bottom: 8px;
  font-size: clamp(30px, 4vw, 44px);
  line-height: 1.08;
}

.classroom-page .classroom-hero p:not(.eyebrow) {
  max-width: 750px;
  font-size: 14px;
  line-height: 1.55;
}

.classroom-page .classroom-hero > .button {
  min-height: 40px;
  padding: 9px 16px;
  white-space: nowrap;
}

@media (max-width: 760px) {
  .classroom-page .classroom-hero {
    padding: 18px 20px;
  }

  .classroom-page .classroom-hero h1 {
    font-size: 30px;
  }
}

/* Guest shortcut order stays identical before and after account-state sync. */
@media (min-width: 761px) {
  .leaderboard-visual .leaderboard-shortcuts[data-guest-shortcuts="true"] > [data-classroom-entry] {
    order: -4 !important;
  }

  .leaderboard-visual .leaderboard-shortcuts[data-guest-shortcuts="true"] > a[href="business-guide.html"] {
    order: -3 !important;
  }

  .leaderboard-visual .leaderboard-shortcuts[data-guest-shortcuts="true"] > a[href="cart.html"] {
    order: -2 !important;
  }

  .leaderboard-visual .leaderboard-shortcuts[data-guest-shortcuts="true"] > [data-auth-link="quick"] {
    order: -1 !important;
  }
}

/* 20260731 mobile overview metrics and wide-data rails.
   Desktop dimensions stay unchanged; mobile keeps complete datasets reachable
   without shrinking tables into unreadable columns. */
@media (max-width: 760px) {
  .pricing-page .pricing-platform-stats,
  .home-body .hero-stats {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 6px !important;
    width: 100%;
    overflow: visible;
  }

  .pricing-page .pricing-platform-stats > a,
  .home-body .hero-stats > a,
  .home-body .hero-stats > a:last-child {
    min-width: 0 !important;
    min-height: 72px;
    padding: 10px 3px !important;
  }

  .pricing-page .pricing-platform-stats dt,
  .home-body .hero-stats dt {
    font-size: clamp(20px, 6vw, 28px) !important;
  }

  .pricing-page .pricing-platform-stats dd,
  .home-body .hero-stats dd {
    overflow: hidden;
    font-size: clamp(9px, 2.6vw, 11px) !important;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  :is(
    .freight-table-wrap,
    .freight-admin-table-wrap,
    .finance-stats-table-wrap,
    .student-table-wrap,
    .recruiter-service-history-table-wrap,
    .senior-history-table-scroll,
    .task-audit-table-scroll,
    .personal-transaction-table-wrap,
    .ecommerce-history-table-wrap,
    .ecommerce-logistics-preview-table-wrap,
    .recruitment-table-scroll,
    .recruiter-job-table-scroll,
    .task-record-table-scroll,
    .task-history-table-scroll,
    .license-review-table-scroll,
    .license-review-summary-table-wrap
  ) {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
    scrollbar-color: #7eb6e8 #eaf2fb;
    -webkit-overflow-scrolling: touch;
  }

  :is(
    .freight-table-wrap,
    .freight-admin-table-wrap,
    .finance-stats-table-wrap,
    .student-table-wrap,
    .recruiter-service-history-table-wrap,
    .senior-history-table-scroll,
    .task-audit-table-scroll,
    .personal-transaction-table-wrap,
    .ecommerce-history-table-wrap,
    .ecommerce-logistics-preview-table-wrap,
    .recruitment-table-scroll,
    .recruiter-job-table-scroll,
    .task-record-table-scroll,
    .task-history-table-scroll,
    .license-review-table-scroll,
    .license-review-summary-table-wrap
  )::-webkit-scrollbar {
    height: 7px;
  }

  :is(
    .freight-table-wrap,
    .freight-admin-table-wrap,
    .finance-stats-table-wrap,
    .student-table-wrap,
    .recruiter-service-history-table-wrap,
    .senior-history-table-scroll,
    .task-audit-table-scroll,
    .personal-transaction-table-wrap,
    .ecommerce-history-table-wrap,
    .ecommerce-logistics-preview-table-wrap,
    .recruitment-table-scroll,
    .recruiter-job-table-scroll,
    .task-record-table-scroll,
    .task-history-table-scroll,
    .license-review-table-scroll,
    .license-review-summary-table-wrap
  )::-webkit-scrollbar-track {
    background: #eaf2fb;
    border-radius: 999px;
  }

  :is(
    .freight-table-wrap,
    .freight-admin-table-wrap,
    .finance-stats-table-wrap,
    .student-table-wrap,
    .recruiter-service-history-table-wrap,
    .senior-history-table-scroll,
    .task-audit-table-scroll,
    .personal-transaction-table-wrap,
    .ecommerce-history-table-wrap,
    .ecommerce-logistics-preview-table-wrap,
    .recruitment-table-scroll,
    .recruiter-job-table-scroll,
    .task-record-table-scroll,
    .task-history-table-scroll,
    .license-review-table-scroll,
    .license-review-summary-table-wrap
  )::-webkit-scrollbar-thumb {
    background: #7eb6e8;
    border-radius: 999px;
  }

  .freight-forwarder-body :is(
    .freight-business-panel,
    .freight-live-orders-card,
    .freight-history-card,
    .role-card,
    .factory-panel
  ) {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .freight-forwarder-body .freight-table-wrap {
    position: relative;
    padding-top: 32px;
  }

  .freight-forwarder-body .freight-table-wrap::before {
    position: absolute;
    top: 7px;
    left: 12px;
    color: #55718f;
    font-size: 12px;
    font-weight: 700;
    content: "左右滑动查看完整表格";
  }
}

.classroom-shell,
.classroom-course,
.classroom-homework,
.classroom-empty {
  background: #fff;
  border: 1px solid #dbe7f7;
  border-radius: 12px;
  box-shadow: 0 18px 46px rgba(21, 32, 51, 0.08);
}

.classroom-shell {
  display: grid;
  gap: 18px;
  padding: clamp(16px, 3vw, 26px);
}

.classroom-status {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  color: #43526a;
  background: #f6f9ff;
  border: 1px solid #dbe7f7;
  border-radius: 10px;
  font-weight: 800;
}

.classroom-status a {
  flex: 0 0 auto;
  color: var(--blue);
  white-space: nowrap;
}

.classroom-status span {
  min-width: 0;
}

.classroom-logout-button {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 0 14px;
  color: var(--blue);
  background: #fff;
  border: 1px solid #cfe0f6;
  border-radius: 6px;
  font-weight: 900;
  cursor: pointer;
}

.classroom-logout-button:hover {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(135deg, var(--blue), var(--teal));
}

.classroom-grid {
  display: grid;
  gap: 18px;
}

.classroom-course-tabs {
  display: grid;
  grid-template-columns: repeat(var(--classroom-course-tab-count, 1), minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 14px;
  padding: 8px;
  background: #f5f9ff;
  border: 1px solid #d8e5f5;
  border-radius: 10px;
}

.classroom-course-tabs > button {
  min-width: 0;
  min-height: 42px;
  padding: 8px 12px;
  color: #1453a3;
  background: #fff;
  border: 1px solid #bcd2ef;
  border-radius: 8px;
  font-weight: 900;
  line-height: 1.25;
  cursor: pointer;
}

.classroom-course-tabs > button.active,
.classroom-course-tabs > button[aria-selected="true"] {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(135deg, var(--teal), var(--blue));
  box-shadow: 0 7px 16px rgba(36, 110, 210, 0.2);
}

.classroom-course[hidden] {
  display: none !important;
}

.classroom-course {
  display: grid;
  gap: 18px;
  padding: clamp(18px, 3vw, 26px);
}

.classroom-course-head {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid #e7edf6;
}

.classroom-course-head > span {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  color: #fff;
  background: linear-gradient(135deg, var(--blue), var(--teal));
  border-radius: 12px;
  font-size: 12px;
  font-weight: 900;
}

.classroom-course-head h2,
.classroom-course-head p {
  margin: 0;
}

.classroom-course-head h2 {
  display: flex;
  align-items: center;
  gap: 8px;
}

.classroom-course-review-badge,
.classroom-homework-score-dot {
  display: inline-grid;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  place-items: center;
  color: #fff !important;
  background: #e53935;
  border-radius: 999px;
  box-shadow: 0 4px 10px rgba(229, 57, 53, 0.28);
  font-size: 12px !important;
  font-style: normal;
  font-weight: 900;
  line-height: 1;
}

.classroom-homework.has-unread-score {
  border-color: #f0aaa8;
}

.classroom-course-head p,
.classroom-homework p,
.classroom-muted,
.classroom-submit-form small {
  color: var(--muted);
}

.classroom-homework-list {
  display: grid;
  gap: 14px;
}

.classroom-section-title {
  margin: 18px 0 10px;
  color: var(--blue);
  font-size: 14px;
  font-weight: 900;
}

.classroom-homework {
  display: grid;
  gap: 14px;
  padding: 18px;
  box-shadow: none;
}

.classroom-homework.completed {
  background: #fff;
  border-color: #dbe7f7;
}

.classroom-homework-task {
  display: block;
  padding: 0;
  overflow: hidden;
}

.classroom-homework-summary {
  min-height: 92px;
  padding: 18px;
  cursor: pointer;
  list-style: none;
}

.classroom-homework-summary::-webkit-details-marker {
  display: none;
}

.classroom-homework-title-copy {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.classroom-homework-title-copy > span {
  color: var(--teal);
  font-size: 13px;
  font-weight: 900;
}

.classroom-homework-title-copy > strong {
  color: var(--ink);
  font-size: 22px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.classroom-homework-summary-meta {
  display: flex;
  flex: 0 0 auto;
  gap: 10px;
  align-items: center;
}

.classroom-homework-summary-meta b {
  color: var(--blue);
  white-space: nowrap;
}

.classroom-homework-summary-meta i {
  min-width: 54px;
  padding: 6px 9px;
  color: #1764cc;
  background: #f7fbff;
  border: 1px solid #c9dcf3;
  border-radius: 6px;
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
  text-align: center;
}

.classroom-homework-summary-meta i::before {
  content: "查看";
}

.classroom-homework-task[open] .classroom-homework-summary-meta i::before {
  content: "收起";
}

.classroom-homework-task[open] .classroom-homework-summary {
  border-bottom: 1px solid #e4ebf4;
}

.classroom-homework-body {
  display: grid;
  gap: 14px;
  padding: 16px 18px 18px;
}

.classroom-homework-requirement {
  margin: 0;
  color: #172033;
  line-height: 1.7;
  font-weight: 900;
}

.classroom-homework-detail-sections {
  display: grid;
  gap: 10px;
}

.classroom-homework-detail-sections section {
  display: grid;
  gap: 6px;
  padding: 11px 12px;
  background: #f8fbff;
  border: 1px solid #dce8f6;
  border-radius: 8px;
}

.classroom-homework-detail-sections b {
  color: #1764cc;
  font-size: 13px;
  font-weight: 900;
}

.classroom-homework-detail-sections p {
  margin: 0;
  color: #172033;
  line-height: 1.65;
  font-size: 14px;
  font-weight: 700;
}

.classroom-task-queue-note {
  margin: 0;
  padding: 10px 12px;
  color: #52637c;
  background: #f8fbff;
  border: 1px dashed #cfdcec;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 800;
}

.classroom-homework-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 16px;
}

.classroom-homework-head span {
  color: var(--teal);
  font-size: 13px;
  font-weight: 900;
}

.classroom-homework-head h3 {
  margin: 4px 0 0;
  font-size: 22px;
}

.classroom-homework-head b,
.classroom-score {
  color: var(--blue);
}

.classroom-score {
  padding: 10px 12px;
  background: #eef6ff;
  border: 1px solid #dbe7f7;
  border-radius: 9px;
  font-weight: 900;
}

.classroom-submitted {
  display: grid;
  gap: 8px;
  padding: 12px;
  background: #f7fafc;
  border: 1px solid #e3ebf5;
  border-radius: 9px;
}

.classroom-submitted p,
.classroom-submitted ul {
  margin: 0;
}

.classroom-teacher-attachments strong {
  color: #43526a;
  font-weight: 700;
}

.classroom-file-list {
  display: grid;
  gap: 6px;
  padding-left: 18px;
}

.classroom-file-list li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.classroom-file-list b {
  display: inline-flex;
  gap: 6px;
  font-weight: 700;
}

.classroom-file-list button {
  min-height: 26px;
  padding: 0 9px;
  color: #1764cc;
  background: #fff;
  border: 1px solid #c9dcf3;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 900;
}

.classroom-file-list em {
  color: #8a96a8;
  font-size: 12px;
  font-style: normal;
}

.classroom-history {
  display: grid;
  gap: 14px;
  margin-top: 18px;
  padding: 14px;
  background: #fff;
  border: 1px solid #dbe7f7;
  border-radius: 10px;
}

.classroom-history > summary {
  cursor: pointer;
  color: var(--blue-dark);
  font-weight: 900;
}

.classroom-history[open] > summary {
  margin-bottom: 12px;
}

.classroom-submit-form {
  display: grid;
  gap: 12px;
}

.classroom-submit-form label {
  display: grid;
  gap: 7px;
  color: #43526a;
  font-weight: 900;
}

.classroom-submit-form textarea,
.classroom-submit-form input {
  min-width: 0;
  padding: 11px 13px;
  color: var(--ink);
  background: #f8fbff;
  border: 1px solid #cfdae8;
  border-radius: 8px;
}

.classroom-submit-form button {
  width: fit-content;
  min-height: 42px;
  padding: 0 18px;
  color: #fff;
  background: linear-gradient(135deg, var(--blue), var(--teal));
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 900;
}

.classroom-file-list button.danger {
  color: #d73737;
  background: #fff7f7;
  border-color: #ef9b9b;
}

.classroom-selected-files {
  display: grid;
  gap: 8px;
}

.classroom-selected-file {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  padding: 9px 11px;
  color: var(--ink);
  background: #fff;
  border: 1px solid #d8e4f2;
  border-radius: 8px;
}

.classroom-selected-file b {
  min-width: 0;
  overflow-wrap: anywhere;
}

.classroom-submit-form .classroom-selected-file button {
  flex: 0 0 auto;
  min-height: 32px;
  padding: 0 12px;
  color: #d73737;
  background: #fff7f7;
  border: 1px solid #ef9b9b;
}

.classroom-empty {
  display: grid;
  gap: 12px;
  padding: 24px;
}

.classroom-empty.small {
  box-shadow: none;
}

.homework-submissions {
  display: grid;
  gap: 10px;
  margin-top: 10px;
}

.homework-submission {
  display: grid;
  gap: 8px;
  padding: 12px;
  background: #fff;
  border: 1px solid #dbe7f7;
  border-radius: 9px;
}

.homework-submission.muted {
  color: var(--muted);
}

@media (max-width: 1080px) {
  .site-header {
    grid-template-columns: auto 1fr auto;
  }

  .main-nav,
  .search {
    display: none;
  }

  .menu-button {
    display: block;
  }

  .mobile-menu.open {
    position: sticky;
    top: 76px;
    z-index: 19;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
    gap: 6px;
    padding: 10px 20px;
    background: #fff;
    border-bottom: 1px solid var(--line);
  }

  .hero,
  .split,
  .site-footer,
  .auth-shell {
    grid-template-columns: 1fr;
  }

  .auth-visual {
    min-height: 420px;
  }

  .classroom-hero {
    display: grid;
  }

  .auth-topbar {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 16px;
    padding-inline: 18px;
  }

  .auth-topbar-nav {
    justify-content: flex-start;
    justify-self: stretch;
    gap: 14px;
    -webkit-overflow-scrolling: touch;
  }

  .process,
  .course-grid,
  .pricing-cards,
  .system-grid,
  .career-planning-grid,
  .talent-hub-grid,
  .talent-detail-body,
  .dashboard-grid,
  .leaderboard-tabs,
  .command-shell,
  .overview-grid,
  .enterprise-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .role-layout {
    grid-template-columns: 1fr;
  }

  .assigned-role-panel {
    position: static;
  }

  .role-auth-panel {
    position: static;
  }

  .path-builder,
  .path-form,
  .pricing-shell,
  .pricing-detail,
  .talent-detail,
  .about-intro-layout {
    grid-template-columns: 1fr;
  }

  .cart-panel-head,
  .cart-panel-item {
    grid-template-columns: 1fr;
    justify-items: start;
  }

  .pricing-menu {
    position: static;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .course-card,
  .course-grid .course-card:nth-child(4),
  .course-grid .course-card:nth-child(5) {
    grid-column: auto;
  }

  .path-result {
    grid-column: auto;
  }

  .smart-support-detail {
    grid-template-columns: 1fr;
  }

  .smart-support-grid {
    grid-template-columns: 1fr;
  }

  .career-planning-grid {
    grid-template-columns: 1fr;
  }

  .leaderboard-shortcuts {
    grid-template-columns: repeat(5, minmax(64px, 1fr));
    width: 100%;
    margin: 0 0 2px;
    justify-self: stretch;
  }

  .three-up,
  .about-body {
    grid-template-columns: 1fr;
  }

  .about-body p {
    min-height: auto;
  }
}

@media (max-width: 760px) {
  .site-header {
    padding-inline: 16px;
  }

  .brand {
    min-width: 0;
  }

  .brand small {
    display: none;
  }

  .mobile-menu.open,
  .quick-panel,
  .mega,
  .process,
  .course-grid,
  .pricing-shell,
  .pricing-menu,
  .pricing-cards,
  .pricing-detail,
  .system-grid,
  .talent-hub-grid,
  .talent-detail-body,
  .dashboard-grid,
  .role-layout,
  .role-summary,
  .command-shell,
  .command-menu,
  .overview-grid,
  .user-management-layout,
  .user-management-main,
  .stats-grid,
  .enterprise-grid {
    grid-template-columns: 1fr;
  }

  .talent-hub-card {
    min-height: 220px;
  }

  .talent-detail {
    padding: 0;
  }

  .command-stage {
    min-height: auto;
    padding: 16px;
  }

  .inline-form {
    grid-template-columns: 1fr;
  }

  .overview-grid .role-card:first-child {
    grid-row: auto;
  }

  .hero {
    padding-inline: 16px;
  }

  .hero-stats {
    grid-template-columns: 1fr;
  }

  .hero-visual img {
    min-height: 240px;
    border-radius: 16px;
  }

  .leaderboard-visual {
    padding: 10px;
  }

  .leaderboard-tabs {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
  }

  .leaderboard-tabs button {
    flex: 0 0 auto;
    min-width: 116px;
  }

  .leaderboard-shortcuts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .leaderboard-shortcuts a {
    min-height: 68px;
    font-size: 15px;
  }

  .leaderboard-shortcuts .icon {
    width: 32px;
    height: 32px;
  }

  .auth-page {
    padding: 0;
  }

  .auth-topbar {
    grid-template-columns: 1fr;
    gap: 8px;
    min-height: auto;
    padding: 10px 14px;
  }

  .auth-topbar-logo {
    justify-self: start;
  }

  .auth-topbar-logo span {
    width: 34px;
    height: 34px;
  }

  .auth-topbar-nav {
    width: 100%;
    justify-content: flex-start;
    justify-self: stretch;
    gap: 8px;
  }

  .auth-topbar-nav a {
    min-height: 32px;
    padding: 0 10px;
    font-size: 13px;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(207, 218, 232, 0.78);
    border-radius: 999px;
  }

  .auth-shell {
    min-height: calc(100vh - 74px);
    border: 0;
    border-radius: 0;
  }

  .auth-visual {
    min-height: 300px;
  }

  .auth-card {
    padding: 24px 16px 34px;
  }

  .classroom-page {
    width: min(100% - 24px, 720px);
    padding-top: 18px;
  }

  .classroom-hero {
    padding: 22px;
    border-radius: 14px;
  }

  .classroom-course-head {
    grid-template-columns: 1fr;
  }

  .classroom-homework-head {
    display: grid;
  }

  .classroom-homework-summary-meta {
    width: 100%;
    justify-content: space-between;
  }

  .classroom-homework-title-copy > strong {
    font-size: 19px;
  }

  .classroom-submit-form button {
    width: 100%;
  }

  .classroom-submit-form .classroom-selected-file button {
    width: auto;
  }

  .classroom-file-list li {
    grid-template-columns: 1fr;
  }

  .classroom-file-list b {
    flex-wrap: wrap;
  }

  .auth-code-row {
    grid-template-columns: 1fr;
  }

  .auth-feature-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .auth-tabs button {
    padding-inline: 6px;
    font-size: 12px;
  }

  .auth-wechat-qr-card {
    grid-template-columns: 1fr;
  }

  .auth-wechat-qr-card img {
    width: min(180px, 100%);
    justify-self: center;
  }

  .auth-topbar {
    grid-template-columns: 1fr;
    gap: 8px;
    min-height: auto;
    padding: 10px 14px;
  }

  .auth-topbar-nav {
    justify-content: flex-start;
    gap: 18px;
    padding-bottom: 2px;
    font-size: 14px;
  }

  .leaderboard-card {
    min-height: auto;
    padding: 18px;
  }

  .leaderboard-head {
    display: grid;
    gap: 8px;
  }

  .leaderboard-head h2 {
    font-size: 22px;
  }

  .leaderboard-head p {
    max-width: none;
  }

  .leaderboard-row {
    grid-template-columns: 34px minmax(0, 1fr) 58px;
    gap: 10px;
    padding: 10px;
  }

  .leaderboard-progress {
    display: none;
  }

  .mega {
    padding-inline: 16px;
  }

  .section {
    padding: 62px 16px;
  }

  .smart-support {
    padding-inline: 16px;
  }

  .smart-support-card {
    min-height: auto;
    padding: 20px;
  }

  .smart-support-detail {
    padding: 20px;
  }

  .floating-service {
    position: static;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: auto;
    padding: 18px 16px;
    transform: none;
    background: #f5f7fb;
  }

  .floating-service-title,
  .strict-service::before {
    grid-column: 1 / -1;
  }

  .lead-form {
    grid-template-columns: 1fr;
  }

  .footer-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Refine the first-screen left/right composition. */
.hero {
  grid-template-columns: minmax(480px, 0.9fr) minmax(620px, 720px);
  gap: clamp(30px, 3.2vw, 56px);
  min-height: auto;
  align-items: center;
  padding-top: clamp(34px, 4vw, 58px);
  padding-left: clamp(42px, 4vw, 76px);
  padding-right: clamp(42px, 4vw, 76px);
  padding-bottom: clamp(42px, 4.2vw, 64px);
  background:
    radial-gradient(circle at 88% 8%, rgba(242, 184, 75, 0.18) 0 12%, transparent 13% 100%),
    linear-gradient(105deg, rgba(255, 255, 255, 0.98) 0 54%, rgba(239, 246, 255, 0.9) 54% 100%),
    linear-gradient(135deg, rgba(31, 98, 210, 0.12), rgba(15, 163, 154, 0.08)),
    #eef5ff;
}

.hero-copy {
  align-self: center;
  max-width: 720px;
}

.hero-copy h1 {
  max-width: 720px;
  font-size: clamp(46px, 4vw, 66px);
  line-height: 1.08;
}

.hero-text {
  max-width: 780px;
  font-size: 18px;
  line-height: 1.85;
}

.hero-stats {
  max-width: 820px;
  margin-top: 28px;
}

.hero-visual {
  width: min(100%, 720px);
  justify-self: end;
  transform: none;
  padding: 12px;
  border-radius: 20px;
}

.leaderboard-visual {
  align-self: center;
  margin-top: 0;
}

.leaderboard-tabs {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 7px;
  padding: 9px;
}

.leaderboard-tabs button,
.leaderboard-tabs button:first-child {
  flex: initial;
  min-width: 0;
  flex-basis: auto;
  min-height: 40px;
  padding: 7px 7px;
  font-size: 13px;
}

.leaderboard-card {
  min-height: 360px;
  padding: 24px 26px;
}

.leaderboard-head {
  gap: 18px;
}

.leaderboard-shortcuts {
  margin-bottom: 2px;
}

@media (max-width: 1180px) {
  .hero {
    grid-template-columns: 1fr;
    gap: 28px;
    padding-right: clamp(24px, 4vw, 56px);
  }

  .hero-visual {
    justify-self: stretch;
    width: 100%;
    transform: none;
  }
}

body.strict-wireframe {
  background:
    linear-gradient(180deg, #f6f9ff 0, #ffffff 260px),
    #fff;
  color: #1f2630;
}

body.strict-wireframe > .site-header,
body.strict-wireframe > .mobile-menu,
body.strict-wireframe > main,
body.strict-wireframe > .floating-service,
body.strict-wireframe > .site-footer {
  display: none;
}

.strict-home {
  width: min(100%, 1280px);
  margin: 0 auto;
  padding: 28px 30px 0;
  font-family: "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
}

.strict-top {
  display: grid;
  grid-template-columns: 110px minmax(380px, 560px) 1fr;
  gap: 120px;
  align-items: start;
  padding: 18px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid #e4ebf5;
  border-radius: 18px;
  box-shadow: 0 18px 48px rgba(32, 58, 94, 0.08);
}

.strict-logo {
  display: grid;
  width: 100px;
  height: 58px;
  place-items: center;
  color: #fff;
  border: 0;
  background: linear-gradient(135deg, #2067d6, #11a7a2);
  border-radius: 12px;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  box-shadow: 0 10px 24px rgba(32, 103, 214, 0.22);
}

.strict-search {
  display: grid;
  grid-template-columns: 62px minmax(250px, 1fr) 110px;
  height: 58px;
  overflow: hidden;
  border: 1px solid #cdd8e7;
  background: #fff;
  border-radius: 14px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.9);
}

.strict-search input {
  min-width: 0;
  padding: 0 16px;
  text-align: center;
  border: 0;
  outline: 0;
}

.strict-search.voice-search .voice-search-field {
  padding: 7px 16px 7px 4px;
  text-align: left;
}

.strict-search.voice-search input {
  padding: 0;
  text-align: left;
}

.strict-search .voice-record-button {
  border-right-color: #d9e1ea;
  background: #f5f9ff;
}

.strict-magnifier {
  position: relative;
  border-left: 1px solid #d9e1ea;
}

.strict-magnifier::before {
  position: absolute;
  top: 11px;
  left: 14px;
  width: 30px;
  height: 30px;
  content: "";
  border: 4px solid #172033;
  border-radius: 50%;
}

.strict-magnifier::after {
  position: absolute;
  top: 39px;
  left: 42px;
  width: 24px;
  height: 4px;
  content: "";
  background: #172033;
  transform: rotate(45deg);
  transform-origin: left center;
}

.strict-search button[type="submit"] {
  border: 0;
  color: #fff;
  border-left: 1px solid #d9e1ea;
  background: #172033;
  font-weight: 800;
  cursor: pointer;
}

.strict-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(70px, 1fr));
  gap: 18px;
  align-items: start;
  text-align: center;
  font-weight: 800;
}

.strict-actions a {
  display: grid;
  gap: 8px;
  justify-items: center;
  min-width: 76px;
}

.strict-action-icon {
  position: relative;
  display: block;
  width: 48px;
  height: 44px;
}

.strict-action-icon::before,
.strict-action-icon::after {
  position: absolute;
  content: "";
}

.strict-action-icon::before {
  inset: 7px 10px;
  border: 3px solid #2f68c9;
  background: #eaf2ff;
  transform: rotate(14deg);
}

.strict-action-icon::after {
  right: 2px;
  bottom: 2px;
  width: 18px;
  height: 18px;
  background: #f4b840;
  border-radius: 50%;
}

.strict-action-icon.icon-logout::before {
  inset: 7px auto 7px 10px;
  width: 18px;
  border: 3px solid #cf3850;
  border-right: 0;
  border-radius: 5px 0 0 5px;
  background: #fff0f2;
  transform: none;
}

.strict-action-icon.icon-logout::after {
  right: 2px;
  bottom: 12px;
  width: 21px;
  height: 15px;
  border-radius: 0;
  background: #cf3850;
  clip-path: polygon(0 35%, 56% 35%, 56% 0, 100% 50%, 56% 100%, 56% 65%, 0 65%);
}

.strict-actions a {
  color: #304058;
  transition: transform 0.2s ease, color 0.2s ease;
}

.strict-actions a:hover {
  color: #2067d6;
  transform: translateY(-2px);
}

.strict-hero {
  display: grid;
  grid-template-columns: 370px 1fr;
  gap: 18px;
  margin-top: 26px;
}

.strict-category {
  padding: 12px;
  border: 1px solid #bfd4f5;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 18px 42px rgba(32, 58, 94, 0.08);
}

.strict-category div {
  display: grid;
  grid-template-columns: 112px 1fr;
  gap: 10px;
  align-items: center;
  min-height: 34px;
  padding: 9px 12px;
  border-radius: 10px;
}

.strict-category div:nth-child(odd) {
  background: #f6f9ff;
}

.strict-category div:hover {
  background: #eef5ff;
}

.strict-category b {
  font-size: 16px;
}

.strict-category span {
  color: #40506a;
  font-size: 15px;
  font-weight: 800;
}

.strict-main-stage {
  min-width: 0;
}

.strict-tabs {
  display: grid;
  grid-template-columns: repeat(8, minmax(78px, 1fr));
  gap: 8px;
}

.strict-tabs a {
  display: grid;
  min-height: 32px;
  place-items: center;
  color: #304058;
  border: 1px solid #cdd8e7;
  background: #fff;
  border-radius: 8px;
  font-weight: 800;
  text-align: center;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.strict-tabs a:first-child {
  color: #fff;
  border-color: #11a7a2;
  background: #11a7a2;
}

.strict-tabs a:hover,
.strict-tabs a.active {
  color: #fff;
  background: #2067d6;
  transform: translateY(-1px);
}

.strict-flash {
  position: relative;
  display: grid;
  height: 210px;
  margin-top: 14px;
  place-items: center start;
  padding: 34px 48px;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(circle at 82% 18%, rgba(244, 184, 64, 0.95) 0 42px, transparent 43px),
    radial-gradient(circle at 88% 76%, rgba(17, 167, 162, 0.72) 0 68px, transparent 69px),
    linear-gradient(135deg, #172033 0%, #2067d6 62%, #11a7a2 100%);
  border-radius: 18px;
  box-shadow: 0 20px 50px rgba(32, 58, 94, 0.16);
}

.strict-flash::before,
.strict-flash::after {
  position: absolute;
  content: "";
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 24px;
  transform: rotate(-12deg);
}

.strict-flash::before {
  right: 86px;
  top: 38px;
  width: 168px;
  height: 94px;
}

.strict-flash::after {
  right: 42px;
  bottom: 30px;
  width: 112px;
  height: 68px;
}

.strict-flash-slide {
  position: relative;
  z-index: 1;
  display: none;
  width: 100%;
  height: 100%;
  align-content: center;
  color: inherit;
  text-decoration: none;
}

.strict-flash-slide.active {
  display: grid;
}

.strict-flash.is-info-mode {
  place-items: stretch;
  padding: 24px;
  color: #172033;
  background: #fff;
  border: 1px solid #dbe7f7;
}

.strict-flash.is-info-mode::before,
.strict-flash.is-info-mode::after {
  display: none;
}

.strict-flash.has-flash-image {
  height: auto;
  min-height: 0;
  aspect-ratio: 2 / 1;
  padding: 0;
  place-items: stretch;
  background: #f8fbff;
}

.strict-flash.has-flash-image::before,
.strict-flash.has-flash-image::after {
  display: none;
}

.strict-flash-slide.has-image {
  position: absolute;
  inset: 0;
  max-width: none;
  padding: 34px 48px;
  background-position: center;
  background-size: cover;
}

.strict-flash.has-flash-image .strict-flash-slide.has-image {
  display: none;
  padding: 0;
  background: #f8fbff;
}

.strict-flash.has-flash-image .strict-flash-slide.has-image.active {
  display: grid;
}

.strict-flash-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  background: #f8fbff;
  border-radius: 12px;
}

.strict-flash-slide.has-image::before {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(90deg, rgba(10, 22, 45, 0.7), rgba(10, 22, 45, 0.16));
}

.strict-flash.has-flash-image .strict-flash-slide.has-image::before,
.strict-flash.has-flash-image .strict-flash-slide.has-image > span,
.strict-flash.has-flash-image .strict-flash-slide.has-image > h1,
.strict-flash.has-flash-image .strict-flash-slide.has-image > p {
  display: none;
}

.strict-flash-slide.has-image > * {
  position: relative;
  z-index: 1;
  max-width: 620px;
}

.strict-flash.has-flash-image .strict-flash-image {
  max-width: none;
  min-width: 0;
}

.strict-flash-progress {
  position: absolute;
  left: 50%;
  bottom: 10px;
  z-index: 4;
  display: flex;
  gap: 6px;
  width: min(260px, calc(100% - 80px));
  transform: translateX(-50%);
}

.strict-flash-progress span {
  position: relative;
  flex: 1 1 0;
  height: 4px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.58);
  border-radius: 999px;
  box-shadow: 0 0 0 1px rgba(23, 32, 51, 0.08);
}

.strict-flash-progress span::before {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(135deg, #11a7a2, #2067d6);
  border-radius: inherit;
  transform: scaleX(0);
  transform-origin: left center;
}

.strict-flash-progress span.active {
  background: rgba(255, 255, 255, 0.92);
}

.strict-flash-progress span.active::before {
  animation: strictFlashProgress var(--flash-duration, 4s) linear forwards;
}

@keyframes strictFlashProgress {
  from {
    transform: scaleX(0);
  }

  to {
    transform: scaleX(1);
  }
}

.strict-flash span {
  display: inline-flex;
  margin-bottom: 10px;
  padding: 4px 10px;
  color: #172033;
  background: #fff;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
}

.strict-flash h1 {
  margin: 0 0 10px;
  font-size: 34px;
  line-height: 1.2;
}

.strict-flash p {
  max-width: 560px;
  margin: 0;
  color: rgba(255, 255, 255, 0.86);
  font-size: 16px;
}

.strict-flash-info {
  display: grid;
  gap: 10px;
  min-height: 0;
}

.strict-flash-info span {
  width: fit-content;
  color: var(--teal);
  background: #eefdfa;
}

.strict-flash-info h1 {
  margin: 0;
  color: #172033;
  font-size: 28px;
  line-height: 1.15;
}

.strict-flash-info-body {
  max-height: 124px;
  overflow-y: auto;
  padding: 14px 16px;
  color: #607089;
  background: #f8fbff;
  border: 1px solid #e5edf7;
  border-radius: 8px;
}

.strict-flash-info-body p {
  max-width: none;
  margin: 0 0 10px;
  color: inherit;
  font-size: 13px;
  line-height: 1.8;
}

.strict-flash-info-body p:last-child {
  margin-bottom: 0;
}

.leaderboard-note {
  align-self: end;
  margin-top: auto;
  padding: 8px 10px;
  color: #66758d;
  background: #f8fbff;
  border: 1px solid #e5edf7;
  border-radius: 7px;
  font-size: 11px;
  line-height: 1.6;
}

.form-hint {
  margin: 0 0 10px;
  color: #66758d;
  font-size: 12px;
  line-height: 1.6;
}

.factory-category-item summary {
  align-items: center;
  cursor: pointer;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.factory-category-child-list {
  display: grid;
  gap: 8px;
  list-style: none;
  margin: 12px 0;
  padding: 0;
}

.factory-category-child-list li {
  align-items: center;
  background: #f8fbff;
  border: 1px solid #dbe7f5;
  border-radius: 6px;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  padding: 8px 10px;
}

.factory-category-child-list button {
  background: #fff;
  border: 1px solid #ef4444;
  border-radius: 6px;
  color: #dc2626;
  cursor: pointer;
  padding: 4px 10px;
}

.factory-category-child-form {
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(0, 1fr) auto;
}

button[type="submit"] {
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

button[type="submit"]:active,
button[type="submit"].is-submit-bounce {
  animation: submitBounce 0.32s ease;
}

@keyframes submitBounce {
  0% {
    transform: translateY(0) scale(1);
  }
  38% {
    transform: translateY(-3px) scale(1.025);
  }
  72% {
    transform: translateY(1px) scale(0.99);
  }
  100% {
    transform: translateY(0) scale(1);
  }
}


.strict-module {
  position: relative;
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 24px;
  align-items: center;
  min-height: 196px;
  margin-top: 54px;
  padding: 22px 30px 22px 22px;
  border: 1px solid #ffd4cf;
  background: linear-gradient(135deg, #fff8f6, #fff);
  border-radius: 18px;
  box-shadow: 0 18px 48px rgba(32, 58, 94, 0.08);
}

.strict-module-button {
  position: absolute;
  top: -44px;
  right: 0;
  display: grid;
  width: 145px;
  height: 40px;
  place-items: center;
  color: #172033;
  border: 1px solid #cdd8e7;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 10px 24px rgba(32, 58, 94, 0.08);
  font-size: 18px;
  font-weight: 800;
}

.strict-side-title {
  display: grid;
  width: 68px;
  min-height: 164px;
  place-items: center;
  color: #fff;
  background: linear-gradient(180deg, #ff8a66, #f06b55);
  border: 0;
  border-radius: 12px;
  font-size: 20px;
  font-weight: 800;
  text-align: center;
  writing-mode: vertical-rl;
  letter-spacing: 4px;
}

.strict-side-title.dark {
  background: linear-gradient(180deg, #7c8592, #4d5968);
}

.strict-side-title.purple {
  background: linear-gradient(180deg, #9c75ff, #7b52e8);
}

.strict-side-title.pale {
  color: #5b4b17;
  background: linear-gradient(180deg, #fff1a8, #f4d566);
}

.strict-box-grid {
  display: grid;
  gap: 8px;
}

.strict-box-grid.six {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.strict-box-grid.three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.strict-box-grid article {
  display: grid;
  min-height: 110px;
  place-items: center;
  padding: 12px;
  border: 1px solid #f2d3ce;
  background: rgba(255, 255, 255, 0.82);
  border-radius: 10px;
  font-size: 17px;
  font-weight: 800;
  text-align: center;
  box-shadow: 0 10px 24px rgba(32, 58, 94, 0.05);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.strict-box-grid article:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 32px rgba(32, 58, 94, 0.12);
}

.strict-talent {
  border-color: #cfe2ff;
  background: linear-gradient(135deg, #f2f7ff, #fff);
}

.strict-talent .strict-box-grid article {
  min-height: 108px;
  border-color: #d8e5f8;
  background: #f7fbff;
}

.talent-entry-grid {
  gap: 20px;
}

.strict-talent .talent-entry {
  display: block;
  min-height: 178px;
  padding: 0;
  overflow: hidden;
  border: 1px solid #bfdbff;
  background:
    radial-gradient(circle at 92% 20%, rgba(32, 103, 214, 0.11) 0 46px, transparent 47px),
    linear-gradient(135deg, #ffffff, #f3f8ff);
}

.talent-entry a {
  display: grid;
  min-height: 178px;
  align-content: start;
  gap: 10px;
  padding: 24px;
  color: #172033;
}

.talent-entry span {
  display: grid;
  width: 36px;
  height: 30px;
  place-items: center;
  color: #fff;
  background: linear-gradient(135deg, #2067d6, #11a7a2);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 800;
}

.talent-entry h3 {
  margin: 8px 0 0;
  font-size: 22px;
}

.talent-entry p {
  margin: 0;
  color: #5f6b7d;
  font-size: 15px;
  line-height: 1.75;
}

.talent-entry b {
  margin-top: 4px;
  color: #2067d6;
  font-size: 14px;
}

.strict-career {
  border-color: #d8cbff;
  background: linear-gradient(135deg, #f8f4ff, #fff);
}

.strict-career .strict-box-grid article {
  border-color: #d8cbff;
  background: #f5f0ff;
}

.career-entry-grid {
  gap: 20px;
}

.strict-career .career-entry {
  display: block;
  min-height: 178px;
  padding: 0;
  overflow: hidden;
  border: 1px solid #dacfff;
  background:
    radial-gradient(circle at 92% 18%, rgba(140, 98, 242, 0.12) 0 44px, transparent 45px),
    linear-gradient(135deg, #ffffff, #f7f2ff);
}

.career-entry a {
  display: grid;
  min-height: 178px;
  align-content: start;
  gap: 10px;
  padding: 24px;
  color: #172033;
}

.career-entry span {
  width: fit-content;
  padding: 5px 10px;
  color: #7b52e8;
  background: rgba(123, 82, 232, 0.1);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
}

.career-entry h3 {
  margin: 0;
  font-size: 22px;
}

.career-entry p {
  margin: 0;
  color: #5f6b7d;
  font-size: 15px;
  line-height: 1.75;
}

.career-entry b {
  margin-top: 4px;
  color: #2067d6;
  font-size: 14px;
}

.career-detail-page {
  min-height: 100vh;
  color: #172033;
  background:
    radial-gradient(circle at 80% 8%, rgba(17, 167, 162, 0.14), transparent 320px),
    linear-gradient(180deg, #f6f9ff 0, #fff 360px);
  font-family: "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
}

.detail-shell {
  width: min(1120px, calc(100% - 40px));
  margin: 0 auto;
  padding: 28px 0 70px;
}

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

.detail-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-weight: 800;
}

.detail-brand span {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  color: #fff;
  background: linear-gradient(135deg, #2067d6, #11a7a2);
  border-radius: 12px;
}

.detail-back {
  padding: 10px 16px;
  color: #304058;
  background: #fff;
  border: 1px solid #d9e1ea;
  border-radius: 10px;
  box-shadow: 0 10px 24px rgba(32, 58, 94, 0.08);
}

.detail-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.detail-nav a {
  padding: 10px 14px;
  color: #304058;
  background: #fff;
  border: 1px solid #d9e1ea;
  border-radius: 10px;
  box-shadow: 0 10px 24px rgba(32, 58, 94, 0.06);
  font-weight: 700;
}

.detail-nav a:hover {
  color: #fff;
  background: #2067d6;
  border-color: #2067d6;
}

.detail-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 28px;
  align-items: stretch;
  margin-bottom: 28px;
}

.detail-hero-copy {
  padding: 42px;
  color: #fff;
  background: linear-gradient(135deg, #172033, #2067d6);
  border-radius: 24px;
  box-shadow: 0 22px 54px rgba(32, 58, 94, 0.18);
}

.detail-hero-copy span {
  display: inline-flex;
  margin-bottom: 14px;
  padding: 5px 12px;
  color: #172033;
  background: #fff;
  border-radius: 999px;
  font-weight: 800;
}

.detail-hero-copy h1 {
  margin: 0 0 16px;
  font-size: clamp(34px, 5vw, 58px);
  line-height: 1.12;
}

.detail-hero-copy p {
  max-width: 680px;
  margin: 0;
  color: rgba(255, 255, 255, 0.84);
  font-size: 18px;
}

.detail-summary {
  display: grid;
  align-content: center;
  gap: 16px;
  padding: 28px;
  background: #fff;
  border: 1px solid #e4ebf5;
  border-radius: 24px;
  box-shadow: 0 18px 42px rgba(32, 58, 94, 0.08);
}

.detail-summary div {
  padding-bottom: 14px;
  border-bottom: 1px solid #edf1f6;
}

.detail-summary div:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.detail-summary b {
  display: block;
  color: #11a7a2;
  font-size: 24px;
}

.detail-section {
  margin-top: 24px;
  padding: 30px;
  background: #fff;
  border: 1px solid #e4ebf5;
  border-radius: 20px;
  box-shadow: 0 14px 34px rgba(32, 58, 94, 0.06);
}

.detail-section h2 {
  margin: 0 0 18px;
  font-size: 30px;
}

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

.detail-card {
  min-height: 190px;
  padding: 22px;
  background: #f7faff;
  border: 1px solid #dbe8fb;
  border-radius: 16px;
}

.detail-card h3 {
  margin: 0 0 10px;
}

.detail-card p {
  margin: 0;
  color: #5f6b7d;
}

.detail-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  padding: 0;
  counter-reset: step;
}

.detail-steps li {
  position: relative;
  min-height: 140px;
  padding: 54px 18px 18px;
  background: #fbfcfe;
  border: 1px solid #e4ebf5;
  border-radius: 16px;
  list-style: none;
}

.detail-steps li::before {
  position: absolute;
  top: 16px;
  left: 18px;
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  color: #fff;
  background: #2067d6;
  border-radius: 50%;
  counter-increment: step;
  content: counter(step);
  font-weight: 800;
}

.detail-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  margin-top: 26px;
  padding: 24px 28px;
  color: #fff;
  background: #172033;
  border-radius: 18px;
}

.detail-cta p {
  margin: 0;
  color: #c8d2df;
}

.detail-cta a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  padding: 10px 18px;
  color: #fff;
  background: #11a7a2;
  border-radius: 10px;
  font-weight: 800;
}

.strict-support {
  border-color: #b8d3ff;
  background: linear-gradient(135deg, #fff6bc, #fff);
}

.strict-support .strict-box-grid article {
  border-color: #dde0e8;
  background: #f2f2f1;
}

.strict-about {
  margin-top: 48px;
  padding: 28px;
  background: #fff;
  border: 1px solid #e4ebf5;
  border-radius: 18px;
  box-shadow: 0 18px 48px rgba(32, 58, 94, 0.06);
}

.strict-about-title {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-left: 16px;
}

.strict-about-title span {
  display: block;
  width: 72px;
  height: 52px;
  background:
    linear-gradient(160deg, transparent 44%, #bfe0ff 45% 58%, transparent 59%),
    linear-gradient(#eef7ff, #d7ecff);
  border-radius: 12px;
}

.strict-about-title h2 {
  margin: 0;
  font-size: 22px;
}

.strict-about-text {
  margin: 16px 0 0;
  padding: 18px 22px;
  border: 1px solid #d9e1ea;
  background: #fbfcfe;
  border-radius: 12px;
  font-size: 16px;
  line-height: 1.9;
}

.strict-about-text p {
  margin: 0 0 8px;
  color: #1f2630;
}

.strict-links {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  margin: 34px 12px 0;
}

.strict-links a {
  display: grid;
  min-height: 76px;
  place-items: center;
  color: #304058;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.8), rgba(234, 246, 255, 0.88)),
    #eaf6ff;
  border: 1px solid #d7eafd;
  border-radius: 16px;
  font-size: 22px;
  font-weight: 800;
  box-shadow: 0 12px 28px rgba(32, 58, 94, 0.08);
  transition: transform 0.2s ease;
}

.strict-links a:hover {
  transform: translateY(-3px);
}

.strict-friends {
  margin-top: 28px;
  padding: 24px 20px 34px;
  background: #f4f8fc;
  border-radius: 18px 18px 0 0;
  text-align: center;
}

.strict-friends h2 {
  margin: 0 0 20px;
  font-size: 21px;
}

.strict-friends div {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 28px;
}

.strict-friends a {
  color: #18a88f;
  text-decoration: underline;
  font-weight: 700;
}

.strict-footer {
  display: grid;
  grid-template-columns: repeat(5, minmax(120px, 1fr)) 140px;
  gap: 26px;
  min-height: 260px;
  padding: 44px 70px 36px;
  background: #eef2f7;
  border-top: 1px solid #d9e1ea;
}

.strict-footer div {
  display: grid;
  align-content: start;
  gap: 8px;
}

.strict-footer h3 {
  margin: 0 0 8px;
  color: #60646c;
  font-size: 17px;
}

.strict-footer a,
.strict-footer span {
  color: #69717c;
  font-size: 15px;
}

.strict-qr {
  justify-items: center;
  text-align: center;
}

.strict-qr div {
  display: grid;
  width: 92px;
  height: 92px;
  place-items: center;
  background:
    repeating-linear-gradient(45deg, #111 0 5px, #fff 5px 10px);
  border: 8px solid #fff;
  color: #fff;
  font-size: 12px;
}

.strict-service {
  position: fixed;
  right: max(16px, calc((100vw - 1280px) / 2 + 12px));
  top: 285px;
  z-index: 30;
  display: grid;
  width: 100px;
  padding: 14px 10px;
  gap: 14px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid #e4ebf5;
  border-radius: 16px;
  box-shadow: 0 18px 42px rgba(20, 32, 48, 0.12);
  text-align: center;
  backdrop-filter: blur(12px);
}

.strict-service a {
  display: grid;
  min-height: 50px;
  place-items: center;
  color: #7a8391;
  border-bottom: 1px solid #edf1f6;
  font-size: 14px;
}

.strict-service a:last-child {
  border-bottom: 0;
}

.strict-service b {
  display: grid;
  min-height: 30px;
  place-items: center;
  color: #fff;
  background: #15cda8;
  border-radius: 4px;
}

@media (max-width: 1100px) {
  .strict-home {
    padding-inline: 18px;
  }

  .strict-top {
    grid-template-columns: 100px 1fr;
    gap: 24px;
  }

  .strict-actions {
    grid-column: 1 / -1;
  }

  .strict-hero,
  .strict-module {
    grid-template-columns: 1fr;
  }

  .strict-side-title {
    width: 100%;
    min-height: 54px;
    writing-mode: initial;
    letter-spacing: 0;
  }

  .strict-box-grid.six,
  .strict-box-grid.three,
  .strict-links,
  .strict-footer {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .strict-service {
    position: static;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    width: auto;
    margin-top: 20px;
  }

  .detail-hero,
  .detail-grid,
  .detail-steps {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 720px) {
  .strict-home {
    padding: 18px 12px 0;
  }

  .strict-top,
  .strict-search,
  .strict-actions,
  .strict-category div,
  .strict-tabs,
  .strict-box-grid.six,
  .strict-box-grid.three,
  .strict-links,
  .strict-footer,
  .strict-service {
    grid-template-columns: 1fr;
  }

  .strict-logo {
    width: 100%;
  }

  .strict-search {
    height: auto;
  }

  .strict-search input,
  .strict-search button[type="submit"],
  .strict-magnifier {
    min-height: 48px;
    border-left: 0;
    border-top: 3px solid #505963;
  }

  .strict-search.voice-search {
    grid-template-columns: 48px minmax(0, 1fr) 86px;
  }

  .strict-search .voice-record-button {
    min-height: 48px;
    border-top: 3px solid #505963;
  }

  .strict-search.voice-search .voice-search-field {
    min-height: 48px;
  }

  .strict-magnifier {
    display: none;
  }

  .strict-module {
    padding: 14px;
  }

  .strict-module-button {
    position: static;
    width: 100%;
    margin-bottom: 8px;
  }

  .strict-flash {
    height: 160px;
  }

  .strict-about-text {
    margin-inline: 0;
    font-size: 15px;
  }

  .detail-shell {
    width: min(100% - 24px, 1120px);
  }

  .detail-header,
  .detail-cta {
    align-items: stretch;
    flex-direction: column;
  }

  .detail-hero,
  .detail-grid,
  .detail-steps {
    grid-template-columns: 1fr;
  }

  .detail-hero-copy,
  .detail-section,
  .detail-summary {
    padding: 22px;
  }
}

/* Final visual polish: compact, contemporary, and consistent across pages. */
:root {
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --shadow-soft: 0 14px 36px rgba(21, 32, 51, 0.08);
  --shadow-hover: 0 18px 42px rgba(21, 32, 51, 0.12);
}

.strict-home {
  width: min(100%, 1180px);
  padding: 22px 24px 0;
}

.strict-top {
  grid-template-columns: 96px minmax(390px, 560px) 1fr;
  gap: 28px;
  align-items: center;
  padding: 14px 16px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
}

.strict-logo {
  width: 88px;
  height: 54px;
  border-radius: var(--radius-md);
  font-size: 16px;
}

.strict-search {
  height: 50px;
  grid-template-columns: 54px minmax(240px, 1fr) 92px;
  border-radius: var(--radius-md);
}

.strict-search input {
  font-size: 15px;
}

.strict-search button[type="submit"] {
  font-size: 15px;
}

.strict-actions {
  gap: 10px;
  font-size: 14px;
}

.strict-action-icon {
  width: 40px;
  height: 36px;
}

.strict-hero {
  grid-template-columns: 330px 1fr;
  gap: 14px;
  margin-top: 18px;
}

.strict-category {
  padding: 10px;
  border-radius: var(--radius-lg);
}

.strict-category div {
  min-height: 30px;
  padding: 7px 10px;
  border-radius: var(--radius-sm);
}

.strict-category b,
.strict-category span {
  font-size: 14px;
}

.strict-tabs {
  gap: 6px;
}

.strict-tabs a {
  min-height: 34px;
  padding: 4px 8px;
  border-radius: 9px;
  font-size: 13px;
}

.strict-flash {
  height: 230px;
  margin-top: 12px;
  padding: 28px 36px;
  border-radius: var(--radius-lg);
}

.strict-flash h1 {
  font-size: 30px;
}

.strict-flash p {
  font-size: 15px;
}

.strict-module {
  grid-template-columns: 62px 1fr;
  gap: 18px;
  min-height: 164px;
  margin-top: 42px;
  padding: 18px 24px 18px 18px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
}

.strict-side-title {
  width: 58px;
  min-height: 132px;
  border-radius: var(--radius-md);
  font-size: 18px;
  letter-spacing: 3px;
}

.strict-module-button {
  top: -36px;
  width: 126px;
  height: 34px;
  border-radius: 9px;
  font-size: 15px;
}

.strict-box-grid.three {
  gap: 14px;
}

.strict-box-grid.six {
  gap: 8px;
}

.strict-box-grid article {
  min-height: 96px;
  padding: 12px;
  border-radius: var(--radius-sm);
  font-size: 15px;
}

.talent-entry a,
.career-entry a {
  min-height: 154px;
  padding: 20px;
}

.strict-talent .talent-entry,
.strict-career .career-entry {
  min-height: 154px;
  border-radius: var(--radius-md);
}

.talent-entry h3,
.career-entry h3 {
  font-size: 20px;
}

.talent-entry p,
.career-entry p {
  font-size: 14px;
  line-height: 1.65;
}

.strict-about {
  margin-top: 36px;
  padding: 22px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
}

.strict-about-title h2 {
  font-size: 21px;
}

.strict-about-text {
  padding: 16px 18px;
  font-size: 15px;
  line-height: 1.8;
}

.strict-links {
  gap: 16px;
  margin-top: 26px;
}

.strict-links a {
  min-height: 62px;
  border-radius: var(--radius-md);
  font-size: 18px;
}

.strict-friends {
  margin-top: 22px;
  padding: 22px 18px 28px;
}

.strict-footer {
  grid-template-columns: repeat(5, minmax(104px, 1fr)) 120px;
  gap: 18px;
  min-height: 220px;
  padding: 34px 48px 30px;
}

.strict-service {
  width: 88px;
  gap: 10px;
  padding: 12px 8px;
  border-radius: var(--radius-md);
}

.strict-service a {
  min-height: 42px;
  font-size: 12px;
}

/* Final floating service polish: compact, coordinated with the blue-white site theme. */
.strict-service {
  top: clamp(350px, 43vh, 400px);
  width: 96px;
  gap: 8px;
  padding: 10px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(247, 251, 255, 0.92)),
    linear-gradient(135deg, rgba(31, 98, 210, 0.08), rgba(17, 167, 162, 0.08));
  border: 1px solid rgba(207, 224, 243, 0.95);
  border-radius: 18px;
  box-shadow: 0 20px 42px rgba(25, 57, 102, 0.14);
}

.strict-service::before {
  content: "快捷服务";
  display: block;
  padding: 2px 4px 4px;
  color: #607089;
  text-align: center;
  font-size: 12px;
  font-weight: 900;
}

.strict-service a {
  position: relative;
  min-height: 38px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 10px;
  place-items: center;
  color: #344054;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid #dce8f4;
  border-radius: 10px;
  box-shadow: 0 8px 18px rgba(31, 98, 210, 0.06);
  text-decoration: none;
  transition:
    color 0.18s ease,
    background 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease;
}

.strict-service a:last-child {
  border-bottom: 1px solid #dce8f4;
}

.strict-service a:hover {
  color: #fff;
  background: linear-gradient(135deg, #2067d6, #11a7a2);
  border-color: transparent;
  box-shadow: 0 12px 24px rgba(31, 98, 210, 0.18);
  transform: translateY(-1px);
}

.strict-service a::before {
  content: "";
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  background: linear-gradient(135deg, #18a39b, #1f6ed4);
  border-radius: 999px;
  box-shadow: 0 0 0 4px rgba(31, 98, 210, 0.08);
}

.strict-service a:hover::before {
  background: #fff;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.2);
}

.strict-service b {
  display: inline;
  min-height: 0;
  color: inherit;
  background: transparent;
  border-radius: 0;
}

.section {
  max-width: 1060px;
  padding: 64px 20px;
}

body > main > #plan {
  padding-top: clamp(30px, 3.4vw, 46px);
}

.section-heading {
  margin-bottom: 26px;
}

.section-heading h2 {
  font-size: clamp(28px, 3.4vw, 44px);
}

.process {
  gap: 12px;
}

.process article,
.course-card,
.three-up article,
.dashboard-grid article,
.detail-section,
.detail-summary,
.pricing-panel {
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
}

.process article {
  min-height: 184px;
  padding: 18px;
}

.course-grid {
  gap: 14px;
}

.course-card {
  min-height: 260px;
  padding: 20px;
}

body > main > #courses {
  width: min(100%, 1060px);
  max-width: 1060px;
  margin-inline: auto;
  padding-inline: 20px;
}

body > main > #courses .section-heading,
body > main > #courses .tabs,
body > main > #courses .course-grid {
  width: 100%;
}

body > main > #courses .course-grid.is-filtered .course-card:not(.is-hidden) {
  grid-column: 1 / -1;
  min-height: 250px;
  padding: clamp(24px, 3vw, 42px);
}

body > main > #courses .course-grid.is-filtered .course-card:not(.is-hidden) h3 {
  max-width: 980px;
  font-size: clamp(24px, 2.4vw, 34px);
}

body > main > #courses .course-grid.is-filtered .course-card:not(.is-hidden) p {
  max-width: 980px;
}

.smart-support,
.career-planning-section,
.system-section {
  padding-top: 54px;
  padding-bottom: 54px;
}

.smart-support-grid,
.career-planning-grid,
.talent-hub-grid {
  gap: 14px;
}

.smart-support-card,
.career-planning-card,
.talent-hub-card {
  min-height: 160px;
  padding: 20px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
}

.smart-support-card:hover,
.career-planning-card:hover,
.talent-hub-card:hover,
.strict-box-grid article:hover,
.strict-links a:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
}

.smart-support-detail {
  margin-top: 18px;
  padding: 22px;
  border-radius: var(--radius-md);
}

.detail-shell {
  width: min(1040px, calc(100% - 40px));
  padding-top: 22px;
}

.detail-header {
  margin-bottom: 24px;
}

.detail-nav a {
  padding: 8px 12px;
  border-radius: 9px;
  font-size: 14px;
}

.detail-hero {
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 18px;
  margin-bottom: 20px;
}

.detail-hero-copy {
  padding: 34px;
  border-radius: var(--radius-lg);
}

.detail-hero-copy h1 {
  font-size: clamp(32px, 4.4vw, 50px);
}

.detail-summary {
  padding: 22px;
}

.detail-section {
  margin-top: 18px;
  padding: 24px;
}

.detail-grid {
  gap: 14px;
}

.detail-card {
  min-height: 166px;
  padding: 20px;
  border-radius: var(--radius-md);
}

.detail-steps {
  gap: 12px;
}

.detail-cta {
  margin-top: 20px;
  padding: 22px;
  border-radius: var(--radius-md);
}

.pricing-query {
  padding-top: 54px;
}

.pricing-shell {
  gap: 16px;
}

.pricing-menu {
  gap: 8px;
}

.pricing-menu button {
  min-height: 40px;
  border-radius: 9px;
}

.pricing-panel {
  padding: 22px;
}

@media (max-width: 1100px) {
  .strict-top {
    grid-template-columns: 90px 1fr;
    gap: 16px;
  }

  .strict-hero {
    grid-template-columns: 300px 1fr;
  }

  .strict-footer {
    padding-inline: 28px;
  }
}

@media (max-width: 760px) {
  .strict-home {
    padding: 14px 12px 0;
  }

  .strict-top,
  .strict-hero {
    gap: 12px;
  }

  .strict-flash {
    height: auto;
    min-height: 150px;
    padding: 22px;
  }

  .strict-module {
    margin-top: 30px;
    padding: 14px;
  }

  .talent-entry a,
  .career-entry a,
  .smart-support-card,
  .talent-hub-card {
    min-height: auto;
  }
}

@media (max-width: 1180px) {
  .hero {
    grid-template-columns: 1fr;
    gap: 26px;
    padding: clamp(24px, 4vw, 42px) clamp(20px, 4vw, 44px) clamp(24px, 4vw, 40px);
  }

  .hero-copy,
  .hero-copy h1,
  .hero-text {
    max-width: 760px;
  }

  .hero-copy h1 {
    font-size: clamp(42px, 7vw, 64px);
  }

  .hero-visual {
    width: 100%;
    justify-self: stretch;
  }

  body > main > #plan {
    padding-top: clamp(28px, 4vw, 44px);
  }

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

@media (max-width: 760px) {
  .hero {
    gap: 20px;
    padding: 22px 14px 24px;
  }

  .hero-copy h1 {
    font-size: clamp(34px, 10vw, 46px);
    line-height: 1.08;
  }

  .hero-copy h1 br {
    display: none;
  }

  .hero-text {
    font-size: 16px;
    line-height: 1.68;
  }

  .hero-actions {
    gap: 10px;
    margin-top: 20px;
  }

  .hero-actions .button {
    flex: 1 1 150px;
    min-height: 44px;
    padding-inline: 16px;
  }

  .hero-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    max-width: none;
  }

  .hero-stats a {
    padding: 12px 10px;
  }

  .hero-stats dt {
    font-size: 24px;
  }

  .hero-stats dd {
    white-space: normal;
  }

  .leaderboard-visual {
    gap: 10px;
    padding: 8px;
    border-radius: 16px;
  }

  .leaderboard-shortcuts {
    grid-template-columns: repeat(5, minmax(58px, 1fr));
    gap: 6px;
  }

  .leaderboard-shortcuts a {
    min-height: 62px;
    padding: 8px 4px;
    font-size: 13px;
  }

  .leaderboard-shortcuts .icon {
    width: 28px;
    height: 28px;
  }

  .leaderboard-tabs {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 8px;
    -webkit-overflow-scrolling: touch;
  }

  .leaderboard-tabs button,
  .leaderboard-tabs button:first-child {
    flex: 0 0 auto;
    min-width: 92px;
    min-height: 38px;
    padding: 7px 10px;
    font-size: 13px;
  }

  .leaderboard-card {
    padding: 16px;
    min-height: auto;
  }

  .section {
    padding: 46px 14px;
  }

  body > main > #plan {
    padding-top: 26px;
  }

  .section-heading {
    margin-bottom: 20px;
  }

  .section-heading h2 {
    font-size: clamp(26px, 8vw, 36px);
  }

  #system .section-heading h2 {
    white-space: normal;
  }

  .course-grid .course-card:nth-child(4),
  .course-grid .course-card:nth-child(5) {
    grid-column: auto;
  }
}

@media (max-width: 420px) {
  .hero-stats {
    grid-template-columns: 1fr;
  }

  .leaderboard-shortcuts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Mobile home is task-first: keep the full promotional home for desktop only. */
.mobile-home-actions {
  display: none;
}

@media (max-width: 760px) {
  body > .strict-home,
  body > main,
  body > .floating-service,
  body > .site-footer {
    display: none;
  }

  .mobile-home-actions {
    display: grid;
    gap: 18px;
    width: min(100% - 28px, 560px);
    min-height: calc(100vh - 86px);
    margin: 0 auto;
    padding: 28px 0 42px;
  }

  .mobile-home-actions-head {
    display: grid;
    gap: 6px;
  }

  .mobile-home-actions-head p {
    margin: 0;
    color: #2067d6;
    font-size: 14px;
    font-weight: 800;
  }

  .mobile-home-actions-head h1 {
    margin: 0;
    color: #172033;
    font-size: 25px;
    line-height: 1.25;
  }

  .mobile-home-actions-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .mobile-home-actions-grid a {
    display: grid;
    min-height: 138px;
    align-content: start;
    gap: 7px;
    padding: 16px;
    color: #172033;
    background: #fff;
    border: 1px solid #dfe8f4;
    border-radius: 16px;
    box-shadow: 0 10px 24px rgba(31, 98, 210, 0.08);
  }

  .mobile-home-actions-grid a:first-child {
    grid-column: 1 / -1;
    min-height: 104px;
    grid-template-columns: 48px minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 12px;
    align-content: center;
    background: linear-gradient(135deg, #1f62d2, #138fbe);
    border-color: transparent;
    color: #fff;
  }

  .mobile-home-actions-grid a:first-child .mobile-home-action-icon {
    grid-row: 1 / -1;
    margin: 0;
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
  }

  .mobile-home-actions-grid a:first-child small {
    color: rgba(255, 255, 255, 0.78);
  }

  .mobile-home-action-icon {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    margin-bottom: 3px;
    color: #2067d6;
    background: #edf4ff;
    border-radius: 12px;
    font-size: 17px;
    font-weight: 900;
  }

  .mobile-home-action-icon.classroom { color: #0b917e; background: #e8faf5; }
  .mobile-home-action-icon.course { color: #8b5a12; background: #fff5df; }
  .mobile-home-action-icon.commerce { color: #9a3f7e; background: #fff0f8; }
  .mobile-home-action-icon.career { color: #6c50cb; background: #f1eeff; }

  .mobile-home-actions-grid b {
    font-size: 16px;
    line-height: 1.3;
  }

  .mobile-home-actions-grid small {
    color: #718096;
    font-size: 12px;
    line-height: 1.45;
  }
}

/* Final shortcut alignment: keep the hero actions evenly spaced. */
.leaderboard-shortcuts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: center;
  width: 100%;
  margin: 0;
  padding: 8px 14px;
  gap: 10px;
}

.leaderboard-shortcuts a {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 8px;
  min-height: 72px;
  padding: 8px 6px;
  font-size: 14px;
  line-height: 1.2;
  text-align: center;
}

.leaderboard-shortcuts .classroom-todo-count {
  position: absolute;
  top: 8px;
  right: 18%;
  margin: 0;
}

.leaderboard-shortcuts .icon {
  width: 34px;
  height: 34px;
}

/* Logged-in business accounts retain their workbench and receive a fifth, equal logout shortcut. */
.leaderboard-shortcuts.has-workbench-logout {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.leaderboard-shortcuts [data-home-logout] {
  order: 999;
}

.leaderboard-shortcuts .quick-logout-action {
  color: #c7384c;
}

.leaderboard-shortcuts .quick-logout-action:hover {
  color: #a7243a;
  background: #fff7f7;
}

.leaderboard-shortcuts [data-admin-home-entry][hidden] {
  display: none !important;
}

.leaderboard-shortcuts.has-admin-entry {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.quick-admin-entry {
  color: #1768c7;
}

.quick-admin-entry-icon {
  width: 34px;
  height: 34px;
  padding: 6px;
  fill: #edf5ff;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  border-radius: 10px;
  background: #edf5ff;
}

.pricing-panel-head {
  position: relative;
}

.pricing-view-all {
  position: absolute;
  top: 0;
  right: 0;
  min-height: 38px;
  padding: 8px 18px;
  color: #1768c7;
  background: #f6faff;
  border: 1px solid #a9cbed;
  border-radius: 8px;
  font-weight: 900;
}

.pricing-overview-dialog[hidden] {
  display: none;
}

.pricing-overview-dialog {
  position: fixed;
  z-index: 12000;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 28px;
}

.pricing-overview-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(11, 25, 48, 0.64);
  backdrop-filter: blur(3px);
}

.pricing-overview-window {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(1180px, 94vw);
  max-height: min(86vh, 900px);
  overflow: hidden;
  background: #fff;
  border: 1px solid #cfe0f1;
  border-radius: 16px;
  box-shadow: 0 28px 80px rgba(7, 27, 56, 0.28);
}

.pricing-overview-window > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 22px;
  border-bottom: 1px solid #dde8f2;
  background: linear-gradient(135deg, #f7fbff, #effaf8);
}

.pricing-overview-window > header span {
  color: #168d83;
  font-size: 12px;
  font-weight: 900;
}

.pricing-overview-window > header h2 {
  margin: 3px 0 0;
  font-size: 24px;
}

.pricing-overview-window > header > button {
  width: 42px;
  height: 42px;
  padding: 0;
  color: #53657b;
  background: #fff;
  border: 1px solid #ccdbea;
  border-radius: 50%;
  font-size: 28px;
  line-height: 1;
}

.pricing-overview-content {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: max-content;
  align-content: start;
  align-items: stretch;
  gap: 18px;
  padding: 20px 22px 26px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.pricing-overview-content .pricing-card {
  min-width: 0;
}

@media (min-width: 761px) {
  .pricing-overview-content .pricing-card {
    grid-template-rows: auto minmax(48px, auto) auto auto 1fr auto;
  }
}

.pricing-overview-board-label {
  width: fit-content;
  margin: 0 0 10px !important;
  padding: 4px 9px;
  color: #087c72 !important;
  background: #e8f8f5;
  border: 1px solid #bfe7df;
  border-radius: 999px;
  font-size: 12px !important;
  font-weight: 900;
  line-height: 1.2;
}

.pricing-overview-empty {
  grid-column: 1 / -1;
  margin: 0;
  padding: 42px 20px;
  color: #687b91;
  text-align: center;
  background: #f8fbff;
  border: 1px dashed #bfd4e8;
  border-radius: 12px;
}

body.pricing-overview-open {
  overflow: hidden;
}

@media (max-width: 760px) {
  .leaderboard-shortcuts.has-admin-entry {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .pricing-panel-head {
    padding-top: 50px;
  }

  .pricing-view-all {
    left: 0;
    right: auto;
  }

  .pricing-overview-dialog {
    padding: 10px;
  }

  .pricing-overview-window {
    width: 100%;
    max-height: 94vh;
    border-radius: 12px;
  }

  .pricing-overview-window > header,
  .pricing-overview-content {
    padding-inline: 14px;
  }

  .pricing-overview-content {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 761px) and (max-width: 980px) {
  .pricing-overview-content {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.icon.logout {
  background: linear-gradient(135deg, #fff0f2, #ffe2e6);
  color: #cf3850;
}

.icon.logout::before {
  left: 9px;
  width: 13px;
  height: 19px;
  border: 3px solid currentColor;
  border-right: 0;
  border-radius: 4px 0 0 4px;
}

.icon.logout::after {
  right: 7px;
  width: 15px;
  height: 10px;
  background: currentColor;
  clip-path: polygon(0 35%, 58% 35%, 58% 0, 100% 50%, 58% 100%, 58% 65%, 0 65%);
}

@media (max-width: 760px) {
  .leaderboard-shortcuts {
    gap: 6px;
    padding: 6px;
  }

  .leaderboard-shortcuts a {
    min-height: 64px;
    font-size: 12px;
  }

  .leaderboard-shortcuts .icon {
    width: 30px;
    height: 30px;
  }
}

@media (max-width: 420px) {
  .leaderboard-shortcuts {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .leaderboard-shortcuts.has-workbench-logout {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Final leaderboard tab fit: keep labels readable without clipping. */
.leaderboard-tabs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
  gap: 10px;
  align-items: stretch;
  width: 100%;
  box-sizing: border-box;
  overflow: visible;
}

.leaderboard-tabs button,
.leaderboard-tabs button:first-child {
  min-width: 0;
  min-height: 44px;
  padding: 8px 12px;
  white-space: normal;
  word-break: keep-all;
  overflow-wrap: normal;
  line-height: 1.25;
}

@media (min-width: 1280px) {
  .leaderboard-tabs {
    grid-template-columns: repeat(auto-fit, minmax(94px, 1fr));
  }
}

@media (max-width: 760px) {
  .leaderboard-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: visible;
  }

  .leaderboard-tabs button,
  .leaderboard-tabs button:first-child {
    min-width: 0;
  }
}

/* Leaderboard tab placement: first tab spans two rows, lower row aligns with the upper group. */
@media (min-width: 761px) {
  .leaderboard-tabs {
    grid-template-columns: 104px repeat(12, minmax(0, 1fr));
    grid-auto-rows: 44px;
  }

  .leaderboard-tabs button,
  .leaderboard-tabs button:first-child {
    min-height: 44px;
    height: 100%;
  }

  .leaderboard-tabs [data-rank-tab="overview"] {
    grid-column: 1;
    grid-row: 1 / span 2;
  }

  .leaderboard-tabs [data-rank-tab="language"] {
    grid-column: 2 / 5;
    grid-row: 1;
  }

  .leaderboard-tabs [data-rank-tab="ai"] {
    grid-column: 5 / 8;
    grid-row: 1;
  }

  .leaderboard-tabs [data-rank-tab="media"] {
    grid-column: 8 / 11;
    grid-row: 1;
  }

  .leaderboard-tabs [data-rank-tab="trade"] {
    grid-column: 11 / 14;
    grid-row: 1;
  }

  .leaderboard-tabs [data-rank-tab="logistics"] {
    grid-column: 2 / 6;
    grid-row: 2;
  }

  .leaderboard-tabs [data-rank-tab="talent"] {
    grid-column: 6 / 10;
    grid-row: 2;
  }

  .leaderboard-tabs [data-rank-tab="recruitment"] {
    grid-column: 10 / 14;
    grid-row: 2;
  }
}

.leaderboard-row:is(button) {
  width: 100%;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.leaderboard-student strong,
.leaderboard-student span,
.leaderboard-company-address {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.leaderboard-company-row {
  grid-template-columns: 44px minmax(0, 1fr) minmax(120px, 0.55fr);
}

.leaderboard-company-address {
  color: var(--muted);
  font-size: 13px;
  text-align: right;
}

.leaderboard-detail-dialog {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(15, 23, 42, 0.48);
}

.leaderboard-detail-card {
  position: relative;
  width: min(620px, 100%);
  max-height: min(720px, calc(100vh - 40px));
  overflow-y: auto;
  padding: 24px;
  background: #fff;
  border: 1px solid #d9e5f5;
  border-radius: 14px;
  box-shadow: 0 24px 64px rgba(15, 23, 42, 0.24);
}

.leaderboard-detail-card > span {
  color: var(--teal);
  font-size: 13px;
  font-weight: 900;
}

.leaderboard-detail-card h2 {
  margin: 6px 36px 16px 0;
}

.leaderboard-detail-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  color: #64748b;
  background: #f1f5f9;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  font-size: 24px;
  line-height: 1;
}

.leaderboard-detail-notice {
  padding: 10px 12px;
  color: #9a5b00;
  background: #fff8e7;
  border: 1px solid #f6dfad;
  border-radius: 8px;
}

.leaderboard-detail-body {
  display: grid;
  gap: 12px;
}

.leaderboard-detail-body dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
}

.leaderboard-detail-body dl div {
  padding: 10px;
  background: #f7fafc;
  border: 1px solid #e5edf7;
  border-radius: 8px;
}

.leaderboard-detail-body dt {
  color: var(--muted);
  font-size: 12px;
}

.leaderboard-detail-body dd {
  margin: 4px 0 0;
  color: #172033;
  font-weight: 900;
}

.leaderboard-detail-body h3,
.leaderboard-detail-body p {
  margin: 0;
}

.leaderboard-detail-actions {
  display: grid;
  grid-template-columns: minmax(132px, auto) minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding-top: 4px;
}

.leaderboard-detail-actions button {
  min-height: 42px;
  padding: 0 22px;
  color: #fff;
  background: linear-gradient(135deg, var(--teal), var(--blue));
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 900;
}

.leaderboard-detail-actions button:disabled {
  color: #64748b;
  background: #e8edf4;
  cursor: not-allowed;
}

.leaderboard-detail-actions p {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

@media (max-width: 560px) {
  .leaderboard-company-row {
    grid-template-columns: 38px minmax(0, 1fr);
  }

  .leaderboard-company-address {
    grid-column: 2;
    text-align: left;
  }

  .leaderboard-detail-body dl {
    grid-template-columns: 1fr;
  }

  .leaderboard-detail-actions {
    grid-template-columns: 1fr;
  }

  .leaderboard-detail-actions button {
    width: 100%;
  }
}

/* Admin page: app-style management layout */
.admin-body {
  overflow-x: hidden;
  background: #f5f7fb;
}

.admin-body .site-header {
  grid-template-columns: minmax(190px, auto) minmax(0, 1fr);
  gap: 18px;
  min-height: 64px;
  padding: 8px max(18px, calc((100vw - 1440px) / 2 + 24px));
}

.admin-body .admin-header .brand {
  min-width: 210px;
}

.admin-body .admin-header .main-nav {
  justify-content: flex-end;
}

.admin-body main {
  padding-top: 64px;
}

.admin-body .role-console {
  padding-top: 12px;
}

.admin-body .role-summary article,
.admin-body .admin-logout-button {
  min-height: 72px;
}

.admin-body .permission-list {
  margin-bottom: 14px;
}

.admin-body .command-heading {
  padding: 22px 24px 18px;
}

.admin-body .command-heading h3 {
  max-width: 920px;
}

.admin-body .command-heading p {
  max-width: 980px;
}

.admin-body .api-port-list {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.classroom-shell {
  padding: clamp(18px, 2.2vw, 28px);
}

.classroom-board-tabs {
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  align-items: stretch;
}

.classroom-board-panel {
  min-width: 0;
}

.classroom-extra-panel,
.classroom-course,
.classroom-empty {
  border-radius: 10px;
}

.classroom-hero {
  border-radius: 14px;
}

@media (min-width: 1280px) {
  .classroom-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  .admin-body .site-header {
    grid-template-columns: 1fr;
    min-height: auto;
    padding: 10px 14px;
  }

  .admin-body .admin-header .brand {
    min-width: 0;
  }

  .admin-body .admin-header .main-nav {
    justify-content: flex-start;
  }
}

@media (max-width: 760px) {
  .admin-body main {
    padding-top: 120px;
  }

  .classroom-board-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Comfortable workspace tuning for inner pages and management consoles. */
.admin-body {
  overflow-x: hidden;
  background:
    linear-gradient(180deg, #f7faff 0, #eef4fb 420px, #f5f7fb 100%),
    #f5f7fb;
}

.admin-body main {
  width: 100%;
}

.admin-body .role-console {
  width: min(1440px, calc(100% - 48px));
  max-width: none;
  margin: 0 auto;
  padding: 0 0 46px;
  background: transparent;
}

.admin-body .section-heading {
  margin: 0 0 14px;
  padding: 18px 4px 12px;
  background: transparent;
  border-bottom: 0;
}

.admin-body .role-layout,
.admin-body .role-workbench,
.admin-body .command-shell,
.admin-body .command-stage,
.admin-body .command-panel.active {
  width: 100%;
  min-width: 0;
}

.admin-body .role-summary {
  grid-template-columns: repeat(4, minmax(150px, 1fr)) minmax(170px, 0.9fr);
  gap: 12px;
  margin-bottom: 12px;
}

.admin-body .command-shell {
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.admin-body .command-menu {
  position: sticky;
  top: 82px;
  grid-template-columns: 1fr;
  align-content: start;
  gap: 8px;
  max-height: calc(100vh - 104px);
  padding: 10px;
  overflow-y: auto;
  overflow-x: hidden;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid #dce8f4;
  border-radius: 10px;
  box-shadow: 0 14px 34px rgba(21, 32, 51, 0.06);
}

.admin-body .command-menu button {
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 4px 10px;
  width: 100%;
  min-height: 62px;
  padding: 10px;
  text-align: left;
  box-shadow: none;
}

.admin-body .command-menu button span {
  grid-row: span 2;
  width: 34px;
  height: 34px;
  border-radius: 7px;
}

.admin-body .command-menu button small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-body .command-menu button.active {
  box-shadow: inset 4px 0 0 var(--blue), 0 10px 24px rgba(31, 98, 210, 0.1);
}

.admin-body .command-stage {
  min-width: 0;
  min-height: calc(100vh - 235px);
  border-radius: 10px;
  box-shadow: 0 18px 42px rgba(21, 32, 51, 0.07);
}

.admin-body .overview-grid,
.admin-body .user-management-layout {
  gap: 16px;
  padding: 16px;
}

.admin-body .overview-grid {
  grid-template-columns: repeat(2, minmax(320px, 1fr));
}

.admin-body .role-manage-grid,
.admin-body .service-phone-grid,
.admin-body .message-publish-grid,
.admin-body .message-manage-grid {
  grid-template-columns: minmax(340px, 0.9fr) minmax(460px, 1.1fr);
}

.admin-body .product-manage-grid {
  grid-template-columns: minmax(380px, 0.95fr) minmax(460px, 1.05fr);
}

.admin-body .commission-admin-grid {
  grid-template-columns: minmax(460px, 1.15fr) minmax(320px, 0.85fr);
}

.admin-body .commission-admin-grid > .role-card:first-child {
  grid-column: auto;
}

.admin-body .commission-admin-grid > .role-card:last-child {
  max-width: none;
}

.admin-body .task-admin-grid {
  grid-template-columns: minmax(460px, 1.1fr) minmax(360px, 0.9fr);
}

.admin-body .api-admin-grid {
  grid-template-columns: repeat(2, minmax(360px, 1fr));
}

.admin-body .api-port-card,
.admin-body .api-status-card {
  grid-column: 1 / -1;
}

/* API integration partners: factory on the left, freight forwarder on the right. */
.admin-body .api-admin-grid > .api-partner-card {
  grid-column: auto;
}

/* Freight-forwarder workbench: domestic transit, international dispatch and exception flow. */
.factory-body.freight-forwarder-body .factory-tabs.freight-primary-tabs {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.freight-forwarder-body .freight-business-tabs {
  margin-top: 16px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.freight-forwarder-body .freight-business-panel {
  display: none;
  gap: 16px;
}

.freight-forwarder-body .freight-business-panel.active {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.freight-forwarder-body .freight-live-orders-card,
.freight-forwarder-body .freight-history-card {
  margin-top: 16px;
}

.freight-forwarder-body .freight-card-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.freight-forwarder-body .freight-card-heading .form-hint {
  margin-bottom: 0;
}

.freight-forwarder-body .freight-card-heading > button {
  flex: 0 0 auto;
  min-height: 40px;
  white-space: nowrap;
}

.freight-forwarder-body .freight-inline-status {
  flex: 0 1 340px;
  min-width: 210px;
  max-width: 340px;
  min-height: 42px;
  padding: 9px 13px;
  color: #0b6370;
  background: #edfafa;
  border: 1px solid #9bdde1;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.freight-forwarder-body .freight-inline-status[hidden] {
  display: none;
}

.freight-forwarder-body .freight-inline-status[data-tone="pending"] {
  color: #075f70;
  background: linear-gradient(135deg, #effafa 0%, #eef5ff 100%);
  border-color: #78cdd5;
  box-shadow: 0 4px 12px rgba(25, 123, 153, .12);
}

.freight-forwarder-body .freight-inline-status[data-tone="success"] {
  color: #087765;
  background: #eaf9f5;
  border-color: #9edccc;
}

.freight-forwarder-body .freight-inline-status[data-tone="warning"] {
  color: #975a16;
  background: #fff8e8;
  border-color: #f1d28b;
}

.freight-forwarder-body .freight-inline-status[data-tone="error"] {
  color: #b42318;
  background: #fff1ef;
  border-color: #efaaa4;
}

.freight-forwarder-body .freight-table-wrap {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin-top: 14px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-gutter: stable;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
  border: 1px solid #d9e4f2;
  border-radius: 10px;
}

.freight-forwarder-body .freight-international-queue-scroll {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  contain: inline-size;
}

.freight-forwarder-body [data-freight-business-panel="international"] .freight-live-orders-card {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
}

.freight-forwarder-body .freight-international-queue-scroll .freight-table-wrap {
  scrollbar-width: thin;
  scrollbar-color: #7eb6e8 #eaf2fb;
}

.freight-forwarder-body .freight-international-queue-scroll .freight-table-wrap::-webkit-scrollbar {
  height: 8px;
}

.freight-forwarder-body .freight-international-queue-scroll .freight-table-wrap::-webkit-scrollbar-track {
  background: #eaf2fb;
  border-radius: 999px;
}

.freight-forwarder-body .freight-international-queue-scroll .freight-table-wrap::-webkit-scrollbar-thumb {
  background: #7eb6e8;
  border-radius: 999px;
}

.freight-forwarder-body .freight-order-table {
  width: 100%;
  min-width: 1040px;
  border-collapse: collapse;
  background: #fff;
  table-layout: auto;
}

.freight-forwarder-body .freight-order-table th,
.freight-forwarder-body .freight-order-table td {
  padding: 12px 14px;
  border-bottom: 1px solid #e4ebf5;
  text-align: left;
  vertical-align: middle;
  white-space: nowrap;
}

.freight-forwarder-body .freight-order-table th {
  background: #f3f7fc;
  color: #23364f;
  font-size: 13px;
}

.freight-forwarder-body .freight-order-table tbody tr:last-child td {
  border-bottom: 0;
}

.freight-forwarder-body .freight-order-table .freight-table-empty td {
  min-width: 0;
  padding: 34px 16px;
  color: #6b7d93;
  text-align: center;
  white-space: normal;
}

.freight-forwarder-body .freight-order-table td:first-child {
  min-width: 220px;
  white-space: normal;
}

.freight-forwarder-body .freight-order-table td > small,
.freight-forwarder-body .freight-order-table td > strong + small {
  display: block;
  margin-top: 5px;
  color: #6b7d93;
  font-size: 12px;
}

.freight-forwarder-body .freight-order-table input:not([type="checkbox"]) {
  display: block;
  width: 190px;
  min-height: 36px;
  margin: 4px 0;
}

.freight-forwarder-body .freight-row-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #23364f;
  font-weight: 700;
}

.freight-forwarder-body .freight-row-check input {
  width: 18px;
  height: 18px;
}

.freight-forwarder-body .freight-overdue-tag {
  display: inline-flex;
  padding: 5px 9px;
  border-radius: 999px;
  background: #fff1f2;
  color: #be123c;
  font-weight: 700;
}

.freight-forwarder-body .freight-table-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.freight-forwarder-body .freight-action-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: 8px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  font: inherit;
  transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease, border-color .16s ease;
}

.freight-forwarder-body .freight-action-button--primary {
  color: #fff;
  background: linear-gradient(135deg, #168dbe 0%, #2563d9 100%);
  box-shadow: 0 5px 12px rgba(37, 99, 217, .22);
}

.freight-forwarder-body .freight-action-button--secondary {
  color: #0d6c7c;
  background: #effafa;
  border-color: #9bdde1;
}

.freight-forwarder-body .freight-action-button--warning {
  color: #b45309;
  background: #fff8e8;
  border-color: #f7c870;
}

.freight-forwarder-body .freight-action-button:not(:disabled):hover {
  transform: translateY(-1px);
  box-shadow: 0 7px 15px rgba(31, 70, 136, .18);
}

.freight-forwarder-body .freight-action-button:not(:disabled):active {
  transform: translateY(0);
  box-shadow: none;
}

.freight-forwarder-body .freight-action-button:focus-visible {
  outline: 3px solid rgba(37, 99, 217, .26);
  outline-offset: 2px;
}

.freight-forwarder-body .freight-action-button:disabled {
  color: #8b9bb0;
  background: #eef2f7;
  border-color: #d4dde8;
  box-shadow: none;
  cursor: not-allowed;
}

.freight-forwarder-body .freight-toolbar-action {
  min-height: 42px;
  padding: 0 16px;
  border-radius: 9px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .01em;
}

.freight-forwarder-body .freight-toolbar-action::before {
  display: inline-grid;
  place-items: center;
  width: 19px;
  height: 19px;
  flex: 0 0 19px;
  border: 1px solid currentColor;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  opacity: .92;
}

.freight-forwarder-body .freight-toolbar-action--confirm::before {
  content: "✓";
}

.freight-forwarder-body .freight-toolbar-action--filter::before {
  content: "⌕";
}

.freight-forwarder-body .freight-toolbar-action--download::before {
  content: "↓";
}

.freight-forwarder-body .freight-toolbar-action--download {
  background: linear-gradient(135deg, #2563d9 0%, #6557d9 100%);
  border-color: transparent;
  box-shadow: 0 5px 12px rgba(74, 81, 205, .22);
}

.freight-forwarder-body .freight-toolbar-action--filter:not(:disabled):hover {
  color: #075f70;
  background: #e3f7f7;
  border-color: #76cfd5;
}

.freight-forwarder-body .freight-reconcile-toolbar {
  display: grid;
  grid-template-columns: repeat(2, minmax(160px, 1fr)) auto auto;
  gap: 10px;
  align-items: end;
  margin-top: 14px;
  padding: 12px;
  border: 1px solid #d9e4f2;
  border-radius: 10px;
  background: #f8fbff;
}

.freight-forwarder-body .freight-reconcile-toolbar label {
  display: grid;
  gap: 5px;
  color: #53657d;
  font-size: 12px;
}

.freight-forwarder-body .freight-reconcile-toolbar input,
.freight-forwarder-body .freight-reconcile-toolbar button {
  min-height: 38px;
}

.freight-forwarder-body .freight-live-order {
  display: grid;
  gap: 12px;
}

.freight-forwarder-body .freight-order-summary p {
  margin: 7px 0 0;
  line-height: 1.8;
}

.freight-forwarder-body .freight-order-fulfillment {
  grid-template-columns: repeat(4, minmax(150px, 1fr)) auto;
  align-items: end;
}

.freight-forwarder-body .freight-order-fulfillment button {
  min-height: 38px;
  white-space: nowrap;
}

.freight-forwarder-body .freight-history-list {
  max-height: min(58vh, 680px);
  overflow-y: auto;
}

.freight-forwarder-body .freight-inbox-list {
  margin-top: 14px;
}

@media (max-width: 980px) {
  .freight-forwarder-body .freight-order-fulfillment {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .freight-forwarder-body .freight-card-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .freight-forwarder-body .freight-inline-status {
    flex: none;
    width: 100%;
    min-width: 0;
    max-width: none;
  }

  .freight-forwarder-body .freight-reconcile-toolbar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .freight-forwarder-body .freight-business-tabs,
  .freight-forwarder-body .freight-reconcile-toolbar,
  .freight-forwarder-body .freight-order-fulfillment {
    grid-template-columns: 1fr;
  }

  .freight-forwarder-body .freight-card-heading > .freight-toolbar-action,
  .freight-forwarder-body .freight-reconcile-toolbar .freight-toolbar-action {
    width: 100%;
    min-height: 44px;
  }

  .freight-forwarder-body .freight-card-heading,
  .freight-forwarder-body .freight-card-heading > div {
    width: 100%;
    min-width: 0;
  }

  .freight-forwarder-body .freight-card-heading .form-hint,
  .freight-forwarder-body .freight-toolbar-action {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  /* Mobile freight orders are complete vertical cards. This keeps every
     desktop field while preventing the product/order area from sliding left. */
  .freight-forwarder-body .freight-table-wrap {
    padding-top: 0;
    overflow-x: hidden;
    touch-action: pan-y;
  }

  .freight-forwarder-body .freight-table-wrap::before {
    content: none;
  }

  .freight-forwarder-body .freight-order-table {
    display: block;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    background: transparent;
  }

  .freight-forwarder-body .freight-order-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .freight-forwarder-body .freight-order-table tbody {
    display: grid;
    gap: 12px;
    width: 100%;
    padding: 10px;
  }

  .freight-forwarder-body .freight-order-table tbody tr {
    display: block;
    width: 100%;
    min-width: 0;
    overflow: hidden;
    background: #fff;
    border: 1px solid #dbe6f3;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(31, 70, 136, .06);
  }

  .freight-forwarder-body .freight-order-table td {
    position: relative;
    display: block;
    width: 100%;
    min-width: 0 !important;
    min-height: 42px;
    padding: 10px 10px 10px 112px;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .freight-forwarder-body .freight-order-table td::before {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 92px;
    color: #5a6f88;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.45;
    content: attr(data-label);
  }

  .freight-forwarder-body .freight-order-table .freight-table-empty td {
    padding: 28px 14px;
  }

  .freight-forwarder-body .freight-order-table .freight-table-empty td::before {
    content: none;
  }

  .freight-forwarder-body .freight-order-table input:not([type="checkbox"]),
  .freight-forwarder-body .freight-order-table .freight-table-actions,
  .freight-forwarder-body .freight-order-table .freight-action-button {
    width: 100%;
    max-width: 100%;
  }

  .freight-forwarder-body .freight-order-table .freight-action-button {
    min-height: 40px;
    height: auto;
    padding-block: 8px;
    white-space: normal;
  }
}

.admin-body .user-management-layout {
  grid-template-columns: minmax(360px, 0.85fr) minmax(520px, 1.15fr);
}

.admin-body .user-account-tabs-card,
.admin-body .user-edit-card {
  min-width: 0;
}

.admin-body .record-list {
  max-height: min(68vh, 760px);
}

.admin-body .course-setting-links {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.classroom-page {
  width: min(1280px, calc(100% - 48px));
  gap: 20px;
}

.recruit-teach-shell {
  width: min(1320px, 100%);
  max-width: 1320px;
}

.course-settings-page {
  width: min(1320px, calc(100% - 48px));
  max-width: 1320px;
}

.business-guide-shell {
  width: min(1280px, calc(100% - 48px));
}

.standalone-ecommerce-page {
  width: min(1280px, calc(100% - 48px));
}

.opportunities-shell {
  width: min(1240px, 100%);
}

.declaration-shell {
  width: min(1120px, 100%);
}

.course-settings-layout {
  grid-template-columns: minmax(360px, 0.9fr) minmax(520px, 1.1fr);
}

.business-guide-panel.active {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.business-guide-panel.active .guide-step:first-child {
  grid-column: 1 / -1;
}

.guide-step {
  grid-template-columns: minmax(0, 1fr) minmax(190px, 0.36fr);
}

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

.declaration-card {
  padding: 20px 22px;
}

.factory-body {
  --factory-workbench-width: min(1320px, calc(100vw - 64px));
}

.factory-body .admin-header {
  grid-template-columns: minmax(210px, 1fr) auto minmax(210px, 1fr);
}

.factory-body .admin-header .brand {
  grid-column: 1;
}

.factory-body.admin-body .admin-header .main-nav {
  grid-column: 2;
  justify-self: center;
  justify-content: center;
  gap: clamp(8px, 0.9vw, 12px);
}

/* ADMIN final layout: vertical module rail + wide content workspace. */
.admin-body .command-shell {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.admin-body .command-menu {
  position: sticky;
  top: 82px;
  display: grid;
  grid-template-columns: 1fr;
  align-content: start;
  gap: 8px;
  width: 100%;
  max-height: calc(100vh - 104px);
  padding: 10px;
  overflow-y: auto;
  overflow-x: hidden;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid #dce8f4;
  border-radius: 10px;
  box-shadow: 0 14px 34px rgba(21, 32, 51, 0.06);
}

.admin-body .command-menu button {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 4px 10px;
  width: 100%;
  min-height: 62px;
  padding: 10px;
  text-align: left;
  background: #fff;
  border: 1px solid #e2e8f2;
  border-radius: 8px;
  box-shadow: none;
}

.admin-body .command-menu button span {
  grid-row: span 2;
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  color: #fff;
  background: #667085;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 900;
}

.admin-body .command-menu button strong {
  min-width: 0;
  color: #172033;
  font-size: 14px;
  line-height: 1.25;
}

.admin-body .command-menu button small {
  display: block;
  min-width: 0;
  overflow: hidden;
  color: #667085;
  font-size: 11px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-body .command-menu button.active {
  border-color: rgba(31, 98, 210, 0.32);
  background: #f8fbff;
  box-shadow: inset 4px 0 0 var(--blue), 0 10px 24px rgba(31, 98, 210, 0.1);
}

.admin-body .command-menu button.active span {
  background: linear-gradient(135deg, var(--blue), var(--teal));
}

.business-manager-body .command-menu button[data-command="profile"] .business-personal-icon {
  position: relative;
  display: block;
  overflow: hidden;
  background: linear-gradient(135deg, #0f9cab, #2563d9);
  box-shadow: 0 6px 14px rgba(18, 120, 183, 0.22);
}

.business-manager-body .command-menu button[data-command="profile"] .business-personal-icon::before,
.business-manager-body .command-menu button[data-command="profile"] .business-personal-icon::after {
  position: absolute;
  left: 50%;
  display: block;
  content: "";
  transform: translateX(-50%);
  background: #fff;
}

.business-manager-body .command-menu button[data-command="profile"] .business-personal-icon::before {
  top: 8px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.business-manager-body .command-menu button[data-command="profile"] .business-personal-icon::after {
  bottom: 6px;
  width: 19px;
  height: 11px;
  border-radius: 11px 11px 5px 5px;
}

.business-manager-body .command-menu button[data-command="profile"].active strong,
.business-manager-body .command-menu button[data-command="profile"].active small {
  color: #fff;
}

.admin-body .command-stage {
  min-width: 0;
  min-height: calc(100vh - 235px);
}

.admin-body .overview-grid,
.admin-body .user-management-layout {
  padding: 16px 18px 22px;
}

@media (min-width: 1280px) {
  .classroom-grid {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .classroom-course:first-child:last-child {
    grid-column: 1 / -1;
  }

  .work-columns {
    grid-template-columns: repeat(2, minmax(360px, 1fr));
  }

  .teacher-profile-grid,
  .student-batch-meta {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 1180px) {
  .admin-body .command-shell {
    grid-template-columns: 1fr;
  }

  .admin-body .command-menu {
    position: static;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    max-height: none;
    overflow: visible;
  }

  .admin-body .role-summary,
  .admin-body .overview-grid,
  .admin-body .user-management-layout,
  .admin-body .role-manage-grid,
  .admin-body .service-phone-grid,
  .admin-body .message-publish-grid,
  .admin-body .message-manage-grid,
  .admin-body .product-manage-grid,
  .admin-body .commission-admin-grid,
  .admin-body .task-admin-grid,
  .admin-body .api-admin-grid,
  .course-settings-layout,
  .business-guide-panel.active {
    grid-template-columns: 1fr;
  }

  .business-guide-panel.active .guide-step:first-child {
    grid-column: auto;
  }
}

@media (max-width: 760px) {
  .admin-body {
    overflow-x: hidden;
  }

  .admin-body .role-console {
    width: min(100% - 24px, 100%);
  }

  .admin-body .section-heading {
    padding-inline: 0;
  }

  .admin-body .command-menu {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 8px;
  }

  .admin-body .command-menu button {
    grid-template-columns: 1fr;
    width: auto;
    min-height: 50px;
  }

  .admin-body .command-menu button span {
    display: none;
  }

  .classroom-page,
  .course-settings-page,
  .business-guide-shell,
  .standalone-ecommerce-page {
    width: min(100% - 24px, 100%);
  }

  .guide-step {
    grid-template-columns: 1fr;
  }

  .factory-body {
    --factory-workbench-width: calc(100vw - 28px);
  }

  .factory-body .admin-header {
    grid-template-columns: 1fr;
  }

  .factory-body .admin-header .brand,
  .factory-body.admin-body .admin-header .main-nav {
    grid-column: 1;
  }

  .factory-body.admin-body .admin-header .main-nav {
    width: 100%;
    justify-self: stretch;
    justify-content: flex-start;
  }
}

/* ADMIN final layout: vertical module rail + wide content workspace. */
.admin-body .command-shell {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.admin-body .command-menu {
  position: sticky;
  top: 82px;
  display: grid;
  grid-template-columns: 1fr;
  align-content: start;
  gap: 8px;
  width: 100%;
  max-height: calc(100vh - 104px);
  padding: 10px;
  overflow-y: auto;
  overflow-x: hidden;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid #dce8f4;
  border-radius: 10px;
  box-shadow: 0 14px 34px rgba(21, 32, 51, 0.06);
}

.admin-body .command-menu button {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 4px 10px;
  width: 100%;
  min-height: 62px;
  padding: 10px;
  text-align: left;
  background: #fff;
  border: 1px solid #e2e8f2;
  border-radius: 8px;
  box-shadow: none;
}

.admin-body .command-menu button span {
  grid-row: span 2;
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  color: #fff;
  background: #667085;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 900;
}

.admin-body .command-menu button strong {
  min-width: 0;
  color: #172033;
  font-size: 14px;
  line-height: 1.25;
}

.admin-body .command-menu button small {
  display: block;
  min-width: 0;
  overflow: hidden;
  color: #667085;
  font-size: 11px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-body .command-menu button.active {
  border-color: rgba(31, 98, 210, 0.32);
  background: #f8fbff;
  box-shadow: inset 4px 0 0 var(--blue), 0 10px 24px rgba(31, 98, 210, 0.1);
}

.admin-body .command-menu button.active span {
  background: linear-gradient(135deg, var(--blue), var(--teal));
}

.admin-body .command-stage {
  min-width: 0;
  min-height: calc(100vh - 235px);
}

.admin-body .overview-grid,
.admin-body .user-management-layout {
  padding: 16px 18px 22px;
}

@media (min-width: 1280px) {
  .admin-body .role-console {
    width: min(1480px, calc(100% - 40px));
  }
}

@media (max-width: 1180px) {
  .admin-body .command-shell {
    grid-template-columns: 1fr;
  }

  .admin-body .command-menu {
    position: static;
    grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
    max-height: none;
  }

  .admin-body .command-menu button {
    min-height: 56px;
  }

  .admin-body .command-menu button small {
    display: none;
  }
}

@media (max-width: 760px) {
  .admin-body .command-menu {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-body .command-menu button {
    grid-template-columns: 1fr;
    min-height: 50px;
  }

  .admin-body .command-menu button span {
    display: none;
  }
}

/* Final effective overrides for comfortable wide layouts. */
.admin-body .site-header {
  grid-template-columns: minmax(190px, auto) minmax(0, 1fr);
  gap: 18px;
  min-height: 64px;
  padding: 8px max(18px, calc((100vw - 1440px) / 2 + 24px));
}

.admin-body .admin-header .brand {
  min-width: 210px;
}

.admin-body .admin-header .main-nav {
  justify-content: flex-end;
}

.admin-body main {
  padding-top: 64px;
}

.admin-body .role-console {
  width: min(1440px, calc(100% - 48px));
  padding-top: 12px;
}

.admin-body .role-summary article,
.admin-body .admin-logout-button {
  min-height: 72px;
}

.admin-body .permission-list {
  margin-bottom: 14px;
}

.admin-body .command-heading {
  padding: 22px 24px 18px;
}

.admin-body .api-port-list {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.classroom-page {
  width: min(1280px, calc(100% - 48px));
  gap: 20px;
}

.classroom-shell {
  padding: clamp(18px, 2.2vw, 28px);
}

.classroom-grid {
  grid-template-columns: 1fr;
}

.classroom-board-tabs {
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}

.classroom-extra-panel,
.classroom-course,
.classroom-empty {
  border-radius: 10px;
}

.classroom-hero {
  border-radius: 14px;
}

@media (min-width: 1280px) {
  .classroom-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  .admin-body .site-header {
    grid-template-columns: 1fr;
    min-height: auto;
    padding: 10px 14px;
  }

  .admin-body .admin-header .brand {
    min-width: 0;
  }

  .admin-body .admin-header .main-nav {
    justify-content: flex-start;
  }
}

@media (max-width: 760px) {
  .admin-body main {
    padding-top: 120px;
  }

  .admin-body .role-console,
  .classroom-page,
  .course-settings-page,
  .business-guide-shell,
  .standalone-ecommerce-page {
    width: min(100% - 24px, 100%);
  }

  .admin-body .command-menu button {
    width: auto;
  }

  .classroom-board-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Final comfort pass: keep pages spacious without feeling stretched. */
.admin-body .site-header {
  grid-template-columns: minmax(190px, auto) minmax(0, 1fr);
  gap: 18px;
  min-height: 64px;
  padding: 8px max(18px, calc((100vw - 1440px) / 2 + 24px));
}

.admin-body .admin-header .brand {
  min-width: 210px;
}

.admin-body .admin-header .main-nav {
  justify-content: flex-end;
}

.admin-body main {
  padding-top: 64px;
}

.admin-body .role-console {
  width: min(1440px, calc(100% - 48px));
  padding-top: 12px;
}

.admin-body .role-summary article,
.admin-body .admin-logout-button {
  min-height: 72px;
}

.admin-body .permission-list {
  margin-bottom: 14px;
}

.admin-body .command-heading {
  padding: 22px 24px 18px;
}

.admin-body .command-heading h3 {
  max-width: 920px;
}

.admin-body .command-heading p {
  max-width: 980px;
}

.admin-body .api-port-list {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.classroom-page {
  width: min(1280px, calc(100% - 48px));
  gap: 20px;
}

.classroom-shell {
  padding: clamp(18px, 2.2vw, 28px);
}

.classroom-grid {
  grid-template-columns: 1fr;
}

.classroom-board-tabs {
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  align-items: stretch;
}

.classroom-board-panel {
  min-width: 0;
}

.classroom-extra-panel,
.classroom-course,
.classroom-empty {
  border-radius: 10px;
}

.classroom-hero {
  border-radius: 14px;
}

@media (min-width: 1280px) {
  .classroom-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  .admin-body .site-header {
    grid-template-columns: 1fr;
    min-height: auto;
    padding: 10px 14px;
  }

  .admin-body .admin-header .brand {
    min-width: 0;
  }

  .admin-body .admin-header .main-nav {
    justify-content: flex-start;
  }
}

@media (max-width: 760px) {
  .admin-body main {
    padding-top: 120px;
  }

  .admin-body .role-console,
  .classroom-page,
  .course-settings-page,
  .business-guide-shell,
  .standalone-ecommerce-page {
    width: min(100% - 24px, 100%);
  }

  .admin-body .command-menu button {
    width: auto;
  }

  .classroom-board-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.admin-body .site-header {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 45;
  grid-template-columns: minmax(190px, auto) minmax(0, 1fr);
  gap: 18px;
  min-height: 64px;
  padding: 8px max(18px, calc((100vw - 1440px) / 2 + 24px));
  background: rgba(255, 255, 255, 0.96);
  border-bottom: 1px solid #e4e9f2;
  box-shadow: 0 8px 22px rgba(21, 32, 51, 0.06);
  backdrop-filter: blur(14px);
}

.admin-body .admin-header .brand {
  min-width: 210px;
  gap: 10px;
}

.admin-body .admin-header .brand-mark {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  font-size: 13px;
}

.admin-body .admin-header .brand small {
  color: #7b8797;
}

.admin-body .admin-header .main-nav {
  display: flex;
  flex: 1;
  justify-content: flex-end;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 2px;
}

.admin-body .admin-header .main-nav a,
.admin-body .admin-header .main-nav button {
  flex: 0 0 auto;
  min-height: 30px;
  padding: 6px 12px;
  color: #42526b;
  background: #fff;
  border: 1px solid #d9e1ec;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
}

.admin-body .admin-header .main-nav button {
  cursor: pointer;
}

.admin-body .admin-header .main-nav a.active,
.admin-body .admin-header .main-nav button.active {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(135deg, var(--blue), var(--teal));
}

.admin-body .admin-header .main-nav button:hover {
  color: var(--blue);
  border-color: #b8c9e2;
}

.admin-body main {
  min-height: 100vh;
  padding-top: 64px;
}

.admin-body .role-console {
  min-height: calc(100vh - 58px);
  padding: 0 10px 32px;
  background: #f5f7fb;
}

.admin-body .section-heading {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 10px;
  align-items: center;
  margin: 0 -10px;
  padding: 13px 14px;
  background: #fff;
  border-bottom: 1px solid #e8edf4;
}

.admin-body .section-heading .eyebrow {
  grid-column: 1;
  margin: 0;
  color: #8a96aa;
  font-size: 13px;
  letter-spacing: 0;
}

.admin-body .section-heading h2 {
  grid-column: 1;
  margin: 0;
  color: #172033;
  font-size: 18px;
  line-height: 1.2;
}

.admin-body .section-heading p:last-child {
  grid-column: 2;
  grid-row: 1 / span 2;
  max-width: 760px;
  margin: 0;
  justify-self: end;
  color: #66758d;
  font-size: 13px;
  line-height: 1.55;
  text-align: right;
}

.admin-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: end;
  margin: 18px 0;
  padding: 18px;
  background: #fff;
  border: 1px solid #e3e9f2;
  border-radius: 8px;
  box-shadow: 0 10px 24px rgba(21, 32, 51, 0.05);
}

.admin-toolbar label {
  display: grid;
  gap: 6px;
  min-width: 220px;
  color: #334155;
  font-size: 13px;
  font-weight: 900;
}

.admin-toolbar input,
.admin-toolbar select {
  min-height: 36px;
  padding: 8px 12px;
  color: #172033;
  background: #fff;
  border: 1px solid #d8e0eb;
  border-radius: 5px;
  font: inherit;
}

.admin-toolbar button {
  min-height: 36px;
  padding: 0 16px;
  border-radius: 5px;
  font-size: 13px;
  font-weight: 900;
}

.admin-search-button,
.admin-add-button {
  color: #fff;
  background: linear-gradient(135deg, var(--blue), var(--teal));
}

.admin-ghost-button {
  color: #506176;
  background: #fff;
  border: 1px solid #d8e0eb;
}

.admin-add-button {
  margin-left: auto;
}

.admin-body .command-menu {
  position: static;
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  width: 100%;
  padding: 0;
  overflow: visible;
  background: transparent;
  box-shadow: none;
}

.admin-body .command-menu::before {
  display: none;
}

.admin-body .command-menu::after {
  display: none;
}

.admin-body .command-menu button {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  width: 100%;
  min-height: 78px;
  margin: 0;
  padding: 13px;
  color: #43526a;
  background: #fff;
  border: 1px solid #e2e8f2;
  border-radius: 8px;
  box-shadow: 0 8px 20px rgba(21, 32, 51, 0.04);
}

.admin-body .command-menu button span {
  grid-row: span 2;
  width: 38px;
  height: 38px;
  margin-top: 0;
  color: #fff;
  background: #667085;
  border-radius: 8px;
  font-size: 12px;
}

.admin-body .command-menu button strong {
  color: #172033;
  font-size: 15px;
  font-weight: 800;
}

.admin-body .command-menu button small {
  margin-top: 2px;
  color: #667085;
  font-size: 11px;
}

.admin-body .command-menu button:hover,
.admin-body .command-menu button.active {
  color: #172033;
  border-color: rgba(31, 98, 210, 0.28);
  background: #f8fbff;
}

.admin-body .command-menu button.active {
  box-shadow: 0 14px 28px rgba(31, 98, 210, 0.12), inset 4px 0 0 var(--blue);
}

.admin-body .command-menu button.active span {
  color: #fff;
  background: linear-gradient(135deg, var(--blue), var(--teal));
}

.admin-body .role-layout {
  grid-template-columns: 1fr;
  gap: 16px;
  align-items: start;
}

.admin-body .role-auth-panel,
.admin-body .role-card,
.admin-body .role-summary article,
.admin-body .command-stage,
.admin-body .permission-list {
  border-color: #e2e8f2;
  border-radius: 8px;
  box-shadow: 0 10px 24px rgba(21, 32, 51, 0.05);
}

.admin-body .role-card:has(#userSearchForm),
.admin-body .role-card:has(#userSearchResult) {
  display: none !important;
}

.admin-body .role-auth-panel {
  position: static;
  grid-template-columns: 180px minmax(260px, 1fr) auto;
  gap: 12px 16px;
  align-items: end;
  padding: 16px;
}

.admin-body .role-workbench {
  gap: 14px;
}

.admin-body .role-auth-panel .role-panel-head {
  align-self: center;
}

.admin-body .role-auth-panel .role-tabs,
.admin-body .role-auth-panel .auth-deep-links,
.admin-body .role-auth-panel .role-tip {
  display: none;
}

.admin-body .role-auth-panel .auth-form.active {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(160px, 0.8fr) auto;
  gap: 10px;
  align-items: end;
}

.admin-body .role-auth-panel .auth-form[data-auth-panel="register"].active {
  grid-template-columns: minmax(170px, 1fr) minmax(150px, 0.8fr) minmax(150px, 0.8fr) auto;
}

.admin-body .role-auth-panel .role-form button,
.admin-body .role-auth-panel .role-ghost-button {
  min-width: 108px;
}

.admin-body .senior-rule-editor {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  padding: 14px;
  background: #f8fbff;
  border: 1px solid #dfe8f3;
  border-radius: 8px;
}

.admin-body .senior-rule-editor strong,
.admin-body .senior-rule-editor p {
  grid-column: 1 / -1;
}

.admin-body .senior-rule-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.admin-body .senior-rule-editor strong {
  color: #172033;
  font-size: 15px;
}

.admin-body .senior-rule-editor p {
  margin: -4px 0 2px;
  color: #667085;
  line-height: 1.6;
  font-size: 12px;
}

.admin-body .product-upload-field {
  display: grid;
  gap: 10px;
}

.admin-body .product-upload-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.admin-body .product-upload-button,
.admin-body .product-submit-toolbar button {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  padding: 9px 14px;
  color: #fff;
  background: linear-gradient(135deg, var(--teal), var(--blue));
  border-radius: 8px;
  font-weight: 900;
  cursor: pointer;
}

.admin-body .product-upload-button input {
  display: none;
}

.admin-body .product-upload-field p {
  margin: 0;
  color: #506176;
  font-size: 13px;
  line-height: 1.6;
}

.admin-body .product-media-preview {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(86px, 1fr));
  gap: 10px;
  min-height: 86px;
  padding: 10px;
  background: #f7faff;
  border: 1px dashed #cfdced;
  border-radius: 8px;
}

.admin-body .product-media-preview.detail-preview {
  background: #fffdf5;
  border-color: #ead89f;
}

.admin-body .product-media-empty {
  grid-column: 1 / -1;
  display: grid;
  min-height: 64px;
  place-items: center;
  color: #7a8798;
  font-size: 13px;
}

.admin-body .product-media-thumb {
  position: relative;
  display: grid;
  gap: 6px;
  padding: 6px;
  background: #fff;
  border: 1px solid #dfe8f5;
  border-radius: 8px;
  cursor: grab;
}

.admin-body .product-media-thumb img,
.admin-body .product-media-thumb video {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 6px;
  background: #eef3fa;
}

.admin-body .product-media-thumb button {
  position: absolute;
  top: -7px;
  right: -7px;
  z-index: 1;
  display: grid;
  width: 22px;
  height: 22px;
  min-height: 0;
  padding: 0;
  place-items: center;
  color: #fff;
  background: #ef4444;
  border: 2px solid #fff;
  border-radius: 50%;
  font-size: 14px;
  line-height: 1;
}

.admin-body .product-media-thumb span {
  position: absolute;
  left: 8px;
  top: 8px;
  padding: 2px 5px;
  color: #fff;
  background: rgba(17, 24, 39, 0.72);
  border-radius: 4px;
  font-size: 11px;
  font-weight: 900;
}

.admin-body .product-media-thumb small {
  overflow: hidden;
  color: #506176;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-body .product-submit-toolbar {
  margin-bottom: 12px;
}

.admin-body .product-submit-check {
  display: flex;
  align-items: center;
  gap: 9px;
}

.admin-body .product-submit-check input {
  width: 16px;
  height: 16px;
}

.factory-body .product-upload-field {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.factory-upload-field {
  grid-column: 1 / -1;
}

.factory-upload-card {
  display: grid;
  gap: 10px;
  align-content: start;
  min-height: 188px;
  padding: 14px;
  background: #f8fbff;
  border: 1px solid #dfe8f3;
  border-radius: 8px;
}

.factory-body .product-upload-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.factory-body .product-upload-button {
  display: inline-flex;
  width: fit-content;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  padding: 9px 14px;
  color: #fff;
  background: linear-gradient(135deg, var(--teal), var(--blue));
  border-radius: 8px;
  font-weight: 900;
  cursor: pointer;
}

.factory-body .product-upload-button input {
  display: none;
}

.factory-body .product-upload-field p {
  margin: 0;
  color: #506176;
  font-size: 13px;
  line-height: 1.6;
}

.factory-body .product-media-preview {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(86px, 1fr));
  gap: 10px;
  min-height: 96px;
  padding: 10px;
  background: #f7faff;
  border: 1px dashed #cfdced;
  border-radius: 8px;
}

.factory-body .product-media-preview.detail-preview {
  background: #fffdf5;
  border-color: #ead89f;
}

.factory-body .product-media-empty {
  grid-column: 1 / -1;
  display: grid;
  min-height: 64px;
  place-items: center;
  color: #7a8798;
  font-size: 13px;
}

.factory-body .product-media-thumb {
  position: relative;
  display: grid;
  gap: 6px;
  min-width: 0;
  overflow: hidden;
  padding: 6px;
  background: #fff;
  border: 1px solid #dfe8f5;
  border-radius: 8px;
  cursor: grab;
}

.factory-body .product-media-thumb img,
.factory-body .product-media-thumb video {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  border-radius: 6px;
  background: #eef3fa;
}

.factory-body .product-media-unavailable {
  display: grid;
  width: 100%;
  aspect-ratio: 1;
  place-content: center;
  gap: 3px;
  overflow: hidden;
  color: #506176;
  background: #eef3fa;
  border-radius: 6px;
  text-align: center;
}

.factory-body .product-media-unavailable strong {
  font-size: 13px;
}

.factory-body .product-media-unavailable em {
  color: #7a8798;
  font-size: 10px;
  font-style: normal;
}

.factory-body .product-media-thumb button {
  position: absolute;
  top: -7px;
  right: -7px;
  z-index: 1;
  display: grid;
  width: 22px;
  height: 22px;
  min-height: 0;
  padding: 0;
  place-items: center;
  color: #fff;
  background: #ef4444;
  border: 2px solid #fff;
  border-radius: 50%;
  font-size: 14px;
  line-height: 1;
}

.factory-body .product-media-thumb span {
  position: absolute;
  left: 8px;
  top: 8px;
  padding: 2px 5px;
  color: #fff;
  background: rgba(17, 24, 39, 0.72);
  border-radius: 4px;
  font-size: 11px;
  font-weight: 900;
}

.factory-body .product-media-thumb small {
  overflow: hidden;
  color: #506176;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

[data-product-media-viewer],
.product-media-thumb img,
.product-media-thumb video,
.factory-review-thumb,
.ecommerce-product-image,
.ecommerce-detail-image,
.ecommerce-detail-pages img {
  cursor: zoom-in;
}

.media-viewer-open {
  overflow: hidden;
}

.product-media-viewer {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  padding: 24px;
}

.product-media-viewer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.72);
  backdrop-filter: blur(3px);
}

.product-media-viewer-dialog {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(1100px, 96vw);
  max-height: 92vh;
  overflow: hidden;
  background: #0f172a;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 10px;
  box-shadow: 0 28px 70px rgba(2, 6, 23, 0.42);
}

.product-media-viewer-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  color: #fff;
  background: rgba(15, 23, 42, 0.96);
}

.product-media-viewer-toolbar strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-media-viewer-toolbar div {
  display: flex;
  flex: 0 0 auto;
  gap: 8px;
}

.product-media-viewer-toolbar button {
  min-height: 34px;
  padding: 0 12px;
  color: #172033;
  background: #fff;
  border: 0;
  border-radius: 7px;
  font-weight: 900;
  cursor: pointer;
}

.product-media-viewer-toolbar button:first-child {
  color: #fff;
  background: linear-gradient(135deg, var(--teal), var(--blue));
}

.product-media-viewer-stage {
  display: grid;
  min-height: 0;
  place-items: center;
  padding: 18px;
}

.product-media-viewer-stage img,
.product-media-viewer-stage video {
  display: block;
  max-width: 100%;
  max-height: calc(92vh - 86px);
  object-fit: contain;
  background: #020617;
  border-radius: 8px;
}

@media (max-width: 760px) {
  .product-media-viewer {
    padding: 10px;
  }

  .product-media-viewer-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .product-media-viewer-toolbar div {
    width: 100%;
  }

  .product-media-viewer-toolbar button {
    flex: 1;
  }
}

.admin-body .factory-review-thumb {
  width: 42px;
  height: 42px;
  object-fit: cover;
  vertical-align: middle;
  border: 1px solid #dfe8f5;
  border-radius: 6px;
}

.admin-body .role-summary article,
.admin-body .role-summary .summary-profile-card {
  min-height: 76px;
  padding: 14px 16px;
}

.admin-body .role-summary {
  grid-template-columns: repeat(4, minmax(150px, 1fr)) minmax(170px, 0.9fr);
  align-items: stretch;
}

.admin-body .role-summary strong,
.admin-body .stat-item strong {
  font-size: 20px;
}

.admin-logout-button {
  min-width: 132px;
  min-height: 76px;
  padding: 0 18px;
  color: #fff;
  background: linear-gradient(135deg, var(--blue), var(--teal));
  border-radius: 8px;
  box-shadow: 0 10px 24px rgba(31, 98, 210, 0.16);
  font-weight: 900;
}

.admin-logout-button:hover {
  filter: brightness(0.96);
}

.admin-body .permission-list {
  min-height: 42px;
  padding: 10px 12px;
}

.admin-body .command-shell {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

.admin-body .command-stage {
  min-height: 560px;
  padding: 0;
  overflow: hidden;
  background: #fff;
}

.admin-body .command-heading {
  padding: 18px 22px;
  background: #fbfcfe;
}

.admin-body .command-heading h3 {
  font-size: 22px;
}

.admin-body .command-heading p {
  max-width: 960px;
  font-size: 13px;
}

.admin-body .command-panel.active {
  gap: 0;
}

.admin-body .overview-grid,
.admin-body .user-management-layout {
  padding: 14px 14px 18px;
}

.admin-body .overview-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}

.admin-body .commission-admin-grid {
  grid-template-columns: minmax(0, 1fr);
}

.admin-body .commission-admin-grid > .role-card:first-child {
  grid-column: 1 / -1;
  grid-row: auto;
}

.admin-body .commission-admin-grid > .role-card:last-child {
  max-width: 520px;
}

.admin-body .role-manage-grid,
.admin-body .service-phone-grid {
  grid-template-columns: minmax(260px, 0.85fr) minmax(420px, 1.15fr);
}

.admin-body .service-management-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 16px;
}

.admin-body .site-settings-section-tabs {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.admin-body #siteSettingsInformationMount > [data-command-panel="servicePhones"] {
  margin: 0;
}

.admin-body .site-settings-section-panel {
  display: none;
}

.admin-body .site-settings-section-panel.active {
  display: block;
}

.admin-body .site-settings-service-mount:empty {
  min-height: 1px;
}

.admin-body #siteSettingsFlashMount {
  margin-top: 2px;
}

.admin-body #siteSettingsFlashMount .service-flash-card {
  grid-column: 1;
  grid-row: 1;
}

.admin-body #siteSettingsFlashMount .flash-list-card {
  grid-column: 2;
  grid-row: 1;
}

.admin-body #siteSettingsContentMount {
  display: grid;
  gap: 18px;
}

.admin-body #siteSettingsContentMount > .service-management-panel {
  display: block;
  margin: 0;
}

.admin-body #siteSettingsContentMount .service-phone-grid {
  margin: 0;
}

.admin-body .service-management-tabs button {
  border: 1px solid #dbe7f7;
  border-radius: 8px;
  background: #f8fbff;
  color: #36506f;
  font-weight: 800;
}

.admin-body .service-management-tabs button.active {
  border-color: #1877d6;
  background: #1877d6;
  color: #fff;
}

.admin-body .service-management-panel {
  display: none;
}

.admin-body .service-management-panel.active {
  display: block;
}

.admin-system-body [data-command-panel="servicePhones"] .service-management-panel + .service-management-panel {
  margin-top: 18px;
}

.admin-body .service-phone-create-card {
  grid-column: 1;
  grid-row: 1;
}

.admin-body .service-flash-card {
  grid-column: 1;
  grid-row: 2;
}

.admin-body .flash-list-card {
  grid-column: 2;
  grid-row: 2;
}

.admin-body .service-phone-list-card {
  grid-column: 2;
  grid-row: 1;
}

.admin-body .public-account-admin-card {
  grid-column: 1;
  grid-row: 3;
}

.admin-body .public-account-preview-card {
  grid-column: 2;
  grid-row: 3;
}

.admin-body .service-phone-grid > .role-card:first-child {
  grid-row: 1;
}

.admin-body .site-flash-settings-layout {
  margin-top: 16px;
}

.admin-body .site-flash-settings-layout .service-flash-card {
  grid-column: 1;
  grid-row: 1;
}

.admin-body .site-flash-settings-layout .flash-list-card {
  grid-column: 2;
  grid-row: 1;
}


.admin-body .role-management-tools {
  display: grid;
  gap: 14px;
  align-self: start;
  min-width: 0;
}

.admin-system-body .role-management-section-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 16px;
  padding: 6px;
  border: 1px solid #d8e4f2;
  border-radius: 9px;
  background: #f5f9fe;
}

.admin-system-body .command-menu button[hidden][data-command="permissionManage"],
.admin-system-body .command-menu button[hidden][data-command="companyManage"] {
  display: none !important;
}

.admin-system-body .role-management-section-tabs button {
  min-height: 44px;
  padding: 9px 16px;
  color: #33465f;
  background: #fff;
  border: 1px solid #d4e0ee;
  border-radius: 7px;
  font: inherit;
  font-weight: 900;
  cursor: pointer;
}

.admin-system-body .role-management-section-tabs button.active {
  color: #fff;
  background: linear-gradient(135deg, #2768d6, #1aa29a);
  border-color: transparent;
  box-shadow: 0 7px 16px rgba(35, 105, 190, 0.16);
}

.admin-system-body [data-command-panel="roleManage"][data-role-management-view="roles"] [data-role-management-group="accounts"],
.admin-system-body [data-command-panel="roleManage"][data-role-management-view="accounts"] [data-role-management-group="roles"] {
  display: none !important;
}

.admin-system-body [data-command-panel="roleManage"] .role-manage-grid[hidden],
.admin-system-body [data-command-panel="roleManage"] [data-role-management-group][hidden],
.admin-system-body [data-command-panel="roleManage"] .role-management-relocated-panel[hidden],
.admin-system-body [data-command-panel="roleManage"] .role-management-view-hidden {
  display: none !important;
}

.admin-system-body [data-command-panel="roleManage"][data-role-management-view="roles"] .role-management-directory {
  grid-template-rows: minmax(0, 1fr);
}

.admin-system-body .role-management-relocated-panel > .command-heading {
  margin-bottom: 14px;
}

.admin-system-body .role-management-relocated-panel > .overview-grid {
  align-items: start;
}

.admin-body .role-type-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.admin-body .role-type-tags span {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 2px 8px;
  border: 1px solid #bfd7f5;
  border-radius: 6px;
  color: #175da8;
  background: #f4f9ff;
  font-size: 12px;
}

.admin-body .role-form-message {
  margin: 0;
  color: #16715f;
  font-size: 13px;
  line-height: 1.5;
}

.admin-body .role-form-message.is-error {
  color: #b42318;
}

.admin-body .role-definition-row {
  position: relative;
  min-height: 98px;
  padding-right: 92px;
}

.admin-body .role-definition-actions {
  position: absolute;
  top: 50%;
  right: 14px;
  display: flex;
  transform: translateY(-50%);
}

.admin-body .role-definition-actions button {
  min-width: 58px;
  min-height: 32px;
  padding: 5px 10px;
  color: #fff;
  background: #c92a20;
  border: 1px solid #c92a20;
  border-radius: 5px;
  font-weight: 800;
  cursor: pointer;
}

.admin-body .role-definition-actions button:hover {
  color: #fff;
  background: #a91f17;
  border-color: #a91f17;
}

.admin-body .role-definition-actions button:disabled,
.admin-body .role-definition-actions button:disabled:hover {
  color: #8a96a8;
  background: #f3f5f8;
  border-color: #d8dee7;
  cursor: not-allowed;
}

.admin-body .overview-grid.role-manage-grid {
  grid-template-columns: minmax(360px, 0.9fr) minmax(520px, 1.1fr);
  align-items: stretch;
  gap: 18px;
}

.admin-body .role-definition-create-card {
  border-top: 3px solid #7f8fa6;
}

.admin-body .role-account-create-card {
  border-top: 3px solid #2569d8;
}

.admin-body .role-account-assign-card {
  border-top: 3px solid #16a39c;
}

.admin-body .role-account-create-card > p,
.admin-body .role-account-directory-card > p {
  margin: 6px 0 16px;
  color: #68788e;
  font-size: 13px;
  line-height: 1.6;
}

.admin-body #roleAssignSelect {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-top: 8px;
}

.admin-body .role-assign-field {
  display: grid;
  gap: 6px;
}

.admin-body .role-assign-field-label {
  color: #43526a;
  font-size: 13px;
  font-weight: 800;
}

.admin-body .role-source-choice-group {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  width: 100%;
}

.admin-body .role-form #roleAssignSelect label {
  display: flex !important;
  min-width: 0;
  min-height: 44px;
  align-items: center;
  gap: 9px;
  padding: 9px 11px;
  color: #27364c;
  background: #f8fbff;
  border: 1px solid #d8e4f2;
  border-radius: 6px;
  cursor: pointer;
}

.admin-body .role-form #roleAssignSelect .role-source-choice {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 64px;
  gap: 12px;
  align-items: stretch;
  width: 100%;
}

.admin-body .role-form #roleAssignSelect .role-source-choice label {
  width: 100% !important;
}

.admin-body .role-source-delete-button,
.admin-body .role-account-member-delete-button {
  justify-self: end;
  width: 64px;
  min-height: 30px;
  padding: 4px 8px;
  color: #b42318;
  background: #fff7f6;
  border: 1px solid #f2b8b3;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.admin-body .role-source-delete-button:hover,
.admin-body .role-account-member-delete-button:hover {
  color: #fff;
  background: #c92a20;
  border-color: #c92a20;
}

.admin-body .role-form #roleAssignSelect label:has(input:checked) {
  color: #125f8f;
  background: #eef9f8;
  border-color: #51b8b0;
}

.admin-body .role-form #roleAssignSelect input[type="radio"] {
  flex: 0 0 18px;
  width: 18px;
  min-width: 18px;
  height: 18px;
  min-height: 18px;
  margin: 0;
  padding: 0;
  accent-color: #159d96;
}

.admin-body .role-form #roleAssignSelect span {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.35;
}

.admin-body .role-form #roleAssignSelect .role-source-choice-copy {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  width: 100%;
}

.admin-body .role-source-choice-copy strong {
  min-width: 0;
  overflow: hidden;
  color: inherit;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-body .role-source-choice-copy small {
  padding: 3px 6px;
  color: #356382;
  background: #eaf2f9;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.admin-body .role-management-directory {
  display: grid;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  align-self: stretch;
  min-width: 0;
  min-height: 0;
  height: 100%;
  gap: 14px;
  overflow: hidden;
}

.admin-body .role-account-directory-card,
.admin-body .role-authorization-directory-card {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  padding-right: 0;
}

.admin-body .role-account-directory-card > h3,
.admin-body .role-account-directory-card > p,
.admin-body .role-authorization-directory-card > h3,
.admin-body .role-authorization-directory-card > p {
  margin-right: 16px;
}

.admin-body .role-account-directory-card #roleMatrix,
.admin-body .role-authorization-directory-card #roleAuthorizationSummary {
  min-height: 0;
  max-height: 100%;
  height: 100%;
  align-content: start;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 10px;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  touch-action: pan-y;
}

.admin-body .role-account-group {
  display: grid;
  gap: 10px;
  padding: 15px 12px 15px 0;
  border-top: 1px solid #e0e8f2;
}

.admin-body .role-account-group:first-child {
  padding-top: 4px;
  border-top: 0;
}

.admin-body .role-account-group-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
}

.admin-body .role-account-group-heading > div:first-child {
  display: grid;
  gap: 6px;
}

.admin-body .role-account-count {
  min-height: 26px;
  padding: 4px 8px;
  color: #42617e;
  background: #eef4fa;
  border-radius: 5px;
  font-size: 12px;
  white-space: nowrap;
}

.admin-body .role-account-group .role-definition-actions {
  position: static;
  transform: none;
}

.admin-body .role-order-actions {
  display: inline-flex;
  gap: 4px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.16s ease;
}

.admin-body .role-account-group:hover .role-order-actions,
.admin-body .role-account-group:focus-within .role-order-actions {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.admin-body .role-order-actions button {
  min-width: 30px;
  min-height: 30px;
  padding: 4px 8px;
  color: #145fb3;
  background: #eff6ff;
  border-color: #b9d6f8;
  font-weight: 900;
  line-height: 1;
}

.admin-body .role-order-actions button:hover:not(:disabled) {
  color: #fff;
  background: #176fca;
  border-color: #176fca;
}

.admin-body .role-order-actions button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.admin-body .role-definition-actions .role-account-rename-button {
  color: #145fb3;
  background: #eff6ff;
  border-color: #b9d6f8;
}

.admin-body .role-definition-actions .role-account-rename-button:hover {
  color: #fff;
  background: #176fca;
  border-color: #176fca;
}

.admin-body .role-account-members {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.admin-body .role-account-member {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 10px;
  background: #f8fafc;
  border: 1px solid #e2e9f1;
  border-radius: 6px;
}

.admin-body .role-account-member > div {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.admin-body .role-account-member-delete-button {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 26px;
  min-width: 26px;
  min-height: 26px;
  padding: 0;
}

.admin-body .role-account-member strong,
.admin-body .role-account-member span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-body .role-account-member strong {
  color: #25364d;
  font-size: 13px;
}

.admin-body .role-account-member span {
  color: #738298;
  font-size: 12px;
}

.admin-body .role-authorization-directory-card > p {
  margin-top: 6px;
  margin-bottom: 14px;
  color: #68788e;
  font-size: 13px;
  line-height: 1.6;
}

.admin-body .role-authorization-row {
  margin-right: 2px;
}

.admin-body .role-authorization-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.admin-body .role-identity-row .role-authorization-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto;
}

.admin-body .role-identity-delete-button {
  min-width: 48px;
  min-height: 30px;
  padding: 5px 9px;
  color: #b42318;
  background: #fff7f6;
  border: 1px solid #f2b8b3;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.admin-body .role-identity-delete-button:hover {
  color: #fff;
  background: #c92a20;
  border-color: #c92a20;
}

.admin-body .role-authorization-heading > span {
  min-height: 24px;
  padding: 3px 7px;
  color: #42617e;
  background: #eef4fa;
  border: 0;
  border-radius: 5px;
  font-size: 12px;
  white-space: nowrap;
}

.admin-body .role-authorization-heading > small {
  color: #74849a;
  font-size: 12px;
  white-space: nowrap;
}

.admin-body .role-authorization-permissions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.admin-body .role-authorization-permissions span {
  min-height: 26px;
  padding: 4px 8px;
  font-size: 12px;
}

.admin-body .role-identity-members {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.admin-body .role-identity-member {
  display: grid;
  min-width: 0;
  min-height: 40px;
  align-content: center;
  gap: 3px;
  padding: 7px 9px;
  color: #2c425c;
  background: #f7fafc;
  border: 1px solid #e0e8f1;
  border-radius: 5px;
}

.admin-body .role-identity-member strong,
.admin-body .role-identity-member small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-body .role-identity-member small,
.admin-body .role-identity-members > small {
  color: #7b899b;
  font-size: 11px;
}

.admin-body .role-account-single-member {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 7px 10px;
  background: #f5f9fd;
  border: 1px solid #dce7f2;
  border-radius: 5px;
}

.admin-body .role-account-single-member strong,
.admin-body .role-account-single-member small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-body .role-account-single-member small {
  color: #738298;
  font-size: 11px;
}

.admin-body #roleAuthorizationSummary .role-account-single-row {
  grid-template-columns: minmax(0, 1fr) minmax(150px, 230px);
  align-items: center;
  gap: 5px;
  min-height: 0;
  padding: 8px 10px;
}

.admin-body #roleAuthorizationSummary .role-account-single-row .role-authorization-heading {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 3px 8px;
  min-height: 28px;
}

.admin-body #roleAuthorizationSummary .role-account-single-row .role-authorization-heading > strong {
  grid-column: 1;
  grid-row: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-body #roleAuthorizationSummary .role-account-single-row .role-authorization-heading > span {
  grid-column: 1;
  grid-row: 2;
  justify-self: start;
}

.admin-body #roleAuthorizationSummary .role-account-single-row .role-identity-actions {
  grid-column: 2;
  grid-row: 1 / span 2;
}

.admin-body #roleAuthorizationSummary .role-account-single-member {
  width: 100%;
  max-width: 230px;
  padding: 6px 9px;
}

@media (max-width: 760px) {
  .admin-body #roleAuthorizationSummary .role-account-single-row {
    grid-template-columns: 1fr;
  }
}

.admin-body .role-account-empty-state {
  margin: 0;
  padding: 16px;
  color: #718198;
  text-align: center;
  background: #f7fafc;
  border: 1px dashed #cfdae8;
  border-radius: 7px;
}

.admin-body .role-function-settings-layout {
  display: grid;
  grid-template-columns: minmax(410px, 1.08fr) minmax(380px, 0.92fr);
  min-height: 650px;
  overflow: hidden;
  border: 1px solid #dce6f2;
  border-radius: 7px;
  background: #fff;
}

.admin-body .role-function-source-panel,
.admin-body .role-function-editor-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
  padding: 18px;
}

.admin-body .role-function-source-panel {
  border-right: 1px solid #dce6f2;
  background: #fbfdff;
}

.admin-body .role-function-panel-heading {
  display: grid;
  gap: 6px;
  margin-bottom: 14px;
}

.admin-body .role-function-panel-heading h3,
.admin-body .role-function-panel-heading p {
  margin: 0;
}

.admin-body .role-function-panel-heading p {
  color: #6c7d94;
  font-size: 13px;
  line-height: 1.55;
}

.admin-body .role-function-source-list {
  grid-auto-rows: max-content;
  min-height: 0;
  max-height: none;
  height: 100%;
  align-content: start;
  overflow-x: hidden;
  overflow-y: auto;
  padding-right: 8px;
  scrollbar-gutter: stable;
}

.admin-body .role-function-source-list .role-identity-row {
  background: #fff;
}

.admin-body .role-identity-row .role-authorization-heading {
  grid-template-columns: minmax(0, 1fr) auto auto auto;
}

.admin-body .role-identity-actions {
  display: flex;
  align-items: center;
  gap: 7px;
}

.admin-body .role-identity-edit-button,
.admin-body .role-identity-view-button {
  min-width: 48px;
  min-height: 30px;
  padding: 5px 9px;
  color: #145fb3;
  background: #eff6ff;
  border: 1px solid #b9d6f8;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.admin-body .role-identity-edit-button:hover,
.admin-body .role-identity-view-button:hover {
  color: #fff;
  background: #176fca;
  border-color: #176fca;
}

.admin-body .role-function-settings-form {
  align-content: start;
}

.admin-body .role-function-primary-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.admin-body .role-function-primary-fields > label {
  min-width: 0;
}

.admin-body .role-course-fieldset {
  display: grid;
  gap: 10px;
  min-width: 0;
  margin: 0;
  padding: 14px;
  border: 1px solid #dce6f2;
  border-radius: 6px;
}

.admin-body .role-course-fieldset legend {
  padding: 0 6px;
  color: #344b67;
  font-size: 13px;
  font-weight: 800;
}

.admin-body .role-course-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.admin-body .role-course-options label,
.admin-body .role-course-options .teacher-class-choice.is-owned {
  display: flex;
  min-width: 0;
  min-height: 42px;
  align-items: center;
  gap: 9px;
  padding: 9px 10px;
  border: 1px solid #dce6f2;
  border-radius: 6px;
  background: #f8fbff;
  cursor: pointer;
}

.admin-body .role-course-options input {
  width: 17px;
  min-width: 17px;
  height: 17px;
  margin: 0;
  accent-color: #169d96;
}

.admin-body .role-course-options span {
  min-width: 0;
  overflow-wrap: anywhere;
  color: #253b57;
  font-size: 13px;
  font-weight: 700;
}

.admin-body .role-course-options:has(.teacher-course-authorization-row) { grid-template-columns: 1fr; gap: 8px; }
.admin-body .teacher-course-authorization-row { min-width: 0; overflow: hidden; border: 1px solid #cbdced; border-radius: 7px; background: #fff; }
.admin-body .teacher-course-authorization-row > summary { display: flex; min-height: 44px; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 12px; color: #183c67; background: #f2f8ff; cursor: pointer; }
.admin-body .teacher-course-authorization-row > summary strong { font-size: 14px; }
.admin-body .teacher-course-authorization-row > summary span { color: #627994; font-size: 12px; font-weight: 600; }
.admin-body .teacher-course-level-list { display: grid; }
.admin-body .teacher-course-level-row { display: grid; grid-template-columns: minmax(125px, 0.34fr) minmax(0, 1fr); min-width: 0; border-top: 1px solid #e0e9f3; }
.admin-body .teacher-course-level-name { display: grid; align-content: center; gap: 3px; padding: 12px; background: #f8fbfe; }
.admin-body .teacher-course-level-name b { color: #163d69; font-size: 13px; }
.admin-body .teacher-course-level-name small,
.admin-body .teacher-class-choice small { color: #6d7f94; font-size: 11px; }
.admin-body .teacher-course-class-list { display: grid; gap: 8px; padding: 10px; }
.admin-body .teacher-course-audience-group { display: grid; grid-template-columns: 82px minmax(0, 1fr); align-items: start; gap: 8px; }
.admin-body .teacher-course-audience-group > strong { padding-top: 8px; color: #48627f; font-size: 12px; }
.admin-body .teacher-course-audience-group > div { display: flex; flex-wrap: wrap; gap: 7px; min-width: 0; }
.admin-body .role-course-options .teacher-class-choice { flex: 1 1 180px; min-height: 36px; align-items: center; gap: 7px; padding: 6px 8px; border-color: #d5e2ef; background: #fff; }
.admin-body .role-course-options .teacher-class-choice > span { display: grid; gap: 2px; color: #253b57; font-size: 12px; font-weight: 600; }
.admin-body .role-course-options .teacher-class-choice.is-occupied { border-color: #d9dde3; background: #eef1f4; cursor: not-allowed; opacity: 0.72; }
.admin-body .role-course-options .teacher-class-choice.is-occupied > span,
.admin-body .role-course-options .teacher-class-choice.is-occupied small { color: #78828e; }
.admin-body .role-course-options .teacher-class-choice.is-owned { position: relative; padding-right: 38px; cursor: default; opacity: 1; }
.admin-body .teacher-class-unassign-button {
  position: absolute;
  top: 5px;
  right: 5px;
  display: inline-flex;
  width: 24px;
  min-width: 24px;
  height: 24px;
  min-height: 24px;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: #c62828;
  background: #fff;
  border: 1px solid #ef9a9a;
  border-radius: 50%;
  font-size: 16px;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
}
.admin-body .teacher-class-unassign-button:hover,
.admin-body .teacher-class-unassign-button:focus-visible { color: #fff; background: #d93b3b; border-color: #d93b3b; }
.admin-body .teacher-class-empty { display: inline-flex; min-height: 36px; align-items: center; color: #8998aa; font-size: 12px; font-weight: 500; }

@media (max-width: 900px) {
  .admin-body .role-function-settings-layout {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .admin-body .role-function-source-panel {
    min-height: 480px;
    border-right: 0;
    border-bottom: 1px solid #dce6f2;
  }

  .admin-body .role-function-editor-panel {
    min-height: 420px;
  }
}

@media (max-width: 560px) {
  .admin-body .role-course-options {
    grid-template-columns: 1fr;
  }

  .admin-body .teacher-course-level-row,
  .admin-body .teacher-course-audience-group {
    grid-template-columns: 1fr;
  }

  .admin-body .teacher-course-audience-group > strong { padding-top: 0; }
  .admin-body .teacher-course-audience-group > div { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
  .admin-body .role-course-options .teacher-class-choice { flex: 0 0 210px; }

  .admin-body .role-identity-row .role-authorization-heading {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .admin-body .role-authorization-heading > span,
  .admin-body .role-authorization-heading > small {
    grid-column: 1;
  }

  .admin-body .role-identity-actions {
    grid-column: 2;
    grid-row: 1 / span 3;
    flex-direction: column;
  }
}

@media (max-width: 1180px) {
  .admin-body .overview-grid.role-manage-grid {
    grid-template-columns: 1fr;
  }

  .admin-body .role-management-directory {
    height: 760px;
  }
}

@media (max-width: 620px) {
  .admin-body .role-source-choice-group,
  .admin-body .role-account-members,
  .admin-body .role-identity-members {
    grid-template-columns: 1fr;
  }

  .admin-body .role-management-directory {
    height: 680px;
  }
}

@media (min-width: 1181px) {
  .admin-body .overview-grid.role-manage-grid {
    grid-template-rows: max-content max-content max-content;
    align-items: stretch;
  }

  .admin-body .role-management-tools,
  .admin-body .role-management-directory {
    display: contents;
  }

  .admin-body .role-definition-create-card {
    grid-column: 1;
    grid-row: 3;
    align-self: start;
  }

  .admin-body .role-account-create-card {
    grid-column: 1;
    grid-row: 1;
  }

  .admin-body .role-account-assign-card {
    grid-column: 1;
    grid-row: 2;
  }

  .admin-body .role-account-directory-card {
    display: grid;
    grid-column: 2;
    grid-row: 3;
    align-self: start;
    height: clamp(520px, 64vh, 680px);
    max-height: 680px;
    contain: size;
  }

  .admin-body .role-authorization-directory-card {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: stretch;
    min-height: 0;
    height: auto;
    max-height: none;
    contain: size;
  }

  .admin-system-body [data-command-panel="roleManage"][data-role-management-view="roles"] .role-definition-create-card,
  .admin-system-body [data-command-panel="roleManage"][data-role-management-view="roles"] .role-account-directory-card {
    grid-row: 1;
  }
}

@media (max-width: 1000px) {
  .admin-system-body .role-management-section-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .admin-system-body .role-management-section-tabs {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 901px) {
  .admin-body .role-manage-grid {
    align-items: stretch;
  }

  .admin-body .role-management-directory {
    align-self: stretch;
  }
}

.admin-body .course-setting-links {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  padding: 14px;
}

.admin-body .course-setting-links a {
  display: grid;
  gap: 10px;
  min-height: 128px;
  padding: 18px;
  color: #172033;
  text-decoration: none;
  background: linear-gradient(145deg, #fff, #f7fbff);
  border: 1px solid #dfe8f3;
  border-radius: 8px;
  box-shadow: 0 14px 28px rgba(27, 42, 78, 0.06);
}

.admin-body .course-setting-links a:hover {
  border-color: #1f6bd8;
  transform: translateY(-2px);
}

.admin-body .course-setting-links strong {
  font-size: 17px;
}

.admin-body .course-setting-links span {
  color: #637089;
  line-height: 1.6;
  font-size: 13px;
}

.admin-body .course-audience-overview {
  display: grid;
  gap: 22px;
  padding: 0 14px 22px;
}

.admin-body .course-audience-row {
  padding: 16px;
  background: #fff;
  border: 2px solid #e7edf5;
  border-radius: 10px;
  box-shadow: 0 14px 28px rgba(27, 42, 78, 0.05);
}

.admin-body .course-audience-row--student {
  border-color: #efb0b0;
  background: linear-gradient(180deg, #fffafa, #fff);
}

.admin-body .course-audience-row--professional {
  border-color: #9fcdf5;
  background: linear-gradient(180deg, #f7fbff, #fff);
}

.admin-body .course-audience-row-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 12px;
}

.admin-body .course-audience-row-heading span {
  color: #238b83;
  font-size: 12px;
  font-weight: 700;
}

.admin-body .course-audience-row-heading h4 {
  margin: 3px 0 0;
  font-size: 18px;
}

.admin-body .course-audience-row-heading p {
  margin: 0;
  color: #68758c;
  font-size: 13px;
}

.admin-body .course-audience-row-tools {
  display: flex;
  align-items: center;
  gap: 12px;
}

.admin-body .course-audience-row-tools button {
  min-width: 66px;
  min-height: 34px;
  padding: 6px 14px;
  color: #1768c7;
  background: #fff;
  border: 1px solid #b8d4ef;
  border-radius: 7px;
  font-weight: 800;
}

.admin-body .course-audience-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  align-items: start;
}

.admin-body .course-audience-card {
  min-width: 0;
  overflow: hidden;
  background: #fff;
  border: 1px solid #dbe5f1;
  border-radius: 8px;
}

.admin-body .course-audience-card > button {
  display: grid;
  width: 100%;
  min-height: 88px;
  padding: 12px;
  color: #172033;
  text-align: left;
  background: #fff;
  border: 0;
  border-radius: 0;
}

.admin-body .course-audience-row--student .course-audience-card > button:hover,
.admin-body .course-audience-row--student .course-audience-card > button[aria-expanded="true"] {
  background: #fff0f0;
}

.admin-body .course-audience-row--professional .course-audience-card > button:hover,
.admin-body .course-audience-row--professional .course-audience-card > button[aria-expanded="true"] {
  background: #edf7ff;
}

.admin-body .course-audience-course-name {
  color: #5e6c83;
  font-size: 12px;
}

.admin-body .course-audience-card > button strong {
  align-self: center;
  font-size: 16px;
}

.admin-body .course-audience-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: #52627a;
  font-size: 12px;
}

.admin-body .course-audience-chevron {
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 160ms ease;
}

.admin-body .course-audience-card > button[aria-expanded="true"] .course-audience-chevron {
  transform: rotate(225deg);
}

.admin-body .course-audience-panel {
  padding: 0 10px 12px;
  border-top: 1px solid #e4ebf3;
}

.admin-body .course-audience-panel[hidden] {
  display: none;
}

.admin-body .course-audience-stage {
  padding: 11px 0;
  border-bottom: 1px solid #edf1f6;
}

.admin-body .course-audience-stage:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.admin-body .course-audience-stage-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
}

.admin-body .course-audience-stage-head span {
  color: #68758c;
}

.admin-body .course-audience-stage ol {
  display: grid;
  gap: 6px;
  margin: 9px 0;
  padding: 0;
  list-style: none;
}

.admin-body .course-audience-stage li {
  display: grid;
  gap: 2px;
  color: #34445d;
  font-size: 12px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.admin-body .course-audience-stage li span,
.admin-body .course-audience-empty {
  color: #7a879a;
  font-size: 11px;
}

.admin-body .course-audience-empty {
  margin: 9px 0;
}

.admin-body .course-audience-stage a {
  display: inline-flex;
  color: #1768c7;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
}

.admin-body .course-audience-stage a:hover {
  text-decoration: underline;
}

@media (max-width: 1100px) {
  .admin-body .course-audience-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .admin-body .course-audience-overview {
    padding-inline: 10px;
  }

  .admin-body .course-audience-row-heading {
    align-items: start;
    flex-direction: column;
  }

  .admin-body .course-audience-row-tools {
    width: 100%;
    justify-content: space-between;
  }

  .admin-body .course-audience-grid {
    grid-template-columns: 1fr;
  }
}

.admin-body .message-publish-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 14px 14px 0;
  background: #fff;
}

.admin-body .message-publish-tabs button {
  min-height: 40px;
  color: #43526a;
  background: #f4f7fb;
  border: 1px solid #dbe6f2;
  border-radius: 7px;
  font-weight: 900;
  cursor: pointer;
}

.admin-body .message-publish-tabs button.active {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(135deg, var(--blue), var(--teal));
}

.admin-body .message-tab-panel {
  display: none;
}

.admin-body .message-tab-panel.active {
  display: block;
}

.admin-body .message-publish-grid {
  grid-template-columns: minmax(420px, 0.95fr) minmax(320px, 1.05fr);
  align-items: start;
  gap: 14px;
}

.admin-body .message-publish-grid .role-card {
  gap: 12px;
  padding: 16px;
}

.admin-body .message-publish-grid .role-form {
  gap: 10px;
}

.admin-body .message-publish-grid textarea {
  min-height: 108px;
}

.admin-body .dialog-message-form {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid #e1e9f3;
}

.admin-body .dialog-message-form h4 {
  margin: 0;
  color: #172033;
  font-size: 15px;
}

.admin-body .message-audience-title {
  margin-top: 2px;
  color: #172033;
  font-size: 14px;
  font-weight: 900;
}

.admin-body .message-audience-grid {
  display: grid;
  gap: 9px;
}

.admin-body .message-audience-section {
  display: grid;
  gap: 9px;
  padding: 11px;
  background: #f8fbff;
  border: 1px solid #dfe8f3;
  border-radius: 9px;
}

.admin-body .message-audience-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.admin-body .message-audience-section-heading > strong {
  color: #172033;
  font-size: 14px;
}

.admin-body .message-audience-section-heading > span,
.admin-body .message-target-option small,
.admin-body .message-learner-audience summary small,
.admin-body .message-major-group summary small {
  color: #66758b;
  font-size: 11px;
  font-weight: 700;
}

.admin-body .message-learner-section {
  max-height: 430px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.admin-body .message-learner-audience,
.admin-body .message-major-group {
  overflow: hidden;
  background: #fff;
  border: 1px solid #dce7f3;
  border-radius: 8px;
}

.admin-body .message-learner-audience > summary,
.admin-body .message-major-group > summary {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 10px;
  cursor: pointer;
  list-style-position: inside;
}

.admin-body .message-learner-audience > summary > span,
.admin-body .message-major-group > summary > span {
  display: grid;
  flex: 1 1 auto;
  min-width: 0;
  gap: 2px;
}

.admin-body .message-learner-audience > summary::marker,
.admin-body .message-major-group > summary::marker {
  color: #246ed2;
}

.admin-body .message-learner-audience > summary label,
.admin-body .message-major-group > summary label,
.admin-body .message-target-option,
.admin-body .message-class-option {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.admin-body .message-audience-all-option,
.admin-body .message-major-all-option {
  border-color: #b8d6ef;
  background: #f1f8ff;
}

.admin-body .message-learner-audience > summary label,
.admin-body .message-major-group > summary label {
  flex: 1 1 auto;
  min-width: 0;
  padding: 4px 6px;
  border-radius: 6px;
}

.admin-body .message-learner-audience summary span,
.admin-body .message-major-group summary span,
.admin-body .message-target-option > span {
  display: grid;
  gap: 2px;
}

.admin-body .message-major-list {
  display: grid;
  gap: 7px;
  padding: 0 9px 9px 26px;
}

.admin-body .message-major-group {
  background: #fbfdff;
}

.admin-body .message-class-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  padding: 0 9px 9px 27px;
}

.admin-body .message-class-option {
  min-width: 0;
  padding: 6px 8px;
  background: #fff;
  border: 1px solid #e1e9f3;
  border-radius: 7px;
  font-size: 12px;
}

.admin-body .message-class-option > span {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}

.admin-body .message-class-option small {
  color: #66758b;
}

.admin-body .message-class-option b {
  margin-left: auto;
  color: #176fca;
  font-size: 11px;
}

.admin-body .message-role-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.admin-body .message-target-option {
  width: 100%;
  min-width: 0;
  padding: 8px 9px;
  background: #fff;
  border: 1px solid #dce7f3;
  border-radius: 8px;
}

.admin-body .message-audience-section input[type="checkbox"] {
  flex: 0 0 19px;
  width: 19px;
  min-width: 19px;
  height: 19px;
  min-height: 19px;
  margin: 0;
  padding: 0;
  accent-color: var(--blue);
  cursor: pointer;
}

.admin-body .message-learner-audience > summary label:hover,
.admin-body .message-major-group > summary label:hover,
.admin-body .message-class-option:hover,
.admin-body .message-target-option:hover {
  border-color: #9cc5e8;
  background: #eff8ff;
}

.admin-body .message-learner-audience > summary label:has(input:checked),
.admin-body .message-major-group > summary label:has(input:checked),
.admin-body .message-class-option:has(input:checked),
.admin-body .message-target-option:has(input:checked) {
  color: #0f4f91;
  border-color: #65a9e4;
  background: #e6f3ff;
  box-shadow: inset 3px 0 0 #246ed2;
}

.admin-body .message-audience-section input[type="checkbox"]:focus-visible {
  outline: 3px solid rgba(36, 110, 210, 0.22);
  outline-offset: 2px;
}

.admin-body .message-audience-section input:disabled + span {
  opacity: 0.45;
}

.admin-body .message-audience-empty {
  margin: 0;
  padding: 8px 10px;
  color: #66758b;
  background: #fff;
  border-radius: 7px;
  font-size: 12px;
}

.admin-body .message-audience-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  color: #24415f;
  background: #eef8ff;
  border: 1px solid #cfe4f8;
  border-radius: 8px;
}

.admin-body .message-audience-summary > span {
  display: flex;
  min-width: 0;
  max-height: 84px;
  flex-wrap: wrap;
  gap: 5px;
  overflow-y: auto;
}

.admin-body .message-audience-summary b,
.admin-body .system-message-target-tags span {
  padding: 4px 7px;
  color: #176fca;
  background: #fff;
  border: 1px solid #cfe0f5;
  border-radius: 999px;
  font-size: 11px;
}

.admin-body .message-audience-summary > strong {
  flex: 0 0 auto;
  color: #0f766e;
  font-size: 13px;
}

.admin-body .system-message-record {
  padding: 10px 11px;
  background: #fbfdff;
  border: 1px solid #e1e9f3;
  border-radius: 8px;
}

.admin-body .system-message-record summary {
  cursor: pointer;
}

.admin-body .system-message-record summary strong,
.admin-body .system-message-record summary span {
  display: block;
}

.admin-body .system-message-record summary span,
.admin-body .system-message-record small {
  margin-top: 4px;
  color: #66758b;
  font-size: 11px;
}

.admin-body .system-message-record p {
  white-space: pre-wrap;
}

.admin-body .system-message-target-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.system-message-confirm[hidden] {
  display: none !important;
}

.system-message-confirm {
  position: fixed;
  z-index: 1400;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
}

.system-message-confirm-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(18, 31, 48, 0.48);
}

.system-message-confirm-card {
  position: relative;
  width: min(560px, 100%);
  padding: 20px;
  background: #fff;
  border: 1px solid #dce6f2;
  border-radius: 12px;
  box-shadow: 0 24px 64px rgba(18, 42, 72, 0.22);
}

.system-message-confirm-card h3 {
  margin: 0 0 14px;
}

.system-message-confirm-card dl {
  display: grid;
  gap: 9px;
  margin: 0;
}

.system-message-confirm-card dl > div {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 10px;
  padding: 9px 10px;
  background: #f7faff;
  border-radius: 8px;
}

.system-message-confirm-card dt {
  color: #66758b;
  font-weight: 800;
}

.system-message-confirm-card dd {
  margin: 0;
  color: #172033;
}

.system-message-confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
  margin-top: 16px;
}

.system-message-confirm-actions button {
  min-width: 110px;
}

@media (max-width: 760px) {
  .admin-body .message-audience-section-heading,
  .admin-body .message-audience-summary {
    align-items: flex-start;
    flex-direction: column;
  }

  .admin-body .message-role-options,
  .admin-body .message-class-options {
    grid-template-columns: 1fr;
  }

  .admin-body .message-major-list,
  .admin-body .message-class-options {
    padding-left: 12px;
  }

  .system-message-confirm-card dl > div {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}

.admin-body .message-audience-row {
  display: grid;
  grid-template-columns: minmax(150px, 0.85fr) minmax(0, 1.5fr);
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: #f8fbff;
  border: 1px solid #dfe8f3;
  border-radius: 8px;
}

.admin-body .message-audience-row > strong {
  color: #172033;
  line-height: 1.4;
  font-size: 14px;
}

.admin-body .message-audience-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(70px, max-content));
  justify-content: start;
  gap: 8px;
}

.admin-body .message-audience-options label {
  display: inline-flex;
  width: auto;
  min-height: 30px;
  align-items: center;
  gap: 6px;
  padding: 5px 9px;
  color: #43526a;
  background: #fff;
  border: 1px solid #dbe6f2;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.admin-body .message-audience-options input[type="checkbox"] {
  flex: 0 0 14px;
  width: 14px;
  min-width: 14px;
  height: 14px;
  min-height: 14px;
  margin: 0;
  padding: 0;
  accent-color: var(--blue);
}

.admin-body .message-audience-options .message-row-all {
  grid-column: 3;
  grid-row: 1 / span 2;
  align-self: center;
  color: #0f766e;
  border-color: #b8e3df;
  background: #effcf9;
}

.admin-body .message-audience-options .message-dialog-option {
  color: #1f5fbf;
  border-color: #c9ddff;
  background: #f4f8ff;
}

.admin-body .message-audience-options .message-dialog-spacer {
  width: 76px;
  min-height: 30px;
  visibility: hidden;
  pointer-events: none;
}

.admin-body .email-template-grid textarea {
  min-height: 116px;
}

.admin-body .email-template-help article {
  display: grid;
  gap: 5px;
  padding: 10px;
  border-bottom: 1px solid #e7edf5;
}

.admin-body .message-manage-grid {
  grid-template-columns: minmax(260px, 0.78fr) minmax(420px, 1.22fr);
  gap: 14px;
  padding: 14px;
}

.admin-body .message-manage-grid {
  grid-template-columns: minmax(360px, 0.9fr) minmax(440px, 1.1fr);
  align-items: start;
}

.admin-body .message-manage-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 14px;
}

.admin-body .message-manage-tabs button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  min-height: 40px;
  padding: 9px 12px;
  border: 1px solid #d8e3ef;
  border-radius: 8px;
  color: #25405f;
  background: #f7fbff;
  font-weight: 900;
  cursor: pointer;
}

@media (max-width: 720px) {
  .admin-body .message-manage-tabs {
    grid-template-columns: 1fr;
  }
}

.admin-body .message-manage-tabs button.active {
  border-color: #1b66d2;
  color: #0f4fac;
  background: #eaf3ff;
}

.admin-body .message-manage-tabs b,
.admin-body .admin-review-count,
.admin-body .admin-notification-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  color: #fff;
  background: #e02424;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
}

.admin-body .message-manage-tabs b[hidden],
.admin-body .admin-review-count[hidden],
.admin-body .admin-notification-count[hidden] {
  display: none;
}

.admin-body .command-menu button,
.admin-body .factory-admin-tabs button,
.admin-body .communications-management-tabs button,
.admin-body .task-audit-tabs button {
  position: relative;
}

.admin-body .admin-review-count {
  position: absolute;
  top: 8px;
  right: 10px;
}

.admin-body .message-manage-panel {
  display: none;
}

.admin-body .message-manage-panel.active {
  display: block;
}

.admin-body .message-license-card {
  order: 1;
}

.admin-body .message-analysis-card {
  order: 2;
}

.admin-body .message-thread-card {
  grid-column: 1 / -1;
  order: 3;
}

.admin-body .message-feedback-card {
  grid-column: 1 / -1;
  order: 4;
}

.admin-body .business-license-review-list {
  max-height: 360px;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 6px;
  scrollbar-gutter: stable;
}

.admin-body .business-license-review {
  border: 1px solid #d9e6f5;
  border-radius: 8px;
  background: #f8fbff;
  overflow: hidden;
}

.admin-body .business-license-review + .business-license-review {
  margin-top: 10px;
}

.admin-body .business-license-review summary {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) minmax(220px, 1.4fr) auto;
  gap: 10px;
  align-items: center;
  padding: 12px;
  cursor: pointer;
}

.admin-body .business-license-review summary span {
  color: #52657d;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-body .business-license-review summary em {
  justify-self: end;
  padding: 3px 10px;
  border-radius: 999px;
  color: #8a4b00;
  background: #fff3d6;
  font-style: normal;
  font-weight: 900;
}

.admin-body .business-license-review.is-approved summary em {
  color: #087443;
  background: #dff8ea;
}

.admin-body .business-license-review.is-rejected summary em {
  color: #b42318;
  background: #fee4e2;
}

.admin-body .business-license-review-body {
  display: grid;
  grid-template-columns: minmax(220px, 0.85fr) minmax(260px, 1.15fr);
  gap: 14px;
  padding: 0 12px 12px;
  border-top: 1px solid #d9e6f5;
}

.admin-body .business-license-preview {
  display: grid;
  align-content: start;
  gap: 10px;
}

.admin-body .business-license-preview img {
  max-width: 100%;
  max-height: 260px;
  object-fit: contain;
  border: 1px solid #d9e6f5;
  border-radius: 8px;
  background: #fff;
}

.admin-body .business-license-reject-field {
  display: grid;
  gap: 6px;
  width: 100%;
  color: #52657d;
  font-weight: 800;
}

.admin-body .message-feedback-card {
  grid-column: auto;
  order: 1;
}

.admin-body .message-analysis-card {
  order: 2;
}

.admin-body .message-thread-card {
  grid-column: 1 / -1;
  order: 3;
}

.admin-body .message-feedback-card .record-list {
  max-height: 260px;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 6px;
  scrollbar-gutter: stable;
}

.admin-body .message-feedback-card .record-list article {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) minmax(170px, 1.1fr) minmax(220px, 1.8fr) minmax(120px, 0.9fr) auto;
  align-items: center;
  gap: 12px;
}

.admin-body .message-feedback-card .record-list article > * {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-body .message-feedback-card .record-list article p {
  margin: 0;
}

.admin-body .consultation-record p {
  white-space: pre-line;
}

.admin-body .message-feedback-card .consultation-record p {
  white-space: nowrap;
}

.admin-body .record-list article > button[data-admin-message-delete] {
  min-height: 30px;
  padding: 0 10px;
  color: #b42318;
  background: #fff5f5;
  border: 1px solid #ffd1d1;
  border-radius: 7px;
  cursor: pointer;
  font-weight: 900;
}

.admin-body .record-list article > button[data-admin-message-delete]:hover {
  color: #fff;
  background: #d92d20;
}

.admin-body .message-thread-list {
  max-height: 360px;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 6px;
  scrollbar-gutter: stable;
}

.admin-body .message-thread-day {
  display: grid;
  gap: 8px;
}

.admin-body .message-thread-day + .message-thread-day {
  margin-top: 12px;
}

.admin-body .message-thread-day-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  padding: 7px 10px;
  color: #0f5fbf;
  background: #edf6ff;
  border: 1px solid #d7e9fb;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.admin-body .message-thread-day.is-expanded .message-thread-day-heading {
  border-color: #88bdf6;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.admin-body .message-thread-day:not(.is-expanded) .message-thread-month-content {
  display: none;
}

.admin-body .message-thread-day-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  min-height: 28px;
  padding: 4px 10px;
  color: #0f5fbf;
  background: #fff;
  border: 1px solid #84baf0;
  border-radius: 6px;
  font: inherit;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
}

.admin-body .message-thread-day-toggle:hover,
.admin-body .message-thread-day-toggle:focus-visible {
  color: #fff;
  background: #176dcc;
  border-color: #176dcc;
  outline: none;
}

.admin-body .message-thread-day-toggle:focus-visible {
  box-shadow: 0 0 0 3px rgba(23, 109, 204, 0.2);
}

.admin-body .message-thread-day-toggle-label::after {
  content: "";
}

.admin-body .message-thread-day.is-expanded .message-thread-day-toggle-label {
  font-size: 0;
}

.admin-body .message-thread-day.is-expanded .message-thread-day-toggle-label::after {
  content: "收起";
  font-size: 12px;
}

.admin-body .message-thread-day-toggle-count {
  color: #64748b;
  font-size: 11px;
}

.admin-body .message-thread-day-toggle:hover .message-thread-day-toggle-count,
.admin-body .message-thread-day-toggle:focus-visible .message-thread-day-toggle-count {
  color: inherit;
}

.admin-body .message-thread-row-list {
  display: grid;
  gap: 6px;
  padding: 8px;
  border: 1px solid #d7e9fb;
  border-top: 0;
  border-radius: 0 0 8px 8px;
  background: #fff;
}

.admin-body .message-thread-date-group + .message-thread-date-group {
  margin-top: 10px;
}

.admin-body .message-thread-date-group h4 {
  margin: 0 0 6px;
  padding: 2px 2px 0;
  color: #3974ac;
  font-size: 12px;
  font-weight: 700;
}

.admin-body .message-thread-row {
  border: 1px solid #dfe8f3;
  border-radius: 8px;
  background: #f8fbff;
  overflow: hidden;
}

.admin-body .message-thread-row summary {
  display: grid;
  grid-template-columns: minmax(150px, 1.1fr) minmax(126px, 0.8fr) minmax(120px, 1fr) minmax(96px, 0.75fr);
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  cursor: pointer;
  list-style: none;
}

.admin-body .message-thread-row summary::-webkit-details-marker {
  display: none;
}

.admin-body .message-thread-row.active,
.admin-body .message-thread-row[open] {
  border-color: #88bdf6;
  background: #eef6ff;
  box-shadow: 0 10px 22px rgba(31, 98, 210, 0.08);
}

.admin-body .message-thread-row summary > * {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-body .message-thread-row time,
.admin-body .message-thread-row span,
.admin-body .message-thread-row small {
  color: #64748b;
  font-size: 12px;
}

.admin-body .message-thread-detail {
  display: grid;
  gap: 7px;
  padding: 10px 12px 12px;
  background: #fff;
  border-top: 1px solid #dbe8f6;
}

.admin-body .message-thread-message {
  display: grid;
  grid-template-columns: minmax(110px, 0.7fr) minmax(128px, 0.8fr) minmax(0, 1.6fr);
  align-items: start;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid #e3edf7;
  border-radius: 8px;
  background: #f8fbff;
}

.admin-body .message-thread-message.is-staff {
  background: #f7fffb;
}

.admin-body .staff-support-card .message-thread-message.is-own {
  width: min(82%, 520px);
  margin-left: auto;
  background: linear-gradient(135deg, #1f6ed4, #18a39b);
  border-color: transparent;
}

.admin-body .staff-support-card .message-thread-message.is-own > p,
.admin-body .staff-support-card .message-thread-message.is-own > strong,
.admin-body .staff-support-card .message-thread-message.is-own > span,
.admin-body .staff-support-card .message-thread-message.is-own > strong > small {
  color: #fff;
}

.admin-body .message-thread-message.is-empty {
  color: #64748b;
}

.admin-body .message-thread-message span {
  color: #64748b;
  font-size: 12px;
}

.admin-body .message-thread-message p {
  margin: 0;
  color: #43526a;
  font-size: 13px;
  line-height: 1.55;
  white-space: pre-line;
}

.admin-body .staff-support-card .message-thread-message {
  grid-template-areas:
    "content content"
    "sender time";
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 5px 10px;
}

.admin-body .staff-support-card .message-thread-message > p {
  grid-area: content;
  color: #24344d;
  font-size: 14px;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.admin-body .staff-support-card .message-thread-message > strong {
  grid-area: sender;
  display: flex;
  align-items: baseline;
  min-width: 0;
  gap: 5px;
  color: #52637b;
  font-size: 11px;
  line-height: 1.2;
}

.admin-body .staff-support-card .message-thread-message > strong > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-body .staff-support-card .message-thread-message > strong > small {
  flex: 0 0 auto;
  color: #8a98aa;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.admin-body .staff-support-card .message-thread-message > span {
  grid-area: time;
  align-self: end;
  font-size: 9px;
  white-space: nowrap;
}

.admin-body .message-export-form {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
}

.admin-body .message-thread-row.is-unread,
.admin-body .message-feedback-record.is-unread {
  border-color: #ffb3b3;
  box-shadow: inset 3px 0 0 #e52323;
}

.admin-body .message-unread-dot {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  margin-left: 8px;
  padding: 1px 7px;
  color: #fff;
  background: #e52323;
  border-radius: 999px;
  font-size: 11px;
  line-height: 1;
  vertical-align: middle;
}

.admin-body .message-collection-reply-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
}

.admin-body .message-collection-reply-form textarea {
  width: 100%;
  min-height: 70px;
  resize: vertical;
}

.admin-body .message-collection-reply-form button,
.admin-body .message-feedback-detail button {
  min-height: 42px;
  padding: 0 18px;
}

.admin-body .message-feedback-record {
  display: block;
  overflow: hidden;
  border: 1px solid #dfe8f3;
  border-radius: 8px;
  background: #f8fbff;
}

.admin-body .message-feedback-record + .message-feedback-record {
  margin-top: 8px;
}

.admin-body .message-feedback-record summary {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) minmax(150px, 1fr) minmax(220px, 1.8fr) minmax(150px, 0.9fr) auto;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  cursor: pointer;
  list-style: none;
}

.admin-body .message-feedback-record summary::-webkit-details-marker {
  display: none;
}

.admin-body .message-feedback-record summary > * {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-body .message-feedback-record summary time,
.admin-body .message-feedback-record summary span {
  color: #64748b;
  font-size: 12px;
}

.admin-body .message-feedback-record summary em {
  padding: 3px 9px;
  color: #9a6700;
  background: #fff3d6;
  border-radius: 999px;
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

.admin-body .message-feedback-record summary em.is-handled {
  color: #087443;
  background: #dff8ea;
}

.admin-body .message-feedback-detail {
  display: grid;
  gap: 10px;
  padding: 12px;
  border-top: 1px solid #dbe8f6;
  background: #fff;
}

.admin-body .message-feedback-detail > p {
  margin: 0;
  color: #43526a;
  line-height: 1.65;
  white-space: pre-line;
}

.admin-body .message-feedback-detail dl {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

.admin-body .message-feedback-detail dl > div {
  min-width: 0;
  padding: 8px 10px;
  background: #f7faff;
  border-radius: 7px;
}

.admin-body .message-feedback-detail dt {
  color: #64748b;
  font-size: 12px;
}

.admin-body .message-feedback-detail dd {
  margin: 4px 0 0;
  overflow-wrap: anywhere;
  font-weight: 700;
}

@media (max-width: 900px) {
  .admin-body .message-feedback-record summary {
    grid-template-columns: 1fr;
  }

  .admin-body .message-feedback-detail dl {
    grid-template-columns: 1fr 1fr;
  }
}

.admin-body .role-manage-grid .role-card:last-child,
.admin-body .service-phone-grid .role-card:last-child {
  min-width: 0;
  width: 100%;
}

.service-phone-admin-image {
  display: block;
  width: 84px;
  height: 84px;
  margin-top: 10px;
  object-fit: cover;
  border: 1px solid #dbe7f7;
  border-radius: 8px;
  background: #fff;
}

.flash-slide-list {
  position: relative;
  max-height: 300px;
  overflow-y: scroll;
  padding-right: 18px;
  scrollbar-gutter: stable;
}

.flash-slide-list::after {
  display: none;
}

.flash-slide-list::-webkit-scrollbar {
  width: 8px;
}

.flash-slide-list::-webkit-scrollbar-track {
  background: #f3f7fb;
  border-radius: 999px;
}

.flash-slide-list::-webkit-scrollbar-thumb {
  background: #9fb4d1;
  border-radius: 999px;
}

.flash-slide-record {
  grid-template-columns: 132px minmax(0, 1fr) auto;
  align-items: center;
  margin-right: 4px;
}

.flash-slide-record img {
  width: 132px;
  height: 54px;
  object-fit: contain;
  border: 1px solid #dbe7f7;
  border-radius: 8px;
  background: #f6f9fd;
}

.flash-slide-record span,
.flash-slide-record small {
  display: block;
  overflow: hidden;
  color: #637089;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-body .task-admin-grid {
  grid-template-columns: 1fr;
  gap: 14px;
}

.admin-body .task-form-card {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
  align-items: start;
}

.admin-body .task-form-section {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 14px;
  background: #f8fbff;
  border: 1px solid #dfe8f3;
  border-radius: 8px;
}

.admin-body .task-form-section h3 {
  margin: 0;
}

.admin-body .task-form-section .role-form {
  gap: 10px;
}

.admin-body .task-form-section textarea {
  min-height: 92px;
}

.admin-body .user-management-layout {
  grid-template-columns: repeat(2, minmax(360px, 1fr));
  gap: 12px;
  align-items: start;
  overflow-x: auto;
}

.admin-body .role-card {
  min-height: 0;
  padding: 18px;
  background: #fff;
  border-color: #dfe8f3;
  box-shadow: 0 12px 26px rgba(27, 42, 78, 0.05);
}

.admin-body .role-card h3 {
  font-size: 16px;
}

.admin-body .role-card > p {
  line-height: 1.6;
  font-size: 13px;
}

.admin-body .user-management-main {
  display: grid;
  grid-column: 1 / -1;
  grid-row: 3;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 14px;
}

.admin-body .user-edit-card {
  grid-column: 1 / -1;
  grid-row: 2;
}

.admin-body .user-account-tabs-card,
.admin-body .user-list-panel {
  grid-column: 1;
  grid-row: 1;
}

.admin-body .external-account-panel {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
}

.admin-body .user-account-tabs-card {
  grid-column: 1 / -1;
  min-width: 0;
}

.admin-body .user-account-tabs {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 8px;
  margin-bottom: 14px;
  padding: 8px;
  background: #f4f7fb;
  border: 1px solid #dfe8f3;
  border-radius: 8px;
}

.admin-body .user-account-tabs button {
  min-height: 42px;
  color: #43526a;
  background: #fff;
  border: 1px solid #dbe6f2;
  border-radius: 7px;
  cursor: pointer;
  font-weight: 900;
}

.admin-body .user-account-tabs button.active {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(135deg, var(--blue), var(--teal));
}

.admin-body .user-account-panel {
  display: none;
}

.admin-body .user-account-panel.active {
  display: grid;
  gap: 12px;
}

.admin-body .ecommerce-student-determination-form {
  display: grid;
  gap: 10px;
  padding: 13px 14px;
  border: 1px solid #d7e4f2;
  border-radius: 12px;
  background: linear-gradient(180deg, #f8fbff 0%, #fff 100%);
}

.admin-body .ecommerce-student-picker {
  display: grid;
  gap: 5px;
  color: #17385f;
  font-weight: 900;
}

.admin-body .ecommerce-student-picker select {
  width: 100%;
  min-height: 40px;
  padding: 0 42px 0 14px;
  color: #123b69;
  background: #fff;
  border: 1px solid #b8cde7;
  border-radius: 8px;
  font: inherit;
}

.admin-body .ecommerce-student-picker select:focus-visible,
.admin-body .ecommerce-collection-mode-options input:focus-visible + span {
  outline: 3px solid rgba(36, 110, 210, 0.2);
  outline-offset: 2px;
  border-color: #246ed2;
}

.admin-body .ecommerce-collection-mode-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  border: 0;
}

.admin-body .ecommerce-collection-mode-options legend {
  grid-column: 1 / -1;
  margin-bottom: 3px;
  color: #17385f;
  font-weight: 900;
}

.admin-body .ecommerce-collection-mode-options label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-height: 72px;
  padding: 10px 12px;
  border: 1px solid #c7d8eb;
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
}

.admin-body .ecommerce-collection-mode-options label:has(input:checked) {
  border-color: #179f99;
  background: #eefaf8;
  box-shadow: 0 8px 20px rgba(23, 159, 153, 0.12);
}

.admin-body .ecommerce-collection-mode-options input {
  width: 18px;
  height: 18px;
  margin: 3px 0 0;
  accent-color: #179f99;
  flex: 0 0 auto;
}

.admin-body .ecommerce-collection-mode-options span,
.admin-body .ecommerce-collection-mode-options small {
  display: block;
}

.admin-body .ecommerce-collection-mode-options strong {
  color: #123b69;
}

.admin-body .ecommerce-collection-mode-options small {
  margin-top: 3px;
  color: #66788d;
  line-height: 1.4;
}

.admin-body .ecommerce-student-determination-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.admin-body .ecommerce-student-determination-actions button,
.admin-body .ecommerce-student-determination-status button {
  min-height: 36px;
  padding: 0 15px;
  border: 1px solid transparent;
  border-radius: 8px;
  color: #fff;
  background: linear-gradient(135deg, var(--teal), var(--blue));
  font-weight: 900;
  cursor: pointer;
}

.admin-body .ecommerce-student-determination-actions button:disabled {
  color: #8290a4;
  background: #e8eef5;
  cursor: not-allowed;
}

.admin-body .ecommerce-student-determination-actions p {
  margin: 0;
  color: #087f75;
  font-weight: 800;
}

.admin-body .ecommerce-student-determination-actions p[data-status="error"] {
  color: #c2413d;
}

.admin-body .ecommerce-student-determination-actions p[data-status="saving"] {
  color: #176dcc;
}

.admin-body .ecommerce-student-determination-list {
  max-height: 360px;
}

.admin-body .ecommerce-student-determination-list .ecommerce-student-determination-row {
  min-height: 52px;
  padding: 8px 12px;
  padding-right: 12px;
}

.admin-body .ecommerce-student-determination-row,
.admin-body .ecommerce-student-determination-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.admin-body .ecommerce-student-determination-row > div:first-child,
.admin-body .ecommerce-student-determination-row > div:first-child span {
  display: grid;
  gap: 2px;
  line-height: 1.35;
}

.admin-body .ecommerce-student-determination-status > strong {
  color: #087f75;
  text-align: right;
}

.admin-body .ecommerce-student-determination-list {
  display: grid;
  gap: 16px;
  max-height: none;
  overflow: visible;
  background: transparent;
}

.admin-body .course-collaboration-form,
.admin-body .course-collaboration-records {
  padding: 16px;
  border: 1px solid #d5e4f2;
  border-radius: 12px;
  background: linear-gradient(180deg, #fbfdff 0%, #ffffff 100%);
}

.admin-body .course-collaboration-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.admin-body .course-collaboration-grid label {
  display: grid;
  gap: 6px;
  min-width: 0;
  color: #17385f;
  font-weight: 800;
}

.admin-body .course-collaboration-course-field {
  display: grid;
  gap: 6px;
  min-width: 0;
  color: #17385f;
  font-weight: 800;
}

.admin-body .course-collaboration-course-picker {
  position: relative;
  min-width: 0;
}

.admin-body .course-collaboration-course-picker > summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 8px 34px 8px 12px;
  border: 1px solid #b8cce5;
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
  list-style: none;
}

.admin-body .course-collaboration-course-picker > summary::-webkit-details-marker { display: none; }
.admin-body .course-collaboration-course-picker > summary::after {
  position: absolute;
  right: 13px;
  content: "⌄";
  color: #2b527d;
  font-size: 17px;
  transform-origin: center;
}
.admin-body .course-collaboration-course-picker[open] > summary::after { transform: rotate(180deg); }
.admin-body .course-collaboration-course-picker > summary > span {
  min-width: 0;
  overflow: hidden;
  color: #17385f;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-body .course-collaboration-course-picker > summary > small {
  color: #607792;
  font-size: 12px;
  white-space: nowrap;
}
.admin-body .course-collaboration-course-picker.has-selection > summary {
  border-color: #25a39a;
  background: #f1fbf9;
}
.admin-body .course-collaboration-course-picker > summary:hover { border-color: #4386d2; }
.admin-body .course-collaboration-course-picker > summary:focus-visible {
  outline: 3px solid rgba(36, 110, 210, 0.2);
  outline-offset: 2px;
  border-color: #246ed2;
}

.admin-body .course-collaboration-course-options {
  position: absolute;
  z-index: 30;
  top: calc(100% + 5px);
  left: 0;
  width: min(420px, 92vw);
  max-height: 320px;
  padding: 7px;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid #b8cce5;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 14px 34px rgba(35, 68, 111, 0.18);
}

.admin-body .course-collaboration-course-option {
  display: grid !important;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: center;
  gap: 10px !important;
  padding: 9px 10px;
  border-radius: 6px;
  cursor: pointer;
}
.admin-body .course-collaboration-course-option:hover { background: #eef7ff; }
.admin-body .course-collaboration-course-option:has(input:checked) { background: #eaf8f5; }
.admin-body .course-collaboration-course-option input[type="checkbox"] {
  appearance: none;
  display: inline-grid;
  place-items: center;
  box-sizing: border-box;
  width: 18px;
  min-width: 18px;
  height: 18px;
  min-height: 18px;
  padding: 0;
  margin: 0;
  border: 1.5px solid #8da8c6;
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
}
.admin-body .course-collaboration-course-option input[type="checkbox"]:checked {
  border-color: transparent;
  background: linear-gradient(135deg, #20a49d, #2b69d4);
}
.admin-body .course-collaboration-course-option input[type="checkbox"]:checked::before {
  display: block;
  width: 9px;
  height: 5px;
  margin: 0;
  border-bottom: 2px solid #fff;
  border-left: 2px solid #fff;
  box-sizing: border-box;
  content: "";
  transform: rotate(-45deg);
}
.admin-body .course-collaboration-course-option input[type="checkbox"]:focus-visible {
  outline: 3px solid rgba(36, 110, 210, 0.22);
  outline-offset: 2px;
}
.admin-body .course-collaboration-course-option span { min-width: 0; }
.admin-body .course-collaboration-course-option strong,
.admin-body .course-collaboration-course-option small { display: block; }
.admin-body .course-collaboration-course-option small { margin-top: 2px; color: #6b7f97; font-size: 12px; }
.admin-body .course-collaboration-course-empty { margin: 0; padding: 12px; color: #6b7f97; text-align: center; }

.admin-body .course-collaboration-grid :is(select, input) {
  width: 100%;
  min-width: 0;
  min-height: 40px;
}

.admin-body .course-collaboration-grid .course-collaboration-field-hint {
  color: #6b7f97;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
}

.admin-body .course-collaboration-grid input[type="search"]:focus-visible {
  outline: 3px solid rgba(36, 110, 210, 0.2);
  outline-offset: 2px;
  border-color: #246ed2;
}

.admin-body .course-collaboration-status-field { grid-column: span 1; }

.admin-body .course-collaboration-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
}

.admin-body .course-collaboration-actions > button {
  min-height: 38px;
  padding: 0 16px;
}

.admin-body .course-collaboration-actions .role-form-message { margin: 0; }

.admin-body .course-collaboration-records { border-top: 3px solid #1ca69d; }

.admin-body .course-collaboration-records-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}

.admin-body .course-collaboration-records-heading h4 { margin: 0; color: #112f55; font-size: 18px; }
.admin-body .course-collaboration-records-heading p { margin: 5px 0 0; color: #637790; font-size: 13px; }
.admin-body .course-collaboration-records-heading > strong { padding: 5px 10px; border-radius: 999px; color: #087f75; background: #e7f8f4; font-size: 13px; }

.admin-body .course-collaboration-list { max-height: 420px; }

.admin-body .course-collaboration-row {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(180px, 1fr) minmax(72px, auto) minmax(124px, auto);
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
}

.admin-body .course-collaboration-row > div { min-width: 0; }
.admin-body .course-collaboration-row strong,
.admin-body .course-collaboration-row small { display: block; }
.admin-body .course-collaboration-row small { margin-top: 4px; color: #6b7f97; }
.admin-body .course-collaboration-rate { justify-self: end; min-width: 72px; color: #1266b8; font-size: 17px; text-align: right; white-space: nowrap; }
.admin-body .course-collaboration-status { padding: 4px 9px; border-radius: 999px; color: #087f75; background: #e7f8f4; font-size: 12px; font-weight: 900; white-space: nowrap; }
.admin-body .course-collaboration-status.is-inactive { color: #6d7e93; background: #eef2f7; }
.admin-body .course-collaboration-row button { min-height: 34px; padding: 0 12px; }
.admin-body .course-collaboration-row .course-collaboration-delete {
  border-color: #efaaa4;
  color: #c13737;
  background: #fff5f4;
}

.admin-body .course-collaboration-row .course-collaboration-delete:hover {
  border-color: #df7770;
  background: #ffeceb;
}
.admin-body .course-collaboration-row .record-actions {
  position: static;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 184px;
  white-space: nowrap;
}

@media (max-width: 820px) {
  .admin-body .course-collaboration-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-body .course-collaboration-row { grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
  .admin-body .course-collaboration-row > :nth-child(2) { grid-column: 1; }
  .admin-body .course-collaboration-row > :nth-child(3) { grid-column: 2; grid-row: 1; }
  .admin-body .course-collaboration-row > :nth-child(4) { grid-column: 2; grid-row: 2; }
}

@media (max-width: 520px) {
  .admin-body .course-collaboration-grid { grid-template-columns: 1fr; }
  .admin-body .course-collaboration-actions { align-items: stretch; flex-direction: column; }
  .admin-body .course-collaboration-actions > button { width: 100%; }
  .admin-body .course-collaboration-records-heading { align-items: stretch; flex-direction: column; }
  .admin-body .course-collaboration-records-heading > strong { align-self: flex-start; }
}

.admin-body .ecommerce-collection-record-section {
  overflow: hidden;
  border: 1px solid #cfe0f2;
  border-top: 3px solid #1ca69d;
  border-radius: 12px;
  background: linear-gradient(180deg, #fbfdff 0%, #ffffff 100%);
}

.admin-body .ecommerce-collection-record-section::before {
  display: block;
  width: 138px;
  height: 3px;
  margin-top: -3px;
  content: "";
  background: linear-gradient(90deg, #226fd3, #7658dc);
}

.admin-body .ecommerce-collection-record-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px 11px;
}

.admin-body .ecommerce-collection-record-head h4 {
  margin: 0;
  color: #112f55;
  font-size: 18px;
  line-height: 1.25;
}

.admin-body .ecommerce-collection-record-head p {
  margin: 4px 0 0;
  color: #637790;
  font-size: 13px;
  line-height: 1.45;
}

.admin-body .ecommerce-collection-record-head > strong {
  flex: 0 0 auto;
  padding: 5px 10px;
  border-radius: 999px;
  color: #087f75;
  background: #e7f8f4;
  font-size: 13px;
}

.admin-body .ecommerce-collection-table-wrap {
  overflow-x: auto;
  border-top: 1px solid #d9e6f4;
}

.admin-body .ecommerce-collection-table {
  width: 100%;
  min-width: 780px;
  border-collapse: collapse;
  table-layout: fixed;
  color: #17385f;
  font-size: 13px;
}

.admin-body .ecommerce-collection-table th,
.admin-body .ecommerce-collection-table td {
  padding: 10px 12px;
  border-bottom: 1px solid #e0eaf5;
  text-align: left;
  vertical-align: middle;
  word-break: break-word;
}

.admin-body .ecommerce-collection-table th {
  color: #21558f;
  background: #eff6fd;
  font-weight: 900;
}

.admin-body .ecommerce-collection-table tbody tr:last-child td { border-bottom: 0; }
.admin-body .ecommerce-collection-table td strong,
.admin-body .ecommerce-collection-table td small { display: block; }
.admin-body .ecommerce-collection-table td small { margin-top: 3px; color: #70839a; }

.admin-body .ecommerce-collection-status {
  display: inline-flex;
  padding: 4px 8px;
  border-radius: 999px;
  color: #087f75;
  background: #e8f8f5;
  font-weight: 800;
  white-space: nowrap;
}

.admin-body .ecommerce-collection-status.is-pending {
  color: #9a5b00;
  background: #fff4d9;
}

.admin-body .ecommerce-collection-confirm {
  min-height: 34px;
  padding: 6px 12px;
  border: 1px solid #168f88;
  border-radius: 8px;
  color: #fff;
  background: linear-gradient(135deg, #1aa39a 0%, #246ed2 100%);
  box-shadow: 0 5px 12px rgba(36, 110, 210, 0.14);
  font: inherit;
  font-weight: 900;
  white-space: nowrap;
  cursor: pointer;
}

.admin-body .ecommerce-collection-confirm:hover:not(:disabled) { filter: brightness(1.04); }
.admin-body .ecommerce-collection-confirm:active:not(:disabled) { transform: translateY(1px); }
.admin-body .ecommerce-collection-confirm:focus-visible { outline: 3px solid rgba(36, 110, 210, 0.24); outline-offset: 2px; }
.admin-body .ecommerce-collection-confirm:disabled {
  border-color: #cdd8e5;
  color: #78899e;
  background: #e8eef5;
  box-shadow: none;
  cursor: not-allowed;
}

.admin-body .ecommerce-collection-history-groups {
  display: grid;
  gap: 8px;
  padding: 0 12px 12px;
}

.admin-body .ecommerce-collection-history-groups details {
  overflow: hidden;
  border: 1px solid #d6e4f3;
  border-radius: 9px;
  background: #fff;
}

.admin-body .ecommerce-collection-history-groups summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 16px;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  color: #17385f;
  cursor: pointer;
  font-weight: 900;
  list-style: none;
}

.admin-body .ecommerce-collection-history-groups summary::-webkit-details-marker { display: none; }
.admin-body .ecommerce-collection-history-groups summary strong { color: #087f75; font-size: 13px; }
.admin-body .ecommerce-collection-history-groups summary i { width: 8px; height: 8px; border-right: 2px solid #246ed2; border-bottom: 2px solid #246ed2; transform: rotate(45deg); transition: transform .18s ease; }
.admin-body .ecommerce-collection-history-groups details[open] summary i { transform: rotate(225deg); }

.admin-body .user-management-main .role-card {
  min-width: 0;
}

.admin-body .user-management-main .role-card:last-child {
  grid-column: auto;
  min-height: 0;
}

.admin-body .user-side-list {
  max-height: 520px;
  overflow: auto;
}

.admin-body .user-account-tabs-card .user-side-list,
.admin-body .user-account-tabs-card .external-account-list {
  max-height: 660px;
}

.admin-body .record-list {
  gap: 0;
  max-height: 520px;
  overflow-x: hidden;
  overflow-y: auto;
  border: 1px solid #e1e7ef;
  border-radius: 8px;
  scrollbar-color: #b8c9dc #f3f7fb;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
}

.admin-body .record-list::-webkit-scrollbar,
.admin-body .role-matrix::-webkit-scrollbar,
.admin-body .permission-list::-webkit-scrollbar,
.admin-body .company-grid::-webkit-scrollbar {
  width: 10px;
}

.admin-body .record-list::-webkit-scrollbar-track,
.admin-body .role-matrix::-webkit-scrollbar-track,
.admin-body .permission-list::-webkit-scrollbar-track,
.admin-body .company-grid::-webkit-scrollbar-track {
  background: #f3f7fb;
  border-radius: 999px;
}

.admin-body .record-list::-webkit-scrollbar-thumb,
.admin-body .role-matrix::-webkit-scrollbar-thumb,
.admin-body .permission-list::-webkit-scrollbar-thumb,
.admin-body .company-grid::-webkit-scrollbar-thumb {
  background: #b8c9dc;
  border: 2px solid #f3f7fb;
  border-radius: 999px;
}

.admin-body .record-list::-webkit-scrollbar-thumb:hover,
.admin-body .role-matrix::-webkit-scrollbar-thumb:hover,
.admin-body .permission-list::-webkit-scrollbar-thumb:hover,
.admin-body .company-grid::-webkit-scrollbar-thumb:hover {
  background: #9fb4cb;
}

.admin-body .role-matrix,
.admin-body .permission-list,
.admin-body .company-grid {
  max-height: 560px;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-color: #b8c9dc #f3f7fb;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
}

.admin-body .flash-slide-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: max-content;
  align-content: start;
  gap: 10px;
  height: 300px;
  max-height: 300px;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 10px;
  scrollbar-color: #b8c9dc #f3f7fb;
  scrollbar-width: thin;
}

.admin-body .flash-slide-record {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px 8px;
  min-width: 0;
  margin: 0;
  padding: 10px;
  background: #fff;
  border: 1px solid #e2eaf4;
  border-radius: 8px;
}

.admin-body .flash-slide-record.is-editing {
  border-color: #2489d8;
  box-shadow: 0 0 0 2px rgba(36, 137, 216, 0.14);
}

.admin-body .flash-slide-record img {
  grid-column: 1 / -1;
  width: 100%;
  height: auto;
  aspect-ratio: 20 / 11;
  object-fit: contain;
}

.admin-body .flash-slide-record span,
.admin-body .flash-slide-record small {
  min-width: 0;
}

.admin-body .flash-slide-record small {
  grid-column: 1 / -1;
}

.admin-body .flash-slide-actions {
  grid-column: 2;
  grid-row: 2;
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}

.admin-body .flash-slide-actions button {
  position: static;
  white-space: nowrap;
}

.admin-body .flash-slide-list > .empty-state {
  grid-column: 1 / -1;
}

.admin-body .flash-slide-list::after {
  display: none;
}

@media (max-width: 760px) {
  .admin-body .flash-slide-list {
    grid-template-columns: 1fr;
  }
}

.admin-body .record-item,
.admin-body .matrix-row,
.admin-body .company-item {
  position: relative;
  gap: 4px;
  padding: 13px 14px;
  padding-right: 88px;
  background: #fff;
  border: 0;
  border-bottom: 1px solid #e7edf5;
  border-radius: 0;
}

.admin-body .record-item:last-child,
.admin-body .matrix-row:last-child,
.admin-body .company-item:last-child {
  border-bottom: 0;
}

.admin-body .record-item:hover,
.admin-body .matrix-row:hover,
.admin-body .company-item:hover {
  background: #f8fbff;
}

.admin-body .permission-matrix-row {
  display: grid;
  grid-template-columns: minmax(90px, 0.24fr) minmax(0, 1fr) auto auto;
  align-items: start;
  gap: 10px 14px;
  min-height: 58px;
  height: max-content;
  padding-right: 14px;
}

.admin-body #permissionMatrix {
  grid-auto-rows: max-content;
  align-content: start;
  padding-bottom: 10px;
  scroll-padding-bottom: 10px;
}

.admin-body .permission-matrix-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  align-content: flex-start;
  min-width: 0;
  overflow: visible;
}

.admin-body .permission-matrix-chip {
  max-width: none;
  overflow: visible;
  text-overflow: clip;
  white-space: nowrap;
}

.admin-body .permission-edit-button {
  position: static;
  align-self: center;
  justify-self: end;
  min-width: 54px;
  min-height: 32px;
  padding: 0 10px;
  transform: none;
  color: #1764cc;
  background: #fff;
  border: 1px solid #c9dcf3;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
}

.admin-body .permission-edit-button:hover,
.admin-body .permission-edit-button.active {
  color: #fff;
  border-color: transparent;
  background: #1764cc;
}

.finance-access-intro,
.finance-access-account-head,
.finance-access-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.finance-access-intro {
  padding: 16px 18px;
  border: 1px solid #cfe0ee;
  border-left: 4px solid #20a39e;
  border-radius: 12px;
  background: linear-gradient(120deg, #f5fcfc, #f5f8ff);
}

.finance-access-intro-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  white-space: nowrap;
}

.finance-access-intro-actions button {
  min-height: 38px;
  padding: 7px 15px;
  border: 1px solid #167fba;
  border-radius: 9px;
  color: #fff;
  background: linear-gradient(135deg, #1aa39a 0%, #246ed2 100%);
  box-shadow: 0 6px 14px rgba(34, 111, 190, 0.18);
  font-weight: 800;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
}

.finance-access-intro-actions button:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(34, 111, 190, 0.25);
}

.finance-access-intro-actions button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(31, 134, 183, 0.2);
}

.finance-access-intro-actions button:active:not(:disabled) { transform: translateY(0); }
.finance-access-intro-actions button:disabled { opacity: 0.55; cursor: not-allowed; }

.finance-access-intro p,
.finance-access-actions span {
  margin: 4px 0 0;
  color: #66758d;
  font-size: 13px;
}

.finance-access-account {
  display: grid;
  gap: 8px;
  margin-top: 8px;
  padding: 10px 12px;
  border: 1px solid #d4e2ef;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 5px 14px rgba(44, 76, 116, 0.045);
}

.finance-access-account-list {
  max-height: min(62vh, 610px);
  padding-right: 6px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.finance-access-account-head > div {
  display: flex;
  min-width: 0;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

.finance-access-account-head span,
.finance-access-account-head small {
  color: #6a7890;
  font-size: 12px;
}

.finance-access-account-head strong {
  color: #14243d;
  font-size: 18px;
}

.finance-access-account-head .finance-access-phone {
  color: #56718e;
  font-weight: 700;
}

.finance-access-status {
  padding: 6px 11px;
  border-radius: 999px;
  color: #8b5d00;
  background: #fff4d7;
  font-size: 12px;
}

.finance-access-status.is-active { color: #08766f; background: #e5f8f3; }
.finance-access-status.is-inactive { color: #a53a3a; background: #fff0f0; }

.finance-access-columns {
  display: grid;
  grid-template-columns: minmax(210px, 1fr) minmax(240px, 1.25fr) minmax(200px, 0.78fr) auto;
  gap: 12px;
  align-items: stretch;
}

.finance-access-columns > .finance-access-dropdown,
.finance-access-columns > .finance-access-commission-field,
.finance-access-columns > .finance-access-actions {
  min-height: 64px;
}

.finance-access-dropdown,
.finance-access-commission-field {
  position: relative;
  min-width: 0;
  border: 1px solid #cfdeed;
  border-radius: 10px;
  background: #f9fbfe;
}

.finance-access-dropdown summary {
  display: grid;
  gap: 2px;
  min-height: 62px;
  padding: 7px 10px;
  cursor: pointer;
}

.finance-access-dropdown summary span,
.finance-access-commission-field > span {
  color: #61718a;
  font-size: 12px;
  font-weight: 800;
}

.finance-access-dropdown summary strong {
  overflow: hidden;
  color: #16335b;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.finance-access-dropdown-panel {
  max-height: 330px;
  padding: 12px;
  overflow: auto;
  border-top: 1px solid #dbe6f1;
  background: #fff;
}

.finance-access-dropdown.opens-upward .finance-access-dropdown-panel {
  position: absolute;
  right: 0;
  bottom: calc(100% + 7px);
  left: 0;
  z-index: 30;
  border: 1px solid #cfdeed;
  border-radius: 10px;
  box-shadow: 0 14px 32px rgba(29, 66, 111, 0.2);
}

.finance-access-check-grid,
.finance-access-location-group > div {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 7px;
}

.finance-access-dropdown-panel label,
.finance-access-location-group label {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  color: #263b58;
  font-size: 13px;
}

.finance-access-national,
.finance-access-select-all {
  font-weight: 900;
}

.finance-access-location-group {
  margin: 0 0 12px;
  padding: 10px;
  border: 1px solid #dce8f3;
  border-radius: 9px;
}

.finance-access-location-group legend {
  padding: 0 6px;
  color: #176b78;
  font-weight: 900;
}

.finance-access-commission-field {
  display: grid;
  gap: 4px;
  padding: 7px 10px;
}

.finance-access-commission-field select {
  appearance: none;
  width: 100%;
  min-height: 36px;
  padding: 7px 38px 7px 12px;
  border: 1px solid #b9cde2;
  border-radius: 9px;
  color: #17314f;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.35;
  background-color: #fff;
  background-image:
    linear-gradient(135deg, transparent 50%, #2971c8 50%),
    linear-gradient(45deg, #2971c8 50%, transparent 50%),
    linear-gradient(135deg, #f3fbfb, #f4f7ff);
  background-position:
    calc(100% - 17px) 50%,
    calc(100% - 12px) 50%,
    0 0;
  background-size: 5px 5px, 5px 5px, 100% 100%;
  background-repeat: no-repeat;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
  cursor: pointer;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.finance-access-commission-field select:hover {
  border-color: #72a9dd;
}

.finance-access-commission-field select:focus-visible {
  outline: none;
  border-color: #168fa8;
  box-shadow: 0 0 0 3px rgba(22, 143, 168, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.finance-access-actions {
  justify-content: flex-end;
  align-self: stretch;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.finance-access-audit-note {
  margin: 0;
  color: #66758d;
  font-size: 12px;
}

.finance-access-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 6px 15px;
  border-radius: 9px;
  border: 1px solid transparent;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.finance-access-actions button:not(.ghost) {
  border-color: #167fba;
  color: #fff;
  background: linear-gradient(135deg, #1aa39a 0%, #246ed2 100%);
  box-shadow: 0 6px 14px rgba(34, 111, 190, 0.18);
}

.finance-access-actions button.ghost {
  border-color: #efb9b3;
  color: #b8463c;
  background: linear-gradient(135deg, #fffafa, #fff2f0);
  box-shadow: 0 4px 10px rgba(184, 70, 60, 0.06);
}

.finance-access-actions button:hover {
  transform: translateY(-1px);
}

.finance-access-actions button:not(.ghost):hover {
  box-shadow: 0 8px 18px rgba(34, 111, 190, 0.25);
}

.finance-access-actions button.ghost:hover {
  border-color: #e18f86;
  background: #fff0ee;
}

.finance-access-actions button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(31, 134, 183, 0.2);
}

.finance-access-actions button:active {
  transform: translateY(0);
}

.finance-access-actions button:disabled {
  opacity: 0.58;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.finance-access-pending {
  margin-top: 22px;
  padding: 28px;
  border: 1px dashed #9ebfe8;
  border-radius: 14px;
  background: linear-gradient(135deg, #f4f9ff, #f3fbfa);
  display: grid;
  gap: 8px;
  color: #48617d;
}

.finance-access-pending strong { color: #123b69; font-size: 20px; }

.finance-supplier-masked {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 10px;
  border-radius: 999px;
  background: #edf2f7;
  color: #66788d;
  font-size: 13px;
  white-space: nowrap;
}

.finance-top-tabs.without-commission { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 820px) {
  .admin-body .user-account-tabs,
  .finance-access-columns {
    grid-template-columns: minmax(0, 1fr);
  }

  .admin-body .ecommerce-collection-mode-options {
    grid-template-columns: minmax(0, 1fr);
  }

  .admin-body .ecommerce-student-determination-form {
    gap: 9px;
    padding: 12px;
  }

  .admin-body .ecommerce-collection-mode-options label {
    min-height: 68px;
  }

  .admin-body .ecommerce-student-determination-actions,
  .admin-body .ecommerce-student-determination-row,
  .admin-body .ecommerce-student-determination-status {
    align-items: stretch;
    flex-direction: column;
  }

  .admin-body .ecommerce-student-determination-list .ecommerce-student-determination-row {
    min-height: 0;
    gap: 8px;
    padding: 10px 12px;
  }

  .admin-body .ecommerce-student-determination-actions button,
  .admin-body .ecommerce-student-determination-status button {
    width: 100%;
    min-height: 42px;
  }

  .admin-body .ecommerce-student-determination-status > strong {
    text-align: left;
  }

  .admin-body .ecommerce-collection-record-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 7px;
  }

  .admin-body .ecommerce-collection-table { min-width: 700px; }

  .finance-access-intro,
  .finance-access-account-head,
  .finance-access-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .finance-access-intro-actions {
    width: 100%;
    align-items: stretch;
    flex-direction: column;
  }

  .finance-access-intro-actions button { width: 100%; }

  .finance-access-actions button { width: 100%; }
  .finance-access-columns > .finance-access-actions { min-height: 0; }
  .finance-access-dropdown-panel { max-height: min(58vh, 430px); }
  .finance-access-check-grid,
  .finance-access-location-group > div { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.admin-body .permission-role-delete-button {
  position: static;
  align-self: end;
  justify-self: end;
  min-width: 74px;
  min-height: 32px;
  padding: 0 10px;
  color: #b42318;
  background: #fff7f7;
  border: 1px solid #f0b8b3;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
}

.admin-body .permission-role-delete-button:hover {
  color: #fff;
  border-color: #d92d20;
  background: #d92d20;
}

.admin-body #permissionMatrix .permission-edit-button {
  align-self: end;
}

.admin-body .permission-matrix-row.is-editing .permission-matrix-chip {
  color: #8f241c;
  background: #fff1f0;
}

.admin-body .permission-matrix-chip button {
  display: inline-grid;
  place-items: center;
  width: 20px;
  min-width: 20px;
  height: 20px;
  min-height: 20px;
  margin-left: 6px;
  padding: 0;
  color: #b42318;
  background: #fff;
  border: 1px solid #ffc9c5;
  border-radius: 50%;
  font-size: 16px;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
}

.admin-body .permission-matrix-chip button:hover {
  color: #fff;
  border-color: #d92d20;
  background: #d92d20;
}

.admin-body .permission-matrix-empty {
  color: #7b879a;
  font-size: 13px;
  line-height: 1.5;
}

.admin-body .permission-picker-field {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.admin-body .permission-picker-label {
  color: #213653;
  font-size: 13px;
  font-weight: 800;
}

.admin-body .permission-picker {
  position: relative;
  min-width: 0;
}

.admin-body .permission-picker-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 42px;
  padding: 0 13px;
  color: #172b4d;
  background: #fff;
  border: 1px solid #c9d9ee;
  border-radius: 8px;
  font: inherit;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.admin-body .permission-picker-trigger:hover,
.admin-body .permission-picker.is-open .permission-picker-trigger {
  border-color: #2474d6;
  box-shadow: 0 0 0 3px rgb(36 116 214 / 12%);
}

.admin-body .permission-picker.has-selection .permission-picker-trigger {
  color: #075f62;
  background: #f1fbfa;
  border-color: #67c9c3;
}

.admin-body .permission-picker.is-invalid .permission-picker-trigger {
  border-color: #e5484d;
  box-shadow: 0 0 0 3px rgb(229 72 77 / 12%);
}

.admin-body .permission-picker-trigger b {
  font-size: 18px;
  line-height: 1;
  transition: transform 0.16s ease;
}

.admin-body .permission-picker.is-open .permission-picker-trigger b {
  transform: rotate(180deg);
}

.admin-body .permission-picker-panel {
  position: absolute;
  z-index: 40;
  top: calc(100% + 6px);
  right: 0;
  left: 0;
  overflow: hidden;
  background: #fff;
  border: 1px solid #b9cee9;
  border-radius: 10px;
  box-shadow: 0 14px 34px rgb(31 72 125 / 18%);
}

.admin-body .permission-picker-panel[hidden] {
  display: none;
}

.admin-body .permission-picker-options {
  display: grid;
  max-height: 260px;
  overflow-y: auto;
  padding: 7px;
}

.admin-body .permission-picker-option {
  display: grid;
  grid-template-columns: 19px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  min-height: 38px;
  margin: 0;
  padding: 7px 9px;
  border-radius: 7px;
  cursor: pointer;
}

.admin-body .permission-picker-option:hover {
  background: #eef6ff;
}

.admin-body .permission-picker-option:has(input:checked) {
  color: #075f62;
  background: #e8f8f6;
}

.admin-body .permission-picker-option input {
  width: 17px;
  height: 17px;
  margin: 0;
  accent-color: #168f91;
}

.admin-body .permission-picker-option span {
  min-width: 0;
  font-size: 14px;
  font-weight: 700;
}

.admin-body .permission-picker-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 10px;
  color: #60718b;
  background: #f7faff;
  border-top: 1px solid #dbe7f4;
  font-size: 12px;
  font-weight: 700;
}

.admin-body .permission-picker-footer button {
  width: auto;
  min-height: 30px;
  padding: 0 14px;
  color: #fff;
  background: linear-gradient(135deg, #16a39a, #2871d5);
  border: 0;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 800;
}

.admin-body .admin-profile-preview-card {
  max-width: 720px;
}

.admin-body .admin-profile-preview-head {
  display: grid;
  gap: 6px;
  margin-bottom: 14px;
}

.admin-body .admin-profile-preview-head h3 {
  margin: 0;
  font-size: 24px;
}

.admin-body .admin-profile-real-form {
  gap: 14px;
}

.admin-body .admin-profile-real-form .profile-declaration-consent {
  grid-template-columns: auto minmax(0, 1fr);
}

.admin-body .admin-profile-message {
  margin-top: 14px;
}

@media (max-width: 640px) {
  .admin-body .permission-matrix-row {
    grid-template-columns: 1fr auto;
    padding-right: 14px;
  }

  .admin-body .permission-matrix-row > .permission-matrix-chips {
    grid-column: 1 / -1;
    order: 3;
  }

  .admin-body .permission-edit-button {
    justify-self: end;
    margin-top: 6px;
  }

  .admin-body .permission-role-delete-button {
    justify-self: end;
    margin-top: 6px;
  }
}

.admin-body .course-manage-item {
  padding-right: 14px;
}

.admin-body .task-evidence-list {
  display: grid;
  gap: 8px;
  margin-top: 8px;
  padding: 10px;
  background: #f8fbff;
  border: 1px dashed #cfe0f4;
  border-radius: 8px;
}

.admin-body .task-evidence-list > b {
  color: #155bd4;
  font-size: 13px;
}

.admin-body .task-evidence-list > div {
  display: grid;
  gap: 4px;
  padding: 8px;
  background: #fff;
  border: 1px solid #e2ebf6;
  border-radius: 7px;
}

.admin-body .task-batch-button {
  width: 100%;
  text-align: left;
  cursor: pointer;
}

.admin-body .task-record-card {
  display: grid;
  align-content: start;
  gap: 14px;
}

.admin-body .task-record-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 4px;
  background: #f4f7fb;
  border: 1px solid #dce7f5;
  border-radius: 8px;
}

.admin-body .task-record-tabs button {
  min-height: 34px;
  padding: 0 10px;
  color: #42526a;
  background: transparent;
  border: 0;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
}

.admin-body .task-record-tabs button.active {
  color: #fff;
  background: linear-gradient(135deg, var(--teal), var(--blue));
  box-shadow: 0 8px 16px rgba(23, 92, 170, 0.16);
}

.admin-body .task-manage-tabs {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 16px;
}

.admin-body [data-command-panel="permissionManage"] > .overview-grid {
  grid-template-columns: minmax(300px, 0.78fr) minmax(480px, 1.42fr);
}

.admin-body [data-command-panel="permissionManage"] > .overview-grid > .role-card:first-child {
  grid-row: auto;
}

@media (max-width: 1180px) {
  .admin-body [data-command-panel="permissionManage"] > .overview-grid {
    grid-template-columns: 1fr;
  }

  .admin-body [data-command-panel="permissionManage"] > .overview-grid > .role-card:last-child {
    grid-column: auto;
  }
}

.admin-body .permission-account-directory-card {
  grid-template-rows: auto auto minmax(0, 1fr);
  min-width: 0;
}

.admin-body .permission-account-directory-card #permissionAccountMatrix {
  min-height: 0;
  max-height: 420px;
  overflow-y: auto;
  padding-right: 4px;
}

.admin-body .permission-account-heading {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.admin-body .permission-account-heading span {
  display: inline;
  min-height: 0;
  padding: 0;
  color: #53708f;
  background: transparent;
  font-size: 12px;
}

.admin-body .permission-account-summary-row {
  display: grid;
  gap: 9px;
  align-items: start;
  padding: 12px 0;
}

.admin-body .permission-account-summary-row:first-child {
  padding-top: 0;
}

.admin-body .command-menu [data-command] > .admin-notification-count {
  position: absolute;
  top: 8px;
  right: 10px;
}

.admin-body .communications-management-tabs .admin-notification-count,
.admin-body .task-audit-tabs .admin-notification-count {
  position: absolute;
  top: 4px;
  right: 7px;
}

.admin-body .task-manage-tabs:has(> button.role-hidden) {
  grid-template-columns: minmax(0, 1fr);
}

.admin-system-body [data-command-panel="taskManage"] .task-commission-panel {
  display: grid;
  width: 100%;
  gap: 16px;
}

.admin-system-body [data-command-panel="taskManage"] .task-commission-panel[hidden] {
  display: none !important;
}

.admin-system-body [data-command-panel="taskManage"] .task-commission-heading {
  margin-bottom: 0;
}

.admin-body .task-record-section {
  display: grid;
  gap: 10px;
}

.admin-body [data-task-record-panel] {
  display: none !important;
}

.admin-body [data-task-record-panel].active {
  display: grid !important;
}

.admin-body [data-task-record-panel][hidden] {
  display: none !important;
}

.admin-body .task-record-section h3 {
  margin: 0;
}

.admin-body .task-history-heading {
  padding: 10px 12px 4px;
  color: #172033;
  font-size: 13px;
  font-weight: 900;
  border-top: 1px solid #e7edf5;
}

.admin-body .task-detail-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

.admin-body .task-detail-toolbar button {
  min-height: 32px;
  padding: 0 10px;
  color: var(--blue);
  background: #f3f7ff;
  border: 1px solid #d7e5fb;
  border-radius: 6px;
  font-weight: 900;
  cursor: pointer;
}

.admin-body .task-detail-toolbar button:last-child {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(135deg, var(--blue), var(--teal));
}

.admin-body .promotion-submission-item > button {
  width: max-content;
  min-height: 30px;
  padding: 0 10px;
  color: #fff;
  background: linear-gradient(135deg, var(--blue), var(--teal));
  border: 0;
  border-radius: 6px;
  font-weight: 900;
  cursor: pointer;
}

.admin-body .task-manual-review-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(120px, 1fr)) auto;
  gap: 8px;
  align-items: end;
  margin-top: 10px;
  padding: 10px;
  background: #f8fbff;
  border: 1px solid #dfe8f3;
  border-radius: 8px;
}

.admin-body .task-manual-review-form label {
  display: grid;
  gap: 4px;
  color: #42526a;
  font-size: 12px;
  font-weight: 800;
}

.admin-body .task-manual-review-form input {
  min-height: 32px;
  padding: 0 9px;
  color: #172033;
  background: #fff;
  border: 1px solid #d7e1ee;
  border-radius: 6px;
}

.admin-body .task-manual-review-form button {
  min-height: 32px;
  padding: 0 10px;
  color: #fff;
  background: linear-gradient(135deg, var(--teal), var(--blue));
  border: 0;
  border-radius: 6px;
  font-weight: 900;
  cursor: pointer;
}

.admin-body .record-actions {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  gap: 6px;
}

.admin-body .record-actions button {
  min-height: 28px;
  padding: 0 7px;
  color: var(--blue);
  background: #f3f7ff;
  border: 1px solid #d7e5fb;
  border-radius: 5px;
  font-size: 12px;
  cursor: pointer;
  font-weight: 900;
}

.admin-body .record-actions button:hover {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(135deg, var(--blue), var(--teal));
}

.admin-body .user-list-item {
  grid-template-columns: minmax(0, 1fr) auto;
}

.admin-body .user-list-item .record-actions {
  position: static;
  grid-column: 2;
  justify-content: flex-end;
}

.admin-body .record-actions button.danger {
  color: #b42318;
  background: #fff5f5;
  border-color: #ffd1d1;
}

.admin-body .record-actions button.danger:hover {
  color: #fff;
  background: #d92d20;
}

.course-settings-body {
  background: linear-gradient(135deg, #edf5ff 0%, #f7fbff 42%, #eef9f8 100%);
}

.course-settings-page {
  max-width: 1180px;
  margin: 0 auto;
  padding: 42px 24px 70px;
}

.course-settings-hero,
.course-settings-shell,
.course-settings-card {
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid #dce8f6;
  border-radius: 8px;
  box-shadow: 0 18px 42px rgba(27, 42, 78, 0.08);
}

.course-settings-hero {
  padding: 34px;
}

.course-settings-hero h1 {
  margin: 8px 0 14px;
  color: #172033;
  font-size: clamp(32px, 5vw, 48px);
  line-height: 1.08;
}

.course-settings-hero p:not(.eyebrow),
.course-settings-tip {
  max-width: 820px;
  color: #637089;
  line-height: 1.8;
}

.course-settings-shell {
  display: grid;
  gap: 16px;
  margin-top: 18px;
  padding: 16px;
}

.course-stage-tabs {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  padding: 8px;
  background: #eef6ff;
  border: 1px solid #d8e6f7;
  border-radius: 8px;
}

.course-stage-tabs button {
  min-height: 66px;
  color: #314057;
  background: #fff;
  border: 1px solid #d6e3f4;
  border-radius: 7px;
  cursor: pointer;
  font-weight: 900;
}

.course-stage-tabs button.active {
  color: #fff;
  background: linear-gradient(135deg, #206bd8, #16a39c);
  border-color: transparent;
}

.course-stage-tabs strong,
.course-stage-tabs span {
  display: block;
}

.course-stage-tabs span {
  margin-top: 4px;
  font-size: 13px;
}

.course-settings-layout {
  display: grid;
  grid-template-columns: minmax(320px, 0.9fr) minmax(420px, 1.1fr);
  gap: 16px;
  align-items: start;
}

.course-settings-card {
  padding: 22px;
}

.course-settings-card h2 {
  margin: 0 0 14px;
  color: #172033;
  font-size: 22px;
}

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

.course-lesson-head h2 {
  margin: 0;
}

.course-lesson-head button {
  min-height: 36px;
  padding: 0 14px;
  color: #b42318;
  background: #fff5f5;
  border: 1px solid #ffd1d1;
  border-radius: 7px;
  cursor: pointer;
  font-weight: 900;
}

.course-lesson-head button:hover {
  color: #fff;
  background: #d92d20;
}

.course-bulk-import {
  display: grid;
  gap: 12px;
  margin-bottom: 18px;
  padding: 16px;
  background: #f8fbff;
  border: 1px dashed #bfd3ec;
  border-radius: 8px;
}

.course-bulk-import h3 {
  margin: 0;
  color: #172033;
  font-size: 17px;
}

.course-bulk-import p {
  margin: 0;
  color: #637089;
  line-height: 1.7;
  font-size: 13px;
}

.course-bulk-import label {
  display: grid;
  gap: 7px;
  color: #314057;
  font-weight: 900;
}

.course-bulk-import input,
.course-bulk-import textarea {
  width: 100%;
  padding: 11px 12px;
  color: #172033;
  background: #fff;
  border: 1px solid #cedbea;
  border-radius: 7px;
  font: inherit;
}

.course-import-status {
  min-height: 20px;
  color: #1f6bd8 !important;
  font-weight: 900;
}

.course-lesson-form {
  display: grid;
  gap: 12px;
}

.course-lesson-form label {
  display: grid;
  gap: 7px;
  color: #314057;
  font-weight: 900;
}

.course-lesson-form input,
.course-lesson-form textarea {
  width: 100%;
  min-height: 42px;
  padding: 11px 12px;
  color: #172033;
  background: #f8fbff;
  border: 1px solid #cedbea;
  border-radius: 7px;
  font: inherit;
}

.course-lesson-form textarea {
  resize: vertical;
}

.course-lesson-form .course-attachment-field {
  padding: 12px;
  background: #f8fbff;
  border: 1px solid #dce8f6;
  border-radius: 8px;
}

.course-lesson-form .course-attachment-field input {
  background: #fff;
}

.course-lesson-form .course-attachment-field span {
  color: #637089;
  font-size: 12px;
  font-weight: 800;
}

.course-form-actions {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
}

.course-form-actions button,
.course-lesson-actions button {
  min-height: 42px;
  padding: 0 16px;
  color: #fff;
  background: linear-gradient(135deg, #206bd8, #16a39c);
  border: 0;
  border-radius: 7px;
  cursor: pointer;
  font-weight: 900;
}

.course-form-actions button.ghost {
  color: #1f6bd8;
  background: #f4f8ff;
  border: 1px solid #cfe0f4;
}

.course-lesson-list {
  display: grid;
  gap: 12px;
}

.course-lesson-item,
.course-lesson-empty {
  display: grid;
  gap: 12px;
  padding: 16px;
  background: #f8fbff;
  border: 1px solid #dce8f6;
  border-radius: 8px;
}

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

.course-lesson-item-heading-copy {
  min-width: 0;
}

.course-lesson-item span {
  color: #1f6bd8;
  font-size: 13px;
  font-weight: 900;
}

.course-lesson-item strong,
.course-lesson-empty strong {
  display: block;
  margin-top: 4px;
  color: #172033;
  font-size: 18px;
}

.course-lesson-item p,
.course-lesson-empty p {
  margin: 0;
  color: #637089;
  line-height: 1.7;
}

.course-lesson-item details {
  padding-top: 10px;
  border-top: 1px solid #e3ecf7;
}

.course-lesson-item summary {
  color: #1f6bd8;
  cursor: pointer;
  font-weight: 900;
}

.course-lesson-attachment {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.course-lesson-attachment button {
  min-height: 32px;
  padding: 0 12px;
  color: #1f6bd8;
  background: #eef6ff;
  border: 1px solid #cfe0f4;
  border-radius: 7px;
  cursor: pointer;
  font-weight: 900;
}

.course-lesson-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  align-self: center;
}

.course-lesson-actions button.danger {
  color: #b42318;
  background: #fff5f5;
  border: 1px solid #ffd1d1;
}

.teacher-template-hint {
  color: #637089;
  font-size: 12px;
  font-weight: 700;
}

.teacher-direct-template-field {
  align-self: start;
}

.teacher-direct-template-preview {
  display: grid;
  gap: 6px;
  padding: 13px 14px;
  border: 1px solid #9cc8f4;
  border-left: 4px solid #2474d2;
  border-radius: 8px;
  background: linear-gradient(135deg, #f4f9ff, #f1fbf9);
}

.teacher-direct-template-preview[hidden] {
  display: none;
}

.teacher-direct-template-preview strong,
.teacher-direct-template-preview span,
.teacher-direct-template-preview small {
  display: block;
}

.teacher-direct-template-preview strong {
  color: #17233b;
  font-size: 16px;
}

.teacher-direct-template-preview span {
  color: #147f78;
  font-size: 13px;
  font-weight: 900;
}

.course-lesson-attachment-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.course-lesson-attachment-item button.danger {
  color: #df3b45;
  background: #fff5f5;
  border-color: #ffc7cb;
}

.teacher-direct-template-preview p,
.teacher-direct-template-preview small {
  margin: 0;
  color: #52657d;
  line-height: 1.65;
}

.teacher-direct-template-actions {
  display: grid;
  grid-template-columns: minmax(180px, 260px) minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid #d7e5f3;
  border-radius: 8px;
  background: #f8fbff;
}

.work-form .teacher-direct-template-actions button {
  grid-column: auto;
  width: 100%;
  cursor: pointer;
}

.teacher-direct-template-actions small {
  color: #607089;
  line-height: 1.6;
}

@media (max-width: 760px) {
  .teacher-direct-template-actions {
    grid-template-columns: minmax(0, 1fr);
  }
}

.admin-body .assigned-role-item {
  border-radius: 6px;
}

.admin-body .role-form input,
.admin-body .role-form select,
.admin-body .role-form textarea {
  min-height: 38px;
  border-radius: 5px;
}

.admin-body .role-form button,
.admin-body .role-tabs button,
.admin-body .role-ghost-button {
  border-radius: 5px;
}

@media (max-width: 1100px) {
  .admin-body .course-setting-links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .course-stage-tabs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .course-settings-layout {
    grid-template-columns: 1fr;
  }

  .admin-body .site-header {
    left: 0;
  }

  .admin-body main {
    margin-left: 0;
  }

  .admin-body .role-layout,
  .admin-body .user-management-layout,
  .admin-body .message-publish-grid,
  .admin-body .message-manage-grid,
  .admin-body .command-shell {
    grid-template-columns: 1fr;
  }

  .admin-body .service-management-tabs {
    grid-template-columns: 1fr;
  }

  .admin-body .service-phone-create-card,
  .admin-body .service-flash-card,
  .admin-body .flash-list-card,
  .admin-body .service-phone-list-card,
  .admin-body .public-account-admin-card,
  .admin-body .public-account-preview-card {
    grid-column: auto;
    grid-row: auto;
  }

  .admin-body .role-auth-panel,
  .admin-body .role-auth-panel .auth-form.active,
  .admin-body .role-auth-panel .auth-form[data-auth-panel="register"].active {
    grid-template-columns: 1fr;
  }

  .admin-body .role-auth-panel,
  .admin-body .assigned-role-panel {
    position: static;
  }

  .admin-body .user-edit-card,
  .admin-body .user-list-panel,
  .admin-body .external-account-panel,
  .admin-body .user-management-main {
    grid-column: auto;
    grid-row: auto;
  }

  .admin-body .user-management-main {
    grid-template-columns: 1fr;
  }

  .admin-body .message-audience-row {
    grid-template-columns: 1fr;
    align-items: start;
  }
}

@media (max-width: 760px) {
  .admin-body .task-manage-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-body .task-manage-tabs:has(> button.role-hidden) {
    grid-template-columns: minmax(0, 1fr);
  }

  .admin-body .course-setting-links,
  .course-stage-tabs {
    grid-template-columns: 1fr;
  }

  .course-settings-page {
    padding: 22px 14px 48px;
  }

  .course-lesson-item-head {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  .course-lesson-actions {
    justify-content: flex-start;
  }

  .admin-body .site-header {
    min-height: auto;
    padding: 10px 14px;
  }

  .admin-body main {
    padding-top: 108px;
  }

  .admin-body .section-heading {
    grid-template-columns: 1fr;
  }

  .admin-body .section-heading p:last-child {
    grid-column: 1;
    grid-row: auto;
    justify-self: start;
    text-align: left;
  }

  .admin-body .role-summary,
  .admin-body .stats-grid,
  .admin-body .overview-grid {
    grid-template-columns: 1fr;
  }

  .admin-body .command-menu {
    grid-template-columns: 1fr;
  }
}

/* Classroom four-section workspace */
.classroom-board-tabs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 8px;
  margin-bottom: 18px;
  padding: 8px;
  background: #edf4fb;
  border: 1px solid #dce7f3;
  border-radius: 8px;
}

.classroom-board-tabs button {
  min-width: 0;
  min-height: 44px;
  padding: 0 8px;
  color: #43526a;
  background: #fff;
  border: 1px solid #dbe6f2;
  border-radius: 7px;
  font-size: 15px;
  font-weight: 900;
}

.classroom-board-tabs button.active {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(135deg, var(--blue), var(--teal));
}

.classroom-board-tabs button em,
.support-rule-grid article em,
.support-rule-grid .support-task-entry em {
  display: inline-grid;
  min-width: 18px;
  height: 18px;
  margin-left: 6px;
  place-items: center;
  color: #fff;
  background: #e53935;
  border-radius: 999px;
  font-style: normal;
  font-size: 12px;
  font-weight: 900;
}

.classroom-board-panel,
.classroom-extra-panel,
.classroom-extra-list {
  display: grid;
  gap: 18px;
}

.classroom-extra-panel {
  padding: 22px;
  background: #fff;
  border: 1px solid #dfe8f3;
  border-radius: 8px;
  box-shadow: 0 14px 34px rgba(21, 32, 51, 0.06);
}

.classroom-extra-head {
  display: grid;
  gap: 8px;
  padding-bottom: 16px;
  border-bottom: 1px solid #e7edf5;
}

.classroom-extra-head span {
  color: var(--teal);
  font-weight: 900;
}

.classroom-extra-head h2,
.classroom-extra-head p {
  margin: 0;
}

.classroom-extra-head p {
  color: var(--muted);
}

.talent-recruitment-panel {
  gap: 12px;
  padding-block: 18px;
}

.talent-recruitment-panel .classroom-extra-head {
  gap: 5px;
  padding-bottom: 12px;
}

.talent-recruitment-panel .classroom-extra-head span {
  font-size: 13px;
}

.talent-recruitment-panel .classroom-extra-head h2 {
  font-size: 30px;
  line-height: 1.2;
}

.talent-recruitment-panel .classroom-extra-head p {
  font-size: 14px;
  line-height: 1.55;
}

.talent-recruitment-panel .talent-job-list .classroom-empty {
  min-height: 96px;
  align-content: center;
  gap: 5px;
  padding: 16px 20px;
  box-shadow: none;
}

.talent-recruitment-panel .talent-job-list .classroom-empty h2 {
  margin: 0;
  font-size: 23px;
  line-height: 1.25;
}

.talent-recruitment-panel .talent-job-list .classroom-empty p {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
}

.career-sub-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 8px;
  background: #eef5fb;
  border: 1px solid #dce8f4;
  border-radius: 8px;
}

.career-sub-tabs button {
  min-height: 42px;
  color: #344054;
  background: #fff;
  border: 1px solid #d8e3ef;
  border-radius: 7px;
  font-weight: 900;
}

.career-sub-tabs button.active {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(135deg, var(--blue), var(--teal));
}

.talent-job-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  background: #f6fbff;
  border: 1px solid #dfe8f3;
  border-radius: 8px;
}

.talent-job-summary span,
.talent-job-row small {
  color: var(--muted);
}

.talent-filter-form {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) auto auto;
  gap: 10px;
  align-items: end;
}

.talent-filter-form label {
  display: grid;
  gap: 6px;
  color: #43526a;
  font-weight: 900;
}

.talent-filter-form input,
.talent-filter-form select {
  width: 100%;
  min-height: 40px;
  padding: 9px 11px;
  border: 1px solid #dbe6f2;
  border-radius: 7px;
  font: inherit;
}

.talent-filter-form button {
  min-height: 40px;
  padding: 0 14px;
  color: #155bd4;
  background: #fff;
  border: 1px solid #cfe0f3;
  border-radius: 7px;
  font-weight: 900;
}

.talent-job-list {
  display: grid;
  gap: 10px;
  max-height: 520px;
  overflow-x: hidden;
  overflow-y: auto;
  padding-right: 8px;
  scrollbar-color: #b8c9dc #f3f7fb;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
}

.talent-job-table-head {
  display: grid;
  grid-template-columns: minmax(150px, 1.2fr) minmax(140px, 1fr) 100px 100px 100px minmax(145px, 1fr) 88px;
  gap: 12px;
  align-items: center;
  padding: 11px 14px;
  color: #30445f;
  border: 1px solid #d9e5f2;
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  background: #f3f7fc;
  font-size: 13px;
  font-weight: 900;
}

.public-job-list {
  display: grid;
  gap: 12px;
  max-height: 520px;
  overflow-x: hidden;
  overflow-y: auto;
  padding-right: 8px;
  scrollbar-color: #b8c9dc #f3f7fb;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
}

.talent-job-row {
  display: grid;
  gap: 12px;
  padding: 14px;
  background: #f9fcff;
  border: 1px solid #dfe8f3;
  border-radius: 8px;
}

.talent-job-row.active {
  background: #fff;
  border-color: rgba(31, 98, 210, 0.32);
  box-shadow: 0 16px 36px rgba(37, 99, 217, 0.08);
}

.talent-job-main {
  display: grid;
  grid-template-columns: minmax(150px, 1.2fr) minmax(140px, 1fr) 100px 100px 100px minmax(145px, 1fr) 88px;
  gap: 12px;
  align-items: center;
  width: 100%;
  padding: 0;
  color: inherit;
  text-align: left;
  background: transparent;
  border: 0;
  cursor: pointer;
  font: inherit;
}

.talent-job-row .talent-job-main > span,
.talent-job-row .talent-job-main > small {
  color: #101828;
  font-weight: 800;
}

.talent-job-main em {
  color: var(--blue);
  font-size: 13px;
  font-style: normal;
  font-weight: 900;
  text-align: center;
}

.talent-job-main:hover strong {
  color: var(--blue);
}

.talent-job-detail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.8fr);
  gap: 14px;
  padding-top: 12px;
  border-top: 1px solid #e5edf7;
}

.talent-apply-panel {
  display: grid;
  gap: 8px;
  padding: 12px;
  background: #f4f9ff;
  border: 1px solid #d8e6f5;
  border-radius: 8px;
}

.talent-apply-panel small {
  color: var(--muted);
  line-height: 1.6;
}

.talent-apply-panel button {
  min-height: 38px;
  color: #fff;
  background: linear-gradient(135deg, var(--blue), var(--teal));
  border: 0;
  border-radius: 7px;
  cursor: pointer;
  font-weight: 900;
}

.talent-apply-panel button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.public-job-row {
  display: grid;
  gap: 10px;
  padding: 16px;
  background: #f9fcff;
  border: 1px solid #dfe8f3;
  border-radius: 8px;
}

.talent-job-row strong,
.talent-job-row span,
.public-job-row strong,
.public-job-row span {
  display: block;
}

.talent-job-row span,
.talent-job-row p,
.public-job-row span,
.public-job-row p,
.public-job-row small {
  color: #5d6b82;
}

.public-job-row strong {
  color: #172033;
  font-size: 18px;
}

.talent-job-row p,
.public-job-row p {
  margin: 0;
  line-height: 1.7;
}

@media (max-width: 760px) {
  .career-sub-tabs,
  .talent-filter-form,
  .talent-job-main,
  .talent-job-detail,
  .talent-job-row {
    grid-template-columns: 1fr;
  }

  .talent-job-summary {
    align-items: flex-start;
    flex-direction: column;
  }

  .talent-job-table-head {
    display: none;
  }

  .talent-job-main span,
  .talent-job-main small,
  .talent-job-main em {
    text-align: left;
  }
}

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

.career-resume-form label {
  display: grid;
  gap: 6px;
  color: #43526a;
  font-weight: 900;
}

.career-resume-form [data-internship-only][hidden] {
  display: none !important;
}

.career-resume-form label:nth-child(5),
.career-resume-form button {
  grid-column: 1 / -1;
}

.career-resume-form input,
.career-resume-form select,
.career-resume-form textarea {
  width: 100%;
  min-height: 42px;
  padding: 10px 12px;
  border: 1px solid #dbe6f2;
  border-radius: 7px;
  font: inherit;
}

.career-resume-form button,
.talent-resume-list button,
.classroom-extra-list article button {
  min-height: 42px;
  color: #fff;
  background: linear-gradient(135deg, var(--blue), var(--teal));
  border-radius: 7px;
  font-weight: 900;
}

.innovation-category-dropdown {
  position: relative;
  width: 100%;
  font-weight: 400;
}

.career-resume-form .innovation-category-dropdown-trigger {
  position: relative;
  display: flex;
  width: 100%;
  min-height: 42px;
  align-items: center;
  justify-content: space-between;
  padding: 10px 38px 10px 12px;
  color: #172033;
  border: 1px solid #dbe6f2;
  border-radius: 7px;
  background: #fff;
  box-shadow: none;
  text-align: left;
  font-weight: 800;
}

.career-resume-form .innovation-category-dropdown-trigger::after {
  position: absolute;
  right: 13px;
  content: "⌄";
  color: #172033;
  font-size: 18px;
  line-height: 1;
  transition: transform 0.18s ease;
}

.career-resume-form .innovation-category-dropdown-trigger[aria-expanded="true"]::after {
  transform: rotate(180deg);
}

.innovation-category-dropdown-menu {
  position: absolute;
  z-index: 45;
  top: calc(100% + 4px);
  right: 0;
  left: 0;
  max-height: 260px;
  padding: 5px;
  overflow-y: auto;
  border: 1px solid #9bb7dc;
  border-radius: 7px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(26, 50, 82, 0.18);
}

.innovation-category-dropdown-menu[hidden] {
  display: none !important;
}

.career-resume-form .innovation-category-dropdown-menu > button {
  display: block;
  width: 100%;
  min-height: 38px;
  padding: 8px 10px;
  color: #172033;
  border: 0;
  border-radius: 5px;
  background: transparent;
  box-shadow: none;
  text-align: left;
  font-weight: 700;
}

.career-resume-form .innovation-category-dropdown-menu > button:hover,
.career-resume-form .innovation-category-dropdown-menu > button[aria-selected="true"] {
  color: #fff;
  background: linear-gradient(135deg, var(--blue), var(--teal));
}

/* Job-category browser: always opens below the field and stays open while options are reviewed. */
.career-job-category-dropdown {
  z-index: 48;
}

.career-job-category-dropdown-menu {
  top: calc(100% + 6px);
  right: 0;
  bottom: auto;
  left: 0;
  max-height: min(360px, 46vh);
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.career-resume-form .career-job-category-dropdown-menu > button {
  min-height: 36px;
  padding: 7px 11px;
}

.structured-form {
  align-items: start;
}

.structured-form .form-module {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-column: 1 / -1;
  gap: 12px;
  margin: 0;
  padding: 14px;
  border: 1px solid #dfe8f3;
  border-radius: 8px;
  background: #fbfdff;
}

.structured-form .form-module legend {
  padding: 0 6px;
  color: #172033;
  font-weight: 900;
}

.structured-form .major-profile-module legend {
  margin-left: -6px;
  padding-left: 10px;
  color: #586cff;
  border-left: 3px solid #586cff;
}

.structured-form .major-profile-module label em {
  color: #d92d20;
  font-style: normal;
}

.structured-form .major-profile-module > .major-profile-date-field {
  grid-column: auto;
}

.structured-form .form-module label,
.structured-form .form-radio-group {
  min-width: 0;
}

.structured-form .form-module label:has(textarea),
.structured-form .internship-range-field,
.structured-form .form-module .wide,
.structured-form .major-profile-module .wide,
.structured-form .dynamic-module,
.structured-form .readonly-module label:has(textarea) {
  grid-column: 1 / -1;
}

.internship-range-field > span {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.internship-range-field b {
  color: #43526a;
  font-weight: 900;
}

.internship-range-field small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.structured-form .highlight-module,
.structured-form .readonly-module {
  background: #f5fbfb;
  border-color: #9bd6d2;
}

.structured-form .platform-major-module,
.structured-form .platform-evaluation-module {
  background: #f4fbfb;
  border-color: #8fd5d2;
}

.structured-form .platform-major-module input[readonly],
.structured-form .platform-evaluation-module input[readonly],
.structured-form .platform-evaluation-module textarea[readonly] {
  color: #172033;
  background: #fff;
  font-weight: 900;
}

.platform-record-list-wrap {
  display: grid;
  gap: 8px;
}

.platform-learning-records {
  display: grid;
  gap: 8px;
}

.platform-learning-records article {
  display: grid;
  gap: 5px;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid #dbe6f2;
  border-radius: 7px;
}

.platform-learning-records strong {
  color: #172033;
}

.platform-learning-records span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.platform-learning-records p {
  margin: 0;
  color: #526176;
  line-height: 1.6;
}

.structured-form .dynamic-module > div {
  display: grid;
  grid-column: 1 / -1;
  gap: 10px;
}

.structured-form .dynamic-module label {
  position: relative;
}

.structured-form [data-remove-dynamic] {
  justify-self: start;
  min-height: 34px;
  padding: 0 12px;
  color: #43526a;
  background: #eef4fb;
  border: 1px solid #dbe6f2;
}

.professional-experience-module > .professional-experience-hint,
.professional-experience-module > .professional-experience-list,
.professional-experience-module > .professional-experience-add {
  grid-column: 1 / -1;
}

.professional-experience-hint {
  margin: -2px 0 2px;
  color: #738196;
  font-size: 13px;
  line-height: 1.55;
}

.professional-experience-list {
  display: grid;
  gap: 12px;
}

.professional-experience-card {
  display: grid;
  gap: 11px;
  padding: 13px;
  border: 1px solid #dce6f1;
  border-radius: 9px;
  background: linear-gradient(180deg, #ffffff, #fbfdff);
}

.professional-experience-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid #edf2f7;
}

.professional-experience-card-head strong {
  color: #31465f;
  font-size: 14px;
}

.career-resume-form .professional-experience-delete,
.career-resume-form .professional-experience-detail-delete {
  grid-column: auto;
  width: fit-content;
  min-height: 30px;
  padding: 4px 10px;
  color: #9b5151;
  border: 1px solid #edd4d4;
  border-radius: 6px;
  background: #fffafa;
  box-shadow: none;
  font-size: 12px;
  font-weight: 700;
}

.professional-experience-summary-grid {
  display: grid;
  grid-template-columns: minmax(310px, 1.25fr) minmax(190px, 1fr) minmax(150px, .8fr);
  gap: 10px;
  align-items: start;
}

.professional-experience-period {
  display: grid;
  gap: 6px;
  min-width: 0;
  color: #43526a;
  font-weight: 900;
}

.professional-experience-field-label {
  display: block;
}

.professional-experience-period > span:not(.professional-experience-field-label) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 7px;
  align-items: center;
}

.professional-experience-period b {
  color: #7a8798;
  font-size: 12px;
  text-align: center;
}

.career-resume-form .professional-experience-current {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 6px;
  color: #607089;
  font-size: 12px;
  font-weight: 700;
}

.career-resume-form .professional-experience-current input {
  width: 15px;
  min-height: 15px;
  margin: 0;
  padding: 0;
}

.professional-experience-detail-list {
  display: grid;
  gap: 8px;
}

.professional-experience-detail-list > label {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: start;
}

.professional-experience-detail-list > label > span {
  padding-top: 10px;
  color: #607089;
  font-size: 13px;
  font-weight: 700;
}

.career-resume-form .professional-experience-detail-list textarea {
  min-height: 76px;
  border-color: #d9e4ef;
  background: #fff;
  line-height: 1.6;
}

.career-resume-form .professional-experience-detail-delete {
  margin-top: 7px;
}

.career-resume-form .professional-experience-detail-add,
.career-resume-form .professional-experience-add {
  width: fit-content;
  min-height: 36px;
  padding: 7px 13px;
  color: #28687c;
  border: 1px solid #c7e2e3;
  border-radius: 7px;
  background: #f3fafa;
  box-shadow: none;
  font-size: 13px;
  font-weight: 800;
}

.career-resume-form .professional-experience-add {
  min-height: 40px;
  color: #fff;
  border-color: transparent;
  background: linear-gradient(135deg, #2b72d4, #20a29c);
}

.professional-experience-preview-list {
  display: grid;
  gap: 8px;
  margin-top: 7px;
}

.professional-experience-preview-list article {
  display: grid;
  gap: 7px;
  padding: 10px 11px;
  border: 1px solid #dce6ef;
  border-radius: 7px;
  background: #fbfdff;
}

.professional-experience-preview-list article header {
  display: grid;
  grid-template-columns: minmax(150px, .9fr) minmax(170px, 1.2fr) minmax(120px, .8fr);
  gap: 8px;
  align-items: center;
}

.professional-experience-preview-list article header span,
.professional-experience-preview-list article header em {
  color: #607089;
  font-size: 12px;
  font-style: normal;
}

.professional-experience-preview-list article header strong {
  color: #263f56;
  font-size: 13px;
}

.professional-experience-preview-list article div {
  display: grid;
  gap: 5px;
}

.professional-experience-preview-list article div p {
  margin: 0;
  padding: 6px 8px;
  color: #445a70;
  border-left: 2px solid #c8dded;
  background: #fff;
  line-height: 1.55;
  white-space: pre-wrap;
}

@media (max-width: 820px) {
  .professional-experience-summary-grid,
  .professional-experience-preview-list article header {
    grid-template-columns: 1fr;
  }

  .professional-experience-detail-list > label {
    grid-template-columns: 1fr;
  }

  .professional-experience-detail-list > label > span {
    padding-top: 0;
  }

  .career-resume-form .professional-experience-detail-delete {
    margin-top: 0;
  }
}

.structured-form .form-radio-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  color: #43526a;
  font-weight: 900;
}

.structured-form .form-radio-group label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.structured-form .form-radio-group input {
  width: auto;
  min-height: 0;
}

.resume-live-preview {
  display: grid;
  gap: 10px;
  padding: 14px 16px;
  border: 1px solid #d7e4f2;
  border-radius: 8px;
  background: #f8fbff;
}

.resume-live-preview summary {
  cursor: pointer;
  font-size: 20px;
  font-weight: 800;
  color: #122033;
  list-style-position: inside;
}

.resume-live-preview summary::marker {
  color: #256bd6;
}

.resume-live-preview h3 {
  margin: 0;
}

.resume-preview-card,
.recruiter-detail-card {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid #dfe8f3;
  border-radius: 8px;
  background: #fff;
}

.resume-preview-head,
.recruiter-detail-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: start;
  padding-bottom: 12px;
  border-bottom: 1px solid #e7edf5;
}

.resume-preview-head strong,
.recruiter-detail-head strong {
  color: #172033;
}

.resume-preview-head p,
.resume-preview-contact span,
.resume-meta-row span,
.recruiter-detail-head span,
.recruiter-contact-grid span {
  margin: 0;
  color: #5d6b80;
  font-size: 13px;
}

.resume-preview-contact,
.resume-meta-row,
.recruiter-contact-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
}

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

.resume-highlight-grid section,
.resume-section-list section {
  display: grid;
  gap: 6px;
  padding: 12px;
  background: #f8fbff;
  border: 1px solid #dfe8f3;
  border-radius: 8px;
}

.resume-highlight-grid .is-accent {
  background: #f2fbfa;
  border-color: #8bd4cd;
}

.resume-highlight-grid b,
.resume-section-list b {
  color: #172033;
}

.resume-highlight-grid p,
.resume-highlight-grid small,
.resume-section-list p {
  margin: 0;
  color: #5d6b80;
  line-height: 1.55;
}

.resume-section-list {
  display: grid;
  gap: 10px;
}

.innovation-live-preview {
  margin-top: 0;
}

.innovation-preview-card .resume-preview-head {
  align-items: start;
}

.innovation-preview-meta {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.innovation-preview-sections {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.innovation-preview-sections section:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

.innovation-preview-sections p {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.classroom-extra-list article,
.support-rule-grid article,
.support-rule-grid .support-task-entry,
.support-task-list article,
.support-record-list article,
.senior-help-band {
  display: grid;
  gap: 8px;
  padding: 16px;
  background: #f8fbff;
  border: 1px solid #dfe8f3;
  border-radius: 8px;
}

.support-rule-grid .support-task-entry {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.support-rule-grid .support-task-entry:hover {
  transform: translateY(-2px);
  border-color: #8bb8ff;
  box-shadow: 0 12px 28px rgba(37, 99, 217, 0.12);
}

.support-rule-grid .support-task-entry.is-locked {
  cursor: not-allowed;
  background: #f4f6f9;
  border-style: dashed;
  opacity: 0.78;
}

.support-rule-grid .support-task-entry.is-locked:hover {
  transform: none;
  border-color: #d8e0eb;
  box-shadow: none;
}

.classroom-extra-list article strong,
.support-task-list article strong,
.support-record-list article strong,
.support-rule-grid article b,
.support-rule-grid .support-task-entry b {
  color: #172033;
}

.classroom-extra-list article span,
.classroom-extra-list article p,
.support-task-list article span,
.support-task-list article p,
.support-record-list article span,
.support-record-list article p,
.support-rule-grid article p,
.support-rule-grid .support-task-entry p,
.senior-help-band p,
.senior-help-band li {
  margin: 0;
  color: #5d6b80;
}

.support-task-list article > button {
  width: fit-content;
  min-height: 38px;
  padding: 8px 14px;
  color: #fff;
  background: linear-gradient(135deg, var(--blue), var(--teal));
  border: 0;
  border-radius: 8px;
  font-weight: 800;
  cursor: pointer;
}

.support-task-list article > button:disabled {
  color: #6b7483;
  background: #edf2f7;
  cursor: not-allowed;
}

.senior-task-card {
  gap: 12px;
}

.senior-task-card.is-expired {
  border-color: #f0c9c9;
  background: #fffafa;
}

.senior-task-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.senior-task-state {
  flex: 0 0 auto;
  padding: 3px 9px;
  color: #176b63;
  background: #e8f7f4;
  border-radius: 999px;
  font-size: 13px;
}

.senior-task-card.is-expired .senior-task-state {
  color: #b14646;
  background: #fff0f0;
}

.senior-task-details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

.senior-task-details > div {
  display: grid;
  gap: 3px;
  padding: 9px 10px;
  background: #fff;
  border: 1px solid #e3ebf6;
  border-radius: 6px;
}

.leaderboard-flash-carousel.is-default {
  aspect-ratio: 16 / 9;
}

.senior-task-details dt {
  color: #60728d;
  font-size: 13px;
}

.senior-task-details dd {
  margin: 0;
  color: #1e2b3e;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.senior-task-details .senior-task-detail-wide {
  grid-column: 1 / -1;
}

.senior-task-details .senior-task-deadline {
  border-color: #efb7b7;
  background: #fff6f6;
}

.senior-task-deadline dt,
.senior-task-deadline dd {
  color: #b14646;
  font-weight: 900;
}

.senior-task-submit-tip,
.senior-task-expired-tip {
  padding: 9px 10px;
  background: #f2f8ff;
  border-left: 3px solid #69a8ee;
  border-radius: 4px;
}

.senior-task-expired-tip {
  color: #b14646 !important;
  background: #fff3f3;
  border-left-color: #e28080;
}

.senior-proof-form .senior-proof-file-field {
  grid-column: span 2;
}

.senior-personal-history {
  display: grid;
  gap: 14px;
}

.senior-history-section {
  display: grid;
  gap: 10px;
  padding: 14px;
  background: #f8fbff;
  border: 1px solid #dfe8f3;
  border-radius: 8px;
}

.senior-history-section-head,
.senior-history-month summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.senior-history-section-head h4 {
  margin: 0;
  color: #172033;
  font-size: 17px;
}

.senior-history-section-head span,
.senior-history-month summary span {
  color: #2377ca;
  font-size: 13px;
  font-weight: 800;
}

.senior-history-month {
  overflow: hidden;
  border: 1px solid #dbe6f2;
  border-radius: 7px;
}

.senior-history-month + .senior-history-month {
  margin-top: 10px;
}

.senior-history-month summary {
  padding: 11px 12px;
  color: #172033;
  background: #fff;
  cursor: pointer;
  font-weight: 900;
}

.senior-history-table-scroll {
  overflow: auto;
  border-top: 1px solid #e3ebf6;
}

.senior-history-table {
  width: 100%;
  min-width: 930px;
  border-collapse: collapse;
  font-size: 13px;
}

.senior-history-table th,
.senior-history-table td {
  padding: 10px;
  border-bottom: 1px solid #e8eef6;
  text-align: left;
  vertical-align: top;
}

.senior-history-table th {
  color: #35516f;
  background: #f0f6ff;
  white-space: nowrap;
}

.senior-record-status {
  display: inline-block;
  padding: 3px 8px;
  color: #5d6b80;
  background: #edf2f7;
  border-radius: 999px;
  white-space: nowrap;
}

.senior-record-status.is-approved {
  color: #187457;
  background: #e5f7ee;
}

.senior-record-status.is-rejected {
  color: #b14646;
  background: #fff0f0;
}

.task-audit-panel,
.task-audit-content,
.task-audit-section {
  display: grid;
  gap: 14px;
}

.task-audit-heading h3,
.task-audit-section-head h4 {
  margin: 0;
  color: #172033;
}

.task-audit-heading p,
.task-audit-empty-copy {
  margin: 0;
  color: #5d6b80;
}

.classroom-extra-list article:has(.published-resume-actions) {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.published-resume-content {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.published-resume-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.published-resume-actions button,
.classroom-extra-list article .published-resume-actions button {
  min-height: 34px;
  padding: 6px 12px;
}

.published-resume-actions .danger {
  color: #d92d20;
  border: 1px solid #f3aaa4;
  background: #fff7f6;
}

@media (max-width: 720px) {
  .classroom-extra-list article:has(.published-resume-actions) {
    grid-template-columns: 1fr;
  }

  .published-resume-actions {
    justify-content: flex-start;
  }
}

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

.task-audit-tabs button {
  min-height: 42px;
  color: #1558b0;
  background: #f4f8ff;
  border: 1px solid #b9d0fb;
  border-radius: 7px;
  font: inherit;
  font-weight: 900;
  cursor: pointer;
}

.task-audit-tabs button.active {
  color: #fff;
  background: linear-gradient(135deg, var(--teal), var(--blue));
  border-color: transparent;
}

.task-audit-section {
  position: relative;
  overflow: hidden;
  padding: 14px;
  background: #f8fbff;
  border: 1px solid #dfe8f3;
  border-radius: 8px;
}

.task-audit-section.is-current {
  border-top-color: #ff6f61;
}

.task-audit-section.is-history {
  border-top-color: #79cf00;
}

.task-audit-section.is-current::before,
.task-audit-section.is-history::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 4px;
  content: "";
}

.task-audit-section.is-current::before {
  background: linear-gradient(90deg, #ff5a63, #ff8b72);
}

.task-audit-section.is-history::before {
  background: linear-gradient(90deg, #79cf00, #30b978);
}

.task-audit-section-head,
.task-audit-month summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.task-audit-section-head span,
.task-audit-month summary span {
  color: #2377ca;
  font-size: 13px;
  font-weight: 800;
}

.task-audit-section-head p {
  margin: 5px 0 0;
  color: #64748b;
  font-size: 13px;
}

.task-audit-month {
  overflow: hidden;
  border: 1px solid #dbe6f2;
  border-radius: 7px;
}

.task-audit-month + .task-audit-month {
  margin-top: 10px;
}

.task-audit-month summary {
  padding: 11px 12px;
  background: #fff;
  color: #172033;
  font-weight: 900;
  cursor: pointer;
}

.task-audit-table-scroll {
  overflow: auto;
}

.task-audit-table {
  width: 100%;
  min-width: 960px;
  border-collapse: collapse;
  font-size: 13px;
}

.task-audit-table th,
.task-audit-table td {
  padding: 10px;
  border-bottom: 1px solid #e3ebf6;
  text-align: left;
  vertical-align: top;
}

.task-audit-table th {
  color: #35516f;
  background: #eef6ff;
  white-space: nowrap;
}

.task-audit-record-row {
  cursor: pointer;
}

.task-audit-record-row:hover,
.task-audit-record-row:focus {
  outline: none;
  background: #edf7ff;
}

.task-ai-score {
  color: #5c43bd;
  white-space: nowrap;
}

.task-audit-empty {
  color: #6b7b91;
  text-align: center !important;
}

.task-audit-evidence {
  padding: 0;
  color: var(--blue);
  background: transparent;
  border: 0;
  font: inherit;
  text-align: left;
  text-decoration: underline;
  cursor: pointer;
}

.task-audit-actions {
  display: flex;
  gap: 7px;
}

.task-audit-actions button {
  min-height: 30px;
  padding: 4px 9px;
  color: #187457;
  background: #effaf4;
  border: 1px solid #9ed8bb;
  border-radius: 5px;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.task-audit-actions button.danger {
  color: #b14646;
  background: #fff3f3;
  border-color: #efb2b2;
}

.task-audit-status {
  display: inline-block;
  padding: 4px 8px;
  color: #5d6b80;
  background: #edf2f7;
  border-radius: 999px;
}

.task-audit-status.is-approved {
  color: #187457;
  background: #e5f7ee;
}

.task-audit-status.is-rejected {
  color: #b14646;
  background: #fff0f0;
}

.task-audit-ai-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  padding-top: 12px;
  border-top: 1px solid #dfe8f3;
}

.task-audit-ai-footer span {
  color: #64748b;
  font-size: 13px;
}

.task-audit-ai-footer button,
.task-audit-detail-head button {
  min-width: 138px;
  min-height: 38px;
  padding: 8px 16px;
  color: #fff;
  background: linear-gradient(135deg, var(--teal), var(--blue));
  border: 0;
  border-radius: 7px;
  font: inherit;
  font-weight: 900;
  cursor: pointer;
}

.task-audit-ai-footer button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.task-audit-detail-overlay {
  position: fixed;
  z-index: 1400;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(20, 36, 58, 0.32);
  backdrop-filter: blur(2px);
}

.task-audit-detail {
  width: min(920px, 100%);
  max-height: min(82vh, 760px);
  padding: 20px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid #a9c9f1;
  border-radius: 12px;
  box-shadow: 0 24px 70px rgba(18, 42, 72, 0.28);
}

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

.task-audit-detail-head span {
  color: var(--teal);
  font-size: 12px;
  font-weight: 900;
}

.task-audit-detail-head h4 {
  margin: 4px 0 0;
  color: #172033;
}

.task-audit-detail-head button {
  min-width: 76px;
  color: #295b92;
  background: #f4f8ff;
  border: 1px solid #b9d0fb;
}

.task-audit-detail dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
}

.task-audit-detail dl > div {
  padding: 11px 12px;
  background: #fbfdff;
  border: 1px solid #e1eaf4;
  border-radius: 8px;
}

.task-audit-detail dt {
  margin-bottom: 5px;
  color: #667085;
  font-size: 12px;
  font-weight: 800;
}

.task-audit-detail dd {
  margin: 0;
  color: #243247;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
}

@media (max-width: 640px) {
  .admin-body [data-command-panel="permissionManage"] > .overview-grid {
    grid-template-columns: 1fr;
  }

  .senior-task-details {
    grid-template-columns: 1fr;
  }

  .senior-task-details .senior-task-detail-wide {
    grid-column: auto;
  }

  .senior-proof-form .senior-proof-file-field {
    grid-column: auto;
  }

  .task-audit-tabs {
    grid-template-columns: 1fr;
  }

  .task-audit-ai-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .task-audit-detail-overlay {
    align-items: end;
    padding: 12px;
  }

  .task-audit-detail dl {
    grid-template-columns: 1fr;
  }
}

.point-exchange-tabs,
.physical-type-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.point-exchange-tabs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  width: 100%;
}

.point-exchange-tabs button,
.physical-type-chip,
.physical-type-chip button {
  min-height: 34px;
  border-radius: 7px;
  font-weight: 900;
}

.point-exchange-tabs button {
  width: 100%;
  padding: 6px 12px;
  color: var(--blue);
  background: #fff;
  border: 1px solid #d7e5fb;
  cursor: pointer;
}

.point-exchange-tabs button.active {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(135deg, var(--blue), var(--teal));
}

.physical-type-manager {
  display: grid;
  gap: 10px;
  padding: 10px;
  background: #f8fbff;
  border: 1px solid #dfe8f3;
  border-radius: 8px;
}

.physical-type-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px 4px 10px;
  background: #fff;
  border: 1px solid #dbe6f2;
}

.physical-type-chip span {
  color: #334155;
}

.physical-type-chip button {
  min-height: 28px;
  padding: 0 8px;
  color: var(--blue);
  background: #f3f7ff;
  border: 1px solid #d7e5fb;
}

.physical-type-chip button.danger {
  color: #b42318;
  background: #fff5f5;
  border-color: #ffd1d1;
}

.physical-product-group {
  display: grid;
  gap: 10px;
}

.physical-product-group h4 {
  margin: 6px 0 0;
  color: #172033;
}

.point-exchange-list {
  position: relative;
  gap: 8px;
  padding-top: 15px;
}

.point-exchange-list::before,
.support-history-bottom::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 4px;
  content: "";
}

.point-exchange-list::before {
  border-radius: 8px 999px 2px 999px;
  background: linear-gradient(90deg, var(--coral), #ff8d55 56%, var(--gold));
  box-shadow: 0 3px 10px color-mix(in srgb, var(--coral) 24%, transparent);
}

.point-exchange-table-head,
.point-exchange-history-head {
  display: grid;
  gap: 10px;
  align-items: center;
  min-width: 860px;
  padding: 10px 12px;
  color: #40516a;
  border: 1px solid #dfe8f3;
  background: #f5f8fc;
  font-size: 12px;
  font-weight: 900;
}

.point-exchange-table-head {
  grid-template-columns: minmax(220px, 1.4fr) minmax(140px, .8fr) minmax(110px, .6fr) minmax(80px, .45fr) minmax(132px, .7fr) minmax(110px, .6fr);
}

.point-exchange-history-head {
  grid-template-columns: minmax(180px, 1.1fr) minmax(150px, .9fr) minmax(100px, .6fr) minmax(170px, 1fr) minmax(100px, .6fr) minmax(190px, 1.2fr);
}

.point-exchange-history {
  overflow: hidden;
}

.point-exchange-history > summary {
  list-style: none;
}

.point-exchange-history > summary::-webkit-details-marker {
  display: none;
}

.point-exchange-history-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 64px;
  padding: 14px 16px;
  cursor: pointer;
  border: 1px solid #d7e5f3;
  border-radius: 12px;
  background: linear-gradient(135deg, #f6fbff 0%, #edf9f6 100%);
}

.point-exchange-history-toggle > span,
.point-exchange-history-toggle > b {
  display: flex;
  align-items: center;
  gap: 10px;
}

.point-exchange-history-toggle strong {
  color: #10233f;
  font-size: 20px;
}

.point-exchange-history-toggle small {
  color: #60748e;
  font-size: 13px;
  font-weight: 700;
}

.point-exchange-history-toggle > b {
  flex: 0 0 auto;
  min-height: 36px;
  padding: 7px 12px;
  color: #075ea8;
  border: 1px solid #abd0ee;
  border-radius: 9px;
  background: #fff;
  font-size: 13px;
}

.point-exchange-history-toggle i {
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform .2s ease;
}

.point-exchange-history-close-label {
  display: none;
}

.point-exchange-history[open] .point-exchange-history-open-label {
  display: none;
}

.point-exchange-history[open] .point-exchange-history-close-label {
  display: inline;
}

.point-exchange-history[open] .point-exchange-history-toggle i {
  transform: rotate(225deg) translate(-2px, -2px);
}

.point-exchange-history-content {
  overflow-x: auto;
  padding-top: 12px;
}

.support-task-list .point-exchange-row {
  display: grid;
  grid-template-columns: minmax(220px, 1.4fr) minmax(140px, .8fr) minmax(110px, .6fr) minmax(80px, .45fr) minmax(132px, .7fr) minmax(110px, .6fr);
  gap: 10px;
  align-items: center;
  min-width: 860px;
  min-height: 42px;
  padding: 10px 12px;
}

.support-task-list .point-exchange-row small,
.point-exchange-history-row small {
  display: block;
  margin-top: 4px;
  color: #6b7b91;
  font-size: 12px;
  line-height: 1.5;
}

.support-task-list .point-exchange-row small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.support-task-list .point-exchange-row > button {
  min-height: 34px;
  padding: 6px 12px;
  white-space: nowrap;
}

.point-exchange-quantity {
  display: grid;
  grid-template-columns: 34px minmax(48px, 1fr) 34px;
  align-items: center;
}

.point-exchange-quantity button,
.point-exchange-quantity input {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  height: 34px;
  padding: 0 4px;
  color: #175d9f;
  border: 1px solid #bad3ed;
  background: #fff;
  text-align: center;
  font: inherit;
}

.point-exchange-quantity button:first-child { border-radius: 7px 0 0 7px; }
.point-exchange-quantity button:last-child { border-radius: 0 7px 7px 0; }
.point-exchange-quantity input { border-right: 0; border-left: 0; }
.point-exchange-quantity input::-webkit-inner-spin-button { margin: 0; appearance: none; }
.point-exchange-quantity button:disabled,
.point-exchange-quantity input:disabled { cursor: not-allowed; color: #93a2b5; background: #edf2f7; }

.point-exchange-modal { position: fixed; inset: 0; z-index: 1200; display: grid; place-items: center; padding: 24px; background: rgba(18, 38, 68, 0.48); }
.point-exchange-dialog { width: min(720px, 100%); max-height: min(760px, calc(100vh - 48px)); overflow: auto; padding: 24px; border: 1px solid #c9dbef; border-radius: 16px; background: #fff; box-shadow: 0 24px 64px rgba(19, 51, 88, 0.25); }
.point-exchange-dialog-head, .point-exchange-dialog-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.point-exchange-dialog-head span { color: #079d93; font-weight: 700; }
.point-exchange-dialog-head h3 { margin: 4px 0 0; font-size: 26px; }
.point-exchange-dialog-head > button { width: 40px; height: 40px; border: 1px solid #c9dbef; border-radius: 50%; background: #f7fbff; color: #315578; font-size: 24px; }
.point-exchange-dialog > p { margin: 18px 0; color: #405a75; }
.point-exchange-receiver-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.point-exchange-receiver-grid label { display: grid; gap: 7px; color: #28445f; font-weight: 700; }
.point-exchange-receiver-grid input { min-width: 0; height: 44px; padding: 0 12px; border: 1px solid #b9d0e8; border-radius: 9px; background: #fff; font: inherit; }
.point-exchange-receiver-grid input:focus-visible { outline: 3px solid rgba(39, 109, 211, 0.18); border-color: #276dd3; }
.point-exchange-address { grid-column: 1 / -1; }
.point-exchange-dialog-status { min-height: 24px; margin-top: 12px; color: #c13939; }
.point-exchange-dialog-actions { justify-content: flex-end; margin-top: 8px; }
.point-exchange-dialog-actions button { min-width: 112px; min-height: 42px; border: 1px solid #9fc1e5; border-radius: 9px; padding: 9px 18px; font: inherit; font-weight: 700; }
.point-exchange-dialog-actions .primary { border-color: transparent; background: linear-gradient(135deg, #1aa39a, #246ed2); color: #fff; }
.point-exchange-dialog-actions .secondary { background: #f4f8fc; color: #285480; }
.point-exchange-dialog-actions button:disabled { cursor: not-allowed; opacity: 0.55; }

@media (max-width: 760px) {
  .point-exchange-modal { align-items: end; padding: 12px; }
  .point-exchange-dialog { max-height: calc(100vh - 24px); padding: 18px; border-radius: 16px 16px 10px 10px; }
  .point-exchange-receiver-grid { grid-template-columns: 1fr; }
  .point-exchange-address { grid-column: auto; }
  .point-exchange-dialog-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .point-exchange-dialog-actions button { width: 100%; min-width: 0; }
}

.support-task-list article .button.disabled {
  pointer-events: none;
  color: #6b7483;
  background: #edf2f7;
  border-color: #dbe3ec;
}

.record-divider {
  height: 1px;
  margin: 10px 0;
  background: var(--line);
}

.support-back-link {
  display: inline-flex;
  width: fit-content;
  min-height: 36px;
  align-items: center;
  padding: 0 14px;
  color: var(--blue);
  background: #eef6ff;
  border: 1px solid #cfe1fb;
  border-radius: 7px;
  font-weight: 900;
  text-decoration: none;
}

.support-history-bottom {
  position: relative;
  margin-top: 18px;
  padding-top: 20px;
  border-top: 0;
}

.support-history-bottom::before {
  border-radius: 999px 2px 999px 2px;
  background: linear-gradient(90deg, var(--teal), #42c98f 58%, #a7e7bd);
  box-shadow: 0 3px 9px color-mix(in srgb, var(--teal) 24%, transparent);
}

.support-history-bottom h3 {
  margin: 0;
  color: #172033;
  font-size: 22px;
}

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

.support-rule-grid article,
.support-rule-grid .support-task-entry {
  min-height: 154px;
}

.support-task-board {
  display: grid;
  gap: 14px;
}

.support-task-box {
  padding: 14px;
  background: #f8fbff;
  border: 1px solid #dfe8f3;
  border-radius: 8px;
}

.support-task-box summary {
  cursor: pointer;
  color: #172033;
  font-weight: 900;
}

.support-task-box summary b {
  display: inline-grid;
  min-width: 20px;
  height: 20px;
  margin-left: 8px;
  place-items: center;
  color: #fff;
  background: #e53935;
  border-radius: 999px;
  font-size: 12px;
}

.support-task-list,
.support-record-list {
  display: grid;
  gap: 12px;
  margin-top: 12px;
  max-height: 520px;
  overflow-x: auto;
  overflow-y: auto;
  padding-right: 8px;
  scrollbar-color: #b8c9dc #f3f7fb;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
}

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

.support-proof-form label,
.senior-proof-form label {
  display: grid;
  gap: 6px;
  color: #43526a;
  font-weight: 900;
}

.support-proof-form input,
.senior-proof-form input {
  min-height: 40px;
  padding: 9px 11px;
  border: 1px solid #dbe6f2;
  border-radius: 7px;
  font: inherit;
}

.multi-file-summary {
  grid-column: 1 / -1;
  color: var(--muted);
  line-height: 1.5;
}

.support-proof-form button,
.senior-proof-form button {
  grid-column: 1 / -1;
  min-height: 40px;
  color: #fff;
  background: linear-gradient(135deg, var(--blue), var(--teal));
  border-radius: 7px;
  font-weight: 900;
}

.support-point-toast {
  display: inline-grid;
  gap: 3px;
  margin-left: 10px;
  padding: 10px 14px;
  color: #173b24;
  background: #eafaf0;
  border: 1px solid #bde8ca;
  border-radius: 8px;
  box-shadow: 0 10px 24px rgba(21, 32, 51, 0.12);
}

.support-point-toast button {
  width: fit-content;
  color: #16744a;
  background: transparent;
  border: 0;
  font-weight: 900;
  cursor: pointer;
}

.senior-help-band {
  background: #f8fbff;
  border-color: #dfe8f3;
  box-shadow: inset 4px 0 0 rgba(31, 132, 216, 0.16);
}

.senior-help-band h3 {
  margin: 0;
  color: #172033;
}

.personal-center-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.22fr) minmax(300px, 0.78fr);
  grid-template-areas:
    "profile email"
    "login payment";
  gap: 18px;
  align-items: start;
}

.personal-center-grid > .personal-info-card {
  grid-area: profile;
}

.personal-info-card,
.personal-password-card {
  display: grid;
  align-content: start;
  gap: 14px;
  padding: 18px;
  background: #f8fbff;
  border: 1px solid #dfe8f3;
  border-radius: 8px;
}

.personal-settings-stack {
  display: contents;
}

.personal-settings-stack > .personal-password-card:first-child {
  grid-area: email;
}

.personal-settings-stack > .personal-password-card:last-child {
  grid-area: login;
}

.personal-settings-stack > .personal-password-card:only-child {
  height: 100%;
  box-sizing: border-box;
}

.personal-password-wide {
  grid-column: 1 / -1;
}

.personal-payment-password-card {
  grid-area: payment;
  margin-top: 0;
}

@media (max-width: 900px) {
  .personal-center-grid {
    grid-template-areas:
      "profile"
      "email"
      "payment"
      "login";
  }
}

.personal-info-card h3,
.personal-password-card h3,
.personal-password-card p {
  margin: 0;
}

.personal-info-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.personal-info-title .button {
  width: auto;
  min-height: 34px;
  padding: 7px 12px;
  font-size: 13px;
}

.personal-password-card p {
  color: var(--muted);
}

.personal-info-list {
  display: grid;
  gap: 0;
  overflow: hidden;
  border: 1px solid #e1e7ef;
  border-radius: 8px;
}

.personal-info-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.personal-info-list div {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 12px;
  padding: 11px 12px;
  background: #fff;
  border-bottom: 1px solid #e7edf5;
}

.personal-info-list div:last-child {
  border-bottom: 0;
}

.personal-info-list span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 900;
}

.personal-info-list strong {
  color: #172033;
  overflow-wrap: anywhere;
}

.personal-center-tabs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: 8px;
  width: 100%;
}

.personal-center-tabs button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 36px;
  padding: 8px 14px;
  color: #43526a;
  background: #f6f9fd;
  border: 1px solid #dbe7f5;
  border-radius: 7px;
  font-weight: 900;
  cursor: pointer;
  width: 100%;
}

.personal-center-tabs button em {
  display: inline-grid;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  place-items: center;
  color: #fff;
  background: #e53935;
  border-radius: 999px;
  font-size: 12px;
  font-style: normal;
  line-height: 1;
}

.personal-center-tabs button.active {
  color: #fff;
  background: #155bd4;
  border-color: #155bd4;
}

/* Personal centre: keep all five navigation choices on one desktop row. */
.personal-center-panel .personal-center-tabs {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-self: stretch;
}

.personal-center-panel .personal-center-tabs > button {
  min-width: 0;
}

@media (max-width: 640px) {
  .personal-center-panel .personal-center-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.personal-tab-panel {
  display: none;
  gap: 14px;
}

.personal-tab-panel.active {
  display: grid;
}

.personal-section-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
  padding: 8px;
  background: #f4f8fd;
  border: 1px solid #dbe7f5;
  border-radius: 9px;
}

.personal-section-tabs button {
  min-width: 0;
  min-height: 40px;
  padding: 9px 14px;
  color: #1555b6;
  background: #fff;
  border: 1px solid #bcd2ee;
  border-radius: 7px;
  font-weight: 900;
  cursor: pointer;
  transition: color 160ms ease, background 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.personal-section-tabs button:hover {
  color: #087e78;
  border-color: #66c4bd;
  box-shadow: 0 5px 14px rgba(36, 110, 210, 0.1);
}

.personal-section-tabs button:focus-visible {
  outline: 3px solid rgba(36, 110, 210, 0.22);
  outline-offset: 2px;
}

.personal-section-tabs button:active {
  transform: translateY(1px);
}

.personal-section-tabs button.active {
  color: #fff;
  background: linear-gradient(135deg, var(--teal), var(--blue));
  border-color: transparent;
  box-shadow: 0 7px 18px rgba(36, 110, 210, 0.18);
}

.personal-section-tabs button:disabled {
  color: #8e9daf;
  background: #e9eff6;
  border-color: #d6e0eb;
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
}

.personal-system-panel .personal-center-grid {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: none;
  gap: 14px;
}

.personal-system-panel .personal-center-grid > .personal-info-card,
.personal-system-panel .personal-settings-stack > .personal-password-card {
  grid-area: auto;
  width: 100%;
  box-sizing: border-box;
}

.personal-system-panel[data-active-system-section="profile"] [data-personal-system-group="password"],
.personal-system-panel[data-active-system-section="password"] [data-personal-system-group="profile"],
.personal-information-panel[data-active-info-section="messages"] [data-personal-info-group="transactions"],
.personal-information-panel[data-active-info-section="transactions"] [data-personal-info-group="messages"] {
  display: none;
}

.personal-system-panel [data-personal-system-group="profile"]:first-child {
  order: 1;
}

.personal-system-panel .personal-settings-stack > [data-personal-system-group="profile"] {
  order: 2;
}

.personal-system-panel .personal-settings-stack > [data-personal-system-group="password"]:not(.personal-payment-password-card) {
  order: 1;
}

.personal-system-panel .personal-payment-password-card {
  order: 2;
}

.personal-information-panel > [data-personal-info-group],
.personal-information-panel > [data-personal-info-group] > .personal-info-card {
  min-width: 0;
}

@media (max-width: 520px) {
  .personal-section-tabs {
    padding: 6px;
  }

  .personal-section-tabs button {
    min-height: 42px;
    padding-inline: 8px;
    font-size: 14px;
  }
}

.personal-message-card {
  min-height: 0;
}

.personal-transaction-card {
  gap: 18px;
}

.personal-transaction-section {
  position: relative;
  display: grid;
  gap: 10px;
  padding-top: 14px;
}

.personal-transaction-section::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  content: "";
  border-radius: 999px;
  background: linear-gradient(90deg, #16a6a0, #2f69dc 55%, #7b57dd);
}

.personal-transaction-section h3 {
  margin: 0;
  color: #172033;
  font-size: 17px;
}

.personal-transaction-table-wrap {
  overflow-x: auto;
  border: 1px solid #dfe8f3;
  border-radius: 8px;
  background: #fff;
}

.personal-transaction-table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
}

.personal-transaction-table th,
.personal-transaction-table td {
  padding: 10px 12px;
  border-bottom: 1px solid #e7edf5;
  color: #34445e;
  font-size: 13px;
  text-align: left;
  white-space: nowrap;
}

.personal-transaction-table th {
  color: #1d4f92;
  background: #eff6ff;
  font-weight: 900;
}

.personal-transaction-table tbody tr:last-child td {
  border-bottom: 0;
}

.personal-transaction-table td[colspan] {
  color: var(--muted);
  text-align: center;
}

.personal-message-list {
  display: grid;
  gap: 12px;
}

.personal-message-list article {
  display: grid;
  gap: 7px;
  padding: 14px;
  background: #fff;
  border: 1px solid #e1e7ef;
  border-radius: 8px;
}

.personal-message-list article strong {
  color: #172033;
}

.personal-message-list article span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.personal-message-list article p {
  margin: 0;
  color: #43526a;
  line-height: 1.65;
}

.personal-certificate-card,
.personal-grade-card {
  display: grid;
  gap: 14px;
}

.personal-certificate-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.personal-certificate-summary > div {
  display: grid;
  gap: 5px;
  padding: 12px;
  background: #f6f9fd;
  border: 1px solid #e5edf6;
  border-radius: 7px;
}

.personal-certificate-summary span,
.personal-certificate-list span,
.personal-certificate-list small,
.personal-grade-list span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.personal-certificate-summary strong {
  color: #172033;
  font-size: 20px;
}

.personal-certificate-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.personal-certificate-actions .button {
  min-height: 30px;
  padding: 7px 12px;
}

.personal-certificate-actions .button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.personal-certificate-preview-slot:empty {
  display: none;
}

.personal-certificate-preview {
  display: grid;
  gap: 12px;
  padding: 18px;
  background: linear-gradient(135deg, #fffdf7, #f8fbff);
  border: 1px solid #d9e6f5;
  border-radius: 8px;
  box-shadow: 0 12px 28px rgba(25, 38, 63, 0.08);
}

.personal-certificate-preview > span {
  color: #0f8f8b;
  font-size: 12px;
  font-weight: 900;
}

.personal-certificate-preview h3 {
  margin: 0;
  color: #172033;
  font-size: 24px;
}

.personal-certificate-preview > div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.personal-certificate-preview p {
  margin: 0;
  color: #526176;
  line-height: 1.6;
}

.personal-certificate-preview b {
  display: block;
  color: #172033;
}

.personal-certificate-preview section {
  display: grid;
  gap: 6px;
  padding-top: 10px;
  border-top: 1px solid #e1e7ef;
}

.personal-certificate-preview small {
  color: var(--muted);
  font-weight: 800;
}

.personal-certificate-list,
.personal-grade-list {
  display: grid;
  gap: 10px;
}

.personal-certificate-list article,
.personal-grade-list article {
  display: grid;
  gap: 8px;
  padding: 13px;
  background: #fff;
  border: 1px solid #e1e7ef;
  border-radius: 8px;
}

.personal-certificate-list article > div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: baseline;
  justify-content: space-between;
}

.personal-certificate-list strong,
.personal-grade-list strong {
  color: #172033;
}

.personal-certificate-list p,
.personal-grade-list p {
  margin: 0;
  color: #526176;
  line-height: 1.6;
}

.personal-certificate-list article.is-empty,
.personal-grade-list article.is-empty {
  background: #f8fbff;
}

.personal-profile-edit-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 14px;
  background: #f8fbff;
  border: 1px solid #dbe7f5;
  border-radius: 8px;
}

.personal-profile-edit-form[hidden] {
  display: none;
}

.personal-profile-edit-form label {
  display: grid;
  gap: 6px;
  color: #43526a;
  font-size: 13px;
  font-weight: 900;
}

.personal-profile-edit-form input {
  width: 100%;
  min-height: 40px;
  padding: 9px 11px;
  color: #172033;
  background: #fff;
  border: 1px solid #dbe3ee;
  border-radius: 7px;
  font: inherit;
}

.personal-profile-edit-form input[readonly] {
  color: #65748a;
  background: #eef3f8;
}

.personal-profile-edit-form button {
  grid-column: 1 / -1;
}

.personal-score-card,
.personal-qr-card {
  display: grid;
  gap: 12px;
  padding: 14px;
  background: #fff;
  border: 1px solid #e1e7ef;
  border-radius: 8px;
}

.personal-recharge-card {
  display: grid;
  gap: 8px;
  padding: 10px;
  background: #f8fbff;
  border: 1px solid #dbe7f5;
  border-radius: 8px;
}

.personal-recharge-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: start;
}

.personal-recharge-head strong {
  color: #132033;
  font-size: 15px;
  line-height: 1.35;
  text-align: right;
}

.personal-recharge-discount {
  display: grid;
  gap: 3px;
  padding: 8px;
  background: #f6f9fd;
  border: 1px solid #dbe7f5;
  border-radius: 8px;
}

.personal-recharge-discount span,
.personal-recharge-discount p {
  color: #526176;
  font-size: 12px;
  font-weight: 900;
}

.personal-recharge-discount strong {
  color: #172033;
  font-size: 20px;
}

.personal-recharge-form {
  display: grid;
  gap: 8px;
}

.personal-recharge-form label {
  display: grid;
  gap: 6px;
  color: #43526a;
  font-size: 13px;
  font-weight: 900;
}

.personal-recharge-form input[type="number"] {
  width: 100%;
  min-height: 34px;
  padding: 7px 10px;
  color: #172033;
  background: #fff;
  border: 1px solid #dbe3ee;
  border-radius: 7px;
  font: inherit;
}

.personal-recharge-methods {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.personal-recharge-methods label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 36px;
  padding: 6px 9px;
  background: #fff;
  border: 1px solid #dbe3ee;
  border-radius: 7px;
  cursor: pointer;
  white-space: nowrap;
}

.personal-recharge-methods svg,
.personal-recharge-methods img {
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  object-fit: contain;
}

.personal-recharge-methods input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.personal-recharge-methods label:has(input:checked) {
  border-color: #2563d9;
  box-shadow: 0 0 0 2px rgba(37, 99, 217, 0.12);
}

.personal-recharge-qr {
  display: grid;
  place-items: center;
  gap: 6px;
  padding: 8px;
  background: #fff;
  border: 1px solid #e1e7ef;
  border-radius: 8px;
  cursor: pointer;
}

.personal-recharge-qr img {
  width: 220px;
  height: 220px;
  object-fit: contain;
}

.personal-recharge-qr span {
  color: #526176;
  font-size: 12px;
  font-weight: 900;
}

.personal-recharge-pending {
  margin: 0;
  padding: 10px 12px;
  color: #1765b9;
  background: #eef6ff;
  border: 1px solid #b9d4f5;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 900;
  text-align: center;
}

.personal-recharge-form button {
  min-height: 36px;
}

.admin-body .recharge-discount-admin-field {
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}

.admin-body .recharge-discount-admin-field span {
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
}

.admin-body .senior-rule-form {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #e1e7ef;
}

.personal-promotion-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 8px;
  background: #f4f8ff;
  border: 1px solid #dbe7f5;
  border-radius: 8px;
}

.personal-promotion-tabs button {
  min-height: 44px;
  color: #42526a;
  background: #fff;
  border: 1px solid #dbe3ee;
  border-radius: 7px;
  cursor: pointer;
  font-weight: 900;
}

.personal-promotion-tabs button.active {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(135deg, #2563d9, #18a39b);
}

.personal-promotion-tabs button em {
  display: inline-grid;
  min-width: 18px;
  height: 18px;
  margin-left: 6px;
  place-items: center;
  color: #fff;
  background: #e53935;
  border-radius: 999px;
  font-style: normal;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
}

.personal-promotion-panels {
  display: grid;
  margin-top: 12px;
}

.personal-promotion-tab-panel {
  display: none;
}

.personal-promotion-tab-panel.active {
  display: grid;
}

.personal-invite-copy-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.personal-invite-copy-row input {
  min-width: 0;
}

.personal-invite-copy-row button {
  min-height: 38px;
  padding: 0 18px;
  color: #fff;
  background: linear-gradient(135deg, #2563d9, #18a39b);
  border: 0;
  border-radius: 7px;
  cursor: pointer;
  font-weight: 900;
}

.personal-score-card {
  align-content: start;
  min-height: 520px;
  gap: 16px;
}

.personal-score-card h3,
.personal-score-card p,
.personal-qr-card h3,
.personal-qr-card p {
  margin: 0;
}

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

.personal-score-grid div {
  display: grid;
  gap: 4px;
  padding: 10px;
  background: #f6f9fd;
  border: 1px solid #e5edf6;
  border-radius: 7px;
  align-items: center;
}

.personal-score-grid span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.personal-score-grid strong {
  color: #172033;
  font-size: 20px;
  line-height: 1.1;
}

.personal-senior-status {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 12px;
  align-items: center;
  padding: 15px 16px;
  color: #73511a;
  background: linear-gradient(135deg, #fff8df, #fffdf5);
  border: 1px solid #f0d58a;
  border-radius: 10px;
  box-shadow: 0 7px 18px rgba(202, 150, 41, 0.1);
}

.personal-senior-status.is-qualified {
  color: #0c756f;
  background: linear-gradient(135deg, #e5f8f2, #f8fffc);
  border-color: #a7ded4;
  box-shadow: 0 7px 18px rgba(24, 163, 155, 0.12);
}

.personal-senior-status span {
  font-size: 12px;
  font-weight: 900;
}

.personal-senior-status strong {
  color: inherit;
  font-size: 20px;
  line-height: 1.1;
}

.personal-senior-status small {
  grid-column: 1 / -1;
  color: inherit;
  font-size: 12px;
  line-height: 1.55;
}

.personal-score-grid .personal-score-downline {
  background: linear-gradient(135deg, #edf8f6, #f7fffd);
  border-color: #b9e4dc;
}

.personal-score-grid .personal-score-downline strong {
  color: #087f77;
  font-size: 24px;
}

.personal-score-grid .personal-score-withdrawal span {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
}

.personal-score-withdrawal button {
  min-height: 28px;
  min-width: 46px;
  padding: 0 11px;
  color: #1765b9;
  border: 1px solid #b9d4f5;
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
  font-size: 12px;
  font-weight: 900;
  text-align: center;
}

.personal-score-withdrawal small {
  color: #708096;
  font-size: 11px;
}

.personal-overseas-card,
.personal-overseas-form {
  display: grid;
  gap: 10px;
}

.personal-overseas-card {
  grid-column: 1 / -1;
  padding: 14px;
  color: #17345d;
  background: linear-gradient(135deg, #edf5ff, #fbfdff);
  border: 1px solid #b7d4f4;
  border-radius: 10px;
}

.personal-overseas-card h3,
.personal-overseas-card p {
  margin: 0;
}

.personal-overseas-form {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.personal-overseas-form label {
  display: grid;
  gap: 5px;
  color: #43526a;
  font-size: 12px;
  font-weight: 800;
}

.personal-overseas-form input,
.personal-overseas-form button,
.personal-overseas-form p {
  grid-column: 1 / -1;
}

.overseas-file-hint {
  color: #56708f;
  font-size: 12px;
}

@media (max-width: 640px) {
  .personal-overseas-form { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .personal-score-grid {
    grid-template-columns: 1fr;
  }

  .personal-senior-status {
    grid-template-columns: 1fr;
    gap: 5px;
  }
}

.withdrawal-request-summary {
  display: grid;
  gap: 6px;
  padding-top: 10px;
  border-top: 1px solid #e3eaf3;
}

.withdrawal-request-summary strong {
  color: #27364d;
  font-size: 13px;
}

.withdrawal-request-summary span {
  color: #687890;
  font-size: 12px;
}

.withdrawal-modal,
.ecommerce-history-modal,
.ecommerce-tracking-modal {
  position: fixed;
  z-index: 1200;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(20, 30, 46, 0.42);
}

.ecommerce-tracking-modal {
  z-index: 1320;
  background: rgba(12, 24, 41, 0.56);
}

.withdrawal-dialog {
  display: grid;
  justify-items: center;
  width: min(430px, 100%);
  padding: 24px;
  border: 1px solid #d9e5f2;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 24px 60px rgba(17, 31, 52, 0.2);
  text-align: center;
}

.withdrawal-dialog-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-bottom: 10px;
  color: #fff;
  border-radius: 50%;
  background: #168f87;
  font-size: 23px;
  font-weight: 900;
}

.withdrawal-dialog > span {
  color: #137b75;
  font-size: 12px;
  font-weight: 900;
}

.withdrawal-dialog h3,
.withdrawal-dialog p {
  margin: 7px 0 0;
}

.withdrawal-dialog > strong {
  margin-top: 8px;
  color: #172033;
  font-size: 30px;
}

.withdrawal-dialog p {
  color: #607089;
  line-height: 1.65;
}

.withdrawal-dialog > div:last-child {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
  margin-top: 18px;
}

.withdrawal-dialog > div:last-child > button:only-child {
  grid-column: 1 / -1;
}

.personal-score-card p,
.personal-qr-card p {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

.personal-qr-card img {
  width: 220px;
  height: 220px;
  justify-self: center;
  padding: 8px;
  background: #fff;
  border: 1px solid #dbe6f2;
  border-radius: 8px;
}

.personal-qr-card input {
  width: 100%;
  min-height: 38px;
  padding: 8px 10px;
  color: #43526a;
  background: #f8fbff;
  border: 1px solid #dbe6f2;
  border-radius: 7px;
  font: inherit;
}

.personal-password-form {
  display: grid;
  gap: 12px;
}

.personal-password-form label {
  display: grid;
  gap: 6px;
  color: #43526a;
  font-weight: 900;
}

.personal-password-form input {
  width: 100%;
  min-height: 42px;
  padding: 10px 12px;
  border: 1px solid #dbe6f2;
  border-radius: 7px;
  font: inherit;
}

.personal-code-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
}

.personal-code-row button,
.personal-password-form > button {
  min-height: 42px;
  padding: 0 14px;
  color: #fff;
  background: linear-gradient(135deg, var(--blue), var(--teal));
  border-radius: 7px;
  font-weight: 900;
}

@media (max-width: 900px) {
  .support-rule-grid,
  .career-resume-form,
  .support-proof-form,
  .personal-center-grid,
  .personal-settings-stack,
  .personal-promotion-tabs,
  .personal-certificate-summary,
  .personal-info-layout,
  .personal-profile-edit-form,
  .personal-code-row,
  .admin-body .senior-rule-editor,
  .admin-body .senior-rule-row {
    grid-template-columns: 1fr;
  }

  .personal-certificate-preview > div {
    grid-template-columns: 1fr;
  }

  .internship-range-field > span {
    grid-template-columns: 1fr;
  }

  .support-task-list .point-exchange-row {
    grid-template-columns: minmax(220px, 1.4fr) minmax(140px, .8fr) minmax(110px, .6fr) minmax(80px, .45fr) minmax(132px, .7fr) minmax(110px, .6fr);
    align-items: center;
  }

  .support-task-list .point-exchange-row > button {
    justify-self: stretch;
  }

  .classroom-board-tabs {
    grid-template-columns: repeat(7, minmax(120px, 1fr));
    overflow-x: auto;
  }
}

/* Recruitment and teaching workspace */
.recruit-teach-page {
  min-height: calc(100vh - 74px);
  padding: clamp(22px, 4vw, 44px);
}

.recruit-teach-shell {
  display: grid;
  gap: 18px;
  width: min(100%, 1180px);
  max-width: 1180px;
  margin: 0 auto;
}

.recruit-teach-head,
.recruit-teach-status,
.work-panel {
  background: #fff;
  border: 1px solid #dfe8f3;
  border-radius: 8px;
  box-shadow: 0 14px 34px rgba(21, 32, 51, 0.06);
}

.recruit-teach-head {
  display: flex;
  gap: 18px;
  align-items: center;
  justify-content: space-between;
  padding: 22px;
}

.finance-work-head-actions {
  display: flex;
  flex: 0 0 auto;
  gap: 10px;
  align-items: center;
}

.finance-work-status-live {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.recruit-teach-head h1,
.recruit-teach-head p,
.work-panel-head h2,
.work-panel-head p,
.work-list article p {
  margin: 0;
}

.recruit-teach-head h1 {
  margin-bottom: 8px;
  color: #172033;
  font-size: clamp(24px, 4vw, 36px);
}

.recruit-teach-head p,
.work-panel-head p,
.work-list article p {
  color: var(--muted);
  line-height: 1.65;
}

.recruit-teach-status {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  color: #43526a;
  background: #f6f9ff;
  font-weight: 800;
}

.recruit-teach-grid {
  display: grid;
  gap: 18px;
  width: 100%;
  min-width: 0;
}

.work-panel {
  display: grid;
  gap: 18px;
  width: 100%;
  min-width: 0;
  padding: 22px;
}

.teacher-work,
.teacher-work > .teacher-tab-panel,
.teacher-work > .teacher-homework-history {
  width: 100%;
  min-width: 0;
}

.work-panel-head {
  display: grid;
  gap: 8px;
  padding-bottom: 14px;
  border-bottom: 1px solid #e7edf5;
}

.finance-work .work-panel-head {
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 18px;
  align-items: center;
}

.finance-work .work-panel-head > span,
.finance-work .work-panel-head > h2,
.finance-work .work-panel-head > p {
  grid-column: 1;
}

.finance-work .work-panel-head > .finance-work-head-actions {
  grid-column: 2;
  grid-row: 1 / span 3;
  align-self: center;
}

.work-panel-head span {
  color: var(--teal);
  font-weight: 900;
}

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

.work-form.compact {
  grid-template-columns: minmax(220px, 0.6fr) minmax(0, 1fr) auto;
  align-items: end;
}

.work-form label {
  display: grid;
  gap: 6px;
  color: #43526a;
  font-weight: 900;
}

.work-form .wide,
.work-form button {
  grid-column: 1 / -1;
}

.work-form.compact .wide,
.work-form.compact button {
  grid-column: auto;
}

.work-form input,
.work-form select,
.work-form textarea {
  width: 100%;
  min-height: 42px;
  padding: 10px 12px;
  border: 1px solid #dbe6f2;
  border-radius: 7px;
  font: inherit;
}

.work-form button {
  min-height: 42px;
  color: #fff;
  background: linear-gradient(135deg, var(--blue), var(--teal));
  border-radius: 7px;
  font-weight: 900;
}

.recruiter-filter-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)) auto auto;
  gap: 10px;
  align-items: end;
  margin-bottom: 14px;
}

.recruiter-filter-form label {
  display: grid;
  gap: 6px;
  color: #43526a;
  font-weight: 900;
}

.recruiter-filter-form input,
.recruiter-filter-form select {
  min-height: 40px;
  padding: 9px 11px;
  border: 1px solid #dbe6f2;
  border-radius: 7px;
  font: inherit;
}

.recruiter-filter-form button,
.recruiter-detail-head button {
  min-height: 40px;
  padding: 0 14px;
  color: #fff;
  background: linear-gradient(135deg, var(--blue), var(--teal));
  border-radius: 7px;
  font-weight: 900;
}

.recruiter-filter-form [data-clear-recruiter-filter] {
  color: #43526a;
  background: #eef4fb;
  border: 1px solid #dbe6f2;
}

.recruiter-table-list {
  display: grid;
  gap: 8px;
}

.recruiter-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1.25fr 1.25fr 1fr 1.1fr;
  gap: 10px;
  align-items: center;
  width: 100%;
  padding: 12px;
  text-align: left;
  color: #111827;
  background: #fff;
  border: 1px solid #dfe8f3;
  border-radius: 8px;
  font-family: "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", sans-serif;
  font-weight: 700;
}

.recruiter-row:hover {
  border-color: #8bb8ff;
  box-shadow: 0 10px 24px rgba(37, 99, 217, 0.1);
}

.recruiter-row strong {
  color: #111827;
  font-weight: 900;
}

.recruiter-row span,
.recruiter-row small {
  min-width: 0;
  overflow-wrap: anywhere;
  color: #263449;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
}

/* 招聘企业简历列表：保留表头，使无数据状态与已提交状态保持同一版式。 */
.recruiter-table-head {
  display: grid;
  grid-template-columns: 1fr 1fr 1.25fr 1.25fr 1fr 1.1fr;
  gap: 10px;
  align-items: center;
  padding: 10px 14px;
  color: #17233b;
  background: #f1f6fc;
  border: 1px solid #d8e4f1;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 900;
}

.recruiter-detail-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(3px);
}

.recruiter-detail-dialog {
  width: min(980px, 96vw);
  max-height: calc(100dvh - 40px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  padding: 20px;
  border: 1px solid #d5e3f2;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 28px 80px rgba(15, 23, 42, 0.3);
}

.recruiter-detail-dialog > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid #dfe9f4;
}

.recruiter-detail-scroll {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 4px;
}

/* Business-manager panels retain every desktop column. When the browser is
   narrower than a panel's operational data, the panel itself becomes the
   horizontal scroll rail instead of clipping the right-hand controls. */
@media (min-width: 761px) {
  .business-manager-body .command-stage {
    min-width: 0;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
  }

  .business-manager-body .command-panel.active {
    min-width: 940px;
  }

  /* Recruitment contains several independent wide tables. Keep the panel at
     the available width so each review/month table owns its horizontal rail. */
  .business-manager-body [data-command-panel="recruitmentEnterprise"].active {
    min-width: 0;
  }

  .business-manager-body [data-command-panel="recruitmentEnterprise"] :is(
    #recruitmentEnterpriseRuntime,
    .admin-job-review-card,
    .recruitment-records-card,
    .recruitment-period-stack,
    .recruitment-period-card
  ) {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .business-manager-body [data-command-panel="recruitmentEnterprise"] .recruitment-table-scroll {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: scroll;
    overscroll-behavior-inline: contain;
    scrollbar-width: auto;
    scrollbar-color: #8793a3 #e8edf3;
    scrollbar-gutter: stable;
  }

  .business-manager-body [data-command-panel="recruitmentEnterprise"] .recruitment-table-scroll::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }

  .business-manager-body [data-command-panel="recruitmentEnterprise"] .recruitment-table-scroll::-webkit-scrollbar-track {
    border-radius: 999px;
    background: #e8edf3;
  }

  .business-manager-body [data-command-panel="recruitmentEnterprise"] .recruitment-table-scroll::-webkit-scrollbar-thumb {
    min-width: 72px;
    border: 2px solid #e8edf3;
    border-radius: 999px;
    background: #8793a3;
  }

  .business-manager-body [data-command-panel="recruitmentEnterprise"] .recruitment-table-scroll::-webkit-scrollbar-thumb:hover {
    background: #687687;
  }
}

.business-manager-body .license-review-batch-actions {
  display: flex !important;
  flex: 0 0 auto;
  flex-wrap: nowrap !important;
  align-items: center;
  gap: 8px;
}

.business-manager-body .license-review-batch-actions button {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 86px;
  white-space: nowrap;
}

.business-manager-body .freight-admin-table-wrap {
  overflow: auto;
}

.business-manager-body .freight-admin-table {
  width: 100%;
  min-width: 860px;
}

.recruiter-detail-dialog > header span { display: block; color: #159c97; font-size: 13px; font-weight: 900; }
.recruiter-detail-dialog > header strong { color: #111827; font-size: 20px; font-weight: 900; }
.recruiter-detail-dialog > header button { min-height: 36px; padding: 7px 14px; border: 1px solid #bdd2eb; border-radius: 8px; color: #234a70; background: #f7fbff; font-weight: 900; cursor: pointer; }
.recruiter-detail-dialog .recruiter-detail-card { margin-top: 14px; }

.recruiter-detail-card {
  margin-top: 14px;
}

.teacher-auto-publish {
  grid-column: 1 / -1;
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid #dbe6f2;
  border-radius: 8px;
  background: #f8fbff;
}

.teacher-auto-title,
.teacher-auto-fields,
.teacher-auto-weekdays {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.teacher-auto-title {
  justify-content: space-between;
}

.teacher-auto-switch,
.teacher-auto-day {
  display: inline-flex !important;
  grid-template-columns: none !important;
  gap: 6px !important;
  align-items: center;
  min-height: 34px;
  padding: 6px 10px;
  border: 1px solid #dbe6f2;
  border-radius: 999px;
  background: #fff;
}

.teacher-auto-switch input,
.teacher-auto-day input {
  width: auto;
  min-height: auto;
}

.teacher-auto-fields > label {
  min-width: 160px;
  flex: 0 0 180px;
}

.teacher-auto-fields button {
  grid-column: auto;
  flex: 0 0 160px;
  cursor: pointer;
  transition: transform 0.16s ease, box-shadow 0.16s ease, filter 0.16s ease;
}

.teacher-auto-fields button:hover {
  box-shadow: 0 10px 24px rgba(37, 99, 217, 0.18);
  filter: brightness(1.03);
}

.teacher-auto-fields button:active {
  transform: translateY(-3px) scale(0.98);
}

.teacher-auto-publish small {
  color: #607089;
  line-height: 1.7;
}

.teacher-work-tabs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: 10px;
  width: 100%;
  min-width: 0;
}

.teacher-work .teacher-work-tabs {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.teacher-work-tabs [data-teacher-tab="auto"] {
  order: 1;
}

.teacher-work-tabs [data-teacher-tab="students"] {
  order: 3;
}

.teacher-work-tabs [data-teacher-tab="manual"] {
  order: 2;
}

.teacher-work-tabs [data-teacher-tab="certificate"] {
  order: 4;
}

.teacher-work-tabs [data-teacher-tab="profile"] {
  order: 5;
}

.teacher-work-tabs button {
  position: relative;
  min-height: 44px;
  color: #344054;
  background: #f8fbff;
  border: 1px solid #dbe6f2;
  border-radius: 7px;
  font-weight: 900;
}

.teacher-work-tabs button.active {
  color: #fff;
  border-color: var(--blue);
  background: linear-gradient(135deg, var(--blue), var(--teal));
}

.teacher-work-tabs b {
  display: inline-grid;
  min-width: 20px;
  height: 20px;
  margin-left: 8px;
  padding: 0 6px;
  place-items: center;
  color: #fff;
  background: #ef4444;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1;
}

.certificate-comment-rules {
  display: grid;
  gap: 10px;
  padding: 12px;
  background: #f8fbff;
  border: 1px solid #dbe7f5;
  border-radius: 8px;
}

.certificate-comment-rules > div:first-child {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
}

.certificate-comment-rules > div:first-child button {
  grid-column: auto;
  width: auto;
  min-height: 34px;
  padding: 6px 12px;
  font-size: 13px;
}

.certificate-comment-rules p {
  margin: 0;
  color: #66758d;
  font-size: 13px;
  line-height: 1.6;
}

.certificate-comment-rule {
  display: grid;
  grid-template-columns: 90px 90px minmax(0, 1fr);
  gap: 10px;
}

.teacher-tab-panel {
  display: none;
  width: 100%;
  min-width: 0;
}

.teacher-tab-panel.active {
  display: grid;
  gap: 18px;
}

.profile-sub-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
}

.profile-sub-tabs button {
  position: relative;
  min-height: 40px;
  color: #344054;
  background: #f8fbff;
  border: 1px solid #dbe6f2;
  border-radius: 7px;
  font-weight: 900;
}

.profile-sub-tabs button.active {
  color: #fff;
  border-color: var(--blue);
  background: linear-gradient(135deg, var(--teal), var(--blue));
}

.profile-sub-tabs b {
  display: inline-grid;
  min-width: 20px;
  height: 20px;
  margin-left: 8px;
  padding: 0 6px;
  place-items: center;
  color: #fff;
  background: #ef4444;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1;
}

.profile-sub-panel {
  display: none;
  width: 100%;
  min-width: 0;
}

.profile-sub-panel.active {
  display: grid;
  gap: 14px;
}

.profile-sub-panel[hidden] {
  display: none !important;
}

.student-management-shell,
.student-batch-list {
  display: grid;
  gap: 14px;
}

.student-management-shell section {
  display: grid;
  gap: 10px;
}

.teacher-homework-subtabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
  padding: 8px;
  border: 1px solid #d8e5f3;
  border-radius: 10px;
  background: #f7faff;
}

.teacher-homework-subtabs button {
  min-height: 42px;
  border: 1px solid #aac3eb;
  border-radius: 8px;
  color: #1958b8;
  background: #fff;
  font-weight: 900;
  cursor: pointer;
}

.teacher-homework-subtabs button.active {
  color: #fff;
  border-color: var(--blue);
  background: linear-gradient(135deg, var(--teal), var(--blue));
}

.teacher-homework-subpanel {
  display: grid;
  gap: 18px;
  width: 100%;
  min-width: 0;
}

.teacher-homework-subpanel[hidden] {
  display: none !important;
}

/* 课程合作仅在合作方自己的工作台中显示，沿用既有工作台的卡片与表格节奏。 */
.course-collaboration-work-panel {
  display: grid;
  gap: 18px;
  padding: 4px 0 0;
}
.course-collaboration-workspace { display: grid; gap: 18px; }
.course-collaboration-work-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 8px;
  border: 1px solid #d7e4f3;
  border-radius: 11px;
  background: #f4f8fd;
}
.course-collaboration-work-tabs button {
  min-height: 44px;
  border: 1px solid #a9c9ee;
  border-radius: 8px;
  color: #1653a5;
  background: #fff;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  transition: border-color .18s ease, box-shadow .18s ease, color .18s ease, background .18s ease, transform .18s ease;
}
.course-collaboration-work-tabs button:hover { border-color: #2584cd; color: #0d7c8a; transform: translateY(-1px); }
.course-collaboration-work-tabs button:focus-visible { outline: 3px solid rgba(32, 128, 203, .22); outline-offset: 2px; }
.course-collaboration-work-tabs button.active {
  border-color: transparent;
  color: #fff;
  background: linear-gradient(135deg, #1aa39a 0%, #246ed2 62%, #7258d8 100%);
  box-shadow: 0 8px 18px rgba(36, 110, 210, .18);
}
.course-collaboration-personal-panel { display: grid; gap: 18px; }
.course-collaboration-personal-grid { align-items: start; }
.course-collaboration-email-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.course-collaboration-email-form[hidden] { display: none !important; }
.course-collaboration-email-form label { display: grid; gap: 5px; color: #173b65; font-weight: 700; }
.course-collaboration-email-form input,
.course-collaboration-email-form button { min-height: 42px; box-sizing: border-box; border-radius: 7px; font: inherit; }
.course-collaboration-email-form input { width: 100%; padding: 0 11px; border: 1px solid #bed2eb; background: #fff; }
.course-collaboration-email-form input:focus-visible { outline: 3px solid rgba(32, 128, 203, .18); border-color: #2584cd; }
.course-collaboration-email-form button {
  border: 1px solid #2b78c9;
  color: #fff;
  background: linear-gradient(135deg, #1aa39a, #246ed2);
  font-weight: 800;
  cursor: pointer;
}
.course-collaboration-email-form button:disabled { cursor: not-allowed; opacity: .55; }
.course-collaboration-message-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.course-collaboration-message-head span { color: #137f8d; font-weight: 800; }
.course-collaboration-message-list { display: grid; gap: 8px; }
.course-collaboration-message-list > article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 5px 12px;
  padding: 12px;
  border: 1px solid #dce8f5;
  border-radius: 8px;
  background: #fff;
}
.course-collaboration-message-list > article strong { color: #123b68; }
.course-collaboration-message-list > article span { color: #6d7f94; font-size: 12px; }
.course-collaboration-message-list > article p { grid-column: 1 / -1; color: #405c78; }
.course-collaboration-personal-panel .role-form-message { min-height: 22px; margin: 0; color: #0b8177; font-weight: 700; }
.course-collaboration-personal-panel .role-form-message.error { color: #d43d45; }
.course-collaboration-business-panel { margin: 18px 0; }
.course-collaboration-work-panel .work-panel-head {
  margin: 0;
}
.course-collaboration-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.course-collaboration-summary-grid article,
.course-collaboration-record-section {
  border: 1px solid #d5e4f5;
  border-radius: 12px;
  background: #fff;
}
.course-collaboration-summary-grid article {
  padding: 16px 18px;
  display: grid;
  gap: 5px;
}
.course-collaboration-summary-grid span,
.course-collaboration-section-head span {
  color: #177e95;
  font-size: 13px;
  font-weight: 700;
}
.course-collaboration-summary-grid strong {
  color: #102f59;
  font-size: 24px;
  line-height: 1.2;
}
.course-collaboration-summary-grid small {
  color: #60758e;
}
.course-collaboration-record-section {
  overflow: hidden;
}
.course-collaboration-section-head {
  padding: 15px 18px;
  border-bottom: 3px solid transparent;
  border-image: linear-gradient(90deg, #1aa39a 0 18%, #5c58df 18% 32%, #e8eef8 32% 100%) 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.course-collaboration-section-head h3 {
  margin: 2px 0 0;
  color: #102f59;
  font-size: 18px;
}
.course-collaboration-table-wrap {
  overflow-x: auto;
}
.course-collaboration-work-panel table {
  width: 100%;
  min-width: 660px;
  border-collapse: collapse;
}
.course-collaboration-work-panel th,
.course-collaboration-work-panel td {
  padding: 12px 14px;
  border-bottom: 1px solid #e3edf8;
  text-align: center;
  white-space: nowrap;
}
.course-collaboration-work-panel th {
  background: #eef6ff;
  color: #15508d;
  font-weight: 700;
}
.course-collaboration-work-panel td:first-child,
.course-collaboration-work-panel th:first-child { text-align: left; }
.course-collaboration-work-panel tr.is-inactive { color: #8a97a8; background: #f7f8fa; }
.course-collaboration-work-status {
  display: inline-flex;
  padding: 3px 9px;
  border-radius: 999px;
  background: #e5f8f2;
  color: #0b8978;
  font-size: 12px;
  font-weight: 700;
}
.course-collaboration-work-status.is-inactive { background: #edf0f4; color: #778394; }
.course-collaboration-empty { padding: 18px; color: #6b7f98; text-align: center; }
.course-collaboration-history-month + .course-collaboration-history-month { border-top: 1px solid #dce8f5; }
.course-collaboration-history-month summary {
  padding: 14px 18px;
  display: grid;
  grid-template-columns: minmax(140px, 1fr) auto auto;
  gap: 18px;
  cursor: pointer;
  list-style: none;
}
.course-collaboration-history-month summary::-webkit-details-marker { display: none; }
.course-collaboration-history-month summary strong { color: #102f59; }
.course-collaboration-history-month summary span { color: #60758e; }
.course-collaboration-history-month summary b { color: #177e95; }
@media (max-width: 760px) {
  .course-collaboration-summary-grid { grid-template-columns: 1fr; }
  .course-collaboration-section-head { align-items: flex-start; flex-direction: column; }
  .course-collaboration-section-head .ghost { align-self: flex-end; }
  .course-collaboration-history-month summary { grid-template-columns: 1fr auto; gap: 6px 12px; }
  .course-collaboration-history-month summary span { grid-column: 1 / -1; }
  .course-collaboration-personal-grid,
  .course-collaboration-email-form { grid-template-columns: 1fr; }
  .course-collaboration-message-list > article { grid-template-columns: 1fr; }
  .course-collaboration-message-list > article p { grid-column: auto; }
}

.student-record-section-heading {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 54px;
  padding: 10px 14px;
  overflow: hidden;
  border: 1px solid #d9e7f5;
  border-left: 4px solid #2368da;
  border-radius: 9px;
  background: linear-gradient(100deg, #f8fbff 0%, #f1f8ff 62%, #f2fbf8 100%);
}

.student-record-section-heading::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 3px;
  content: "";
  background: linear-gradient(90deg, #2368da 0%, #4a78e2 48%, #1ba59b 100%);
}

.student-record-section-heading > div:first-child {
  display: grid;
  gap: 2px;
}

.student-record-section-heading span {
  color: #15968c;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.1em;
}

.student-record-section-heading h3 {
  color: #0c2344;
}

.student-record-section-decoration {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  padding-right: 2px;
}

.student-record-section-decoration i {
  display: block;
  width: 6px;
  height: 20px;
  border-radius: 999px;
  background: linear-gradient(180deg, #2f6de0, #21a69c);
  opacity: 0.35;
  transform: skewX(-18deg);
}

.student-record-section-decoration i:nth-child(2) {
  height: 28px;
  opacity: 0.58;
}

.student-record-section-decoration i:nth-child(3) {
  height: 36px;
  opacity: 0.86;
}

.learner-management-heading {
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: center;
  overflow: hidden;
  padding: 20px 22px 18px;
  border: 1px solid #d8e7f7;
  border-radius: 10px;
  background: linear-gradient(135deg, #f7fbff 0%, #edf7ff 58%, #effbf8 100%);
  box-shadow: 0 10px 24px rgba(31, 91, 153, 0.08);
}

.learner-management-heading::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 5px;
  background: linear-gradient(90deg, #2368da 0%, #4776e6 52%, #20a79c 100%);
}

.learner-management-heading > div:first-child {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.learner-management-heading span {
  color: #15968c;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.learner-management-heading h3 {
  color: #0c2344;
  font-size: clamp(22px, 2vw, 28px);
}

.learner-management-heading p {
  max-width: 760px;
  line-height: 1.7;
}

.learner-management-decoration {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 7px;
  padding-right: 4px;
}

.learner-management-decoration i {
  display: block;
  width: 9px;
  height: 38px;
  border-radius: 999px;
  background: linear-gradient(180deg, #2f6de0, #21a69c);
  opacity: 0.28;
  transform: skewX(-18deg);
}

.learner-management-decoration i:nth-child(2) {
  height: 50px;
  opacity: 0.52;
}

.learner-management-decoration i:nth-child(3) {
  height: 62px;
  opacity: 0.86;
}

.student-management-shell h3,
.student-management-shell p {
  margin: 0;
}

.student-management-shell p {
  color: #66758d;
  font-size: 13px;
}

.student-batch-card,
.student-empty-card {
  position: relative;
  padding: 14px;
  background: #f8fbff;
  border: 1px solid #dfe8f3;
  border-radius: 8px;
}

.student-batch-card + .student-batch-card {
  margin-top: 8px;
}

.student-batch-card + .student-batch-card::before {
  position: absolute;
  top: -13px;
  right: 4px;
  left: 4px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, #20a79c 0%, #2f70df 55%, #7059dc 100%);
  box-shadow: 0 2px 8px rgba(47, 112, 223, 0.18);
  content: "";
}

.student-batch-card summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  cursor: pointer;
  font-weight: 900;
}

.student-batch-card summary span {
  color: #66758d;
  font-size: 13px;
  font-weight: 800;
}

.student-batch-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0;
}

.student-batch-meta div {
  display: grid;
  gap: 4px;
  padding: 10px;
  background: #fff;
  border: 1px solid #e2ebf6;
  border-radius: 7px;
}

.student-batch-meta span,
.student-management-table td span,
.student-management-table small {
  color: #66758d;
  font-size: 12px;
}

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

.student-management-table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
  background: #fff;
  border: 1px solid #e1e8f2;
  border-radius: 8px;
  overflow: hidden;
}

.student-management-table th,
.student-management-table td {
  padding: 12px;
  border-bottom: 1px solid #e7edf5;
  text-align: left;
  vertical-align: top;
}

.student-management-table th {
  color: #344054;
  background: #eef5ff;
  font-size: 13px;
}

.student-management-table tr:last-child td {
  border-bottom: 0;
}

.student-score-list {
  display: grid;
  gap: 4px;
}

.certificate-issue-button {
  min-height: 34px;
  padding: 0 12px;
  color: #fff;
  background: linear-gradient(135deg, var(--blue), var(--teal));
  border: 0;
  border-radius: 7px;
  font-weight: 900;
  cursor: pointer;
}

.certificate-issue-button:disabled {
  color: #8a94a6;
  background: #e5e7eb;
  cursor: not-allowed;
}

.certificate-issued {
  display: inline-grid;
  min-height: 28px;
  align-items: center;
  padding: 4px 10px;
  color: #0f766e;
  background: #e7f8f4;
  border-radius: 999px;
  font-weight: 900;
}

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

.teacher-profile-grid > .work-message-reception-card {
  grid-column: 1 / -1;
}

.work-recruiter-profile-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.work-recruiter-profile-grid .business-license-card {
  grid-column: 1 / -1;
}

/* Role personal centres: business details and password settings share one row. */
.factory-profile-grid .factory-info-wide.role-business-info-card,
.work-recruiter-profile-grid .business-license-card.role-business-info-card {
  grid-column: auto;
}

.work-recruiter-profile-grid {
  align-items: stretch;
}

.work-recruiter-profile-grid .recruiter-business-settings-stack,
.work-recruiter-profile-grid .role-password-card {
  height: 100%;
  box-sizing: border-box;
}

.recruiter-service-history-card {
  margin-top: 14px;
  padding: 16px;
  border: 1px solid #d9e6f4;
  border-top: 4px solid #20a39a;
  border-radius: 10px;
  background: #fff;
}

.recruiter-service-history-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid #dfe8f3;
}

.recruiter-service-history-heading div {
  display: grid;
  gap: 3px;
}

.recruiter-service-history-heading span {
  color: #139c96;
  font-size: 12px;
  font-weight: 900;
}

.recruiter-service-history-heading h3,
.recruiter-service-history-heading p {
  margin: 0;
}

.recruiter-service-history-heading p {
  color: #63738a;
}

.recruiter-service-history-heading > b {
  padding: 5px 9px;
  color: #126b70;
  background: #e7f8f4;
  border-radius: 999px;
}

.recruiter-service-history-table-wrap {
  width: 100%;
  margin-top: 12px;
  overflow-x: auto;
}

.recruiter-service-history-table-wrap table {
  width: 100%;
  min-width: 900px;
  border-collapse: collapse;
}

.recruiter-service-history-table-wrap th,
.recruiter-service-history-table-wrap td {
  padding: 11px 12px;
  border: 1px solid #dce7f3;
  text-align: left;
  vertical-align: middle;
}

.recruiter-service-history-table-wrap th {
  color: #30445f;
  background: #f1f6fc;
  font-size: 13px;
  white-space: nowrap;
}

.recruiter-service-history-table-wrap td {
  color: #52647d;
  font-size: 13px;
}

.recruiter-service-history-table-wrap em {
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
}

.recruiter-service-history-table-wrap em.is-active {
  color: #087443;
  background: #dcfae6;
}

.recruiter-service-history-table-wrap em.is-expired {
  color: #9b2632;
  background: #fee4e2;
}

.recruiter-service-history-empty {
  padding: 24px;
  color: #66758d;
  text-align: center !important;
}

.recruiter-business-settings-stack {
  display: grid;
  gap: 12px;
  align-content: stretch;
  grid-template-rows: minmax(0, auto) minmax(0, 1fr);
}

.recruiter-business-settings-stack > article {
  box-sizing: border-box;
}

.recruiter-payment-password-card {
  align-content: start;
}

.recruiter-payment-password-card h3,
.recruiter-payment-password-card p {
  margin: 0;
}

.recruiter-payment-password-card p {
  margin-top: 5px;
  color: var(--muted);
}

.recruiter-payment-password-form {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: end;
}

.recruiter-payment-password-form button {
  grid-column: 1 / -1;
}

@media (max-width: 720px) {
  .recruiter-payment-password-form {
    grid-template-columns: minmax(0, 1fr);
  }
}

.role-password-card {
  align-content: start;
}

.role-password-card h3,
.role-password-card p {
  margin: 0;
}

.role-password-card > p {
  color: var(--muted);
}

.role-password-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 12px;
}

.role-password-form label {
  display: grid;
  gap: 6px;
}

.role-password-code-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
}

.role-password-code-row button,
.role-password-form > button {
  min-height: 42px;
  padding: 0 14px;
  color: #fff;
  background: linear-gradient(135deg, var(--blue), var(--teal));
  border-radius: 7px;
  font-weight: 900;
}

.teacher-profile-grid article {
  display: grid;
  gap: 8px;
  padding: 14px;
  background: #f8fbff;
  border: 1px solid #dfe8f3;
  border-radius: 8px;
}

.teacher-profile-grid h3,
.teacher-profile-grid p {
  margin: 0;
}

.teacher-unread-text {
  color: #dc2626;
  font-weight: 900;
}

.business-admin-profile-layout {
  display: grid;
  grid-template-columns: minmax(260px, 0.88fr) minmax(340px, 1.12fr);
  gap: 16px;
  align-items: stretch;
  padding: 18px;
}

.business-admin-profile-layout > #businessAdminProfileInfo,
.business-admin-inbox-column {
  display: grid;
  align-content: start;
  gap: 12px;
  min-width: 0;
  padding: 18px;
  background: linear-gradient(145deg, #fbfdff, #f3f8ff);
  border: 1px solid #d8e5f4;
  border-radius: 12px;
}

.business-admin-profile-layout > #businessAdminProfileInfo {
  grid-template-rows: auto repeat(3, auto);
  min-height: 202px;
}

.business-admin-profile-layout > #businessAdminProfileInfo h3,
.business-admin-inbox-column h3,
.business-admin-profile-layout > #businessAdminProfileInfo p,
.business-admin-inbox-column p {
  margin: 0;
}

.business-admin-profile-layout > #businessAdminProfileInfo h3,
.business-admin-inbox-column h3 {
  color: #102a4c;
  font-size: 18px;
}

.business-admin-profile-layout > #businessAdminProfileInfo p {
  padding: 9px 11px;
  color: #324a68;
  background: #fff;
  border: 1px solid #e1ebf7;
  border-radius: 8px;
}

.business-admin-inbox-column .work-message-reception-card {
  display: grid;
  gap: 7px;
  padding-bottom: 12px;
  border-bottom: 1px solid #dce8f5;
}

.business-admin-inbox-column .business-admin-inbox-list {
  gap: 8px;
}

.business-admin-inbox-column .business-admin-inbox-list article {
  padding: 12px;
  background: #fff;
  border-color: #dce8f5;
}

.business-admin-profile-layout p {
  line-height: 1.6;
  overflow-wrap: anywhere;
}

/* The personal centre is a compact information view, not a full-height console. */
.business-manager-body .command-stage:has([data-command-panel="profile"].active) {
  min-height: 0;
}

@media (max-width: 860px) {
  .business-admin-profile-layout {
    grid-template-columns: 1fr;
    padding: 14px;
  }

  .business-admin-profile-layout > #businessAdminProfileInfo {
    min-height: 0;
  }
}

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

.work-columns.recruiter-posts-row {
  grid-template-columns: minmax(0, 1fr);
}

.work-list {
  display: grid;
  gap: 10px;
}

.work-list article,
.work-lock {
  display: grid;
  gap: 7px;
  padding: 14px;
  background: #f8fbff;
  border: 1px solid #dfe8f3;
  border-radius: 8px;
}

.work-list article strong,
.work-lock strong {
  color: #172033;
}

.work-list article span {
  color: #66758d;
  font-size: 13px;
  font-weight: 800;
}

.teacher-inbox-list {
  gap: 7px;
}

.teacher-inbox-list article {
  gap: 4px;
  padding: 9px 12px;
}

.teacher-inbox-list article p {
  margin: 0;
  line-height: 1.45;
}

.teacher-inbox-list article span {
  font-size: 12px;
}

.teacher-inbox-list.factory-inbox-month-list {
  gap: 6px;
  max-height: min(64vh, 720px);
  padding-right: 4px;
  overflow-y: auto;
  scrollbar-gutter: stable;
}

.teacher-inbox-list.factory-inbox-partition-list {
  gap: 14px;
}

.factory-inbox-current-month,
.factory-inbox-history {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid #b8d7fb;
  border-radius: 8px;
  background: #f7fbff;
}

.factory-inbox-current-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: #172033;
}

.factory-inbox-current-head strong,
.factory-inbox-history h4 {
  margin: 0;
  font-size: 14px;
}

.factory-inbox-current-head span {
  min-width: 48px;
  padding: 2px 7px;
  color: #17645c;
  text-align: center;
  background: #e8f8f4;
  border-radius: 999px;
  font-size: 12px;
}

.factory-inbox-current-list {
  display: grid;
  gap: 4px;
  max-height: 570px;
  padding-right: 4px;
  overflow-y: auto;
  scrollbar-gutter: stable;
}

.factory-inbox-current-list .factory-inbox-entry {
  gap: 2px;
  padding: 5px 8px;
}

.factory-inbox-current-list .factory-inbox-entry strong {
  font-size: 14px;
  line-height: 1.25;
}

.factory-inbox-current-list .factory-inbox-entry span {
  font-size: 11px;
  line-height: 1.2;
}

.factory-inbox-current-list .factory-inbox-entry p {
  font-size: 13px;
  line-height: 1.3;
}

.factory-inbox-history {
  border-color: #dfe8f3;
}

.factory-inbox-empty {
  margin: 0;
  color: #66758d;
  font-size: 13px;
}

.factory-inbox-month {
  overflow: hidden;
  background: #f8fbff;
  border: 1px solid #dfe8f3;
  border-radius: 7px;
}

.factory-inbox-month > summary {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-height: 36px;
  padding: 5px 10px;
  color: #43526a;
  cursor: pointer;
  list-style: none;
}

.factory-inbox-month > summary::-webkit-details-marker {
  display: none;
}

.factory-inbox-month > summary:hover {
  background: #eef6ff;
}

.factory-inbox-month[open] > summary {
  background: #eef6ff;
  border-bottom: 1px solid #dfe8f3;
}

.factory-inbox-month > summary strong {
  color: #172033;
  font-size: 14px;
}

.factory-inbox-month > summary span {
  min-width: 48px;
  padding: 2px 7px;
  color: #17645c;
  text-align: center;
  background: #e8f8f4;
  border-radius: 999px;
  font-size: 12px;
}

.factory-inbox-month > summary small {
  overflow: hidden;
  color: #66758d;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.factory-inbox-month > summary b {
  color: #1765c1;
  font-size: 0;
  white-space: nowrap;
}

.factory-inbox-month > summary b::after {
  content: "查看明细";
  font-size: 12px;
}

.factory-inbox-month[open] > summary b::after {
  content: "收起";
}

.factory-inbox-month-details {
  display: grid;
  gap: 6px;
  padding: 6px;
}

.teacher-inbox-list .factory-inbox-entry {
  padding: 7px 10px;
  border-radius: 6px;
}

@media (max-width: 760px) {
  .factory-inbox-month > summary {
    grid-template-columns: auto auto 1fr;
  }

  .factory-inbox-month > summary small {
    grid-column: 1 / -1;
  }
}

.teacher-published-record-group {
  gap: 10px;
}

.teacher-published-record-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  align-items: stretch;
}

.teacher-published-record-cell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  min-height: 78px;
  padding: 8px 12px;
  text-align: left;
  align-content: center;
  align-items: center;
}

.teacher-published-record-copy {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.teacher-published-record-cell strong {
  font-size: 16px;
}

.teacher-published-record-cell span {
  font-size: 14px;
}

.teacher-published-record-cell small {
  color: #607089;
  font-size: 12px;
}

.teacher-auto-stop-button {
  min-height: 38px;
  padding: 8px 14px;
  border: 1px solid #dd7a7a;
  border-radius: 8px;
  color: #b42318;
  background: #fff7f7;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}

.teacher-auto-stop-button:hover:not(:disabled) {
  border-color: #c73f3f;
  background: #ffeded;
  box-shadow: 0 8px 18px rgba(180, 35, 24, 0.13);
}

.teacher-auto-stop-button:focus-visible {
  outline: 3px solid rgba(36, 110, 210, 0.24);
  outline-offset: 2px;
}

.teacher-auto-stop-button:active:not(:disabled) {
  transform: translateY(1px) scale(0.98);
}

.teacher-auto-stop-button:disabled {
  border-color: #d6dee9;
  color: #7b8797;
  background: #eef2f7;
  cursor: default;
}

.teacher-auto-record-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.teacher-auto-delete-button {
  min-height: 38px;
  padding: 8px 12px;
  border: 1px solid #e45d5d;
  border-radius: 8px;
  color: #b42318;
  background: #fff;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
}

.teacher-auto-delete-button:hover:not(:disabled) {
  color: #fff;
  background: #cf3535;
  border-color: #cf3535;
}

.teacher-auto-settings-empty {
  margin: 2px 0 0;
}

@media (max-width: 720px) {
  .teacher-published-record-grid {
    grid-template-columns: 1fr;
  }

  .teacher-published-record-cell {
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 12px;
  }

  .teacher-auto-stop-button {
    max-width: 132px;
    white-space: normal;
  }

  .teacher-auto-record-actions { align-items: stretch; }
  .teacher-auto-stop-button,
  .teacher-auto-delete-button { padding-inline: 10px; }
}

.teacher-homework-review-queue {
  display: grid;
  gap: 10px;
}

.teacher-homework-review-item {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  gap: 10px !important;
  align-items: start;
  padding: 14px;
  border: 1px solid #dbe6f2;
  border-radius: 8px;
  background: #f8fbff;
  cursor: pointer;
}

.teacher-homework-review-item input {
  width: auto;
  min-height: auto;
  margin-top: 4px;
}

.teacher-homework-review-item span {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.teacher-homework-review-item small {
  color: #66758d;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.5;
}

.teacher-homework-review-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-self: start;
}

.teacher-homework-review-actions button {
  justify-self: start;
  min-height: 42px;
  padding: 0 18px;
  color: #fff;
  background: linear-gradient(135deg, var(--blue), var(--teal));
  border-radius: 7px;
  font-weight: 900;
}

.teacher-homework-review-actions .teacher-manual-review-open {
  border: 1px solid #8eaef0;
  color: #1555bd;
  background: #edf4ff;
}

.teacher-homework-review-actions button:hover:not(:disabled) {
  box-shadow: 0 8px 18px rgba(32, 103, 190, 0.18);
  transform: translateY(-1px);
}

.teacher-homework-review-actions button:focus-visible {
  outline: 3px solid rgba(36, 110, 210, 0.24);
  outline-offset: 2px;
}

.teacher-homework-review-actions button:active:not(:disabled) {
  transform: translateY(1px) scale(0.98);
}

.teacher-homework-review-actions button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.teacher-manual-review-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  padding: 28px;
  background: rgba(14, 31, 56, 0.58);
  backdrop-filter: blur(3px);
}

.teacher-manual-review-dialog {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: min(1040px, 100%);
  max-height: min(90vh, 900px);
  overflow: hidden;
  border: 1px solid #cedded;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 26px 80px rgba(9, 31, 60, 0.28);
}

.teacher-manual-review-dialog > header,
.teacher-manual-review-dialog > footer {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 24px;
  background: #f7faff;
}

.teacher-manual-review-dialog > header {
  border-bottom: 1px solid #dce7f3;
}

.teacher-manual-review-dialog > header span {
  color: var(--teal);
  font-weight: 900;
}

.teacher-manual-review-dialog > header h3 {
  margin: 4px 0 6px;
  color: #102a4f;
  font-size: 23px;
}

.teacher-manual-review-dialog > header p {
  margin: 0;
  color: #61728a;
  line-height: 1.6;
}

.teacher-manual-review-dialog > header button,
.teacher-manual-review-dialog > footer button,
.teacher-manual-score-form button {
  min-height: 42px;
  padding: 0 18px;
  border: 1px solid #8eaef0;
  border-radius: 8px;
  color: #fff;
  background: linear-gradient(135deg, var(--blue), var(--teal));
  font-weight: 900;
  white-space: nowrap;
}

.teacher-manual-review-dialog > header button {
  color: #1555bd;
  background: #fff;
}

.teacher-manual-review-dialog button:hover {
  box-shadow: 0 8px 18px rgba(32, 103, 190, 0.18);
  transform: translateY(-1px);
}

.teacher-manual-review-dialog button:focus-visible,
.teacher-manual-review-dialog input:focus-visible,
.teacher-manual-review-dialog textarea:focus-visible,
.teacher-manual-review-files a:focus-visible {
  outline: 3px solid rgba(36, 110, 210, 0.24);
  outline-offset: 2px;
}

.teacher-manual-review-dialog button:active {
  transform: translateY(1px) scale(0.98);
}

.teacher-manual-review-body {
  display: grid;
  gap: 16px;
  min-height: 0;
  padding: 20px 24px;
  overflow: auto;
  overscroll-behavior: contain;
}

.teacher-manual-review-course {
  padding: 0;
  overflow: hidden;
  border: 1px solid #d8e5f3;
  border-radius: 12px;
  background: #fff;
}

.teacher-manual-review-course-head {
  display: grid;
  gap: 5px;
  padding: 15px 18px;
  background: #edf6ff;
}

.teacher-manual-review-course-head strong {
  color: #12345c;
  font-size: 17px;
}

.teacher-manual-review-course-head span {
  color: #61728a;
  font-weight: 700;
}

.teacher-manual-review-students {
  display: grid;
  gap: 10px;
  padding: 14px;
}

.teacher-manual-review-student {
  border: 1px solid #dce7f3;
  border-radius: 9px;
  background: #fbfdff;
}

.teacher-manual-review-student > summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 16px;
  padding: 13px 15px;
  cursor: pointer;
  list-style: none;
}

.teacher-manual-review-student > summary::-webkit-details-marker {
  display: none;
}

.teacher-manual-review-student > summary span {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.teacher-manual-review-student > summary small {
  color: #6a7890;
}

.teacher-manual-review-student > summary b {
  color: #087f76;
}

.teacher-manual-review-student > summary em {
  color: #1764cc;
  font-style: normal;
  font-weight: 900;
}

.teacher-manual-review-student[open] > summary {
  border-bottom: 1px solid #dce7f3;
  background: #f2f7fe;
}

.teacher-manual-review-content {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
  gap: 18px;
  padding: 16px;
}

.teacher-manual-review-content > section,
.teacher-manual-score-form {
  display: grid;
  align-content: start;
  gap: 11px;
  min-width: 0;
}

.teacher-manual-review-content h4,
.teacher-manual-review-answer {
  margin: 0;
}

.teacher-manual-review-answer {
  min-height: 90px;
  padding: 13px;
  overflow-wrap: anywhere;
  border: 1px solid #e1eaf4;
  border-radius: 8px;
  background: #fff;
  color: #3f526c;
  line-height: 1.7;
  white-space: pre-wrap;
}

.teacher-manual-review-files {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.teacher-manual-review-files a,
.teacher-manual-review-files span {
  padding: 8px 10px;
  border: 1px solid #c9dcf1;
  border-radius: 7px;
  color: #1555bd;
  background: #f3f8ff;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.teacher-manual-score-form {
  padding: 14px;
  border: 1px solid #cfe0f2;
  border-radius: 9px;
  background: #f7fbff;
}

.teacher-manual-score-form label {
  display: grid;
  gap: 7px;
  color: #243c5c;
  font-weight: 900;
}

.teacher-manual-score-form input,
.teacher-manual-score-form textarea {
  width: 100%;
  min-height: 43px;
  padding: 10px 12px;
  border: 1px solid #cbd9e9;
  border-radius: 7px;
  color: #122944;
  background: #fff;
  font: inherit;
  resize: vertical;
}

.teacher-manual-score-form button {
  justify-self: start;
}

.teacher-manual-review-dialog > footer {
  justify-content: flex-end;
  border-top: 1px solid #dce7f3;
}

.teacher-manual-review-empty {
  margin: 0;
  padding: 14px;
  color: #61728a;
  background: #f7faff;
}

@media (max-width: 720px) {
  .teacher-homework-review-actions {
    width: 100%;
  }

  .teacher-homework-review-actions button {
    flex: 1 1 130px;
  }

  .teacher-manual-review-overlay {
    align-items: end;
    padding: 0;
  }

  .teacher-manual-review-dialog {
    width: 100%;
    max-height: 94vh;
    border-radius: 16px 16px 0 0;
  }

  .teacher-manual-review-dialog > header,
  .teacher-manual-review-dialog > footer,
  .teacher-manual-review-body {
    padding: 15px;
  }

  .teacher-manual-review-dialog > header {
    gap: 10px;
  }

  .teacher-manual-review-dialog > header h3 {
    font-size: 20px;
  }

  .teacher-manual-review-dialog > header p {
    font-size: 13px;
  }

  .teacher-manual-review-student > summary {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
  }

  .teacher-manual-review-student > summary em {
    grid-column: 1 / -1;
  }

  .teacher-manual-review-content {
    grid-template-columns: 1fr;
    padding: 12px;
  }

  .teacher-manual-score-form button,
  .teacher-manual-review-dialog > footer button {
    width: 100%;
  }
}

.teacher-homework-class-detail {
  margin: -4px 0 4px 36px;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid #dbe6f2;
  border-radius: 8px;
}

.teacher-homework-class-detail > summary {
  color: #1764cc;
  cursor: pointer;
  font-weight: 900;
}

.teacher-homework-student-list {
  display: grid;
  gap: 7px;
  margin-top: 10px;
}

.teacher-homework-student-item {
  padding: 9px 10px;
  background: #f8fbff;
  border: 1px solid #e3ecf7;
  border-radius: 7px;
}

.teacher-homework-student-item summary {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  list-style: none;
}

.teacher-homework-student-item summary::-webkit-details-marker {
  display: none;
}

.teacher-homework-student-identity {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
}

.teacher-homework-student-identity small {
  color: #687b94;
  font-weight: 700;
}

.teacher-homework-student-item div {
  display: grid;
  gap: 5px;
  margin-top: 8px;
  color: #52637c;
}

.teacher-homework-student-item p,
.teacher-homework-student-item small {
  margin: 0;
}

.teacher-homework-inline-files {
  gap: 7px !important;
  margin-top: 0 !important;
}

.teacher-homework-file-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 10px;
  background: #fff;
  border: 1px solid #d9e5f2;
  border-radius: 8px;
}

.teacher-homework-file-actions {
  display: flex;
  flex: 0 0 auto;
  gap: 7px;
}

.teacher-homework-file-actions button {
  min-height: 34px;
  padding: 6px 14px;
  color: #1764cc;
  background: #f7fbff;
  border: 1px solid #aecaef;
  border-radius: 7px;
  font-weight: 800;
  cursor: pointer;
}

.teacher-homework-student-item .teacher-homework-inline-score {
  position: relative;
  grid-template-columns: minmax(190px, 0.34fr) minmax(320px, 1fr) minmax(104px, auto);
  align-items: end;
  gap: 14px;
  margin-top: 12px;
  padding: 16px;
  overflow: hidden;
  color: #122944;
  background: linear-gradient(135deg, #f4f9ff 0%, #edf6ff 56%, #f3fbfa 100%);
  border: 1px solid #bfd7f1;
  border-radius: 12px;
  box-shadow: 0 8px 22px rgba(38, 92, 154, 0.09);
}

.teacher-homework-student-item .teacher-homework-inline-score::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(180deg, #20a69d, #276fda);
}

.teacher-homework-inline-score label {
  display: grid;
  gap: 6px;
  font-weight: 800;
}

.teacher-homework-inline-score input,
.teacher-homework-inline-score textarea {
  width: 100%;
  height: 96px;
  min-height: 96px;
  padding: 12px 13px;
  border: 1px solid #bfd0e4;
  border-radius: 9px;
  color: #122944;
  background: #fff;
  font: inherit;
  outline: none;
  resize: none;
  box-shadow: inset 0 1px 2px rgba(20, 58, 100, 0.04);
}

.teacher-homework-inline-score input:focus,
.teacher-homework-inline-score textarea:focus {
  border-color: #2877d8;
  box-shadow: 0 0 0 3px rgba(40, 119, 216, 0.12);
}

.teacher-homework-inline-score button {
  min-height: 48px;
  padding: 10px 18px;
  color: #fff;
  background: linear-gradient(135deg, #20a69d, #276fda);
  border: 0;
  border-radius: 9px;
  box-shadow: 0 7px 16px rgba(39, 111, 218, 0.2);
  font-weight: 900;
  white-space: nowrap;
  cursor: pointer;
}

.teacher-homework-file-viewer {
  position: fixed;
  inset: 0;
  z-index: 1600;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(8, 24, 46, 0.72);
  backdrop-filter: blur(4px);
}

.teacher-homework-file-dialog {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(1080px, 96vw);
  height: min(820px, 92vh);
  overflow: hidden;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.32);
}

.teacher-homework-file-dialog > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
  color: #102744;
  background: #f5f9ff;
  border-bottom: 1px solid #d9e5f2;
}

.teacher-homework-file-dialog > header div {
  display: flex;
  gap: 8px;
}

.teacher-homework-file-dialog button {
  min-height: 38px;
  padding: 8px 16px;
  color: #1764cc;
  background: #fff;
  border: 1px solid #aecaef;
  border-radius: 8px;
  font-weight: 800;
  cursor: pointer;
}

.teacher-homework-file-stage {
  display: grid;
  place-items: center;
  min-height: 0;
  padding: 18px;
  overflow: auto;
  background: #eaf1f8;
}

.teacher-homework-file-stage img,
.teacher-homework-file-stage video,
.teacher-homework-file-stage iframe {
  display: block;
  max-width: 100%;
  max-height: 100%;
  border: 0;
  object-fit: contain;
}

.teacher-homework-file-stage iframe {
  width: 100%;
  height: 100%;
  background: #fff;
}

.teacher-homework-file-stage audio {
  width: min(680px, 100%);
}

.teacher-homework-file-viewer-open {
  overflow: hidden;
}

@media (max-width: 720px) {
  .teacher-homework-class-detail {
    margin-left: 0;
  }

  .teacher-homework-student-item .teacher-homework-inline-score {
    grid-template-columns: 1fr;
  }

  .teacher-homework-inline-score button {
    width: 100%;
  }

  .teacher-homework-file-row,
  .teacher-homework-file-dialog > header {
    align-items: stretch;
    flex-direction: column;
  }

  .teacher-homework-file-actions button,
  .teacher-homework-file-dialog > header button {
    flex: 1;
  }

  .teacher-homework-file-viewer {
    padding: 0;
  }

  .teacher-homework-file-dialog {
    width: 100%;
    height: 100%;
    border-radius: 0;
  }
}

.teacher-reviewed-record {
  padding: 0;
  border: 1px solid #dbe6f2;
  border-radius: 8px;
  background: #f8fbff;
}

.teacher-reviewed-record summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 14px;
  cursor: pointer;
  list-style: none;
}

.teacher-reviewed-record summary::-webkit-details-marker {
  display: none;
}

.teacher-reviewed-record-copy {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.teacher-reviewed-record-copy > span {
  color: #66758d;
  font-size: 13px;
  font-weight: 800;
}

.teacher-reviewed-record-action {
  min-width: 62px;
  padding: 7px 10px;
  border: 1px solid #c9dcf3;
  border-radius: 6px;
  color: #1764cc;
  background: #fff;
  font-size: 13px;
  text-align: center;
}

.teacher-reviewed-record-action::before {
  content: "查看";
}

.teacher-reviewed-record[open] .teacher-reviewed-record-action::before {
  content: "收起";
}

.teacher-reviewed-score-list {
  display: grid;
  gap: 8px;
  padding: 0 14px 14px;
}

.teacher-reviewed-score-row {
  display: grid;
  grid-template-columns: minmax(135px, 1fr) minmax(90px, 0.65fr) minmax(110px, 0.75fr) minmax(220px, 1.8fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid #e3ebf5;
  border-radius: 7px;
  background: #fff;
}

.teacher-reviewed-score-row > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.teacher-reviewed-score-row span,
.teacher-reviewed-score-row small {
  color: #66758d;
  font-size: 12px;
  font-weight: 800;
}

.teacher-reviewed-score-row p {
  margin: 0;
  color: #40506a;
  font-size: 13px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.teacher-reviewed-student-record {
  display: block;
  padding: 0;
  overflow: hidden;
}

.teacher-reviewed-student-record summary {
  display: grid;
  grid-template-columns: minmax(135px, 1fr) minmax(90px, 0.65fr) minmax(110px, 0.75fr) auto auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  cursor: pointer;
  list-style: none;
}

.teacher-reviewed-student-record summary::-webkit-details-marker {
  display: none;
}

.teacher-reviewed-student-record[open] summary {
  border-bottom: 1px solid #e3ecf7;
}

.teacher-reviewed-student-action {
  min-width: 86px;
  padding: 7px 10px;
  color: #1764cc;
  background: #fff;
  border: 1px solid #c9dcf3;
  border-radius: 6px;
  font-size: 12px;
  text-align: center;
}

.teacher-reviewed-student-action::before {
  content: "查看作业";
}

.teacher-reviewed-student-record[open] .teacher-reviewed-student-action::before {
  content: "收起作业";
}

.teacher-reviewed-student-detail {
  display: grid;
  gap: 7px;
  padding: 10px 12px 12px;
  color: #52637c;
  background: #f8fbff;
}

.teacher-reviewed-student-detail p {
  margin: 0;
  line-height: 1.55;
}

.teacher-reviewed-student-detail strong {
  color: #172033;
}

@media (max-width: 920px) {
  .teacher-reviewed-score-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .teacher-reviewed-student-record summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .teacher-reviewed-score-row > div:nth-child(4),
  .teacher-reviewed-score-row > small,
  .teacher-reviewed-student-action,
  .teacher-reviewed-student-record summary > small {
    grid-column: 1 / -1;
  }
}

@media (max-width: 560px) {
  .teacher-reviewed-score-row {
    grid-template-columns: 1fr;
  }

  .teacher-reviewed-student-record summary {
    grid-template-columns: 1fr;
  }

  .teacher-reviewed-score-row > div:nth-child(4),
  .teacher-reviewed-score-row > small,
  .teacher-reviewed-student-record summary > small {
    grid-column: auto;
  }
}

.teacher-published-batch-list {
  display: grid;
  gap: 8px;
}

.teacher-published-batch-list p {
  display: grid;
  gap: 3px;
  margin: 0;
}

.teacher-published-batch-list b {
  color: #172033;
}

.teacher-published-batch-list small {
  color: #66758d;
  font-size: 12px;
  font-weight: 800;
}

.work-inbox-application details {
  display: grid;
  gap: 12px;
}

.work-inbox-application summary {
  display: grid;
  gap: 7px;
  cursor: pointer;
  list-style-position: inside;
}

.work-inbox-application summary p {
  margin: 0;
}

.work-inbox-resume {
  padding-top: 10px;
  border-top: 1px solid #e2ebf5;
}

.work-inbox-resume .recruiter-detail-card {
  margin-top: 0;
  background: #fff;
}

.work-lock {
  background: #fff9db;
  border-color: #eadf9f;
}

.recruiter-service-lock {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
}

.recruiter-service-lock > div {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.recruiter-service-lock p {
  margin: 0;
}

.recruiter-service-purchase {
  min-width: 132px;
  justify-content: center;
  white-space: nowrap;
}

@media (max-width: 720px) {
  .recruiter-service-lock {
    grid-template-columns: 1fr;
  }

  .recruiter-service-purchase {
    width: 100%;
  }
}

.finance-export-form {
  grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
  align-items: center;
}

.finance-export-form .check-field {
  display: flex;
  align-items: center;
  gap: 8px;
}

.finance-export-form .check-field input {
  width: auto;
  min-height: auto;
}

.finance-export-form button {
  grid-column: auto;
}

.finance-stats-form {
  display: grid;
  gap: 14px;
}

.finance-stats-module {
  display: grid;
  gap: 16px;
  width: 100%;
  min-width: 0;
}

.finance-shared-dashboard {
  width: 100%;
  min-width: 0;
  margin: 0;
}

.admin-finance-status {
  margin: 0;
  padding: 10px 12px;
  color: #0f766e;
  background: #ecfdf8;
  border: 1px solid #a7e2d8;
  border-radius: 7px;
  font-weight: 800;
}

#adminFinanceStats .teacher-work-tabs.finance-stats-tabs {
  grid-template-columns: repeat(7, minmax(145px, 1fr));
  overflow-x: auto;
  overflow-y: hidden;
}

.finance-stats-module > .finance-stats-tabs {
  display: grid;
  grid-template-columns: repeat(7, minmax(145px, 1fr));
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
}

.finance-stats-module > .finance-stats-tabs button {
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid #d6e2f1;
  border-radius: 7px;
  color: #344054;
  background: #f8fbff;
  font-weight: 900;
}

.finance-stats-module > .finance-stats-tabs button.active {
  color: #fff;
  border-color: var(--blue);
  background: linear-gradient(135deg, var(--blue), var(--teal));
}

.teacher-work-tabs.finance-stats-tabs {
  grid-template-columns: repeat(7, minmax(145px, 1fr));
  overflow-x: auto;
  overflow-y: hidden;
}

.teacher-work-tabs.finance-top-tabs {
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  margin-bottom: 14px;
}

.finance-reconciliation-tabs {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0 0 14px;
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.finance-reconciliation-tabs button {
  min-height: 44px;
  padding: 0 14px;
  border-radius: 7px;
  font-size: 14px;
  font-weight: 900;
}

.work-panel.finance-work,
.finance-reconciliation-section,
.finance-reconciliation-table,
[data-admin-reconciliation-export],
[data-finance-reconciliation-export],
[data-admin-reconciliation-panel],
[data-finance-reconciliation-panel] {
  min-width: 0;
  max-width: 100%;
}

.finance-commission-grid > .finance-commission-side {
  display: grid;
  gap: 18px;
  align-content: start;
}

@media (max-width: 720px) {
  .work-panel.finance-work,
  .finance-reconciliation-section,
  .finance-reconciliation-table,
  [data-admin-reconciliation-export],
  [data-finance-reconciliation-export],
  [data-admin-reconciliation-panel],
  [data-finance-reconciliation-panel] {
    min-width: 0;
    max-width: 100%;
  }

  .finance-reconciliation-tabs {
    grid-template-columns: minmax(0, 1fr);
    width: auto;
    min-width: 0;
    max-width: 100%;
    justify-self: stretch;
    overflow: hidden;
  }

  .finance-reconciliation-tabs button {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  .finance-work-head-actions {
    width: 100%;
    flex-wrap: wrap;
  }

  .finance-work .work-panel-head {
    grid-template-columns: minmax(0, 1fr);
  }

  .finance-work .work-panel-head > .finance-work-head-actions {
    grid-column: 1;
    grid-row: auto;
    margin-top: 8px;
  }

  .finance-work-head-actions > * {
    flex: 1 1 140px;
    justify-content: center;
  }
}

.finance-reconciliation-section {
  display: grid;
  gap: 12px;
  padding: 4px 0 2px;
}

.finance-senior-statement-strip {
  width: 100%;
  height: 6px;
  margin: 2px 0 12px;
  border-radius: 999px;
  background: linear-gradient(90deg, #20a39e 0%, #2878d4 42%, #7056d8 72%, #f2a34a 100%);
  box-shadow: 0 6px 18px rgba(40, 120, 212, 0.18);
}

.finance-senior-statement-intro {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  align-items: baseline;
  padding: 12px 14px;
  border: 1px solid #d8e7f6;
  border-radius: 10px;
  color: #52637a;
  background: linear-gradient(110deg, #f0fcfa, #f4f8ff 58%, #faf7ff);
}

.finance-senior-statement-intro strong {
  color: #176b78;
  font-size: 16px;
}

.finance-senior-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 62px;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
}

.work-status-actions {
  display: flex;
  flex: 0 0 auto;
  gap: 10px;
  align-items: center;
  margin-left: auto;
}

.work-status-actions .button,
.work-status-actions .classroom-logout-button {
  min-height: 38px;
  margin: 0;
}

.finance-senior-status.is-active {
  color: #08766f;
  background: #dcf7f1;
}

.finance-senior-status.is-closed {
  color: #6b7280;
  background: #edf0f4;
}

[data-admin-reconciliation-panel="senior"] .finance-reconciliation-table table,
[data-finance-reconciliation-panel="senior"] .finance-reconciliation-table table {
  min-width: 1680px;
}

.finance-reconciliation-heading {
  display: grid;
  gap: 4px;
  padding: 12px 0 9px;
  border-top: 3px solid transparent;
  border-image: linear-gradient(90deg, #20a39e, #2878d4, #7056d8, transparent) 1;
}

.finance-reconciliation-heading h3 {
  margin: 0;
  color: #17243a;
}

.finance-reconciliation-heading p {
  margin: 0;
  color: #66758d;
  font-size: 13px;
}

.finance-reconciliation-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: end;
  padding: 10px 12px;
  border: 1px solid #dce8f5;
  border-left: 4px solid #2878d4;
  border-radius: 8px 8px 0 0;
  background: linear-gradient(90deg, #f4fbff, #fbfdff);
}

.finance-reconciliation-toolbar > span {
  margin-right: auto;
  color: #176b78;
  font-weight: 800;
}

.finance-reconciliation-toolbar label {
  display: grid;
  gap: 4px;
  color: #52637a;
  font-size: 12px;
  font-weight: 700;
}

.finance-reconciliation-toolbar input {
  min-height: 34px;
  padding: 5px 8px;
  border: 1px solid #bdd2e8;
  border-radius: 6px;
  color: #17243a;
  background: #fff;
}

.finance-reconciliation-toolbar i {
  padding-bottom: 8px;
  color: #7b8da5;
  font-style: normal;
}

.finance-reconciliation-toolbar button {
  min-height: 34px;
  padding: 0 12px;
}

.finance-reconciliation-table {
  width: 100%;
  max-width: 100%;
  max-height: 540px;
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  border: 1px solid #dfe8f3;
  border-radius: 8px;
  background: #fff;
  scrollbar-gutter: stable;
}

.finance-reconciliation-table::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

.finance-reconciliation-table::-webkit-scrollbar-track {
  background: #edf3fa;
  border-radius: 999px;
}

.finance-reconciliation-table::-webkit-scrollbar-thumb {
  border: 2px solid #edf3fa;
  border-radius: 999px;
  background: #7f94ad;
}

.finance-reconciliation-table table {
  width: 100%;
  min-width: 920px;
  margin: 0;
  table-layout: fixed;
  font-size: 13px;
}

[data-finance-reconciliation-panel="factory"] .finance-reconciliation-table table,
[data-admin-reconciliation-panel="factory"] .finance-reconciliation-table table {
  min-width: 1660px;
}

[data-finance-reconciliation-panel="factory"] .finance-reconciliation-table :is(th, td):nth-child(1),
[data-admin-reconciliation-panel="factory"] .finance-reconciliation-table :is(th, td):nth-child(1) {
  width: 380px;
}

[data-finance-reconciliation-panel="factory"] .finance-reconciliation-table :is(th, td):nth-child(2),
[data-admin-reconciliation-panel="factory"] .finance-reconciliation-table :is(th, td):nth-child(2) {
  width: 310px;
}

[data-finance-reconciliation-panel="freight"] .finance-reconciliation-table table,
[data-admin-reconciliation-panel="freight"] .finance-reconciliation-table table {
  min-width: 1840px;
}

[data-finance-reconciliation-panel="freight"] .finance-reconciliation-table :is(th, td):nth-child(1),
[data-admin-reconciliation-panel="freight"] .finance-reconciliation-table :is(th, td):nth-child(1) {
  width: 380px;
}

[data-finance-reconciliation-panel="freight"] .finance-reconciliation-table :is(th, td):nth-child(2),
[data-admin-reconciliation-panel="freight"] .finance-reconciliation-table :is(th, td):nth-child(2) {
  width: 300px;
}

.finance-reconciliation-table th,
.finance-reconciliation-table td {
  padding: 10px 8px;
  text-align: center;
  vertical-align: middle;
  font-size: 13px !important;
  line-height: 1.4;
  white-space: normal;
  word-break: break-word;
}

.finance-reconciliation-table th {
  position: sticky;
  z-index: 2;
  top: 0;
  color: #193a5c;
  background: linear-gradient(180deg, #f7fbff, #eef6ff);
  font-weight: 900;
}

.finance-contact-cell {
  display: inline-flex;
  max-width: 100%;
  gap: 8px;
  align-items: center;
  justify-content: center;
  line-height: 1.25;
  white-space: nowrap;
}

.finance-contact-cell strong {
  color: #17243a;
  font-size: 12px !important;
  font-weight: 800;
  white-space: nowrap;
}

.finance-contact-cell small {
  color: #2563a9;
  font-size: 11px !important;
  font-weight: 700;
  white-space: nowrap;
}

.finance-tracking-lines {
  display: inline-grid;
  gap: 4px;
  justify-items: center;
}

.finance-tracking-line {
  display: block;
  white-space: nowrap;
}

.finance-reconciliation-table tbody tr:nth-child(even) {
  background: #fbfdff;
}

.finance-exception {
  color: #dc2626;
  font-weight: 800;
}

.finance-registration-tabs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  padding: 10px;
  border: 1px solid #dfe8f3;
  border-radius: 8px;
  background: #f8fbff;
}

.finance-registration-tabs button,
.finance-stats-form .finance-registration-tabs button {
  justify-self: stretch;
  min-height: 40px;
  padding: 0 12px;
  color: #344054;
  background: #fff;
  border: 1px solid #c9d9ec;
  border-radius: 6px;
  font-weight: 900;
}

.finance-registration-tabs button.active,
.finance-stats-form .finance-registration-tabs button.active {
  color: #fff;
  border-color: #178c84;
  background: linear-gradient(135deg, #2474d8, #16a39a);
}

.finance-stats-toolbar {
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
  min-height: 56px;
  padding: 10px 12px;
  border: 1px solid #dfe8f3;
  border-radius: 7px;
  background: #f8fbff;
}

.finance-stats-toolbar p {
  margin: 0;
  color: #52637c;
  font-weight: 800;
}

.finance-stats-toolbar.is-summary-hidden {
  justify-content: flex-end;
}

.finance-stats-toolbar.is-summary-hidden > div {
  width: 100%;
}

.finance-ecommerce-filters {
  display: grid;
  grid-template-columns: minmax(140px, 0.7fr) repeat(2, minmax(210px, 1fr)) auto;
  gap: 10px;
  align-items: end;
  padding: 10px 12px;
  border: 1px solid #dfe8f3;
  border-radius: 7px;
  background: #f8fbff;
}

.finance-ecommerce-filters > strong {
  align-self: center;
  color: #175fae;
}

.finance-ecommerce-filters label {
  display: grid;
  gap: 4px;
  min-width: 0;
  color: #52637c;
  font-size: 12px;
  font-weight: 800;
}

.finance-ecommerce-filters select {
  width: 100%;
  min-height: 38px;
  padding: 0 34px 0 10px;
  color: #172033;
  background: #fff;
  border: 1px solid #bfd3eb;
  border-radius: 6px;
  font: inherit;
}

.finance-ecommerce-filters button,
.finance-stats-form .finance-ecommerce-filters button {
  min-height: 38px;
  padding: 0 14px;
  color: #185da8;
  background: #fff;
  border: 1px solid #bfd3eb;
  border-radius: 6px;
  font-weight: 900;
}

.finance-stats-toolbar > div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.finance-stats-date-range {
  display: grid;
  grid-template-columns: 132px auto 132px;
  align-items: end;
  gap: 6px;
}

.finance-stats-date-range label {
  display: grid;
  gap: 3px;
  color: #52637c;
  font-size: 11px;
  font-weight: 800;
}

.finance-stats-date-range label span {
  line-height: 1;
}

.finance-stats-date-range input {
  width: 100%;
  min-height: 38px;
  padding: 0 8px;
  color: #172033;
  background: #fff;
  border: 1px solid #bfd3eb;
  border-radius: 6px;
  font: inherit;
}

.finance-stats-date-range i {
  align-self: end;
  padding-bottom: 10px;
  color: #64748b;
  font-size: 12px;
  font-style: normal;
}

.finance-stats-toolbar button,
.finance-stats-form .finance-stats-toolbar button {
  justify-self: auto;
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid #bfd3eb;
  border-radius: 6px;
  color: #185da8;
  background: #fff;
  font-weight: 900;
}

.finance-stats-toolbar button:last-child,
.finance-stats-form .finance-stats-toolbar button:last-child {
  color: #fff;
  border-color: var(--blue);
  background: var(--blue);
}

.finance-current-month-label {
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 2px 0 8px;
  padding: 9px 12px;
  color: #175f9d;
  border: 1px solid #cfe0f3;
  border-left: 4px solid #2878d4;
  border-radius: 7px;
  background: linear-gradient(90deg, #f1f8ff, #fbfdff);
  font-weight: 900;
}

.finance-stat-history {
  display: grid;
  gap: 10px;
  margin-top: 16px;
  padding-top: 13px;
  border-top: 3px solid transparent;
  border-image: linear-gradient(90deg, #20a39e, #2878d4, #7056d8, transparent) 1;
}

.finance-stat-history-heading {
  display: grid;
  gap: 4px;
}

.finance-stat-history-heading h3,
.finance-stat-history-heading p {
  margin: 0;
}

.finance-stat-history-heading h3 {
  color: #17243a;
}

.finance-stat-history-heading p {
  color: #66758d;
  font-size: 13px;
}

.finance-stat-history-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: end;
  padding: 10px 12px;
  border: 1px solid #d7e5f3;
  border-radius: 8px;
  background: linear-gradient(90deg, #f4fbff, #fbfdff);
}

.finance-stat-history-toolbar > span,
.finance-stat-history-toolbar > strong {
  margin-right: auto;
  color: #176b78;
  font-weight: 900;
}

.finance-stat-history-toolbar label {
  display: grid;
  gap: 4px;
  color: #52637a;
  font-size: 12px;
  font-weight: 800;
}

.finance-stat-history-toolbar input {
  min-height: 36px;
  padding: 5px 8px;
  color: #17243a;
  border: 1px solid #bdd2e8;
  border-radius: 6px;
  background: #fff;
  font: inherit;
}

.finance-stat-history-toolbar i {
  padding-bottom: 9px;
  color: #7b8da5;
  font-style: normal;
}

.finance-stat-history-toolbar button {
  min-height: 36px;
  padding: 0 13px;
  color: #fff;
  border: 1px solid #246ed2;
  border-radius: 6px;
  background: linear-gradient(135deg, #1aa39a 0%, #246ed2 100%);
  font-weight: 900;
  cursor: pointer;
}

.finance-stat-history-toolbar button.ghost {
  color: #185da8;
  border-color: #bfd3eb;
  background: #fff;
}

.finance-stat-history-toolbar button:hover {
  filter: brightness(0.97);
}

.finance-stat-history-toolbar button:focus-visible,
.finance-stat-history-toolbar input:focus-visible {
  outline: 3px solid rgba(36, 110, 210, 0.22);
  outline-offset: 2px;
}

.finance-stat-history-list {
  max-height: none;
}

.finance-stat-history-month .finance-stats-table-wrap {
  border-top-width: 1px;
}

.finance-stats-table-wrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid #dfe8f3;
  border-top: 4px solid #ff6f61;
  border-radius: 8px;
}

.finance-stats-table {
  width: 100%;
  min-width: 980px;
  border-collapse: collapse;
  background: #fff;
  font-size: 13px;
}

.finance-stats-form[data-finance-stats-type="ecommerce"] .finance-stats-table-wrap {
  max-height: min(56vh, 520px);
  overflow: auto;
}

.finance-stats-form[data-finance-stats-type="ecommerce"] .finance-stats-table {
  min-width: 1800px;
}

.finance-stats-form[data-finance-stats-type="ecommerce"] .finance-stats-table th {
  position: sticky;
  top: 0;
  z-index: 1;
}

.finance-stats-form[data-finance-stats-type="registration"] .finance-stats-table-wrap {
  max-height: min(58vh, 540px);
  overflow: auto;
}

.finance-stats-form[data-finance-stats-type="registration"] .finance-stats-table {
  min-width: 1720px;
}

.finance-stats-form[data-finance-stats-type="registration"] .finance-stats-table th {
  position: sticky;
  top: 0;
  z-index: 1;
}

.finance-stats-table th,
.finance-stats-table td {
  padding: 10px 12px;
  border-bottom: 1px solid #e8eef7;
  text-align: left;
  white-space: nowrap;
}

.finance-stats-table th {
  background: #f8fbff;
  color: #172033;
  font-weight: 900;
}

.finance-stats-table tfoot td {
  border-top: 2px solid #cdddf0;
  border-bottom: 0;
  background: #eef6ff;
  font-weight: 900;
}

.finance-stats-table td:first-child,
.finance-stats-table th:first-child {
  width: 56px;
  text-align: center;
}

.finance-stats-table input {
  width: auto;
  min-height: auto;
}

.finance-stats-form[data-finance-stats-type="overseas"] .finance-stats-table {
  min-width: 1480px;
}

.finance-overseas-row {
  transition: background 0.18s ease, color 0.18s ease, opacity 0.18s ease;
}

.finance-overseas-row.is-paid,
.finance-overseas-row.is-paid td {
  color: #788393;
  background: #eef1f4;
}

.finance-overseas-row.is-paid .finance-overseas-info-button,
.finance-overseas-row.is-paid .finance-overseas-file-button {
  color: #66717f;
}

.finance-overseas-info-button,
.finance-overseas-file-button {
  padding: 0;
  border: 0;
  color: #1166b8;
  background: transparent;
  font-weight: 800;
  text-align: left;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.finance-overseas-info-button:hover,
.finance-overseas-file-button:hover {
  color: #084d91;
}

.finance-overseas-reconciliation-preview {
  display: inline-block;
  width: min(104px, 100%);
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  vertical-align: middle;
  cursor: pointer;
}

[data-admin-reconciliation-panel="overseas"] .finance-reconciliation-table tbody tr,
[data-finance-reconciliation-panel="overseas"] .finance-reconciliation-table tbody tr {
  height: 54px;
}

[data-admin-reconciliation-panel="overseas"] .finance-reconciliation-table tbody td,
[data-finance-reconciliation-panel="overseas"] .finance-reconciliation-table tbody td {
  height: 54px;
  padding-top: 8px;
  padding-bottom: 8px;
}

.finance-overseas-proof-cell {
  display: flex;
  align-items: center;
  gap: 8px;
}

.finance-overseas-proof-upload {
  display: inline-flex;
  align-items: center;
  min-width: max-content;
  cursor: pointer;
}

.finance-overseas-proof-upload input {
  display: none;
}

.finance-overseas-proof-upload span,
.finance-overseas-paid-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 6px 12px;
  border: 1px solid #24a46d;
  border-radius: 6px;
  color: #087d4d;
  background: #effbf5;
  font-weight: 900;
}

.finance-overseas-paid-button {
  color: #fff;
  border-color: #2088d1;
  background: linear-gradient(90deg, #22a4a0, #286cd4);
}

.finance-overseas-paid-badge {
  display: inline-flex;
  padding: 5px 12px;
  border-radius: 999px;
  color: #5e6875;
  background: #dce2e8;
  font-weight: 900;
}

.finance-overseas-paid-time {
  display: block;
  margin-top: 5px;
  color: #7c8794;
}

.finance-overseas-file-empty {
  color: #8b96a6;
}

body.finance-overseas-modal-open {
  overflow: hidden;
}

.finance-overseas-modal {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(20, 34, 54, 0.55);
}

.finance-overseas-dialog {
  width: min(720px, 94vw);
  max-height: min(760px, 90vh);
  overflow: auto;
  padding: 24px;
  border: 1px solid #d6e1ee;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(15, 40, 75, 0.28);
}

.finance-overseas-dialog-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid #dce6f1;
}

.finance-overseas-dialog-head span {
  color: #149b87;
  font-weight: 900;
}

.finance-overseas-dialog-head h3 {
  margin: 5px 0 0;
  font-size: 24px;
}

.finance-overseas-dialog-head > button {
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 50%;
  color: #55657a;
  background: #f7faff;
  font-size: 24px;
}

.finance-overseas-dialog > p {
  color: #66758b;
}

.finance-overseas-dialog pre {
  margin: 16px 0;
  padding: 18px;
  border: 1px solid #cfe0f2;
  border-radius: 8px;
  overflow: auto;
  color: #17243a;
  background: #f7fbff;
  font: 600 14px/1.8 Arial, "Microsoft YaHei", sans-serif;
  white-space: pre-wrap;
  user-select: text;
}

.finance-overseas-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.finance-overseas-copy-status {
  min-height: 22px;
  margin: 10px 0 0;
  color: #078558 !important;
  font-weight: 800;
  text-align: right;
}

@media (max-width: 720px) {
  .finance-overseas-modal {
    align-items: end;
    padding: 10px;
  }

  .finance-overseas-dialog {
    width: 100%;
    max-height: calc(100dvh - 20px);
    padding: 16px;
    border-radius: 16px;
  }

  .finance-overseas-dialog-head {
    gap: 12px;
  }

  .finance-overseas-dialog-head h3 {
    font-size: 20px;
  }

  .finance-overseas-dialog pre {
    max-height: 52dvh;
    margin: 12px 0;
    padding: 14px;
    font-size: 13px;
    line-height: 1.7;
  }

  .finance-overseas-dialog-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .finance-overseas-dialog-actions button {
    width: 100%;
    min-height: 46px;
  }

  .finance-overseas-copy-status {
    text-align: left;
  }
}

.finance-stats-form button {
  justify-self: end;
}

.finance-stats-empty {
  padding: 16px;
  background: #f8fbff;
  border: 1px solid #dfe8f3;
  border-radius: 8px;
  color: #66758d;
  font-weight: 800;
}

.finance-analytics {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.finance-analytics-rule-form,
.finance-analytics-rule-readonly {
  display: grid;
  grid-template-columns: minmax(220px, 1.35fr) minmax(135px, 0.7fr) minmax(110px, 0.58fr) auto minmax(110px, 0.58fr) auto;
  gap: 10px;
  align-items: end;
  padding: 14px;
  border: 1px solid #d9e5f2;
  border-left: 4px solid #1b9b92;
  border-radius: 7px;
  background: #f8fbff;
}

.finance-analytics-rule-form > div,
.finance-analytics-rule-readonly {
  align-self: stretch;
  align-content: center;
}

.finance-analytics-rule-form > div span,
.finance-analytics-rule-form > div strong,
.finance-analytics-rule-readonly strong,
.finance-analytics-rule-readonly span {
  display: block;
}

.finance-analytics-rule-form > div span,
.finance-analytics-rule-readonly strong {
  color: #137b75;
  font-size: 12px;
  font-weight: 900;
}

.finance-analytics-rule-form > div strong,
.finance-analytics-rule-readonly span {
  margin-top: 4px;
  color: #172033;
  font-size: 15px;
}

.finance-analytics-rule-form label,
.finance-analytics-filter label {
  display: grid;
  gap: 5px;
  color: #52637c;
  font-size: 12px;
  font-weight: 900;
}

.finance-analytics-rule-form input,
.finance-analytics-filter input {
  width: 100%;
  min-height: 40px;
  padding: 0 10px;
  border: 1px solid #bfd3eb;
  border-radius: 6px;
  color: #172033;
  background: #fff;
  font: inherit;
}

.finance-analytics-rule-equals {
  align-self: center;
  justify-self: center;
  color: #66758d;
  font-weight: 900;
}

.finance-analytics-rule-form button,
.finance-analytics-filter button,
.finance-analytics-actions button,
.finance-analytics-chart-head button,
.finance-analytics-row-download {
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid #1f68c7;
  border-radius: 6px;
  color: #fff;
  background: #1f68c7;
  font-weight: 900;
}

.finance-analytics-rule-form > p {
  grid-column: 1 / -1;
  margin: 0;
  color: #66758d;
  font-size: 12px;
  line-height: 1.6;
}

.finance-analytics-rule-readonly {
  grid-template-columns: minmax(180px, 0.8fr) minmax(160px, 0.5fr) minmax(260px, 1.7fr);
  align-items: center;
}

.finance-analytics-rule-readonly p {
  margin: 0;
  color: #66758d;
}

.finance-analytics-filter {
  display: grid;
  grid-template-columns: repeat(4, minmax(130px, 1fr)) auto auto;
  gap: 10px;
  align-items: end;
  padding: 14px;
  border: 1px solid #dfe8f3;
  border-radius: 7px;
  background: #fff;
}

.finance-analytics-filter button.ghost {
  color: #31516f;
  border-color: #bfd3eb;
  background: #f8fbff;
}

.finance-analytics-actions,
.finance-analytics-chart-head {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
}

.finance-analytics-actions {
  padding: 12px 14px;
  border: 1px solid #dfe8f3;
  border-radius: 7px;
  background: #f8fbff;
}

.finance-analytics-actions p {
  margin: 0;
  color: #5a6980;
}

.finance-analytics-actions > div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.finance-analytics-actions button:first-child {
  color: #195fa9;
  border-color: #bfd3eb;
  background: #fff;
}

.finance-analytics-actions button.active {
  border-color: #178c84;
  background: #178c84;
}

.finance-analytics-table {
  min-width: 3180px;
}

.finance-analytics-table .finance-analytics-group-row th {
  text-align: center;
  font-size: 14px;
  letter-spacing: 0.08em;
}

.finance-analytics-table .finance-analytics-group-row th.is-receivable {
  color: #087c62;
  background: #eaf7f3;
}

.finance-analytics-table .finance-analytics-group-row th.is-payable {
  color: #a45a13;
  background: #fff4e6;
}

.finance-analytics-table .finance-analytics-group-row th.is-profit {
  color: #195fa9;
  background: #eaf2ff;
}

.finance-analytics-table td.is-receivable-total {
  color: #087c62;
  background: #f1fbf8;
}

.finance-analytics-table td.is-payable-total {
  color: #a45a13;
  background: #fff9f0;
}

.finance-analytics-table td.is-positive {
  color: #087c62;
}

.finance-analytics-table td.is-negative {
  color: #c2413d;
}

.finance-stats-table .finance-stats-empty-row td {
  padding: 28px 16px;
  color: #66758d;
  text-align: center;
  font-weight: 700;
  white-space: normal;
}

.finance-analytics-table .finance-analytics-group-row > th:first-child,
.finance-analytics-table tbody > tr > td:first-child {
  width: 56px;
  min-width: 56px;
  max-width: 56px;
  background: #fff;
}

.finance-analytics-table .finance-analytics-group-row > th:first-child {
  background: #f8fbff;
}

.finance-analytics-table td:nth-child(2) {
  width: 92px;
  min-width: 92px;
  max-width: 92px;
  background: #fff;
}

.finance-analytics-table .finance-analytics-group-row > th:nth-child(2) {
  width: 92px;
  min-width: 92px;
  max-width: 92px;
  background: #f8fbff;
}

.finance-analytics-row-download {
  min-height: 32px;
  padding: 0 11px;
}

.finance-analytics-charts {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid #d9e5f2;
  border-radius: 7px;
  background: #fff;
}

.finance-analytics-chart-head span,
.finance-analytics-chart-head strong {
  display: block;
}

.finance-analytics-chart-head span {
  color: #137b75;
  font-size: 12px;
  font-weight: 900;
}

.finance-analytics-chart-head strong {
  margin-top: 3px;
  color: #172033;
  font-size: 17px;
}

.finance-analytics-chart-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(340px, 0.8fr);
  gap: 12px;
}

.finance-analytics-chart-grid article {
  min-width: 0;
  padding: 12px;
  border: 1px solid #e0e8f2;
  border-radius: 7px;
  background: #fbfdff;
}

.finance-analytics-chart-grid h3 {
  margin: 0 0 10px;
  color: #25334a;
  font-size: 14px;
}

.finance-chart-scroll {
  width: 100%;
  overflow-x: auto;
}

.finance-analytics-chart-grid canvas {
  display: block;
  max-width: none;
}

[data-finance-analytics-pie-legend] {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px 12px;
}

[data-finance-analytics-pie-legend] span {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  gap: 6px;
  align-items: center;
  color: #64748b;
  font-size: 11px;
}

[data-finance-analytics-pie-legend] i {
  width: 9px;
  height: 9px;
  border-radius: 2px;
}

[data-finance-analytics-pie-legend] b {
  color: #34445c;
}

.finance-withdrawal-requests {
  display: grid;
  gap: 10px;
  padding-top: 4px;
}

.finance-withdrawal-head {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border: 1px solid #dfe8f3;
  border-radius: 7px;
  background: #f8fbff;
}

.finance-withdrawal-head span,
.finance-withdrawal-head strong {
  display: block;
}

.finance-withdrawal-head span {
  color: #137b75;
  font-size: 12px;
  font-weight: 900;
}

.finance-withdrawal-head strong {
  margin-top: 3px;
  color: #172033;
}

.finance-withdrawal-head p {
  margin: 0;
  color: #66758d;
  font-size: 12px;
}

.finance-withdrawal-table {
  min-width: 1040px;
}

.finance-withdrawal-table button {
  min-height: 32px;
  padding: 0 11px;
  color: #1765b9;
  border: 1px solid #b9d4f5;
  border-radius: 6px;
  background: #fff;
  font-weight: 900;
}

@media (max-width: 860px) {
  .learner-management-heading {
    align-items: flex-start;
    padding: 18px 16px 16px;
  }

  .learner-management-decoration {
    gap: 4px;
  }

  .learner-management-decoration i {
    width: 6px;
    height: 28px;
  }

  .learner-management-decoration i:nth-child(2) {
    height: 36px;
  }

  .learner-management-decoration i:nth-child(3) {
    height: 44px;
  }

  .recruit-teach-head,
  .recruit-teach-status,
  .work-columns,
  .teacher-work-tabs,
  .teacher-profile-grid,
  .work-form,
  .work-form.compact,
  .finance-export-form {
    grid-template-columns: 1fr;
  }

  .recruit-teach-head,
  .recruit-teach-status {
    display: grid;
    justify-items: start;
  }

  .work-status-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    margin-left: 0;
  }

  .work-status-actions .button,
  .work-status-actions .classroom-logout-button {
    width: 100%;
    text-align: center;
  }

  .teacher-work .teacher-work-tabs {
    grid-template-columns: 1fr;
  }

  .teacher-work-tabs.finance-stats-tabs,
  .finance-stats-module > .finance-stats-tabs {
    grid-template-columns: repeat(7, minmax(145px, 1fr));
  }

  .finance-ecommerce-filters {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .finance-registration-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .finance-stats-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .finance-stats-toolbar > div {
    justify-content: stretch;
  }

  .finance-stats-date-range {
    flex: 1 1 100%;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    width: 100%;
  }

  .finance-stats-toolbar button {
    flex: 1 1 180px;
  }

  .finance-analytics-rule-form,
  .finance-analytics-rule-readonly,
  .finance-analytics-filter,
  .finance-analytics-chart-grid {
    grid-template-columns: 1fr 1fr;
  }

  .finance-analytics-rule-form > div,
  .finance-analytics-rule-form > p,
  .finance-analytics-rule-readonly p {
    grid-column: 1 / -1;
  }

  .finance-analytics-actions,
  .finance-analytics-chart-head,
  .finance-withdrawal-head {
    align-items: stretch;
    flex-direction: column;
  }

  .work-form.compact .wide,
  .work-form.compact button,
  .finance-export-form button,
  .finance-stats-form button {
    grid-column: 1 / -1;
    justify-self: stretch;
  }

  .certificate-comment-rule {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .teacher-homework-subtabs {
    gap: 7px;
    padding: 6px;
  }

  .teacher-homework-subtabs button {
    min-height: 40px;
    font-size: 14px;
  }

  .teacher-work-tabs.finance-stats-tabs,
  .finance-stats-module > .finance-stats-tabs {
    grid-template-columns: repeat(7, minmax(145px, 1fr));
  }

  .finance-analytics-rule-form,
  .finance-analytics-rule-readonly,
  .finance-analytics-filter,
  .finance-analytics-chart-grid {
    grid-template-columns: 1fr;
  }

  .finance-registration-tabs {
    grid-template-columns: 1fr;
  }

  .finance-analytics-rule-form > *,
  .finance-analytics-rule-readonly > *,
  .finance-analytics-filter > * {
    grid-column: 1;
  }

  .finance-analytics-actions > div {
    display: grid;
    width: 100%;
  }
}

/* User management refinements */
.admin-body .user-list-panel {
  min-height: 0;
  align-self: stretch;
  align-content: start;
  grid-template-rows: auto auto auto;
}

.admin-body .external-account-panel {
  min-height: 830px;
  align-self: stretch;
}

.admin-body .external-account-search-form {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(220px, 1fr) auto;
  align-items: end;
  gap: 10px;
  margin: 14px 0;
  padding: 14px;
  background: linear-gradient(135deg, #f5fbfb, #f4f7ff);
  border: 1px solid #cfe1f2;
  border-left: 4px solid var(--teal);
  border-radius: 8px;
}

.admin-body .external-account-search-form label {
  display: grid;
  gap: 6px;
  color: #263b57;
  font-size: 13px;
  font-weight: 900;
}

.admin-body .external-account-search-form input {
  width: 100%;
  min-height: 42px;
  padding: 9px 11px;
  color: #132033;
  background: #fff;
  border: 1px solid #c9daee;
  border-radius: 7px;
  font-weight: 800;
}

.admin-body .external-account-search-actions {
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: 8px;
}

.admin-body .external-account-search-actions button {
  min-height: 42px;
  padding: 0 18px;
  color: #fff;
  background: linear-gradient(135deg, var(--blue), var(--teal));
  border: 0;
  border-radius: 7px;
  cursor: pointer;
  font-weight: 900;
}

.admin-body .external-account-search-actions button.secondary {
  color: #1764cc;
  background: #fff;
  border: 1px solid #abcaf1;
}

.admin-body .external-account-search-results {
  display: grid;
  gap: 10px;
  margin-bottom: 14px;
  padding: 14px;
  background: #fff;
  border: 1px solid #dbe7f5;
  border-top: 4px solid #2f6edb;
  border-radius: 8px;
}

.admin-body .external-account-search-result-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.admin-body .external-account-search-result-head strong {
  color: #132033;
  font-size: 17px;
}

.admin-body .external-account-search-result-head span,
.admin-body .external-account-search-empty {
  margin: 0;
  color: #64748b;
  font-size: 13px;
  font-weight: 800;
}

.admin-body .external-account-search-result-list {
  display: grid;
  gap: 8px;
}

.admin-body .external-account-search-result-list article {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(180px, 1fr) minmax(160px, 0.8fr);
  gap: 0;
  overflow: hidden;
  background: #f8fbff;
  border: 1px solid #dce7f4;
  border-radius: 7px;
}

.admin-body .external-account-search-result-list article div {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border-right: 1px solid #dce7f4;
}

.admin-body .external-account-search-result-list article div:last-child {
  border-right: 0;
}

.admin-body .external-account-search-result-list span {
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
}

.admin-body .external-account-search-result-list strong {
  color: #132033;
  font-size: 14px;
}

.admin-body .external-account-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 14px 0;
}

.admin-body .external-account-summary-row {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.admin-body .external-account-summary div {
  min-height: 58px;
  padding: 10px;
  background: #f6f9fd;
  border: 1px solid #dbe7f5;
  border-radius: 8px;
}

.admin-body .external-account-summary span {
  display: block;
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
}

.admin-body .external-account-summary strong {
  display: block;
  margin-top: 4px;
  color: #132033;
  font-size: 22px;
  line-height: 1;
}

.admin-body .external-role-detail-list {
  display: grid;
  gap: 14px;
}

.admin-body .external-role-section {
  display: grid;
  gap: 10px;
  padding: 14px;
  background: #fff;
  border: 1px solid #dbe7f5;
  border-top: 4px solid #20a58f;
  border-radius: 8px;
}

/* External account statistics: one role at a time, with a compact shared tab rail. */
.admin-body .external-role-tabs {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  margin: 14px 0;
  padding: 8px;
  background: #f5f8fd;
  border: 1px solid #dbe6f3;
  border-radius: 9px;
}

.admin-body .external-role-tabs button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 0;
  min-height: 42px;
  padding: 8px 6px;
  color: #155c9c;
  background: #fff;
  border: 1px solid #b9d2ee;
  border-radius: 7px;
  cursor: pointer;
  font-weight: 900;
  transition: color .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.admin-body .external-role-tabs button span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-body .external-role-tabs button strong {
  display: grid;
  min-width: 22px;
  height: 22px;
  place-items: center;
  color: #176e74;
  background: #e4f8f1;
  border-radius: 999px;
  font-size: 12px;
}

.admin-body .external-role-tabs button.active,
.admin-body .external-role-tabs button:hover,
.admin-body .external-role-tabs button:focus-visible {
  color: #fff;
  background: linear-gradient(135deg, #1ba49a, #276bd4);
  border-color: transparent;
  box-shadow: 0 8px 16px rgba(37, 102, 203, .18);
  outline: 0;
}

.admin-body .external-role-tabs button.active strong,
.admin-body .external-role-tabs button:hover strong,
.admin-body .external-role-tabs button:focus-visible strong {
  color: #fff;
  background: rgba(255, 255, 255, .2);
}

.admin-body .external-role-section:nth-child(4n + 2) {
  border-top-color: #2f6edb;
}

.admin-body .external-role-section:nth-child(4n + 3) {
  border-top-color: #7658d6;
}

.admin-body .external-role-section:nth-child(4n + 4) {
  border-top-color: #ff6868;
}

.admin-body .external-role-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #e6edf6;
}

.admin-body .external-role-section-head h3 {
  margin: 0;
  color: #132033;
  font-size: 18px;
}

.admin-body .external-download-controls {
  display: flex;
  align-items: end;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.admin-body .external-download-controls label {
  display: grid;
  gap: 4px;
  color: #64748b;
  font-size: 12px;
  font-weight: 900;
}

.admin-body .external-download-controls input {
  width: 142px;
  min-height: 34px;
  padding: 6px 8px;
  color: #132033;
  background: #fff;
  border: 1px solid #cfe0f2;
  border-radius: 7px;
  font-weight: 800;
}

.admin-body .external-download-controls button {
  min-height: 34px;
  padding: 0 16px;
  color: #fff;
  background: linear-gradient(135deg, var(--blue), var(--teal));
  border: 0;
  border-radius: 7px;
  cursor: pointer;
  font-weight: 900;
}

.admin-body .external-role-section-head span,
.admin-body .external-role-empty {
  color: #64748b;
  font-size: 13px;
  font-weight: 800;
}

.admin-body .external-role-empty {
  padding: 14px;
  background: #f6f9fd;
  border: 1px dashed #cbd9ea;
  border-radius: 8px;
}

.admin-body .external-role-history {
  display: grid;
  gap: 9px;
  margin-top: 2px;
  padding-top: 11px;
  border-top: 3px solid transparent;
  border-image: linear-gradient(90deg, #20a39e, #2878d4, #7056d8, transparent) 1;
}

.admin-body .external-role-history-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.admin-body .external-role-history-head h4,
.admin-body .external-role-history-head p {
  margin: 0;
}

.admin-body .external-role-history-head h4 {
  color: #17243a;
  font-size: 16px;
}

.admin-body .external-role-history-head p,
.admin-body .external-role-history-head > span,
.admin-body .external-role-history-empty {
  color: #66758d;
  font-size: 12px;
  font-weight: 800;
}

.admin-body .external-role-history-list {
  display: grid;
  gap: 7px;
}

.admin-body .external-role-history-month {
  overflow: hidden;
  border: 1px solid #dbe7f3;
  border-radius: 8px;
  background: #f8fbff;
}

.admin-body .external-role-history-month > summary {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
  min-height: 44px;
  padding: 9px 12px;
  cursor: pointer;
  list-style: none;
}

.admin-body .external-role-history-month > summary::-webkit-details-marker {
  display: none;
}

.admin-body .external-role-history-month > summary:hover,
.admin-body .external-role-history-month[open] > summary {
  background: #edf6ff;
}

.admin-body .external-role-history-month[open] > summary {
  border-bottom: 1px solid #dbe7f3;
}

.admin-body .external-role-history-month > summary strong {
  color: #17243a;
}

.admin-body .external-role-history-month > summary span {
  padding: 2px 8px;
  color: #17645c;
  border-radius: 999px;
  background: #dff7f1;
  font-size: 12px;
  font-weight: 900;
}

.admin-body .external-role-history-month > summary small {
  overflow: hidden;
  color: #66758d;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-body .external-role-history-month > summary b {
  color: #1765c1;
  font-size: 0;
}

.admin-body .external-role-history-month > summary b::after {
  content: "查看明细";
  font-size: 12px;
}

.admin-body .external-role-history-month[open] > summary b::after {
  content: "收起";
}

.admin-body .external-role-history-content {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 9px;
}

.admin-body .external-role-history-content > .external-download-controls {
  padding: 8px;
  border: 1px solid #dbe7f3;
  border-radius: 7px;
  background: #fff;
}

.admin-body .external-role-history-empty {
  margin: 0;
  padding: 12px;
  border: 1px dashed #cbd9ea;
  border-radius: 8px;
  background: #f6f9fd;
}

.admin-body .external-role-user-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 184px;
  align-items: stretch;
  background: #fff;
  border-top: 1px solid #dfe8f3;
}

.admin-body .external-role-user-info {
  display: grid;
  grid-template-columns: repeat(var(--external-detail-columns), minmax(176px, 1fr));
}

.admin-body .external-role-user-info div {
  min-width: 0;
  display: flex;
  align-items: center;
  padding: 7px 9px;
  background: #fff;
  border-right: 1px solid #d9e5f2;
}

.admin-body .external-role-user-info span {
  display: none;
}

.admin-body .external-role-user-info strong {
  display: block;
  margin: 0;
  color: #132033;
  font-size: 13px;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.admin-body .external-role-user-control {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 6px 8px;
  background: #f8fbff;
}

.admin-body .external-role-user-control > span {
  display: none;
}

.admin-body .external-role-table-shell {
  width: 100%;
  overflow-x: auto;
  border: 1px solid #d9e5f2;
  border-radius: 8px;
  scrollbar-gutter: stable;
}

.admin-body .external-role-table-shell.is-five-row-limited {
  max-height: var(--external-five-row-height);
  overflow-y: auto;
}

.admin-body .external-role-table {
  width: 100%;
}

.admin-body .external-role-table-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 184px;
  align-items: stretch;
  color: #263b57;
  background: #eaf2fd;
}

.admin-body .external-role-table-shell.is-five-row-limited .external-role-table-head {
  position: sticky;
  top: 0;
  z-index: 2;
}

.admin-body .external-role-table-labels {
  display: grid;
  grid-template-columns: repeat(var(--external-detail-columns), minmax(176px, 1fr));
}

.admin-body .external-role-table-head strong {
  display: flex;
  min-width: 0;
  align-items: center;
  padding: 7px 9px;
  border-right: 1px solid #d9e5f2;
  font-size: 12px;
  line-height: 1.35;
}

.admin-body .external-role-table-head > strong {
  justify-content: center;
  border-right: 0;
}

.admin-body .external-merged-download-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px;
  background: #f8fbff;
  border: 2px solid var(--blue);
  border-radius: 8px;
}

.admin-body .external-merged-download-card h3 {
  margin: 0 0 4px;
  color: #132033;
  font-size: 18px;
}

.admin-body .external-merged-download-card p {
  margin: 0;
  color: #64748b;
  font-size: 13px;
  font-weight: 800;
}

.admin-body .external-account-switch {
  position: relative;
  width: 52px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: #cbd5e1;
  cursor: pointer;
  transition: background 0.18s ease, box-shadow 0.18s ease;
}

.admin-body .external-account-switch span {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.22);
  transform: translateX(26px);
  transition: transform 0.18s ease;
}

.admin-body .external-account-switch.is-on {
  background: linear-gradient(135deg, var(--blue), var(--teal));
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
}

.admin-body .external-account-switch.is-on span {
  transform: translateX(0);
}

.admin-body .external-account-delete {
  min-width: 58px;
  min-height: 30px;
  padding: 4px 10px;
  border: 1px solid #ef4444;
  border-radius: 7px;
  color: #dc2626;
  background: #fff;
  font-size: 13px;
  font-weight: 800;
}

.admin-body .external-account-delete:hover,
.admin-body .external-account-delete:focus-visible {
  color: #fff;
  background: #dc2626;
}

.admin-body .external-account-delete:disabled {
  opacity: 0.55;
  cursor: wait;
}

@media (max-width: 1180px) {
  .admin-body .external-role-table-shell {
    scrollbar-gutter: auto;
  }
}

@media (max-width: 760px) {
  .admin-body .external-account-search-form,
  .admin-body .external-account-search-result-list article {
    grid-template-columns: 1fr;
  }

  .admin-body .external-account-search-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-body .external-account-search-result-list article div {
    border-right: 0;
    border-bottom: 1px solid #dce7f4;
  }

  .admin-body .external-account-search-result-list article div:last-child {
    border-bottom: 0;
  }

  .admin-body .external-account-summary,
  .admin-body .external-account-summary-row {
    grid-template-columns: 1fr;
  }

  .admin-body .external-role-tabs {
    grid-template-columns: repeat(6, minmax(102px, 1fr));
    gap: 6px;
    padding: 6px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }

  .admin-body .external-role-tabs button {
    min-height: 40px;
    padding: 7px 6px;
    font-size: 13px;
  }

  .admin-body .external-role-section-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .admin-body .external-role-history-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  .admin-body .external-role-history-month > summary {
    grid-template-columns: auto auto minmax(0, 1fr);
  }

  .admin-body .external-role-history-month > summary small {
    grid-column: 1 / -1;
  }

  .admin-body .external-role-history-month > summary b {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
  }

  .admin-body .external-role-history-content {
    overflow: hidden;
  }

  .admin-body .external-download-controls,
  .admin-body .external-merged-download-card {
    align-items: stretch;
    flex-direction: column;
  }

  .admin-body .external-download-controls input,
  .admin-body .external-download-controls button {
    width: 100%;
  }
}

.admin-body .external-account-list {
  max-height: 560px;
  overflow: auto;
  border: 1px solid #dfe8f3;
  border-radius: 8px;
}

.admin-body .external-account-item {
  display: grid;
  gap: 6px;
  padding: 14px;
  background: #f8fbff;
  border-bottom: 1px solid #dfe8f3;
}

.admin-body .external-account-item:last-child {
  border-bottom: 0;
}

.admin-body .external-account-item strong {
  color: #142033;
  font-size: 15px;
}

.admin-body .external-account-item span,
.admin-body .external-account-item p {
  margin: 0;
  color: #53627a;
  line-height: 1.5;
  font-size: 12px;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.admin-body .user-list-head {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
}

.admin-body .user-list-head h3 {
  margin: 0;
}

.admin-body .user-side-list {
  min-height: 0;
  max-height: min(54vh, 440px);
  overflow-x: hidden;
  overflow-y: auto;
  align-content: start;
  grid-auto-rows: max-content;
  overscroll-behavior: contain;
  touch-action: pan-y;
}

.admin-body .user-side-list .user-list-item {
  min-height: 0;
  padding: 9px 10px 9px 12px;
  gap: 4px 10px;
  align-self: start;
}

.admin-body .user-side-list .user-list-item strong {
  font-size: 14px;
  line-height: 1.3;
}

.admin-body .user-side-list .user-list-item span {
  margin-top: 2px;
  font-size: 12px;
  line-height: 1.35;
}

/* ADMIN-only preview of the registration profile-completion screen. */
.admin-body .admin-profile-reference {
  display: grid;
  grid-template-columns: minmax(320px, 0.9fr) minmax(460px, 1.1fr);
  min-height: 650px;
  overflow: hidden;
  background: #fff;
  border: 1px solid #d7e4f3;
  border-radius: 10px;
  box-shadow: 0 18px 42px rgba(25, 57, 102, 0.1);
}

.admin-body .admin-profile-reference-visual {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 28px;
  padding: clamp(30px, 4vw, 56px);
  color: #fff;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.14), transparent 42%),
    linear-gradient(135deg, #0f766e, #1f62d2);
}

.admin-body .admin-profile-reference-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 18px;
}

.admin-body .admin-profile-reference-brand span {
  display: grid;
  width: 50px;
  height: 50px;
  place-items: center;
  color: #1f62d2;
  background: #fff;
  border-radius: 8px;
  font-weight: 900;
}

.admin-body .admin-profile-reference-copy {
  align-self: center;
}

.admin-body .admin-profile-reference-copy p,
.admin-body .admin-profile-reference-heading p {
  margin: 0 0 10px;
  color: #dffbf7;
  font-weight: 900;
}

.admin-body .admin-profile-reference-copy h2 {
  max-width: 520px;
  margin: 0 0 20px;
  color: #fff;
  font-size: clamp(34px, 4vw, 54px);
  line-height: 1.08;
}

.admin-body .admin-profile-reference-copy > span {
  display: block;
  max-width: 560px;
  color: #e8f3ff;
  font-size: 16px;
  line-height: 1.75;
}

.admin-body .admin-profile-reference-features {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-self: end;
  width: min(100%, 500px);
  gap: 6px;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.38);
  border-radius: 7px;
}

.admin-body .admin-profile-reference-features article {
  display: grid;
  align-content: center;
  justify-items: center;
  min-width: 0;
  min-height: 64px;
  padding: 8px 4px;
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 6px;
}

.admin-body .admin-profile-reference-features strong {
  font-size: 24px;
  line-height: 1;
}

.admin-body .admin-profile-reference-features span {
  display: block;
  width: max-content;
  max-width: none;
  margin-top: 6px;
  color: #eef6ff;
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: 0;
  text-align: center;
  white-space: nowrap;
  word-break: keep-all;
}

.admin-body .admin-profile-reference-form {
  display: grid;
  align-content: start;
  gap: 20px;
  padding: clamp(28px, 3vw, 44px);
}

.admin-body .admin-profile-reference-heading p {
  color: #1f62d2;
}

.admin-body .admin-profile-reference-heading h2 {
  margin: 0 0 8px;
  color: #142033;
  font-size: 30px;
}

.admin-body .admin-profile-reference-heading > span {
  color: #66758a;
  font-size: 13px;
}

.admin-body .admin-profile-reference-fields {
  display: grid;
  gap: 14px;
}

.admin-body .admin-profile-reference-fields label {
  display: block;
  color: #27364c;
  font-size: 13px;
  font-weight: 800;
}

.admin-body .admin-profile-reference-fields label b {
  color: #d92d20;
}

.admin-body .admin-profile-reference-fields input,
.admin-body .admin-profile-reference-fields select {
  width: 100%;
  min-height: 44px;
  margin-top: 7px;
  padding: 0 13px;
  color: #172238;
  background: #f8fbff;
  border: 1px solid #cfdae8;
  border-radius: 7px;
  outline: 0;
}

.admin-body .admin-profile-reference-fields input:focus,
.admin-body .admin-profile-reference-fields select:focus {
  border-color: #4f91ea;
  box-shadow: 0 0 0 3px rgba(31, 98, 210, 0.1);
}

.admin-body .admin-profile-reference-location {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.admin-body .admin-profile-reference-combobox {
  position: relative;
}

.admin-body .admin-profile-reference-combobox input {
  padding-right: 38px;
  background-image:
    linear-gradient(45deg, transparent 50%, #42526a 50%),
    linear-gradient(135deg, #42526a 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 19px,
    calc(100% - 13px) 19px;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

.admin-body .admin-profile-reference-options {
  position: absolute;
  top: calc(100% + 5px);
  right: 0;
  left: 0;
  z-index: 80;
  max-height: 180px;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 5px;
  background: #fff;
  border: 1px solid #bfd0e5;
  border-radius: 7px;
  box-shadow: 0 14px 30px rgba(25, 57, 102, 0.18);
  scrollbar-color: #96abc5 #edf3f9;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  overscroll-behavior: contain;
}

.admin-body .admin-profile-reference-options[hidden] {
  display: none;
}

.admin-body .admin-profile-reference-options::-webkit-scrollbar {
  width: 8px;
}

.admin-body .admin-profile-reference-options::-webkit-scrollbar-track {
  background: #edf3f9;
  border-radius: 999px;
}

.admin-body .admin-profile-reference-options::-webkit-scrollbar-thumb {
  background: #96abc5;
  border: 2px solid #edf3f9;
  border-radius: 999px;
}

.admin-body .admin-profile-reference-options button {
  display: block;
  width: 100%;
  min-height: 34px;
  padding: 6px 10px;
  color: #27364c;
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: 5px;
  cursor: pointer;
}

.admin-body .admin-profile-reference-options button:hover {
  color: #155bd4;
  background: #edf5ff;
}

.admin-body .admin-profile-reference-no-option {
  margin: 0;
  padding: 10px;
  color: #66758a;
  font-size: 12px;
  font-weight: 500;
}

.admin-body .admin-profile-reference-fields .admin-profile-reference-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  line-height: 1.55;
}

.admin-body .admin-profile-reference-consent input {
  flex: 0 0 auto;
  width: 18px;
  min-height: 18px;
  margin-top: 2px;
  padding: 0;
}

.admin-body .admin-profile-reference-consent a {
  color: #1f62d2;
  font-weight: 900;
}

.admin-body .admin-profile-reference-fields > button {
  min-height: 46px;
  color: #fff;
  background: linear-gradient(135deg, #1f62d2, #11a7a2);
  border: 0;
  border-radius: 7px;
  font-weight: 900;
}

.admin-body .admin-profile-reference-note {
  margin: -4px 0 0;
  color: #66758a;
  font-size: 12px;
}

@media (max-width: 1100px) {
  .admin-body .admin-profile-reference {
    grid-template-columns: 1fr;
  }

  .admin-body .admin-profile-reference-visual {
    min-height: 360px;
  }
}

@media (max-width: 620px) {
  .admin-body .admin-profile-reference-location,
  .admin-body .admin-profile-reference-features {
    grid-template-columns: 1fr;
  }
}

.admin-body .user-edit-card {
  grid-column: 1 / -1;
}

.admin-body .user-edit-summary {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.admin-body .user-edit-form {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
}

.admin-body .learner-code-field input {
  color: #155bd4;
  background: #eef6ff;
  border-color: #bdd7ff;
  font-weight: 800;
  cursor: default;
}

.admin-body .user-edit-form .role-switch-field,
.admin-body .user-edit-form button {
  grid-column: auto;
}

.admin-body .user-edit-form button {
  min-height: 42px;
}

@media (max-width: 980px) {
  .admin-body .user-edit-summary,
  .admin-body .user-edit-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .admin-body .user-edit-summary,
  .admin-body .user-edit-form {
    grid-template-columns: 1fr;
  }
}

/* API integration console */
.admin-body .system-integration-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 12px;
  padding: 8px;
  background: #f3f7fc;
  border: 1px solid #d8e4f1;
  border-radius: 10px;
}

.admin-body .system-integration-tabs button {
  min-height: 42px;
  color: #1559a6;
  background: #fff;
  border: 1px solid #b9d2ef;
  border-radius: 8px;
  font-weight: 900;
}

.admin-body .system-integration-tabs button.active {
  color: #fff;
  background: linear-gradient(135deg, #1aa39a 0%, #246ed2 100%);
  border-color: transparent;
  box-shadow: 0 8px 18px rgba(36, 110, 210, 0.18);
}

.admin-body .system-integration-panel { display: none; }
.admin-body .system-integration-panel.active { display: grid; }

.admin-body .api-admin-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: 12px;
}

.admin-body .api-admin-grid > .role-card {
  height: 100%;
}

.admin-body .api-admin-grid > .api-port-card:first-child {
  grid-row: auto;
}

.admin-body .api-port-card,
.admin-body .api-status-card {
  grid-column: 1 / -1;
}

.admin-body .api-admin-grid > .api-partner-card {
  grid-column: 1 / -1;
}

.admin-body .api-partner-card .role-form {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.admin-body .api-partner-card .role-form > button[type="submit"] {
  grid-column: 1 / -1;
}

.admin-body .api-partner-records {
  margin-top: 14px;
  border: 1px solid #d9e5f2;
  border-radius: 9px;
  background: #f8fbff;
  overflow: hidden;
}

.admin-body .api-partner-records > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
  padding: 10px 14px;
  color: #0b5470;
  font-weight: 900;
  cursor: pointer;
  list-style: none;
}

.admin-body .api-partner-records > summary::-webkit-details-marker { display: none; }

.admin-body .api-partner-records > summary::after {
  content: "展开";
  color: #246ed2;
  font-size: 12px;
}

.admin-body .api-partner-records[open] > summary::after { content: "收起"; }
.admin-body .api-partner-records > .record-list { padding: 0 12px 12px; }

.admin-body .api-partner-connection-record {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}

.admin-body .api-partner-connection-record > div:first-child {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.admin-body .api-admin-grid > .domestic-express-api-card {
  grid-column: 1 / -1;
}

.admin-body .domestic-express-api-card .role-form {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.admin-body .domestic-express-api-card .domestic-express-form-actions {
  grid-column: 1 / -1;
}

.admin-body .domestic-express-api-card .domestic-express-form-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.admin-body .domestic-express-api-card .domestic-express-form-actions button {
  width: 100%;
}

.admin-body .domestic-express-connection-record {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
}

.admin-body .domestic-express-connection-record > div:first-child {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.admin-body .domestic-express-connection-state {
  padding: 5px 9px;
  color: #9a5b00;
  background: #fff7e3;
  border: 1px solid #f2cc83;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
}

.admin-body .domestic-express-connection-state.is-enabled {
  color: #08745f;
  background: #eafaf4;
  border-color: #9edfcf;
}

.admin-body .api-port-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.admin-body .api-port-list div {
  display: grid;
  gap: 7px;
  min-height: 112px;
  padding: 14px;
  background: linear-gradient(145deg, #f8fbff, #ffffff);
  border: 1px solid #dfe8f3;
  border-radius: 8px;
}

.admin-body .api-port-list b {
  color: #172033;
  font-size: 14px;
}

.admin-body .api-port-list code {
  width: fit-content;
  padding: 5px 8px;
  color: #155bd4;
  background: #edf5ff;
  border-radius: 5px;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 12px;
  font-weight: 900;
}

.admin-body .api-port-list span {
  color: #667085;
  line-height: 1.55;
  font-size: 12px;
}

.admin-body .api-connect-form {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.admin-body .api-connect-form .wide,
.admin-body .api-connect-form button {
  grid-column: 1 / -1;
}

.admin-body .api-connect-form input,
.admin-body .api-connect-form select,
.admin-body .api-connect-form textarea {
  background: #f9fbfe;
}

.admin-body .api-connect-form button {
  min-height: 42px;
  color: #fff;
  background: linear-gradient(135deg, var(--blue), var(--teal));
  border-radius: 6px;
  font-weight: 900;
}

.admin-body .api-status-card .record-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.admin-body .api-status-card .record-item {
  border-color: #dce7f5;
  background: #f8fbff;
}

.password-field {
  position: relative;
  display: block;
  width: 100%;
}

.password-field input {
  width: 100%;
  padding-right: 48px !important;
}

.password-toggle,
.admin-body .role-form .password-toggle,
.admin-body .api-connect-form .password-toggle {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  display: inline-grid;
  place-items: center;
  width: 32px;
  min-width: 32px;
  height: 28px;
  min-height: 28px;
  padding: 0;
  color: #526071;
  background: #eef4fb;
  border: 1px solid #d5e1ef;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
}

.password-toggle svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.password-toggle:hover,
.password-toggle.is-visible,
.admin-body .role-form .password-toggle:hover,
.admin-body .role-form .password-toggle.is-visible,
.admin-body .api-connect-form .password-toggle:hover,
.admin-body .api-connect-form .password-toggle.is-visible {
  color: #fff;
  background: linear-gradient(135deg, var(--blue), var(--teal));
  border-color: transparent;
}

@media (max-width: 1080px) {
  .admin-body .system-integration-tabs,
  .admin-body .api-admin-grid,
  .admin-body .api-port-list,
  .admin-body .api-status-card .record-list {
    grid-template-columns: 1fr;
  }

  .admin-body .api-admin-grid > .domestic-express-api-card,
  .admin-body .api-admin-grid > .api-partner-card,
  .admin-body .domestic-express-api-card .domestic-express-form-actions {
    grid-column: auto;
  }

  .admin-body .api-partner-card .role-form,
  .admin-body .domestic-express-api-card .role-form {
    grid-template-columns: 1fr;
  }

  .admin-body .api-partner-card .role-form > button[type="submit"] { grid-column: auto; }

  .admin-body .domestic-express-api-card .domestic-express-form-actions,
  .admin-body .api-partner-connection-record,
  .admin-body .domestic-express-connection-record {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 820px) {
  .structured-form .form-module,
  .resume-highlight-grid,
  .recruiter-filter-form,
  .recruiter-row {
    grid-template-columns: 1fr;
  }

  .resume-preview-head,
  .recruiter-detail-head {
    display: grid;
  }

  .recruiter-table-list {
    overflow-x: visible;
  }

  .recruiter-table-head,
  .recruitment-chat-parties {
    grid-template-columns: 1fr;
  }

  .recruiter-detail-overlay { padding: 10px; }
  .recruiter-detail-dialog { width: 100%; max-height: calc(100dvh - 20px); padding: 14px; }
}
.factory-tabs,
.factory-admin-tabs,
.ecommerce-category-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 18px;
}

.support-record-list .point-exchange-history-row {
  grid-template-columns: minmax(180px, 1.1fr) minmax(150px, .9fr) minmax(100px, .6fr) minmax(170px, 1fr) minmax(100px, .6fr) minmax(190px, 1.2fr);
  align-items: center;
  min-width: 860px;
  padding: 11px 12px;
}

.point-exchange-empty {
  min-width: 860px;
}

.classroom-body .ecommerce-panel .ecommerce-category-bar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  width: 100%;
}

.classroom-body .ecommerce-panel .ecommerce-category-bar button {
  width: 100%;
  min-width: 0;
  min-height: 48px;
}

.factory-admin-tabs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  width: 100%;
}

.admin-body [aria-label="制造工厂选项卡"] {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

/* Freight administration has four primary tabs and three order sub-tabs. */
.admin-body #freightManagePanel .factory-admin-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
}

.admin-body #freightManagePanel .freight-admin-order-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
}

.admin-body #freightManagePanel .freight-admin-order-tabs {
  margin: 14px 0;
}

.admin-body #freightManagePanel .freight-admin-order-tabs button {
  min-width: 0;
  min-height: 42px;
  border: 1px solid #c9daf4;
  border-radius: 8px;
  color: #244a78;
  background: #f4f8ff;
  font-weight: 800;
  cursor: pointer;
}

.admin-body #freightManagePanel .freight-admin-order-tabs button.active {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(135deg, var(--teal), var(--blue));
}

.admin-body #freightManagePanel .freight-admin-order-panel {
  display: none;
}

.admin-body #freightManagePanel .freight-admin-order-panel.active {
  display: block;
}

.admin-body .freight-admin-table-wrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid #d8e4f2;
  border-radius: 9px;
}

.admin-body .freight-admin-table {
  width: 100%;
  min-width: 1120px;
  border-collapse: collapse;
  color: #324863;
  font-size: 13px;
}

.admin-body .freight-admin-table th,
.admin-body .freight-admin-table td {
  padding: 12px 14px;
  border-bottom: 1px solid #e4ebf5;
  text-align: left;
  vertical-align: top;
  line-height: 1.55;
}

.admin-body .freight-admin-table th {
  white-space: nowrap;
  color: #23364f;
  background: #f3f7fc;
  font-weight: 800;
}

.admin-body .freight-admin-table td:nth-child(3) {
  min-width: 190px;
}

.admin-body .freight-admin-table td > small {
  display: block;
  margin-top: 4px;
  color: #6b7d93;
  font-size: 12px;
}

.admin-body .freight-admin-table tbody tr:last-child td {
  border-bottom: 0;
}

.admin-body .freight-admin-table-empty td {
  padding: 34px 16px;
  color: #6b7d93;
  text-align: center;
}

.admin-body .freight-admin-status {
  display: inline-flex;
  padding: 4px 9px;
  border-radius: 999px;
  color: #245d9a;
  background: #eaf4ff;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

@media (max-width: 720px) {
  .admin-body #freightManagePanel .factory-admin-tabs,
  .admin-body #freightManagePanel .freight-admin-order-tabs {
    grid-template-columns: 1fr;
  }
}

.factory-admin-tabs button {
  position: relative;
  width: 100%;
  min-width: 0;
  white-space: nowrap;
}

.factory-tabs button,
.factory-tabs .factory-home-link,
.factory-admin-tabs button,
.ecommerce-category-bar button,
.ecommerce-category-bar span,
.ecommerce-category-bar small {
  border: 1px solid #dbe4ef;
  background: #fff;
  color: #1f2937;
  border-radius: 8px;
  padding: 10px 14px;
}

.factory-tabs .factory-home-link {
  text-decoration: none;
}

.factory-tabs button.active,
.factory-admin-tabs button.active,
.ecommerce-category-bar button.active {
  border-color: #0f9aa8;
  background: #0f9aa8;
  color: #fff;
}

.factory-tabs button b,
.factory-product-tabs button b,
.factory-admin-tabs button b {
  display: inline-grid;
  min-width: 18px;
  height: 18px;
  place-items: center;
  margin-left: 6px;
  padding: 0 5px;
  color: #fff;
  background: #dc2626;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1;
}

.factory-body {
  --factory-workbench-width: min(1040px, calc(100vw - 172px));
}

.factory-body main {
  padding-top: 58px;
}

.factory-body #factory-workbench {
  display: block;
  width: var(--factory-workbench-width);
  max-width: none;
  margin: 0 auto;
  padding: 0;
  background: transparent;
}

.factory-body #factory-workbench > .section-heading,
.factory-body .factory-tabs,
.factory-body .factory-status,
.factory-body .factory-panel.active {
  width: var(--factory-workbench-width);
  max-width: none;
  box-sizing: border-box;
}

.factory-body #factory-workbench > .section-heading {
  display: block;
  margin: 0;
  padding: 8px 12px 12px;
  min-height: 0;
  background: #fff;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.factory-body #factory-workbench > .section-heading .eyebrow,
.factory-body #factory-workbench > .section-heading h2 {
  display: block;
  margin: 0;
}

.factory-body #factory-workbench > .section-heading .eyebrow {
  margin-bottom: 4px;
}

.factory-body .factory-panel.active > .factory-product-grid,
.factory-body .factory-product-panel.active > .factory-product-grid {
  width: var(--factory-workbench-width);
  max-width: none;
  box-sizing: border-box;
  padding: 14px;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.factory-product-tabs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  align-items: stretch;
  gap: 12px;
  margin: 0 0 14px;
  padding: 8px 14px;
  background: #eef6ff;
  border: 1px solid #dbe8f6;
  border-radius: 8px;
}

.factory-product-tabs button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
  min-height: 46px;
  padding: 0 16px;
  color: #172033;
  background: #fff;
  border: 1px solid #dbe4ef;
  border-radius: 8px;
  font-weight: 900;
  cursor: pointer;
}

.factory-product-tabs button.active {
  color: #fff;
  background: linear-gradient(135deg, var(--teal), var(--blue));
  border-color: transparent;
}

/* Factory workbench trial: give dense tab groups a restrained semantic colour
   rhythm while keeping every colour tied to the active website theme. */
.factory-body .factory-tabs button,
.factory-product-tabs button {
  --factory-tab-accent: var(--blue);
  --factory-tab-end: var(--teal);
  color: color-mix(in srgb, var(--factory-tab-accent) 72%, #172033);
  background: color-mix(in srgb, var(--factory-tab-accent) 7%, #fff);
  border-color: color-mix(in srgb, var(--factory-tab-accent) 23%, #dbe4ef);
  transition: color 160ms ease, background 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.factory-body .factory-tabs button[data-factory-tab="products"],
.factory-product-tabs button[data-factory-product-tab="single"] {
  --factory-tab-accent: var(--teal);
  --factory-tab-end: var(--blue);
}

.factory-body .factory-tabs button[data-factory-tab="orders"],
.factory-product-tabs button[data-factory-product-tab="batch"] {
  --factory-tab-accent: var(--blue);
  --factory-tab-end: var(--violet);
}

.factory-body .factory-tabs button[data-factory-tab="profile"],
.factory-product-tabs button[data-factory-product-tab="manage"] {
  --factory-tab-accent: var(--violet);
  --factory-tab-end: var(--blue);
}

.factory-product-tabs button[data-factory-product-tab="selling"] {
  --factory-tab-accent: color-mix(in srgb, var(--teal) 72%, #16a34a);
  --factory-tab-end: var(--teal);
}

.factory-product-tabs button[data-factory-product-tab="platformRemoved"] {
  --factory-tab-accent: var(--coral);
  --factory-tab-end: var(--gold);
}

.factory-body .factory-tabs button:hover:not(.active),
.factory-product-tabs button:hover:not(.active) {
  color: var(--factory-tab-accent);
  background: color-mix(in srgb, var(--factory-tab-accent) 12%, #fff);
  border-color: color-mix(in srgb, var(--factory-tab-accent) 38%, #dbe4ef);
  transform: translateY(-1px);
}

.factory-body .factory-tabs button.active,
.factory-product-tabs button.active {
  color: #fff;
  background: linear-gradient(135deg, var(--factory-tab-accent), var(--factory-tab-end));
  border-color: transparent;
  box-shadow: 0 8px 18px color-mix(in srgb, var(--factory-tab-accent) 20%, transparent);
}

.factory-body .factory-tabs button:focus-visible,
.factory-product-tabs button:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--factory-tab-accent) 24%, transparent);
  outline-offset: 2px;
}

.factory-body .factory-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 12px;
  margin: 0 0 14px;
  padding: 8px;
  background: #eef6ff;
  border: 1px solid #dbe8f6;
  border-radius: 8px;
}

.factory-body .factory-tabs button,
.factory-body .factory-tabs .factory-home-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
  height: 48px;
  min-height: 48px;
  padding: 0 16px;
  text-align: center;
  font-weight: 900;
}

.factory-panel,
.factory-admin-panel,
.factory-product-panel {
  display: none;
}

.factory-panel.active,
.factory-admin-panel.active,
.factory-product-panel.active {
  display: block;
}

.admin-body .factory-admin-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.admin-body .factory-admin-grid > .role-card {
  min-width: 0;
}

.admin-body .factory-admin-grid > .factory-address-card {
  grid-column: 1;
}

.admin-body .factory-admin-grid > .factory-category-card {
  grid-column: 2;
}

.factory-continent-settings {
  display: grid;
  gap: 12px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #dbe6f3;
}

.factory-continent-settings h3,
.factory-continent-settings p {
  margin: 0;
}

.factory-continent-form {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
}

.factory-continent-form button {
  min-height: 42px;
  padding-inline: 18px;
}

.admin-body .factory-continent-list {
  max-height: 280px;
}

.admin-body #freightManagePanel .freight-continent-summary {
  display: grid;
  gap: 12px;
  align-content: start;
}

.admin-body #freightManagePanel .freight-continent-summary h3 {
  margin: 0;
}

.admin-body #freightManagePanel #freightContinentListHost {
  min-width: 0;
}

.admin-body #freightCollectionAssignments {
  display: grid;
  gap: 9px;
  max-height: 430px;
  overflow-y: auto;
  padding-right: 4px;
}

.admin-body #freightCollectionAssignments .freight-collection-address {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 12px;
  min-width: 0;
  min-height: 0;
  padding: 11px 12px;
  border: 1px solid #d9e5f1;
  border-radius: 8px;
  background: #f8fbfe;
}

.admin-body .freight-collection-address-heading {
  display: flex;
  grid-column: 1;
  grid-row: 1;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px 10px;
  min-width: 0;
}

.admin-body .freight-collection-address-heading strong {
  color: #132a48;
  font-size: 15px;
}

.admin-body .freight-collection-address-heading span {
  padding: 2px 8px;
  color: #087d75;
  font-size: 12px;
  line-height: 1.5;
  background: #e8f7f4;
  border-radius: 999px;
}

.admin-body .freight-collection-address-details {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px 12px;
  min-width: 0;
  margin: 0;
}

.admin-body .freight-collection-address-details > div {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 6px;
  min-width: 0;
}

.admin-body .freight-collection-address-details dt {
  color: #718198;
  font-size: 12px;
}

.admin-body .freight-collection-address-details dd {
  min-width: 0;
  margin: 0;
  color: #2b405e;
  font-size: 13px;
  overflow-wrap: anywhere;
}

.admin-body .freight-collection-address-details .freight-collection-address-full {
  grid-column: 1 / -1;
}

.admin-body .freight-collection-address-delete {
  grid-column: 2;
  grid-row: 1;
  align-self: start;
  justify-self: end;
  width: auto !important;
  min-width: 60px;
  min-height: 32px;
  padding: 5px 12px;
}

@media (max-width: 760px) {
  .admin-body .freight-collection-address-details {
    grid-template-columns: 1fr;
  }

  .admin-body .freight-collection-address-details .freight-collection-address-full {
    grid-column: 1;
  }
}

.admin-body #freightManagePanel #freightContinentSettingsHost .factory-continent-settings {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.admin-body .record-item.factory-continent-record {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  padding-right: 14px;
}

.factory-continent-record > span {
  display: grid;
  gap: 2px;
}

.factory-continent-record small {
  color: #64748b;
  font-size: 12px;
}

.factory-continent-record .danger {
  min-height: 32px;
  padding: 0 14px;
  color: #b42318;
  background: #fff5f5;
  border: 1px solid #ffd1d1;
  border-radius: 5px;
  cursor: pointer;
}

.factory-status {
  min-height: 0;
  margin-bottom: 12px;
  color: #0f766e;
  font-weight: 700;
}

.factory-status:empty {
  display: none;
}

.factory-inline-status {
  grid-column: 1 / -1;
  min-height: 20px;
  color: #0f766e;
  font-weight: 800;
  line-height: 1.5;
}

.factory-inline-status:empty {
  display: none;
}

.factory-spec-table {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 12px;
  background: #f8fbff;
  border: 1px solid #dbe7f5;
  border-radius: 8px;
}

.factory-spec-table strong,
.factory-spec-table .wide {
  grid-column: 1 / -1;
}

.factory-spec-table strong {
  color: #172033;
  font-size: 15px;
  font-weight: 900;
}

.factory-spec-table label {
  display: grid;
  gap: 6px;
}

.factory-brand-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 42px;
  align-items: stretch;
  gap: 8px;
}

.factory-brand-control select {
  min-width: 0;
}

.role-form .factory-brand-control button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  min-width: 42px;
  min-height: 42px;
  padding: 0;
  font-size: 22px;
  line-height: 1;
}

.factory-variant-builder {
  display: grid;
  gap: 12px;
  padding: 12px;
  background: #f8fbff;
  border: 1px solid #dbe8f6;
  border-radius: 8px;
}

.factory-variant-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
}

.factory-variant-head span,
.factory-variant-empty,
.factory-variant-row span,
.factory-variant-row em {
  color: #5d6b82;
  font-size: 13px;
  font-style: normal;
}

.factory-variant-controls {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) minmax(180px, 1fr) minmax(180px, 1fr) auto;
  gap: 10px;
  align-items: end;
}

.factory-variant-controls button {
  min-height: 42px;
  padding: 0 18px;
  color: #fff;
  background: linear-gradient(135deg, var(--teal), var(--blue));
  border: 0;
  border-radius: 8px;
  font-weight: 900;
}

.factory-variant-list {
  display: grid;
  gap: 8px;
}

.factory-variant-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 72px minmax(110px, auto) auto;
  gap: 12px;
  align-items: center;
  padding: 8px 10px;
  background: #fff;
  border: 1px solid #dbe4ef;
  border-radius: 8px;
}

.factory-variant-row img {
  width: 64px;
  height: 48px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid #dbe4ef;
}

.factory-variant-row button {
  min-height: 34px;
  color: #b42318;
  background: #fff;
  border: 1px solid #ffd0d0;
  border-radius: 6px;
}

.factory-standard-field {
  display: grid;
  gap: 6px;
}

.factory-standard-options {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}

.factory-standard-options label {
  display: flex;
  align-items: center;
  gap: 5px;
  min-height: 30px;
  padding: 4px 8px;
  background: #fff;
  border: 1px solid #dbe4ef;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 800;
}

.factory-standard-options input[type="checkbox"] {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
}

.factory-standard-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 30px;
  align-items: center;
  padding: 5px 8px;
  color: #64748b;
  background: #fff;
  border: 1px dashed #b8c8dc;
  border-radius: 6px;
  font-size: 12px;
}

.factory-standard-preview span {
  padding: 2px 7px;
  color: #1d4ed8;
  background: #eaf2ff;
  border-radius: 999px;
  font-weight: 900;
}

.factory-address-paste-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 86px;
  gap: 10px;
  align-items: stretch;
}

.factory-address-paste-control textarea {
  min-width: 0;
}

.factory-address-paste-control button {
  min-height: 42px;
  align-self: stretch;
  color: #fff;
  background: linear-gradient(135deg, var(--teal), var(--blue));
  border: 0;
  border-radius: 7px;
  font-weight: 900;
  cursor: pointer;
}

.admin-body .factory-product-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.factory-body .factory-panel[data-factory-panel="products"].active > .factory-product-grid,
.factory-body .factory-product-panel.active > .factory-product-grid {
  grid-template-columns: minmax(0, 1fr);
}

.factory-single-product-card,
.factory-batch-card {
  grid-column: 1 / -1;
}

.factory-single-product-card #factoryProductForm {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
}

.factory-single-product-card #factoryProductForm > label:nth-of-type(4),
.factory-single-product-card #factoryProductForm > label:nth-of-type(5),
.factory-single-product-card #factoryProductForm > label:nth-of-type(6) {
  grid-column: auto;
}

.factory-single-product-card #factoryProductForm .factory-spec-table {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding: 14px;
  background: #f8fbff;
  border: 1px solid #dfe8f3;
  border-radius: 8px;
}

.factory-single-product-card #factoryProductForm .factory-spec-table strong,
.factory-single-product-card #factoryProductForm .factory-spec-table .wide,
.factory-single-product-card #factoryProductForm > button,
.factory-product-form-actions {
  grid-column: 1 / -1;
}

.factory-product-form-actions {
  display: grid;
  grid-template-columns: minmax(220px, 1fr);
  gap: 10px;
}

.factory-product-form-actions button {
  min-height: 48px;
}

.factory-product-form-actions button[type="button"] {
  color: var(--blue);
  background: #fff;
  border: 1px solid #bcd3f6;
}

.factory-batch-card {
  grid-template-columns: minmax(0, 1fr) minmax(320px, 1fr);
  grid-template-areas:
    "title title"
    "intro intro"
    "template upload"
    "help help";
  align-items: start;
  gap: 18px;
}

.factory-batch-card h3 {
  grid-area: title;
  margin-bottom: 0;
}

.factory-batch-card > p {
  grid-area: intro;
  max-width: 760px;
  margin: -6px 0 2px;
  color: #5d6b82;
  line-height: 1.65;
}

.factory-batch-card .factory-template-download {
  grid-area: template;
}

.factory-batch-card #factoryBatchForm {
  grid-area: upload;
}

.factory-batch-card .factory-help {
  grid-area: help;
}

.factory-template-download {
  display: grid;
  gap: 12px;
  align-content: start;
  min-height: 188px;
  margin-top: 0;
  padding: 20px;
  background: #f8fbff;
  border: 1px dashed #9bb7d7;
  border-radius: 8px;
}

.factory-template-download strong {
  color: #172033;
  font-size: 16px;
  font-weight: 900;
}

.factory-template-download span {
  color: #66758d;
  line-height: 1.55;
}

.factory-template-download button {
  width: fit-content;
  min-height: 38px;
  padding: 0 16px;
  color: #fff;
  background: linear-gradient(135deg, var(--blue), var(--teal));
  border: 0;
  border-radius: 7px;
  font-weight: 900;
  cursor: pointer;
}

.factory-batch-card #factoryBatchForm {
  display: grid;
  gap: 12px;
  min-height: 188px;
  padding: 20px;
  background: #fbfdff;
  border: 1px solid #dbe7f5;
  border-radius: 8px;
}

.factory-batch-card #factoryBatchForm label {
  display: grid;
  gap: 8px;
  color: #34445c;
  font-weight: 900;
}

.factory-batch-card #factoryBatchForm input {
  min-height: 48px;
  background: #fff;
}

.factory-batch-card #factoryBatchForm button {
  min-height: 46px;
  margin-top: auto;
}

.factory-batch-card .factory-help {
  display: grid;
  gap: 8px;
  padding: 18px 20px;
  background: #f8fbff;
  border: 1px solid #dfe8f3;
  border-radius: 8px;
}

.factory-batch-card .factory-help strong {
  color: #172033;
  font-size: 16px;
  font-weight: 900;
}

.factory-batch-card .factory-help p {
  margin: 0;
  color: #5d6b82;
  line-height: 1.75;
}

@media (max-width: 760px) {
  .factory-body {
    --factory-workbench-width: calc(100vw - 28px);
  }

  .factory-body .factory-tabs,
  .factory-product-tabs {
    grid-template-columns: repeat(auto-fit, minmax(136px, 1fr));
    gap: 10px;
  }

  .factory-variant-controls,
  .factory-variant-row {
    grid-template-columns: 1fr;
  }

  .admin-body .factory-admin-grid {
    grid-template-columns: 1fr;
  }

  .factory-continent-form {
    grid-template-columns: 1fr;
  }

  .factory-single-product-card #factoryProductForm,
  .factory-single-product-card #factoryProductForm .factory-spec-table,
  .factory-body .product-upload-field,
  .factory-batch-card {
    grid-template-columns: 1fr;
    grid-template-areas:
      "title"
      "intro"
      "template"
      "upload"
      "help";
  }

  .factory-batch-card h3,
  .factory-batch-card > p,
  .factory-batch-card .factory-template-download,
  .factory-batch-card #factoryBatchForm,
  .factory-batch-card .factory-help {
    grid-column: 1;
  }

}

.admin-body .factory-product-grid > .role-card:first-child {
  grid-row: auto;
}

.admin-body .factory-full-grid {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  justify-items: stretch;
}

.admin-body .factory-full-grid > .role-card {
  width: 100%;
  max-width: none;
  justify-self: stretch;
}

.factory-wide-card {
  grid-column: 1 / -1;
}

.factory-manage-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 8px 0 14px;
}

.factory-manage-toolbar button {
  min-height: 34px;
  padding: 0 16px;
  color: var(--blue);
  background: #f3f7ff;
  border: 1px solid #cfe0f6;
  border-radius: 6px;
  font-weight: 900;
  cursor: pointer;
}

.factory-manage-toolbar button.danger {
  color: #fff;
  background: #e11d48;
  border-color: #e11d48;
}

.factory-product-list-shell {
  position: relative;
  display: grid;
  gap: 0;
  padding-top: 5px;
  overflow: hidden;
  border: 1px solid #dfe8f3;
  border-radius: 8px;
  background: #fff;
}

.factory-product-list-shell::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--coral), #ff8d55 56%, var(--gold));
  box-shadow: 0 3px 10px color-mix(in srgb, var(--coral) 26%, transparent);
  content: "";
}

.factory-product-list-head {
  display: grid;
  gap: 14px;
  align-items: center;
  min-width: 0;
  padding: 9px 10px;
  color: #40516a;
  border-bottom: 1px solid #d5e2f1;
  background: #edf4fd;
  font-size: 12px;
  font-weight: 900;
}

.factory-draft-list-head {
  grid-template-columns: 42px minmax(280px, 1fr) auto auto;
}

.factory-selling-list-head {
  grid-template-columns: minmax(280px, 1fr) minmax(120px, auto) auto;
}

.factory-product-list-shell > .factory-manage-list {
  gap: 6px;
  padding: 8px;
}

.factory-product-list-shell > .factory-manage-list > .record-item {
  margin: 0;
}

.factory-draft-empty.has-license-notice {
  position: relative;
  min-height: 116px;
  padding-right: min(52%, 620px);
}

.factory-license-upload-notice {
  position: absolute;
  top: 50%;
  right: 24px;
  z-index: 1;
  width: min(48%, 640px);
  transform: translateY(-50%);
  padding: 18px 20px;
  color: #c81e1e;
  border: 1px solid #f3a6a6;
  border-radius: 10px;
  background: #fff7f7;
  box-shadow: 0 10px 24px rgba(200, 30, 30, 0.16);
  font-weight: 800;
  line-height: 1.7;
}

.factory-manage-product {
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "check info summary"
    "check info actions";
  align-items: center;
  gap: 10px 18px;
}

/* Keep draft products compact when factories manage a long product list. */
.factory-draft-product {
  grid-template-columns: auto minmax(280px, 1fr) auto auto;
  grid-template-areas: "check info summary actions";
  gap: 8px 14px;
  min-height: 58px;
  padding: 7px 10px;
}

.factory-draft-product .factory-manage-check {
  width: 26px;
  height: 28px;
}

.factory-draft-product .factory-manage-info {
  display: flex;
  gap: 8px;
  align-items: center;
  overflow: hidden;
}

.factory-draft-product .factory-manage-info > strong {
  flex: 0 0 auto;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.factory-draft-product-meta {
  display: flex;
  min-width: 0;
  gap: 5px;
  align-items: center;
  overflow: hidden;
}

.factory-draft-product-meta span {
  display: inline-flex;
  min-height: 24px;
  padding: 3px 7px;
  align-items: center;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.factory-draft-meta-category {
  color: #125d72;
  background: #edf9fb;
  border-color: #c8e9ee !important;
}

.factory-draft-meta-standard {
  color: #315a9f;
  background: #f0f5ff;
  border-color: #cfddf7 !important;
}

.factory-draft-meta-brand {
  color: #516174;
  background: #f4f6f8;
  border-color: #dce3ea !important;
}

.factory-draft-product .factory-manage-summary {
  flex-wrap: nowrap;
  gap: 8px;
  font-size: 12px;
  white-space: nowrap;
}

.factory-draft-product .factory-manage-actions {
  gap: 6px;
  white-space: nowrap;
}

.factory-draft-product .factory-manage-actions button {
  min-height: 30px;
  padding: 0 10px;
}

.factory-draft-product .factory-storage-note {
  flex-basis: 100%;
  font-size: 12px;
}

.factory-submitted-product,
.factory-selling-product {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "info summary"
    "info actions";
}

#factorySubmittedList {
  gap: 6px;
  max-height: min(62vh, 680px);
  padding-right: 4px;
  overflow-y: auto;
  scrollbar-gutter: stable;
}

.factory-submission-month {
  overflow: hidden;
  background: #f8fbff;
  border: 1px solid #dbe6f2;
  border-radius: 7px;
}

.factory-submission-month > summary {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-height: 36px;
  padding: 5px 10px;
  color: #43526a;
  cursor: pointer;
  list-style: none;
}

.factory-submission-month > summary::-webkit-details-marker {
  display: none;
}

.factory-submission-month > summary:hover,
.factory-submission-month[open] > summary {
  background: #eef6ff;
}

.factory-submission-month[open] > summary {
  border-bottom: 1px solid #dbe6f2;
}

.factory-submission-month > summary strong {
  color: #172033;
  font-size: 14px;
}

.factory-submission-month > summary span {
  min-width: 48px;
  padding: 2px 7px;
  color: #17645c;
  text-align: center;
  background: #e8f8f4;
  border-radius: 999px;
  font-size: 12px;
}

.factory-submission-month > summary small {
  overflow: hidden;
  color: #66758d;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.factory-submission-month > summary b {
  color: #1765c1;
  font-size: 12px;
  white-space: nowrap;
}

.factory-submission-month-summary-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

.factory-submission-month-summary-actions button {
  min-height: 28px;
  padding: 0 10px;
  color: #1765c1;
  background: #fff;
  border: 1px solid #bfd4ee;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.factory-submission-month-summary-actions button:hover {
  background: #e7f1ff;
}

.factory-submission-month-summary-actions button.danger {
  color: #fff;
  background: #e11d48;
  border-color: #e11d48;
}

.factory-submission-month-summary-actions button.danger:hover {
  background: #be123c;
}

.factory-submission-month[open] > summary b {
  font-size: 0;
}

.factory-submission-month[open] > summary b::after {
  content: "收起";
  font-size: 12px;
}

.factory-submission-month-details {
  display: grid;
  gap: 6px;
  padding: 6px;
}

.factory-submitted-product {
  grid-template-columns: 32px minmax(0, 1fr) auto;
  grid-template-areas:
    "check info summary"
    "check info actions";
  padding-top: 9px;
  padding-bottom: 9px;
}

.factory-submitted-product .factory-manage-info {
  grid-template-columns: minmax(160px, 1fr) repeat(3, max-content);
  align-items: center;
  gap: 5px 14px;
}

.factory-submitted-product .factory-manage-info strong {
  min-width: 0;
}

.factory-submitted-product .factory-manage-info .factory-rejection-reason {
  grid-column: 1 / -1;
}

.factory-submitted-product.is-rejected {
  grid-template-columns: 32px minmax(250px, 0.85fr) minmax(360px, 1.15fr) auto;
  grid-template-areas:
    "check info reason summary"
    "check info reason actions";
}

.factory-submitted-product.is-rejected .factory-rejection-reason {
  grid-area: reason;
  align-self: stretch;
  justify-content: center;
  margin-top: 0;
}

.factory-submitted-product .factory-manage-summary {
  gap: 6px 10px;
  font-size: 12px;
}

.factory-submitted-product .factory-manage-actions button {
  min-height: 30px;
  padding: 0 10px;
}

.factory-selling-product {
  grid-template-columns: minmax(280px, 1fr) minmax(120px, auto) auto;
  grid-template-areas: "info summary actions";
  padding-top: 10px;
  padding-bottom: 10px;
}

.factory-selling-product .factory-manage-info {
  grid-template-columns: repeat(4, max-content);
  gap: 6px 14px;
  align-items: center;
}

.factory-selling-product .factory-manage-info strong {
  min-width: 170px;
}

.factory-force-removed-section {
  display: grid;
  gap: 8px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid #dbe6f3;
}

.factory-force-removed-section h4 {
  margin: 0;
  color: #172033;
  font-size: 15px;
}

.factory-force-removed-product {
  border-color: #f3b5b5;
  background: #fff7f7;
}

.factory-force-removed-product .factory-manage-summary {
  color: #b91c1c;
}

.factory-platform-deleted-card {
  margin-top: 2px;
}

.factory-platform-record-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
  padding: 8px;
  background: #eef6ff;
  border: 1px solid #dbe8f6;
  border-radius: 8px;
}

.factory-platform-record-tabs button {
  min-height: 42px;
  color: #172033;
  background: #fff;
  border: 1px solid #dbe4ef;
  border-radius: 7px;
  font-weight: 900;
  cursor: pointer;
}

.factory-platform-record-tabs button.active {
  color: #fff;
  background: linear-gradient(135deg, var(--teal), var(--blue));
  border-color: transparent;
}

.factory-platform-record-panel {
  display: none;
}

.factory-platform-record-panel.active {
  display: block;
}

.factory-platform-deleted-card > .form-hint {
  margin: 0 0 10px;
}

.factory-platform-history-shell {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #fff;
  border: 1px solid #dbe6f2;
  border-radius: 8px;
}

.factory-platform-history-head {
  display: grid;
  gap: 12px;
  align-items: center;
  min-height: 40px;
  padding: 8px 10px;
  color: #40516a;
  background: #edf4fd;
  border-bottom: 1px solid #d5e2f1;
  font-size: 12px;
  font-weight: 900;
}

.factory-platform-removed-head {
  grid-template-columns: minmax(430px, 1fr) minmax(140px, auto) minmax(150px, auto);
  min-width: 780px;
}

.factory-platform-deleted-head {
  grid-template-columns: 32px minmax(430px, 1fr) minmax(320px, 0.9fr) minmax(110px, auto);
  min-width: 944px;
}

.factory-platform-history-list {
  gap: 6px;
  max-height: min(62vh, 680px);
  padding: 6px;
  overflow-y: auto;
  scrollbar-gutter: stable;
}

.factory-platform-history-month {
  overflow: hidden;
  background: #f8fbff;
  border: 1px solid #dbe6f2;
  border-radius: 7px;
}

.factory-platform-history-month > summary {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-height: 36px;
  padding: 5px 10px;
  color: #43526a;
  cursor: pointer;
  list-style: none;
}

.factory-platform-history-month > summary::-webkit-details-marker {
  display: none;
}

.factory-platform-history-month > summary:hover,
.factory-platform-history-month[open] > summary {
  background: #eef6ff;
}

.factory-platform-history-month[open] > summary {
  border-bottom: 1px solid #dbe6f2;
}

.factory-platform-history-month > summary strong {
  color: #172033;
  font-size: 14px;
}

.factory-platform-history-month > summary span {
  min-width: 48px;
  padding: 2px 7px;
  color: #17645c;
  text-align: center;
  background: #e8f8f4;
  border-radius: 999px;
  font-size: 12px;
}

.factory-platform-history-month > summary small {
  overflow: hidden;
  color: #66758d;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.factory-platform-history-month > summary b {
  color: #1765c1;
  font-size: 12px;
  white-space: nowrap;
}

.factory-platform-history-summary-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

.factory-platform-history-summary-actions button {
  min-height: 28px;
  padding: 0 10px;
  color: #1765c1;
  background: #fff;
  border: 1px solid #bfd4ee;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.factory-platform-history-summary-actions button:hover {
  background: #e7f1ff;
}

.factory-platform-history-summary-actions button.danger {
  color: #fff;
  background: #e11d48;
  border-color: #e11d48;
}

.factory-platform-history-summary-actions button.danger:hover {
  background: #be123c;
}

.factory-platform-history-month[open] > summary b {
  font-size: 0;
}

.factory-platform-history-month[open] > summary b::after {
  content: "收起";
  font-size: 12px;
}

.factory-platform-history-month-details {
  display: grid;
  gap: 6px;
  padding: 6px;
}

.factory-platform-deleted-product {
  grid-template-columns: 32px minmax(430px, 1fr) minmax(320px, 0.9fr) auto;
  grid-template-areas: "check info reason actions";
  gap: 12px;
  min-width: 944px;
  padding: 9px 10px;
  border-color: #f3b5b5;
  background: #fff8f8;
}

.factory-platform-deleted-product .factory-manage-info {
  grid-template-columns: repeat(4, max-content);
  gap: 6px 12px;
}

.factory-platform-delete-reason {
  grid-area: reason;
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 7px 10px;
  color: #7f1d1d;
  background: #fff;
  border: 1px solid #fecaca;
  border-radius: 6px;
}

.factory-platform-delete-reason span {
  overflow-wrap: anywhere;
}

.factory-platform-deleted-product .factory-manage-actions {
  align-self: center;
}

.factory-manage-check {
  grid-area: check;
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
}

.factory-manage-check input {
  width: 18px;
  height: 18px;
  accent-color: var(--blue);
}

.factory-manage-info {
  grid-area: info;
  display: grid;
  gap: 4px;
  min-width: 0;
}

.factory-storage-note {
  color: #8a4b00;
  font-weight: 800;
}

.factory-manage-summary {
  grid-area: summary;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px 14px;
  color: #42526b;
  font-weight: 800;
}

.factory-manage-actions {
  grid-area: actions;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.factory-manage-actions button {
  min-height: 32px;
  padding: 0 14px;
  color: var(--blue);
  background: #fff;
  border: 1px solid #cfe0f6;
  border-radius: 6px;
  font-weight: 900;
  cursor: pointer;
}

.factory-manage-actions button.danger {
  color: #dc2626;
  border-color: #fecaca;
}

.factory-manage-actions button:hover {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(135deg, var(--blue), var(--teal));
}

.factory-manage-actions button.danger:hover {
  background: #dc2626;
}

.factory-submit-platform-row {
  display: flex;
  justify-content: flex-end;
  margin: 16px 0 22px;
}

.factory-submit-platform-row button {
  min-width: 170px;
  min-height: 42px;
  color: #fff;
  background: linear-gradient(135deg, var(--teal), var(--blue));
  border: 0;
  border-radius: 7px;
  font-weight: 900;
  cursor: pointer;
}

.factory-submission-records {
  display: grid;
  gap: 12px;
  margin-top: 12px;
  padding-top: 18px;
  border-top: 1px solid #dfe8f3;
}

.factory-submission-records h4 {
  margin: 0;
  color: #172033;
  font-size: 16px;
  font-weight: 900;
}

@media (max-width: 760px) {
  .factory-draft-empty.has-license-notice {
    min-height: 0;
    padding-right: 18px;
  }

  .factory-license-upload-notice {
    position: static;
    width: auto;
    margin-top: 14px;
    transform: none;
  }

  .factory-manage-product {
    grid-template-columns: 1fr;
    grid-template-areas:
      "check"
      "info"
      "summary"
      "actions";
  }

  .factory-selling-product {
    grid-template-areas:
      "info"
      "summary"
      "actions";
  }

  .factory-submitted-product {
    grid-template-areas:
      "check"
      "info"
      "reason"
      "summary"
      "actions";
  }

  .factory-submitted-product.is-rejected {
    grid-template-columns: minmax(0, 1fr);
  }

  .factory-submission-month > summary {
    grid-template-columns: auto auto 1fr;
  }

  .factory-submission-month > summary small {
    grid-column: 1 / -1;
  }

  .factory-platform-history-month > summary {
    grid-template-columns: auto auto 1fr;
  }

  .factory-platform-history-month > summary small {
    grid-column: 1 / -1;
  }

  .factory-selling-product .factory-manage-info {
    grid-template-columns: 1fr;
  }

  .factory-platform-deleted-product {
    grid-template-columns: 32px minmax(430px, 1fr) minmax(320px, 0.9fr) auto;
    grid-template-areas: "check info reason actions";
    min-width: 944px;
  }

  .factory-platform-deleted-product .factory-manage-info {
    grid-template-columns: repeat(4, max-content);
  }

  .factory-manage-summary,
  .factory-manage-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 1120px) {
  .factory-draft-list-head {
    grid-template-columns: 42px minmax(0, 1fr) minmax(150px, auto) minmax(150px, auto);
  }

  .factory-draft-product {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "check info summary"
      "check info actions";
  }

  .factory-draft-product .factory-manage-info {
    flex-wrap: wrap;
    overflow: visible;
  }

  .factory-draft-product-meta {
    flex-wrap: wrap;
    overflow: visible;
  }
}

@media (max-width: 760px) {
  .factory-product-list-head {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px 12px;
  }

  .factory-product-list-head span {
    min-width: 0;
  }

  .factory-draft-product {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      "check info"
      "summary summary"
      "actions actions";
  }

  .factory-draft-product .factory-manage-summary,
  .factory-draft-product .factory-manage-actions {
    justify-content: flex-start;
  }
}

.factory-profile-grid .factory-info-wide {
  grid-column: 1 / -1;
  gap: 14px;
}

.factory-license-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid #dfe8f3;
}

.factory-license-head p {
  display: flex;
  align-items: center;
  gap: 8px;
}

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

.business-license-form .business-license-required-note {
  grid-column: 1 / -1;
  margin: 0;
  padding: 9px 11px;
  border: 1px solid #f2c6cb;
  border-radius: 8px;
  color: #9f2736;
  background: #fff7f8;
  font-size: 13px;
  font-weight: 700;
}

.business-license-required-note > span,
.business-license-required-mark {
  color: #dc2626;
  font-weight: 900;
}

.business-license-required-mark {
  display: inline;
  margin-left: 3px;
  vertical-align: baseline;
}

.business-license-form label:has(.business-license-required-mark) {
  display: block;
}

.business-license-form label:has(.business-license-required-mark) > input {
  display: block;
  width: 100%;
  margin-top: 6px;
}

.business-license-draft-file {
  display: block;
  margin-top: 5px;
  color: #0f766e;
  font-size: 12px;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.business-license-form label.wide {
  grid-column: 1 / -1;
}

.business-license-form button[type="submit"] {
  grid-column: 1 / -1;
}

.factory-license-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 12px;
  color: #43526a;
  background: #fff;
  border: 1px solid #dfe8f3;
  border-radius: 7px;
}

.factory-license-unlocked {
  display: grid;
  gap: 6px;
  padding: 12px;
  color: #17645c;
  background: #edf9f6;
  border: 1px solid #c5e8df;
  border-radius: 7px;
}

.factory-license-required {
  display: grid;
  gap: 6px;
  padding: 12px;
  color: #8a4b00;
  background: #fff8e6;
  border: 1px solid #f3d58f;
  border-radius: 7px;
}

.factory-license-unlocked strong,
.factory-license-unlocked p,
.factory-license-required strong,
.factory-license-required p {
  margin: 0;
}

.business-license-status {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 3px 10px;
  border-radius: 999px;
  color: #5b6678;
  background: #eef3f8;
  font-weight: 900;
}

.business-license-status.pending {
  color: #8a4b00;
  background: #fff3d6;
}

.business-license-status.approved {
  color: #087443;
  background: #dff8ea;
}

.business-license-status.rejected {
  color: #b42318;
  background: #fee4e2;
}

.business-license-feedback {
  margin: 10px 0 0;
  padding: 10px 12px;
  border: 1px solid #b9d6f2;
  border-radius: 8px;
  color: #155e9b;
  background: #f1f7ff;
  font-weight: 800;
  line-height: 1.55;
}

.business-license-feedback.is-success { color: #087443; border-color: #9bd7b7; background: #eefaf3; }
.business-license-feedback.is-error { color: #b42318; border-color: #f0b8b3; background: #fff3f2; }
.business-license-feedback.is-pending { color: #8a4b00; border-color: #efd29b; background: #fff8e8; }

@media (max-width: 760px) {
  .factory-license-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .business-license-form,
  .factory-license-meta {
    grid-template-columns: 1fr;
  }

  .business-license-form,
  .business-license-form label,
  .business-license-form input,
  .business-license-form button[type="submit"] {
    min-width: 0;
    max-width: 100%;
  }

  .business-license-form input[type="file"] {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .business-license-form button[type="submit"] {
    width: 100%;
    min-height: 44px;
  }

  .business-license-form .business-license-required-note {
    overflow-wrap: anywhere;
  }
}

.factory-body .factory-email-form {
  grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
  align-items: end;
}

.factory-body .factory-email-form button[type="submit"] {
  grid-column: 1 / -1;
}

.factory-review-list,
.factory-order-items {
  display: grid;
  gap: 8px;
  margin: 12px 0;
}

.factory-order-fulfillment {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  align-items: end;
  min-width: 0;
  margin-top: 6px;
}

.factory-order-record {
  overflow: visible;
}

.factory-order-fulfillment label {
  display: grid;
  gap: 4px;
  color: #53657d;
  font-size: 12px;
}

.factory-order-fulfillment input,
.factory-order-fulfillment select {
  min-height: 36px;
}

.factory-order-fulfillment-status {
  align-self: center;
  white-space: nowrap;
  color: #16877f;
  font-weight: 700;
}

.factory-order-workbench {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

.factory-orders-card-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 12px;
}

.factory-orders-card-heading h3 {
  flex: 0 0 auto;
  margin: 0;
}

.factory-orders-alert {
  min-width: 0;
  max-width: min(72%, 860px);
  margin-left: auto;
  color: #d92d20;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.55;
  text-align: right;
  overflow-wrap: anywhere;
}

.factory-orders-alert:empty {
  display: none;
}

@media (max-width: 720px) {
  .factory-orders-card-heading {
    display: grid;
    gap: 8px;
  }

  .factory-orders-alert {
    max-width: none;
    margin-left: 0;
    font-size: 14px;
    text-align: left;
  }
}

.factory-variant-image-upload {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 10px;
  color: #1765b9;
  background: #f4f8ff;
  border: 1px solid #c5dbf5;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.factory-variant-image-upload input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.factory-order-period {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 10px;
  overflow: visible;
  border: 1px solid #dce7f3;
  border-radius: 9px;
  background: #fbfdff;
}

.factory-order-period.is-current {
  border-top: 4px solid #ff6f61;
}

.factory-order-period.is-history {
  border-top: 4px solid #79cf00;
}

.factory-order-period-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.factory-order-period .factory-order-record {
  width: 100%;
  box-sizing: border-box;
  padding: 7px 10px;
}

.factory-order-period-heading > div {
  display: grid;
  gap: 3px;
}

.factory-order-period-heading span {
  width: fit-content;
  padding: 3px 8px;
  color: #b42318;
  background: #fff0ee;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
}

.factory-order-period-heading span.history {
  color: #497400;
  background: #f1fbdc;
}

.factory-order-period-heading h4,
.factory-order-period-heading strong {
  margin: 0;
}

.factory-order-period-heading strong {
  color: #40516a;
  font-size: 13px;
}

.factory-order-table-head,
.factory-order-record-main {
  display: grid;
  grid-template-columns: 32px minmax(0, 1.2fr) minmax(0, .86fr) minmax(0, 1fr) minmax(0, .68fr) minmax(0, .7fr) minmax(0, .95fr) minmax(0, .95fr);
  gap: 10px;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  min-width: 0;
}

.factory-order-table-head {
  padding: 7px 10px;
  color: #40516a;
  background: #edf4fd;
  border: 1px solid #d5e2f1;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 900;
}

.factory-order-record-summary {
  display: contents;
}

.factory-order-period .factory-order-record {
  min-width: 0;
}

.factory-order-record-summary > * {
  display: flex;
  align-items: center;
  min-height: 22px;
  min-width: 0;
  overflow-wrap: anywhere;
}

.factory-order-record-main {
  min-height: 30px;
  padding-bottom: 7px;
  border-bottom: 1px solid #e0e8f2;
}

.factory-order-select,
.factory-order-select-placeholder,
.factory-order-select-head {
  display: grid;
  min-width: 0;
  min-height: 22px;
  place-items: center;
}

.factory-order-select input {
  width: 17px;
  height: 17px;
  margin: 0;
  accent-color: #1765c1;
  cursor: pointer;
}

.factory-order-batch-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-height: 32px;
}

.factory-order-batch-toolbar > span {
  margin-right: auto;
  color: #5d6b82;
  font-size: 12px;
  font-weight: 800;
}

.factory-order-batch-toolbar button {
  min-height: 30px;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 800;
}

.factory-order-batch-toolbar .factory-order-select-all {
  color: #b42318;
  border-color: #f5a5a0;
  background: #fff5f4;
}

.factory-order-batch-toolbar .factory-order-cancel-selection {
  color: #135ec5;
  border-color: #8bc8f6;
  background: #f1f8ff;
}

.factory-order-download-button {
  color: #08756e;
  border-color: #74cfc6;
  background: #effbf9;
}

.factory-order-download-button:hover {
  color: #fff;
  border-color: #08756e;
  background: #08756e;
}

.factory-order-batch-toolbar .factory-order-ship-button {
  color: #fff;
  border-color: #26354d;
  background: #26354d;
}

.factory-domestic-express-control {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(150px, 210px);
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.factory-domestic-express-control > b {
  color: #204567;
  font-size: 12px;
  white-space: nowrap;
}

.factory-domestic-express-picker {
  position: relative;
  min-width: 0;
}

.factory-domestic-express-picker > summary {
  display: flex;
  align-items: center;
  min-height: 30px;
  padding: 4px 28px 4px 10px;
  overflow: hidden;
  color: #0b6f69;
  background: #f1fbfa;
  border: 1px solid #8fd6d0;
  border-radius: 7px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 900;
  list-style: none;
  white-space: nowrap;
}

.factory-domestic-express-picker > summary::after {
  position: absolute;
  right: 10px;
  content: "⌄";
  color: #1765c1;
}

.factory-domestic-express-picker > summary::-webkit-details-marker { display: none; }
.factory-domestic-express-picker > summary span { overflow: hidden; text-overflow: ellipsis; }

.factory-domestic-express-options {
  position: absolute;
  z-index: 30;
  top: calc(100% + 5px);
  right: 0;
  display: grid;
  gap: 6px;
  width: min(340px, 80vw);
  max-height: 250px;
  padding: 9px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid #b8cce5;
  border-radius: 9px;
  box-shadow: 0 12px 28px rgba(30, 65, 110, .18);
}

.factory-domestic-express-option {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  padding: 9px;
  border: 1px solid #d8e5f3;
  border-radius: 7px;
  cursor: pointer;
}

.factory-domestic-express-option.is-selected {
  background: #eaf9f6;
  border-color: #20a899;
}

.factory-domestic-express-option input { width: 17px; height: 17px; margin: 0; accent-color: #168f87; }
.factory-domestic-express-option span { display: grid; gap: 2px; min-width: 0; }
.factory-domestic-express-option small { color: #64748b; overflow-wrap: anywhere; }

.factory-order-batch-toolbar .factory-order-batch-print-button {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(135deg, #256bd1, #6b52d9);
}

.factory-order-batch-toolbar .factory-order-batch-print-button:hover,
.factory-order-batch-toolbar .factory-order-batch-print-button:focus-visible {
  filter: brightness(1.08);
  box-shadow: 0 5px 14px rgba(71, 86, 205, .25);
}

.factory-order-consolidation {
  min-width: 0;
}

.factory-order-consolidation summary {
  cursor: pointer;
  color: #0f766e;
  font-weight: 900;
  overflow-wrap: anywhere;
}

.factory-order-consolidation > div {
  display: grid;
  gap: 4px;
  margin-top: 8px;
  padding: 9px;
  color: #53657d;
  background: #f0fdfa;
  border: 1px solid #a7f3d0;
  border-radius: 8px;
  font-size: 12px;
}

.factory-order-fulfillment-menu {
  margin-top: 8px;
  border: 1px solid #b9def7;
  border-radius: 10px;
  background: #f7fbff;
}

.factory-order-fulfillment-menu > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 11px;
  cursor: pointer;
  color: #13558d;
  font-weight: 900;
}

.factory-order-fulfillment-menu > summary small {
  color: #0f766e;
  font-size: 12px;
}

.factory-order-fulfillment-menu .factory-order-fulfillment {
  padding: 0 11px 9px;
}

.factory-order-tracking-form {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  align-items: end;
  margin-top: 0;
}

.factory-order-print-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 0 11px 10px;
}

.factory-order-print-actions button {
  min-height: 30px;
  padding: 4px 8px;
}

.factory-order-signed-status {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 4px 10px;
  color: #087f5b;
  border: 1px solid #86d7bd;
  border-radius: 7px;
  background: #effcf7;
  font-size: 12px;
  font-weight: 900;
}

.factory-order-edit-disabled {
  min-height: 30px;
  padding: 4px 10px;
  color: #93a1b3 !important;
  border: 1px solid #d8e0e9 !important;
  border-radius: 7px;
  background: #f2f4f7 !important;
  cursor: not-allowed;
  opacity: 1;
}

.factory-order-number {
  color: #1765b9 !important;
  font-weight: 900 !important;
}

.factory-order-tracking-number {
  color: #294762 !important;
  font-weight: 800 !important;
}

.factory-order-tracking-number em,
.factory-order-item-tracking em {
  color: #8290a3;
  font-style: normal;
  font-weight: 500;
}

.factory-order-status {
  color: #17645c !important;
  font-weight: 800 !important;
}

.factory-order-record-headline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.factory-order-payment {
  flex: 0 0 auto;
  color: #16877f;
  font-weight: 800;
}

.factory-order-history-list {
  display: grid;
  gap: 10px;
  max-height: 720px;
  overflow-y: auto;
  padding-right: 4px;
}

.factory-order-history-month {
  overflow: hidden;
  border: 1px solid #dce7f3;
  border-radius: 9px;
  background: #fbfdff;
}

.factory-order-history-month > summary {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto auto;
  grid-template-areas: "month count status download toggle";
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 0 12px;
  cursor: pointer;
  list-style: none;
  color: #284c73;
  background: #f0f7ff;
}

.factory-order-history-month > summary::-webkit-details-marker { display: none; }
.factory-order-history-month > summary:hover { background: #e8f3ff; }
.factory-order-history-month > summary strong {
  grid-area: month;
  font-size: 15px;
}
.factory-order-history-month > summary span { grid-area: count; }
.factory-order-history-month > summary small { grid-area: status; }
.factory-order-history-month > summary b { grid-area: toggle; }
.factory-order-history-month > summary span,
.factory-order-history-month > summary small {
  color: #5d708a;
  font-size: 12px;
  font-weight: 700;
}
.factory-order-history-month > summary .factory-order-download-button {
  grid-area: download;
  min-height: 30px;
  padding: 4px 11px;
  font-size: 12px;
  font-weight: 800;
}
.factory-order-history-month > summary b::after {
  content: "展开记录";
  color: #17645c;
  font-size: 12px;
  font-weight: 800;
}
.factory-order-history-month[open] > summary {
  border-bottom: 1px solid #dce7f3;
  background: #edf9f7;
}
.factory-order-history-month[open] > summary b::after { content: "收起记录"; }

.factory-order-history-month-details {
  display: grid;
  gap: 0;
  padding: 8px 10px 10px;
}

.factory-order-history-month-details .factory-order-table-head {
  margin: 0;
  border-radius: 6px 6px 0 0;
}

.factory-order-history-logistics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  min-width: 0;
  margin: 12px 0;
  padding: 12px;
  border: 1px solid #dbe6f5;
  border-radius: 10px;
  background: #f8fbff;
  color: #53657d;
  font-size: 13px;
}

.physical-order-receiver-copy {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  margin-top: 8px;
  padding: 9px 12px;
  border: 1px solid #cfe0f2;
  border-radius: 8px;
  background: #f7faff;
  color: #38536f;
  font-size: 13px;
  line-height: 1.6;
}

.physical-order-receiver-copy span {
  min-width: 0;
  overflow-wrap: anywhere;
  user-select: text;
}

.physical-order-receiver-copy button {
  min-height: 34px;
  padding: 6px 12px;
  border: 1px solid #9ec5ef;
  border-radius: 7px;
  color: #075eaa;
  background: #fff;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}

.physical-order-receiver-copy button:hover {
  border-color: #2686d9;
  background: #eef7ff;
}

.physical-order-fulfillment {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto auto;
  gap: 8px;
  align-items: center;
  min-width: 760px;
  margin-top: 8px;
}

.physical-order-fulfillment .danger,
.physical-order-cancel-form .danger {
  color: #b42318;
  border-color: #efaaa3;
  background: #fff4f2;
}

.physical-order-cancel-form {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) auto;
  gap: 8px;
  align-items: end;
  min-width: 760px;
  margin-top: 8px;
  padding: 10px;
  border: 1px solid #efaaa3;
  border-radius: 8px;
  background: #fff8f7;
}

.physical-order-cancel-form label { display: grid; gap: 5px; color: #7a2c25; font-weight: 700; }
.physical-order-cancel-form input { min-width: 0; height: 36px; padding: 0 10px; border: 1px solid #e5aaa4; border-radius: 6px; background: #fff; font: inherit; }
.physical-order-cancel-form > div { display: flex; gap: 8px; }
.physical-order-cancel-form button { min-height: 36px; padding: 7px 12px; white-space: nowrap; }
.physical-order-archived-delivery.is-cancelled { border-color: #efb7b1; background: #fff6f5; }

.physical-order-archived-delivery {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  padding: 9px 12px;
  border: 1px solid #dce7f3;
  border-radius: 8px;
  background: #f7faff;
  color: #52657d;
}

.physical-order-archived-delivery strong {
  color: #123b67;
}

.physical-order-fulfillment-message {
  margin: 8px 0 0;
  color: #0f766e;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
}

.physical-order-fulfillment-message.is-error {
  color: #b42318;
}

.physical-order-fulfillment input:disabled,
.physical-order-fulfillment button:disabled {
  cursor: not-allowed;
  opacity: 0.62;
}

@media (max-width: 700px) {
  .point-exchange-history-toggle {
    align-items: flex-start;
    padding: 12px;
  }

  .point-exchange-history-toggle > span {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
  }

  .point-exchange-history-toggle strong {
    font-size: 17px;
  }

  .physical-order-fulfillment {
    grid-template-columns: 1fr;
    min-width: 0;
  }

  .physical-order-receiver-copy {
    grid-template-columns: 1fr;
  }

  .physical-order-receiver-copy button {
    width: 100%;
  }

  .physical-order-cancel-form {
    grid-template-columns: 1fr;
    min-width: 0;
  }

  .physical-order-cancel-form > div { display: grid; grid-template-columns: 1fr 1fr; }

  .physical-order-fulfillment input {
    width: 100%;
    min-width: 0;
  }

  .physical-order-fulfillment button {
    width: 100%;
    min-width: 0;
  }
}

.physical-product-record-copy {
  min-width: 0;
  overflow-x: auto;
}

.factory-review-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 34px;
  padding: 0 8px 8px;
}

.factory-review-toolbar[hidden] {
  display: none;
}

.factory-review-status {
  margin: 0 8px 8px;
  padding: 9px 12px;
  border: 1px solid #bfd6f5;
  border-radius: 7px;
  color: #155e75;
  background: #eef8ff;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.45;
}

.factory-review-status[hidden] {
  display: none;
}

.factory-review-status[data-status="loading"] {
  color: #1d4ed8;
  border-color: #93c5fd;
  background: #eff6ff;
}

.factory-review-status[data-status="success"] {
  color: #047857;
  border-color: #6ee7b7;
  background: #ecfdf5;
}

.factory-review-status[data-status="error"] {
  color: #b42318;
  border-color: #fda29b;
  background: #fff1f0;
}

.factory-review-toolbar-group {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}

.factory-review-toolbar-group > span {
  color: #63738a;
  font-size: 12px;
  font-weight: 800;
}

.factory-review-group-toolbar {
  width: 100%;
  min-height: 44px;
  box-sizing: border-box;
  padding: 6px 8px;
  background: #f8fbff;
  border-bottom: 1px solid #d7e4f3;
}

.factory-review-group-toolbar .factory-review-toolbar-group {
  width: 100%;
  justify-content: flex-end;
}

.factory-review-group-toolbar .factory-review-toolbar-group > span:first-child {
  margin-right: auto;
}

.factory-admin-review-shell .factory-review-compact-record + .factory-review-compact-record {
  margin-top: 18px;
  border-top: 1px solid #d7e4f3;
}

.factory-admin-readonly-note {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 5px 10px;
  color: #b42318 !important;
  background: #fff5f4;
  border: 1px solid #fecdca;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
}

.factory-review-toolbar button,
.factory-review-row-actions button {
  min-height: 30px;
  padding: 0 10px;
  color: #fff;
  background: linear-gradient(135deg, var(--teal), var(--blue));
  border: 0;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
  white-space: nowrap;
}

.factory-review-toolbar .factory-review-select-all {
  background: #16a34a;
}

.factory-review-toolbar .factory-review-clear-all {
  background: #2563eb;
}

.factory-review-toolbar .factory-review-approve-selected {
  background: #dc2626;
}

.factory-review-toolbar .factory-review-reject-selected {
  background: #e11d48;
}

.admin-body .record-item.factory-review-compact-record {
  padding-top: 0;
  padding-right: 14px;
}

.factory-review-compact-record .factory-review-list {
  width: 100%;
  max-width: none;
  max-height: 420px;
  box-sizing: border-box;
  justify-self: stretch;
  overflow: auto;
  padding: 0 2px 8px 0;
  scrollbar-gutter: stable;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.factory-review-compact-row {
  display: grid;
  grid-template-columns: var(--factory-review-outer-columns);
  grid-template-rows: auto;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 1782px;
  box-sizing: border-box;
  padding: 9px 10px;
  color: #43526a;
  background: #f8fbff;
  border: 1px solid #dfe8f3;
  border-radius: 7px;
  font-size: 13px;
}

.factory-review-check {
  display: grid;
  place-items: center;
}

.factory-review-compact-row > .factory-review-check {
  grid-column: 1;
  grid-row: 1;
}

.factory-review-compact-row > .factory-admin-product-title {
  grid-column: 2;
  grid-row: 1;
  align-self: start;
}

.factory-review-list .factory-review-compact-row > .factory-review-check {
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}

.factory-review-check input {
  width: 16px;
  height: 16px;
  accent-color: var(--blue);
}

.factory-review-compact-row strong,
.factory-review-compact-row span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.factory-review-compact-row > span:not(.factory-force-resubmit-badge),
.factory-review-compact-row > span.factory-force-resubmit-badge:empty {
  display: none;
}

.factory-review-row-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  grid-column: 4;
  grid-row: 1;
  justify-self: end;
  align-self: start;
  width: 132px;
}

.factory-review-pricing {
  display: grid;
  grid-column: 3;
  grid-row: 1;
  grid-template-columns: var(--factory-review-pricing-columns);
  align-items: start;
  gap: 6px;
  min-width: 0;
}

.factory-review-list .factory-review-pricing label {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  color: #52637c;
  font-size: 11px;
  font-weight: 800;
}

.factory-review-list .factory-review-pricing > label > span {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.factory-review-pricing input,
.factory-review-pricing select {
  width: 100%;
  min-width: 0;
  height: 30px;
  padding: 0 8px;
  color: #172033;
  background: #fff;
  border: 1px solid #cfe0f6;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 800;
  box-sizing: border-box;
  outline: none;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease;
  scroll-margin-inline: 16px;
}

.factory-review-pricing input:hover,
.factory-review-pricing select:hover,
.factory-sales-continent-multiselect summary:hover,
.factory-logistics-multiselect summary:hover {
  border-color: #8fb8eb;
  background: #fbfdff;
}

.factory-review-pricing input:focus,
.factory-review-pricing select:focus,
.factory-sales-continent-multiselect summary:focus-visible,
.factory-logistics-multiselect summary:focus-visible {
  border-color: #2b73d2;
  box-shadow: 0 0 0 3px rgba(43, 115, 210, 0.14);
}

.factory-sales-continent-multiselect,
.factory-logistics-multiselect {
  position: relative;
  min-width: 0;
}

.factory-sales-continent-multiselect summary,
.factory-logistics-multiselect summary {
  display: grid;
  align-items: center;
  height: 30px;
  padding: 0 28px 0 9px;
  color: #52637c;
  background: #fff;
  border: 1px solid #cfe0f6;
  border-radius: 6px;
  cursor: pointer;
  list-style: none;
}

.factory-sales-continent-multiselect summary::-webkit-details-marker,
.factory-logistics-multiselect summary::-webkit-details-marker {
  display: none;
}

.factory-sales-continent-multiselect summary::after,
.factory-logistics-multiselect summary::after {
  position: absolute;
  top: 10px;
  right: 10px;
  content: "▾";
  color: #315a9f;
}

.factory-sales-continent-multiselect summary > span,
.factory-logistics-multiselect summary > span {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.factory-sales-continent-multiselect summary > b,
.factory-logistics-multiselect summary > b {
  overflow: hidden;
  color: #172033;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.factory-sales-continent-options {
  position: absolute;
  z-index: 21;
  top: calc(100% + 4px);
  left: 0;
  display: grid;
  width: max(100%, 190px);
  max-height: 210px;
  padding: 6px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid #b9cbe2;
  border-radius: 6px;
  box-shadow: 0 12px 28px rgba(30, 55, 90, 0.18);
}

.factory-sales-continent-options.is-factory-review-floating,
.factory-logistics-options.is-factory-review-floating {
  position: fixed;
  z-index: 1200;
  margin: 0;
  box-sizing: border-box;
}

.factory-review-list .factory-review-pricing .factory-sales-continent-options label {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  gap: 7px;
  align-items: center;
  min-height: 32px;
  padding: 5px 7px;
  color: #263b57;
  background: #fff;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
}

.factory-review-list .factory-review-pricing .factory-sales-continent-options label:hover {
  background: #edf5ff;
}

.factory-sales-continent-options input {
  width: 15px;
  height: 15px;
  accent-color: var(--blue);
}

.factory-logistics-options {
  position: absolute;
  z-index: 20;
  top: calc(100% + 4px);
  left: 0;
  display: grid;
  width: max(100%, 260px);
  max-height: 210px;
  padding: 6px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid #b9cbe2;
  border-radius: 6px;
  box-shadow: 0 12px 28px rgba(30, 55, 90, 0.18);
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  -webkit-overflow-scrolling: touch;
}

.factory-review-list .factory-review-pricing .factory-logistics-options label {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  gap: 7px;
  align-items: center;
  min-height: 32px;
  padding: 5px 7px;
  color: #263b57;
  background: #fff;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
}

.factory-review-list .factory-review-pricing .factory-logistics-options label:hover {
  background: #edf5ff;
}

.factory-logistics-options label[hidden] {
  display: none !important;
}

.factory-logistics-options input {
  width: 17px;
  height: 17px;
  accent-color: var(--blue);
}

.factory-logistics-options p {
  margin: 0;
  padding: 7px;
  color: #64748b;
  font-size: 12px;
}

.factory-review-base-cost,
.factory-review-commission,
.factory-review-sale-price {
  align-self: center;
  color: #172033;
  font-size: 12px;
  font-weight: 900;
}

.factory-standard-mismatch-warning {
  grid-column: 1 / -1;
  margin-top: 1px;
  padding: 5px 8px;
  color: #b42318;
  background: #fff1f0;
  border: 1px solid #f7b2ad;
  border-radius: 5px;
  font-size: 11px;
  font-weight: 900;
  line-height: 1.35;
  white-space: normal;
}

.factory-standard-mismatch-warning[hidden] {
  display: none;
}

.factory-review-base-cost,
.factory-review-commission,
.factory-review-sale-price {
  display: grid;
  gap: 0;
  min-height: 30px;
  padding: 0 4px;
  align-content: center;
  background: transparent;
  border: 0;
  border-radius: 0;
}

.factory-review-base-cost small,
.factory-review-commission small,
.factory-review-sale-price small {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.factory-review-base-cost strong,
.factory-review-commission strong,
.factory-review-sale-price strong {
  color: currentColor;
  font-size: 13px;
}

.factory-review-commission {
  color: #1d4ed8;
}

.factory-review-sale-price {
  color: #0f766e;
}

.factory-review-variant-prices {
  display: flex;
  grid-column: 1 / -1;
  align-items: center;
  gap: 7px;
  min-width: 0;
  padding: 5px 7px;
  color: #40536d;
  background: #f3f8ff;
  border: 1px solid #d3e3f5;
  border-radius: 6px;
  font-size: 11px;
  white-space: nowrap;
}

.factory-review-variant-prices > small {
  flex: 0 0 auto;
  color: #1765b9;
  font-weight: 900;
}

.factory-review-variant-prices > span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  padding: 3px 7px;
  background: #fff;
  border: 1px solid #dbe7f4;
  border-radius: 999px;
}

.factory-review-variant-prices b {
  color: #18253a;
}

.factory-review-variant-prices strong {
  color: #08756e;
  font-weight: 900;
}

.factory-review-row-actions button.danger {
  background: #dc2626;
}

.factory-review-table {
  display: grid;
  gap: 8px;
  margin: 14px 0;
  overflow-x: auto;
}

.factory-review-head,
.factory-review-row {
  display: grid;
  grid-template-columns: minmax(170px, 1.2fr) 110px 110px 110px 110px 120px 110px 110px 120px 96px;
  align-items: center;
  gap: 12px;
  min-width: 1240px;
}

.factory-review-head {
  padding: 0 12px;
  color: #34445c;
  font-size: 13px;
  font-weight: 900;
}

.factory-review-batch-field {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.factory-review-batch-field input {
  width: 100%;
  min-height: 28px;
  padding: 0 7px;
  background: #fff;
  border: 1px solid #cfd9e8;
  border-radius: 4px;
  font-size: 12px;
}

.factory-review-row {
  padding: 10px 12px;
  background: #f8fbff;
  border: 1px solid #dfe8f3;
  border-radius: 8px;
}

.factory-review-name {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.factory-review-name input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--blue);
}

.factory-review-name span {
  overflow: hidden;
  color: #34445c;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.factory-review-row strong,
.factory-review-row b {
  color: #172033;
  font-weight: 900;
}

.factory-review-row label {
  display: block;
  min-width: 0;
}

.factory-review-row input[type="number"] {
  width: 100%;
  min-height: 36px;
  padding: 0 8px;
  background: #fff;
  border: 1px solid #cfd9e8;
  border-radius: 4px;
}

.factory-review-actions {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto auto;
  align-items: end;
  gap: 10px;
  margin-top: 12px;
}

.factory-review-actions button,
.factory-admin-selling-row button,
.factory-review-browse {
  min-height: 34px;
  padding: 0 16px;
  color: #fff;
  background: linear-gradient(135deg, var(--teal), var(--blue));
  border: 0;
  border-radius: 6px;
  font-weight: 900;
  cursor: pointer;
}

.factory-review-browse {
  padding: 0 10px;
  color: var(--blue);
  background: #fff;
  border: 1px solid #bfd3eb;
  border-radius: 6px;
  font-weight: 900;
  cursor: pointer;
}

.factory-review-reject-field {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.factory-review-reject-field span {
  color: #52637c;
  font-size: 12px;
  font-weight: 900;
}

.factory-review-reject-field input {
  width: 100%;
  min-height: 38px;
  padding: 0 10px;
  color: #172033;
  background: #fff;
  border: 1px solid #f2b8b5;
  border-radius: 6px;
}

.factory-review-actions .factory-review-reject-button {
  background: #dc2626;
}

.factory-submitted-product.is-rejected {
  background: #fff8f8;
  border-color: #fecaca;
}

.factory-rejection-reason {
  display: grid;
  gap: 3px;
  margin-top: 5px;
  padding: 8px 10px;
  color: #991b1b;
  background: #fff1f2;
  border: 1px solid #fecdd3;
  border-radius: 6px;
}

.factory-rejection-reason b {
  font-size: 12px;
}

.factory-rejection-reason p {
  margin: 0;
  color: #7f1d1d;
  font-size: 13px;
  line-height: 1.5;
}

.factory-product-detail-open {
  overflow: hidden;
}

.factory-product-detail-modal {
  position: fixed;
  inset: 0;
  z-index: 9990;
  display: grid;
  place-items: center;
  padding: 24px;
}

.factory-product-detail-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.68);
  backdrop-filter: blur(3px);
}

.factory-product-detail-dialog {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(1080px, 96vw);
  max-height: 92vh;
  overflow: hidden;
  background: #fff;
  border: 1px solid #d8e6f5;
  border-radius: 8px;
  box-shadow: 0 28px 70px rgba(2, 6, 23, 0.36);
}

.factory-product-detail-dialog > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  color: #fff;
  background: linear-gradient(135deg, var(--blue), var(--teal));
}

.factory-product-detail-dialog > header span {
  display: block;
  margin-bottom: 3px;
  font-size: 12px;
  font-weight: 900;
}

.factory-product-detail-dialog > header h3 {
  margin: 0;
  font-size: 22px;
}

.factory-product-detail-dialog > header button {
  width: 32px;
  height: 32px;
  color: #fff;
  background: rgba(255, 255, 255, 0.16);
  border: 0;
  border-radius: 50%;
  font-size: 24px;
  cursor: pointer;
}

.factory-product-detail-body {
  display: grid;
  gap: 18px;
  min-height: 0;
  padding: 20px;
  overflow-y: auto;
  background: #f8fbff;
}

.factory-product-detail-summary,
.factory-product-detail-specs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.factory-product-detail-summary > div,
.factory-product-detail-specs > div {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 11px 12px;
  background: #fff;
  border: 1px solid #dfe8f3;
  border-radius: 7px;
}

.factory-product-detail-summary span,
.factory-product-detail-specs span {
  color: #64748b;
  font-size: 12px;
}

.factory-product-detail-summary strong,
.factory-product-detail-specs strong {
  overflow-wrap: anywhere;
  color: #172033;
}

.factory-product-detail-section {
  display: grid;
  gap: 10px;
}

.factory-product-detail-section h4 {
  margin: 0;
  color: #172033;
  font-size: 16px;
}

.factory-product-detail-media {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.factory-product-detail-media figure {
  display: grid;
  gap: 5px;
  margin: 0;
  padding: 8px;
  background: #fff;
  border: 1px solid #dfe8f3;
  border-radius: 7px;
}

.factory-product-detail-media img,
.factory-product-detail-media video {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  background: #eef3f8;
  border-radius: 5px;
}

.factory-product-detail-file-card {
  display: grid;
  place-items: center;
  gap: 4px;
  min-height: 96px;
  padding: 10px;
  color: #52637c;
  text-align: center;
  background: #eef3f8;
  border: 1px dashed #b8c8dc;
  border-radius: 6px;
}

.factory-product-detail-file-card strong {
  color: #1d4ed8;
  font-size: 14px;
}

.factory-product-detail-file-card span,
.factory-product-detail-file-card small {
  max-width: 100%;
  overflow-wrap: anywhere;
  font-size: 12px;
}

.factory-product-detail-media figcaption {
  overflow: hidden;
  color: #52637c;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.factory-product-detail-variants {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.factory-product-detail-variants > div {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 9px;
  background: #fff;
  border: 1px solid #dfe8f3;
  border-radius: 7px;
}

.factory-product-detail-variants img,
.factory-product-detail-variants .factory-product-detail-file-card,
.factory-product-detail-swatch {
  width: 56px;
  height: 48px;
  object-fit: cover;
  border: 1px solid #d9e4f0;
  border-radius: 6px;
}

.factory-product-detail-variants .factory-product-detail-file-card {
  min-height: 48px;
  padding: 4px;
}

.factory-product-detail-variants .factory-product-detail-file-card span,
.factory-product-detail-variants .factory-product-detail-file-card small {
  display: none;
}

.factory-product-detail-swatch {
  display: grid;
  place-items: center;
  color: var(--blue);
  background: #eef5ff;
  font-weight: 900;
}

.factory-product-detail-variants p {
  display: grid;
  gap: 3px;
  min-width: 0;
  margin: 0;
}

.factory-product-detail-variants p span {
  color: #64748b;
  font-size: 12px;
}

.factory-product-detail-description {
  margin: 0;
  padding: 12px;
  color: #43526a;
  background: #fff;
  border: 1px solid #dfe8f3;
  border-radius: 7px;
  line-height: 1.65;
  white-space: pre-line;
}

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

.factory-product-detail-pages img {
  width: 100%;
  max-height: 520px;
  object-fit: contain;
  background: #fff;
  border: 1px solid #dfe8f3;
  border-radius: 7px;
}

.factory-product-detail-empty {
  grid-column: 1 / -1;
  margin: 0;
  padding: 16px;
  color: #64748b;
  text-align: center;
  background: #fff;
  border: 1px dashed #cddbeb;
  border-radius: 7px;
}

.factory-product-review-history {
  display: grid;
  gap: 7px;
}

.factory-product-review-history p {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  gap: 10px;
  margin: 0;
  padding: 9px 10px;
  background: #fff;
  border: 1px solid #dfe8f3;
  border-radius: 7px;
}

.factory-product-review-history span,
.factory-product-review-history em {
  color: #64748b;
  font-size: 12px;
  font-style: normal;
}

@media (max-width: 760px) {
  .factory-review-actions {
    grid-template-columns: 1fr;
  }

  .factory-product-detail-modal {
    padding: 10px;
  }

  .factory-product-detail-summary,
  .factory-product-detail-specs,
  .factory-product-detail-media,
  .factory-product-detail-variants,
  .factory-product-detail-pages {
    grid-template-columns: 1fr;
  }

  .factory-product-review-history p {
    grid-template-columns: 1fr;
  }
}

.factory-admin-selling-row {
  grid-template-columns: 24px minmax(250px, 1.15fr) minmax(150px, 0.65fr) minmax(260px, 1fr) 52px 52px 52px;
  align-items: center;
  gap: 10px;
  min-height: 64px;
  padding: 9px 12px;
}

.factory-admin-table-shell {
  position: relative;
  display: grid;
  min-width: 0;
  padding-top: 4px;
  overflow-x: auto;
  overflow-y: hidden;
  border: 1px solid #dbe6f2;
  border-radius: 9px;
  background: #fff;
  box-shadow: 0 8px 20px rgba(31, 95, 191, 0.06);
}

.factory-admin-table-shell::before {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  left: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--blue), var(--teal));
  content: "";
}

.factory-admin-review-shell::before {
  background: linear-gradient(90deg, var(--coral), #ff8d55 58%, var(--gold));
}

.factory-admin-review-shell {
  --factory-review-outer-columns: 24px 180px minmax(1402px, 1fr) 132px;
  --factory-review-pricing-columns: minmax(160px, 0.7fr) minmax(238px, 1fr) 172px 88px 112px 96px 86px 104px 86px 94px 106px;
  grid-template-columns: minmax(0, 1fr);
  overflow-x: scroll;
  overflow-y: hidden;
  scrollbar-gutter: stable;
}

.factory-admin-removed-shell::before {
  background: linear-gradient(90deg, #3e8e41, #78b82a 58%, #b5cf36);
}

.factory-admin-selling-shell::before {
  background: linear-gradient(90deg, var(--teal), #35b79d 58%, #62c982);
}

.factory-admin-table-head {
  display: grid;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 8px 12px;
  color: #344860;
  border-bottom: 1px solid #d4e0ee;
  background: linear-gradient(180deg, #f5f9ff, #eaf2fc);
  font-size: 12px;
  font-weight: 900;
  line-height: 1.35;
}

.factory-admin-table-head span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.factory-admin-address-head {
  grid-template-columns: minmax(150px, 0.8fr) minmax(130px, 0.7fr) minmax(300px, 1.7fr) 64px;
  min-width: 520px;
}

.factory-admin-category-head {
  grid-template-columns: minmax(118px, 0.78fr) minmax(150px, 1.32fr) 84px;
  min-width: 0;
}

.factory-admin-review-head {
  grid-template-columns: var(--factory-review-outer-columns);
  width: 1782px;
  min-width: 1782px;
  box-sizing: border-box;
  padding: 9px 10px;
  will-change: transform;
}

.factory-admin-review-pricing-head {
  display: grid;
  grid-template-columns: var(--factory-review-pricing-columns);
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.factory-admin-review-pricing-head span {
  overflow: visible;
  text-overflow: clip;
}

.factory-admin-removed-head-row {
  grid-template-columns: 24px minmax(180px, 1.2fr) minmax(140px, 1fr) minmax(150px, 0.9fr) auto;
  min-width: 720px;
}

.factory-admin-selling-head {
  grid-template-columns: 24px minmax(250px, 1.15fr) minmax(150px, 0.65fr) minmax(260px, 1fr) 52px 52px 52px;
  gap: 10px;
  min-width: 900px;
}

.factory-admin-listing-edit-card {
  margin-bottom: 16px;
}

.factory-admin-listing-edit-shell {
  --factory-review-pricing-columns: minmax(160px, 0.7fr) minmax(238px, 1fr) 172px 88px 112px 96px 86px 104px 86px 94px 106px;
  overflow-x: scroll;
  overflow-y: hidden;
  scrollbar-gutter: stable;
}

.factory-admin-listing-edit-shell::before {
  background: linear-gradient(90deg, #246ed2, #6b58d9 58%, #9b7ae8);
}

.factory-admin-listing-edit-head,
#factoryListingEditAdminList > .factory-admin-listing-edit-row {
  grid-template-columns: 180px minmax(1402px, 1fr) 164px;
  width: 1782px;
  min-width: 1782px;
  box-sizing: border-box;
}

#factoryListingEditAdminList {
  width: 1782px;
  min-width: 1782px;
  max-height: 420px;
  margin: 0;
  padding: 0 0 8px;
  overflow-x: visible;
  overflow-y: auto;
  scrollbar-gutter: stable;
}

#factoryListingEditAdminList > .factory-admin-listing-edit-row {
  display: grid;
  align-items: center;
  gap: 8px;
  min-height: 76px;
  padding: 9px 10px;
}

#factoryListingEditAdminList > .factory-admin-listing-edit-row > .factory-admin-product-title {
  grid-column: 1;
  grid-row: 1;
  align-self: start;
}

#factoryListingEditAdminList > .factory-admin-listing-edit-row > .factory-review-pricing {
  grid-column: 2;
  grid-row: 1;
}

#factoryListingEditAdminList > .factory-admin-listing-edit-row > .factory-admin-listing-edit-actions {
  grid-column: 3;
  grid-row: 1;
}

.factory-admin-listing-edit-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: 6px;
}

.factory-admin-listing-edit-actions button {
  width: 100%;
  min-width: 0;
  min-height: 32px;
  padding: 0 8px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.factory-admin-listing-edit-actions button:first-child {
  border-color: #b8c9df;
  background: #f7faff;
  color: #35516f;
}

.factory-admin-listing-edit-actions button:nth-child(2) {
  border-color: transparent;
  background: linear-gradient(135deg, #1aa39a 0%, #246ed2 100%);
  box-shadow: 0 4px 10px rgba(36, 110, 210, 0.18);
  color: #fff;
}

.factory-admin-listing-edit-actions button:nth-child(2):hover {
  filter: brightness(1.04);
}

.factory-admin-listing-edit-actions button:nth-child(2):focus-visible {
  outline: 2px solid rgba(36, 110, 210, 0.35);
  outline-offset: 2px;
}

.factory-admin-selling-row .factory-selling-edit {
  min-height: 30px;
  padding: 0 10px;
  white-space: nowrap;
}

.factory-admin-listing-edit-shell,
.factory-admin-review-shell {
  scrollbar-color: #8fa7c5 #edf3fa;
  scrollbar-width: auto;
}

.factory-admin-listing-edit-shell::-webkit-scrollbar,
.factory-admin-review-shell::-webkit-scrollbar {
  height: 12px;
}

.factory-admin-listing-edit-shell::-webkit-scrollbar-track,
.factory-admin-review-shell::-webkit-scrollbar-track {
  background: #edf3fa;
  border-radius: 999px;
}

.factory-admin-listing-edit-shell::-webkit-scrollbar-thumb,
.factory-admin-review-shell::-webkit-scrollbar-thumb {
  background: #8fa7c5;
  border: 2px solid #edf3fa;
  border-radius: 999px;
}

.factory-admin-selling-row .factory-selling-edit {
  width: 52px;
  min-width: 52px;
  font-size: 12px;
}

.factory-admin-logistics-head {
  grid-template-columns: minmax(160px, 0.9fr) repeat(3, minmax(150px, 1fr)) minmax(110px, 0.65fr);
  min-width: 840px;
}

.factory-admin-table-shell > .record-list,
.factory-admin-table-shell > .factory-logistics-list {
  gap: 7px;
  min-width: 0;
  padding: 8px;
}

.factory-admin-table-shell .leaderboard-empty {
  display: flex;
  align-items: center;
  min-height: 66px;
  margin: 0;
  border-style: dashed;
  background: #fbfdff;
}

#factoryAddressList > .product-record {
  grid-template-columns: minmax(150px, 0.8fr) minmax(130px, 0.7fr) minmax(300px, 1.7fr) 64px;
  align-items: center;
  min-width: 760px;
  padding: 9px 12px;
}

#factoryAddressList > .product-record p {
  min-width: 0;
  overflow-wrap: anywhere;
}

#factoryCategoryList > .factory-category-item {
  min-width: 0;
  padding: 9px 12px;
}

#factoryCategoryList > .factory-category-item > summary {
  display: grid;
  grid-template-columns: minmax(118px, 0.78fr) minmax(150px, 1.32fr) 84px;
  gap: 8px;
  width: 100%;
}

#factoryCategoryList > .factory-category-item > summary > strong {
  grid-column: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}

#factoryCategoryList > .factory-category-item > summary > span {
  grid-column: 2;
  min-width: 0;
  justify-self: start;
  white-space: nowrap;
}

#factoryCategoryList .factory-category-order-actions {
  grid-column: 3;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  justify-self: end;
  gap: 6px;
}

#factoryCategoryList .factory-category-order-actions button {
  display: inline-grid;
  place-items: center;
  width: 36px;
  min-height: 32px;
  padding: 0;
  color: #1765b9;
  border: 1px solid #b9d4f5;
  border-radius: 7px;
  background: #f4f8ff;
  font-size: 17px;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease, transform 160ms ease;
}

#factoryCategoryList .factory-category-order-actions button:hover:not(:disabled) {
  color: #fff;
  border-color: #1976d2;
  background: linear-gradient(135deg, #1aa39a 0%, #246ed2 100%);
}

#factoryCategoryList .factory-category-order-actions button:focus-visible {
  outline: 3px solid rgba(36, 110, 210, 0.24);
  outline-offset: 2px;
}

#factoryCategoryList .factory-category-order-actions button:active:not(:disabled) {
  transform: translateY(1px);
}

#factoryCategoryList .factory-category-order-actions button:disabled {
  color: #9aa8ba;
  border-color: #dbe3ed;
  background: #eef2f6;
  cursor: not-allowed;
  opacity: 0.72;
}

@media (max-width: 760px) {
  .factory-admin-category-head,
  #factoryCategoryList > .factory-category-item > summary {
    grid-template-columns: minmax(80px, 0.8fr) minmax(0, 1.2fr) 82px;
    gap: 6px;
  }

  #factoryCategoryList .factory-category-order-actions button {
    width: 38px;
    min-height: 38px;
  }
}

#factoryCategoryList > .factory-category-item > .factory-category-child-list {
  margin: 9px 0;
}

#factoryCategoryList > .factory-category-item > .factory-category-child-list > li {
  display: grid;
  grid-template-columns: minmax(118px, 0.78fr) minmax(150px, 1.32fr) 84px;
  gap: 8px;
  min-width: 0;
}

#factoryCategoryList > .factory-category-item > .factory-category-child-list > li > span {
  grid-column: 2;
  min-width: 0;
  overflow-wrap: anywhere;
}

#factoryCategoryList .factory-category-child-select {
  grid-column: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: center;
  width: 32px;
  min-height: 32px;
  margin: 0;
  cursor: pointer;
}

#factoryCategoryList .factory-category-child-select input {
  width: 17px;
  height: 17px;
  margin: 0;
  accent-color: #1765b9;
  cursor: pointer;
}

#factoryCategoryList > .factory-category-item > .factory-category-child-list > li > button {
  grid-column: 3;
  justify-self: end;
  width: 64px;
}

#factoryCategoryList > .factory-category-item > .factory-category-child-form {
  grid-template-columns: minmax(118px, 0.78fr) minmax(150px, 1.32fr) 84px;
}

#factoryCategoryList > .factory-category-item > .factory-category-child-form > input {
  grid-column: 2;
  min-width: 0;
}

#factoryCategoryList > .factory-category-item > .factory-category-child-form > button {
  grid-column: 3;
  width: 84px;
  padding-inline: 8px;
  white-space: nowrap;
}

.factory-category-actions {
  display: grid;
  grid-template-columns: minmax(118px, 0.78fr) minmax(150px, 1.32fr) 84px;
  align-items: center;
  gap: 8px;
}

.factory-category-actions > button:first-child {
  grid-column: 2;
  justify-self: start;
}

.factory-category-actions > button.danger {
  grid-column: 3;
  justify-self: end;
  width: 64px;
}

.factory-category-actions button {
  min-height: 32px;
  padding: 0 12px;
  color: #1765b9;
  border: 1px solid #b9d4f5;
  border-radius: 6px;
  background: #f4f8ff;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.factory-category-actions button.danger {
  color: #fff;
  border-color: #dc2626;
  background: #dc2626;
}

.factory-admin-review-shell > #factorySubmissionList {
  width: 1782px;
  min-width: 1782px;
  padding: 0;
}

.factory-admin-review-shell .factory-review-compact-record {
  padding: 0;
  border: 0;
  background: transparent;
}

.factory-admin-review-shell .factory-review-compact-record .factory-review-list {
  width: 1782px;
  max-width: 1782px;
  overflow-x: visible;
  overflow-y: auto;
  padding: 0 0 8px;
}

.factory-admin-removed-shell > #factoryRemovedAdminList {
  min-width: 720px;
}

.factory-admin-selling-shell > #factorySellingAdminList {
  min-width: 850px;
}

.factory-admin-logistics-shell > #factoryLogisticsList {
  min-width: 840px;
}

.factory-selling-heading,
.factory-selling-batch-actions {
  display: flex;
  align-items: center;
}

.factory-selling-heading {
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 12px;
}

.factory-selling-heading h3 {
  margin: 0;
}

.factory-selling-batch-actions {
  gap: 8px;
}

.factory-selling-batch-actions[hidden] {
  display: none !important;
}

.factory-selling-batch-actions button {
  min-height: 30px;
  padding: 0 14px;
}

.factory-selling-batch-actions .danger {
  color: #fff;
  background: #dc2626;
  border-color: #dc2626;
}

.factory-admin-product-title {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.factory-admin-product-title strong,
.factory-admin-product-title small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.factory-admin-product-title small {
  color: #64748b;
  font-size: 12px;
  font-weight: 700;
}

.factory-admin-product-title .factory-admin-variant-summary {
  color: #08756e;
  font-size: 11px;
  font-weight: 900;
}

.factory-admin-selling-category,
.factory-admin-selling-price {
  min-width: 0;
  color: #64748b;
  font-size: 12px;
}

.factory-admin-selling-category {
  overflow-wrap: anywhere;
  line-height: 1.45;
}

.factory-admin-selling-price {
  display: flex;
  align-items: center;
  align-self: stretch;
}

.factory-admin-selling-single-price {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 5px 10px;
  color: #0f4c81;
  border: 1px solid #cfe1f5;
  border-radius: 8px;
  background: #f8fbff;
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
}

.factory-admin-selling-variant-prices {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  min-width: 0;
  align-items: center;
  gap: 6px 8px;
  padding: 6px 9px;
  border: 1px solid #cfe1f5;
  border-radius: 8px;
  background: #f8fbff;
}

.factory-admin-selling-variant-prices small {
  flex: 0 0 100%;
  color: #64748b;
  font-size: 10px;
  font-weight: 800;
}

.factory-admin-selling-variant-prices span {
  display: inline-flex;
  flex: 0 1 auto;
  gap: 8px;
  align-items: center;
  justify-content: flex-start;
  min-height: 24px;
  padding: 2px 7px;
  color: #334155;
  border: 1px solid #dce9f7;
  border-radius: 999px;
  background: #fff;
  white-space: nowrap;
}

.factory-admin-selling-variant-prices b {
  color: #08756e;
}

.factory-admin-selling-variant-prices strong {
  color: #0f4c81;
}

.factory-admin-selling-row .danger {
  background: #dc2626;
}

.factory-admin-selling-row .factory-selling-delete {
  width: 52px;
  min-width: 52px;
  min-height: 30px;
  padding: 0 8px;
  font-size: 12px;
}

.factory-admin-selling-row .factory-selling-offline {
  width: 52px;
  min-width: 52px;
  min-height: 30px;
  padding: 0 8px;
  font-size: 12px;
}

.factory-review-compact-row.is-force-resubmitted {
  border-color: #f2b6b6;
  background: #fff7f7;
}

.factory-force-resubmit-badge {
  width: max-content;
  max-width: 100%;
  padding: 2px 6px;
  color: #b91c1c;
  background: #fee2e2;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 900;
}

.factory-review-duplicate-badge {
  width: max-content;
  max-width: 100%;
  padding: 2px 6px;
  color: #b91c1c;
  background: #fff1f2;
  border: 1px solid #fecdd3;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 900;
}

.factory-admin-panel .leaderboard-empty {
  min-height: 78px;
  padding: 16px 18px;
}

.factory-logistics-list-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
  color: #64748b;
  font-size: 12px;
}

.factory-logistics-list-toolbar > div {
  display: flex;
  gap: 6px;
}

.factory-logistics-list-toolbar button {
  min-height: 30px;
  padding: 0 10px;
}

.factory-logistics-list-toolbar button.danger {
  color: #b91c1c;
  background: #fff;
  border: 1px solid #fecaca;
}

.factory-logistics-country-list {
  display: grid;
  gap: 8px;
  max-height: min(460px, 52vh);
  overflow-y: auto;
  padding-right: 5px;
}

.factory-logistics-country-row {
  display: grid;
  grid-template-columns: minmax(120px, 0.45fr) minmax(0, 2.55fr);
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: #f8fbff;
  border: 1px solid #dce7f4;
  border-radius: 7px;
}

.factory-logistics-country-types {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.factory-logistics-country-types label,
.factory-logistics-country-types .is-empty {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  min-height: 34px;
  padding: 7px 9px;
  color: #29415e;
  background: #fff;
  border: 1px solid #d7e4f2;
  border-radius: 6px;
  font-size: 12px;
}

.factory-logistics-country-types input {
  width: 16px;
  min-width: 16px;
  height: 16px;
  accent-color: var(--blue);
}

.factory-logistics-country-types label span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.factory-logistics-country-types .is-empty {
  color: #94a3b8;
  background: #f7f9fc;
  border-style: dashed;
}

@media (max-width: 900px) {
  .factory-logistics-list-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .factory-logistics-country-row {
    grid-template-columns: 1fr;
  }

  .factory-logistics-country-types {
    grid-template-columns: 1fr;
  }
}

.factory-admin-removed-products {
  display: grid;
  gap: 10px;
  margin-top: 0;
}

.factory-admin-removed-head {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
}

.factory-admin-removed-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.factory-admin-removed-head > span {
  color: #64748b;
  font-size: 13px;
}

.factory-admin-removed-head button,
.factory-admin-removed-row button {
  min-height: 32px;
  padding: 0 12px;
  color: #fff;
  background: linear-gradient(135deg, var(--teal), var(--blue));
  border: 0;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.factory-admin-removed-actions button.danger {
  background: #e11d48;
}

.factory-admin-removed-row {
  grid-template-columns: 24px minmax(180px, 1.2fr) minmax(140px, 1fr) minmax(150px, 0.9fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: #fff8f8;
  border-color: #f2c2c2;
}

.factory-admin-selling-row > .factory-admin-readonly-note {
  grid-column: 5 / 7;
  text-align: right;
}

.factory-admin-removed-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.factory-admin-removed-list {
  display: grid;
  gap: 8px;
  max-height: min(520px, 58vh);
  overflow-y: auto;
  padding-right: 4px;
}

.factory-logistics-grid {
  display: block;
}

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

.factory-logistics-form .factory-rate-row,
.factory-logistics-form .factory-logistics-upload,
.factory-logistics-form .factory-weight-tiers {
  grid-column: 1 / -1;
}

.factory-logistics-upload {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto;
  gap: 6px 14px;
  align-items: center;
  padding: 10px 12px;
  background: #f8fbff;
  border: 1px dashed #9db8d5;
  border-radius: 8px;
}

.factory-logistics-upload strong {
  display: block;
  color: #172033;
  font-size: 15px;
}

.factory-logistics-upload p {
  margin: 2px 0 0;
  color: #64748b;
  font-size: 12px;
  line-height: 1.6;
}

.factory-logistics-upload-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

.factory-logistics-paste-zone {
  grid-column: 1 / -1;
  min-height: 76px;
  padding: 12px;
  display: grid;
  place-items: center;
  color: #64748b;
  font-size: 13px;
  line-height: 1.6;
  text-align: center;
  background: #fff;
  border: 1px dashed #b7cce3;
  border-radius: 8px;
  outline: none;
  overflow: auto;
}

.factory-logistics-paste-zone:focus {
  border-color: #2b6ed2;
  box-shadow: 0 0 0 3px rgba(43, 110, 210, 0.12);
}

.factory-logistics-paste-zone.has-content {
  place-items: start;
  text-align: left;
  white-space: pre-wrap;
}

.factory-logistics-paste-zone img {
  max-width: 100%;
  max-height: 160px;
  object-fit: contain;
  border: 1px solid #d8e5f5;
  border-radius: 6px;
}

.factory-logistics-paste-actions {
  grid-column: 1 / -1;
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  align-items: center;
}

.factory-logistics-file-button {
  display: block;
}

.factory-logistics-file-button input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.factory-logistics-file-button span,
.factory-logistics-upload-actions button,
.factory-logistics-paste-actions button {
  display: inline-flex;
  min-height: 38px;
  padding: 0 14px;
  align-items: center;
  justify-content: center;
  color: #0f5f9c;
  font-weight: 700;
  background: #fff;
  border: 1px solid #8cb5db;
  border-radius: 6px;
  cursor: pointer;
}

.factory-logistics-upload-status {
  grid-column: 1 / -1;
  padding-top: 2px;
}

.factory-logistics-upload-status.is-loading {
  color: #1d4ed8;
}

.factory-logistics-upload-status.is-success {
  color: #087f78;
}

.factory-logistics-upload-status.is-error {
  color: #b91c1c;
}

.factory-rate-row {
  display: grid;
  grid-template-columns: minmax(140px, 200px) minmax(180px, 320px) 66px;
  gap: 10px;
  align-items: end;
  justify-content: start;
}

.factory-rate-row button,
.factory-weight-tier .factory-add-tier {
  min-height: 42px;
  width: 46px;
  min-width: 46px;
  padding: 0;
  grid-column: auto;
}

.factory-rate-row button {
  width: 66px;
  min-width: 66px;
}

.factory-logistics-form .factory-region-field {
  grid-column: auto;
}

.factory-region-picker {
  position: relative;
}

.factory-region-picker summary {
  min-height: 42px;
  padding: 10px 34px 10px 12px;
  color: #475569;
  background: #fff;
  border: 1px solid #cbd8e6;
  border-radius: 6px;
  cursor: pointer;
  list-style: none;
}

.factory-region-picker summary::-webkit-details-marker {
  display: none;
}

.factory-region-picker summary::after {
  content: "▾";
  position: absolute;
  top: 11px;
  right: 12px;
}

.factory-region-menu {
  position: absolute;
  z-index: 20;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  padding: 10px;
  background: #fff;
  border: 1px solid #cbd8e6;
  border-radius: 6px;
  box-shadow: 0 12px 28px rgb(15 23 42 / 16%);
}

.factory-weight-tiers {
  display: grid;
  gap: 10px;
}

.factory-weight-tiers.has-imported-tiers {
  max-height: min(520px, 55vh);
  padding: 4px 7px 4px 2px;
  overflow-y: auto;
  scrollbar-gutter: stable;
}

.factory-weight-tier {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr)) 46px;
  gap: 10px;
  align-items: end;
}

.factory-weight-tier .factory-add-tier {
  min-width: 46px;
  padding: 0 12px;
  font-weight: 800;
}

/* The pricing note is intentionally omitted from ADMIN and its business mirror. */
.factory-tier-rate-note {
  display: none;
}

.factory-region-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  max-height: 190px;
  margin-top: 8px;
  padding: 10px;
  overflow-y: auto;
  background: #f8fbff;
  border: 1px solid #d7e2ef;
  border-radius: 6px;
}

.factory-region-options label {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 7px;
  min-width: 0;
  font-size: 12px;
}

.factory-region-options input {
  width: 16px;
  min-width: 16px;
  height: 16px;
}

.factory-region-options span {
  overflow-wrap: anywhere;
}

.factory-logistics-saved-card {
  margin-top: 16px;
}

.factory-logistics-form > button[type="submit"] {
  grid-column: 1 / -1;
}

.factory-review-platform-logistics {
  display: grid;
  gap: 0;
  min-width: 0;
  color: #52637c;
  font-size: 11px;
  font-weight: 800;
}

.factory-review-platform-logistics small {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.factory-review-platform-logistics strong {
  display: flex;
  align-items: center;
  min-height: 30px;
  padding: 0 8px;
  color: #08765e;
  background: #effbf7;
  border: 1px solid #b8eadc;
  border-radius: 6px;
  white-space: nowrap;
}

/* 物流设置各功能区的识别色：仅增加顶部装饰，不改变原有表单与交互。 */
.factory-logistics-form .factory-rate-row,
.factory-logistics-form .factory-logistics-upload,
.factory-logistics-form .factory-weight-tiers,
.factory-logistics-saved-card {
  position: relative;
  overflow: visible;
}

.factory-logistics-form .factory-rate-row::before,
.factory-logistics-form .factory-logistics-upload::before,
.factory-logistics-form .factory-weight-tiers::before,
.factory-logistics-saved-card::before {
  position: absolute;
  top: -5px;
  right: 0;
  left: 0;
  height: 4px;
  border-radius: 999px;
  content: "";
}

.factory-logistics-form .factory-rate-row::before {
  background: linear-gradient(90deg, #2563eb, #38bdf8);
}

.factory-logistics-form .factory-logistics-upload::before {
  background: linear-gradient(90deg, #16a34a, #84cc16);
}

.factory-logistics-form .factory-weight-tiers::before {
  background: linear-gradient(90deg, #0f9f9c, #2dd4bf);
}

.factory-logistics-saved-card::before {
  background: linear-gradient(90deg, #f59e0b, #facc15);
}

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

.jyf-confirm-dialog {
  width: min(480px, 100%);
  max-height: min(70vh, 560px);
  overflow: auto;
  padding: 22px;
  background: #fff;
  border: 1px solid #d9e5f2;
  border-radius: 12px;
  box-shadow: 0 24px 64px rgba(15, 23, 42, 0.3);
}

.jyf-confirm-dialog h3 { margin: 0; color: #172033; }
.jyf-confirm-dialog p { margin: 12px 0 20px; color: #475569; line-height: 1.65; }
.jyf-confirm-dialog > div { display: flex; justify-content: flex-end; gap: 10px; }
.jyf-confirm-dialog button { min-width: 84px; min-height: 38px; }

/* 电商公开产品页沿用课堂的紧凑横向信息排列；价格权限仍由页面原有逻辑控制。 */
.ecommerce-public-body .ecommerce-product-list {
  gap: 8px;
}

.ecommerce-public-body .ecommerce-product-card {
  display: grid;
  grid-template-columns: 118px minmax(0, 1fr);
  min-height: 118px;
  padding: 10px 12px;
}

.ecommerce-public-body .ecommerce-product-image {
  width: 104px;
  height: 94px;
  object-fit: contain;
}

.ecommerce-public-body .ecommerce-product-copy {
  display: grid;
  grid-template-columns: minmax(150px, 1.15fr) minmax(128px, .8fr) minmax(132px, .85fr) 72px minmax(190px, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.ecommerce-public-body .ecommerce-product-copy > strong,
.ecommerce-public-body .ecommerce-product-copy > small,
.ecommerce-public-body .ecommerce-product-copy > p,
.ecommerce-public-body .ecommerce-product-copy > span,
.ecommerce-public-body .ecommerce-product-copy > .ecommerce-card-actions {
  margin: 0;
}

.ecommerce-public-body .ecommerce-product-copy > p:first-of-type {
  display: none;
}

.ecommerce-list-body .site-header {
  position: relative;
  justify-content: center !important;
}

.ecommerce-list-body .site-header .top-nav {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  justify-self: auto;
}

.ecommerce-list-body .site-header .logo {
  position: absolute;
  left: 24px;
}

.ecommerce-list-body .ecommerce-category-bar {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  margin: 16px 0 18px;
}

.ecommerce-list-body .ecommerce-category-bar button {
  width: 100%;
  min-height: 46px;
}

.ecommerce-list-body .ecommerce-standalone-row {
  display: grid;
  grid-template-columns: 88px minmax(170px, 1.2fr) minmax(150px, 1fr) minmax(110px, .7fr) minmax(160px, 1fr) 76px minmax(130px, .8fr);
  gap: 14px;
  align-items: center;
  min-width: 980px;
  padding: 13px 16px;
  border-bottom: 1px solid #dfe8f3;
}

.ecommerce-list-body .ecommerce-standalone-row.no-price {
  grid-template-columns: 88px minmax(170px, 1.2fr) minmax(150px, 1fr) minmax(110px, .7fr) minmax(160px, 1fr) 76px;
}

.ecommerce-list-body .ecommerce-list-image-cell {
  display: grid;
  width: 72px;
  height: 72px;
  place-items: center;
  overflow: hidden;
  border: 1px solid #dce7f3;
  border-radius: 8px;
  background: #f7faff;
}

.ecommerce-list-body .ecommerce-list-image-cell img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ecommerce-list-body .ecommerce-list-image-cell span {
  padding: 8px;
  color: #91a0b5;
  font-size: 12px;
  text-align: center;
}

.ecommerce-standalone-row.is-head {
  color: #526179;
  background: #f3f7fc;
  border-top: 3px solid #f09a76;
  font-weight: 800;
}

.ecommerce-standalone-row.is-head > * {
  min-width: 0;
  text-align: center;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.ecommerce-standalone-row.is-head > :first-child {
  text-align: center;
}

.ecommerce-standalone-row strong,
.ecommerce-standalone-row b { color: #172033; }
.ecommerce-standalone-row span { color: #607089; }
.ecommerce-standalone-row .button { min-width: 82px; }

/* Header cells and their values share the same grid tracks and center line. */
.ecommerce-standalone-row > :is(strong, span, b) {
  justify-self: stretch;
  text-align: center;
}

.ecommerce-standalone-row > .ecommerce-country-time-lines {
  justify-self: stretch;
  text-align: center;
}

.ecommerce-standalone-row > .button {
  justify-self: center;
}

.ecommerce-country-time-lines {
  display: grid;
  gap: 6px;
  min-width: 0;
  line-height: 1.55;
}

.ecommerce-country-time-lines span {
  min-height: 1.55em;
}

.ecommerce-list-body .ecommerce-product-table { overflow-x: auto; }

@media (max-width: 760px) {
  .ecommerce-list-body .site-header .top-nav { position: static; transform: none; }
  .ecommerce-list-body .site-header .logo { position: static; }
  .ecommerce-list-body .ecommerce-category-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.ecommerce-public-body .ecommerce-price-line {
  color: #64748b;
  font-size: 12px;
}

@media (max-width: 900px) {
  .ecommerce-public-body .ecommerce-product-card,
  .ecommerce-public-body .ecommerce-product-copy { grid-template-columns: 1fr; }
  .ecommerce-public-body .ecommerce-product-image { justify-self: start; }
}

.factory-logistics-result {
  display: grid;
  gap: 4px;
  margin: 14px 0;
  padding: 16px;
  color: #64748b;
  background: #f8fbff;
  border: 1px dashed #c8d7e8;
  border-radius: 8px;
}

.factory-logistics-result.has-value {
  color: #17324d;
  background: #ecfdf8;
  border-style: solid;
  border-color: #8ad9cc;
}

.factory-logistics-result strong {
  color: #087f78;
  font-size: 26px;
}

.factory-logistics-rule {
  display: grid;
  grid-template-columns: minmax(190px, 1fr) minmax(260px, auto) auto auto;
  align-items: center;
  gap: 12px;
}

.factory-logistics-rule p {
  margin: 3px 0 0;
}

.factory-logistics-rule .danger {
  min-height: 32px;
  padding: 0 12px;
  color: #b91c1c;
  background: #fff;
  border: 1px solid #fecaca;
}

@media (max-width: 900px) {
  .factory-admin-tabs,
  .factory-logistics-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-body .factory-admin-grid > .factory-address-card,
  .admin-body .factory-admin-grid > .factory-category-card {
    grid-column: auto;
  }

  .factory-weight-tier {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .factory-region-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .factory-admin-selling-row {
    grid-template-columns: 24px minmax(0, 1fr) 52px 52px 52px;
    align-items: start;
  }

  .factory-admin-selling-row > .factory-admin-product-title,
  .factory-admin-selling-category,
  .factory-admin-selling-price {
    grid-column: 2 / -1;
  }

  .factory-admin-selling-category {
    padding-top: 2px;
  }

  .factory-admin-selling-price {
    width: 100%;
  }

  .factory-admin-selling-variant-prices {
    width: 100%;
  }

  .factory-admin-selling-row .factory-selling-edit {
    grid-column: 3;
    align-self: center;
  }

  .factory-admin-selling-row .factory-selling-offline {
    grid-column: 4;
    align-self: center;
  }

  .factory-admin-selling-row .factory-selling-delete {
    grid-column: 5;
    align-self: center;
  }

  .factory-admin-selling-row > .factory-admin-readonly-note {
    grid-column: 2 / -1;
    text-align: left;
  }

  .factory-admin-removed-row {
    grid-template-columns: 24px minmax(0, 1fr) auto;
  }

  .factory-admin-removed-row > span {
    grid-column: 2 / -1;
  }
}

@media (max-width: 620px) {
  .factory-rate-row,
  .factory-weight-tier {
    grid-template-columns: 1fr;
  }

  .factory-logistics-upload {
    grid-template-columns: 1fr;
  }

  .factory-logistics-upload-actions {
    align-items: stretch;
    flex-direction: column;
  }
}

.factory-relist-block {
  display: grid;
  gap: 10px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #dfe8f3;
}

.factory-relist-block h4 {
  margin: 0;
  color: #172033;
  font-size: 16px;
  font-weight: 900;
}

.factory-order-date-group {
  display: grid;
  gap: 12px;
}

.factory-order-date-group + .factory-order-date-group {
  margin-top: 18px;
}

.factory-order-date-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid #dbe4ef;
  border-radius: 8px;
  background: #f8fbff;
}

.factory-order-date-head strong {
  color: #172033;
}

.factory-order-date-head span {
  color: #5d6b82;
  font-size: 13px;
}

.factory-order-record.is-printed {
  opacity: 0.52;
  filter: grayscale(0.75);
  background: #f3f4f6;
}

.factory-order-record.is-printed button:disabled {
  cursor: not-allowed;
}

.factory-review-list label,
.factory-order-items label,
.ecommerce-cart-card label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px;
  border: 1px solid #e5edf5;
  border-radius: 8px;
  background: #f8fbff;
}

.ecommerce-cart-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px;
  border: 1px solid #e5edf5;
  border-radius: 8px;
  background: #f8fbff;
}

.ecommerce-cart-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.ecommerce-cart-card h3,
.ecommerce-cart-card p {
  margin: 0;
}

.ecommerce-cart-card p {
  margin-top: 4px;
  color: #5d6b82;
}

.ecommerce-history-section {
  display: grid;
  gap: 12px;
  margin-top: 4px;
  padding-top: 18px;
  border-top: 1px solid #dfe8f3;
}

.ecommerce-history-head {
  display: flex;
  gap: 16px;
  align-items: end;
  justify-content: space-between;
}

.ecommerce-history-head span {
  color: #11877f;
  font-size: 12px;
  font-weight: 900;
}

.ecommerce-history-head h3,
.ecommerce-history-head p {
  margin: 3px 0 0;
}

.ecommerce-history-head p {
  color: #607089;
  font-size: 13px;
}

.ecommerce-history-download-form {
  display: grid;
  grid-template-columns: 138px auto 138px auto;
  gap: 7px;
  align-items: end;
}

.ecommerce-history-download-form label {
  display: grid;
  gap: 4px;
  color: #607089;
  font-size: 11px;
  font-weight: 900;
}

.ecommerce-history-download-form input {
  min-height: 38px;
  padding: 0 8px;
  border: 1px solid #c7d8eb;
  border-radius: 6px;
  font: inherit;
}

.ecommerce-history-download-form i {
  padding-bottom: 10px;
  color: #718097;
  font-size: 12px;
  font-style: normal;
}

.ecommerce-history-download-form button,
.ecommerce-history-table button {
  min-height: 38px;
  padding: 0 13px;
  color: #fff;
  border: 1px solid #1f68c7;
  border-radius: 6px;
  background: #1f68c7;
  font-weight: 900;
}

.ecommerce-history-table-wrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid #dfe8f3;
  border-radius: 8px;
}

.ecommerce-history-table {
  width: 100%;
  min-width: 820px;
  border-collapse: collapse;
  background: #fff;
  font-size: 13px;
}

.ecommerce-history-table th,
.ecommerce-history-table td {
  padding: 11px 13px;
  border-bottom: 1px solid #e7edf5;
  text-align: left;
  white-space: nowrap;
}

.ecommerce-history-table th {
  color: #26364d;
  background: #f7faff;
  font-weight: 900;
}

.ecommerce-history-table tr:last-child td {
  border-bottom: 0;
}

.ecommerce-history-table button {
  min-height: 32px;
  color: #1765b9;
  border-color: #b9d4f5;
  background: #fff;
}

.ecommerce-history-table .ecommerce-tracking-number {
  min-height: 30px;
  padding: 0;
  color: #1765b9;
  border: 0;
  border-bottom: 1px dashed #1765b9;
  border-radius: 0;
  background: transparent;
  font-size: 12px;
}

.ecommerce-tracking-empty {
  color: #8391a5;
  font-size: 12px;
}

.ecommerce-history-month-list {
  display: grid;
  gap: 10px;
  max-height: min(760px, 70vh);
  overflow-y: auto;
  position: relative;
  padding: 15px 3px 0 0;
}

.ecommerce-history-month-list::before {
  position: absolute;
  top: 0;
  right: 3px;
  left: 0;
  height: 4px;
  border-radius: 999px 2px 999px 2px;
  background: linear-gradient(90deg, var(--teal), #42c98f 58%, #a7e7bd);
  box-shadow: 0 3px 9px color-mix(in srgb, var(--teal) 24%, transparent);
  content: "";
}

.ecommerce-history-month {
  overflow: hidden;
  border: 1px solid #d9e5f2;
  border-radius: 9px;
  background: #fff;
}

.ecommerce-history-month.is-expanded {
  border-color: #9fc9f2;
  box-shadow: 0 8px 22px rgba(31, 104, 199, 0.08);
}

.ecommerce-history-month-summary {
  display: grid;
  grid-template-columns: minmax(190px, 1fr) minmax(120px, auto) minmax(120px, auto) auto;
  gap: 18px;
  align-items: center;
  width: 100%;
  min-height: 54px;
  padding: 8px 14px;
  color: #1a2c44;
  border: 0;
  background: #f8fbff;
  text-align: left;
}

.ecommerce-history-month.is-expanded .ecommerce-history-month-summary {
  background: #eef7ff;
}

.ecommerce-history-month-summary > span,
.ecommerce-history-month-summary > strong {
  display: grid;
  gap: 4px;
}

.ecommerce-history-month-summary b {
  font-size: 17px;
}

.ecommerce-history-month-summary small {
  color: #66778f;
  font-size: 11px;
  font-weight: 700;
}

.ecommerce-history-month-summary > strong {
  color: #1468bf;
  font-size: 15px;
}

.ecommerce-history-month-summary > i {
  min-width: 82px;
  padding: 5px 10px;
  color: #1765b9;
  border: 1px solid #b9d4f5;
  border-radius: 6px;
  background: #fff;
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
  text-align: center;
}

.ecommerce-history-month-empty {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 9px 14px;
  color: #687890;
  border-top: 1px solid #d9e5f2;
  background: #fff;
  font-size: 12px;
}

.ecommerce-history-month-empty strong {
  color: #334155;
}

.ecommerce-history-month > .ecommerce-history-table-wrap {
  border-width: 1px 0 0;
  border-radius: 0;
}

.ecommerce-history-dialog {
  width: min(1160px, 100%);
  max-height: min(760px, calc(100vh - 40px));
  overflow-y: auto;
  padding: 20px;
  border: 1px solid #d9e5f2;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 24px 60px rgba(17, 31, 52, 0.2);
}

.ecommerce-history-dialog-head {
  display: flex;
  gap: 14px;
  align-items: start;
  justify-content: space-between;
  padding-bottom: 13px;
  border-bottom: 1px solid #e2eaf4;
}

.ecommerce-history-dialog-head span {
  color: #11877f;
  font-size: 12px;
  font-weight: 900;
}

.ecommerce-history-dialog-head h3 {
  margin: 4px 0 0;
  font-size: 22px;
}

.ecommerce-history-dialog-head button {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  color: #53647b;
  border: 1px solid #d4e0ed;
  border-radius: 50%;
  background: #f7faff;
  font-size: 22px;
}

.ecommerce-history-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin-top: 14px;
}

.ecommerce-history-detail-grid div {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid #e2eaf4;
  border-radius: 7px;
  background: #f8fbff;
}

.ecommerce-history-detail-grid span {
  color: #6a7990;
  font-size: 11px;
}

.ecommerce-history-detail-grid strong {
  overflow-wrap: anywhere;
  color: #26364d;
  font-size: 13px;
}

.ecommerce-history-dialog > p {
  margin: 13px 0 0;
  color: #607089;
  font-size: 12px;
}

.ecommerce-history-order-items {
  display: grid;
  gap: 9px;
  margin-top: 16px;
}

.ecommerce-history-order-items h4 {
  margin: 0;
  color: #24364e;
  font-size: 15px;
}

.ecommerce-history-order-items .ecommerce-history-table {
  min-width: 1240px;
}

.ecommerce-tracking-dialog {
  width: min(720px, 100%);
  max-height: min(760px, calc(100vh - 40px));
  overflow-y: auto;
  padding: 20px;
  border: 1px solid #d9e5f2;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 24px 60px rgba(17, 31, 52, 0.28);
}

.ecommerce-tracking-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  margin-top: 14px;
}

.ecommerce-tracking-summary div {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid #dfe8f3;
  border-radius: 7px;
  background: #f8fbff;
}

.ecommerce-tracking-summary span,
.ecommerce-tracking-dialog-actions span {
  color: #6a7990;
  font-size: 11px;
}

.ecommerce-tracking-summary strong {
  overflow-wrap: anywhere;
  color: #26364d;
  font-size: 13px;
}

.ecommerce-tracking-timeline {
  display: grid;
  gap: 0;
  margin-top: 0;
  padding: 6px 4px;
}

.ecommerce-tracking-timeline article {
  position: relative;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 10px;
  min-height: 58px;
}

.ecommerce-tracking-timeline article::before {
  content: "";
  position: absolute;
  top: 14px;
  bottom: -7px;
  left: 6px;
  width: 2px;
  background: #cfe0f1;
}

.ecommerce-tracking-timeline article:last-child::before {
  display: none;
}

.ecommerce-tracking-timeline article > i {
  position: relative;
  z-index: 1;
  width: 14px;
  height: 14px;
  margin-top: 3px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: #1e8bc8;
  box-shadow: 0 0 0 1px #8dc7e8;
}

.ecommerce-tracking-timeline article div {
  display: grid;
  align-content: start;
  gap: 4px;
}

.ecommerce-tracking-timeline article strong {
  color: #26364d;
  font-size: 13px;
}

.ecommerce-tracking-timeline article span {
  color: #75849a;
  font-size: 11px;
}

.ecommerce-tracking-no-events {
  padding: 18px;
  color: #6b7a8f;
  border: 1px dashed #cddaea;
  border-radius: 8px;
  text-align: center;
}

.ecommerce-tracking-dialog-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid #e1e9f3;
}

.ecommerce-tracking-dialog-actions a,
.ecommerce-tracking-dialog-actions button {
  min-height: 38px;
  padding: 8px 14px;
  border: 1px solid #b9d4f5;
  border-radius: 6px;
  background: #fff;
  color: #1765b9;
  font-weight: 900;
  text-decoration: none;
}

.ecommerce-tracking-dialog-actions a {
  color: #fff;
  border-color: #1f68c7;
  background: #1f68c7;
}

@media (max-width: 760px) {
  .ecommerce-tracking-summary {
    grid-template-columns: 1fr;
  }

  .ecommerce-tracking-dialog-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .ecommerce-tracking-dialog-actions a,
  .ecommerce-tracking-dialog-actions button {
    text-align: center;
  }
}

.ecommerce-checkout-panel form,
.ecommerce-checkout-list {
  display: grid;
  gap: 12px;
}

.ecommerce-checkout-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(176px, auto) auto;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  background: #f8fbff;
  border: 1px solid #dfe8f3;
  border-radius: 8px;
}

.ecommerce-checkout-item label {
  display: flex;
  gap: 12px;
  align-items: center;
}

.ecommerce-checkout-item input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--blue);
}

.ecommerce-checkout-item span {
  display: grid;
  gap: 4px;
}

.ecommerce-checkout-item small {
  color: #607089;
  font-size: 13px;
}

.ecommerce-checkout-item > .ecommerce-cart-remove {
  min-height: 36px;
  padding: 0 14px;
  color: #b42318;
  background: #fff1f0;
  border: 1px solid #ffd1cc;
  border-radius: 7px;
  cursor: pointer;
  font-weight: 900;
}

.ecommerce-checkout-price {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.ecommerce-checkout-price > b {
  min-width: 58px;
  color: #172033;
  text-align: right;
  white-space: nowrap;
}

.ecommerce-quantity-control {
  display: grid;
  grid-template-columns: 32px 52px 32px;
  overflow: hidden;
  border: 1px solid #bdd4ef;
  border-radius: 7px;
  background: #fff;
}

.ecommerce-quantity-control button,
.ecommerce-quantity-control input {
  width: 100%;
  min-width: 0;
  height: 34px;
  margin: 0;
  padding: 0;
  color: #1759a5;
  background: #fff;
  border: 0;
  border-radius: 0;
  font: inherit;
  font-weight: 900;
  text-align: center;
}

.ecommerce-quantity-control button {
  cursor: pointer;
}

.ecommerce-quantity-control button:hover {
  background: #eaf3ff;
}

.ecommerce-quantity-control input {
  color: #172033;
  border-right: 1px solid #d9e5f2;
  border-left: 1px solid #d9e5f2;
  appearance: textfield;
}

.ecommerce-quantity-control input::-webkit-inner-spin-button,
.ecommerce-quantity-control input::-webkit-outer-spin-button {
  margin: 0;
  appearance: none;
}

.ecommerce-receiver-import {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 138px;
  gap: 8px 10px;
  align-items: end;
  padding: 12px;
  background: #f4f9ff;
  border: 1px solid #b9d8fb;
  border-radius: 8px;
}

.ecommerce-receiver-import label {
  display: grid;
  gap: 6px;
  color: #26415f;
  font-weight: 900;
}

.ecommerce-receiver-import textarea {
  min-height: 58px;
  max-height: 112px;
  padding: 9px 11px;
  resize: vertical;
  border: 1px solid #cddced;
  border-radius: 7px;
  font: inherit;
  line-height: 1.45;
}

.ecommerce-receiver-import button {
  min-height: 58px;
  padding: 0 14px;
  color: #fff;
  background: linear-gradient(135deg, #18a39b, #1f6ed4);
  border: 0;
  border-radius: 7px;
  cursor: pointer;
  font-weight: 900;
}

.ecommerce-receiver-import small {
  grid-column: 1 / -1;
  color: #607089;
  font-size: 12px;
  line-height: 1.45;
}

.ecommerce-receiver-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 14px;
  background: #fff;
  border: 1px solid #dfe8f3;
  border-radius: 8px;
}

.ecommerce-receiver-grid label {
  display: grid;
  gap: 6px;
  color: #34445f;
  font-weight: 900;
}

.ecommerce-receiver-grid input {
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid #d6e2f0;
  border-radius: 7px;
  font: inherit;
}

.ecommerce-receiver-grid .ecommerce-receiver-address {
  grid-column: 1 / -1;
}

.ecommerce-shipping-status {
  padding: 11px 13px;
  color: #52637c;
  background: #f7f9fc;
  border: 1px solid #d9e3ef;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.55;
}

.ecommerce-shipping-status.is-ready {
  color: #087568;
  background: #edfdf8;
  border-color: #91dcca;
}

.ecommerce-shipping-status.is-error {
  color: #b42318;
  background: #fff5f3;
  border-color: #f4b8af;
}

.ecommerce-checkout-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(150px, 0.8fr);
  align-items: stretch;
  gap: 10px;
  padding: 14px;
  background: #f7faff;
  border: 1px solid #dfe8f3;
  border-radius: 8px;
}

.ecommerce-total-item {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 11px 13px;
  background: #fff;
  border: 1px solid #dce7f3;
  border-radius: 7px;
}

.ecommerce-total-item span {
  color: #607089;
  font-size: 13px;
  font-weight: 900;
}

.ecommerce-total-item strong {
  overflow-wrap: anywhere;
  color: #17324d;
  font-size: 20px;
}

.ecommerce-grand-total {
  background: #fff8f5;
  border-color: #f1c3b8;
}

.ecommerce-grand-total strong {
  color: #d92d20;
  font-size: 22px;
}

.ecommerce-checkout-summary button {
  min-height: 64px;
  padding: 0 22px;
  color: #fff;
  background: linear-gradient(135deg, #18a39b, #1f6ed4);
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 900;
}

.ecommerce-checkout-summary button:disabled {
  cursor: not-allowed;
  opacity: 0.48;
  filter: grayscale(0.25);
}

.ecommerce-order-warning {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 12px 14px;
  color: #7a4510;
  background: #fff9e8;
  border: 1px solid #efd184;
  border-radius: 8px;
  line-height: 1.55;
}

.ecommerce-order-warning strong {
  white-space: nowrap;
}

@media (max-width: 980px) {
  .ecommerce-checkout-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ecommerce-checkout-summary button {
    grid-column: 1 / -1;
  }
}

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

.ecommerce-product-image {
  width: 100%;
  max-height: 180px;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 10px;
}

.ecommerce-product-card {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding: 14px;
  cursor: pointer;
}

.ecommerce-product-card .ecommerce-product-image {
  width: 120px;
  height: 120px;
  max-height: none;
  margin: 0;
  object-fit: cover;
}

.ecommerce-product-copy {
  display: grid;
  align-content: start;
  gap: 6px;
  min-width: 0;
}

.ecommerce-product-card p {
  margin: 0;
}

.ecommerce-product-card button {
  width: fit-content;
  margin-top: 2px;
}

.ecommerce-card-actions,
.ecommerce-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.ecommerce-row-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  width: 100%;
}

.ecommerce-card-actions button,
.ecommerce-row-actions button,
.ecommerce-row-actions .button {
  min-height: 36px;
  min-width: 0;
  padding: 0 8px;
  color: #172033;
  background: #fff;
  border: 1px solid #d9e4f2;
  border-radius: 7px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
}

.ecommerce-card-actions button:nth-child(2),
.ecommerce-row-actions [data-ecommerce-buy-now] {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(135deg, #18a39b, #1f6ed4);
}

.ecommerce-row-actions [data-ecommerce-add-cart] {
  color: #1765b9;
  border-color: #b9d4f5;
}

.ecommerce-card-actions button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.ecommerce-price-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
}

.ecommerce-price-line b {
  color: #0f766e;
  font-weight: 900;
}

.ecommerce-card-standard,
.ecommerce-standard-panel {
  display: grid;
  gap: 8px;
}

.ecommerce-card-standard span,
.ecommerce-standard-panel h4 {
  color: #334155;
  font-size: 13px;
  font-weight: 900;
}

.ecommerce-card-standard select {
  min-height: 36px;
  border: 1px solid #d7e3f0;
  border-radius: 7px;
  padding: 0 10px;
  background: #fff;
  font-weight: 800;
}

.ecommerce-standard-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ecommerce-standard-option {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  background: #fff;
  border: 1px solid #dbe7f4;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 900;
}

@media (max-width: 760px) {
  .online-service-dialog {
    right: 14px;
    bottom: 14px;
    width: calc(100vw - 28px);
  }

  .staff-support-launcher {
    right: 14px;
    top: auto;
    bottom: 84px;
  }

  .staff-support-dialog {
    right: 14px;
    top: 14px;
    bottom: 14px;
    width: min(360px, calc(100vw - 28px));
  }

  .staff-support-layout {
    grid-template-rows: auto minmax(0, 1fr);
    height: auto;
  }

  .staff-support-list {
    grid-auto-flow: column;
    grid-auto-columns: 136px;
    overflow-x: auto;
    border-right: 0;
    border-bottom: 1px solid #e2edf8;
  }

  .ecommerce-product-card {
    grid-template-columns: 1fr;
  }

  .ecommerce-product-card .ecommerce-product-image,
  .ecommerce-product-copy {
    grid-column: 1;
  }

  .ecommerce-product-card .ecommerce-product-image {
    grid-row: auto;
    width: 100%;
    height: 180px;
  }

  .ecommerce-cart-card,
  .ecommerce-checkout-summary {
    align-items: stretch;
    flex-direction: column;
  }

  .ecommerce-checkout-item,
  .ecommerce-receiver-grid,
  .ecommerce-receiver-import,
  .ecommerce-checkout-summary {
    grid-template-columns: 1fr;
  }

  .ecommerce-receiver-import small,
  .ecommerce-receiver-grid .ecommerce-receiver-address,
  .ecommerce-checkout-summary button {
    grid-column: auto;
  }

  .ecommerce-order-warning {
    grid-template-columns: 1fr;
  }

  .ecommerce-history-head {
    align-items: stretch;
    flex-direction: column;
  }

  .ecommerce-history-download-form,
  .ecommerce-history-detail-grid {
    grid-template-columns: 1fr;
  }

  .ecommerce-history-month-list {
    max-height: 68vh;
  }

  .ecommerce-history-month-summary {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .ecommerce-history-month-summary > span {
    grid-column: 1 / -1;
  }

  .ecommerce-history-month-summary > i {
    grid-column: 1 / -1;
    width: 100%;
  }

  .ecommerce-history-download-form i {
    display: none;
  }

  .ecommerce-checkout-price {
    justify-content: space-between;
  }

  .ecommerce-checkout-item > .ecommerce-cart-remove {
    width: 100%;
  }

  .ecommerce-row-actions {
    grid-column: 1 / -1;
  }
}

.ecommerce-product-card:hover {
  border-color: #9bc9f7;
  box-shadow: 0 10px 24px rgba(31, 111, 212, 0.08);
}

.ecommerce-product-table {
  display: grid;
  position: relative;
  overflow-x: auto;
  overflow-y: visible;
  padding-top: 5px;
  border: 1px solid #dfe8f3;
  border-radius: 8px 8px 0 0;
  background: #fff;
}

.ecommerce-product-table::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 4px;
  border-radius: 7px 999px 2px 999px;
  background: linear-gradient(90deg, var(--coral), #ff8d55 56%, var(--gold));
  box-shadow: 0 3px 10px color-mix(in srgb, var(--coral) 26%, transparent);
  content: "";
}

.ecommerce-product-export-toolbar {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin: -2px 0 8px;
}

.ecommerce-product-export-toolbar button {
  min-height: 32px;
  padding: 0 14px;
  color: #1765b9;
  border: 1px solid #b9d4f5;
  background: #fff;
  font-weight: 900;
}

.ecommerce-product-export-toolbar button:last-child {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(135deg, var(--teal), var(--blue));
}

.ecommerce-product-row {
  display: grid;
  grid-template-columns: 24px minmax(180px, 1.15fr) minmax(150px, .9fr) 92px minmax(150px, .9fr) minmax(150px, .9fr) 72px 100px 142px 100px minmax(310px, 1.35fr);
  gap: 10px;
  align-items: center;
  min-width: 1514px;
  min-height: 56px;
  padding: 8px 16px;
  border-bottom: 1px solid #e7edf5;
}

.ecommerce-product-export-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
}

.ecommerce-product-export-check input {
  width: 16px;
  height: 16px;
  margin: 0;
}

.ecommerce-product-row:last-child {
  border-bottom: 0;
}

.ecommerce-product-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 14px;
  border: 1px solid #dfe8f3;
  border-top: 0;
  border-radius: 0 0 8px 8px;
  background: #f8fbff;
}

.ecommerce-product-pagination label,
.ecommerce-product-page-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.ecommerce-product-pagination input {
  width: 76px;
  min-height: 34px;
  padding: 4px 8px;
  color: #172033;
  border: 1px solid #b9d4f5;
  border-radius: 6px;
  background: #fff;
  font-weight: 800;
  text-align: center;
}

.ecommerce-product-pagination button {
  min-height: 34px;
  padding: 0 14px;
  color: #1765b9;
  border: 1px solid #b9d4f5;
  border-radius: 6px;
  background: #fff;
  font-weight: 900;
}

.ecommerce-product-pagination button:disabled {
  color: #91a0b5;
  border-color: #d8e1ec;
  background: #eef3f8;
  cursor: not-allowed;
}

/* Ecommerce catalog: desktop-only category sidebar with an independently
   scrollable product area. Mobile keeps its existing touch-first top rail. */
@media (min-width: 761px) {
  .ecommerce-panel .ecommerce-catalog-split {
    display: grid;
    grid-template-columns: minmax(168px, 216px) minmax(0, 1fr);
    gap: 18px;
    align-items: start;
  }

  .ecommerce-panel .ecommerce-catalog-sidebar {
    position: sticky;
    top: 16px;
    min-width: 0;
  }

  .ecommerce-panel .ecommerce-catalog-sidebar .ecommerce-category-bar {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    margin: 0;
  }

  .ecommerce-panel .ecommerce-catalog-main {
    min-width: 0;
  }

  .classroom-body .ecommerce-panel .ecommerce-product-table {
    overflow-x: auto;
    overflow-y: visible;
    scrollbar-gutter: stable;
  }

  .classroom-body .ecommerce-panel .ecommerce-product-table.is-ten-row-scroll {
    overflow-y: auto;
  }

  .classroom-body .ecommerce-panel .ecommerce-product-row-head {
    position: sticky;
    top: 0;
    z-index: 2;
  }

  .ecommerce-list-body .ecommerce-product-table {
    max-height: min(640px, calc(100vh - 250px));
    overflow: auto;
    scrollbar-gutter: stable;
  }

  .ecommerce-list-body .ecommerce-standalone-row.is-head {
    position: sticky;
    top: 0;
    z-index: 2;
  }

  .ecommerce-public-body .ecommerce-catalog-main .ecommerce-product-list {
    max-height: min(640px, calc(100vh - 250px));
    padding-right: 8px;
    overflow: auto;
    scrollbar-gutter: stable;
  }
}

.ecommerce-product-page-summary {
  color: #607089;
  font-size: 13px;
  font-weight: 800;
}

.ecommerce-product-row-head {
  min-height: 44px;
  color: #526179;
  background: #f6f9fd;
  font-size: 13px;
  font-weight: 900;
}

.ecommerce-product-row strong,
.ecommerce-product-row b {
  color: #172033;
}

.ecommerce-product-row span {
  color: #607089;
}

.ecommerce-product-name-cell {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.ecommerce-product-row-head > * {
  justify-self: stretch;
  text-align: center;
}

.ecommerce-delivery-time-cell {
  line-height: 1.55;
}

.ecommerce-country-time-cell,
.ecommerce-delivery-time-cell {
  text-align: center;
}

.ecommerce-gross-weight-cell {
  text-align: center;
  white-space: nowrap;
}

.ecommerce-product-row > b {
  justify-self: stretch;
  text-align: center;
}

.ecommerce-commission-cell {
  color: #0f9d86 !important;
  white-space: nowrap;
}

.ecommerce-suggested-usd-cell {
  color: #1768c7 !important;
  white-space: nowrap;
}

.ecommerce-country-preview-trigger {
  width: 100%;
  min-height: 34px;
  padding: 5px 8px;
  color: #1768c7;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  font: inherit;
  font-weight: 800;
  text-align: center;
  cursor: pointer;
}

.ecommerce-country-preview-trigger:hover,
.ecommerce-country-preview-trigger:focus-visible {
  border-color: #9bc9f7;
  background: #eef7ff;
  outline: none;
}

.ecommerce-logistics-preview-dialog {
  width: min(920px, 100%);
}

.ecommerce-product-preview-dialog {
  width: min(780px, 100%);
}

.ecommerce-product-preview-content {
  display: grid;
  grid-template-columns: minmax(220px, .85fr) minmax(0, 1.15fr);
  gap: 20px;
  padding: 18px 0;
}

.ecommerce-product-preview-image {
  display: grid;
  width: min(100%, 250px);
  height: 235px;
  min-height: 235px;
  justify-self: start;
  align-self: start;
  place-items: center;
  overflow: hidden;
  border: 1px solid #dce7f3;
  border-radius: 10px;
  background: #f7faff;
}

.ecommerce-product-preview-image img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 360px;
  object-fit: contain;
}

.ecommerce-product-preview-image span {
  color: #91a0b5;
}

.ecommerce-product-preview-info {
  display: grid;
  align-content: start;
  gap: 14px;
}

.ecommerce-product-preview-info p {
  margin: 0;
  color: #526179;
  line-height: 1.7;
  white-space: pre-wrap;
}

.ecommerce-product-preview-info dl {
  display: grid;
  gap: 8px;
  margin: 0;
}

.ecommerce-product-preview-info dl > div {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: 10px;
  padding: 9px 10px;
  border-radius: 7px;
  background: #f7faff;
}

.ecommerce-product-preview-info dt { color: #66758d; }
.ecommerce-product-preview-info dd { min-width: 0; margin: 0; color: #172033; overflow-wrap: anywhere; }

.ecommerce-logistics-preview-note {
  margin: 14px 0;
  color: #607089;
  line-height: 1.65;
}

.ecommerce-logistics-preview-table-wrap {
  overflow-x: auto;
  border: 1px solid #d9e5f2;
  border-radius: 8px;
}

.ecommerce-logistics-preview-table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
}

.ecommerce-logistics-preview-table th,
.ecommerce-logistics-preview-table td {
  padding: 13px 16px;
  border-bottom: 1px solid #e2eaf4;
  text-align: center;
  white-space: nowrap;
}

.ecommerce-logistics-preview-table th {
  color: #44556d;
  background: #f3f8fe;
  font-size: 13px;
}

.ecommerce-logistics-preview-table tbody tr:last-child td {
  border-bottom: 0;
}

.ecommerce-logistics-preview-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 16px;
}

.ecommerce-logistics-preview-actions button {
  min-width: 108px;
}

.classroom-ecommerce-variant-list {
  display: flex;
  gap: 6px;
  max-width: 260px;
  padding: 3px 0;
  overflow-x: auto;
}

.classroom-ecommerce-variant-list label {
  position: relative;
  display: grid;
  flex: 0 0 54px;
  gap: 2px;
  justify-items: center;
  padding: 4px;
  background: #f7faff;
  border: 1px solid #d8e5f5;
  border-radius: 6px;
  cursor: pointer;
}

.classroom-ecommerce-variant-list input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.classroom-ecommerce-variant-list label:has(input:checked) {
  border-color: #1f6ed4;
  box-shadow: 0 0 0 2px rgba(31, 110, 212, 0.14);
}

.classroom-ecommerce-variant-list img,
.classroom-ecommerce-variant-list label > span {
  width: 44px;
  height: 36px;
  object-fit: contain;
  background: #eef3f8;
  border-radius: 4px;
}

.classroom-ecommerce-variant-list label > span {
  display: grid;
  place-items: center;
  color: #52637c;
  font-size: 12px;
}

.classroom-ecommerce-variant-list b {
  color: #33465f;
  font-size: 11px;
  white-space: nowrap;
}

.classroom-ecommerce-main-image {
  flex: 0 0 52px;
  width: 52px;
  height: 58px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid #8ebdff;
  border-radius: 6px;
  background: #fff;
}

.classroom-ecommerce-main-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.classroom-ecommerce-main-image span {
  padding: 6px;
  color: #77869c;
  font-size: 11px;
  text-align: center;
}

.classroom-ecommerce-variant-list,
.ecommerce-preview-variant-checks {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  overflow: visible;
}

.ecommerce-product-row:not(.ecommerce-product-row-head) {
  min-height: 50px;
  padding: 5px 12px;
}

.classroom-ecommerce-media-options {
  display: flex;
  align-items: stretch;
  gap: 7px;
  min-width: 0;
}

.classroom-ecommerce-media-options .classroom-ecommerce-variant-list {
  display: grid;
  flex: 1 1 auto;
  grid-auto-rows: minmax(25px, auto);
  align-content: space-evenly;
  gap: 4px;
  min-width: 64px;
  min-height: 58px;
  padding: 0;
}

.classroom-ecommerce-media-options .classroom-ecommerce-variant-list label {
  justify-self: start;
  min-height: 25px;
  padding: 2px 6px;
}

.classroom-ecommerce-media-options .classroom-ecommerce-variant-list[data-ecommerce-color-count="1"] label {
  align-self: center;
}

.classroom-ecommerce-media-options .classroom-ecommerce-variant-list input {
  width: 13px;
  height: 13px;
}

.classroom-ecommerce-variant-list .ecommerce-variant-select-label,
.ecommerce-preview-variant-checks .ecommerce-variant-select-label {
  flex: 0 0 auto;
  color: #66758d;
  font-size: 12px;
}

.classroom-ecommerce-variant-list label,
.ecommerce-preview-variant-checks label {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 4px;
  min-height: 28px;
  padding: 3px 7px;
  border: 1px solid #c9d8ed;
  border-radius: 5px;
  background: #fff;
  cursor: pointer;
}

.classroom-ecommerce-variant-list input,
.ecommerce-preview-variant-checks input {
  position: static;
  width: 14px;
  height: 14px;
  opacity: 1;
}

.classroom-ecommerce-variant-list label:has(input:checked),
.ecommerce-preview-variant-checks label:has(input:checked) {
  border-color: #1f6ed4;
  background: #eff6ff;
  box-shadow: none;
}

.classroom-ecommerce-variant-list label > span,
.ecommerce-preview-variant-checks label > span {
  width: auto;
  height: auto;
  display: inline;
  background: transparent;
  color: #33465f;
  font-size: 12px;
}

.ecommerce-preview-variant-checks {
  margin-top: 10px;
}

.factory-order-product-list {
  display: grid !important;
  align-content: center;
  gap: 4px;
  min-width: 0;
}

.factory-order-product-item {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 3px 5px;
  border: 1px solid #d8e4f2;
  border-radius: 5px;
  background: #f7faff;
}

.factory-order-product-item b {
  color: #172033;
  font-size: 12px;
  line-height: 1.35;
}

.factory-order-product-item small {
  color: #52647b;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.ecommerce-checkout-variant-image {
  width: 64px;
  height: 52px;
  object-fit: contain;
  background: #f2f6fb;
  border: 1px solid #dbe6f2;
  border-radius: 6px;
}

.ecommerce-product-order-nos {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  min-width: 0;
}

.ecommerce-product-order-nos span {
  display: inline-flex;
  padding: 3px 7px;
  color: #1765b9;
  border: 1px solid #c5dbf5;
  border-radius: 999px;
  background: #f4f8ff;
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}

.factory-body #freightDomesticTransitList,
.factory-body #freightInternationalQueueList,
.factory-body #freightInternationalExceptionCurrentList {
  padding-top: 5px;
  border-top: 4px solid #ff6f61;
}

.factory-body #freightDomesticExceptionList,
.factory-body #freightInternationalHistoryList,
.factory-body #freightInternationalExceptionHistoryList {
  padding-top: 5px;
  border-top: 4px solid #79cf00;
}

.ecommerce-product-difference {
  width: fit-content;
  color: #b45309;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.4;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: 4px;
  padding: 1px 6px;
}

.ecommerce-country-cell {
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
}

.ecommerce-country-cell .ecommerce-sellable-countries > span:first-child {
  display: none;
}

.ecommerce-country-cell .ecommerce-sellable-countries > div {
  flex-wrap: nowrap;
  white-space: nowrap;
}

.ecommerce-sellable-countries {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
  color: #607089;
  font-size: 12px;
  line-height: 1.5;
}

.ecommerce-sellable-countries > span:first-child {
  flex: 0 0 auto;
  color: #526179;
  font-weight: 900;
}

.ecommerce-sellable-countries > div {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 7px;
  min-width: 0;
}

.ecommerce-country-name {
  color: #1765b9 !important;
  border-bottom: 1px dotted #1765b9;
  cursor: help;
  outline: 0;
}

.ecommerce-country-name:hover,
.ecommerce-country-name:focus-visible {
  color: #0f766e !important;
  border-bottom-color: #0f766e;
}

.ecommerce-country-empty {
  color: #8a96a8 !important;
}

.ecommerce-empty-row {
  grid-template-columns: minmax(160px, 0.6fr) minmax(0, 1fr);
}

.ecommerce-detail-card {
  margin: 18px 0;
}

.ecommerce-detail-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.ecommerce-detail-image {
  width: 100%;
  max-height: 320px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid #dbe4ef;
}

.ecommerce-sales-detail {
  grid-template-columns: minmax(280px, 0.9fr) minmax(320px, 1.1fr);
  gap: 24px;
}

.ecommerce-sales-media {
  min-width: 0;
}

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

.ecommerce-product-gallery img,
.ecommerce-product-gallery video {
  display: block;
  width: 100%;
  height: 220px;
  object-fit: contain;
  background: #f7f9fc;
  border: 1px solid #dbe4ef;
  border-radius: 8px;
  cursor: zoom-in;
}

.ecommerce-product-gallery > :first-child:nth-last-child(1) {
  grid-column: 1 / -1;
  height: 360px;
}

.ecommerce-placeholder-image {
  display: grid;
  min-height: 260px;
  place-items: center;
  padding: 24px;
  color: #718096;
  background: #f7f9fc;
  border: 1px dashed #cbd7e6;
  border-radius: 8px;
  text-align: center;
}

.ecommerce-sales-copy {
  display: grid;
  align-content: start;
  gap: 14px;
}

.ecommerce-sales-copy h3,
.ecommerce-sales-copy p {
  margin: 0;
}

.ecommerce-sales-copy > span {
  color: var(--teal);
  font-weight: 900;
}

.ecommerce-sales-price {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  padding: 14px 16px;
  color: #d92d20;
  background: #fff5f5;
  border: 1px solid #ffd1d1;
  border-radius: 8px;
  font-size: 28px;
  font-weight: 900;
}

.ecommerce-sales-price span {
  color: #0f766e;
  font-size: 16px;
  font-weight: 900;
}

body:has(.standalone-ecommerce-page) .top-nav {
  display: flex;
  flex: 1;
  justify-content: center;
  gap: 0;
}

body:has(.standalone-ecommerce-page) .top-nav a {
  min-width: 96px;
  padding: 8px 14px;
  text-align: center;
}

.business-guide-body {
  background: #f3f7fb;
}

.business-guide-header {
  position: sticky;
  top: 0;
}

.business-guide-shell {
  width: min(1160px, calc(100% - 40px));
  margin: 34px auto 80px;
}

.business-guide-hero,
.business-guide-card {
  background: #fff;
  border: 1px solid #dfe8f3;
  border-radius: 8px;
  box-shadow: 0 20px 60px rgba(33, 52, 77, 0.08);
}

.business-guide-hero {
  display: grid;
  gap: 10px;
  margin-bottom: 18px;
  padding: 26px;
}

.business-guide-hero span {
  color: #0f9aa8;
  font-weight: 900;
}

.business-guide-hero h1,
.business-guide-hero p {
  margin: 0;
}

.business-guide-hero h1 {
  color: #172033;
  font-size: clamp(30px, 4vw, 48px);
}

.business-guide-hero p {
  color: #5d6b82;
  line-height: 1.7;
}

.business-guide-card {
  padding: 22px;
}

.business-guide-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 18px;
}

.business-guide-tabs button {
  min-height: 46px;
  color: #172033;
  background: #f8fbff;
  border: 1px solid #dbe7f5;
  border-radius: 8px;
  font-weight: 900;
  cursor: pointer;
}

.business-guide-tabs button.active {
  color: #fff;
  background: linear-gradient(135deg, #0f9aa8, #1f6bd4);
  border-color: transparent;
}

.business-guide-panel {
  display: none;
  gap: 12px;
}

.business-guide-panel.active {
  display: grid;
}

.guide-step {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(360px, 0.58fr);
  gap: 18px;
  align-items: center;
  padding: 16px;
  background: #f8fbff;
  border: 1px solid #dfe8f3;
  border-radius: 8px;
}

.guide-step b {
  display: block;
  margin-bottom: 8px;
  color: #172033;
  font-size: 18px;
}

.guide-step p {
  margin: 0;
  color: #5d6b82;
  line-height: 1.7;
}

.guide-step figure {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 12px;
  background: #fff;
  border: 1px solid #cfe0f4;
  border-radius: 8px;
}

.guide-step figure span {
  color: #1f6bd4;
  font-weight: 900;
}

.guide-step figure div {
  display: grid;
  gap: 7px;
}

.guide-step figure i {
  display: block;
  height: 22px;
  background: linear-gradient(90deg, #eaf2ff, #f8fbff);
  border: 1px solid #dbe7f5;
  border-radius: 5px;
}

.guide-screen {
  overflow: hidden;
}

.guide-screen iframe {
  width: 1280px;
  height: 760px;
  border: 0;
  border-radius: 6px;
  background: #fff;
  transform: scale(0.27);
  transform-origin: 0 0;
  pointer-events: none;
}

.guide-screen iframe + figcaption,
.guide-screen figcaption {
  margin-top: -548px;
}

.guide-step figcaption {
  color: #66758d;
  font-size: 12px;
  font-weight: 800;
}

@media (max-width: 760px) {
  .business-guide-tabs,
  .guide-step {
    grid-template-columns: 1fr;
  }

  .business-guide-shell {
    width: min(100% - 24px, 1160px);
  }
}

.ecommerce-sales-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.ecommerce-sales-meta span {
  padding: 10px;
  color: #42526a;
  background: #f8fbff;
  border: 1px solid #e2ebf7;
  border-radius: 7px;
}

.ecommerce-product-info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.ecommerce-product-info-grid > div {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  background: #f8fbff;
  border: 1px solid #e2ebf7;
  border-radius: 7px;
}

.ecommerce-product-info-grid span {
  color: #718096;
  font-size: 12px;
}

.ecommerce-product-info-grid strong {
  color: #172033;
  overflow-wrap: anywhere;
}

.ecommerce-detail-section {
  display: grid;
  gap: 8px;
  padding-top: 14px;
  border-top: 1px solid #e7edf5;
}

.ecommerce-detail-section h4 {
  margin: 0;
}

video.ecommerce-product-image,
video.ecommerce-detail-image {
  display: block;
  background: #eef3fa;
}

.ecommerce-detail-pages {
  display: grid;
  gap: 12px;
  margin-top: 18px;
}

.ecommerce-detail-pages h4 {
  margin: 0;
}

.ecommerce-detail-pages img {
  width: 100%;
  display: block;
  border: 1px solid #dfe8f5;
  border-radius: 8px;
}

.ecommerce-variant-panel {
  display: grid;
  gap: 10px;
  margin: 12px 0;
}

.ecommerce-variant-panel h4 {
  margin: 0;
  color: #172033;
  font-size: 16px;
}

.ecommerce-variant-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}

.ecommerce-variant-option {
  display: grid;
  grid-template-columns: auto 48px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  padding: 10px;
  border: 1px solid #dbe4ef;
  border-radius: 8px;
  background: #f8fbff;
}

.ecommerce-variant-option input {
  accent-color: var(--blue);
}

.ecommerce-variant-option img,
.ecommerce-variant-swatch {
  width: 48px;
  height: 42px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid #dbe4ef;
}

.ecommerce-variant-swatch {
  display: inline-grid;
  place-items: center;
  color: var(--blue);
  background: #eaf3ff;
  font-weight: 900;
}

.ecommerce-variant-option b,
.ecommerce-variant-option em {
  grid-column: 3;
}

.ecommerce-variant-option em {
  color: #b42318;
  font-style: normal;
  font-weight: 800;
}

.ecommerce-variant-preview {
  display: grid;
  place-items: center;
  min-height: 180px;
  padding: 10px;
  background: #f7faff;
  border: 1px solid #d9e6f5;
  border-radius: 8px;
}

.ecommerce-variant-preview img {
  width: min(100%, 420px);
  max-height: 320px;
  object-fit: contain;
  cursor: zoom-in;
}

.ecommerce-variant-preview p {
  margin: 0;
  color: #66758d;
  font-size: 13px;
}

.factory-order-items {
  min-width: 0;
  overflow: visible;
}

.factory-order-items-head,
.factory-order-item-row {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, .85fr) minmax(0, .85fr) minmax(0, 1.2fr);
  gap: 10px;
  align-items: center;
  min-width: 0;
}

.factory-order-items-head {
  padding: 7px 10px;
  color: #53657d;
  background: #f2f6fc;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 900;
}

.factory-order-item-row {
  padding: 9px 10px;
  border-bottom: 1px solid #e1e9f3;
}

.factory-order-item-row label {
  min-width: 0;
}

.factory-order-item-row label span {
  display: grid;
  min-width: 0;
}

.factory-order-item-row label small {
  color: #6b7a8f;
  font-size: 11px;
}

.factory-order-item-tracking {
  overflow-wrap: anywhere;
  color: #294762;
  font-size: 12px;
  font-weight: 800;
}

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

.factory-order-label-actions button {
  min-height: 36px;
  padding: 7px 10px;
  white-space: normal;
}

.factory-order-label-actions button:first-child {
  color: #08726c;
  border-color: #9bd8d3;
  background: #effbfa;
}

.factory-order-label-actions button:last-child {
  color: #315eb4;
  border-color: #b9cdf4;
  background: #f2f6ff;
}

@media (max-width: 900px) {
  .factory-order-history-month > summary {
    grid-template-columns: auto auto minmax(0, 1fr) auto auto;
  }

  .factory-order-history-month > summary small {
    padding-bottom: 0;
  }

  .factory-order-table-head,
  .factory-order-items-head {
    display: none;
  }

  .factory-order-record-main,
  .factory-order-item-row,
  .factory-order-fulfillment,
  .factory-order-history-logistics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .factory-order-record-summary > *,
  .factory-order-item-row > * {
    display: grid;
    gap: 3px;
  }

  .factory-order-select-placeholder { display: none; }
  .factory-order-select {
    display: grid;
    grid-column: 1 / -1;
    justify-content: start;
    place-items: start;
    min-height: 28px;
    padding: 4px 2px;
  }
  .factory-order-record-summary > :nth-child(1)::before { content: "产品名称"; }
  .factory-order-record-summary > :nth-child(2)::before { content: "订单编号"; }
  .factory-order-record-summary > :nth-child(3)::before { content: "下单时间"; }
  .factory-order-record-summary > :nth-child(4)::before { content: "工厂货款"; }
  .factory-order-record-summary > :nth-child(5)::before { content: "状态"; }
  .factory-order-record-summary > :nth-child(6)::before { content: "国内快递单号"; }
  .factory-order-record-summary > :nth-child(7)::before { content: "国际快递单号"; }
  .factory-order-item-row > :nth-child(1)::before { content: "产品记录"; }
  .factory-order-item-row > :nth-child(2)::before { content: "国内快递单号"; }
  .factory-order-item-row > :nth-child(3)::before { content: "国际快递单号"; }
  .factory-order-item-row > :nth-child(4)::before { content: "面单操作"; }

  .factory-order-record-summary > *::before,
  .factory-order-item-row > *::before {
    color: #6b7a8f;
    font-size: 11px;
    font-weight: 800;
  }

  .factory-order-label-actions {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .factory-order-batch-toolbar {
    align-items: stretch;
  }

  .factory-order-batch-toolbar > span,
  .factory-domestic-express-control {
    flex: 1 0 100%;
  }

  .factory-domestic-express-control {
    grid-template-columns: 78px minmax(0, 1fr);
  }

  .factory-domestic-express-options {
    position: fixed;
    z-index: 100;
    top: auto;
    right: 12px;
    bottom: 12px;
    left: 12px;
    width: auto;
    max-height: min(55vh, 360px);
  }

  .factory-order-batch-toolbar button {
    flex: 1 1 calc(33.333% - 8px);
  }

  .factory-order-history-month > summary {
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-areas:
      "month count toggle"
      "status download download";
    gap: 5px 9px;
    padding: 9px 10px;
  }

  .factory-order-history-month > summary small {
    padding: 0;
  }

  .factory-order-history-month > summary .factory-order-download-button {
    justify-self: end;
  }

  .factory-order-record-main,
  .factory-order-item-row,
  .factory-order-fulfillment,
  .factory-order-history-logistics {
    grid-template-columns: minmax(0, 1fr);
  }
}

.ecommerce-sales-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.ecommerce-placeholder-image {
  display: grid;
  min-height: 280px;
  place-items: center;
  color: #607089;
  background: #f6f9fd;
}

.ecommerce-product-order-form {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid #e5edf5;
}

.standalone-ecommerce-page {
  width: min(1180px, calc(100% - 40px));
  margin: 40px auto 80px;
}

/* Public ecommerce header: constrain the configurable site logo so it can never
   expand to its original bitmap size and cover the independent product page. */
.ecommerce-public-body .site-header {
  grid-template-columns: minmax(210px, auto) minmax(0, 1fr);
  min-height: 64px;
  padding-block: 8px;
}

.ecommerce-public-body .site-header .logo {
  display: inline-flex;
  align-items: center;
  width: max-content;
  min-width: 0;
  gap: 10px;
  font-weight: 900;
}

.ecommerce-public-body .site-header .logo > span {
  display: grid;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  place-items: center;
  overflow: hidden;
  color: #fff;
  background: linear-gradient(135deg, var(--blue), var(--teal));
  border-radius: 50%;
}

.ecommerce-public-body .site-header .logo > span.site-brand-has-image,
.ecommerce-public-body .site-header .logo > span.site-brand-has-image > .site-brand-logo-image {
  width: 44px;
  min-width: 44px;
  max-width: 44px;
  height: 44px;
  max-height: 44px;
  object-fit: contain;
  transform: none;
}

.ecommerce-public-body .site-header .top-nav {
  justify-self: end;
  justify-content: flex-end;
}

.ecommerce-detail-mode .standalone-ecommerce-page {
  width: min(1280px, calc(100% - 48px));
  margin-top: 26px;
}

.ecommerce-detail-mode .classroom-extra-head {
  padding-bottom: 14px;
}

.ecommerce-detail-mode .classroom-extra-head,
.ecommerce-detail-mode .ecommerce-category-bar,
.ecommerce-detail-mode .ecommerce-product-list {
  display: none !important;
}

.ecommerce-detail-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 18px;
  padding: 10px 12px;
  color: #607089;
  background: #f7faff;
  border: 1px solid #dfe8f3;
  border-radius: 8px;
}

.ecommerce-detail-toolbar button,
.ecommerce-detail-missing button {
  width: max-content;
  padding: 9px 14px;
  color: #fff;
  background: linear-gradient(135deg, var(--teal), var(--blue));
  border: 0;
  border-radius: 7px;
  cursor: pointer;
  font-weight: 800;
}

.ecommerce-sales-media > h3 {
  margin: 0 0 10px;
  font-size: 16px;
}

.ecommerce-detail-missing {
  min-height: 220px;
  margin-top: 18px;
  place-items: center;
  text-align: center;
}

.ecommerce-public-product-dialog {
  width: min(1120px, 100%);
  max-height: 78vh;
  margin: 18px auto 0;
  box-shadow: 0 22px 56px rgba(15, 23, 42, 0.16);
}

.ecommerce-public-product-dialog > header span {
  width: max-content;
  padding: 2px 7px;
  background: rgba(255, 255, 255, 0.16);
  border-radius: 4px;
}

.ecommerce-public-product-body {
  scrollbar-gutter: stable;
}

.ecommerce-public-product-body .factory-product-detail-summary,
.ecommerce-public-product-body .factory-product-detail-specs {
  align-items: stretch;
}

.ecommerce-public-product-body .factory-product-detail-summary > div,
.ecommerce-public-product-body .factory-product-detail-specs > div {
  min-height: 70px;
}

.ecommerce-country-detail-section .ecommerce-sellable-countries {
  margin: 0;
  padding: 12px;
  background: #fff;
  border: 1px solid #dfe8f3;
  border-radius: 7px;
}

.ecommerce-public-detail-media figure {
  min-width: 0;
}

.ecommerce-public-detail-actions {
  position: sticky;
  bottom: -20px;
  z-index: 2;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin: 0 -20px -20px;
  padding: 12px 20px;
  background: rgba(255, 255, 255, 0.96);
  border-top: 1px solid #dfe8f3;
  backdrop-filter: blur(10px);
}

.ecommerce-public-detail-actions button {
  min-height: 38px;
  padding: 0 18px;
  color: #1f62d2;
  background: #fff;
  border: 1px solid #bcd2ef;
  border-radius: 7px;
  cursor: pointer;
  font-weight: 900;
}

.ecommerce-public-detail-actions button[data-ecommerce-buy-now] {
  color: #fff;
  background: linear-gradient(135deg, var(--teal), var(--blue));
  border-color: transparent;
}

.ecommerce-public-detail-actions button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.standalone-ecommerce-page .ecommerce-panel {
  box-shadow: 0 24px 70px rgba(33, 52, 77, 0.1);
}

@media (max-width: 900px) {
  .ecommerce-public-body .site-header {
    grid-template-columns: 1fr;
  }

  .ecommerce-public-body .site-header .top-nav {
    width: 100%;
    justify-self: stretch;
    justify-content: flex-start;
    overflow-x: auto;
  }

  .ecommerce-detail-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .ecommerce-public-product-dialog {
    max-height: none;
  }

  .ecommerce-public-product-body .factory-product-detail-summary,
  .ecommerce-public-product-body .factory-product-detail-specs {
    grid-template-columns: 1fr;
  }

  .ecommerce-public-detail-actions {
    position: static;
    flex-wrap: wrap;
  }

  .ecommerce-product-row,
  .ecommerce-product-row-head {
    grid-template-columns: 1fr;
  }

  .ecommerce-product-row-head {
    display: none;
  }

  .ecommerce-product-pagination {
    align-items: stretch;
    flex-direction: column;
  }

  .ecommerce-product-page-actions {
    flex-wrap: wrap;
  }

  .ecommerce-sales-detail {
    grid-template-columns: 1fr;
  }

  .ecommerce-sales-meta {
    grid-template-columns: 1fr;
  }

  .ecommerce-product-gallery,
  .ecommerce-product-info-grid {
    grid-template-columns: 1fr;
  }

  .ecommerce-product-gallery > :first-child:nth-last-child(1) {
    grid-column: auto;
    height: 260px;
  }
}

.opportunities-page {
  min-height: 100vh;
  padding: 118px 24px 54px;
  background: linear-gradient(135deg, #f7fbff 0%, #eef7ff 52%, #f9fcff 100%);
}

.opportunities-shell {
  display: grid;
  gap: 18px;
  width: min(1120px, 100%);
  margin: 0 auto;
  padding: 24px;
  background: #fff;
  border: 1px solid #dfe8f3;
  border-radius: 8px;
  box-shadow: 0 18px 42px rgba(21, 32, 51, 0.08);
}

.opportunities-head {
  display: grid;
  gap: 8px;
  padding-bottom: 16px;
  border-bottom: 1px solid #e7edf5;
}

.opportunities-head span {
  color: var(--teal);
  font-weight: 900;
}

.opportunities-head h1,
.opportunities-head p {
  margin: 0;
}

.opportunities-head h1 {
  font-size: clamp(30px, 5vw, 46px);
  line-height: 1.1;
}

.opportunities-head p,
.opportunities-status,
.opportunity-card p,
.opportunity-card dd,
.opportunity-card span {
  color: #5d6b82;
}

.opportunities-status {
  padding: 12px 14px;
  background: #f5faff;
  border: 1px solid #dce8f4;
  border-radius: 8px;
  font-weight: 900;
}

.opportunities-tabs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  padding: 8px;
  background: #eef5fb;
  border: 1px solid #dce8f4;
  border-radius: 8px;
}

.opportunities-tabs button {
  min-height: 42px;
  color: #344054;
  background: #fff;
  border: 1px solid #d8e3ef;
  border-radius: 7px;
  font-weight: 900;
}

.opportunities-tabs button.active {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(135deg, var(--blue), var(--teal));
}

.opportunities-filters {
  display: grid;
  gap: 10px;
}

.opportunity-filter-form {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) auto auto;
  gap: 10px;
  align-items: end;
  padding: 14px;
  background: #f8fbff;
  border: 1px solid #dfe8f3;
  border-radius: 8px;
}

.opportunity-filter-summary {
  display: flex;
  grid-column: 1 / -1;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 2px;
}

.opportunity-filter-summary span {
  color: var(--muted);
  font-size: 14px;
  font-weight: 800;
}

.opportunity-filter-form label {
  display: grid;
  gap: 6px;
  color: #43526a;
  font-weight: 900;
}

.opportunity-filter-form input,
.opportunity-filter-form select {
  width: 100%;
  min-height: 40px;
  min-width: 0;
  padding: 9px 11px;
  color: var(--ink);
  background: #fff;
  border: 1px solid #dbe6f2;
  border-radius: 7px;
  font: inherit;
}

.opportunity-filter-form button {
  min-height: 40px;
  padding: 0 14px;
  color: #155bd4;
  background: #fff;
  border: 1px solid #cfe0f3;
  border-radius: 7px;
  cursor: pointer;
  font-weight: 900;
}

.opportunity-filter-form button[type="submit"] {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(135deg, var(--blue), var(--teal));
}

.opportunities-list {
  display: grid;
  gap: 12px;
}

.opportunity-card,
.opportunity-empty {
  display: grid;
  gap: 12px;
  padding: 16px;
  background: #f9fcff;
  border: 1px solid #dfe8f3;
  border-radius: 8px;
}

.opportunity-card-head {
  display: flex;
  justify-content: space-between;
  gap: 14px;
}

.opportunity-card dl {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
}

.opportunity-card dl div {
  display: grid;
  gap: 4px;
  padding: 10px;
  background: #fff;
  border: 1px solid #e2ebf5;
  border-radius: 7px;
}

.opportunity-card dt {
  color: #344054;
  font-weight: 900;
}

.opportunity-card dd,
.opportunity-card p,
.opportunity-empty h2,
.opportunity-empty p {
  margin: 0;
}

@media (max-width: 760px) {
  .opportunities-page {
    padding: 96px 14px 36px;
  }

  .opportunities-shell {
    padding: 16px;
  }

  .opportunity-filter-form {
    grid-template-columns: 1fr;
  }

  .opportunity-filter-summary {
    align-items: flex-start;
    flex-direction: column;
  }

  .opportunity-card-head {
    display: grid;
  }

  .opportunity-card dl {
    grid-template-columns: 1fr;
  }
}

.platform-declaration-admin-card textarea {
  min-height: 132px;
}

.platform-declaration-list-card > button {
  width: fit-content;
  min-height: 38px;
  padding: 0 14px;
  color: #155bd4;
  background: #fff;
  border: 1px solid #cfe0f3;
  border-radius: 7px;
  font-weight: 900;
}

.platform-declaration-item p {
  white-space: pre-line;
}

.declaration-body {
  min-height: 100vh;
  background:
    linear-gradient(180deg, #f6fbff 0, #edf6fb 360px, #f7f9fc 100%),
    #f7f9fc;
}

.declaration-page {
  min-height: calc(100vh - 74px);
  padding: 36px 24px 64px;
}

.declaration-shell {
  display: grid;
  gap: 22px;
  width: min(1180px, 100%);
  margin: 0 auto;
}

.declaration-head {
  display: grid;
  gap: 10px;
  padding: 28px;
  background: #fff;
  border: 1px solid #dfe8f3;
  border-radius: 8px;
  box-shadow: 0 18px 42px rgba(21, 32, 51, 0.08);
}

.declaration-head span {
  color: var(--teal);
  font-weight: 900;
}

.declaration-head h1,
.declaration-head p {
  margin: 0;
}

.declaration-head h1 {
  font-size: clamp(30px, 5vw, 44px);
  line-height: 1.1;
}

.declaration-head p,
.declaration-card p {
  color: #5d6b82;
}

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

.declaration-tabs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
  padding: 10px;
  background: #fff;
  border: 1px solid #dfe8f3;
  border-radius: 8px;
  box-shadow: 0 14px 34px rgba(21, 32, 51, 0.06);
}

.declaration-tabs button {
  min-height: 42px;
  padding: 0 12px;
  color: #172033;
  background: #fff;
  border: 1px solid #dbe7f5;
  border-radius: 8px;
  font-weight: 900;
  cursor: pointer;
}

.declaration-tabs button.active {
  color: #fff;
  background: linear-gradient(135deg, var(--blue), var(--teal));
  border-color: transparent;
}

.declaration-card {
  display: grid;
  gap: 16px;
  padding: 26px;
  background: #fff;
  border: 1px solid #dfe8f3;
  border-radius: 8px;
  box-shadow: 0 18px 42px rgba(21, 32, 51, 0.08);
}

.declaration-panel {
  display: none;
}

.declaration-panel.active {
  display: grid;
}

.declaration-card span {
  width: fit-content;
  padding: 4px 10px;
  color: #fff;
  background: linear-gradient(135deg, var(--blue), var(--teal));
  border-radius: 999px;
  font-weight: 900;
}

.declaration-card h2,
.declaration-card p {
  margin: 0;
}

.declaration-card h2 {
  color: #172033;
  font-size: 26px;
}

.declaration-card p {
  max-width: 92ch;
  font-size: 15px;
  line-height: 1.9;
  white-space: pre-line;
}

.profile-declaration-consent {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  align-items: flex-start;
  gap: 8px;
  color: #5d6b82;
  font-size: 13px;
  line-height: 1.5;
}

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

.profile-location-combobox {
  position: relative;
  min-width: 0;
}

.profile-location-combobox > input {
  padding-right: 38px !important;
  background-image:
    linear-gradient(45deg, transparent 50%, #42526a 50%),
    linear-gradient(135deg, #42526a 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 50%,
    calc(100% - 13px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

.profile-location-options {
  position: absolute;
  top: calc(100% + 5px);
  right: 0;
  left: 0;
  z-index: 100;
  max-height: 210px;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 5px;
  border: 1px solid #bfd0e5;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 14px 30px rgba(25, 57, 102, .18);
  scrollbar-color: #96abc5 #edf3f9;
  scrollbar-width: thin;
  overscroll-behavior: contain;
}

.profile-location-options[hidden] { display: none; }

.profile-location-options button {
  display: block;
  width: 100%;
  min-height: 38px;
  padding: 7px 10px;
  border: 0;
  border-radius: 6px;
  color: #27364c;
  background: transparent;
  text-align: left;
  font: inherit;
  cursor: pointer;
}

.profile-location-options button:hover,
.profile-location-options button:focus-visible,
.profile-location-options button.is-active {
  outline: 0;
  color: #155bd4;
  background: #edf5ff;
}

.profile-location-no-option {
  margin: 0;
  padding: 10px;
  color: #66758a;
  font-size: 13px;
}

@media (max-width: 560px) {
  .profile-location-grid {
    grid-template-columns: 1fr;
  }
}

.profile-declaration-consent input {
  width: 14px;
  min-width: 14px;
  height: 14px;
  min-height: 14px;
  margin: 3px 0 0;
  padding: 0;
  accent-color: var(--blue);
}

.profile-declaration-consent a {
  color: #155bd4;
  font-weight: 900;
}

@media (max-width: 760px) {
  .declaration-page {
    padding: 96px 14px 36px;
  }

  .declaration-shell {
    padding: 16px;
  }

  .declaration-tabs {
    grid-template-columns: 1fr;
  }
}

/* Comfortable workspace tuning for inner pages and management consoles. */
.admin-body {
  overflow-x: hidden;
  background:
    linear-gradient(180deg, #f7faff 0, #eef4fb 420px, #f5f7fb 100%),
    #f5f7fb;
}

.admin-body main {
  width: 100%;
}

.admin-body .role-console {
  width: min(1440px, calc(100% - 48px));
  max-width: none;
  margin: 0 auto;
  padding: 0 0 46px;
  background: transparent;
}

.admin-body .section-heading {
  margin: 0 0 14px;
  padding: 18px 4px 12px;
  background: transparent;
  border-bottom: 0;
}

.admin-body .role-layout,
.admin-body .role-workbench,
.admin-body .command-shell,
.admin-body .command-stage,
.admin-body .command-panel.active {
  width: 100%;
  min-width: 0;
}

.admin-body .role-summary {
  grid-template-columns: repeat(4, minmax(150px, 1fr)) minmax(170px, 0.9fr);
  gap: 12px;
  margin-bottom: 12px;
}

.admin-body .command-shell {
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.admin-body .command-menu {
  position: sticky;
  top: 82px;
  grid-template-columns: 1fr;
  align-content: start;
  gap: 8px;
  max-height: calc(100vh - 104px);
  padding: 10px;
  overflow-y: auto;
  overflow-x: hidden;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid #dce8f4;
  border-radius: 10px;
  box-shadow: 0 14px 34px rgba(21, 32, 51, 0.06);
}

.admin-body .command-menu button {
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 4px 10px;
  width: 100%;
  min-height: 62px;
  padding: 10px;
  text-align: left;
  box-shadow: none;
}

.admin-body .command-menu button span {
  grid-row: span 2;
  width: 34px;
  height: 34px;
  border-radius: 7px;
}

.admin-body .command-menu button small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-body .command-menu button.active {
  box-shadow: inset 4px 0 0 var(--blue), 0 10px 24px rgba(31, 98, 210, 0.1);
}

.admin-body .command-stage {
  min-width: 0;
  min-height: calc(100vh - 235px);
  border-radius: 10px;
  box-shadow: 0 18px 42px rgba(21, 32, 51, 0.07);
}

.admin-body .overview-grid,
.admin-body .user-management-layout {
  gap: 16px;
  padding: 16px;
}

.admin-body .overview-grid {
  grid-template-columns: repeat(2, minmax(320px, 1fr));
}

.admin-body .role-manage-grid,
.admin-body .service-phone-grid,
.admin-body .message-publish-grid,
.admin-body .message-manage-grid {
  grid-template-columns: minmax(340px, 0.9fr) minmax(460px, 1.1fr);
}

.admin-body .product-manage-grid {
  grid-template-columns: minmax(380px, 0.95fr) minmax(460px, 1.05fr);
}

.admin-body .commission-admin-grid {
  grid-template-columns: minmax(460px, 1.15fr) minmax(320px, 0.85fr);
}

.admin-body .commission-admin-grid > .role-card:first-child {
  grid-column: auto;
}

.admin-body .commission-admin-grid > .role-card:last-child {
  max-width: none;
}

.admin-body .task-admin-grid {
  grid-template-columns: minmax(460px, 1.1fr) minmax(360px, 0.9fr);
}

.admin-body .api-admin-grid {
  grid-template-columns: repeat(2, minmax(360px, 1fr));
}

.admin-body .api-port-card,
.admin-body .api-status-card {
  grid-column: 1 / -1;
}

.admin-body .user-management-layout {
  grid-template-columns: minmax(360px, 0.85fr) minmax(520px, 1.15fr);
}

.admin-body .user-account-tabs-card,
.admin-body .user-edit-card {
  min-width: 0;
}

.admin-body .record-list {
  max-height: min(68vh, 760px);
}

.admin-body .course-setting-links {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.classroom-page {
  width: min(1280px, calc(100% - 48px));
  gap: 20px;
}

.recruit-teach-shell {
  width: min(1320px, 100%);
  max-width: 1320px;
}

.course-settings-page {
  width: min(1320px, calc(100% - 48px));
  max-width: 1320px;
}

.business-guide-shell {
  width: min(1280px, calc(100% - 48px));
}

.standalone-ecommerce-page {
  width: min(1280px, calc(100% - 48px));
}

.opportunities-shell {
  width: min(1240px, 100%);
}

.declaration-shell {
  width: min(1120px, 100%);
}

.course-settings-layout {
  grid-template-columns: minmax(360px, 0.9fr) minmax(520px, 1.1fr);
}

.business-guide-panel.active {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.business-guide-panel.active .guide-step:first-child {
  grid-column: 1 / -1;
}

.guide-step {
  grid-template-columns: minmax(0, 1fr) minmax(190px, 0.36fr);
}

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

.declaration-card {
  padding: 20px 22px;
}

.factory-body {
  --factory-workbench-width: min(1320px, calc(100vw - 64px));
}

@media (min-width: 1280px) {
  .classroom-grid {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .classroom-course:first-child:last-child {
    grid-column: 1 / -1;
  }

  .work-columns {
    grid-template-columns: repeat(2, minmax(360px, 1fr));
  }

  .student-batch-meta {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .teacher-profile-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1180px) {
  .admin-body .command-shell {
    grid-template-columns: 1fr;
  }

  .admin-body .command-menu {
    position: static;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    max-height: none;
    overflow: visible;
  }

  .admin-body .role-summary,
  .admin-body .overview-grid,
  .admin-body .user-management-layout,
  .admin-body .role-manage-grid,
  .admin-body .service-phone-grid,
  .admin-body .message-publish-grid,
  .admin-body .message-manage-grid,
  .admin-body .product-manage-grid,
  .admin-body .commission-admin-grid,
  .admin-body .task-admin-grid,
  .admin-body .api-admin-grid,
  .course-settings-layout,
  .business-guide-panel.active {
    grid-template-columns: 1fr;
  }

  .business-guide-panel.active .guide-step:first-child {
    grid-column: auto;
  }
}

@media (max-width: 760px) {
  .admin-body {
    overflow-x: hidden;
  }

  .admin-body .role-console {
    width: min(100% - 24px, 100%);
  }

  .admin-body .section-heading {
    padding-inline: 0;
  }

  .admin-body .command-menu {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 8px;
  }

  .admin-body .command-menu button {
    grid-template-columns: 1fr;
    min-height: 50px;
  }

  .admin-body .command-menu button span {
    display: none;
  }

  .classroom-page,
  .course-settings-page,
  .business-guide-shell,
  .standalone-ecommerce-page {
    width: min(100% - 24px, 100%);
  }

  .guide-step {
    grid-template-columns: 1fr;
  }

  .factory-body {
    --factory-workbench-width: calc(100vw - 28px);
  }
}

/* Keep the back-office account summary balanced on one desktop row. */
@media (min-width: 960px) {
  .admin-body .role-summary {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: stretch;
  }
}

.admin-body .role-summary > article,
.admin-body .role-summary > .admin-logout-button,
.admin-body .role-summary > .summary-profile-card {
  width: 100%;
  min-width: 0;
  min-height: 60px;
  margin: 0;
}

.admin-body .role-summary > article,
.admin-body .role-summary > .summary-profile-card {
  gap: 4px;
  padding: 8px 14px;
}

.admin-body .role-summary > .summary-profile-card {
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  place-items: initial;
  align-content: center;
  column-gap: 8px;
  row-gap: 2px;
  color: #174f96;
  text-align: left;
  font-weight: 800;
}

.admin-body .role-summary > .summary-profile-card strong {
  justify-self: end;
}

.admin-body .role-summary > .summary-profile-card small {
  grid-column: 1 / -1;
  overflow: hidden;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-body .role-summary > .admin-logout-button {
  min-height: 60px;
  padding-block: 8px;
}

/* Business manager workspace: compact identity summary and explicit function list. */
.business-manager-body .role-console {
  width: min(1320px, calc(100% - 48px));
}

.business-manager-body .section-heading {
  margin-bottom: 8px;
  padding-top: 14px;
  padding-bottom: 8px;
}

@media (min-width: 1181px) {
  .business-manager-body .role-summary {
    grid-template-columns: minmax(240px, 1.35fr) minmax(160px, 0.8fr) minmax(140px, 0.7fr) minmax(160px, 0.8fr) minmax(170px, 0.85fr);
  }

  .business-manager-body .command-shell {
    grid-template-columns: 250px minmax(0, 1fr);
  }
}

.business-manager-body .role-summary > article,
.business-manager-body .role-summary > .admin-logout-button,
.business-manager-body .role-summary > .summary-profile-card {
  min-height: 68px;
}

.business-manager-body .role-summary strong {
  font-size: 18px;
  line-height: 1.25;
}

.business-manager-body .authorized-functions-panel {
  display: grid;
  gap: 12px;
  margin-bottom: 16px;
  padding: 16px;
  background: #fff;
  border: 1px solid #dfe7f1;
  border-radius: 10px;
  box-shadow: 0 12px 30px rgba(21, 32, 51, 0.05);
}

.business-manager-body .authorized-functions-heading {
  display: flex;
  gap: 16px;
  align-items: end;
  justify-content: space-between;
}

.business-manager-body .authorized-functions-heading > div {
  display: grid;
  gap: 2px;
}

.business-manager-body .authorized-functions-heading span {
  color: #53708f;
  font-size: 12px;
  font-weight: 800;
}

.business-manager-body .authorized-functions-heading h3,
.business-manager-body .authorized-functions-heading p {
  margin: 0;
}

.business-manager-body .authorized-functions-heading h3 {
  color: #172033;
  font-size: 18px;
}

.business-manager-body .authorized-functions-heading p {
  color: #667085;
  font-size: 13px;
}

.business-manager-body .permission-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 9px;
  min-height: 0;
  max-height: 238px;
  margin: 0;
  padding: 0 6px 0 0;
  overflow-y: auto;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.business-manager-body .permission-list article {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-height: 64px;
  padding: 10px 12px;
  background: #f7faff;
  border: 1px solid #dce7f4;
  border-radius: 8px;
}

.business-manager-body .permission-list article > b {
  display: grid;
  width: 36px;
  height: 36px;
  color: #fff;
  place-items: center;
  background: linear-gradient(135deg, var(--blue), var(--teal));
  border-radius: 8px;
  font-size: 12px;
}

.business-manager-body .permission-list article > div {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.business-manager-body .permission-list article strong {
  color: #172033;
  font-size: 14px;
}

.business-manager-body .permission-list article small {
  overflow: hidden;
  color: #667085;
  font-size: 12px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.business-manager-body .permission-list-empty {
  grid-column: 1 / -1;
  margin: 0;
  padding: 16px;
  color: #667085;
  text-align: center;
  background: #f8fbff;
  border: 1px dashed #cad8e8;
  border-radius: 8px;
}

@media (max-width: 760px) {
  .business-manager-body .role-console {
    width: min(100% - 24px, 100%);
  }

  .business-manager-body .authorized-functions-heading {
    display: grid;
  }

  .business-manager-body .permission-list {
    grid-template-columns: 1fr;
    max-height: 300px;
  }
}

/* Keep the ADMIN title in the sidebar while the main stage starts at the top. */
@media (min-width: 1181px) {
  .admin-system-body .command-shell {
    grid-template-columns: 220px minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    column-gap: 16px;
    row-gap: 10px;
  }

  .admin-system-body .admin-console-heading {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    min-height: 86px;
    margin: 0;
    padding: 12px 10px 10px;
  }

  .admin-system-body .command-menu {
    grid-column: 1;
    grid-row: 2;
    align-self: start;
    max-height: calc(100vh - 104px);
  }

  .admin-system-body .command-stage {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: start;
  }

  .admin-system-body .command-panel[data-command-panel="profile"] .admin-profile-reference {
    margin-top: 96px;
  }
}

@media (max-width: 1180px) {
  .admin-system-body .admin-console-heading {
    order: 1;
  }

  .admin-system-body .command-menu {
    order: 2;
  }

  .admin-system-body .command-stage {
    order: 3;
  }
}

/* Final message-management layout after enterprise review was added. */
.admin-body .message-manage-grid {
  grid-template-columns: minmax(360px, 0.9fr) minmax(440px, 1.1fr);
  align-items: start;
}

.admin-body .message-license-card {
  order: 1;
}

.admin-body .message-analysis-card {
  order: 2;
}

.admin-body .message-thread-card {
  grid-column: 1 / -1;
  order: 3;
}

.admin-body .message-feedback-card {
  grid-column: 1 / -1;
  order: 4;
}

/* Keep the message download row compact so it does not reserve excess vertical space. */
.admin-body [data-message-manage-panel="messages"] .message-manage-grid {
  gap: 10px;
  padding: 8px 14px;
}

.admin-body [data-message-manage-panel="messages"] .message-analysis-card {
  gap: 8px;
  padding: 12px 16px;
}

.admin-body [data-message-manage-panel="messages"] .message-analysis-card .message-export-form {
  gap: 8px;
}

.admin-body [data-message-manage-panel="messages"] .message-analysis-card .message-export-form label {
  gap: 3px;
}

.admin-body [data-message-manage-panel="messages"] .message-analysis-card .message-export-form input,
.admin-body [data-message-manage-panel="messages"] .message-analysis-card .message-export-form button {
  min-height: 36px;
  padding-top: 7px;
  padding-bottom: 7px;
}

@media (max-width: 900px) {
  .admin-body .message-manage-grid {
    grid-template-columns: 1fr;
  }
}

/* Business guide: keep every role tab on one consistent, readable step layout. */
.business-guide-body .business-guide-shell {
  width: min(1180px, calc(100% - 40px));
  margin-top: 24px;
}

.business-guide-body .business-guide-hero {
  padding: 22px 26px;
}

.business-guide-body .business-guide-hero h1 {
  font-size: clamp(26px, 2.5vw, 34px);
  line-height: 1.2;
}

.business-guide-body .business-guide-card {
  padding: 18px;
}

.business-guide-body .business-guide-tabs {
  position: sticky;
  z-index: 5;
  top: 76px;
  gap: 8px;
  padding: 8px;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid #dfe8f3;
  border-radius: 8px;
  box-shadow: 0 8px 20px rgba(33, 52, 77, 0.06);
}

.business-guide-body .business-guide-tabs button {
  min-width: 0;
  min-height: 42px;
  padding: 8px 12px;
  line-height: 1.35;
}

/* Five role guides are peer options: keep them equally sized on one desktop row. */
@media (min-width: 641px) {
  .business-guide-body .business-guide-tabs {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

.business-guide-body .business-guide-panel.active {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

.business-guide-body .business-guide-panel.active .guide-step:first-child {
  grid-column: auto;
}

.business-guide-body .guide-step {
  position: relative;
  display: grid;
  grid-template-columns: minmax(250px, 0.72fr) minmax(420px, 1.28fr);
  gap: 22px;
  align-items: start;
  min-width: 0;
  padding: 20px;
  background: #f8fbff;
  border-color: #d9e6f3;
  box-shadow: 0 8px 22px rgba(33, 52, 77, 0.05);
}

.business-guide-body .guide-step > div:first-child {
  min-width: 0;
  padding: 6px 2px;
}

.business-guide-body .guide-step b {
  margin-bottom: 10px;
  color: #17365d;
  font-size: 18px;
  line-height: 1.45;
}

.business-guide-body .guide-step p {
  color: #52637a;
  font-size: 14px;
  line-height: 1.8;
}

.business-guide-body .guide-step figure {
  min-width: 0;
  gap: 9px;
  padding: 10px;
  box-shadow: 0 4px 14px rgba(31, 107, 212, 0.07);
}

.business-guide-body .guide-preview-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #eef4fa;
  border: 1px solid #d8e4f1;
  border-radius: 6px;
}

.business-guide-body .guide-preview-frame iframe {
  position: absolute;
  inset: 0 auto auto 0;
  width: 200%;
  height: 200%;
  margin: 0;
  border: 0;
  border-radius: 0;
  transform: scale(0.5);
  transform-origin: 0 0;
  pointer-events: none;
}

.business-guide-body .guide-screen iframe + figcaption,
.business-guide-body .guide-screen figcaption {
  margin-top: 0;
}

.business-guide-body .guide-step figcaption {
  min-height: 17px;
  line-height: 1.4;
}

@media (max-width: 900px) {
  .business-guide-body .guide-step {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .business-guide-body .business-guide-shell {
    width: calc(100% - 24px);
    margin-top: 14px;
  }

  .business-guide-body .business-guide-hero,
  .business-guide-body .business-guide-card {
    padding: 14px;
  }

  .business-guide-body .business-guide-hero h1 {
    font-size: 23px;
  }

  .business-guide-body .business-guide-tabs {
    position: static;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .business-guide-body .guide-step {
    gap: 14px;
    padding: 14px;
  }

  .business-guide-body .guide-step b {
    font-size: 16px;
  }
}

/* ADMIN published content: keep each saved section compact until its title is opened. */
.admin-body .platform-declaration-list-card .record-list,
.admin-body .business-guide-list-card .record-list {
  display: grid;
  align-content: start;
  gap: 8px;
}

.admin-body .managed-content-record {
  overflow: hidden;
  background: #fff;
  border: 1px solid #d9e6f3;
  border-radius: 8px;
}

.admin-body .managed-content-record summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 42px;
  padding: 9px 12px;
  color: #17365d;
  background: linear-gradient(90deg, #f7fbff, #eef8f7);
  cursor: pointer;
  list-style: none;
}

.admin-body .managed-content-record summary::-webkit-details-marker {
  display: none;
}

.admin-body .managed-content-record summary strong {
  min-width: 0;
  overflow-wrap: anywhere;
}

.admin-body .managed-content-record summary span {
  color: #167e87;
  font-size: 12px;
  font-weight: 800;
}

.admin-body .managed-content-record[open] summary span {
  font-size: 0;
}

.admin-body .managed-content-record[open] summary span::after {
  content: "收起";
  font-size: 12px;
}

.admin-body .managed-content-record-body {
  display: grid;
  gap: 10px;
  padding: 12px;
  border-top: 1px solid #e2ebf4;
}

.admin-body .managed-content-record-body p {
  margin: 0;
  color: #50627a;
  line-height: 1.75;
  overflow-wrap: anywhere;
}

.admin-body .managed-content-record-body .record-actions {
  justify-content: flex-end;
}

.admin-body .managed-content-checkbox {
  appearance: none;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  margin: 0;
  border: 2px solid #9db5cd;
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.admin-body .managed-content-checkbox::before {
  width: 8px;
  height: 4px;
  content: "";
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg) scale(0);
  transition: transform 0.15s ease;
}

.admin-body .managed-content-checkbox:hover {
  border-color: #168f91;
}

.admin-body .managed-content-checkbox:focus-visible {
  outline: none;
  border-color: #176fcb;
  box-shadow: 0 0 0 3px rgba(23, 111, 203, 0.2);
}

.admin-body .managed-content-checkbox:checked {
  border-color: transparent;
  background: linear-gradient(135deg, #1aa39a 0%, #246ed2 100%);
}

.admin-body .managed-content-checkbox:checked::before {
  transform: rotate(-45deg) scale(1);
}

.admin-body .managed-content-bulk-actions {
  display: flex;
  justify-content: flex-end;
  min-height: 40px;
  margin-top: 12px;
}

.admin-body .managed-content-bulk-actions button {
  min-width: 142px;
  min-height: 38px;
  padding: 0 16px;
  border: 1px solid #dc5362;
  border-radius: 8px;
  color: #b42338;
  background: #fff7f8;
  font-weight: 900;
  cursor: pointer;
  transition: color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.admin-body .managed-content-bulk-actions button:hover:not(:disabled) {
  color: #fff;
  border-color: #c52d43;
  background: #c52d43;
  box-shadow: 0 8px 18px rgba(197, 45, 67, 0.2);
}

.admin-body .managed-content-bulk-actions button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(197, 45, 67, 0.2);
}

.admin-body .managed-content-bulk-actions button:active:not(:disabled) {
  transform: translateY(1px);
}

.admin-body .managed-content-bulk-actions button:disabled {
  color: #8796a8;
  border-color: #d5dee8;
  background: #f3f6f9;
  cursor: not-allowed;
  opacity: 0.78;
}

@media (max-width: 640px) {
  .admin-body .managed-content-record summary {
    gap: 9px;
    padding-inline: 10px;
  }

  .admin-body .managed-content-bulk-actions button {
    width: 100%;
  }
}

/* Public managed pages: fixed complete headings, full-width readable content. */
.declaration-body .declaration-shell,
.business-guide-body .business-guide-shell {
  width: min(1320px, calc(100% - 48px));
  max-width: none;
}

.declaration-body .declaration-tabs,
.business-guide-body .business-guide-tabs {
  width: 100%;
}

.declaration-body .declaration-card {
  width: 100%;
  min-height: 230px;
  align-content: start;
  padding: clamp(22px, 3vw, 38px);
}

.declaration-body .declaration-card p {
  max-width: none;
  width: 100%;
  color: #40536d;
  font-size: 16px;
  line-height: 2;
}

.business-guide-body .guide-step.managed-guide-content {
  display: block;
  width: 100%;
  min-height: 260px;
  padding: clamp(22px, 3vw, 38px);
}

.business-guide-body .managed-guide-copy {
  width: 100%;
  padding: 0;
}

.business-guide-body .managed-guide-copy b {
  padding-bottom: 14px;
  border-bottom: 1px solid #dbe7f2;
  font-size: 22px;
}

.business-guide-body .managed-guide-copy p {
  width: 100%;
  color: #40536d;
  font-size: 16px;
  line-height: 2;
  overflow-wrap: anywhere;
}

.managed-public-empty {
  width: 100%;
  padding: 42px 20px;
  color: #6b7c91;
  text-align: center;
  background: linear-gradient(135deg, #f7fbff, #f3faf8);
  border: 1px dashed #bfd3e7;
  border-radius: 8px;
}

@media (max-width: 640px) {
  .declaration-body .declaration-shell,
  .business-guide-body .business-guide-shell {
    width: calc(100% - 24px);
  }
}

/* Keep back-office navigation centered and evenly spaced across the header. */
@media (min-width: 901px) {
  .admin-body .site-header.admin-header {
    grid-template-columns: minmax(210px, 1fr) minmax(440px, 620px) minmax(210px, 1fr);
  }

  .admin-body .admin-header .brand {
    grid-column: 1;
  }

  .admin-body .admin-header .main-nav {
    grid-column: 2;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    width: 100%;
    justify-self: center;
    gap: 6px;
    overflow: visible;
    padding-bottom: 0;
  }

  .admin-body .admin-header .main-nav a,
  .admin-body .admin-header .main-nav button {
    width: 100%;
    text-align: center;
  }
}

/* ADMIN-only role preview navigation and account actions. */
.admin-system-body .admin-role-preview-nav,
.admin-system-body .admin-account-actions {
  display: flex;
  flex: 0 0 auto;
  gap: 6px;
}

.admin-system-body .admin-header .main-nav .admin-header-logout {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(135deg, var(--blue), var(--teal));
}

.admin-system-body .admin-header .main-nav .admin-header-logout:hover {
  color: #fff;
  border-color: transparent;
}

.admin-system-body .admin-header .main-nav .admin-header-profile {
  color: #1757a6;
  border-color: #9fc7f5;
  background: #f8fbff;
}

@media (min-width: 901px) {
  .admin-system-body .site-header.admin-header {
    grid-template-columns: minmax(190px, auto) minmax(0, 1fr);
  }

  .admin-system-body .admin-header .main-nav {
    grid-column: 2;
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    overflow: visible;
  }

  .admin-system-body .admin-header .main-nav > a,
  .admin-system-body .admin-header .main-nav > button,
  .admin-system-body .admin-header .main-nav .admin-role-preview-nav > a,
  .admin-system-body .admin-header .main-nav .admin-account-actions > button {
    flex: 0 0 auto;
    width: auto;
    min-width: 82px;
    padding-inline: 10px;
  }

  .admin-system-body .admin-account-actions {
    margin-left: auto;
  }

  .admin-system-body .admin-header .main-nav .admin-account-actions > button {
    min-width: 112px;
  }
}

@media (max-width: 900px) {
  .admin-system-body .admin-header .main-nav,
  .admin-system-body .admin-role-preview-nav,
  .admin-system-body .admin-account-actions {
    width: max-content;
  }
}

/* Role editing and three-way course publishing */
.admin-body .teacher-management-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 14px;
}

.admin-body .teacher-management-heading h3 { margin: 0; }

.admin-body .teacher-management-tabs {
  grid-template-columns: repeat(2, minmax(120px, 1fr));
  width: 100%;
  margin: 0;
}

.admin-body .teacher-management-panel[hidden],
.admin-body .role-function-editor-panel[hidden] { display: none !important; }

.admin-body .role-function-settings-layout:not(:has(.role-function-editor-panel.is-editing)) {
  grid-template-columns: 1fr;
}

.admin-body .role-function-settings-layout:not(:has(.role-function-editor-panel.is-editing)) .role-function-source-panel {
  border-right: 0;
}

.admin-body .teacher-course-summary {
  position: relative;
  display: grid;
  gap: 12px;
  overflow: hidden;
  padding: 18px 14px 14px;
  border: 1px solid #dbe6f2;
  border-radius: 9px;
  background: #fff;
  box-shadow: 0 8px 20px rgba(31, 95, 191, 0.06);
}

.admin-body .teacher-course-summary::before {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  left: 0;
  height: 4px;
  content: "";
  background: linear-gradient(90deg, var(--blue), var(--teal));
}

.admin-body .teacher-course-summary-head,
.admin-body .teacher-course-summary-row {
  display: grid;
  grid-template-columns: minmax(130px, .65fr) minmax(180px, .9fr) minmax(360px, 2.45fr);
  gap: 12px;
}

.admin-body .teacher-course-summary-head {
  padding: 10px 14px;
  color: #fff;
  background: linear-gradient(135deg, #239f98, #256ece);
  border-radius: 7px;
}

.admin-body .teacher-course-summary-row {
  padding: 14px;
  border: 1px solid #d7e3f0;
  border-radius: 7px;
  background: #fff;
}

.admin-body .teacher-course-summary-name {
  display: grid;
  align-content: start;
  gap: 5px;
  color: #163b68;
}

.admin-body .teacher-course-summary-name small { color: #72839a; }
.admin-body .teacher-course-summary-levels { display: grid; grid-column: 2 / 4; gap: 10px; }
.admin-body .teacher-course-summary-level { display: grid; grid-template-columns: minmax(150px, .9fr) minmax(360px, 2.45fr); gap: 12px; align-items: start; }
.admin-body .teacher-course-summary-level-name { padding: 11px 12px; color: #344d6c; font-weight: 800; background: #f4f7fb; border-radius: 6px; }
.admin-body .teacher-course-summary-classes { display: grid; gap: 8px; }
.admin-body .teacher-course-summary-class { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid #bdd8ee; border-radius: 6px; background: #f7fcff; }
.admin-body .teacher-course-summary-class.is-assigned { color: #68788c; background: #e7ebf0; border-color: #c8d0da; }
.admin-body .teacher-course-summary-class > div { display: grid; gap: 3px; }
.admin-body .teacher-course-summary-class span,
.admin-body .teacher-course-summary-class small { color: inherit; font-size: 12px; }
.admin-body .teacher-course-summary-class button { flex: 0 0 auto; min-height: 34px; padding: 6px 12px; }
.admin-body .teacher-course-history { margin-top: 8px; padding: 16px; border: 1px solid #d7e3f0; border-radius: 7px; background: #f8fbff; }
.admin-body .teacher-course-history h3 { margin: 0 0 12px; }
.admin-body .teacher-course-history details { margin-top: 8px; padding: 10px 12px; border: 1px solid #d4e0ed; border-radius: 6px; background: #fff; }
.admin-body .teacher-course-history summary { color: #234f82; font-weight: 800; cursor: pointer; }
.admin-body .teacher-course-history details > div { display: grid; gap: 7px; padding-top: 10px; color: #61758e; }

.admin-body .role-function-editor-panel,
.admin-body [data-role-source-row] {
  transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.admin-body .role-function-editor-panel.is-editing {
  background: #edf5ff;
  box-shadow: inset 0 0 0 2px #2b70ce;
}

.admin-body [data-role-source-row].is-editing {
  background: #e6f0ff;
  border-color: #2b70ce;
  box-shadow: inset 4px 0 0 #1765c1;
}

.admin-body .role-function-source-list [data-role-source-row].is-editing {
  background: #d8e9ff;
  border-color: #1765c1;
  box-shadow: inset 5px 0 0 #1765c1, inset 0 0 0 1px #8ab8ed;
}

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

.admin-body .role-function-form-actions > button {
  width: 100%;
}

.admin-body .role-function-form-actions .role-function-cancel-button {
  color: #fff;
  background: linear-gradient(135deg, #55b9b3, #5b8fd8);
  border-color: #5593c5;
}

.admin-body .role-function-form-actions .role-function-cancel-button:hover:not(:disabled) {
  color: #fff;
  background: linear-gradient(135deg, #43aaa4, #477fca);
  border-color: #4382b8;
}

.admin-body .role-function-form-actions .role-function-cancel-button:disabled {
  color: #7d8da0;
  background: #dfe7ef;
  border-color: #c9d5e1;
  cursor: not-allowed;
}

.admin-body .product-publish-tabs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
  margin: 0 0 14px;
  padding: 6px;
  background: #eef3f9;
  border: 1px solid #dce5f0;
  border-radius: 7px;
}

.admin-body .product-publish-tabs button {
  min-height: 40px;
  padding: 8px 12px;
  color: #31465f;
  background: #fff;
  border: 1px solid #d6e1ed;
  border-radius: 5px;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.admin-body .product-publish-tabs button.active {
  color: #fff;
  background: linear-gradient(90deg, #256bd0, #199f9a);
  border-color: transparent;
}

.admin-body .product-publish-panel {
  display: none;
}

.admin-body .product-publish-panel.active {
  display: block;
}

.admin-body .product-publish-list-card {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.admin-body .product-publish-list-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.admin-body .product-publish-list-heading h3 {
  min-width: 0;
  margin: 0;
}

.admin-body .course-product-visibility-toggle {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 6px 11px;
  color: #1765c1;
  background: #f2f7ff;
  border: 1px solid #b9d2f2;
  border-radius: 6px;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
}

.admin-body .course-product-visibility-toggle:hover,
.admin-body .course-product-visibility-toggle:focus-visible {
  color: #0c6b65;
  background: #e9f8f6;
  border-color: #9bd7d1;
}

.admin-body .course-product-visibility-toggle:disabled {
  color: #94a3b8;
  background: #f4f6f8;
  border-color: #d7dee8;
  cursor: not-allowed;
}

@media (max-width: 760px) {
  .admin-body .teacher-management-heading { align-items: stretch; flex-direction: column; }
  .admin-body .teacher-management-tabs { width: 100%; }
  .admin-body .teacher-course-summary-head { display: none; }
  .admin-body .teacher-course-summary-row,
  .admin-body .teacher-course-summary-level,
  .admin-body .teacher-course-summary-levels { display: grid; grid-template-columns: 1fr; grid-column: auto; }
  .admin-body .teacher-course-summary-class { align-items: stretch; flex-direction: column; }
  .admin-body .teacher-course-summary-class button { width: 100%; }
}

.admin-body .product-inline-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.admin-body .holiday-price-fields {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.admin-body .crossborder-service-picker {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 10px;
}

.admin-body .crossborder-service-picker > label {
  min-width: 0;
}

.admin-body .crossborder-service-add-trigger {
  min-width: 104px;
  min-height: 42px;
  padding: 8px 16px;
  color: #fff;
  font-weight: 800;
  background: linear-gradient(135deg, #1aa39a 0%, #246ed2 100%);
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
}

.admin-body .crossborder-service-add-trigger:hover {
  filter: brightness(1.04);
}

.admin-body .crossborder-service-add-trigger:focus-visible {
  outline: 3px solid rgba(36, 110, 210, 0.22);
  outline-offset: 2px;
}

.admin-body .crossborder-service-adder {
  margin-top: 10px;
  padding: 12px;
  background: #f5f9ff;
  border: 1px solid #c8daf2;
  border-radius: 7px;
}

.admin-body .crossborder-service-adder[hidden] {
  display: none;
}

.admin-body .crossborder-service-adder-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 10px;
}

.admin-body .crossborder-service-adder-actions button {
  width: auto;
  min-width: 92px;
}

.admin-body .bundle-course-fieldset {
  min-width: 0;
  margin: 0;
  padding: 12px;
  border: 1px solid #d9e4f0;
  border-radius: 6px;
}

.admin-body .bundle-course-fieldset legend {
  padding: 0 5px;
  color: #344b67;
  font-size: 13px;
  font-weight: 800;
}

.admin-body .bundle-course-options {
  min-width: 0;
}

.admin-body .bundle-course-dropdown {
  position: relative;
  min-width: 0;
}

.admin-body .bundle-course-dropdown > summary {
  display: flex;
  min-height: 42px;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px;
  color: #183653;
  background: #fff;
  border: 1px solid #cfdced;
  border-radius: 6px;
  cursor: pointer;
  list-style: none;
  outline: none;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease;
  touch-action: manipulation;
}

.admin-body .bundle-course-dropdown > summary::-webkit-details-marker {
  display: none;
}

.admin-body .bundle-course-dropdown > summary::after {
  content: "▾";
  flex: 0 0 auto;
  color: #526e8d;
}

.admin-body .bundle-course-dropdown[open] > summary::after {
  transform: rotate(180deg);
}

.admin-body .bundle-course-dropdown > summary span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-body .bundle-course-dropdown > summary small {
  flex: 0 0 auto;
  color: #177f89;
  font-weight: 800;
}

.admin-body .bundle-course-dropdown-menu {
  display: grid;
  gap: 7px;
  max-height: 260px;
  margin-top: 7px;
  padding: 7px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid #d9e4f0;
  border-radius: 6px;
  box-shadow: 0 10px 24px rgba(32, 61, 94, 0.12);
}

.admin-body .bundle-course-dropdown-menu label {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
  padding: 8px;
  background: #f8fbff;
  border: 1px solid #dce6f2;
  border-radius: 5px;
  cursor: pointer;
}

.admin-body .bundle-course-dropdown-menu input {
  flex: 0 0 17px;
  width: 17px;
  height: 17px;
  margin: 0;
  accent-color: #169d96;
}

.admin-body .bundle-course-dropdown-menu span {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.admin-body .bundle-course-dropdown-menu strong,
.admin-body .bundle-course-dropdown-menu small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-body .course-product-record {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto auto;
  align-items: center;
  gap: 7px;
  padding: 6px 8px;
  background: #f9fbfe;
  border: 1px solid #dfe7f1;
  border-radius: 6px;
}

.admin-body .course-product-record.is-editing[data-course-edit-tone],
.admin-body .product-publish-panel.role-card.is-course-editing {
  background: var(--course-edit-bg, #e7f1ff);
  border-color: var(--course-edit-accent, #2b70ce);
  box-shadow:
    inset 4px 0 0 var(--course-edit-accent-strong, #1765c1),
    inset 0 0 0 1px var(--course-edit-border-soft, #8ab8ed);
}

.admin-body [data-course-edit-tone="teal"] {
  --course-edit-bg: #e7f8f5;
  --course-edit-accent: #22a99a;
  --course-edit-accent-strong: #11877d;
  --course-edit-border-soft: #83d4ca;
}

.admin-body [data-course-edit-tone="blue"] {
  --course-edit-bg: #e7f1ff;
  --course-edit-accent: #2b70ce;
  --course-edit-accent-strong: #1765c1;
  --course-edit-border-soft: #8ab8ed;
}

.admin-body [data-course-edit-tone="violet"] {
  --course-edit-bg: #f1edff;
  --course-edit-accent: #7658d6;
  --course-edit-accent-strong: #6041c2;
  --course-edit-border-soft: #b4a3ed;
}

.admin-body [data-course-edit-tone="coral"] {
  --course-edit-bg: #fff0ed;
  --course-edit-accent: #e47a68;
  --course-edit-accent-strong: #cc5e4c;
  --course-edit-border-soft: #f0ad9f;
}

.admin-body .course-product-record.is-copy-pending {
  border-color: #d9c6f1;
  background: #fbf8ff;
  box-shadow: inset 4px 0 0 #8a62c6;
}

.admin-body .course-product-record.is-copy-pending .course-product-status {
  color: #66439d;
  background: #eee7fa;
}

.admin-body .role-card.is-course-editing {
  transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.admin-body .course-product-checkbox-spacer {
  width: 17px;
}

.admin-body .course-product-status {
  width: fit-content;
  padding: 1px 5px;
  color: #365f7f;
  background: #eaf2fa;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
}

.admin-body .course-product-record > .course-product-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px;
}

.admin-body .course-product-reorder {
  display: grid;
  grid-template-rows: repeat(2, 16px);
  align-items: center;
  justify-items: center;
  width: 22px;
  opacity: 0.16;
  transition: opacity 160ms ease, background 160ms ease;
}

.admin-body .course-product-record:hover .course-product-reorder,
.admin-body .course-product-record:focus-within .course-product-reorder {
  opacity: 1;
}

.admin-body .course-product-reorder button {
  display: grid;
  width: 22px;
  height: 16px;
  padding: 0;
  place-items: center;
  color: #52749c;
  font-size: 10px;
  line-height: 1;
  background: transparent;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
}

.admin-body .course-product-reorder button:hover,
.admin-body .course-product-reorder button:focus-visible {
  color: #1765c1;
  background: #e8f2ff;
  outline: none;
}

.admin-body .course-product-reorder button:focus-visible {
  box-shadow: 0 0 0 2px rgba(36, 110, 210, 0.24);
}

.admin-body .course-product-actions > button {
  min-height: 27px;
  padding: 3px 7px;
  color: #1765c1;
  background: #f2f7ff;
  border: 1px solid #b9d2f2;
  border-radius: 5px;
  cursor: pointer;
}

.admin-body .course-product-actions > button:disabled {
  color: #94a3b8;
  border-color: #d7dee8;
  background: #f4f6f8;
  cursor: not-allowed;
  opacity: 0.82;
}

.admin-body .course-product-actions > .publish {
  color: #0c6b65;
  background: #e9f8f6;
  border-color: #9bd7d1;
}

.admin-body .course-product-actions > .copy {
  color: #65429b;
  background: #f5effd;
  border-color: #d2c0ec;
}

.admin-body .product-submit-toolbar[hidden] {
  display: none !important;
}

.admin-body .product-admin-list {
  flex: 1 1 0;
  min-height: 0;
  max-height: none;
  align-content: start;
  grid-auto-rows: max-content;
  overflow-y: auto;
  scrollbar-gutter: stable;
}

.admin-body .physical-product-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 14px;
  padding: 8px;
  border: 1px solid #dbe5f2;
  background: #f4f8fd;
  border-radius: 8px;
}

.admin-body .physical-product-tabs button {
  min-height: 42px;
  border: 1px solid #d4e0ef;
  color: #334155;
  background: #fff;
  border-radius: 7px;
  font-weight: 700;
  cursor: pointer;
}

.admin-body .physical-product-tabs button.active {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(135deg, var(--blue), var(--teal));
}

.admin-body .physical-product-tab-panel[hidden] {
  display: none !important;
}

.admin-body .physical-product-publish-grid {
  grid-template-columns: minmax(0, 1fr);
}

.admin-body .physical-product-category-tabs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
  margin: 0 0 14px;
  padding: 8px;
  border: 1px solid #dbe7f5;
  border-radius: 8px;
  background: #f4f8ff;
}

.admin-body .physical-product-category-tabs button {
  min-width: 0;
  min-height: 40px;
  padding: 8px 12px;
  color: #334155;
  border: 1px solid #d4e0ef;
  border-radius: 7px;
  background: #fff;
  font-weight: 800;
  cursor: pointer;
}

.admin-body .physical-product-category-tabs button.active {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(135deg, var(--teal), var(--blue));
}

.admin-body .physical-product-category-empty {
  grid-column: 1 / -1;
  margin: 4px;
  color: #64748b;
  text-align: center;
}

.admin-body .physical-product-panel-note {
  margin: 0 0 12px;
  color: #64748b;
}

.admin-body .physical-product-orders-card {
  min-height: 360px;
}

.admin-body .physical-product-manage-card {
  min-width: 0;
}

.admin-body .physical-order-period-card {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid #dbe7f5;
  border-radius: 10px;
  background: #fff;
}

.admin-body .physical-order-period-card + .physical-order-period-card {
  margin-top: 16px;
}

.admin-body .physical-order-period-card.is-current {
  border-top: 4px solid #18a39a;
}

.admin-body .physical-order-period-card.is-history {
  border-top: 4px solid #7161d9;
}

.admin-body .physical-order-period-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.admin-body .physical-order-period-head span {
  color: #167e8c;
  font-size: 13px;
  font-weight: 800;
}

.admin-body .physical-order-period-head h4 {
  margin: 3px 0 0;
  color: #112f57;
  font-size: 18px;
}

.admin-body .physical-order-period-head > strong {
  color: #285f9a;
  white-space: nowrap;
}

.admin-body .physical-order-summary {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 9px;
}

.admin-body .physical-order-summary article {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 7px 10px;
  border: 1px solid #dbe7f5;
  border-radius: 8px;
  background: #f6faff;
}

.admin-body .physical-order-summary span {
  color: #61748c;
  font-size: 12px;
}

.admin-body .physical-order-summary strong {
  color: #165f9e;
  font-size: 18px;
  overflow-wrap: anywhere;
}

.admin-body .physical-order-download-toolbar {
  display: flex;
  align-items: end;
  justify-content: flex-end;
  gap: 8px;
  padding: 6px 8px;
  border: 1px solid #dbe7f5;
  border-radius: 8px;
  background: #f7faff;
}

.admin-body .physical-order-download-toolbar label {
  display: grid;
  gap: 2px;
  color: #53677f;
  font-size: 12px;
  font-weight: 700;
}

.admin-body .physical-order-download-toolbar input,
.admin-body .physical-order-download-toolbar button {
  min-height: 34px;
  box-sizing: border-box;
  border-radius: 7px;
  font: inherit;
}

.admin-body .physical-order-download-toolbar input {
  min-width: 150px;
  padding: 4px 8px;
  border: 1px solid #c5d6e9;
  background: #fff;
}

.admin-body .physical-order-download-toolbar button {
  padding: 6px 12px;
  color: #fff;
  border: 1px solid transparent;
  background: linear-gradient(135deg, var(--blue), var(--teal));
  font-weight: 800;
  cursor: pointer;
}

.admin-body .physical-order-download-toolbar button:disabled {
  color: #8a98a9;
  border-color: #d6dee9;
  background: #e8edf3;
  cursor: not-allowed;
}

.admin-body .physical-order-history-month {
  border: 1px solid #dbe7f5;
  border-radius: 8px;
  overflow: hidden;
}

.admin-body .physical-order-history-month + .physical-order-history-month {
  margin-top: 9px;
}

.admin-body .physical-order-history-month summary {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) auto auto;
  gap: 14px;
  align-items: center;
  padding: 13px 14px;
  color: #4f647d;
  background: #f7faff;
  cursor: pointer;
}

.admin-body .physical-order-history-month summary strong,
.admin-body .physical-order-history-month summary b {
  color: #185f9d;
}

.admin-body .physical-order-history-month > .physical-order-summary,
.admin-body .physical-order-history-month > .product-admin-list {
  margin: 12px;
}

.admin-body .physical-order-month-actions {
  display: flex;
  justify-content: flex-end;
  margin: 12px 12px 0;
}

.admin-body .physical-order-month-actions button {
  min-height: 38px;
  padding: 7px 13px;
  color: #1766b0;
  border: 1px solid #b8d4f2;
  border-radius: 7px;
  background: #f2f8ff;
  font-weight: 800;
  cursor: pointer;
}

.admin-body .physical-order-month-actions button:hover,
.admin-body .physical-order-month-actions button:focus-visible {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(135deg, var(--blue), var(--teal));
  outline: 0;
}

.admin-body .physical-product-record {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid #e2e8f0;
}

.admin-body .physical-product-record:last-child {
  border-bottom: 0;
}

.admin-body .physical-product-record-copy {
  display: grid;
  min-width: 0;
  gap: 2px;
  line-height: 1.4;
}

.admin-body .physical-product-record-copy p,
.admin-body .physical-product-record-copy small {
  margin: 0;
  color: #64748b;
}

.admin-body .physical-product-record-copy p {
  overflow-wrap: anywhere;
}

.admin-body .physical-product-record-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

.admin-body .physical-product-record-actions button,
.admin-body .physical-type-chip button {
  min-height: 30px;
  padding: 0 10px;
}

.admin-body .physical-product-record-actions .danger {
  color: #b91c1c;
  border: 1px solid #fecaca;
  background: #fff;
}

.admin-body .physical-product-record-actions .edit {
  color: #1765c1;
  border: 1px solid #bfd8fb;
  background: #f4f8ff;
}

.admin-body .physical-product-record-actions .offline {
  color: #64748b;
  border: 1px solid #cbd5e1;
  background: #f8fafc;
}

.admin-body .physical-product-record-actions .publish {
  color: #0c6b65;
  border: 1px solid #9bd7d1;
  background: #e9f8f6;
}

.admin-body .physical-product-record-actions .copy {
  color: #65429b;
  border: 1px solid #d2c0ec;
  background: #f5effd;
}

.admin-body .physical-product-record.is-copy-pending {
  padding-inline: 12px;
  border: 1px solid #d9c6f1;
  border-radius: 7px;
  background: #fbf8ff;
  box-shadow: inset 4px 0 0 #8a62c6;
}

.admin-body .physical-product-status {
  width: fit-content;
  padding: 2px 6px;
  color: #365f7f !important;
  background: #eaf2fa;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
}

.admin-body .physical-product-record.is-copy-pending .physical-product-status {
  color: #66439d !important;
  background: #eee7fa;
}

.admin-body .physical-product-section-title {
  position: relative;
  margin: 4px 0 2px;
  padding: 13px 0 10px;
  border-bottom: 1px solid #dbe5f2;
}

.admin-body .physical-product-section-title::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 4px;
  border-radius: 999px;
  content: "";
}

.admin-body .physical-product-section-title.is-products::before {
  background: linear-gradient(90deg, var(--teal), var(--blue));
}

.admin-body .physical-product-section-title.is-orders::before {
  background: linear-gradient(90deg, #7254d8, #a66de0);
}

.admin-body .physical-product-empty {
  padding: 24px 14px;
  color: #64748b;
  text-align: center;
  border: 1px dashed #cbd8e8;
  background: #f8fbff;
  border-radius: 7px;
}

@media (max-width: 720px) {
  .admin-body .physical-product-tabs {
    grid-template-columns: repeat(3, minmax(118px, 1fr));
    overflow-x: auto;
    overscroll-behavior-x: contain;
  }

  .admin-body .physical-product-record {
    grid-template-columns: 1fr;
  }

  .admin-body .physical-product-record-actions {
    justify-content: flex-start;
  }

  .admin-body .physical-order-period-head,
  .admin-body .physical-order-download-toolbar {
    display: grid;
    grid-template-columns: 1fr;
  }

  .admin-body .physical-order-period-head > strong {
    white-space: normal;
  }

  .admin-body .physical-order-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-body .physical-order-download-toolbar i {
    display: none;
  }

  .admin-body .physical-order-download-toolbar input,
  .admin-body .physical-order-download-toolbar button {
    width: 100%;
    min-width: 0;
  }

  .admin-body .physical-order-history-month summary {
    grid-template-columns: 1fr auto;
    gap: 6px 10px;
  }

  .admin-body .physical-order-history-month summary span {
    grid-column: 1 / -1;
  }
}

.admin-body .course-product-record > div {
  display: grid;
  min-width: 0;
  gap: 1px;
}

.admin-body .course-product-copy > strong {
  overflow: hidden;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-body .course-product-record span {
  overflow: hidden;
  color: #718096;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-body .course-class-code-tip {
  display: block;
  margin-top: 5px;
  color: #16736c;
  font-size: 12px;
  font-weight: 700;
}

.admin-body .course-product-class-code {
  overflow: hidden;
  color: #16736c;
  font-size: 11px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-body .course-product-record b {
  color: #1765c1;
  white-space: nowrap;
}

.admin-body .course-product-record .danger,
.admin-body .company-item .danger {
  min-height: 30px;
  padding: 5px 9px;
  color: #b42318;
  background: #fff7f6;
  border: 1px solid #efb7b2;
  border-radius: 5px;
  cursor: pointer;
}

.admin-body #roleUserSettingsList .role-source-local-summary {
  display: grid;
  grid-template-columns: minmax(85px, 0.75fr) minmax(0, 1.25fr);
  gap: 4px;
  margin-top: 0;
  padding: 4px 7px;
  color: #52657d;
  background: #f3f8fc;
  border: 1px solid #dce8f2;
  border-radius: 5px;
  font-size: 12px;
}

.admin-body #roleUserSettingsList .role-source-local-summary span {
  min-width: 0;
  overflow: visible;
  line-height: 1.35;
  overflow-wrap: anywhere;
  text-overflow: clip;
  white-space: normal;
}

.admin-body #roleUserSettingsList .role-source-local-summary b {
  margin-right: 6px;
  color: #263a52;
}

.admin-body #roleUserSettingsList .role-account-single-row {
  grid-template-columns: minmax(145px, 0.8fr) minmax(0, 1.2fr);
  grid-auto-rows: max-content;
  align-items: stretch;
  align-self: start;
  gap: 3px 7px;
  height: auto;
  min-height: 0;
  overflow: visible;
  padding: 5px 8px;
}

.admin-body #roleUserSettingsList .role-account-single-row .role-authorization-heading {
  grid-column: 1 / -1;
  min-height: 26px;
}

.admin-body #roleUserSettingsList .role-account-single-member {
  grid-column: 1;
  align-content: center;
  padding: 4px 8px;
}

.admin-body #roleUserSettingsList .role-identity-delete-button,
.admin-body #roleUserSettingsList .role-identity-edit-button,
.admin-body #roleUserSettingsList .role-identity-view-button {
  min-width: 44px;
  min-height: 26px;
  padding: 3px 7px;
  font-size: 11px;
}

.admin-body #roleUserSettingsList .role-source-local-summary {
  grid-column: 2;
}

.admin-body #roleUserSettingsList .role-source-local-summary.role-course-summary {
  grid-template-columns: minmax(0, 1fr);
  gap: 5px;
}

.admin-body #roleUserSettingsList .role-source-local-summary.role-course-summary[hidden] {
  display: none !important;
}

.admin-body #roleUserSettingsList .role-course-summary > b {
  color: #6b5a13;
  font-size: 11px;
}

.admin-body .role-authorized-class-list {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.admin-body .role-authorized-class-list span {
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  padding: 3px 7px;
  border: 1px solid #eadb92;
  border-radius: 999px;
  color: #5f5117;
  background: #fff9d9;
  font-size: 10px;
  line-height: 1.35;
}

@media (max-width: 1050px) {
  .admin-body #roleUserSettingsList .role-account-single-row {
    grid-template-columns: 1fr;
  }

  .admin-body #roleUserSettingsList .role-source-local-summary {
    grid-column: 1;
  }
}

@media (max-width: 620px) {
  .admin-body #roleUserSettingsList .role-source-local-summary {
    grid-template-columns: 1fr;
  }
}

.pricing-empty-state {
  grid-column: 1 / -1;
  padding: 36px 20px;
  color: #6d7d92;
  text-align: center;
  background: #f8fbff;
  border: 1px dashed #cad8e8;
  border-radius: 7px;
}

.admin-body .course-product-record .danger {
  min-height: 27px;
  padding: 3px 7px;
}

/* 报价查询页配色优化：仅调整颜色，不改变现有尺寸、结构与排版。 */
.pricing-page {
  color: #172842;
  background:
    linear-gradient(135deg, #edf5ff 0%, #f2fbfa 48%, #f7f9fd 100%);
}

.pricing-page .site-header {
  background: rgba(255, 255, 255, 0.94);
  border-bottom-color: #d7e4f2;
}

.pricing-page .brand {
  color: #172842;
}

.pricing-page .brand small,
.pricing-page .section-heading > p:not(.eyebrow) {
  color: #60728a;
}

.pricing-page-nav a {
  color: #2e4059;
}

.pricing-page-nav a:hover {
  color: #0d928b;
}

.pricing-page-nav a.active {
  color: #1765d1;
}

.pricing-page .pricing-query {
  background:
    radial-gradient(circle at 90% 8%, rgba(15, 163, 154, 0.08), transparent 30%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(242, 247, 253, 0.96));
}

.pricing-page .section-heading .eyebrow,
.pricing-page .pricing-panel-head span {
  color: #0c968e;
}

.pricing-page .pricing-menu button {
  color: #243a57;
  background: linear-gradient(135deg, #ffffff, #f5f9fe);
  border-color: #d5e2f0;
  box-shadow: 0 8px 22px rgba(31, 74, 125, 0.06);
}

.pricing-page .pricing-menu button.active,
.pricing-page .pricing-menu button:hover {
  color: #ffffff;
  background: linear-gradient(135deg, #2468d7, #159f99);
  border-color: #1d75c8;
  box-shadow: 0 10px 24px rgba(31, 98, 210, 0.18);
}

.pricing-page .pricing-panel {
  background: linear-gradient(155deg, #ffffff 0%, #fbfdff 58%, #f6fbfc 100%);
  border-color: #d5e2f0;
  box-shadow: 0 18px 42px rgba(28, 72, 121, 0.09);
}

.pricing-page .pricing-panel-head {
  border-bottom-color: #dce8f4;
}

.pricing-page .pricing-panel-head h3 {
  color: #142640;
}

.pricing-page .pricing-panel-head p {
  color: #5d6f86;
}

.pricing-page .pricing-empty-state {
  color: #5b6f88;
  background:
    linear-gradient(135deg, rgba(238, 246, 255, 0.94), rgba(240, 251, 249, 0.94));
  border-color: #bfd4e9;
}

.pricing-page .pricing-card {
  color: #263a55;
  background: linear-gradient(145deg, #f8fbff, #f2f8fd);
  border-color: #d8e6f3;
}

.pricing-page .pricing-card.is-selected {
  border-color: #2872d3;
  box-shadow: inset 0 0 0 1px rgba(40, 114, 211, 0.2);
}

.pricing-page .pricing-card.featured {
  background:
    linear-gradient(135deg, rgba(18, 161, 153, 0.13), rgba(37, 105, 214, 0.04) 58%),
    #ffffff;
  border-color: rgba(18, 161, 153, 0.36);
  box-shadow: 0 14px 32px rgba(23, 132, 154, 0.13);
}

/* 跨境服务产品按内容自然撑开，完整显示三行说明与购买操作。 */
.pricing-page .pricing-cards.is-public-service-cards {
  max-height: none;
  overflow: visible;
  align-items: stretch;
}

.pricing-page .pricing-cards.is-public-service-cards .pricing-card {
  height: auto;
  min-height: 0;
}

.pricing-page .pricing-cards.is-public-service-cards .pricing-card-actions {
  margin-top: auto;
}

.pricing-page .pricing-audience-bar {
  background: linear-gradient(135deg, #f1f7ff, #f1fbfa);
  border-color: #cfe0f0;
}

.pricing-page .pricing-platform-overview {
  border-top-color: #dce8f4;
}

.pricing-page .pricing-platform-description {
  color: #4f637d;
}

.pricing-page .pricing-platform-stats a {
  color: #29405d;
  background: linear-gradient(145deg, #ffffff, #f3f8fe);
  border-color: #d5e3f1;
  box-shadow: 0 10px 28px rgba(28, 72, 121, 0.07);
}

.pricing-page .pricing-platform-stats a:nth-child(even) {
  background: linear-gradient(145deg, #ffffff, #f0faf8);
  border-color: #d0e9e5;
}

.pricing-page .pricing-platform-stats a:hover {
  border-color: rgba(23, 115, 204, 0.42);
  box-shadow: 0 16px 34px rgba(25, 91, 153, 0.12);
}

.pricing-page .pricing-platform-stats dt {
  color: #2368d1;
}

.pricing-page .pricing-platform-stats a:nth-child(even) dt {
  color: #0d978f;
}

.pricing-page .pricing-platform-stats dd {
  color: #5b6e86;
}

@media (max-width: 760px) {
  .admin-body .product-publish-tabs,
  .admin-body .product-inline-fields,
  .admin-body .holiday-price-fields,
  .admin-body .crossborder-service-picker,
  .admin-body .bundle-course-options {
    grid-template-columns: 1fr;
  }

  .admin-body .crossborder-service-add-trigger {
    width: 100%;
  }

  .admin-body .product-publish-list-card {
    grid-column: auto;
    grid-row: auto;
  }

  .admin-body .product-admin-list {
    flex: 0 1 auto;
    max-height: 680px;
  }

  .admin-body .course-product-record {
    grid-template-columns: auto minmax(0, 1fr) auto auto;
  }

  .admin-body .course-product-actions {
    grid-column: 2 / -1;
    justify-self: end;
  }

  .admin-body #roleUserSettingsList .role-source-local-summary,
  .pricing-card-actions {
    grid-template-columns: 1fr;
  }
}

/* Stable ADMIN header: role workspaces stay visible and account actions remain separate. */
.admin-system-body .admin-header {
  border-bottom-color: #dfe6f0;
  background: rgba(255, 255, 255, 0.98);
}

.admin-system-body .admin-header .main-nav > .admin-header-home {
  display: grid;
  min-width: 96px;
  min-height: 40px;
  place-items: center;
  padding-block: 0;
  color: #31445f;
  background: #fff;
  border-color: #d7e0ec;
  line-height: 1;
}

.admin-system-body .admin-role-preview-nav {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 3px;
  min-width: 0;
  padding: 3px;
  border: 1px solid #dce5f1;
  border-radius: 7px;
  background: #f4f7fb;
}

.admin-system-body .admin-header .main-nav .admin-role-preview-nav > a {
  display: grid;
  min-width: 0;
  min-height: 32px;
  place-items: center;
  padding: 6px 10px;
  overflow: hidden;
  color: #33465f;
  background: transparent;
  border-color: transparent;
  border-radius: 5px;
  text-overflow: ellipsis;
}

.admin-system-body .admin-header .main-nav .admin-role-preview-nav > a:hover {
  color: #135ca8;
  background: #fff;
  border-color: #c9d8ea;
}

.admin-system-body .admin-account-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(112px, auto));
  gap: 6px;
  min-width: 0;
}

.admin-system-body .admin-header .main-nav .admin-account-actions > button {
  min-height: 40px;
  padding-inline: 14px;
}

@media (min-width: 1121px) {
  .admin-system-body .site-header.admin-header {
    grid-template-columns: minmax(210px, auto) minmax(0, 1fr);
    gap: clamp(20px, 2vw, 38px);
  }

  .admin-system-body .admin-header .main-nav {
    display: grid;
    grid-template-columns: 96px minmax(590px, 660px) auto;
    align-items: center;
    justify-content: end;
    gap: 10px;
    overflow: visible;
  }

  .admin-system-body .admin-header .main-nav > .admin-header-home {
    transform: translateX(-72px);
  }

  .admin-system-body .admin-role-preview-nav {
    transform: translateX(-56px);
  }

  .admin-system-body .admin-account-actions {
    margin-left: 0;
  }
}

@media (min-width: 901px) and (max-width: 1120px) {
  .admin-system-body .admin-header .main-nav {
    display: flex;
    width: 100%;
    justify-content: flex-start;
    overflow-x: auto;
    scrollbar-width: thin;
  }

  .admin-system-body .admin-role-preview-nav {
    grid-template-columns: repeat(7, minmax(82px, 1fr));
    min-width: 574px;
  }

  .admin-system-body .admin-account-actions {
    margin-left: 0;
  }
}

@media (max-width: 900px) {
  .admin-system-body .admin-header {
    overflow: hidden;
  }

  .admin-system-body .admin-header .main-nav {
    display: flex;
    width: 100%;
    justify-content: flex-start;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: thin;
  }

  .admin-system-body .admin-role-preview-nav {
    grid-template-columns: repeat(7, 104px);
    width: max-content;
  }

  .admin-system-body .admin-account-actions {
    width: max-content;
  }
}

/* Global website branding and selectable theme system. */
:root[data-site-theme="youth-campus"] {
  --ink: #13253f; --muted: #5b6e84; --line: #d8e5f1; --surface: #ffffff; --soft: #f2f8ff;
  --blue: #2563eb; --blue-dark: #1743a3; --teal: #22a965; --gold: #f0b43c; --coral: #e86459; --violet: #7258d8;
  --page-bg-start: #edf7ff; --page-bg-end: #f9fcff; --header-bg: rgba(255, 255, 255, 0.92);
}

:root[data-site-theme="creative-class"] {
  --ink: #24203a; --muted: #6a647e; --line: #e2def0; --surface: #ffffff; --soft: #f7f4ff;
  --blue: #6754d9; --blue-dark: #44329f; --teal: #179fb5; --gold: #e7ad3e; --coral: #e56672; --violet: #6754d9;
  --page-bg-start: #f1efff; --page-bg-end: #fbfaff; --header-bg: rgba(255, 255, 255, 0.92);
}

:root[data-site-theme="future-career"] {
  --ink: #162538; --muted: #5f6c7b; --line: #dbe2e9; --surface: #ffffff; --soft: #f4f7fa;
  --blue: #244a7c; --blue-dark: #173252; --teal: #e47b32; --gold: #e0a134; --coral: #d85e4e; --violet: #6658b5;
  --page-bg-start: #eef3f8; --page-bg-end: #fafcfd; --header-bg: rgba(255, 255, 255, 0.93);
}

:root[data-site-theme="spring"] {
  --ink: #183029; --muted: #64766f; --line: #d8e8df; --surface: #ffffff; --soft: #f2faf5;
  --blue: #3d9565; --blue-dark: #276745; --teal: #dc789f; --gold: #d9a93d; --coral: #db6f70; --violet: #8a65bd;
  --page-bg-start: #eef9f2; --page-bg-end: #fffafd; --header-bg: rgba(255, 255, 255, 0.92);
}

:root[data-site-theme="summer"] {
  --ink: #143044; --muted: #5a7483; --line: #d4e7ed; --surface: #ffffff; --soft: #effafd;
  --blue: #1685c7; --blue-dark: #0e5b8a; --teal: #1da595; --gold: #e6b23d; --coral: #e36c5c; --violet: #6268c6;
  --page-bg-start: #eaf8ff; --page-bg-end: #f8fdfd; --header-bg: rgba(255, 255, 255, 0.91);
}

:root[data-site-theme="autumn"] {
  --ink: #33271d; --muted: #786b5d; --line: #eadfce; --surface: #fffefa; --soft: #fbf6ed;
  --blue: #b66b29; --blue-dark: #7d4518; --teal: #71823f; --gold: #d39a32; --coral: #c85d4c; --violet: #765f9f;
  --page-bg-start: #fbf2e5; --page-bg-end: #fffdf8; --header-bg: rgba(255, 254, 250, 0.93);
}

:root[data-site-theme="winter"] {
  --ink: #17283e; --muted: #607084; --line: #d8e3ec; --surface: #ffffff; --soft: #f1f7fb;
  --blue: #315a9f; --blue-dark: #203c6d; --teal: #6da5c0; --gold: #c9a14b; --coral: #cf6968; --violet: #625fbb;
  --page-bg-start: #edf4fa; --page-bg-end: #fbfdff; --header-bg: rgba(255, 255, 255, 0.93);
}

:root[data-site-theme="qingming"] {
  --ink: #26312e; --muted: #68736f; --line: #dce2de; --surface: #fdfefd; --soft: #f3f6f4;
  --blue: #66736f; --blue-dark: #46514e; --teal: #89977e; --gold: #b79d63; --coral: #a86e69; --violet: #777384;
  --page-bg-start: #eff2f0; --page-bg-end: #fafbfa; --header-bg: rgba(253, 254, 253, 0.94);
}

:root[data-site-theme="mid-autumn"] {
  --ink: #1e2740; --muted: #667087; --line: #dce1ec; --surface: #ffffff; --soft: #f5f6fb;
  --blue: #40599b; --blue-dark: #293a6b; --teal: #c9962f; --gold: #c9962f; --coral: #c9685b; --violet: #6655a6;
  --page-bg-start: #f0f2fa; --page-bg-end: #fffaf0; --header-bg: rgba(255, 255, 255, 0.93);
}

:root[data-site-theme="national-day"] {
  --ink: #33201f; --muted: #776563; --line: #eadbd7; --surface: #fffdfb; --soft: #fff5f1;
  --blue: #c52d2d; --blue-dark: #861e1e; --teal: #c89425; --gold: #c89425; --coral: #cf4738; --violet: #7b4d78;
  --page-bg-start: #fff0eb; --page-bg-end: #fffaf4; --header-bg: rgba(255, 253, 251, 0.94);
}

:root[data-site-theme="spring-festival"] {
  --ink: #38201f; --muted: #7b6562; --line: #ecd9d4; --surface: #fffdf9; --soft: #fff4ed;
  --blue: #b91f32; --blue-dark: #7d1522; --teal: #d89425; --gold: #d89425; --coral: #d64a3a; --violet: #815074;
  --page-bg-start: #ffede7; --page-bg-end: #fff9ed; --header-bg: rgba(255, 253, 249, 0.94);
}

:root[data-site-theme] .site-header,
:root[data-site-theme] .auth-topbar,
:root[data-site-theme] .admin-system-body .admin-header {
  border-bottom-color: var(--line);
  background: var(--header-bg);
}

:root[data-site-theme] .command-stage,
:root[data-site-theme] .command-menu button,
:root[data-site-theme] .role-card,
:root[data-site-theme] .auth-card,
:root[data-site-theme] .detail-section,
:root[data-site-theme] .detail-summary {
  border-color: var(--line);
  background-color: var(--surface);
}

:root[data-site-theme] .command-menu button.active {
  border-color: color-mix(in srgb, var(--blue) 44%, var(--line));
  box-shadow: 0 16px 34px color-mix(in srgb, var(--blue) 16%, transparent);
}

:root[data-site-theme] .main-nav a:hover,
:root[data-site-theme] .auth-topbar-nav a:hover,
:root[data-site-theme] .detail-nav a:hover {
  color: var(--blue);
  background: var(--soft);
}

.brand-mark.site-brand-has-image,
.auth-topbar-logo > span.site-brand-has-image,
.auth-brand > span.site-brand-has-image,
.logo > span.site-brand-has-image,
.detail-brand > span.site-brand-has-image,
.strict-logo.site-brand-has-image,
.admin-profile-reference-brand > span.site-brand-has-image {
  overflow: hidden;
  padding: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: none;
}

.site-brand-logo-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: inherit;
  transform: scale(1.04);
  transform-origin: center;
}

.strict-logo.site-brand-has-image {
  padding: 0;
}

.site-brand-has-image:not(.site-brand-trimmed) > .site-brand-logo-image {
  transform: scale(1.26);
}

/* Header logo: remove the framed appearance and match the two-line brand copy height. */
.site-header .brand-mark.site-brand-has-image {
  display: block;
  width: auto;
  min-width: 48px;
  height: 48px;
  overflow: visible;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.site-header .brand-mark.site-brand-has-image > .site-brand-logo-image {
  width: auto;
  max-width: 64px;
  height: 48px;
  object-fit: contain;
  border-radius: 0;
  mix-blend-mode: multiply;
  transform: none;
}

.site-header .brand-mark.site-brand-has-image:not(.site-brand-trimmed) > .site-brand-logo-image {
  height: 36px;
  transform: scale(1.34);
}

/* ADMIN website settings. */
.site-settings-layout {
  display: grid;
  grid-template-columns: minmax(360px, 0.78fr) minmax(520px, 1.22fr);
  gap: 16px;
  align-items: start;
}

.site-settings-left-column {
  display: grid;
  gap: 16px;
  min-width: 0;
  align-content: start;
}

.site-information-card,
.site-home-design-card,
.site-theme-settings-card {
  min-width: 0;
  padding: 18px;
}

.site-home-design-form {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}

.site-home-design-form label {
  display: grid;
  gap: 7px;
  color: var(--ink);
  font-weight: 700;
}

.site-home-design-form input,
.site-home-design-form textarea {
  width: 100%;
  padding: 9px 11px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 7px;
  resize: vertical;
}

.site-home-design-form input {
  min-height: 42px;
}

.site-home-design-form button {
  min-height: 42px;
  color: #fff;
  background: linear-gradient(135deg, var(--blue), var(--teal));
  border-color: transparent;
  border-radius: 7px;
}

.hero-copy [data-home-hero-eyebrow],
.hero-copy [data-home-hero-title],
.hero-copy [data-home-hero-description] {
  overflow-wrap: anywhere;
}

.hero-copy [data-home-hero-title] {
  white-space: pre-line;
}

.site-settings-card-heading h3,
.site-settings-card-heading p,
.site-setting-copy h4,
.site-setting-copy p,
.site-setting-editor-heading h4,
.site-setting-editor-heading p,
.site-theme-group h4,
.site-theme-confirm-bar p {
  margin: 0;
}

.site-settings-card-heading p,
.site-setting-copy p,
.site-setting-editor-heading p {
  color: var(--muted);
  font-size: 13px;
}

.site-setting-list {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.site-setting-row {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  min-width: 0;
  padding: 12px;
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.site-setting-preview {
  display: grid;
  width: 64px;
  height: 52px;
  place-items: center;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 7px;
}

.site-setting-list-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.site-setting-default-mark {
  color: var(--blue);
  font-size: 13px;
  font-weight: 800;
}

.site-setting-copy {
  min-width: 0;
}

.site-setting-copy p,
.site-setting-text-preview {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.site-setting-actions,
.site-setting-editor-actions,
.site-theme-confirm-bar > div {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.site-setting-actions button,
.site-setting-editor-actions button,
.site-theme-confirm-bar button {
  min-height: 36px;
  padding: 7px 12px;
  border-radius: 7px;
}

.site-setting-edit,
.site-setting-editor-actions button[type="submit"],
#confirmSiteTheme {
  color: #fff;
  background: linear-gradient(135deg, var(--blue), var(--teal));
  border-color: transparent;
}

.site-setting-delete {
  color: #bd3030;
  background: #fff7f7;
  border-color: #efb0b0;
}

.site-setting-cancel,
.site-theme-cancel {
  color: var(--ink);
  background: var(--surface);
  border-color: var(--line);
}

.site-setting-editor {
  display: grid;
  gap: 12px;
  margin-top: 14px;
  padding: 14px;
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.site-setting-editor[hidden] {
  display: none;
}

.site-setting-editor label {
  display: grid;
  gap: 7px;
  color: var(--ink);
  font-weight: 700;
}

.site-setting-editor input {
  width: 100%;
  min-height: 42px;
  padding: 9px 11px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 7px;
}

.site-setting-editor small {
  color: var(--muted);
  font-weight: 400;
}

.site-setting-editor-message {
  margin: 0;
  padding: 9px 10px;
  color: #17645c;
  background: #edf9f6;
  border: 1px solid #c5e8df;
  border-radius: 7px;
  font-size: 13px;
}

.site-setting-editor-message[hidden] {
  display: none;
}

.site-setting-editor-message.is-error {
  color: #a32828;
  background: #fff4f4;
  border-color: #efc2c2;
}

.site-setting-editor-actions button:disabled {
  cursor: wait;
  opacity: 0.62;
}

.site-theme-groups {
  display: grid;
  gap: 14px;
  max-height: min(600px, calc(100vh - 300px));
  margin-top: 14px;
  padding-right: 6px;
  overflow-y: auto;
  scrollbar-gutter: stable;
}

.site-theme-group {
  display: grid;
  gap: 8px;
}

.site-theme-group h4 {
  color: var(--muted);
  font-size: 13px;
}

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

.site-theme-card {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-height: 70px;
  padding: 10px;
  color: var(--ink);
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.site-theme-card:hover,
.site-theme-card.is-selected {
  border-color: var(--blue);
  background: var(--soft);
  box-shadow: inset 0 0 0 1px var(--blue);
}

.site-theme-card > span:nth-child(2) {
  display: grid;
  min-width: 0;
}

.site-theme-card small {
  color: var(--muted);
}

.site-theme-card em {
  position: absolute;
  top: 5px;
  right: 6px;
  color: var(--blue);
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}

.site-theme-swatches {
  display: flex;
  gap: 3px;
}

.site-theme-swatches i {
  display: block;
  width: 17px;
  height: 38px;
  background: var(--theme-swatch);
  border-radius: 999px;
}

.site-theme-confirm-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.site-theme-confirm-bar button:disabled {
  cursor: not-allowed;
  opacity: 0.52;
}

.site-settings-status {
  margin: 0;
  padding: 10px 12px;
  color: #17645c;
  background: #edf9f6;
  border: 1px solid #c5e8df;
  border-radius: 7px;
}

.site-settings-status.is-error {
  color: #a32828;
  background: #fff4f4;
  border-color: #efc2c2;
}

@media (max-width: 1180px) {
  .site-settings-layout {
    grid-template-columns: 1fr;
  }

  .site-theme-groups {
    max-height: 620px;
  }
}

@media (max-width: 680px) {
  .site-information-card,
  .site-home-design-card,
  .site-theme-settings-card {
    padding: 12px;
  }

  .site-setting-row {
    grid-template-columns: 52px minmax(0, 1fr);
  }

  .site-setting-preview {
    width: 52px;
    height: 46px;
  }

  .site-setting-actions {
    grid-column: 1 / -1;
    justify-content: flex-end;
  }

  .site-theme-grid {
    grid-template-columns: 1fr;
  }

  .site-theme-groups {
    max-height: 560px;
  }
}

/* ADMIN virtual recharge. */
.virtual-recharge-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 18px 0 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

.virtual-recharge-tab {
  width: 100%;
  min-height: 40px;
  padding: 8px 16px;
  color: var(--muted);
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: 8px;
  font-weight: 700;
}

.virtual-recharge-tab:hover,
.virtual-recharge-tab:focus-visible {
  color: var(--blue);
  border-color: #8ebce8;
  outline: none;
}

.virtual-recharge-tab:focus-visible {
  box-shadow: 0 0 0 3px rgba(37, 121, 201, 0.2);
}

.virtual-recharge-tab.is-active {
  color: #fff;
  background: linear-gradient(135deg, var(--blue), var(--teal));
  border-color: transparent;
}

.virtual-recharge-tab-panel[hidden] {
  display: none;
}

.virtual-recharge-card,
.virtual-recharge-history-card,
.virtual-recharge-password-card {
  min-width: 0;
  padding: 18px;
}

.virtual-recharge-password-card,
.virtual-recharge-history-card {
  margin-top: 16px;
}

.virtual-recharge-history-card {
  padding: 0;
  overflow: hidden;
}

.virtual-recharge-history-summary {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  min-height: 72px;
  padding: 16px 18px;
  cursor: pointer;
  list-style: none;
}

.virtual-recharge-history-summary::-webkit-details-marker {
  display: none;
}

.virtual-recharge-history-summary-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.virtual-recharge-history-summary-copy strong {
  color: var(--text);
  font-size: 16px;
}

.virtual-recharge-history-summary-copy small {
  color: var(--muted);
  font-size: 13px;
}

.virtual-recharge-history-summary-action {
  display: inline-flex;
  flex: 0 0 auto;
  gap: 8px;
  align-items: center;
  color: #1768c5;
  font-size: 13px;
  font-weight: 800;
}

.virtual-recharge-history-summary-action i {
  width: 9px;
  height: 9px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 160ms ease;
}

.virtual-recharge-history-card .when-expanded {
  display: none;
}

.virtual-recharge-history-card[open] .when-collapsed {
  display: none;
}

.virtual-recharge-history-card[open] .when-expanded {
  display: inline;
}

.virtual-recharge-history-card[open] .virtual-recharge-history-summary-action i {
  transform: rotate(225deg) translate(-2px, -2px);
}

.virtual-recharge-history-summary:hover,
.virtual-recharge-history-summary:focus-visible {
  background: #f5f9ff;
}

.virtual-recharge-history-summary:focus-visible {
  outline: 3px solid rgba(36, 110, 210, 0.2);
  outline-offset: -3px;
}

.virtual-recharge-history-card[open] .virtual-recharge-history-summary {
  border-bottom: 1px solid var(--line);
}

.virtual-recharge-tab-panel > .virtual-recharge-card {
  margin-top: 0;
}

.virtual-recharge-card-heading h3,
.virtual-recharge-card-heading p,
.virtual-recharge-status,
.virtual-recharge-search-message,
.virtual-recharge-password-message,
.virtual-recharge-phone-message,
.virtual-recharge-password-dialog-card h3,
.virtual-recharge-password-dialog-card p {
  margin: 0;
}

.virtual-recharge-password-card .virtual-recharge-card-heading {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
}

.virtual-recharge-card-heading p,
.virtual-recharge-search-message {
  color: var(--muted);
  font-size: 13px;
}

.virtual-recharge-blocker {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  margin-top: 12px;
  padding: 12px 14px;
  color: #842222;
  background: #fff2f2;
  border: 1px solid #efb6b6;
  border-radius: 8px;
}

.virtual-recharge-blocker[hidden] { display: none; }
.virtual-recharge-blocker span { min-width: 0; }
.virtual-recharge-blocker button {
  min-height: 38px;
  padding: 8px 13px;
  color: #fff;
  background: linear-gradient(135deg, var(--blue), var(--teal));
  border-color: transparent;
  border-radius: 7px;
  white-space: nowrap;
}

@media (max-width: 760px) {
  .virtual-recharge-blocker { grid-template-columns: 1fr; }
  .virtual-recharge-blocker button { width: 100%; }
}

.virtual-recharge-form,
.virtual-recharge-search,
.virtual-recharge-password-form {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}

.virtual-recharge-password-form {
  grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(132px, auto);
  align-items: end;
}

.virtual-recharge-phone-setting {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.virtual-recharge-phone-setting h4,
.virtual-recharge-phone-setting p,
.virtual-recharge-phone-message {
  margin: 0;
}

.virtual-recharge-phone-setting p {
  color: var(--muted);
  font-size: 13px;
}

.virtual-recharge-phone-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: end;
  margin-top: 12px;
}

.virtual-recharge-phone-form label {
  display: grid;
  gap: 7px;
  color: var(--ink);
  font-weight: 700;
}

.virtual-recharge-phone-form input {
  width: 100%;
  min-height: 42px;
  padding: 9px 11px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 7px;
}

.virtual-recharge-phone-form button,
.virtual-recharge-sms-send-row button,
.virtual-recharge-sms-code-row > button {
  min-height: 42px;
  padding: 9px 14px;
  color: #fff;
  background: linear-gradient(135deg, var(--blue), var(--teal));
  border-color: transparent;
  border-radius: 7px;
}

.virtual-recharge-phone-state {
  padding: 7px 11px;
  color: #8a5b00;
  background: #fff8e6;
  border: 1px solid #efd18b;
  border-radius: 999px;
  font-size: 13px;
}

.virtual-recharge-phone-state.is-set {
  color: #17645c;
  background: #edf9f6;
  border-color: #c5e8df;
}

.virtual-recharge-phone-message {
  min-height: 20px;
  margin-top: 9px;
  color: #17645c;
  font-size: 13px;
}

.virtual-recharge-search {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
}

.virtual-recharge-form[hidden] {
  display: none;
}

.virtual-recharge-form label,
.virtual-recharge-search label,
.virtual-recharge-password-form label,
.virtual-recharge-password-dialog-card label {
  display: grid;
  gap: 7px;
  color: var(--ink);
  font-weight: 700;
}

.virtual-recharge-form input,
.virtual-recharge-form select,
.virtual-recharge-search input,
.virtual-recharge-password-form input,
.virtual-recharge-password-dialog-card input {
  width: 100%;
  min-height: 42px;
  padding: 9px 11px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 7px;
}

.virtual-recharge-form button,
.virtual-recharge-search button,
.virtual-recharge-password-form button,
.virtual-recharge-password-dialog-actions button:first-child {
  min-height: 42px;
  padding: 9px 14px;
  color: #fff;
  background: linear-gradient(135deg, var(--blue), var(--teal));
  border-color: transparent;
  border-radius: 7px;
}

/* Keep the three inline password controls quiet and centered, then reserve
   the far-right action for the final submission step. */
.virtual-recharge-password-form .password-field input {
  padding-right: 42px !important;
}

.virtual-recharge-password-form .password-toggle {
  right: 8px;
  width: 32px;
  min-width: 32px;
  height: 28px;
  min-height: 28px;
  border-radius: 6px;
  color: #526071;
  background: #eef4fb;
  border-color: #d5e1ef;
  box-shadow: none;
}

.virtual-recharge-password-form .password-toggle svg {
  width: 18px;
  height: 18px;
  stroke-width: 2;
}

.virtual-recharge-password-form .password-toggle:hover,
.virtual-recharge-password-form .password-toggle:focus-visible,
.virtual-recharge-password-form .password-toggle.is-visible {
  color: #fff;
  background: linear-gradient(135deg, var(--blue), var(--teal));
  border-color: transparent;
}

.virtual-recharge-password-form > button[type="submit"] {
  min-width: 132px;
  white-space: nowrap;
}

.virtual-recharge-password-state {
  padding: 7px 11px;
  color: #8a5b00;
  background: #fff8e6;
  border: 1px solid #efd18b;
  border-radius: 999px;
  font-size: 13px;
}

.virtual-recharge-password-state.is-set {
  color: #17645c;
  background: #edf9f6;
  border-color: #c5e8df;
}

.virtual-recharge-password-message {
  min-height: 20px;
  margin-top: 9px;
  color: #17645c;
  font-size: 13px;
}

.virtual-recharge-password-message.is-error,
.virtual-recharge-phone-message.is-error,
#virtualRechargePasswordVerifyMessage.is-error {
  color: #a32828;
}

#virtualRechargePasswordSetupDialogMessage {
  min-height: 20px;
  color: var(--muted);
  font-size: 13px;
}

#virtualRechargePasswordSetupDialogMessage.is-error { color: #a32828; }

.virtual-recharge-password-dialog[hidden] {
  display: none;
}

.virtual-recharge-password-dialog {
  position: fixed;
  z-index: 1200;
  inset: 0;
  display: grid;
  padding: 20px;
  place-items: center;
  background: rgba(17, 28, 47, 0.48);
  backdrop-filter: blur(3px);
}

.virtual-recharge-password-dialog-card {
  display: grid;
  gap: 14px;
  width: min(420px, 100%);
  padding: 22px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 24px 70px rgba(17, 28, 47, 0.28);
}

.virtual-recharge-password-dialog-card > div:first-child {
  display: grid;
  gap: 5px;
}

.virtual-recharge-sms-send-row,
.virtual-recharge-sms-code-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
}

.virtual-recharge-sms-send-row {
  align-items: center;
  padding: 10px 11px;
  color: var(--muted);
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: 7px;
  font-size: 13px;
}

.virtual-recharge-sms-send-row strong {
  color: var(--ink);
}

.virtual-recharge-sms-code-row > button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.virtual-recharge-password-dialog-card > div:first-child p,
#virtualRechargePasswordVerifyMessage {
  color: var(--muted);
  font-size: 13px;
}

.virtual-recharge-password-dialog-actions {
  display: flex;
  gap: 9px;
  justify-content: flex-end;
}

.virtual-recharge-password-dialog-actions button {
  min-height: 40px;
  padding: 8px 15px;
  border-radius: 7px;
}

.virtual-recharge-password-dialog-actions button:last-child {
  color: var(--ink);
  background: var(--surface);
  border-color: var(--line);
}

.payment-password-dialog {
  position: fixed;
  z-index: 45000;
  inset: 0;
  display: grid;
  align-items: center;
  justify-items: center;
  padding: 18px;
  background: rgba(17, 28, 47, 0.55);
  backdrop-filter: blur(4px);
  isolation: isolate;
  pointer-events: auto;
}

.payment-password-dialog-card {
  display: grid;
  gap: 16px;
  width: min(440px, 100%);
  padding: 24px;
  background: #fff;
  border: 1px solid rgba(45, 109, 196, 0.18);
  border-radius: 15px;
  box-shadow: 0 28px 80px rgba(17, 28, 47, 0.32);
}

.payment-password-dialog-card header,
.payment-password-dialog-form {
  display: grid;
  gap: 8px;
}

.payment-password-dialog-card header span {
  color: #0d8d84;
  font-size: 13px;
  font-weight: 800;
}

.payment-password-dialog-card h2,
.payment-password-dialog-card p {
  margin: 0;
}

.payment-password-dialog-card h2 {
  color: var(--ink);
  font-size: 22px;
}

.payment-password-dialog-card header p,
.payment-password-dialog-message {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.payment-password-dialog-form label {
  color: var(--ink);
  font-weight: 800;
}

.payment-password-dialog-form input {
  position: relative;
  z-index: 1;
  pointer-events: auto;
  touch-action: manipulation;
  -webkit-user-select: text;
  user-select: text;
  width: 100%;
  min-height: 48px;
  padding: 10px 13px;
  color: var(--ink);
  background: #fbfdff;
  border: 1px solid #b8cbe3;
  border-radius: 9px;
  font-size: 18px;
  letter-spacing: 0.3em;
  outline: none;
  transition: border-color 150ms ease, box-shadow 150ms ease, background-color 150ms ease;
}

.payment-password-dialog-form input:focus-visible {
  background: #fff;
  border-color: #2579c9;
  box-shadow: 0 0 0 4px rgba(37, 121, 201, 0.14);
}

.payment-password-dialog-message {
  min-height: 20px;
}

.payment-password-dialog-message.is-error {
  color: #b42318;
}

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

.payment-password-dialog-actions button {
  min-width: 96px;
  min-height: 42px;
  padding: 9px 16px;
  border-radius: 8px;
  font-weight: 800;
  cursor: pointer;
  transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
}

.payment-password-dialog-actions button[type="submit"] {
  color: #fff;
  background: linear-gradient(135deg, #1aa39a 0%, #246ed2 100%);
  border-color: transparent;
  box-shadow: 0 9px 20px rgba(32, 112, 181, 0.2);
}

.payment-password-dialog-actions button.ghost {
  color: #43546c;
  background: #f7f9fc;
  border-color: #cbd7e6;
}

.payment-password-dialog-actions button:hover {
  transform: translateY(-1px);
}

.payment-password-dialog-actions button:active {
  transform: translateY(0);
}

.payment-password-dialog-actions button:focus-visible {
  outline: 3px solid rgba(37, 121, 201, 0.24);
  outline-offset: 2px;
}

.virtual-recharge-form input:disabled,
.virtual-recharge-form button:disabled {
  cursor: not-allowed;
  opacity: 0.56;
}

.virtual-recharge-user-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 14px;
  padding: 11px 12px;
  color: var(--ink);
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: 7px;
  font-size: 13px;
}

.virtual-recharge-user-summary strong {
  color: var(--blue);
}

.virtual-recharge-search-message {
  min-height: 20px;
  margin-top: 10px;
}

.virtual-recharge-search-message.is-error,
.virtual-recharge-status.is-error {
  color: #a32828;
}

.virtual-recharge-history {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 14px 18px 18px;
  overflow-x: auto;
  overflow-y: visible;
  scrollbar-gutter: stable;
}

.virtual-recharge-history-item {
  display: grid;
  grid-template-columns: minmax(145px, 1fr) minmax(360px, 2fr) auto;
  gap: 10px;
  align-items: center;
  min-width: 820px;
  min-height: 52px;
  padding: 5px 10px;
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: 7px;
}

.virtual-recharge-history-actions {
  display: flex;
  gap: 6px;
  align-items: center;
  justify-content: flex-end;
  white-space: nowrap;
}

.virtual-recharge-history-actions button {
  min-height: 30px;
  padding: 4px 9px;
  border-radius: 7px;
  font-size: 13px;
}

.virtual-recharge-history-actions button:not(.virtual-recharge-delete-button) {
  color: #1768c5;
  background: #f3f8ff;
  border-color: #b9d5f5;
}

.virtual-recharge-history-actions .virtual-recharge-delete-button {
  color: #c62828;
  background: #fff7f7;
  border-color: #efb3b3;
}

.virtual-recharge-history-amount {
  color: var(--teal);
  font-size: 17px;
  white-space: nowrap;
}

.virtual-recharge-history-item span,
.virtual-recharge-history-item small {
  display: block;
  color: var(--muted);
  line-height: 1.25;
}

.virtual-recharge-history-item > div:nth-child(2) {
  min-width: 0;
}

.virtual-recharge-history-item > div:nth-child(2) small {
  white-space: normal;
}

.virtual-recharge-status {
  margin-top: 16px;
  padding: 10px 12px;
  color: #17645c;
  background: #edf9f6;
  border: 1px solid #c5e8df;
  border-radius: 7px;
}

@media (max-width: 900px) {
  .virtual-recharge-password-form {
    grid-template-columns: 1fr;
  }

  .virtual-recharge-password-form > button[type="submit"] {
    width: 100%;
  }

  .virtual-recharge-phone-form,
  .virtual-recharge-sms-send-row,
  .virtual-recharge-sms-code-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .virtual-recharge-history-summary {
    align-items: flex-start;
    min-height: 0;
    padding: 14px;
  }

  .virtual-recharge-history-summary-action {
    margin-top: 2px;
  }

  .virtual-recharge-history-summary-action > span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .virtual-recharge-history {
    padding: 12px 14px 14px;
  }

  .virtual-recharge-tab {
    padding-inline: 8px;
  }

  .virtual-recharge-search {
    grid-template-columns: 1fr;
  }
}

/* Unified course and ecommerce cart */
[data-global-cart-count] {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  margin-left: 4px;
  padding: 0 5px;
  color: #fff;
  border-radius: 999px;
  background: #ef3f46;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  vertical-align: top;
}

[data-global-cart-count][hidden] {
  display: none;
}

.unified-cart-page {
  min-height: 100vh;
  color: #17243a;
  background: #f3f7fc;
}

.unified-cart-page .auth-topbar-nav a.active {
  color: #1768c5;
  box-shadow: inset 0 -3px 0 #2992e9;
}

.unified-cart-main {
  width: min(1280px, calc(100% - 40px));
  margin: 0 auto;
  padding: 28px 0 64px;
}

.unified-cart-hero {
  display: flex;
  gap: 30px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
  padding: 24px 28px;
  border: 1px solid #dbe6f2;
  border-radius: 14px;
  background: linear-gradient(135deg, #fff 0%, #f4f9ff 65%, #eefaf8 100%);
  box-shadow: 0 10px 30px rgba(34, 63, 96, 0.06);
}

.unified-cart-hero > div:first-child > span {
  color: #128b86;
  font-size: 13px;
  font-weight: 900;
}

.unified-cart-hero h1 {
  margin: 5px 0 7px;
  font-size: clamp(27px, 3vw, 40px);
  letter-spacing: -1px;
}

.unified-cart-hero p {
  max-width: 680px;
  margin: 0;
  color: #62728a;
  font-size: 14px;
}

.unified-cart-steps {
  display: flex;
  align-items: center;
  min-width: 420px;
}

.unified-cart-steps strong {
  display: grid;
  gap: 5px;
  justify-items: center;
  color: #506179;
  font-size: 12px;
  white-space: nowrap;
}

.unified-cart-steps i {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  color: #fff;
  border-radius: 50%;
  background: linear-gradient(135deg, #2874d4, #1ca59e);
  font-size: 13px;
  font-style: normal;
}

.unified-cart-steps span {
  flex: 1;
  height: 1px;
  margin: 0 8px 20px;
  background: #c8d8e9;
}

.unified-cart-status {
  min-height: 0;
  margin-bottom: 12px;
  padding: 0;
  color: #17645c;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
}

.unified-cart-status:not(:empty) {
  padding: 11px 14px;
  border: 1px solid #bee5dd;
  background: #eefaf7;
}

.unified-cart-status:has([data-recover-paid-product-cart]) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.unified-cart-status [data-recover-paid-product-cart] {
  flex: 0 0 auto;
  min-height: 40px;
  padding: 8px 16px;
  color: #fff;
  border: 1px solid transparent;
  border-radius: 9px;
  background: linear-gradient(135deg, #1aa39a 0%, #246ed2 100%);
  box-shadow: 0 8px 18px rgba(32, 112, 181, 0.18);
  font-weight: 800;
  cursor: pointer;
}

.unified-cart-status [data-recover-paid-product-cart]:hover {
  transform: translateY(-1px);
}

.unified-cart-status [data-recover-paid-product-cart]:focus-visible {
  outline: 3px solid rgba(37, 121, 201, 0.24);
  outline-offset: 2px;
}

@media (max-width: 720px) {
  .unified-cart-status:has([data-recover-paid-product-cart]) {
    align-items: stretch;
    flex-direction: column;
  }

  .unified-cart-status [data-recover-paid-product-cart] {
    width: 100%;
  }
}

.unified-cart-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 18px;
  align-items: start;
}

.unified-cart-content {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.unified-cart-tabs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
  width: 100%;
  padding: 7px;
  border: 1px solid #dce7f3;
  border-radius: 11px;
  background: #fff;
}

.unified-cart-tabs button {
  width: 100%;
  min-height: 42px;
  padding: 0 20px;
  color: #52647d;
  border: 0;
  border-radius: 8px;
  background: transparent;
  font-weight: 900;
}

.unified-cart-tabs button.active {
  color: #fff;
  background: linear-gradient(135deg, #2b70d0, #20a59d);
  box-shadow: 0 7px 18px rgba(35, 116, 190, 0.18);
}

.unified-cart-tabs b {
  display: inline-grid;
  place-items: center;
  min-width: 19px;
  height: 19px;
  margin-left: 4px;
  padding: 0 5px;
  border-radius: 999px;
  background: rgba(38, 112, 198, 0.1);
  font-size: 11px;
}

.unified-cart-tabs button.active b {
  background: rgba(255, 255, 255, 0.2);
}

.unified-cart-block {
  position: relative;
  overflow: hidden;
  border: 1px solid #dce7f3;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(35, 64, 96, 0.045);
}

.unified-cart-block::before {
  position: absolute;
  z-index: 2;
  top: 0;
  right: 0;
  left: 0;
  height: 4px;
  content: "";
  background: linear-gradient(90deg, #2b70d0, #20a59d);
}

.unified-cart-block.is-service::before {
  background: linear-gradient(90deg, #7657d8, #2d70d2);
}

.unified-cart-block.is-product::before {
  background: linear-gradient(90deg, #19a291, #78c879);
}

.unified-cart-block-head {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  min-height: 58px;
  padding: 9px 18px;
  border-bottom: 1px solid #e4ebf4;
  background: #f8fbff;
}

.unified-cart-block-head label {
  display: flex;
  gap: 10px;
  align-items: center;
}

.unified-cart-block-head input,
.unified-cart-select input {
  width: 17px;
  height: 17px;
  accent-color: #2074cf;
}

.unified-cart-block-head small {
  color: #78879c;
}

.unified-cart-block-head > a {
  color: #1768be;
  font-size: 12px;
  font-weight: 800;
}

.unified-cart-type-icon {
  display: grid;
  place-items: center;
  width: 29px;
  height: 29px;
  color: #fff;
  border-radius: 8px;
  background: #2672ce;
  font-size: 12px;
  font-weight: 900;
}

.unified-cart-type-icon.is-product {
  background: #1c9b93;
}

.unified-cart-type-icon.is-service {
  background: linear-gradient(135deg, #7657d8, #2d70d2);
}

.unified-cart-items {
  max-height: 560px;
  overflow-y: auto;
}

.unified-cart-item {
  display: grid;
  grid-template-columns: 26px 72px minmax(220px, 1fr) 105px 122px 45px;
  gap: 13px;
  align-items: center;
  min-height: 116px;
  padding: 16px 18px;
  border-bottom: 1px solid #e8eef5;
}

.unified-cart-item:last-child {
  border-bottom: 0;
}

.unified-cart-thumb {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  overflow: hidden;
  color: #1769c2;
  border: 1px solid #d3e2f1;
  border-radius: 10px;
  background: linear-gradient(135deg, #edf6ff, #effbf8);
  font-size: 21px;
  font-weight: 900;
}

.unified-cart-thumb img {
  width: 100%;
  height: 100%;
  padding: 4px;
  object-fit: contain;
  background: #fff;
}

.unified-cart-thumb.is-course {
  color: #fff;
  background: linear-gradient(145deg, #2c72d2, #22a29b);
  font-size: 14px;
}

.unified-cart-thumb.is-service {
  color: #fff;
  background: linear-gradient(145deg, #7657d8, #2d70d2);
  font-size: 14px;
}

.unified-cart-item-info {
  min-width: 0;
}

.unified-cart-item-info > span {
  color: #168c85;
  font-size: 11px;
  font-weight: 900;
}

.unified-cart-item-info h3 {
  margin: 5px 0;
  overflow: hidden;
  font-size: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.unified-cart-item-info p {
  margin: 0;
  overflow-wrap: anywhere;
  color: #687991;
  font-size: 12px;
  line-height: 1.6;
}

.unified-cart-unit-price {
  display: grid;
  gap: 5px;
}

.unified-cart-unit-price small {
  color: #7b899c;
  font-size: 11px;
}

.unified-cart-unit-price strong {
  color: #d62f36;
  font-size: 17px;
}

.unified-cart-fixed-quantity {
  color: #52637a;
  text-align: center;
}

.unified-cart-quantity {
  display: grid;
  grid-template-columns: 32px 50px 32px;
  overflow: hidden;
  border: 1px solid #cbd9e8;
  border-radius: 7px;
}

.unified-cart-quantity button,
.unified-cart-quantity input {
  width: 100%;
  height: 34px;
  padding: 0;
  border: 0;
  background: #fff;
  text-align: center;
}

.unified-cart-quantity button {
  color: #1768be;
  background: #f2f7fd;
  font-size: 17px;
}

.unified-cart-quantity input {
  border-right: 1px solid #dce5ef;
  border-left: 1px solid #dce5ef;
}

.unified-cart-delete {
  padding: 0;
  color: #d43c44;
  border: 0;
  background: transparent;
  font-size: 12px;
}

.unified-cart-empty,
.unified-cart-all-empty {
  display: grid;
  gap: 8px;
  justify-items: center;
  padding: 42px 20px;
  color: #66778e;
  text-align: center;
}

.unified-cart-empty strong {
  color: #273851;
  font-size: 18px;
}

.unified-cart-empty p,
.unified-cart-all-empty p {
  margin: 0;
}

.unified-cart-empty a,
.unified-cart-all-empty a {
  padding: 8px 14px;
  color: #1768be;
  border: 1px solid #bcd5ef;
  border-radius: 7px;
  background: #fff;
  font-weight: 800;
}

.unified-cart-all-empty {
  border: 1px solid #dce7f3;
  border-radius: 12px;
  background: #fff;
}

.unified-cart-all-empty > span {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  color: #fff;
  border-radius: 50%;
  background: linear-gradient(135deg, #2b73d0, #20a29b);
  font-size: 23px;
  font-weight: 900;
}

.unified-cart-all-empty h2 {
  margin: 5px 0 0;
}

.unified-cart-all-empty > div {
  display: flex;
  gap: 9px;
}

.unified-cart-receiver {
  display: grid;
  gap: 14px;
  padding: 18px;
  border-top: 1px solid #dfe8f2;
  background: #fbfdff;
}

.unified-cart-receiver-head {
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
}

.unified-cart-receiver-head > div {
  display: grid;
  gap: 3px;
}

.unified-cart-receiver-head span {
  color: #118a83;
  font-size: 11px;
  font-weight: 900;
}

.unified-cart-receiver-head button {
  min-height: 36px;
  padding: 0 13px;
  color: #1768be;
  border: 1px solid #b9d2ed;
  border-radius: 7px;
  background: #fff;
  font-weight: 800;
}

.unified-cart-receiver-paste,
.unified-cart-receiver-grid label {
  display: grid;
  gap: 6px;
  color: #56677e;
  font-size: 12px;
  font-weight: 800;
}

.unified-cart-receiver-paste textarea {
  min-height: 66px;
  resize: vertical;
}

.unified-cart-receiver textarea,
.unified-cart-receiver input {
  width: 100%;
  padding: 10px 11px;
  border: 1px solid #cbd9e8;
  border-radius: 7px;
  background: #fff;
  font: inherit;
}

.unified-cart-receiver-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 11px;
}

.unified-cart-receiver-grid > label {
  grid-column: span 3;
}

.unified-cart-receiver-grid .is-location {
  grid-column: span 2;
}

.unified-cart-receiver-grid .is-address {
  grid-column: 1 / -1;
}

.unified-cart-shipping-status {
  padding: 10px 12px;
  color: #566a84;
  border: 1px solid #d9e4f0;
  border-radius: 7px;
  background: #f3f7fc;
  font-size: 12px;
}

.unified-cart-shipping-status.is-ready {
  color: #126b61;
  border-color: #bde5dc;
  background: #edf9f6;
}

.unified-cart-shipping-status.is-error {
  color: #b4333b;
  border-color: #f1c4c7;
  background: #fff4f4;
}

.unified-cart-summary {
  position: sticky;
  top: 18px;
  overflow: hidden;
  border: 1px solid #d9e5f1;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 12px 32px rgba(34, 62, 94, 0.08);
}

.unified-cart-summary-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 17px 18px;
  border-bottom: 1px solid #e3ebf4;
  background: #f8fbff;
}

.unified-cart-summary-head span {
  font-size: 17px;
  font-weight: 900;
}

.unified-cart-summary-head strong {
  color: #168c85;
  font-size: 12px;
}

.unified-cart-summary dl {
  display: grid;
  gap: 11px;
  margin: 0;
  padding: 17px 18px;
}

.unified-cart-summary dl > div {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  color: #62728a;
  font-size: 13px;
}

.unified-cart-summary dd {
  margin: 0;
  color: #26374e;
  font-weight: 800;
}

.unified-cart-summary .is-subtotal {
  position: relative;
  padding-bottom: 11px;
  border-bottom: 2px solid #5e92cf;
}

.unified-cart-summary .is-subtotal::after {
  position: absolute;
  right: 0;
  bottom: -3px;
  left: 0;
  height: 3px;
  content: "";
  border-radius: 999px;
  background: linear-gradient(90deg, #1f6ed4, #14a39b);
}

.unified-cart-summary .is-total {
  margin-top: 4px;
  padding-top: 13px;
  border-top: 1px solid #dfe8f2;
}

.unified-cart-summary .is-total dd {
  color: #d62f36;
  font-size: 22px;
}

.unified-cart-balance {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  margin: 0 18px;
  padding: 11px 12px;
  color: #52657e;
  border-radius: 8px;
  background: #eef7ff;
  font-size: 12px;
}

.unified-cart-balance strong {
  color: #1767bd;
  font-size: 15px;
}

.unified-cart-summary-actions {
  display: grid;
  gap: 9px;
  padding: 16px 18px 8px;
}

.unified-cart-summary-actions button {
  min-height: 43px;
  color: #fff;
  border: 0;
  border-radius: 8px;
  background: linear-gradient(135deg, #2b70d0, #20a59d);
  font-weight: 900;
}

.unified-cart-summary-actions button + button {
  background: linear-gradient(135deg, #15938b, #2773cf);
}

.unified-cart-summary-actions button:disabled {
  color: #8c9aae;
  background: #e5ebf2;
  cursor: not-allowed;
}

.unified-cart-summary > p {
  margin: 0;
  padding: 8px 18px 18px;
  color: #7a899c;
  font-size: 11px;
  line-height: 1.6;
}

@media (max-width: 980px) {
  .unified-cart-hero {
    align-items: flex-start;
    flex-direction: column;
  }

  .unified-cart-steps {
    width: 100%;
    min-width: 0;
  }

  .unified-cart-layout {
    grid-template-columns: 1fr;
  }

  .unified-cart-summary {
    position: static;
  }
}

@media (max-width: 720px) {
  .unified-cart-main {
    width: min(100% - 20px, 1280px);
    padding-top: 14px;
  }

  .unified-cart-hero {
    padding: 19px;
  }

  .unified-cart-steps strong {
    font-size: 10px;
  }

  .unified-cart-tabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }

  .unified-cart-tabs button {
    padding: 0 6px;
    font-size: 12px;
  }

  .unified-cart-item {
    grid-template-columns: 24px 64px minmax(0, 1fr) 40px;
    gap: 10px;
  }

  .unified-cart-thumb {
    width: 64px;
    height: 64px;
  }

  .unified-cart-unit-price,
  .unified-cart-fixed-quantity,
  .unified-cart-quantity {
    grid-column: 3;
  }

  .unified-cart-delete {
    grid-column: 4;
    grid-row: 1 / span 2;
  }

  .unified-cart-item-info h3 {
    white-space: normal;
  }

  .unified-cart-receiver-grid {
    grid-template-columns: 1fr;
  }

  .unified-cart-receiver-grid .is-address {
    grid-column: 1;
  }

  .unified-cart-receiver-grid > label,
  .unified-cart-receiver-grid .is-location {
    grid-column: 1;
  }
}

@media (max-width: 480px) {
  .unified-cart-steps {
    display: none;
  }

  .unified-cart-item {
    grid-template-columns: 22px 52px minmax(0, 1fr);
    padding: 13px 12px;
  }

  .unified-cart-thumb {
    width: 52px;
    height: 52px;
  }

  .unified-cart-unit-price,
  .unified-cart-fixed-quantity,
  .unified-cart-quantity {
    grid-column: 3;
  }

  .unified-cart-delete {
    grid-column: 3;
    grid-row: auto;
    justify-self: start;
  }

  .unified-cart-block-head {
    align-items: flex-start;
    flex-direction: column;
    padding: 13px;
  }
}

/* Global dense-tab colour system.
   Scope is deliberately limited to navigation/tab groups: layout, spacing,
   typography and all business action buttons remain unchanged. Theme tokens
   make the palette follow every seasonal and branded website version. */
body :is(
  .tabs,
  .strict-tabs,
  .role-tabs,
  .command-menu,
  .leaderboard-tabs,
  .online-service-tabs,
  .auth-tabs,
  .classroom-board-tabs,
  .service-management-tabs,
  .message-publish-tabs,
  .message-manage-tabs,
  .user-account-tabs,
  .task-record-tabs,
  .course-stage-tabs,
  .career-sub-tabs,
  .point-exchange-tabs,
  .personal-center-tabs,
  .personal-promotion-tabs,
  .teacher-work-tabs,
  .profile-sub-tabs,
  .factory-tabs,
  .factory-admin-tabs,
  .factory-product-tabs,
  .factory-platform-record-tabs,
  .business-guide-tabs,
  .ecommerce-category-bar,
  .opportunities-tabs,
  .declaration-tabs,
  .product-publish-tabs,
  .physical-product-tabs,
  .unified-cart-tabs
) > :is(button, a) {
  --ui-tab-accent: var(--teal);
  --ui-tab-end: var(--blue);
  color: color-mix(in srgb, var(--ui-tab-accent) 76%, #172033) !important;
  background: color-mix(in srgb, var(--ui-tab-accent) 7%, #fff) !important;
  border-color: color-mix(in srgb, var(--ui-tab-accent) 24%, #dbe4ef) !important;
}

body :is(
  .tabs, .strict-tabs, .role-tabs, .command-menu, .leaderboard-tabs,
  .online-service-tabs, .auth-tabs, .classroom-board-tabs,
  .service-management-tabs, .message-publish-tabs, .message-manage-tabs,
  .user-account-tabs, .task-record-tabs, .course-stage-tabs, .career-sub-tabs,
  .point-exchange-tabs, .personal-center-tabs, .personal-promotion-tabs,
  .teacher-work-tabs, .profile-sub-tabs, .factory-tabs, .factory-admin-tabs,
  .factory-product-tabs, .factory-platform-record-tabs, .business-guide-tabs,
  .ecommerce-category-bar, .opportunities-tabs, .declaration-tabs,
  .product-publish-tabs, .physical-product-tabs, .unified-cart-tabs
) > :is(button, a):nth-child(5n + 2) {
  --ui-tab-accent: var(--blue);
  --ui-tab-end: var(--violet);
}

body :is(
  .tabs, .strict-tabs, .role-tabs, .command-menu, .leaderboard-tabs,
  .online-service-tabs, .auth-tabs, .classroom-board-tabs,
  .service-management-tabs, .message-publish-tabs, .message-manage-tabs,
  .user-account-tabs, .task-record-tabs, .course-stage-tabs, .career-sub-tabs,
  .point-exchange-tabs, .personal-center-tabs, .personal-promotion-tabs,
  .teacher-work-tabs, .profile-sub-tabs, .factory-tabs, .factory-admin-tabs,
  .factory-product-tabs, .factory-platform-record-tabs, .business-guide-tabs,
  .ecommerce-category-bar, .opportunities-tabs, .declaration-tabs,
  .product-publish-tabs, .physical-product-tabs, .unified-cart-tabs
) > :is(button, a):nth-child(5n + 3) {
  --ui-tab-accent: var(--violet);
  --ui-tab-end: var(--blue);
}

body :is(
  .tabs, .strict-tabs, .role-tabs, .command-menu, .leaderboard-tabs,
  .online-service-tabs, .auth-tabs, .classroom-board-tabs,
  .service-management-tabs, .message-publish-tabs, .message-manage-tabs,
  .user-account-tabs, .task-record-tabs, .course-stage-tabs, .career-sub-tabs,
  .point-exchange-tabs, .personal-center-tabs, .personal-promotion-tabs,
  .teacher-work-tabs, .profile-sub-tabs, .factory-tabs, .factory-admin-tabs,
  .factory-product-tabs, .factory-platform-record-tabs, .business-guide-tabs,
  .ecommerce-category-bar, .opportunities-tabs, .declaration-tabs,
  .product-publish-tabs, .physical-product-tabs, .unified-cart-tabs
) > :is(button, a):nth-child(5n + 4) {
  --ui-tab-accent: color-mix(in srgb, var(--teal) 72%, #16a34a);
  --ui-tab-end: var(--teal);
}

body :is(
  .tabs, .strict-tabs, .role-tabs, .command-menu, .leaderboard-tabs,
  .online-service-tabs, .auth-tabs, .classroom-board-tabs,
  .service-management-tabs, .message-publish-tabs, .message-manage-tabs,
  .user-account-tabs, .task-record-tabs, .course-stage-tabs, .career-sub-tabs,
  .point-exchange-tabs, .personal-center-tabs, .personal-promotion-tabs,
  .teacher-work-tabs, .profile-sub-tabs, .factory-tabs, .factory-admin-tabs,
  .factory-product-tabs, .factory-platform-record-tabs, .business-guide-tabs,
  .ecommerce-category-bar, .opportunities-tabs, .declaration-tabs,
  .product-publish-tabs, .physical-product-tabs, .unified-cart-tabs
) > :is(button, a):nth-child(5n) {
  --ui-tab-accent: var(--coral);
  --ui-tab-end: var(--gold);
}

body :is(
  .tabs, .strict-tabs, .role-tabs, .command-menu, .leaderboard-tabs,
  .online-service-tabs, .auth-tabs, .classroom-board-tabs,
  .service-management-tabs, .message-publish-tabs, .message-manage-tabs,
  .user-account-tabs, .task-record-tabs, .course-stage-tabs, .career-sub-tabs,
  .point-exchange-tabs, .personal-center-tabs, .personal-promotion-tabs,
  .teacher-work-tabs, .profile-sub-tabs, .factory-tabs, .factory-admin-tabs,
  .factory-product-tabs, .factory-platform-record-tabs, .business-guide-tabs,
  .ecommerce-category-bar, .opportunities-tabs, .declaration-tabs,
  .product-publish-tabs, .physical-product-tabs, .unified-cart-tabs
) > :is(button, a):is(:hover, :focus-visible):not(.active, .is-active, [aria-selected="true"], [aria-current="page"]) {
  color: var(--ui-tab-accent) !important;
  background: color-mix(in srgb, var(--ui-tab-accent) 12%, #fff) !important;
  border-color: color-mix(in srgb, var(--ui-tab-accent) 38%, #dbe4ef) !important;
}

body :is(
  .tabs, .strict-tabs, .role-tabs, .command-menu, .leaderboard-tabs,
  .online-service-tabs, .auth-tabs, .classroom-board-tabs,
  .service-management-tabs, .message-publish-tabs, .message-manage-tabs,
  .user-account-tabs, .task-record-tabs, .course-stage-tabs, .career-sub-tabs,
  .point-exchange-tabs, .personal-center-tabs, .personal-promotion-tabs,
  .teacher-work-tabs, .profile-sub-tabs, .factory-tabs, .factory-admin-tabs,
  .factory-product-tabs, .factory-platform-record-tabs, .business-guide-tabs,
  .ecommerce-category-bar, .opportunities-tabs, .declaration-tabs,
  .product-publish-tabs, .physical-product-tabs, .unified-cart-tabs
) > :is(button, a):is(.active, .is-active, [aria-selected="true"], [aria-current="page"]) {
  color: #fff !important;
  background: linear-gradient(135deg, var(--ui-tab-accent), var(--ui-tab-end)) !important;
  border-color: transparent !important;
}

/* ADMIN task management: full-width publishing forms and monthly record tables. */
.admin-system-body [data-command-panel="taskManage"] .task-admin-grid {
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
}

.admin-system-body [data-command-panel="taskManage"] .task-form-card {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: 100%;
  align-items: stretch;
}

.admin-system-body [data-command-panel="taskManage"] .task-form-section {
  align-content: start;
  min-height: 100%;
  padding: 18px;
}

.admin-system-body [data-command-panel="taskManage"] .task-form-section .role-form {
  height: 100%;
  align-content: start;
}

.admin-system-body [data-command-panel="taskManage"] .task-form-section .role-form > button:last-child {
  margin-top: auto;
}

@media (min-width: 1181px) {
  .admin-system-body [data-command-panel="taskManage"] .task-form-section {
    grid-template-rows: auto minmax(0, 1fr);
  }

  .admin-system-body [data-command-panel="taskManage"] #seniorTaskForm,
  .admin-system-body [data-command-panel="taskManage"] #teacherNoticeForm {
    display: flex;
    flex-direction: column;
  }

  .admin-system-body [data-command-panel="taskManage"] #seniorTaskForm > label:last-of-type,
  .admin-system-body [data-command-panel="taskManage"] #teacherNoticeForm > label:last-of-type {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
  }

  .admin-system-body [data-command-panel="taskManage"] #seniorTaskForm > label:last-of-type textarea,
  .admin-system-body [data-command-panel="taskManage"] #teacherNoticeForm > label:last-of-type textarea {
    flex: 1 1 auto;
  }
}

.admin-system-body [data-command-panel="taskManage"] .task-record-card {
  width: 100%;
  padding: 20px;
}

.admin-system-body [data-command-panel="taskManage"] .task-record-intro,
.admin-system-body [data-command-panel="taskManage"] .task-period-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.admin-system-body [data-command-panel="taskManage"] .task-record-intro {
  padding-bottom: 14px;
  border-bottom: 1px solid #e1eaf5;
}

.admin-system-body [data-command-panel="taskManage"] .task-record-intro span {
  display: block;
  margin-bottom: 4px;
  color: var(--teal);
  font-size: 12px;
  font-weight: 900;
}

.admin-system-body [data-command-panel="taskManage"] .task-record-intro p {
  max-width: 560px;
  margin: 0;
  color: #637089;
  font-size: 13px;
  line-height: 1.6;
  text-align: right;
}

.admin-system-body [data-command-panel="taskManage"] .task-period-stack {
  display: grid;
  gap: 16px;
}

.admin-system-body [data-command-panel="taskManage"] .task-period-card {
  min-width: 0;
  overflow: hidden;
  background: #fff;
  border: 1px solid #dce7f4;
  border-radius: 10px;
}

.admin-system-body [data-command-panel="taskManage"] .task-period-heading {
  padding: 14px 16px;
  background: linear-gradient(135deg, #f5fbff, #f7fffd);
  border-bottom: 1px solid #dce7f4;
}

.admin-system-body [data-command-panel="taskManage"] .task-period-heading h4 {
  margin: 5px 0 0;
  color: #172033;
  font-size: 15px;
}

.admin-system-body [data-command-panel="taskManage"] .task-period-heading > strong {
  flex: 0 0 auto;
  padding: 5px 10px;
  color: #176c79;
  background: #e9f8f6;
  border-radius: 999px;
  font-size: 12px;
}

.admin-system-body [data-command-panel="taskManage"] .task-period-tag {
  display: inline-flex;
  padding: 3px 8px;
  color: #fff;
  background: linear-gradient(135deg, var(--blue), var(--teal));
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
}

.admin-system-body [data-command-panel="taskManage"] .task-period-tag.history {
  background: linear-gradient(135deg, #667085, #475467);
}

.admin-system-body [data-command-panel="taskManage"] .task-record-table-scroll {
  max-height: 300px;
  overflow: auto;
}

.admin-system-body [data-command-panel="taskManage"] .task-record-table {
  width: 100%;
  min-width: 1120px;
  border-collapse: collapse;
  table-layout: auto;
}

.admin-system-body [data-command-panel="taskManage"] .senior-task-record-table {
  min-width: 1040px;
}

.admin-system-body [data-command-panel="taskManage"] .task-record-table th,
.admin-system-body [data-command-panel="taskManage"] .task-record-table td {
  padding: 11px 13px;
  color: #42526a;
  border-bottom: 1px solid #e7edf5;
  font-size: 12px;
  line-height: 1.45;
  text-align: left;
  vertical-align: middle;
  white-space: nowrap;
}

.admin-system-body [data-command-panel="taskManage"] .task-record-table th {
  position: sticky;
  z-index: 1;
  top: 0;
  color: #344054;
  background: #f6f8fc;
  font-weight: 900;
}

.admin-system-body [data-command-panel="taskManage"] .task-record-table tbody tr:hover {
  background: #f8fbff;
}

.admin-system-body [data-command-panel="taskManage"] .task-record-table tbody tr:last-child td {
  border-bottom: 0;
}

.admin-system-body [data-command-panel="taskManage"] .task-record-empty td {
  padding: 26px 16px;
  color: #7a879d;
  text-align: center;
}

.admin-system-body [data-command-panel="taskManage"] .task-record-points {
  color: #0c9d8a;
  font-weight: 900;
}

.admin-system-body [data-command-panel="taskManage"] .task-record-toolbar {
  display: grid;
  grid-template-columns: minmax(170px, 220px) auto minmax(170px, 220px) minmax(180px, auto);
  align-items: end;
  justify-content: end;
  gap: 10px;
  padding: 12px 14px;
  background: #f8fbff;
  border: 1px solid #dce7f4;
  border-radius: 9px;
}

.admin-system-body [data-command-panel="taskManage"] .task-record-toolbar label {
  display: grid;
  gap: 5px;
  color: #475467;
  font-size: 12px;
  font-weight: 800;
}

.admin-system-body [data-command-panel="taskManage"] .task-record-toolbar input,
.admin-system-body [data-command-panel="taskManage"] .task-record-toolbar button {
  min-height: 40px;
}

.admin-system-body [data-command-panel="taskManage"] .task-record-toolbar input {
  width: 100%;
  padding: 0 11px;
  color: #172033;
  background: #fff;
  border: 1px solid #cad8e9;
  border-radius: 7px;
}

.admin-system-body [data-command-panel="taskManage"] .task-record-toolbar button {
  padding: 0 18px;
  color: #fff;
  background: linear-gradient(135deg, var(--teal), var(--blue));
  border: 0;
  border-radius: 7px;
  font-weight: 900;
  cursor: pointer;
}

.admin-system-body [data-command-panel="taskManage"] .task-record-date-separator {
  padding-bottom: 9px;
  color: #7a879d;
  font-size: 12px;
  font-weight: 800;
}

.admin-system-body [data-command-panel="taskManage"] .task-current-month-scroll {
  max-height: 445px;
  overflow: auto;
  border-top: 4px solid #ff6f61;
  scrollbar-gutter: stable;
}

.admin-system-body [data-command-panel="taskManage"] .task-month-history-list {
  display: grid;
  gap: 10px;
  max-height: min(680px, 68vh);
  padding: 2px;
  overflow-y: auto;
  scrollbar-gutter: stable;
}

.admin-system-body [data-command-panel="taskManage"] .task-history-month {
  min-width: 0;
  overflow: hidden;
  background: #fff;
  border: 1px solid #dce7f4;
  border-top: 4px solid #79cf00;
  border-radius: 9px;
}

.admin-system-body [data-command-panel="taskManage"] .task-history-month > summary {
  display: grid;
  grid-template-columns: minmax(130px, 1fr) auto auto minmax(230px, 1.4fr) auto;
  align-items: center;
  gap: 14px;
  min-height: 52px;
  padding: 10px 14px;
  color: #475467;
  background: #f8fbff;
  cursor: pointer;
  list-style: none;
}

.admin-system-body [data-command-panel="taskManage"] .task-history-month > summary::-webkit-details-marker {
  display: none;
}

.admin-system-body [data-command-panel="taskManage"] .task-history-month > summary:hover,
.admin-system-body [data-command-panel="taskManage"] .task-history-month[open] > summary {
  background: #eef7ff;
}

.admin-system-body [data-command-panel="taskManage"] .task-history-month[open] > summary {
  border-bottom: 1px solid #dce7f4;
}

.admin-system-body [data-command-panel="taskManage"] .task-history-month > summary strong {
  color: #172033;
  font-size: 14px;
}

.admin-system-body [data-command-panel="taskManage"] .task-history-month > summary span {
  padding: 4px 9px;
  color: #176c79;
  background: #e9f8f6;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.admin-system-body [data-command-panel="taskManage"] .task-history-month > summary small {
  overflow: hidden;
  color: #667085;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-system-body [data-command-panel="taskManage"] .task-history-month > summary b {
  color: #1765c1;
  font-size: 12px;
  white-space: nowrap;
}

.admin-system-body [data-command-panel="taskManage"] .task-history-month[open] > summary b {
  font-size: 0;
}

.admin-system-body [data-command-panel="taskManage"] .task-history-month[open] > summary b::after {
  content: "收起明细";
  font-size: 12px;
}

.admin-system-body [data-command-panel="taskManage"] .task-history-table-scroll {
  max-height: 390px;
}

.admin-system-body [data-command-panel="taskManage"] .task-history-empty {
  display: grid;
  min-height: 86px;
  place-items: center;
  padding: 18px;
  color: #7a879d;
  background: #f8fbff;
  border: 1px dashed #cad8e9;
  border-radius: 9px;
  font-size: 13px;
}

/* ADMIN recruitment enterprise: monthly resume, innovation project and job-post records. */
.admin-system-body [data-command-panel="recruitmentEnterprise"] {
  min-width: 0;
}

.recruitment-enterprise-tabs,
.recruitment-enterprise-subtabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 14px;
}

.unified-cart-summary .is-service-subtotal {
  position: relative;
  padding-bottom: 11px;
  border-bottom: 2px solid #7657d8;
}

.unified-cart-summary .is-service-subtotal::after {
  position: absolute;
  right: 0;
  bottom: -3px;
  left: 0;
  height: 3px;
  content: "";
  border-radius: 999px;
  background: linear-gradient(90deg, #7657d8, #2d70d2);
}

.recruitment-enterprise-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.recruitment-enterprise-tabs button {
  width: 100%;
}

.recruitment-enterprise-tabs button,
.recruitment-enterprise-subtabs button,
.recruitment-enterprise-detail button {
  min-height: 38px;
  padding: 8px 15px;
  border: 1px solid #cfdcec;
  border-radius: 8px;
  color: #43536b;
  background: #f7faff;
  font-weight: 800;
  cursor: pointer;
}

.recruitment-enterprise-tabs button.active,
.recruitment-enterprise-subtabs button.active {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(135deg, var(--teal), var(--blue));
  box-shadow: 0 8px 18px rgba(31, 98, 210, 0.16);
}

.recruitment-enterprise-subtabs {
  display: grid;
  padding: 11px;
  border: 1px solid #e0e9f4;
  border-radius: 10px;
  background: #fbfdff;
}

.recruitment-enterprise-subtabs.is-student {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.recruitment-enterprise-subtabs.is-professional {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.recruitment-enterprise-subtabs button {
  width: 100%;
}

.recruitment-enterprise-tabs .recruitment-main-tab-settings {
  color: #b35318;
  border-color: #efc7a8;
  background: #fff7ef;
}

.recruitment-enterprise-tabs .recruitment-main-tab-student,
.recruitment-enterprise-subtabs .recruitment-subtab-internship {
  color: #087f7b;
  border-color: #9bded9;
  background: #ecfbf9;
}

.recruitment-enterprise-tabs .recruitment-main-tab-professional,
.recruitment-enterprise-subtabs .recruitment-subtab-fulltime {
  color: #1f62c9;
  border-color: #b9d2fb;
  background: #f0f6ff;
}

.recruitment-enterprise-tabs .recruitment-main-tab-enterprise,
.recruitment-enterprise-subtabs .recruitment-subtab-innovation {
  color: #6846c7;
  border-color: #d1c4f5;
  background: #f7f3ff;
}

.recruitment-enterprise-tabs .recruitment-main-tab-settings.active {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(135deg, #e17a32, #d45345);
}

.recruitment-enterprise-tabs .recruitment-main-tab-student.active,
.recruitment-enterprise-subtabs .recruitment-subtab-internship.active {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(135deg, #1ea99f, #2181d8);
}

.recruitment-enterprise-tabs .recruitment-main-tab-professional.active,
.recruitment-enterprise-subtabs .recruitment-subtab-fulltime.active {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(135deg, #2c7ddd, #285ccb);
}

.recruitment-enterprise-tabs .recruitment-main-tab-enterprise.active,
.recruitment-enterprise-subtabs .recruitment-subtab-innovation.active {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(135deg, #7b5add, #4b70d7);
}

.recruitment-records-card,
.recruitment-settings-card,
.recruitment-enterprise-detail {
  padding: 20px;
  border: 1px solid #dce7f3;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(21, 32, 51, 0.04);
}

.recruitment-settings-card + .recruitment-settings-card {
  margin-top: 18px;
}

.recruitment-innovation-settings-card .recruitment-settings-import label {
  grid-template-rows: auto minmax(160px, 1fr);
}

.recruitment-innovation-settings-card .recruitment-settings-import textarea {
  min-height: 160px;
}

.recruitment-innovation-settings-card .recruitment-settings-library {
  display: flex;
  min-height: 100%;
  flex-direction: column;
}

.recruitment-innovation-settings-card .recruitment-innovation-category-list {
  flex: 1;
  max-height: none;
  min-height: 0;
  margin-top: 14px;
}

.recruitment-records-intro,
.recruitment-period-heading,
.recruitment-enterprise-detail > div:first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.recruitment-records-intro {
  padding-bottom: 14px;
  border-bottom: 1px solid #e2eaf4;
}

.recruitment-records-intro span,
.recruitment-enterprise-detail span {
  color: var(--teal);
  font-size: 12px;
  font-weight: 900;
}

.recruitment-records-intro h3,
.recruitment-period-heading h4,
.recruitment-enterprise-detail h4 {
  margin: 4px 0 0;
  color: #172033;
}

.recruitment-records-intro p {
  max-width: 520px;
  margin: 0;
  color: #637089;
  text-align: right;
}

.recruitment-period-stack { display: grid; gap: 16px; margin-top: 16px; }
.recruitment-period-card { overflow: hidden; border: 1px solid #dce7f4; border-radius: 10px; }
.recruitment-period-card.is-current { border-top: 4px solid #ff6f61; }
.recruitment-period-card.is-history { border-top: 4px solid #79cf00; }
.recruitment-period-heading { padding: 13px 16px; background: linear-gradient(135deg, #f5fbff, #f7fffd); border-bottom: 1px solid #dce7f4; }
.recruitment-period-heading span { display: inline-flex; padding: 3px 8px; border-radius: 999px; color: #fff; background: linear-gradient(135deg, var(--teal), var(--blue)); font-size: 11px; font-weight: 900; }
.recruitment-period-heading span.history { background: linear-gradient(135deg, #667085, #475467); }
.recruitment-period-heading > strong { padding: 5px 10px; border-radius: 999px; color: #176c79; background: #e9f8f6; font-size: 12px; }
.recruitment-table-scroll { max-height: 320px; overflow: auto; }
.recruitment-table-scroll table { width: 100%; min-width: 960px; border-collapse: collapse; }
.recruitment-table-scroll th, .recruitment-table-scroll td { padding: 11px 13px; color: #42526a; border-bottom: 1px solid #e7edf5; text-align: left; white-space: nowrap; }
.recruitment-table-scroll th { position: sticky; z-index: 1; top: 0; color: #344054; background: #f8fbff; font-size: 12px; font-weight: 900; }
.recruitment-table-scroll tbody tr { cursor: pointer; }
.recruitment-table-scroll tbody tr:hover, .recruitment-table-scroll tbody tr:focus { outline: none; background: #edf7ff; }
.recruitment-table-scroll tbody tr.is-preview { background: #fffaf0; }
.recruitment-table-scroll tbody tr.is-preview:hover, .recruitment-table-scroll tbody tr.is-preview:focus { background: #fff3d6; }
.recruitment-table-scroll .recruitment-table-empty-row { cursor: default; }
.recruitment-table-scroll .recruitment-table-empty-row:hover { background: transparent; }
.recruitment-table-scroll .recruitment-table-empty-row td { padding: 22px 13px; color: #7a879d; text-align: center; }
.recruitment-table-scroll tbody tr:last-child td { border-bottom: 0; }
.recruitment-empty { padding: 32px 16px; color: #7a879d; text-align: center; }
.recruitment-enterprise-detail-overlay {
  position: fixed;
  z-index: 1300;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(20, 36, 58, 0.28);
  backdrop-filter: blur(2px);
}

.recruitment-settings-layout {
  display: grid;
  grid-template-columns: minmax(300px, 0.78fr) minmax(0, 1.62fr);
  gap: 16px;
  margin-top: 16px;
}

.recruitment-settings-import,
.recruitment-settings-library {
  min-width: 0;
  padding: 16px;
  border: 1px solid #dce7f3;
  border-radius: 10px;
  background: #f9fbfe;
}

.recruitment-settings-import {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.recruitment-settings-import h4,
.recruitment-settings-import p,
.recruitment-settings-library h4,
.recruitment-settings-library p {
  margin: 0;
}

.recruitment-settings-import > p,
.recruitment-settings-summary small {
  color: #68778e;
  line-height: 1.6;
}

.recruitment-settings-import label {
  display: grid;
  flex: 1;
  min-height: 0;
  grid-template-rows: auto minmax(280px, 1fr);
  gap: 7px;
  color: #344054;
  font-weight: 800;
}

.recruitment-settings-import textarea {
  width: 100%;
  height: 100%;
  min-height: 280px;
  padding: 12px;
  resize: vertical;
  border: 1px solid #cad8e8;
  border-radius: 8px;
  background: #fff;
  line-height: 1.65;
}

.recruitment-settings-import button[type="submit"] {
  min-height: 42px;
  margin-top: 0;
  margin-bottom: 14px;
  color: #fff;
  border: 0;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--teal), var(--blue));
  font-weight: 900;
  cursor: pointer;
}

.recruitment-settings-message {
  padding: 10px 12px;
  color: #17645c;
  border: 1px solid #bde1d9;
  border-radius: 8px;
  background: #eefaf7;
  line-height: 1.55;
}

.admin-job-review-sync-message {
  margin: 12px 0;
}

.admin-job-review-sync-message.is-pending {
  color: #7a4d00;
  border-color: #f0d28a;
  background: #fff8df;
}

.admin-job-review-sync-message.is-error {
  color: #a12622;
  border-color: #f3bbb7;
  background: #fff1f0;
}

.recruitment-settings-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #dce7f3;
}

.recruitment-settings-summary > div {
  display: grid;
  gap: 4px;
}

.recruitment-settings-summary span {
  color: var(--teal);
  font-size: 12px;
  font-weight: 900;
}

.recruitment-settings-browser {
  display: grid;
  grid-template-columns: minmax(190px, 0.72fr) minmax(0, 1.28fr);
  gap: 14px;
  margin-top: 14px;
}

.recruitment-settings-categories {
  display: grid;
  align-content: start;
  gap: 7px;
  max-height: 500px;
  padding-right: 5px;
  overflow-y: auto;
}

.recruitment-settings-category-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 7px;
  align-items: center;
}

.recruitment-settings-category-row.is-delete-mode {
  grid-template-columns: 22px minmax(0, 1fr);
}

.recruitment-settings-category-row > input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: #2876d4;
  cursor: pointer;
}

.recruitment-settings-categories button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 38px;
  padding: 8px 10px;
  color: #35445c;
  border: 1px solid #d6e1ef;
  border-radius: 7px;
  background: #fff;
  text-align: left;
  cursor: pointer;
}

.recruitment-settings-categories button.active {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(135deg, #1ea99f, #2876d4);
}

.recruitment-settings-categories b {
  min-width: 26px;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.2);
  text-align: center;
  font-size: 11px;
}

.recruitment-settings-jobs {
  position: relative;
  min-width: 0;
  max-height: 500px;
  min-height: 300px;
  padding: 14px 14px 64px;
  overflow-y: auto;
  border: 1px solid #dce7f3;
  border-radius: 9px;
  background: #fff;
}

.recruitment-settings-jobs > div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.recruitment-settings-job-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 7px 10px;
  color: #28547e;
  border: 1px solid #cfe0f3;
  border-radius: 999px;
  background: #f3f8fe;
  font-size: 12px;
  font-weight: 800;
}

.recruitment-settings-job-chip.is-delete-mode {
  padding-right: 18px;
  border-color: #efb0b0;
  background: #fff7f7;
}

.recruitment-settings-job-chip > button {
  position: absolute;
  top: -7px;
  right: -7px;
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  padding: 0;
  color: #fff;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #df3f4c;
  box-shadow: 0 2px 7px rgba(132, 25, 36, 0.28);
  font: 900 14px/1 Arial, sans-serif;
  cursor: pointer;
}

.recruitment-settings-delete-actions {
  position: absolute;
  right: 14px;
  bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.recruitment-settings-delete-actions > button {
  min-width: 96px;
  min-height: 38px;
  padding: 0 18px;
  color: #28547e;
  border: 1px solid #c6d9ef;
  border-radius: 7px;
  background: #f5f9fe;
  font-weight: 900;
  cursor: pointer;
}

.recruitment-settings-delete-actions > .recruitment-settings-delete-toggle {
  color: #c43d48;
  border: 1px solid #eaa4aa;
  background: #fff6f6;
}

.recruitment-settings-delete-toggle.is-active {
  color: #fff;
  border-color: #cf3341;
  background: #cf3341;
}

.recruitment-settings-delete-toggle:disabled {
  color: #9aa6b6;
  border-color: #d7dee8;
  background: #f2f5f8;
  cursor: not-allowed;
}
.recruitment-enterprise-detail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  width: min(980px, 100%);
  max-height: min(78vh, 760px);
  gap: 16px;
  margin: 0;
  overflow-y: auto;
  border-color: #8ac6f7;
  box-shadow: 0 24px 70px rgba(18, 42, 72, 0.3);
}
.recruitment-enterprise-detail dl { display: grid; grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; }
.recruitment-enterprise-detail dl > div { padding: 11px 12px; border: 1px solid #e1eaf4; border-radius: 8px; background: #fbfdff; }
.recruitment-enterprise-detail dl > div.is-wide { grid-column: 1 / -1; }
.recruitment-enterprise-detail dt { margin-bottom: 5px; color: #667085; font-size: 12px; font-weight: 800; }
.recruitment-enterprise-detail dd { margin: 0; color: #243247; line-height: 1.55; white-space: pre-wrap; word-break: break-word; }

@media (max-width: 760px) {
  .ecommerce-product-preview-content { grid-template-columns: 1fr; }
  .recruitment-enterprise-tabs,
  .recruitment-enterprise-subtabs.is-student,
  .recruitment-enterprise-subtabs.is-professional { grid-template-columns: 1fr; }
  .recruitment-enterprise-detail-overlay { align-items: end; padding: 12px; }
  .recruitment-enterprise-detail { max-height: 86vh; }
  .recruitment-enterprise-detail dl { grid-template-columns: 1fr; }
  .recruitment-settings-layout,
  .recruitment-settings-browser { grid-template-columns: 1fr; }
  .recruitment-settings-summary { align-items: flex-start; flex-direction: column; }
  .recruitment-settings-categories { max-height: 240px; }
}

/* ADMIN communications management keeps tasks and messages under one dedicated entry. */
.admin-system-body .communications-management-tabs {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 12px;
}

.admin-system-body .communications-management-panel {
  min-width: 0;
}

.admin-system-body .communications-management-panel[hidden] {
  display: none !important;
}

.admin-system-body .information-management-tabs {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 12px;
}

.admin-system-body .information-management-tabs:has(> button.role-hidden) {
  grid-template-columns: minmax(0, 1fr);
}

.admin-system-body .information-management-tabs + .service-management-tabs,
.admin-system-body .information-management-tabs + .message-publish-tabs,
.admin-system-body .information-management-tabs + .message-manage-tabs {
  margin-top: 0;
}

.admin-system-body .information-management-panel[hidden] {
  display: none !important;
}

/* Course-board settings are the single source for course setup and teacher authorization. */
.admin-system-body .course-board-settings-card {
  align-content: start;
  min-width: 0;
}

.admin-system-body .course-board-settings-list {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

.admin-system-body .course-board-settings-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid #d7e5f1;
  border-radius: 10px;
  background: #f8fbfe;
}

.admin-system-body .course-board-settings-row div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.admin-system-body .course-board-settings-row strong {
  color: #173a58;
}

.admin-system-body .course-board-settings-row span {
  color: #6c7e90;
  font-size: 12px;
  line-height: 1.45;
}

.admin-system-body .course-board-settings-row button {
  min-width: 64px;
}

.admin-system-body .course-board-settings-actions {
  display: flex;
  grid-template-columns: none;
  align-items: center;
  gap: 8px;
}

.admin-system-body .course-board-order-controls {
  display: inline-flex;
  gap: 4px;
  opacity: 0.28;
  transition: opacity 160ms ease;
}

.admin-system-body .course-board-settings-row:hover .course-board-order-controls,
.admin-system-body .course-board-order-controls:focus-within {
  opacity: 1;
}

.admin-system-body .course-board-order-controls button {
  width: 30px;
  min-width: 30px;
  min-height: 30px;
  padding: 0;
  color: #2868ac;
  background: #edf5ff;
  border: 1px solid #c5daf0;
  border-radius: 6px;
}

.admin-system-body .course-board-order-controls button:disabled {
  opacity: 0.25;
  cursor: default;
}

.admin-system-body .course-board-settings-row.is-pricing-only {
  background: #fffaf1;
  border-color: #eadcbc;
}

.admin-system-body #courseBoardSettingsMessage.is-error {
  color: #c62828;
  font-weight: 700;
}

@media (max-width: 760px) {
  .admin-system-body .course-board-settings-row {
    grid-template-columns: 1fr;
  }

  .admin-system-body .course-board-settings-row button {
    width: 100%;
  }

  .admin-system-body .course-board-settings-actions {
    width: 100%;
  }

  .admin-system-body .course-board-order-controls {
    flex: 1;
    opacity: 0.72;
  }

  .admin-system-body .course-board-order-controls button {
    width: 42px;
  }
}

/* ADMIN role management: four focused tabs retain the original forms and records. */
.admin-system-body .role-management-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 16px;
  padding: 8px;
  border: 1px solid #dce7f4;
  border-radius: 10px;
  background: #fbfdff;
}

.admin-system-body .role-management-tabs button {
  display: inline-flex;
  width: 100%;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding: 9px 12px;
  color: #475467;
  border: 1px solid #cfdcec;
  border-radius: 8px;
  background: #f7faff;
  font-weight: 800;
  cursor: pointer;
}

.admin-system-body .role-management-tabs button.active {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(135deg, var(--teal), var(--blue));
  box-shadow: 0 8px 18px rgba(31, 98, 210, 0.16);
}

@media (max-width: 900px) {
  .admin-system-body .role-management-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 540px) {
  .admin-system-body .role-management-tabs {
    grid-template-columns: 1fr;
  }
}

/* Keep account creation above identity assignment at every responsive width. */
.admin-system-body [data-command-panel="roleManage"][data-role-management-view="accounts"]
  .role-management-tools[data-role-management-group="accounts"]
  .role-account-create-card {
  order: 1;
}

.admin-system-body [data-command-panel="roleManage"][data-role-management-view="accounts"]
  .role-management-tools[data-role-management-group="accounts"]
  .role-account-assign-card {
  order: 2;
}

@media (min-width: 1181px) {
  /* Account view: keep the account form visibly at the upper-left, independent of the role-view grid. */
  .admin-system-body [data-command-panel="roleManage"][data-role-management-view="accounts"]
    .role-management-tools[data-role-management-group="accounts"] {
    display: grid !important;
    grid-column: 1;
    grid-row: 1;
    gap: 14px;
    align-self: start;
  }

  .admin-system-body [data-command-panel="roleManage"][data-role-management-view="accounts"]
    .role-account-create-card {
    grid-column: 1;
    grid-row: 1;
  }

  .admin-system-body [data-command-panel="roleManage"][data-role-management-view="accounts"]
    .role-account-assign-card {
    grid-column: 1;
    grid-row: 2;
  }

  .admin-system-body [data-command-panel="roleManage"][data-role-management-view="accounts"]
    .role-authorization-directory-card {
    grid-column: 2;
    grid-row: 1;
    align-self: stretch;
    height: 100%;
    max-height: none;
  }
}

@media (max-width: 760px) {
  .recruitment-records-intro { align-items: flex-start; flex-direction: column; }
  .recruitment-records-intro p { max-width: none; text-align: left; }
  .recruitment-enterprise-detail dl { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 1180px) {
  .admin-system-body [data-command-panel="taskManage"] .task-form-card {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-system-body [data-command-panel="taskManage"] .task-form-section:last-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  .admin-system-body [data-command-panel="taskManage"] .task-form-card {
    grid-template-columns: minmax(0, 1fr);
  }

  .admin-system-body [data-command-panel="taskManage"] .task-form-section:last-child {
    grid-column: auto;
  }

  .admin-system-body [data-command-panel="taskManage"] .task-record-intro {
    align-items: flex-start;
    flex-direction: column;
  }

  .admin-system-body [data-command-panel="taskManage"] .task-record-intro p {
    max-width: none;
    text-align: left;
  }

  .admin-system-body [data-command-panel="taskManage"] .task-record-toolbar {
    grid-template-columns: minmax(0, 1fr);
    justify-content: stretch;
  }

  .admin-system-body [data-command-panel="taskManage"] .task-record-date-separator {
    display: none;
  }

  .admin-system-body [data-command-panel="taskManage"] .task-history-month > summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .admin-system-body [data-command-panel="taskManage"] .task-history-month > summary strong,
  .admin-system-body [data-command-panel="taskManage"] .task-history-month > summary small,
  .admin-system-body [data-command-panel="taskManage"] .task-history-month > summary b {
    grid-column: 1 / -1;
  }
}
/* 招聘企业与学员岗位沟通，仅作用于招聘沟通组件。 */
.recruitment-chat-layout {
  display: grid;
  grid-template-columns: minmax(220px, 30%) minmax(0, 1fr);
  min-height: 520px;
  border: 1px solid #d8e3f2;
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
}

.recruitment-chat-list {
  padding: 12px;
  border-right: 1px solid #d8e3f2;
  background: #f6f9fd;
  max-height: 620px;
  overflow-y: auto;
}

.recruitment-chat-list-row {
  position: relative;
  margin-bottom: 8px;
}

.recruitment-chat-list-item {
  width: 100%;
  display: grid;
  gap: 5px;
  margin-bottom: 0;
  padding: 12px;
  text-align: left;
  color: #17233b;
  background: #fff;
  border: 1px solid #d8e3f2;
  border-radius: 10px;
}

.recruitment-chat-list-row:has(.recruitment-chat-list-action) .recruitment-chat-list-item {
  padding-bottom: 42px;
}

.recruitment-chat-list-action {
  position: absolute;
  right: 9px;
  bottom: 8px;
  z-index: 1;
  display: flex;
  gap: 6px;
}

.recruitment-chat-list-action button {
  min-height: 27px;
  padding: 4px 9px;
  color: #155fb8;
  background: #fff;
  border: 1px solid #b8d1ef;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.recruitment-chat-list-row.active .recruitment-chat-list-action button {
  color: #155fb8;
  background: rgba(255, 255, 255, 0.96);
}

.recruitment-chat-list-action .recruitment-chat-delete {
  color: #b54747;
  border-color: #efc2c2;
  background: #fff8f8;
}

.recruitment-chat-list-action .recruitment-chat-delete:hover {
  color: #fff;
  border-color: #d64545;
  background: #d64545;
}

.recruitment-chat-list-item::before {
  content: "";
  width: 34px;
  height: 34px;
  grid-row: 1 / span 3;
  border-radius: 50%;
  background: linear-gradient(135deg, #22a79f, #3371dc);
  box-shadow: inset 0 0 0 7px rgba(255,255,255,.82);
}

.recruitment-chat-list-item strong,
.recruitment-chat-list-item span,
.recruitment-chat-list-item small { grid-column: 2; }
.recruitment-chat-list-item strong { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.recruitment-chat-list-item strong b { display:inline-grid; min-width:20px; height:20px; padding:0 6px; place-items:center; border-radius:999px; color:#fff; background:#df2f3d; font-size:11px; }

.recruitment-chat-list-item.active {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(135deg, #1fa5a0, #316bd8);
}

.recruitment-chat-main {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.recruitment-chat-main > header {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
  border-bottom: 1px solid #d8e3f2;
}

.recruitment-chat-main > header div,
.recruitment-chat-main > header span {
  display: grid;
  gap: 4px;
}

.recruitment-chat-main > header em {
  font-style: normal;
  color: #176b67;
}

.recruitment-chat-parties {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 12px 14px 0;
}

.recruitment-chat-party {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 11px 13px;
  border: 1px solid #d8e5f3;
  border-radius: 10px;
  background: #f9fbff;
}

.recruitment-chat-party span { color: #52657d; font-size: 12px; font-weight: 900; }
.recruitment-chat-party strong { overflow: hidden; color: #111827; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
.recruitment-chat-party small { overflow: hidden; color: #52657d; text-overflow: ellipsis; white-space: nowrap; }
.recruitment-chat-party.is-learner { border-left: 4px solid #25a69d; }
.recruitment-chat-party.is-recruiter { border-left: 4px solid #3776d4; }

.recruitment-chat-messages {
  flex: 1;
  max-height: 430px;
  padding: 18px;
  overflow-y: auto;
  background: #fbfcff;
}

.recruitment-chat-bubble {
  width: fit-content;
  max-width: 78%;
  margin: 0 0 12px;
  padding: 10px 13px;
  border: 1px solid #d8e3f2;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 3px 10px rgba(44, 74, 112, 0.06);
}

.recruitment-chat-bubble strong { display: block; color: #17233b; font-size: 13px; font-weight: 900; }
.recruitment-chat-bubble small { display: block; color: #667892; font-size: 12px; }

.recruitment-chat-bubble.is-own {
  margin-left: auto;
  color: #fff;
  border-color: transparent;
  background: #2b72d4;
}

.recruitment-chat-bubble.is-own strong,
.recruitment-chat-bubble.is-own small { color: rgba(255, 255, 255, 0.9); }

.recruitment-chat-bubble.is-system {
  max-width: 100%;
  margin-left: auto;
  margin-right: 0;
  color: #52637d;
  background: #eef4fb;
}

.recruitment-chat-bubble.is-request {
  min-width: min(420px, 88%);
  color: #17233b;
  border-left: 4px solid #1f74d6;
  background: #fff;
}

.recruitment-chat-bubble.is-request > b { display:block; margin-top:5px; color:#1f74d6; }
.recruitment-request-actions { display:flex; gap:8px; margin-top:10px; }
.recruitment-request-actions button { min-height:32px; padding:6px 12px; border:1px solid #b8d1ef; border-radius:6px; color:#fff; background:#2770d4; font-weight:800; }
.recruitment-request-actions .ghost { color:#3f526e; background:#fff; }
.recruitment-request-status { display:inline-flex; margin-top:8px; padding:4px 8px; border-radius:999px; color:#8a5b00; background:#fff2c2; font-size:12px; font-style:normal; font-weight:800; }
.recruitment-request-status.is-approved { color:#087443; background:#dcfae6; }
.recruitment-request-status.is-rejected { color:#b42318; background:#fee4e2; }

.recruitment-chat-bubble p,
.recruitment-chat-bubble small {
  margin: 4px 0 0;
}

.recruitment-chat-form,
.recruitment-invite-actions,
.recruitment-chat-locked {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-top: 1px solid #d8e3f2;
}

.recruitment-chat-form textarea {
  min-height: 58px;
  padding: 10px 12px;
  border: 1px solid #aebfd3;
  border-radius: 7px;
  color: #1f2d3d;
  background: #fff;
  font-family: "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", sans-serif;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: 0.01em;
  resize: vertical;
}

.recruitment-chat-form textarea::placeholder {
  color: #7c8da3;
  font-weight: 500;
}

.recruitment-chat-form textarea:focus {
  border-color: #2b72d4;
  outline: 3px solid rgba(43, 114, 212, 0.14);
}

.recruitment-chat-form > button {
  align-self: center;
  min-height: 42px;
  padding: 8px 13px;
}

/* Recruitment composer actions: clear primary send action and restrained session-ending action. */
.recruitment-chat-form > .recruitment-chat-send,
.recruitment-chat-popup .recruitment-chat-form > .recruitment-chat-send {
  min-width: 116px;
  border: 1px solid #087d84;
  border-radius: 12px;
  color: #fff;
  background: linear-gradient(135deg, #13a6a2 0%, #1678d4 100%);
  box-shadow: 0 8px 18px rgba(18, 126, 181, 0.24);
  font-weight: 900;
  letter-spacing: 0.04em;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.recruitment-chat-form > .recruitment-chat-send:hover {
  filter: brightness(1.05);
  box-shadow: 0 11px 22px rgba(18, 126, 181, 0.32);
  transform: translateY(-1px);
}

.recruitment-chat-form > .recruitment-chat-send:focus-visible,
.recruitment-chat-form > .recruitment-chat-close:focus-visible {
  outline: 3px solid rgba(22, 120, 212, 0.22);
  outline-offset: 2px;
}

.recruitment-chat-form > .recruitment-chat-close,
.recruitment-chat-popup .recruitment-chat-form > .recruitment-chat-close {
  min-width: 104px;
  border: 1px solid #d5deea;
  border-radius: 12px;
  color: #52637a;
  background: #fff;
  box-shadow: 0 4px 12px rgba(30, 58, 95, 0.08);
  font-weight: 800;
  transition: border-color .18s ease, color .18s ease, background .18s ease, transform .18s ease;
}

.recruitment-chat-form > .recruitment-chat-close:hover {
  border-color: #edb8b8;
  color: #b54747;
  background: #fff7f7;
  transform: translateY(-1px);
}

.recruitment-invite-form {
  display: grid;
  gap: 12px;
  margin-top: 16px;
  padding: 16px;
  border-top: 3px solid #21a49c;
  border-radius: 12px;
  background: #f5fbfb;
}

.recruitment-invite-form label {
  display: grid;
  gap: 6px;
}

.recruitment-chat-empty,
.recruitment-invite-note {
  padding: 24px;
  color: #66758d;
}

.resume-invite-consent {
  display: flex !important;
  align-items: center;
  gap: 8px;
}

.resume-invite-consent input {
  width: auto !important;
}

@media (max-width: 760px) {
  .recruitment-chat-layout {
    grid-template-columns: 1fr;
  }

  .recruitment-chat-list {
    border-right: 0;
    border-bottom: 1px solid #d8e3f2;
    max-height: 210px;
  }

  .recruitment-chat-form {
    grid-template-columns: 1fr;
  }
}

.recruiter-work > .teacher-work-tabs:not(.recruiter-resume-tabs),
.recruiter-work .recruiter-resume-tabs {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.recruiter-work .recruiter-resume-tabs {
  margin-top: 12px;
  padding: 12px;
  border: 1px solid #dbe6f2;
  border-radius: 10px;
  background: #f8fbff;
}

.recruiter-work .recruiter-resume-tabs button {
  min-height: 48px;
  padding: 8px 12px;
  line-height: 1.45;
}

@media (max-width: 860px) {
  .recruiter-work > .teacher-work-tabs:not(.recruiter-resume-tabs),
  .recruiter-work .recruiter-resume-tabs {
    grid-template-columns: 1fr;
  }
}

.recruiter-job-create-bar, .recruiter-job-list-heading, .admin-job-review-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.recruiter-job-create-actions, .recruiter-import-actions, .recruiter-batch-toolbar { display:flex; align-items:center; justify-content:flex-end; gap:8px; flex-wrap:wrap; }
.recruiter-job-create-actions label.button { display:inline-flex; align-items:center; min-height:34px; padding:7px 12px; border:1px solid #b9d3f3; border-radius:6px; color:#165db7; background:#fff; font-weight:900; cursor:pointer; }
.recruiter-import-actions, .recruiter-batch-toolbar { padding:12px 0 0; border-top:1px solid #e3ebf5; }
.recruiter-batch-toolbar { gap:10px; }
.recruiter-batch-toolbar > span,
.recruiter-import-selection-toolbar > span { margin-right:auto; color:#41536d; font-weight:800; }
.recruiter-batch-toolbar > span strong,
.recruiter-import-selection-toolbar > span strong { color:#087d78; }
.recruiter-batch-toolbar button {
  min-height:38px;
  padding:8px 16px;
  border:1px solid #bed2ec;
  border-radius:8px;
  color:#315574;
  background:#f7faff;
  box-shadow:0 2px 7px rgba(34, 76, 126, .08);
  font-family:"Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", sans-serif;
  font-size:14px;
  font-weight:900;
  line-height:1;
  cursor:pointer;
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.recruiter-batch-toolbar button:first-child { color:#08746f; border-color:#98d8d2; background:#eefaf8; }
.recruiter-batch-toolbar button:nth-child(2) { color:#536278; background:#f4f7fb; }
.recruiter-batch-toolbar button[type="submit"],
.recruiter-import-selection-toolbar [data-submit-selected-import] {
  min-width:136px;
  color:#fff;
  border-color:transparent;
  background:linear-gradient(135deg,#20a49d,#2b69d4);
  box-shadow:0 5px 12px rgba(37, 105, 199, .2);
}
.recruiter-batch-toolbar button:disabled,
.recruiter-import-selection-toolbar button:disabled {
  color:#8795a8;
  border-color:#d7e0ea;
  background:#eef2f6;
  box-shadow:none;
  cursor:not-allowed;
  transform:none;
}
.recruiter-batch-toolbar button:hover {
  transform:translateY(-1px);
  border-color:#7eafe7;
  box-shadow:0 5px 12px rgba(34, 76, 126, .14);
}
.recruiter-import-preview { border-top:4px solid #20a39a; }
.recruiter-import-selection-toolbar {
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:12px;
  padding:10px 0;
  border-top:1px solid #e3ebf5;
}
.recruiter-import-selection-toolbar > div { display:flex; align-items:center; justify-content:flex-end; gap:8px; flex-wrap:wrap; }
.recruiter-import-selection-toolbar button,
.recruiter-import-row-actions button {
  min-height:36px;
  padding:7px 14px;
  border:1px solid #b8d1ef;
  border-radius:8px;
  color:#1767bd;
  background:#fff;
  font-weight:900;
  cursor:pointer;
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease;
}
.recruiter-import-selection-toolbar button:first-child { color:#08746f; border-color:#98d8d2; background:#eefaf8; }
.recruiter-import-selection-toolbar button:hover:not(:disabled),
.recruiter-import-row-actions button:hover:not(:disabled) { transform:translateY(-1px); border-color:#7eafe7; box-shadow:0 5px 12px rgba(34,76,126,.14); }
.recruiter-import-row-actions { display:flex; align-items:center; gap:8px; white-space:nowrap; }
.recruiter-import-row-actions .danger { color:#fff; border-color:#dc4c4c; background:#dc4c4c; }
.recruiter-row-checkbox {
  appearance:none;
  display:inline-grid;
  place-items:center;
  width:20px;
  height:20px;
  margin:0;
  border:2px solid #9db4cc;
  border-radius:6px;
  background:#fff;
  cursor:pointer;
  vertical-align:middle;
}
.recruiter-row-checkbox::before { width:9px; height:5px; content:""; border-left:2px solid #fff; border-bottom:2px solid #fff; transform:rotate(-45deg) scale(0); }
.recruiter-row-checkbox:checked { border-color:transparent; background:linear-gradient(135deg,#20a49d,#2b69d4); }
.recruiter-row-checkbox:checked::before { transform:rotate(-45deg) scale(1); }
.recruiter-row-checkbox:focus-visible { outline:3px solid rgba(37,111,201,.22); outline-offset:2px; }
.recruiter-submit-lock-note { margin-top:7px !important; color:#b45309 !important; font-weight:800; }
.recruiter-job-create-bar { margin-top:14px; padding:16px; border:1px solid #cfe1f6; border-radius:10px; background:linear-gradient(135deg,#f5fbff,#f7fffd); }
.recruiter-job-create-bar p, .recruiter-job-list-heading p, .admin-job-review-heading p { margin:4px 0 0; color:#64748b; }
.recruiter-job-create-bar .recruiter-job-license-note { margin-top:8px; color:#b45309; font-weight:800; }
.recruiter-job-create-bar button, .admin-job-review-toolbar button, .admin-job-review-actions button, .recruiter-job-row-actions button, .job-review-preview-actions button { min-height:34px; padding:7px 12px; border:1px solid #b9d3f3; border-radius:6px; color:#165db7; background:#fff; font-weight:900; cursor:pointer; }
.recruiter-job-row-actions button:disabled { color:#98a2b3; border-color:#d0d5dd; background:#eef1f5; box-shadow:none; cursor:not-allowed; opacity:1; }
.recruiter-job-create-bar > button, .admin-job-review-toolbar button:nth-child(3), .job-review-preview-actions button:first-child { color:#fff; border-color:transparent; background:linear-gradient(135deg,#209f9a,#246ad7); }
.recruiter-job-row-actions .danger, .admin-job-review-toolbar .danger, .admin-job-review-actions .danger, .job-review-preview-actions .danger, .recruiter-job-confirm .danger, .job-review-reject-dialog .danger { color:#fff; border-color:#dc4c4c; background:#dc4c4c; }
.recruiter-job-list-section, .admin-job-review-card { margin-top:14px; padding:16px; border:1px solid #d9e6f4; border-radius:10px; background:#fff; }
.recruiter-job-list-section.is-draft { border-left: 5px solid #23a69d; }
.recruiter-job-list-section.is-pending { border-left: 5px solid #7864dc; }
.recruiter-job-list-section.is-published { border-left: 5px solid #2c76d2; }
.recruiter-job-list-heading, .admin-job-review-heading { padding-bottom:12px; border-bottom:1px solid #e3ebf5; }
.recruiter-job-list-heading span, .admin-job-review-heading span { color:#0f9e98; font-size:13px; font-weight:900; }
.recruiter-job-list-heading h3, .admin-job-review-heading h3 { margin:3px 0 0; }
.recruiter-job-list-heading > b, .admin-job-review-heading > b { padding:6px 10px; border-radius:999px; color:#0b6571; background:#eaf9f7; }
.recruiter-job-table-scroll { width:100%; overflow-x:auto; }
.recruiter-job-table-scroll table, .admin-job-review-card table { width:100%; min-width:1120px; border-collapse:collapse; }
.recruiter-job-table-scroll th, .recruiter-job-table-scroll td, .admin-job-review-card th, .admin-job-review-card td { padding:11px 10px; border-bottom:1px solid #e2eaf4; text-align:left; vertical-align:middle; white-space:nowrap; }
.recruiter-job-table-scroll th, .admin-job-review-card th { color:#17233b; background:#f5f8fc; font-size:13px; font-weight:900; }
.recruiter-job-row-actions, .admin-job-review-actions, .job-review-preview-actions, .admin-job-review-toolbar { display:flex; align-items:center; gap:7px; }
.admin-job-review-toolbar { padding:12px 0; }
.job-review-status { display:inline-flex; padding:4px 8px; border-radius:999px; color:#8a5b00; background:#fff4cc; font-size:12px; font-weight:900; }
.job-review-status.is-rejected { color:#b42318; background:#fee4e2; }
.job-review-status.is-approved { color:#087443; background:#dcfae6; }
.job-review-status.is-offline { color:#475467; background:#eaecf0; }
.recruiter-job-empty { padding:28px !important; color:#75849a; text-align:center !important; }
.recruiter-job-overlay { position:fixed; inset:0; z-index:1200; display:grid; place-items:center; padding:24px; background:rgba(15,23,42,.52); }
.recruiter-job-dialog, .recruiter-job-confirm, .job-review-reject-dialog { width:min(980px,96vw); max-height:90vh; overflow:auto; padding:20px; border:1px solid #d7e4f2; border-radius:12px; background:#fff; box-shadow:0 24px 70px rgba(15,23,42,.28); }
.recruiter-job-dialog > header { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding-bottom:14px; border-bottom:1px solid #e3ebf5; }
.recruiter-job-dialog > header h3 { margin:4px 0; }
.recruiter-job-dialog > header span { color:#0f9e98; font-weight:900; }
.recruiter-job-editor-form { margin-top:16px; }
.recruiter-job-heading-fields { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; min-width:0; width:100%; }
.recruiter-job-heading-fields label { display:grid; gap:7px; min-width:0; color:#41536d; font-weight:800; }
.recruiter-job-heading-fields input, .recruiter-job-heading-fields select { min-width:0; }
.recruiter-job-contact-fields { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.recruiter-job-contact-fields label { display:grid; gap:7px; color:#41536d; font-weight:800; }
.recruiter-import-job-dialog { width:min(760px,96vw); }
.recruiter-import-job-editor-form { grid-template-columns:minmax(0,1fr); }
.recruiter-import-job-editor-form > label,
.recruiter-import-job-editor-form .wide { grid-column:1; }
.recruiter-import-job-editor-form textarea { min-height:126px; line-height:1.7; white-space:pre-wrap; }
.recruiter-job-dialog-actions { grid-column:1/-1; display:flex; justify-content:flex-end; gap:10px; }
.recruiter-job-dialog-actions button { min-width:118px; }
.recruiter-job-dialog-actions button:disabled { cursor:not-allowed; opacity:.52; box-shadow:none; }
.recruiter-job-preview dl { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.recruiter-job-preview dl div { padding:12px; border:1px solid #dce7f3; border-radius:8px; background:#f9fbfe; }
.recruiter-job-preview dt { color:#61718a; font-size:12px; font-weight:900; }
.recruiter-job-preview dd { margin:6px 0 0; white-space:pre-wrap; }
.recruiter-job-confirm { width:min(480px,94vw); }
.recruiter-job-confirm > div, .job-review-reject-dialog > div { display:flex; justify-content:flex-end; gap:10px; margin-top:18px; }
.job-review-reject-dialog { width:min(560px,94vw); }
.job-review-reject-dialog label { display:grid; gap:7px; font-weight:900; }
.job-review-reject-dialog textarea { padding:10px; border:1px solid #cad9e9; border-radius:7px; }
.job-review-preview-actions { grid-column:1/-1; justify-content:flex-end; }
.recruitment-chat-context { display:grid; gap:4px; margin:10px 14px 0; padding:12px; border-left:4px solid #1f74d6; border-radius:8px; background:#f1f7ff; }
.recruitment-chat-context b { color:#1f74d6; font-size:12px; }
.recruitment-chat-context span { color:#52627a; }
.recruitment-chat-context p { margin:3px 0 0; }
.recruitment-enterprise-tabs button b { display:inline-grid; min-width:20px; height:20px; margin-left:7px; padding:0 6px; place-items:center; border-radius:999px; color:#fff; background:#df2f3d; font-size:12px; line-height:1; }
.recruitment-enterprise-tabs.recruitment-reviewer-tabs { grid-template-columns:1fr; }
.recruitment-pagination { display:flex; align-items:center; justify-content:flex-end; gap:8px; flex-wrap:wrap; padding:12px 0 0; color:#52637c; font-size:13px; }
.recruitment-pagination > span { margin-right:auto; font-weight:800; }
.recruitment-pagination button, .recruitment-pagination select, .recruitment-pagination input { min-height:32px; padding:5px 9px; border:1px solid #c8d8ea; border-radius:6px; color:#24415f; background:#fff; }
.recruitment-pagination button { font-weight:800; cursor:pointer; }
.recruitment-pagination button:disabled { opacity:.45; cursor:not-allowed; }
.recruitment-pagination label { display:flex; align-items:center; gap:5px; }
.recruitment-pagination input { width:66px; }
.senior-history-empty { height:68px; color:#71819a; text-align:center !important; }
@media (max-width:760px) {
  .recruiter-job-create-bar, .recruiter-job-list-heading, .admin-job-review-heading { align-items:stretch; flex-direction:column; }
  .admin-job-review-toolbar { flex-wrap:wrap; }
  .recruiter-job-overlay { padding:10px; }
  .recruiter-job-preview dl { grid-template-columns:1fr; }
  .recruiter-job-heading-fields { grid-template-columns:1fr; }
  .recruiter-job-contact-fields { grid-template-columns:1fr; }
}

/* Product classification form stays on the left; its saved-category table aligns at the upper right. */
@media (min-width: 901px) {
  .admin-body [data-factory-admin-panel="settings"] .factory-admin-grid > .factory-category-form-card {
    grid-column: 1;
    grid-row: 1;
    align-self: start;
  }

  .admin-body [data-factory-admin-panel="settings"] .factory-admin-grid > .factory-category-list-card {
    grid-column: 2;
    grid-row: 1;
    align-self: start;
  }

  .admin-body [data-factory-admin-panel="settings"] .factory-admin-grid > .factory-address-card {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}

@media (max-width: 900px) {
  .admin-body [data-factory-admin-panel="settings"] .factory-admin-grid > .factory-category-form-card,
  .admin-body [data-factory-admin-panel="settings"] .factory-admin-grid > .factory-category-list-card,
  .admin-body [data-factory-admin-panel="settings"] .factory-admin-grid > .factory-address-card {
    grid-column: 1;
    grid-row: auto;
  }

  .admin-body [data-factory-admin-panel="settings"] .factory-admin-grid > .factory-category-form-card { order: 1; }
  .admin-body [data-factory-admin-panel="settings"] .factory-admin-grid > .factory-category-list-card { order: 2; }
  .admin-body [data-factory-admin-panel="settings"] .factory-admin-grid > .factory-address-card { order: 3; }
}
/* Keep page-level titles compact and proportional to the current workspace layout. */
.hero {
  padding-top: clamp(30px, 3.4vw, 44px);
  padding-bottom: clamp(34px, 3.8vw, 48px);
}

.hero-copy h1 {
  margin-bottom: 12px;
  font-size: clamp(36px, 3.7vw, 50px);
  line-height: 1.08;
}

.auth-visual {
  min-height: 540px;
  padding: clamp(28px, 3.8vw, 44px);
}

.auth-visual h1 {
  margin-bottom: 12px;
  font-size: clamp(30px, 3.5vw, 40px);
  line-height: 1.1;
}

.auth-visual p:not(.eyebrow) {
  font-size: 16px;
  line-height: 1.65;
}

.profile-card-form h2 {
  font-size: clamp(26px, 3vw, 36px);
  line-height: 1.15;
}

.profile-security-card {
  display: grid;
  gap: 18px;
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid #d8e3f2;
}

.profile-security-card > div > p:last-child {
  margin: 8px 0 0;
  color: #52647d;
  line-height: 1.7;
}

.profile-completion-price-link {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  color: #0b5fd7;
  text-decoration: none;
}

.profile-completion-price-link span {
  padding: 5px 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, #1670d8, #1ba89c);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}

.profile-completion-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: 18px 0 24px;
  padding: 16px 18px;
  border: 1px solid #9ec2ef;
  border-radius: 12px;
  background: #eef6ff;
}

.profile-completion-banner[hidden] {
  display: none;
}

.profile-completion-banner div {
  display: grid;
  gap: 4px;
}

.profile-completion-banner span {
  color: #52647d;
}

@media (max-width: 680px) {
  .profile-completion-banner {
    align-items: stretch;
    flex-direction: column;
  }
}

.detail-hero {
  margin-bottom: 18px;
}

.detail-hero-copy {
  padding: 26px 30px;
}

.detail-hero-copy h1 {
  margin-bottom: 10px;
  font-size: clamp(30px, 3.6vw, 42px);
  line-height: 1.12;
}

.course-settings-hero {
  padding: 24px 28px;
}

.course-settings-hero h1 {
  margin: 6px 0 10px;
  font-size: clamp(29px, 3.6vw, 40px);
  line-height: 1.1;
}

.opportunities-head {
  gap: 6px;
  padding-bottom: 12px;
}

.opportunities-head h1 {
  font-size: clamp(28px, 3.8vw, 40px);
  line-height: 1.12;
}

.declaration-head {
  gap: 7px;
  padding: 20px 24px;
}

.declaration-head h1 {
  font-size: clamp(28px, 3.8vw, 40px);
  line-height: 1.12;
}

.admin-body .admin-profile-reference {
  min-height: 560px;
}

.admin-body .admin-profile-reference-visual {
  gap: 20px;
  padding: clamp(28px, 3.4vw, 42px);
}

.admin-body .admin-profile-reference-copy h2 {
  margin-bottom: 14px;
  font-size: clamp(30px, 3.5vw, 44px);
  line-height: 1.1;
}

@media (max-width: 1080px) {
  .auth-visual {
    min-height: 380px;
  }

  .admin-body .admin-profile-reference-visual {
    min-height: 320px;
  }
}

@media (max-width: 720px) {
  .hero {
    padding: 20px 14px 22px;
  }

  .hero-copy h1 {
    font-size: clamp(32px, 9vw, 40px);
  }

  .auth-visual {
    min-height: 340px;
    padding: 24px;
  }

  .auth-visual h1 {
    font-size: 32px;
  }

  .detail-hero-copy,
  .course-settings-hero,
  .declaration-head {
    padding: 20px;
  }

  .detail-hero-copy h1,
  .course-settings-hero h1,
  .opportunities-head h1,
  .declaration-head h1 {
    font-size: 30px;
  }
}

/* Recruitment chat workspace and incoming-message overlay. */
.recruitment-chat-panel {
  display: grid;
  gap: 12px;
}

.recruitment-chat-overview {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.recruitment-chat-overview > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 3px 10px;
  padding: 13px 15px;
  background: linear-gradient(145deg, #f8fbff, #eef7f7);
  border: 1px solid #d6e5f1;
  border-radius: 10px;
}

.recruitment-chat-overview span,
.recruitment-chat-overview small {
  color: #65748b;
  font-size: 12px;
}

.recruitment-chat-overview strong {
  grid-row: 1 / span 2;
  grid-column: 2;
  align-self: center;
  color: #126d72;
  font-size: 24px;
}

.recruitment-chat-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 12px;
  background: #f7f9fd;
  border: 1px solid #d8e3f2;
  border-radius: 10px;
}

.recruitment-chat-filter button {
  min-height: 34px;
  padding: 6px 15px;
  color: #52627a;
  background: #fff;
  border: 1px solid #cfdaea;
  border-radius: 999px;
  font-weight: 800;
}

.recruitment-chat-filter button.active {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(135deg, #1fa5a0, #316bd8);
}

.recruitment-chat-list-empty {
  display: grid;
  gap: 8px;
  margin: 4px;
  padding: 24px 18px;
  text-align: center;
  color: #64748b;
  background: #fff;
  border: 1px dashed #bfd0e4;
  border-radius: 12px;
}

.recruitment-chat-list-empty span,
.recruitment-chat-welcome header span,
.recruitment-chat-guide > span {
  color: #129b96;
  font-size: 12px;
  font-weight: 900;
}

.recruitment-chat-list-empty strong {
  color: #23314a;
  font-size: 16px;
}

.recruitment-chat-list-empty p,
.recruitment-chat-welcome p {
  margin: 0;
  line-height: 1.65;
}

.recruitment-chat-welcome {
  display: grid;
  gap: 18px;
  padding: 24px;
  background: linear-gradient(160deg, #ffffff 0%, #f8fbff 64%, #f1fbfa 100%);
}

.recruitment-chat-welcome > header {
  display: grid;
  gap: 6px;
  padding-bottom: 16px;
  border-bottom: 1px solid #dce6f2;
}

.recruitment-chat-welcome > header strong {
  color: #17233b;
  font-size: 21px;
}

.recruitment-chat-future-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.recruitment-chat-future-grid article {
  display: grid;
  gap: 6px;
  min-height: 122px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid #d8e4f1;
  border-radius: 10px;
  box-shadow: 0 8px 20px rgba(35, 67, 110, 0.05);
}

.recruitment-chat-future-grid b {
  color: #276fc9;
  font-size: 12px;
}

.recruitment-chat-future-grid strong {
  color: #24324a;
}

.recruitment-chat-future-grid p {
  color: #69778e;
  font-size: 13px;
}

.recruitment-chat-guide {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 15px;
  color: #3e506b;
  background: #eef7f7;
  border-radius: 9px;
  font-size: 13px;
}

.recruitment-chat-guide i {
  flex: 1 1 22px;
  height: 1px;
  background: linear-gradient(90deg, #62bdb8, #7ea8df);
}

.recruitment-chat-popup-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(18, 31, 52, 0.56);
  backdrop-filter: blur(3px);
}

.recruitment-chat-popup {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(1120px, 96vw);
  max-height: 92vh;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 16px;
  box-shadow: 0 28px 80px rgba(10, 24, 46, 0.32);
}

.recruitment-chat-popup > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 15px 18px;
  background: linear-gradient(135deg, #f4fbfb, #edf4ff);
  border-bottom: 1px solid #d8e3f2;
}

.recruitment-chat-popup > header div {
  display: grid;
  gap: 2px;
}

.recruitment-chat-popup > header span {
  color: #119b96;
  font-size: 12px;
  font-weight: 900;
}

.recruitment-chat-popup > header strong {
  color: #17233b;
  font-size: 20px;
}

.recruitment-chat-popup > header p {
  margin: 0;
  color: #64748b;
  font-size: 13px;
}

.recruitment-chat-popup > header button {
  min-height: 36px;
  padding: 7px 14px;
  color: #315074;
  background: #fff;
  border: 1px solid #bfd0e5;
  border-radius: 8px;
  font-weight: 800;
}

.recruitment-chat-popup-body {
  min-height: 0;
  overflow-y: auto;
  padding: 16px;
}

.recruitment-chat-popup .recruitment-chat-layout {
  min-height: 440px;
}

.recruitment-chat-popup .recruitment-chat-messages {
  max-height: 330px;
}

.recruitment-chat-popup {
  width: min(1060px, 95vw);
  height: min(780px, 94vh);
  max-height: 94vh;
}

.recruitment-chat-popup > header {
  padding: 11px 16px;
}

.recruitment-chat-popup-body {
  padding: 11px;
}

.recruitment-chat-popup .recruitment-chat-panel {
  gap: 8px;
}

.recruitment-chat-popup .recruitment-chat-overview {
  gap: 8px;
}

.recruitment-chat-popup .recruitment-chat-overview > div {
  padding: 9px 12px;
}

.recruitment-chat-popup .recruitment-chat-overview strong {
  font-size: 21px;
}

.recruitment-chat-popup .recruitment-chat-filter {
  gap: 6px;
  padding: 7px 9px;
}

.recruitment-chat-popup .recruitment-chat-filter button {
  min-height: 30px;
  padding: 4px 12px;
}

.recruitment-chat-popup .recruitment-chat-layout {
  min-height: 500px;
}

.recruitment-chat-popup .recruitment-chat-list {
  padding: 9px;
}

.recruitment-chat-popup .recruitment-chat-list-row {
  margin-bottom: 6px;
}

.recruitment-chat-popup .recruitment-chat-list-item {
  gap: 2px;
  padding: 7px 9px;
  font-size: 12px;
  line-height: 1.35;
}

.recruitment-chat-popup .recruitment-chat-list-row:has(.recruitment-chat-list-action) .recruitment-chat-list-item {
  padding-bottom: 32px;
}

.recruitment-chat-popup .recruitment-chat-list-action {
  right: 7px;
  bottom: 5px;
}

.recruitment-chat-popup .recruitment-chat-list-action button {
  min-height: 25px;
  padding: 3px 8px;
  font-size: 11px;
}

.recruitment-chat-popup .recruitment-chat-list-item::before {
  width: 28px;
  height: 28px;
  box-shadow: inset 0 0 0 6px rgba(255,255,255,.82);
}

.recruitment-chat-popup .recruitment-chat-list-item small {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.recruitment-chat-popup .recruitment-chat-main > header {
  padding: 11px 14px;
}

.recruitment-chat-popup .recruitment-chat-context {
  margin: 7px 10px 0;
  padding: 9px;
}

.recruitment-chat-popup .recruitment-chat-messages {
  max-height: 390px;
  padding: 16px;
}

.recruitment-chat-popup .recruitment-chat-bubble {
  max-width: 58%;
  margin-bottom: 13px;
  padding: 6px 9px;
  font-size: 12px;
  line-height: 1.45;
}

.recruitment-chat-popup .recruitment-chat-bubble.is-request {
  min-width: min(230px, 58%);
}

.recruitment-chat-popup .recruitment-chat-form,
.recruitment-chat-popup .recruitment-invite-actions,
.recruitment-chat-popup .recruitment-chat-locked {
  padding: 10px 14px;
}

/* 弹窗与课堂共用的招聘沟通：压缩资料区，统一消息卡和发送区节奏。 */
.recruitment-chat-parties { padding: 8px 14px 0; gap: 8px; }
.recruitment-chat-party { gap: 2px; padding: 8px 11px; border-radius: 9px; }
.recruitment-chat-party strong { font-size: 15px; line-height: 1.35; }
.recruitment-chat-party small { font-size: 13px; line-height: 1.35; }
.recruitment-chat-context { gap: 2px; margin: 8px 14px 0; padding: 8px 11px; border-radius: 9px; }
.recruitment-chat-context strong { color: #17233b; font-size: 16px; line-height: 1.35; }
.recruitment-chat-context span { font-size: 13px; line-height: 1.4; }

.recruitment-chat-bubble,
.recruitment-chat-popup .recruitment-chat-bubble,
.recruitment-chat-bubble.is-request,
.recruitment-chat-popup .recruitment-chat-bubble.is-request {
  min-width: 0;
  margin-bottom: 10px;
  padding: 9px 12px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(44, 74, 112, 0.08);
  line-height: 1.5;
}

.factory-rejection-reason > strong {
  color: #dc2626;
  font-size: 13px;
  line-height: 1.55;
}

@media (max-width: 760px) {
  .factory-body .factory-submitted-product.is-rejected {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas:
      "check"
      "info"
      "reason"
      "summary"
      "actions" !important;
  }

  .factory-body .factory-submitted-product.is-rejected .factory-manage-info {
    grid-template-columns: minmax(0, 1fr);
  }

  .factory-body .factory-submitted-product.is-rejected .factory-manage-actions {
    flex-wrap: wrap;
  }
}

.recruitment-chat-bubble.is-system { margin-left: 0; }
.recruitment-chat-bubble.is-request { border-left-width: 4px; }
.recruitment-chat-bubble p { margin-top: 4px; }
.recruitment-chat-bubble small { margin-top: 5px; }

.recruitment-chat-form,
.recruitment-chat-popup .recruitment-chat-form {
  align-items: stretch;
  min-height: 86px;
  padding: 10px 14px;
}

.recruitment-chat-form textarea,
.recruitment-chat-popup .recruitment-chat-form textarea {
  height: 64px;
  min-height: 64px;
  resize: vertical;
}

.recruitment-chat-form > button,
.recruitment-chat-popup .recruitment-chat-form > button {
  align-self: stretch;
  min-height: 64px;
  height: 64px;
}

.recruitment-chat-popup .recruitment-chat-parties { padding: 7px 10px 0; gap: 7px; }
.recruitment-chat-popup .recruitment-chat-party { padding: 7px 10px; }
.recruitment-chat-popup .recruitment-chat-context { margin: 7px 10px 0; padding: 7px 10px; }

/* 会话列表与下载申请进一步紧凑化，桌面与学员侧共用此规则。 */
.recruitment-chat-list-row { margin-bottom: 6px; }
.recruitment-chat-list-item,
.recruitment-chat-popup .recruitment-chat-list-item {
  gap: 2px;
  min-height: 68px;
  padding: 7px 10px;
  border-color: #cddded;
  border-radius: 9px;
  line-height: 1.28;
}

.recruitment-chat-list-row:has(.recruitment-chat-list-action) .recruitment-chat-list-item,
.recruitment-chat-popup .recruitment-chat-list-row:has(.recruitment-chat-list-action) .recruitment-chat-list-item {
  padding-right: 86px;
  padding-bottom: 7px;
}

.recruitment-chat-list-item::before,
.recruitment-chat-popup .recruitment-chat-list-item::before {
  width: 28px;
  height: 28px;
  grid-row: 1 / span 3;
  box-shadow: inset 0 0 0 6px rgba(255,255,255,.84);
}

.recruitment-chat-list-item strong { font-size: 14px; line-height: 1.25; }
.recruitment-chat-list-item span { font-size: 13px; line-height: 1.25; }
.recruitment-chat-list-item small { font-size: 12px; line-height: 1.25; }
.recruitment-chat-list-action,
.recruitment-chat-popup .recruitment-chat-list-action { top: 50%; right: 8px; bottom: auto; transform: translateY(-50%); }
.recruitment-chat-list-action button,
.recruitment-chat-popup .recruitment-chat-list-action button { min-height: 26px; padding: 3px 7px; border-radius: 6px; }

/* Learner conversation actions sit in a dedicated card footer so they never cover names or timestamps. */
.recruitment-chat-list-row:has(.recruitment-chat-list-action),
.recruitment-chat-popup .recruitment-chat-list-row:has(.recruitment-chat-list-action) {
  overflow: hidden;
  border: 1px solid #cddded;
  border-radius: 9px;
  background: #fff;
}

.recruitment-chat-list-row:has(.recruitment-chat-list-action) .recruitment-chat-list-item,
.recruitment-chat-popup .recruitment-chat-list-row:has(.recruitment-chat-list-action) .recruitment-chat-list-item {
  min-height: 68px;
  padding: 7px 10px;
  border: 0;
  border-radius: 0;
  border-bottom: 1px solid #e2ebf4;
}

.recruitment-chat-list-action,
.recruitment-chat-popup .recruitment-chat-list-action {
  position: static;
  display: flex;
  justify-content: flex-end;
  gap: 7px;
  padding: 7px 8px;
  transform: none;
  background: #f8fbff;
}

.recruitment-chat-list-action button,
.recruitment-chat-popup .recruitment-chat-list-action button {
  min-width: 64px;
  min-height: 29px;
  padding: 4px 10px;
  border-radius: 7px;
}

.recruitment-chat-bubble,
.recruitment-chat-popup .recruitment-chat-bubble,
.recruitment-chat-bubble.is-request,
.recruitment-chat-popup .recruitment-chat-bubble.is-request {
  display: grid;
  gap: 2px;
  padding: 7px 10px;
  border: 1px solid #d5e1ef;
  border-radius: 10px;
  box-shadow: none;
}

.recruitment-chat-bubble.is-own { border-color: #2b72d4; }
.recruitment-chat-bubble.is-system { border-color: #cfdff0; }
.recruitment-chat-bubble.is-request { border-left: 3px solid #2478d8; }
.recruitment-chat-bubble strong { font-size: 12px; line-height: 1.25; }
.recruitment-chat-bubble.is-request > b { margin: 0; font-size: 13px; line-height: 1.25; }
.recruitment-chat-bubble p,
.recruitment-chat-bubble small { margin: 0; line-height: 1.35; }
.recruitment-request-status { margin-top: 2px; padding: 3px 7px; }

.recruitment-post-preview-overlay {
  position: fixed;
  inset: 0;
  z-index: 10100;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(15, 23, 42, 0.58);
}

.recruitment-delete-confirm-overlay {
  position: fixed;
  inset: 0;
  z-index: 10120;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(15, 23, 42, 0.58);
}

.recruitment-delete-confirm {
  width: min(440px, 94vw);
  padding: 24px;
  border: 1px solid #ead5d5;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.32);
}

.recruitment-delete-confirm > span { color: #c75a5a; font-size: 13px; font-weight: 900; }
.recruitment-delete-confirm h3 { margin: 7px 0; color: #17233b; font-size: 20px; }
.recruitment-delete-confirm p { margin: 0; color: #617189; line-height: 1.7; }
.recruitment-delete-confirm > div { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }
.recruitment-delete-confirm button { min-height: 38px; padding: 7px 15px; border: 1px solid #cbd8e7; border-radius: 9px; color: #41536b; background: #fff; font-weight: 800; }
.recruitment-delete-confirm button.danger { border-color: #d64545; color: #fff; background: #d64545; box-shadow: 0 6px 14px rgba(214, 69, 69, 0.22); }

.recruitment-resume-preview-overlay {
  position: fixed;
  inset: 0;
  z-index: 10110;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(15, 23, 42, 0.58);
}

.recruitment-resume-preview {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(760px, 94vw);
  max-height: 88vh;
  overflow: hidden;
  border: 1px solid #d7e4ee;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.3);
}

.recruitment-resume-preview > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
  border-bottom: 1px solid #dce7ef;
  background: linear-gradient(135deg, #f1f8f7, #f2f6fb);
}

.recruitment-resume-preview > header div { display: grid; gap: 3px; }
.recruitment-resume-preview > header span { color: #368a86; font-size: 12px; font-weight: 900; }
.recruitment-resume-preview > header strong { color: #243b53; font-size: 20px; }
.recruitment-resume-preview > header p { margin: 0; color: #718096; }
.recruitment-resume-preview > header button { min-height: 34px; padding: 6px 13px; border: 1px solid #c3d4e2; border-radius: 8px; color: #496176; background: #fff; font-weight: 800; }

.recruitment-resume-preview-body { display: grid; gap: 10px; padding: 14px; overflow-y: auto; background: #f8fafc; }
.recruitment-resume-preview-body dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; }
.recruitment-resume-preview-body dl div,
.recruitment-resume-preview-body section { padding: 11px 12px; border: 1px solid #dce7ef; border-radius: 10px; background: #fff; }
.recruitment-resume-preview-body dt { color: #708196; font-size: 12px; font-weight: 800; }
.recruitment-resume-preview-body dd { margin: 4px 0 0; color: #263f56; font-weight: 800; }
.recruitment-resume-preview-body section b { color: #367d7a; }
.recruitment-resume-preview-body section p { margin: 6px 0 0; color: #40566d; line-height: 1.65; white-space: pre-wrap; }

@media (max-width: 760px) {
  .recruitment-resume-preview-overlay { padding: 10px; }
  .recruitment-resume-preview { width: 100%; max-height: 94vh; }
  .recruitment-resume-preview-body dl { grid-template-columns: 1fr; }
}

.recruitment-post-preview {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(820px, 94vw);
  max-height: 86vh;
  overflow: hidden;
  border: 1px solid #d7e4f2;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.32);
}

.recruitment-post-preview > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 15px 18px;
  border-bottom: 1px solid #dce6f2;
  background: linear-gradient(135deg, #f4fbfb, #edf4ff);
}

.recruitment-post-preview > header div {
  display: grid;
  gap: 3px;
}

.recruitment-post-preview > header span {
  color: #119b96;
  font-size: 12px;
  font-weight: 900;
}

.recruitment-post-preview > header strong {
  color: #17233b;
  font-size: 20px;
}

.recruitment-post-preview > header p {
  margin: 0;
  color: #64748b;
  font-size: 13px;
}

.recruitment-post-preview > header button {
  min-height: 34px;
  padding: 6px 13px;
  color: #315074;
  background: #fff;
  border: 1px solid #bfd0e5;
  border-radius: 7px;
  font-weight: 800;
}

.recruitment-post-preview-list {
  display: grid;
  gap: 10px;
  padding: 14px;
  overflow-y: auto;
}

.recruitment-post-preview-list > article {
  padding: 14px;
  border: 1px solid #d8e4f1;
  border-left: 4px solid #2470d2;
  border-radius: 10px;
}

.recruitment-post-preview-list > article > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid #e2eaf4;
}

.recruitment-post-preview-list > article > header div {
  display: grid;
  gap: 3px;
}

.recruitment-post-preview-list > article > header span,
.recruitment-post-preview-list > article > header em {
  color: #58708f;
  font-size: 12px;
  font-style: normal;
}

.recruitment-post-preview-list dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 10px 0 0;
}

.recruitment-post-preview-list dl div {
  padding: 9px 10px;
  border-radius: 7px;
  background: #f7faff;
}

.recruitment-post-preview-list dl .wide {
  grid-column: 1 / -1;
}

.recruitment-post-preview-list dt {
  color: #61718a;
  font-size: 12px;
  font-weight: 900;
}

.recruitment-post-preview-list dd {
  margin: 4px 0 0;
  white-space: pre-wrap;
}

.recruitment-post-preview-empty {
  padding: 36px 20px;
  color: #64748b;
  text-align: center;
}

@media (max-width: 760px) {
  .recruitment-chat-overview,
  .recruitment-chat-future-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .recruitment-chat-guide {
    align-items: flex-start;
    flex-direction: column;
  }

  .recruitment-chat-guide i {
    display: none;
  }

  .recruitment-chat-popup-overlay {
    padding: 10px;
  }

  .recruitment-chat-popup {
    width: 100%;
    max-height: 96vh;
  }

  .recruitment-chat-popup > header p {
    display: none;
  }

  .recruitment-chat-popup .recruitment-chat-bubble,
  .recruitment-chat-popup .recruitment-chat-bubble.is-request {
    width: auto;
    min-width: 0;
    max-width: 88%;
  }

  .recruitment-post-preview-overlay {
    padding: 8px;
  }

  .recruitment-post-preview-list dl {
    grid-template-columns: 1fr;
  }

  .recruitment-post-preview-list dl .wide {
    grid-column: 1;
  }
}

/* 独立积分产品页沿用独立电商产品页的表格式目录。 */
.points-public-body {
  background:
    radial-gradient(circle at 88% 12%, rgba(31, 174, 170, 0.08), transparent 28%),
    linear-gradient(180deg, #f5f9ff 0%, #eef5ff 100%);
}

.points-public-body .standalone-ecommerce-page {
  width: min(1280px, calc(100% - 48px));
}

.points-public-body .ecommerce-list-panel {
  padding: 26px 22px 30px;
  border-color: #d5e2f0;
  background: rgba(255, 255, 255, 0.96);
}

.points-public-body .classroom-extra-head {
  padding-bottom: 18px;
  border-bottom: 1px solid #dfe8f3;
}

.points-public-body .classroom-extra-head > span {
  color: #0f9a94;
}

.points-public-body .classroom-extra-head h2 {
  margin-top: 6px;
  color: #13223a;
}

.points-public-body .ecommerce-category-bar {
  align-items: stretch;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.points-public-body .ecommerce-category-bar button {
  color: #245a9a;
  border-color: #b9d0f1;
  background: #f2f7ff;
  font-weight: 800;
}

.points-public-body .ecommerce-category-bar button:nth-of-type(3n + 2) {
  color: #5d46a7;
  border-color: #cbc4f1;
  background: #f6f4ff;
}

.points-public-body .ecommerce-category-bar button:nth-of-type(3n + 3) {
  color: #087b73;
  border-color: #a9dcd7;
  background: #effaf8;
}

.points-public-body .ecommerce-category-bar button.active {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(135deg, #19a49c, #256bd0);
}

.points-category-empty-note {
  display: flex;
  grid-column: span 2;
  align-items: center;
  padding-inline: 16px !important;
  color: #718096 !important;
  background: #f8fbff !important;
}

.points-public-body .ecommerce-product-table {
  overflow: hidden auto;
  border: 1px solid #d6e2ef;
  border-radius: 9px;
  background: #fff;
}

.points-public-body .points-standalone-row {
  grid-template-columns: minmax(220px, 1.35fr) minmax(140px, 0.8fr) minmax(130px, 0.7fr) 90px minmax(210px, auto);
  min-width: 980px;
}

.points-public-body .points-standalone-row.is-head {
  border-top-color: #f08d72;
  background: linear-gradient(90deg, #f3f7fc, #f5f9ff);
}

.points-public-body .points-standalone-row:not(.is-head):hover {
  background: #f8fbff;
}

.points-public-body .points-standalone-row > div:first-child {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.points-public-body .points-standalone-row small {
  overflow: hidden;
  color: #718096;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.points-public-body .points-standalone-row > b {
  color: #0d8f88;
}

.points-public-body .points-standalone-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
}

.points-public-body .points-standalone-actions button,
.points-public-body .points-standalone-actions .button {
  min-height: 36px;
  padding: 7px 12px;
  border: 1px solid #b9d4f5;
  border-radius: 6px;
  white-space: nowrap;
}

.points-public-body .points-standalone-actions button {
  color: #1765b9;
  background: #f8fbff;
  font-weight: 900;
}

.points-public-body .points-standalone-actions .button {
  color: #ffffff;
  background: linear-gradient(135deg, #18a39b, #1f6ed4);
  border-color: transparent;
}

.points-public-body .ecommerce-empty-row {
  display: grid;
  min-height: 96px;
  align-content: center;
  gap: 5px;
  padding: 22px 16px;
  color: #62748b;
  background: #fbfdff;
}

.points-public-body .ecommerce-empty-row strong {
  color: #172033;
}

.points-public-body .ecommerce-empty-row p {
  margin: 0;
}

.points-public-exchange-note {
  padding: 12px 14px;
  color: #65768d;
  background: linear-gradient(135deg, #f2f7ff, #f0faf8);
  border: 1px solid #d5e5ef;
  border-radius: 7px;
  font-size: 13px;
}

.points-public-body .ecommerce-public-detail-actions .button {
  display: inline-grid;
  min-height: 38px;
  place-items: center;
  padding: 0 18px;
  color: #ffffff;
  background: linear-gradient(135deg, #18a39b, #1f6ed4);
  border: 1px solid transparent;
  border-radius: 7px;
  font-weight: 900;
}

/* 将两处过大的页面主标题统一为全站常用标题字号。 */
.pricing-page .section-heading h2,
.opportunities-head h1 {
  font-size: clamp(28px, 3vw, 34px);
}

@media (max-width: 760px) {
  .points-public-body .points-standalone-row {
    min-width: 880px;
  }
}

/* 课程设置总览：五个方向与两类学员在宽屏保持逐列对应。 */
@media (min-width: 1101px) {
  .admin-body .course-setting-links,
  .admin-body .course-audience-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

@media (min-width: 761px) and (max-width: 1100px) {
  .admin-body .course-setting-links,
  .admin-body .course-audience-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .admin-body .course-setting-links,
  .admin-body .course-audience-grid {
    grid-template-columns: 1fr;
  }
}
.nickname-edit-button {
  margin-left: 10px;
  padding: 2px 9px;
  border: 1px solid #2d73ca;
  border-radius: 4px;
  background: #fff;
  color: #1764b4;
  font: inherit;
  font-size: 12px;
  line-height: 1.4;
  cursor: pointer;
}

.nickname-edit-button:hover,
.nickname-edit-button:focus-visible {
  background: #eaf4ff;
}

/* 2026-07-28 mobile layout refinement: compact home and readable linked pages. */
@media (max-width: 760px) {
  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
  }

  .hero-stats {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
    width: 100%;
  }

  .hero-stats a,
  .hero-stats a:last-child {
    grid-column: auto;
    min-height: 66px;
    align-content: center;
    gap: 2px;
    padding: 8px 3px;
    text-align: center;
  }

  .hero-stats dt {
    font-size: 20px;
    line-height: 1;
  }

  .hero-stats dd {
    overflow: hidden;
    font-size: 10px;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .leaderboard-tabs {
    display: flex;
    grid-template-columns: none;
    flex-wrap: nowrap;
    gap: 7px;
    width: 100%;
    padding: 7px 22px 8px 7px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-padding-inline: 7px;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }

  .leaderboard-tabs button,
  .leaderboard-tabs button:first-child {
    flex: 0 0 auto;
    width: auto;
    min-width: 88px;
    min-height: 38px;
    padding: 7px 12px;
    white-space: nowrap;
    scroll-snap-align: start;
  }

  .leaderboard-card.has-flash {
    padding: 12px;
  }

  .leaderboard-card.has-flash .leaderboard-head {
    margin-bottom: 10px;
    padding-bottom: 10px;
  }

  .leaderboard-card.has-flash .leaderboard-head span {
    margin-bottom: 3px;
  }

  .leaderboard-card.has-flash .leaderboard-head h2 {
    font-size: 25px;
  }

  .leaderboard-list.is-flash {
    padding: 6px;
  }

  .leaderboard-flash-carousel {
    height: auto;
    aspect-ratio: 2 / 1;
  }

  .leaderboard-flash-slide,
  .leaderboard-flash-slide.active {
    width: 100%;
    height: 100%;
  }

  .leaderboard-flash-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
  }

  .auth-body .auth-topbar,
  .unified-cart-page .auth-topbar,
  .declaration-body .auth-topbar {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    min-height: 0;
    padding: 10px 12px;
    overflow: hidden;
  }

  .auth-body .auth-topbar-logo,
  .unified-cart-page .auth-topbar-logo,
  .declaration-body .auth-topbar-logo {
    min-width: 0;
    max-width: 100%;
  }

  .auth-body .auth-topbar-logo strong,
  .unified-cart-page .auth-topbar-logo strong,
  .declaration-body .auth-topbar-logo strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .auth-body .auth-topbar-nav,
  .unified-cart-page .auth-topbar-nav,
  .declaration-body .auth-topbar-nav {
    width: 100%;
    max-width: 100%;
    justify-content: flex-start;
    justify-self: stretch;
    gap: 8px;
    padding: 1px 2px 5px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }

  .auth-body .auth-topbar-nav a,
  .unified-cart-page .auth-topbar-nav a,
  .declaration-body .auth-topbar-nav a {
    flex: 0 0 auto;
    min-height: 34px;
    padding: 0 11px;
    scroll-snap-align: start;
  }

  .auth-body main,
  .auth-body main > *,
  .unified-cart-page main,
  .unified-cart-page main > *,
  .declaration-body main,
  .declaration-body main > * {
    min-width: 0;
    max-width: 100%;
  }

  .opportunities-page {
    width: 100%;
    padding: 18px 12px 36px;
  }

  .opportunities-shell {
    width: 100%;
    min-width: 0;
    gap: 14px;
    padding: 14px;
    overflow: hidden;
  }

  .opportunities-head {
    min-width: 0;
    padding-bottom: 12px;
  }

  .opportunities-head h1 {
    max-width: 100%;
    font-size: clamp(27px, 8.2vw, 34px);
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .opportunities-head p,
  .opportunities-status {
    max-width: 100%;
    font-size: 14px;
    line-height: 1.65;
    overflow-wrap: anywhere;
  }

  .opportunities-tabs {
    display: flex;
    grid-template-columns: none;
    flex-wrap: nowrap;
    gap: 8px;
    padding: 7px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }

  .opportunities-tabs button {
    flex: 0 0 auto;
    min-width: 116px;
    scroll-snap-align: start;
  }

  .opportunity-filter-form {
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    min-width: 0;
    gap: 10px;
    padding: 12px;
  }

  .opportunity-filter-form > *,
  .opportunity-filter-form label,
  .opportunity-filter-form input,
  .opportunity-filter-form select,
  .opportunity-filter-form button {
    min-width: 0;
    max-width: 100%;
  }

  .opportunity-filter-summary {
    grid-column: 1;
    min-width: 0;
    align-items: flex-start;
    flex-direction: column;
  }

  .opportunity-card,
  .opportunity-empty,
  .opportunity-card-head,
  .opportunity-card dl,
  .opportunity-card dl div {
    min-width: 0;
    max-width: 100%;
  }

  .opportunity-card-head,
  .opportunity-card dl {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 360px) {
  .hero-stats {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .hero-stats dd {
    font-size: 9px;
  }
}

/* 20260731 ADMIN mobile session and layout refinement.
   These rules are deliberately scoped to mobile and leave desktop layouts unchanged. */
.auth-mobile-home-hero {
  display: none;
}

@media (max-width: 760px) {
  .classroom-body.classroom-admin-user .mobile-classroom-quick-nav {
    display: none;
  }

  .classroom-body.classroom-admin-user .auth-topbar-nav {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .classroom-body.classroom-admin-user .auth-topbar-nav::-webkit-scrollbar,
  .admin-system-body .command-menu::-webkit-scrollbar {
    display: none;
  }

  .admin-system-body .command-menu {
    position: static;
    display: flex;
    grid-template-columns: none;
    flex-wrap: nowrap;
    gap: 8px;
    max-height: none;
    padding: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    touch-action: pan-x;
    -webkit-overflow-scrolling: touch;
  }

  .admin-system-body .command-menu button {
    flex: 0 0 172px;
    width: 172px;
    min-height: 62px;
    scroll-snap-align: start;
  }

  .auth-body .auth-visual {
    min-height: 0;
    align-content: start;
    padding: 26px 18px 24px;
    color: #172033;
    background:
      radial-gradient(circle at 92% 5%, rgba(255, 222, 156, 0.38), transparent 26%),
      linear-gradient(155deg, #fffdf8 0%, #f5f9ff 60%, #eef6ff 100%);
  }

  .auth-body .auth-visual > .auth-visual-default {
    display: none;
  }

  .auth-body .auth-mobile-home-hero {
    display: grid;
    gap: 16px;
  }

  .auth-body .auth-mobile-home-hero .eyebrow {
    margin: 0;
    color: #1f67cf;
  }

  .auth-body .auth-mobile-home-hero h1 {
    max-width: none;
    margin: 0;
    color: #111d31;
    font-size: clamp(34px, 10vw, 46px);
    line-height: 1.08;
  }

  .auth-body .auth-visual .auth-mobile-home-description {
    max-width: none;
    margin: 0;
    color: #52647d;
    font-size: 15px;
    line-height: 1.72;
  }

  .auth-mobile-home-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
  }

  .auth-mobile-home-actions .button {
    min-height: 46px;
    justify-content: center;
    padding: 10px 12px;
  }

  .auth-mobile-home-stats {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
    margin: 0;
  }

  .auth-mobile-home-stats a {
    display: grid;
    min-width: 0;
    min-height: 66px;
    align-content: center;
    gap: 3px;
    padding: 8px 3px;
    color: inherit;
    text-align: center;
    text-decoration: none;
    background: rgba(255, 255, 255, 0.86);
    border: 1px solid #dfe7f1;
    border-radius: 12px;
    box-shadow: 0 8px 22px rgba(21, 32, 51, 0.06);
  }

  .auth-mobile-home-stats dt {
    color: #1f67cf;
    font-size: 20px;
    font-weight: 900;
    line-height: 1;
  }

  .auth-mobile-home-stats dd {
    margin: 0;
    overflow: hidden;
    color: #667085;
    font-size: 10px;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* Incomplete phone profiles receive a direct, touch-friendly completion entry. */
.leaderboard-shortcuts a.is-profile-prompt {
  color: #167b91;
  border-color: #9ed9e4;
  background: linear-gradient(135deg, #edfafa, #edf5ff);
}

.leaderboard-shortcuts a.is-profile-prompt:hover,
.leaderboard-shortcuts a.is-profile-prompt:focus-visible {
  color: #0c6980;
  border-color: #4fb7c6;
  background: linear-gradient(135deg, #e1f8f6, #e4f0ff);
}

.profile-locked-qr {
  display: grid;
  place-items: center;
  width: 220px;
  height: 220px;
  max-width: 100%;
  margin: 14px auto;
  padding: 20px;
  box-sizing: border-box;
  border: 1px dashed #aab9cc;
  border-radius: 12px;
  color: #63738a;
  background: repeating-linear-gradient(45deg, #f5f8fc, #f5f8fc 10px, #edf2f8 10px, #edf2f8 20px);
  text-align: center;
  font-weight: 700;
}

.classroom-profile-view-only-notice {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 16px;
  padding: 14px 16px;
  border: 1px solid #cbd9ee;
  border-radius: 12px;
  background: #f4f8ff;
}

.classroom-profile-view-only-notice span { color: #0f8191; font-weight: 800; white-space: nowrap; }
.classroom-profile-view-only-notice p { flex: 1; margin: 0; color: #586b83; }
.classroom-profile-view-only-notice .button { white-space: nowrap; }

@media (max-width: 640px) {
  .classroom-profile-view-only-notice { align-items: flex-start; flex-wrap: wrap; }
  .classroom-profile-view-only-notice .button { width: 100%; }
}

/* 2026-07-30 mobile-only sync for newly added work-experience, recruitment and payment-confirmation UI. */
@media (max-width: 760px) {
  .career-resume-form .professional-experience-card {
    gap: 12px;
    padding: 12px;
  }

  .career-resume-form .professional-experience-card-head {
    align-items: flex-start;
  }

  .career-resume-form .professional-experience-delete,
  .career-resume-form .professional-experience-detail-delete {
    min-height: 44px;
    padding: 8px 12px;
  }

  .career-resume-form .professional-experience-period > span:not(.professional-experience-field-label) {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 5px;
  }

  .career-resume-form .professional-experience-detail-list > label {
    gap: 6px;
    padding: 10px;
    border: 1px solid #e2eaf3;
    border-radius: 8px;
    background: #fff;
  }

  .career-resume-form .professional-experience-detail-list textarea {
    min-height: 96px;
  }

  .career-resume-form .professional-experience-detail-add,
  .career-resume-form .professional-experience-add {
    width: 100%;
    min-height: 46px;
    justify-content: center;
  }

  .professional-experience-preview-list article {
    min-width: 0;
    padding: 10px;
  }

  .professional-experience-preview-list article header {
    gap: 5px;
  }

  .recruitment-chat-popup-overlay,
  .recruitment-post-preview-overlay,
  .recruitment-resume-preview-overlay,
  .recruitment-delete-confirm-overlay {
    align-items: end;
    padding: max(8px, env(safe-area-inset-top)) 8px max(8px, env(safe-area-inset-bottom));
  }

  .recruitment-chat-popup,
  .recruitment-post-preview,
  .recruitment-resume-preview {
    width: 100%;
    max-width: none;
    max-height: calc(100dvh - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    border-radius: 14px;
  }

  .recruitment-chat-popup > header,
  .recruitment-post-preview > header,
  .recruitment-resume-preview > header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    padding: 12px;
  }

  .recruitment-chat-popup > header button,
  .recruitment-post-preview > header button,
  .recruitment-resume-preview > header button {
    min-width: 58px;
    min-height: 44px;
    padding: 8px 10px;
  }

  .recruitment-chat-popup-body,
  .recruitment-post-preview-list,
  .recruitment-resume-preview-body {
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .recruitment-post-preview-list,
  .recruitment-resume-preview-body {
    padding: 10px;
  }

  .recruitment-post-preview-list > article {
    min-width: 0;
    padding: 11px;
  }

  .recruitment-post-preview-list > article > header {
    gap: 8px;
  }

  .recruitment-post-preview-list dd,
  .recruitment-resume-preview-body dd,
  .recruitment-resume-preview-body section p {
    overflow-wrap: anywhere;
  }

  .recruitment-delete-confirm {
    width: 100%;
    max-width: none;
    padding: 20px 16px;
    border-radius: 14px;
  }

  .recruitment-delete-confirm > div {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 18px;
  }

  .recruitment-delete-confirm button {
    min-height: 46px;
    padding: 9px 10px;
  }

  .recruitment-chat-form,
  .recruitment-chat-popup .recruitment-chat-form {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    padding: 10px;
  }

  .recruitment-chat-form textarea,
  .recruitment-chat-popup .recruitment-chat-form textarea {
    width: 100%;
    min-height: 88px;
  }

  .recruitment-chat-form > .recruitment-chat-send,
  .recruitment-chat-popup .recruitment-chat-form > .recruitment-chat-send,
  .recruitment-chat-form > .recruitment-chat-close,
  .recruitment-chat-popup .recruitment-chat-form > .recruitment-chat-close {
    width: 100%;
    min-width: 0;
    min-height: 46px;
  }

  .recruitment-chat-list-action button,
  .recruitment-chat-popup .recruitment-chat-list-action button {
    min-height: 38px;
    padding: 7px 10px;
  }

  .virtual-recharge-password-dialog {
    align-items: end;
    padding: max(10px, env(safe-area-inset-top)) 10px max(10px, env(safe-area-inset-bottom));
  }

  .virtual-recharge-password-dialog-card {
    width: 100%;
    max-height: calc(100dvh - 20px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    padding: 18px 14px;
    overflow-y: auto;
    border-radius: 14px;
  }

  .virtual-recharge-password-dialog-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .virtual-recharge-password-dialog-actions button {
    width: 100%;
    min-height: 46px;
    padding: 9px 8px;
  }

  .payment-password-dialog {
    align-items: end;
    padding: max(10px, env(safe-area-inset-top)) 10px max(10px, env(safe-area-inset-bottom));
  }

  .payment-password-dialog-card {
    width: 100%;
    max-height: calc(100dvh - 20px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    padding: 20px 15px;
    overflow-y: auto;
    border-radius: 16px;
  }

  .payment-password-dialog-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .payment-password-dialog-actions button {
    width: 100%;
    min-width: 0;
    min-height: 46px;
  }
}

@media (max-width: 390px) {
  .career-resume-form .professional-experience-card-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .career-resume-form .professional-experience-delete {
    width: 100%;
  }

  .recruitment-post-preview-list > article > header {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }
}

.recruiter-detail-card .resume-highlight-grid,
.recruiter-detail-card .resume-section-list,
.recruiter-detail-card .recruiter-contact-grid { font-family: "SimHei", "Microsoft YaHei", sans-serif; }
.recruiter-detail-card .resume-highlight-grid p,
.recruiter-detail-card .resume-highlight-grid small,
.recruiter-detail-card .resume-section-list p,
.recruiter-detail-card .recruiter-contact-grid span { color: #17233b; font-weight: 400; }
.recruitment-invite-form { gap: 10px; padding: 14px; border: 1px solid #9dd7d2; border-radius: 10px; background: linear-gradient(135deg, #f4fbfb, #f5f9ff); box-shadow: 0 8px 20px rgba(30, 99, 143, .08); }
.recruitment-invite-head { display: grid; gap: 3px; padding: 0 0 10px 11px; border-bottom: 1px solid #cfe4e5; border-left: 4px solid #1ca49b; }
.recruitment-invite-head span { color: #16877f; font-size: 12px; font-weight: 900; }
.recruitment-invite-head strong { color: #17233b; font-size: 17px; }
.recruitment-invite-head p { margin: 0; color: #52657d; font-size: 13px; line-height: 1.45; }
.recruitment-invite-form label { color: #17233b; font-family: "SimHei", "Microsoft YaHei", sans-serif; font-weight: 400; }
.recruitment-invite-form select, .recruitment-invite-form textarea { padding: 9px 10px; border: 1px solid #bcd4e8; border-radius: 7px; color: #17233b; background: #fff; font: inherit; }
.recruitment-invite-form button[type="submit"] { min-height: 42px; color: #fff; border: 0; border-radius: 8px; background: linear-gradient(135deg, #2374d5, #1da49b); box-shadow: 0 5px 12px rgba(36, 111, 204, .18); font-weight: 900; }
.recruitment-invite-feedback { min-height: 18px; margin: 0; color: #08746f; font-size: 13px; font-weight: 800; }

/* Personal overseas recharge: clarify banking data, recognition and final payment. */
.personal-overseas-card { gap: 14px; box-shadow: 0 10px 26px rgba(42, 94, 150, 0.08); }
.personal-overseas-card h3 { padding-left: 12px; border-left: 4px solid #2475d3; color: #17345d; }
.personal-overseas-form { padding: 12px; border: 1px solid #abd1f6; border-radius: 10px; background: rgba(255,255,255,.62); }
.personal-overseas-form > label { min-width: 0; padding: 2px 0; }
.personal-overseas-form > label input { min-height: 40px; padding: 8px 10px; border: 1px solid #c9dced; border-radius: 7px; background: #fff; font: inherit; }
.personal-overseas-form > label:has(textarea) { grid-column: 1 / -1; padding: 10px; border: 1px solid #add8d4; border-radius: 9px; background: #f2fbfa; }
.personal-overseas-form textarea { min-height: 76px; padding: 9px 10px; border: 1px solid #b9d9d6; border-radius: 7px; background: #fff; font: inherit; resize: vertical; }
.personal-overseas-form > button[data-overseas-paste-recognize] { min-height: 42px; color: #08746f; border-color: #91d4ce; border-radius: 8px; background: #f2fbfa; font-weight: 900; }
.personal-overseas-form > label:has(input[type="file"]) { grid-column: 1 / -1; padding: 10px; border: 1px dashed #b7cde9; border-radius: 9px; background: #f8fbff; }
.overseas-file-hint { margin: 0; padding: 0 4px; }
.overseas-cny-preview { margin: 0; padding: 12px; border: 1px solid #9fc8f5; border-radius: 9px; color: #17466d; background: linear-gradient(90deg, #edf6ff, #effbf9); font-weight: 800; }
.personal-overseas-form > button[type="submit"] { min-height: 48px; color: #fff; border: 0; border-radius: 8px; background: linear-gradient(135deg, #246ed8, #1aa69c); box-shadow: 0 6px 14px rgba(35, 111, 212, .18); font-weight: 900; cursor: pointer; }

/* Learner job detail: render responsibility and requirement as readable published-style rows. */
.talent-job-copy { padding: 12px 14px; border: 1px solid #d8e5f2; border-radius: 9px; background: #fbfdff; }
.talent-job-copy.is-responsibility { border-top: 4px solid #238fba; }
.talent-job-copy.is-requirement { border-top: 4px solid #7665d8; }
.talent-job-copy > strong { display: block; margin-bottom: 7px; color: #17233b; }
.talent-job-lines { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.talent-job-lines li { position: relative; padding-left: 16px; color: #455b77; line-height: 1.65; }
.talent-job-lines li::before { content: ""; position: absolute; top: .68em; left: 0; width: 7px; height: 7px; border-radius: 50%; background: #238fba; }
.talent-job-copy.is-requirement .talent-job-lines li::before { background: #7665d8; }

/* Colour cues keep the learner talent list readable without changing its filters or actions. */
.talent-recruitment-panel .talent-filter-form { padding: 12px; border-left: 4px solid #27a49d; border-radius: 9px; background: #f8fcff; }
.talent-recruitment-panel .talent-job-table-head { border-top: 4px solid #2d73d4; }
.talent-recruitment-panel .talent-job-row { border-left: 4px solid #2e79d5; }
.talent-recruitment-panel .talent-job-row.active { border-left-color: #1ba69b; }

/* Recruitment typography: SimHei is a typeface choice, not a request to enlarge or bold data. */
.talent-recruitment-panel .talent-filter-form label,
.talent-recruitment-panel .talent-filter-form input,
.talent-recruitment-panel .talent-filter-form select,
.talent-recruitment-panel .talent-job-main > strong,
.talent-recruitment-panel .talent-job-main > span,
.talent-recruitment-panel .talent-job-main > small,
.career-resume-form label,
.career-resume-form input,
.career-resume-form select,
.career-resume-form textarea,
.career-resume-form.structured-form .form-module label,
.career-resume-form.structured-form .form-module input,
.career-resume-form.structured-form .form-module select,
.career-resume-form.structured-form .form-module textarea,
.career-resume-form.structured-form .platform-major-module input[readonly],
.career-resume-form.structured-form .platform-evaluation-module input[readonly],
.career-resume-form.structured-form .platform-evaluation-module textarea[readonly] {
  font-family: "SimHei", "Microsoft YaHei", sans-serif;
  font-size: inherit;
  font-weight: 400;
}

/* Keep the existing hierarchy: section legends and action buttons remain emphasized. */
.talent-recruitment-panel .talent-job-main > strong,
.talent-recruitment-panel .talent-job-main > span,
.talent-recruitment-panel .talent-job-main > small {
  color: #17233b;
}

/* Recruitment composer: keep popup and fixed-panel actions visually identical. */
.recruitment-chat-form,
.recruitment-chat-popup .recruitment-chat-form {
  gap: 12px;
  padding: 10px 16px;
  background: linear-gradient(180deg, #ffffff, #f8fbff);
}

.recruitment-chat-form > .recruitment-chat-send,
.recruitment-chat-popup .recruitment-chat-form > .recruitment-chat-send,
.recruitment-chat-form > .recruitment-chat-close,
.recruitment-chat-popup .recruitment-chat-form > .recruitment-chat-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  min-height: 56px;
  padding: 0 18px;
  border-radius: 11px;
  font-size: 15px;
  line-height: 1;
  white-space: nowrap;
}

.recruitment-chat-form > .recruitment-chat-send,
.recruitment-chat-popup .recruitment-chat-form > .recruitment-chat-send {
  min-width: 124px;
  border: 1px solid rgba(8, 111, 139, 0.46);
  color: #ffffff;
  background: linear-gradient(135deg, #18a59d 0%, #2478d5 100%);
  box-shadow: 0 8px 18px rgba(31, 119, 181, 0.25);
  font-weight: 900;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: transform 160ms ease, box-shadow 160ms ease, filter 160ms ease;
}

.recruitment-chat-form > .recruitment-chat-close,
.recruitment-chat-popup .recruitment-chat-form > .recruitment-chat-close {
  min-width: 112px;
  border: 1px solid #e2c4c4;
  color: #a34a4a;
  background: linear-gradient(180deg, #ffffff 0%, #fff7f7 100%);
  box-shadow: 0 5px 13px rgba(132, 62, 62, 0.09);
  font-weight: 800;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: transform 160ms ease, border-color 160ms ease, color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.recruitment-chat-form > .recruitment-chat-send:hover,
.recruitment-chat-popup .recruitment-chat-form > .recruitment-chat-send:hover {
  filter: brightness(1.045);
  transform: translateY(-2px);
  box-shadow: 0 11px 23px rgba(31, 119, 181, 0.33);
}

.recruitment-chat-form > .recruitment-chat-close:hover,
.recruitment-chat-popup .recruitment-chat-form > .recruitment-chat-close:hover {
  border-color: #d99f9f;
  color: #943b3b;
  background: linear-gradient(180deg, #fffafa 0%, #ffeded 100%);
  transform: translateY(-2px);
  box-shadow: 0 8px 17px rgba(132, 62, 62, 0.14);
}

.recruitment-chat-form > .recruitment-chat-send:focus-visible,
.recruitment-chat-popup .recruitment-chat-form > .recruitment-chat-send:focus-visible,
.recruitment-chat-form > .recruitment-chat-close:focus-visible,
.recruitment-chat-popup .recruitment-chat-form > .recruitment-chat-close:focus-visible {
  outline: 3px solid rgba(36, 120, 213, 0.22);
  outline-offset: 2px;
}

.recruitment-chat-form > .recruitment-chat-send:active,
.recruitment-chat-popup .recruitment-chat-form > .recruitment-chat-send:active,
.recruitment-chat-form > .recruitment-chat-close:active,
.recruitment-chat-popup .recruitment-chat-form > .recruitment-chat-close:active {
  transform: translateY(0);
  box-shadow: 0 3px 8px rgba(30, 58, 95, 0.12);
}

/* Homepage header search: keep the submit action aligned with the site palette. */
.home-site-header .search.voice-search {
  grid-template-columns: 52px minmax(0, 1fr) 76px;
}

.home-site-header .search.voice-search > button[type="submit"],
.strict-home .strict-search.voice-search > button[type="submit"] {
  min-width: 76px;
  padding: 0 18px;
  border: 0;
  border-left: 1px solid rgba(255, 255, 255, 0.34);
  color: #fff;
  background: linear-gradient(135deg, var(--blue), var(--teal));
  box-shadow: none;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: filter 160ms ease, box-shadow 160ms ease;
}

.home-site-header .search.voice-search > button[type="submit"]:hover,
.strict-home .strict-search.voice-search > button[type="submit"]:hover {
  filter: brightness(0.95);
  box-shadow: 0 7px 16px rgba(31, 98, 210, 0.16);
}

.home-site-header .search.voice-search > button[type="submit"]:focus-visible,
.strict-home .strict-search.voice-search > button[type="submit"]:focus-visible {
  outline: 3px solid rgba(31, 98, 210, 0.22);
  outline-offset: -3px;
}

/* Mobile-only compact peer navigation: one row with touch scrolling. */
@media (max-width: 760px) {
  body :is(
    .declaration-tabs,
    .business-guide-tabs,
    .classroom-board-tabs,
    .career-sub-tabs,
    .point-exchange-tabs,
    .personal-center-tabs,
    .personal-promotion-tabs,
    .ecommerce-category-bar,
    .opportunities-tabs,
    .unified-cart-tabs
  ),
  .auth-body .auth-topbar-nav,
  .declaration-body .auth-topbar-nav,
  .unified-cart-page .auth-topbar-nav,
  .pricing-page .pricing-menu {
    display: flex !important;
    grid-template-columns: none !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    gap: 8px;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-padding-inline: 8px;
    scroll-snap-type: x proximity;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }

  body :is(
    .declaration-tabs,
    .business-guide-tabs,
    .classroom-board-tabs,
    .career-sub-tabs,
    .point-exchange-tabs,
    .personal-center-tabs,
    .personal-promotion-tabs,
    .ecommerce-category-bar,
    .opportunities-tabs,
    .unified-cart-tabs
  ) > :is(button, a),
  .auth-body .auth-topbar-nav > a,
  .declaration-body .auth-topbar-nav > a,
  .unified-cart-page .auth-topbar-nav > a,
  .pricing-page .pricing-menu > button {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 108px;
    min-height: 44px;
    padding: 8px 13px;
    white-space: nowrap;
    scroll-snap-align: start;
  }

  .business-guide-body .business-guide-tabs > button {
    min-width: 132px;
  }

  .classroom-body .classroom-board-tabs > button {
    min-width: 116px;
  }

  .classroom-body .point-exchange-tabs > button,
  .points-public-body .ecommerce-category-bar > button {
    min-width: 104px;
  }

  .classroom-body .auth-topbar-nav > a,
  .profile-body .auth-topbar-nav > a {
    min-width: 104px;
  }

  .pricing-page .pricing-menu {
    position: static;
    padding: 2px 0 8px;
  }

  .pricing-page .pricing-menu > button {
    min-width: 128px;
    text-align: center;
  }

  .home-site-header .menu-button {
    display: grid;
  }
}

/* Profile-only mobile actions: keep all four pills on one touch-friendly row. */
@media (max-width: 760px) {
  .profile-body .auth-feature-list {
    display: flex;
    grid-template-columns: none;
    flex-wrap: nowrap;
    gap: 8px;
    width: 100%;
    padding: 0 0 8px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }

  .profile-body .auth-feature-list span {
    flex: 1 0 calc((100% - 24px) / 4);
    min-width: 84px;
    min-height: 48px;
    padding: 7px 9px;
    white-space: nowrap;
    scroll-snap-align: start;
  }
}

/* 2026-07-28 mobile homepage: attachment-led sections, desktop remains unchanged. */
.menu-button-label,
.floating-service-toggle {
  display: none;
}

@media (max-width: 760px) {
  body > .strict-home,
  .mobile-home-actions {
    display: none;
  }

  body > main {
    display: flex;
    width: 100%;
    overflow: hidden;
  }

  body > .floating-service {
    display: grid;
  }

  body > .site-footer {
    display: grid;
  }

  .site-header {
    grid-template-columns: minmax(0, 1fr) auto;
    min-height: 66px;
    padding: 10px 14px;
  }

  .brand {
    gap: 10px;
    min-width: 0;
  }

  .brand-mark {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    font-size: 14px;
  }

  .brand strong {
    overflow: hidden;
    max-width: calc(100vw - 126px);
    font-size: 18px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .brand small {
    display: none;
  }

  .menu-button {
    display: grid;
    grid-template-columns: 19px auto;
    grid-template-rows: repeat(3, 4px);
    gap: 2px 7px;
    width: 74px;
    height: 44px;
    align-content: center;
    align-items: center;
    padding: 8px 9px;
    border-radius: 10px;
  }

  .menu-button span {
    grid-column: 1;
    width: 19px;
    height: 2px;
    margin: 0;
  }

  .menu-button-label {
    display: block;
    grid-column: 2;
    grid-row: 1 / 4;
    color: #344054;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
  }

  .mobile-menu.open {
    position: fixed;
    inset: 66px 0 auto;
    z-index: 19;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    max-height: min(68vh, 520px);
    padding: 14px;
    overflow-y: auto;
    background: rgba(255, 255, 255, 0.98);
    border-bottom: 1px solid #dce7f5;
    box-shadow: 0 22px 46px rgba(21, 32, 51, 0.16);
    -webkit-overflow-scrolling: touch;
  }

  .mobile-menu.open a {
    display: grid;
    min-height: 46px;
    place-items: center;
    padding: 8px;
    color: #28415f;
    background: #f7faff;
    border: 1px solid #dce7f5;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 800;
    text-align: center;
  }

  .hero {
    min-height: auto;
    gap: 22px;
    padding: 30px 14px 34px;
    overflow: visible;
    background:
      radial-gradient(circle at 92% 4%, rgba(242, 184, 75, 0.18), transparent 180px),
      linear-gradient(145deg, #f8fbff, #eef5ff);
  }

  .hero::after {
    display: none;
  }

  .hero-copy,
  .hero-copy h1,
  .hero-text {
    max-width: none;
  }

  .hero-copy h1 {
    margin-bottom: 14px;
    font-size: clamp(31px, 9.2vw, 40px);
    line-height: 1.12;
  }

  .hero-text {
    margin-bottom: 0;
    font-size: 15px;
    line-height: 1.72;
  }

  .hero-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
    margin-top: 18px;
  }

  .hero-actions .button {
    width: 100%;
    min-height: 44px;
    justify-content: center;
    padding: 10px 12px;
    font-size: 14px;
  }

  .hero-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 18px;
  }

  .hero-stats a {
    min-height: 78px;
    padding: 11px 10px;
    border-radius: 12px;
  }

  .hero-stats a:last-child {
    grid-column: 1 / -1;
  }

  .hero-stats dt {
    font-size: 23px;
  }

  .hero-stats dd {
    font-size: 12px;
    white-space: normal;
  }

  .leaderboard-visual {
    width: 100%;
    gap: 9px;
    padding: 8px;
    border-radius: 16px;
  }

  .leaderboard-shortcuts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    padding: 0;
  }

  .leaderboard-shortcuts a {
    min-height: 68px;
    padding: 8px 5px;
    border: 1px solid #dce7f5;
    border-radius: 10px;
    background: #fff;
    font-size: 14px;
  }

  .leaderboard-shortcuts .icon {
    width: 28px;
    height: 28px;
  }

  .leaderboard-tabs {
    display: flex;
    gap: 7px;
    overflow-x: auto;
    padding: 7px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }

  .leaderboard-tabs button,
  .leaderboard-tabs button:first-child {
    flex: 0 0 auto;
    min-width: 88px;
    min-height: 38px;
    padding: 7px 10px;
    font-size: 12px;
  }

  .leaderboard-card {
    min-height: 250px;
    padding: 15px;
  }

  .leaderboard-head h2 {
    font-size: 25px;
  }

  .section {
    width: 100%;
    padding: 38px 14px;
    border-top: 1px solid #e1e9f3;
  }

  body > main > #plan {
    padding-top: 38px;
  }

  .section-heading,
  #system .section-heading,
  .about-intro-head {
    max-width: none;
    margin-bottom: 20px;
  }

  .section-heading h2,
  #system .section-heading h2,
  .about-intro-head h2 {
    margin-bottom: 12px;
    font-size: clamp(26px, 7.7vw, 34px);
    line-height: 1.2;
    white-space: normal;
  }

  .section-heading p:not(.eyebrow),
  .about-intro-head p:not(.eyebrow) {
    margin-bottom: 0;
    font-size: 14px;
    line-height: 1.7;
  }

  .process {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .process article {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 6px 12px;
    min-height: 0;
    padding: 15px;
    border-radius: 12px;
  }

  .process span {
    grid-row: 1 / 3;
    width: 42px;
    height: 42px;
    margin: 0;
  }

  .process h3,
  .process p {
    grid-column: 2;
    margin: 0;
  }

  .process h3 {
    font-size: 18px;
  }

  .process p {
    color: #647084;
    font-size: 13px;
    line-height: 1.55;
  }

  .smart-support {
    background: #f8fbff;
  }

  .smart-support-grid,
  .career-planning-grid,
  .talent-hub-grid,
  .course-grid,
  .about-intro-layout {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .smart-support-card {
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 5px 12px;
    min-height: 0;
    padding: 16px;
    border-radius: 12px;
  }

  .smart-support-card span {
    grid-row: 1 / 3;
    width: 40px;
    height: 40px;
  }

  .smart-support-card strong,
  .smart-support-card p {
    grid-column: 2;
    margin: 0;
  }

  .smart-support-card strong {
    font-size: 19px;
  }

  .smart-support-card p {
    font-size: 13px;
    line-height: 1.55;
  }

  .smart-support-detail.is-open {
    grid-template-columns: 1fr;
    gap: 14px;
    margin-top: 12px;
    padding: 18px;
    border-radius: 12px;
  }

  .smart-support-detail h3 {
    font-size: 23px;
  }

  .support-panel {
    padding: 16px;
  }

  .career-planning-section {
    padding-top: 38px;
    padding-bottom: 38px;
    background: #fbfaff;
  }

  .system-section {
    padding-top: 38px;
    background: #f7fbff;
  }

  .career-planning-card,
  .talent-hub-card {
    min-height: 0;
    padding: 18px;
    border-radius: 12px;
  }

  .career-planning-card h3,
  .talent-hub-card h3 {
    margin: 14px 0 8px;
    font-size: 21px;
  }

  .career-planning-card p,
  .talent-hub-card p {
    margin-bottom: 12px;
    font-size: 14px;
    line-height: 1.65;
  }

  .career-planning-card b,
  .talent-hub-card b {
    align-self: auto;
    font-size: 14px;
  }

  .band {
    padding-inline: 14px;
  }

  .tabs {
    flex-wrap: nowrap;
    gap: 7px;
    margin: 0 -14px 18px;
    padding: 0 14px 5px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .tabs button {
    flex: 0 0 auto;
    min-height: 40px;
    padding: 8px 12px;
    font-size: 13px;
  }

  .course-card,
  .course-grid .course-card:nth-child(4),
  .course-grid .course-card:nth-child(5),
  .course-grid.is-filtered .course-card:not(.is-hidden) {
    grid-column: auto;
    width: 100%;
    min-height: 0;
    padding: 18px;
    border-radius: 12px;
  }

  .course-card h3,
  body > main > #courses .course-grid.is-filtered .course-card:not(.is-hidden) h3 {
    font-size: 21px;
  }

  .course-card p {
    font-size: 14px;
    line-height: 1.65;
  }

  .course-card ul {
    margin-top: 4px;
  }

  .about-intro {
    gap: 20px;
  }

  .about-intro-card {
    min-height: 0;
    padding: 22px;
    border-radius: 14px;
  }

  .about-intro-card span {
    margin-bottom: 16px;
  }

  .about-intro-card h3 {
    font-size: 26px;
  }

  .about-intro-list article {
    min-height: 0;
    padding: 18px 18px 18px 48px;
    border-radius: 12px;
  }

  .about-intro-list article::before {
    left: 19px;
    top: 24px;
  }

  .faq-list {
    gap: 9px;
  }

  .faq-list details {
    padding: 16px;
    border-radius: 10px;
  }

  .faq-list summary {
    font-size: 15px;
    line-height: 1.5;
  }

  .faq-list p {
    font-size: 14px;
    line-height: 1.65;
  }

  .site-footer {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 22px 14px calc(24px + env(safe-area-inset-bottom));
  }

  .site-footer > div:first-child,
  .site-footer .lead-form {
    display: none;
  }

  .site-footer .footer-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .site-footer .footer-links a {
    display: grid;
    min-height: 42px;
    place-items: center;
    padding: 8px;
    color: #dfe9f7;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 9px;
    font-size: 13px;
    text-align: center;
  }

  .site-footer .footer-links a:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  .floating-service {
    position: fixed;
    right: 0;
    top: 50%;
    z-index: 75;
    grid-template-columns: 1fr;
    width: 108px;
    gap: 7px;
    padding: 10px 8px 10px 18px;
    border-radius: 16px 0 0 16px;
    transform: translate(0, -50%);
    transition: transform 0.22s ease;
  }

  .floating-service.is-mobile-collapsed {
    transform: translate(calc(100% - 14px), -50%);
  }

  .floating-service-toggle {
    position: absolute;
    inset: 0 auto 0 0;
    z-index: 2;
    display: grid;
    width: 16px;
    min-height: 48px;
    place-items: center;
    padding: 0;
    color: #1f62d2;
    background: #eaf3ff;
    border: 0;
    border-right: 1px solid #c9daf3;
    border-radius: 16px 0 0 16px;
    cursor: pointer;
  }

  .floating-service-toggle::before {
    position: absolute;
    left: -24px;
    width: 40px;
    height: 64px;
    content: "";
  }

  .floating-service-toggle span {
    font-size: 21px;
    font-weight: 900;
    line-height: 1;
  }

  .floating-service-title,
  .floating-service > a,
  .floating-service > .service-phone-popover {
    transition: opacity 0.14s ease;
  }

  .floating-service.is-mobile-collapsed .floating-service-title,
  .floating-service.is-mobile-collapsed > a,
  .floating-service.is-mobile-collapsed > .service-phone-popover {
    opacity: 0;
    pointer-events: none;
  }

  .floating-service a {
    min-height: 36px;
    padding: 0 8px;
    font-size: 11px;
  }

  .floating-service a::before {
    width: 7px;
    height: 7px;
  }

  .floating-service .service-phone-popover {
    right: calc(100% + 4px);
    top: 40px;
    width: min(252px, calc(100vw - 128px));
    max-height: 62vh;
    margin-right: 4px;
    padding: 13px;
  }

  .floating-service .public-account-popover {
    top: 118px;
  }

  .service-phone-qr {
    width: min(158px, 100%);
    height: auto;
    aspect-ratio: 1;
  }
}

@media (max-width: 360px) {
  .hero-actions {
    grid-template-columns: 1fr;
  }

  .mobile-menu.open {
    grid-template-columns: 1fr;
  }

}

@media (prefers-reduced-motion: reduce) {
  .floating-service {
    transition: none;
  }
}

/* Mobile workspace pass: compact classroom content, messages and primary entry pages. */
@media (max-width: 760px) {
  .classroom-body .classroom-course-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    width: 100%;
    max-width: 100%;
    margin-bottom: 10px;
    padding: 6px;
    overflow: visible;
    touch-action: pan-y;
  }

  .classroom-body .classroom-course-tabs > button {
    flex: 1 1 calc(50% - 6px);
    width: auto;
    min-width: 0;
    max-width: 100%;
    min-height: 40px;
    padding: 7px 8px;
    font-size: 13px;
    white-space: normal;
  }

  .classroom-body .classroom-status {
    grid-template-columns: minmax(0, 1fr);
  }

  .classroom-body .classroom-status-copy {
    min-width: 0;
  }

  .classroom-body .classroom-sync-state {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    min-height: 24px;
    padding: 0 9px;
    color: #14756f;
    background: #eaf8f6;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
  }

  .classroom-body .classroom-course {
    gap: 14px;
    padding: 16px;
  }

  .classroom-body .classroom-course-head {
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 12px;
    padding-bottom: 12px;
  }

  .classroom-body .classroom-course-head > span {
    width: 42px;
    height: 42px;
    border-radius: 10px;
  }

  .classroom-body .classroom-course-head h2 {
    font-size: 18px;
  }

  .classroom-body .classroom-course-head p {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: 13px;
    line-height: 1.55;
  }

  .classroom-body .classroom-homework-summary {
    gap: 10px;
    padding: 13px;
  }

  .classroom-body .classroom-homework-title-copy > strong {
    font-size: 15px;
  }

  .classroom-body .personal-center-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .classroom-body .personal-center-tabs button {
    min-height: 44px;
    padding: 8px;
    font-size: 14px;
  }

  .classroom-body .personal-message-list {
    gap: 10px;
  }

  .classroom-body .personal-message-list article {
    gap: 6px;
    padding: 13px;
  }

  .classroom-body .personal-message-list article p {
    font-size: 14px;
    line-height: 1.6;
  }

  .profile-body .auth-topbar,
  .recruit-teach-body .auth-topbar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    min-height: 0;
    padding: 12px;
  }

  .profile-body .auth-topbar-logo,
  .recruit-teach-body .auth-topbar-logo {
    width: 100%;
  }

  .profile-body .auth-topbar-nav,
  .recruit-teach-body .auth-topbar-nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    gap: 8px;
    overflow: visible;
  }

  .profile-body .auth-topbar-nav a,
  .recruit-teach-body .auth-topbar-nav a {
    min-width: 0;
    min-height: 44px;
    padding: 8px;
    text-align: center;
  }

  .unified-cart-main {
    width: min(100% - 24px, 100%);
    padding: 14px 0 42px;
  }

  .unified-cart-hero {
    gap: 12px;
    align-items: flex-start;
    flex-direction: column;
    padding: 18px;
  }

  .unified-cart-hero h1 {
    font-size: 25px;
  }

  .pricing-page .section-heading,
  .pricing-page .pricing-panel,
  .profile-body .profile-shell {
    border-radius: 12px;
  }
}

/* Mobile-only classroom refinement. Desktop structure and classroom rules stay unchanged. */
.mobile-classroom-quick-nav {
  display: none;
}

@media (max-width: 760px) {
  .classroom-body .auth-topbar-nav {
    display: none;
  }

  .classroom-body .mobile-classroom-quick-nav {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    width: 100%;
    gap: 6px;
  }

  .classroom-body .mobile-classroom-quick-nav a {
    display: grid;
    min-width: 0;
    min-height: 44px;
    place-items: center;
    padding: 7px 3px;
    color: #174fae;
    background: #f5f8ff;
    border: 1px solid #c9daf3;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.2;
    text-align: center;
  }

  .classroom-body .mobile-classroom-quick-nav a[aria-current="page"] {
    color: #fff;
    background: linear-gradient(135deg, #1e70dd, #149cad);
    border-color: transparent;
  }

  .classroom-body .auth-topbar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    min-height: 0;
    padding: 12px;
  }

  .classroom-body .auth-topbar-logo {
    width: 100%;
    gap: 9px;
  }

  .classroom-body .auth-topbar-logo span {
    width: 38px;
    height: 38px;
  }

  .classroom-body .auth-topbar-logo strong {
    font-size: 22px;
  }

  .classroom-body .auth-topbar-nav {
    display: none;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    gap: 8px;
    overflow: visible;
    text-align: center;
  }

  .classroom-body .auth-topbar-nav a {
    min-width: 0;
    min-height: 44px;
    padding: 8px 10px;
    color: #174fae;
    background: #f5f8ff;
    border: 1px solid #c9daf3;
    border-radius: 10px;
  }

  .classroom-body .auth-topbar-nav a:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  .classroom-body .classroom-page {
    width: min(100% - 24px, 100%);
    gap: 14px;
  }

  .classroom-body .classroom-hero {
    display: none;
  }

  .classroom-body .classroom-shell {
    gap: 14px;
    padding: 12px;
  }

  .classroom-body .classroom-status {
    display: grid;
    gap: 10px;
    align-items: stretch;
    padding: 14px;
    font-size: 15px;
    line-height: 1.55;
  }

  .classroom-body .classroom-logout-button {
    width: 100%;
    min-height: 44px;
    border-radius: 9px;
  }

  .classroom-body .classroom-board-tabs {
    display: flex;
    grid-template-columns: none;
    justify-content: flex-start;
    gap: 8px;
    margin-bottom: 14px;
    padding: 8px;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    scroll-behavior: auto;
    scroll-snap-type: none;
    touch-action: pan-x;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .classroom-body .classroom-board-tabs::-webkit-scrollbar {
    display: none;
  }

  .classroom-body .classroom-board-tabs button {
    flex: 0 0 132px;
    width: 132px;
    min-height: 48px;
    padding: 7px 8px;
    font-size: 15px;
    line-height: 1.25;
    white-space: nowrap;
  }

  .classroom-body .classroom-empty {
    gap: 10px;
    padding: 20px;
  }

  .classroom-body .classroom-empty h2 {
    margin: 0;
    font-size: clamp(24px, 7vw, 30px);
    line-height: 1.24;
  }

  .classroom-body .classroom-empty p {
    margin: 0;
    font-size: 15px;
    line-height: 1.72;
  }

  .classroom-body .classroom-empty-purchase .button {
    width: 100%;
    min-height: 48px;
    margin-top: 4px;
    border-radius: 10px;
  }
}

/* Final mobile homepage ordering overrides for the attachment refinements. */
@media (max-width: 760px) {
  .hero-stats {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
  }

  .hero-stats a,
  .hero-stats a:last-child {
    grid-column: auto;
    min-height: 66px;
    align-content: center;
    gap: 2px;
    padding: 8px 3px;
    text-align: center;
  }

  .hero-stats dt {
    font-size: 20px;
    line-height: 1;
  }

  .hero-stats dd {
    overflow: hidden;
    font-size: 10px;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .leaderboard-tabs {
    display: flex;
    grid-template-columns: none;
    flex-wrap: nowrap;
    gap: 7px;
    width: 100%;
    padding: 7px 22px 8px 7px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-padding-inline: 7px;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }

  .leaderboard-tabs button,
  .leaderboard-tabs button:first-child {
    flex: 0 0 auto;
    width: auto;
    min-width: 88px;
    min-height: 38px;
    padding: 7px 12px;
    white-space: nowrap;
    scroll-snap-align: start;
  }

  .leaderboard-card.has-flash {
    padding: 12px;
  }

  .leaderboard-card.has-flash .leaderboard-head {
    margin-bottom: 10px;
    padding-bottom: 10px;
  }

  .leaderboard-list.is-flash {
    padding: 6px;
  }

  .leaderboard-flash-carousel {
    height: auto;
    aspect-ratio: 2 / 1;
  }

  .leaderboard-flash-slide,
  .leaderboard-flash-slide.active,
  .leaderboard-flash-slide img {
    width: 100%;
    height: 100%;
  }

  .leaderboard-flash-slide img {
    object-fit: cover;
    object-position: center top;
  }
}

@media (max-width: 360px) {
  .hero-stats {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .hero-stats dd {
    font-size: 9px;
  }
}
.nickname-lock-note,
.nickname-lock-hint {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin-left: 0.5rem;
  color: #0f766e;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.4;
}

.nickname-lock-hint {
  display: block;
  margin: 0.4rem 0 0;
}

.nickname-lock-note[hidden],
.nickname-lock-hint[hidden] {
  display: none !important;
}

input[readonly][name="nickname"],
input[readonly][name="name"] {
  color: #334155;
  background: #f1f5f9;
  cursor: not-allowed;
}

/* 20260731 unified mobile tab rails.
   Only peer navigation/tab controls become a single swipeable row; form,
   review and record action buttons keep their existing layouts. */
@media (max-width: 760px) {
  :is(
    .tabs,
    .strict-tabs,
    .role-tabs,
    .auth-tabs,
    .auth-topbar-nav,
    .mobile-classroom-quick-nav,
    .online-service-tabs,
    .command-menu,
    .user-account-tabs,
    .role-management-section-tabs,
    .role-management-tabs,
    .service-management-tabs,
    .site-settings-section-tabs,
    .communications-management-tabs,
    .information-management-tabs,
    .message-publish-tabs,
    .message-manage-tabs,
    .task-record-tabs,
    .task-manage-tabs,
    .task-audit-tabs,
    .product-publish-tabs,
    .physical-product-tabs,
    .physical-product-category-tabs,
    .factory-tabs,
    .freight-primary-tabs,
    .freight-business-tabs,
    .factory-admin-tabs,
    .factory-product-tabs,
    .factory-platform-record-tabs,
    .freight-admin-order-tabs,
    .teacher-work-tabs,
    .finance-stats-tabs,
    .finance-top-tabs,
    .profile-sub-tabs,
    .finance-registration-tabs,
    .finance-reconciliation-tabs,
    .recruitment-enterprise-tabs,
    .recruitment-enterprise-subtabs,
    .recruitment-reviewer-tabs,
    .recruiter-resume-tabs,
    .classroom-board-tabs,
    .course-stage-tabs,
    .career-sub-tabs,
    .point-exchange-tabs,
    .personal-center-tabs,
    .personal-promotion-tabs,
    .business-guide-tabs,
    .ecommerce-category-bar,
    .opportunities-tabs,
    .declaration-tabs,
    .unified-cart-tabs,
    .course-setting-links
  ) {
    display: flex !important;
    grid-template-columns: none !important;
    flex-wrap: nowrap !important;
    align-items: stretch;
    gap: 8px;
    width: 100%;
    max-width: 100%;
    padding-bottom: 6px;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    overscroll-behavior-inline: contain;
    scroll-padding-inline: 4px;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  :is(
    .tabs,
    .strict-tabs,
    .role-tabs,
    .auth-tabs,
    .auth-topbar-nav,
    .mobile-classroom-quick-nav,
    .online-service-tabs,
    .command-menu,
    .user-account-tabs,
    .role-management-section-tabs,
    .role-management-tabs,
    .service-management-tabs,
    .site-settings-section-tabs,
    .communications-management-tabs,
    .information-management-tabs,
    .message-publish-tabs,
    .message-manage-tabs,
    .task-record-tabs,
    .task-manage-tabs,
    .task-audit-tabs,
    .product-publish-tabs,
    .physical-product-tabs,
    .physical-product-category-tabs,
    .factory-tabs,
    .freight-primary-tabs,
    .freight-business-tabs,
    .factory-admin-tabs,
    .factory-product-tabs,
    .factory-platform-record-tabs,
    .freight-admin-order-tabs,
    .teacher-work-tabs,
    .finance-stats-tabs,
    .finance-top-tabs,
    .profile-sub-tabs,
    .finance-registration-tabs,
    .finance-reconciliation-tabs,
    .recruitment-enterprise-tabs,
    .recruitment-enterprise-subtabs,
    .recruitment-reviewer-tabs,
    .recruiter-resume-tabs,
    .classroom-board-tabs,
    .course-stage-tabs,
    .career-sub-tabs,
    .point-exchange-tabs,
    .personal-center-tabs,
    .personal-promotion-tabs,
    .business-guide-tabs,
    .ecommerce-category-bar,
    .opportunities-tabs,
    .declaration-tabs,
    .unified-cart-tabs,
    .course-setting-links
  )::-webkit-scrollbar {
    display: none;
  }

  :is(
    .tabs,
    .strict-tabs,
    .role-tabs,
    .auth-tabs,
    .auth-topbar-nav,
    .mobile-classroom-quick-nav,
    .online-service-tabs,
    .command-menu,
    .user-account-tabs,
    .role-management-section-tabs,
    .role-management-tabs,
    .service-management-tabs,
    .site-settings-section-tabs,
    .communications-management-tabs,
    .information-management-tabs,
    .message-publish-tabs,
    .message-manage-tabs,
    .task-record-tabs,
    .task-manage-tabs,
    .task-audit-tabs,
    .product-publish-tabs,
    .physical-product-tabs,
    .physical-product-category-tabs,
    .factory-tabs,
    .freight-primary-tabs,
    .freight-business-tabs,
    .factory-admin-tabs,
    .factory-product-tabs,
    .factory-platform-record-tabs,
    .freight-admin-order-tabs,
    .teacher-work-tabs,
    .finance-stats-tabs,
    .finance-top-tabs,
    .profile-sub-tabs,
    .finance-registration-tabs,
    .finance-reconciliation-tabs,
    .recruitment-enterprise-tabs,
    .recruitment-enterprise-subtabs,
    .recruitment-reviewer-tabs,
    .recruiter-resume-tabs,
    .classroom-board-tabs,
    .course-stage-tabs,
    .career-sub-tabs,
    .point-exchange-tabs,
    .personal-center-tabs,
    .personal-promotion-tabs,
    .business-guide-tabs,
    .ecommerce-category-bar,
    .opportunities-tabs,
    .declaration-tabs,
    .unified-cart-tabs,
    .course-setting-links
  ) > :is(button, a) {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: clamp(168px, 54vw, 220px) !important;
    max-width: none !important;
    min-height: 44px;
    white-space: nowrap;
    scroll-snap-align: start;
  }

  .admin-system-body .command-menu > button {
    min-width: 172px !important;
  }

  .finance-registration-tabs > button,
  .physical-product-category-tabs > button,
  .ecommerce-category-bar > button {
    min-width: 132px !important;
  }

  .course-setting-links > a {
    min-width: 200px !important;
    white-space: normal;
  }
}

/* Final mobile data-density overrides: keep overview counts on one row and
   guarantee that role tables remain swipeable after page-specific rules. */
@media (max-width: 760px) {
  .pricing-page .pricing-platform-stats,
  .hero-stats {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 6px !important;
    width: 100% !important;
  }

  .pricing-page .pricing-platform-stats > a,
  .hero-stats > a,
  .hero-stats > a:last-child {
    min-width: 0 !important;
    min-height: 72px !important;
    padding: 10px 3px !important;
  }

  .pricing-page .pricing-platform-stats dd,
  .hero-stats dd {
    overflow: hidden;
    font-size: clamp(9px, 2.6vw, 11px) !important;
    line-height: 1.25 !important;
    text-overflow: ellipsis;
    white-space: nowrap !important;
  }

  :is(
    .freight-table-wrap,
    .freight-admin-table-wrap,
    .finance-stats-table-wrap,
    .student-table-wrap,
    .recruiter-service-history-table-wrap,
    .senior-history-table-scroll,
    .task-audit-table-scroll,
    .personal-transaction-table-wrap,
    .ecommerce-history-table-wrap,
    .ecommerce-logistics-preview-table-wrap,
    .recruitment-table-scroll,
    .recruiter-job-table-scroll,
    .task-record-table-scroll,
    .task-history-table-scroll,
    .license-review-table-scroll,
    .license-review-summary-table-wrap
  ) {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
  }

  .finance-stats-form[data-finance-stats-type="ecommerce"] .finance-stats-table-wrap,
  .finance-stats-form[data-finance-stats-type="registration"] .finance-stats-table-wrap {
    overflow-y: auto !important;
  }
}

@media (max-width: 760px) {
  /* Classroom panels stay in document flow so every tab can reach its final card. */
  .classroom-body > main {
    overflow: visible;
  }

  /* The repeated header rail is hidden on mobile; the classroom board tabs remain. */
  .classroom-body .auth-topbar-nav {
    display: none !important;
  }

  /* Keep product categories under the finger when the support panel redraws. */
  .classroom-body .point-exchange-tabs {
    scroll-snap-type: none !important;
    touch-action: pan-x pan-y;
  }

  .classroom-body .ecommerce-product-export-toolbar {
    justify-content: flex-start;
    flex-wrap: nowrap;
    width: 100%;
    max-width: 100%;
    padding: 2px 2px 8px;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
    touch-action: pan-x pan-y;
    -webkit-overflow-scrolling: touch;
  }

  .classroom-body .ecommerce-product-export-toolbar button {
    flex: 0 0 auto;
    min-width: 96px;
    min-height: 44px;
    padding: 8px 12px;
    white-space: nowrap;
  }

  .freight-forwarder-body .freight-table-wrap {
    scroll-snap-type: none !important;
    touch-action: pan-x pan-y;
  }

  .freight-forwarder-body .freight-table-wrap::before {
    pointer-events: none;
  }

  .freight-forwarder-body .freight-order-table {
    width: max-content !important;
    min-width: 1040px !important;
    max-width: none !important;
  }

  .classroom-body .classroom-board-tabs,
  .classroom-body .personal-center-tabs,
  .classroom-body .personal-transaction-table-wrap {
    scroll-snap-type: none !important;
    overscroll-behavior-inline: contain;
    touch-action: pan-x pan-y;
  }

  .recruit-teach-body[data-work-mode="recruiter"] .role-workbench-nav,
  .recruit-teach-body[data-work-mode="recruiter"] .recruiter-work > .teacher-work-tabs:not(.recruiter-resume-tabs),
  .recruit-teach-body[data-work-mode="recruiter"] .recruiter-work .recruiter-resume-tabs {
    scroll-snap-type: none !important;
    overscroll-behavior-inline: contain;
    touch-action: pan-x pan-y;
  }

  .recruit-teach-body[data-work-mode="recruiter"].recruiter-profile-complete .recruit-teach-head {
    display: none;
  }
}

/* Finance mobile: navigation and statistic actions are peer controls, so keep
   each set on one swipeable rail instead of breaking them into uneven rows. */
@media (max-width: 760px) {
  .recruit-teach-body .finance-top-tabs,
  .recruit-teach-body .finance-stats-tabs,
  .recruit-teach-body .finance-registration-tabs,
  .recruit-teach-body .finance-reconciliation-tabs {
    display: flex !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y;
  }

  .recruit-teach-body .finance-top-tabs::-webkit-scrollbar,
  .recruit-teach-body .finance-stats-tabs::-webkit-scrollbar,
  .recruit-teach-body .finance-registration-tabs::-webkit-scrollbar,
  .recruit-teach-body .finance-reconciliation-tabs::-webkit-scrollbar,
  .recruit-teach-body .finance-stats-actions::-webkit-scrollbar {
    display: none;
  }

  .recruit-teach-body .finance-top-tabs > button,
  .recruit-teach-body .finance-stats-tabs > button,
  .recruit-teach-body .finance-registration-tabs > button,
  .recruit-teach-body .finance-reconciliation-tabs > button {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 148px !important;
    white-space: nowrap;
  }

  .recruit-teach-body .finance-stats-toolbar > div {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
  }

  .recruit-teach-body .finance-stats-date-range {
    flex: 0 0 100%;
  }

  .recruit-teach-body .finance-stats-actions {
    display: flex;
    flex: 0 0 100%;
    flex-wrap: nowrap;
    gap: 8px;
    width: 100%;
    max-width: 100%;
    padding: 2px 0 6px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y;
  }

  .recruit-teach-body .finance-stats-actions > button,
  .recruit-teach-body .finance-stats-toolbar .finance-stats-actions > button {
    flex: 0 0 auto;
    min-width: 148px;
    white-space: nowrap;
  }
}

/* Classroom ecommerce catalog: compact, touch-first product cards on phones.
   The desktop data table remains unchanged above this breakpoint. */
@media (max-width: 760px) {
  .classroom-body .ecommerce-panel .ecommerce-category-bar {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 8px;
    width: 100%;
    max-width: 100%;
    padding: 0 0 8px;
    overflow: visible !important;
    scroll-snap-type: none;
    scrollbar-width: none;
    touch-action: pan-y;
  }

  .classroom-body .ecommerce-panel .ecommerce-category-bar::-webkit-scrollbar {
    display: none;
  }

  .classroom-body .ecommerce-panel .ecommerce-category-bar > button {
    width: 100% !important;
    min-width: 0 !important;
    padding-inline: 5px !important;
    font-size: 12px;
    white-space: normal;
  }

  .classroom-body .ecommerce-product-table {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    border: 0;
    background: transparent;
  }

  .classroom-body .ecommerce-product-table::before {
    display: none;
  }

  .classroom-body .ecommerce-product-row:not(.ecommerce-product-row-head) {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr) auto;
    gap: 7px 9px;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    min-height: 0;
    margin-bottom: 10px;
    padding: 10px;
    border: 1px solid #dbe7f3;
    border-radius: 10px;
    background: #fff;
  }

  .classroom-body .ecommerce-product-row > :nth-child(3),
  .classroom-body .ecommerce-product-row > :nth-child(4),
  .classroom-body .ecommerce-product-row > :nth-child(5),
  .classroom-body .ecommerce-product-row > :nth-child(6),
  .classroom-body .ecommerce-product-row > :nth-child(7),
  .classroom-body .ecommerce-product-row > :nth-child(9),
  .classroom-body .ecommerce-product-row > :nth-child(10) {
    display: none;
  }

  .classroom-body .ecommerce-product-export-check {
    grid-column: 1;
    grid-row: 1;
    align-self: start;
    padding-top: 5px;
  }

  .classroom-body .ecommerce-product-name-cell {
    grid-column: 2;
    grid-row: 1;
    gap: 5px;
    min-width: 0;
  }

  .classroom-body .ecommerce-product-name-cell > strong {
    font-size: 15px;
    line-height: 1.35;
    overflow-wrap: anywhere;
  }

  .classroom-body .classroom-ecommerce-main-image {
    flex-basis: 60px;
    width: 60px;
    height: 64px;
  }

  .classroom-body .ecommerce-product-row > :nth-child(8) {
    grid-column: 3;
    grid-row: 1;
    align-self: start;
    color: #1267bf;
    font-size: 15px;
    white-space: nowrap;
  }

  .classroom-body .ecommerce-row-actions {
    grid-column: 2 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    width: 100%;
    overflow: visible;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .classroom-body .ecommerce-row-actions::-webkit-scrollbar {
    display: none;
  }

  .classroom-body .ecommerce-row-actions > button {
    flex: 0 0 auto;
    min-height: 32px;
    padding: 5px 9px;
    font-size: 12px;
    white-space: nowrap;
  }
}

/* 20260731 factory mobile rails and complete platform-record tables.
   Desktop grids and factory business rules remain unchanged. */
@media (max-width: 760px) {
  .factory-body .factory-standard-options {
    display: grid;
    grid-template-rows: repeat(2, minmax(42px, auto));
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 116px;
    gap: 8px;
    width: 100%;
    max-width: 100%;
    padding: 2px 2px 8px;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    scroll-padding-inline: 2px;
    scrollbar-width: thin;
    touch-action: pan-x pan-y;
    -webkit-overflow-scrolling: touch;
  }

  .factory-body .factory-standard-options label {
    min-width: 116px;
    min-height: 42px;
    padding: 7px 10px;
    font-size: 13px;
    line-height: 1.25;
    white-space: nowrap;
  }

  .factory-body .factory-platform-history-shell {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
    touch-action: pan-x pan-y;
    -webkit-overflow-scrolling: touch;
  }

  .factory-body .factory-platform-history-head,
  .factory-body .factory-platform-history-list {
    width: max-content;
    max-width: none;
  }

  .factory-body .factory-platform-removed-head,
  .factory-body #factoryPlatformRemovedList {
    min-width: 780px;
  }

  .factory-body .factory-platform-deleted-head,
  .factory-body #factoryPlatformDeletedList {
    min-width: 944px;
  }

  .factory-body .factory-platform-history-month {
    width: 100%;
    min-width: inherit;
    overflow: visible;
  }

  .factory-body .factory-platform-history-month > summary {
    min-width: 100%;
  }

  .factory-body .factory-platform-history-month-details {
    min-width: 100%;
  }

  .factory-body .factory-force-removed-product {
    grid-template-columns: minmax(430px, 1fr) minmax(140px, auto) minmax(150px, auto);
    grid-template-areas: "info summary actions";
    min-width: 756px;
  }

  .factory-body .factory-force-removed-product .factory-manage-info {
    grid-template-columns: repeat(4, max-content);
  }

  .factory-body .factory-platform-history-list > .record-item {
    min-width: calc(100% - 12px);
  }
}

/* 20260731 business-manager mobile action access and compact module rail.
   Desktop layout and role permission rules remain unchanged. */
.business-manager-mobile-actions {
  display: none;
}

@media (max-width: 760px) {
  .business-manager-body > main {
    overflow: visible;
  }

  .business-manager-body .business-manager-mobile-actions {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 8px;
    width: 100%;
    max-width: 100%;
    margin: 0 0 10px;
    padding: 7px;
    overflow-x: auto;
    overflow-y: hidden;
    background: #fff;
    border: 1px solid #dce8f4;
    border-radius: 10px;
    box-shadow: 0 8px 20px rgba(21, 32, 51, 0.05);
    overscroll-behavior-inline: contain;
    scroll-snap-type: none;
    scrollbar-width: none;
    touch-action: pan-x pan-y;
    -webkit-overflow-scrolling: touch;
  }

  .business-manager-body .business-manager-mobile-actions::-webkit-scrollbar {
    display: none;
  }

  .business-manager-body .business-manager-mobile-actions > button {
    flex: 0 0 118px;
    width: 118px;
    min-width: 118px;
    min-height: 42px;
    padding: 7px 10px;
    color: #1762b7;
    background: #f6f9ff;
    border: 1px solid #cbdcf2;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 900;
    line-height: 1.2;
    white-space: nowrap;
  }

  .business-manager-body .business-manager-mobile-actions > button.active {
    color: #fff;
    background: linear-gradient(135deg, #1e70dd, #10a6a0);
    border-color: transparent;
  }

  .business-manager-body .role-summary > article,
  .business-manager-body .role-summary > .summary-profile-card {
    display: none;
  }

  .business-manager-body .role-summary {
    display: block;
    margin-bottom: 14px;
  }

  .business-manager-body .role-summary > .admin-logout-button {
    width: 100%;
    min-height: 46px;
    padding: 8px 14px;
  }

  .business-manager-body .command-menu {
    gap: 8px;
    padding: 7px;
    scroll-snap-type: none !important;
    touch-action: pan-x pan-y;
  }

  .business-manager-body .command-menu > button,
  .business-manager-body .command-menu > button.admin-only,
  .business-manager-body .command-menu > button.finance-only {
    display: flex !important;
    flex: 0 0 118px !important;
    align-items: center;
    justify-content: center;
    width: 118px !important;
    min-width: 118px !important;
    min-height: 42px !important;
    padding: 7px 10px !important;
    border-radius: 8px;
    text-align: center;
    white-space: nowrap;
  }

  .business-manager-body .command-menu > button > span,
  .business-manager-body .command-menu > button > small {
    display: none !important;
  }

  .business-manager-body .command-menu > button > strong {
    overflow: visible;
    font-size: 14px;
    line-height: 1.2;
    text-overflow: clip;
    white-space: nowrap;
  }

  .business-manager-body .command-shell,
  .business-manager-body .command-stage,
  .business-manager-body .command-panel,
  .business-manager-body .command-panel.active {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .business-manager-body #recruitmentEnterpriseRuntime,
  .business-manager-body .recruitment-records-card,
  .business-manager-body .recruitment-period-stack,
  .business-manager-body .recruitment-period-card {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .business-manager-body :is(
    .factory-admin-table-shell,
    .external-role-table-shell,
    .freight-admin-table-wrap,
    .finance-stats-table-wrap,
    .recruitment-table-scroll,
    .recruiter-job-table-scroll,
    .task-record-table-scroll,
    .task-history-table-scroll,
    .license-review-table-scroll,
    .license-review-summary-table-wrap
  ) {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
    touch-action: pan-x pan-y;
    -webkit-overflow-scrolling: touch;
  }

  .business-manager-body :is(
    .recruitment-table-scroll,
    .recruiter-job-table-scroll,
    .task-record-table-scroll,
    .task-history-table-scroll,
    .license-review-table-scroll
  ) {
    overflow-y: auto !important;
  }
}

/* 20260731 teacher mobile interaction stability.
   Keep desktop forms and data rules unchanged. */
@media (max-width: 760px) {
  .recruit-teach-body[data-work-mode="teacher"] .teacher-auto-weekdays {
    display: flex !important;
    flex: 1 1 100%;
    flex-wrap: nowrap !important;
    align-items: center;
    gap: 8px;
    width: 100%;
    max-width: 100%;
    padding: 2px 2px 8px;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    scroll-snap-type: none;
    scrollbar-width: thin;
    touch-action: pan-x pan-y;
    -webkit-overflow-scrolling: touch;
  }

  .recruit-teach-body[data-work-mode="teacher"] .teacher-auto-weekdays > span:first-child {
    flex: 0 0 auto;
    min-width: 72px;
    white-space: nowrap;
  }

  .recruit-teach-body[data-work-mode="teacher"] .teacher-auto-weekdays .teacher-auto-day {
    flex: 0 0 78px !important;
    min-width: 78px;
    min-height: 40px;
    justify-content: center;
    white-space: nowrap;
  }

  .recruit-teach-body[data-work-mode="teacher"] .teacher-work > .teacher-work-tabs,
  .recruit-teach-body[data-work-mode="teacher"] .student-table-wrap {
    scroll-snap-type: none !important;
    overscroll-behavior-inline: contain;
    touch-action: pan-x pan-y;
    -webkit-overflow-scrolling: touch;
  }

  .recruit-teach-body[data-work-mode="teacher"] .student-table-wrap {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto !important;
    overflow-y: hidden;
    scrollbar-width: thin;
  }

  .recruit-teach-body[data-work-mode="teacher"] .student-management-table {
    width: max-content !important;
    min-width: 760px !important;
    max-width: none !important;
  }
}

/* 20260802 mobile homepage role shortcuts.
   Every logged-in and logged-out role uses one stable swipeable row. */
@media (max-width: 760px) {
  .leaderboard-visual .leaderboard-shortcuts,
  .leaderboard-visual .leaderboard-shortcuts.has-workbench-logout,
  .leaderboard-visual .leaderboard-shortcuts.has-admin-entry {
    display: flex !important;
    grid-template-columns: none !important;
    flex-wrap: nowrap !important;
    align-items: stretch;
    justify-content: flex-start;
    gap: 8px;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 6px 6px 8px;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    overscroll-behavior-inline: contain;
    scroll-padding-inline: 6px;
    scroll-snap-type: none !important;
    scrollbar-width: none;
    touch-action: pan-x pan-y;
    -webkit-overflow-scrolling: touch;
  }

  .leaderboard-visual .leaderboard-shortcuts::-webkit-scrollbar {
    display: none;
  }

  .leaderboard-visual .leaderboard-shortcuts > a {
    flex: 0 0 clamp(142px, 42vw, 168px) !important;
    width: clamp(142px, 42vw, 168px) !important;
    min-width: 142px !important;
    max-width: 168px !important;
    min-height: 72px;
    padding: 8px 6px;
    border: 1px solid #dce7f5;
    border-radius: 10px;
    background: #fff;
    scroll-snap-align: none;
    white-space: nowrap;
  }

  .leaderboard-visual .leaderboard-shortcuts.is-guest-shortcuts > [data-classroom-entry] {
    order: 1 !important;
  }

  .leaderboard-visual .leaderboard-shortcuts.is-guest-shortcuts > [data-auth-link="quick"] {
    order: 2 !important;
  }

  .leaderboard-visual .leaderboard-shortcuts.is-guest-shortcuts > a[href="business-guide.html"] {
    order: 3 !important;
  }

  .leaderboard-visual .leaderboard-shortcuts.is-guest-shortcuts > a[href="cart.html"] {
    order: 4 !important;
  }
}

/* 20260802 mobile guest classroom tabs.
   Two available guest entries still form a genuine touch-scroll rail. */
@media (max-width: 760px) {
  .classroom-body .classroom-board-tabs.guest-classroom-tabs {
    display: flex !important;
    grid-template-columns: none !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start;
    width: 100%;
    max-width: 100%;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    overscroll-behavior-inline: contain;
    scroll-snap-type: none !important;
    scrollbar-width: none;
    touch-action: pan-x pan-y;
    -webkit-overflow-scrolling: touch;
  }

  .classroom-body .classroom-board-tabs.guest-classroom-tabs::-webkit-scrollbar {
    display: none;
  }

  .classroom-body .classroom-board-tabs.guest-classroom-tabs > button {
    flex: 0 0 clamp(176px, 56vw, 220px) !important;
    width: clamp(176px, 56vw, 220px) !important;
    min-width: 176px !important;
    max-width: 220px !important;
    white-space: nowrap;
    scroll-snap-align: none;
  }
}

/* 20260802: shared phone data rails for every role. These selectors only
   affect presentation below the mobile breakpoint; desktop grids and all
   role data/synchronization rules remain unchanged. */
@media (max-width: 760px) {
  body .mobile-data-scroll {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    scroll-behavior: auto !important;
    scroll-snap-type: none !important;
    overscroll-behavior-inline: contain;
    touch-action: pan-x pan-y;
    scrollbar-width: thin;
    scrollbar-color: #7eb6e8 #eaf2fb;
    -webkit-overflow-scrolling: touch;
  }

  body .mobile-data-scroll::-webkit-scrollbar {
    height: 7px;
  }

  body .mobile-data-scroll::-webkit-scrollbar-track {
    border-radius: 999px;
    background: #eaf2fb;
  }

  body .mobile-data-scroll::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: #7eb6e8;
  }

  body table.mobile-data-wide {
    width: max-content !important;
    min-width: var(--mobile-data-min-width, 680px) !important;
    max-width: none !important;
    table-layout: auto;
  }

  body .mobile-record-wide {
    box-sizing: border-box !important;
    width: var(--mobile-record-min-width, 720px) !important;
    min-width: var(--mobile-record-min-width, 720px) !important;
    max-width: none !important;
  }

  body .mobile-record-grid-head,
  body .mobile-record-grid-list {
    box-sizing: border-box !important;
    width: var(--mobile-record-min-width, 720px) !important;
    min-width: var(--mobile-record-min-width, 720px) !important;
    max-width: none !important;
  }

  body .mobile-record-grid-head,
  body .mobile-record-grid-row {
    display: grid !important;
    grid-template-columns: repeat(var(--mobile-record-grid-columns, 3), minmax(132px, 1fr)) !important;
    grid-template-areas: none !important;
  }

  body .mobile-record-grid-head {
    visibility: visible !important;
  }

  body .mobile-record-grid-row {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: none !important;
  }

  body .mobile-record-wide.ecommerce-history-month .ecommerce-history-month-summary {
    grid-template-columns: minmax(190px, 1fr) minmax(120px, auto) minmax(120px, auto) auto !important;
    gap: 18px !important;
  }

  body .mobile-record-wide.ecommerce-history-month .ecommerce-history-month-summary > span,
  body .mobile-record-wide.ecommerce-history-month .ecommerce-history-month-summary > i {
    grid-column: auto !important;
    width: auto !important;
  }

  body .mobile-record-wide.talent-job-row .talent-job-main {
    grid-template-columns: minmax(150px, 1.2fr) minmax(140px, 1fr) 100px 100px 100px minmax(145px, 1fr) 88px !important;
  }

  body .mobile-record-wide.point-exchange-history-row {
    display: grid !important;
    grid-template-columns: minmax(180px, 1.1fr) minmax(150px, .9fr) minmax(100px, .6fr) minmax(170px, 1fr) minmax(100px, .6fr) minmax(190px, 1.2fr) !important;
  }

  body .mobile-record-wide.factory-order-history-month > summary {
    grid-template-columns: auto auto minmax(0, 1fr) auto auto !important;
    grid-template-areas: "month count status download toggle" !important;
  }

  body .mobile-record-wide.task-history-month > summary {
    grid-template-columns: minmax(130px, 1fr) auto auto minmax(230px, 1.4fr) auto !important;
  }

  body .mobile-record-wide.task-history-month > summary > :is(strong, small, b) {
    grid-column: auto !important;
  }

  body .mobile-record-wide.factory-order-record .factory-order-record-main {
    grid-template-columns: 32px minmax(180px, 1.2fr) minmax(130px, .86fr) minmax(150px, 1fr) minmax(105px, .68fr) minmax(105px, .7fr) minmax(145px, .95fr) minmax(145px, .95fr) !important;
  }

  body .mobile-record-wide.factory-order-record .factory-order-item-row {
    grid-template-columns: minmax(220px, 1.35fr) minmax(140px, .85fr) minmax(140px, .85fr) minmax(190px, 1.2fr) !important;
  }

  body .mobile-record-wide.factory-order-record .factory-order-fulfillment {
    grid-template-columns: repeat(3, minmax(180px, 1fr)) !important;
  }

  body .mobile-record-wide.factory-order-record .factory-order-history-logistics {
    grid-template-columns: repeat(4, minmax(160px, 1fr)) !important;
  }

  .factory-body .factory-product-list-shell {
    display: block;
    overflow-x: auto !important;
    overflow-y: hidden;
    scroll-snap-type: none !important;
    overscroll-behavior-inline: contain;
    touch-action: pan-x pan-y;
    -webkit-overflow-scrolling: touch;
  }

  .factory-body .factory-draft-list-shell > :is(.factory-product-list-head, .factory-manage-list) {
    width: 780px;
    min-width: 780px;
  }

  .factory-body .factory-selling-list-shell > :is(.factory-product-list-head, .factory-manage-list) {
    width: 700px;
    min-width: 700px;
  }

  .factory-body .factory-draft-list-head {
    grid-template-columns: 42px minmax(300px, 1fr) 156px 190px !important;
  }

  .factory-body .factory-selling-list-head {
    grid-template-columns: minmax(320px, 1fr) 130px 210px !important;
  }

  .factory-body .factory-draft-list-shell .factory-draft-product {
    grid-template-columns: 42px minmax(300px, 1fr) 156px 190px !important;
    grid-template-areas: "check info summary actions" !important;
    min-width: 764px;
  }

  .factory-body .factory-selling-list-shell .factory-selling-product {
    grid-template-columns: minmax(320px, 1fr) 130px 210px !important;
    grid-template-areas: "info summary actions" !important;
    min-width: 684px;
  }

  .factory-body .factory-draft-list-shell .factory-manage-info,
  .factory-body .factory-selling-list-shell .factory-manage-info {
    min-width: 0;
    overflow: hidden;
  }

  .factory-body .factory-draft-list-shell .factory-manage-summary,
  .factory-body .factory-draft-list-shell .factory-manage-actions,
  .factory-body .factory-selling-list-shell .factory-manage-summary,
  .factory-body .factory-selling-list-shell .factory-manage-actions {
    flex-wrap: nowrap;
    white-space: nowrap;
  }
}
.business-manager-preview-notice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 16px;
  padding: 12px 16px;
  border: 1px solid #9bcddd;
  border-radius: 10px;
  background: linear-gradient(135deg, #edfafa 0%, #eef4ff 100%);
  color: #244768;
}

.business-manager-preview-notice strong {
  flex: 0 0 auto;
  color: #087e84;
}

.business-manager-preview-notice span {
  line-height: 1.6;
}

@media (max-width: 720px) {
  .business-manager-preview-notice {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }
}

.ecommerce-collection-determination-dialog {
  position: fixed;
  z-index: 10050;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(15, 34, 58, 0.45);
}

.ecommerce-collection-determination-card {
  width: min(100%, 440px);
  padding: 28px;
  border-radius: 16px;
  color: #1d2b3f;
  background: #fff;
  box-shadow: 0 22px 56px rgba(8, 31, 61, 0.25);
}

.ecommerce-collection-determination-card h2 { margin: 0 0 12px; font-size: 22px; }
.ecommerce-collection-determination-card p { margin: 0; color: #4b5d73; line-height: 1.75; }
.ecommerce-collection-determination-card button { display: block; min-width: 112px; margin: 22px 0 0 auto; }

.invoice-dialog { position: fixed; inset: 0; z-index: 10100; display: grid; place-items: center; padding: 20px; background: rgba(15,34,58,.48); }
.invoice-dialog-card { display: grid; gap: 13px; width: min(100%, 440px); padding: 26px; border-radius: 16px; background: #fff; box-shadow: 0 22px 56px rgba(8,31,61,.25); }
.invoice-dialog-card h2,.invoice-dialog-card p { margin: 0; }
.invoice-dialog-card > div { display:flex; justify-content:flex-end; gap:10px; }
.invoice-action-row { display:flex; align-items:center; justify-content:flex-end; gap:8px; margin: 8px 0; }
.invoice-system-caption { margin-right:auto; color:#0d8d84; font-size:13px; font-weight:800; }
.invoice-action-row small { color:#6e7f94; font-size:12px; }
.invoice-action-row button:disabled { color:#8793a3; background:#edf0f3; border-color:#d5dbe3; box-shadow:none; cursor:not-allowed; }
.ecommerce-invoice-action-row,.personal-invoice-action-row { flex:0 0 auto; flex-direction:column; align-items:flex-start; gap:5px; margin:0; }
.ecommerce-invoice-action-row small,.personal-invoice-action-row small { min-height:16px; font-weight:700; }
.invoice-action-row .invoice-summary-button { min-height:38px; padding:7px 16px; color:#fff; border:1px solid #246ed2; border-radius:7px; background:linear-gradient(135deg,#1aa39a 0%,#246ed2 100%); box-shadow:0 5px 14px rgba(36,110,210,.18); font:inherit; font-weight:900; line-height:1; cursor:pointer; transition:transform .16s ease,box-shadow .16s ease,filter .16s ease; }
.invoice-action-row .invoice-summary-button:hover:not(:disabled) { filter:brightness(.98); box-shadow:0 7px 18px rgba(36,110,210,.24); transform:translateY(-1px); }
.invoice-action-row .invoice-summary-button:active:not(:disabled) { box-shadow:0 3px 9px rgba(36,110,210,.18); transform:translateY(0); }
.invoice-action-row .invoice-summary-button:focus-visible { outline:3px solid rgba(36,110,210,.22); outline-offset:2px; }
.ecommerce-history-table .ecommerce-invoice-select-column { width:54px; min-width:54px; padding-right:8px; padding-left:8px; text-align:center; }
.personal-transaction-table .personal-invoice-select-column { width:54px; min-width:54px; padding-right:8px; padding-left:8px; text-align:center; }
.ecommerce-invoice-select,.personal-invoice-select { appearance:none; width:18px; height:18px; margin:0; border:1px solid #9eb9d8; border-radius:4px; background-color:#fff; background-position:center; background-repeat:no-repeat; cursor:pointer; vertical-align:middle; }
.ecommerce-invoice-select:checked,.personal-invoice-select:checked { border-color:#246ed2; background-color:#246ed2; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.2' d='m3.2 8.2 3 3.1 6.6-7'/%3E%3C/svg%3E"); }
.ecommerce-invoice-select:hover:not(:disabled),.personal-invoice-select:hover:not(:disabled) { border-color:#246ed2; box-shadow:0 0 0 3px rgba(36,110,210,.1); }
.ecommerce-invoice-select:focus-visible,.personal-invoice-select:focus-visible { outline:3px solid rgba(36,110,210,.22); outline-offset:2px; }
.ecommerce-invoice-select:disabled,.personal-invoice-select:disabled { border-color:#d4dce7; background-color:#edf1f5; cursor:not-allowed; }
[data-cart-shipping-row][hidden],[data-cart-delivery-row][hidden],[data-ecommerce-shipping-row][hidden],[data-ecommerce-delivery-row][hidden] { display:none !important; }
.invoice-dialog-card label { display:grid; gap:6px; font-weight:700; color:#273b58; }
.invoice-dialog-card input,.invoice-dialog-card select { width:100%; min-height:40px; padding:8px 10px; border:1px solid #b7ccea; border-radius:8px; color:#162a46; background:#fff; }
.invoice-dialog-card button,.invoice-inline-button { min-height:36px; padding:7px 13px; border:1px solid #2a78cf; border-radius:7px; color:#fff; background:linear-gradient(135deg,#1aa39a,#246ed2); cursor:pointer; }
.invoice-dialog-card button[type="button"] { color:#2465a9; background:#fff; border-color:#a8c9ef; }
.invoice-inline-button { min-height:28px; margin-left:8px; padding:3px 8px; font-size:12px; white-space:nowrap; }
.invoice-inline-button:disabled { color:#8793a3; border-color:#d5dbe3; background:#edf0f3; cursor:not-allowed; }
.invoice-admin-card { width:min(100%,620px); max-height:min(82vh,720px); overflow:auto; }
.invoice-settings-list { display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)); justify-content:stretch !important; }
.invoice-settings-list label { display:flex; align-items:center; gap:7px; padding:10px; border:1px solid #d4e2f3; border-radius:8px; }
.invoice-settings-list input { width:auto; min-height:0; }
.invoice-request-list { display:grid !important; justify-content:stretch !important; gap:7px; }
.invoice-request-list p { display:flex; justify-content:space-between; gap:12px; padding:9px 10px; border-radius:8px; background:#f3f8ff; font-size:13px; }
.invoice-management-shell { width:min(1160px,calc(100% - 32px)); margin:48px auto; }
.invoice-management-card { padding:32px; border:1px solid #d9e6f5; border-radius:18px; background:#fff; box-shadow:0 20px 48px rgba(28,61,100,.12); }
.invoice-management-head,.invoice-management-section-head { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; }
.invoice-management-head h1 { margin:4px 0 6px; font-size:30px; line-height:1.25; color:#102b50; }
.invoice-management-head p { margin:0; color:#59708c; }
.invoice-management-settings,.invoice-management-section { position:relative; margin-top:24px; padding-top:22px; border-top:2px solid #31a79d; }
.invoice-inline-management { display:grid; gap:18px; margin-top:18px; }
.invoice-inline-management .invoice-management-settings { margin-top:0; padding:18px; border:1px solid #d6e4f4; border-top:3px solid #22a59d; border-radius:12px; background:#fbfdff; }
.invoice-inline-management .invoice-management-section { margin-top:0; padding:20px; border:1px solid #d6e4f4; border-top:3px solid #22a59d; border-radius:12px; background:#fff; }
.invoice-inline-management .invoice-management-section::before { top:-3px; left:18px; }
.invoice-management-section::before { position:absolute; top:-3px; left:0; width:160px; height:4px; border-radius:4px; content:""; background:linear-gradient(90deg,#1aa39a,#276ed1,#7656da); }
.invoice-management-settings h2,.invoice-management-section h2 { margin:0 0 12px; font-size:24px; line-height:1.3; color:#122d50; }
.invoice-management-settings > div { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
.invoice-management-settings label { padding:9px 10px; border:1px solid #d2e1f3; border-radius:8px; color:#243c5b; font-size:14px; font-weight:700; white-space:nowrap; }
.invoice-management-settings button,.invoice-management-section-head button { margin-top:14px; min-height:38px; padding:8px 15px; border:1px solid #2679d2; border-radius:7px; color:#fff; background:linear-gradient(135deg,#1aa39a,#246ed2); cursor:pointer; }
.invoice-management-section-head button { margin-top:0; color:#2465a9; background:#fff; border-color:#a8c9ef; }
.invoice-management-record { display:grid; grid-template-columns:minmax(190px,1fr) minmax(180px,1fr) minmax(160px,auto); gap:12px; align-items:center; margin-top:9px; padding:12px 14px; border-radius:9px; background:#f3f8ff; color:#304966; }
.invoice-management-record small { color:#6d8096; }
.invoice-management-empty { margin:10px 0 0; padding:13px; border-radius:8px; background:#f3f8ff; color:#59708c; }
.invoice-management-table-wrap { overflow-x:auto; border:1px solid #d6e4f4; border-radius:9px; }
.invoice-management-table { width:100%; min-width:1080px; border-collapse:collapse; table-layout:fixed; color:#304966; }
.invoice-management-table th,.invoice-management-table td { padding:11px 8px; border-bottom:1px solid #deebf7; text-align:center; vertical-align:middle; word-break:break-word; }
.invoice-management-table th { color:#245684; background:#eef6ff; font-weight:700; }
.invoice-management-table tr:last-child td { border-bottom:0; }
.invoice-management-table-empty { color:#59708c; background:#f7fbff; text-align:center !important; }
.invoice-management-table tr.is-issued td { color:#7c8794; background:#edf0f3; }
.invoice-complete-button { min-height:30px; padding:4px 9px; border:1px solid #2679d2; border-radius:6px; color:#fff; background:linear-gradient(135deg,#1aa39a,#246ed2); cursor:pointer; white-space:nowrap; }
.invoice-management-month { margin-top:10px; padding:0 14px; border:1px solid #d6e4f4; border-radius:9px; }
.invoice-management-month summary { display:flex; justify-content:space-between; padding:13px 0; cursor:pointer; color:#21476f; }

/* 20260806 finance natural-month history: shared by ADMIN preview and finance workbench. */
@media (max-width: 720px) {
  .invoice-settings-list { grid-template-columns:1fr; }
  .invoice-request-list p { display:grid; }
  .ecommerce-invoice-action-row,.personal-invoice-action-row { width:100%; }
  .invoice-action-row .invoice-summary-button { width:100%; min-height:42px; }
  .invoice-management-shell { width:min(100% - 20px,1160px); margin:20px auto; }
  .invoice-management-card { padding:20px; }
  .invoice-management-head,.invoice-management-section-head { display:grid; }
  .invoice-management-head h1 { font-size:26px; }
  .invoice-management-settings h2,.invoice-management-section h2 { font-size:21px; }
  .invoice-management-settings > div { grid-template-columns:1fr; }
  .invoice-management-record { grid-template-columns:1fr; gap:5px; }
  .invoice-management-table-wrap { -webkit-overflow-scrolling:touch; }
  .finance-stat-history {
    margin-top: 12px;
  }

  .finance-stat-history-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: end;
  }

  .finance-stat-history-toolbar > span,
  .finance-stat-history-toolbar > strong {
    grid-column: 1 / -1;
    margin-right: 0;
  }

  .finance-stat-history-toolbar label {
    min-width: 0;
  }

  .finance-stat-history-toolbar input {
    width: 100%;
    min-width: 0;
  }

  .finance-stat-history-toolbar button {
    width: 100%;
  }

  .finance-stat-history-toolbar button:first-of-type {
    grid-column: 1 / 3;
  }

  .finance-stat-history-month > summary {
    grid-template-columns: auto auto minmax(0, 1fr);
    min-height: 48px;
  }

  .finance-stat-history-month > summary b {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
  }

  .finance-stat-history-month > summary small {
    grid-column: 1 / -1;
  }

  .finance-stat-history-month .factory-inbox-month-details {
    min-width: 0;
    overflow: hidden;
  }

  .finance-stat-history-month .finance-stats-table-wrap {
    max-width: 100%;
    overflow-x: auto;
    touch-action: pan-x pan-y;
    -webkit-overflow-scrolling: touch;
  }
}

/* Classroom board title scale: applies only to the content panels reached from
   the main classroom tab rail. Keep course-card headings and panel headings at
   one compact visual level without changing the tab rail or body copy. */
.classroom-body .classroom-extra-head > h2,
.classroom-body .classroom-course-head > div > h2 {
  font-size: clamp(22px, 2vw, 28px);
  line-height: 1.25;
}

/* Factory personal centre: shared by the factory account and ADMIN preview. */
.factory-body .factory-profile-tabs {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.factory-body .factory-profile-stack,
.factory-body .factory-security-stack {
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  gap: 14px;
}

.factory-body .factory-profile-stack > article,
.factory-body .factory-security-stack > article,
.factory-body .factory-profile-stack .factory-info-wide.role-business-info-card {
  grid-column: 1 / -1;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

/* Recruiter and freight-forwarder profile centres follow the factory's
   three-tab presentation without changing their role-specific data cards. */
.freight-forwarder-body .freight-profile-tabs,
.recruit-teach-body[data-work-mode="recruiter"] .recruiter-profile-tabs {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.freight-forwarder-body .freight-profile-stack,
.freight-forwarder-body .freight-security-stack,
.recruit-teach-body[data-work-mode="recruiter"] .recruiter-profile-stack,
.recruit-teach-body[data-work-mode="recruiter"] .recruiter-security-stack {
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  gap: 14px;
}

.freight-forwarder-body .freight-profile-stack > article,
.freight-forwarder-body .freight-security-stack > article,
.recruit-teach-body[data-work-mode="recruiter"] .recruiter-profile-stack > article,
.recruit-teach-body[data-work-mode="recruiter"] .recruiter-security-stack > article {
  grid-column: 1 / -1;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

@media (max-width: 760px) {
  .factory-body .factory-profile-tabs {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
    padding-bottom: 0;
    overflow: visible !important;
  }

  .freight-forwarder-body .freight-profile-tabs,
  .recruit-teach-body[data-work-mode="recruiter"] .recruiter-profile-tabs {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
    padding-bottom: 0;
    overflow: visible !important;
  }

  .freight-forwarder-body .freight-profile-tabs > button,
  .recruit-teach-body[data-work-mode="recruiter"] .recruiter-profile-tabs > button {
    flex: initial !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 42px;
    padding: 8px 5px;
    font-size: 14px;
    white-space: nowrap;
  }

  body.factory-body #factoryProfileSummary .factory-profile-tabs > button {
    flex: initial !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 42px;
    padding: 8px 5px;
    font-size: 14px;
    white-space: nowrap;
  }

  .factory-body .factory-email-form,
  .factory-body .role-password-code-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .factory-body .factory-email-form button[type="submit"],
  .factory-body .role-password-code-row > button {
    grid-column: 1;
    width: 100%;
  }
}

/* Factory order tracking card: compact, scoped and consistent with the workbench. */
.factory-body .factory-order-record-main + .factory-order-fulfillment-menu {
  margin-top: 5px;
}

.factory-body .factory-order-fulfillment-menu {
  overflow: hidden;
  border: 1px solid #c7dcef;
  border-left: 4px solid #1aa39a;
  border-radius: 9px;
  background: linear-gradient(180deg, #f8fcff 0%, #f4f9ff 100%);
  box-shadow: 0 5px 14px rgba(31, 85, 137, .06);
}

.factory-body .factory-order-fulfillment-menu > summary {
  min-height: 34px;
  box-sizing: border-box;
  padding: 6px 10px;
  color: #214668;
  background: linear-gradient(90deg, rgba(26, 163, 154, .08), rgba(36, 110, 210, .05));
  list-style-position: inside;
}

.factory-body .factory-order-fulfillment-menu[open] > summary {
  border-bottom: 1px solid #d9e7f4;
}

.factory-body .factory-order-fulfillment-menu > summary span {
  font-size: 13px;
  letter-spacing: .01em;
}

.factory-body .factory-order-fulfillment-menu > summary small {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 2px 8px;
  border: 1px solid #a8ddd7;
  border-radius: 999px;
  color: #08756e;
  background: #edfaf8;
  font-size: 11px;
  font-weight: 900;
}

.factory-body .factory-order-fulfillment-menu .factory-order-tracking-form {
  grid-template-columns: minmax(300px, 1.25fr) minmax(260px, 1fr) minmax(150px, .42fr);
  gap: 5px 10px;
  align-items: start;
  padding: 7px 10px 8px;
}

.factory-body .factory-order-tracking-form label {
  gap: 3px;
  color: #38536f;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
}

.factory-body .factory-order-tracking-form :is(input, textarea, select) {
  width: 100%;
  min-width: 0;
  min-height: 34px;
  box-sizing: border-box;
  padding: 6px 9px;
  border: 1px solid #c7d9eb;
  border-radius: 7px;
  color: #17324f;
  background: #fff;
  font: inherit;
  font-weight: 600;
  box-shadow: inset 0 1px 2px rgba(31, 85, 137, .04);
}

.factory-body .factory-order-tracking-form textarea {
  height: 34px;
  min-height: 34px;
  max-height: 72px;
  resize: vertical;
  line-height: 20px;
}

.factory-body .factory-order-tracking-form :is(input, textarea, select):focus-visible {
  outline: 2px solid rgba(31, 119, 214, .22);
  outline-offset: 1px;
  border-color: #2698cf;
  box-shadow: 0 0 0 3px rgba(26, 163, 154, .09);
}

.factory-body .factory-order-tracking-form input[readonly] {
  color: #63748a;
  background: #edf3f9;
}

.factory-body .factory-order-tracking-form label small {
  color: #718197;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.35;
}

.factory-body .factory-order-save-fulfillment {
  min-width: 128px;
  min-height: 32px;
  padding: 4px 14px;
  border: 1px solid #187fb7;
  border-radius: 7px;
  color: #fff;
  background: linear-gradient(135deg, #1aa39a 0%, #246ed2 100%);
  box-shadow: 0 5px 12px rgba(36, 110, 210, .14);
  font-weight: 900;
}

.factory-body .factory-order-save-fulfillment:hover {
  filter: brightness(.96);
  transform: translateY(-1px);
}

.factory-body .factory-order-save-fulfillment:focus-visible,
.factory-body .factory-order-print-actions button:focus-visible {
  outline: 3px solid rgba(36, 110, 210, .2);
  outline-offset: 2px;
}

.factory-body .factory-order-fulfillment-menu .factory-order-print-actions {
  grid-column: 1 / -1;
  gap: 7px;
  margin-top: 0;
  padding: 0;
}

.factory-body .factory-order-print-actions button {
  min-height: 32px;
  padding: 5px 11px;
  border: 1px solid #a8c8ea;
  border-radius: 7px;
  color: #175da8;
  background: #fff;
  box-shadow: 0 3px 9px rgba(31, 85, 137, .06);
  font-size: 12px;
  font-weight: 900;
}

.factory-body .factory-order-print-actions button:hover {
  border-color: #279aab;
  color: #08756e;
  background: #effbf9;
}

@media (max-width: 760px) {
  body.factory-body .mobile-record-wide.factory-order-record .factory-order-tracking-form,
  .factory-body .factory-order-fulfillment-menu .factory-order-tracking-form {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 6px;
    padding: 7px 8px 8px;
  }

  .factory-body .factory-order-fulfillment-menu > summary {
    align-items: flex-start;
    padding: 7px 9px;
  }

  .factory-body .factory-order-fulfillment-menu .factory-order-print-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 0;
  }

  .factory-body .factory-order-save-fulfillment {
    grid-column: 1 / -1;
    width: 100%;
  }

  .factory-body .factory-order-print-actions button {
    width: 100%;
    min-width: 0;
    white-space: normal;
  }
}
.factory-sales-routes {
  grid-column: 1 / 4;
  display: grid;
  grid-row: 1;
  gap: 6px;
  min-width: 0;
  align-self: start;
}

.factory-sales-route {
  display: grid;
  grid-template-columns: minmax(160px, .7fr) minmax(238px, 1fr) 172px;
  gap: 6px;
  align-items: center;
  min-width: 0;
}

.factory-sales-route + .factory-sales-route {
  padding-top: 6px;
  border-top: 1px dashed #c7d8ee;
}

.factory-sales-route-address {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 5px;
  min-width: 0;
}

.factory-sales-route-address > label {
  min-width: 0;
}

.factory-sales-route-address .danger {
  min-height: 30px;
  padding: 4px 7px;
  border-radius: 6px;
  font-size: 11px;
}

.factory-sales-routes > .factory-sales-route:only-child .factory-sales-route-address .danger {
  visibility: hidden;
}

.factory-sales-route > label,
.factory-sales-route > details,
.factory-sales-route-address > label {
  min-width: 0;
  margin: 0;
}

.factory-sales-route > label > span,
.factory-sales-route-address > label > span {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.factory-sales-route select,
.factory-sales-route-logistics > summary {
  width: 100%;
  min-height: 34px;
}

.factory-sales-route select {
  cursor: pointer;
}

.factory-add-sales-route {
  width: 100%;
  min-height: 30px;
  margin-top: 4px;
  padding: 4px 8px;
  font-size: 11px;
}

@media (max-width: 760px) {
  .factory-sales-route {
    grid-template-columns: minmax(160px, .7fr) minmax(238px, 1fr) 172px;
  }
}

/* 20260820-course-xlsx-attachments-v1: keep course import actions readable on phones. */
@media (max-width: 760px) {
  .course-bulk-import .course-form-actions {
    grid-template-columns: minmax(0, 1fr);
  }

  .course-bulk-import .course-form-actions button {
    width: 100%;
    min-width: 0;
    white-space: normal;
  }
}

/* 2026-08-21: new-order natural-day fulfillment monitoring */
.factory-order-monitor-card {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding: 16px;
  overflow: hidden;
}

.factory-admin-panel[data-factory-admin-panel="monitor"],
#factoryOrderMonitorRuntime {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
}

.factory-order-monitor-section,
.factory-order-monitor-history {
  min-width: 0;
}

.factory-order-monitor-heading,
.factory-order-monitor-history > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.factory-order-monitor-heading span,
.factory-order-monitor-history > summary span {
  color: #168f89;
  font-weight: 800;
}

.factory-order-monitor-heading h3 {
  margin: 4px 0;
}

.factory-order-monitor-heading p {
  margin: 0;
  color: #60708a;
}

.factory-order-monitor-heading > strong,
.factory-order-monitor-history > summary > b {
  color: #0f4f8f;
  white-space: nowrap;
}

.factory-order-monitor-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0;
}

.factory-order-monitor-metrics > div {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid #cfe0f4;
  border-radius: 10px;
  background: #f5f9ff;
}

.factory-order-monitor-metrics span {
  color: #64748b;
}

.factory-order-monitor-metrics b {
  color: #145ca5;
  font-size: 22px;
}

.factory-order-monitor-metrics .is-overdue {
  border-color: #ffb4b4;
  background: #fff4f4;
}

.factory-order-monitor-metrics .is-overdue b,
.factory-order-monitor-table tr.is-overdue td,
.factory-order-monitor-table td.is-overdue,
.factory-order-monitor-table .is-overdue,
.factory-order-record.is-overdue .factory-order-status,
.freight-forwarder-body .freight-order-table tr.is-overdue td {
  color: #d5222f;
}

.factory-order-monitor-scroll {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  max-height: 430px;
  overflow: auto;
  border: 1px solid #d4e1f2;
  border-radius: 10px;
  scrollbar-gutter: stable;
}

.factory-order-monitor-table {
  width: 100%;
  min-width: 1560px;
  border-collapse: collapse;
  background: #fff;
}

.factory-order-monitor-table th,
.factory-order-monitor-table td {
  padding: 10px 9px;
  border-bottom: 1px solid #dce6f2;
  text-align: left;
  vertical-align: top;
  line-height: 1.45;
}

.factory-order-monitor-table th {
  position: sticky;
  top: 0;
  z-index: 2;
  color: #173e6c;
  background: #edf5ff;
  white-space: nowrap;
}

.factory-order-monitor-table td > small,
.factory-order-monitor-table td > b + small,
.factory-monitor-lines small {
  display: block;
  margin-top: 3px;
  font-size: 12px;
}

.factory-monitor-lines {
  display: grid;
  gap: 6px;
}

.factory-monitor-lines > span {
  display: block;
}

.factory-monitor-issue {
  color: #d5222f;
  font-weight: 700;
}

.factory-monitor-normal {
  color: #168f89;
}

.factory-monitor-empty,
.factory-monitor-empty-row,
.factory-monitor-history-empty {
  color: #718096;
}

.factory-order-monitor-divider {
  height: 4px;
  margin: 18px 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #20a89d 0%, #2672d8 52%, #7353d8 100%);
}

.factory-order-monitor-history,
.factory-order-monitor-month {
  border: 1px solid #d6e2f3;
  border-radius: 10px;
  background: #fbfdff;
}

.factory-order-monitor-history > summary,
.factory-order-monitor-month > summary {
  padding: 13px 15px;
  cursor: pointer;
  list-style: none;
}

.factory-order-monitor-history > summary::-webkit-details-marker,
.factory-order-monitor-month > summary::-webkit-details-marker {
  display: none;
}

.factory-order-monitor-history > summary div {
  display: grid;
  gap: 3px;
}

.factory-order-monitor-history > summary i,
.factory-order-monitor-month > summary b {
  width: 10px;
  height: 10px;
  border-right: 2px solid #246ed2;
  border-bottom: 2px solid #246ed2;
  transform: rotate(45deg);
  transition: transform .2s ease;
}

.factory-order-monitor-history[open] > summary i,
.factory-order-monitor-month[open] > summary b {
  transform: rotate(225deg);
}

.factory-order-monitor-history-body {
  display: grid;
  gap: 10px;
  padding: 0 12px 12px;
}

.factory-order-monitor-month > summary {
  display: flex;
  align-items: center;
  gap: 12px;
}

.factory-order-monitor-month > summary span {
  color: #60708a;
}

.factory-order-monitor-month > summary b {
  margin-left: auto;
}

.factory-order-monitor-month .factory-order-monitor-scroll {
  margin: 0 10px 10px;
  max-height: 350px;
}

.factory-order-record.is-overdue {
  border-color: #ffb4b4;
  background: #fff7f7;
}

.freight-forwarder-body .freight-order-table tr.is-overdue {
  background: #fff5f5;
}

/* 20260827 recruiter mobile readability and independent chat filters. */
@media (max-width: 760px) {
  .recruit-teach-body[data-work-mode="recruiter"] {
    overflow-x: hidden;
  }

  .recruit-teach-body[data-work-mode="recruiter"] :is(
    .recruit-teach-page,
    .recruit-teach-shell,
    .recruit-teach-grid,
    .recruiter-work,
    .recruiter-job-create-bar,
    .recruiter-job-list-section
  ) {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .recruit-teach-body[data-work-mode="recruiter"] .recruiter-work {
    overflow: hidden;
  }

  .recruit-teach-body[data-work-mode="recruiter"] .work-panel-head p,
  .recruit-teach-body[data-work-mode="recruiter"] .recruiter-job-create-bar p,
  .recruit-teach-body[data-work-mode="recruiter"] .recruiter-job-list-heading p {
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .recruit-teach-body[data-work-mode="recruiter"] .recruiter-job-create-bar,
  .recruit-teach-body[data-work-mode="recruiter"] .recruiter-job-list-section {
    padding: 12px;
  }

  .recruit-teach-body[data-work-mode="recruiter"] .recruiter-job-create-bar > div,
  .recruit-teach-body[data-work-mode="recruiter"] .recruiter-job-create-actions {
    width: 100%;
    min-width: 0;
  }

  .recruit-teach-body[data-work-mode="recruiter"] .recruiter-job-create-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
  }

  .recruit-teach-body[data-work-mode="recruiter"] .recruiter-job-create-actions :is(button, .button) {
    width: 100%;
    min-width: 0;
    min-height: 42px;
    padding: 7px 5px;
    justify-content: center;
    text-align: center;
    white-space: normal;
  }

  .recruit-teach-body[data-work-mode="recruiter"] .recruiter-batch-toolbar {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
  }

  .recruit-teach-body[data-work-mode="recruiter"] .recruiter-batch-toolbar > span {
    grid-column: 1 / -1;
    margin-right: 0;
  }

  .recruit-teach-body[data-work-mode="recruiter"] .recruiter-batch-toolbar button {
    width: 100%;
    min-width: 0;
    min-height: 42px;
    padding: 7px 5px;
    white-space: normal;
  }

  .recruit-teach-body[data-work-mode="recruiter"] .recruiter-job-table-scroll {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
    touch-action: pan-y;
  }

  .recruit-teach-body[data-work-mode="recruiter"] .recruiter-job-table-scroll table {
    display: block;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .recruit-teach-body[data-work-mode="recruiter"] .recruiter-job-table-scroll thead {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .recruit-teach-body[data-work-mode="recruiter"] .recruiter-job-table-scroll tbody {
    display: grid;
    gap: 10px;
    width: 100%;
    padding-top: 10px;
  }

  .recruit-teach-body[data-work-mode="recruiter"] .recruiter-job-table-scroll tbody tr {
    display: block;
    width: 100%;
    min-width: 0;
    overflow: hidden;
    border: 1px solid #d7e4f2;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 4px 12px rgba(31, 70, 136, .06);
  }

  .recruit-teach-body[data-work-mode="recruiter"] .recruiter-job-table-scroll td {
    position: relative;
    display: block;
    width: 100%;
    min-width: 0;
    min-height: 42px;
    padding: 10px 10px 10px 108px;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .recruit-teach-body[data-work-mode="recruiter"] .recruiter-job-table-scroll td::before {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 88px;
    color: #586d86;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.45;
    content: attr(data-label);
  }

  .recruit-teach-body[data-work-mode="recruiter"] .recruiter-job-table-scroll td[colspan] {
    padding: 28px 12px;
    text-align: center;
  }

  .recruit-teach-body[data-work-mode="recruiter"] .recruiter-job-table-scroll td[colspan]::before {
    content: none;
  }

  .recruit-teach-body[data-work-mode="recruiter"] .recruiter-job-row-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .recruit-teach-body[data-work-mode="recruiter"] .recruiter-job-row-actions button {
    width: 100%;
    min-width: 0;
    min-height: 40px;
    white-space: normal;
  }

  .recruit-teach-body[data-work-mode="recruiter"] .recruitment-chat-panel,
  .recruit-teach-body[data-work-mode="recruiter"] .recruitment-chat-layout,
  .recruitment-chat-popup .recruitment-chat-panel,
  .recruitment-chat-popup .recruitment-chat-layout {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .recruitment-chat-popup-body {
    overflow-x: hidden;
  }

  .recruitment-chat-filter,
  .recruitment-chat-popup .recruitment-chat-filter {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 5px;
    width: 100%;
    min-width: 0;
    padding: 7px;
  }

  .recruitment-chat-filter button,
  .recruitment-chat-popup .recruitment-chat-filter button {
    width: 100%;
    min-width: 0;
    min-height: 38px;
    padding: 6px 3px;
    font-size: 12px;
    white-space: nowrap;
  }

  .recruitment-chat-list-row[hidden] {
    display: none !important;
  }
}

@media (max-width: 720px) {
  .factory-order-monitor-card {
    padding: 10px;
  }

  .factory-order-monitor-heading,
  .factory-order-monitor-history > summary {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  .factory-order-monitor-metrics {
    grid-template-columns: 1fr;
  }

  .factory-order-monitor-scroll {
    max-height: 58vh;
    -webkit-overflow-scrolling: touch;
  }
}

/* Final responsive override for the six public guide tabs. */
.business-guide-body .student-guide-sop-directory-head strong,
.business-guide-body .about-guide-directory .student-guide-sop-directory-head strong { font-size: 18px; }
.business-guide-body .student-guide-sop-nav button,
.business-guide-body .about-guide-nav button { font-size: 16px; }
.admin-body #siteSettingsContentMount > .service-management-panel:not(.active) { display: none; }
.admin-body #siteSettingsContentMount > .service-management-panel.active { display: block; }
@media (min-width: 1100px) {
  .business-guide-body .business-guide-tabs { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@media (min-width: 641px) and (max-width: 1099px) {
  .business-guide-body .business-guide-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .business-guide-body .business-guide-tabs {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    overflow: visible !important;
  }
  .business-guide-body .business-guide-tabs > button {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    white-space: normal !important;
  }
}
@media (min-width: 641px) and (max-width: 760px) {
  .business-guide-body .business-guide-tabs {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    overflow: visible !important;
  }
  .business-guide-body .business-guide-tabs > button {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    white-space: normal !important;
  }
}

/* Mobile guide controls: keep both highlighted button groups on one row. */
@media (max-width: 760px) {
  .business-guide-body .business-guide-tabs {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 2px !important;
    padding: 2px !important;
    overflow: visible !important;
  }

  .business-guide-body .business-guide-tabs > button {
    flex: 1 1 0 !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 42px;
    padding: 6px 1px !important;
    font-size: clamp(9px, 2.35vw, 13px);
    line-height: 1.2;
    text-align: center;
    white-space: nowrap !important;
  }

  .business-guide-body .about-guide-nav {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;
  }

  .business-guide-body .about-guide-nav > button {
    width: 100%;
    min-width: 0;
    padding: 8px 2px;
    font-size: clamp(11px, 3.1vw, 13px);
    line-height: 1.3;
    text-align: center;
    white-space: nowrap;
  }
}
.pricing-card.is-purchase-disabled .pricing-purchase-disabled-button:disabled {
  grid-column: 1 / -1;
  min-height: 42px;
  white-space: normal;
  color: #64748b;
  background: #edf1f5;
  border: 1px solid #cfd8e3;
  box-shadow: none;
  cursor: not-allowed;
  opacity: 1;
}

/* Homepage-only positioning: keep desktop tools beside the scrollbar and hide them on mobile landscape. */
@media (min-width: 761px) {
  body > .home-floating-service {
    right: 6px;
  }
}

@media (max-width: 1024px) and (max-height: 600px) and (orientation: landscape) {
  body > .home-floating-service {
    display: none !important;
  }
}
/* 2026-08-25 commission payout closure */
.commission-management-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  width: 100%;
  margin: 16px 0 18px;
  padding: 10px;
  border: 1px solid #d6e2f2;
  border-radius: 12px;
  background: linear-gradient(135deg, #f6fbff 0%, #f8f7ff 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}
.commission-management-tabs button {
  width: 100%;
  min-height: 46px;
  padding: 0 18px;
  border: 1px solid #bcd0ef;
  border-radius: 9px;
  background: #fff;
  color: #1656a0;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.35;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(35, 84, 145, .06);
  transition: border-color .2s ease, box-shadow .2s ease, color .2s ease, transform .2s ease;
}
.commission-management-tabs button:hover {
  border-color: #4d87d4;
  box-shadow: 0 7px 16px rgba(35, 84, 145, .12);
  transform: translateY(-1px);
}
.commission-management-tabs button:focus-visible {
  outline: 3px solid rgba(36,110,210,.2);
  outline-offset: 2px;
}
.commission-management-tabs button.active {
  border-color: transparent;
  color: #fff;
  background: linear-gradient(135deg, #1aa39a 0%, #246ed2 100%);
  box-shadow: 0 8px 20px rgba(36, 110, 210, .2);
}
.commission-payout-panel,
.finance-cross-month-remittances {
  margin-top: 14px;
  padding: 18px;
  border: 1px solid #d5e2f3;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(31, 73, 125, .07);
  overflow: hidden;
}
.commission-payout-decoration {
  height: 5px;
  margin: -18px -18px 16px;
  border-radius: 12px 12px 0 0;
  background: linear-gradient(90deg, #1ca996, #2471d8, #7656db);
}
.commission-payout-panel.is-combined > .commission-payout-decoration:first-child {
  background: linear-gradient(90deg, #7656db, #2471d8, #1ca996);
}
.commission-payout-decoration.is-history {
  height: 3px;
  margin: 20px 0 14px;
  border-radius: 999px;
  background: linear-gradient(90deg, #1ca996 0%, #2471d8 48%, rgba(118,86,219,.15) 100%);
}
.commission-payout-heading,
.finance-cross-month-remittances .finance-stat-history-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.commission-payout-heading span { color: #168f86; font-size: 13px; font-weight: 800; }
.commission-payout-heading h3 { margin: 5px 0 6px; color: #09264d; font-size: 20px; line-height: 1.35; }
.commission-payout-heading p { margin: 0; color: #60728e; font-size: 13px; line-height: 1.5; }
.commission-payout-heading > strong {
  padding: 7px 12px;
  border-radius: 999px;
  color: #c82236;
  background: #fff0f2;
  font-size: 13px;
  white-space: nowrap;
}
.commission-payout-toolbar {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) auto auto;
  align-items: end;
  gap: 12px;
  margin: 16px 0 14px;
  padding: 12px;
  border: 1px solid #d8e4f4;
  border-radius: 10px;
  background: linear-gradient(135deg, #f4fbfb 0%, #f5f8ff 100%);
}
.commission-payout-toolbar strong { align-self: center; color: #164d82; font-size: 14px; }
.commission-payout-range,
.commission-payout-toolbar-actions {
  display: flex;
  align-items: end;
  gap: 8px;
}
.commission-payout-range label { display: grid; gap: 4px; color: #526581; font-size: 12px; }
.commission-payout-range i { padding-bottom: 10px; color: #60728e; font-style: normal; }
.commission-payout-toolbar input {
  min-height: 38px;
  padding: 0 10px;
  border: 1px solid #c8d8ed;
  border-radius: 7px;
  background: #fff;
}
.commission-payout-toolbar button,
.finance-remittance-pending + button,
.commission-payout-row-main > button {
  min-height: 38px;
  border: 0;
  border-radius: 7px;
  padding: 0 14px;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  background: linear-gradient(135deg, #246ed2, #1aa39a);
}
.commission-payout-toolbar button.ghost {
  border: 1px solid #9fbde8;
  color: #175ba6;
  background: #fff;
}
.commission-payout-list {
  max-height: 520px;
  padding: 2px;
  overflow: auto;
  scrollbar-color: #8fa7c5 #edf3fa;
  scrollbar-width: thin;
}
.commission-payout-panel .finance-stats-empty {
  min-height: 92px;
  display: grid;
  place-items: center;
  margin: 0;
  border: 1px dashed #cbd9ec;
  border-radius: 9px;
  color: #61738e;
  background: #f8fbff;
  font-size: 13px;
  line-height: 1.5;
}
.commission-payout-row {
  min-width: 1180px;
  margin-bottom: 9px;
  border: 1px solid #d8e3f3;
  border-radius: 9px;
  overflow: hidden;
}
.commission-payout-row.is-pending { border-left: 5px solid #df253c; color: #b4172c; background: #fff7f8; }
.commission-payout-row.is-paid { color: #6b7688; background: #f0f3f7; }
.commission-payout-row-main {
  display: grid;
  grid-template-columns: 150px minmax(120px, 1fr) 130px 145px minmax(190px, 1.35fr) 110px 110px minmax(235px, auto);
  align-items: center;
  gap: 12px;
  min-width: 1180px;
  padding: 12px;
  font-size: 13px;
  line-height: 1.4;
}
.commission-payout-cell {
  min-width: 0;
  display: grid;
  gap: 5px;
  color: #263c5c;
}
.commission-payout-cell small,
.commission-proof-picker > span {
  color: #71809a;
  font-size: 11px;
  font-weight: 700;
}
.commission-payout-cell :is(span, strong, b, em) { overflow-wrap: anywhere; }
.commission-payout-cell.is-amount b { color: #c82236; font-size: 15px; }
.commission-payout-cell.is-status em {
  width: fit-content;
  padding: 5px 9px;
  border-radius: 999px;
  color: #b4172c;
  background: #ffe7ea;
  font-style: normal;
  font-weight: 800;
}
.commission-payout-row.is-paid .commission-payout-cell.is-status em {
  color: #087763;
  background: #daf4ed;
}
.commission-payout-actions {
  display: grid;
  align-items: end;
  gap: 9px;
}
.commission-payout-actions > button {
  min-height: 38px;
  border: 0;
  border-radius: 7px;
  padding: 0 15px;
  color: #fff;
  background: linear-gradient(135deg, #246ed2, #1aa39a);
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}
.commission-proof-picker { display: grid; gap: 5px; min-width: 150px; font-size: 12px; }
.commission-proof-picker input {
  width: 100%;
  max-width: 190px;
  min-height: 38px;
  padding: 5px;
  border: 1px solid #c8d8ed;
  border-radius: 7px;
  background: #fff;
}
.commission-payout-bank-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  gap: 14px;
  padding: 12px;
  border-top: 1px solid #d3e1f2;
  border-left: 4px solid #2d7ed4;
  background: linear-gradient(135deg, #f2f8ff 0%, #f5fbfb 100%);
}
.commission-payout-bank-info {
  display: grid;
  grid-template-columns: repeat(3, minmax(150px, 1fr));
  gap: 10px;
}
.commission-payout-bank-info > div {
  min-width: 0;
  display: grid;
  gap: 5px;
  padding: 9px 11px;
  border: 1px solid #d5e3f3;
  border-radius: 8px;
  background: rgba(255,255,255,.88);
}
.commission-payout-bank-info small {
  color: #71809a;
  font-size: 11px;
  font-weight: 700;
}
.commission-payout-bank-info strong {
  color: #173a67;
  font-size: 13px;
  overflow-wrap: anywhere;
}
.commission-payout-bank-info a { color: #1764ba; }
.commission-payout-bank-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  min-width: 250px;
}
.commission-payout-bank-actions button {
  min-width: 112px;
  min-height: 40px;
  padding: 0 15px;
  border: 0;
  border-radius: 8px;
  color: #fff;
  background: linear-gradient(135deg, #246ed2, #1aa39a);
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
}
.commission-payout-bank-actions button.ghost {
  border: 1px solid #72c7bd;
  color: #087769;
  background: #fff;
}
.commission-payout-bank-actions button:focus-visible {
  outline: 3px solid rgba(36,110,210,.2);
  outline-offset: 2px;
}
.commission-payout-details { border-top: 1px dashed #c9d6e8; padding: 8px 12px; }
.commission-payout-details summary {
  width: fit-content;
  padding: 4px 0;
  cursor: pointer;
  color: #195eac;
  font-size: 13px;
  font-weight: 800;
}
.commission-payout-details dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.commission-payout-details dl div { padding: 9px; border-radius: 7px; background: rgba(255,255,255,.75); }
.commission-payout-details dt { color: #71809a; font-size: 12px; }
.commission-payout-details dd { margin: 4px 0 0; overflow-wrap: anywhere; font-size: 13px; line-height: 1.4; }
.commission-payout-history { margin-top: 10px; border: 1px solid #d6e2f2; border-radius: 10px; padding: 12px; background: #f9fbff; }
.commission-payout-history > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; color: #173e70; font-size: 13px; }
.commission-payout-history > summary div { display: grid; gap: 3px; }
.commission-payout-history > summary b { padding: 5px 9px; border-radius: 999px; color: #5e42ba; background: #eee9ff; }
.commission-payout-history-months > details { margin-top: 9px; border: 1px solid #d8e3f3; border-radius: 8px; padding: 9px; background: #fff; }
.commission-payout-history-months > details > summary { display: flex; justify-content: space-between; cursor: pointer; font-size: 13px; }
.finance-remittance-pending { color: #c41f35; font-weight: 800; margin-right: 7px; }
.finance-remittance-received { color: #07846f; font-weight: 800; }
.finance-remittance-na { color: #71809a; }
.withdrawal-bank-form { display: grid; gap: 10px; width: 100%; text-align: left; }
.withdrawal-bank-form label { display: grid; gap: 5px; font-weight: 800; }
.withdrawal-bank-form input { width: 100%; min-height: 42px; border: 1px solid #c9d8ed; border-radius: 8px; padding: 0 12px; }
.withdrawal-bank-form small { color: #697a94; line-height: 1.55; }
.withdrawal-dialog-error { margin: 0; color: #b42318; font-size: 13px; font-weight: 800; }

@media (max-width: 760px) {
  .commission-management-tabs {
    display: flex;
    gap: 10px;
    padding: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
  }
  .commission-management-tabs button { flex: 0 0 190px; scroll-snap-align: start; }
  .commission-payout-panel, .finance-cross-month-remittances { padding: 12px; }
  .commission-payout-decoration { margin: -12px -12px 12px; }
  .commission-payout-heading { display: grid; }
  .commission-payout-toolbar { grid-template-columns: 1fr; align-items: stretch; overflow: hidden; }
  .commission-payout-range { overflow-x: auto; padding-bottom: 3px; }
  .commission-payout-range label { flex: 0 0 145px; }
  .commission-payout-toolbar-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .commission-payout-toolbar-actions button { width: 100%; }
  .commission-payout-list { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .commission-payout-bank-panel {
    min-width: 760px;
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .commission-payout-bank-actions { min-width: 240px; }
  .commission-payout-details dl { grid-template-columns: 1fr; }
  .withdrawal-dialog { width: min(94vw, 460px); max-height: 90vh; overflow-y: auto; }
}

/* 20260827 finance mobile unified layout. Desktop finance remains unchanged. */
@media (max-width: 760px) {
  .recruit-teach-body[data-work-mode="finance"] {
    overflow-x: hidden;
  }

  .recruit-teach-body[data-work-mode="finance"] :is(
    .auth-topbar,
    .auth-topbar-nav,
    .recruit-teach-page,
    .recruit-teach-shell,
    .recruit-teach-grid,
    .finance-work,
    .finance-stats-module,
    .finance-stats-form
  ) {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .recruit-teach-body[data-work-mode="finance"] .auth-topbar-nav {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
    overflow: visible !important;
    touch-action: pan-y !important;
  }

  .recruit-teach-body[data-work-mode="finance"] .auth-topbar-nav > a {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 40px;
    padding: 6px 4px;
    justify-content: center;
    text-align: center;
    white-space: normal;
  }

  .recruit-teach-body[data-work-mode="finance"] .finance-work {
    overflow: hidden;
  }

  .recruit-teach-body[data-work-mode="finance"] .finance-work .work-panel-head,
  .recruit-teach-body[data-work-mode="finance"] .finance-work .work-panel-head > :is(span, h2, p, .finance-work-head-actions) {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .recruit-teach-body[data-work-mode="finance"] .finance-work .work-panel-head p,
  .recruit-teach-body[data-work-mode="finance"] .finance-stats-toolbar p {
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .recruit-teach-body[data-work-mode="finance"] .finance-work-head-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .recruit-teach-body[data-work-mode="finance"] .finance-work-head-actions > * {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    padding-inline: 6px;
    justify-content: center;
    text-align: center;
    white-space: normal;
  }

  .recruit-teach-body[data-work-mode="finance"] .finance-current-month-label {
    width: 100%;
    min-width: 0;
    flex-wrap: wrap;
  }

  .recruit-teach-body[data-work-mode="finance"] .finance-stats-toolbar,
  .recruit-teach-body[data-work-mode="finance"] .finance-stats-toolbar > div,
  .recruit-teach-body[data-work-mode="finance"] .finance-stats-date-range {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .recruit-teach-body[data-work-mode="finance"] .finance-stats-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  .recruit-teach-body[data-work-mode="finance"] .finance-stats-toolbar > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  .recruit-teach-body[data-work-mode="finance"] .finance-stats-date-range {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 5px;
  }

  .recruit-teach-body[data-work-mode="finance"] .finance-stats-date-range label,
  .recruit-teach-body[data-work-mode="finance"] .finance-stats-date-range input {
    width: 100%;
    min-width: 0;
  }

  .recruit-teach-body[data-work-mode="finance"] .finance-stats-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    padding-bottom: 0;
    overflow: visible;
    touch-action: pan-y;
  }

  .recruit-teach-body[data-work-mode="finance"] .finance-stats-actions > button,
  .recruit-teach-body[data-work-mode="finance"] .finance-stats-toolbar .finance-stats-actions > button {
    width: 100%;
    min-width: 0;
    min-height: 42px;
    white-space: normal;
  }

  .recruit-teach-body[data-work-mode="finance"] :is(
    .finance-stats-table-wrap,
    .finance-registration-table-wrap,
    .finance-ecommerce-table-wrap,
    .finance-history-table-wrap
  ) {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
}