.Icon__root {
  display: inline-block;
  flex: 0 0 auto;
  width: 1em;
  height: 1em;
  overflow: hidden;
  color: inherit;
  vertical-align: -0.125em;
  fill: currentcolor;
}

.Icon__xs {
  font-size: var(--component-icon-size-xs);
}

.Icon__sm {
  font-size: var(--component-icon-size-sm);
}

.Icon__base {
  font-size: var(--component-icon-size-base);
}

.Icon__md {
  font-size: var(--component-icon-size-md);
}

.Icon__lg {
  font-size: var(--component-icon-size-lg);
}


.Icon__airaMask {
  mask-type: alpha;
}

.Icon__airaStart {
  stop-color: var(--color-icon-aira-start);
}

.Icon__airaEnd {
  stop-color: var(--color-icon-aira-end);
}
/*
 * Figma `2-Input 输入框`（节点 `2941:0`）：
 * 宽 280；Size=Large 40 / Default 32 / Small 24；圆角 4px；
 * Default #DCDFE6 → Hover #CDD0D6 → Focus #2878E8 → Error #F53F3F，禁用为浅底浅边框。
 */
.Input__root {
  display: inline-flex;
  flex-direction: column;
  font-family: var(--typography-font-family-sans);
}

.Input__box {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  box-sizing: border-box;
  width: 280px;
  max-width: 100%;
  color: var(--color-text);
  background: var(--color-background-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

.Input__box[data-size='large'] {
  height: 40px;
  padding: var(--space-2) var(--space-3);
  font-size: var(--typography-font-size-body);
  line-height: var(--typography-line-height-body);
}

.Input__box[data-size='default'] {
  height: 32px;
  padding: var(--space-1) var(--space-2);
  font-size: var(--typography-font-size-body);
  line-height: var(--typography-line-height-body);
}

.Input__box[data-size='small'] {
  height: 24px;
  padding: 2px 6px;
  font-size: var(--typography-font-size-caption);
  line-height: var(--typography-line-height-caption);
}

.Input__box:hover:not(:has(.Input__control:disabled), :focus-within) {
  border-color: var(--color-border-strong);
}

.Input__box:focus-within {
  border-color: var(--color-border-focused);
}

/*
 * 文本输入框在任何聚焦方式下都会命中 :focus-visible（CSS 规范对“需要文本输入的元素”的规定），
 * 若在此叠加描边会出现“边框 + 外圈”两层提示，故焦点仅由边框变色表达，与 Figma Focus 态一致。
 */

.Input__box[data-error] {
  border-color: var(--color-border-danger);
}

.Input__box:has(.Input__control:disabled) {
  color: var(--color-text-disabled);
  cursor: not-allowed;
  background: var(--color-background-neutral-subtle);
  border-color: var(--color-border-light);
}

.Input__control {
  min-width: 0;
  flex: 1;
  padding: 0;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  font-weight: var(--typography-font-weight-regular);
  line-height: inherit;
  background: transparent;
  border: 0;
  outline: 0;
}

.Input__control::placeholder {
  color: var(--color-text-placeholder);
}

.Input__control:disabled {
  cursor: not-allowed;
}

.Input__icon {
  flex: none;
  color: var(--color-icon-placeholder);
}

/* Figma Input 的 prefix / suffix 槽：内容由调用方给，颜色按图标槽位取。 */
.Input__slot {
  display: inline-flex;
  flex: none;
  align-items: center;
  color: var(--color-icon-placeholder);
}

/* 清空按钮：常驻占位，悬停或聚焦才显形；键盘可达，故用 opacity 而非 display。 */
.Input__clear {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: var(--color-icon-placeholder);
  cursor: pointer;
  background: transparent;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

.Input__clear:hover {
  color: var(--color-icon);
}

.Input__box:hover .Input__clear,
.Input__box:focus-within .Input__clear,
.Input__clear:focus-visible {
  opacity: 1;
  pointer-events: auto;
}

.Input__clear:focus-visible {
  border-radius: 2px;
  outline: 2px solid var(--color-border-focused);
  outline-offset: 1px;
}

.Input__prompt {
  min-height: 22px;
  font-size: var(--typography-font-size-caption);
  line-height: var(--typography-line-height-caption);
  color: var(--color-text-subtlest);
}

.Input__box[data-error] + .Input__prompt {
  color: var(--color-text-danger);
}
/* Figma `5-Message 消息提示`：380 × 48、4px 圆角、无阴影、1px 状态边框。 */
.Message__stack {
  position: fixed;
  top: var(--space-5);
  left: 50%;
  z-index: var(--z-index-toast);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: min(calc(100vw - var(--space-8)), 380px);
  pointer-events: none;
  transform: translateX(-50%);
}

.Message__root {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  box-sizing: border-box;
  width: 380px;
  max-width: 100%;
  min-height: 48px;
  padding: var(--space-3) var(--space-5);
  font-family: var(--typography-font-family-sans);
  font-size: var(--typography-font-size-body);
  line-height: var(--typography-line-height-body);
  pointer-events: auto;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  animation: Message__enter var(--motion-duration-normal) var(--motion-easing-standard);
}

/* Center=on：内容组在剩余空间内居中，左侧内边距 20 + 8。 */
.Message__root[data-align='center'] {
  padding-left: calc(var(--space-5) + var(--space-2));
}

.Message__root[data-align='center'] .Message__content {
  justify-content: center;
}

.Message__content {
  display: flex;
  flex: 1 1 auto;
  gap: var(--space-3);
  align-items: center;
  min-width: 0;
}

.Message__icon {
  display: grid;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  font-size: var(--typography-font-size-caption);
  line-height: 1;
  place-items: center;
}

.Message__text {
  min-width: 0;
  overflow-wrap: anywhere;
}

.Message__close {
  position: relative;
  display: grid;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  padding: 0;
  color: var(--color-text-subtlest);
  font: inherit;
  font-size: var(--typography-font-size-body);
  line-height: 1;
  cursor: pointer;
  background: transparent;
  border: 0;
  place-items: center;
}

/* 视觉保持 Figma 的 16px 图标，命中区域扩展到 32px。 */
.Message__close::after {
  position: absolute;
  inset: calc(var(--space-2) * -1);
  content: '';
}

.Message__close:hover {
  color: var(--color-text);
}

.Message__close:focus-visible {
  outline: 2px solid var(--color-border-focused);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.Message__primary {
  color: var(--color-text-brand);
  background: var(--color-background-brand-subtle);
  border-color: var(--color-border-brand-subtle);
}

.Message__success {
  color: var(--color-text-success);
  background: var(--color-background-success-subtle);
  border-color: var(--color-border-success-subtle);
}

.Message__warning {
  color: var(--color-text-warning);
  background: var(--color-background-warning-subtle);
  border-color: var(--color-border-warning-subtle);
}

.Message__danger {
  color: var(--color-text-danger);
  background: var(--color-background-danger-subtle);
  border-color: var(--color-border-danger-subtle);
}

.Message__info {
  color: var(--color-text-subtlest);
  background: var(--color-background-information-subtle);
  border-color: var(--color-border-information-subtle);
}

.Message__visuallyHidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

@keyframes Message__enter {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .Message__root { animation: none; }
}
/*
 * 浮层箭头几何（`DropdownMenu` / `Popover` / `Popconfirm` / `Tooltip` / `Select` 共用）。
 *
 * 用「双层边框三角」画一个 12×6 的带描边箭头：
 *   ::before = 描边层，::after = 底色层（向内偏移 var(--arrow-inset)）。
 * 各组件通过 CSS 变量着色：
 *   --arrow-bg      底色（默认 surface-overlay）
 *   --arrow-border  描边色（默认透明 → 无描边）
 *   --arrow-inset   底色层内缩距离（有描边用 1px，无描边用 0）
 * 方向由 Base UI 给弹出层加的 `data-side` 驱动。
 * 需要水平居中的浮层（`Select`，箭头相对浮层而非触发器居中）
 * 只需在本地 `.arrow` 上补 `left: 50%` + `transform: translateX(-50%)`。
 *
 * 注意：着色层是 12×12 边框盒的一半，而外露的箭头框只有 12×6，
 * 因此两层伪元素都要沿箭头方向外移 6px，三角形才会露在浮层外面。
 */
.floating-arrow__arrow {
  position: absolute;
  width: 12px;
  height: 6px;
}

.floating-arrow__arrow::before,
.floating-arrow__arrow::after {
  position: absolute;
  width: 0;
  height: 0;
  content: '';
  border: 6px solid transparent;
}

/* 弹出层在触发器下方：箭头在顶部朝上 */
[data-side='bottom'] .floating-arrow__arrow {
  top: -6px;
}

[data-side='bottom'] .floating-arrow__arrow::before {
  top: -6px;
  border-bottom-color: var(--arrow-border, transparent);
}

[data-side='bottom'] .floating-arrow__arrow::after {
  top: calc(-6px + var(--arrow-inset, 1px));
  border-bottom-color: var(--arrow-bg, var(--color-background-surface-overlay));
}

/* 弹出层在触发器上方：箭头在底部朝下 */
[data-side='top'] .floating-arrow__arrow {
  bottom: -6px;
}

[data-side='top'] .floating-arrow__arrow::before {
  bottom: -6px;
  border-top-color: var(--arrow-border, transparent);
}

[data-side='top'] .floating-arrow__arrow::after {
  bottom: calc(-6px + var(--arrow-inset, 1px));
  border-top-color: var(--arrow-bg, var(--color-background-surface-overlay));
}

/* 弹出层在触发器右侧：箭头在左侧朝左 */
[data-side='right'] .floating-arrow__arrow {
  left: -6px;
  width: 6px;
  height: 12px;
}

[data-side='right'] .floating-arrow__arrow::before {
  left: -6px;
  border-right-color: var(--arrow-border, transparent);
}

[data-side='right'] .floating-arrow__arrow::after {
  left: calc(-6px + var(--arrow-inset, 1px));
  border-right-color: var(--arrow-bg, var(--color-background-surface-overlay));
}

/* 弹出层在触发器左侧：箭头在右侧朝右 */
[data-side='left'] .floating-arrow__arrow {
  right: -6px;
  width: 6px;
  height: 12px;
}

[data-side='left'] .floating-arrow__arrow::before {
  right: -6px;
  border-left-color: var(--arrow-border, transparent);
}

[data-side='left'] .floating-arrow__arrow::after {
  right: calc(-6px + var(--arrow-inset, 1px));
  border-left-color: var(--arrow-bg, var(--color-background-surface-overlay));
}
.DropdownMenu__positioner {
  z-index: var(--z-index-popover);
  outline: 0;
}

.DropdownMenu__popup {
  position: relative;
  box-sizing: border-box;
  width: max-content;
  min-width: 100px;
  max-width: 320px;
  padding: var(--space-1) 0;
  color: var(--color-text);
  background: var(--color-background-surface-overlay);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  box-shadow: 0 2px 6px var(--color-shadow-strong);
  outline: 0;
  transform-origin: center top;
  transition:
    opacity var(--motion-duration-fast) var(--motion-easing-standard),
    transform var(--motion-duration-fast) var(--motion-easing-standard);
}

.DropdownMenu__popup[data-starting-style],
.DropdownMenu__popup[data-ending-style] {
  opacity: 0;
  transform: scale(0.98);
}

.DropdownMenu__item {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  height: 32px;
  padding: 4px var(--space-4);
  color: var(--color-text);
  font-family: var(--typography-font-family-sans);
  font-size: var(--typography-font-size-body);
  font-weight: var(--typography-font-weight-regular);
  line-height: var(--typography-line-height-body);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  outline: 0;
  user-select: none;
}

.DropdownMenu__item:hover,
.DropdownMenu__item[data-highlighted] {
  background: var(--color-background-neutral-selected);
}

.DropdownMenu__item[data-danger] {
  color: var(--color-text-danger);
}

.DropdownMenu__item[data-danger]:hover,
.DropdownMenu__item[data-danger][data-highlighted] {
  background: var(--color-background-danger-subtle);
}

.DropdownMenu__item[data-disabled] {
  color: var(--color-text-disabled);
  cursor: not-allowed;
}

.DropdownMenu__item[data-disabled]:hover {
  background: transparent;
}

.DropdownMenu__itemIcon {
  display: inline-flex;
  flex: 0 0 auto;
  margin-right: var(--space-2);
  color: var(--color-icon-subtle);
}

.DropdownMenu__item[data-danger] .DropdownMenu__itemIcon {
  color: currentcolor;
}

.DropdownMenu__item:focus-visible {
  box-shadow: inset 0 0 0 2px var(--color-border-focused);
}

.DropdownMenu__separator {
  width: 68px;
  height: 0;
  margin: var(--space-1) auto;
  border-top: 1px solid var(--color-border-subtle);
}

@media (prefers-reduced-motion: reduce) {
  .DropdownMenu__popup {
    transition: none;
  }
}

/* 箭头颜色：白色底 + 菜单边框色 */
.DropdownMenu__arrow {
  --arrow-bg: var(--color-background-surface-overlay);
  --arrow-border: var(--color-border);
  --arrow-inset: 1px;
}


.DropdownMenu__itemText {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.DropdownMenu__description {
  color: var(--color-text-subtle);
  font-size: var(--typography-font-size-body);
}

.DropdownMenu__trailingIcon {
  flex-shrink: 0;
  margin-left: auto;
  color: var(--color-icon-subtle);
}

.DropdownMenu__popup[data-appearance='account'] {
  width: 272px;
  max-height: calc(100vh - 96px);
  padding: var(--space-2) 0;
  overflow-y: auto;
  border-radius: var(--radius-lg);
  box-shadow: 0 6px 16px var(--color-shadow);
}

.DropdownMenu__popup[data-appearance='account'] .DropdownMenu__item {
  gap: var(--space-3);
  height: 40px;
  margin-inline: var(--space-1);
  padding-inline: calc(var(--space-6) - var(--space-1));
  border-radius: var(--radius-sm);
  font-size: var(--typography-font-size-body);
}

.DropdownMenu__popup[data-appearance='account'] .DropdownMenu__itemIcon {
  margin-right: 0;
  color: var(--color-icon);
}

.DropdownMenu__popup[data-appearance='account'] .DropdownMenu__item[data-description] {
  height: 56px;
  padding-inline: calc(var(--space-4) - var(--space-1));
}

.DropdownMenu__popup[data-appearance='account'] .DropdownMenu__separator {
  width: auto;
  margin: var(--space-2) var(--space-3);
}


.DropdownMenu__popup[data-appearance='account'] .DropdownMenu__item:not([data-disabled], [data-danger]):is(:hover, [data-highlighted]) {
  color: var(--color-text-brand);
  background: var(--color-background-brand-subtle);
}

.DropdownMenu__popup[data-appearance='account'] .DropdownMenu__item:not([data-disabled], [data-danger]):is(:hover, [data-highlighted]) :is(.DropdownMenu__itemIcon, .DropdownMenu__trailingIcon, .DropdownMenu__description) {
  color: inherit;
}


.DropdownMenu__hoverIcon {
  display: none;
}

.DropdownMenu__item:not([data-disabled]):is(:hover, [data-highlighted]) .DropdownMenu__defaultIcon {
  display: none;
}

.DropdownMenu__item:not([data-disabled]):is(:hover, [data-highlighted]) .DropdownMenu__hoverIcon {
  display: inline-block;
}

.DropdownMenu__hoverIcon[data-tone='danger'] {
  color: var(--color-icon-danger);
}
.ProductNavigation__nav {
  display: flex;
  flex: 0 0 var(--component-product-navigation-height);
  gap: var(--space-10);
  align-items: center;
  min-width: var(--layout-minimum-width);
  height: var(--component-product-navigation-height);
  padding-inline: var(--space-6);
  color: var(--color-text-inverse);
  background: var(--color-background-brand-bolder);
}

.ProductNavigation__logo {
  width: 106px;
  height: 32px;
  object-fit: contain;
}

.ProductNavigation__homeLink {
  display: flex;
  align-items: center;
}

.ProductNavigation__items {
  display: flex;
  flex: 1;
  align-self: stretch;
  min-width: 0;
}

.ProductNavigation__menuTrigger {
  position: relative;
  display: flex;
  align-self: stretch;
}

.ProductNavigation__item,
.ProductNavigation__active {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  align-items: center;
  justify-content: center;
  min-width: 72px;
  padding: 0 var(--space-4);
  color: inherit;
  font: inherit;
  font-size: var(--typography-font-size-body);
  cursor: pointer;
  background: transparent;
  border: 0;
}

.ProductNavigation__active {
  background: linear-gradient(180deg, transparent, var(--color-overlay-neutral));
}

.ProductNavigation__navigationMenu {
  position: absolute;
  top: 100%;
  left: 50%;
  z-index: var(--z-index-dropdown);
  width: 184px;
  padding-block: var(--space-2);
  color: var(--color-text);
  background: var(--color-background-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 6px var(--color-shadow);
  transform: translateX(-50%);
}

.ProductNavigation__menuItem {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 40px;
  padding: var(--space-2) var(--space-4);
  color: inherit;
  font: inherit;
  font-size: var(--typography-font-size-body);
  line-height: var(--typography-line-height-body);
  text-align: left;
  text-decoration: none;
  white-space: nowrap;
  box-sizing: border-box;
  cursor: pointer;
  background: transparent;
  border: 0;
}

.ProductNavigation__menuItem:hover {
  background: var(--color-background-neutral);
}

.ProductNavigation__menuItem:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--color-border-focused) 65%, transparent);
  outline-offset: -3px;
}

.ProductNavigation__menuDivider {
  height: 1px;
  margin-inline: var(--space-4);
  background: var(--color-background-neutral);
}

.ProductNavigation__item:focus-visible,
.ProductNavigation__active:focus-visible,
.ProductNavigation__campus:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--color-border-inverse) 65%, transparent);
  outline-offset: -3px;
}

.ProductNavigation__right {
  display: flex;
  gap: var(--space-4);
  align-items: center;
}

.ProductNavigation__campus {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  width: 171px;
  height: var(--component-product-navigation-campus-trigger-height);
  padding: 0 var(--space-3);
  color: inherit;
  font: inherit;
  font-size: var(--typography-font-size-body);
  text-align: left;
  cursor: pointer;
  background: color-mix(in srgb, var(--color-background-inverse) 10%, transparent);
  border: 0;
  border-radius: var(--radius-sm);
}

.ProductNavigation__campusIcon {
  margin-left: auto;
}

.ProductNavigation__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font: inherit;
  cursor: pointer;
  border: 0;
  width: var(--component-product-navigation-campus-trigger-height);
  height: var(--component-product-navigation-campus-trigger-height);
  color: var(--color-text-brand-bolder);
  font-weight: var(--typography-font-weight-bold);
  background: var(--color-background-inverse);
  border-radius: var(--radius-full);

}


.ProductNavigation__avatar:focus-visible {
  outline: 2px solid var(--color-border-inverse);
  outline-offset: 3px;
}

.ProductNavigation__profileAvatar {
  display: flex;
  flex: 0 0 36px;
  align-items: center;
  justify-content: center;
  height: 36px;
  color: var(--color-text-brand-bolder);
  font-weight: var(--typography-font-weight-bold);
  background: var(--color-background-neutral);
  border-radius: var(--radius-full);
}

.ProductNavigation__avatarImage {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}
.AdminNavigation__header {
  display: flex;
  flex: 0 0 56px;
  gap: var(--space-6);
  align-items: center;
  height: 56px;
  padding-inline: var(--space-6);
  color: var(--color-text-inverse);
  background: var(--color-background-brand-bolder);
}

.AdminNavigation__logoLink {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  height: 32px;
  padding-right: var(--space-6);
  border-right: 1px solid color-mix(in srgb, var(--color-border-inverse) 30%, transparent);
}

.AdminNavigation__logo {
  width: 91px;
  height: 38px;
  object-fit: contain;
}

.AdminNavigation__title {
  display: flex;
  flex: 0 0 auto;
  gap: var(--space-2);
  align-items: center;
  font-size: var(--typography-font-size-body);
  white-space: nowrap;
}

.AdminNavigation__search {
  position: relative;
  flex: 1 1 420px;
  max-width: 420px;
  min-width: 220px;
  margin-inline: auto;
}

.AdminNavigation__searchInput {
  width: 100%;
  padding-right: 48px;
  border-radius: var(--radius-full);
}

.AdminNavigation__assistant {
  position: absolute;
  top: -3px;
  right: var(--space-2);
  width: 40px;
  height: 35px;
  object-fit: contain;
  pointer-events: none;
}

.AdminNavigation__actions {
  display: flex;
  flex: 0 0 auto;
  gap: var(--space-4);
  align-items: center;
}

.AdminNavigation__returnLink {
  padding: var(--space-2) var(--space-3);
  color: inherit;
  font-size: var(--typography-font-size-body);
  line-height: 16px;
  text-decoration: none;
  white-space: nowrap;
  background: color-mix(in srgb, var(--color-background-inverse) 10%, transparent);
  border-radius: var(--radius-full);
}

.AdminNavigation__help {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  color: inherit;
  cursor: pointer;
  background: transparent;
  border: 0;
  border-radius: var(--radius-full);
}

.AdminNavigation__account {
  position: relative;
  display: flex;
  align-items: center;
}

.AdminNavigation__badge {
  position: absolute;
  right: -4px;
  bottom: -3px;
  width: 49px;
  height: 15px;
  pointer-events: none;
}

.AdminNavigation__returnLink:hover,
.AdminNavigation__help:hover {
  background: color-mix(in srgb, var(--color-background-inverse) 20%, transparent);
}

.AdminNavigation__returnLink:focus-visible,
.AdminNavigation__help:focus-visible,
.AdminNavigation__logoLink:focus-visible {
  outline: 2px solid var(--color-border-inverse);
  outline-offset: 2px;
}
.ModuleSidebar__root {
  display: flex;
  flex-direction: column;
  width: var(--component-module-sidebar-width);
  min-height: 0;
  overflow: hidden;
  color: var(--color-text);
  background: var(--color-background-neutral);
  transition: width var(--motion-duration-normal) var(--motion-easing-standard);
}

.ModuleSidebar__navigation {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: var(--component-module-sidebar-group-gap);
  min-width: var(--component-module-sidebar-width);
  padding: var(--space-2);
  overflow-y: auto;
}

.ModuleSidebar__group {
  display: grid;
  gap: 0;
}

.ModuleSidebar__item {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  width: 100%;
  padding: var(--component-module-sidebar-item-padding-y) var(--component-module-sidebar-item-padding-x);
  color: var(--color-text);
  font: inherit;
  font-size: var(--typography-font-size-body);
  font-weight: var(--typography-font-weight-medium);
  line-height: var(--typography-line-height-body);
  text-align: left;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  box-sizing: border-box;
}

.ModuleSidebar__marker {
  flex: 0 0 auto;
  width: var(--component-module-sidebar-item-marker-size);
  height: var(--component-module-sidebar-item-marker-size);
  color: var(--color-icon-placeholder);
  background: currentcolor;
  border-radius: var(--radius-full);
}

.ModuleSidebar__item:hover {
  color: var(--color-text-brand-accessible);
  background: var(--color-background-neutral-selected);
}

.ModuleSidebar__item:hover .ModuleSidebar__marker {
  color: var(--color-icon-brand);
}

.ModuleSidebar__item:focus-visible,
.ModuleSidebar__collapse:focus-visible {
  outline: 2px solid var(--color-border-focused);
  outline-offset: -2px;
}

.ModuleSidebar__active {
  color: var(--color-text-brand-accessible);
  font-weight: var(--typography-font-weight-semibold);
  background: var(--color-background-neutral-selected);
}

.ModuleSidebar__active .ModuleSidebar__marker {
  color: var(--color-icon-brand);
}

.ModuleSidebar__divider {
  height: 0;
  border-top: 1px solid var(--color-border-subtle);
}

.ModuleSidebar__collapse {
  display: flex;
  flex: 0 0 var(--component-module-sidebar-collapse-control-height);
  gap: var(--space-1);
  align-items: center;
  min-width: var(--component-module-sidebar-width);
  height: var(--component-module-sidebar-collapse-control-height);
  padding: 0 var(--space-4);
  margin-top: auto;
  color: var(--color-text-subtle);
  font: inherit;
  font-size: var(--typography-font-size-caption);
  font-weight: var(--typography-font-weight-regular);
  line-height: var(--typography-line-height-caption);
  text-align: left;
  cursor: pointer;
  background: transparent;
  border: 0;
}

.ModuleSidebar__collapsed,
.ModuleSidebar__root[data-collapsed] {
  width: var(--component-module-sidebar-collapsed-width);
}

.ModuleSidebar__root[data-collapsed] .ModuleSidebar__item,
.ModuleSidebar__root[data-collapsed] .ModuleSidebar__collapse {
  justify-content: center;
  padding-inline: 0;
}

.ModuleSidebar__root[data-collapsed] .ModuleSidebar__navigation,
.ModuleSidebar__root[data-collapsed] .ModuleSidebar__collapse {
  min-width: 0;
  width: 100%;
}

.ModuleSidebar__root[data-collapsed] .ModuleSidebar__collapse {
  gap: 0;
}

.ModuleSidebar__root[data-collapsed] .ModuleSidebar__label {
  display: none;
}

/* 管理后台外观：分组标题行 + 缩进子项，无圆点与分隔线。 */
.ModuleSidebar__title {
  flex: 0 0 auto;
  padding: var(--space-5) var(--space-6) var(--space-2);
  color: var(--color-text);
  font-size: var(--typography-font-size-body);
  font-weight: var(--typography-font-weight-semibold);
}

.ModuleSidebar__root[data-surface] {
  background: var(--color-background-surface);
}

.ModuleSidebar__root[data-appearance='admin'] .ModuleSidebar__navigation {
  gap: 0;
  padding: var(--space-1) var(--space-1) var(--space-2);
}

.ModuleSidebar__root[data-appearance='admin'] .ModuleSidebar__group {
  gap: 0;
}

.ModuleSidebar__groupTrigger {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  width: 100%;
  height: var(--component-module-sidebar-item-height);
  padding: 0 var(--space-4);
  color: var(--color-text);
  font: inherit;
  font-size: var(--typography-font-size-body);
  font-weight: var(--typography-font-weight-regular);
  line-height: var(--typography-line-height-body);
  text-align: left;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  box-sizing: border-box;
}

.ModuleSidebar__root[data-appearance='admin'] .ModuleSidebar__item {
  height: var(--component-module-sidebar-item-height);

  /* 后台外观全部常规字重，选中态靠颜色区分；覆盖默认外观的 medium 与 .active 的 semibold。 */
  font-weight: var(--typography-font-weight-regular);
  padding: 0 var(--space-4) 0 var(--space-10);
}

.ModuleSidebar__groupIcon,
.ModuleSidebar__caret {
  flex: 0 0 auto;
  color: var(--color-icon-subtle);
}

.ModuleSidebar__trailingCaret {
  margin-left: auto;
}

.ModuleSidebar__groupTrigger:hover,
.ModuleSidebar__groupTrigger[data-active] {
  color: var(--color-text-brand-accessible);
  background: var(--color-background-neutral-selected);
}

.ModuleSidebar__groupTrigger:hover .ModuleSidebar__groupIcon,
.ModuleSidebar__groupTrigger:hover .ModuleSidebar__caret,
.ModuleSidebar__groupTrigger[data-active] .ModuleSidebar__groupIcon,
.ModuleSidebar__groupTrigger[data-active] .ModuleSidebar__caret {
  color: var(--color-icon-brand);
}

.ModuleSidebar__root[data-collapsed][data-appearance='admin'] .ModuleSidebar__navigation {
  padding-inline: var(--space-1);
}

.ModuleSidebar__root[data-collapsed][data-appearance='admin'] .ModuleSidebar__groupTrigger {
  justify-content: center;
  padding-inline: 0;
}

/* 第二列在白底卡片内，状态底色比第一列更浅：hover 用极浅中性色、选中用浅品牌色，
   避免灰块压在纯白上显得过重。文字仍用 color.text.brand.accessible，保持 AA。 */
.ModuleSidebar__root[data-surface] .ModuleSidebar__item:hover:not([aria-current]),
.ModuleSidebar__root[data-surface] .ModuleSidebar__groupTrigger:hover:not([data-active]) {
  background: var(--color-background-neutral-subtle);
}

.ModuleSidebar__root[data-surface] .ModuleSidebar__active,
.ModuleSidebar__root[data-surface] .ModuleSidebar__groupTrigger[data-active] {
  background: var(--color-background-brand-subtle);
}
.ModulePage__breadcrumb {
  display: flex;
  flex: 0 0 32px;
  gap: var(--space-1);
  align-items: center;
  height: 32px;
  padding: 0 var(--space-3);
  color: var(--color-text-subtle);
  font-size: var(--typography-font-size-caption);
  line-height: var(--typography-line-height-caption);
  background: var(--color-background-page);
}

.ModulePage__breadcrumb strong {
  color: var(--color-text);
  font-weight: var(--typography-font-weight-regular);
}

.ModulePage__contentCard {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  overflow: auto;
  background: var(--color-background-surface);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
}

.ModulePage__tabsRoot {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
}

.ModulePage__tabList {
  display: flex;
  flex: 0 0 48px;
  gap: var(--space-8);
  height: 48px;
  padding: 0 var(--space-4);
  border-bottom: 1px solid var(--color-border-subtle);
  background: var(--color-background-surface);
}

.ModulePage__tab {
  height: 48px;
  padding: 0 var(--space-1);
  color: var(--color-text-subtle);
  font: inherit;
  font-size: var(--typography-font-size-body);
  font-weight: var(--typography-font-weight-medium);
  line-height: var(--typography-line-height-body);
  white-space: nowrap;
  cursor: pointer;
  background: transparent;
  border: 0;
  border-bottom: 3px solid transparent;
}

.ModulePage__tab:hover:not(:disabled) {
  color: var(--color-text-brand-accessible);
}

.ModulePage__tab:focus-visible {
  outline: 2px solid var(--color-border-focused);
  outline-offset: -2px;
}

.ModulePage__activeTab {
  color: var(--color-text-brand);
  border-bottom-color: var(--color-border-focused);
}

.ModulePage__tab:disabled {
  color: var(--color-text-disabled);
  cursor: not-allowed;
}

.ModulePage__tabPanel {
  flex: 1 1 auto;
  min-height: 0;
}
/*
 * Figma `1-Button 按钮`（节点 `2933:51063`）：
 * Size=Default 32 / Large 40 / Small 24；圆角 4px；
 * 悬停使用状态色 -5 阶（变亮），按下使用 Dark-2 阶（变深）。
 */
.Button__root  {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  gap: var(--space-2);
  font-family: var(--typography-font-family-sans);
  font-weight: var(--typography-font-weight-regular);
  white-space: nowrap;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
}

.Button__root[data-size='default']  {
  height: 32px;
  padding: var(--space-1) var(--space-4);
  font-size: var(--typography-font-size-body);
  line-height: var(--typography-line-height-body);
}

.Button__root[data-size='large']  {
  height: 40px;
  padding: var(--space-2) var(--space-5);
  font-size: var(--typography-font-size-body);
  line-height: var(--typography-line-height-body);
}

.Button__root[data-size='small']  {
  height: 24px;
  padding: 2px var(--space-3);
  font-size: var(--typography-font-size-caption);
  line-height: var(--typography-line-height-caption);
}

.Button__root:focus-visible  {
  outline: 2px solid var(--color-border-focused);
  outline-offset: 2px;
}

.Button__root:disabled  {
  cursor: not-allowed;
}

/* ---------- Type（Plain=off）---------- */
.Button__default  {
  color: var(--color-text-subtle);
  background: var(--color-background-surface);
  border-color: var(--color-border);
}

.Button__default:is(:hover, :focus-visible):not(:disabled)  {
  color: var(--color-text-brand);
  background: var(--color-background-brand-subtle);
  border-color: var(--color-border-brand-subtle);
}

.Button__default:focus-visible:not(:disabled)  {
  border-color: var(--color-border-brand-light);
}

.Button__default:active:not(:disabled)  {
  color: var(--color-text-brand-bold);
  background: var(--color-background-brand-subtle);
  border-color: var(--color-border-brand-pressed);
}

.Button__default:disabled  {
  color: var(--color-text-disabled);
  background: var(--color-background-neutral-subtle);
  border-color: var(--color-border);
}

.Button__primary  {
  color: var(--color-text-inverse);
  background: var(--color-background-brand-bold);
}

.Button__success  {
  color: var(--color-text-inverse);
  background: var(--color-background-success-bold);
}

.Button__warning  {
  color: var(--color-text-inverse);
  background: var(--color-background-warning-bold);
}

.Button__danger  {
  color: var(--color-text-inverse);
  background: var(--color-background-danger-bold);
}

.Button__info  {
  color: var(--color-text-inverse);
  background: var(--color-background-information-bold);
}

.Button__primary:is(:hover, :focus-visible):not(:disabled)  {
  background: var(--color-background-brand-bold-hovered);
}

.Button__success:is(:hover, :focus-visible):not(:disabled)  {
  background: var(--color-background-success-bold-hovered);
}

.Button__warning:is(:hover, :focus-visible):not(:disabled)  {
  background: var(--color-background-warning-bold-hovered);
}

.Button__danger:is(:hover, :focus-visible):not(:disabled)  {
  background: var(--color-background-danger-bold-hovered);
}

.Button__info:is(:hover, :focus-visible):not(:disabled)  {
  background: var(--color-background-information-bold-hovered);
}

.Button__primary:active:not(:disabled)  {
  background: var(--color-background-brand-bold-pressed);
}

.Button__success:active:not(:disabled)  {
  background: var(--color-background-success-bold-pressed);
}

.Button__warning:active:not(:disabled)  {
  background: var(--color-background-warning-bold-pressed);
}

.Button__danger:active:not(:disabled)  {
  background: var(--color-background-danger-bold-pressed);
}

.Button__info:active:not(:disabled)  {
  background: var(--color-background-information-bold-pressed);
}

/* Figma 的 Disable 与 Hover 使用同一色阶，这里复用 hovered token 保持单一来源。 */
.Button__primary:disabled  {
  background: var(--color-background-brand-bold-hovered);
}

.Button__success:disabled  {
  background: var(--color-background-success-bold-hovered);
}

.Button__warning:disabled  {
  background: var(--color-background-warning-bold-hovered);
}

.Button__danger:disabled  {
  background: var(--color-background-danger-bold-hovered);
}

.Button__info:disabled  {
  background: var(--color-background-information-bold-hovered);
}

/* ---------- Plain=on ---------- */
.Button__plain  {
  background: transparent;
  border-color: var(--color-border);
}

.Button__plain.Button__default  {
  color: var(--color-text-subtle);
}

.Button__plain.Button__primary  {
  color: var(--color-text-brand);
  background: var(--color-background-brand-subtle);
  border-color: var(--color-border-brand);
}

.Button__plain.Button__success  {
  color: var(--color-text-success);
  background: var(--color-background-success-subtle);
  border-color: var(--color-border-success);
}

.Button__plain.Button__warning  {
  color: var(--color-text-warning);
  background: var(--color-background-warning-subtle);
  border-color: var(--color-border-warning);
}

.Button__plain.Button__danger  {
  color: var(--color-text-danger);
  background: var(--color-background-danger-subtle);
  border-color: var(--color-border-danger);
}

.Button__plain.Button__info  {
  color: var(--color-text-information);
  background: var(--color-background-information-subtle);
  border-color: var(--color-border-information);
}

.Button__plain.Button__default:is(:hover, :focus-visible):not(:disabled)  {
  color: var(--color-text-brand);
  background: var(--color-background-inverse);
  border-color: var(--color-border-brand);
}

.Button__plain.Button__default:active:not(:disabled)  {
  color: var(--color-text-brand-bold);
  background: var(--color-background-inverse);
  border-color: var(--color-border-brand-pressed);
}

.Button__plain.Button__primary:is(:hover, :focus-visible):not(:disabled)  {
  color: var(--color-text-inverse);
  background: var(--color-background-brand-bold);
  border-color: transparent;
}

.Button__plain.Button__success:is(:hover, :focus-visible):not(:disabled)  {
  color: var(--color-text-inverse);
  background: var(--color-background-success-bold);
  border-color: transparent;
}

.Button__plain.Button__warning:is(:hover, :focus-visible):not(:disabled)  {
  color: var(--color-text-inverse);
  background: var(--color-background-warning-bold);
  border-color: transparent;
}

.Button__plain.Button__danger:is(:hover, :focus-visible):not(:disabled)  {
  color: var(--color-text-inverse);
  background: var(--color-background-danger-bold);
  border-color: transparent;
}

.Button__plain.Button__info:is(:hover, :focus-visible):not(:disabled)  {
  color: var(--color-text-inverse);
  background: var(--color-background-information-bold);
  border-color: transparent;
}

.Button__plain.Button__primary:active:not(:disabled)  {
  color: var(--color-text-inverse);
  background: var(--color-background-brand-bold-pressed);
}

.Button__plain.Button__success:active:not(:disabled)  {
  color: var(--color-text-inverse);
  background: var(--color-background-success-bold-pressed);
}

.Button__plain.Button__warning:active:not(:disabled)  {
  color: var(--color-text-inverse);
  background: var(--color-background-warning-bold-pressed);
}

.Button__plain.Button__danger:active:not(:disabled)  {
  color: var(--color-text-inverse);
  background: var(--color-background-danger-bold-pressed);
}

.Button__plain.Button__info:active:not(:disabled)  {
  color: var(--color-text-inverse);
  background: var(--color-background-information-bold-pressed);
}

.Button__plain.Button__default:disabled  {
  color: var(--color-text-disabled);
  background: var(--color-background-inverse);
  border-color: var(--color-border);
}

.Button__plain.Button__primary:disabled  {
  color: var(--color-text-brand-disabled);
  border-color: var(--color-border-brand-light);
}

.Button__plain.Button__success:disabled  {
  color: var(--color-text-success-disabled);
  border-color: var(--color-border-success-light);
}

.Button__plain.Button__warning:disabled  {
  color: var(--color-text-warning-disabled);
  border-color: var(--color-border-warning-light);
}

.Button__plain.Button__danger:disabled  {
  color: var(--color-text-danger-disabled);
  border-color: var(--color-border-danger-light);
}

.Button__plain.Button__info:disabled  {
  color: var(--color-text-information-disabled);
  border-color: var(--color-border-information-light);
}
/*
 * Figma `5-Drawer 抽屉`（节点 `3116:0`）：
 * Layout=Left / Right 宽 480px，Layout=Top / Bottom 高 300px；
 * header 46（左右 20、上 20）、body 内边距 20、footer 72（内边距 20）。
 */
.Drawer__backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-index-overlay);
  background: var(--color-overlay-neutral);
  transition: opacity var(--motion-duration-normal) var(--motion-easing-standard);
}

.Drawer__backdrop[data-starting-style],
.Drawer__backdrop[data-ending-style] {
  opacity: 0;
}

.Drawer__popup {
  position: fixed;
  z-index: var(--z-index-modal);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: var(--color-text);
  background: var(--color-background-surface-overlay);
  box-shadow: var(--elevation-shadow-lg);
  transition: transform var(--motion-duration-slow) var(--motion-easing-standard);
}

.Drawer__popup[data-layout='right'] {
  top: 0;
  right: 0;
  bottom: 0;
  width: 480px;
  max-width: 94vw;
}

.Drawer__popup[data-layout='left'] {
  top: 0;
  bottom: 0;
  left: 0;
  width: 480px;
  max-width: 94vw;
}

.Drawer__popup[data-layout='top'] {
  top: 0;
  right: 0;
  left: 0;
  height: 300px;
}

.Drawer__popup[data-layout='bottom'] {
  right: 0;
  bottom: 0;
  left: 0;
  height: 300px;
}

.Drawer__popup[data-ending-style] {
  transition-timing-function: var(--motion-easing-exit);
}

.Drawer__popup[data-layout='right'][data-starting-style],
.Drawer__popup[data-layout='right'][data-ending-style] {
  transform: translateX(100%);
}

.Drawer__popup[data-layout='left'][data-starting-style],
.Drawer__popup[data-layout='left'][data-ending-style] {
  transform: translateX(-100%);
}

.Drawer__popup[data-layout='top'][data-starting-style],
.Drawer__popup[data-layout='top'][data-ending-style] {
  transform: translateY(-100%);
}

.Drawer__popup[data-layout='bottom'][data-starting-style],
.Drawer__popup[data-layout='bottom'][data-ending-style] {
  transform: translateY(100%);
}

/* 按需创建且初始 open=true 时没有 starting 属性，用首次绘制样式触发进场。 */
@starting-style {
  .Drawer__backdrop {
    opacity: 0;
  }

  .Drawer__popup[data-layout='right'] {
    transform: translateX(100%);
  }

  .Drawer__popup[data-layout='left'] {
    transform: translateX(-100%);
  }

  .Drawer__popup[data-layout='top'] {
    transform: translateY(-100%);
  }

  .Drawer__popup[data-layout='bottom'] {
    transform: translateY(100%);
  }
}

.Drawer__header {
  display: flex;
  flex: 0 0 46px;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-5) var(--space-5) 0;
}

.Drawer__title {
  margin: 0;
  font-size: var(--typography-font-size-body-large);
  font-weight: var(--typography-font-weight-semibold);
  line-height: 26px;
}

.Drawer__close {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  padding: 0;
  color: var(--color-text-subtlest);
  font-size: var(--typography-font-size-body-large);
  line-height: 1;
  cursor: pointer;
  background: transparent;
  border: 0;
}

.Drawer__headerActions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--space-4);
  margin-left: var(--space-4);
}

.Drawer__headingContent {
  display: flex;
  flex: 1 1 auto;
  gap: var(--space-3);
  align-items: center;
  min-width: 0;
}

.Drawer__headingContent .Drawer__title {
  flex: 0 1 auto;
}

.Drawer__title[data-has-extra] {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.Drawer__close::after {
  position: absolute;
  inset: calc(var(--space-2) * -1);
  content: '';
}

.Drawer__close:hover {
  color: var(--color-text);
}

.Drawer__close:focus-visible {
  outline: 2px solid var(--color-border-focused);
  outline-offset: 2px;
}

.Drawer__body {
  flex: 1 1 auto;
  min-height: 0;
  padding: var(--space-5);
  overflow: auto;
}

.Drawer__footer {
  display: flex;
  flex: 0 0 72px;
  align-items: flex-start;
  justify-content: flex-end;
  gap: var(--space-2);
  padding: var(--space-5);
}

@media (prefers-reduced-motion: reduce) {
  .Drawer__backdrop,
  .Drawer__popup {
    transition: none;
  }
}
.Dialog__backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-index-overlay);
  background: var(--color-overlay-neutral);
  transition: opacity var(--motion-duration-normal) var(--motion-easing-standard);
}

.Dialog__backdrop[data-starting-style],
.Dialog__backdrop[data-ending-style] {
  opacity: 0;
}

.Dialog__nestedBackdrop {
  z-index: calc(var(--z-index-modal) + 1);
}

.Dialog__popup {
  position: fixed;
  z-index: var(--z-index-modal);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: var(--color-text);
  background: var(--color-background-surface-overlay);
  box-shadow: var(--elevation-shadow-lg);
}

.Dialog__nestedPopup {
  z-index: calc(var(--z-index-modal) + 2);
}

.Dialog__center {
  top: 50%;
  left: 50%;
  max-width: calc(100vw - var(--space-12));
  max-height: min(82vh, 760px);
  border-radius: var(--radius-md);
  transform: translate(-50%, -50%);
  transition:
    opacity var(--motion-duration-normal) var(--motion-easing-standard),
    transform var(--motion-duration-normal) var(--motion-easing-standard);
}

.Dialog__center[data-starting-style],
.Dialog__center[data-ending-style] {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.98);
}

/*
 * 宽度档位：`sm` 为 Figma `5-Dialog 对话框`（节点 `3144:0`）的 480 × 242 确认对话框；
 * `md` / `lg` 是复杂弹窗的快捷档位。需要按场景定宽时改用 `width` 属性，不在此写死。
 */
.Dialog__sm {
  width: 480px;
}

.Dialog__md {
  width: 820px;
}

.Dialog__lg {
  width: 1040px;
}

/* 兜底：popup 的 overflow:hidden 未裁剪住子元素，显式给顶部圆角。 */
.Dialog__header {
  box-sizing: border-box;
  border-top-left-radius: var(--radius-md);
  border-top-right-radius: var(--radius-md);
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
  padding: var(--space-2) var(--space-6);
}

.Dialog__popup[data-header-tone='brand'] .Dialog__header {
  color: var(--color-text-inverse);
  background: var(--color-background-brand-bold);
}

.Dialog__title {
  margin: 0;
  font-size: var(--typography-font-size-body-large);
  font-weight: var(--typography-font-weight-semibold);
  line-height: 26px;
}

.Dialog__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 16px;
  height: 16px;
  padding: 0;
  color: var(--color-text-subtle);
  font-size: var(--typography-font-size-body-large);
  line-height: 1;
  cursor: pointer;
  background: transparent;
  border: 0;
}

/* 视觉 16px，命中区域扩展到 32px。 */
.Dialog__close::after {
  position: absolute;
  inset: calc(var(--space-2) * -1);
  content: '';
}

.Dialog__close:hover {
  color: var(--color-text-brand-accessible);
}

.Dialog__close:focus-visible {
  outline: 2px solid var(--color-border-focused);
  outline-offset: 2px;
}

.Dialog__popup[data-header-tone='brand'] .Dialog__close {
  color: var(--color-text-inverse);
}

.Dialog__popup[data-header-tone='brand'] .Dialog__close:hover {
  color: var(--color-text-inverse);
}

.Dialog__body {
  flex: 1 1 auto;
  min-height: 0;
  padding: var(--space-6);
  overflow: auto;
}

.Dialog__footer {
  border-bottom-right-radius: var(--radius-md);
  border-bottom-left-radius: var(--radius-md);
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
  min-height: 56px;
  padding: var(--space-3) var(--space-6);
  background: var(--color-background-neutral-subtlest);
  border-top: 1px solid var(--color-border-subtle);
}

@media (prefers-reduced-motion: reduce) {
  .Dialog__backdrop,
  .Dialog__center {
    transition: none;
  }
}

.Dialog__heading {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.Dialog__description {
  margin: 0;
  color: var(--color-text-subtle);
  font-size: var(--typography-font-size-caption);
  line-height: var(--typography-line-height-caption);
}

.Dialog__header:has(.Dialog__description) {
  align-items: flex-start;
  padding-block: var(--space-4);
}

.Dialog__header:has(.Dialog__description) .Dialog__close {
  margin-top: var(--space-1);
}
/*
 * Figma `1-Link 链接`（节点 `2048:0`）：24 变体 = 6 种语义 × 4 种状态。
 * 高 22、字号 14/22、图标与文字间距 6；悬停使用 -5 阶变亮，不使用下划线；
 * Default 类型常态为主文字色、悬停转主题色。
 */
.Link__root {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  padding: 0;
  font-family: var(--typography-font-family-sans);
  font-size: var(--typography-font-size-body);
  font-weight: var(--typography-font-weight-regular);
  line-height: var(--typography-line-height-body);
  text-decoration: none;
  cursor: pointer;
  background: transparent;
  border: 0;
}

.Link__root[data-type='default'] {
  color: var(--color-text);
}

.Link__root[data-type='primary'] {
  color: var(--color-text-brand);
}

.Link__root[data-type='success'] {
  color: var(--color-text-success);
}

.Link__root[data-type='warning'] {
  color: var(--color-text-warning);
}

.Link__root[data-type='danger'] {
  color: var(--color-text-danger);
}

.Link__root[data-type='info'] {
  color: var(--color-text-information);
}

.Link__root[data-type='default']:hover:not([data-disabled]) {
  color: var(--color-text-brand);
}

.Link__root[data-type='primary']:hover:not([data-disabled]) {
  color: var(--color-text-brand-hovered);
}

.Link__root[data-type='success']:hover:not([data-disabled]) {
  color: var(--color-text-success-hovered);
}

.Link__root[data-type='warning']:hover:not([data-disabled]) {
  color: var(--color-text-warning-hovered);
}

.Link__root[data-type='danger']:hover:not([data-disabled]) {
  color: var(--color-text-danger-hovered);
}

.Link__root[data-type='info']:hover:not([data-disabled]) {
  color: var(--color-text-information-hovered);
}

/* 破坏性操作可保留中性常态色，仅在悬停时显式提示风险。 */
.Link__root[data-hover-type='danger']:hover:not([data-disabled]) {
  color: var(--color-text-danger);
}

/* 文字与图标是同一个操作；悬停用根节点的颜色一起反馈，不只给文字画下划线。 */
.Link__root[data-has-icon] > svg {
  color: inherit;
}

/*
 * 弱化态：常态压到次级文字色，悬停／焦点仍走所属语义色。
 * 写在 [data-type] 之后，靠同特异性的源序次胜出（同文件内顺序确定）。
 */
.Link__root[data-muted]:not([data-disabled]) {
  color: var(--color-text-subtlest);
}

.Link__root[data-disabled] {
  color: var(--color-text-disabled);
  cursor: not-allowed;
}

.Link__root:focus-visible {
  outline: 2px solid var(--color-border-focused);
  outline-offset: 2px;
  border-radius: 2px;
}
/*
 * Figma `5-Popconfirm 气泡确认框`（节点 `3106:0`）：
 * 面板最小宽 211、内边距 16、间距 16、圆角 4、白底 + color.border.light 边框 + 小投影；
 * 操作行 24 高（对应 Button 的 small 尺寸）；箭头 12×6，支持 12 种对位。
 *
 * 文案两层（标题 + 可选说明）靠字号拉开层次：标题 body 14/22、说明 caption 12/20。
 * 若两层同用 caption，只剩颜色差（text / text-subtle），视觉上没有主次。
 */
.Popconfirm__positioner {
  z-index: var(--z-index-popover);
}

.Popconfirm__popup {
  position: relative;
  box-sizing: border-box;
  display: flex;
  min-width: 211px;
  max-width: 320px;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-4);
  font-family: var(--typography-font-family-sans);
  background: var(--color-background-surface-overlay);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-sm);
  box-shadow: var(--elevation-shadow-sm);
  transition: opacity var(--motion-duration-fast) var(--motion-easing-standard);
}

.Popconfirm__popup[data-starting-style],
.Popconfirm__popup[data-ending-style] {
  opacity: 0;
}

.Popconfirm__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.Popconfirm__title {
  margin: 0;
  font-size: var(--typography-font-size-body);
  line-height: var(--typography-line-height-body);
  color: var(--color-text);
}

.Popconfirm__description {
  margin: 0;
  font-size: var(--typography-font-size-caption);
  line-height: var(--typography-line-height-caption);
  color: var(--color-text-subtle);
}

.Popconfirm__actions {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  justify-content: flex-end;
}

/* 箭头颜色：白色底 + 浅色描边 */
.Popconfirm__arrow {
  --arrow-bg: var(--color-background-surface-overlay);
  --arrow-border: var(--color-border-light);
  --arrow-inset: 1px;
}
/*
 * Figma `2-Input Number 数字输入框`（节点 `2060:0`）：
 * Size=Large 180×40 / Default 160×32 / Small 130×24；步进按钮为等高正方形；
 * 默认 #DCDFE6 → 悬停 #CDD0D6 → 聚焦 #2878E8，禁用为浅底浅边框。
 * 步进按钮底色 #F5F7FA、边框 #E4E7ED；数值文字 #606266。
 */
.InputNumber__root {
  display: inline-flex;
}

.InputNumber__group {
  display: flex;
  box-sizing: border-box;
  width: 160px;
  height: 32px;
  overflow: hidden;
  background: var(--color-background-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

.InputNumber__root[data-size='large'] .InputNumber__group {
  width: 180px;
  height: 40px;
}

.InputNumber__root[data-size='small'] .InputNumber__group {
  width: 130px;
  height: 24px;
}

.InputNumber__root:hover:not([data-disabled], :focus-within) .InputNumber__group {
  border-color: var(--color-border-strong);
}

.InputNumber__root:focus-within .InputNumber__group {
  border-color: var(--color-border-focused);
}

/* 与 Input 一致：焦点只用边框变色表达，避免双层提示。 */

.InputNumber__root[data-disabled] .InputNumber__group {
  background: var(--color-background-neutral-subtle);
  border-color: var(--color-border-light);
}

.InputNumber__input {
  min-width: 0;
  flex: 1;
  padding: 0 var(--space-2);
  color: var(--color-text-subtle);
  font-family: var(--typography-font-family-sans);
  font-size: var(--typography-font-size-body);
  line-height: var(--typography-line-height-body);
  text-align: center;
  background: transparent;
  border: 0;
  outline: 0;
}

.InputNumber__root[data-size='small'] .InputNumber__input {
  font-size: var(--typography-font-size-caption);
  line-height: var(--typography-line-height-caption);
}

.InputNumber__input:disabled {
  color: var(--color-text-disabled);
}

.InputNumber__stepper {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 32px;
  padding: 0;
  color: var(--color-icon-subtle);
  font-size: var(--typography-font-size-body);
  line-height: 1;
  cursor: pointer;
  background: var(--color-background-neutral-subtle);
  border: 0;
}

.InputNumber__root[data-size='large'] .InputNumber__stepper {
  width: 40px;
}

.InputNumber__root[data-size='small'] .InputNumber__stepper {
  width: 24px;
}

.InputNumber__stepper:first-child {
  border-right: 1px solid var(--color-border-light);
}

.InputNumber__stepper:last-child {
  border-left: 1px solid var(--color-border-light);
}

.InputNumber__stepper:hover:not(:disabled),
.InputNumber__rightStepper:hover:not(:disabled) {
  color: var(--color-text-brand-accessible);
  background: var(--color-background-brand-subtle);
}

.InputNumber__stepper:disabled,
.InputNumber__rightStepper:disabled {
  color: var(--color-icon-disabled);
  cursor: not-allowed;
}

/* 步进按钮在容器内部，焦点环用内嵌描边，避免溢出分组边框。 */
.InputNumber__stepper:focus-visible,
.InputNumber__rightStepper:focus-visible {
  outline: 2px solid var(--color-border-focused);
  outline-offset: -2px;
}

.InputNumber__rightSteppers {
  display: flex;
  flex: none;
  flex-direction: column;
  width: 32px;
  border-left: 1px solid var(--color-border-light);
}

.InputNumber__root[data-size='large'] .InputNumber__rightSteppers {
  width: 40px;
}

.InputNumber__rightStepper {
  display: inline-flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: var(--color-icon-subtle);
  line-height: 1;
  cursor: pointer;
  background: var(--color-background-neutral-subtle);
  border: 0;
}

.InputNumber__rightStepper + .InputNumber__rightStepper {
  border-top: 1px solid var(--color-border-light);
}

/*
 * `steppersOnHover`：步进按钮静态隐形，鼠标落在整组上或键盘聚焦时现身。
 * 用 opacity 而不是 display / visibility——保留槽位，出现与消失时数字不横跳
 * （同 Select 的箭头）。同时关掉指针事件：看不见的按钮不该被误点到，把数字改掉。
 */
.InputNumber__root[data-steppers='hover'] .InputNumber__stepper,
.InputNumber__root[data-steppers='hover'] .InputNumber__rightSteppers {
  pointer-events: none;
  opacity: 0;
}

.InputNumber__root[data-steppers='hover']:hover .InputNumber__stepper,
.InputNumber__root[data-steppers='hover']:hover .InputNumber__rightSteppers,
.InputNumber__root[data-steppers='hover']:focus-within .InputNumber__stepper,
.InputNumber__root[data-steppers='hover']:focus-within .InputNumber__rightSteppers {
  pointer-events: auto;
  opacity: 1;
}
/* 容器类名供子选择器引用（如 `.dialog > div:has(> .preview)`）；
   样式由 Drawer 组件 popup 默认提供（right layout：top0 right0 bottom0 + 滑入动画），宽度由 width prop 控制。 */

/*
 * Dialog 的 body 容器是 CSS module hash 类名（`.body`），页面里无法直接选中；
 * `> div:nth-child(2)` 太脆弱——Dialog 一旦在 header/body 间插层就静默失效。
 * 改用 `:has(> .preview)` 精确命中「承载预览面板的那个 body 容器」，DOM 重排也稳定。
 */
.OrderPreviewDialog__dialog > div:has(> .OrderPreviewDialog__preview) {
  display: flex;
  min-height: 0;
  padding: 0;
  overflow: hidden;
}

.OrderPreviewDialog__preview {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  color: var(--color-text);
  background: var(--color-background-page);
}

/* 保存状态使用 Drawer 标题栏插槽，与关闭按钮保持 40px 间距。 */
.OrderPreviewDialog__dialog > header > div:has(> .OrderPreviewDialog__saveStatus) {
  gap: var(--space-10);
}

.OrderPreviewDialog__dialog > footer:has(> .OrderPreviewDialog__footer) {
  flex: 0 0 auto;
  padding-block: var(--space-3);
}

.OrderPreviewDialog__workbench {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
}

/*
 * 行内图标容器：替代原先的 emoji（▦ ◷ ✓ ! ▤ › ⌄ ↗）。
 * `color: inherit` 让图标跟着所在控件的状态色变化（侧栏 hover/active、状态列 success/danger）。
 */
.OrderPreviewDialog__sideIcon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  margin-right: 2px;
  color: inherit;
}

/*
 * 主区按设计稿统一左右 20px 内边距（页签、筛选行、选择行、表格、分页都对齐到这条线），
 * 各行自己只管上下留白与分隔。行间不再逐行画横线：只有页签行保留下划线（页签选中态的延伸）。
 */
.OrderPreviewDialog__main {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  padding: 0 var(--space-5);
  background: var(--color-background-surface);
}

.OrderPreviewDialog__toolbar,
.OrderPreviewDialog__filterBar,
.OrderPreviewDialog__selectionBar,
.OrderPreviewDialog__pagination {
  display: flex;
  flex: 0 0 auto;
  gap: var(--space-2);
  align-items: center;
}

.OrderPreviewDialog__toolbar {
  min-height: 48px;
}

.OrderPreviewDialog__viewTabs {
  flex: 1 1 auto;
  gap: var(--space-8);
  height: 48px;
  min-width: 0;
}

.OrderPreviewDialog__viewTabs > [role='tab'] {
  padding-inline: var(--space-1);
}

.OrderPreviewDialog__viewTabs > [role='tab'][aria-selected='true']::after {
  height: 3px;
}

.OrderPreviewDialog__viewTabLabel {
  display: inline-flex;
  gap: var(--space-1);
  align-items: center;
}

.OrderPreviewDialog__viewTabCount {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: var(--space-5);
  height: var(--space-5);
  padding: 0 var(--space-2);
  color: var(--color-text-placeholder);
  font-size: var(--typography-font-size-caption);
  line-height: 20px;
  background: var(--color-background-neutral-subtle);
  border-radius: var(--radius-full);
}

.OrderPreviewDialog__viewTabCount[data-single-digit] {
  width: var(--space-5);
  padding-inline: 0;
}

.OrderPreviewDialog__viewTabs [aria-selected='true'] .OrderPreviewDialog__viewTabCount {
  color: var(--color-text-brand);
  background: var(--color-background-brand-subtle);
}

.OrderPreviewDialog__viewTabs .OrderPreviewDialog__viewTabCount[data-tone='error'] {
  color: var(--color-text-danger);
  background: var(--color-background-danger-subtle);
}

/*
 * 筛选行：左侧错误分类连体按钮组 + 清空入口，右侧搜索 / 筛选 / 排序，两端对齐。
 * 设计稿行间留白 20：上面是页签行的下边线，这里用 padding-top 撑出间距。
 */
.OrderPreviewDialog__filterBar {
  position: sticky;
  z-index: 5;
  left: 0;
  justify-content: space-between;
  padding-top: var(--space-3);
  padding-bottom: var(--space-3);
}

.OrderPreviewDialog__errorFilters {
  display: flex;
  flex: 0 0 auto;
  gap: var(--space-2);
  align-items: center;
  min-width: 0;
}

.OrderPreviewDialog__filterRight {
  display: flex;
  flex: 0 0 auto;
  gap: var(--space-2);
  align-items: center;
}

.OrderPreviewDialog__filterAnchor {
  position: relative;
}

.OrderPreviewDialog__fieldsAnchor {
  position: relative;
}

.OrderPreviewDialog__fieldsPanel {
  position: absolute;
  z-index: var(--z-index-popover);
  top: calc(100% + 6px);
  right: 0;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  min-width: 210px;
  padding: var(--space-2);
  background: var(--color-background-surface-overlay);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-sm);
  box-shadow: var(--elevation-shadow-sm);
}

.OrderPreviewDialog__fieldsPanel > label {
  min-height: 36px;
  padding: 0 var(--space-3);
  color: var(--color-text);
  border-radius: var(--radius-sm);
}

.OrderPreviewDialog__fieldsPanel > label:hover {
  background: var(--color-background-neutral-subtle);
}

.OrderPreviewDialog__fieldsDivider {
  height: 1px;
  margin: var(--space-1) var(--space-3);
  border-top: 1px solid var(--color-border-subtle);
}

.OrderPreviewDialog__filterPanel {
  position: absolute;
  z-index: var(--z-index-popover);
  top: calc(100% + 6px);
  left: 0;
  box-sizing: border-box;
  width: min(328px, calc(100vw - 64px));
  padding: var(--space-4) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  background: var(--color-background-surface-overlay);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-sm);
  box-shadow: var(--elevation-shadow-sm);
}

.OrderPreviewDialog__filterPanelHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 24px;
}

.OrderPreviewDialog__filterField {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  gap: var(--space-3);
  align-items: center;
  text-align: right;
  color: var(--color-text-subtle);
  white-space: nowrap;
}

.OrderPreviewDialog__filterSelect {
  width: 100%;
}

.OrderPreviewDialog__clearAllFilters {
  padding: 0;
  color: var(--color-text-brand-accessible);
  font: inherit;
  cursor: pointer;
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
}

.OrderPreviewDialog__clearAllFilters:hover {
  background: var(--color-background-brand-subtle);
}

.OrderPreviewDialog__clearAllFilters:focus-visible {
  outline: 2px solid var(--color-border-focused);
  outline-offset: 2px;
}

.OrderPreviewDialog__filterHint {
  color: var(--color-text-placeholder);
  white-space: nowrap;
}

/*
 * 错误分类连体按钮组：共享一条外框，相邻按钮用右边线分隔（末枚不留），
 * 选中项蓝底白字。计数与标签同色同重，只隔 2px（设计稿 gap 2）。
 */
.OrderPreviewDialog__filterGroup {
  display: inline-flex;
  flex: 0 1 auto;
  gap: var(--space-2);
}

.OrderPreviewDialog__errorFilter.OrderPreviewDialog__errorFilter {
  height: 24px;
  padding: 0 var(--space-3);
  font-size: var(--typography-font-size-caption);
  line-height: var(--typography-line-height-caption);
  white-space: nowrap;
  color: var(--color-text-subtle);
  background: var(--color-background-neutral-subtle);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-sm);
}

.OrderPreviewDialog__errorFilter > span[aria-hidden] {
  display: none;
}

.OrderPreviewDialog__errorFilter[data-checked] {
  color: var(--color-text-danger);
  background: var(--color-background-danger-subtle);
  border-color: var(--color-border-danger);
}

.OrderPreviewDialog__errorFilter:hover {
  color: var(--color-text-danger);
  border-color: var(--color-border-danger);
}

.OrderPreviewDialog__errorFilter:has(input:focus-visible) {
  outline: 2px solid var(--color-border-focused);
  outline-offset: -2px;
}

.OrderPreviewDialog__errorFilterLabel {
  color: var(--color-text-subtlest);
  font-size: var(--typography-font-size-body);
  white-space: nowrap;
}

.OrderPreviewDialog__clearFilters {
  flex: 0 0 auto;
  padding: 0;
  color: var(--color-text-brand-accessible);
  font-size: var(--typography-font-size-body);
  cursor: pointer;
  background: transparent;
  border: 0;
}

.OrderPreviewDialog__clearFilters:hover {
  color: var(--color-text-brand-hovered);
}

.OrderPreviewDialog__search {
  width: 280px;
}

/*
 * 选择行：全选、已选计数、取消选择依次排列；上下留白均为 12px。
 */
.OrderPreviewDialog__selectionBar {
  justify-content: space-between;
  flex-wrap: wrap;
  row-gap: var(--space-2);
  position: sticky;
  z-index: 4;
  left: 0;
  padding-top: var(--space-3);
  padding-bottom: var(--space-3);
  color: var(--color-text-subtle);
  font-size: var(--typography-font-size-caption);
}

.OrderPreviewDialog__selectionLeft {
  display: flex;
  flex: 1 1 auto;
  gap: var(--space-4);
  color: var(--color-text);
  font-size: var(--typography-font-size-body);
  align-items: center;
  min-width: 0;
  white-space: nowrap;
}

.OrderPreviewDialog__selectionRight {
  display: flex;
  flex: 0 0 auto;
  gap: var(--space-2);
  align-items: center;
}

.OrderPreviewDialog__selectionAll {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

.OrderPreviewDialog__selectionCount {
  color: var(--color-text-subtlest);
}

.OrderPreviewDialog__menuTrigger.OrderPreviewDialog__menuTrigger {
  padding-inline: var(--space-3);
  gap: var(--space-2);
}

.OrderPreviewDialog__previewScrollbar.OrderPreviewDialog__previewScrollbar {
  margin-top: 0;
}

.OrderPreviewDialog__issueTarget.OrderPreviewDialog__issueTarget {
  animation: OrderPreviewDialog__issue-target-pulse 900ms ease-in-out 3;
}

@keyframes OrderPreviewDialog__issue-target-pulse {
  0%, 100% { border-color: var(--color-border-danger); }
  50% { border-color: var(--color-border-danger-subtle); }
}

@media (prefers-reduced-motion: reduce) {
  .OrderPreviewDialog__issueTarget.OrderPreviewDialog__issueTarget {
    animation-duration: 1ms;
    animation-iteration-count: 1;
  }
}

/*
 * 批量设置与确认导入浮层：嵌在 OrderPreviewDialog 内部的二级浮层，position:fixed 脱离父级
 * overflow，遮罩 + 居中 panel。复用 Drawer 的遮罩/阴影 token 保持视觉一致。
 */
.OrderPreviewDialog__bulkOverlay {
  position: fixed;
  z-index: var(--z-index-overlay);
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-overlay-neutral);
}

.OrderPreviewDialog__bulkPanel,
.OrderPreviewDialog__confirmPanel {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  width: 480px;
  max-width: calc(100vw - 32px);
  padding: var(--space-5);
  background: var(--color-background-surface-overlay);
  border-radius: var(--radius-md);
  box-shadow: var(--elevation-shadow-lg);
}

.OrderPreviewDialog__bulkHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.OrderPreviewDialog__bulkClose {
  padding: 0;
  color: var(--color-text-subtle);
  font-size: var(--typography-font-size-body-large);
  cursor: pointer;
  background: transparent;
  border: 0;
}

.OrderPreviewDialog__bulkHint {
  color: var(--color-text-subtle);
  font-size: var(--typography-font-size-caption);
  line-height: var(--typography-line-height-caption);
}

.OrderPreviewDialog__bulkFields {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.OrderPreviewDialog__bulkField {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  background: var(--color-background-neutral-subtle);
  border-radius: var(--radius-sm);
}

.OrderPreviewDialog__bulkField > span {
  flex: 0 0 88px;
  color: var(--color-text);
  font-size: var(--typography-font-size-caption);
}

.OrderPreviewDialog__bulkField > select,
.OrderPreviewDialog__bulkField > input {
  flex: 1 1 auto;
  min-height: 30px;
  padding: 0 var(--space-2);
  color: var(--color-text);
  font: inherit;
  font-size: var(--typography-font-size-caption);
  background: var(--color-background-surface);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-sm);
}

.OrderPreviewDialog__bulkFooter {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
}

/*
 * 工具栏与表格共用一个滚动区：工具栏仅横向靠左，纵向随内容滚走；表头吸顶。
 * 原生滚动条藏掉，横向那条交给外部 `<HorizontalScrollbar>` 自绘。
 *
 * 为什么不自己给 `::-webkit-scrollbar` 换皮：全局 `* { scrollbar-width: thin }` 会压掉伪元素，
 * 想让它生效就得把标准属性改回 `auto`，而 `auto` 在 macOS 上带出的是系统 native 条——
 * 与共享 Table 那条自绘横条不是一套东西（Table 用 `scrollbar-width: none` 藏原生条 + DOM 条），
 * 于是同一个系统里出现两种滚动条。这里直接跟 Table 对齐：藏原生条，用同一个组件。
 *
 * 竖条也一并藏掉（`scrollbar-width` 没有「只藏横向」的写法），竖向照常能用滚轮 / 触控板滚，
 * 与共享 Table 设了 `scroll.y` 时的表现一致。
 */
.OrderPreviewDialog__tableViewport {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  overflow: auto;
  scrollbar-width: none;
  scroll-padding-top: 48px;
}

.OrderPreviewDialog__tableViewport::-webkit-scrollbar {
  display: none;
}

.OrderPreviewDialog__table {
  width: 100%;
  min-width: 1680px;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  font-size: var(--typography-font-size-caption);
}

.OrderPreviewDialog__table th,
.OrderPreviewDialog__table td {
  height: 40px;
  padding: var(--space-1) var(--space-2);
  text-align: left;
  white-space: nowrap;
  border-right: 1px solid var(--color-border-subtle);
  border-bottom: 1px solid var(--color-border-subtle);
}

.OrderPreviewDialog__table th {
  position: sticky;
  z-index: 2;
  top: 0;
  color: var(--color-text-subtle);
  font-weight: var(--typography-font-weight-medium);
  background: var(--color-background-neutral-subtle);
}

/*
 * 列宽总和 1232 < min-width，余量按比例摊到各列，主要是为了给组标题行的字段区留出空间：
 * 那一行要横排学员三件套 + 业绩五件套 + 合计，实测内容宽 1316px（含 padding 与 gap），
 * 扣掉选择列与校验列后中间必须留下 ≥1320，否则字段会被挤变形。
 * 末列只要放下表头「校验结果 / 修正建议」（实测文本 106px）和最长的「3 项待修正」，112 声明宽
 * 实际落到 ~140px 就够——原来 220 是给平铺的长文案留的，文案进气泡后就成了空白。
 */
.OrderPreviewDialog__table th[data-column='originalRow'] { width: 64px; }
.OrderPreviewDialog__table th[data-column='project'] { width: 220px; }
.OrderPreviewDialog__table th[data-column='category'] { width: 84px; }
.OrderPreviewDialog__table th[data-column='quantity'] { width: 90px; }
.OrderPreviewDialog__table th[data-column='unitPrice'] { width: 140px; }
.OrderPreviewDialog__table th[data-column='dueAmount'] { width: 120px; }
.OrderPreviewDialog__table th[data-column='discount'] { width: 130px; }
.OrderPreviewDialog__table th[data-column='expiresAt'] { width: 130px; }
.OrderPreviewDialog__table th[data-column='chargeType'] { width: 100px; }
.OrderPreviewDialog__table th[data-column='verdict'] { width: 112px; }

/* 选择列固定在左侧；校验结果列固定在右侧——两侧常驻，横向滚动时永远知道「这是哪一组的第几行 / 错在哪」。 */
.OrderPreviewDialog__table th:first-child,
.OrderPreviewDialog__table td:first-child {
  position: sticky;
  z-index: 1;
  left: 0;
  width: 42px;
  background: var(--color-background-surface);
}

.OrderPreviewDialog__table th:first-child {
  z-index: 3;
  padding-left: var(--space-3);
  background: var(--color-background-neutral-subtle);
}

.OrderPreviewDialog__table th:last-child,
.OrderPreviewDialog__table td:last-child {
  position: sticky;
  z-index: 1;
  right: 0;
  background: var(--color-background-surface);
  box-shadow: -4px 0 6px -4px var(--color-shadow-subtle);
}

.OrderPreviewDialog__table th:last-child {
  z-index: 3;
  text-align: left;
  background: var(--color-background-neutral-subtle);
}

/*
 * 组标题行的最后一列要跟着组标题走灰底，否则会比明细行的校验列亮一截，像两条不同的列。
 * padding 也必须补回来：下面 `.groupRow > td { padding: 0 }` 是为中间那 9 列合并出的字段区让路的
 * （内边距交给 `.groupContent` 自己管），但这一列是**常驻的校验列**，不补就会让「N 项待修正」
 * 死死贴着左边那条列分隔线（实测 leftGap = 0），跟下面明细行、上面表头都对不齐。
 * 取值与 `.table td` 一致（4/8），三处才在同一条竖线上。
 */
.OrderPreviewDialog__table .OrderPreviewDialog__groupRow > td:last-child {
  padding: var(--space-1) var(--space-2);
  background: var(--color-background-neutral-subtle);
}

.OrderPreviewDialog__table .OrderPreviewDialog__groupRow > td {
  height: auto;
  padding: 0;
  background: var(--color-background-neutral-subtle);
}

/* 组捎选择/折叠列：`.groupRow > td` 把 padding 归零交给 .groupContent 自己管，这一列要单独加回来，
   故选择器带 `.table .groupRow >` 抬到同等以上特异性，否则 padding 被静默覆盖。 */
.OrderPreviewDialog__table .OrderPreviewDialog__groupRow > .OrderPreviewDialog__groupToggle {
  padding: var(--space-2);
  padding-left: var(--space-3);
  text-align: left;
  white-space: nowrap;
}

.OrderPreviewDialog__table .OrderPreviewDialog__groupRow > .OrderPreviewDialog__groupToggle > * + * {
  margin-left: var(--space-1);
}

/* 字段区独占中间 9 列：内容比列宽窄时不塌，比列宽宽时不把右边校验列顶出去。 */
.OrderPreviewDialog__groupMain {
  overflow: hidden;
}

.OrderPreviewDialog__groupContent {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  min-width: 1320px;
  min-height: 60px;
  padding: var(--space-2);
}

.OrderPreviewDialog__collapse {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 20px;
  padding: 0;
  color: var(--color-text-subtle);
  font-size: var(--typography-font-size-body-large);
  cursor: pointer;
  background: transparent;
  border: 0;
}

.OrderPreviewDialog__collapse .OrderPreviewDialog__sideIcon {
  margin-right: 0;
}

.OrderPreviewDialog__identityField,
.OrderPreviewDialog__orderField {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 2px;
  min-width: 108px;
  color: var(--color-text-placeholder);
  font-size: var(--typography-font-size-caption);
}

.OrderPreviewDialog__identityField { width: 126px; }
.OrderPreviewDialog__orderField { width: 116px; }
.OrderPreviewDialog__orderField:nth-of-type(7) { width: 160px; }

/*
 * 字段三态：平时读成「标签 + 值」的纯文本（无边框、无底色），鼠标 hover 或聚焦才显形为输入框，
 * 报错时始终红框。DOM 里始终是一个原生 input——不切编辑态，也就没有「点进去才可改」的状态机。
 * 特异性必须压过 Input 自带的 .box / .box[data-error]（(0,2,0)），所以带元素名 label 叠到 (0,2,1)。
 *
 * 对齐：Input 自带 1px 边框 + padding-inline 6px，平时只把边框涂透明，文字仍被推到 +7px，
 * 于是「字段名称」和「字段信息」差着这一截。静态态 padding 归零 + margin-left:-1px 抵掉那圈
 * 透明边框，值精确落在 0（与标签同一条竖线）；显形态 padding 回到 6px、margin-left:-7px 且
 * 宽度 +7px，内容起点依旧是 0——框是朝左「长」出来包住文字的，标签和值一个像素都不动。
 */
label.OrderPreviewDialog__identityField .OrderPreviewDialog__fieldValue,
label.OrderPreviewDialog__orderField .OrderPreviewDialog__fieldValue {
  width: auto;
  max-width: none;
  height: auto;
  margin-left: -1px;
  padding-inline: 0;
  font-size: var(--typography-font-size-body);
  line-height: var(--typography-line-height-body);
}

label.OrderPreviewDialog__identityField .OrderPreviewDialog__fieldValue:not([data-error], :hover, :focus-within),
label.OrderPreviewDialog__orderField .OrderPreviewDialog__fieldValue:not([data-error], :hover, :focus-within) {
  background: transparent;
  border-color: transparent;
}

label.OrderPreviewDialog__identityField .OrderPreviewDialog__fieldValue:hover,
label.OrderPreviewDialog__identityField .OrderPreviewDialog__fieldValue:focus-within,
label.OrderPreviewDialog__identityField .OrderPreviewDialog__fieldValue[data-error],
label.OrderPreviewDialog__orderField .OrderPreviewDialog__fieldValue:hover,
label.OrderPreviewDialog__orderField .OrderPreviewDialog__fieldValue:focus-within,
label.OrderPreviewDialog__orderField .OrderPreviewDialog__fieldValue[data-error] {
  width: calc(100% + 7px);
  margin-left: -7px;
  padding-inline: 6px;
}

/*
 * 报错字段：红框优先级要压过 Input 自带的 hover 态，否则鼠标一放上去红框变灰、像错误消失了。
 * (0,3,1) > 组件 `.box:hover:not(...)` 的 (0,3,0)。
 */
label.OrderPreviewDialog__identityField .OrderPreviewDialog__fieldValue[data-error],
label.OrderPreviewDialog__orderField .OrderPreviewDialog__fieldValue[data-error] {
  border-color: var(--color-border-danger);
}

/*
 * 报错时空值提示也得变红，否则红框里躺一句灰字，看着像没报错。
 * 这里只能用元素选择器 `input`：`.control` 是 Input 组件自己 CSS Module 里的局部类名，
 * 在本文件的哈希命名空间下根本不匹配（踩过）。
 */
label.OrderPreviewDialog__identityField .OrderPreviewDialog__fieldValue[data-error] input::placeholder,
label.OrderPreviewDialog__orderField .OrderPreviewDialog__fieldValue[data-error] input::placeholder {
  color: var(--color-text-danger);
}

/*
 * 选择类字段（收费校区 / 业绩归属人 / 销售角色 / 业绩归属校区）与输入框字段共用一套三态，
 * 但几何要写两层：Select 的 className 落在包装层（`.root`，flex 容器）上，触发器是它内部的 button，
 * 所以包装层管宽度与位移、触发器管边框底色内边距，跟 `.fieldValue` 那种「类就落在盒子上」不同。
 * 对齐口径完全一样：静态态内边距归零 + 包装层左移 1px（抵掉那圈透明边框），值落在 0；
 * 显形态内边距回到 6px、包装层左移 7px 并加宽 7px，框朝左长出来，标签和值一个像素都不动。
 */
label.OrderPreviewDialog__identityField .OrderPreviewDialog__pickerValue,
label.OrderPreviewDialog__orderField .OrderPreviewDialog__pickerValue {
  width: calc(100% + 1px);
  margin-left: -1px;
}

label.OrderPreviewDialog__identityField .OrderPreviewDialog__pickerValue:hover,
label.OrderPreviewDialog__identityField .OrderPreviewDialog__pickerValue:focus-within,
label.OrderPreviewDialog__identityField .OrderPreviewDialog__pickerValue:has(> button[role='combobox'][data-popup-open]),
label.OrderPreviewDialog__identityField .OrderPreviewDialog__pickerValue:has(> button[role='combobox'][data-error]),
label.OrderPreviewDialog__orderField .OrderPreviewDialog__pickerValue:hover,
label.OrderPreviewDialog__orderField .OrderPreviewDialog__pickerValue:focus-within,
label.OrderPreviewDialog__orderField .OrderPreviewDialog__pickerValue:has(> button[role='combobox'][data-popup-open]),
label.OrderPreviewDialog__orderField .OrderPreviewDialog__pickerValue:has(> button[role='combobox'][data-error]) {
  width: calc(100% + 7px);
  margin-left: -7px;
}

label.OrderPreviewDialog__identityField .OrderPreviewDialog__pickerValue > button[role='combobox'],
label.OrderPreviewDialog__orderField .OrderPreviewDialog__pickerValue > button[role='combobox'] {
  height: auto;
  font-size: var(--typography-font-size-body);
  line-height: var(--typography-line-height-body);
}

label.OrderPreviewDialog__identityField .OrderPreviewDialog__pickerValue:not(:hover, :focus-within) > button[role='combobox']:not([data-popup-open], [data-error]),
label.OrderPreviewDialog__orderField .OrderPreviewDialog__pickerValue:not(:hover, :focus-within) > button[role='combobox']:not([data-popup-open], [data-error]) {
  padding-inline: 0;
  background: transparent;
  border-color: transparent;
}

/*
 * 箭头静态态隐藏、显形态出现。用 opacity 而不是 display：槽位宽度恒定，
 * 值区不会因为箭头进出被挤动——否则 hover 一下文字就横向跳 14px。
 */
label.OrderPreviewDialog__identityField .OrderPreviewDialog__pickerValue:not(:hover, :focus-within) > button[role='combobox']:not([data-popup-open], [data-error]) svg,
label.OrderPreviewDialog__orderField .OrderPreviewDialog__pickerValue:not(:hover, :focus-within) > button[role='combobox']:not([data-popup-open], [data-error]) svg {
  opacity: 0;
}

/*
 * 组级异常条：紧贴组标题行下方的一整行，与组信息同浅灰底、单行、高 32。文案连成一句
 * 「学员信息：…。」本身就是可点击的定位入口。
 * 组级错误（学员信息 / 校区授权）不归属任何一列，所以不往列里塞、也不跟某个字段对齐。
 * 选择器必须带 `.table` 且写成 `tr.issueBar > td`（(0,2,2)）：选择列的 sticky 规则
 * `.table td:first-child`（(0,2,1)）会给首列铺白底，少一个限定词就被它盖回白色。
 *
 * 左右内边距（左边 50px 对齐到组内容起点、右边 12px）也交给里面那枚整条按钮：
 * 写在 td 上时那条缩进是「看得见点不着」的死区，鼠标落在那里没反应，
 * 「整行都可点」就只做了一半。文字位置完全不变。
 */
.OrderPreviewDialog__table tr.OrderPreviewDialog__issueBar > td {
  height: auto;
  padding: 0;
  background: var(--color-background-neutral-subtle);
}

/*
 * 整条是定位按钮，所以这里不是 span 而是一枚裸按钮：撑满单元格宽度，
 * 鼠标落在条内任意位置（左侧缩进 / 图标 / 文案）都跳到出错字段。
 * 按钮默认居中、带边框和内边距，全部清掉后只留左右内边距与 32 的行高（内容行高 20，上下各留 6）；
 * 行高用 min-height 而不是 height——文案意外折行时让它长下去，不把字裁掉。
 */
.OrderPreviewDialog__issueBarNote {
  display: flex;
  width: 100%;
  min-height: 32px;
  padding: 0 var(--space-3) 0 50px;
  gap: var(--space-1);
  align-items: center;
  color: var(--color-text-danger);
  font: inherit;
  font-size: var(--typography-font-size-caption);
  line-height: var(--typography-line-height-caption);
  text-align: left;
  cursor: pointer;
  background: transparent;
  border: 0;
}

/*
 * 来源 + 正文在条里是同一句话，所以要放在一个文本流里。
 * 气泡里的来源仍是 72px 固定列 + 灰字（那是逐行对齐的列表标签），两处不共用同一套。
 */
.OrderPreviewDialog__issueBarText {
  min-width: 0;
  flex: 1 1 auto;
  overflow-wrap: anywhere;
}

/* 悬停或键盘聚焦时，整句文案给出可点击反馈；信息条底色保持不变。 */
.OrderPreviewDialog__issueBarNote:hover .OrderPreviewDialog__issueBarText,
.OrderPreviewDialog__issueBarNote:focus-visible .OrderPreviewDialog__issueBarText {
  color: var(--color-text-danger-hovered);
}

/* 键盘 Tab 落到红条时给个可见焦点，否则它看着跟纯文本没区别。 */
.OrderPreviewDialog__issueBarNote:focus-visible {
  outline: 2px solid var(--color-border-focused);
  outline-offset: 2px;
}

.OrderPreviewDialog__issueAction {
  display: inline-flex;
  gap: 2px;
  align-items: center;
}

.OrderPreviewDialog__issueFix {
  display: inline-flex;
  gap: 2px;
  align-items: center;
  padding: 0;
  color: inherit;
  font: inherit;
  white-space: nowrap;
  cursor: pointer;
  background: transparent;
  border: 0;
}

.OrderPreviewDialog__issueFix:hover {
  color: var(--color-text-brand-hovered);
}

.OrderPreviewDialog__issueBarNote > .OrderPreviewDialog__sideIcon {
  margin-right: 0;
}

/*
 * 队列位置：整单错好几条时，让人知道这只是一条、改完会自动顶上下一条。
 * 它是条内的旁注（不属于那句话），所以自己带一份左边距——容器的 gap 现在只有 4px，
 * 是给「图标 → 正文」留的。
 */
.OrderPreviewDialog__issueBarIndex {
  margin-left: var(--space-3);
  color: var(--color-text-subtle);
}

.OrderPreviewDialog__itemCount {
  flex: 0 0 42px;
  color: var(--color-text-subtle);
}

.OrderPreviewDialog__orderTotal {
  display: flex;
  flex: 0 0 150px;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  margin-left: auto;
  text-align: right;
}

.OrderPreviewDialog__orderTotal > span {
  color: var(--color-text-placeholder);
  font-size: var(--typography-font-size-caption);
  line-height: var(--typography-line-height-caption);
}

.OrderPreviewDialog__orderTotal > strong {
  color: var(--color-text);
  font-size: var(--typography-font-size-body);
  font-weight: var(--typography-font-weight-bold);
  line-height: var(--typography-line-height-body);
}

/*
 * 校验结果列的结论标签（通过 / N 项待修正）。有报错时它是气泡触发器，所以渲染成 button：
 * 键盘 Tab 得到焦点、回车能展开，跟鼠标悬浮等效；通过态没有气泡，就只是个 span。
 * 列里只放结论不放文案——具体错哪句话在气泡里，同一句话不在一行里出现两次。
 */
.OrderPreviewDialog__verdictState {
  display: inline-flex;
  gap: var(--space-1);
  align-items: center;
  padding: 0;
  color: var(--color-text-subtle);
  font: inherit;
  font-size: var(--typography-font-size-caption);
  line-height: var(--typography-line-height-caption);
  text-align: left;
  cursor: pointer;
  background: transparent;
  border: 0;
}

.OrderPreviewDialog__verdictState .OrderPreviewDialog__sideIcon { margin-right: 0; }

.OrderPreviewDialog__verdictState[data-error] { color: var(--color-text-danger); }

/* 通过态是纯文本 span，不可点，所以光标回到默认箭头。 */
.OrderPreviewDialog__verdictState[data-success] {
  color: var(--color-text-success);
  cursor: default;
}

/* 待修正是可点的：给它链接一样的悬停反馈，否则看不出这里能展开气泡。 */
button.OrderPreviewDialog__verdictState:hover {
  color: var(--color-text-danger-hovered);
}

.OrderPreviewDialog__table .OrderPreviewDialog__itemRow td {
  height: 40px;
  font-size: var(--typography-font-size-body);
  line-height: var(--typography-line-height-body);
  border-bottom: 1px solid var(--color-border-subtle);
}

/* 字段可隐藏，数字列用列名定位，避免隐藏后 nth-child 指错列。 */
.OrderPreviewDialog__itemRow td[data-column='unitPrice'],
.OrderPreviewDialog__itemRow td[data-column='discount'] {
  text-align: right;
}

/* 编辑控件铺满整个单元格；错误标在格子上，避免格内再出现一圈小红框。 */
.OrderPreviewDialog__table .OrderPreviewDialog__itemRow td.OrderPreviewDialog__editableCell {
  padding: 0;
}

.OrderPreviewDialog__table .OrderPreviewDialog__itemRow td.OrderPreviewDialog__editableCell[data-error] {
  background: var(--color-background-danger-subtle);
  box-shadow: inset 2px 0 var(--color-border-danger);
}

.OrderPreviewDialog__table .OrderPreviewDialog__itemRow td.OrderPreviewDialog__editableCell:focus-within {
  outline: 2px solid var(--color-border-focused);
  outline-offset: -2px;
}

.OrderPreviewDialog__table .OrderPreviewDialog__itemRow td.OrderPreviewDialog__editableCell .OrderPreviewDialog__cellSelect,
.OrderPreviewDialog__table .OrderPreviewDialog__itemRow td.OrderPreviewDialog__editableCell > span:has(.OrderPreviewDialog__cellDate) {
  display: flex;
  width: 100%;
  height: 100%;
}

.OrderPreviewDialog__table .OrderPreviewDialog__itemRow td.OrderPreviewDialog__editableCell .OrderPreviewDialog__cellSelect > button,
.OrderPreviewDialog__table .OrderPreviewDialog__itemRow td.OrderPreviewDialog__editableCell .OrderPreviewDialog__cellDate,
.OrderPreviewDialog__table .OrderPreviewDialog__itemRow td.OrderPreviewDialog__editableCell .OrderPreviewDialog__cellInput,
.OrderPreviewDialog__table .OrderPreviewDialog__itemRow td.OrderPreviewDialog__editableCell .OrderPreviewDialog__cellNumber {
  width: 100%;
  height: 39px;
  font-size: var(--typography-font-size-body);
  line-height: var(--typography-line-height-body);
  padding-inline: var(--space-3);
  background: transparent;
  border-color: transparent;
  border-radius: 0;
}

.OrderPreviewDialog__table .OrderPreviewDialog__itemRow td.OrderPreviewDialog__editableCell .OrderPreviewDialog__cellNumber {
  padding-inline: 0;
}

.OrderPreviewDialog__table .OrderPreviewDialog__itemRow td.OrderPreviewDialog__editableCell .OrderPreviewDialog__cellSelect > button:hover,
.OrderPreviewDialog__table .OrderPreviewDialog__itemRow td.OrderPreviewDialog__editableCell .OrderPreviewDialog__cellDate:hover,
.OrderPreviewDialog__table .OrderPreviewDialog__itemRow td.OrderPreviewDialog__editableCell .OrderPreviewDialog__cellInput:hover,
.OrderPreviewDialog__table .OrderPreviewDialog__itemRow td.OrderPreviewDialog__editableCell .OrderPreviewDialog__cellNumber:hover {
  background: var(--color-background-neutral-subtle);
  border-color: transparent;
}

.OrderPreviewDialog__table .OrderPreviewDialog__itemRow td.OrderPreviewDialog__editableCell[data-error] .OrderPreviewDialog__cellSelect > button:hover,
.OrderPreviewDialog__table .OrderPreviewDialog__itemRow td.OrderPreviewDialog__editableCell[data-error] .OrderPreviewDialog__cellDate:hover,
.OrderPreviewDialog__table .OrderPreviewDialog__itemRow td.OrderPreviewDialog__editableCell[data-error] .OrderPreviewDialog__cellInput:hover,
.OrderPreviewDialog__table .OrderPreviewDialog__itemRow td.OrderPreviewDialog__editableCell[data-error] .OrderPreviewDialog__cellNumber:hover {
  background: transparent;
}

.OrderPreviewDialog__table .OrderPreviewDialog__itemRow td.OrderPreviewDialog__editableCell .OrderPreviewDialog__cellSelect > button:focus-visible,
.OrderPreviewDialog__table .OrderPreviewDialog__itemRow td.OrderPreviewDialog__editableCell .OrderPreviewDialog__cellDate:focus-visible {
  outline: 0;
  border-color: transparent;
}

.OrderPreviewDialog__table .OrderPreviewDialog__itemRow td.OrderPreviewDialog__editableCell .OrderPreviewDialog__cellNumber:focus-within {
  border-color: transparent;
}

.OrderPreviewDialog__readOnly { color: var(--color-text-subtle); }

/*
 * 报错详情搬进了悬浮气泡，校验列只留「N 项错误」的结论。气泡内容是「来源 + 文案 + 处理」三列：
 * 来源（学员信息 / 原表行 N / 应交金额）告诉用户这条错落在哪儿，处理点了直接跳到那个字段。
 * max-width 从组件默认的 360 放宽到 460：文案短的一行放得下，长的（「项目在城北校区未授权；可用校区：…」）
 * 也不至于换行四五行。类名写两遍是为了把特异性抬过 Popover 自己的 `.popup`（同为 (0,1,0)，
 * 单类名会被注入顺序静默覆盖）。
 */
.OrderPreviewDialog__issuePopover.OrderPreviewDialog__issuePopover {
  max-width: 460px;
}

.OrderPreviewDialog__issueLines {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.OrderPreviewDialog__issueLine {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
}

/* 来源竖排会占掉太多宽度，但不给固定宽又会让每行的文案起点参差不齐。 */
.OrderPreviewDialog__issueSource {
  flex: 0 0 72px;
  color: var(--color-text-subtle);
  overflow-wrap: anywhere;
}

/*
 * 文案要能收缩（min-width: 0）并允许任意位置断行：中文长句没有空格，
 * 整句算一个「词」，不写 min-width 就会撑破气泡被裁掉。
 */
.OrderPreviewDialog__issueMessage {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--color-text);
  overflow-wrap: anywhere;
}

/* 气泡里的「处理」是可点链接，用品牌色；行间提示条里那个继承的是所在行的红色，两处不做混。 */
.OrderPreviewDialog__issueLines .OrderPreviewDialog__issueFix {
  flex: 0 0 auto;
  color: var(--color-text-brand-accessible);
}

/* 项目类型 / 收费类型列里的下拉：撑满单元格，跟同列输入框一样宽。 */
.OrderPreviewDialog__cellSelect {
  width: 100%;
}

/*
 * 购买数量列的步进器：组件自带固定宽度（small = 130px），在单元格里撑满。
 * 选择器要带上 `.table .itemRow td` 才压得住组件里的 `.root[data-size='small'] .group`（宽度）
 * 与 `.root:hover:not(...) .group`（边框）——只写单个类会被静默覆盖，量出来还是 130px。
 * 红框也写在页面上：InputNumber 没有 error 属性，className 落在外层容器上，直接给容器描边即可。
 * 另外还得把**组件自己的根容器**撑到 100%：它是 inline-flex 且没有 className（页面类名只落到内层 group 上），
 * 宽度由内容决定，光给 group 写 100% 会以它为基准反算出更宽的结果（实测跑出 198px > 单元格 123px）。
 */
.OrderPreviewDialog__table .OrderPreviewDialog__itemRow td:has(.OrderPreviewDialog__cellNumber) > div,
.OrderPreviewDialog__table .OrderPreviewDialog__itemRow td:has(.OrderPreviewDialog__cellDate) > span {
  display: flex;
  width: 100%;
}

.OrderPreviewDialog__table .OrderPreviewDialog__itemRow td .OrderPreviewDialog__cellNumber {
  width: 100%;
}

/* 有效期列的日历：组件默认 280px 宽（自带 max-width: 100%），这里显式收成单元格宽度。 */
.OrderPreviewDialog__table .OrderPreviewDialog__itemRow td .OrderPreviewDialog__cellDate {
  width: 100%;
}

.OrderPreviewDialog__empty {
  display: grid;
  min-height: 160px;
  color: var(--color-text-placeholder);
  place-items: center;
}

/* 分页栏：控件本体交给 Pagination 组件；左右内边距由 .main 统一给。 */
.OrderPreviewDialog__pagination {
  justify-content: flex-end;
  min-height: 32px;
  border-top: 1px solid var(--color-border-subtle);
}

.OrderPreviewDialog__rangeNote {
  display: none;
}

.OrderPreviewDialog__footer {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
  width: 100%;
}

/*
 * 页脚订单与明细合为一句，统一常规字重与主文字色；待修正数使用同样字重，仅以危险色提示。
 * 组间距 16。待修正为 0 时不标红——红只留给真有错的时刻。
 */
.OrderPreviewDialog__footerInformation {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.OrderPreviewDialog__titleHint {
  display: flex;
  flex: 1 0 0;
  align-items: center;
  min-width: var(--component-icon-size-base);
  color: var(--color-text-subtlest);
  font-size: var(--typography-font-size-body);
  font-weight: var(--typography-font-weight-regular);
  line-height: var(--typography-line-height-body);
  white-space: nowrap;
}

.OrderPreviewDialog__footerSummary {
  display: flex;
  gap: var(--space-4);
  align-items: center;
  min-width: 0;
  font-size: var(--typography-font-size-body);
}

.OrderPreviewDialog__footerItem {
  display: inline-flex;
  gap: 2px;
  align-items: center;
  white-space: nowrap;
}

.OrderPreviewDialog__footerSummary [data-error] { color: var(--color-text-danger); }

@media (width <= 1280px) {
  .OrderPreviewDialog__filterBar {
    flex-wrap: wrap;
    row-gap: var(--space-2);
  }

  .OrderPreviewDialog__search {
    width: 200px;
  }
}

.OrderPreviewDialog__table .OrderPreviewDialog__itemRow td.OrderPreviewDialog__editableCell:has(.OrderPreviewDialog__issueTarget):focus-within {
  outline: 0;
}

.OrderPreviewDialog__cellInput input {
  text-align: right;
}

.OrderPreviewDialog__table .OrderPreviewDialog__itemRow .OrderPreviewDialog__cellNumber input {
  font-size: var(--typography-font-size-body);
  line-height: var(--typography-line-height-body);
}

.OrderPreviewDialog__saveStatus {
  display: inline-flex;
  flex: none;
  gap: var(--space-2);
  align-items: center;
  color: var(--color-text-subtle);
  font-size: var(--typography-font-size-caption);
  line-height: var(--typography-line-height-caption);
  white-space: nowrap;
}

.OrderPreviewDialog__saveStatus[data-failed] {
  color: var(--color-text-danger);
}

.OrderPreviewDialog__quantityEditor,
.OrderPreviewDialog__quantityEditor > div {
  display: flex;
  width: 100%;
}
/*
 * Figma `2-Checkbox 多选框`（节点 `5846:0`）：
 * Size=Large 40 / Default 32 / Small 24 高；指示器 Large/Default 14px、Small 12px，圆角 2px；
 * 选中为实色主题底 + 白色勾，半选为实色主题底 + 白色横条，Border=on 为 12px 内边距的卡片。
 */
.Checkbox__root {
  display: inline-flex;
  gap: var(--space-2);
  align-items: center;
  box-sizing: border-box;
  color: var(--color-text-subtle);
  font-family: var(--typography-font-family-sans);
  font-size: var(--typography-font-size-body);
  line-height: var(--typography-line-height-body);
  cursor: pointer;
}

.Checkbox__root[data-size='large'] {
  min-height: 40px;
}

.Checkbox__root[data-size='default'] {
  min-height: 32px;
}

.Checkbox__root[data-size='small'] {
  min-height: 24px;
}

.Checkbox__root[data-border] {
  padding: 0 var(--space-3);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-sm);
}

.Checkbox__root[data-border][data-checked] {
  border-color: var(--color-border-brand);
}

.Checkbox__root[data-disabled] {
  color: var(--color-text-disabled);
  cursor: not-allowed;
}

.Checkbox__control {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  white-space: nowrap;
  clip-path: inset(50%);
}

.Checkbox__indicator {
  position: relative;
  display: block;
  flex: 0 0 auto;
  box-sizing: border-box;
  background: var(--color-background-surface);
  border: 1px solid var(--color-border-light);
  border-radius: 2px;
}

.Checkbox__root[data-size='large'] .Checkbox__indicator,
.Checkbox__root[data-size='default'] .Checkbox__indicator {
  width: 14px;
  height: 14px;
}

.Checkbox__root[data-size='small'] .Checkbox__indicator {
  width: 12px;
  height: 12px;
}

.Checkbox__root:not([data-checked]):hover:not([data-disabled]) .Checkbox__indicator {
  border-color: var(--color-border-brand);
}

.Checkbox__control:checked + .Checkbox__indicator,
.Checkbox__control:indeterminate + .Checkbox__indicator {
  background: var(--color-background-brand-bold);
  border-color: var(--color-border-brand);
}

.Checkbox__control:checked + .Checkbox__indicator::after {
  position: absolute;
  top: 25%;
  left: 21%;
  width: 58%;
  height: 50%;
  content: '';
  background: var(--color-background-inverse);
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}

.Checkbox__control:indeterminate + .Checkbox__indicator::after {
  position: absolute;
  top: 43%;
  left: 21%;
  width: 58%;
  height: 14%;
  content: '';
  background: var(--color-background-inverse);
}

.Checkbox__root[data-disabled] .Checkbox__indicator {
  background: var(--color-background-neutral-subtle);
  border-color: var(--color-border-light);
}

.Checkbox__control:disabled:checked + .Checkbox__indicator,
.Checkbox__control:disabled:indeterminate + .Checkbox__indicator {
  background: var(--color-background-neutral-subtle);
  border-color: var(--color-border-light);
}

.Checkbox__control:disabled:checked + .Checkbox__indicator::after,
.Checkbox__control:disabled:indeterminate + .Checkbox__indicator::after {
  background: var(--color-background-neutral-disabled);
}

.Checkbox__control:focus-visible + .Checkbox__indicator {
  outline: 2px solid var(--color-border-focused);
  outline-offset: 2px;
}

.Checkbox__label {
  color: var(--color-text-subtle);
}

.Checkbox__root[data-disabled] .Checkbox__label {
  color: var(--color-text-disabled);
}
/*
 * Figma `5-Tooltip 文字提示`（节点 `3002:0`）：
 * 内容高 32、内边距 6px 12px、圆角 4px、字号 12/20；箭头 12×6。
 * Effect=Light 白底浅边框 + 投影，Effect=Dark 深灰底反白文字。
 */
.Tooltip__positioner {
  z-index: var(--z-index-popover);
}

.Tooltip__popup {
  position: relative;
  box-sizing: border-box;
  max-width: 320px;
  padding: 5px var(--space-3);
  font-family: var(--typography-font-family-sans);
  font-size: var(--typography-font-size-caption);
  line-height: var(--typography-line-height-caption);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  transition: opacity var(--motion-duration-fast) var(--motion-easing-standard);
}

.Tooltip__popup[data-effect='light'] {
  color: var(--color-text);
  background: var(--color-background-surface);
  border-color: var(--color-border-light);
  box-shadow: var(--elevation-shadow-sm);
}

.Tooltip__popup[data-effect='dark'] {
  color: var(--color-text-inverse);
  background: var(--color-background-neutral-bolder);
}

.Tooltip__popup[data-starting-style],
.Tooltip__popup[data-ending-style] {
  opacity: 0;
}

/* 箭头几何与 Popover 相同：12×12 方块旋转 45° 后只保留一半。 */

/* 箭头颜色：dark 为无描边深色，light 为白底浅描边 */
.Tooltip__arrow {
  --arrow-bg: var(--color-background-neutral-bolder);
  --arrow-border: transparent;
  --arrow-inset: 0px;
}

.Tooltip__popup[data-effect='light'] .Tooltip__arrow {
  --arrow-bg: var(--color-background-surface);
  --arrow-border: var(--color-border-light);
  --arrow-inset: 1px;
}
/*
 * 字段说明问号：Figma `Question` 槽位的 16px 线条版本，表头与表单标签共用。
 * 视觉（尺寸、图标色、悬停转主题色、鼠标指针）由组件负责，调用方只给文案与可访问名。
 */
.FieldHelp__root {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: var(--component-icon-size-base);
  height: var(--component-icon-size-base);
  padding: 0;
  color: var(--color-icon-placeholder);
  cursor: help;
  background: transparent;
  border: 0;
}

.FieldHelp__root:hover {
  color: var(--color-text-brand);
}

.FieldHelp__root:focus-visible {
  border-radius: 2px;
  outline: 2px solid var(--color-border-focused);
  outline-offset: 1px;
}
/*
 * Figma `3-Tag 标签`（节点 `2059:0`）：
 * Size=Large 28 / Default 22 / Small 20；圆角 4px；字号统一 12/20。
 * Topic：Plain 白底实色描边、Light 浅色底浅描边、Dark 实色底反白文字。
 */
.Tag__root {
  display: inline-flex;
  box-sizing: border-box;
  gap: 6px;
  align-items: center;
  font-family: var(--typography-font-family-sans);
  font-size: var(--typography-font-size-caption);
  line-height: var(--typography-line-height-caption);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
}

.Tag__root[data-size='large'] {
  height: 28px;
  padding: var(--space-1) var(--space-3);
}

.Tag__root[data-size='large'][data-closable] {
  gap: 6px;
  padding-right: 10px;
}

.Tag__root[data-size='default'] {
  height: 22px;
  padding: 1px 10px;
}

.Tag__root[data-size='default'][data-closable] {
  gap: var(--space-1);
  padding-right: var(--space-2);
}

.Tag__root[data-size='small'] {
  height: 20px;
  padding: 0 var(--space-2);
}

.Tag__root[data-size='small'][data-closable] {
  gap: 2px;
  padding-right: 6px;
}

.Tag__close {
  display: grid;
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  padding: 0;
  color: inherit;
  font: inherit;
  font-size: var(--typography-font-size-caption);
  line-height: 1;
  cursor: pointer;
  background: transparent;
  border: 0;
  border-radius: var(--radius-full);
  place-items: center;
}

.Tag__close:hover {
  background: var(--color-overlay-neutral);
}

.Tag__close:focus-visible {
  outline: 2px solid var(--color-border-focused);
  outline-offset: 1px;
}

/* ---------- Topic：Light（默认）---------- */
.Tag__root[data-topic='light'][data-type='default'] {
  color: var(--color-text-brand);
  background: var(--color-background-brand-subtle);
  border-color: var(--color-border-brand-subtle);
}

.Tag__root[data-topic='light'][data-type='neutral'] {
  color: var(--color-text-subtle);
  background: var(--color-background-neutral-subtle);
  border-color: var(--color-border-light);
}

.Tag__root[data-topic='light'][data-type='success'] {
  color: var(--color-text-success);
  background: var(--color-background-success-subtle);
  border-color: var(--color-border-success-subtle);
}

.Tag__root[data-topic='light'][data-type='warning'] {
  color: var(--color-text-warning);
  background: var(--color-background-warning-subtle);
  border-color: var(--color-border-warning-subtle);
}

.Tag__root[data-topic='light'][data-type='danger'] {
  color: var(--color-text-danger);
  background: var(--color-background-danger-subtle);
  border-color: var(--color-border-danger-subtle);
}

.Tag__root[data-topic='light'][data-type='info'] {
  color: var(--color-text-information);
  background: var(--color-background-information-subtle);
  border-color: var(--color-border-lighter);
}

/* ---------- Topic：Plain ---------- */
.Tag__root[data-topic='plain'] {
  background: var(--color-background-surface);
}

.Tag__root[data-topic='plain'][data-type='default'] {
  color: var(--color-text-brand);
  border-color: var(--color-border-brand-light);
}

.Tag__root[data-topic='plain'][data-type='neutral'] {
  color: var(--color-text-subtle);
  border-color: var(--color-border-light);
}

.Tag__root[data-topic='plain'][data-type='success'] {
  color: var(--color-text-success);
  border-color: var(--color-border-success-light);
}

.Tag__root[data-topic='plain'][data-type='warning'] {
  color: var(--color-text-warning);
  border-color: var(--color-border-warning-light);
}

.Tag__root[data-topic='plain'][data-type='danger'] {
  color: var(--color-text-danger);
  border-color: var(--color-border-danger-light);
}

.Tag__root[data-topic='plain'][data-type='info'] {
  color: var(--color-text-information);
  border-color: var(--color-border-light);
}

/* ---------- Topic：Dark ---------- */
.Tag__root[data-topic='dark'] {
  color: var(--color-text-inverse);
}

.Tag__root[data-topic='dark'][data-type='default'] {
  background: var(--color-background-brand-bold);
  border-color: var(--color-border-brand);
}

.Tag__root[data-topic='dark'][data-type='neutral'] {
  background: var(--color-background-neutral-bold);
  border-color: var(--color-border-strong);
}

.Tag__root[data-topic='dark'][data-type='success'] {
  background: var(--color-background-success-bold);
  border-color: var(--color-border-success);
}

.Tag__root[data-topic='dark'][data-type='warning'] {
  background: var(--color-background-warning-bold);
  border-color: var(--color-border-warning);
}

.Tag__root[data-topic='dark'][data-type='danger'] {
  background: var(--color-background-danger-bold);
  border-color: var(--color-border-danger);
}

.Tag__root[data-topic='dark'][data-type='info'] {
  background: var(--color-background-information-bold);
  border-color: var(--color-border-information);
}

/* ---------- Category：非功能语义的业务分类 ---------- */
.Tag__root[data-topic='light'][data-category='blue'] {
  color: var(--color-tag-category-blue-text);
  background: var(--color-tag-category-blue-background);
  border-color: var(--color-tag-category-blue-border);
}

.Tag__root[data-topic='light'][data-category='violet'] {
  color: var(--color-tag-category-violet-text);
  background: var(--color-tag-category-violet-background);
  border-color: var(--color-tag-category-violet-border);
}

.Tag__root[data-topic='light'][data-category='cyan'] {
  color: var(--color-tag-category-cyan-text);
  background: var(--color-tag-category-cyan-background);
  border-color: var(--color-tag-category-cyan-border);
}

.Tag__root[data-topic='plain'][data-category='blue'] {
  color: var(--color-tag-category-blue-text);
  border-color: var(--color-tag-category-blue-border);
}

.Tag__root[data-topic='plain'][data-category='violet'] {
  color: var(--color-tag-category-violet-text);
  border-color: var(--color-tag-category-violet-border);
}

.Tag__root[data-topic='plain'][data-category='cyan'] {
  color: var(--color-tag-category-cyan-text);
  border-color: var(--color-tag-category-cyan-border);
}

.Tag__root[data-topic='dark'][data-category='blue'] {
  background: var(--color-tag-category-blue-text);
  border-color: var(--color-tag-category-blue-text);
}

.Tag__root[data-topic='dark'][data-category='violet'] {
  background: var(--color-tag-category-violet-text);
  border-color: var(--color-tag-category-violet-text);
}

.Tag__root[data-topic='dark'][data-category='cyan'] {
  background: var(--color-tag-category-cyan-text);
  border-color: var(--color-tag-category-cyan-text);
}
/*
 * 触发器按 Figma `Select Input`（与 `Input` 同规格）：
 *   Default 32 / Large 40 / Small 24，圆角 4px；
 *   默认 `color.border`、悬停 `color.border.strong`、展开与聚焦 `color.border.focused`、
 *   错误 `color.border.danger`、禁用 `color.background.neutral.subtle` + `color.border.light`。
 *
 * 包装层是组件的「外框」：页面传入的 className（宽度类、外边距）都挂在这一层，
 * 内层触发器用 `width: 100%` 跟随它。
 * 这里不能写 `width: 100%`：组件常被放进 flex 行（如 `<label>状态<Select/></label>`），
 * 包装层一旦占满整行，同排的文字就会被压成一字一行的竖排。
 */
.Select__root {
  position: relative;
  display: flex;
}

.Select__control {
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  width: 100%;
  height: 32px;
  padding: var(--space-1) var(--space-2);
  color: var(--color-text);
  font-family: var(--typography-font-family-sans);
  font-size: var(--typography-font-size-body);
  font-weight: var(--typography-font-weight-regular);
  line-height: var(--typography-line-height-body);
  text-align: left;
  cursor: pointer;
  background: var(--color-background-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

.Select__control[data-size='large'] {
  height: 40px;
  padding: var(--space-2) var(--space-3);
}

.Select__control[data-size='small'] {
  height: 24px;
  padding: 2px 6px;
  font-size: var(--typography-font-size-caption);
  line-height: var(--typography-line-height-caption);
}

.Select__control:hover:not(:disabled, :focus-visible, [data-open], [data-error]) {
  border-color: var(--color-border-strong);
}

/* Figma `Select=on` / `State=Focus`：展开与键盘聚焦都使用主题色边框。 */
.Select__control[data-open],
.Select__control:focus-visible {
  border-color: var(--color-border-focused);
}

.Select__control:focus-visible {
  outline: 2px solid var(--color-border-focused);
  outline-offset: 2px;
}

/* Figma `State=Error`：错误态优先于悬停与聚焦。 */
.Select__control[data-error] {
  border-color: var(--color-border-danger);
}

.Select__control:disabled {
  color: var(--color-text-disabled);
  cursor: not-allowed;
  background: var(--color-background-neutral-subtle);
  border-color: var(--color-border-light);
}

/*
 * 值区必须能吃满也能让位：`space-between` 下若不定 flex，长文案会溢到箭头槽位，
 * 悬停时清空按钮复用该槽位就会和文字叠在一起。`min-width: 0` 让省略号生效。
 */
.Select__value {
  overflow: hidden;
  min-width: 0;
  flex: 1 1 auto;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Figma `Input=off`：占位文字使用 placeholder 色。 */
.Select__placeholder {
  overflow: hidden;
  min-width: 0;
  flex: 1 1 auto;
  color: var(--color-text-placeholder);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.Select__icon {
  display: flex;
  flex: none;
  color: var(--color-icon-placeholder);
  transition: opacity var(--motion-duration-fast) var(--motion-easing-standard);
}

.Select__icon[data-open] {
  transform: rotate(180deg);
}

.Select__triggerIcon {
  flex: none;
  color: var(--color-icon-placeholder);
}

/* Ant Design `allowClear`：清空按钮复用箭头槽位，悬停或键盘聚焦时出现。
   盒子固定 14×14 并清掉按钮的 UA 内边距，否则会比图标宽 12px、压到值区文字上。 */
.Select__clear {
  position: absolute;
  top: 50%;
  right: var(--space-2);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  padding: 0;
  color: var(--color-icon-placeholder);
  cursor: pointer;
  opacity: 0;
  background: none;
  border: 0;
  transform: translateY(-50%);
  pointer-events: none;
  transition: opacity var(--motion-duration-fast) var(--motion-easing-standard);
}

.Select__root[data-size='large'] .Select__clear {
  right: var(--space-3);
}

.Select__root[data-size='small'] .Select__clear {
  right: 6px;
}

/* 悬停或键盘聚焦时清空按钮显形；只有真的存在清空按钮时，才把箭头槽位让出来。 */
.Select__root:hover .Select__clear,
.Select__clear:focus-visible {
  opacity: 1;
  pointer-events: auto;
}

.Select__root:has(.Select__clear):hover .Select__icon,
.Select__root:has(.Select__clear):hover .Select__triggerIcon {
  opacity: 0;
}

/* 焦点环只跟键盘走，鼠标悬停不该出现。 */
.Select__clear:focus-visible {
  outline: 2px solid var(--color-border-focused);
  outline-offset: 2px;
}

/* Figma `Select Tags`：多选值以标签铺在触发器内，超出折叠为 `+N`。 */
.Select__tags {
  display: flex;
  min-width: 0;
  flex: 1;
  align-items: center;
  gap: var(--space-1);
  overflow: hidden;
}

.Select__overflowTag {
  flex: none;
}

.Select__positioner {
  z-index: var(--z-index-popover);
}

/* Figma `Select Dropdown`：白底、1px 浅边框、4px 圆角、上下 8px 内边距。 */
.Select__popup {
  position: relative;
  box-sizing: border-box;
  padding: var(--space-2) 0;
  color: var(--color-text);
  background: var(--color-background-surface-overlay);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-sm);
  box-shadow: var(--elevation-shadow-sm);
  transition: opacity var(--motion-duration-fast) var(--motion-easing-standard), transform var(--motion-duration-fast) var(--motion-easing-standard);
}

/*
 * Figma 浮层箭头：12 × 6，相对浮层水平居中。
 * 几何与描边来自 shared/floating-arrow.module.css（与 Popover / Popconfirm /
 * Tooltip / DropdownMenu 同一套实现），这里只补居中和配色变量。
 */
.Select__arrow {
  --arrow-bg: var(--color-background-surface-overlay);
  --arrow-border: var(--color-border-light);
  --arrow-inset: 1px;

  left: 50%;
  transform: translateX(-50%);
}

.Select__popup[data-starting-style],
.Select__popup[data-ending-style] {
  opacity: 0;
  transform: scale(0.98);
}

.Select__list {
  max-height: 256px;
  overflow-y: auto;
  outline: 0;
}

.Select__group {
  display: flex;
  flex-direction: column;
}

/* Figma `Type=Group`：分组标题 12px、placeholder 色，组间用 1px 分割线。 */
.Select__groupLabel {
  padding: var(--space-1) var(--space-5);
  color: var(--color-text-placeholder);
  font-size: var(--typography-font-size-caption);
  line-height: var(--typography-line-height-caption);
}

.Select__group:not(:last-child) {
  padding-bottom: var(--space-1);
  margin-bottom: var(--space-1);
  border-bottom: 1px solid var(--color-border-subtle);
}

.Select__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  min-height: 32px;
  padding: var(--space-1) var(--space-5);
  color: var(--color-text);
  font-family: var(--typography-font-family-sans);
  font-size: var(--typography-font-size-body);
  line-height: var(--typography-line-height-body);
  cursor: pointer;
  outline: 0;
}

.Select__item:hover,
.Select__item[data-highlighted] {
  background: var(--color-background-neutral-subtle);
}

/* Figma 单选选中项只使用主题色文字，没有勾选图标；勾选图标仅属于多选。 */
.Select__item[data-selected] {
  color: var(--color-text-brand);
}

.Select__itemCheck {
  flex: none;
  color: var(--color-text-brand);
}

.Select__item[data-disabled] {
  color: var(--color-text-disabled);
  cursor: not-allowed;
}

.Select__item:focus-visible {
  box-shadow: inset 0 0 0 2px var(--color-border-focused);
}


.Select__itemText {
  display: flex;
  min-width: 0;
  flex: 1;
  justify-content: space-between;
  gap: var(--space-3);
}

.Select__description {
  overflow: hidden;
  color: var(--color-text-subtlest);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Ant Design `notFoundContent` / `loading`：浮层内的空态与加载态。 */
.Select__status {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: var(--space-1) var(--space-5);
  color: var(--color-text-placeholder);
  font-size: var(--typography-font-size-body);
  line-height: var(--typography-line-height-body);
}

.Select__spinner {
  animation: Select__spin 1s linear infinite;
}

@keyframes Select__spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .Select__popup {
    transition: none;
  }

  .Select__spinner {
    animation: none;
  }
}
/*
 * Figma `2-Input 输入框 / Textarea`（节点 `2942:49962`）：
 * 280×80（最小 160、最大 800），内边距 上 8 / 左 12 / 右 2 / 下 2，圆角 4；
 * 换行文字再留 12 的右内边距，计数「0/100」12px 右对齐，右下角为拖拽手柄。
 * 边框取 `el-border-color-light`（#E4E7ED），与基础输入框的 #DCDFE6 不同，按 Figma 保留。
 */
.Textarea__root {
  display: inline-flex;
  flex-direction: column;
  font-family: var(--typography-font-family-sans);
}

.Textarea__box {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: 280px;
  max-width: 100%;
  height: 80px;
  padding: var(--space-2) 2px 2px var(--space-3);
  color: var(--color-text);
  background: var(--color-background-surface);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-sm);
}

.Textarea__box:hover:not(:has(.Textarea__control:disabled), :focus-within) {
  border-color: var(--color-border-strong);
}

.Textarea__box:focus-within {
  border-color: var(--color-border-focused);
}

.Textarea__box[data-error] {
  border-color: var(--color-border-danger);
}

.Textarea__box:has(.Textarea__control:disabled) {
  color: var(--color-text-disabled);
  cursor: not-allowed;
  background: var(--color-background-neutral-subtle);
}

.Textarea__control {
  display: block;
  flex: 1 1 auto;
  box-sizing: border-box;
  width: 100%;
  min-height: 0;
  padding: 0 var(--space-3) 0 0;
  color: inherit;
  font-family: inherit;
  font-size: var(--typography-font-size-body);
  font-weight: var(--typography-font-weight-regular);
  line-height: var(--typography-line-height-body);
  resize: none;
  background: transparent;
  border: 0;
  outline: 0;
}

/* Figma Resizer：拖拽改高由原生 resize 手柄承担，位置在文本区右下角。 */
.Textarea__box[data-resizable] .Textarea__control {
  resize: vertical;
}

.Textarea__control::placeholder {
  color: var(--color-text-placeholder);
}

.Textarea__control:disabled {
  cursor: not-allowed;
}

.Textarea__count {
  align-self: flex-end;
  padding-right: var(--space-1);
  color: var(--color-text-placeholder);
  font-size: var(--typography-font-size-caption);
  line-height: var(--typography-line-height-caption);
}

.Textarea__count[data-exceed] {
  color: var(--color-text-danger);
}

.Textarea__prompt {
  min-height: 22px;
  font-size: var(--typography-font-size-caption);
  line-height: var(--typography-line-height-caption);
  color: var(--color-text-subtlest);
}

.Textarea__box[data-error] + .Textarea__prompt {
  color: var(--color-text-danger);
}
.BulkOrderDialog__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-height: 348px;
}

.BulkOrderDialog__summary {
  margin: 0;
  padding: var(--space-3) var(--space-4);
  color: var(--color-text-brand-accessible);
  background: var(--color-background-brand-subtle);
  border-radius: var(--radius-sm);
}

.BulkOrderDialog__field {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.BulkOrderDialog__field > label {
  flex: 0 0 144px;
}

.BulkOrderDialog__field > div,
.BulkOrderDialog__field > span {
  flex: 1 1 auto;
  min-width: 0;
}

.BulkOrderDialog__field .BulkOrderDialog__control {
  width: 100%;
}

.BulkOrderDialog__field .BulkOrderDialog__numberControl {
  flex: 0 0 160px;
  width: 160px;
}

.BulkOrderDialog__numberControl input {
  text-align: left;
}


.BulkOrderDialog__footer {
  display: flex;
  width: 100%;
  align-items: center;
  gap: var(--space-2);
}

.BulkOrderDialog__footerSpace {
  flex: 1 1 auto;
}

.BulkOrderDialog__dialog > div:has(> .BulkOrderDialog__body) {
  padding-top: var(--space-3);
}

.BulkOrderDialog__feedback {
  display: contents;
}

.BulkOrderDialog__selectedCount {
  color: var(--color-text-subtle);
  white-space: nowrap;
}
/*
 * Figma `2-Radio 单选框`（节点 `2956:11`）：
 * Size=Large 40 / Default 32 / Small 24 高；指示器 Large/Default 14px、Small 12px；
 * 选中是 4px 主题色圆环，Border=on 为 12px 内边距的 32px 卡片。
 */
.Radio__root {
  display: inline-flex;
  gap: var(--space-2);
  align-items: center;
  box-sizing: border-box;
  color: var(--color-text-subtle);
  font-family: var(--typography-font-family-sans);
  font-size: var(--typography-font-size-body);
  line-height: var(--typography-line-height-body);
  cursor: pointer;
}

.Radio__root[data-size='large'] {
  min-height: 40px;
}

.Radio__root[data-size='default'] {
  min-height: 32px;
}

.Radio__root[data-size='small'] {
  min-height: 24px;
}

.Radio__root[data-border] {
  padding: 0 var(--space-3);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-sm);
}

.Radio__root[data-border][data-checked] {
  border-color: var(--color-border-brand);
}

.Radio__root[data-disabled] {
  color: var(--color-text-disabled);
  cursor: not-allowed;
}

.Radio__control {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  white-space: nowrap;
  clip-path: inset(50%);
}

.Radio__indicator {
  position: relative;
  display: block;
  flex: 0 0 auto;
  box-sizing: border-box;
  background: var(--color-background-surface);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-full);
}

.Radio__root[data-size='large'] .Radio__indicator,
.Radio__root[data-size='default'] .Radio__indicator {
  width: 14px;
  height: 14px;
}

.Radio__root[data-size='small'] .Radio__indicator {
  width: 12px;
  height: 12px;
}

.Radio__root:not([data-checked]):hover:not([data-disabled]) .Radio__indicator {
  border-color: var(--color-border-brand);
}

.Radio__control:checked + .Radio__indicator {
  background: var(--color-background-surface);
  border: 4px solid var(--color-border-brand);
}

.Radio__root[data-disabled] .Radio__indicator {
  background: var(--color-background-neutral-subtle);
  border-color: var(--color-border-light);
}

.Radio__control:disabled:checked + .Radio__indicator {
  background: var(--color-background-neutral-subtle);
  border: 1px solid var(--color-border-light);
}

.Radio__control:disabled:checked + .Radio__indicator::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4px;
  height: 4px;
  content: '';
  background: var(--color-background-neutral-disabled);
  border-radius: var(--radius-full);
  transform: translate(-50%, -50%);
}

.Radio__control:focus-visible + .Radio__indicator {
  outline: 2px solid var(--color-border-focused);
  outline-offset: 2px;
}

.Radio__label {
  color: var(--color-text-subtle);
}

.Radio__root[data-disabled] .Radio__label {
  color: var(--color-text-disabled);
}
/* Element Plus 日期选择器作为结构参考；颜色、尺寸状态与焦点采用本地语义 token。
 * 输入框左侧前缀、右侧独立清空；日期格 40×36、圆形内容 28px；周期网格四列、58×40 胶囊。
 */
.DatePicker__root {
  position: relative;
  display: inline-flex;
  font-family: var(--typography-font-family-sans);
}

.DatePicker__control {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  width: 220px;
  max-width: 100%;
  color: var(--color-text);
  font-family: inherit;
  font-size: var(--typography-font-size-body);
  font-weight: var(--typography-font-weight-regular);
  line-height: var(--typography-line-height-body);
  text-align: left;
  cursor: pointer;
  background: var(--color-background-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

.DatePicker__control[data-size='large'] {
  height: 40px;
  padding: var(--space-2) var(--space-3);
}

.DatePicker__control[data-size='default'] {
  height: 32px;
  padding: var(--space-1) var(--space-2);
}

.DatePicker__control[data-size='small'] {
  height: 24px;
  padding: 2px 6px;
  font-size: var(--typography-font-size-caption);
  line-height: var(--typography-line-height-caption);
}

.DatePicker__control:hover:not(:disabled, :focus-visible, [data-open], [data-error]) {
  border-color: var(--color-border-strong);
}

.DatePicker__control[data-open],
.DatePicker__control:focus-visible {
  border-color: var(--color-border-focused);
}

.DatePicker__control:focus-visible {
  outline: 2px solid var(--color-border-focused);
  outline-offset: 2px;
}

.DatePicker__control[data-error] {
  border-color: var(--color-border-danger);
}

.DatePicker__control:disabled {
  color: var(--color-text-disabled);
  cursor: not-allowed;
  background: var(--color-background-neutral-subtle);
  border-color: var(--color-border-light);
}

.DatePicker__value {
  overflow: hidden;
  min-width: 0;
  flex: 1 1 auto;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.DatePicker__placeholder {
  overflow: hidden;
  min-width: 0;
  flex: 1 1 auto;
  color: var(--color-text-placeholder);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.DatePicker__icon {
  flex: none;
  color: var(--color-icon-placeholder);
  transition: opacity var(--motion-duration-fast) var(--motion-easing-standard);
}

/* 右侧独立清空槽位，与左侧日期 / 时间图标保持相同尺寸。 */
.DatePicker__clear {
  position: absolute;
  top: 50%;
  right: var(--space-2);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  padding: 0;
  color: var(--color-icon-placeholder);
  cursor: pointer;
  opacity: 0;
  background: none;
  border: 0;
  transform: translateY(-50%);
  pointer-events: none;
}

.DatePicker__root[data-size='large'] .DatePicker__clear {
  right: var(--space-3);
}

.DatePicker__root:has(.DatePicker__clear):hover .DatePicker__clear,
.DatePicker__root:has(.DatePicker__clear):focus-within .DatePicker__clear,
.DatePicker__clear:focus-visible {
  opacity: 1;
  pointer-events: auto;
}



.DatePicker__clear:focus-visible {
  outline: 2px solid var(--color-border-focused);
  outline-offset: 2px;
}

.DatePicker__positioner {
  z-index: var(--z-index-popover);
}

.DatePicker__panel {
  box-sizing: border-box;
  padding: 0 var(--space-4) var(--space-4);
  color: var(--color-text);
  background: var(--color-background-surface-overlay);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-sm);
  box-shadow: var(--elevation-shadow-sm);
  max-width: calc(100vw - 24px);
  max-height: var(--available-height, calc(100vh - 24px));
  overflow: auto;
}

.DatePicker__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 56px;
}

.DatePicker__monthLabel {
  color: var(--color-text);
  font-size: var(--typography-font-size-body-large);
  font-weight: var(--typography-font-weight-bold);
  line-height: var(--typography-line-height-body);
  padding: 0;
  font-family: inherit;
  cursor: pointer;
  background: transparent;
  border: 0;
}

.DatePicker__navButton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  color: var(--color-icon-placeholder);
  cursor: pointer;
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
}

.DatePicker__navButton:hover {
  color: var(--color-icon-brand);
  background: var(--color-background-neutral-subtle);
}

.DatePicker__navButton:focus-visible {
  outline: 2px solid var(--color-border-focused);
  outline-offset: 1px;
}

.DatePicker__weekdays,
.DatePicker__grid {
  display: grid;
  grid-template-columns: repeat(7, 40px);
}

.DatePicker__weekday {
  height: 24px;
  color: var(--color-text-placeholder);
  font-size: var(--typography-font-size-caption);
  line-height: var(--typography-line-height-caption);
  text-align: center;
}

.DatePicker__day {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 40px;
  height: 36px;
  padding: 0;
  color: var(--color-text);
  font-family: inherit;
  font-size: var(--typography-font-size-caption);
  line-height: var(--typography-line-height-caption);
  cursor: pointer;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
}

.DatePicker__day:hover:not(:disabled, [data-selected]) .DatePicker__cellFace {
  background: var(--color-background-neutral-subtle);
}

.DatePicker__day[data-outside] {
  color: var(--color-text-subtle);
}

.DatePicker__day[data-today] {
  color: var(--color-text-brand-accessible);
  font-weight: var(--typography-font-weight-medium);
}

.DatePicker__day[data-selected] .DatePicker__cellFace {
  font-weight: var(--typography-font-weight-medium);
  color: var(--color-text-inverse);
  background: var(--color-background-brand-bold);
}

.DatePicker__day:disabled {
  color: var(--color-text-disabled);
  cursor: not-allowed;
  border-color: transparent;
}

.DatePicker__day:focus-visible {
  outline: 2px solid var(--color-border-focused);
  outline-offset: -2px;
}

.DatePicker__footer {
  display: flex;
  gap: var(--space-3);
  justify-content: flex-end;
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border-subtle);
}

.DatePicker__footerButton {
  padding: 0;
  color: var(--color-text-brand-accessible);
  font-family: inherit;
  font-size: var(--typography-font-size-caption);
  line-height: var(--typography-line-height-caption);
  cursor: pointer;
  background: transparent;
  border: 0;
}

.DatePicker__footerButton:hover {
  color: var(--color-text-brand-bolder);
}

.DatePicker__footerButton:focus-visible {
  border-radius: 2px;
  outline: 2px solid var(--color-border-focused);
  outline-offset: 2px;
}

.DatePicker__panels {
  display: flex;
  gap: var(--space-4);
}

.DatePicker__calendar {
  width: 280px;
  flex: none;
}

.DatePicker__shortcuts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  max-width: 638px;
  margin-bottom: var(--space-2);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border-subtle);
}

.DatePicker__monthLabel:hover {
  color: var(--color-text-brand-accessible);
}

.DatePicker__monthLabel:focus-visible {
  outline: 2px solid var(--color-border-focused);
  outline-offset: 2px;
}

.DatePicker__grid[data-level='month'], .DatePicker__grid[data-level='year'] {
  grid-template-columns: repeat(4, 1fr);
}

.DatePicker__grid[data-level='quarter'] {
  grid-template-columns: repeat(4, 1fr);
}

.DatePicker__grid:not([data-level='date']) .DatePicker__day {
  width: 100%;
  height: 48px;
}

.DatePicker__day[data-range] {
  border-radius: 0;
  background: var(--color-background-brand-subtle);
}

.DatePicker__footerButton:disabled {
  color: var(--color-text-disabled);
  cursor: not-allowed;
}

.DatePicker__rangeHint {
  margin-right: auto;
  color: var(--color-text-subtle);
  font-size: var(--typography-font-size-caption);
}


.DatePicker__control[data-clearable] {
  padding-right: 28px;
}

.DatePicker__control[data-mode='range'] {
  width: 350px;
}

.DatePicker__control[data-time][data-mode='range'] {
  width: 440px;
}

.DatePicker__rangeValues {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  align-items: center;
  gap: var(--space-2);
  text-align: center;
}

.DatePicker__separator {
  flex: none;
  color: var(--color-text-subtle);
}

.DatePicker__multipleValues {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  align-items: center;
  gap: var(--space-1);
  overflow: hidden;
}

.DatePicker__cellFace {
  display: inline-flex;
  width: 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
}

.DatePicker__grid:not([data-level='date']) .DatePicker__cellFace {
  width: 58px;
  height: 40px;
  box-sizing: border-box;
  padding-inline: 0;
  border-radius: var(--radius-full);
}

.DatePicker__timeRows {
  display: flex;
  gap: var(--space-4);
  padding-bottom: var(--space-3);
  margin-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border-subtle);
}

.DatePicker__timeRow {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 280px;
}

.DatePicker__timeDate {
  flex: 1 1 auto;
  color: var(--color-text-subtle);
  font-size: var(--typography-font-size-caption);
}

.DatePicker__timeFields {
  display: flex;
  gap: var(--space-1);
}

.DatePicker__timePart {
  width: 58px;
}

.DatePicker__timeRows[data-single] {
  flex-direction: column;
}

.DatePicker__timeMessage {
  margin: var(--space-2) 0 0;
  color: var(--color-text-danger);
  font-size: var(--typography-font-size-caption);
}

.DatePicker__periodHeading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
}

.DatePicker__footer[data-centered] {
  justify-content: center;
}

.DatePicker__weekdays {
  padding-bottom: var(--space-2);
  margin-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border-subtle);
}

.DatePicker__calendar:not([data-level='date']) .DatePicker__head {
  border-bottom: 1px solid var(--color-border-subtle);
}

.DatePicker__grid:not([data-level='date']) {
  row-gap: var(--space-4);
  padding-block: var(--space-2);
}



.DatePicker__grid .DatePicker__day {
  position: relative;
}

.DatePicker__grid .DatePicker__day[data-range] {
  background: transparent;
}

.DatePicker__grid .DatePicker__day[data-range]::before {
  position: absolute;
  top: 1px;
  right: -1px;
  left: -1px;
  height: 32px;
  content: '';
  background: var(--color-background-brand-subtle);
  pointer-events: none;
}

.DatePicker__grid .DatePicker__day[data-range-start]::before {
  left: 3px;
  border-top-left-radius: var(--radius-full);
  border-bottom-left-radius: var(--radius-full);
}

.DatePicker__grid .DatePicker__day[data-range-end]::before {
  right: 3px;
  border-top-right-radius: var(--radius-full);
  border-bottom-right-radius: var(--radius-full);
}

.DatePicker__grid .DatePicker__cellFace {
  position: relative;
}

.DatePicker__grid:not([data-level='date']) .DatePicker__day[data-range]::before {
  height: 44px;
}

.DatePicker__timeRows,
.DatePicker__shortcuts {
  padding-top: var(--space-4);
}

.DatePicker__root[data-size='small'] .DatePicker__clear {
  width: 12px;
  height: 12px;
}
/*
 * Figma `3-Pagination分页`（节点 `2970:0`）：
 * 标准节点 `10502:7650`：Size=Default 32×30、Small 24×24；字号 14 / 12；圆角 2px。
 * 默认文字 #606266，悬停与选中文字为主题色；Background 样式使用浅底、选中为实色主题底。
 */
.Pagination__root {
  display: inline-flex;
  gap: var(--space-4);
  align-items: center;
  flex-wrap: wrap;
  font-family: var(--typography-font-family-sans);
}

.Pagination__pages {
  display: inline-flex;
  align-items: center;
}

.Pagination__root[data-align] {
  display: flex;
  width: 100%;
}

.Pagination__root[data-align='center'] {
  justify-content: center;
}

.Pagination__root[data-align='end'] {
  justify-content: flex-end;
}

.Pagination__item,
.Pagination__control {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 0;
  color: var(--color-text-subtle);
  font-family: inherit;
  font-size: var(--typography-font-size-body);
  line-height: var(--typography-line-height-body);
  cursor: pointer;
  background: transparent;
  border: 0;
  border-radius: 2px;
}

.Pagination__root[data-size='default'] .Pagination__item,
.Pagination__root[data-size='default'] .Pagination__control {
  min-width: 32px;
  height: 30px;
}

.Pagination__root[data-size='small'] .Pagination__item,
.Pagination__root[data-size='small'] .Pagination__control {
  min-width: 24px;
  height: 24px;
  font-size: var(--typography-font-size-caption);
  line-height: var(--typography-line-height-caption);
}

.Pagination__item:hover,
.Pagination__control:hover:not(:disabled) {
  color: var(--color-text-brand);
}

.Pagination__root[data-variant='background'] .Pagination__item,
.Pagination__root[data-variant='background'] .Pagination__control {
  background: var(--color-background-neutral-subtle);
}

.Pagination__root[data-variant='background'] .Pagination__item[data-selected] {
  color: var(--color-text-inverse);
  background: var(--color-background-brand-bold);
}

.Pagination__item[data-selected] {
  color: var(--color-text-brand);
  font-weight: var(--typography-font-weight-bold);
}

.Pagination__control:disabled {
  color: var(--color-text-disabled);
  cursor: not-allowed;
}

.Pagination__total,
.Pagination__quickJumper {
  color: var(--color-text-subtle);
  font-size: var(--typography-font-size-body);
  line-height: var(--typography-line-height-body);
  white-space: nowrap;
}

/* 标准顺序：总数 → 每页条数 → 页码 → 跳页；功能组间距 16px，页码连续排列。 */
.Pagination__sizeChanger {
  width: 96px;
}

.Pagination__total {
  margin-right: 0;
}

.Pagination__simpleCurrent {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  height: 32px;
  color: var(--color-text-subtle);
  font-size: var(--typography-font-size-body);
  line-height: var(--typography-line-height-body);
}

.Pagination__simpleCurrent input {
  box-sizing: border-box;
  width: 32px;
  height: 24px;
  padding: 0;
  color: inherit;
  font: inherit;
  text-align: center;
  background: var(--color-background-surface);
  border: 1px solid var(--color-border);
  border-radius: 2px;
}

.Pagination__simpleCurrent input:focus-visible {
  outline: 2px solid var(--color-border-focused);
  outline-offset: 1px;
}

.Pagination__quickJumper {
  display: inline-flex;
  gap: var(--space-2);
  align-items: center;
  margin-left: 0;
}

.Pagination__quickJumper input {
  box-sizing: border-box;
  width: 58px;
  height: 32px;
  padding: 0 var(--space-2);
  color: var(--color-text);
  font: inherit;
  text-align: center;
  background: var(--color-background-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

.Pagination__quickJumper input:focus-visible {
  outline: 2px solid var(--color-border-focused);
  outline-offset: 1px;
}

.Pagination__quickJumper input:disabled {
  color: var(--color-text-disabled);
  cursor: not-allowed;
  background: var(--color-background-neutral-subtle);
}

.Pagination__goButton {
  height: 32px;
  padding: 0 var(--space-3);
  color: var(--color-text);
  font: inherit;
  cursor: pointer;
  background: var(--color-background-surface);
  border: 1px solid var(--color-border);
  border-radius: 2px;
}

.Pagination__goButton:hover:not(:disabled) {
  color: var(--color-text-brand);
  border-color: var(--color-border-focused);
}

.Pagination__goButton:focus-visible {
  outline: 2px solid var(--color-border-focused);
  outline-offset: 1px;
}

.Pagination__goButton:disabled {
  color: var(--color-text-disabled);
  cursor: not-allowed;
  background: var(--color-background-neutral-subtle);
}

.Pagination__root[data-size='small'] .Pagination__total,
.Pagination__root[data-size='small'] .Pagination__quickJumper,
.Pagination__root[data-size='small'] .Pagination__simpleCurrent {
  font-size: var(--typography-font-size-caption);
  line-height: var(--typography-line-height-caption);
}

.Pagination__root[data-size='small'] .Pagination__quickJumper input {
  width: 40px;
  height: 24px;
}

.Pagination__root[data-size='small'] .Pagination__goButton {
  height: 24px;
  padding-inline: var(--space-2);
}

.Pagination__root[data-size='small'] .Pagination__simpleCurrent {
  min-width: 40px;
  height: 24px;
}

.Pagination__more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-subtle);
  font-size: var(--typography-font-size-body);
  line-height: var(--typography-line-height-body);
}

.Pagination__root[data-size='default'] .Pagination__more {
  min-width: 32px;
  height: 32px;
}

.Pagination__root[data-size='small'] .Pagination__more {
  min-width: 24px;
  height: 24px;
  font-size: var(--typography-font-size-caption);
}

.Pagination__item:focus-visible,
.Pagination__control:focus-visible {
  outline: 2px solid var(--color-border-focused);
  outline-offset: 1px;
}

.Pagination__sizeChanger > button {
  gap: var(--space-3);
  padding-inline: var(--space-4) var(--space-3);
}
/*
 * Figma `5-Popover 气泡卡片`（节点 `3106:0`）：
 * 面板最小宽 212、内边距 12px 16px、圆角 4px、白底 + color.border.light 边框 + 小投影；
 * 标题与正文都是 14/22，**靠字重分主次**（标题 600、正文 400）——原来正文是 12/20，
 * 一行两三个字的补充说明还看得清，报错清单那种要读的完整句子就太小了；
 * 标题 600（不用 700：Windows 雅黑只有 400/700 两档，600 会被渲染成 700，中文笔画糊）。
 * 颜色仍是标题主文字色、正文次要色（text-subtle 6.11，白底达 AA）。箭头 12×6，支持上下左右共 12 种对位。
 */
.Popover__positioner {
  z-index: var(--z-index-popover);
}

.Popover__popup {
  position: relative;
  box-sizing: border-box;
  display: flex;
  min-width: 212px;
  max-width: 360px;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-4);
  font-family: var(--typography-font-family-sans);
  background: var(--color-background-surface-overlay);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-sm);
  box-shadow: var(--elevation-shadow-sm);
  transition: opacity var(--motion-duration-fast) var(--motion-easing-standard);
}

.Popover__popup[data-starting-style],
.Popover__popup[data-ending-style] {
  opacity: 0;
}

.Popover__title {
  margin: 0;
  font-size: var(--typography-font-size-body);
  font-weight: var(--typography-font-weight-semibold);
  line-height: var(--typography-line-height-body);
  color: var(--color-text);
}

.Popover__content {
  font-size: var(--typography-font-size-body);
  font-weight: var(--typography-font-weight-regular);
  line-height: var(--typography-line-height-body);
  color: var(--color-text-subtle);
}

/* 箭头颜色：白色底 + 浅色描边（几何来自 shared/floating-arrow.module.css） */
.Popover__arrow {
  --arrow-bg: var(--color-background-surface-overlay);
  --arrow-border: var(--color-border-light);
  --arrow-inset: 1px;
}
/*
 * Figma `4-Tabs 标签页`（`Tabs-top` + `Tabs/item`）：
 * 标签条高 38、白底、底边框 color.border.light（#E4E7ED）；
 * 单项左右内边距 20、上下 8、字号 14/22、默认文字 color.text。
 * TODO(待 Figma 核对)：选中态当前按本项目沿用的 Element Plus 惯例实现（主题色文字 + 底部 2px 主题色条），
 * `Tabs/item` 的 State 变体尚未读到。
 */
.Tabs__root {
  display: flex;
  align-items: stretch;
  box-sizing: border-box;
  height: 38px;
  background: var(--color-background-surface);
  border-bottom: 1px solid var(--color-border-light);
}

.Tabs__item {
  position: relative;
  display: inline-flex;
  gap: var(--space-2);
  align-items: center;
  padding: var(--space-2) var(--space-5);
  font-family: var(--typography-font-family-sans);
  font-size: var(--typography-font-size-body);
  line-height: var(--typography-line-height-body);
  color: var(--color-text);
  cursor: pointer;
  background: transparent;
  border: 0;
}

.Tabs__item:hover:not([data-disabled]) {
  color: var(--color-text-brand);
}

.Tabs__item[aria-selected='true'] {
  color: var(--color-text-brand);
}

.Tabs__item[aria-selected='true']::after {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 2px;
  content: '';
  background: var(--color-background-brand-bold);
}

.Tabs__item[data-disabled] {
  color: var(--color-text-disabled);
  cursor: not-allowed;
}

.Tabs__item:focus-visible {
  outline: 2px solid var(--color-border-focused);
  outline-offset: -2px;
}
/*
 * 自绘的水平滚动条（共享 Table 与订单预览抽屉共用同一份）：
 * 轨道浅灰、滑块深灰、整体圆角，横向溢出时常驻可见、可拖可点。
 * 原生横条在 macOS 上是 overlay——滚完就隐、不占布局，用户看不出右边还有内容，
 * 所以两个容器都把原生条藏掉（`scrollbar-width: none` + `::-webkit-scrollbar { display: none }`），
 * 由这里补一条看得见的。
 */
.horizontal-scrollbar__root {
  position: relative;
  flex: 0 0 auto;
  height: 10px;
  margin-top: var(--space-2);
  cursor: pointer;
  background: var(--color-background-neutral-subtle);
  border-radius: var(--radius-full);
}

.horizontal-scrollbar__root:focus-visible {
  outline: 2px solid var(--color-border-focused);
  outline-offset: 2px;
}

.horizontal-scrollbar__thumb {
  position: absolute;
  top: 2px;
  bottom: 2px;
  min-width: 24px;
  background: var(--color-background-neutral-bold);
  border-radius: inherit;
}

.horizontal-scrollbar__root:hover .horizontal-scrollbar__thumb {
  background: var(--color-background-neutral-bolder);
}
/*
 * Figma `3-Table 表格`（Column 组合核对）：
 * 表头 40 高、底色 #F5F7FA；数据行 40 高、白底；斑马纹行 #FAFAFA；
 * 左右内边距 12、分隔线 color.border.subtle（#EBEEF5）、文字 14/22 color.text。
 * 行悬停底色取 color.background.neutral.subtle，与表头一致（Element Plus 惯例，未在 Figma 单列变体）。
 */
.Table__root {
  min-width: 0;
}

.Table__viewport {
  position: relative;
  min-width: 0;
  overflow: hidden;
  isolation: isolate;
}

.Table__scroll {
  overflow-x: auto;
  scrollbar-width: none;
}

.Table__scroll::-webkit-scrollbar {
  display: none;
}

/* 横条的轨道与滑块样式搬到了共享的 `horizontal-scrollbar.module.css`：订单预览抽屉要用同一份。 */

.Table__pagination {
  display: flex;
  gap: var(--space-3);
  justify-content: flex-end;
  min-width: 0;
  margin-top: var(--space-3);
}

.Table__paginationStart {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  min-width: 0;
  color: var(--color-text-subtle);
  font-size: var(--typography-font-size-body);
  line-height: var(--typography-line-height-body);
}

.Table__table {
  width: 100%;
  border-spacing: 0;
  border-collapse: separate;
  font-family: var(--typography-font-family-sans);
  font-size: var(--typography-font-size-body);
  line-height: var(--typography-line-height-body);
  color: var(--color-text);
  background: var(--color-background-surface);
}

.Table__table[data-layout='fixed'] {
  table-layout: fixed;
}

.Table__table th,
.Table__table td {
  box-sizing: border-box;
  height: 40px;
  padding: 0 var(--space-3);
  text-align: left;
  white-space: nowrap;
}

.Table__table th {
  font-weight: var(--typography-font-weight-medium);
  color: var(--color-text);
  background: var(--color-background-neutral-subtle);
}

/* 表头列间短分隔线：只在表头、从每行第二个格起，14px 居中；置于 sticky 规则前，
   sticky/fixed 表头的 position 覆盖本条（sticky 同样是定位上下文，伪元素不受影响）。 */
.Table__table thead th {
  position: relative;
}

.Table__table thead th::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  height: 14px;
  transform: translateY(-50%);
  border-left: 1px solid var(--color-border-lighter);
}

.Table__table thead th:first-child::before {
  content: none;
}

.Table__table[data-sticky-header] th {
  position: sticky;
  top: 0;
  z-index: 4;
}

.Table__table th[data-fixed],
.Table__table td[data-fixed] {
  position: sticky;
  background: var(--color-background-surface);
}

.Table__table th[data-fixed] {
  z-index: 3;
  background: var(--color-background-neutral-subtle);
}

.Table__table td[data-fixed] {
  z-index: 2;
}

.Table__table th[data-fixed='left'],
.Table__table td[data-fixed='left'] {
  left: 0;
}

.Table__table th[data-fixed='right'],
.Table__table td[data-fixed='right'] {
  right: 0;
}

/* 固定区阴影由单个覆盖层绘制，避免每个单元格产生断续阴影；仅发生横向溢出时渲染。 */
.Table__fixedPane {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 5;
  width: 16px;
  pointer-events: none;
}

.Table__fixedPane[data-fixed-pane='left'] {
  /* 先用一条不透明护栏盖住 sticky 边界，避免滚动单元格文字从边缘透出；其后才是连续渐隐阴影。 */
  background: linear-gradient(to right, var(--color-background-surface) 0 1px, var(--color-overlay-neutral) 1px, transparent 100%);
}

.Table__fixedPane[data-fixed-pane='right'] {
  background: linear-gradient(to left, var(--color-background-surface) 0 1px, var(--color-overlay-neutral) 1px, transparent 100%);
}

.Table__table td {
  color: var(--color-text);
}

.Table__ellipsis {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.Table__table[data-bordered] th,
.Table__table[data-bordered] td {
  border-bottom: 1px solid var(--color-border-subtle);
}

.Table__table[data-bordered] th {
  border-top: 1px solid var(--color-border-subtle);
}

.Table__table[data-stripe] tbody tr:nth-child(even) td {
  background: var(--color-background-neutral-subtlest);
}

.Table__table[data-clickable] tbody tr {
  cursor: pointer;
}

.Table__table tbody tr[data-current] td {
  background: var(--color-background-neutral-selected);
}

.Table__table[aria-busy='true'] {
  opacity: 0.72;
}

.Table__table tfoot td {
  font-weight: var(--typography-font-weight-medium);
  background: var(--color-background-neutral-subtle);
  border-top: 1px solid var(--color-border-subtle);
}

/* 整行悬停：与是否可点击解耦，且置于斑马纹规则之后以覆盖条纹底色。 */
.Table__table tbody tr:hover td,
.Table__table[data-stripe] tbody tr:hover td,
.Table__table[data-clickable] tbody tr:hover td {
  background: var(--color-background-neutral-subtle);
}

.Table__table th[data-align='center'],
.Table__table td[data-align='center'] {
  text-align: center;
}

.Table__table th[data-align='right'],
.Table__table td[data-align='right'] {
  text-align: right;
}

.Table__optionCell {
  width: 38px;
  padding-right: 0;
  padding-left: var(--space-3);
}

.Table__actions {
  display: inline-flex;
  gap: var(--space-3);
  align-items: center;
}

/* 二级表头的分组格：跨子列居中，下边线区分两级。 */
.Table__groupHeader {
  text-align: center;
  border-bottom: 1px solid var(--color-border-subtle);
}

.Table__headContent {
  display: inline-flex;
  gap: var(--space-1);
  align-items: center;
}

/* 筛选图标为占位：本地 Iconfont 暂无 `filter`，当前用箭头图标代替（见 iconography.md 待上传清单）。 */
.Table__filterButton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  color: var(--color-icon-placeholder);
  cursor: pointer;
  background: transparent;
  border: 0;
  border-radius: 2px;
}

.Table__filterButton:hover,
.Table__filterButton[data-active] {
  color: var(--color-text-brand);
  background: var(--color-background-neutral-subtle);
}

.Table__filterButton:focus-visible,
.Table__sortButton:focus-visible {
  outline: 2px solid var(--color-border-focused);
  outline-offset: 1px;
  border-radius: 2px;
}

.Table__filterIcon {
  transform: rotate(0deg);
}

.Table__filterPanel {
  display: flex;
  min-width: 140px;
  flex-direction: column;
  gap: var(--space-2);
}

.Table__filterActions {
  display: flex;
  justify-content: flex-end;
  padding-top: var(--space-1);
}

.Table__sortButton {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  background: transparent;
  border: 0;
}

.Table__sortButton:hover {
  color: var(--color-text-brand);
}

.Table__sortIcon {
  color: var(--color-icon-placeholder);
}

.Table__sortIcon[data-active] {
  color: var(--color-text-brand);
}

.Table__table[data-stripe] tbody tr:nth-child(odd) td {
  background: var(--color-background-surface);
}

.Table__empty {
  height: 80px;
  color: var(--color-text-subtlest);
  text-align: center;
}
/* 数据导入功能页。颜色只消费语义 token，间距与字号走全局刻度。 */
.DataImportPanel__root {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--space-6);
  min-width: 0;
  min-height: 0;
  padding: var(--space-4);
  overflow: auto;
}

/* 顶部提示条：信息提示语义底 + 主题色链接，右侧帮助入口靠 auto 外边距贴边。 */
.DataImportPanel__notice {
  display: flex;
  flex: 0 0 auto;
  gap: var(--space-2);
  align-items: center;
  padding: var(--space-2) var(--space-4);
  color: var(--color-text-subtle);
  font-size: var(--typography-font-size-body);
  line-height: var(--typography-line-height-body);
  background: var(--color-background-information-subtle);
  border-radius: var(--radius-sm);
}

.DataImportPanel__noticeText {
  margin: 0;
}

.DataImportPanel__noticeHelp {
  margin-left: auto;
}

.DataImportPanel__section {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: var(--space-2);
}

.DataImportPanel__sectionTitle {
  margin: 0;
  color: var(--color-text);
  font-size: var(--typography-font-size-body);
  font-weight: var(--typography-font-weight-semibold);
  line-height: var(--typography-line-height-body);
}

.DataImportPanel__importGuide {
  margin: 0;
  flex: 0 0 auto;
  color: var(--color-text-subtle);
  font-size: var(--typography-font-size-caption);
  line-height: var(--typography-line-height-caption);
}

/*
 * 导入卡片：整卡浅灰底，左步直接在灰底上、右步白底虚线框，中间竖分隔线，
 * 「去处理」在卡内右下角。结构与参考原型一致。
 */
.DataImportPanel__importCard {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
  padding: var(--space-5) var(--space-6) var(--space-4);
  background: var(--color-background-neutral-subtle);
  border-radius: var(--radius-sm);
}

.DataImportPanel__step {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* 左右两步之间的竖分隔线：由第二步的左描边承担，与 gap 共同构成等宽留白。 */
.DataImportPanel__step + .DataImportPanel__step {
  padding-left: var(--space-5);
  border-left: 1px solid var(--color-border-subtle);
}

.DataImportPanel__stepTitle {
  margin: 0;
  color: var(--color-text);
  font-size: var(--typography-font-size-body);
  font-weight: var(--typography-font-weight-regular);
  line-height: var(--typography-line-height-body);
}

/*
 * 两步内部三行（图标 / 说明 / 按钮）逐行对齐：
 * 左步无框直接在灰卡上，内容垂直居中；右步白底虚线框承接拖拽。
 * 说明文案预留两行高度——左边一行、右边两行时按钮也能齐平。
 */
.DataImportPanel__stepBody {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--space-4);
  align-items: center;
  justify-content: center;
  text-align: center;
}

.DataImportPanel__uploadBox {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--space-4);
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
  text-align: center;
  background: var(--color-background-surface);
  border: 1px dashed var(--color-border-light);
  border-radius: var(--radius-sm);
}

/* 拖拽悬停时整块换主题色描边与浅底，避免只有边框变色难以察觉。 */
.DataImportPanel__uploadBox[data-dragging] {
  background: var(--color-background-brand-subtle);
  border-color: var(--color-border-brand);
}

.DataImportPanel__downloadIcon,
.DataImportPanel__uploadIcon {
  width: 44px;
  height: 54px;
  object-fit: contain;
}

.DataImportPanel__selectedFileIcon {
  display: block;
  width: 44px;
  height: 54px;
  object-fit: contain;
}

/* 文件图标右上角的删除角标：探出图标边缘，hover 变红警示。 */
.DataImportPanel__fileIconWrap {
  position: relative;
  display: inline-block;
  line-height: 0;
}

.DataImportPanel__removeFile {
  position: absolute;
  top: -8px;
  right: -8px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--color-text-danger);
  cursor: pointer;
  line-height: 0;
}

.DataImportPanel__removeFile:hover:not(:disabled) {
  opacity: 0.8;
}

.DataImportPanel__removeFile:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

/*
 * 校验中态的 spinner：iconfont 没有 loading 图标，用 CSS 圆环旋转兜底。
 * 品牌色边框 + 透明顶边形成「缺口旋转」视觉，跟通用 spinner 形态一致。
 */
@keyframes DataImportPanel__spin {
  to {
    transform: rotate(360deg);
  }
}

.DataImportPanel__spinner {
  display: block;
  width: 28px;
  height: 28px;
  border: 3px solid var(--color-border-brand);
  border-top-color: transparent;
  border-radius: 50%;
  animation: DataImportPanel__spin 0.8s linear infinite;
}

.DataImportPanel__boxHint {
  max-width: 340px;
  min-height: calc(2 * var(--typography-line-height-caption));
  margin: 0;
  color: var(--color-text-placeholder);
  font-size: var(--typography-font-size-caption);
  line-height: var(--typography-line-height-caption);
}

.DataImportPanel__fileName {
  margin: 0;
  color: var(--color-text-subtle);
  font-size: var(--typography-font-size-caption);
  line-height: var(--typography-line-height-caption);
}

/* 原生文件选择框视觉隐藏但保留可访问性，触发交给「选择文件」按钮。 */
.DataImportPanel__fileInput {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  white-space: nowrap;
  border: 0;
  clip-path: inset(50%);
}

.DataImportPanel__importActions {
  display: flex;
  grid-column: 1 / -1;
  gap: var(--space-4);
  align-items: center;
  justify-content: flex-end;
}

.DataImportPanel__btnSpinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: var(--space-2);
  vertical-align: -2px;
  border: 2px solid currentcolor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: DataImportPanel__spin 0.8s linear infinite;
}

/* 成功数、失败数与状态都跟着数据派生，配色只表达语义，不参与布局。 */
.DataImportPanel__succeeded {
  color: var(--color-text-success);
}

.DataImportPanel__failed {
  color: var(--color-text-danger);
}

/*
 * 状态列：圆点 + 状态文字，与优惠券列表、推荐卡列表同一形态（8px 实心圆）。
 * 已导入走 success-bold 绿、待导入走 warning-bold 橙；导入中不配圆点，改用下面的进度条。
 */
.DataImportPanel__statusText {
  display: inline-flex;
  gap: var(--space-1);
  align-items: center;
  color: var(--color-text);
}

.DataImportPanel__statusDotDone,
.DataImportPanel__statusDotPending {
  display: inline-block;
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  border-radius: var(--radius-full);
}

.DataImportPanel__statusDotDone {
  background: var(--color-background-success-bold);
}

.DataImportPanel__statusDotPending {
  background: var(--color-background-warning-bold);
}

/*
 * 导入中：轨道 + 品牌色进度条 + 百分比。百分比由成功/失败计数派生，
 * 光带匀速走一遍表示「还在跑」——不写假进度、也不做不定长循环条，读数始终是真实比例。
 */
.DataImportPanel__statusProgress {
  display: inline-flex;
  gap: var(--space-2);
  align-items: center;
  color: var(--color-text);
}

.DataImportPanel__progressTrack {
  display: inline-block;
  width: 56px;
  height: 6px;
  flex: 0 0 56px;
  overflow: hidden;
  background: var(--color-background-neutral);
  border-radius: var(--radius-full);
}

.DataImportPanel__progressBar {
  position: relative;
  display: block;
  height: 100%;
  overflow: hidden;
  background: var(--color-background-brand-bold);
  border-radius: var(--radius-full);
}

/* 光带被裁在已完成的一段里，只在蓝色区域内滑动，不会跑到空轨道上。 */
.DataImportPanel__progressBar::after {
  position: absolute;
  inset: 0;
  content: '';
  background: linear-gradient(90deg, transparent, var(--color-background-brand-bold-hovered), transparent);
  animation: DataImportPanel__progress-sheen 1.4s ease-in-out infinite;
}

.DataImportPanel__progressText {
  color: var(--color-text-subtle);
  font-variant-numeric: tabular-nums;
}

@keyframes DataImportPanel__progress-sheen {
  from {
    transform: translateX(-100%);
  }

  to {
    transform: translateX(100%);
  }
}

/* 减少动效：进度条保留真实比例，只去掉光带。 */
@media (prefers-reduced-motion: reduce) {
  .DataImportPanel__progressBar::after {
    display: none;
  }
}

/* 只给屏幕阅读器的文字（状态列里「导入中」三个字不占可见位置）。 */
.DataImportPanel__visuallyHidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.DataImportPanel__actions {
  display: inline-flex;
  gap: var(--space-3);
  align-items: center;
}

.DataImportPanel__flowPreview {
  display: block;
  width: 100%;
}

/*
 * 参考图里的链接蓝是 brand-600（`#2878E8`），它在白底只有 4.25:1、在提示条底 3.86:1、在灰卡底 3.95:1，
 * 都不到 WCAG AA 的 4.5:1。项目里需要达标的蓝色统一走 brand-800（本页三处底色分别为 7.21 / 6.56 / 6.87:1），
 * 与 `ModuleSidebar`、`Dialog`、`InputNumber`、`ModulePage` 的处理一致。
 *
 * `Link` 组件没有这一档属性，且页面单个类 (0,1,0) 压不过组件内部的 `.root[data-type='primary']` (0,2,0)，
 * 因此这里的覆盖写成「页面根 + 链接类 + 属性」把特异性提到 (0,3,0)，避免静默失效。
 */
.DataImportPanel__root .DataImportPanel__brandLink[data-type='primary'] {
  color: var(--color-text-brand-accessible);
}

/* 段落内的文字按钮沿用正文基线，避免 inline-flex 的垂直居中使文字偏低。 */
.DataImportPanel__root .DataImportPanel__viewLink.DataImportPanel__brandLink[data-type='primary'] {
  display: inline;
  font-size: inherit;
  line-height: inherit;
  padding: 0 var(--space-2);
  vertical-align: baseline;
  border-radius: var(--radius-sm);
}
.admin-v1-Page__page {
  display: flex;
  flex-direction: column;
  min-width: var(--layout-minimum-width);
  height: 100dvh;
  overflow: hidden;
  color: var(--color-text);
  background: var(--color-background-page);
}

.admin-v1-Page__workspace {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* 主菜单与二级菜单两列都来自 ModuleSidebar，宽度由组件自身的 token 决定。 */
.admin-v1-Page__workspace > aside {
  flex: 0 0 auto;
}

.admin-v1-Page__content {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: var(--color-background-page);
}

.admin-v1-Page__card {
  flex: 1 1 auto;
  margin: 0 var(--space-2) var(--space-2) 0;
  overflow: hidden;
}

/* 卡片内横向布局：左侧二级菜单（有则占一列），右侧功能内容。 */
.admin-v1-Page__cardBody {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
}

/* 二级菜单与右侧功能内容之间用一条竖向分隔线，避免整块纯白难以分区。 */
.admin-v1-Page__cardBody > aside {
  flex: 0 0 auto;
  border-right: 1px solid var(--color-border-subtle);
}

.admin-v1-Page__panel {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
}

.admin-v1-Page__heading {
  margin: 0;
  color: var(--color-text);
  font-size: var(--typography-font-size-body-large);
  font-weight: var(--typography-font-weight-regular);
}

.admin-v1-Page__placeholder {
  margin: var(--space-2) 0 0;
  color: var(--color-text-subtle);
  font-size: var(--typography-font-size-body);
}
.ThemeToggle__button {
  min-height: 32px;
  padding-inline: var(--space-3);
  color: var(--color-text);
  font: inherit;
  font-size: var(--typography-font-size-caption);
  font-weight: var(--typography-font-weight-semibold);
  cursor: pointer;
  background: var(--color-background-neutral-subtle);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
}

.ThemeToggle__button:hover {
  background: var(--color-background-neutral);
}

.ThemeToggle__button:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--color-border-focused) 35%, transparent);
  outline-offset: 3px;
}
.HandoffPage__page {
  box-sizing: border-box;
  min-width: var(--layout-minimum-width);
  min-height: 100vh;
  color: var(--color-text);
  background: var(--color-background-page);
}

.HandoffPage__topbar {
  position: sticky;
  top: 0;
  z-index: var(--z-index-sticky);
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  padding-inline: var(--layout-page-padding-x);
  background: color-mix(in srgb, var(--color-background-surface) 88%, transparent);
  border-bottom: 1px solid var(--color-border);
  backdrop-filter: blur(16px);
}

.HandoffPage__backLink {
  display: inline-flex;
  gap: var(--space-2);
  align-items: center;
  color: var(--color-text);
  font-weight: var(--typography-font-weight-semibold);
  text-decoration: none;
}

.HandoffPage__backLink svg {
  transform: rotate(180deg);
}

.HandoffPage__backLink:focus-visible,
.HandoffPage__pageLink:focus-visible,
.HandoffPage__assetList a:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--color-border-focused) 28%, transparent);
  outline-offset: 3px;
}

.HandoffPage__version {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  color: var(--color-text-subtle);
  font-size: var(--typography-font-size-caption);
}

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

.HandoffPage__version span:first-child {
  padding: var(--space-1) var(--space-3);
  color: var(--color-text);
  font-weight: var(--typography-font-weight-semibold);
  background: var(--color-background-brand-subtle);
  border-radius: var(--radius-full);
}

.HandoffPage__container {
  width: min(calc(100% - 80px), var(--layout-content-max-width));
  padding-block: var(--space-16);
  margin-inline: auto;
}

.HandoffPage__intro {
  padding-bottom: var(--space-10);
}

.HandoffPage__intro > p,
.HandoffPage__sectionLabel {
  margin: 0 0 var(--space-2);
  color: var(--color-text);
  font-size: var(--typography-font-size-caption);
  font-weight: var(--typography-font-weight-bold);
  letter-spacing: 0.12em;
}

.HandoffPage__intro h1 {
  margin: 0;
  font-size: var(--typography-font-size-display);
  line-height: var(--typography-line-height-display);
  letter-spacing: -0.035em;
}

.HandoffPage__meta {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-4);
  color: var(--color-text-subtle);
  font-size: var(--typography-font-size-body);
}

.HandoffPage__meta span + span::before {
  margin-right: var(--space-3);
  color: var(--color-text-placeholder);
  content: '/';
}

.HandoffPage__viewportPanel,
.HandoffPage__panel,
.HandoffPage__devtools {
  background: var(--color-background-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--elevation-shadow-sm);
}

.HandoffPage__viewportPanel {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: var(--space-8);
  align-items: center;
  padding: var(--space-6);
  margin-bottom: var(--space-5);
}

.HandoffPage__viewportPanel h2,
.HandoffPage__panel h2,
.HandoffPage__devtools h2 {
  margin: 0;
  font-size: var(--typography-font-size-title);
  line-height: var(--typography-line-height-title);
}

.HandoffPage__viewportPanel strong {
  font-family: var(--typography-font-family-numeric);
  font-size: var(--typography-font-size-headline);
}

.HandoffPage__viewportPanel > span {
  color: var(--color-text-subtle);
  font-size: var(--typography-font-size-body);
}

.HandoffPage__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
}

.HandoffPage__panel {
  padding: var(--space-6);
  margin-bottom: var(--space-5);
}

.HandoffPage__panelHeader {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: var(--space-5);
}

.HandoffPage__panelHeader > span,
.HandoffPage__panelHeader > code {
  color: var(--color-text-subtle);
  font-size: var(--typography-font-size-caption);
}

.HandoffPage__pageLink {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4);
  color: inherit;
  text-decoration: none;
  background: var(--color-background-neutral-subtle);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
}

.HandoffPage__pageLink p {
  margin: var(--space-1) 0 var(--space-2);
  color: var(--color-text-subtle);
}

.HandoffPage__pageLink span {
  color: var(--color-text);
  font-size: var(--typography-font-size-caption);
}

.HandoffPage__notes {
  display: grid;
  gap: var(--space-4);
  padding: 0;
  margin: 0;
  list-style: none;
  counter-reset: notes;
}

.HandoffPage__notes li {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: var(--space-3);
  color: var(--color-text-subtle);
  line-height: var(--typography-line-height-body);
  counter-increment: notes;
}

.HandoffPage__notes li::before {
  display: grid;
  width: 24px;
  height: 24px;
  color: var(--color-text);
  font-family: var(--typography-font-family-numeric);
  font-size: var(--typography-font-size-caption);
  content: counter(notes, decimal-leading-zero);
  background: var(--color-background-brand-subtle);
  border-radius: var(--radius-full);
  place-items: center;
}

.HandoffPage__paletteFamilies {
  display: grid;
  gap: var(--space-6);
}

.HandoffPage__paletteFamily {
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border-subtle);
}

.HandoffPage__paletteFamily:first-child {
  padding-top: 0;
  border-top: 0;
}

.HandoffPage__paletteFamilyHeader {
  display: flex;
  gap: var(--space-4);
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-3);
}

.HandoffPage__paletteFamilyHeader h3 {
  margin: 0;
  font-size: var(--typography-font-size-body-large);
  line-height: var(--typography-line-height-body-large);
}

.HandoffPage__paletteUsage {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: flex-end;
}

.HandoffPage__paletteUsage span {
  padding: var(--space-1) var(--space-2);
  color: var(--color-text);
  font-size: var(--typography-font-size-caption);
  background: var(--color-background-brand-subtle);
  border-radius: var(--radius-full);
}

.HandoffPage__paletteGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(146px, 1fr));
  gap: var(--space-3);
}

.HandoffPage__paletteItem {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
  padding: var(--space-3);
  background: var(--color-background-neutral-subtle);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
}

.HandoffPage__paletteSwatch {
  display: block;
  height: 36px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

.HandoffPage__paletteItem code,
.HandoffPage__iconItem code,
.HandoffPage__mappingTable code {
  overflow-wrap: anywhere;
  color: var(--color-text-subtle);
  font-family: var(--typography-font-family-mono);
  font-size: var(--typography-font-size-caption);
}

.HandoffPage__paletteItem > span:last-child,
.HandoffPage__resolvedValue {
  color: var(--color-text-subtle);
  font-family: var(--typography-font-family-mono);
  font-size: var(--typography-font-size-caption);
}

.HandoffPage__tableScroll {
  max-width: 100%;
  overflow-x: auto;
}

.HandoffPage__mappingTable {
  width: 100%;
  min-width: 620px;
  border-spacing: 0;
  border-collapse: collapse;
  font-size: var(--typography-font-size-body);
}

.HandoffPage__mappingTable th,
.HandoffPage__mappingTable td {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--color-border-subtle);
}

.HandoffPage__mappingTable th {
  color: var(--color-text-subtle);
  font-size: var(--typography-font-size-caption);
  font-weight: var(--typography-font-weight-semibold);
  white-space: nowrap;
  background: var(--color-background-neutral-subtle);
}

.HandoffPage__mappingTable td {
  color: var(--color-text);
  line-height: var(--typography-line-height-body);
}

.HandoffPage__mappingTable tr:last-child td {
  border-bottom: 0;
}

.HandoffPage__semanticTable {
  min-width: 960px;
}

.HandoffPage__semanticTable td:nth-child(3),
.HandoffPage__semanticTable td:nth-child(4) {
  min-width: 170px;
}

.HandoffPage__semanticTable td:first-child {
  display: flex;
  gap: var(--space-2);
  align-items: center;
}

.HandoffPage__semanticSwatch {
  display: inline-block;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

.HandoffPage__semanticTable .HandoffPage__resolvedValue {
  display: block;
  margin-top: var(--space-1);
}

.HandoffPage__iconGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}

.HandoffPage__iconItem {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-4);
  background: var(--color-background-neutral-subtle);
  border-radius: var(--radius-md);
}

.HandoffPage__primaryIcon {
  color: var(--color-icon-brand);
}

.HandoffPage__dangerIcon {
  color: var(--color-icon-danger);
}

.HandoffPage__neutralIcon {
  color: var(--color-icon-subtle);
}

.HandoffPage__assetList {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.HandoffPage__assetList a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4);
  color: var(--color-text);
  text-decoration: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.HandoffPage__assetList a:hover {
  border-color: var(--color-border-focused);
}

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

.HandoffPage__assetList span {
  margin-top: var(--space-1);
  color: var(--color-text-subtle);
  font-size: var(--typography-font-size-caption);
}

.HandoffPage__devtools {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: var(--space-10);
  padding: var(--space-6);
}

.HandoffPage__devtools p:last-child {
  margin: 0;
  color: var(--color-text-subtle);
  line-height: var(--typography-line-height-body);
}
.ProjectsPage__page {
  box-sizing: border-box;
  min-width: var(--layout-minimum-width);
  min-height: 100vh;
  color: var(--color-text);
  background: var(--color-background-page);
}

.ProjectsPage__content {
  display: grid;
  min-height: calc(100vh - 64px);
  place-items: center;
}

.ProjectsPage__content h1 {
  margin: 0;
  font-size: var(--typography-font-size-display);
}

.ProjectsPage__componentsLink {
  color: var(--color-text);
  font-weight: var(--typography-font-weight-semibold);
}

.ProjectsPage__componentsLink:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--color-border-focused) 35%, transparent);
  outline-offset: 3px;
}
.ComponentsPage__page {
  min-width: var(--layout-minimum-width);
  min-height: 100vh;
  color: var(--color-text);
  background: var(--color-background-page);
}

.ComponentsPage__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  padding-inline: var(--layout-page-padding-x);
  border-bottom: 1px solid var(--color-border);
}

.ComponentsPage__header a {
  color: var(--color-text);
  font-weight: var(--typography-font-weight-semibold);
  text-decoration: none;
}

.ComponentsPage__content {
  width: min(calc(100% - 80px), var(--layout-content-max-width));
  padding-block: var(--space-16);
  margin-inline: auto;
}

.ComponentsPage__eyebrow,
.ComponentsPage__label {
  margin: 0 0 var(--space-2);
  color: var(--color-text-subtle);
  font-size: var(--typography-font-size-caption);
  font-weight: var(--typography-font-weight-bold);
  letter-spacing: 0.12em;
}

.ComponentsPage__content h1,
.ComponentsPage__content h2 {
  margin: 0;
}

.ComponentsPage__content h1 {
  font-size: var(--typography-font-size-display);
}

.ComponentsPage__summary {
  max-width: 680px;
  margin-block: var(--space-4) var(--space-10);
  color: var(--color-text-subtle);
}

.ComponentsPage__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
}

.ComponentsPage__card {
  display: grid;
  gap: var(--space-6);
  min-height: 280px;
  padding: var(--space-6);
  background: var(--color-background-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--elevation-shadow-sm);
  align-content: start;
}

.ComponentsPage__navigationCard {
  display: grid;
  grid-column: 1 / -1;
  gap: var(--space-4);
  padding: var(--space-6);
  overflow: hidden;
  background: var(--color-background-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--elevation-shadow-sm);
}

.ComponentsPage__sidebarCard {
  display: grid;
  grid-column: 1 / -1;
  gap: var(--space-4);
  padding: var(--space-6);
  background: var(--color-background-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--elevation-shadow-sm);
}

.ComponentsPage__sidebarCard > code {
  color: var(--color-text-subtle);
  font-size: var(--typography-font-size-caption);
}

.ComponentsPage__usage {
  margin: 0;
  color: var(--color-text-subtle);
}

.ComponentsPage__navigationPreview {
  overflow-x: auto;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
}

.ComponentsPage__sidebarPreview {
  min-height: 340px;
  overflow: hidden;
  background: var(--color-background-page);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
}

.ComponentsPage__sidebarPreview > aside {
  min-height: 340px;
}

.ComponentsPage__navigationCard > code {
  color: var(--color-text-subtle);
  font-size: var(--typography-font-size-caption);
}

.ComponentsPage__card > code {
  color: var(--color-text-subtle);
  font-size: var(--typography-font-size-caption);
}

.ComponentsPage__icons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  align-items: center;
}

.ComponentsPage__dropdownPreview {
  display: flex;
  align-items: flex-start;
  min-height: 180px;
}

.ComponentsPage__choicePreview {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}

/* 表单行预览：行自带行距，这里只负责纵向排布与给足标签栏 + 控件的宽度。 */
.ComponentsPage__formPreview {
  display: flex;
  flex-direction: column;
  width: 520px;
  max-width: 100%;
}

.ComponentsPage__messagePreview {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  align-items: flex-start;
}

.ComponentsPage__previewButton {
  height: 28px;
  padding: 0 var(--space-3);
  color: var(--color-text);
  font: inherit;
  cursor: pointer;
  background: var(--color-background-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

.ComponentsPage__previewButton:hover,
.ComponentsPage__previewButton[data-pressed],
.ComponentsPage__previewButton:focus-visible {
  background: var(--color-background-neutral-selected);
}

.ComponentsPage__previewButton:focus-visible {
  outline: 2px solid var(--color-border-focused);
  outline-offset: 2px;
}

.ComponentsPage__icons > div {
  display: grid;
  gap: var(--space-2);
  color: var(--color-text);
  text-align: center;
}

.ComponentsPage__icons code {
  color: var(--color-text-subtle);
  font-size: var(--typography-font-size-caption);
}

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

.ComponentsPage__inlineInput {
  width: 80px;
}
/*
 * 表单行与分节标题（Figma 表单版式的公共层）。
 * 数值取自创建电子推荐卡与优惠券编辑页的既有实现：
 * 行间距 12、行底距 20、标签栏 150 右对齐并上抬 8 与首行控件对齐、控件行间距 16、堆叠控件间距 8。
 */
.Form__root {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  margin-bottom: var(--space-5);
}

.Form__label {
  display: inline-flex;
  flex: 0 0 150px;
  gap: var(--space-1);
  align-items: center;
  justify-content: flex-end;
  padding-top: var(--space-2);
  color: var(--color-text-subtle);
  text-align: right;
}

.Form__required::before {
  margin-right: var(--space-1);
  color: var(--color-text-danger);
  content: '*';
}

/* 控件区：单行控件与堆叠控件都放在这一列里，提示行跟在控件之后。 */
.Form__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}

/* 一行控件横向铺开，换行后仍与标签顶对齐。 */
.Form__line {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
  min-width: 0;
  min-height: 32px;
}

.Form__hint {
  margin: 0;
  color: var(--color-text-subtlest);
}

.Form__root[data-error] .Form__hint {
  color: var(--color-text-danger);
}

.Form__section {
  min-width: 0;
}

.Form__section[data-divider] {
  margin: var(--space-6) 0;
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border-light);
}

.Form__sectionTitle {
  margin: var(--space-6) 0 var(--space-5);
  font-size: var(--typography-font-size-body-large);
  font-weight: var(--typography-font-weight-semibold);
  line-height: var(--typography-line-height-body-large);
}

.Form__section[data-divider] .Form__sectionTitle {
  margin-top: 0;
}

.Form__sectionTitleRow {
  display: inline-flex;
  gap: var(--space-2);
  align-items: center;
}
/*
 * Figma `2-Input 输入框 / Mixed-input`（节点 `2956:50350`）：
 * 前置槽 + 输入 + 后置槽拼成一条，槽 16 内边距、浅灰底、各自只做单侧圆角；
 * 相邻边框重叠 1px（Figma 的 -1px 外边距），避免拼缝出现双线。
 */
.InputGroup__root {
  display: inline-flex;
  align-items: stretch;
  min-width: 0;
  font-family: var(--typography-font-family-sans);
}

.InputGroup__slot {
  display: inline-flex;
  flex: none;
  align-items: center;
  padding: var(--space-1) var(--space-4);
  color: var(--color-text-subtle);
  font-size: var(--typography-font-size-body);
  line-height: var(--typography-line-height-body);
  white-space: nowrap;
  background: var(--color-background-neutral-subtlest);
  border: 1px solid var(--color-border);
}

.InputGroup__slot[data-side='front'] {
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}

.InputGroup__slot[data-side='rear'] {
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.InputGroup__control {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
}

/* 中间控件交给组宽度：内部 Input / InputNumber 自身的固定宽在这里被拉满。 */
.InputGroup__control > * {
  width: 100%;
}

/* 衔接处不要圆角，圆角只留给组的两端外缘。
   中间控件默认四角清零，再按「哪一头没有邻接槽位」把那头还原成组外缘的圆角：
   只挂前置槽时右端是外缘、只挂后置槽时左端是外缘、两侧都不挂时四角都是外缘。 */
.InputGroup__control > *,
.InputGroup__control > * > * {
  border-radius: 0;
}

.InputGroup__control:first-child > *,
.InputGroup__control:first-child > * > * {
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}

.InputGroup__control:last-child > *,
.InputGroup__control:last-child > * > * {
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.InputGroup__control:first-child:last-child > *,
.InputGroup__control:first-child:last-child > * > * {
  border-radius: var(--radius-sm);
}

.InputGroup__control + .InputGroup__slot,
.InputGroup__slot + .InputGroup__control {
  margin-left: -1px;
}

/* 中间控件聚焦时压在相邻槽之上，焦点边框才不会被拼缝裁掉。 */
.InputGroup__control:focus-within {
  position: relative;
  z-index: 1;
}
.Upload__root {
  display: inline-flex;
  flex-direction: column;
  gap: var(--space-2);
  align-items: flex-start;
}

.Upload__fileInput {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  white-space: nowrap;
  border: 0;
  clip-path: inset(50%);
}

.Upload__pictureGrid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: flex-start;
}

.Upload__trigger {
  display: grid;
  width: 148px;
  height: 148px;
  padding: 0;
  color: var(--color-icon-placeholder);
  cursor: pointer;
  background: var(--color-background-surface);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-sm);
  transition: color var(--motion-duration-fast) var(--motion-easing-standard), border-color var(--motion-duration-fast) var(--motion-easing-standard);
  place-items: center;
}

.Upload__root[data-size='compact'] .Upload__trigger {
  width: 64px;
  height: 64px;
}

.Upload__trigger:hover:not(:disabled) {
  color: var(--color-icon-brand);
  border-color: var(--color-border-brand);
}

.Upload__trigger:focus-visible,
.Upload__action:focus-visible,
.Upload__remove:focus-visible {
  outline: 2px solid var(--color-border-focused);
  outline-offset: 2px;
}

.Upload__trigger:disabled {
  color: var(--color-icon-disabled);
  cursor: not-allowed;
  background: var(--color-background-neutral-subtle);
  border-color: var(--color-border-light);
}

.Upload__description {
  color: var(--color-text-subtlest);
  font-size: var(--typography-font-size-caption);
  line-height: var(--typography-line-height-caption);
}

.Upload__fileList {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: 100%;
}

.Upload__file {
  display: flex;
  gap: var(--space-1);
  align-items: center;
  min-width: 0;
  padding: 2px var(--space-1);
}

.Upload__fileName {
  min-width: 0;
  overflow: hidden;
  color: var(--color-text-subtle);
  font-size: 13px;
  line-height: var(--typography-line-height-body);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.Upload__listSuccess {
  flex: none;
  margin-left: auto;
  color: var(--color-icon-success);
}

.Upload__remove,
.Upload__action {
  display: grid;
  padding: 0;
  color: inherit;
  cursor: pointer;
  background: transparent;
  border: 0;
  place-items: center;
}

.Upload__remove:hover:not(:disabled) {
  color: var(--color-text-brand);
}

.Upload__remove:disabled,
.Upload__action:disabled {
  cursor: not-allowed;
}

.Upload__root[data-variant='picture-card'] .Upload__fileList {
  flex-flow: row wrap;
  gap: var(--space-2);
  width: auto;
}

.Upload__root[data-variant='picture-card'] .Upload__file {
  position: relative;
  width: 148px;
  height: 148px;
  padding: 0;
  overflow: hidden;
  background: var(--color-background-surface);
  border: 1px solid var(--color-border-lighter);
  border-radius: var(--radius-sm);
}

.Upload__root[data-size='compact'] .Upload__file {
  width: 64px;
  height: 64px;
}

.Upload__preview {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.Upload__successMark {
  position: absolute;
  top: 0;
  right: 0;
  display: block;
  width: 32px;
  height: 32px;
  color: var(--color-icon-inverse);
  background: var(--color-background-success-bold);
  clip-path: polygon(0 0, 100% 0, 100% 100%);
}

.Upload__successMark > svg {
  position: absolute;
  top: 2px;
  right: 2px;
}

.Upload__actions {
  position: absolute;
  inset: 0;
  display: flex;
  gap: var(--space-4);
  align-items: center;
  justify-content: center;
  color: var(--color-icon-inverse);
  pointer-events: none;
  background: var(--color-overlay-emphasis);
  opacity: 0;
  transition: opacity var(--motion-duration-fast) var(--motion-easing-standard);
}

.Upload__file:hover .Upload__actions,
.Upload__file:focus-within .Upload__actions {
  pointer-events: auto;
  opacity: 1;
}

.Upload__action {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
}

.Upload__action:hover:not(:disabled) {
  background: var(--color-overlay-neutral);
}

.Upload__action:disabled {
  color: var(--color-icon-disabled);
}
/*
 * Figma `2-Input 输入框 / Password`（节点 `2941:51449`）：
 * 尾部 view / hide 显隐切换挂在 Input 的 suffix 槽上，
 * 这里只负责按钮自身的交互态。
 */
.Password__toggle {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: var(--color-icon-placeholder);
  cursor: pointer;
  background: transparent;
  border: 0;
}

.Password__toggle:hover {
  color: var(--color-icon);
}

.Password__toggle:disabled {
  cursor: not-allowed;
}

.Password__toggle:focus-visible {
  border-radius: 2px;
  outline: 2px solid var(--color-border-focused);
  outline-offset: 1px;
}
/*
 * Figma `2-Switch 开关`（节点 `2060:56`）：
 * Size=Large 50×24 / Default 40×20 / Small 30×16；滑块内缩 2px，轨道无边框。
 * 打开使用主题实色，关闭使用中性实色，禁用状态整体变浅。
 */
.Switch__root {
  position: relative;
  display: inline-flex;
  gap: var(--space-2);
  align-items: center;
  color: var(--color-text);
  font-family: var(--typography-font-family-sans);
  cursor: pointer;
}

.Switch__root[data-disabled] {
  cursor: not-allowed;
}

.Switch__root[data-type='text'] {
  font-size: var(--typography-font-size-body);
  line-height: var(--typography-line-height-body);
}

.Switch__control {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  white-space: nowrap;
  clip-path: inset(50%);
}

.Switch__track {
  position: relative;
  display: block;
  flex: 0 0 auto;
  background: var(--color-background-neutral-bold);
  border-radius: var(--radius-full);
  transition: background-color var(--motion-duration-fast) var(--motion-easing-standard);
}

.Switch__thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  display: block;
  background: var(--color-background-inverse);
  border-radius: var(--radius-full);
  transition: transform var(--motion-duration-fast) var(--motion-easing-standard);
}

.Switch__root[data-size='large'] .Switch__track {
  width: 50px;
  height: 24px;
}

.Switch__root[data-size='large'] .Switch__thumb {
  width: 20px;
  height: 20px;
}

.Switch__root[data-size='large'] .Switch__control:checked + .Switch__track .Switch__thumb {
  transform: translateX(26px);
}

.Switch__root[data-size='default'] .Switch__track {
  width: 40px;
  height: 20px;
}

.Switch__root[data-size='default'] .Switch__thumb {
  width: 16px;
  height: 16px;
}

.Switch__root[data-size='default'] .Switch__control:checked + .Switch__track .Switch__thumb {
  transform: translateX(20px);
}

.Switch__root[data-size='small'] .Switch__track {
  width: 30px;
  height: 16px;
}

.Switch__root[data-size='small'] .Switch__thumb {
  width: 12px;
  height: 12px;
}

.Switch__root[data-size='small'] .Switch__control:checked + .Switch__track .Switch__thumb {
  transform: translateX(14px);
}

/*
 * Figma 的 Switch 只有 Default / Disable / Focus 三个状态，没有 hover 变体；
 * 这里补一层轻量反馈（轨道加 1px 中性描边），保证鼠标悬停有回应。
 */
.Switch__root:hover:not([data-disabled]) .Switch__track {
  box-shadow: inset 0 0 0 1px var(--color-border-strong);
}

.Switch__control:checked + .Switch__track {
  background: var(--color-background-brand-bold);
}

.Switch__control:disabled + .Switch__track {
  background: var(--color-background-neutral-bold-disabled);
}

.Switch__control:checked:disabled + .Switch__track {
  background: var(--color-background-brand-bold-hovered);
}

.Switch__control:focus-visible + .Switch__track {
  outline: 2px solid var(--color-border-focused);
  outline-offset: 2px;
}

.Switch__sideText {
  color: var(--color-text);
  white-space: nowrap;
}

.Switch__sideText[data-active] {
  color: var(--color-text-brand);
}

.Switch__control:disabled ~ .Switch__sideText {
  color: var(--color-text-disabled);
}

.Switch__control:disabled ~ .Switch__sideText[data-active] {
  color: var(--color-text-brand-disabled);
}
/*
 * 新手引导遮罩：SVG 全屏层，用 mask 挖出圆角高亮洞。
 * 用 SVG 而不是 box-shadow，是因为 box-shadow 的扩散区收不到点击事件。
 * 遮罩本身不响应点击——隐藏只走气泡里的按钮（产品约定），故不设 pointer 光标。
 */
.Tour__overlay {
  position: fixed;
  z-index: var(--z-index-overlay);
  width: 100%;
  height: 100%;
  inset: 0;
}

.Tour__mask {
  fill: var(--color-overlay-emphasis);
}

/* 不可见锚点：跟随目标矩形，气泡由 Base UI 定位到它旁边（翻转、避让、跟随滚动都由它处理）。 */
.Tour__anchor {
  position: fixed;
  z-index: var(--z-index-overlay);
  pointer-events: none;
}

.Tour__positioner {
  z-index: var(--z-index-popover);
}

/*
 * 引导气泡：品牌蓝卡片 + 白字 + 白色胶囊按钮（Figma 气泡样式，节点 12471-25827）。
 * 卡片定宽 334、内边距 20、圆角 12；装饰星允许露出卡片外。
 */
.Tour__popup {
  position: relative;
  box-sizing: border-box;
  display: flex;
  width: 334px;
  max-width: calc(100vw - 48px);
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-5);
  font-family: var(--typography-font-family-sans);
  background: var(--color-background-brand-bold);
  border-radius: var(--radius-lg);
  box-shadow: var(--elevation-shadow-md);
  transition: opacity var(--motion-duration-fast) var(--motion-easing-standard);
}

.Tour__popup[data-starting-style],
.Tour__popup[data-ending-style] {
  opacity: 0;
}

/*
 * 装饰星：左上、右下各一组（大黄星 + 小奶白星），按 Figma 切图尺寸压在卡片边缘外；
 * 纯装饰不接鼠标，配色直接写在 SVG 属性里（切图原色，非主题色）。
 */
.Tour__sparkle {
  position: absolute;
  pointer-events: none;
}

.Tour__sparkleStart {
  top: 4px;
  left: -25px;
  width: 25px;
  height: 31.689px;
}

.Tour__sparkleEnd {
  top: 122px;
  right: -24.691px;
  width: 24.691px;
  height: 32.69px;
}

.Tour__counter {
  font-size: var(--typography-font-size-caption);
  line-height: var(--typography-line-height-caption);
  color: var(--color-text-inverse);
  opacity: 0.72;
}

.Tour__title {
  margin: 0;
  font-size: var(--typography-font-size-body);
  font-weight: 500;
  line-height: var(--typography-line-height-body);
  color: var(--color-text-inverse);
}

.Tour__content {
  font-size: var(--typography-font-size-body);
  line-height: 22px;
  color: var(--color-text-inverse);
  text-align: justify;
}

.Tour__actions {
  display: flex;
  margin-top: var(--space-4);
  gap: var(--space-2);
  align-items: center;
  justify-content: flex-end;
}

/* 白色胶囊按钮：白底品牌蓝字（Figma 的「知道了」），整组动作都用这个形态。 */
.Tour__pill {
  min-height: 24px;
  padding: 2px 15px;
  font-family: inherit;
  font-size: var(--typography-font-size-body);
  line-height: var(--typography-line-height-body);
  color: var(--color-text-brand);
  cursor: pointer;
  background: var(--color-background-surface-overlay);
  border: none;
  border-radius: var(--radius-full);
}

.Tour__pill:hover {
  background: var(--color-background-neutral-subtle);
}

/*
 * 指针：指向目标的「竖线 + 端点圆点」，取代通用三角箭头（Figma 节点 12471-25827 的「线」）。
 * 几何取自切图：3px 线长 30，端点 12px 圆点 + 20% 透明 3px 外环，整体挂在卡片边上
 * 距左缘约 23px 处（line 中心距边 32px）。方向随弹出侧翻转。
 */
[data-side='top'] .Tour__popup::before,
[data-side='bottom'] .Tour__popup::before,
[data-side='left'] .Tour__popup::before,
[data-side='right'] .Tour__popup::before,
[data-side='top'] .Tour__popup::after,
[data-side='bottom'] .Tour__popup::after,
[data-side='left'] .Tour__popup::after,
[data-side='right'] .Tour__popup::after {
  content: '';
  position: absolute;
  background: var(--color-background-brand-bold);
}

/* 气泡在目标上方：指针从卡片底部垂下。 */
[data-side='top'] .Tour__popup::before {
  top: 100%;
  left: 30.5px;
  width: 3px;
  height: 30px;
}

[data-side='top'] .Tour__popup::after {
  top: calc(100% + 28px);
  left: 26px;
  width: 12px;
  height: 12px;
  border-radius: var(--radius-full);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-background-brand-bold) 20%, transparent);
}

/* 气泡在目标下方：指针从卡片顶部竖起。 */
[data-side='bottom'] .Tour__popup::before {
  bottom: 100%;
  left: 30.5px;
  width: 3px;
  height: 30px;
}

[data-side='bottom'] .Tour__popup::after {
  bottom: calc(100% + 28px);
  left: 26px;
  width: 12px;
  height: 12px;
  border-radius: var(--radius-full);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-background-brand-bold) 20%, transparent);
}

/* 气泡在目标右侧：指针从卡片左缘水平指向目标。 */
[data-side='right'] .Tour__popup::before {
  right: 100%;
  top: 30.5px;
  width: 30px;
  height: 3px;
}

[data-side='right'] .Tour__popup::after {
  right: calc(100% + 28px);
  top: 26px;
  width: 12px;
  height: 12px;
  border-radius: var(--radius-full);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-background-brand-bold) 20%, transparent);
}

/* 气泡在目标左侧：指针从卡片右缘水平指向目标。 */
[data-side='left'] .Tour__popup::before {
  left: 100%;
  top: 30.5px;
  width: 30px;
  height: 3px;
}

[data-side='left'] .Tour__popup::after {
  left: calc(100% + 28px);
  top: 26px;
  width: 12px;
  height: 12px;
  border-radius: var(--radius-full);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-background-brand-bold) 20%, transparent);
}
.WelcomePage__page {
  position: relative;
  box-sizing: border-box;
  min-width: var(--layout-minimum-width);
  min-height: 100vh;
  padding: var(--layout-page-padding-y) var(--layout-page-padding-x);
  overflow: hidden;
  background:
    radial-gradient(circle at 76% 18%, color-mix(in srgb, var(--color-background-brand-bold) 13%, transparent), transparent 24rem),
    var(--color-background-page);
}

.WelcomePage__page::before {
  position: absolute;
  inset: 0;
  pointer-events: none;
  content: '';
  background-image:
    linear-gradient(color-mix(in srgb, var(--color-border) 55%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--color-border) 55%, transparent) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--color-text) 45%, transparent),
    transparent 70%
  );
}

.WelcomePage__header,
.WelcomePage__hero,
.WelcomePage__workflow {
  position: relative;
  z-index: 1;
  width: min(100%, var(--layout-content-max-width));
  margin-inline: auto;
}

.WelcomePage__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

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

.WelcomePage__brand {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  color: var(--color-text);
  font-size: var(--typography-font-size-body-large);
  font-weight: var(--typography-font-weight-semibold);
}

.WelcomePage__brandMark {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  object-fit: cover;
}

.WelcomePage__status {
  padding: var(--space-1) var(--space-3);
  color: var(--color-text-brand-bold);
  font-size: var(--typography-font-size-caption);
  font-weight: var(--typography-font-weight-semibold);
  background: var(--color-background-brand-subtle);
  border: 1px solid color-mix(in srgb, var(--color-border-focused) 18%, transparent);
  border-radius: var(--radius-full);
}

.WelcomePage__hero {
  padding-block: 128px 96px;
}

.WelcomePage__eyebrow {
  margin: 0 0 var(--space-5);
  color: var(--color-text-brand);
  font-size: var(--typography-font-size-caption);
  font-weight: var(--typography-font-weight-bold);
  letter-spacing: 0.16em;
}

.WelcomePage__hero h1 {
  max-width: 760px;
  margin: 0;
  color: var(--color-text);
  font-size: clamp(48px, 5vw, 76px);
  font-weight: var(--typography-font-weight-bold);
  letter-spacing: -0.055em;
  line-height: 1.08;
}

.WelcomePage__summary {
  max-width: 680px;
  margin: var(--space-6) 0 0;
  color: var(--color-text-subtle);
  font-size: var(--typography-font-size-body-large);
  line-height: var(--typography-line-height-body-large);
}

.WelcomePage__actions {
  display: flex;
  gap: var(--space-5);
  align-items: center;
  margin-top: var(--space-10);
}

.WelcomePage__primaryAction {
  display: inline-flex;
  gap: var(--space-2);
  align-items: center;
  min-height: 44px;
  padding-inline: var(--space-5);
  color: var(--color-text-inverse);
  font-weight: var(--typography-font-weight-semibold);
  text-decoration: none;
  background: var(--color-background-brand-bold);
  border-radius: var(--radius-md);
  box-shadow: var(--elevation-shadow-sm);
  transition:
    background var(--motion-duration-fast) var(--motion-easing-standard),
    transform var(--motion-duration-fast) var(--motion-easing-standard);
}

.WelcomePage__secondaryAction {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: var(--space-5);
  color: var(--color-text);
  font-weight: var(--typography-font-weight-semibold);
  text-decoration: none;
  background: var(--color-background-surface-overlay);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.WelcomePage__primaryAction:hover {
  background: var(--color-background-brand-bold-hovered);
  transform: translateY(-1px);
}

.WelcomePage__primaryAction:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--color-border-focused) 28%, transparent);
  outline-offset: 3px;
}

.WelcomePage__canvasNote {
  color: var(--color-text-subtle);
  font-size: var(--typography-font-size-caption);
}

.WelcomePage__workflow {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--elevation-shadow-md);
}

.WelcomePage__workflow article {
  padding: var(--space-6);
  background: color-mix(in srgb, var(--color-background-surface-overlay) 90%, transparent);
}

.WelcomePage__workflow article:first-child {
  border-radius: var(--radius-xl) 0 0 var(--radius-xl);
}

.WelcomePage__workflow article:last-child {
  border-radius: 0 var(--radius-xl) var(--radius-xl) 0;
}

.WelcomePage__workflow article + article {
  border-left: 1px solid var(--color-border);
}

.WelcomePage__workflow span {
  color: var(--color-text-brand);
  font-family: var(--typography-font-family-numeric);
  font-size: var(--typography-font-size-caption);
}

.WelcomePage__workflow h2 {
  margin: var(--space-4) 0 var(--space-2);
  color: var(--color-text);
  font-size: var(--typography-font-size-body-large);
}

.WelcomePage__workflow p {
  margin: 0;
  color: var(--color-text-subtle);
  font-size: var(--typography-font-size-body);
  line-height: var(--typography-line-height-body);
}

@media (prefers-reduced-motion: reduce) {
  .WelcomePage__primaryAction {
    transition: none;
  }
}
.ModulePlaceholderPage__page {
  min-width: var(--layout-minimum-width);
  height: 100dvh;
  min-height: 0;
  color: var(--color-text);
  background: var(--color-background-page);
  overflow: hidden;
  display: grid;
  grid-template-rows: var(--component-product-navigation-height) minmax(0, 1fr);
}

.ModulePlaceholderPage__workspace {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  min-height: 0;
  overflow: hidden;
}

.ModulePlaceholderPage__emptyContent {
  min-width: 0;
  min-height: 0;
  overflow: auto;
  background: var(--color-background-surface);
}

.ModulePlaceholderPage__visuallyHidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.classroom-schedule-kit-v3 {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 100%;
  color: var(--color-text);
  background: var(--color-background-page);
  overflow: hidden;
}

.classroom-schedule-kit-v3 .schedule-card {
  margin: 0 var(--space-2) var(--space-2) 0;
  overflow: hidden;
}

.classroom-schedule-kit-v3 .schedule-tab-panel {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.classroom-schedule-kit-v3 .schedule-header {
  display: flex;
  flex: 0 0 56px;
  gap: var(--space-4);
  align-items: center;
  height: 56px;
  padding: 0 var(--space-4);
  border-bottom: 1px solid var(--color-border-subtle);
  background: var(--color-background-surface);
}

.classroom-schedule-kit-v3 .schedule-date,
.classroom-schedule-kit-v3 .schedule-refresh,
.classroom-schedule-kit-v3 .schedule-stats {
  display: flex;
  gap: var(--space-4);
  align-items: center;
}

.classroom-schedule-kit-v3 .schedule-date { white-space: nowrap; }

.classroom-schedule-kit-v3 .schedule-date strong {
  font-size: var(--typography-font-size-body);
  font-weight: var(--typography-font-weight-semibold);
}

.classroom-schedule-kit-v3 .schedule-date span { color: var(--color-text-subtle); }

.classroom-schedule-kit-v3 .schedule-refresh { color: var(--color-text); }

.classroom-schedule-kit-v3 .schedule-stats {
  margin-left: auto;
  font-size: var(--typography-font-size-body);
  white-space: nowrap;
}

.classroom-schedule-kit-v3 .schedule-stats b {
  margin-left: var(--space-1);
  font-family: var(--typography-font-family-numeric);
  font-size: var(--typography-font-size-body);
}

.classroom-schedule-kit-v3 .schedule-stats .is-current b { color: var(--color-text-brand); }
.classroom-schedule-kit-v3 .schedule-stats .is-future b { color: var(--color-icon-warning); }

.classroom-schedule-kit-v3 .plain-button,
.classroom-schedule-kit-v3 .room-card {
  cursor: pointer;
  background: transparent;
  border: 0;
}

.classroom-schedule-kit-v3 .plain-button {
  color: inherit;
  font: inherit;
}

.classroom-schedule-kit-v3 .plain-button:hover,
.classroom-schedule-kit-v3 .plain-button:focus-visible { color: var(--color-text-brand-accessible); }

.classroom-schedule-kit-v3 .schedule-workbench {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  background: var(--color-background-surface);
  overflow: hidden;
}

.classroom-schedule-kit-v3 .room-selector,
.classroom-schedule-kit-v3 .course-timeline { padding: 0 var(--space-4); }

.classroom-schedule-kit-v3 .room-selector {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  border-right: 1px solid var(--color-border-subtle);
  overflow: hidden;
}

.classroom-schedule-kit-v3 .course-timeline {
  flex: 0 0 580px;
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
}

.classroom-schedule-kit-v3 .panel-title-row {
  display: flex;
  flex: 0 0 56px;
  gap: var(--space-4);
  align-items: center;
  justify-content: space-between;
  height: 56px;
}

.classroom-schedule-kit-v3 h2 {
  margin: 0;
  font-size: var(--typography-font-size-body-large);
  line-height: var(--typography-line-height-body-large);
}

.classroom-schedule-kit-v3 h2 small {
  margin-left: var(--space-1);
  color: var(--color-text-subtle);
  font-size: var(--typography-font-size-caption);
  font-weight: var(--typography-font-weight-regular);
}

.classroom-schedule-kit-v3 .room-list {
  gap: var(--space-2);
  min-height: 0;
  margin-top: var(--space-3);
  overflow-y: auto;
}

.classroom-schedule-kit-v3 .room-list--grid {
  display: grid;
  flex: 1 1 auto;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  align-content: flex-start;
}

.classroom-schedule-kit-v3 .room-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
  width: 100%;
  min-height: 176px;
  padding: var(--space-2) var(--space-3);
  color: var(--color-text);
  text-align: left;
  background: var(--color-background-neutral-subtle);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
}

.classroom-schedule-kit-v3 .room-card--active {
  background: var(--color-background-surface);
}

.classroom-schedule-kit-v3 .room-card:hover,
.classroom-schedule-kit-v3 .room-card:focus-visible { border-color: var(--color-border-focused); }

.classroom-schedule-kit-v3 .room-card strong,
.classroom-schedule-kit-v3 .room-card__title,
.classroom-schedule-kit-v3 .room-card__time span:last-child,
.classroom-schedule-kit-v3 .room-card__teacher span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.classroom-schedule-kit-v3 .room-card strong {
  font-size: var(--typography-font-size-body);
  font-weight: var(--typography-font-weight-semibold);
  line-height: 22px;
}

.classroom-schedule-kit-v3 .room-card__title {
  color: var(--color-text-placeholder);
  font-size: var(--typography-font-size-caption);
  line-height: 20px;
}

.classroom-schedule-kit-v3 .room-card__content {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.classroom-schedule-kit-v3 .room-card__course {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding: var(--space-2);
  background: var(--color-background-neutral-subtle);
  border-radius: var(--radius-sm);
}

.classroom-schedule-kit-v3 .room-card__meta,
.classroom-schedule-kit-v3 .room-card__time,
.classroom-schedule-kit-v3 .room-card__teacher {
  display: flex;
  align-items: center;
  min-width: 0;
}

.classroom-schedule-kit-v3 .room-card__meta {
  flex-direction: column;
  gap: 2px;
  align-items: stretch;
  color: var(--color-text-subtle);
  font-size: var(--typography-font-size-caption);
  line-height: var(--typography-line-height-caption);
}

.classroom-schedule-kit-v3 .room-card__time,
.classroom-schedule-kit-v3 .room-card__teacher {
  gap: var(--space-1);
}

.classroom-schedule-kit-v3 .room-card__time {
  flex: 0 0 auto;
}

.classroom-schedule-kit-v3 .room-card__teacher {
  flex: 1 1 auto;
}

.classroom-schedule-kit-v3 .room-card__time svg,
.classroom-schedule-kit-v3 .room-card__teacher svg {
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
  font-size: 14px;
}

.classroom-schedule-kit-v3 .schedule-refresh .plain-button {
  display: flex;
  gap: var(--space-1);
  align-items: center;
}

.classroom-schedule-kit-v3 .room-card__course-status {
  display: flex;
  gap: var(--space-1);
  align-items: center;
  min-width: 0;
  color: var(--color-text-subtle);
}

.classroom-schedule-kit-v3 .room-card__course-status i {
  position: relative;
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
}

.classroom-schedule-kit-v3 .room-card__course-status i::before {
  position: absolute;
  inset: 4px;
  background: currentcolor;
  border-radius: var(--radius-full);
  content: '';
}

.classroom-schedule-kit-v3 .room-card__course-status--attended i {
  color: var(--color-icon-success);
}

.classroom-schedule-kit-v3 .room-card__course-status--current-unattended i {
  color: var(--color-icon-danger);
}

.classroom-schedule-kit-v3 .room-card__course-status--future-unattended i {
  color: var(--color-icon-warning);
}

.classroom-schedule-kit-v3 .room-card__alert,
.classroom-schedule-kit-v3 .room-card__idle-status,
.classroom-schedule-kit-v3 .room-card__alert-placeholder {
  flex: 0 0 24px;
  margin-top: auto;
  width: 100%;
  min-height: 24px;
  padding: 2px 10px;
  overflow: hidden;
  font-size: var(--typography-font-size-caption);
  font-style: normal;
  line-height: 20px;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-radius: var(--radius-sm);
}

.classroom-schedule-kit-v3 .room-card__alert {
  color: var(--color-text-danger);
  background: var(--color-background-danger-subtle);
}

.classroom-schedule-kit-v3 .room-card__idle-status {
  color: var(--color-text-subtle);
  background: var(--color-background-neutral);
}

.classroom-schedule-kit-v3 .room-card__alert-placeholder {
  visibility: hidden;
}

.classroom-schedule-kit-v3 .room-card.is-selected {
  border-color: var(--color-border-focused);
  box-shadow: inset 0 0 0 1px var(--color-border-focused);
}

.classroom-schedule-kit-v3 .course-timeline__title { margin-bottom: var(--space-3); }

.classroom-schedule-kit-v3 .timeline-list {
  position: relative;
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.classroom-schedule-kit-v3 .course-card {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
}

.classroom-schedule-kit-v3 .course-time {
  display: grid;
  flex: 0 0 60px;
  align-content: start;
  gap: var(--space-1);
  padding-top: calc(var(--space-2) + 1px);
  color: var(--color-text-placeholder);
  text-align: right;
}

.classroom-schedule-kit-v3 .course-time strong {
  color: var(--color-text);
  font-family: var(--typography-font-family-numeric);
  font-size: var(--typography-font-size-title);
  line-height: var(--typography-line-height-body-large);
}

.classroom-schedule-kit-v3 .timeline-dot {
  position: relative;
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
  margin-top: calc(var(--space-2) + 6px);
  background: var(--color-background-neutral);
  border: 3px solid var(--color-border-subtle);
  border-radius: var(--radius-full);
  box-shadow: 0 0 0 var(--space-1) var(--color-shadow-subtle);
}

.classroom-schedule-kit-v3 .course-card--current .timeline-dot {
  isolation: isolate;
  background: var(--color-background-brand-bold);
  box-shadow: 0 0 0 var(--space-1) var(--color-shadow-subtle);
}

.classroom-schedule-kit-v3 .course-card--current .timeline-dot::after {
  position: absolute;
  inset: -5px;
  z-index: -1;
  background: var(--color-background-brand-bold);
  border-radius: var(--radius-full);
  content: '';
  animation: classroom-schedule-current-breathe calc(var(--motion-duration-slow) * 6) var(--motion-easing-standard) infinite;
}

.classroom-schedule-kit-v3 .course-card--future .timeline-dot { background: var(--color-background-warning-bold); }

.classroom-schedule-kit-v3 .course-card article {
  display: flex;
  flex: 1 1 auto;
  gap: var(--space-3);
  align-items: flex-start;
  min-height: 76px;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  background: var(--color-background-surface);
}

.classroom-schedule-kit-v3 .course-card__details {
  flex: 1 1 auto;
  min-width: 0;
}

.classroom-schedule-kit-v3 .course-card--past article {
  padding: calc(var(--space-2) + 1px) var(--space-3);
  background: var(--color-background-neutral-subtle);
  border: 0;
}

.classroom-schedule-kit-v3 .course-card--past .course-time strong,
.classroom-schedule-kit-v3 .course-card--past h3,
.classroom-schedule-kit-v3 .course-card--past .course-card__heading span,
.classroom-schedule-kit-v3 .course-card--past p {
  color: var(--color-text-placeholder);
}

.classroom-schedule-kit-v3 .course-card h3 {
  margin: 0;
  font-size: var(--typography-font-size-body);
  line-height: 24px;
}

.classroom-schedule-kit-v3 .course-card__heading {
  display: flex;
  gap: var(--space-2);
  align-items: center;
}

.classroom-schedule-kit-v3 .course-card__heading span,
.classroom-schedule-kit-v3 .course-card p { color: var(--color-text-subtle); }

.classroom-schedule-kit-v3 .course-card p {
  margin: var(--space-1) 0 0;
  font-size: var(--typography-font-size-caption);
  line-height: var(--typography-line-height-caption);
}

.classroom-schedule-kit-v3 .course-actions {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  justify-content: flex-end;
}

.classroom-schedule-kit-v3 .course-card__controls {
  display: grid;
  gap: var(--space-1);
  min-width: 120px;
}

.classroom-schedule-kit-v3 .course-card p.course-card__attendance {
  margin: 0;
  text-align: right;
}

.classroom-schedule-kit-v3 .course-card p.course-card__attendance--attended {
  color: var(--color-text-subtle);
}

.classroom-schedule-kit-v3 .course-card p.course-card__attendance--pending-unattended {
  color: var(--color-text-warning);
}

.classroom-schedule-kit-v3 .course-card p.course-card__attendance--overdue-unattended,
.classroom-schedule-kit-v3 .course-card p.course-card__attendance--current-unattended {
  color: var(--color-text-danger);
}

.classroom-schedule-kit-v3 .secondary-button {
  min-width: 56px;
  height: 24px;
  padding: 0 var(--space-3);
  color: var(--color-text);
  font: inherit;
  font-size: var(--typography-font-size-caption);
  cursor: pointer;
  background: var(--color-background-surface);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-sm);
}

.classroom-schedule-kit-v3 .schedule-empty {
  display: grid;
  min-height: 260px;
  place-items: center;
  color: var(--color-text-subtle);
  border: 1px dashed var(--color-border-subtle);
}

.classroom-schedule-kit-v3 .schedule-empty--room {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  align-items: center;
  justify-content: center;
}

.classroom-schedule-kit-v3 .schedule-empty__illustration {
  width: 80px;
  height: 80px;
  object-fit: contain;
}

@keyframes classroom-schedule-current-breathe {
  0%, 100% {
    opacity: 0.38;
    transform: scale(0.72);
  }

  70% {
    opacity: 0;
    transform: scale(1.3);
  }
}

@media (prefers-reduced-motion: reduce) {
  .classroom-schedule-kit-v3 .course-card--current .timeline-dot::after {
    opacity: 0;
    animation: none;
  }
}

.classroom-schedule-kit-v3 .schedule-toast {
  position: fixed;
  right: var(--space-6);
  bottom: var(--space-6);
  z-index: var(--z-index-toast);
  max-width: 380px;
  padding: var(--space-3) var(--space-4);
  color: var(--color-text-inverse);
  background: var(--color-background-inverse);
  border-radius: var(--radius-md);
  box-shadow: var(--elevation-shadow-md);
}
.teacher-schedule-v3-Page__page {
  display: flex;
  flex-direction: column;
  min-width: var(--layout-minimum-width);
  height: 100dvh;
  min-height: 0;
  color: var(--color-text);
  background: var(--color-background-page);
  overflow: hidden;
}

.teacher-schedule-v3-Page__workspace {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.teacher-schedule-v3-Page__workspace > aside {
  flex: 0 0 auto;
}

.teacher-schedule-v3-Page__workspace > section {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.teacher-schedule-v3-Page__visuallyHidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.teacher-schedule-v1-Page__page {
  min-width: var(--layout-minimum-width);
  min-height: 100vh;
  color: var(--color-text);
  background: var(--color-background-page);
}

.teacher-schedule-v1-Page__workspace {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  min-height: calc(100vh - var(--component-product-navigation-height));
}

.teacher-schedule-v1-Page__sideNavigation {
  position: relative;
  display: flex;
  flex-direction: column;
  padding-top: var(--space-5);
  background: var(--color-background-neutral-subtlest);
  border-right: 1px solid var(--color-border-subtle);
}

.teacher-schedule-v1-Page__sideTitle {
  margin: 0 var(--space-5) var(--space-3);
  font-weight: var(--typography-font-weight-bold);
  font-size: var(--typography-font-size-body-large);
}

.teacher-schedule-v1-Page__sideNavigation nav {
  display: grid;
}

.teacher-schedule-v1-Page__sideItem, .teacher-schedule-v1-Page__sideActive {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 0 var(--space-5);
  color: var(--color-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  background: transparent;
  border: 0;
}

.teacher-schedule-v1-Page__sideItem::before, .teacher-schedule-v1-Page__sideActive::before {
  width: 6px;
  height: 6px;
  margin-right: var(--space-3);
  content: '';
  background: currentcolor;
  border-radius: var(--radius-full);
}

.teacher-schedule-v1-Page__sideItem:hover {
  background: var(--color-background-neutral);
}

.teacher-schedule-v1-Page__sideActive {
  color: var(--color-text-brand-bold);
  font-weight: var(--typography-font-weight-semibold);
  background: var(--color-background-surface);
}

.teacher-schedule-v1-Page__collapse {
  min-height: 48px;
  margin-top: auto;
  color: var(--color-text-subtle);
  font: inherit;
  text-align: left;
  cursor: pointer;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--color-border-subtle);
}

.teacher-schedule-v1-Page__content {
  min-width: 0;
  padding: var(--space-4);
}

.teacher-schedule-v1-Page__visuallyHidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.teacher-schedule-v1-Page__breadcrumb {
  margin: 0 0 var(--space-3);
  color: var(--color-text-subtle);
  font-size: var(--typography-font-size-caption);
}

.teacher-schedule-v1-Page__surface {
  min-height: calc(100vh - var(--component-product-navigation-height) - var(--space-8));
  background: var(--color-background-surface);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  box-shadow: 0 2px 8px var(--color-shadow-subtle);
}

.teacher-schedule-v1-Page__tabs {
  display: flex;
  height: 60px;
  padding-inline: var(--space-3);
  border-bottom: 1px solid var(--color-border-subtle);
}

.teacher-schedule-v1-Page__tab, .teacher-schedule-v1-Page__activeTab {
  padding-inline: var(--space-4);
  color: var(--color-text-subtle);
  font: inherit;
  font-weight: var(--typography-font-weight-semibold);
  cursor: pointer;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
}

.teacher-schedule-v1-Page__activeTab {
  color: var(--color-text-brand-bold);
  border-bottom-color: var(--color-border-focused);
}

.teacher-schedule-v1-Page__summary {
  display: flex;
  justify-content: space-between;
  min-height: 72px;
  padding: 0 var(--space-5);
  border-bottom: 1px solid var(--color-border-subtle);
}

.teacher-schedule-v1-Page__summary > div {
  display: flex;
  gap: var(--space-5);
  align-items: center;
}

.teacher-schedule-v1-Page__summary strong {
  font-size: var(--typography-font-size-body-large);
}

.teacher-schedule-v1-Page__summary span, .teacher-schedule-v1-Page__summary button {
  color: var(--color-text-subtle);
  font: inherit;
  background: transparent;
  border: 0;
}

.teacher-schedule-v1-Page__summaryStats {
  gap: var(--space-4) !important;
}

.teacher-schedule-v1-Page__summaryStats b {
  margin-left: var(--space-1);
  color: var(--color-text);
}

.teacher-schedule-v1-Page__summaryStats .teacher-schedule-v1-Page__info {
  color: var(--color-text-brand-bold);
}

.teacher-schedule-v1-Page__summaryStats .teacher-schedule-v1-Page__warning {
  color: var(--color-icon-warning);
}

.teacher-schedule-v1-Page__summaryStats button {
  color: var(--color-text-brand-bold);
  cursor: pointer;
}

.teacher-schedule-v1-Page__scheduleLayout {
  display: grid;
  grid-template-columns: 380px minmax(0, 1fr);
  min-height: 690px;
}

.teacher-schedule-v1-Page__teacherPanel {
  border-right: 1px solid var(--color-border-subtle);
}

.teacher-schedule-v1-Page__panelHeader, .teacher-schedule-v1-Page__timelineHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 72px;
  padding: 0 var(--space-5);
}

.teacher-schedule-v1-Page__panelHeader h2, .teacher-schedule-v1-Page__timelineHeader h1 {
  margin: 0;
  font-size: 20px;
}

.teacher-schedule-v1-Page__panelHeader h2 span, .teacher-schedule-v1-Page__timelineHeader h1 span {
  margin-left: var(--space-2);
  color: var(--color-text-subtle);
  font-size: var(--typography-font-size-body);
  font-weight: var(--typography-font-weight-regular);
}

.teacher-schedule-v1-Page__panelHeader button {
  min-height: 32px;
  color: var(--color-text-subtle);
  font: inherit;
  cursor: pointer;
  background: var(--color-background-neutral-subtlest);
  border: 1px solid var(--color-border-subtle);
}

.teacher-schedule-v1-Page__panelHeader .teacher-schedule-v1-Page__viewActive {
  color: var(--color-text-brand-bold);
  background: var(--color-background-surface);
}

.teacher-schedule-v1-Page__teacherList {
  display: grid;
  gap: var(--space-3);
  padding: 0 var(--space-3) var(--space-5);
}

.teacher-schedule-v1-Page__teacherCard, .teacher-schedule-v1-Page__teacherSelected {
  display: grid;
  gap: var(--space-2);
  min-height: 112px;
  padding: var(--space-3);
  color: var(--color-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  background: var(--color-background-surface);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
}

.teacher-schedule-v1-Page__teacherCard:hover {
  background: var(--color-background-neutral-subtlest);
}

.teacher-schedule-v1-Page__teacherSelected {
  border-color: var(--color-border-focused);
  box-shadow: 0 0 0 1px var(--color-border-focused);
}

.teacher-schedule-v1-Page__teacherCardTop {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.teacher-schedule-v1-Page__teacherCard small {
  color: var(--color-text-subtle);
}

.teacher-schedule-v1-Page__teacherCard > span {
  color: var(--color-text-subtle);
  font-size: var(--typography-font-size-caption);
}

.teacher-schedule-v1-Page__status {
  padding: 2px var(--space-2);
  font-size: var(--typography-font-size-caption);
  border-radius: var(--radius-sm);
}

.teacher-schedule-v1-Page__status.teacher-schedule-v1-Page__free, .teacher-schedule-v1-Page__completed {
  color: var(--color-text-subtle);
  background: var(--color-background-neutral);
}

.teacher-schedule-v1-Page__status.teacher-schedule-v1-Page__inProgress, .teacher-schedule-v1-Page__inProgress {
  color: var(--color-text-brand-bold);
  background: var(--color-background-brand-subtle);
}

.teacher-schedule-v1-Page__status.teacher-schedule-v1-Page__upcoming, .teacher-schedule-v1-Page__upcoming {
  color: var(--color-icon-warning);
  background: var(--color-background-neutral-subtlest);
}

.teacher-schedule-v1-Page__timeline {
  min-width: 0;
}

.teacher-schedule-v1-Page__timelineHeader {
  border-bottom: 1px solid var(--color-border-subtle);
}

.teacher-schedule-v1-Page__legend {
  display: flex;
  gap: var(--space-4);
  color: var(--color-text-subtle);
  font-size: var(--typography-font-size-caption);
}

.teacher-schedule-v1-Page__legend span {
  display: flex;
  gap: var(--space-1);
  align-items: center;
}

.teacher-schedule-v1-Page__legend i {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
}

.teacher-schedule-v1-Page__legend .teacher-schedule-v1-Page__completed {
  background: var(--color-background-neutral);
}

.teacher-schedule-v1-Page__legend .teacher-schedule-v1-Page__inProgress {
  background: var(--color-background-brand-bold);
}

.teacher-schedule-v1-Page__legend .teacher-schedule-v1-Page__upcoming {
  background: var(--color-background-warning-bold);
}

.teacher-schedule-v1-Page__courseList {
  padding: var(--space-4) var(--space-5);
}

.teacher-schedule-v1-Page__courseRow {
  position: relative;
  display: grid;
  grid-template-columns: 90px 24px minmax(0, 1fr);
  min-height: 150px;
}

.teacher-schedule-v1-Page__courseRow:not(:last-child)::before {
  position: absolute;
  top: 36px;
  bottom: -10px;
  left: 101px;
  width: 1px;
  content: '';
  background: var(--color-background-neutral);
}

.teacher-schedule-v1-Page__time {
  display: grid;
  justify-items: end;
  align-content: start;
  gap: var(--space-1);
  padding-top: var(--space-3);
}

.teacher-schedule-v1-Page__time strong {
  font-size: 22px;
}

.teacher-schedule-v1-Page__time span {
  color: var(--color-text-subtle);
  font-size: var(--typography-font-size-caption);
}

.teacher-schedule-v1-Page__timelineDot {
  z-index: 1;
  width: 14px;
  height: 14px;
  margin: var(--space-4) auto 0;
  border: 3px solid var(--color-border-subtle);
  border-radius: var(--radius-full);
  box-shadow: 0 0 0 2px var(--color-border-subtle);
}

.teacher-schedule-v1-Page__timelineDot.teacher-schedule-v1-Page__completed {
  background: var(--color-background-neutral);
}

.teacher-schedule-v1-Page__timelineDot.teacher-schedule-v1-Page__inProgress {
  background: var(--color-background-brand-bold);
}

.teacher-schedule-v1-Page__timelineDot.teacher-schedule-v1-Page__upcoming {
  background: var(--color-background-warning-bold);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-icon-warning) 20%, transparent);
}

.teacher-schedule-v1-Page__courseCard {
  display: flex;
  justify-content: space-between;
  min-height: 116px;
  padding: var(--space-4);
  background: var(--color-background-neutral-subtlest);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
}

.teacher-schedule-v1-Page__courseCard h3 {
  margin: 0 0 var(--space-2);
  font-size: var(--typography-font-size-body-large);
}

.teacher-schedule-v1-Page__courseCard h3 span {
  color: var(--color-text-subtle);
  font-size: var(--typography-font-size-caption);
  font-weight: var(--typography-font-weight-regular);
}

.teacher-schedule-v1-Page__courseCard p {
  margin: var(--space-1) 0;
  color: var(--color-text-subtle);
}

.teacher-schedule-v1-Page__courseCard button {
  align-self: center;
  min-width: 64px;
  min-height: 36px;
  color: var(--color-text);
  font: inherit;
  cursor: pointer;
  background: var(--color-background-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

.teacher-schedule-v1-Page__courseCard button:hover {
  background: var(--color-background-neutral);
}

.teacher-schedule-v1-Page__emptyState {
  display: grid;
  min-height: 300px;
  color: var(--color-text-subtle);
  place-items: center;
}

button:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--color-border-focused) 60%, transparent);
  outline-offset: -3px;
}
.classroom-schedule-kit-v2 {
  min-height: 100%;
  color: var(--color-text);
  padding: 24px clamp(16px, 3vw, 48px);
  background: var(--color-background-page);
}


.classroom-schedule-kit-v2 .schedule-tabs,
.classroom-schedule-kit-v2 .schedule-header,
.classroom-schedule-kit-v2 .schedule-workbench {
  max-width: 1760px;
  margin: 0 auto;
  background: var(--color-background-surface);
}


.classroom-schedule-kit-v2 .schedule-tabs {
  display: flex;
  gap: 36px;
  padding: 0 28px;
  border-bottom: 1px solid var(--color-border-subtle);
  border-radius: 12px 12px 0 0;
}


.classroom-schedule-kit-v2 .schedule-tabs button {
  height: 58px;
  padding: 0;
  border: 0;
  border-bottom: 3px solid transparent;
  color: var(--color-text-subtle);
  background: transparent;
  cursor: default;
  font-size: 17px;
  font-weight: 600;
}


.classroom-schedule-kit-v2 .schedule-tabs button.is-active {
  border-bottom-color: var(--color-border-focused);
  color: var(--color-text-brand);
}


.classroom-schedule-kit-v2 .schedule-header {
  display: flex;
  align-items: center;
  gap: 28px;
  min-height: 82px;
  padding: 18px 28px;
  border-bottom: 1px solid var(--color-border-subtle);
}


.classroom-schedule-kit-v2 .schedule-date,
.classroom-schedule-kit-v2 .schedule-refresh,
.classroom-schedule-kit-v2 .schedule-stats {
  display: flex;
  align-items: center;
  gap: 20px;
}

.classroom-schedule-kit-v2 .schedule-date {
  white-space: nowrap;
}

.classroom-schedule-kit-v2 .schedule-date strong {
  font-size: 18px;
}


.classroom-schedule-kit-v2 .schedule-date span,
.classroom-schedule-kit-v2 .schedule-refresh {
  color: var(--color-text-subtle);
}

.classroom-schedule-kit-v2 .schedule-stats {
  margin-left: auto;
  white-space: nowrap;
  font-size: 16px;
}

.classroom-schedule-kit-v2 .schedule-stats b {
  margin-left: 5px;
  font-size: 20px;
}

.classroom-schedule-kit-v2 .schedule-stats .is-current {
  color: var(--color-text-brand);
}

.classroom-schedule-kit-v2 .schedule-stats .is-future {
  color: var(--color-icon-warning);
}

.classroom-schedule-kit-v2 .schedule-refresh {
  font-size: 14px;
  white-space: nowrap;
}


.classroom-schedule-kit-v2 .plain-button,
.classroom-schedule-kit-v2 .view-switch button,
.classroom-schedule-kit-v2 .room-card {
  border: 0;
  background: transparent;
  cursor: pointer;
}


.classroom-schedule-kit-v2 .plain-button {
  color: var(--color-text);
  font-weight: 600;
}


.classroom-schedule-kit-v2 .schedule-workbench {
  display: grid;
  grid-template-columns: minmax(330px, 36%) minmax(0, 1fr);
  min-height: 720px;
  border-radius: 0 0 12px 12px;
  overflow: hidden;
}


.classroom-schedule-kit-v2 .room-selector,
.classroom-schedule-kit-v2 .course-timeline {
  padding: 26px 28px;
}

.classroom-schedule-kit-v2 .room-selector {
  border-right: 1px solid var(--color-border-subtle);
}

.classroom-schedule-kit-v2 .panel-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}

.classroom-schedule-kit-v2 h2 {
  margin: 0;
  font-size: 21px;
}

.classroom-schedule-kit-v2 h2 small {
  margin-left: 6px;
  color: var(--color-text-subtle);
  font-size: 15px;
  font-weight: 500;
}


.classroom-schedule-kit-v2 .view-switch {
  display: flex;
  padding: 3px;
  border-radius: 9px;
  background: var(--color-background-page);
}


.classroom-schedule-kit-v2 .view-switch button {
  height: 34px;
  border-radius: 7px;
  color: var(--color-text-subtle);
  width: 44px;
  font-size: 13px;
}


.classroom-schedule-kit-v2 .view-switch button[aria-checked="true"] {
  color: var(--color-text-brand);
  background: var(--color-background-surface);
  box-shadow: 0 1px 4px var(--color-shadow-subtle);
}


.classroom-schedule-kit-v2 .room-list {
  display: grid;
  gap: 12px;
  margin-top: 20px;
}

.classroom-schedule-kit-v2 .room-list--grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.classroom-schedule-kit-v2 .room-list--list {
  grid-template-columns: 1fr;
}


.classroom-schedule-kit-v2 .room-card {
  display: grid;
  min-height: 142px;
  padding: 16px;
  border: 1px solid var(--color-border-subtle);
  border-radius: 11px;
  color: var(--color-text);
  text-align: left;
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}


.classroom-schedule-kit-v2 .room-card:hover {
  border-color: var(--color-border-subtle);
  transform: translateY(-1px);
}

.classroom-schedule-kit-v2 .room-card strong {
  overflow: hidden;
  font-size: 17px;
  text-overflow: ellipsis;
  white-space: nowrap;
}


.classroom-schedule-kit-v2 .room-card__title,
.classroom-schedule-kit-v2 .room-card__meta {
  overflow: hidden;
  color: var(--color-text-subtle);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.classroom-schedule-kit-v2 .room-card__title {
  margin-top: 7px;
  font-size: 14px;
}

.classroom-schedule-kit-v2 .room-card__meta {
  font-size: 13px;
}

.classroom-schedule-kit-v2 .room-card em {
  align-self: end;
  padding: 4px 8px;
  border-radius: 5px;
  background: var(--color-background-page);
  color: var(--color-text-subtle);
  font-size: 13px;
  font-style: normal;
  text-align: center;
}

.classroom-schedule-kit-v2 .room-card--future em {
  background: color-mix(in srgb, var(--color-background-warning-bold) 12%, var(--color-background-surface));
  color: var(--color-icon-warning);
}

.classroom-schedule-kit-v2 .room-card--current em {
  background: var(--color-background-brand-subtle);
  color: var(--color-text-brand);
}

.classroom-schedule-kit-v2 .room-card.is-selected {
  border-color: var(--color-border-focused);
  background: var(--color-background-brand-bold);
  color: var(--color-text-inverse);
  box-shadow: 0 8px 20px var(--color-shadow-subtle);
}


.classroom-schedule-kit-v2 .room-card.is-selected .room-card__title,
.classroom-schedule-kit-v2 .room-card.is-selected .room-card__meta {
  color: var(--color-text-inverse);
}

.classroom-schedule-kit-v2 .room-card.is-selected em {
  background: var(--color-background-brand-bold-hovered);
  color: var(--color-text-inverse);
}

.classroom-schedule-kit-v2 .room-list--list .room-card {
  min-height: 64px;
  align-items: center;
  grid-template-columns: 1fr;
}

.classroom-schedule-kit-v2 .room-list--list .room-card__title {
  margin: 0;
}


.classroom-schedule-kit-v2 .course-timeline__title {
  margin-bottom: 24px;
}

.classroom-schedule-kit-v2 .timeline-legend {
  display: flex;
  gap: 18px;
  color: var(--color-text-subtle);
  font-size: 14px;
}

.classroom-schedule-kit-v2 .timeline-legend span:nth-child(1)::first-letter {
  color: var(--color-text-subtle);
}

.classroom-schedule-kit-v2 .timeline-legend span:nth-child(2)::first-letter {
  color: var(--color-text-brand);
}

.classroom-schedule-kit-v2 .timeline-legend span:nth-child(3)::first-letter {
  color: var(--color-icon-warning);
}


.classroom-schedule-kit-v2 .timeline-list {
  position: relative;
  display: grid;
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.classroom-schedule-kit-v2 .course-card {
  display: grid;
  gap: 14px;
  align-items: stretch;
  grid-template-columns: 68px 18px minmax(0, 1fr);
}

.classroom-schedule-kit-v2 .course-time {
  display: grid;
  align-content: start;
  gap: 7px;
  color: var(--color-text-subtle);
  text-align: right;
}

.classroom-schedule-kit-v2 .course-time strong {
  color: var(--color-text);
  font-size: 20px;
}

.classroom-schedule-kit-v2 .timeline-dot {
  position: relative;
  width: 14px;
  height: 14px;
  margin-top: 20px;
  border: 3px solid var(--color-border-subtle);
  border-radius: 999px;
  background: var(--color-background-neutral);
  box-shadow: 0 0 0 4px var(--color-background-page);
}

.classroom-schedule-kit-v2 .course-card--current .timeline-dot {
  background: var(--color-background-brand-bold);
  box-shadow: 0 0 0 4px var(--color-background-brand-subtle);
}

.classroom-schedule-kit-v2 .course-card--future .timeline-dot {
  background: var(--color-background-warning-bold);
  box-shadow: 0 0 0 4px var(--color-background-brand-subtle);
}

.classroom-schedule-kit-v2 .course-card article {
  min-height: 126px;
  padding: 18px 22px;
  border: 1px solid var(--color-border-subtle);
  border-radius: 11px;
  background: var(--color-background-surface);
}

.classroom-schedule-kit-v2 .course-card--current article {
  border-color: var(--color-border-subtle);
  background: linear-gradient(90deg, var(--color-background-brand-subtle), var(--color-background-surface));
}

.classroom-schedule-kit-v2 .course-card h3 {
  margin: 0;
  font-size: 19px;
}

.classroom-schedule-kit-v2 .course-card__heading {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

.classroom-schedule-kit-v2 .course-card__heading span {
  color: var(--color-text-subtle);
}

.classroom-schedule-kit-v2 .course-card p {
  margin: 11px 0 0;
  color: var(--color-text-subtle);
  line-height: 1.4;
}

.classroom-schedule-kit-v2 .course-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  grid-column: 3;
  justify-content: flex-end;
}


.classroom-schedule-kit-v2 .primary-button,
.classroom-schedule-kit-v2 .secondary-button {
  min-width: 70px;
  height: 32px;
  padding: 0 14px;
  border: 1px solid var(--color-border-subtle);
  border-radius: 6px;
  background: var(--color-background-surface);
  color: var(--color-text);
  cursor: pointer;
  font-weight: 600;
}

.classroom-schedule-kit-v2 .primary-button {
  border-color: var(--color-border-focused);
  background: var(--color-background-brand-bold);
  color: var(--color-text-inverse);
}

.classroom-schedule-kit-v2 .schedule-empty {
  display: grid;
  min-height: 260px;
  place-items: center;
  border: 1px dashed var(--color-border-subtle);
  border-radius: 10px;
  color: var(--color-text-subtle);
}

.classroom-schedule-kit-v2 .schedule-toast {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 5;
  max-width: min(380px, calc(100vw - 48px));
  padding: 12px 16px;
  border-radius: 8px;
  background: var(--color-background-inverse);
  color: var(--color-text-inverse);
  box-shadow: 0 12px 30px var(--color-shadow-subtle);
}


@media (width <= 1440px) {
  .classroom-schedule-kit-v2 .schedule-header {
  flex-wrap: wrap;
}

  .classroom-schedule-kit-v2 .schedule-stats {
  order: 3;
  width: 100%;
  margin-left: 0;
}

  .classroom-schedule-kit-v2 .room-list--grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

}


@media (width <= 840px) {
  .classroom-schedule-kit-v2 {
  padding: 0;
}


  .classroom-schedule-kit-v2 .schedule-tabs,
  .classroom-schedule-kit-v2 .schedule-workbench {
  border-radius: 0;
}

  .classroom-schedule-kit-v2 .schedule-workbench {
  grid-template-columns: 1fr;
}

  .classroom-schedule-kit-v2 .room-selector {
  border-right: 0;
  border-bottom: 1px solid var(--color-border-subtle);
}

  .classroom-schedule-kit-v2 .room-list--grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

  .classroom-schedule-kit-v2 .course-card {
  grid-template-columns: 68px 18px minmax(0, 1fr);
}

  .classroom-schedule-kit-v2 .course-actions {
  grid-column: 3;
  justify-content: flex-end;
}

}


@media (width <= 560px) {
  .classroom-schedule-kit-v2 .schedule-tabs {
  gap: 18px;
  padding: 0 16px;
  overflow-x: auto;
}

  .classroom-schedule-kit-v2 .schedule-tabs button {
  font-size: 15px;
  white-space: nowrap;
}


  .classroom-schedule-kit-v2 .schedule-header,
  .classroom-schedule-kit-v2 .room-selector,
  .classroom-schedule-kit-v2 .course-timeline {
  padding: 18px 16px;
}

  .classroom-schedule-kit-v2 .schedule-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

  .classroom-schedule-kit-v2 .schedule-refresh {
  width: 100%;
  justify-content: space-between;
}

  .classroom-schedule-kit-v2 .room-list--grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

  .classroom-schedule-kit-v2 .timeline-legend {
  display: none;
}

  .classroom-schedule-kit-v2 .course-card article {
  padding: 14px;
}

  .classroom-schedule-kit-v2 .course-card__heading {
  align-items: flex-start;
  flex-direction: column;
  gap: 4px;
}

}


.classroom-schedule-kit-v2 button {
  font-family: inherit;
}


.classroom-schedule-kit-v2 button:focus-visible {
  outline: 2px solid var(--color-border-focused);
  outline-offset: 2px;
}
.teacher-schedule-v2-Page__page {
  min-width: var(--layout-minimum-width);
  height: 100dvh;
  min-height: 0;
  color: var(--color-text);
  background: var(--color-background-page);
  overflow: hidden;
  display: grid;
  grid-template-rows: var(--component-product-navigation-height) minmax(0, 1fr);
}

.teacher-schedule-v2-Page__workspace {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  min-height: 0;
  overflow: hidden;
}

.teacher-schedule-v2-Page__workspace > section {
  min-width: 0;
  min-height: 0;
  overflow: auto;
}

.teacher-schedule-v2-Page__visuallyHidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.DemoDataPanel__root {
  position: fixed;
  right: var(--space-6);
  bottom: var(--space-6);
  z-index: var(--z-index-sticky);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  align-items: flex-end;
}

/* Figma 节点 12462-9945：160 宽卡片、8 内边距、浅描边 + 轻投影。 */
.DemoDataPanel__panel {
  display: flex;
  min-width: 160px;
  width: max-content;
  padding: var(--space-2);
  flex-direction: column;
  align-items: flex-start;
  background: var(--color-background-surface);
  border: 1px solid var(--color-border-lighter);
  border-radius: var(--radius-md);
  box-shadow: 0 2px 2.5px var(--color-shadow);
}

/* 行高 32；标签定宽 60 右对齐，紧贴右侧开关。 */
.DemoDataPanel__row {
  display: flex;
  width: 100%;
  height: 32px;
  gap: var(--space-2);
  align-items: center;
}

/* 固定「模拟数据」四字，定宽右对齐，紧贴右侧开关。 */
.DemoDataPanel__rowLabel {
  flex: none;
  width: 60px;
  color: var(--color-text-subtle);
  text-align: right;
  white-space: nowrap;
}

/* Figma 的圆形配置按钮：32 直径、浅描边、16 图标。 */
.DemoDataPanel__trigger {
  display: inline-flex;
  width: 32px;
  height: 32px;
  align-items: center;
  justify-content: center;
  font-size: var(--component-icon-size-base);
  color: var(--color-text-subtle);
  cursor: pointer;
  background: var(--color-background-surface);
  border: 1px solid var(--color-border-lighter);
  border-radius: var(--radius-full);
  box-shadow: 0 2px 3px var(--color-shadow);
}

.DemoDataPanel__trigger:hover {
  color: var(--color-text-brand);
}

.DemoDataPanel__trigger:focus-visible {
  outline: 2px solid var(--color-border-focused);
  outline-offset: 2px;
}
.StackRangeCell__relationLink {
  gap: 0;
}

.StackRangeCell__relationCount {
  color: var(--color-text-brand);
}

.StackRangeCell__relationLink:hover .StackRangeCell__relationCount {
  color: inherit;
}
/* 叠加生效范围块：优惠券编辑页与电子推荐卡奖励设置共用同一套视觉，故抽到模块之外。 */
.StackRangeField__muted {
  color: var(--color-text-subtlest);
}

.StackRangeField__newCouponStackHint {
  display: block;
  padding-top: var(--space-2);
}

.StackRangeField__effectiveRange {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  align-items: stretch;
  padding: var(--space-3) var(--space-4);
  background: var(--color-background-neutral-subtlest);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-sm);
}

.StackRangeField__effectiveHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.StackRangeField__effectiveLabel {
  color: var(--color-text-subtle);
}

.StackRangeField__effectiveActions {
  display: flex;
  gap: var(--space-2);
  white-space: nowrap;
}

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

.StackRangeField__effectiveRemaining {
  color: var(--color-text-subtle);
  font-size: var(--typography-font-size-caption);
}

.StackRangeField__effectiveNote {
  margin: var(--space-1) 0 0;
  color: var(--color-text-subtlest);
  font-size: var(--typography-font-size-caption);
}
.CouponManagementPage__kit {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  background: var(--color-background-page);
  overflow: hidden;
}

.CouponManagementPage__contentCard {
  margin: 0 var(--space-2) var(--space-2) 0;
  overflow: hidden;
}

.CouponManagementPage__panel {
  flex: 1 1 auto;
  min-height: 0;
  padding: var(--space-6) var(--space-8);
  overflow: auto;
}

.CouponManagementPage__filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: end;
  padding: var(--space-4) var(--space-6);
  background: var(--color-background-neutral-subtlest);
}

.CouponManagementPage__filters label {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  color: var(--color-text-subtle);
}

/* 视觉（高度、内边距、边框、配色）由 Input 组件负责。 */

.CouponManagementPage__filterInput {
  width: 230px;
}

.CouponManagementPage__filterSelect {
  width: 220px;
}

/*
 * 焦点表现由各组件自己负责（按钮类用 :focus-visible 键盘环，输入框用边框变色），
 * 页面不再统一叠加描边，否则会让输入框出现「边框 + 外圈」两层提示。
 */

.CouponManagementPage__filterActions,
.CouponManagementPage__toolbar {
  display: flex;
  gap: var(--space-2);
  align-items: center;
}

.CouponManagementPage__toolbar {
  justify-content: flex-start;
  min-height: 64px;
  color: var(--color-text-subtle);
}

.CouponManagementPage__statusText {
  display: inline-flex;
  gap: var(--space-1);
  align-items: center;
  color: var(--color-text);
}

/* 状态点配色与电子推荐卡列表一致：进行中=品牌蓝，未开启=橙，已结束=灰。 */
.CouponManagementPage__statusDotActive,
.CouponManagementPage__statusDotWarning,
.CouponManagementPage__statusDotMuted {
  display: inline-block;
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  border-radius: var(--radius-full);
}

.CouponManagementPage__statusDotActive {
  background: var(--color-background-brand-bold);
}

.CouponManagementPage__statusDotWarning {
  background: var(--color-background-warning-bold);
}

.CouponManagementPage__statusDotMuted {
  background: var(--color-background-neutral-bold);
}

.CouponManagementPage__muted {
  color: var(--color-text-subtlest);
}

.CouponManagementPage__empty {
  display: block;
  padding: var(--space-8);
  color: var(--color-text-subtlest);
  text-align: center;
}

/* 规则页 */

.CouponManagementPage__rulesIntro {
  display: flex;
  gap: var(--space-4);
  align-items: center;
  margin: var(--space-3) 0;
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
  background: var(--color-background-brand-subtle);
  border-radius: var(--radius-sm);
}

.CouponManagementPage__rulesIntroText {
  flex: 1 1 auto;
  margin: 0;
  color: var(--color-text-subtle);
}

.CouponManagementPage__rulesCount {
  margin-top: var(--space-3);
  color: var(--color-text-subtle);
  font-size: var(--typography-font-size-caption);
  line-height: var(--typography-line-height-caption);
}

.CouponManagementPage__ruleActions {
  display: inline-flex;
  gap: var(--space-3);
}

.CouponManagementPage__ruleRange {
  display: block;
  max-width: 436px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  outline-offset: 2px;
}

.CouponManagementPage__ruleRange:focus-visible {
  outline: 2px solid var(--color-border-focused);
}

.CouponManagementPage__rulesToolbar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-3) 0;
}

.CouponManagementPage__relationEmpty {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  align-items: center;
  justify-content: center;
  min-height: 220px;
  color: var(--color-text-subtle);
  text-align: center;
}

.CouponManagementPage__relationEmptyIllustration {
  width: 64px;
  height: 64px;
  object-fit: contain;
}

.CouponManagementPage__relationEmpty strong {
  color: var(--color-text);
  font-size: var(--typography-font-size-body);
  line-height: var(--typography-line-height-body);
}

.CouponManagementPage__pagination {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  justify-content: flex-end;
  padding: var(--space-4) 0;
  color: var(--color-text-subtle);
}

/* 编辑页 */
.CouponManagementPage__editor {
  display: flex;
  height: 100%;
  min-height: 0;
  flex-direction: column;
  gap: var(--space-5);
}

.CouponManagementPage__editorLayout {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  gap: var(--space-8);
  justify-content: center;
}

.CouponManagementPage__previewColumn {
  display: flex;
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
  container-type: size;
  flex-direction: column;
  align-items: center;
}

.CouponManagementPage__previewTitle {
  margin: var(--space-1) 0 var(--space-3);
  font-size: var(--typography-font-size-body-large);
  line-height: var(--typography-line-height-body-large);
}

/* 整机按预览列的可用宽高等比缩放，内容保持 375 × 660 的排版。 */
.CouponManagementPage__phone {
  flex: 0 0 auto;
  width: 375px;
  height: 660px;
  zoom: min(1, calc(100cqw / 375px), calc((100cqh - 48px) / 660px));
  overflow: hidden;
  background: var(--color-background-brand-subtle);
  border: 16px solid var(--color-border-bolder);
  border-radius: var(--radius-2xl);
}

/* 顶部区域 88px = 状态栏 44 + 导航栏 44（iPhone X 类刘海机型的标准值），与创建电子推荐卡一致。 */
.CouponManagementPage__phoneHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 88px;
  padding: 0 var(--space-5);
  font-size: var(--typography-font-size-body-large);
  background: var(--color-background-neutral-subtlest);
}

.CouponManagementPage__couponCard {
  margin: 0 var(--space-2) var(--space-2);
  overflow: hidden;
  background: var(--color-background-surface);
  border-radius: var(--radius-md);
}

.CouponManagementPage__couponTop {
  display: flex;
  align-items: center;
  height: 100px;
  border-bottom: 1px dashed var(--color-border-subtle);
}

.CouponManagementPage__gift {
  display: grid;
  flex: 0 0 52px;
  width: 52px;
  height: 52px;
  margin-left: var(--space-5);
  color: var(--color-text-inverse);
  font-size: var(--typography-font-size-headline);
  background: #7188ff;
  border-radius: var(--radius-md);
  place-items: center;
}

.CouponManagementPage__couponSummary {
  flex: 1 1 auto;
  padding: 0 var(--space-3);
}

.CouponManagementPage__couponName {
  font-size: var(--typography-font-size-body-large);
}

.CouponManagementPage__couponSummary p {
  margin: var(--space-3) 0 0;
  color: var(--color-text-subtlest);
}

.CouponManagementPage__couponAmount {
  display: flex;
  flex: 0 0 105px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  color: var(--color-text-inverse);
  font-size: var(--typography-font-size-body-large);
  background: linear-gradient(135deg, #c9c7ff, #758cff);
}

.CouponManagementPage__couponAmount b {
  font-size: var(--typography-font-size-title);
}

.CouponManagementPage__couponDetails {
  margin: 0;
  padding: var(--space-4);
  color: var(--color-text-subtle);
  line-height: 2.2;
}

.CouponManagementPage__couponDetails div {
  display: flex;
}

.CouponManagementPage__couponDetails dt {
  flex: 0 0 auto;
}

.CouponManagementPage__couponDetails dd {
  margin: 0;
}

.CouponManagementPage__formPanel {
  display: flex;
  min-height: 0;
  flex: 0 0 650px;
  width: 650px;
  flex-direction: column;
  max-width: 100%;
  border: 1px solid var(--color-border-subtle);
}

.CouponManagementPage__formContent {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: var(--space-6) var(--space-5);
}

.CouponManagementPage__formPlaceholder {
  color: var(--color-text-subtlest);
}

.CouponManagementPage__formRow {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  margin-bottom: var(--space-5);
}

.CouponManagementPage__formLabel {
  flex: 0 0 116px;
  padding-top: var(--space-2);
  color: var(--color-text-subtle);
  text-align: right;
}

.CouponManagementPage__required::before {
  margin-right: var(--space-1);
  color: var(--color-text-danger);
  content: '*';
}

.CouponManagementPage__rowValue {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
  min-height: 32px;
}

/* 仅作行内排版容器；宽度由 InputNumber 自身决定，避免压缩步进按钮导致与文字重叠。 */
.CouponManagementPage__amountInput {
  display: inline-flex;
  margin: 0 var(--space-1);
  vertical-align: middle;
}

/* 仅控制宽度；边框、内边距与交互状态由本地选择组件负责。 */
.CouponManagementPage__wideControl {
  width: 420px;
  max-width: 100%;
}

.CouponManagementPage__stackSetting .CouponManagementPage__rowValue {
  display: block;
}

.CouponManagementPage__newCouponStackHint {
  display: block;
  padding-top: var(--space-2);
}

.CouponManagementPage__effectiveRange {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  align-items: stretch;
  padding: var(--space-3) var(--space-4);
  background: var(--color-background-neutral-subtlest);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-sm);
}

.CouponManagementPage__effectiveHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.CouponManagementPage__effectiveLabel {
  color: var(--color-text-subtle);
}

.CouponManagementPage__effectiveActions {
  display: flex;
  gap: var(--space-2);
  white-space: nowrap;
}

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

.CouponManagementPage__effectiveRemaining {
  color: var(--color-text-subtle);
  font-size: var(--typography-font-size-caption);
}

.CouponManagementPage__effectiveNote {
  margin: var(--space-1) 0 0;
  color: var(--color-text-subtlest);
  font-size: var(--typography-font-size-caption);
}

/* 操作栏独立占位，抵消外层内边距，不覆盖预览与表单。 */
.CouponManagementPage__editFooter {
  display: flex;
  flex: 0 0 56px;
  gap: var(--space-3);
  align-items: center;
  box-sizing: border-box;
  height: 56px;
  justify-content: center;
  margin: 0 calc(var(--space-8) * -1) calc(var(--space-6) * -1);
  padding: var(--space-3) var(--space-8);
  background: var(--color-background-surface);
  border-top: 1px solid var(--color-border-subtle);
}

/* 规则编辑抽屉 */
.CouponManagementPage__ruleEditor {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.CouponManagementPage__ruleRadios {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  align-items: center;
  min-height: 32px;
}

.CouponManagementPage__ruleRow {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.CouponManagementPage__ruleLabel {
  color: var(--color-text-subtle);
  line-height: var(--typography-line-height-body);
  white-space: nowrap;
}

.CouponManagementPage__mainSelect {
  width: 100%;
}

.CouponManagementPage__ruleInput {
  width: 100%;
}

.CouponManagementPage__ruleValue {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}

.CouponManagementPage__ruleValue > button {
  align-self: flex-start;
}

/* 视觉（高度、内边距、边框、配色）由 Input 组件负责，页面不再覆盖组件内部的 input。 */

.CouponManagementPage__fieldHelp {
  margin: 0;
  color: var(--color-text-subtlest);
  font-size: var(--typography-font-size-caption);
}

.CouponManagementPage__selectedTags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  min-height: 30px;
}

.CouponManagementPage__singleRuleCards {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.CouponManagementPage__ruleScopeCard {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-5);
  background: var(--color-background-surface);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
}

.CouponManagementPage__ruleScopeCardHeader {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  justify-content: space-between;
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border-subtle);
}

.CouponManagementPage__ruleScopeCardHeader h2 {
  margin: 0 0 var(--space-1);
  color: var(--color-text);
  font-size: var(--typography-font-size-body-large);
  font-weight: var(--typography-font-weight-semibold);
  line-height: var(--typography-line-height-body-large);
}

.CouponManagementPage__ruleScopeCardHeader p {
  margin: 0;
  color: var(--color-text-subtle);
  font-size: var(--typography-font-size-body);
  line-height: var(--typography-line-height-body);
}

.CouponManagementPage__ruleScopeSelect {
  flex: 0 0 auto;
  margin-top: var(--space-1);
  white-space: nowrap;
}

.CouponManagementPage__ruleScopeSearch {
  width: 100%;
}

.CouponManagementPage__ruleScopeTags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  min-height: 24px;
}

/* 选择器弹窗 */
.CouponManagementPage__picker {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.CouponManagementPage__pickerTable {
  overflow-x: auto;
}

/* 单选主券通过浅品牌底色反馈，不复用通用表格的中性色当前行。 */
.CouponManagementPage__singlePickerTable [data-current][data-current] td,
.CouponManagementPage__singlePickerTable [data-current][data-current]:hover td {
  background: var(--color-background-brand-subtle);
}

.CouponManagementPage__pickerFilters {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--space-2);
  align-items: center;
  padding: var(--space-3);
  background: var(--color-background-neutral-subtlest);
}

.CouponManagementPage__pickerSearch {
  flex: 0 1 180px;
  width: 180px;
}

.CouponManagementPage__pickerSelect {
  width: 180px;
}

.CouponManagementPage__pickerFooter {
  display: flex;
  gap: var(--space-4);
  align-items: center;
  width: 100%;
  min-width: 0;
}

.CouponManagementPage__pickerSelected {
  display: flex;
  flex: 1 1 auto;
  gap: var(--space-2);
  align-items: center;
  min-width: 0;
}

.CouponManagementPage__pickerSelected strong {
  flex: 0 0 auto;
  white-space: nowrap;
}

.CouponManagementPage__pickerChips {
  display: flex;
  flex: 1 1 auto;
  gap: var(--space-2);
  align-items: center;
  min-width: 0;
  overflow-x: auto;
  white-space: nowrap;
}

.CouponManagementPage__pickerChips .CouponManagementPage__tag {
  flex: 0 0 auto;
}

.CouponManagementPage__pickerFooterActions {
  display: flex;
  flex: 0 0 auto;
  gap: var(--space-3);
  align-items: center;
}

/* 示例弹窗 */
.CouponManagementPage__example {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.CouponManagementPage__exampleIntro {
  margin: 0;
  padding: var(--space-3) var(--space-4);
  color: var(--color-text-brand-accessible);
  background: var(--color-background-brand-subtle);
  border-radius: var(--radius-md);
}

.CouponManagementPage__exampleMethods {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.CouponManagementPage__exampleMethod {
  flex: 1 1 220px;
  padding: var(--space-4);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
}

.CouponManagementPage__exampleMethod b {
  display: block;
  margin-bottom: var(--space-2);
}

.CouponManagementPage__exampleMethod p {
  min-height: 57px;
  margin: 0 0 var(--space-2);
  color: var(--color-text-subtlest);
  font-size: var(--typography-font-size-caption);
  line-height: 1.75;
}

.CouponManagementPage__exampleChips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.CouponManagementPage__exampleRuleNotice {
  padding: var(--space-3) var(--space-4);
  color: var(--color-text-warning);
  background: var(--color-background-neutral-subtlest);
  border-radius: var(--radius-sm);
}

.CouponManagementPage__relationDiagram {
  text-align: center;
}

.CouponManagementPage__relationDiagram img {
  display: block;
  width: min(100%, 560px);
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

.CouponManagementPage__confirmText {
  margin: 0;
  color: var(--color-text-subtle);
  line-height: 1.5;
}

.CouponManagementPage__compactConfirm > div {
  min-height: 100px;
  padding: 0;
}

.CouponManagementPage__compactConfirm .CouponManagementPage__confirmText {
  padding: var(--space-6);
}

.CouponManagementPage__compactConfirm > footer {
  min-height: 48px;
  padding: var(--space-2) var(--space-6);
}

.CouponManagementPage__couponActions {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  white-space: nowrap;
}

.CouponManagementPage__moreAction {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  color: var(--color-text-brand);
  font-size: var(--typography-font-size-body);
  font-weight: var(--typography-font-weight-medium);
  letter-spacing: 1px;
  line-height: 1;
  cursor: pointer;
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
}

.CouponManagementPage__moreAction:hover {
  background: var(--color-background-brand-subtle);
}

.CouponManagementPage__moreAction:focus-visible {
  outline: 2px solid var(--color-border-brand);
  outline-offset: 2px;
}
.coupon-management-v1-Page__page {
  display: flex;
  flex-direction: column;
  min-width: var(--layout-minimum-width);
  height: 100dvh;
  min-height: 0;
  color: var(--color-text);
  background: var(--color-background-page);
  overflow: hidden;
}

.coupon-management-v1-Page__workspace {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.coupon-management-v1-Page__workspace > aside { flex: 0 0 auto; }

.coupon-management-v1-Page__workspace > section {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.coupon-management-v1-Page__visuallyHidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
/*
 * 创建电子推荐卡（活动设置）：结构与优惠券编辑器一致 ——
 * 左侧手机模拟效果 + 右侧表单面板 + 吸底操作栏。
 * 样式独立成模块，避免与列表页共享类名（CSS Modules 前缀按目录推导）。
 */
.RecommendationCardCreator__editor {
  display: flex;
  height: 100%;
  min-height: 0;
  flex-direction: column;
  gap: var(--space-5);
}

.RecommendationCardCreator__editorLayout {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  gap: var(--space-8);
  justify-content: center;
}

.RecommendationCardCreator__previewColumn {
  display: flex;
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
  container-type: size;
  flex-direction: column;
  align-items: center;
}

/* 标题行与手机壳同宽，标题贴左、预览贴右。 */
.RecommendationCardCreator__previewHead {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  justify-content: space-between;
  flex: 0 0 auto;
  width: min(375px, 100cqw, calc((100cqh - 48px) * 375 / 660));
  margin: var(--space-1) 0 var(--space-3);
}

.RecommendationCardCreator__previewTitle {
  margin: 0;
  font-size: var(--typography-font-size-body-large);
  line-height: var(--typography-line-height-body-large);
}

/* 整机按预览列的可用宽高等比缩放，内容保持 375 × 660 的排版。 */
.RecommendationCardCreator__phone {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  width: 375px;
  height: 660px;
  zoom: min(1, calc(100cqw / 375px), calc((100cqh - 48px) / 660px));
  overflow: hidden;
  background: var(--color-background-brand-subtle);
  border: 16px solid var(--color-border-bolder);
  border-radius: var(--radius-2xl);
}

/* 顶部区域 88px = 状态栏 44 + 导航栏 44（iPhone X 类刘海机型的标准值），与优惠券编辑器一致。 */
.RecommendationCardCreator__phoneHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 88px;
  padding: 0 var(--space-5);
  color: var(--color-text);
  font-size: var(--typography-font-size-body-large);
  background: var(--color-background-neutral-subtlest);
}

.RecommendationCardCreator__phoneBody {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  padding: var(--space-4) var(--space-4) 0;
}

/* 活动图片占位区：截图里整块浅蓝，文字居中偏上。 */
.RecommendationCardCreator__phoneImageArea {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  color: var(--color-text-subtle);
}

.RecommendationCardCreator__phoneImageHint {
  color: var(--color-text-subtlest);
  font-size: var(--typography-font-size-caption);
}

.RecommendationCardCreator__phoneUploadedImage {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
  border-radius: var(--radius-md);
}

.RecommendationCardCreator__uploadPreviewImage {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 65vh;
  margin: 0 auto;
  object-fit: contain;
  border-radius: var(--radius-sm);
}

.RecommendationCardCreator__phoneFooter {
  padding: var(--space-4);
}

/* 底部报名按键：颜色与文案跟随表单。 */
.RecommendationCardCreator__phoneCta {
  display: block;
  padding: var(--space-3) 0;
  color: var(--color-text-inverse);
  font-size: var(--typography-font-size-body-large);
  text-align: center;
  border-radius: var(--radius-md);
}

.RecommendationCardCreator__formPanel {
  display: flex;
  min-height: 0;
  flex: 0 0 720px;
  width: 720px;
  flex-direction: column;
  max-width: 100%;
  background: var(--color-background-surface);
  border: 1px solid var(--color-border-subtle);
}

.RecommendationCardCreator__formContent {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: var(--space-6) var(--space-6);
}

.RecommendationCardCreator__tabLabel {
  display: inline-flex;
  gap: var(--space-1);
  align-items: center;
}

.RecommendationCardCreator__fieldInput {
  width: 285px;
}

.RecommendationCardCreator__dateInput {
  width: 150px;
}

.RecommendationCardCreator__rangeDash {
  color: var(--color-text-subtle);
}

/* 长句式条件保留普通文字，仅中间输入框带边框。 */
.RecommendationCardCreator__inlineSentence {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  min-width: 0;
}

.RecommendationCardCreator__inlineInput {
  width: 80px;
}

/* 按键颜色：原生取色器收进色块里。 */
.RecommendationCardCreator__colorField {
  display: inline-flex;
  width: 66px;
  height: 28px;
  overflow: hidden;
  padding: 2px;
  cursor: pointer;
  background: var(--color-background-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

.RecommendationCardCreator__colorInput {
  width: 100%;
  height: 100%;
  padding: 0;
  cursor: pointer;
  border: 0;
  border-radius: 2px;
}

/* 意向报名校区：独立分隔块。 */
.RecommendationCardCreator__campusBlock {
  margin: var(--space-6) 0;
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border-light);
}

.RecommendationCardCreator__campusLine {
  display: flex;
  gap: var(--space-4);
  align-items: center;
}

/* 校区块的标签自带星号与常规文字色，不复用表单行标签（那边是右对齐的次级色）。 */
.RecommendationCardCreator__campusLabel {
  display: inline-flex;
  flex: 0 1 auto;
  gap: var(--space-1);
  align-items: center;
  padding-top: 0;
  color: var(--color-text);
}

.RecommendationCardCreator__campusLabel::before {
  margin-right: var(--space-1);
  color: var(--color-text-danger);
  content: '*';
}

.RecommendationCardCreator__campusNote {
  max-width: 560px;
  margin: var(--space-3) 0 0;
  color: var(--color-text-subtle);
}

/* 操作栏独立占位，与优惠券编辑页一致，按钮组整体居中。 */
.RecommendationCardCreator__editFooter {
  display: flex;
  flex: 0 0 56px;
  gap: var(--space-3);
  align-items: center;
  box-sizing: border-box;
  height: 56px;
  justify-content: center;
  margin: 0 calc(var(--space-8) * -1) calc(var(--space-6) * -1);
  padding: var(--space-3) var(--space-8);
  background: var(--color-background-surface);
  border-top: 1px solid var(--color-border-subtle);
}
/*
 * 页面只保留布局属性：输入框、选择器、表格、分页的视觉由组件负责。
 * 宽度类挂在组件最外层（Select 的包装层 / Input 的边框容器），页面不再覆盖组件内部结构。
 */

.RecommendationCardListView__cardActions {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  white-space: nowrap;
}

.RecommendationCardListView__filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: end;
  padding: var(--space-4) var(--space-6);
  background: var(--color-background-neutral-subtlest);
}

.RecommendationCardListView__filters label {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  color: var(--color-text-subtle);
}

.RecommendationCardListView__filterInput {
  width: 230px;
}

.RecommendationCardListView__filterSelect {
  width: 220px;
}

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

.RecommendationCardListView__toolbar {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  min-height: 64px;
  gap: var(--space-2);
  color: var(--color-text-subtle);
}

/* 状态列的小圆点与优惠券列表同一形态：8px 实心圆；进行中蓝、未开始橙、已结束／已停用灰。 */
.RecommendationCardListView__statusText {
  display: inline-flex;
  gap: var(--space-1);
  align-items: center;
  color: var(--color-text);
}

.RecommendationCardListView__statusTextMuted {
  color: var(--color-text-subtlest);
}

.RecommendationCardListView__statusDotActive,
.RecommendationCardListView__statusDotPending,
.RecommendationCardListView__statusDotMuted {
  display: inline-block;
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  border-radius: var(--radius-full);
}

.RecommendationCardListView__statusDotActive {
  background: var(--color-background-brand-bold);
}

.RecommendationCardListView__statusDotPending {
  background: var(--color-background-warning-bold);
}

.RecommendationCardListView__statusDotMuted {
  background: var(--color-background-neutral-bold);
}
/*
 * 页面外壳布局（与优惠券管理 v1 的壳一致）。
 *
 * 类名前缀由 `scripts/css-sourcemap.ts` 的 `cssModulePrefix` 推导：`Page.module.css` 的前缀会带上
 * 页面路径（如 `teacher-schedule-v1-Page`），因此本文件用页面名命名只是沿用创建时的写法，
 * 改回 `Page.module.css` 也不会与其它页面撞名。
 */

.RecommendationCardManagementPage__page {
  display: flex;
  flex-direction: column;
  min-width: var(--layout-minimum-width);
  height: 100dvh;
  min-height: 0;
  color: var(--color-text);
  background: var(--color-background-page);
  overflow: hidden;
}

.RecommendationCardManagementPage__workspace {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.RecommendationCardManagementPage__workspace > aside { flex: 0 0 auto; }

.RecommendationCardManagementPage__workspace > section {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.RecommendationCardManagementPage__kit {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  background: var(--color-background-page);
  overflow: hidden;
}

.RecommendationCardManagementPage__contentCard {
  margin: 0 var(--space-2) var(--space-2) 0;
  overflow: hidden;
}

.RecommendationCardManagementPage__panel {
  flex: 1 1 auto;
  min-height: 0;
  padding: var(--space-6) var(--space-8);
  overflow: auto;
}

.RecommendationCardManagementPage__visuallyHidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
:root {
  --palette-black-alpha-10: #0000001A;
  --palette-black-alpha-100: #000000;
  --palette-black-alpha-12: #0000001F;
  --palette-black-alpha-16: #00000029;
  --palette-black-alpha-2: #00000005;
  --palette-black-alpha-20: #00000033;
  --palette-black-alpha-25: #00000040;
  --palette-black-alpha-30: #0000004D;
  --palette-black-alpha-36: #0000005C;
  --palette-black-alpha-4: #0000000A;
  --palette-black-alpha-40: #00000066;
  --palette-black-alpha-45: #00000073;
  --palette-black-alpha-50: #00000080;
  --palette-black-alpha-55: #0000008C;
  --palette-black-alpha-6: #0000000F;
  --palette-black-alpha-60: #00000099;
  --palette-black-alpha-65: #000000A6;
  --palette-black-alpha-72: #000000B8;
  --palette-black-alpha-8: #00000014;
  --palette-black-alpha-80: #000000CC;
  --palette-black-alpha-90: #000000E5;
  --palette-blue-100: #ECF5FF;
  --palette-blue-200: #D9ECFF;
  --palette-blue-300: #C6E2FF;
  --palette-blue-400: #9FCEFF;
  --palette-blue-500: #79BBFF;
  --palette-blue-600: #2878E8;
  --palette-blue-700: #337ECC;
  --palette-blue-800: #2056A2;
  --palette-cyan-100: #E6F8F8;
  --palette-cyan-200: #C7F0F0;
  --palette-cyan-300: #A7E7E7;
  --palette-cyan-400: #72D6D6;
  --palette-cyan-500: #46C2C2;
  --palette-cyan-600: #1D9F9F;
  --palette-cyan-700: #147A7A;
  --palette-cyan-800: #0D5D5D;
  --palette-dark-blue-100: #66B1FF;
  --palette-dark-blue-200: #409EFF;
  --palette-dark-blue-300: #3375B9;
  --palette-dark-blue-400: #2056A2;
  --palette-dark-blue-500: #2A598A;
  --palette-dark-blue-600: #213D5B;
  --palette-dark-blue-700: #1D3043;
  --palette-dark-blue-800: #18222C;
  --palette-dark-cyan-100: #A6E3E3;
  --palette-dark-cyan-200: #79D1D1;
  --palette-dark-cyan-300: #5AA6A6;
  --palette-dark-cyan-400: #437D7D;
  --palette-dark-cyan-500: #2E5656;
  --palette-dark-cyan-600: #224040;
  --palette-dark-cyan-700: #192F2F;
  --palette-dark-cyan-800: #122222;
  --palette-dark-green-100: #85CE61;
  --palette-dark-green-200: #67C23A;
  --palette-dark-green-300: #4E8E2F;
  --palette-dark-green-400: #3E6B27;
  --palette-dark-green-500: #2D481F;
  --palette-dark-green-600: #25371C;
  --palette-dark-green-700: #1C2518;
  --palette-dark-neutral-100: #FFFFFF;
  --palette-dark-neutral-150: #E5EAF3;
  --palette-dark-neutral-200: #CFD3DC;
  --palette-dark-neutral-250: #A3A6AD;
  --palette-dark-neutral-300: #909399;
  --palette-dark-neutral-350: #8D9095;
  --palette-dark-neutral-400: #6C6E72;
  --palette-dark-neutral-450: #636466;
  --palette-dark-neutral-500: #4C4D4F;
  --palette-dark-neutral-550: #363637;
  --palette-dark-neutral-600: #303030;
  --palette-dark-neutral-650: #262727;
  --palette-dark-neutral-700: #1D1E1F;
  --palette-dark-neutral-750: #1D1D1D;
  --palette-dark-neutral-800: #141414;
  --palette-dark-neutral-900: #0A0A0A;
  --palette-dark-orange-100: #EBB563;
  --palette-dark-orange-200: #E6A23C;
  --palette-dark-orange-300: #A77730;
  --palette-dark-orange-400: #7D5B28;
  --palette-dark-orange-500: #533F20;
  --palette-dark-orange-600: #3E301C;
  --palette-dark-orange-700: #292218;
  --palette-dark-red-100: #F78989;
  --palette-dark-red-200: #F56C6C;
  --palette-dark-red-300: #B25252;
  --palette-dark-red-400: #854040;
  --palette-dark-red-500: #582E2E;
  --palette-dark-red-600: #412626;
  --palette-dark-red-700: #2B1D1D;
  --palette-dark-slate-100: #A6A9AD;
  --palette-dark-slate-200: #909399;
  --palette-dark-slate-300: #6B6D71;
  --palette-dark-slate-400: #525457;
  --palette-dark-slate-500: #393A3C;
  --palette-dark-slate-600: #2D2D2F;
  --palette-dark-slate-700: #202121;
  --palette-dark-violet-100: #C8BAFF;
  --palette-dark-violet-200: #AA96FF;
  --palette-dark-violet-300: #8574CC;
  --palette-dark-violet-400: #645899;
  --palette-dark-violet-500: #443D66;
  --palette-dark-violet-600: #332E4D;
  --palette-dark-violet-700: #272238;
  --palette-dark-violet-800: #1D1929;
  --palette-green-100: #E5F7EA;
  --palette-green-200: #CCF0D4;
  --palette-green-300: #B2E8BF;
  --palette-green-400: #80D995;
  --palette-green-500: #4CCA6A;
  --palette-green-600: #00B42A;
  --palette-green-700: #427C25;
  --palette-neutral-100: #FFFFFF;
  --palette-neutral-150: #FAFAFA;
  --palette-neutral-200: #F5F7FA;
  --palette-neutral-250: #F2F3F5;
  --palette-neutral-275: #F2F5FC;
  --palette-neutral-300: #F0F2F5;
  --palette-neutral-350: #E6E8EB;
  --palette-neutral-400: #EBEEF5;
  --palette-neutral-450: #E4E7ED;
  --palette-neutral-500: #DCDFE6;
  --palette-neutral-550: #CDD0D6;
  --palette-neutral-600: #C0C4CC;
  --palette-neutral-650: #A8ABB2;
  --palette-neutral-700: #909399;
  --palette-neutral-800: #606266;
  --palette-neutral-900: #303133;
  --palette-orange-100: #FFF2E5;
  --palette-orange-200: #FFE5CC;
  --palette-orange-300: #FFD8B2;
  --palette-orange-400: #FFBE80;
  --palette-orange-500: #FFA44C;
  --palette-orange-600: #FF7D00;
  --palette-orange-700: #CC6400;
  --palette-orchid-100: #E78FFF;
  --palette-orchid-600: #8F48FA;
  --palette-red-100: #FEECEC;
  --palette-red-200: #FDD9D9;
  --palette-red-300: #FCC5C5;
  --palette-red-400: #FA9F9F;
  --palette-red-500: #F87979;
  --palette-red-600: #F53F3F;
  --palette-red-700: #C43232;
  --palette-slate-100: #F4F4F5;
  --palette-slate-200: #E9E9EB;
  --palette-slate-300: #DEDFE0;
  --palette-slate-400: #C7C9CC;
  --palette-slate-500: #B1B3B8;
  --palette-slate-600: #909399;
  --palette-slate-700: #73767A;
  --palette-violet-100: #F3EFFF;
  --palette-violet-200: #E7DDFF;
  --palette-violet-300: #D7C7FF;
  --palette-violet-400: #B99BFF;
  --palette-violet-500: #9B7BFF;
  --palette-violet-600: #7A5AF8;
  --palette-violet-700: #5B42CC;
  --palette-violet-800: #44329A;
  --palette-white-alpha-10: #FFFFFF1A;
  --palette-white-alpha-100: #FFFFFF;
  --palette-white-alpha-12: #FFFFFF1F;
  --palette-white-alpha-16: #FFFFFF29;
  --palette-white-alpha-2: #FFFFFF05;
  --palette-white-alpha-20: #FFFFFF33;
  --palette-white-alpha-25: #FFFFFF40;
  --palette-white-alpha-30: #FFFFFF4D;
  --palette-white-alpha-36: #FFFFFF5C;
  --palette-white-alpha-4: #FFFFFF0A;
  --palette-white-alpha-40: #FFFFFF66;
  --palette-white-alpha-45: #FFFFFF73;
  --palette-white-alpha-50: #FFFFFF80;
  --palette-white-alpha-55: #FFFFFF8C;
  --palette-white-alpha-6: #FFFFFF0F;
  --palette-white-alpha-60: #FFFFFF99;
  --palette-white-alpha-65: #FFFFFFA6;
  --palette-white-alpha-72: #FFFFFFB8;
  --palette-white-alpha-8: #FFFFFF14;
  --palette-white-alpha-80: #FFFFFFCC;
  --palette-white-alpha-90: #FFFFFFE5;
}
:root {
  --role-aira-100: var(--palette-orchid-100);
  --role-aira-600: var(--palette-orchid-600);
  --role-brand-100: var(--palette-blue-100);
  --role-brand-200: var(--palette-blue-200);
  --role-brand-300: var(--palette-blue-300);
  --role-brand-400: var(--palette-blue-400);
  --role-brand-500: var(--palette-blue-500);
  --role-brand-600: var(--palette-blue-600);
  --role-brand-700: var(--palette-blue-700);
  --role-brand-800: var(--palette-blue-800);
  --role-category-blue-100: var(--palette-blue-100);
  --role-category-blue-200: var(--palette-blue-200);
  --role-category-blue-300: var(--palette-blue-300);
  --role-category-blue-400: var(--palette-blue-400);
  --role-category-blue-500: var(--palette-blue-500);
  --role-category-blue-600: var(--palette-blue-600);
  --role-category-blue-700: var(--palette-blue-700);
  --role-category-blue-800: var(--palette-blue-800);
  --role-category-cyan-100: var(--palette-cyan-100);
  --role-category-cyan-200: var(--palette-cyan-200);
  --role-category-cyan-300: var(--palette-cyan-300);
  --role-category-cyan-400: var(--palette-cyan-400);
  --role-category-cyan-500: var(--palette-cyan-500);
  --role-category-cyan-600: var(--palette-cyan-600);
  --role-category-cyan-700: var(--palette-cyan-700);
  --role-category-cyan-800: var(--palette-cyan-800);
  --role-category-violet-100: var(--palette-violet-100);
  --role-category-violet-200: var(--palette-violet-200);
  --role-category-violet-300: var(--palette-violet-300);
  --role-category-violet-400: var(--palette-violet-400);
  --role-category-violet-500: var(--palette-violet-500);
  --role-category-violet-600: var(--palette-violet-600);
  --role-category-violet-700: var(--palette-violet-700);
  --role-category-violet-800: var(--palette-violet-800);
  --role-danger-100: var(--palette-red-100);
  --role-danger-200: var(--palette-red-200);
  --role-danger-300: var(--palette-red-300);
  --role-danger-400: var(--palette-red-400);
  --role-danger-500: var(--palette-red-500);
  --role-danger-600: var(--palette-red-600);
  --role-danger-700: var(--palette-red-700);
  --role-information-100: var(--palette-slate-100);
  --role-information-200: var(--palette-slate-200);
  --role-information-300: var(--palette-slate-300);
  --role-information-400: var(--palette-slate-400);
  --role-information-500: var(--palette-slate-500);
  --role-information-600: var(--palette-slate-600);
  --role-information-700: var(--palette-slate-700);
  --role-neutral-100: var(--palette-neutral-100);
  --role-neutral-150: var(--palette-neutral-150);
  --role-neutral-200: var(--palette-neutral-200);
  --role-neutral-250: var(--palette-neutral-250);
  --role-neutral-275: var(--palette-neutral-275);
  --role-neutral-300: var(--palette-neutral-300);
  --role-neutral-350: var(--palette-neutral-350);
  --role-neutral-400: var(--palette-neutral-400);
  --role-neutral-450: var(--palette-neutral-450);
  --role-neutral-500: var(--palette-neutral-500);
  --role-neutral-550: var(--palette-neutral-550);
  --role-neutral-600: var(--palette-neutral-600);
  --role-neutral-650: var(--palette-neutral-650);
  --role-neutral-700: var(--palette-neutral-700);
  --role-neutral-800: var(--palette-neutral-800);
  --role-neutral-900: var(--palette-neutral-900);
  --role-neutral-alpha-10: var(--palette-black-alpha-10);
  --role-neutral-alpha-100: var(--palette-black-alpha-100);
  --role-neutral-alpha-12: var(--palette-black-alpha-12);
  --role-neutral-alpha-16: var(--palette-black-alpha-16);
  --role-neutral-alpha-2: var(--palette-black-alpha-2);
  --role-neutral-alpha-20: var(--palette-black-alpha-20);
  --role-neutral-alpha-25: var(--palette-black-alpha-25);
  --role-neutral-alpha-30: var(--palette-black-alpha-30);
  --role-neutral-alpha-36: var(--palette-black-alpha-36);
  --role-neutral-alpha-4: var(--palette-black-alpha-4);
  --role-neutral-alpha-40: var(--palette-black-alpha-40);
  --role-neutral-alpha-45: var(--palette-black-alpha-45);
  --role-neutral-alpha-50: var(--palette-black-alpha-50);
  --role-neutral-alpha-55: var(--palette-black-alpha-55);
  --role-neutral-alpha-6: var(--palette-black-alpha-6);
  --role-neutral-alpha-60: var(--palette-black-alpha-60);
  --role-neutral-alpha-65: var(--palette-black-alpha-65);
  --role-neutral-alpha-72: var(--palette-black-alpha-72);
  --role-neutral-alpha-8: var(--palette-black-alpha-8);
  --role-neutral-alpha-80: var(--palette-black-alpha-80);
  --role-neutral-alpha-90: var(--palette-black-alpha-90);
  --role-overlay-alpha-10: var(--palette-black-alpha-10);
  --role-overlay-alpha-100: var(--palette-black-alpha-100);
  --role-overlay-alpha-12: var(--palette-black-alpha-12);
  --role-overlay-alpha-16: var(--palette-black-alpha-16);
  --role-overlay-alpha-2: var(--palette-black-alpha-2);
  --role-overlay-alpha-20: var(--palette-black-alpha-20);
  --role-overlay-alpha-25: var(--palette-black-alpha-25);
  --role-overlay-alpha-30: var(--palette-black-alpha-30);
  --role-overlay-alpha-36: var(--palette-black-alpha-36);
  --role-overlay-alpha-4: var(--palette-black-alpha-4);
  --role-overlay-alpha-40: var(--palette-black-alpha-40);
  --role-overlay-alpha-45: var(--palette-black-alpha-45);
  --role-overlay-alpha-50: var(--palette-black-alpha-50);
  --role-overlay-alpha-55: var(--palette-black-alpha-55);
  --role-overlay-alpha-6: var(--palette-black-alpha-6);
  --role-overlay-alpha-60: var(--palette-black-alpha-60);
  --role-overlay-alpha-65: var(--palette-black-alpha-65);
  --role-overlay-alpha-72: var(--palette-black-alpha-72);
  --role-overlay-alpha-8: var(--palette-black-alpha-8);
  --role-overlay-alpha-80: var(--palette-black-alpha-80);
  --role-overlay-alpha-90: var(--palette-black-alpha-90);
  --role-shadow-alpha-10: var(--palette-black-alpha-10);
  --role-shadow-alpha-100: var(--palette-black-alpha-100);
  --role-shadow-alpha-12: var(--palette-black-alpha-12);
  --role-shadow-alpha-16: var(--palette-black-alpha-16);
  --role-shadow-alpha-2: var(--palette-black-alpha-2);
  --role-shadow-alpha-20: var(--palette-black-alpha-20);
  --role-shadow-alpha-25: var(--palette-black-alpha-25);
  --role-shadow-alpha-30: var(--palette-black-alpha-30);
  --role-shadow-alpha-36: var(--palette-black-alpha-36);
  --role-shadow-alpha-4: var(--palette-black-alpha-4);
  --role-shadow-alpha-40: var(--palette-black-alpha-40);
  --role-shadow-alpha-45: var(--palette-black-alpha-45);
  --role-shadow-alpha-50: var(--palette-black-alpha-50);
  --role-shadow-alpha-55: var(--palette-black-alpha-55);
  --role-shadow-alpha-6: var(--palette-black-alpha-6);
  --role-shadow-alpha-60: var(--palette-black-alpha-60);
  --role-shadow-alpha-65: var(--palette-black-alpha-65);
  --role-shadow-alpha-72: var(--palette-black-alpha-72);
  --role-shadow-alpha-8: var(--palette-black-alpha-8);
  --role-shadow-alpha-80: var(--palette-black-alpha-80);
  --role-shadow-alpha-90: var(--palette-black-alpha-90);
  --role-success-100: var(--palette-green-100);
  --role-success-200: var(--palette-green-200);
  --role-success-300: var(--palette-green-300);
  --role-success-400: var(--palette-green-400);
  --role-success-500: var(--palette-green-500);
  --role-success-600: var(--palette-green-600);
  --role-success-700: var(--palette-green-700);
  --role-warning-100: var(--palette-orange-100);
  --role-warning-200: var(--palette-orange-200);
  --role-warning-300: var(--palette-orange-300);
  --role-warning-400: var(--palette-orange-400);
  --role-warning-500: var(--palette-orange-500);
  --role-warning-600: var(--palette-orange-600);
  --role-warning-700: var(--palette-orange-700);
}

:root[data-color-mode="dark"] {
  --role-aira-100: var(--palette-orchid-100);
  --role-aira-600: var(--palette-orchid-600);
  --role-brand-100: var(--palette-dark-blue-100);
  --role-brand-200: var(--palette-dark-blue-200);
  --role-brand-300: var(--palette-dark-blue-300);
  --role-brand-400: var(--palette-dark-blue-400);
  --role-brand-500: var(--palette-dark-blue-500);
  --role-brand-600: var(--palette-dark-blue-600);
  --role-brand-700: var(--palette-dark-blue-700);
  --role-brand-800: var(--palette-dark-blue-800);
  --role-category-blue-100: var(--palette-dark-blue-100);
  --role-category-blue-200: var(--palette-dark-blue-200);
  --role-category-blue-300: var(--palette-dark-blue-300);
  --role-category-blue-400: var(--palette-dark-blue-400);
  --role-category-blue-500: var(--palette-dark-blue-500);
  --role-category-blue-600: var(--palette-dark-blue-600);
  --role-category-blue-700: var(--palette-dark-blue-700);
  --role-category-blue-800: var(--palette-dark-blue-800);
  --role-category-cyan-100: var(--palette-dark-cyan-100);
  --role-category-cyan-200: var(--palette-dark-cyan-200);
  --role-category-cyan-300: var(--palette-dark-cyan-300);
  --role-category-cyan-400: var(--palette-dark-cyan-400);
  --role-category-cyan-500: var(--palette-dark-cyan-500);
  --role-category-cyan-600: var(--palette-dark-cyan-600);
  --role-category-cyan-700: var(--palette-dark-cyan-700);
  --role-category-cyan-800: var(--palette-dark-cyan-800);
  --role-category-violet-100: var(--palette-dark-violet-100);
  --role-category-violet-200: var(--palette-dark-violet-200);
  --role-category-violet-300: var(--palette-dark-violet-300);
  --role-category-violet-400: var(--palette-dark-violet-400);
  --role-category-violet-500: var(--palette-dark-violet-500);
  --role-category-violet-600: var(--palette-dark-violet-600);
  --role-category-violet-700: var(--palette-dark-violet-700);
  --role-category-violet-800: var(--palette-dark-violet-800);
  --role-danger-100: var(--palette-dark-red-100);
  --role-danger-200: var(--palette-dark-red-200);
  --role-danger-300: var(--palette-dark-red-300);
  --role-danger-400: var(--palette-dark-red-400);
  --role-danger-500: var(--palette-dark-red-500);
  --role-danger-600: var(--palette-dark-red-600);
  --role-danger-700: var(--palette-dark-red-700);
  --role-information-100: var(--palette-dark-slate-100);
  --role-information-200: var(--palette-dark-slate-200);
  --role-information-300: var(--palette-dark-slate-300);
  --role-information-400: var(--palette-dark-slate-400);
  --role-information-500: var(--palette-dark-slate-500);
  --role-information-600: var(--palette-dark-slate-600);
  --role-information-700: var(--palette-dark-slate-700);
  --role-neutral-100: var(--palette-dark-neutral-100);
  --role-neutral-150: var(--palette-dark-neutral-150);
  --role-neutral-200: var(--palette-dark-neutral-200);
  --role-neutral-250: var(--palette-dark-neutral-250);
  --role-neutral-300: var(--palette-dark-neutral-300);
  --role-neutral-350: var(--palette-dark-neutral-350);
  --role-neutral-400: var(--palette-dark-neutral-400);
  --role-neutral-450: var(--palette-dark-neutral-450);
  --role-neutral-500: var(--palette-dark-neutral-500);
  --role-neutral-550: var(--palette-dark-neutral-550);
  --role-neutral-600: var(--palette-dark-neutral-600);
  --role-neutral-650: var(--palette-dark-neutral-650);
  --role-neutral-700: var(--palette-dark-neutral-700);
  --role-neutral-750: var(--palette-dark-neutral-750);
  --role-neutral-800: var(--palette-dark-neutral-800);
  --role-neutral-900: var(--palette-dark-neutral-900);
  --role-neutral-alpha-10: var(--palette-white-alpha-10);
  --role-neutral-alpha-100: var(--palette-white-alpha-100);
  --role-neutral-alpha-12: var(--palette-white-alpha-12);
  --role-neutral-alpha-16: var(--palette-white-alpha-16);
  --role-neutral-alpha-2: var(--palette-white-alpha-2);
  --role-neutral-alpha-20: var(--palette-white-alpha-20);
  --role-neutral-alpha-25: var(--palette-white-alpha-25);
  --role-neutral-alpha-30: var(--palette-white-alpha-30);
  --role-neutral-alpha-36: var(--palette-white-alpha-36);
  --role-neutral-alpha-4: var(--palette-white-alpha-4);
  --role-neutral-alpha-40: var(--palette-white-alpha-40);
  --role-neutral-alpha-45: var(--palette-white-alpha-45);
  --role-neutral-alpha-50: var(--palette-white-alpha-50);
  --role-neutral-alpha-55: var(--palette-white-alpha-55);
  --role-neutral-alpha-6: var(--palette-white-alpha-6);
  --role-neutral-alpha-60: var(--palette-white-alpha-60);
  --role-neutral-alpha-65: var(--palette-white-alpha-65);
  --role-neutral-alpha-72: var(--palette-white-alpha-72);
  --role-neutral-alpha-8: var(--palette-white-alpha-8);
  --role-neutral-alpha-80: var(--palette-white-alpha-80);
  --role-neutral-alpha-90: var(--palette-white-alpha-90);
  --role-overlay-alpha-10: var(--palette-black-alpha-10);
  --role-overlay-alpha-100: var(--palette-black-alpha-100);
  --role-overlay-alpha-12: var(--palette-black-alpha-12);
  --role-overlay-alpha-16: var(--palette-black-alpha-16);
  --role-overlay-alpha-2: var(--palette-black-alpha-2);
  --role-overlay-alpha-20: var(--palette-black-alpha-20);
  --role-overlay-alpha-25: var(--palette-black-alpha-25);
  --role-overlay-alpha-30: var(--palette-black-alpha-30);
  --role-overlay-alpha-36: var(--palette-black-alpha-36);
  --role-overlay-alpha-4: var(--palette-black-alpha-4);
  --role-overlay-alpha-40: var(--palette-black-alpha-40);
  --role-overlay-alpha-45: var(--palette-black-alpha-45);
  --role-overlay-alpha-50: var(--palette-black-alpha-50);
  --role-overlay-alpha-55: var(--palette-black-alpha-55);
  --role-overlay-alpha-6: var(--palette-black-alpha-6);
  --role-overlay-alpha-60: var(--palette-black-alpha-60);
  --role-overlay-alpha-65: var(--palette-black-alpha-65);
  --role-overlay-alpha-72: var(--palette-black-alpha-72);
  --role-overlay-alpha-8: var(--palette-black-alpha-8);
  --role-overlay-alpha-80: var(--palette-black-alpha-80);
  --role-overlay-alpha-90: var(--palette-black-alpha-90);
  --role-shadow-alpha-10: var(--palette-black-alpha-10);
  --role-shadow-alpha-100: var(--palette-black-alpha-100);
  --role-shadow-alpha-12: var(--palette-black-alpha-12);
  --role-shadow-alpha-16: var(--palette-black-alpha-16);
  --role-shadow-alpha-2: var(--palette-black-alpha-2);
  --role-shadow-alpha-20: var(--palette-black-alpha-20);
  --role-shadow-alpha-25: var(--palette-black-alpha-25);
  --role-shadow-alpha-30: var(--palette-black-alpha-30);
  --role-shadow-alpha-36: var(--palette-black-alpha-36);
  --role-shadow-alpha-4: var(--palette-black-alpha-4);
  --role-shadow-alpha-40: var(--palette-black-alpha-40);
  --role-shadow-alpha-45: var(--palette-black-alpha-45);
  --role-shadow-alpha-50: var(--palette-black-alpha-50);
  --role-shadow-alpha-55: var(--palette-black-alpha-55);
  --role-shadow-alpha-6: var(--palette-black-alpha-6);
  --role-shadow-alpha-60: var(--palette-black-alpha-60);
  --role-shadow-alpha-65: var(--palette-black-alpha-65);
  --role-shadow-alpha-72: var(--palette-black-alpha-72);
  --role-shadow-alpha-8: var(--palette-black-alpha-8);
  --role-shadow-alpha-80: var(--palette-black-alpha-80);
  --role-shadow-alpha-90: var(--palette-black-alpha-90);
  --role-success-100: var(--palette-dark-green-100);
  --role-success-200: var(--palette-dark-green-200);
  --role-success-300: var(--palette-dark-green-300);
  --role-success-400: var(--palette-dark-green-400);
  --role-success-500: var(--palette-dark-green-500);
  --role-success-600: var(--palette-dark-green-600);
  --role-success-700: var(--palette-dark-green-700);
  --role-warning-100: var(--palette-dark-orange-100);
  --role-warning-200: var(--palette-dark-orange-200);
  --role-warning-300: var(--palette-dark-orange-300);
  --role-warning-400: var(--palette-dark-orange-400);
  --role-warning-500: var(--palette-dark-orange-500);
  --role-warning-600: var(--palette-dark-orange-600);
  --role-warning-700: var(--palette-dark-orange-700);
}
:root {
  --color-background-brand-bold: var(--role-brand-600);
  --color-background-brand-bold-hovered: var(--role-brand-400);
  --color-background-brand-bold-pressed: var(--role-brand-700);
  --color-background-brand-bolder: var(--role-brand-800);
  --color-background-brand-subtle: var(--role-brand-100);
  --color-background-danger-bold: var(--role-danger-600);
  --color-background-danger-bold-hovered: var(--role-danger-400);
  --color-background-danger-bold-pressed: var(--role-danger-700);
  --color-background-danger-subtle: var(--role-danger-100);
  --color-background-information-bold: var(--role-information-600);
  --color-background-information-bold-hovered: var(--role-information-400);
  --color-background-information-bold-pressed: var(--role-information-700);
  --color-background-information-subtle: var(--role-information-100);
  --color-background-inverse: var(--role-neutral-100);
  --color-background-neutral: var(--role-neutral-300);
  --color-background-neutral-bold: var(--role-neutral-550);
  --color-background-neutral-bold-disabled: var(--role-neutral-450);
  --color-background-neutral-bolder: var(--role-neutral-800);
  --color-background-neutral-disabled: var(--role-neutral-600);
  --color-background-neutral-selected: var(--role-neutral-350);
  --color-background-neutral-subtle: var(--role-neutral-200);
  --color-background-neutral-subtlest: var(--role-neutral-150);
  --color-background-page: var(--role-neutral-250);
  --color-background-scrollbar: var(--role-neutral-350);
  --color-background-success-bold: var(--role-success-600);
  --color-background-success-bold-hovered: var(--role-success-400);
  --color-background-success-bold-pressed: var(--role-success-700);
  --color-background-success-subtle: var(--role-success-100);
  --color-background-surface: var(--role-neutral-100);
  --color-background-surface-overlay: var(--role-neutral-100);
  --color-background-warning-bold: var(--role-warning-600);
  --color-background-warning-bold-hovered: var(--role-warning-400);
  --color-background-warning-bold-pressed: var(--role-warning-700);
  --color-background-warning-subtle: var(--role-warning-100);
  --color-border: var(--role-neutral-500);
  --color-border-bolder: var(--role-neutral-900);
  --color-border-brand: var(--role-brand-600);
  --color-border-brand-light: var(--role-brand-400);
  --color-border-brand-pressed: var(--role-brand-700);
  --color-border-brand-subtle: var(--role-brand-300);
  --color-border-danger: var(--role-danger-600);
  --color-border-danger-light: var(--role-danger-400);
  --color-border-danger-subtle: var(--role-danger-300);
  --color-border-focused: var(--role-brand-600);
  --color-border-information: var(--role-information-600);
  --color-border-information-light: var(--role-information-400);
  --color-border-information-subtle: var(--role-information-300);
  --color-border-inverse: var(--role-neutral-100);
  --color-border-light: var(--role-neutral-450);
  --color-border-lighter: var(--role-neutral-275);
  --color-border-strong: var(--role-neutral-550);
  --color-border-subtle: var(--role-neutral-400);
  --color-border-success: var(--role-success-600);
  --color-border-success-light: var(--role-success-400);
  --color-border-success-subtle: var(--role-success-300);
  --color-border-warning: var(--role-warning-600);
  --color-border-warning-light: var(--role-warning-400);
  --color-border-warning-subtle: var(--role-warning-300);
  --color-icon: var(--role-neutral-900);
  --color-icon-aira-end: var(--role-aira-600);
  --color-icon-aira-start: var(--role-aira-100);
  --color-icon-brand: var(--role-brand-600);
  --color-icon-danger: var(--role-danger-600);
  --color-icon-disabled: var(--role-neutral-600);
  --color-icon-information: var(--role-information-700);
  --color-icon-inverse: var(--role-neutral-100);
  --color-icon-placeholder: var(--role-neutral-650);
  --color-icon-subtle: var(--role-neutral-800);
  --color-icon-success: var(--role-success-600);
  --color-icon-warning: var(--role-warning-600);
  --color-overlay-emphasis: var(--role-overlay-alpha-45);
  --color-overlay-neutral: var(--role-overlay-alpha-16);
  --color-shadow: var(--role-shadow-alpha-8);
  --color-shadow-strong: var(--role-shadow-alpha-12);
  --color-shadow-subtle: var(--role-shadow-alpha-4);
  --color-tag-category-blue-background: var(--role-category-blue-100);
  --color-tag-category-blue-border: var(--role-category-blue-300);
  --color-tag-category-blue-text: var(--role-category-blue-700);
  --color-tag-category-cyan-background: var(--role-category-cyan-100);
  --color-tag-category-cyan-border: var(--role-category-cyan-300);
  --color-tag-category-cyan-text: var(--role-category-cyan-700);
  --color-tag-category-violet-background: var(--role-category-violet-100);
  --color-tag-category-violet-border: var(--role-category-violet-300);
  --color-tag-category-violet-text: var(--role-category-violet-700);
  --color-text: var(--role-neutral-900);
  --color-text-brand: var(--role-brand-600);
  --color-text-brand-accessible: var(--role-brand-800);
  --color-text-brand-bold: var(--role-brand-700);
  --color-text-brand-bolder: var(--role-brand-800);
  --color-text-brand-disabled: var(--role-brand-400);
  --color-text-brand-hovered: var(--role-brand-500);
  --color-text-danger: var(--role-danger-600);
  --color-text-danger-disabled: var(--role-danger-400);
  --color-text-danger-hovered: var(--role-danger-500);
  --color-text-disabled: var(--role-neutral-600);
  --color-text-information: var(--role-information-600);
  --color-text-information-disabled: var(--role-information-400);
  --color-text-information-hovered: var(--role-information-500);
  --color-text-inverse: var(--role-neutral-100);
  --color-text-placeholder: var(--role-neutral-650);
  --color-text-subtle: var(--role-neutral-800);
  --color-text-subtlest: var(--role-neutral-700);
  --color-text-success: var(--role-success-600);
  --color-text-success-disabled: var(--role-success-400);
  --color-text-success-hovered: var(--role-success-500);
  --color-text-warning: var(--role-warning-600);
  --color-text-warning-disabled: var(--role-warning-400);
  --color-text-warning-hovered: var(--role-warning-500);
  --component-icon-size-base: 16px;
  --component-icon-size-lg: 24px;
  --component-icon-size-md: 18px;
  --component-icon-size-sm: 14px;
  --component-icon-size-xs: 12px;
  --component-module-sidebar-collapse-control-height: var(--space-8);
  --component-module-sidebar-collapsed-width: 50px;
  --component-module-sidebar-group-gap: 2px;
  --component-module-sidebar-item-height: 40px;
  --component-module-sidebar-item-marker-size: 6px;
  --component-module-sidebar-item-padding-x: var(--space-6);
  --component-module-sidebar-item-padding-y: 14px;
  --component-module-sidebar-width: 180px;
  --component-product-navigation-campus-trigger-height: var(--space-10);
  --component-product-navigation-height: var(--space-20);
  --elevation-shadow-lg: 0 24px 64px var(--color-shadow-strong);
  --elevation-shadow-md: 0 12px 32px var(--color-shadow);
  --elevation-shadow-none: none;
  --elevation-shadow-sm: 0 1px 2px var(--color-shadow-subtle);
  --layout-baseline-height: 900px;
  --layout-baseline-width: 1440px;
  --layout-content-max-width: 1200px;
  --layout-minimum-width: 1280px;
  --layout-page-padding-x: var(--space-10);
  --layout-page-padding-y: var(--space-8);
  --layout-section-gap: var(--space-8);
  --motion-duration-fast: 120ms;
  --motion-duration-normal: 180ms;
  --motion-duration-slow: 260ms;
  --motion-easing-exit: cubic-bezier(0.4, 0, 1, 1);
  --motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --radius-2xl: 32px;
  --radius-full: 999px;
  --radius-lg: 12px;
  --radius-md: 8px;
  --radius-none: 0px;
  --radius-sm: 4px;
  --radius-xl: 20px;
  --space-0: 0px;
  --space-1: 4px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-2: 8px;
  --space-20: 80px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --typography-font-family-mono: "SFMono-Regular", "Consolas", "Liberation Mono", monospace;
  --typography-font-family-numeric: "DIN Alternate", "Arial Narrow", "Helvetica Neue", "Arial", sans-serif;
  --typography-font-family-sans: -apple-system, "BlinkMacSystemFont", "Helvetica Neue", "Helvetica", "Arial", "PingFang SC", "Hiragino Sans GB", "Microsoft Yahei", "STHeiti", "SimSun", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --typography-font-size-body: 14px;
  --typography-font-size-body-large: 16px;
  --typography-font-size-caption: 12px;
  --typography-font-size-display: 44px;
  --typography-font-size-headline: 28px;
  --typography-font-size-title: 20px;
  --typography-font-weight-bold: 700;
  --typography-font-weight-medium: 500;
  --typography-font-weight-regular: 400;
  --typography-font-weight-semibold: 600;
  --typography-line-height-body: 22px;
  --typography-line-height-body-large: 24px;
  --typography-line-height-caption: 20px;
  --typography-line-height-display: 56px;
  --typography-line-height-headline: 38px;
  --typography-line-height-title: 28px;
  --z-index-base: 0;
  --z-index-dropdown: 1000;
  --z-index-modal: 1300;
  --z-index-overlay: 1200;
  --z-index-popover: 1500;
  --z-index-sticky: 1100;
  --z-index-toast: 1400;
}

:root[data-color-mode="dark"] {
  --color-background-brand-bold: var(--role-brand-200);
  --color-background-brand-bold-hovered: var(--role-brand-100);
  --color-background-brand-bold-pressed: var(--role-brand-300);
  --color-background-brand-bolder: var(--role-brand-400);
  --color-background-brand-subtle: var(--role-brand-800);
  --color-background-danger-bold: var(--role-danger-200);
  --color-background-danger-bold-hovered: var(--role-danger-100);
  --color-background-danger-bold-pressed: var(--role-danger-300);
  --color-background-danger-subtle: var(--role-danger-700);
  --color-background-information-bold: var(--role-information-200);
  --color-background-information-bold-hovered: var(--role-information-100);
  --color-background-information-bold-pressed: var(--role-information-300);
  --color-background-information-subtle: var(--role-information-700);
  --color-background-inverse: var(--role-neutral-100);
  --color-background-neutral: var(--role-neutral-600);
  --color-background-neutral-bold: var(--role-neutral-500);
  --color-background-neutral-bold-disabled: var(--role-neutral-600);
  --color-background-neutral-bolder: var(--role-neutral-150);
  --color-background-neutral-disabled: var(--role-neutral-400);
  --color-background-neutral-selected: var(--role-neutral-650);
  --color-background-neutral-subtle: var(--role-neutral-650);
  --color-background-neutral-subtlest: var(--role-neutral-750);
  --color-background-page: var(--role-neutral-900);
  --color-background-scrollbar: var(--role-neutral-600);
  --color-background-success-bold: var(--role-success-200);
  --color-background-success-bold-hovered: var(--role-success-100);
  --color-background-success-bold-pressed: var(--role-success-300);
  --color-background-success-subtle: var(--role-success-700);
  --color-background-surface: var(--role-neutral-800);
  --color-background-surface-overlay: var(--role-neutral-700);
  --color-background-warning-bold: var(--role-warning-200);
  --color-background-warning-bold-hovered: var(--role-warning-100);
  --color-background-warning-bold-pressed: var(--role-warning-300);
  --color-background-warning-subtle: var(--role-warning-700);
  --color-border: var(--role-neutral-500);
  --color-border-bolder: var(--role-neutral-150);
  --color-border-brand: var(--role-brand-200);
  --color-border-brand-light: var(--role-brand-100);
  --color-border-brand-pressed: var(--role-brand-300);
  --color-border-brand-subtle: var(--role-brand-500);
  --color-border-danger: var(--role-danger-200);
  --color-border-danger-light: var(--role-danger-100);
  --color-border-danger-subtle: var(--role-danger-500);
  --color-border-focused: var(--role-brand-200);
  --color-border-information: var(--role-information-200);
  --color-border-information-light: var(--role-information-100);
  --color-border-information-subtle: var(--role-information-500);
  --color-border-inverse: var(--role-neutral-100);
  --color-border-light: var(--role-neutral-500);
  --color-border-lighter: var(--role-neutral-550);
  --color-border-strong: var(--role-neutral-450);
  --color-border-subtle: var(--role-neutral-550);
  --color-border-success: var(--role-success-200);
  --color-border-success-light: var(--role-success-100);
  --color-border-success-subtle: var(--role-success-500);
  --color-border-warning: var(--role-warning-200);
  --color-border-warning-light: var(--role-warning-100);
  --color-border-warning-subtle: var(--role-warning-500);
  --color-icon: var(--role-neutral-150);
  --color-icon-aira-end: var(--role-aira-600);
  --color-icon-aira-start: var(--role-aira-100);
  --color-icon-brand: var(--role-brand-200);
  --color-icon-danger: var(--role-danger-200);
  --color-icon-disabled: var(--role-neutral-400);
  --color-icon-information: var(--role-information-300);
  --color-icon-inverse: var(--role-neutral-100);
  --color-icon-placeholder: var(--role-neutral-350);
  --color-icon-subtle: var(--role-neutral-200);
  --color-icon-success: var(--role-success-200);
  --color-icon-warning: var(--role-warning-200);
  --color-overlay-emphasis: var(--role-overlay-alpha-45);
  --color-overlay-neutral: var(--role-overlay-alpha-16);
  --color-shadow: var(--role-shadow-alpha-8);
  --color-shadow-strong: var(--role-shadow-alpha-12);
  --color-shadow-subtle: var(--role-shadow-alpha-4);
  --color-tag-category-blue-background: var(--role-category-blue-800);
  --color-tag-category-blue-border: var(--role-category-blue-500);
  --color-tag-category-blue-text: var(--role-category-blue-100);
  --color-tag-category-cyan-background: var(--role-category-cyan-800);
  --color-tag-category-cyan-border: var(--role-category-cyan-500);
  --color-tag-category-cyan-text: var(--role-category-cyan-100);
  --color-tag-category-violet-background: var(--role-category-violet-800);
  --color-tag-category-violet-border: var(--role-category-violet-500);
  --color-tag-category-violet-text: var(--role-category-violet-100);
  --color-text: var(--role-neutral-150);
  --color-text-brand: var(--role-brand-200);
  --color-text-brand-accessible: var(--role-brand-100);
  --color-text-brand-bold: var(--role-brand-100);
  --color-text-brand-bolder: var(--role-brand-400);
  --color-text-brand-disabled: var(--role-brand-100);
  --color-text-brand-hovered: var(--role-brand-100);
  --color-text-danger: var(--role-danger-200);
  --color-text-danger-disabled: var(--role-danger-100);
  --color-text-danger-hovered: var(--role-danger-100);
  --color-text-disabled: var(--role-neutral-400);
  --color-text-information: var(--role-information-200);
  --color-text-information-disabled: var(--role-information-100);
  --color-text-information-hovered: var(--role-information-100);
  --color-text-inverse: var(--role-neutral-100);
  --color-text-placeholder: var(--role-neutral-350);
  --color-text-subtle: var(--role-neutral-200);
  --color-text-subtlest: var(--role-neutral-250);
  --color-text-success: var(--role-success-200);
  --color-text-success-disabled: var(--role-success-100);
  --color-text-success-hovered: var(--role-success-100);
  --color-text-warning: var(--role-warning-200);
  --color-text-warning-disabled: var(--role-warning-100);
  --color-text-warning-hovered: var(--role-warning-100);
}
* {
  box-sizing: border-box;
  scrollbar-color: var(--color-background-scrollbar) transparent;
  scrollbar-width: thin;
}

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-thumb {
  background: var(--color-background-scrollbar);
  border-radius: var(--radius-full);
}

::-webkit-scrollbar-track {
  background: transparent;
}

html {
  min-width: var(--layout-minimum-width);
  color: var(--color-text);
  font-family: var(--typography-font-family-sans);
  font-size: var(--typography-font-size-body);
  background: var(--color-background-page);
  font-synthesis: none;
  text-rendering: optimizelegibility;
}

body {
  min-width: var(--layout-minimum-width);
  min-height: 100vh;
  margin: 0;
}

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

code {
  font-family: var(--typography-font-family-mono);
}

::selection {
  color: var(--color-text-inverse);
  background: var(--color-background-brand-bold);
}

/*# sourceMappingURL=index-BUMBNrJD.css.map */