/* ===== 基础变量 ===== */
:root {
  --primary: #54DC70;
  --primary-hover: #76E38D;
  --primary-dark: #54DC70;
  --icon-back: #535354;
  --text: #1a1a1a;
  --text3: #767676;
  --text2: #676767;
  --text-white:#ffffff;
  --text-red: #f53f3f;
  --text-primary-dark: #3DD05B;
  --text-green: #1FAE3C;
  --text-tertiary: rgba(26, 26, 26, 0.35);
  --bg: #f7f8fa;
  --bg2: #F5F5F7;
  --bg-dark: #1a1a1a;
  --bg-dark-hover: #333333;
  --bg-ant-hover: #ebebeb;
  --bg-ant:#f5f5f5;
  --bg-green: #f3fdf4;
  --bg-red: #f53f3f;
  --bg-blue: #328CED;
  --bg-primary-dark: #54DC70;
  --card-bg: #ffffff;
  --stat-card-bg: #f9f9f9;
  --stat-icon-bg: #f2f2f2;
  --border: rgba(0, 0, 0, 0.06);
  --border-dark: #1a1a1a;
  --border-primary-dark: #3dd05b;
  --danger: #f53f3f;
  --danger-bg: #FEE8E8;
  --danger-bg-hover: #FCC5C5;
  --success-bg: #EAFCED;
  --success-bg-hover: #B1ECBD;
  --gret-bg: #EFEFEF;
  --gret-bg-hover: #D8D8D8;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.08);
  --modal-mask: rgb(217 217 217 / 60%);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  width: 100%;
  height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  color: var(--text);
  background: var(--bg2);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
  overflow: hidden;
  /* 全局固定行高：中英文每个字行高度一致，切换语言时内部文字不再因字体度量不同而上跳下跳 */
  line-height: 1.5;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

input, textarea {
  font-family: inherit;
  outline: none;
}

img {
  display: block;
  max-width: 100%;
}

/* ===== 登录页 ===== */
.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: linear-gradient(135deg, #f7f8fa 0%, #eef9f0 100%);
}

.login-card {
  width: 100%;
  max-width: 420px;
  background: var(--card-bg);
  border-radius: var(--radius-xl);
  padding: 48px 36px;
  box-shadow: var(--shadow-lg);
}

.login-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
  justify-content: center;
}

.login-logo-img {
  height: 60px;
  width: auto;
}

.login-title {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 32px;
  text-align: center;
  /* 中英文标题长度不同（"KKClass 老师端" vs "KKClass Teacher"）可能换行行数不同，
     固定行高 + 预留两行高度，登录卡片不再因语言切换而跳动 */
  line-height: 1.3;
  min-height: 62px;
}

.login-subtitle {
  font-size: 14px;
  color: var(--text3);
  margin-bottom: 32px;
  text-align: center;
}

.form-group {
  margin-bottom: 20px;
}

.form-label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--text3);
  margin-bottom: 8px;
}

.form-input {
  width: 100%;
  height: 48px;
  padding: 0 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-size: 15px;
  color: var(--text);
  background: var(--bg);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.form-input:focus {
  border-color: var(--primary);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(82, 229, 107, 0.15);
}

.form-input::placeholder {
  color: var(--text-tertiary);
}

.password-wrap {
  position: relative;
}

.password-toggle {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px;
  opacity: 0.6;
  transition: opacity 0.2s;
}
.password-toggle:hover { opacity: 1; }

.btn-primary {
  width: 100%;
  height: 48px;
  background: var(--primary);
  color: var(--text);
  border-radius: var(--radius-md);
  font-size: 16px;
  font-weight: 600;
  transition: background 0.2s, transform 0.1s;
}

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

.btn-primary:active {
  transform: scale(0.98);
}

.btn-dark {
  width: 100%;
  height: 48px;
  background: var(--text);
  color: #fff;
  border-radius: var(--radius-md);
  font-size: 16px;
  font-weight: 600;
}

.btn-dark:hover {
  background: #333;
}

.login-tip {
  margin-top: 20px;
  font-size: 12px;
  color: var(--text-tertiary);
  text-align: center;
  line-height: 1.6;
}

/* ===== 主布局 ===== */
.app-layout {
  display: flex;
  flex-direction: column;
  height: 100vh;
  padding-top: 56px;
  overflow-y: auto;
}

.app-layout::-webkit-scrollbar {
  width: 6px;
}

.app-layout::-webkit-scrollbar-track {
  background: transparent;
}

.app-layout::-webkit-scrollbar-thumb {
  background: #d9d9d9;
  border-radius: 3px;
}

.app-layout::-webkit-scrollbar-thumb:hover {
  background: #b0b0b0;
}

/* 顶部导航栏 */
.topbar {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(16px);
  border-bottom: 0.5px solid var(--border);
  padding: 0 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 56px;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 100;
  flex-shrink: 0;
}

.topbar-left {
  display: flex;
  align-items: center;
  gap: 32px;
}

.topbar-logo {
  height: 28px;
  width: auto;
}

.topbar-nav {
  display: flex;
  gap: 16px;
}

.topbar-nav-item {
  position: relative;
  display: flex;
  align-items: center;
  align-self: stretch;
  padding: 6px 16px;
  border-radius: 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--text2);
  transition: all 0.2s;
}

.topbar-nav-item:hover {
  color: var(--text);
  background: transparent;
}

.topbar-nav-item.active {
  color: var(--text);
  font-weight: 600;
  background: transparent;
}

.topbar-nav-item.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 22px;
  height: 4px;
  border-radius: 2px;
  background: var(--text-primary-dark);
}

/* 主内容区 */
.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* 首页欢迎语 */
.home-greeting {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  /* 中英文切换时高度锚定，避免问候语换行高度差导致布局跳动。
     按"更高的语言"（h1 一行 + p 两行）留足余量，min-height 取 22*1.3 + 4 + 14*1.5*2 ≈ 81 */
  min-height: 82px;
}

.greeting {
  display: flex;
  align-items: center;
  gap: 12px;
}

.greeting-text h1 {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 4px;
  line-height: 1.3;
}

.greeting-text h1 span {
  color: var(--primary-dark);
}

.greeting-text p {
  font-size: 14px;
  color: var(--text3);
  line-height: 1.5;
}

.greeting-emoji {
  width: 44px;
  height: 44px;
  font-size: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 头像 + 下拉 */
.topbar-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* 联系助教按钮（尺寸/圆角/悬停与消息通知铃铛一致） */
.topbar-contact-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 10px;
  font-size: 13px;
  color: var(--text);
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.2s;
}

.topbar-contact-btn:hover {
  background: var(--bg);
  color: var(--text);
}

/* 中 / 英 语言切换按钮（放在“联系助教”右侧） */
.topbar-lang-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  min-width: 34px;
  padding: 0 10px;
  font-size: 13px;
  line-height: 20px;
  font-weight: 600;
  color: var(--primary);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  cursor: pointer;
  transition: all 0.15s;
}
.topbar-lang-btn:hover {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

.contact-icon {
  width: 18px;
  height: 18px;
}

/* ===== 消息通知 ===== */
.notify-wrap {
  position: relative;
}

.notify-bell {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--text3);
  transition: all 0.2s;
}

.notify-bell:hover {
  background: var(--bg);
  color: var(--text);
}

.notify-bell.active {
  background: var(--bg);
  color: var(--primary);
}

.notify-bell-static {
  display: block;
  width: 20px;
  height: 20px;
  color: var(--icon-back);
}

/* 有未读：铃铛变红 + 周期性摇摆（纯 CSS动画） */
.notify-bell.has-unread .notify-bell-static {
  color: var(--icon-back);
  transform-origin: top center;
  animation: bell-swing 2.6s ease-in-out infinite;
}

@keyframes bell-swing {
  0%   { transform: rotate(0deg); }
  4%   { transform: rotate(16deg); }
  8%   { transform: rotate(-13deg); }
  12%  { transform: rotate(10deg); }
  16%  { transform: rotate(-7deg); }
  20%  { transform: rotate(0deg); }
  70%  { transform: rotate(0deg); }
  74%  { transform: rotate(9deg); }
  78%  { transform: rotate(-7deg); }
  82%  { transform: rotate(0deg); }
  100% { transform: rotate(0deg); }
}

.notify-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  font-size: 10px;
  font-weight: 600;
  line-height: 16px;
  text-align: center;
  color: #fff;
  background: #e74c3c;
  border-radius: 8px;
  pointer-events: none;
}

.notify-popup {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 10px;
  width: 380px;
  max-height: 480px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: 0 12px 32px rgba(0,0,0,.12);
  z-index: 1100;
  overflow: hidden;
}

.notify-popup.show {
  display: block;
}

.notify-popup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}

.notify-popup-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

.notify-popup-view-all {
  font-size: 13px;
  color: var(--text2);
  cursor: pointer;
  font-weight: 500;
}

.notify-popup-view-all:hover {
  text-decoration: underline;
}

.notify-list {
  max-height: 400px;
  overflow-y: auto;
  padding: 6px;
}
/* 消息浮窗滚动条：与全站统一规范一致（6px / 轨道透明 / 滑块 #d9d9d9 / hover #b0b0b0） */
.notify-list::-webkit-scrollbar {
  width: 6px;
}
.notify-list::-webkit-scrollbar-track {
  background: transparent;
}
.notify-list::-webkit-scrollbar-thumb {
  background: #d9d9d9;
  border-radius: 3px;
}
.notify-list::-webkit-scrollbar-thumb:hover {
  background: #b0b0b0;
}

.notify-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 10px 20px 10px 10px;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background 0.15s;
}

.notify-item:last-child {
  border-bottom: none;
}

.notify-item:hover {
  background: var(--bg);
}

.notify-icon {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  color: var(--text3);
}

.notify-icon.refund {
  background: #fff3e0;
  color: #e67e22;
}

.notify-icon.cancel {
  background: var(--danger-bg);
  color: var(--danger);
}

.notify-icon.booking {
  background: #e8f1fb;
  color: #1f6fd6;
}

.notify-icon.system {
  background: #eef0f2;
  color: #7a8288;
}

.notify-icon.password {
  background: #f1ecff;
  color: #7c4dff;
}

.notify-icon svg {
  width: 20px;
  height: 20px;
}

.notify-content {
  flex: 1;
  min-width: 0;
}

.notify-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}

.notify-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.notify-title.refund {
  color: #e67e22;
}

.notify-title.booking {
  color: #1f6fd6;
}

.notify-title.system {
  color: #7a8288;
}

.notify-time {
  flex-shrink: 0;
  font-size: 12px;
  color: var(--text-tertiary);
}

.notify-desc {
  font-size: 12px;
  color: var(--text3);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.notify-empty {
  padding: 40px 20px;
  text-align: center;
  font-size: 13px;
  color: var(--text-tertiary);
}

/* ===== 消息中心页面 ===== */
.notify-filter-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.notify-filter-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.notify-page-text {
  font-size: 13px;
  color: var(--text);
  line-height: 1.4;
}

.notify-page-meta {
  font-size: 12px;
  color: var(--text-tertiary);
  margin-top: 2px;
}

/* 消息中心表格内容列：圆形 icon + 标题/正文 */
.notify-cell-main {
  display: flex;
  align-items: center;
  gap: 12px;
}

.notify-cell-body {
  min-width: 0;
}

.notify-cell-body .notify-page-text,
.notify-cell-body .notify-page-meta {
  white-space: normal;
  word-break: break-all;
}

.notify-status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
}

.notify-status-dot.unread { background: var(--primary); }

.notify-status-dot.read { background: #d9d9d9; }

.badge-refund, .badge-cancel, .badge-booking, .badge-system {
  display: inline-block;
  padding: 2px 8px;
  font-size: 11px;
  border-radius: 4px;
  font-weight: 500;
}

.badge-refund {
  color: #e67e22;
  background: #fef3e7;
}

.badge-cancel {
  color: #8e44ad;
  background: #f3eaf8;
}

.badge-booking {
  color: #1f6fd6;
  background: #e8f1fb;
}

.badge-system {
  color: #7a8288;
  background: #eef0f2;
}

.btn-table {
  background: none;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 3px 10px;
  font-size: 12px;
  color: var(--primary);
  cursor: pointer;
  transition: all .15s;
}

.btn-table:hover {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

.user-dropdown {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 6px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.2s;
}

.user-dropdown:hover {
  background: var(--bg);
}

.user-avatar {
  width: 30px;
  height: 30px;
  border-radius: 24%;
  object-fit: cover;
  flex-shrink: 0;
}

.user-info {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.user-name-row {
  display: flex;
  align-items: center;
  gap: 4px;
}

.user-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.user-account {
  font-size: 11px;
  color: var(--text-tertiary);
}

.user-more-arrow {
  color: var(--text-tertiary);
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  transition: transform 0.2s;
  margin-top: 1px;
}

.user-dropdown:hover .user-more-arrow {
  transform: rotate(180deg);
}

.user-dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 6px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
  min-width: 140px;
  padding: 4px;
  z-index: 200;
  overflow: hidden;
}

.user-dropdown-menu.show {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 12px;
  font-size: 14px;
  border-radius: 8px;
  color: var(--text);
  text-align: left;
  transition: background 0.15s, color 0.15s;
}

.dropdown-item .dropdown-icon {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  color: var(--text-secondary);
}

.dropdown-item:last-child .dropdown-icon {
  color: var(--danger);
}

.dropdown-item:hover {
  background: var(--bg);
  color: var(--text);
}

.page-container {
  flex: 1;
  padding: 24px 32px 100px;
  max-width: 1090px;
  margin: 0 auto;
  width: 100%;
}

.page-header {
  margin-bottom: 16px;
}

.page-header h2 {
  font-size: 20px;
  font-weight: 700;
}

.page-header h2 span {
  color: var(--text-green);
}

.page-header p {
  font-size: 14px;
  color: var(--text3);
  margin-top: 4px;
}

/* ===== 卡片体系（重构：chart-card / table-card / list-card 三类，圆角与下边距统一） =====
 * 命名约定：
 * 1. `.chart-card`：图表 / 统计类卡片（仪表盘统计、财务概览、区域分布、收入排行、学生统计汇总等）。
 *    视觉基底统一：白底 + 圆角 var(--radius-lg)；下边距 16px、内边距由 .chart-card 提供。
 * 2. `.table-card`：数据表格类卡片（学生明细、账号列表、角色列表等），视觉与 chart-card 一致，仅语义区分。
 * 3. `.list-card`：系统配置 / 运营内容页的「配置列表卡片」（保持不变，不混用上两类）。
 * 注：`.card` 仍作为通用内容卡片存在，用于表单 / 简单内容块。
 */
/* 统一视觉基底：白底 + 圆角（下边距仅 section 级卡片需要，见 .chart-card） */
.chart-card,
.stat-card,
.student-stat-card,
.region-card,
.income-rank-card {
  background: var(--card-bg);
  border-radius: var(--radius-lg);
}

.chart-card {
  margin-bottom: 16px;
  padding: 24px 24px;
}

.table-card {
  background: var(--card-bg);
  border-radius: var(--radius-lg);
  margin-bottom: 16px;
  padding: 24px 24px;
}

.card {
  background: var(--card-bg);
  border-radius: var(--radius-lg);
  margin-bottom: 16px;
  padding: 20px 24px;
}

.card-title {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 20px;
}

/* ===== 首页仪表盘 ===== */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 16px;
}

.stat-card {
  padding: 16px 20px;
}

.finance-stat-card {
  border-radius: var(--radius-lg);
  padding: 16px 20px;
  border: 1px solid var(--border);
}

.stat-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.stat-label {
  font-size: 14px;
  color: var(--text3);
}

.stat-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  background: var(--stat-icon-bg);
  display: flex;
  align-items: center;
  justify-content: center;
}

.stat-icon::after {
  content: '';
  display: block;
  width: 26px;
  height: 26px;
  background-color: var(--text);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

.stat-icon-teacher::after {
  -webkit-mask-image: url(assets/icons8-teacher.svg);
  mask-image: url(assets/icons8-teacher.svg);
}

.stat-icon-student::after {
  -webkit-mask-image: url(assets/icons8-xuesheng.svg);
  mask-image: url(assets/icons8-xuesheng.svg);
}

.stat-icon-schedule::after {
  -webkit-mask-image: url(assets/icons8-paike.svg);
  mask-image: url(assets/icons8-paike.svg);
}

.stat-icon-revenue::after {
  -webkit-mask-image: url(assets/icons8-shouru.svg);
  mask-image: url(assets/icons8-shouru.svg);
}

.stat-icon-hourglass::after {
  -webkit-mask-image: url(assets/icons8-confetti.svg);
  mask-image: url(assets/icons8-confetti.svg);
}

.stat-icon-ptshouru::after {
  -webkit-mask-image: url(assets/icons8-ptshouru.svg);
  mask-image: url(assets/icons8-ptshouru.svg);
}

.stat-icon-profit::after {
  -webkit-mask-image: url(assets/icons8-money.svg);
  mask-image: url(assets/icons8-money.svg);
}

.stat-icon-shouru::after {
  -webkit-mask-image: url(assets/icons8-shouru.svg);
  mask-image: url(assets/icons8-shouru.svg);
}

.stat-icon-course::after {
  -webkit-mask-image: url(assets/icons8-paike.svg);
  mask-image: url(assets/icons8-paike.svg);
}

.stat-icon-refund::after {
  -webkit-mask-image: url(assets/icons8-refund.svg);
  mask-image: url(assets/icons8-refund.svg);
}

.stat-value {
  font-size: 24px;
  font-weight: 700;
  /* margin-bottom: 6px; */
}

.stat-desc {
  font-size: 12px;
  color: var(--text-tertiary);
}

.dashboard-section {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 24px;
}

/* 仪表盘横幅卡片（老师排课详情） */
.dashboard-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 8px 24px;
  margin-bottom: 16px;
  overflow: hidden;
}

.dashboard-banner-left {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.dashboard-banner-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  margin: 0;
}

.dashboard-banner-sub {
  font-size: 13px;
  color: var(--text3);
  margin: 0;
}

.dashboard-banner-btn {
  align-self: flex-start;
  height: 34px;
  padding: 6px 16px;
  border: 1.5px solid #1a1a1a;
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all .15s;
}

.dashboard-banner-btn:hover {
  background: var(--bg-dark);
  color: var(--primary);
}

.dashboard-banner-right {
  flex-shrink: 0;
  margin: -4px -20px -14px 22px;
  align-self: flex-end;
  display: flex;
}

.dashboard-banner-img {
  display: block;
  height: 140px;
  margin-right: 20px;
  width: auto;
  color: var(--primary);
}

/* 仪表盘底部双栏布局-学生区域分布+老师收入排行 */
.dashboard-bottom-row {
  display: flex;
  gap: 16px;
  align-items: stretch;
}

/* 学生区域分布卡片：与 .chart-card 组合使用（class="chart-card region-card"），白底/圆角由基底提供 */
.dashboard-bottom-row .region-card {
  flex: 1;
  padding: 20px 24px;
}

/* 本周老师收入排行卡片：与 .chart-card 组合使用（class="chart-card income-rank-card"），白底/圆角由基底提供 */
.income-rank-card {
  flex: 0 0 40%;
  display: flex;
  flex-direction: column;
  padding: 20px 24px;
}

.income-rank-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.rank-view-all {
  font-size: 12px;
  color: var(--text2);
  cursor: pointer;
  white-space: nowrap;
}

.rank-view-all:hover {
  opacity: .8;
}

.income-rank-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.income-rank-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 8px;
  transition: background 0.15s;
  margin: 0 -8px;
  border-radius: 0;
}

.income-rank-item:hover {
  background: rgba(0, 0, 0, 0.04);
  border-radius: 8px;
  border-color: transparent;
}

/* 下一个 item 被 hover 时，隐藏自身的 border-bottom（即 hover 项的上方线） */
.income-rank-item:has(+ .income-rank-item:hover) {
  border-color: transparent;
}

.income-rank-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.income-rank-num {
  width: 20px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-tertiary);
  flex-shrink: 0;
  text-align: center;
}

.income-rank-num.top3 {
  color: var(--text-green);
  font-size: 14px;
}

.income-rank-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.income-rank-info {
  flex: 1;
  min-width: 0;
}

.income-rank-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.income-rank-stats {
  font-size: 11px;
  color: var(--text3);
  display: flex;
  gap: 10px;
}

.income-rank-revenue {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-green);
  flex-shrink: 0;
}

/* 可排序表头 */
.th-sortable {
  cursor: pointer;
  user-select: none;
  transition: color .15s;
}

.th-sortable:hover {
  color: var(--primary);
}

.th-sortable::after {
  content: '';
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-left: 4px;
  vertical-align: middle;
  opacity: .6;
  background-color: var(--text3);
  mask-image: url(assets/icon8-Sort.svg);
  -webkit-mask-image: url(assets/icon8-Sort.svg);
  mask-size: contain;
  -webkit-mask-size: contain;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-position: center;
}

.th-sortable.sorted-asc::after {
  opacity: 1;
  background-color: var(--primary);
}

.th-sortable.sorted-desc::after {
  opacity: 1;
  background-color: var(--primary);
}

/* 金额列右对齐 */
.col-amount { text-align: right !important; }

/* 仪表盘底部双栏响应式 */
@media (max-width: 960px) {
  .dashboard-bottom-row {
    flex-direction: column;
  }
  .income-rank-card {
    flex: 1;
  }
}

/* ===== 老师首页仪表盘 ===== */
/* 左右两栏布局 */
.home-layout {
  display: flex;
  gap: 16px;
  align-items: stretch;
  min-height: 480px;
  box-sizing: border-box;
}

.home-main {
  flex: 1;
  min-width: 0;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  box-sizing: border-box;
}

.home-sidebar {
  flex: 0 0 340px;
  display: flex;
  flex-direction: column;
  height: auto;
  box-sizing: border-box;
}

/* ===== 日历+课程一体化面板 ===== */
.home-calendar-panel {
  background: #fff;
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  flex: 1;
  max-height: 100%;
  box-sizing: border-box;
  position: relative;
}

.home-calendar-panel::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 12px;
  background: #ffffff;
  pointer-events: none;
  z-index: 1;
}

/* 日历顶部（固定） */
.home-cal-top {
  padding: 14px 16px 10px;
  flex-shrink: 0;
}

.home-cal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.home-cal-month {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

.home-cal-nav {
  width: 26px;
  height: 26px;
  border: none;
  background: #f5f5f5;
  border-radius: 6px;
  color: var(--text);
  font-size: 15px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}

.home-cal-nav:hover {
  background: #ebebeb;
}

.home-cal-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  margin-bottom: 4px;
  /* 中英文切换时高度锚定（中文"日一二…六"较英文 Mon…Sun 行高略高） */
  min-height: 16px;
}

.home-cal-weekdays span {
  text-align: center;
  font-size: 11px;
  color: var(--text-tertiary);
  font-weight: 500;
}

.home-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.home-cal-cell {
  aspect-ratio: 1;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  transition: background 0.15s;
}

.home-cal-cell:not(.empty):hover {
  background: #f5f5f5;
}

.home-cal-cell.empty {
  cursor: default;
}

.home-cal-date {
  font-size: 12px;
  color: var(--text);
  line-height: 1;
}

.home-cal-cell.today {
  background: #52E56B;
}

.home-cal-cell.today .home-cal-date {
  color: #1a1a1a;
  font-weight: 600;
}

.home-cal-cell.selected:not(.today) {
  background: #EAF3DE;
}

.home-cal-cell.selected:not(.today) .home-cal-date {
  color: #3B6D11;
  font-weight: 600;
}

.home-cal-cell.has-course .home-cal-date {
  font-weight: 600;
}

.home-cal-course-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #52E56B;
  margin-top: 2px;
}

.home-cal-cell.today .home-cal-course-dot,
.home-cal-cell.selected .home-cal-course-dot {
  background: #1a1a1a;
}

/* 分隔线 */
.home-cal-divider {
  height: 1px;
  background: #f0f0f0;
  margin: 0 16px;
  flex-shrink: 0;
}

/* 选中日期课程头部 */
.home-cal-course-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px 6px;
  flex-shrink: 0;
  /* 中英文切换时高度锚定（"X月X日 课程安排"换行高度差） */
  min-height: 37px;
}

.home-cal-date-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

/* 课程列表（可滚动） */
.home-cal-course-list {
  flex: 1 1 0;
  overflow-y: auto;
  padding: 0 12px 0;
  min-height: 0;
  box-sizing: border-box;
}

.home-cal-course-list::-webkit-scrollbar {
  width: 6px;
}

.home-cal-course-list::-webkit-scrollbar-track {
  background: #f7f7f7;
}

.home-cal-course-list::-webkit-scrollbar-thumb {
  background: #d9d9d9;
  border-radius: 3px;
}

.home-cal-course-list::-webkit-scrollbar-thumb:hover {
  background: #b0b0b0;
}

.home-today-badge {
  font-size: 12px;
  font-weight: 500;
  padding: 2px 10px;
  border-radius: 10px;
  background: #f0f0f0;
  color: var(--text3);
}

.home-today-badge.has-upcoming {
  background: #EAF3DE;
  color: #3B6D11;
}

/* 第二行：统计卡片 */
.home-stats-row {
  display: flex;
  gap: 16px;
  margin-bottom: 16px;
}

.home-next-class {
  flex: 0 0 220px;
  background: #52E56B;
  border-radius: var(--radius-lg);
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: #1a1a1a;
  /* 锚定高度：中英文文案长度不同会导致卡片高度跳动，用 min-height 锁定，
     英文较短时由 flex 拉伸对齐，切换语言不再变高变矮 */
  min-height: 134px;
}

.home-next-class.no-class {
  background: #f0f0f0;
  color: #888;
}

.home-next-label {
  font-size: 13px;
  font-weight: 500;
  opacity: 0.65;
}

.home-next-info {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
}

.home-next-countdown {
  font-size: 13px;
  font-weight: 500;
  opacity: 0.8;
}

.home-stat-card {
  flex: 1;
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  /* 中英文切换时高度锚定，避免布局跳动（与 .home-next-class 一致） */
  min-height: 134px;
}

.home-stat-label {
  font-size: 13px;
  color: var(--text3);
  font-weight: 500;
}

.home-stat-value {
  font-size: 28px;
  font-weight: 700;
  color: var(--text);
}

.home-stat-detail {
  font-size: 12px;
  color: var(--text-tertiary);
}

.home-stat-progress {
  margin: 2px 0;
}

.home-progress-bar {
  height: 5px;
  background: #f0f0f0;
  border-radius: 3px;
  overflow: hidden;
}

.home-progress-fill {
  height: 100%;
  background: #52E56B;
  border-radius: 3px;
  transition: width 0.4s ease;
}

/* Row 2: Charts */
.home-charts-row {
  display: flex;
  gap: 16px;
  margin-bottom: 16px;
}

.home-chart-card {
  flex: 1;
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 20px 22px;
  margin-bottom: 16px;
  /* 中英文切换时高度锚定，避免布局跳动（取中文较高值，覆盖"本周课量分布"卡片） */
  min-height: 276px;
}

.home-chart-card:last-child {
  margin-bottom: 0;
}

.home-charts-row .home-chart-card {
  margin-bottom: 0;
}

.home-chart-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 16px;
}

/* 环形图 */
.home-donut-wrap {
  position: relative;
  width: 160px;
  height: 160px;
  margin: 0 auto 12px;
}

.home-donut {
  width: 100%;
  height: 100%;
}

.home-donut-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
}

.home-donut-legend {
  display: flex;
  justify-content: center;
  gap: 20px;
}

.home-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text3);
}

.home-legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  flex-shrink: 0;
}

.home-legend-dot.random { background: #52E56B; }
.home-legend-dot.fixed { background: #ddd; }

/* 本周课量柱状图 */
.home-bars {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  height: 200px;
  padding: 0 4px;
}

.home-bar-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  height: 100%;
  justify-content: flex-end;
}

.home-bar-val {
  font-size: 12px;
  color: var(--text3);
  font-weight: 500;
}

.home-bar-fill {
  width: 100%;
  max-width: 40px;
  background: #e8e8e8;
  border-radius: 4px 4px 0 0;
  transition: height 0.4s ease, background 0.3s;
}

.home-bar-fill.today {
  background: #52E56B;
}

.home-bar-day {
  font-size: 11px;
  color: var(--text-tertiary);
  font-weight: 500;
}

.home-bar-day.today-label {
  color: var(--text);
  font-weight: 700;
}

.course-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.course-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px;
  margin: 4px 0;
  background: var(--bg);
  border-radius: var(--radius-md);
  transition: background 0.2s;
  cursor: pointer;
}

.course-item:hover {
  background: #eef0f3;
}

.course-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
}

.course-info {
  flex: 1;
}

.course-name {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 4px;
}

.course-type-sep {
  color: var(--text-tertiary);
  font-weight: 400;
  margin: 0 6px;
}

.course-type-text {
  font-size: 13px;
  font-weight: 400;
  color: var(--text3);
}

.course-meta {
  font-size: 13px;
  color: var(--text3);
}

.course-tag {
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
}

.tag-upcoming {
  background: var(--success-bg);
  color: var(--primary-dark);
}

.tag-completed {
  background: rgba(26, 26, 26, 0.08);
  color: var(--text);
}

.tag-cancelled {
  background: rgba(245, 63, 63, 0.08);
  color: var(--danger);
}

.empty-state {
  text-align: center;
  padding: 48px 20px;
  color: var(--text-tertiary);
}

.empty-state-icon {
  font-size: 40px;
  margin-bottom: 12px;
}

/* ===== 我的排课 ===== */
.schedule-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

/* 排课统计条 */
.schedule-stats-bar {
  display: flex;
  gap: 16px;
  padding: 7px 16px;
  height: 46px;
  background: var(--card-bg);
  border-bottom: 1px solid var(--border);
  border-radius: var(--radius);
  flex-wrap: wrap;
}

.schedule-stat-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: var(--bg-ant);
  border-radius: 8px;
  font-size: 13px;
}

.schedule-stat-label {
  color: var(--text3);
  white-space: nowrap;
}

.schedule-stat-value {
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
}

.schedule-stat-value.income-teacher { color: var(--text-green); }
.schedule-stat-value.income-platform { color: var(--success); }

.schedule-stat-divider {
  width: 1px;
  height: 20px;
  background: var(--border);
  align-self: center;
}

.schedule-title {
  font-size: 20px;
  font-weight: 700;
  /* 中英文切换（"我的排课" ↔ "My Schedule"）防止换行导致标题高度跳动 */
  white-space: nowrap;
}

.schedule-nav {
  display: flex;
  align-items: center;
  gap: 12px;
}

.schedule-nav-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
}

.schedule-nav-btn:hover {
  background: var(--bg);
}

.schedule-date-range {
  font-size: 15px;
  font-weight: 600;
  /* 中英文日期范围长度不同，禁止换行避免工具条高度跳动 */
  white-space: nowrap;
}

.schedule-view-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg);
  border-radius: var(--radius-md);
  padding: 4px;
}

.today-nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 0 16px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  line-height: 20px;
  font-weight: 500;
  color: var(--primary-dark);
  background: #fff;
  cursor: pointer;
  border: 1px solid var(--border);
  transition: all 0.15s;
  white-space: nowrap;
}

.today-nav-btn:hover {
  background: rgba(82, 229, 107, 0.06);
  border-color: var(--primary);
  color: var(--primary);
}

.view-toggle-btn {
  padding: 6px 14px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 500;
  color: var(--text3);
  white-space: nowrap;
  line-height: 1.4;
}

.view-toggle-btn.active {
  background: #fff;
  color: var(--text);
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

/* ===== 周视图 ===== */
.week-view {
  display: none;
}

.week-view.active {
  display: block;
}

/* ===== 30天列表视图 ===== */
.list-view {
  display: none;
}

.list-view.active {
  display: block;
}

.schedule-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* 每天一个分组 */
.schedule-day-group {
  border-bottom: 0.5px solid var(--border);
  padding: 14px 0;
}

.schedule-day-group.today {
  background: #FBFFF5;
  margin: 0 -22px;
  padding: 14px 22px;
  border-radius: var(--radius-md);
}

.schedule-day-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.schedule-day-label {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}

.schedule-day-week {
  font-size: 12px;
  color: var(--text-tertiary);
}

.schedule-day-today-tag {
  font-size: 11px;
  font-weight: 500;
  color: #3B6D11;
  background: #EAF3DE;
  padding: 1px 8px;
  border-radius: 8px;
}

.schedule-day-courses {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.schedule-day-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: var(--bg);
  border-radius: var(--radius-sm);
}

.schedule-day-item-time {
  font-size: 13px;
  font-weight: 500;
  color: var(--text3);
  min-width: 88px;
}

.schedule-day-item-info {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
}

.schedule-day-item-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
}

.schedule-day-item-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  /* 学生姓名中英文长度差异大（"张小明" vs "Emma Johnson"），单行省略号收敛，
     避免姓名换行撑高课程行导致列表跳动 */
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.schedule-day-item-type {
  font-size: 11px;
  color: var(--text-tertiary);
  background: #f0f0f0;
  padding: 1px 6px;
  border-radius: 4px;
  white-space: nowrap;
}

.schedule-day-item-status {
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 8px;
  font-weight: 500;
  /* 状态徽章（"已取消" ↔ "Cancelled"）禁止换行，保持单行固定高度，避免撑高课程行 */
  white-space: nowrap;
  line-height: 1.4;
}

.schedule-day-item-status.upcoming {
  background: #EAF3DE;
  color: #3B6D11;
}

.schedule-day-item-status.completed {
  background: #FFF3E0;
  color: #E65100;
}

.schedule-day-item-status.cancelled {
  background: #FFEBEE;
  color: #C62828;
}

.schedule-day-empty {
  font-size: 13px;
  color: var(--text-tertiary);
  padding: 4px 0;
}

/* 今日按钮 */
.schedule-nav-today {
  width: auto;
  border-radius: var(--radius-sm);
  padding: 0 12px;
  font-size: 13px;
  font-weight: 500;
}

/* 日期选择条 */
.date-strip {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.date-strip::-webkit-scrollbar {
  height: 6px;
}

.date-strip::-webkit-scrollbar-track {
  background: #f7f7f7;
}

.date-strip::-webkit-scrollbar-thumb {
  background: #d9d9d9;
  border-radius: 3px;
}

.date-strip::-webkit-scrollbar-thumb:hover {
  background: #b0b0b0;
}

.date-cell {
  flex-shrink: 0;
  width: 60px;
  height: 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background: #f7f7f7;
  cursor: pointer;
  transition: all 0.2s;
}

.date-cell:hover {
  background: #eef0f3;
}

.date-cell.active {
  background: var(--primary);
  color: #fff;
}

.date-cell.active .date-week,
.date-cell.active .date-date {
  color: var(--text)
}

.date-cell.past {
  color: var(--text-tertiary);
}

.date-cell .date-day {
  font-size: 12px;
  margin-bottom: 2px;
  color: var(--text-tertiary);
}

.date-cell .date-date {
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
}

.date-cell .date-week {
  font-size: 12px;
  margin-top: 2px;
  color: var(--text3);
}

.date-cell.today .date-week {
  color: var(--text);
  font-weight: 600;
}

.date-today-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--primary-dark);
  margin-top: 3px;
}

.date-cell.active .date-today-dot {
  background: var(--bg-dark);
}

/* 周课表网格 */
.schedule-grid-wrapper {
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--border);
}

.schedule-grid-layout {
  display: flex;
}

/* 左侧时间列（固定，不滚动） */
.time-column {
  flex-shrink: 0;
  width: 72px;
  background: #f7f7f7;
  position: sticky;
  left: 0;
  z-index: 2;
}

.time-column .time-header-cell,
.time-column .time-cell {
  border-right: 1px solid var(--border);
}

/* 右侧日期列（可横向滚动） */
.day-columns-wrap {
  flex: 1;
  overflow-x: auto;
  overflow-y: hidden;
}

.day-columns-wrap::-webkit-scrollbar {
  height: 6px;
}

.day-columns-wrap::-webkit-scrollbar-track {
  background: #f7f7f7;
}

.day-columns-wrap::-webkit-scrollbar-thumb {
  background: #d9d9d9;
  border-radius: 3px;
}

.day-columns-wrap::-webkit-scrollbar-thumb:hover {
  background: #b0b0b0;
}

.day-columns {
  display: grid;
  grid-template-columns: repeat(7, minmax(110px, 1fr));
  min-width: 770px;
}

.time-header-cell {
  padding: 4px 8px;
  text-align: center;
  font-size: 13px;
  color: var(--text3);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  position: sticky;
  top: 0;
  z-index: 3;
  background: #f7f7f7;
}

.day-header-cell {
  padding: 4px 8px;
  text-align: center;
  border-bottom: 1px solid var(--border);
  border-right: 1px solid var(--border);
  font-size: 13px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  cursor: pointer;
  transition: background 0.15s;
  position: sticky;
  top: 0;
  z-index: 1;
  background: #fff;
}

.day-header-cell:hover {
  background: rgba(82, 229, 107, 0.06);
}

.day-header-cell.highlight {
  background: rgba(82, 229, 107, 0.12);
  position: sticky;
  top: 0;
}

.day-header-cell.highlight::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  border-left: 1.5px solid var(--primary);
  border-right: 1.5px solid var(--primary);
}

.day-header-cell .day-label {
  font-weight: 600;
  margin-bottom: 2px;
  color: var(--text);
  white-space: nowrap;
}

.day-header-cell .day-label-count {
  font-weight: 400;
  font-size: 11px;
  color: var(--text3);
  margin-left: 2px;
  white-space: nowrap;
}

.day-header-cell .day-date {
  font-size: 12px;
  color: var(--text3);
  white-space: nowrap;
}

.day-header-cell.today .day-label,
.day-header-cell.today .day-label-count {
  color: var(--primary-dark);
}

.day-header-cell.highlight .day-label,
.day-header-cell.highlight .day-label-count,
.day-header-cell.highlight .day-date {
  color: #52c41a !important;
  font-weight: 700;
}

.schedule-grid-body {
  display: contents;
}

.time-cell {
  padding: 4px 8px;
  text-align: center;
  font-size: 13px;
  color: var(--text3);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
}

.slot-cell {
  min-height: 36px;
  border-bottom: 1px solid var(--border);
  border-right: 1px solid var(--border);
  padding: 4px;
  position: relative;
  display: flex;
  align-items: stretch;
}

.slot-cell.highlight-col {
  background: rgba(82, 229, 107, 0.08);
}

.slot-cell.past.highlight-col {
  background: rgba(82, 229, 107, 0.08);
}

.slot-cell.highlight-col::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  border-left: 1.5px solid var(--primary);
  border-right: 1.5px solid var(--primary);
}

.slot-cell.past {
  background: rgba(247, 248, 250, 0.5);
}

.class-card {
  background: var(--success-bg);
  border-radius: var(--radius-xl);
  padding: 4px;
  cursor: pointer;
  transition: transform 0.15s, background 0.15s;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
}

.class-card:hover {
  transform: translateY(-1px);
  background: var(--success-bg-hover);
}

.class-card.completed {
  background: var(--gret-bg);
}

.class-card.completed:hover {
  background: var(--gret-bg-hover);
}

.class-card.cancelled {
  background: var(--danger-bg);
  opacity: 0.7;
}

.class-card.cancelled:hover {
  background: var(--danger-bg-hover);
}

.class-card-student {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  min-width: 0;
}

.class-card-avatar {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.class-card-name {
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}

.class-card-status {
  padding: 1px 6px;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 400;
  flex-shrink: 0;
}

.class-card-status.upcoming {
  background: var(--primary);
  color: var(--text);
}

.class-card-status.completed {
  background: var(--text);
  color: #fff;
}

.class-card-status.cancelled {
  background: var(--danger);
  color: #fff;
}

/* 日历视图 */
.calendar-view {
  display: none;
}

.calendar-view.active {
  display: block;
}

.calendar-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 16px;
}

.calendar-month {
  font-size: 18px;
  font-weight: 700;
  min-width: 120px;
  text-align: center;
  white-space: nowrap;
}

.calendar-body {
  display: flex;
  gap: 24px;
  align-items: flex-start;
}

.calendar-grid {
  flex: 1;
  min-width: 0;
  align-self: flex-start;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
}

.day-detail-panel {
  width: 320px;
  flex-shrink: 0;
  align-self: flex-start;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px;
  overflow-y: auto;
}

.calendar-weekday {
  text-align: center;
  font-size: 13px;
  color: var(--text3);
  padding: 8px;
  white-space: nowrap;
}

.calendar-day {
  aspect-ratio: 1;
  background: var(--bg);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  transition: background 0.2s;
}

.calendar-day:hover {
  background: #eef0f3;
}

.calendar-day.selected {
  background: var(--success-bg);
}

.calendar-day.past {
  color: var(--text-tertiary);
}

.calendar-day .day-number {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 4px;
}

.calendar-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.calendar-dot.green { background: var(--primary); }
.calendar-dot.orange { background: #ff7d00; }
.calendar-dot.red { background: var(--danger); }
.calendar-dot.gray { background: #c9cdd4; }

/* ===== 我的资料 ===== */
.profile-form {
  max-width: 720px;
}

.form-section {
  margin-bottom: 32px;
}

.form-section-title {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 16px;
  padding-bottom: 10px;
}

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

.form-group-full {
  grid-column: 1 / -1;
}

/* 只读提示横幅 */
.readonly-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: #f0f9ff;
  border: 1px solid #bae0fd;
  border-radius: var(--radius-md);
  font-size: 13px;
  color: #1e6f9f;
  margin-bottom: 20px;
}

.readonly-banner-icon {
  font-size: 16px;
  flex-shrink: 0;
}

.avatar-upload {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 24px;
}

.avatar-preview {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--border);
}

.avatar-tip {
  font-size: 12px;
  color: var(--text-tertiary);
}

/* 只读字段值 */
.form-value {
  padding: 10px 0;
  font-size: 15px;
  color: var(--text);
  border-bottom: 1px solid var(--border);
}

.form-value-text {
  line-height: 1.7;
  color: var(--text3);
  font-size: 14px;
  border-bottom: none;
}

/* 只读标签展示 */
.tag-display {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 0;
}

.tag-badge {
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 13px;
  background: var(--bg-secondary);
  color: var(--text3);
  border: 1px solid var(--border);
}

.form-actions .btn-primary,
.form-actions .btn-dark {
  width: auto;
  padding: 0 32px;
}

/* ===== 底部导航（H5） ===== */
.mobile-nav {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 64px;
  background: #fff;
  border-top: 1px solid var(--border);
  z-index: 100;
  padding-bottom: env(safe-area-inset-bottom);
}

.mobile-nav-list {
  display: flex;
  height: 100%;
}

.mobile-nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 11px;
  color: var(--text3);
}

.mobile-nav-item.active {
  color: var(--text);
}

.mobile-nav-item svg,
.mobile-nav-item img {
  width: 24px;
  height: 24px;
}

.mobile-nav-item img {
  opacity: 0.55;
  transition: opacity 0.2s;
}

.mobile-nav-item.active img {
  opacity: 1;
}

/* ===== 汉堡菜单按钮（H5） ===== */
.topbar-menu-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin-right: 2px;
  border-radius: var(--radius-sm);
  color: var(--text);
  background: transparent;
  transition: background 0.2s;
  flex-shrink: 0;
}
.topbar-menu-btn:hover { background: var(--bg); }

/* ===== 侧边抽屉导航（H5 汉堡菜单） ===== */
.nav-drawer-mask {
  display: none;
  position: fixed;
  inset: 0;
  /* 与全站弹窗遮罩统一：--modal-mask = rgb(217 217 217 / 60%) */
  background: var(--modal-mask);
  z-index: 150;
}
.nav-drawer-mask.open { display: block; }

.nav-drawer {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 78vw;
  max-width: 300px;
  background: #fff;
  z-index: 200;
  transform: translateX(-100%);
  transition: transform 0.28s ease;
  display: flex;
  flex-direction: column;
  box-shadow: 2px 0 16px rgba(0, 0, 0, 0.08);
}
.nav-drawer.open {
  transform: translateX(0);
  /* 注意：base .nav-drawer 已用 transition: transform 平滑滑动，
     此处不可再加 animation（会与 transition 同时驱动 transform → 抖两下）。
     关闭时移除 .open 也会由 transition 平滑收回。 */
}
.nav-drawer-header {
  height: 56px;
  display: flex;
  align-items: center;
  padding: 0 20px;
  border-bottom: 0.5px solid var(--border);
  flex-shrink: 0;
}
.nav-drawer-logo { height: 26px; width: auto; }
.nav-drawer-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0;
}
.nav-drawer-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 15px 20px;
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.nav-drawer-item:hover { background: var(--bg); }
.nav-drawer-item.active {
  color: var(--text-green);
  background: var(--bg-green);
  font-weight: 600;
}

/* ===== 超管页面通用 ===== */
.toolbar {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.search-input {
  padding: 8px 0px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-size: 13px;
  color: var(--text);
  background: #fff;
  min-width: 200px;
}

.search-input::placeholder {
  color: var(--text-tertiary);
}

.filter-bar {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.filter-select {
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-size: 13px;
  color: var(--text);
  background: #fff;
  min-width: 140px;
}

/* 超管按钮 */
.admin-btn {
  padding: 0px 18px;
  height: 34px;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 500;
  color: var(--primary);
  background: var(--bg-dark);
  cursor: pointer;
  transition: opacity .2s;
  white-space: nowrap;
}
.admin-btn:hover {
  opacity: .85;
}
.admin-btn.outline {
  color: var(--text);
  background: #fff;
  border: 1px solid var(--border);
}
.admin-btn.outline:hover {
  background: var(--bg-ant);
}

/* 全局主色按钮（保存等） */
.admin-btn.primary {
  background: var(--bg-dark);
  color: var(--primary);
}
/* 系统配置页保存按钮 hover：与 accounts 页新增老师按钮一致（仅背景变深，颜色走 root 变量，覆盖 .admin-btn:hover 的透明度叠加） */
.admin-btn.primary.small:hover {
  background: var(--bg-dark-hover);
  opacity: 1;
}

/* ===== 系统配置页 ===== */
.settings-content {
  display: flex;
  flex-direction: column;
}
.settings-loading {
  padding: 60px 0;
  text-align: center;
  color: var(--text-tertiary);
}
.settings-error {
  padding: 40px;
  text-align: center;
  color: var(--text-red);
  background: var(--danger-bg);
  border-radius: var(--radius-md);
}
/* 系统配置页的「配置列表卡片」：承载一组配置项（标题+内容编辑框）。
 * 注意：不叠加 .card 类，内边距由自身提供，与普通内容卡片 .card 区分开 */
.list-card {
  background: var(--card-bg);
  border-radius: var(--radius-lg);
  padding: 16px 24px;   /* 收起后（仅卡片头可见） */
  margin-bottom: 16px;
}
/* 展开后（含配置项列表）：底部多留 8px 间距，让列表与卡片底有呼吸感 */
.list-card:has(.settings-card-head.open) {
  padding: 16px 24px 24px;
}
.settings-group {
  display: flex;
  flex-direction: column;
  /* gap: 6px; */
   margin-bottom: 16px;
}
.settings-group-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}
.settings-group-head h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--text2);
}
.settings-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 32px;
}
.settings-card-head.clickable {
  cursor: pointer;
  user-select: none;
}
/* hover 到卡片头里的保存/上传按钮时不改标题颜色（按钮有自己的 hover 效果） */
.settings-card-head.clickable:hover:not(:has(.save-in-head:hover)) h3 {
  color: var(--text-green);
}
.settings-arrow {
  color: var(--text-tertiary);
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  transition: transform 0.2s;
}
.settings-card-head.open .settings-arrow {
  transform: rotate(180deg);
}
/* 卡片头里的保存按钮：默认隐藏，展开后显示 */
.settings-card-head .save-in-head {
  margin-left: auto;
  display: none;
}
.settings-card-head.open .save-in-head {
  display: inline-flex;
}
.settings-card-body {
  display: none;
}
.settings-card-head.open ~ .settings-card-body {
  display: block;
  padding-top: 12px;   /* 展开后首项与卡片头之间的呼吸间距 */
}
.settings-card-head h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
}
.settings-card-desc {
  font-size: 12px;
  color: var(--text-tertiary);
}
.settings-item {
  padding-top: 8px;
  border-top: 1px solid var(--border);
}
.settings-item:first-of-type {
  border-top: none;
}
.settings-item-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.settings-item-head.right {
  justify-content: flex-end;
}
.settings-item-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
}
.settings-textarea {
  width: 100%;
  min-height: 120px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 13px;
  line-height: 1.6;
  color: var(--text);
  background: #fff;
  resize: vertical;
  box-sizing: border-box;
  font-family: inherit;
}
.settings-textarea:focus {
  outline: none;
  border-color: var(--primary);
}
.settings-reminder-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 6px;
}
.settings-reminder-hint {
  margin: 0;
  font-size: 12px;
  color: var(--text-tertiary);
}

/* ===== 老师管理卡片 ===== */
.teacher-filter-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.teacher-filter-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.teacher-filter-tab {
  padding: 0px 16px;
  height: 34px;
  border: 1px solid var(--border);
  border-radius: 20px;
  font-size: 13px;
  color: var(--text);
  background: #fff;
  cursor: pointer;
  transition: all .15s;
}
.teacher-filter-tab:hover {
  border-color: var(--primary);
}
.teacher-filter-tab.active {
  color: var(--text);
  background: var(--primary);
  border-color: var(--primary);
}

.teacher-filter-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.teacher-filter-right .search-box {
  width: 220px;
  padding: 0px 8px;
}

.teacher-search-input {
  padding: 0px 14px;
  height: 34px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--text);
  background: #fff;
  min-width: 180px;
  outline: none;
  transition: border-color .15s;
}
.teacher-search-input:focus {
  border-color: var(--primary);
}
.teacher-search-input::placeholder {
  color: var(--text-tertiary);
}

.teacher-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.teacher-card {
  position: relative;
  background: #fff;
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform .15s, box-shadow .15s;
  display: flex;
  flex-direction: column;
}
.teacher-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.06);
}
.teacher-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 18px 20px 12px 20px;
}

.teacher-card-avatar {
  width: 64px;
  height: 64px;
  border-radius: 14px;
  background: var(--bg);
  object-fit: cover;
  cursor: pointer;
  transition: opacity 0.15s;
}

.teacher-card-avatar:hover {
  opacity: 0.85;
}

.teacher-card-top-actions {
  display: flex;
  gap: 8px;
}

.teacher-icon-btn {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: var(--bg-ant);
  color: var(--text3);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .15s;
}
.teacher-icon-btn:hover {
  background: var(--bg-ant-hover);
}
.teacher-icon-btn.delete:hover {
  background:var(--bg-ant-hover);
}

.teacher-card-body {
  padding: 0 20px 20px 20px;
}

.teacher-card-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.teacher-card-name {
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
}

.teacher-card-gender {
  font-weight: 400;
  font-size: 16px;
  color: var(--text3);
}

.teacher-card-country {
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 500;
  border-radius: 12px;
}

.teacher-card-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text3);
  margin-bottom: 12px;
}

.teacher-card-meta .meta-divider {
  color: var(--border);
}

.teacher-card-price {
  color: var(--text-green);
  font-weight: 600;
}

.teacher-card-tags {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  margin-bottom: 12px;
  overflow: hidden;
  position: relative;
  min-height: 22px;
}

.teacher-card-tag {
  flex-shrink: 0;
  padding: 3px 6px;
  font-size: 12px;
  font-weight: 400;
  color: var(--text);
  background: var(--success-bg);
  border-radius: 4px;
  white-space: nowrap;
}

.teacher-card-tag.more {
  flex-shrink: 0;
  background: var(--success-bg);
  color: var(--text);
  cursor: pointer;
  position: relative;
}

.teacher-card-bio {
  font-size: 13px;
  line-height: 1.7;
  color: var(--text3);
  margin-bottom: 12px;
  height: 46px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.teacher-card-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 12px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin-bottom: 16px;
}

.teacher-card-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: center;
  align-items: center;
}

.teacher-card-stat-value {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  line-height: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.teacher-card-stat-value.text-active {
  color: var();
}
.teacher-card-stat-value.text-disabled {
  color: var(--danger);
}

.teacher-card-stat-label {
  font-size: 12px;
  color: var(--text3);
}

.teacher-card-footer {
  display: flex;
  width: 100%;
}

.teacher-card-actions {
  display: flex;
  gap: 12px;
  width: 100%;
}

.teacher-card-action {
  height: 36px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 500;
  background: #fff;
  cursor: pointer;
  transition: all .15s;
}
.teacher-card-action:hover {
  background: var(--bg);
}
.teacher-card-action.primary {
  flex: none;
  padding: 6px 16px;
  color: var(--text-green);
  border: 1.5px solid var(--text-primary-dark);
}
.teacher-card-action.primary:hover {
  background: var(--border-primary-dark);
  color: var(--text-white);
}
.teacher-card-action.danger {
  flex: none;
  padding: 6px 16px;
  color: var(--danger);
  /* background: var(--danger-bg); */
  border: 1.5px solid var(--danger)
}
.teacher-card-action.danger:hover {
  background: var(--danger);
  color: #fff;
}

.teacher-card-action.outline {
  flex: 1;
  color: var(--text);
  /* background: var(--primary); */
  /* border-color: #1a1a1a; */
  border: 1.5px solid var(--border-dark);
}
.teacher-card-action.outline:hover {
  background: var(--bg-dark);
  color: var(--primary);
}

.teacher-empty {
  grid-column: 1 / -1;
  padding: 48px;
  text-align: center;
  color: var(--text-tertiary);
  background: #fff;
  border: 1px dashed var(--border);
  border-radius: var(--radius-lg);
}

/* 数据表格 */
.table-wrap {
  overflow-x: auto;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  min-height: 52px; /* 防止 tbody 清空时容器高度塌陷 */
}
.data-table tbody {
  /* 确保表格体在数据变化时保持稳定高度，避免闪烁 */
  will-change: auto;
}
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  background: #fff;
}

.data-table th {
  padding: 10px 12px;
  text-align: left;
  background: #f7f7f7;
  color: var(--text3);
  font-weight: 500;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.data-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.data-table tr:last-child td {
  border-bottom: none;
}

.data-table tr:hover td {
  background: var(--success-bg);
}

.row-highlight td {
  background: rgba(82, 229, 107, 0.12) !important;
  transition: background 0.5s;
}

/* 表格内标签 */
.table-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 500;
}

.badge-upcoming { background: rgba(82, 229, 107, 0.12); color: #2ea04a; }
.badge-completed { background: rgba(26, 26, 26, 0.06); color: var(--text3); }
.badge-cancelled { background: rgba(245, 63, 63, 0.08); color: var(--danger); }
.badge-active { background: rgba(82, 229, 107, 0.12); color: #2ea04a; }
.badge-disabled { background: rgba(245, 63, 63, 0.08); color: var(--danger); }
.badge-pending { background: rgba(255, 171, 0, 0.12); color: #cc8800; }
.badge-approved { background: rgba(82, 229, 107, 0.12); color: #2ea04a; }
.badge-rejected { background: rgba(245, 63, 63, 0.08); color: var(--danger); }
.badge-refunded { background: rgba(26, 26, 26, 0.06); color: var(--text3); }

/* 财务管理工具栏 */
.finance-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 12px;
}

.finance-toolbar-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.search-box {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0px 12px;
  /* background: var(--bg); */
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text3);
}

.search-input {
  border: none;
  background: none;
  outline: none;
  font-size: 13px;
  color: var(--text);
  width: 140px;
}

.search-input::placeholder { color: var(--text-tertiary); }


/* ===== 分页组件 ===== */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-top: 16px;
  padding: 8px 0;
}

.pagination-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--text);
  font-size: 13px;
  cursor: pointer;
  transition: all .2s;
}

.pagination-btn:hover {
  border-color: var(--primary);
  color: var(--text);
}

.pagination-btn.active {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--text);
}

.pagination-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.pagination-info {
  font-size: 13px;
  color: var(--text3);
  margin: 0 8px;
}

/* ===== 财务管理 Tab ===== */
.page-header-finance {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}


.finance-tabs {
  display: flex;
  gap: 28px;
  background: transparent;
  border-radius: 0;
  padding: 0;
  border: none;
}

.finance-tab {
  position: relative;
  display: flex;
  align-items: center;
  align-self: stretch;
  flex: 0 0 auto;
  /* padding: 6px 16px; */
  text-align: center;
  font-size: 20px;
  font-weight: 400;
  color: var(--text3);
  background: transparent;
  border: none;
  border-radius: 0;
  cursor: pointer;
  transition: all .2s;
}

.finance-tab:hover {
  color: var(--text);
  background: transparent;
}

.finance-tab.active {
  color: var(--text);
  /* font-size: 20px; */
  font-weight: 600;
  background: transparent;
}

.finance-tab-panel {
  display: none;
}

.finance-tab-panel.active {
  display: block;
}

/* 退费管理日期筛选 */
.date-filter-tabs {
  display: flex;
  height: 34px;
  gap: 4px;
  background: var(--card-bg);
  border-radius: 8px;
  padding: 3px;
  border: 1px solid var(--border);
}

.date-filter-btn {
  padding: 0px 8px;
  font-size: 13px;
  color: var(--text);
  background: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: all .15s;
}

.date-filter-btn:hover {
  background: var(--bg-ant);
}

.date-filter-btn.active {
  color: var(--text);
  background: var(--primary-dark);
}

/* 课费统计工具栏 */
.fee-stats-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 12px;
}

/* 课费统计表本周收入高亮 */
.fee-stat-weekly {
  color: #22c55e;
  font-weight: 700;
}

.fee-stats-teacher-cell {
  display: flex;
  align-items: center;
  gap: 10px;
}

.fee-stats-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--bg);
  flex-shrink: 0;
}

/* 财务概览-老师费用明细头像（28px） */
.fee-detail-teacher {
  display: flex;
  align-items: center;
  gap: 8px;
}
.fee-detail-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--bg);
  flex-shrink: 0;
}

/* 退费管理-老师头像（28px） */
.refund-teacher-cell {
  display: flex;
  align-items: center;
  gap: 8px;
}
.refund-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--bg);
  flex-shrink: 0;
}

/* 退费管理操作列高度一致 */
.table-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  min-height: 28px;
}
.no-action {
  display: inline-flex;
  align-items: center;
  height: 28px;
  color: var(--text-tertiary);
}

/* 课费统计年月水平滚动 */
.fee-stats-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* 横向滚动条配色统一（与主布局一致） */
.fee-stats-table-wrap::-webkit-scrollbar {
  height: 6px;
}

.fee-stats-table-wrap::-webkit-scrollbar-track {
  background: transparent;
}

.fee-stats-table-wrap::-webkit-scrollbar-thumb {
  background: #d9d9d9;
  border-radius: 3px;
}

.fee-stats-table-wrap::-webkit-scrollbar-thumb:hover {
  background: #b0b0b0;
}

.fee-stats-data-table {
  min-width: 600px;
}

/* 课费统计：老师列（首列）横向滚动时固定，本周/本月/本年三种视图一致 */
.fee-stats-data-table th:first-child,
.fee-stats-data-table td:first-child {
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--card-bg, #fff);
}
.fee-stats-data-table:not(.year-view) th:first-child,
.fee-stats-data-table:not(.year-view) td:first-child {
  border-right: 1px solid var(--border, #e0e0e0);
}

.fee-stats-data-table.year-view {
  min-width: 1400px;
}

/* 年视图：老师列 + 课时费列 固定在左侧，仅月份和收入横向滚动 */
.fee-stats-data-table.year-view th:first-child,
.fee-stats-data-table.year-view td:first-child {
  position: sticky;
  left: 0;
  z-index: 3;
  width: 160px;
  min-width: 160px;
  overflow: hidden;
  background: #f7f7f7;
}

.fee-stats-data-table.year-view td:first-child {
  background: #fff;
}

.fee-stats-data-table.year-view tbody tr:hover td:first-child {
  background: var(--success-bg);
}

.fee-stats-data-table.year-view th:nth-child(2),
.fee-stats-data-table.year-view td:nth-child(2) {
  position: sticky;
  left: 160px;
  z-index: 3;
  width: 110px;
  min-width: 110px;
  background: #f7f7f7;
}

.fee-stats-data-table.year-view td:nth-child(2) {
  background: #fff;
}

.fee-stats-data-table.year-view tbody tr:hover td:nth-child(2) {
  background: var(--success-bg);
}

/* sticky 列右侧分隔线：默认隐藏，hover 表格时显示，颜色 --border */
.fee-stats-data-table.year-view th:first-child::after,
.fee-stats-data-table.year-view td:first-child::after,
.fee-stats-data-table.year-view th:nth-child(2)::after,
.fee-stats-data-table.year-view td:nth-child(2)::after {
  content: '';
  position: absolute;
  right: -1px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--border, #e0e0e0);
  opacity: 0;
  transition: opacity 0.15s;
}

.fee-stats-table-wrap:hover .fee-stats-data-table.year-view th:first-child::after,
.fee-stats-table-wrap:hover .fee-stats-data-table.year-view td:first-child::after,
.fee-stats-table-wrap:hover .fee-stats-data-table.year-view th:nth-child(2)::after,
.fee-stats-table-wrap:hover .fee-stats-data-table.year-view td:nth-child(2)::after {
  opacity: 1;
}

.fee-stats-data-table th,
.fee-stats-data-table td {
  white-space: nowrap;
  padding: 10px 12px;
}

.fee-stat-total {
  font-weight: 700;
}

/* 可排序表头 */
.data-table th.sortable {
  cursor: pointer;
  user-select: none;
  transition: color .15s;
}

/* 老师费用明细 */
.teacher-fee-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0;
}

/* ===== 财务概览 ===== */
.finance-total-revenue-card {
  background: var(--card-bg);
  border-radius: var(--radius-lg);
  padding: 28px 32px;
  margin-bottom: 16px;
}
.finance-total-label {
  font-size: 14px;
  color: var(--text3);
  margin-bottom: 8px;
}
.finance-total-value {
  font-size: 36px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
}

/* ===== 财务概览（v2 极简版） ===== */
/* chart-card 基底（白底 / 圆角 / 下边距 / 内边距）已在「卡片体系」区统一定义，此处不再重复 */

/* 左右布局行（退费情况 + 退款率图表） */
.finance-dashboard-row {
  display: grid;
  gap: 16px;
  margin-bottom: 16px;
}

.finance-dashboard-row.row-refund {
  grid-template-columns: 1fr 1fr;
}

.finance-dashboard-row .card,
.finance-dashboard-row .chart-card {
  margin-bottom: 0;
}

.chart-card .stats-grid {
  margin-bottom: 0;
}

.chart-card .finance-profit-rate {
  margin-top: 12px;
  margin-bottom: 0;
}

.finance-section-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 16px;
  line-height: 1.2;
}

.stat-tag {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
  background: var(--danger-bg);
  color: var(--text-red);
  margin-left: 4px;
  background: rgba(239, 68, 68, 0.12);
  color: #dc2626;
}

.stat-unit {
  font-size: 14px;
  font-weight: 500;
  color: var(--text3);
  margin-left: 4px;
}

.stat-sub {
  font-size: 12px;
  color: var(--text-tertiary);
  line-height: 1.4;
}

.finance-profit-rate {
  font-size: 13px;
  color: var(--text3);
  margin-bottom: 4px;
}

.finance-refund-left {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.finance-refund-bottom {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  margin-top: 4px;
}

.finance-refund-desc-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.finance-refund-left .finance-refund-info {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.finance-refund-label {
  font-size: 14px;
  color: var(--text3);
  display: flex;
  align-items: center;
}

.finance-refund-value {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.2;
}

.finance-refund-desc {
  font-size: 13px;
  color: var(--text3);
}

/* 退费学员头像 */
.refund-avatars-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.refund-avatars {
  display: flex;
  align-items: center;
}

.refund-avatar-item {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid var(--bg);
  object-fit: cover;
  margin-left: -10px;
  background: #e5e7eb;
}

.refund-avatar-item:first-child {
  margin-left: 0;
}

.refund-avatars-more {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #f3f4f6;
  border: 2px solid var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--text);
  margin-left: -10px;
}

/* 黑色跳转按钮 */
.refund-goto-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #1a1a1a;
  border: none;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform 0.15s ease, background 0.15s ease;
}

.refund-goto-btn:hover {
  background: #333;
  transform: scale(1.05);
}

.refund-goto-btn:active {
  transform: scale(0.95);
}

/* 每月退款率趋势卡片：与 .card 组合使用（class="card finance-refund-chart"），
 * 内边距继承自 .card；此处仅重置底部 margin（在 .finance-dashboard-row 中不再额外留白） */
.finance-refund-chart {
  margin-bottom: 0;
}

.card-title-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.finance-refund-chart .card-title-wrap {
  margin-bottom: 8px;
}

.chart-legend {
  display: flex;
  align-items: center;
  gap: 16px;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text3);
}

.legend-marker {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 2px;
}

.finance-refund-chart .card-title {
  margin-bottom: 8px;
}

.chart-container {
  position: relative;
  width: 100%;
  height: 320px;
}
.chart-note {
  margin: 10px 0 0;
  font-size: 12px;
  color: var(--text-tertiary);
}

.admin-btn.small {
  padding: 6px 12px;
  font-size: 12px;
  height: auto;
  border-radius: var(--radius-sm);
  background: var(--bg-dark);
  color: var(--text-primary-dark);
}

/* 消息中心操作按钮：详情（灰底）与标记已读（绿底+勾）区分 */
.admin-btn.small:hover {
  background: var(--gret-bg-hover);
}
.admin-btn.small.mark-read {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--success-bg);
  color: var(--text-green);
}
.admin-btn.small.mark-read:hover {
  background: var(--success-bg-hover);
}

/* 列表内操作按钮（消息中心等列表行操作）：样式与 .admin-btn.small 一致 */
.admin-list-btn {
  padding: 6px 12px;
  height: auto;
  border: none;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
  /* background: var(--bg-dark); */
  border: 1px solid var(--border);
  cursor: pointer;
  transition: opacity .2s;
}
.admin-list-btn:hover {
  background: var(--bg-ant);
}
.admin-list-btn.mark-read {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--success-bg);
  color: var(--text-green);
}
.admin-list-btn.mark-read:hover {
  background: var(--success-bg-hover);
}

/* ===== 学生统计页 ===== */
.student-stats-cards {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.student-stat-card {
  flex: 1;
  min-width: 150px;
  padding: 16px 20px;
}
.student-stat-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.student-stat-label {
  font-size: 14px;
  color: var(--text3);
}
.student-stat-value {
  font-size: 24px;
  font-weight: 700;
  color: var(--text);
}
.student-stat-value.income {
  color: #18a058;
}
/* 学生状态样式复用 .accounts-status-dot（与账号列表一致） */
/* 学生行可展开（下钻本周明细） */
.stu-row { cursor: pointer; }
/* 选中(展开)与 hover 用同一颜色 */
.stu-row:hover td { background: var(--success-bg); }
.stu-row.expanded td { background: var(--success-bg); }
.stu-caret {
  color: var(--text-tertiary);
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  transition: transform 0.2s;
  transform: rotate(-90deg);
  margin-left: 6px;
}
.stu-caret.expanded { transform: rotate(0deg); }

.stu-expand-row > td {
  background: var(--card-bg);
  padding: 12px 24px 2px;
  border-top: none;
}
/* 展开明细行去掉 hover 效果，保持底色 */
.data-table tr.stu-expand-row:hover td { background: var(--card-bg); }
.stu-expand-loading, .stu-expand-empty { color: #999; font-size: 13px; padding: 8px 0; }

.stu-weekly-summary { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.stu-weekly-chip {
  font-size: 12px; padding: 3px 10px; border-radius: 12px;
  background: #f0f2f5; color: #555;
}
.stu-weekly-chip.upcoming { background: var(--primary); color: var(--text); }
.stu-weekly-chip.completed { background: var(--text); color: #fff; }
.stu-weekly-chip.cancelled { background: var(--danger); color: #fff; }

.stu-weekly-list { list-style: none; margin: 0; padding: 0; }
.stu-weekly-list li {
  display: flex; align-items: center; gap: 14px;
  padding: 7px 0; border-bottom: 1px solid #f0f2f5; font-size: 13px;
}
.stu-weekly-list li:last-child { border-bottom: none; }
.stu-wk-date { width: 150px; color: #333; }
.stu-wk-type { width: 70px; color: #888; }
.stu-wk-teacher { flex: 1; color: #333; }
/* 学生统计·本周明细：整行 hover 时老师名变绿，点击跳转该老师排课页 */
.stu-weekly-list li:hover .stu-wk-teacher.link { color: #52E56B; cursor: pointer; font-weight: 500; }
.stu-wk-status { padding: 2px 10px; border-radius: 10px; font-size: 12px; }
.stu-wk-status.upcoming { background: var(--primary); color: var(--text); }
.stu-wk-status.completed { background: var(--text); color: #fff; }
.stu-wk-status.cancelled { background: var(--danger); color: #fff; }
.mark-read-icon {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  display: inline-block;
  vertical-align: middle;
  color: var(--text-green);
}

/* 消息中心行操作：详情 + 标记已读 水平居中对齐 */
.notify-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* 表格操作按钮 */
.btn-table {
  padding: 4px 12px;
  border-radius: 14px;
  font-size: 12px;
  font-weight: 500;
  border: 1px solid var(--border);
  color: var(--text);
  background: #fff;
  transition: all 0.15s;
}

.btn-table:hover {
  background: var(--bg);
}

.btn-table.primary {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--text);
}

.btn-table.danger {
  color: var(--danger);
  border-color: rgba(245, 63, 63, 0.3);
}

.btn-table.danger:hover {
  background: rgba(245, 63, 63, 0.06);
}

/* 4/3列统计卡片 */
.stats-grid-4 { grid-template-columns: repeat(4, 1fr); }
.stats-grid-5 { grid-template-columns: repeat(5, 1fr); }
.stats-grid-3 { grid-template-columns: repeat(3, 1fr); }

/* ===== 超管个人设置 ===== */
.admin-profile-card {
  max-width: 560px;
  margin: 0 auto;
  padding: 32px;
}

.admin-profile-section {
  padding-bottom: 24px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--border);
}
.admin-profile-section:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.admin-profile-avatar {
  display: flex;
  align-items: center;
  gap: 16px;
}

.admin-avatar-wrap {
  position: relative;
  width: 64px;
  height: 64px;
  flex: 0 0 auto;
}

.admin-avatar-img {
  width: 64px;
  height: 64px;
  border-radius: 24%;
  background: var(--bg);
  display: block;
}

.admin-avatar-edit-btn {
  position: absolute;
  right: -4px;
  bottom: -4px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid var(--card-bg);
  background: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: background 0.15s;
}

.admin-avatar-edit-btn:hover {
  background: var(--primary-hover);
}

.admin-avatar-edit-btn:disabled {
  opacity: 0.6;
  cursor: default;
}

.admin-avatar-edit-btn svg {
  width: 12px;
  height: 12px;
  color: var(--text);
}

.admin-avatar-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.admin-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.admin-name {
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
}

.admin-name-edit-btn {
  border: none;
  background: transparent;
  padding: 2px;
  cursor: pointer;
  display: flex;
  align-items: center;
  opacity: 0.6;
  transition: opacity 0.15s;
}

.admin-name-edit-btn:hover {
  opacity: 1;
}

.admin-name-edit-btn svg {
  width: 15px;
  height: 15px;
  color: var(--text-secondary);
}

.admin-name-edit-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.admin-name-input {
  height: 34px;
  padding: 0 10px;
  font-size: 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card-bg);
  color: var(--text);
  outline: none;
}

.admin-name-input:focus {
  border-color: var(--primary);
}

.admin-role-badge {
  display: inline-block;
  padding: 3px 6px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
  background: var(--success-bg);
  border-radius: 4px;
  width: fit-content;
}

.admin-section-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 14px;
}

.admin-info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.admin-info-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.admin-info-label {
  font-size: 12px;
  color: var(--text3);
}

.admin-info-value {
  font-size: 14px;
  color: var(--text);
  font-weight: 500;
}

.admin-settings-list {
  display: flex;
  flex-direction: column;
}

.admin-setting-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  cursor: pointer;
  transition: opacity .15s;
}
.admin-setting-item:hover {
  opacity: .7;
}

.admin-setting-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.admin-setting-icon {
  font-size: 18px;
}

.admin-setting-icon-img {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  padding: 10px;
  background: var(--bg-ant);
  border-radius: 8px;
  box-sizing: content-box;
}

.admin-setting-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.admin-setting-label {
  font-size: 14px;
  color: var(--text);
}

.admin-setting-hint {
  font-size: 12px;
  color: var(--text3);
}

.admin-logout-btn {
  width: 100%;
  padding: 12px;
  border: 1px solid var(--danger);
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 500;
  color: var(--danger);
  background: #fff;
  cursor: pointer;
  transition: background .15s;
}
.admin-logout-btn:hover {
  background: rgba(245, 63, 63, 0.05);
}

/* ===== 账号角色管理页 ===== */
.accounts-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}
.accounts-tabs {
  display: flex;
  gap: 24px;
  background: transparent;
  border: none;
  padding: 0;
}
.accounts-tab {
  position: relative;
  display: flex;
  align-items: center;
  font-size: 20px;
  font-weight: 400;
  color: var(--text3);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: all .2s;
}
.accounts-tab:hover {
  color: var(--text);
  background: transparent;
}
.accounts-tab.active {
  color: var(--text);
  font-weight: 600;
  background: transparent;
}
.accounts-tab-panel {
  display: none;
}
.accounts-tab-panel.active {
  display: block;
}

/* 搜索 + 添加按钮（卡片内部） */
.accounts-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  gap: 16px;
}
.accounts-search-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
}
.accounts-search-input {
  width: 280px;
  height: 36px;
  padding: 0 12px 0 34px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
  outline: none;
  color: var(--text);
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E") 10px center no-repeat;
  transition: border-color 0.2s;
}
.accounts-search-input:focus {
  border-color: var(--primary);
}
.accounts-add-btns {
  display: flex;
  align-items: center;
  gap: 10px;
}
.accounts-add-btn {
  padding: 0px 16px;
  height: 34px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.2s, background 0.2s, border-color 0.2s;
}
.accounts-add-btn.primary {
  background: var(--bg-dark);
  color: var(--primary);
  border: 1.5px solid var(--border-dark);
}
.accounts-add-btn.outline {
  background: transparent;
  color: var(--text-green);
  border: 1.5px solid var(--bg-primary-dark);
}
.accounts-add-btn.primary:hover {
  background: var(--bg-dark-hover);
  border-color: var(--bg-dark-hover);
}
.accounts-add-btn.outline:hover {
  background: var(--bg-primary-dark);
  color: var(--text-white);
}

/* 账号表格 */
.accounts-table th {
  font-weight: 600;
}
.accounts-table td {
  padding: 10px 12px;
  vertical-align: middle;
}
.accounts-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  background: #f0f0f0;
  flex-shrink: 0;
}
.accounts-name-cell {
  display: flex;
  align-items: center;
  gap: 8px;
}
.accounts-role-badge {
  display: inline-block;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
}

/* Switch 开关 */
.accounts-switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 22px;
}
.accounts-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.accounts-switch-slider {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background: #d9d9d9;
  border-radius: 22px;
  transition: background 0.3s;
}
.accounts-switch-slider::before {
  content: '';
  position: absolute;
  height: 18px;
  width: 18px;
  left: 2px;
  bottom: 2px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.3s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.accounts-switch input:checked + .accounts-switch-slider {
  background: var(--bg-dark);
}
.accounts-switch input:checked + .accounts-switch-slider::before {
  transform: translateX(18px);
}
.accounts-switch input:disabled + .accounts-switch-slider {
  opacity: 0.4;
  cursor: not-allowed;
}

.accounts-pwd-cell {
  color: var(--text);
  font-size: 13px;
  font-family: monospace;
  user-select: all;
}

/* 操作列 */
.accounts-actions {
  position: relative;
  display: flex;
  gap: 8px;
}
.accounts-more-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 4px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px;
  transition: background 0.2s;
}
.accounts-more-btn:hover {
  background: #f0f0f0;
}
.accounts-more-btn img {
  width: 16px;
  height: 16px;
  opacity: 0.5;
}
.accounts-more-btn:hover img {
  opacity: 0.8;
}

/* 更多下拉菜单 */
.accounts-more-menu {
  position: fixed;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.12);
  padding: 4px;
  min-width: 120px;
  z-index: 1000;
}
.accounts-more-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 14px;
  background: transparent;
  border: none;
  font-size: 13px;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  border-radius: 4px;
  transition: background 0.15s;
}
.accounts-more-item:hover {
  background: #f5f5f5;
}
.accounts-more-item[data-action="delete"] {
  color: #f5222d;
}
.accounts-more-item[data-action="delete"]:hover {
  background: #fff1f0;
}

/* 角色 tab */
.roles-table th {
  font-weight: 600;
}
.roles-table td {
  padding: 14px;
  vertical-align: middle;
}
.accounts-status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 6px;
}
.accounts-status-dot.active { background: #52c41a; }
.accounts-status-dot.disabled { background: #d9d9d9; }

.accounts-empty {
  text-align: center;
  padding: 48px;
  color: var(--text-tertiary);
  font-size: 14px;
}

/* ===== 编辑账号弹窗 ===== */
.account-edit-modal-content {
  width: 420px;
  padding: 0;
}
.account-edit-body {
  padding: 20px 28px 24px;
}
.account-edit-avatar-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
  padding: 16px;
  background: #f9fafb;
  border-radius: 8px;
}
.account-edit-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  background: #f0f0f0;
}
.account-edit-name {
  display: block;
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
}
.account-edit-id {
  display: block;
  font-size: 12px;
  color: var(--text-tertiary);
  margin-top: 2px;
}
.account-edit-role-badge {
  display: inline-block;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 6px;
  background: #eef2ff;
  color: #4f46e5;
}
.form-hint {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: var(--text-tertiary);
}
.account-edit-body .form-group {
  margin-bottom: 16px;
}
.account-edit-body .form-label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--text3);
  margin-bottom: 6px;
}

/* ===== 添加账号弹窗 ===== */
.account-add-modal-content {
  width: 720px;
  max-height: 85vh;
  overflow-y: auto;
  padding: 0;
}
.account-add-body {
  padding: 0 28px 24px;
}
.account-add-role-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 20px;
}
.account-add-role-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
}
.account-add-role-btns {
  display: flex;
  gap: 10px;
}
.account-add-role-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border: 2px solid var(--border);
  border-radius: 10px;
  background: #fff;
  font-size: 14px;
  font-weight: 500;
  color: var(--text3);
  cursor: pointer;
  transition: all .2s;
}
.account-add-role-btn:hover {
  border-color: #b7ebc6;
  color: var(--text);
}
.account-add-role-btn.active {
  border-color: var(--primary, #52c41a);
  background: #f6ffed;
  color: #389e0d;
  font-weight: 600;
}
.account-add-role-icon {
  flex-shrink: 0;
  color: inherit;
}
.account-add-form .form-section {
  margin-bottom: 16px;
}
.account-add-form .form-section-title {
  margin-bottom: 12px;
}
.account-add-avatar-section {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
  padding: 16px;
  background: #f9fafb;
  border-radius: 8px;
}
.account-add-avatar-preview {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
  background: #f0f0f0;
  flex-shrink: 0;
}
.account-add-avatar-actions {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.account-add-avatar-label {
  font-size: 14px;
  font-weight: 600;
}
.account-add-avatar-hint {
  font-size: 12px;
  color: var(--text-tertiary);
}
.account-add-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  margin-top: 8px;
}
.account-add-actions .accounts-add-btn {
  min-width: 100px;
}

/* 状态文字 */
.accounts-status-text {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 500;
}
.accounts-status-text.active {
  background: rgba(84, 220, 112, 0.12);
  color: #3dbd5a;
}
.accounts-status-text.disabled {
  background: rgba(153, 153, 153, 0.12);
  color: #999;
}

/* 操作列（switch + more） */
.accounts-action-cell {
  white-space: nowrap;
}
.accounts-action-inner {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  vertical-align: middle;
}

/* ===== 修改密码弹窗 ===== */
.password-modal-content {
  width: 400px;
  padding: 16px 28px 24px;
}

.password-modal-body .form-group {
  margin-bottom: 16px;
}

.password-modal-body .form-label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--text3);
  margin-bottom: 6px;
}

.password-modal-body .form-input {
  width: 100%;
  height: 40px;
  padding: 0 40px 0 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 14px;
  background: var(--card-bg);
  color: var(--text);
}

.password-modal-body .form-input:focus {
  outline: none;
  border-color: var(--border-primary-dark);
}

.password-modal-body .password-wrap {
  position: relative;
}

.password-toggle-modal {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px;
  opacity: 0.5;
  transition: opacity 0.2s;
}
.password-toggle-modal:hover { opacity: 0.8; }

/* ===== 全局提示 Toast（顶部中央，用于保存/提交结果） ===== */
.global-toast {
  position: fixed;
  top: 24px;
  left: 50%;
  z-index: 10000;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  border-radius: var(--radius-md);
  font-size: 14px;
  line-height: 1.5;
  pointer-events: auto;
  box-shadow: var(--shadow);
  transform: translateX(-50%) translateY(-20px);
  transition: transform 0.3s ease, opacity 0.3s ease;
  opacity: 0;
  max-width: 400px;
}
.global-toast.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

/* ===== 表单字段校验错误（输入框下方红字） ===== */
.field-error {
  margin: 6px 0 0;
  font-size: 12px;
  line-height: 1.4;
  color: var(--text-red);
  min-height: 0;
}
.field-error:empty {
  display: none;
}
.global-toast--success {
  background: var(--success-bg);
  border: 1px solid var(--primary);
  color: var(--text-green);
}
.global-toast--success .toast-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  filter: brightness(0) saturate(100%) invert(44%) sepia(96%) saturate(1627%) hue-rotate(101deg) brightness(94%) contrast(82%);
}
.global-toast--error {
  background: var(--danger-bg);
  border: 1px solid var(--danger);
  color: var(--text-red);
}
.global-toast--error .toast-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  filter: brightness(0) saturate(100%) invert(45%) sepia(98%) saturate(2024%) hue-rotate(346deg) brightness(99%) contrast(95%);
}

/* 重置密码弹窗 */
.reset-pwd-tip {
  font-size: 13px;
  line-height: 1.6;
  color: var(--text3);
  margin: 0 0 16px;
}
.reset-pwd-account {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  padding: 8px 12px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.reset-pwd-account + .form-input,
.password-modal-body #account-reset-pwd-value {
  font-family: 'SF Mono', 'Roboto Mono', Menlo, Consolas, monospace;
  font-size: 15px;
  letter-spacing: 1px;
  font-weight: 600;
  color: var(--text);
  background: var(--bg-soft);
}


.password-error {
  font-size: 12px;
  color: var(--danger);
  min-height: 16px;
  margin: -4px 0 0;
}

/* 弹窗内确定按钮统一样式 */
.modal-content .admin-btn.primary {
  height: 36px;
  padding: 0 18px;
  background: var(--bg-dark);
  color: var(--primary);
  border: none;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}
.modal-content .admin-btn.primary:hover {
  opacity: 0.85;
}

/* ===== 老师编辑页 ===== */
/* 老师编辑页：左侧固定页头 + 右侧可滚动表单
 * 间距规范（统一约定）：
 *   - 组与组之间（form-section / edit-form-actions 分隔线场景）：24px，用 margin-bottom / margin-top
 *   - 组内小板块之间（form-group / 表单控件 / schedule-time-section）：20px，用 margin-bottom
 *   - 分隔线与内容之间：20px，用 padding-bottom / padding-top */
#page-admin-teacher-edit.page.active {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

.edit-page-header {
  position: sticky;
  top: 24px;
  flex: 0 0 160px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  margin-bottom: 0;
}

#page-admin-teacher-edit .teacher-edit-card {
  flex: 1 1 auto;
  max-width: 680px;
  margin: 0;
}

.edit-page-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
}

.teacher-edit-card {
  max-width: 680px;
  margin: 0 auto;
  padding: 32px;
}

.edit-avatar-section {
  display: flex;
  align-items: center;
  gap: 20px;
  padding-bottom: 20px; /* 内容到分隔线的距离 */
  margin-bottom: 24px;  /* 分隔线到下一组（组间距 24px） */
  border-bottom: 1px solid var(--border);
}

.edit-avatar-preview {
  width: 80px;
  height: 80px;
  border-radius: 16%;
  object-fit: cover;
}

/* 空头像占位 — 新增老师时未上传头像 */
.edit-avatar-preview[src=""],
.edit-avatar-preview:not([src]) {
  border-style: dashed;
  border-color: var(--text-tertiary);
  background: var(--bg-secondary) center / 28px 28px no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M23 19a2 2 0 01-2 2H3a2 2 0 01-2-2V8a2 2 0 012-2h4l2-3h6l2 3h4a2 2 0 012 2z'/%3E%3Ccircle cx='12' cy='13' r='4'/%3E%3C/svg%3E");
}

.edit-avatar-actions {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.edit-avatar-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
}

.edit-avatar-hint {
  font-size: 12px;
  color: var(--text-tertiary);
}

.form-section {
  margin-bottom: 24px; /* 组与组之间 24px */
  border-bottom: 1px solid var(--border);
}
.form-section:last-of-type {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0;
}

/* 介绍视频板块和老师介绍板块去掉底部边框 */
.form-section:has(.edit-video-dropzone),
.form-section:has(#edit-bio) {
  border-bottom: none;
}

/* 老师证书板块：上方补一条分隔线（上一个板块无底部边框）；
 * 下方内容到分隔线的距离与教学信息一致（20px，见间距规范） */
.form-section:has(.edit-cert-dropzone) {
  border-top: 1px solid var(--border);
  padding-top: 20px;
  padding-bottom: 20px;
}

.form-section-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 14px;
}

.form-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0px 16px; /* 行间距由 form-group 的 margin-bottom 提供，列间距 16px */
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.form-group-full {
  grid-column: 1 / -1;
}

.form-label {
  font-size: 13px;
  color: var(--text3);
  font-weight: 500;
}
.form-label .required {
  color: var(--danger);
}

.form-input,
.form-select,
.form-textarea {
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 14px;
  color: var(--text);
  background: #fff;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
  font-family: inherit;
  box-sizing: border-box;
}
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(22, 119, 255, 0.1);
}

.form-select {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%23999' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
}

.form-textarea {
  height: auto;
  min-height: 80px;
  padding: 10px 12px;
  resize: vertical;
}

/* ===== 排课时间多选网格 =====
 * 间距规范：上方间距由 .form-group 的 margin-bottom:20px 提供（组内小板块间距 20px），
 *           下方 padding-bottom:20px 保证网格到分隔线的距离 */
.schedule-time-section {
  padding-bottom: 20px;
}
.schedule-time-section .form-hint {
  font-size: 12px;
  color: var(--text-tertiary);
  margin-bottom: 10px;
}
.schedule-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.schedule-period-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
}
.schedule-slots-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.schedule-slot-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 72px;
  height: 36px;
  padding: 0 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--text);
  font-size: 13px;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
}
.schedule-slot-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
}
.schedule-slot-btn.selected {
  border-color: var(--primary);
  background: var(--success-bg);
  color: var(--primary);
  font-weight: 500;
}

/* ===== TDesign TagInput 标签输入框 ===== */
.tag-input-container {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: #fff;
  cursor: text;
  transition: border-color .15s, box-shadow .15s;
  box-sizing: border-box;
}
.tag-input-container:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(22, 119, 255, 0.1);
}

.tag-input-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.tag-input-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 6px;
  font-size: 12px;
  color: var(--text);
  background: var(--success-bg);
  border-radius: 4px;
  white-space: nowrap;
  line-height: 1;
  cursor: grab;
  user-select: none;
}
.tag-input-tag:active {
  cursor: grabbing;
}
.tag-input-tag.tag-dragging {
  opacity: 0.45;
}
.tag-drag-hint {
  font-size: 12px;
  color: var(--text-tertiary);
  margin-top: 4px;
}
.tag-input-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border: none;
  background: none;
  color: var(--text3);
  cursor: pointer;
  border-radius: 2px;
  padding: 0;
  opacity: 0.6;
  transition: opacity .15s, background .15s;
}
.tag-input-close:hover {
  opacity: 1;
  background: rgba(22, 119, 255, 0.15);
}

.tag-input-field {
  flex: 1;
  min-width: 140px;
  height: 20px;
  line-height: 20px;
  border: none;
  outline: none;
  font-size: 14px;
  color: var(--text);
  background: transparent;
  font-family: inherit;
  padding: 0 4px;
}
.tag-input-field::placeholder {
  color: var(--text-placeholder, #c0c4cc);
}

/* 可选标签建议区 */
.tag-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.tag-suggestion-chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  font-size: 12px;
  color: var(--text3);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  cursor: pointer;
  transition: all .15s;
  user-select: none;
  line-height: 1.5;
}

.tag-suggestion-chip:hover {
  color: var(--primary);
  border-color: var(--primary);
  background: rgba(22, 119, 255, 0.04);
}

.tag-suggestion-chip.selected {
  opacity: .5;
  cursor: default;
  pointer-events: none;
}

/* 视频上传 */
/* 视频拖拽上传 */
.edit-video-icon {
  color: var(--text-tertiary, #bbb);
  flex-shrink: 0;
}
.edit-video-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 120px;
  padding: 12px 24px;
  border: 2px dashed var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-page, #fafafa);
  cursor: pointer;
  transition: border-color .2s, background .2s;
  text-align: center;
}
.edit-video-dropzone:hover,
.edit-video-dropzone.dragover {
  border-color: var(--primary);
  background: var(--success-bg);
}
.edit-video-dropzone.has-video {
  border-style: dashed;
  border-color: var(--border);
  background: var(--bg);
}
.edit-video-dropzone.has-video:hover {
  border-color: var(--border-primary-dark);
  background: var(--success-bg);
}
.edit-video-dz-text {
  font-size: 14px;
  color: var(--text);
  margin: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.edit-video-dz-hint {
  font-size: 12px;
  color: var(--text-tertiary, #bbb);
  margin: 0;
}

/* 证书上传 */
.edit-cert-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 96px;
  padding: 12px 24px;
  border: 2px dashed var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-page, #fafafa);
  cursor: pointer;
  transition: border-color .2s, background .2s;
  text-align: center;
}
.edit-cert-dropzone:hover {
  border-color: var(--primary);
  background: var(--success-bg);
}
.edit-cert-plus {
  color: var(--text-tertiary, #bbb);
}
.edit-cert-dz-text {
  font-size: 14px;
  color: var(--text);
  margin: 0;
}
.edit-cert-dz-hint {
  font-size: 12px;
  color: var(--text-tertiary, #bbb);
  margin: 6px 0 0;
}
.edit-cert-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 12px;
}
.edit-cert-item {
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--bg);
  cursor: pointer;
}
.edit-cert-thumb {
  width: 100%;
  aspect-ratio: 6 / 4;
  object-fit: cover;
  display: block;
  background: #f0f0f0;
}
.edit-cert-file {
  width: 100%;
  aspect-ratio: 6 / 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--text-tertiary, #888);
}
.edit-cert-file svg { color: var(--primary); }
.edit-cert-remove {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: rgba(0,0,0,.55);
  color: #fff;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
}

/* 证书图片预览 lightbox */
.cert-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.85);
}
.cert-lightbox__inner {
  position: relative;
  max-width: 86vw;
  max-height: 86vh;
}
.cert-lightbox__inner img {
  max-width: 86vw;
  max-height: 86vh;
  object-fit: contain;
  border-radius: 4px;
  background: #000;
}
.cert-lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
  transition: background .15s;
}
.cert-lightbox__nav:hover {
  background: rgba(255, 255, 255, 0.3);
}
.cert-lightbox__prev { left: -60px; }
.cert-lightbox__next { right: -60px; }
.cert-lightbox__counter {
  position: absolute;
  bottom: -34px;
  left: 0;
  right: 0;
  text-align: center;
  color: rgba(255, 255, 255, 0.85);
  font-size: 13px;
}

/* 视频预览 */
.edit-video-preview {
  margin-top: 12px;
  position: relative;
}

.edit-video-remove {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
  padding: 4px 12px;
  font-size: 13px;
  color: var(--danger);
  background: var(--danger-bg);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all .15s;
}

.edit-video-remove:hover {
  background: rgba(245, 63, 63, 0.2);
}

/* 老师详情弹窗 - 证书展示 */
.teacher-detail-cert-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 12px;
}
.teacher-detail-cert-item {
  position: relative;
}
.teacher-detail-cert-thumb {
  width: 100%;
  aspect-ratio: 6 / 4;
  object-fit: cover;
  display: block;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: #f0f0f0;
  cursor: pointer;
}
.teacher-detail-cert-file {
  width: 100%;
  aspect-ratio: 6 / 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--text-tertiary, #888);
  font-size: 12px;
}
.teacher-detail-cert-file svg { color: var(--primary); }

/* 分享图大图预览 lightbox（点击缩略图打开，点击遮罩关闭） */
.img-preview {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.85);
}
.img-preview img {
  max-width: 92vw;
  max-height: 92vh;
  object-fit: contain;
  border-radius: 4px;
}
}

/* 表单操作按钮 */
.edit-form-actions {
  display: flex;
  justify-content: flex-end;
  padding-top: 20px;  /* 分隔线到按钮的距离 */
  border-top: 1px solid var(--border);
  margin-top: 24px;   /* 与上方内容（组间距 24px） */
}

.edit-form-actions .admin-btn {
  min-width: 100px;
  /* padding: 10px 24px; */
}
/* 表单底部两个按钮之间的间距（12px）：独立声明，不依赖父容器 gap，便于单独调整 */
.edit-form-actions .admin-btn + .admin-btn {
  margin-left: 12px;
}

/* ===== 学生区域分布 ===== */
.card-subtitle {
  font-size: 12px;
  color: var(--text-tertiary);
  margin-top: -8px;
  margin-bottom: 16px;
}

.region-distribution {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.region-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.region-name {
  flex: 0 0 48px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  text-align: right;
}

.region-bar-wrap {
  flex: 1;
  height: 28px;
  background: var(--bg);
  border-radius: 6px;
  overflow: hidden;
}

.region-bar {
  height: 100%;
  background: linear-gradient(90deg, #54DC70, #76E38D);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 10px;
  min-width: 40px;
  transition: width .3s ease;
}

.region-bar-label {
  font-size: 11px;
  color: #fff;
  font-weight: 500;
  white-space: nowrap;
}

.region-pct {
  flex: 0 0 36px;
  font-size: 12px;
  color: var(--text);
  text-align: left;
}

/* ===== 超管日历视图 ===== */
.admin-calendar-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.admin-calendar-week-nav {
  display: flex;
  align-items: center;
  gap: 12px;
}

.admin-calendar-week-label {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  min-width: 200px;
  text-align: center;
}

.admin-calendar-card {
  background: #fff;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  overflow: hidden;
}

.admin-calendar-scroll {
  overflow-x: auto;
  scrollbar-width: thin;
}

.admin-calendar-scroll::-webkit-scrollbar {
  height: 6px;
}

.admin-calendar-scroll::-webkit-scrollbar-track {
  background: #f7f7f7;
}

.admin-calendar-scroll::-webkit-scrollbar-thumb {
  background: #d9d9d9;
  border-radius: 3px;
}

.admin-calendar-scroll::-webkit-scrollbar-thumb:hover {
  background: #b0b0b0;
}

.admin-calendar-grid {
  display: flex;
  flex-direction: row;
  min-width: fit-content;
}

/* 时间列 */
.cal-time-col {
  width: 70px;
  flex-shrink: 0;
  border-right: 1px solid var(--border);
  background: #f7f7f7;
}

.cal-time-header {
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  font-weight: 500;
  color: var(--text3);
}

.cal-time-cell {
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  font-weight: 400;
  color: var(--text3);
}

/* 日期列 */
.cal-day-col {
  flex: 1;
  min-width: 150px;
  flex-shrink: 0;
  border-right: 1px solid var(--border);
}

.cal-day-col:last-child {
  border-right: none;
}

.cal-day-col.today {
  background: rgba(82, 229, 107, 0.04);
}

.cal-day-header {
  height: 58px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border-bottom: 1px solid var(--border);
  padding: 0 8px;
  font-size: 13px;
  font-weight: 400;
  color: var(--text);
}

.cal-day-header .cal-today-badge {
  font-weight: 700;
}

.cal-day-header .cal-day-weekday {
  font-size: 12px;
  color: var(--text3);
}

.cal-day-cell {
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid var(--border);
  padding: 3px 4px;
  overflow: hidden;
}

/* 学生 chip — 匹配教师端 class-card 风格 */
.cal-student-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 6px 3px 3px;
  background: var(--success-bg);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: transform 0.15s, background 0.15s;
  max-width: 100%;
  overflow: hidden;
}

.cal-student-chip:hover {
  background: rgba(82, 229, 107, 0.2);
  transform: translateY(-1px);
}

.cal-chip-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.cal-chip-name {
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}

.cal-chip-badge {
  font-size: 10px;
  font-weight: 500;
  padding: 1px 6px;
  border-radius: 10px;
  line-height: 1.4;
  flex-shrink: 0;
  white-space: nowrap;
}

.cal-chip-badge.upcoming {
  background: rgba(82, 229, 107, 0.2);
  color: #2ea04a;
}

.cal-chip-badge.completed {
  background: rgba(26, 26, 26, 0.08);
  color: var(--text3);
}

.cal-chip-badge.cancelled {
  background: rgba(245, 63, 63, 0.1);
  color: #f53f3f;
}

/* ===== 老师排课子页面 ===== */

/* 全屏突破 page-container 限制 */
.ts-fullpage.active {
  position: fixed;
  top: 56px;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  display: block;
  background: #fff;
}

.ts-layout {
  display: flex;
  gap: 0;
  height: 100%;
  overflow: hidden;
}

.ts-sidebar {
  width: 220px;
  flex-shrink: 0;
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  background: #ffffff;
}

.ts-sidebar-title {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 54px; 
  padding: 0px 16px;
  border-bottom: 1px solid var(--border);
}

.ts-back-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  font-size: 13px;
  color: var(--text);
  background: var(--primary);
  cursor: pointer;
  border-radius: var(--radius-md);
  transition: all .15s;
  flex-shrink: 0;
}

.ts-back-btn:hover {
  opacity: 0.7;
}

.ts-title-text {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.ts-sidebar-search {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 18px;
  height: 46px;
  border-bottom: 1px solid var(--border);
  background: #fff;
}

.ts-search-icon {
  flex-shrink: 0;
}

.ts-search-input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 13px;
  color: var(--text-tertiary);
  background: transparent;
  min-width: 0;
}

.ts-search-input::placeholder {
  color: var(--text-muted);
}

.ts-empty-hint {
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
  padding: 24px 0;
}

.ts-teacher-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
  scrollbar-width: thin;
}

.ts-teacher-list::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}

.ts-teacher-list::-webkit-scrollbar-thumb {
  background: #d9d9d9;
  border-radius: 2px;
}

.ts-teacher-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all .15s;
}

.ts-teacher-item:hover {
  background: var(--bg-ant);
}

.ts-teacher-item.selected {
  background: var(--bg-ant-hover);
}

.ts-teacher-avatar {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--bg);
  object-fit: cover;
}

.ts-teacher-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ts-teacher-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ts-teacher-country {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-primary);
}

.ts-teacher-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text2);
}

.ts-teacher-meta-divider {
  font-size: 11px;
  color: var(--border);
}

.ts-teacher-price {
  font-size: 11px;
  color: var(--text-primary);
  font-weight: 500;
}

.ts-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding-top: 54px;
}

.ts-calendar-toolbar {
  position: fixed;
  top: 56px;
  left: 220px;
  width: calc(100% - 220px);
  z-index: 50;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 54px;
  padding: 8px 20px;
  border-bottom: 1px solid var(--border);
  background: #fff;
}

.ts-week-nav {
  grid-column: 2;
  display: flex;
  align-items: center;
  gap: 12px;
  justify-self: center;
}

.ts-calendar-toolbar > .admin-btn {
  grid-column: 3;
  justify-self: end;
  height: 28px;
  padding: 0px 10px;
}

.ts-week-label-wrap {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  background: #f9f9f9;
  min-width: 186px;
  justify-content: center;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: var(--radius-md);
  transition: background .15s;
  position: relative;
}

.ts-week-label-wrap:hover {
  background: rgba(0, 0, 0, 0.04);
}

.ts-week-label-text {
  user-select: none;
}


/* 自定义日期选择弹窗 */
.ts-date-picker {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) scale(0.96);
  width: 280px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  padding: 14px;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transform-origin: top center;
  transition: opacity .15s, transform .15s, visibility .15s;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.ts-date-picker.open {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) scale(1);
}

.ts-date-picker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  padding: 0 2px;
}

.ts-picker-nav {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--text3);
  font-size: 14px;
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: background .15s, color .15s;
  padding: 0;
  line-height: 1;
}

.ts-picker-nav:hover {
  background: var(--bg-secondary);
  color: var(--text);
}

.ts-picker-month {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}

.ts-date-picker-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  margin-bottom: 6px;
}

.ts-date-picker-weekdays span {
  text-align: center;
  font-size: 13px;
  color: var(--text3);
  padding: 6px 0;
  font-weight: 500;
}

.ts-date-picker-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.ts-picker-day {
  position: relative;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  border-radius: 50%;
  cursor: pointer;
  transition: background .15s, color .15s;
  font-size: 14px;
  color: var(--text);
}

.ts-picker-day:hover:not(.selected):not(.other-month) {
  background: rgba(22, 119, 255, 0.08);
}

.ts-picker-day.other-month {
  color: var(--text-muted);
}

.ts-picker-day.today .ts-picker-day-num {
  position: relative;
}

.ts-picker-today-dot {
  position: absolute;
  bottom: 5px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--primary);
}

.ts-picker-day.selected {
  background: var(--primary);
  color: #fff;
}

.ts-picker-day.selected .ts-picker-today-dot {
  background: #fff;
}

.ts-picker-today {
  width: 100%;
  margin-top: 10px;
  padding: 8px;
  border: none;
  background: transparent;
  color: var(--primary);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  border-radius: var(--radius-md);
  transition: background .15s;
}

.ts-picker-today:hover {
  background: rgba(22, 119, 255, 0.06);
}

.ts-calendar-card {
  flex: 1;
  overflow: visible;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.ts-calendar-scroll {
  flex: 1;
  overflow: auto;
  overscroll-behavior-y: none;
  scrollbar-width: thin;
}

.ts-calendar-scroll::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}

.ts-calendar-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.ts-calendar-scroll::-webkit-scrollbar-thumb {
  background: #d9d9d9;
  border-radius: 3px;
}

.ts-calendar-scroll::-webkit-scrollbar-thumb:hover {
  background: #b0b0b0;
}

.ts-calendar-grid {
  display: flex;
  flex-direction: row;
  min-width: fit-content;
}

/* 时间列 sticky 固定（复用老师端 .time-column 结构） */
.ts-calendar-grid .time-column {
  position: sticky;
  left: 0;
  z-index: 10;
  background: #f7f7f7;
  flex-shrink: 0;
  width: 72px;
}

.ts-calendar-grid .time-column .time-header-cell {
  background: #f7f7f7;
}

/* 日期列区域适配 TS 全屏宽度 */
.ts-calendar-grid .day-columns-wrap {
  flex: 1;
  overflow: visible;
}

.ts-calendar-grid .day-columns {
  display: grid;
  grid-template-columns: repeat(7, minmax(110px, 1fr));
  min-width: 770px;
}

/* TS 排课表头固定在顶部 */
.ts-calendar-grid .day-header-cell {
  position: sticky;
  top: 0;
  z-index: 5;
  background: #fff;
}

.ts-calendar-grid .time-header-cell {
  position: sticky;
  top: 0;
  z-index: 15;
  background: #f7f7f7;
}

.ts-calendar-grid .day-header-cell.highlight {
  position: sticky;
  top: 0;
  background: var(--bg-green);
}

/* 老师排课子页面响应式（仅极小屏，iPad 及以上走桌面布局） */
@media (max-width: 767px) {
  .ts-fullpage.active {
    top: 56px;
  }
  .ts-layout {
    flex-direction: column;
  }
  .ts-sidebar {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--border);
    /* 容纳完整卡片（头像36 + name14 + country11 + meta行 ≈ 105px），
       加上标题54 + 搜索46 + 列表padding24 ≈ 126px 固定栏 → 留 ~240px 给侧栏 */
    max-height: 240px;
  }
  .ts-teacher-list {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 8px;
    padding: 12px;
  }
  .ts-teacher-item {
    flex-shrink: 0;
    flex-direction: column;
    gap: 4px;
    padding: 8px 12px;
    width: 96px;
    overflow: hidden;
    text-align: center;
  }
  /* H5：限制姓名/地区宽度，超长末尾省略号，不溢出选中背景 */
  .ts-teacher-info {
    width: 100%;
    min-width: 0;
    overflow: hidden;
  }
  .ts-teacher-name {
    max-width: 100%;
  }
  .ts-teacher-country {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  /* 选中态：文字/头像与灰色背景边缘留出更充裕的边距 */
  .ts-teacher-item.selected {
    padding: 12px 14px;
  }
  .ts-teacher-meta {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 2px;
    font-size: 10px;
  }
  /* H5 卡片窄：地区与价格常上下两行，隐藏中间的竖分隔线 */
  .ts-teacher-meta-divider {
    display: none;
  }
  .ts-calendar-grid .time-column {
    position: sticky;
    left: 0;
    z-index: 10;
    background: #fff;
  }
  .ts-calendar-toolbar {
    position: sticky;
    top: 56px;
    left: auto;
    width: 100%;
  }
  /* H5：工具栏改为 sticky 已在文档流内，去掉主区多余的 54px 上内边距（避免日期栏上方留白过大） */
  /* 关键：min-height:0 让 .ts-main 在 column flex 父中能收缩到 flex:1 分配的高度，
     否则 min-height:auto 会按内容撑开，导致 .ts-calendar-card/calender-scroll 撑到内容高度、
     .ts-layout overflow:hidden 裁掉 20:00+、且 scroll 容器无溢出无法滚（时间被遮） */
  .ts-main {
    padding-top: 0;
    min-height: 0;
  }
}

/* ===== 响应式 ===== */
@media (max-width: 1024px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .stats-grid-4, .stats-grid-5, .stats-grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }
  .dashboard-section {
    grid-template-columns: 1fr;
  }
  .teacher-cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .finance-dashboard-row {
    grid-template-columns: 1fr;
  }
  .finance-total-value {
    font-size: 28px;
  }
}

@media (max-width: 768px) {
  .main-content {
    margin-left: 0;
  }
  .mobile-nav {
    display: none;
  }
  .topbar-menu-btn {
    display: flex;
  }
  .page-container {
    padding: 16px 16px 90px;
  }
  .topbar {
    padding: 0 16px;
  }
  .topbar-nav {
    display: none;
  }
  .user-info {
    display: none;
  }
  .stats-grid {
    grid-template-columns: 1fr;
  }
  /* 仪表盘前4张统计卡：H5 与学生统计页一致，2×2 排列 */
  .stats-grid.stats-grid-4 {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  .home-layout {
    flex-direction: column;
    height: auto;
    max-height: none;
    min-height: auto;
  }
  .home-main {
    height: auto;
    overflow-y: visible;
  }
  .home-sidebar {
    flex: none;
    width: 100%;
    height: auto;
    max-height: none;
    overflow: visible;
  }
  .home-stats-row {
    flex-direction: column;
    gap: 10px;
  }
  .home-next-class {
    flex: none;
  }
  .home-calendar-panel {
    max-height: none;
  }
  .home-cal-course-list {
    flex: 1 1 auto;
    max-height: 360px;
  }
  .home-cal-top {
    padding: 12px 14px 8px;
  }
  .schedule-day-group.today {
    margin: 0 -16px;
    padding: 14px 16px;
  }
  .schedule-day-item {
    flex-wrap: wrap;
    gap: 6px;
  }
  .schedule-day-item-time {
    min-width: 72px;
  }
  .form-row {
    grid-template-columns: 1fr;
  }
  .schedule-grid {
    grid-template-columns: 56px repeat(7, minmax(120px, 1fr));
  }
  .calendar-body {
    flex-direction: column;
    gap: 16px;
  }
  .day-detail-panel {
    width: 100%;
    position: static;
    max-height: none;
  }
  .date-strip {
    gap: 8px;
  }
  .date-cell {
    width: 56px;
    height: 76px;
  }
  .date-cell .date-date {
    font-size: 14px;
  }
  .admin-calendar-toolbar {
    flex-direction: column;
    align-items: stretch;
  }
  .admin-calendar-week-label {
    min-width: auto;
    font-size: 13px;
  }
  .teacher-cards-grid {
    grid-template-columns: 1fr;
  }
  .teacher-filter-bar {
    flex-direction: column;
    align-items: stretch;
  }
  .teacher-filter-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 4px;
  }
  .cal-day-col {
    min-width: 120px;
  }
  .cal-time-cell,
  .cal-time-header,
  .cal-day-cell,
  .cal-day-header {
    font-size: 12px;
  }
  /* 首页响应式 */
  .home-stats-row {
    flex-direction: column;
    gap: 10px;
  }
  .home-next-class {
    flex: none;
    width: 100%;
  }
  .home-charts-row {
    flex-direction: column;
    gap: 10px;
  }
  .home-stat-value {
    font-size: 22px;
  }
  .home-next-info {
    font-size: 18px;
  }

  /* ===== H5 修复：老师管理搜索框宽度与卡片对齐（占满整行） ===== */
  .teacher-filter-right { width: 100%; }
  .teacher-filter-right .search-box { width: 100%; }
  .teacher-search-input { width: 100%; min-width: 0; }

  /* ===== H5 修复：编辑老师页 返回按钮与表单改为上下结构（返回在顶，表单占满） ===== */
  #page-admin-teacher-edit.page.active { display: block; }
  #page-admin-teacher-edit .edit-page-header {
    position: static;
    flex: none;
    width: 100%;
    margin-bottom: 16px;
  }
  #page-admin-teacher-edit .teacher-edit-card { max-width: 100%; }

  /* ===== H5 修复：老师详情弹窗全屏 + 左右边距统一为 16px ===== */
  #teacher-detail-modal .teacher-detail-modal-content {
    left: 0; right: 0; top: 0; bottom: 0;
    width: 100%;
    border-radius: 0;
    padding: 16px;
  }
  .teacher-detail-body { padding: 16px 0 20px; }

  /* ===== H5 修复：TS 排课工具栏换行（防“今天”等按钮被挤压竖排）+ 高度自适应 ===== */
  .ts-calendar-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 12px;
    padding: 8px 12px;
    height: auto;
    min-height: 54px;
  }

  /* ===== H5 修复：排课表格（周视图 / TS）时间轴可纵向滚动 ===== */
  .schedule-grid-wrapper {
    max-height: calc(100vh - 240px);
    overflow-y: auto;
    overflow-x: hidden;
  }
  .ts-calendar-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .ts-layout { overflow: visible; }

  /* ===== H5 修复：退费/课费/学生统计 —— 搜索框 + 胶囊切换按钮同一行、右对齐 ===== */
  .finance-toolbar,
  .fee-stats-toolbar,
  .notify-filter-bar {
    flex-wrap: nowrap;
    justify-content: flex-end;
    gap: 8px;
  }
  .notify-filter-left { flex: 0 0 auto; }
  .search-box {
    flex: 1 1 100px;
    min-width: 0;
  }
  /* 搜索框在 H5 内自适应压缩，避免与胶囊按钮争抢换行 */
  .search-box .search-input {
    width: 100%;
    min-width: 0;
  }
  .date-filter-tabs {
    flex-shrink: 1;
    min-width: 0;
  }
  .date-filter-btn {
    padding: 0 6px;
    font-size: 12px;
    white-space: nowrap;
  }

  /* ===== H5 修复：财务概览页适配 ===== */
  .page-header-finance { margin-bottom: 12px; }
  .finance-tabs {
    gap: 14px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
  }
  .finance-tab {
    font-size: 16px;
    white-space: nowrap;
  }
  .chart-card { padding: 16px; }
  .finance-dashboard-row.row-refund { grid-template-columns: 1fr; }
  .finance-dashboard-row .card,
  .finance-dashboard-row .chart-card { padding: 16px; }

  /* ===== H5 修复：账号页「新增管理员/新增老师」按钮溢出白卡片 ===== */
  .accounts-toolbar { flex-wrap: wrap; }
  .accounts-search-wrap { width: 100%; }
  .accounts-search-input { width: 100%; }
  /* H5：搜索框独占一行，两个新增按钮并排且一起占满整行宽度（间距继承基类 10px） */
  .accounts-add-btns { width: 100%; flex-direction: row; align-items: stretch; flex-wrap: nowrap; gap: 10px; }
  .accounts-add-btn { flex: 1 1 0; width: 100%; }
}

/* ===== 弹窗（Modal） ===== */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--modal-mask);
  z-index: 1000;
  align-items: center;
  justify-content: center;
}

.modal-overlay.show {
  display: flex;
}

.modal-content {
  background: var(--card-bg);
  border-radius: var(--radius-lg);
  position: relative;
  animation: modalIn 0.2s ease;
}

@keyframes modalIn {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}

.modal-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  font-size: 0;
  line-height: 1;
  color: var(--text2);
  background: none;
  border: none;
  cursor: pointer;
  border-radius: 50%;
  transition: background 0.2s, color 0.2s;
  flex-shrink: 0;
}

.modal-close::before {
  content: '';
  display: block;
  width: 18px;
  height: 18px;
  background-color: var(--text2);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-image: url(assets/icons8-close.svg);
  mask-image: url(assets/icons8-close.svg);
}

.modal-close:hover {
  background: var(--bg-ant);
  color: var(--text);
}

/* ===== 弹窗头部（标题 + 关闭按钮） ===== */
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}

.account-edit-modal-content .modal-header,
.account-add-modal-content .modal-header {
  padding: 24px 28px 0;
  margin-bottom: 20px;
}

.modal-header-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  margin: 0;
  line-height: 1.4;
}

/* ===== 老师详情弹窗（左侧抽屉） ===== */
#teacher-detail-modal {
  align-items: stretch;
  justify-content: flex-start;
}

.teacher-detail-modal-content {
  position: fixed;
  left: 6px;
  top: 6px;
  bottom: 6px;
  width: 420px;
  max-height: none;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 24px;
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.06);
  animation: drawerLeftIn 0.25s ease;
}

/* 关闭图标固定在抽屉右上角 */
.teacher-detail-modal-content .modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
}

@keyframes drawerLeftIn {
  from { opacity: 0; transform: translateX(-24px); }
  to   { opacity: 1; transform: translateX(0); }
}

.teacher-detail-body {
  display: flex;
  flex-direction: column;
  gap: 20px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding-top: 16px;
  padding-right: 6px;
  padding: 16px 6px 20px;
}

/* 滚动条配色与主布局统一 */
.teacher-detail-body::-webkit-scrollbar {
  width: 6px;
}

.teacher-detail-body::-webkit-scrollbar-track {
  background: transparent;
}

.teacher-detail-body::-webkit-scrollbar-thumb {
  background: #d9d9d9;
  border-radius: 3px;
}

.teacher-detail-body::-webkit-scrollbar-thumb:hover {
  background: #b0b0b0;
}

.teacher-detail-top {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-shrink: 0;
  padding-right: 36px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
}

.teacher-detail-avatar {
  width: 64px;
  height: 64px;
  border-radius: 16%;
  object-fit: cover;
  flex-shrink: 0;
}

.teacher-detail-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
}

.teacher-detail-name-row {
  display: flex;
  align-items: center;
  gap: 4px;
}

.teacher-detail-edit-btn {
  align-self: center;
  flex-shrink: 0;
  margin-left: 4px;
}

.teacher-detail-name {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
}

.teacher-detail-gender {
  font-size: 13px;
  color: var(--text-secondary);
}

.teacher-detail-meta {
  font-size: 13px;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 6px;
}

.teacher-detail-meta .meta-divider {
  color: var(--border);
}

.teacher-detail-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.teacher-detail-section-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
}

.teacher-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.teacher-detail-grid-item {
  background: var(--bg);
  border-radius: 8px;
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.teacher-detail-grid-label {
  font-size: 12px;
  color: var(--text3);
}

.teacher-detail-grid-value {
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
}

.teacher-detail-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.teacher-detail-tag {
  display: inline-block;
  padding: 3px 6px;
  border-radius: 4px;
  font-size: 12px;
  background: var(--success-bg);
  color: var(--text);
}

.teacher-detail-bio {
  font-size: 13px;
  color: var(--text2);
  line-height: 1.6;
  margin: 0;
}

.teacher-detail-video-wrap {
  position: relative;
  width: 100%;
}

.teacher-detail-video {
  display: block;
  width: 100%;
  max-height: 240px;
  border-radius: 12px;
  background: #000;
  cursor: pointer;
}

/* 默认播放遮罩：黑色 30% 背景 + 居中 play 图标 */
.teacher-detail-video-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}

.teacher-detail-video-overlay:hover {
  background: rgba(0, 0, 0, 0.5);
  transform: translate(-50%, -50%) scale(1.08);
}

.teacher-detail-play-icon {
  width: 40px;
  height: 40px;
  /* 原图标为 #4c4c4c 灰，转白以保证在深色遮罩上清晰可见 */
  filter: brightness(0) invert(1);
  pointer-events: none;
}

/* ===== 联系助教弹窗 ===== */
.contact-modal-content {
  width: 360px;
  padding: 16px 24px 24px;
  text-align: center;
}

.contact-qr-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 12px;
}

.contact-qr-placeholder {
  width: 140px;
  height: 140px;
  border-radius: 12px;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--border);
}

.contact-qr-icon {
  width: 64px;
  height: 64px;
  opacity: 0.35;
}

.contact-tip {
  font-size: 13px;
  color: var(--text-tertiary);
  margin-bottom: 20px;
}

.contact-info-card {
  background: var(--bg);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  text-align: left;
}

.contact-info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  font-size: 13px;
  gap: 16px;
}

.contact-info-row + .contact-info-row {
  border-top: 1px solid var(--border);
}

.contact-label {
  color: var(--text-tertiary);
  flex-shrink: 0;
}

.contact-value {
  color: var(--text);
  font-weight: 500;
  flex: 1;
  text-align: right;
  line-height: 1.5;
  word-break: break-word;
}

/* ===== 确认弹窗通用 ===== */
.confirm-modal-content {
  width: 380px;
  padding: 28px;
}

.confirm-modal-body {
  font-size: 14px;
  color: var(--text3);
  margin: 0 0 24px;
  line-height: 1.6;
}

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

/* ===== 课程操作弹窗 ===== */
.course-action-content {
  width: 420px;
  padding: 16px 24px 24px;
}

.course-action-info {
  background: var(--stat-card-bg);
  border-radius: var(--radius-md);
  padding: 4px 16px;
  /* margin-bottom: 24px; */
}

.course-action-info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  font-size: 14px;
}

.course-action-info-row + .course-action-info-row {
  border-top: 1px solid var(--border);
}

.course-action-info-label {
  color: var(--text3);
  flex-shrink: 0;
}

.course-action-info-value {
  color: var(--text);
  font-weight: 500;
  text-align: right;
}

.course-action-btns {
  display: flex;
  gap: 12px;
  margin-top: 24px;
}

.course-action-btns .admin-btn {
  flex: 1;
  height: 44px;
  font-size: 15px;
}

.course-action-btns .admin-btn.danger-outline {
  color: var(--danger);
  height: 36px;
  font-size: 13px;
  background: transparent;
  border: 1.5px solid var(--danger);
}
.course-action-btns .admin-btn.danger-outline:hover {
  background: var(--danger);
  color: #fff;
}

.course-action-cancel-form {
  margin-top: 4px;
}

.course-action-cancel-form .form-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 8px;
  display: block;
}

.course-action-cancel-form .form-textarea {
  width: 100%;
  height: auto;
  min-height: 72px;
  padding: 10px 12px;
  resize: vertical;
  box-sizing: border-box;
}

/* ===== 工具类 ===== */
.hidden {
  display: none !important;
}

.page {
  display: none;
}

.page.active {
  display: block;
}

/* ===== 标签更多提示浮窗 ===== */
.teacher-tags-tooltip {
  position: fixed;
  z-index: 9999;
  max-width: 240px;
  padding: 8px 12px;
  font-size: 12px;
  line-height: 1.6;
  color: #fff;
  background: rgba(0, 0, 0, 0.8);
  border-radius: 6px;
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.15s, transform 0.15s;
  white-space: normal;
  word-break: break-all;
}
.teacher-tags-tooltip.visible {
  opacity: 1;
  transform: translateY(0);
}
.teacher-tags-tooltip::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%);
  border-width: 5px 5px 0;
  border-style: solid;
  border-color: rgba(0, 0, 0, 0.8) transparent transparent transparent;
}

/* ===== 分享图管理（活动配置） ===== */
.share-img-upload-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.share-img-hint {
  font-size: 12px;
  color: #98a2b3;
  display: block;
  margin-bottom: 14px;
}
.share-img-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.share-img-empty {
  font-size: 13px;
  color: #98a2b3;
  padding: 12px 0;
}
.share-img-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px;
  border: 1px solid #edf0f5;
  border-radius: 10px;
  background: #fff;
}
.share-img-thumb {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--border);
  flex-shrink: 0;
}

.share-img-del-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin-left: auto;
  border: none;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  flex-shrink: 0;
}

.share-img-del-btn img {
  width: 20px;
  height: 20px;
}

.share-img-del-btn:hover {
  background: #fff1f0;
}
.share-img-meta {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.share-img-time {
  font-size: 12px;
  color: #667085;
}

/* 开关 */
.switch-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
}
.switch-toggle input { display: none; }
.switch-track {
  position: relative;
  width: 40px;
  height: 22px;
  border-radius: 11px;
  background: #d0d5dd;
  transition: background 0.2s;
  flex-shrink: 0;
}
.switch-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(16,24,40,0.2);
  transition: left 0.2s;
}
.switch-toggle.on .switch-track { background: #3FCB80; }
.switch-toggle.on .switch-knob { left: 20px; }
.switch-label {
  font-size: 13px;
  color: #667085;
}
.switch-toggle.on .switch-label { color: #3FCB80; }