/* ============================================================
    阳明班级管理平台 —— UI Kit Components (核心通用高频组件库)
    遵循 M3E UI 架构 2.0 组件规范，封装最常用 8~10 个高频基础组件：
    - ui-card / ui-action-card / ui-stat-card
    - ui-section-title / ui-page-header
    - ui-field / ui-button / ui-badge
    - ui-empty / ui-error / ui-loading
    ============================================================ */
 
 /* Native hidden must win over the card's explicit display layout. */
 .ui-action-card[hidden] { display: none; }

 /* ---- 1. 卡片类 (Cards) ---- */
 .ui-card {
   background: var(--color-surface-card, #ffffff);
   border: 1px solid var(--color-border, #e8e4df);
   border-radius: var(--radius-lg, 16px);
   box-shadow: var(--shadow-sm, 0 2px 6px rgba(45, 45, 45, 0.04));
   padding: var(--space-4, 16px);
   transition: box-shadow 0.2s ease, border-color 0.2s ease;
 }
 
 .ui-card:hover {
   box-shadow: var(--shadow-md, 0 4px 14px rgba(45, 45, 45, 0.07));
 }

 .ui-panel-inset {
   background: var(--color-surface-hover, #f3f3f0);
   border: 0;
   border-radius: var(--radius-md, 12px);
   box-shadow: none;
   padding: var(--space-4, 16px);
 }

 /* 兼容 common.css 中后声明的旧学期容器，确保 inset 语义不被边框覆盖。 */
 .semester-wrap.ui-panel-inset {
   background: var(--color-surface-hover, #f3f3f0);
   border: 0;
   border-radius: var(--radius-md, 12px);
   box-shadow: none;
 }

 .ui-action-card {
   display: block;
   background: var(--color-surface-card, #ffffff);
   border: 1px solid var(--color-border, #e8e4df);
   border-radius: var(--radius-lg, 16px);
   padding: var(--space-4, 16px);
   box-shadow: var(--shadow-sm, 0 2px 6px rgba(45, 45, 45, 0.04));
   color: inherit;
   text-align: center;
   text-decoration: none;
   cursor: pointer;
   transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
 }
 
 .ui-action-card:hover {
   transform: translateY(-2px);
   box-shadow: var(--shadow-md, 0 4px 14px rgba(45, 45, 45, 0.07));
   border-color: var(--color-accent, #d4a574);
   text-decoration: none;
 }
 
.ui-action-card:active {
  transform: scale(0.98);
}

/* Action Card slots: keep the shared geometry in the component layer while
   allowing each module to supply its own semantic leading color. */
.ui-action-card__leading {
  display: flex;
  width: var(--space-12, 48px);
  height: var(--space-12, 48px);
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin: 0 auto var(--space-3, 12px);
  border-radius: var(--radius-md, 12px);
  font-size: var(--font-size-2xl, 24px);
}

.ui-action-card__title {
  min-width: 0;
  margin-bottom: var(--space-1, 4px);
  color: var(--color-text-primary, #2d2d2d);
  font-size: var(--font-size-md, 15px);
  font-weight: 600;
  overflow-wrap: anywhere;
  word-break: keep-all;
}

.ui-action-card__description {
  min-width: 0;
  color: var(--color-text-muted, #6b6b6b);
  font-size: var(--font-size-nav, 12px);
  line-height: var(--line-height-base, 1.5);
  text-wrap: balance;
  overflow-wrap: anywhere;
  word-break: keep-all;
}

/* 中文内容在窄栏中保持词组完整，同时允许长英文或标识符兜底换行。 */
.ui-action-card,
 .ui-action-card > .title,
 .ui-action-card > .desc,
 .ui-action-card > .action-title,
 .ui-action-card > .action-desc,
 .ui-action-card > .action-context,
 .ui-stat-card,
 .ui-stat-card .ui-stat-value,
 .ui-stat-card .ui-stat-label,
 .module-dashboard-container .summary-item,
 .module-dashboard-container .summary-item strong,
 .module-dashboard-container .summary-item span {
   min-width: 0;
   word-break: keep-all;
   overflow-wrap: anywhere;
 }

/* New description slots keep Chinese phrases intact while balancing lines;
   the legacy `.desc` selector above remains compatible for unmigrated pages. */
.ui-action-card > .ui-action-card__description {
  word-break: keep-all;
  overflow-wrap: anywhere;
  text-wrap: balance;
}
 
 .ui-stat-card {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   text-align: center;
   padding: var(--space-3, 12px) var(--space-2, 8px);
   background: var(--color-surface-bg, #fafaf8);
   border: 1px solid var(--color-border-subtle, #f0ece7);
   border-radius: var(--radius-sm, 8px);
   gap: var(--space-1, 4px);
 }

 .ui-stat-card--brand {
   background: var(--color-brand-soft, #fee2e4);
   border-color: var(--color-brand-soft, #fee2e4);
 }

 .ui-stat-card--success {
   background: var(--color-success-soft, #e8f5e9);
   border-color: var(--color-success-soft, #e8f5e9);
 }

 .ui-stat-card--warning {
   background: var(--color-warning-soft, #fff3e0);
   border-color: var(--color-warning-soft, #fff3e0);
 }

.ui-stat-card--plain {
   padding: 0;
   background: transparent;
   border-color: transparent;
   box-shadow: none;
 }

 .ui-stat-card.ui-panel-inset {
   padding: var(--space-3, 12px) var(--space-2, 8px);
   background: var(--color-surface-hover, #f3f3f0);
   border: 0;
   box-shadow: none;
 }
 
 .ui-stat-card .ui-stat-value {
   font-family: var(--font-title, serif);
   font-size: var(--font-size-2xl, 24px);
   font-weight: 700;
   color: var(--color-brand, #e63946);
   line-height: var(--line-height-tight, 1.25);
   font-variant-numeric: tabular-nums;
 }
 
 .ui-stat-card .ui-stat-label {
   font-size: var(--font-size-xs, 11px);
   color: var(--color-text-muted, #8a8a8a);
 }

 .ui-stat-card--brand .ui-stat-value {
   color: var(--color-brand, #e63946);
 }

 .ui-stat-card--success .ui-stat-value {
   color: var(--color-success, #2e7d32);
 }

 .ui-stat-card--warning .ui-stat-value {
   color: var(--color-warning, #ed8b00);
 }

 .ui-stat-card--plain .ui-stat-value {
   color: var(--color-text-primary, #2d2d2d);
 }

 /* ---- Tabs (mutually exclusive views) ---- */
 .ui-tabs {
   display: flex;
   width: 100%;
   max-width: 100%;
   min-width: 0;
   align-items: stretch;
   gap: 0;
   margin: 0 0 var(--space-4, 16px);
   overflow-x: auto;
   overflow-y: hidden;
   overscroll-behavior-inline: contain;
   background: var(--color-surface-card, #ffffff);
   border: 1px solid var(--color-border, #e8e4df);
   border-radius: var(--radius-md, 12px);
   box-shadow: var(--shadow-sm, 0 2px 6px rgba(45, 45, 45, 0.04));
 }

 .ui-tabs__tab {
   position: relative;
   display: inline-flex;
   min-width: 0;
   min-height: 44px;
   flex: 1 1 0;
   align-items: center;
   justify-content: center;
   padding: var(--space-3, 12px) var(--space-2, 8px);
   border: 0;
   border-radius: 0;
   background: transparent;
   color: var(--color-text-muted, #6b6b6b);
   font-family: var(--font-body, sans-serif);
   font-size: var(--font-size-base, 14px);
   font-weight: 500;
   line-height: var(--line-height-tight, 1.25);
   text-align: center;
   overflow-wrap: anywhere;
   word-break: keep-all;
   cursor: pointer;
   touch-action: manipulation;
   transition: color 0.2s ease, background-color 0.2s ease;
 }

 .ui-tabs__tab + .ui-tabs__tab {
   border-inline-start: 1px solid var(--color-border-subtle, #f0ece7);
 }

 .ui-tabs__tab:hover {
   background: var(--color-surface-hover, #f3f3f0);
   color: var(--color-text-primary, #2d2d2d);
 }

 .ui-tabs__tab[aria-selected='true'],
 .ui-tabs__tab.active {
   background: var(--color-brand-soft, #fee2e4);
   color: var(--color-brand, #e63946);
   font-weight: 600;
 }

 .ui-tabs__tab:focus-visible {
   z-index: 1;
   outline: 3px solid var(--color-brand-soft, #fee2e4);
   outline-offset: -3px;
 }

 .ui-tabs__tab:disabled,
 .ui-tabs__tab[aria-disabled='true'] {
   opacity: 0.55;
   cursor: not-allowed;
 }

 .ui-tabs--segmented {
   border-radius: var(--radius-lg, 16px);
 }

 .ui-tabs--segmented .ui-tabs__tab {
   border-radius: 0;
 }

 .ui-tabs__panel {
   min-width: 0;
   max-width: 100%;
   overflow-wrap: anywhere;
 }

 .ui-tabs__panel[hidden] {
   display: none;
 }

 @media (prefers-reduced-motion: reduce) {
   .ui-tabs__tab {
     transition: none;
   }
 }
 
 /* ---- 2. 标题类 (Typography & Headers) ---- */
 .ui-section-title {
   display: flex;
   align-items: center;
   gap: var(--space-2, 8px);
   margin: 0 0 var(--space-3, 12px);
   padding-left: var(--space-1, 4px);
   color: var(--color-text-primary, #2d2d2d);
   font-family: var(--font-title, serif);
   font-size: var(--font-size-md, 15px);
   font-weight: 600;
 }
 
 .ui-section-title::before {
   content: '';
   width: var(--space-1, 4px);
   height: var(--space-4, 16px);
   flex-shrink: 0;
   border-radius: var(--radius-xs, 4px);
   background: var(--gradient-brand-bar, linear-gradient(90deg, var(--color-brand, #e63946) 0%, var(--color-accent, #d4a574) 100%));
 }
 
 .ui-page-header {
   display: flex;
   align-items: center;
   gap: var(--space-3, 12px);
   margin-bottom: var(--space-6, 24px);
 }
 
 .ui-page-header .ui-page-title {
   font-family: var(--font-title, serif);
   font-size: var(--font-size-2xl, 24px);
   font-weight: 600;
   color: var(--color-text-primary, #2d2d2d);
   margin: 0;
   letter-spacing: 0.02em;
 }

 /* Business-page headers use the content edge as their leading alignment. */
 .container .page-header.ui-page-header,
 .manager-page .page-header.ui-page-header {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: var(--space-3);
   min-width: 0;
   padding: var(--space-4) 0;
   margin-bottom: var(--space-4);
   background: transparent;
   border: 0;
   border-radius: 0;
   box-shadow: none;
 }

 .container .page-header.ui-page-header .page-title.ui-page-title,
 .manager-page .page-header.ui-page-header .page-title.ui-page-title {
   flex: 1 0 auto;
   min-width: 0;
   max-width: 100%;
   margin: 0;
   color: var(--color-text-primary);
   font-family: var(--font-title);
   font-size: var(--font-size-xl);
   font-weight: 600;
   line-height: var(--line-height-base);
   letter-spacing: 0.02em;
   white-space: nowrap;
 }

 .container .page-header.ui-page-header > .page-title.ui-page-title {
   max-width: calc(100% - var(--space-10) - var(--space-3));
 }

 .ui-page-header__copy {
   flex: 1;
   min-width: 0;
 }

 .container .page-header.ui-page-header > .back-btn,
 .manager-page .page-header.ui-page-header > .back-btn {
   margin: 0;
   width: var(--space-10);
   height: var(--space-10);
   padding: 0;
   flex-shrink: 0;
 }

 /* 子系统工作台统一头部：头部边界与下方首张内容卡共用同一内容起线。 */
 .container > .header.module-dashboard-header {
   position: relative;
   display: grid;
   grid-template-columns: auto minmax(0, 1fr) auto;
   align-items: center;
   gap: var(--space-3, 12px);
   min-width: 0;
   margin-bottom: var(--space-6, 24px);
   /* Keep controls inside the header card. The zero horizontal padding that
      used to be inherited here put the back button on the card border and
      made the title/user block look detached on compact screens. */
   padding: var(--space-4, 16px);
   text-align: left;
   background: var(--color-surface-card, #fff);
   border: 1px solid var(--color-border, #e8e4df);
   border-radius: var(--radius-lg, 16px);
   box-shadow: var(--shadow-sm, 0 2px 6px rgba(45, 45, 45, 0.04));
 }

 .container > .header.module-dashboard-header::before {
   content: '';
   position: absolute;
   top: 50%;
   left: 0;
   width: 4px;
   height: 36px;
   transform: translateY(-50%);
   border-radius: 0 2px 2px 0;
   background: var(--gradient-brand-bar);
 }

 .container > .header.module-dashboard-header > .module-switch,
 .container > .header.module-dashboard-header > .module-switch-wrap {
   grid-column: 1;
   grid-row: 1;
   align-self: center;
   margin: 0;
 }

 .container > .header.module-dashboard-header > .header-copy {
   grid-column: 2;
   grid-row: 1;
   min-width: 0;
   padding-top: 0;
 }

 .container > .header.module-dashboard-header > .header-utilities {
   grid-column: 3;
   grid-row: 1;
   margin: 0;
   padding-top: 0;
 }

 .module-dashboard-container > .header.module-dashboard-header .header-title,
 .supervision-page .header.module-dashboard-header .header-title {
   min-width: 0;
   margin: 0;
   overflow: hidden;
   color: var(--color-text-primary, #2d2d2d);
   font-family: var(--font-title, 'STSong', 'SimSun', serif);
   font-size: var(--font-size-xl, 20px);
   font-weight: 600;
   letter-spacing: 0.02em;
   line-height: 1.35;
   white-space: nowrap;
   text-overflow: ellipsis;
 }

 .module-dashboard-container > .header.module-dashboard-header .header-subtitle,
 .supervision-page .header.module-dashboard-header .header-subtitle {
   min-width: 0;
   margin-top: var(--space-1, 4px);
   color: var(--color-text-muted, #8a8a8a);
   font-size: var(--font-size-sm, 13px);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }

 .container > .header.module-dashboard-header .back-btn {
   margin: 0;
   width: var(--space-10, 40px);
   height: var(--space-10, 40px);
   padding: 0;
   font-size: 0;
 }

 @media (max-width: 599px) {
   .container > .header.module-dashboard-header {
     margin-bottom: var(--space-4, 16px);
     padding-block: var(--space-3, 12px);
   }
   .container > .header.module-dashboard-header > .header-utilities {
     grid-column: 1 / -1;
     grid-row: 2;
   }
   .container > .header.module-dashboard-header .user-card {
     width: 100%;
     min-width: 0;
   }
 }

 @media (min-width: 840px) {
   .container > .header.module-dashboard-header {
     padding-block: var(--space-4, 16px);
   }
 }

 
 /* ---- 3. 表单与按钮 (Fields & Buttons) ---- */
 .ui-field {
   display: flex;
   flex-direction: column;
   gap: var(--space-1, 4px);
   margin-bottom: var(--space-4, 16px);
 }
 
 .ui-field > .ui-field__label,
 .ui-field label {
   font-size: var(--font-size-sm, 13px);
   font-weight: 500;
   color: var(--color-text-secondary, #5c5c5c);
 }
 
 .ui-field__control,
 .ui-field input,
 .ui-field select,
 .ui-field textarea,
 .form-input,
 .form-select,
 .form-textarea {
   width: 100%;
   padding: var(--space-2, 8px) var(--space-3, 12px);
   border: 1px solid var(--color-border, #e8e4df);
   border-radius: var(--radius-sm, 8px);
   background: var(--color-surface-card, #ffffff);
   color: var(--color-text-primary, #2d2d2d);
   font-size: var(--font-size-base, 14px);
   line-height: var(--line-height-base, 1.5);
   box-sizing: border-box;
   transition: border-color 0.18s ease, box-shadow 0.18s ease;
 }
 
 .ui-field__control:focus,
 .ui-field input:focus,
 .ui-field select:focus,
 .ui-field textarea:focus,
 .form-input:focus,
 .form-select:focus,
 .form-textarea:focus {
   outline: none;
   border-color: var(--color-brand, #e63946);
   box-shadow: 0 0 0 3px var(--color-brand-soft, #fee2e4);
 }

 .ui-field__control:disabled,
 .ui-field input:disabled,
 .ui-field select:disabled,
 .ui-field textarea:disabled,
 .form-input:disabled,
 .form-select:disabled,
 .form-textarea:disabled {
   background: var(--color-surface-active, #ebebe6);
   color: var(--color-text-muted, #6b6b6b);
   cursor: not-allowed;
 }

 .ui-field--comfortable {
   gap: var(--space-1, 4px);
   margin-bottom: var(--space-4, 16px);
 }

 .ui-field--comfortable .ui-field__control,
 .ui-field--comfortable input,
 .ui-field--comfortable select,
 .ui-field--comfortable textarea {
   padding: var(--space-3, 12px) var(--space-4, 16px);
   font-size: var(--font-size-md, 15px);
 }

 .ui-field__hint,
 .form-hint {
   margin-top: var(--space-1, 4px);
   color: var(--color-text-muted, #6b6b6b);
   font-size: var(--font-size-xs, 11px);
   line-height: var(--line-height-base, 1.5);
 }

 .ui-field__error,
 .form-error {
   display: none;
   margin-top: var(--space-1, 4px);
   color: var(--color-danger, #d32f2f);
   font-size: var(--font-size-xs, 11px);
   line-height: var(--line-height-base, 1.5);
 }

 .ui-field__error.show,
 .ui-field__error[data-state='visible'],
 .form-error.show {
   display: block;
 }
 
 .ui-button,
 .btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: var(--space-2, 8px);
   padding: var(--space-2, 8px) var(--space-4, 16px);
   font-size: var(--font-size-base, 14px);
   font-weight: 500;
   border-radius: var(--radius-sm, 8px);
   border: 1px solid transparent;
   cursor: pointer;
   text-decoration: none;
   transition: all 0.18s ease;
   box-sizing: border-box;
 }
 
 .ui-button-primary,
 .btn-primary {
   background: var(--color-brand, #e63946);
   color: var(--color-text-inverse, #ffffff);
 }
 
 .ui-button-primary:hover,
 .btn-primary:hover {
   background: var(--color-brand-hover, #d32f2f);
   color: var(--color-text-inverse, #ffffff);
 }
 
 .ui-button-secondary,
 .btn-secondary {
   background: var(--color-accent-soft, #f5ede4);
   color: var(--color-text-primary, #2d2d2d);
   border-color: var(--color-accent, #d4a574);
 }
 
 .ui-button-secondary:hover,
 .btn-secondary:hover {
   background: var(--color-accent, #d4a574);
   color: var(--color-text-inverse, #ffffff);
 }
 
 .ui-button-outline {
   background: transparent;
   border-color: var(--color-border, #e8e4df);
   color: var(--color-text-secondary, #5c5c5c);
 }
 
 .ui-button-outline:hover {
   border-color: var(--color-border-strong, #d5d0c9);
   background: var(--color-surface-hover, #f3f3f0);
 }
 
 .ui-button-sm,
 .btn-sm {
   padding: var(--space-1, 4px) var(--space-2, 8px);
   font-size: var(--font-size-sm, 13px);
   border-radius: var(--radius-xs, 4px);
 }

 .ui-button-lg,
 .btn-lg {
   padding: var(--space-3, 12px) var(--space-5, 20px);
   font-size: var(--font-size-md, 15px);
   border-radius: var(--radius-sm, 8px);
 }

 .ui-button-danger,
 .btn-danger {
   background: var(--color-danger-soft, #ffebee);
   color: var(--color-danger, #d32f2f);
   border-color: var(--color-danger-soft, #ffebee);
 }

 .ui-button-danger:hover,
 .btn-danger:hover {
   background: var(--color-danger, #d32f2f);
   color: var(--color-text-inverse, #ffffff);
   border-color: var(--color-danger, #d32f2f);
 }

 .ui-button-ghost,
 .btn-cancel {
   background: transparent;
   color: var(--color-text-primary, #2d2d2d);
   border-color: var(--color-border, #e8e4df);
 }

 .ui-button-ghost:hover,
 .btn-cancel:hover {
   background: var(--color-surface-hover, #f3f3f0);
   border-color: var(--color-border-strong, #d5d0c9);
 }

 .ui-button:disabled,
 .ui-button[aria-disabled='true'],
 .btn:disabled,
 .btn[aria-disabled='true'] {
   opacity: 0.55;
   cursor: not-allowed;
 }

 .ui-button:focus-visible,
 .btn:focus-visible {
   outline: 3px solid var(--color-brand-soft, #fee2e4);
   outline-offset: 2px;
 }

 /* ---- Dialogs (modal confirmation and other shared overlays) ---- */
 .ui-dialog-overlay {
   position: fixed;
   inset: 0;
   z-index: 3000;
   display: flex;
   align-items: center;
   justify-content: center;
   box-sizing: border-box;
   padding: max(var(--space-6, 24px), env(safe-area-inset-top))
     max(var(--space-4, 16px), env(safe-area-inset-right))
     max(var(--space-6, 24px), env(safe-area-inset-bottom))
     max(var(--space-4, 16px), env(safe-area-inset-left));
   overflow: auto;
   background: var(--color-overlay, rgba(45, 45, 45, 0.45));
   backdrop-filter: blur(4px);
   -webkit-backdrop-filter: blur(4px);
   transition: opacity 0.2s ease, visibility 0.2s ease;
 }

 .ui-dialog-overlay[hidden] {
   display: none !important;
 }

 .ui-dialog-overlay[data-state="closed"],
 .ui-dialog-overlay[data-ui-state="closed"] {
   opacity: 0;
 }

 .ui-dialog-overlay[data-state="open"],
 .ui-dialog-overlay[data-ui-state="open"] {
   opacity: 1;
 }

 .ui-dialog {
   width: 100%;
   max-width: var(--shell-narrow-max, 520px);
   max-height: calc(100vh - var(--space-12, 48px));
   min-width: 0;
   box-sizing: border-box;
   overflow: auto;
   padding: var(--space-6, 24px);
   border: 1px solid var(--color-border, #e8e4df);
   border-radius: var(--radius-lg, 16px);
   background: var(--color-surface-card, #ffffff);
   box-shadow: var(--shadow-lg, 0 8px 24px rgba(45, 45, 45, 0.1));
   color: var(--color-text-primary, #2d2d2d);
   font-family: var(--font-body, sans-serif);
   text-align: left;
   overflow-wrap: anywhere;
   transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease;
 }

 .ui-dialog[data-state="closed"],
 .ui-dialog[data-ui-state="closed"] {
   transform: scale(0.96);
   opacity: 0;
 }

 .ui-dialog[data-state="open"],
 .ui-dialog[data-ui-state="open"] {
   transform: scale(1);
   opacity: 1;
 }

 .ui-dialog__title {
   margin: 0 0 var(--space-3, 12px);
   color: var(--color-text-primary, #2d2d2d);
   font-family: var(--font-title, serif);
   font-size: var(--font-size-xl, 20px);
   font-weight: 600;
   line-height: var(--line-height-tight, 1.25);
   overflow-wrap: anywhere;
 }

 .ui-dialog__description {
   margin: 0;
   color: var(--color-text-primary, #2d2d2d);
   font-size: var(--font-size-base, 14px);
   line-height: var(--line-height-relaxed, 1.7);
   white-space: pre-wrap;
   overflow-wrap: anywhere;
 }

 .ui-dialog__meta {
   margin: var(--space-2, 8px) 0 0;
   color: var(--color-text-secondary, #5c5c5c);
   font-size: var(--font-size-sm, 13px);
   line-height: var(--line-height-base, 1.5);
   overflow-wrap: anywhere;
 }

 .ui-dialog__actions {
   display: flex;
   gap: var(--space-3, 12px);
   margin-top: var(--space-6, 24px);
 }

 .ui-dialog__actions .ui-button {
   flex: 1 1 0;
   min-width: 0;
   white-space: normal;
   overflow-wrap: anywhere;
 }

 @media (max-width: 399px) {
   .ui-dialog-overlay {
     padding: max(var(--space-4, 16px), env(safe-area-inset-top))
       max(var(--space-3, 12px), env(safe-area-inset-right))
       max(var(--space-4, 16px), env(safe-area-inset-bottom))
       max(var(--space-3, 12px), env(safe-area-inset-left));
   }

   .ui-dialog {
     max-height: calc(100vh - var(--space-8, 32px));
     padding: var(--space-4, 16px);
   }

 }

 @media (prefers-reduced-motion: reduce) {
   .ui-dialog-overlay,
   .ui-dialog,
   .ui-dialog .ui-button {
     transition: none;
   }
 }

 /* 可复用朱红—雅金品牌标尺；header modifier 保留页面已有的短横线比例。 */
 .brand-bar {
   display: block;
   width: 100%;
   height: var(--space-1, 4px);
   border-radius: var(--radius-xs, 4px);
   background: var(--gradient-brand-bar, linear-gradient(90deg, var(--color-brand, #e63946), var(--color-accent, #d4a574)));
 }

 .brand-bar--header {
   width: 60px;
   margin-inline: auto;
 }
 
 /* ---- 4. 徽标与状态标签 (Badges & Chips) ---- */
 .ui-badge {
   display: inline-flex;
   align-items: center;
   padding: var(--space-1, 4px) var(--space-2, 8px);
   font-size: var(--font-size-xs, 11px);
   font-weight: 500;
   border-radius: var(--radius-pill, 9999px);
   line-height: 1;
   white-space: nowrap;
 }
 
 .ui-badge-brand {
   background: var(--color-brand-soft, #fee2e4);
   color: var(--color-brand, #e63946);
 }
 
 .ui-badge-accent {
   background: var(--color-accent-soft, #f5ede4);
   color: var(--color-accent, #d4a574);
 }
 
 .ui-badge-success {
   background: var(--color-success-soft, #e8f5e9);
   color: var(--color-success, #2e7d32);
 }
 
 .ui-badge-warning {
   background: var(--color-warning-soft, #fff3e0);
   color: var(--color-warning, #ed8b00);
 }
 
 .ui-badge-danger {
   background: var(--color-danger-soft, #ffebee);
   color: var(--color-danger, #d32f2f);
 }
 
 /* ---- 5. 反馈与状态 (Empty / Error / Loading) ---- */
 .ui-empty {
   text-align: center;
   padding: var(--space-8, 32px) var(--space-4, 16px);
   color: var(--color-text-muted, #8a8a8a);
   font-size: var(--font-size-sm, 13px);
 }
 
 .ui-error {
   background: var(--color-danger-soft, #ffebee);
   border: 1px solid rgba(211, 47, 47, 0.2);
   border-radius: var(--radius-md, 12px);
   padding: var(--space-4, 16px);
   color: var(--color-danger, #d32f2f);
   font-size: var(--font-size-sm, 13px);
 }
 
 .ui-loading {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   padding: var(--space-8, 32px) var(--space-4, 16px);
   color: var(--color-text-muted, #8a8a8a);
   font-size: var(--font-size-sm, 13px);
   gap: var(--space-2, 8px);
 }

 /* ---- Toast notifications ---- */
 .ui-toast-region {
   position: fixed;
   top: var(--space-4, 16px);
   top: max(var(--space-4, 16px), env(safe-area-inset-top));
   left: 50%;
   z-index: 3000;
   display: flex;
   width: calc(100vw - var(--space-4, 16px) * 2);
   width: min(var(--shell-narrow-max, 520px), calc(100vw - var(--space-4, 16px) * 2));
   max-width: calc(100vw - var(--space-4, 16px) * 2);
   flex-direction: column;
   gap: var(--space-2, 8px);
   transform: translateX(-50%);
   pointer-events: none;
 }

 .ui-toast {
   display: flex;
   width: 100%;
   min-width: 0;
   align-items: flex-start;
   justify-content: space-between;
   gap: var(--space-3, 12px);
   padding: var(--space-3, 12px) var(--space-3, 12px) var(--space-3, 12px) var(--space-4, 16px);
   border: 1px solid var(--color-border, #e8e4df);
   border-radius: var(--radius-md, 12px);
   box-shadow: var(--shadow-lg, 0 8px 24px rgba(45, 45, 45, 0.1));
   color: var(--color-text-primary, #2d2d2d);
   font-family: var(--font-body, sans-serif);
   font-size: var(--font-size-base, 14px);
   line-height: var(--line-height-base, 1.5);
   pointer-events: auto;
   overflow-wrap: anywhere;
 }

 .ui-toast--info {
   background: var(--color-info-soft, #e3f2fd);
   border-color: var(--color-info-soft, #e3f2fd);
   border-left-width: var(--space-1, 4px);
   border-left-color: var(--color-info, #1976d2);
 }

 .ui-toast--success {
   background: var(--color-success-soft, #e8f5e9);
   border-color: var(--color-success-soft, #e8f5e9);
   border-left-width: var(--space-1, 4px);
   border-left-color: var(--color-success, #2e7d32);
 }

 .ui-toast--warning {
   background: var(--color-warning-soft, #fff3e0);
   border-color: var(--color-warning-soft, #fff3e0);
   border-left-width: var(--space-1, 4px);
   border-left-color: var(--color-warning, #ed8b00);
 }

 .ui-toast--error {
   background: var(--color-danger-soft, #ffebee);
   border-color: var(--color-danger-soft, #ffebee);
   border-left-width: var(--space-1, 4px);
   border-left-color: var(--color-danger, #d32f2f);
 }

 .ui-toast__content {
   min-width: 0;
   flex: 1 1 auto;
 }

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

 .ui-toast__actions {
   display: flex;
   flex: 0 0 auto;
   align-items: center;
 }

 .ui-toast__close {
   display: inline-flex;
   width: var(--space-8, 32px);
   height: var(--space-8, 32px);
   align-items: center;
   justify-content: center;
   margin: 0;
   border: 0;
   border-radius: var(--radius-xs, 4px);
   background: transparent;
   color: currentColor;
   cursor: pointer;
   font-size: var(--font-size-lg, 17px);
   line-height: 1;
 }

 .ui-toast__close:hover {
   background: var(--color-surface-hover, #f3f3f0);
 }

 .ui-toast__close:focus-visible {
   outline: 3px solid currentColor;
   outline-offset: 2px;
 }

 @media (prefers-reduced-motion: reduce) {
   .ui-toast,
   .ui-toast__close {
     transition: none;
   }
 }

 @media (max-width: 599px) {
   .ui-toast-region {
     top: var(--space-3, 12px);
     top: max(var(--space-3, 12px), env(safe-area-inset-top));
     width: calc(100vw - var(--space-4, 16px) * 2);
   }
 }
/* Shared semester context card; legacy header classes remain as aliases. */
.ui-card.header-card.ui-semester-info {
  padding: var(--space-4);
  margin-bottom: var(--space-4);
  background: var(--color-surface-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.ui-card.ui-semester-info .ui-semester-info__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-3);
}
.ui-card.ui-semester-info .ui-semester-info__col {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: var(--space-2);
}
.ui-card.ui-semester-info .ui-semester-info__col + .ui-semester-info__col {
  margin: 0;
  padding: 0 0 0 var(--space-3);
  border-top: 0;
  border-left: 1px solid var(--color-border);
}
.ui-card.ui-semester-info .ui-semester-info__row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  min-width: 0;
  gap: var(--space-2);
}
.ui-card.ui-semester-info .ui-semester-info__label {
  width: auto;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  white-space: nowrap;
}
.ui-card.ui-semester-info .ui-semester-info__value {
  min-width: 0;
  color: var(--color-text-primary);
  font-size: var(--font-size-sm);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ui-card.ui-semester-info .ui-semester-info__value.date { font-family: var(--font-title); }

/* Four-level organization paths keep a stable two-row reading order. */
.org-cascade.org-cascade--four-level {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2) var(--space-3);
}
.org-cascade--four-level > *, .org-cascade--four-level select { min-width: 0; width: 100%; }
.org-cascade.org-cascade--four-level > .org-group {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.org-cascade--four-level > .org-group > label {
  font-size: var(--font-size-label);
  flex: 0 0 auto;
  margin: 0;
  white-space: nowrap;
}
.org-cascade--four-level > .org-group > select {
  flex: 1 1 0;
  font-size: var(--font-size-sm);
}
@media (max-width: 599px) {
  .org-cascade--four-level > .org-group > select {
    font-size: var(--font-size-control-touch);
  }
}