/* ===== 全局变量 ===== */
:root {
  --primary: #FF1B6D;
  --primary-light: #ff5c8a;
  --primary-dark: #d4004f;
  --secondary: #7B2CBF;
  --bg: #f4f5fb;
  --bg-light: #f8f9fb;
  --bg-hover: #f0f2f8;
  --card-bg: #ffffff;
  --text: #1f2430;
  --text-light: #6b7280;
  --border: #eaecf3;
  --success: #00b894;
  --warning: #f0a832;
  --danger: #e74c3c;
  --info: #2f6fe4;
  --gradient-main: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 55%, #b148f0 100%);
  --gradient-soft: linear-gradient(135deg, #fff5f8 0%, #f4efff 100%);
  --sidebar-w: 240px;
  --sidebar-w-collapsed: 64px;
  --radius: 14px;
  --radius-lg: 18px;
  --shadow: 0 1px 3px rgba(20, 24, 60, 0.05), 0 6px 20px rgba(20, 24, 60, 0.05);
  --shadow-hover: 0 4px 10px rgba(20, 24, 60, 0.07), 0 14px 34px rgba(20, 24, 60, 0.11);
  --shadow-lg: 0 12px 40px rgba(20, 24, 60, 0.18);
}

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

body {
  font-family: 'PingFang SC', 'Microsoft YaHei', 'Segoe UI', sans-serif;
  background: linear-gradient(180deg, #f6f7fc 0%, var(--bg) 220px);
  background-attachment: fixed;
  color: var(--text);
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* 自定义滚动条 */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #d3d6e4; border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: #b6bacd; }

/* ===== 登录页 ===== */
.login-wrapper {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 8%;
  background: linear-gradient(135deg, #2b1055 0%, #6a1b9a 30%, var(--primary) 70%, #ff9a56 110%);
  position: relative;
  overflow: hidden;
}
.login-wrapper::before {
  content: '';
  position: absolute;
  width: 560px; height: 560px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.16) 0%, transparent 65%);
  top: -160px; left: -120px;
}
.login-wrapper::after {
  content: '';
  position: absolute;
  width: 480px; height: 480px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.12) 0%, transparent 65%);
  bottom: -140px; right: -100px;
}
.login-card {
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(12px);
  border-radius: 24px;
  padding: 44px 40px 36px;
  width: 400px;
  box-shadow: 0 24px 70px rgba(30, 10, 60, 0.35);
  text-align: center;
  position: relative;
  z-index: 1;
  animation: fadeUp .5s ease;
}
.login-card h1 {
  font-size: 28px;
  background: var(--gradient-main);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 8px;
  text-align: center;
}
.login-card .subtitle {
  color: var(--text-light);
  margin-bottom: 30px;
  text-align: center;
}
.login-card .input-group {
  text-align: left;
  margin-bottom: 20px;
}
.login-card label {
  display: block;
  font-size: 13px;
  color: var(--text-light);
  margin-bottom: 6px;
}
.login-card input {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid var(--border);
  border-radius: 12px;
  font-size: 15px;
  transition: border-color .2s, box-shadow .2s;
  background: #fafbfe;
}
.login-card input:focus {
  outline: none;
  border-color: var(--primary);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(255, 27, 109, 0.1);
}
.btn-login {
  width: 100%;
  padding: 14px;
  background: var(--gradient-main);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: transform .2s, box-shadow .2s;
  box-shadow: 0 6px 18px rgba(255, 27, 109, 0.3);
}
.btn-login:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(255, 27, 109, 0.4);
}

/* 登录方式切换：右上角三角角标图标按钮 */
.login-card { overflow: hidden; }
.login-corner-toggle {
  position: absolute;
  top: 0; right: 0;
  width: 70px; height: 70px;
  padding: 10px 10px 0 0;
  border: none;
  background: var(--primary);
  clip-path: polygon(100% 0, 0 0, 100% 100%);
  cursor: pointer;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-start;
  z-index: 2;
  transition: filter .2s, transform .2s;
  box-shadow: -4px 4px 12px rgba(255,27,109,0.25);
}
.login-corner-toggle svg {
  width: 24px; height: 24px;
}
.login-corner-toggle:hover {
  filter: brightness(1.12);
  transform: scale(1.04);
}
.login-panel { animation: fadeUp .3s ease; }
.login-pwd-row { display:flex; gap:8px; align-items:flex-end; }
.login-pwd-row input { flex:1; min-width:0; }
.login-switch-sms {
  flex:0 0 auto; height:46px; padding:0 14px; white-space:nowrap;
  border:1.5px solid var(--primary); color:var(--primary); background:#fff;
  border-radius:12px; font-size:13px; font-weight:600; cursor:pointer; transition: all .2s;
}
.login-switch-sms:hover { background:var(--primary); color:#fff; }
.login-switch-sms:disabled { opacity:.5; cursor:not-allowed; }
.login-hint {
  margin-top: 20px;
  font-size: 12px;
  color: var(--text-light);
  background: #f6f7fb;
  padding: 10px;
  border-radius: 10px;
}

/* ===== 主布局 ===== */
.app-layout {
  display: flex;
  min-height: 100vh;
}
/* 侧边栏收起态：整站宽度变量切换（sidebar 与 main-content 同步） */
.app-layout.sidebar-collapsed {
  --sidebar-w: var(--sidebar-w-collapsed);
}

/* 侧边栏 */
.sidebar {
  width: var(--sidebar-w);
  background: linear-gradient(180deg, #232748 0%, #1a1a2e 60%, #151327 100%);
  color: #fff;
  position: fixed;
  height: 100vh;
  overflow-y: auto;
  z-index: 100;
  transition: transform .3s, width .3s;
  box-shadow: 2px 0 24px rgba(20, 18, 45, 0.25);
  display: flex;
  flex-direction: column;
}
.sidebar::-webkit-scrollbar { width: 5px; }
.sidebar-header {
  padding: 18px 14px 14px;
  text-align: center;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  background: linear-gradient(135deg, rgba(255,27,109,.18), rgba(123,44,191,.18));
}
/* 侧边栏头部行（logo + 收起按钮） */
.sidebar-head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.sidebar-toggle {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.7);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all .2s;
}
.sidebar-toggle:hover { background: rgba(255,255,255,0.15); color: #fff; }
.sidebar-header .logo {
  font-size: 21px;
  font-weight: 800;
  background: linear-gradient(120deg, #ff7aa8, #ff5c8a, #b48cff);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  overflow: hidden;
  gap: 6px;
}
.sidebar-header .logo .brand-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sidebar-header .logo-sub {
  font-size: 11px;
  color: rgba(255,255,255,0.5);
  margin-top: 4px;
  letter-spacing: 2px;
}
.sidebar-user {
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  flex-wrap: nowrap;
}
.sidebar-user .avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--gradient-main);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 600;
  flex-shrink: 0;
  box-shadow: 0 3px 10px rgba(255, 27, 109, 0.4);
}
.sidebar-user .info { flex: 1; min-width: 0; }
.sidebar-user .name { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-user .role-tag {
  font-size: 11px;
  color: rgba(255,255,255,0.6);
}

.sidebar-nav {
  padding: 12px 0;
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
}
/* 侧边栏底部固定用户区：头像 + 姓名 + 铃铛 + 退出 */
.sidebar-footer {
  border-top: 1px solid rgba(255,255,255,0.1);
  background: rgba(0,0,0,0.18);
  flex-shrink: 0;
  padding-bottom: 6px;
}
.sidebar-footer .sidebar-user {
  border-bottom: none;
}
.sidebar-footer .logout-btn {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.65);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all .2s;
}
.sidebar-footer .logout-btn:hover {
  background: rgba(255,27,109,0.25);
  color: #fff;
  border-color: rgba(255,27,109,0.4);
}
.sidebar-footer .theme-toggle-btn {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.8);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  line-height: 1;
  transition: all .2s;
}
.sidebar-footer .theme-toggle-btn:hover {
  background: rgba(255,255,255,0.16);
  color: #fff;
}
.nav-section {
  margin-bottom: 8px;
}
.nav-section-title {
  padding: 10px 20px 6px;
  font-size: 13px;
  color: #fff;
  letter-spacing: 1px;
  font-weight: 800;
}
.nav-toggle {
  cursor: pointer;
  user-select: none;
  transition: color .15s;
}
.nav-toggle:hover { color: rgba(255,255,255,0.85); }
.nav-toggle-icon {
  display: inline-block;
  width: 16px;
  font-size: 10px;
  transition: transform .2s;
  margin-right: 2px;
}
.nav-group-title {
  padding: 14px 20px 8px;
  font-size: 14px;
  color: #fff;
  letter-spacing: 1px;
  font-weight: 800;
  border-top: 1px solid rgba(255,255,255,0.12);
  margin-top: 4px;
}
.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  color: rgba(255,255,255,0.72);
  cursor: pointer;
  transition: all .2s;
  font-size: 14px;
  border-left: 3px solid transparent;
  position: relative;
}
.nav-item::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 0;
  background: rgba(255, 27, 109, 0.15);
  transition: width .2s;
}
.nav-item:hover {
  color: #fff;
  background: rgba(255,255,255,0.06);
}
.nav-item.active {
  color: #fff;
  background: linear-gradient(90deg, rgba(255,27,109,0.22), rgba(255,27,109,0.04));
  border-left-color: var(--primary);
}
.nav-item .icon {
  font-size: 18px;
  width: 24px;
  text-align: center;
}
/* 侧边栏导航：展开态仅显示文字（隐藏图标）；收起态仅显示线条图标（隐藏文字） */
.nav-item .nav-icon { display: none; width: 22px; height: 22px; flex-shrink: 0; text-align: center; line-height: 1; }
.nav-item .nav-icon svg { display: block; margin: 0 auto; }
.nav-item .nav-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* ===== 侧边栏收起态（仅图标） ===== */
.app-layout.sidebar-collapsed .sidebar-header { padding: 14px 0 12px; }
.app-layout.sidebar-collapsed .sidebar-head-row { justify-content: center; }
.app-layout.sidebar-collapsed .sidebar-toggle {
  position: absolute;
  top: 8px;
  right: 6px;
  width: 22px;
  height: 22px;
  border-radius: 6px;
}
.app-layout.sidebar-collapsed .sidebar-header .logo { gap: 0; }
.app-layout.sidebar-collapsed .sidebar-header .logo img { max-width: 34px; max-height: 30px; }
.app-layout.sidebar-collapsed .sidebar-header .brand-title,
.app-layout.sidebar-collapsed .sidebar-header .logo-sub { display: none; }
.app-layout.sidebar-collapsed .sidebar-user { justify-content: center; padding: 16px 0; }
.app-layout.sidebar-collapsed .sidebar-user .info,
.app-layout.sidebar-collapsed .sidebar-user-actions { display: none; }
.app-layout.sidebar-collapsed .sidebar-footer { padding-bottom: 4px; }
.app-layout.sidebar-collapsed .nav-section-title { display: none; }
.app-layout.sidebar-collapsed .nav-section { margin-bottom: 4px; }
.app-layout.sidebar-collapsed .nav-item { justify-content: center; padding: 12px 0; border-left: none; }
.app-layout.sidebar-collapsed .nav-item .nav-icon { display: block; width: 24px; height: 24px; }
.app-layout.sidebar-collapsed .nav-item .nav-text { display: none; }
.app-layout.sidebar-collapsed .nav-item .nav-item-badge { position: absolute; right: 10px; top: 8px; }
.app-layout.sidebar-collapsed .sidebar-nav { padding: 8px 0; }

/* 主内容区 */
.main-content {
  flex: 1;
  margin-left: var(--sidebar-w);
  padding: 0;
  min-height: 100vh;
  min-width: 0;
  overflow-x: hidden;
  transition: margin-left .3s;
  display: flex;
  flex-direction: column;
}

/* 顶部 banner：粘性置顶，banner + 页签悬浮其上，整体不随页面滚动 */

/* 顶部多页签栏（绝对定位坐落在 banner 内底部，悬浮于 banner 色之上）*/
.tabs-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  gap: 4px;
  padding: 4px 28px 8px;
  background: transparent;
  border-top: none;
  border-bottom: none;
  overflow-x: auto;
  scrollbar-width: thin;
  flex-shrink: 0;
}
.tabs-bar::-webkit-scrollbar { height: 4px; }
.tabs-bar::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
.tab-item {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border: 1px solid rgba(255,255,255,.5);
  border-radius: 18px;
  background: rgba(255,255,255,.16);
  color: rgba(255,255,255,.95);
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
  transition: all .15s;
}
.tab-item:hover {
  background: rgba(255,255,255,.3);
  border-color: rgba(255,255,255,.75);
  color: #fff;
}
.tab-item.active {
  background: #fff;
  color: var(--primary);
  font-weight: 600;
  box-shadow: 0 2px 6px rgba(0,0,0,.18);
}
.tab-item.dragging { opacity: .5; }
.tab-title { max-width: 140px; overflow: hidden; text-overflow: ellipsis; }
.tab-pin { font-size: 11px; opacity: .7; cursor: pointer; }
.tab-pin.pinned { opacity: 1; }
.tab-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  font-size: 14px;
  line-height: 1;
  margin-left: 2px;
}
.tab-close:hover { background: rgba(0,0,0,.12); }

.tab-content {
  flex: 1;
  padding: 18px 28px 26px;
  min-height: 0;
  background: transparent;
}
.tab-pane { display: none; }
.tab-pane.active { display: block; animation: fadeIn .2s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

/* ===== 顶部横幅 Banner（高度对齐左侧 Logo 条，贯穿内容区，页签悬浮其上） ===== */
.banner {
  position: sticky;
  top: 0;
  z-index: 50;
  width: 100%;
  height: var(--banner-h, 78px);
  flex-shrink: 0;
  overflow: visible;
  background: var(--gradient-main);
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.banner-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
}
.banner-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.02) 0%, rgba(0,0,0,.20) 100%);
  pointer-events: none;
}
.banner-swatches {
  position: absolute;
  right: 16px;
  bottom: 10px; /* 右下角，与页签同处底部区但在右侧、层级更高 */
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 3;
}
/* 关闭所有页签按钮（红色 ❌），位于色块左侧、间隔一个色块距离 */
.banner-closeall {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.7);
  background: #E53935;
  color: #fff;
  font-size: 12px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  margin-right: 30px; /* 间隔一个色块距离（约一个色块宽 + 间距） */
  box-shadow: 0 1px 5px rgba(0,0,0,.35);
  transition: transform .15s, background .15s, box-shadow .15s;
  outline: none;
  flex-shrink: 0;
}
.banner-closeall:hover {
  background: #F44336;
  transform: scale(1.12);
  box-shadow: 0 0 0 2px rgba(255,255,255,.45), 0 2px 8px rgba(0,0,0,.4);
}
.banner-swatch {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 2px solid rgba(255,255,255,.65);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  cursor: pointer;
  padding: 0;
  box-shadow: 0 1px 5px rgba(0,0,0,.35);
  transition: transform .15s, border-color .15s, box-shadow .15s;
  outline: none;
}
.banner-swatch:hover { transform: scale(1.1); }
.banner-swatch.active {
  border-color: #fff;
  transform: scale(1.18);
  box-shadow: 0 0 0 2px rgba(255,255,255,.45), 0 2px 8px rgba(0,0,0,.4);
}

/* ===== 横幅设置卡片 ===== */
.banner-config {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 14px;
}
.banner-slot {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
  background: var(--bg);
}
.banner-slot-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  font-weight: 600;
}
.banner-slot-head input[type=color] {
  width: 40px;
  height: 28px;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 2px;
  background: #fff;
  cursor: pointer;
}
.banner-preview { margin-top: 8px; min-height: 24px; }

/* ===== 工作台欢迎语卡片（顶栏左侧） ===== */
.dashboard-welcome-pageheader { gap: 16px; }
.dashboard-welcome {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 14px 8px 8px;
  border-radius: 12px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  user-select: none;
}
.dashboard-welcome-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(135deg, var(--primary), #7A5CC0);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(255,140,90,.3);
}
.dashboard-welcome-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dashboard-welcome-avatar-fallback {
  color: #fff;
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
}
.dashboard-welcome-body { line-height: 1.4; min-width: 0; }
.dashboard-welcome-hi {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: .3px;
}
.dashboard-welcome-meta {
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--text-light, #888);
}
.dashboard-welcome-name {
  font-weight: 600;
  color: var(--text, #333);
}
.dashboard-welcome-tags { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.dashboard-welcome-tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 10px;
  background: rgba(122,92,192,.12);
  color: #7A5CC0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .5px;
}
/* 不同标签不同颜色 */
.wtag-admin { background: rgba(122,92,192,.14); color: #7A5CC0; }   /* 管理员 紫 */
.wtag-recruit { background: rgba(255,140,90,.16); color: #FF8C5A; } /* 招生 橙 */
.wtag-teacher { background: rgba(52,199,123,.16); color: #2BB673; } /* 讲师 绿 */
.wtag-student { background: rgba(90,140,220,.16); color: #5A8CDC; } /* 学员 蓝 */
.wtag-partner { background: rgba(240,180,40,.18); color: #C9960A; } /* 伙伴 金 */
.dashboard-welcome-stats {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text-light, #888);
  font-size: 12px;
}
.dashboard-welcome-stats > * + *::before {
  content: '·';
  margin-right: 8px;
  color: rgba(150,150,150,.6);
}
.dashboard-welcome-stat { font-weight: 500; }
.dashboard-welcome-date {
  color: var(--text, #333);
  font-weight: 600;
}
@media (max-width: 720px) {
  .dashboard-welcome-meta { font-size: 11px; gap: 5px; }
  .dashboard-welcome-hi { font-size: 16px; }
  .dashboard-welcome-avatar { width: 42px; height: 42px; }
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 22px;
  flex-wrap: wrap;
  gap: 10px;
}
.page-header h2 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 23px;
  font-weight: 800;
  letter-spacing: .5px;
  background: linear-gradient(120deg, var(--text), var(--primary));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin: 0;
}
/* 标题旁的圆形 i 介绍按钮 */
.ph-left { display: inline-flex; align-items: center; gap: 10px; }
.intro-i-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1.5px solid var(--primary);
  background: transparent;
  color: var(--primary);
  font-style: italic;
  font-weight: 700;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  transition: all .15s;
  flex-shrink: 0;
}
.intro-i-btn:hover { background: var(--primary); color: #fff; transform: scale(1.08); }
/* 渠道功能介绍弹窗内容排版 */
.intro-body { max-height: 62vh; overflow-y: auto; font-size: 13.5px; line-height: 1.75; color: var(--text); }
.intro-body h4 { margin: 18px 0 8px; font-size: 15px; color: var(--primary); font-weight: 700; }
.intro-body h4:first-child { margin-top: 0; }
.intro-body p { margin: 0 0 8px; }
.intro-body ul { margin: 0 0 8px; padding-left: 20px; }
.intro-body li { margin: 4px 0; }
.intro-body strong { color: var(--text); font-weight: 700; }
.intro-body .intro-tip {
  margin-top: 14px; padding: 10px 12px; border-radius: 8px;
  background: rgba(124, 92, 255, .08);
  border: 1px solid rgba(124, 92, 255, .25);
  font-size: 12.5px;
}
.page-back-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card-bg);
  color: var(--text-light);
  cursor: pointer;
  transition: all .15s;
  flex-shrink: 0;
}
.page-back-btn:hover { border-color: var(--primary); color: var(--primary); background: var(--bg); }
.page-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.page-actions .page-refresh-btn { margin-left: 4px; }

/* ===== 侧边栏分割线 & 管理功能置顶图标 ===== */
.nav-divider {
  height: 1px;
  margin: 8px 16px;
  background: linear-gradient(90deg, var(--border), transparent);
  border: none;
}
.nav-pin-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-left: auto;
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 6px;
  color: #fff;
  background: transparent;
  cursor: pointer;
  transition: all .15s;
  flex-shrink: 0;
}
.nav-pin-btn:hover { background: rgba(255,255,255,.18); border-color: #fff; }
.nav-pin-btn.pinned { background: rgba(255,255,255,.22); }
.nav-group-title { display: flex; align-items: center; gap: 6px; }
.nav-group-title .nav-toggle-icon { font-size: 10px; }
/* 管理功能被置顶到分割线处时，整体右移与常用入口对齐 */
#navManageGroup.nav-pinned-top { margin: 0; }

/* 表格斑马纹 */
.table-wrapper table.zebra tbody tr:nth-child(even) { background: var(--bg); }
.table-wrapper table.zebra tbody tr:hover { background: var(--hover, rgba(255,27,109,.06)); }

/* 跟进弹框：上部分客户详情 + 跟进记录，下部分跟进表单 */
.fu-detail-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 16px; margin-bottom: 12px; }
.fu-label { display: block; font-size: 12px; color: var(--text-light); margin-bottom: 2px; }
.fu-records-title { font-weight: 600; margin: 10px 0 6px; }
.fu-records-list { max-height: 200px; overflow: auto; border: 1px solid var(--border); border-radius: 8px; padding: 4px 10px; }
.fu-item { padding: 8px 0; border-bottom: 1px dashed var(--border); }
.fu-item:last-child { border-bottom: none; }
.fu-meta { font-size: 12px; color: var(--text-light); margin-bottom: 2px; }
.fu-content { font-size: 13px; white-space: pre-wrap; word-break: break-word; }
.form-control-sm { padding: 4px 8px; font-size: 12px; border-radius: 6px; }

/* 线下课模块美化 */
.oc-filter-card { background: linear-gradient(180deg, var(--card-bg) 0%, var(--bg) 100%); }
.oc-detail-tabs .oc-tab.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.oc-detail-tabs .oc-tab { border-radius: 20px; padding: 6px 14px; border: 1px solid var(--border); }
.oc-meta-tags .tag { font-size: 12px; padding: 3px 10px; }
.student-search-item { transition: background .15s; }
.student-search-item:hover { background: var(--bg); }
.student-search-item:last-child { border-bottom: none !important; }

/* ===== 卡片 ===== */
.card {
  background: var(--card-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 22px;
  margin-bottom: 20px;
  border: 1px solid rgba(255,255,255,0.7);
  transition: box-shadow .25s, transform .25s;
  min-width: 0;
}
.card:hover {
  box-shadow: var(--shadow-hover);
}
.card-title {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--text);
}
.card-title::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--border), transparent);
  margin-left: 6px;
}

/* ===== 统计卡片 ===== */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}
/* 紧凑四列（客户分级分布），手机端降为两列见响应式块 */
.stats-grid--4 { grid-template-columns: repeat(4, 1fr); }
.stat-card {
  background: var(--card-bg);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: var(--shadow);
  display: flex;
  align-items: center;
  gap: 16px;
  transition: transform .25s, box-shadow .25s;
  min-width: 0;
  border: 1px solid rgba(255,255,255,0.7);
  position: relative;
  overflow: hidden;
}
.stat-card::after {
  content: '';
  position: absolute;
  right: -30px; top: -30px;
  width: 90px; height: 90px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,27,109,0.07), transparent 70%);
}
.stat-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
}
/* 可点击统计卡片（进入对应列表 / 筛选客户列表） */
.stat-card.stat-clickable {
  cursor: pointer;
}
.stat-card.stat-clickable:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
}
.stat-card.stat-clickable.active {
  outline: 2px solid var(--primary);
  box-shadow: var(--shadow-hover);
}
.stat-card .stat-icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  flex-shrink: 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
}
.stat-card .stat-info { flex: 1; }
.stat-card .stat-value {
  font-size: 30px;
  font-weight: 800;
  line-height: 1.2;
  background: linear-gradient(120deg, var(--text), var(--primary));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.stat-card .stat-label {
  font-size: 13px;
  color: var(--text-light);
}
.stat-num {
  font-size: 26px;
  font-weight: 800;
  line-height: 1.2;
}
.bg-pink { background: linear-gradient(135deg, #ffe3ec, #ffd0e0); color: var(--primary); }
.bg-green { background: linear-gradient(135deg, #d5f8ef, #bdf3e4); color: var(--success); }
.bg-blue { background: linear-gradient(135deg, #dcebfe, #c3dcfd); color: var(--info); }
.bg-orange { background: linear-gradient(135deg, #fff0d6, #ffe4b8); color: #e17055; }
.bg-purple { background: linear-gradient(135deg, #eee3fb, #e0cdfa); color: var(--secondary); }

/* ===== 表格 ===== */
.table-wrapper {
  overflow-x: auto;
  border-radius: var(--radius);
}
/* 全局斑马纹：所有表格奇偶行深浅交替，避免纯色看差行 */
.table-wrapper tbody tr:nth-child(even) td { background: var(--bg-hover); }
.table-wrapper tbody tr:hover td { background: rgba(99,102,241,.10); }

/* ===== 统一列表分页 / 序号（全局） =====
   分页控件统一放在列表右上角、compact；斑马纹已由上方 .table-wrapper 规则提供 */
.dt-pager { display:flex; justify-content:flex-end; align-items:center; gap:8px; flex-wrap:wrap; margin:6px 2px 10px; font-size:12px; color:var(--text-light); }
.dt-pagesize { width:auto !important; min-width:84px; height:auto; padding:3px 6px; font-size:12px; }
.dt-pageinfo { white-space:nowrap; }
.dt-pagebtn { padding:3px 10px; font-size:12px; line-height:1.6; border:1px solid var(--border); background:var(--bg-card); border-radius:6px; cursor:pointer; color:var(--text); }
.dt-pagebtn:hover:not(:disabled) { border-color:var(--primary); color:var(--primary); }
.dt-pagebtn:disabled { opacity:.45; cursor:not-allowed; }
.dt-seq-h { text-align:center; }
.dt-seq-c { text-align:center; white-space:nowrap; }
/* 列表卡片顶部标题行：左标题 + 右分页器（分页器在卡片外/卡片头右上角，与表格标题同一排） */
.dt-card-head { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin:0 0 12px; }
.dt-card-title { font-size:16px; font-weight:600; color:var(--text); }
.dt-pager-slot { display:flex; justify-content:flex-end; align-items:center; flex-wrap:wrap; }
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
th {
  background: linear-gradient(180deg, #fafbfe, #f1f3f9);
  padding: 13px 14px;
  text-align: left;
  font-weight: 600;
  color: var(--text-light);
  border-bottom: 2px solid var(--border);
  white-space: nowrap;
  letter-spacing: .3px;
}
td {
  padding: 13px 14px;
  border-bottom: 1px solid var(--border);
}
tr { transition: background .15s; }
tr:hover td { background: #f8f9fd; }
/* 表格操作列：按钮组在 td 内底部对齐，保证不同行高（如"提交情况"列多行内容把行撑高）时按钮底部仍齐平，避免"飘"或"错位" */
.table-actions { display: flex; gap: 6px; align-items: flex-end; }
/* 筛选卡内多选 select：原生 multiple（浏览器下拉式，size=1 点开弹层）；紧凑高度 */
.filter-bar select[multiple].multi-sel { min-width: 130px; min-height: auto; padding: 5px 8px; }
/* 多选字段组：label 在左侧，避免 size=1 时 select 显示"已选 X 项"看不到字段名 */
.filter-multi-wrap { display: inline-flex; align-items: center; gap: 6px; }
.filter-multi-wrap > .filter-multi-label { font-size: 12px; color: #666; white-space: nowrap; flex: none; }
/* 客户编号 + 回访逾期红点 */
.customer-no {
  font-family: Consolas, monospace;
  color: var(--primary);
  font-weight: 600;
  background: rgba(255, 27, 109, 0.08);
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 12px;
  white-space: nowrap;
}
.overdue-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--danger);
  margin-right: 6px;
  vertical-align: middle;
  box-shadow: 0 0 0 3px rgba(255, 61, 61, 0.18);
  animation: bellBlink 1.2s infinite;
}
tr.row-overdue td {
  background: #fff5f5;
}
tr.row-important td {
  background: #fffbe6;
}
tr.row-important:hover td {
  background: #fff7cc;
}

/* ===== 标签/徽章 ===== */
.tag {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}
.tag-a { background: #ffe0e0; color: #e74c3c; }
.tag-b { background: #fff3cd; color: #856404; }
.tag-c { background: #d1ecf1; color: #0c5460; }
.tag-d { background: #e9ecef; color: #6c757d; }
.tag-pending { background: #e9ecef; color: #6c757d; }
.tag-communicated { background: #d1ecf1; color: #0c5460; }
.tag-invited { background: #fff3cd; color: #856404; }
.tag-deal { background: #d4edda; color: #155724; }
.tag-lost { background: #f8d7da; color: #721c24; }
.tag-success { background: #d4edda; color: #155724; }
.tag-light { background: #f0f0f3; color: #6a6f85; }
.tag-warning { background: #fff3cd; color: #856404; }
.tag-warn { background: #fff3cd; color: #856404; }
.tag-danger { background: #f8d7da; color: #721c24; }
.tag-info { background: #d1ecf1; color: #0c5460; }
.tag-full { background: #fde2e2; color: #c0392b; }
.tag-purple { background: #e8daef; color: #6c3483; }
.tag-blue { background: #e7f0ff; color: #2f6fe4; }
.tag-reading { background: #fff3e0; color: #b5651d; border: 1px solid #ffe0b0; }
.wechat-added { background: #d4edda; color: #155724; border: 1px solid #b7dfb9; }
.wechat-not { background: #e9ecef; color: #6c757d; border: 1px solid #dde0e3; }
.inline-select {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 3px 6px;
  font-size: 12px;
  background: #fff;
  color: var(--text);
  cursor: pointer;
  outline: none;
  max-width: 110px;
}
.inline-select:focus { border-color: var(--primary); }
.inline-edit {
  border: 1px dashed var(--border);
  border-radius: 6px;
  padding: 3px 8px;
  font-size: 12px;
  width: 100%;
  max-width: 180px;
  background: #fff;
  color: var(--text);
  outline: none;
}
.inline-edit:focus { border-color: var(--primary); border-style: solid; }
.tag-pin {
  background: linear-gradient(135deg, #fff3e0, #ffe4c2);
  color: #d35400;
  border: 1px solid #ffd9a8;
}
.tag-feature {
  background: linear-gradient(135deg, #fffbe6, #fff0b8);
  color: #a17600;
  border: 1px solid #ffe08a;
}

/* 来源标签 */
.src-douyin { background: #111; color: #fff; }
.src-moments { background: #07c160; color: #fff; }
.src-referral { background: #4a90d9; color: #fff; }
.src-channel { background: #9b59b6; color: #fff; }
.src-website { background: #FF1B6D; color: #fff; }

/* ===== 按钮 ===== */
.btn {
  padding: 8px 18px;
  border: none;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all .2s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  line-height: 1.5;
}
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .45; cursor: not-allowed; filter: grayscale(1); box-shadow: none; transform: none; }
.btn:disabled:hover { transform: none; box-shadow: none; }
.btn-primary {
  background: var(--gradient-main);
  color: #fff;
  box-shadow: 0 4px 12px rgba(255, 27, 109, 0.28);
}
.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 7px 18px rgba(255, 27, 109, 0.36);
}
.btn-secondary { background: #eef0f6; color: var(--text); }
.btn-secondary:hover { background: #e2e5ef; }
.btn-success {
  background: linear-gradient(135deg, #00c2a0, #00a884);
  color: #fff;
  box-shadow: 0 4px 12px rgba(0, 184, 148, 0.28);
}
.btn-success:hover { transform: translateY(-1px); }
.btn-danger {
  background: linear-gradient(135deg, #f45d5d, #e74c3c);
  color: #fff;
  box-shadow: 0 4px 12px rgba(231, 76, 60, 0.25);
}
.btn-danger:hover { transform: translateY(-1px); }
.btn-info {
  background: linear-gradient(135deg, #4d8bf0, #2f6fe4);
  color: #fff;
  box-shadow: 0 4px 12px rgba(47, 111, 228, 0.25);
}
.btn-info:hover { transform: translateY(-1px); }
.btn-sm { padding: 5px 12px; font-size: 12px; border-radius: 8px; }
.btn-lg { padding: 12px 28px; font-size: 15px; }
.btn-outline {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
}
.btn-outline:hover { border-color: var(--primary); color: var(--primary); background: rgba(255,27,109,.04); }
.btn-warning {
  background: linear-gradient(135deg, #ffb347, #ff9800);
  color: #fff;
  border: 1px solid #f0a500;
}
.btn-warning:hover { transform: translateY(-1px); filter: brightness(1.05); }
.btn-warning.active {
  background: linear-gradient(135deg, #ff9800, #f57c00);
  box-shadow: 0 0 0 3px rgba(255, 152, 0, .2);
}

/* ===== 表单 ===== */
.form-group {
  margin-bottom: 16px;
  min-width: 0;
}
.form-group label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 6px;
  color: var(--text);
}
.form-group label .required { color: var(--danger); }
.form-control {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 14px;
  transition: border-color .2s, box-shadow .2s;
  font-family: inherit;
  background: #fff;
}
.form-control:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(255, 27, 109, 0.1);
}
textarea.form-control { min-height: 80px; resize: vertical; }
select.form-control { cursor: pointer; }
.form-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}

/* ===== 表单分组标题 / 单选行 ===== */
.form-section-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--primary);
  margin: 18px 0 10px;
  padding-left: 10px;
  border-left: 3px solid var(--primary);
}
.radio-inline { display: flex; gap: 18px; align-items: center; }
.radio-inline label { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; margin: 0; cursor: pointer; }

/* ===== 学员详情：档案卡 ===== */
.profile-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  background: linear-gradient(135deg, var(--card-bg) 0%, var(--bg-light) 100%);
  border: 1px solid var(--border);
  border-radius: 14px;
  margin-bottom: 22px;
}
.profile-avatar {
  width: 56px; height: 56px; border-radius: 14px;
  background: var(--primary); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; font-weight: 700; flex-shrink: 0;
}
.profile-main { flex: 1; min-width: 0; }
.profile-name { font-size: 18px; font-weight: 700; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.profile-no { font-size: 12px; font-weight: 500; color: var(--text-light); background: var(--bg-light); padding: 2px 8px; border-radius: 6px; }
.profile-sub { font-size: 13px; color: var(--text-light); margin-top: 4px; }
.profile-tags { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }

/* ===== 学员详情：信息网格 ===== */
.section-title { margin: 22px 0 12px; font-size: 15px; font-weight: 600; color: var(--text); display: flex; align-items: center; gap: 6px; }
.info-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px 18px; }
.info-item { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; background: var(--bg-light); border: 1px solid var(--border); border-radius: 10px; }
.info-item.full { grid-column: 1 / -1; }
.info-label { font-size: 12px; color: var(--text-light); }
.info-value { font-size: 14px; color: var(--text); font-weight: 500; word-break: break-all; }

/* ===== 筛选栏 ===== */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
  align-items: center;
}
.filter-bar .form-control { width: auto; min-width: 140px; }
.filter-bar .search-input {
  flex: 1;
  min-width: 200px;
}
/* 操作按钮靠右：筛选栏中的最后一个按钮推到最右侧 */
.filter-bar .btn:last-child { margin-left: auto; }
/* 防止筛选栏按钮在空间不足时被压缩/隐藏 */
.filter-bar .btn { flex-shrink: 0; }
/* 学员档案页明确的「搜索 / 刷新」按钮：不被 auto-margin 推走、始终可见 */
.filter-bar .btn.stu-act { margin-left: 0 !important; }
/* 日期段筛选：内联勾选项与日期框 */
.chk-inline { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; color: var(--text); white-space: nowrap; cursor: pointer; margin: 0 4px; }
.chk-inline input { margin: 0; }
.filter-bar .date-input { width: 150px; min-width: 0; }
/* 时间快捷筛选 chips */
.time-chip { display:inline-flex; align-items:center; justify-content:center; padding:4px 12px; border:1px solid var(--border); border-radius:16px; background:var(--bg-muted); color:var(--text); font-size:12px; cursor:pointer; white-space:nowrap; transition:all .15s; }
.time-chip:hover { background:var(--bg-hover); border-color:var(--primary); }
.time-chip.active { background:#ef4444; border-color:#ef4444; color:#fff; }
/* 聚合分段控件（客户列表时间筛选） */
.time-segmented { display:inline-flex; align-items:center; background:#f0f2f8; border-radius:20px; padding:3px; gap:2px; }
.time-segmented .time-chip { border:none; border-radius:18px; background:transparent; color:#555; font-weight:500; padding:4px 14px; box-shadow:none; }
.time-segmented .time-chip:hover { background:rgba(255,255,255,0.7); color:var(--primary); }
.time-segmented .time-chip.active { background:var(--gradient-main); color:#fff; }
/* 商机分析维度切换（日/周/月） */
.oa-dim-seg { display:inline-flex; align-items:center; background:#f0f2f8; border-radius:16px; padding:2px; gap:2px; }
.oa-dim-seg .oa-dim-btn { border:none; border-radius:14px; background:transparent; color:#555; font-size:12px; font-weight:500; padding:3px 12px; cursor:pointer; white-space:nowrap; transition:all .15s; }
.oa-dim-seg .oa-dim-btn:hover { background:rgba(255,255,255,0.7); color:var(--primary); }
.oa-dim-seg .oa-dim-btn.active { background:var(--gradient-main); color:#fff; }

/* ===== 模态框 ===== */
.modal-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(15, 18, 40, 0.5);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
  animation: fadeIn .2s ease;
}
.modal {
  background: #fff;
  border-radius: 18px;
  width: 100%;
  max-width: min(720px, 94vw);
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 24px 70px rgba(20, 24, 60, 0.3);
  animation: fadeUp .3s ease;
}
.modal.modal-lg { max-width: min(900px, 94vw); }
.modal.modal-xl { max-width: min(1100px, 96vw); }
.modal.modal-sm { max-width: min(400px, 94vw); }
/* 确认型弹窗正文：多行文本清晰、危险操作强调 */
.confirm-body { font-size: 14px; line-height: 1.6; color: var(--text); white-space: normal; }
.confirm-body p:last-child { margin-bottom: 0 !important; }
.modal-footer .btn { min-width: 88px; }
.modal-header {
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(135deg, #fff7fa, #f6f2ff);
  border-radius: 18px 18px 0 0;
}
.modal-header h3 { font-size: 18px; font-weight: 700; }
.modal-close {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: var(--text-light);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  transition: all .2s;
}
.modal-close:hover { background: rgba(0,0,0,0.06); color: var(--danger); }
.modal-body { padding: 24px; overflow-x: hidden; overflow-y: auto; max-height: 72dvh; }
.modal-footer {
  padding: 16px 24px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  background: #fafbfe;
  border-radius: 0 0 18px 18px;
}

/* ===== 提醒列表 ===== */
.reminder-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: linear-gradient(90deg, #fff8e1, #fffbef);
  border-radius: 10px;
  margin-bottom: 8px;
  border-left: 4px solid var(--warning);
}
.reminder-item .r-name { font-weight: 600; }
.reminder-item .r-time { color: var(--text-light); font-size: 12px; }

/* ===== 同学圈 / 帖子（微博风格） ===== */
.weibo-composer {
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px 20px;
  margin-bottom: 16px;
}
.weibo-composer textarea {
  width: 100%;
  border: none;
  resize: none;
  outline: none;
  font-size: 15px;
  line-height: 1.7;
  min-height: 56px;
  font-family: inherit;
  color: var(--text);
  background: transparent;
}
.weibo-composer textarea::placeholder { color: #bbb; }
.wb-composer-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border-weak, #f0f0f0);
}
.wb-composer-bar .wb-img-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 12px;
  border-radius: 20px;
  background: #f5f6fa;
  color: var(--text-light);
  font-size: 13px;
  cursor: pointer;
  transition: background .2s;
  border: none;
}
.wb-composer-bar .wb-img-btn:hover { background: #eef0f5; }
.wb-composer-bar select {
  width: auto;
  min-width: 110px;
  font-size: 13px;
  padding: 5px 8px;
}
.wb-composer-bar .btn-primary { margin-left: auto; }
.wb-composer-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.wb-composer-thumbs .wb-thumb {
  position: relative;
  width: 72px; height: 72px;
}
.wb-composer-thumbs .wb-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--border);
}
.wb-composer-thumbs .wb-thumb .wb-thumb-del {
  position: absolute; top: -6px; right: -6px;
  background: #e74c3c; color: #fff;
  border-radius: 50%; width: 18px; height: 18px;
  font-size: 12px; line-height: 18px;
  text-align: center; cursor: pointer;
}

.forum-post {
  padding: 18px 20px;
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow);
  margin-bottom: 14px;
  cursor: pointer;
  transition: box-shadow .2s, border-color .2s;
  border: 1px solid transparent;
}
.forum-post:hover {
  box-shadow: var(--shadow-hover);
  border-color: rgba(255, 27, 109, 0.15);
}
.forum-post .post-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.forum-post .post-avatar {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--gradient-main);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 15px;
  box-shadow: 0 3px 8px rgba(255, 27, 109, 0.2);
  flex-shrink: 0;
}
.forum-post .post-author-name {
  font-weight: 600;
  font-size: 14px;
  color: var(--text);
}
.forum-post .post-author-sub {
  font-size: 12px;
  color: var(--text-light);
}
.forum-post .post-time {
  margin-left: auto;
  font-size: 12px;
  color: var(--text-light);
  white-space: nowrap;
  flex-shrink: 0;
}
.forum-post .post-badges {
  display: inline-flex;
  gap: 4px;
  align-items: center;
}
.forum-post .post-body {
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--text);
  white-space: pre-wrap;
  word-break: break-word;
}
.forum-post .post-body .post-body-title {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  margin: 0 0 6px;
  display: block;
}
.forum-post .post-content-snippet {
  color: var(--text-light);
  line-height: 1.7;
  max-height: 80px;
  overflow: hidden;
  font-size: 14px;
}
/* 同学圈主页帖子：压缩整体纵向间距（标题上下不再空荡） */
.forum-post--community .post-header {
  margin-bottom: 4px;
}
.forum-post--community .post-body {
  line-height: 1.4;
  margin: 0;
}
.forum-post--community .post-body .post-body-title {
  margin: 0 0 3px;
  line-height: 1.2;
  font-size: 15px;
}
.forum-post--community .post-content-snippet {
  line-height: 1.4;
  margin: 0;
}
.forum-post--community .post-action-bar {
  margin-top: 8px;
  padding-top: 8px;
}
/* 工作台「同学圈最新动态」预览帖子卡：左标题/图片/内容，右头像/名字/类型 */
.forum-post--dashboard-feed {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 14px;
}
.forum-post--dashboard-feed .dff-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.forum-post--dashboard-feed .dff-main .post-title {
  font-size: 15px; font-weight: 600;
  color: var(--text);
  margin: 0;
}
.forum-post--dashboard-feed .dff-content {
  font-size: 13px;
  color: var(--text-light);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.forum-post--dashboard-feed .dff-img .forum-post-img {
  width: 76px;
  height: auto;
  max-height: 96px;
  object-fit: contain;
  border-radius: 6px;
  background: var(--bg-muted, #f3f4f8);
  display: block;
}
.forum-post--dashboard-feed .dff-meta {
  display: flex; gap: 12px;
  font-size: 12px; color: var(--text-light);
  margin-top: 2px;
}
.forum-post--dashboard-feed .dff-side {
  flex-shrink: 0;
  width: 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  text-align: center;
}
.forum-post--dashboard-feed .dff-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--gradient-main);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 14px;
  overflow: hidden;
}
.forum-post--dashboard-feed .dff-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.forum-post--dashboard-feed .dff-name {
  font-size: 12px;
  color: var(--text);
  max-width: 56px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.forum-post--dashboard-feed .dff-side .tag { font-size: 11px; }
/* 微博式九宫格图片 */
/* 帖子配图：单行展示，超出自动换行，比例参考读书封面（约 3:4） */
.wb-img-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
.wb-img-cell {
  position: relative;
  width: 104px;
  height: 138px;
  flex: 0 0 auto;
  overflow: hidden;
  border-radius: 8px;
  background: #f5f6fa;
  cursor: pointer;
}
.wb-img-cell img {
  width: 100%;
  height: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  display: block;
  transition: transform .2s;
}
.wb-img-cell img:hover { transform: scale(1.04); }

/* 微博式底部操作栏 */
.post-action-bar {
  display: flex;
  align-items: center;
  gap: 0;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border-weak, #f0f0f0);
}
.post-action-bar .pa-item {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: 13px;
  color: var(--text-light);
  cursor: pointer;
  padding: 6px 0;
  border-radius: 8px;
  transition: background .15s, color .15s;
  user-select: none;
}
.post-action-bar .pa-item:hover { background: #f5f6fa; color: var(--primary); }
.post-action-bar .pa-item .pa-icon { font-size: 15px; }
.post-action-bar .pa-divider { width: 1px; height: 16px; background: var(--border-weak, #eee); }

.post-images-sm { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; position: relative; }
.post-images-sm img { width: 72px; height: 72px; object-fit: cover; border-radius: 10px; border: 1px solid var(--border); cursor: pointer; transition: transform .2s; }
.post-images-sm img:hover { transform: scale(1.05); }
.post-img-more {
  width: 72px; height: 72px; border-radius: 10px; background: rgba(0,0,0,.45); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 600; cursor: pointer;
}
.post-images-full { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.post-images-full img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; border: 1px solid var(--border); cursor: zoom-in; transition: transform .2s; }
.post-images-full img:hover { transform: scale(1.02); }

.latest-replies {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed var(--border-weak, #eee);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* 班级详情页帖子预览用 */
.forum-post .post-title { font-size: 15px; font-weight: 600; margin-bottom: 6px; color: var(--text); }
.forum-post .post-meta { display: flex; gap: 14px; margin-top: 8px; font-size: 12px; color: var(--text-light); }
.lr-item {
  background: #f8f9fb;
  border-radius: 10px;
  padding: 8px 10px;
}
.lr-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 3px;
}
.lr-content {
  font-size: 12.5px;
  color: var(--text);
  line-height: 1.6;
  white-space: pre-wrap;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.lr-actions {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}

/* ===== 线上课程卡片 ===== */
.course-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; margin-top: 8px; }
.course-card {
  background: #fff; border-radius: 14px; box-shadow: var(--shadow); overflow: hidden;
  border: 1px solid rgba(255,255,255,0.7); display: flex; flex-direction: column;
  transition: transform .25s, box-shadow .25s;
}
.course-card:hover { transform: translateY(-4px); box-shadow: 0 10px 28px rgba(20,24,60,.12); }
.course-cover {
  width: 100%; height: 130px; position: relative; overflow: hidden;
  background: linear-gradient(135deg, #f0f4ff, #f8f0ff); cursor: pointer;
}
.course-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.course-cover-placeholder {
  width: 100%; height: 100%; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 6px;
  font-size: 32px; color: var(--text-light, #8a90a6);
}
.course-cover-placeholder span:last-child { font-size: 12px; max-width: 80%; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.course-duration {
  position: absolute; bottom: 6px; right: 6px;
  background: rgba(0,0,0,.55); color: #fff; font-size: 11px;
  padding: 2px 8px; border-radius: 10px;
}
.course-card-body { padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.course-card-title { font-size: 14px; font-weight: 700; cursor: pointer; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.course-card-desc { font-size: 12px; color: var(--text-light, #8a90a6); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.course-card-actions { padding: 0 14px 12px; display: flex; gap: 6px; }
.course-cover-preview { margin-top: 8px; border-radius: 10px; overflow: hidden; }
.course-required-tag {
  position: absolute; top: 6px; left: 6px;
  background: linear-gradient(135deg, #ff1b6d, #ff6a3d); color: #fff;
  font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 10px;
}
.course-completed-tag {
  position: absolute; top: 6px; right: 6px;
  background: var(--success, #22c55e); color: #fff;
  font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 10px;
}
.course-card-required { border: 2px solid rgba(255,27,109,.3); }
.tc-required { border: 2px solid rgba(255,27,109,.25); }

/* ===== 读书板块（内联封面卡片） ===== */
.book-grid { display: flex; flex-direction: column; gap: 14px; margin-top: 8px; }
.book-card {
  background: #fff; border-radius: 14px; box-shadow: var(--shadow); overflow: hidden;
  cursor: pointer; transition: transform .2s, box-shadow .2s;
  border: 1px solid rgba(255,255,255,0.7);
  padding: 14px 16px;
}
.book-card:hover { transform: translateX(4px); box-shadow: 0 8px 24px rgba(20,24,60,.12); }
.book-inline-cover {
  width: 48px; height: 64px; object-fit: cover; border-radius: 6px; flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,.1); margin: 0;
}
.book-inline-fallback {
  width: 48px; height: 64px; border-radius: 6px; flex-shrink: 0; margin: 0;
  background: linear-gradient(160deg, #f6e7ff 0%, #ffe3ec 45%, #fff3d6 100%);
  display: flex; align-items: center; justify-content: center; font-size: 24px; opacity: .6;
}
.book-card-row { display: flex; align-items: flex-start; gap: 10px; }
.book-title-inline { font-size: 14px; font-weight: 700; color: var(--text, #1a1f3a); line-height: 1.3; margin: 0 0 2px; }
.book-author-inline { font-size: 12px; color: var(--text-light, #8a90a6); display: flex; align-items: center; gap: 6px; margin-bottom: 2px; }
.book-intro-inline { font-size: 12.5px; color: var(--text-light, #8a90a6); line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.book-meta-inline { display: flex; align-items: center; gap: 12px; margin-top: 6px; font-size: 12px; color: var(--text-light, #8a90a6); clear: both; }
.book-badge-inline {
  display: inline-block; padding: 1px 6px; border-radius: 10px; font-size: 10px; font-weight: 600;
  color: #fff; margin-right: 4px; vertical-align: middle;
}
.book-badge-inline.badge-pin { background: linear-gradient(135deg, #ff9a56, #ff6a3d); }
.book-badge-inline.badge-feature { background: linear-gradient(135deg, #f6c453, #f0a832); }
.book-heat { display: inline-flex; align-items: center; gap: 4px; background: linear-gradient(90deg, #fff3f6, #fff7fa); border: 1px solid #ffe0e9; border-radius: 20px; padding: 2px 10px; font-size: 12px; color: var(--text-light, #8a90a6); }
.book-heat .heat-num { font-weight: 800; color: var(--primary, #ff1b6d); }
.book-read-note { background: linear-gradient(135deg, #fffaf0, #fffdf7); border: 1px solid #fde9c8; border-radius: 12px; padding: 12px 14px; margin-bottom: 14px; }

/* ===== 工作台同学圈动态：帖子图片 ===== */
.forum-post-imgs { display: flex; gap: 6px; margin: 8px 0 4px; flex-wrap: wrap; }
.forum-post-img { width: 76px; height: 76px; object-fit: cover; border-radius: 8px; flex-shrink: 0; background: var(--bg-muted, #f3f4f8); }

/* ===== 新建读书任务：进行中提醒 + 模板选择 ===== */
.reading-warn-box { background: #fff7ed; border: 1px solid #fed7aa; border-radius: 10px; padding: 10px 12px; margin-bottom: 4px; }
.reading-warn-item { padding: 6px 0; border-bottom: 1px dashed #fde3c4; }
.reading-warn-item:last-of-type { border-bottom: none; }
.template-pick:hover { border-color: var(--primary, #ff1b6d); background: #fffafc; }

/* ===== 讲师拖拽排序 ===== */
.teacher-manage-card.draggable { cursor: grab; }
.teacher-manage-card.dragging { opacity: .5; cursor: grabbing; }
.teacher-manage-card.drag-over { border: 2px dashed var(--primary, #ff1b6d); }
.drag-handle { font-size: 18px; color: var(--text-light, #8a90a6); cursor: grab; padding: 4px; user-select: none; }
.drag-handle:active { cursor: grabbing; }

/* ===== 时间线 ===== */
.timeline { position: relative; padding-left: 24px; }
.timeline::before {
  content: '';
  position: absolute;
  left: 8px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, var(--primary-light), var(--border));
}
.timeline-item {
  position: relative;
  padding-bottom: 20px;
}
.timeline-item::before {
  content: '';
  position: absolute;
  left: -20px;
  top: 4px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--gradient-main);
  border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(255, 27, 109, 0.3);
}
.timeline-item .t-time { font-size: 12px; color: var(--text-light); }
.timeline-item .t-content { margin-top: 4px; }

/* ===== 跟进照片：缩略图 + 放大 + 上传预览 ===== */
.fu-imgs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.fu-thumb {
  width: 64px; height: 64px; object-fit: cover; border-radius: 8px;
  cursor: zoom-in; border: 1px solid var(--border, #eee); background: #f5f5f5;
  transition: transform .12s ease, box-shadow .12s ease;
}
.fu-thumb:hover { transform: scale(1.06); box-shadow: 0 4px 12px rgba(0,0,0,.18); }
.fu-photo-preview { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.fu-photo-item {
  position: relative; width: 64px; height: 64px; border-radius: 8px; overflow: hidden;
  border: 1px solid var(--border, #eee); background: #f5f5f5;
}
.fu-photo-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fu-photo-item.uploading { display: flex; align-items: center; justify-content: center; }
.fu-photo-loading { font-size: 11px; color: var(--text-light); padding: 2px 4px; text-align: center; }
.fu-photo-del {
  position: absolute; top: 2px; right: 2px; width: 18px; height: 18px; line-height: 16px;
  border: none; border-radius: 50%; background: rgba(0,0,0,.6); color: #fff; font-size: 13px;
  cursor: pointer; padding: 0; text-align: center;
}
.fu-photo-del:hover { background: #e53935; }
.fu-photo-btn { display: inline-flex; align-items: center; gap: 4px; }

/* ===== 渠道操作动态：跟进记录右侧照片框 ===== */
.timeline-item--with-photo {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.timeline-item--with-photo .t-body {
  flex: 1;
  min-width: 0;
}
.t-photo-box {
  flex-shrink: 0;
  width: 44px; height: 44px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  position: relative;
  border: 1.5px dashed var(--border, #ddd);
  background: var(--bg-secondary, #f8f9fa);
  transition: all .15s ease;
  overflow: hidden;
}
.t-photo-box:hover {
  border-color: var(--primary, #6c5ce7);
  background: var(--primary-light, #f0ecff);
  transform: scale(1.05);
}
.t-photo-thumb {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.t-photo-count {
  position: absolute;
  top: -4px; right: -4px;
  min-width: 16px; height: 16px;
  line-height: 16px;
  padding: 0 4px;
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  background: var(--primary, #6c5ce7);
  border-radius: 8px;
  text-align: center;
}
.t-photo-icon {
  width: 22px; height: 22px;
  color: var(--text-light, #999);
}
/* 操作动态：内联缩略图下方的「添加 / 管理照片」按钮 */
.t-photo-actions { margin-top: 8px; }
.t-photo-actions .btn { font-size: 12px; padding: 3px 10px; }

/* ===== 渠道跟进：照片管理弹窗 ===== */
.chfu-photo-modal {
  background: var(--bg-card, #fff);
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0,0,0,.2);
  animation: chfuFadeIn .2s ease;
}
@keyframes chfuFadeIn { from { opacity: 0; transform: translateY(12px) scale(.97); } to { opacity: 1; transform: none; } }

.chfu-photo-grid {
  display: flex; flex-wrap: wrap; gap: 8px;
}
.chfu-photo-grid .chfu-photo-item {
  width: 80px; height: 80px;
}
.chfu-photo-item {
  position: relative; border-radius: 8px; overflow: hidden;
  border: 1px solid var(--border, #eee); background: #f5f5f5;
  flex-shrink: 0;
}
.chfu-photo-item img { width: 100%; height: 100%; object-fit: cover; display: block; cursor: zoom-in; }
.chfu-photo-item .chfu-photo-del {
  opacity: 1; transition: opacity .15s;
}
.chfu-photo-item .chfu-photo-del:hover { background: #e53935; }

/* 损坏图片占位 */
.chfu-photo-item img.chfu-broken {
  display: none;
}
.chfu-broken-wrap::before {
  content: '⚠ 图片损坏';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: #999;
  text-align: center;
  padding: 4px;
  background: #f5f5f5;
}

.chfu-upload-area {
  margin-top: 10px;
}
.chfu-upload-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px;
  padding: 18px; border: 2px dashed var(--border, #ddd); border-radius: 10px;
  color: var(--text-light, #999); cursor: pointer;
  transition: all .15s ease;
  background: var(--bg-secondary, #fafbfc);
}
.chfu-upload-btn:hover {
  border-color: var(--primary, #6c5ce7); color: var(--primary, #6c5ce7);
  background: var(--primary-light, #f0ecff);
}
.chfu-preview-list {
  display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px;
}
.chfu-preview-list .chfu-photo-item { width: 72px; height: 72px; }
.chfu-uploading, .chfu-ok {
  position: absolute; bottom: 0; left: 0; right: 0;
  font-size: 10px; text-align: center; padding: 2px 0;
  background: rgba(0,0,0,.55); color: #fff;
}
.chfu-ok { background: rgba(46,213,115,.85); }

/* ===== 空状态 ===== */
.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-light);
}
.empty-state .icon {
  font-size: 52px;
  margin-bottom: 12px;
  display: block;
  animation: floatY 3s ease-in-out infinite;
}
.empty-state .text { font-size: 15px; }

/* ===== 分页 ===== */
.pagination {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 20px;
}
.pagination button {
  padding: 6px 14px;
  border: 1px solid var(--border);
  background: #fff;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  transition: all .2s;
}
.pagination button:hover:not(:disabled) { border-color: var(--primary); color: var(--primary); }
.pagination button.active {
  background: var(--gradient-main);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 3px 10px rgba(255, 27, 109, 0.3);
}
.pagination button:disabled { opacity: 0.5; cursor: not-allowed; }

/* ===== 复选框 ===== */
.checkbox-group { display: flex; flex-wrap: wrap; gap: 12px; }
/* 权限分组：类目名 + 黑色粗分割线（按菜单类目分组展示） */
.perm-group { margin-bottom: 14px; }
.perm-group-title {
  font-weight: 700;
  font-size: 14px;
  color: var(--text);
  padding: 6px 0 8px;
  border-bottom: 2px solid var(--text);
  margin-bottom: 6px;
}
.perm-group-title.perm-menu-title { border-bottom-width: 3px; cursor: pointer; user-select: none; display: flex; align-items: center; gap: 6px; }
.perm-menu-title:hover { background: var(--bg-hover); }
.perm-arrow { font-size: 11px; color: var(--text-light); transition: transform .15s; }
.perm-group-count { margin-left: auto; font-weight: 400; }
.perm-group.collapsed .perm-group-body { display: none; }
.perm-group-body { display: block; }
.perm-search-bar { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.perm-search-bar .form-control { max-width: 300px; }
.perm-group-items { display: flex; flex-wrap: wrap; gap: 4px 10px; padding-top: 4px; }
.perm-item { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 7px 4px; border-bottom: 1px dashed var(--border); }
.perm-item:last-child { border-bottom: none; }
.perm-item-name { flex: 1; min-width: 0; }
.perm-item select { width: 110px; flex: none; }
.perm-user-list { max-height: 46vh; overflow-y: auto; padding-right: 4px; }
.checkbox-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  transition: all .2s;
  background: #fff;
}
.checkbox-item:hover { border-color: var(--primary); }
.checkbox-item input { cursor: pointer; accent-color: var(--primary); }

/* ===== 工具类 ===== */
.flex { display: flex; }
.flex-between { display: flex; justify-content: space-between; align-items: center; }
.gap-8 { gap: 8px; }
.gap-12 { gap: 12px; }
.gap-16 { gap: 16px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mb-16 { margin-bottom: 16px; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-light { color: var(--text-light); }
.text-danger { color: var(--danger); }
.text-success { color: var(--success); }
.text-primary { color: var(--primary); }
.fw-600 { font-weight: 600; }
.fs-12 { font-size: 12px; }
.fs-13 { font-size: 13px; }
.fs-16 { font-size: 16px; }
.fs-20 { font-size: 20px; }
.hidden { display: none !important; }
.w-100 { width: 100%; }

/* ===== Toast 提示 ===== */
.toast-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 2000;
}
.toast {
  background: rgba(255,255,255,.98);
  backdrop-filter: blur(8px);
  padding: 12px 20px;
  border-radius: 12px;
  box-shadow: 0 12px 36px rgba(20, 24, 60, 0.18);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
  animation: slideIn .3s ease;
  border-left: 4px solid var(--info);
  min-width: 250px;
  font-size: 13.5px;
}
.toast.success { border-left-color: var(--success); }
.toast.error { border-left-color: var(--danger); }
.toast.warning { border-left-color: var(--warning); }
@keyframes slideIn {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

/* ===== 首页仪表盘模块卡片 ===== */
.module-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
}
.module-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 22px 12px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  cursor: pointer;
  transition: all .22s;
  text-align: center;
}
.module-card:hover {
  border-color: transparent;
  background: linear-gradient(160deg, #fff 0%, #fff5f8 100%);
  box-shadow: 0 8px 22px rgba(255, 27, 109, 0.16);
  transform: translateY(-3px);
}
.module-icon {
  font-size: 30px;
  line-height: 1;
  filter: drop-shadow(0 3px 6px rgba(20, 24, 60, 0.12));
}
.module-label { font-size: 13px; font-weight: 600; color: var(--text); }
.module-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: linear-gradient(135deg, #f45d5d, #e74c3c);
  color: #fff;
  font-size: 11px;
  line-height: 18px;
  text-align: center;
  font-weight: 700;
  box-shadow: 0 2px 6px rgba(231, 76, 60, 0.4);
}

/* ===== 工作台模块编辑弹窗 ===== */
.module-toggle-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 10px;
}
.module-toggle-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: var(--bg-muted, #f6f7fb);
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  font-size: 13px;
  user-select: none;
  transition: all .18s;
}
.module-toggle-item:hover { border-color: var(--primary); }
.module-toggle-item input { width: 16px; height: 16px; accent-color: var(--primary); flex-shrink: 0; cursor: pointer; }
.module-toggle-icon { font-size: 18px; line-height: 1; }
.module-toggle-label { font-weight: 600; color: var(--text); }

/* ===== 题目图片 ===== */
.q-option { display: flex; align-items: flex-start; gap: 6px; }
.q-opt-letter { font-weight: 600; flex-shrink: 0; }
.q-opt-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.q-opt-img {
  max-width: 160px;
  max-height: 120px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--border);
}
.q-opt-img-sm {
  max-width: 90px;
  max-height: 60px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--border);
  vertical-align: middle;
}
.q-opt-file { max-width: 220px; padding: 4px 8px; font-size: 12px; }
.q-opt-preview { min-height: 24px; }
.q-detail-img {
  max-width: 300px;
  max-height: 200px;
  object-fit: contain;
  border-radius: 10px;
  border: 1px solid var(--border);
  margin: 8px 0;
  display: block;
}
.q-opt-thumb {
  width: 32px;
  height: 32px;
  object-fit: cover;
  border-radius: 8px;
  vertical-align: middle;
  margin-right: 6px;
  border: 1px solid var(--border);
}

/* ===== 移动端顶栏 / 抽屉侧边栏 ===== */
.mobile-topbar { display: none; }
.sidebar-overlay { display: none; }
body.sidebar-open { overflow: hidden; }

/* ===== 响应式 ===== */

/* 平板端（768px ~ 1024px）：工作台模块固定 3 列，统计/课程卡片等保持协调 */
@media (min-width: 769px) and (max-width: 1024px) {
  .module-grid { grid-template-columns: repeat(3, 1fr); }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .teaching-grid { grid-template-columns: repeat(2, 1fr); }
  /* 工作台「分级分布」等四列网格在平板宽度下降为两列，避免卡片被挤窄 */
  .stats-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .page-header { flex-wrap: wrap; }
  /* 平板：侧边栏用户区保持横向、紧凑，避免用户名挤压/纵向 */
  .sidebar-user { gap: 10px; padding: 14px 16px; }
  .sidebar-user .avatar { width: 36px; height: 36px; font-size: 15px; }
  .sidebar-user .sidebar-user-actions { gap: 4px; }
}

@media (max-width: 768px) {
  .login-wrapper { justify-content: center; padding-right: 0; padding: 0 16px; }
  .login-card { width: 100%; max-width: 400px; padding: 36px 24px 28px; }
  .sidebar { transform: translateX(-100%); z-index: 1000; width: min(80vw, 280px); }
  .sidebar.show { transform: translateX(0); }
  .sidebar-overlay.show {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.5);
    z-index: 999;
  }
  .main-content { margin-left: 0; padding: 0; }
  .banner { display: none !important; }
  .tabs-bar { position: static; padding: 6px 12px 0; background: var(--bg); border-bottom: 1px solid var(--border); }
  .tab-title { max-width: 90px; }
  .tab-content { padding: 14px 12px 24px; }
  .mobile-topbar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: linear-gradient(135deg, #232748, var(--primary));
    color: #fff;
    position: sticky;
    top: 0;
    z-index: 90;
    box-shadow: 0 2px 12px rgba(20,18,45,.25);
  }
  .menu-toggle {
    background: none;
    border: none;
    color: #fff;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    padding: 4px 8px 4px 2px;
    flex-shrink: 0;
  }
  .mobile-topbar-brand {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 15px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
  }
  .mobile-topbar-brand img { height: 22px; width: auto; max-width: 90px; object-fit: contain; }
  .mobile-topbar-brand span { overflow: hidden; text-overflow: ellipsis; }
  .mobile-topbar .msg-bell { flex-shrink: 0; }
  .form-row { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .module-grid { grid-template-columns: repeat(2, 1fr); }
  .book-card { flex-direction: row; }
  .page-header { flex-direction: column; align-items: flex-start; gap: 12px; }
  .page-actions { width: 100%; justify-content: flex-start; }

  /* —— 以下为全面手机适配增强（≤768px）—— */
  .app-layout { min-height: 100dvh; }
  .card { padding: 14px 12px; margin-bottom: 14px; }
  .card-title { font-size: 15px; margin-bottom: 10px; }
  .sidebar { width: min(82vw, 300px); height: 100dvh; }
  .mobile-topbar { padding-top: max(10px, env(safe-area-inset-top)); }
  input, select, textarea, .form-control, .login-card input, .weibo-composer textarea { font-size: 16px; }
  .form-control { padding: 12px 14px; }
  .card { padding: 16px; }
  .card-title { font-size: 15px; }
  .detail-card { padding: 14px; }
  .page-header { align-items: stretch; gap: 12px; }
  .page-header h2 { font-size: 19px; }
  .page-actions { flex-direction: column; align-items: stretch; }
  .page-actions .btn,
  .page-actions > button,
  .page-actions .btn-group { width: 100%; margin: 0; }
  .page-actions .btn-group { display: flex; gap: 10px; }
  .page-actions .btn-group .btn { flex: 1; }
  .btn { min-height: 42px; }
  .btn-sm { min-height: 36px; }
  .filter-bar { flex-direction: column; align-items: stretch; gap: 10px; }
  .filter-bar .form-control,
  .filter-bar .search-input { width: 100%; min-width: 0; }
  .filter-bar .btn { width: 100%; }
  .filter-bar .btn:last-child { margin-left: 0; }
  .form-row { grid-template-columns: 1fr; }
  /* 工作台统计卡：紧凑适配手机 */
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 16px; }
  .stats-grid--4 { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .stat-card { padding: 10px 11px; gap: 8px; min-width: 0; }
  .stat-card .stat-info { min-width: 0; }
  .stat-card .stat-icon { width: 36px; height: 36px; font-size: 16px; border-radius: 10px; flex-shrink: 0; }
  .stat-card .stat-value { font-size: 16px; line-height: 1.3; word-break: break-all; white-space: normal; }
  .stat-card .stat-label { font-size: 11px; margin-top: 1px; }
  .module-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  /* 表格：隐藏低优先级列、缩减间距、舒适滚动 */
  .table-wrapper { -webkit-overflow-scrolling: touch; }
  table { font-size: 12px; }
  th, td { padding: 8px 7px; white-space: nowrap; }
  /* 手机端隐藏 序号(1st) 和 微信(9th) 列，减少横向滚动 */
  th:first-child, td:first-child,
  th:nth-child(9), td:nth-child(9) { display: none !important; }
  /* 操作列按钮紧凑 */
  .table-actions { flex-wrap: wrap; }
  .table-wrapper .btn-sm { padding: 4px 8px; font-size: 12px; }
  /* 覆盖内联固定列宽，让表格更适配手机 */
  th[style*="width:74px"], td[style*="width:74px"] { width: 56px !important; min-width: 56px; max-width: 80px; }
  th[style*="width:40px"], td[style*="width:40px"] { width: 36px !important; min-width: 36px; }
  /* 行高舒适触控 */
  tbody tr { min-height: 44px; }
  /* 模块宫格卡片紧凑 */
  .module-card { padding: 14px 8px; gap: 5px; border-radius: 10px; }
  .module-icon { font-size: 24px; }
  .module-label { font-size: 12px; }
  .pagination { flex-wrap: wrap; gap: 6px; justify-content: flex-start; }
  .pagination button { padding: 7px 10px; font-size: 13px; }
  .tab-bar { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
  .tab-bar .tab { white-space: nowrap; flex: 0 0 auto; }
  .modal-overlay { padding: 8px; align-items: flex-end; }
  .modal, .modal.modal-lg, .modal.modal-xl, .modal.modal-sm { max-width: 100%; width: 100%; max-height: 94dvh; margin: 0; border-radius: 16px 16px 0 0; }
  .modal-header { padding: 16px; }
  .modal-header h3 { font-size: 16px; }
  .modal-body { padding: 16px; }
  .modal-footer { padding: 14px 16px; flex-direction: column; gap: 10px; }
  .modal-footer .btn { width: 100%; min-height: 44px; }
  .weibo-composer { padding: 14px; }
  .msg-item .msg-thumbs img { width: 56px; height: 56px; }
  .toast-container { left: 12px; right: 12px; top: max(12px, env(safe-area-inset-top)); }
  .toast { width: 100%; min-width: 0; }
  .wb-section { position: relative; }
  .wb-drag-handle { padding: 8px; font-size: 18px; }
  /* 商机分析图表：手机端单列、地图降高 */
  .oa-charts-row { grid-template-columns: 1fr; }
  .oa-china-map { height: 340px; }

  /* —— 列表页：手机端把「查询条件 + 排序」收进弹出层 —— */
  /* 默认隐藏筛选条，避免整页重绘时闪现；移入弹出层后由下方规则恢复显示 */
  .filter-bar { display: none !important; }
  #mobileFilterToggle {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    margin: 0 0 12px;
    box-shadow: var(--shadow);
  }
  #mfSheet .modal-body.mf-body { max-height: 68dvh; overflow-y: auto; }
  #mfSheet .filter-bar {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    margin-bottom: 0 !important;
    padding: 4px 0 !important;
  }
  #mfSheet .filter-bar .form-control,
  #mfSheet .filter-bar select,
  #mfSheet .filter-bar input,
  #mfSheet .filter-bar .search-input,
  #mfSheet .filter-bar .btn { width: 100% !important; max-width: none !important; }
  /* 手机端隐藏列表表头的列内排序箭头（排序已收入弹出层） */
  th.sortable .sort-ind { display: none; }
  th.sortable { cursor: default; }
}

/* ---------- 小屏手机（≤480px）---------- */
@media (max-width: 480px) {
  body { font-size: 13px; }
  .main-content { padding: 12px 10px 18px; }
  .card { padding: 14px; }
  .card-title { font-size: 14px; }
  .page-header h2 { font-size: 18px; }
  .stats-grid { grid-template-columns: 1fr; }
  .module-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .stat-card { padding: 8px 10px; gap: 6px; }
  .stat-card .stat-icon { width: 34px; height: 34px; font-size: 15px; border-radius: 8px; }
  .stat-card .stat-value { font-size: 16px; line-height: 1.25; }
  table { font-size: 11.5px; }
  th, td { padding: 9px 8px; }
  .modal-body { padding: 14px; }
  .login-card { padding: 30px 20px 24px; }
}

/* ---------- 极窄屏（≤380px）：统计卡单列 ---------- */
@media (max-width: 380px) {
  .stats-grid { grid-template-columns: 1fr; }
}

/* ===== 学习日程表 & 老师团队 & 同学列表 ===== */
.alert-info {
  background: linear-gradient(90deg, #e8f4fd, #f2f9ff);
  color: #1d6fa5;
  border: 1px solid #bcd9ee;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.6;
}
.schedule-list { display: flex; flex-direction: column; gap: 8px; }
.schedule-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: var(--bg-light, #f8f9fb);
  border-radius: 10px;
  border-left: 3px solid var(--primary, #FF1B6D);
  transition: background .2s;
}
.schedule-item:hover { background: #f0f2f8; }
.schedule-date {
  min-width: 92px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-light, #888);
}
.schedule-body { flex: 1; min-width: 0; }
.schedule-teacher { font-size: 13px; color: var(--text-light, #888); white-space: nowrap; }
.card-sub-title { font-size: 13px; }

.teacher-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.teacher-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--bg-light, #f8f9fb);
  border: 1px solid var(--border);
  border-radius: 12px;
  transition: all .2s;
}
.teacher-card:hover { border-color: rgba(255,27,109,.3); box-shadow: var(--shadow); }
.teacher-avatar { flex-shrink: 0; }
.teacher-info { min-width: 0; }

.classmate-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.classmate-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--bg-light, #f8f9fb);
  border: 1px solid var(--border);
  border-radius: 12px;
  transition: all .2s;
}
.classmate-card:hover { border-color: rgba(255,27,109,.3); box-shadow: var(--shadow); }
.classmate-avatar { flex-shrink: 0; }

/* ===== 学员卡片（名字横排 + 班级/证书并列）===== */
.student-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}
.student-card-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--bg-light, #f8f9fb);
  border: 1px solid var(--border);
  border-radius: 12px;
  transition: all .2s;
}
.student-card-item:hover { border-color: rgba(255,27,109,.3); box-shadow: var(--shadow); }
.sci-avatar { flex-shrink: 0; }
.sci-info { flex: 1; min-width: 0; }
.sci-name {
  font-weight: 600;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
  margin-bottom: 2px;
}
.sci-meta {
  display: flex;
  gap: 10px;
  font-size: 11px;
  color: var(--text-muted, #888);
  line-height: 1.4;
  flex-wrap: wrap;
}
.sci-class { white-space: nowrap; }
.sci-cert { white-space: nowrap; }

.checkbox-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-light, #fafbfd);
  max-height: 180px;
  overflow-y: auto;
}
.checkbox-item { display: flex; align-items: center; gap: 6px; font-size: 14px; cursor: pointer; }

/* ===== 讲师管理页 ===== */
.cert-template-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.cert-template-card { border: 1px solid var(--border); border-radius: 16px; overflow: hidden; background: #fff; display: flex; flex-direction: column; transition: box-shadow .2s, transform .2s; }
.cert-template-card:hover { box-shadow: 0 6px 20px rgba(0,0,0,.08); transform: translateY(-2px); }
.cert-template-thumb { position: relative; width: 100%; aspect-ratio: 4/3; background: #f5f6fa; cursor: pointer; overflow: hidden; }
.cert-template-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.cert-template-placeholder { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: #9aa0b5; font-size: 13px; }
.cert-template-placeholder span:first-child { font-size: 34px; }
.cert-template-body { padding: 10px 12px 4px; display: flex; flex-direction: column; gap: 6px; }
.cert-template-name { font-weight: 600; font-size: 14px; color: var(--text); }
.cert-template-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.cert-template-actions { padding: 8px 12px 12px; display: flex; gap: 8px; }
.teacher-manage-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.teacher-cat-block { margin: 14px 0 4px; }
.teacher-cat-title { font-size: 15px; font-weight: 700; color: var(--text); padding: 6px 2px; margin-bottom: 8px; border-left: 4px solid var(--primary); padding-left: 10px; }
.teacher-cat-block .teacher-manage-grid { margin-top: 4px; }
.teacher-manage-card {
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 16px;
  background: linear-gradient(160deg, #fff 0%, #fafbff 100%);
  display: flex;
  flex-direction: column;
  transition: all .25s;
}
.teacher-manage-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-hover);
  border-color: rgba(255, 27, 109, 0.25);
}
.teacher-manage-top { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.teacher-manage-avatar { flex-shrink: 0; }
.cand-item { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 10px; cursor: pointer; }
.cand-item:hover { background: var(--bg-hover, #f3f6fb); }
.cand-item.cand-selected { background: rgba(255, 27, 109, 0.07); outline: 1px solid var(--primary, #FF1B6D); }
.cand-avatar { flex-shrink: 0; }
.teacher-manage-head { min-width: 0; }
.teacher-manage-score { font-size: 13px; margin-bottom: 8px; }
.teacher-manage-exp { font-size: 13px; line-height: 1.7; color: var(--text, #333); }
.score-stars { font-size: 13px; letter-spacing: 1px; }

/* ===== 消息中心（铃铛/红点/消息列表/必读确认/滚动弹出） ===== */
.sidebar-user-actions { margin-left: auto; display: flex; align-items: center; gap: 6px; flex-shrink: 0; }

/* ===== 使用介绍按钮（头像旁 ?） ===== */
.sidebar-footer .onb-guide-btn {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 15px;
  line-height: 1;
  transition: all .2s;
}
.sidebar-footer .onb-guide-btn:hover {
  background: var(--primary, #FF1B6D);
  border-color: var(--primary, #FF1B6D);
  color: #fff;
}

/* ===== 聚光灯引导 ===== */
#onbOverlay { position: fixed; inset: 0; z-index: 99999; pointer-events: auto; }
.onb-spot {
  position: fixed;
  border-radius: 10px;
  box-shadow: 0 0 0 9999px rgba(0,0,0,0.62);
  border: 2px solid var(--primary, #FF1B6D);
  pointer-events: none;
  transition: left .25s ease, top .25s ease, width .25s ease, height .25s ease;
  z-index: 1;
}
.onb-tip {
  position: fixed;
  z-index: 2;
  width: 320px;
  max-width: calc(100vw - 24px);
  background: #fff;
  color: #222;
  border-radius: 12px;
  box-shadow: 0 12px 48px rgba(0,0,0,0.4);
  padding: 16px;
  font-size: 14px;
  line-height: 1.6;
}
html[data-theme="dark"] .onb-tip { background: #2a2a3e; color: #eee; box-shadow: 0 12px 48px rgba(0,0,0,0.6); }
.onb-tip-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.onb-step { font-size: 12px; color: var(--primary, #FF1B6D); font-weight: 600; }
.onb-close { border: none; background: transparent; font-size: 20px; line-height: 1; cursor: pointer; color: #999; padding: 0 2px; }
.onb-close:hover { color: #e74c3c; }
.onb-title { font-size: 15px; font-weight: 700; margin-bottom: 6px; color: #111; }
html[data-theme="dark"] .onb-title { color: #fff; }
.onb-text { color: #444; }
html[data-theme="dark"] .onb-text { color: #ccc; }
.onb-bar { height: 4px; background: rgba(0,0,0,0.08); border-radius: 2px; margin: 12px 0; overflow: hidden; }
html[data-theme="dark"] .onb-bar { background: rgba(255,255,255,0.1); }
.onb-progress { height: 100%; width: 0; background: var(--primary, #FF1B6D); transition: width .3s ease; }
.onb-actions { display: flex; align-items: center; gap: 8px; }
.onb-spacer { flex: 1; }

/* 商机分析：来源多选筛选 */
.oa-source-filter { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.oa-source-checks { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.chk-inline { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; cursor: pointer; color: var(--text-2, #666); }
.chk-inline input { width: 14px; height: 14px; cursor: pointer; }
.msg-bell {
  position: relative;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  border: none;
  color: rgba(255,255,255,0.85);
  font-size: 17px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .2s;
}
.msg-bell:hover { background: rgba(255,255,255,0.2); color: #fff; }
.msg-bell .bell-dot {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--danger);
  color: #fff;
  font-size: 10px;
  line-height: 16px;
  text-align: center;
  font-weight: 700;
  border: 1px solid #1a1a2e;
  display: none;
}
.msg-bell .bell-dot.show { display: block; animation: bellBlink 1s infinite; }
@keyframes bellBlink {
  0%, 100% { box-shadow: 0 0 0 0 rgba(231,76,60,0.7); }
  50% { box-shadow: 0 0 0 5px rgba(231,76,60,0); }
}
.nav-item-badge {
  margin-left: auto;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--danger);
  color: #fff;
  font-size: 10px;
  line-height: 16px;
  text-align: center;
  font-weight: 700;
}

/* 消息列表 */
.msg-list { display: flex; flex-direction: column; gap: 10px; }
.msg-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
  transition: all .2s;
  background: var(--card-bg);
}
.msg-item:hover { border-color: var(--primary); box-shadow: var(--shadow); transform: translateY(-1px); }
.msg-item.unread { background: rgba(255,27,109,0.03); border-left: 3px solid var(--primary); }
.msg-item.required { border-left: 3px solid var(--danger); }
.msg-item .msg-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--primary);
  flex-shrink: 0;
  margin-top: 8px;
  animation: bellBlink 1s infinite;
}
.msg-item .msg-dot.hidden { display: none; }
.msg-item .msg-body { flex: 1; min-width: 0; }
.msg-item .msg-title { font-weight: 600; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.msg-item .msg-content { color: var(--text-light); font-size: 13px; margin-top: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.msg-item .msg-meta { font-size: 12px; color: var(--text-light); margin-top: 6px; display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.msg-item .msg-thumbs { display: flex; gap: 6px; margin-top: 8px; }
.msg-item .msg-thumbs img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); }

/* 已读消息默认折叠分组 */
.read-collapse { margin-top: 12px; border-top: 1px dashed var(--border); padding-top: 12px; }
.read-collapse-summary { cursor: pointer; user-select: none; list-style: none; display: flex; align-items: center; gap: 8px; padding: 8px 4px; font-size: 13px; color: var(--text-2, #8a8a8a); }
.read-collapse-summary::-webkit-details-marker { display: none; }
.read-collapse-summary::before { content: '▸'; font-size: 12px; transition: transform .15s ease; }
.read-collapse[open] .read-collapse-summary::before { transform: rotate(90deg); }
.read-collapse-body { margin-top: 8px; display: flex; flex-direction: column; gap: 10px; }

/* 横向分类 tabs（同学圈板块） */
.tabs-horizontal { display: flex; gap: 6px; flex-wrap: wrap; padding: 4px 0; }
.tabs-horizontal .tab {
  padding: 7px 18px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--card-bg);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-light);
  cursor: pointer;
  transition: all .2s;
}
.tabs-horizontal .tab:hover { border-color: var(--primary); color: var(--primary); transform: translateY(-1px); }
.tabs-horizontal .tab.active {
  background: var(--gradient-main);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 4px 12px rgba(255, 27, 109, 0.28);
}
.tabs-horizontal .tab .tab-count { font-weight: 400; opacity: .8; margin-left: 2px; }

/* 教师工作台任课班级卡片 */
.teaching-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.teaching-card {
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 16px;
  background: linear-gradient(160deg, #fff 0%, #fdf2f7 100%);
  cursor: pointer;
  transition: all .25s;
  position: relative;
  overflow: hidden;
}
.teaching-card::after {
  content: '';
  position: absolute;
  right: -24px; bottom: -24px;
  width: 80px; height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,27,109,0.08), transparent 70%);
}
.teaching-card:hover { border-color: var(--primary); box-shadow: 0 10px 26px rgba(255,27,109,.16); transform: translateY(-4px); }
.teaching-card .tc-top { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.teaching-card .tc-name { font-size: 15px; font-weight: 700; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.teaching-card .tc-role { font-size: 11px; padding: 2px 8px; border-radius: 10px; flex-shrink: 0; }
.teaching-card .tc-role.head { background: var(--gradient-main); color: #fff; }
.teaching-card .tc-role.teach { background: linear-gradient(135deg, #4d8bf0, #2f6fe4); color: #fff; }
.teaching-card .tc-meta { font-size: 12px; color: var(--text-light); display: flex; flex-direction: column; gap: 2px; }
.teaching-card .tc-status { position: absolute; top: 12px; right: 12px; }

/* 工作台滚动消息条 */
.marquee-bar {
  overflow: hidden;
  white-space: nowrap;
  background: linear-gradient(90deg, rgba(255,27,109,.08), rgba(255,27,109,.16));
  border: 1px solid rgba(255,27,109,.25);
  border-radius: 12px;
  padding: 0;
  margin-bottom: 20px;
  position: relative;
  display: flex;
  align-items: center;
}
.marquee-bar .marquee-label {
  flex-shrink: 0;
  background: var(--gradient-main);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 12px 0 0 12px;
  z-index: 2;
}
.marquee-bar .marquee-track { flex: 1; overflow: hidden; }
.marquee-bar .marquee-inner { display: inline-block; padding: 6px 0; animation: marqueeMove 20s linear infinite; }
.marquee-bar .marquee-inner a { color: var(--primary-dark); font-size: 13px; margin-right: 48px; cursor: pointer; text-decoration: none; }
@keyframes marqueeMove {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* 消息弹窗（display_mode=popup） */
.msg-popup-card { display: flex; gap: 14px; padding: 8px 0; border-bottom: 1px dashed var(--border); }
.msg-popup-card:last-child { border-bottom: none; }

/* 阅读情况表格内头像 */
.read-avatar { display: inline-flex; align-items: center; gap: 6px; }

/* 班级详情页内同学圈区 */
.class-forum-preview .forum-post { margin-bottom: 10px; }

/* 消息发布表单中的班级多选 */
.msg-class-picker { max-height: 200px; overflow-y: auto; padding: 10px; border: 1px solid var(--border); border-radius: 10px; display: flex; flex-direction: column; gap: 6px; background: var(--bg-light, #fafbfd); }

/* ===== 通用动效 ===== */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

/* ===== 讲师任课日历 ===== */
.tc-nav { display: flex; align-items: center; gap: 8px; }
.tc-title { font-weight: 600; min-width: 96px; text-align: center; font-size: 14px; }
.tc-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-bottom: 6px; }
.tc-weekday { text-align: center; font-size: 12px; color: var(--text-light, #8a90a6); padding: 4px 0; font-weight: 600; }
.tc-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.tc-cell { border: 1px solid var(--border); border-radius: 10px; min-height: 88px; padding: 6px; background: #fff; overflow: hidden; display: flex; flex-direction: column; gap: 4px; }
.tc-empty { background: #f7f8fb; border-style: dashed; }
.tc-today { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); background: #fff8fa; }
.tc-daynum { font-size: 12px; font-weight: 600; color: var(--text-light, #8a90a6); display: flex; align-items: center; gap: 4px; }
.tc-today .tc-daynum { color: var(--primary); }
.tc-now { font-size: 10px; background: var(--primary); color: #fff; border-radius: 4px; padding: 0 4px; }
.tc-event { font-size: 11px; line-height: 1.35; background: #eef4ff; color: #2f6fe4; border-radius: 6px; padding: 3px 5px; cursor: pointer; overflow: hidden; display: flex; flex-direction: column; gap: 1px; }
.tc-event:hover { filter: brightness(0.96); }
.tc-event-whole { background: #e8f7ee; color: #1d9e5f; }
.tc-time { font-weight: 700; font-size: 10px; }
.tc-course { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.tc-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: rgba(47,111,228,.75); font-size: 10px; }

/* ===== 线下排课：表格 + 日历并排，各占一半 ===== */
.oc-split { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.oc-split-left, .oc-split-right { flex: 1 1 calc(50% - 8px); min-width: 340px; }
.oc-split-right .tc-grid { gap: 4px; }
.oc-split-right .tc-cell { min-height: 72px; padding: 5px; }
@media (max-width: 900px) {
  .oc-split { flex-direction: column; }
  .oc-split-left, .oc-split-right { flex: 1 1 100%; width: 100%; }
}

/* ===== 商机分析：图表卡片拖拽排序 ===== */
.oa-charts-row .card[data-chart-key] { position: relative; }
.oa-charts-row .card[data-chart-key]:hover { box-shadow: 0 2px 10px rgba(0,0,0,.08); }
.oa-card-dragging { opacity: .45; outline: 2px dashed var(--primary); }

/* ===== 弹窗尺寸：超大 ===== */
.modal.modal-xl { max-width: 1100px; }

/* ===== 激励评优：排行榜 ===== */
.reward-rank-list { display: flex; flex-direction: column; gap: 8px; }
.reward-rank-item { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border: 1px solid var(--border); border-radius: 12px; background: #fff; }
.reward-rank-item:nth-child(1) { border-color: #f5d97b; background: linear-gradient(90deg, #fffdf3, #fff); }
.reward-rank-item:nth-child(2) { border-color: #d9dde4; background: linear-gradient(90deg, #fafbfd, #fff); }
.reward-rank-item:nth-child(3) { border-color: #e8c3a0; background: linear-gradient(90deg, #fdf6f0, #fff); }
.reward-rank-no { width: 34px; height: 34px; border-radius: 50%; background: var(--bg, #f3f4f8); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px; color: var(--text); flex-shrink: 0; }
.reward-rank-name { flex: 1; min-width: 0; }
.reward-rank-stat { text-align: center; padding: 0 12px; border-left: 1px solid var(--border); }
.reward-rank-points { font-size: 22px; font-weight: 700; color: var(--primary); }
.reward-rank-meta { display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--text-light, #8a90a6); text-align: right; }
.reward-rank-item.reward-rank-active { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary) inset; }
.reward-class-list .reward-rank-item { transition: transform .15s, border-color .15s; }
.reward-class-list .reward-rank-item:hover { transform: translateY(-2px); border-color: var(--primary); }

/* ===== 配方管理 ===== */
.recipe-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.recipe-card { border: 1px solid var(--border); border-radius: 14px; padding: 14px; background: #fff; display: flex; flex-direction: column; gap: 8px; transition: box-shadow .2s, transform .2s; }
.recipe-card:hover { box-shadow: 0 6px 18px rgba(0,0,0,.08); transform: translateY(-2px); }
.recipe-card-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.recipe-card-foot { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 8px; border-top: 1px dashed var(--border); }
.recipe-cost { font-weight: 700; color: var(--danger); font-size: 14px; }
.recipe-cost.empty { color: var(--text-light, #8a90a6); font-weight: 500; }
.recipe-detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.detail-card { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; background: #fafbfd; }
.detail-card .card-title { font-size: 13px; margin-bottom: 6px; }

/* ===== 通用辅助 ===== */
.fs-24 { font-size: 24px; }
.fs-11 { font-size: 11px; }
.emoji-panel {
  background: #fff; border: 1px solid var(--border, #ddd); border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,.1); margin-top: 4px; position: relative; z-index: 10;
}

/* ===== 读书任务卡片（我的读书任务 / 工作台） ===== */
.reading-task-card { display: flex; flex-direction: column; }
.reading-task-card .reading-task-top { display: flex; gap: 10px; align-items: flex-start; }
.reading-task-cover {
  width: 48px; height: 64px; object-fit: cover; border-radius: 6px; flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,.1);
}
.reading-task-cover.no-cover {
  width: 48px; height: 64px; border-radius: 6px; flex-shrink: 0;
  background: linear-gradient(160deg, #f6e7ff 0%, #ffe3ec 45%, #fff3d6 100%);
  display: flex; align-items: center; justify-content: center; font-size: 20px; opacity: .6;
}
.reading-task-body { flex: 1; min-width: 0; }
.reading-linked-post {
  margin-top: 10px;
  padding: 8px 10px;
  background: var(--bg-muted, #f5f6fa);
  border-radius: 8px;
}
.reading-linked-post .rlp-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.reading-linked-post .rlp-book { font-size: 13px; font-weight: 600; }
.reading-linked-post .rlp-reply {
  margin-top: 6px; font-size: 12px; color: var(--text-muted, #666);
  line-height: 1.4; max-height: 48px; overflow: hidden;
}
.reading-inline-form { margin-top: 10px; padding: 10px; background: var(--bg-muted, #f5f6fa); border-radius: 8px; }
.reading-inline-form .form-row { align-items: flex-end; gap: 8px; }
.reading-inline-form textarea {
  flex: 1; min-height: 64px; resize: vertical;
  font-size: 14px; line-height: 1.6; padding: 8px 10px;
}
.reading-emoji-btn {
  cursor: pointer; font-size: 18px; padding: 4px 6px; border-radius: 4px;
  background: none; border: none; line-height: 1; flex-shrink: 0;
  transition: background .15s;
}
.reading-emoji-btn:hover { background: rgba(0,0,0,.06); }
.reading-wb-item {
  padding: 10px 0;
  border-bottom: 1px solid var(--border, #eee);
}
.reading-wb-item:last-child { border-bottom: none; padding-bottom: 0; }

/* ===== 读书任务日历视图 ===== */
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
  padding: 8px;
  background: #fafbfd;
  border-radius: 8px;
  border: 1px solid var(--border, #eee);
}
.cal-cell {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  border-radius: 4px;
  position: relative;
  font-weight: 500;
  overflow: hidden;
}
.cal-day { font-weight: 600; font-size: 12px; }
.cal-note {
  margin-top: 3px;
  font-size: 10px;
  line-height: 1.3;
  font-weight: 400;
  color: var(--text-muted, #888);
  text-align: center;
  max-height: 3.9em;
  overflow: hidden;
  word-break: break-word;
}
.cal-cell.cal-empty { background: transparent; }
.cal-cell.cal-done {
  background: var(--success-light, #e8f5e9);
  color: var(--success, #2e7d32);
  cursor: pointer;
  font-weight: 600;
}
.cal-cell.cal-done:hover { filter: brightness(0.96); outline: 1px solid var(--primary); }
.cal-cell.cal-miss {
  background: #f5f5f5;
  color: #bbb;
}
.cal-makeup {
  position: absolute;
  bottom: 1px;
  right: 2px;
  font-size: 8px;
  color: #e65100;
  background: #fff3e0;
  border-radius: 2px;
  padding: 0 2px;
  line-height: 1.2;
  font-weight: 700;
}
.cal-legend { display: flex; gap: 16px; font-size: 12px; color: var(--text-muted); flex-wrap: wrap; }
.cal-dot {
  display: inline-block;
  width: 14px; height: 14px;
  border-radius: 3px;
  vertical-align: middle;
  margin-right: 4px;
}
.cal-dot.cal-done { background: var(--success-light, #e8f5e9); border: 1px solid #c8e6c9; }
.cal-dot.cal-miss { background: #f5f5f5; border: 1px solid #eee; }
.cal-makeup-legend {
  display: inline-block;
  font-size: 10px;
  color: #e65100;
  background: #fff3e0;
  border-radius: 2px;
  padding: 1px 4px;
  font-weight: 700;
  vertical-align: middle;
  line-height: 1.4;
}
.completion-rate-btn:hover { color: var(--danger); }
.reading-progress-bar { display: flex; align-items: center; gap: 6px; }

/* ===== 工作台板块可拖拽排序 ===== */
.wb-section { position: relative; margin-bottom: 18px; }
.wb-section.wb-dragging { opacity: .45; }
.wb-drag-handle {
  position: absolute; top: 8px; right: 10px; z-index: 4;
  cursor: grab; font-size: 15px; line-height: 1; color: var(--text-light, #888);
  opacity: .22; user-select: none; transition: opacity .15s;
  padding: 2px 4px; border-radius: 4px;
}
.wb-section:hover .wb-drag-handle { opacity: .7; }
.wb-drag-handle:active { cursor: grabbing; opacity: 1; }

/* ===== 商机分析页面 ===== */
.btn-group {
  display: inline-flex; gap: 2px; background: var(--bg-muted, #f0f2f8); border-radius: 8px; padding: 2px;
}
.btn-group .btn { border-radius: 6px; border: none; font-size: 13px; }
.btn-group .btn-primary { box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.btn-group .btn-outline { background: transparent; color: var(--text-light); }
.btn-group .btn-outline:hover { background: rgba(255,255,255,.6); color: var(--text); }

/* 商机分析图表栅格（桌面两列，手机单列见响应式块） */
.oa-charts-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 16px; margin: 16px 0; }
/* 商机分析汇总卡片：自适应更紧凑，宽屏可一行容纳更多卡片 */
.oa-summary-grid { grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); }
.oa-china-map { width: 100%; height: 500px; }
/* 区域分析：两卡等高；列表过长时自身滚动，保持卡片比例协调 */
.oa-region-row { align-items: stretch; }
.oa-region-card { display: flex; flex-direction: column; }
.oa-region-list { max-height: 500px; overflow-y: auto; margin-top: 4px; padding-right: 4px; }

/* 商机分析表格优化：数字/内容居中，表头与单元格统一对齐 */
.oa-table th, .oa-table td { text-align: center; vertical-align: middle; }
.oa-table th { white-space: nowrap; }
.oa-table td { font-variant-numeric: tabular-nums; }

/* ===== 线下课模块 补充工具类 ===== */
.tag-primary { background: var(--gradient-main); color: #fff; border: 1px solid transparent; }
.tag-gray { background: #eef0f5; color: #5b6172; border: 1px solid #e2e5ec; }
.info-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.info-grid > div { display: flex; flex-direction: column; gap: 2px; background: var(--bg-light); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; }
.label, .lbl { font-size: 12px; color: var(--text-light); font-weight: 500; }
.info-grid .val { font-size: 14px; font-weight: 600; color: var(--text); }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.stat-row { display: flex; flex-wrap: wrap; gap: 12px; margin: 14px 0; }
.stat-box { flex: 1; min-width: 130px; background: var(--card-bg); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; box-shadow: var(--shadow); }
.stat-num { font-size: 24px; font-weight: 700; color: var(--text); }
.stat-lbl { font-size: 12px; color: var(--text-light); margin-top: 4px; }
.stat-box .sb-label { font-size: 12px; color: var(--text-light); }
.stat-box .sb-value { font-size: 22px; font-weight: 700; color: var(--primary); margin-top: 4px; }
.stat-box .sb-sub { font-size: 12px; color: var(--text-light); margin-top: 2px; }
.alert-warn { background: #fff3cd; color: #856404; border: 1px solid #ffe69b; border-radius: 10px; padding: 10px 14px; margin: 12px 0; font-size: 13px; }
.row-warn { background: #fff6e6 !important; }
.warn { color: var(--warning); font-weight: 600; }
.loading { padding: 40px; text-align: center; color: var(--text-light); }

.num { font-weight: 700; color: var(--primary); }
.tabs { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.oc-tab.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.att-item { display: inline-flex; align-items: center; gap: 6px; background: var(--bg-light); border: 1px solid var(--border); border-radius: 8px; padding: 5px 10px; margin: 4px 6px 4px 0; font-size: 13px; }
.oc-pts { font-weight: 700; color: var(--primary); }
.oc-rmk { color: var(--text-light); font-size: 12px; }

/* ===== 招生计划：分段切换（月历 / 列表）===== */
.seg-toggle { display: inline-flex; border: 1px solid var(--border); border-radius: 9px; overflow: hidden; background: var(--bg-light); }
.seg-btn { border: none; background: transparent; padding: 7px 14px; font-size: 13px; cursor: pointer; color: var(--text-light); transition: .15s; }
.seg-btn:hover { color: var(--primary); }
.seg-btn.active { background: var(--primary); color: #fff; font-weight: 600; }

/* ===== 月历 ===== */
.cal-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.cal-title { font-size: 16px; font-weight: 700; min-width: 96px; text-align: center; }
.cal-legend { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; font-size: 12px; color: var(--text-light); flex-wrap: wrap; }
.cal-dot { width: 10px; height: 10px; border-radius: 3px; display: inline-block; margin-right: 4px; vertical-align: middle; }
.cal-dot.cal-recruiting { background: #f0ad4e; }
.cal-dot.cal-started { background: #28a745; }
.cal-dot.cal-finished { background: #6c757d; }
.cal-dot.cal-full { background: #e74c3c; }

.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
/* 月历收窄：居中卡片化，不占满全屏，显示更精致 */
.cal-wrap { max-width: 960px; margin: 0 auto; background: var(--card-bg); border: 1px solid var(--border); border-radius: 14px; padding: 18px; box-shadow: var(--shadow); }
.cal-wd { text-align: center; font-size: 12px; color: var(--text-light); font-weight: 600; padding: 8px 0; background: var(--bg-light); }
.cal-cell { background: #fff; border: none; border-radius: 0; min-height: 96px; padding: 6px; --cal-pad: 6px; display: flex; flex-direction: column; }
.cal-cell.cal-empty { background: var(--bg-light); }
.cal-cell.cal-today { box-shadow: inset 0 0 0 2px var(--primary); }
.cal-daynum { font-size: 13px; font-weight: 600; color: var(--text-light); margin-bottom: 4px; flex-shrink: 0; }
.cal-today .cal-daynum { color: var(--primary); }
.cal-items { display: flex; flex-direction: column; gap: 3px; overflow: auto; margin-top: 4px; }
.cal-chip { font-size: 12px; line-height: 1.3; padding: 3px 7px; border-radius: 6px; color: #fff; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: .12s; align-self: flex-start; }
.cal-chip:hover { filter: brightness(1.06); transform: translateY(-1px); }
.cal-chip.cal-recruiting { background: #f0ad4e; }
.cal-chip.cal-started { background: #28a745; }
.cal-chip.cal-finished { background: #6c757d; }

/* 跨日连续条带：按 lane 对齐，负边距出血到格边缘，相邻日连成一条 */
.cal-lane { height: 18px; margin: 1px 0; }
.cal-range { display: block; height: 18px; line-height: 18px; margin: 1px calc(-1 * var(--cal-pad)); padding: 0 9px; border-radius: 0; font-size: 11px; color: #fff; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: .12s; }
.cal-range:hover { filter: brightness(1.08); }
.cal-range-start { border-top-left-radius: 8px; border-bottom-left-radius: 8px; }
.cal-range-end { border-top-right-radius: 8px; border-bottom-right-radius: 8px; }
.cal-range.cal-recruiting { background: #f0ad4e; }
.cal-range.cal-started { background: #28a745; }
.cal-range.cal-finished { background: #6c757d; }
.cal-chip.cal-full { background: #e74c3c; }
.cal-range.cal-full { background: #e74c3c; }
.cal-range-hint { margin-left: 4px; color: var(--text-light); font-size: 11px; }

.cal-unscheduled { margin-top: 16px; }
.cal-unscheduled-title { font-size: 13px; font-weight: 600; color: var(--text-light); margin-bottom: 8px; }

@media (max-width: 768px) {
  .cal-grid { gap: 1px; }
  .cal-cell { min-height: 60px; padding: 4px; --cal-pad: 4px; border-radius: 0; }
  .cal-daynum { font-size: 11px; margin-bottom: 2px; }
  .cal-chip { font-size: 10px; padding: 2px 4px; border-radius: 5px; }
  .cal-wd { font-size: 10px; padding: 5px 0; }
  .cal-lane { height: 14px; }
  .cal-range { height: 14px; line-height: 14px; font-size: 9px; padding: 0 5px; }
  .cal-range-start { border-top-left-radius: 6px; border-bottom-left-radius: 6px; }
  .cal-range-end { border-top-right-radius: 6px; border-bottom-right-radius: 6px; }
}

/* ===== 深色主题（仅覆盖变量与硬编码浅色背景，不影响浅色默认样式） ===== */
[data-theme="dark"] {
  --bg: #15171f;
  --bg-light: #1b1e29;
  --bg-hover: #232737;
  --card-bg: #1e2130;
  --text: #e8eaf2;
  --text-light: #9aa0b4;
  --border: #2c3142;
  --gradient-soft: linear-gradient(135deg, #2a1f33 0%, #221d33 100%);
}

[data-theme="dark"] body {
  background: linear-gradient(180deg, #10121a 0%, var(--bg) 220px);
  color: var(--text);
}
[data-theme="dark"] .card,
[data-theme="dark"] .stat-card {
  border: 1px solid var(--border);
  box-shadow: 0 1px 3px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.35);
}
[data-theme="dark"] .form-control,
[data-theme="dark"] textarea.form-control,
[data-theme="dark"] select.form-control {
  background: #232737;
  color: var(--text);
  border-color: var(--border);
}
[data-theme="dark"] .form-control::placeholder { color: var(--text-light); }
[data-theme="dark"] .modal {
  background: #1e2130;
  color: var(--text);
}
[data-theme="dark"] .modal-header {
  background: linear-gradient(135deg, #2a1f33, #221d33);
  border-bottom-color: var(--border);
}
[data-theme="dark"] .modal-header h3 { color: var(--text); }
[data-theme="dark"] th {
  background: #232737;
  color: var(--text-light);
  border-bottom-color: var(--border);
}
[data-theme="dark"] td {
  border-bottom-color: var(--border);
  color: var(--text);
}
[data-theme="dark"] tr:hover td { background: #232737; }
[data-theme="dark"] .btn-secondary { background: #2c3142; color: var(--text); }
[data-theme="dark"] .btn-secondary:hover { background: #353b4f; }
[data-theme="dark"] .btn-outline { color: var(--text); border-color: var(--border); }
[data-theme="dark"] .btn-outline:hover { background: rgba(255,255,255,.06); color: var(--text); }
[data-theme="dark"] .cal-cell {
  background: #232737;
  border-color: var(--border);
}
[data-theme="dark"] .cal-cell.cal-today { border-color: var(--primary); }
[data-theme="dark"] .course-card,
[data-theme="dark"] .book-card,
[data-theme="dark"] .forum-post,
[data-theme="dark"] .weibo-composer {
  background: #1e2130;
  border: 1px solid var(--border);
}
[data-theme="dark"] .pagination button {
  background: #232737;
  color: var(--text);
  border-color: var(--border);
}
[data-theme="dark"] .mobile-topbar {
  background: #1e2130;
  border-bottom: 1px solid var(--border);
  color: var(--text);
}
[data-theme="dark"] .empty-state .icon,
[data-theme="dark"] .empty-state .text { color: var(--text-light); }

/* ===== 个人资料编辑弹窗（基础 / 工作 / 隐私 分块） ===== */
.profile-edit-section { margin-bottom: 16px; padding: 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg, #fff); }
.profile-edit-title { font-weight: 600; font-size: 14px; margin-bottom: 12px; padding-bottom: 6px; border-bottom: 1px dashed var(--border); }
.field-hint { font-size: 11px; color: var(--text-light); margin-top: 4px; }
.profile-att-item { display: flex; align-items: center; gap: 10px; padding: 8px; border: 1px solid var(--border); border-radius: 8px; margin-bottom: 8px; }
.profile-att-item img { width: 48px; height: 48px; object-fit: cover; border-radius: 6px; border: 1px solid var(--border); flex-shrink: 0; }

/* ===== 用户信息卡：隐私信息提示与区块 ===== */
.profile-privacy-hint { margin-top: 14px; padding: 12px 14px; border: 1px dashed var(--border); border-radius: 10px; background: rgba(0,0,0,0.03); color: var(--text-light); font-size: 13px; line-height: 1.6; }
.profile-privacy-block { margin-top: 14px; padding: 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg, #fff); }
.profile-privacy-title { font-weight: 600; font-size: 13px; margin-bottom: 10px; color: var(--text); }
.owner-unassigned { color: #e74c3c; font-weight: 700; }

/* ===== 同学 / 讲师 信息卡（优化版） ===== */
.person-hero { display: flex; flex-direction: column; align-items: center; padding: 10px 0 14px; background: linear-gradient(135deg, rgba(124,92,255,0.08), rgba(255,92,170,0.08)); border-radius: 12px; margin-bottom: 14px; }
.person-hero .avatar { width: 76px; height: 76px; border-radius: 50%; overflow: hidden; background: linear-gradient(135deg, var(--primary), #7c5cff); display: flex; align-items: center; justify-content: center; font-size: 30px; color: #fff; box-shadow: 0 4px 12px rgba(124,92,255,0.25); }
.person-name { font-weight: 700; font-size: 19px; margin-top: 10px; }
.person-sub { margin-top: 6px; display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.info-row { display: flex; gap: 10px; padding: 7px 0; border-bottom: 1px dashed var(--border); }
.info-row:last-child { border-bottom: none; }
.info-row .k { width: 72px; flex-shrink: 0; color: var(--text-light); font-size: 13px; }
.info-row .v { flex: 1; font-size: 14px; line-height: 1.5; }
.info-row .v.bio { white-space: pre-line; }

/* ===== 证书项 + 有效 / 失效标签 ===== */
.cert-item { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; cursor: pointer; transition: .15s; position: relative; }
.cert-item:hover { border-color: var(--primary); background: rgba(124,92,255,0.04); }
.cert-status { position: absolute; top: 10px; right: 10px; font-size: 12px; font-weight: 700; padding: 2px 10px; border-radius: 20px; }
.cert-valid { background: #e7f8ee; color: #1a9e54; }
.cert-invalid { background: #fdeaea; color: #d93025; }
.cert-style-label { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--text-light); margin-top: 6px; }
.cert-watermark { position: relative; display: inline-block; max-width: 100%; }
.cert-watermark::after { content: "证书样式"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 26px; font-weight: 800; color: rgba(255,255,255,0.5); letter-spacing: 6px; text-shadow: 0 1px 4px rgba(0,0,0,0.35); pointer-events: none; }

/* ===== 往期同学会 工具栏 ===== */
.alumni-toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.alumni-toolbar .form-control { width: auto; min-width: 130px; }
.alumni-count { color: var(--text-light); font-size: 13px; }

/* ===== 工作经历（编辑 / 展示 / 审核） ===== */
.work-exp-list { display: flex; flex-direction: column; gap: 8px; }
.work-exp-item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--bg-light);
}
.work-exp-new-row {
  padding: 12px; margin-bottom: 10px;
  border: 1px dashed var(--border); border-radius: 10px;
  background: rgba(124,92,255,0.03);
}
.work-exp-new-row .btn-sm { padding: 4px 10px; font-size: 12px; }

/* ===== 工作台手机端增强（避免缩在一起） ===== */
@media (max-width: 768px) {
  /* 工作台统计卡片与商机分析保持同样紧凑舒适 */
  #app .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  #app .stat-card { padding: 10px 11px; gap: 8px; }
  #app .stat-card .stat-icon { width: 36px; height: 36px; font-size: 16px; border-radius: 10px; }
  #app .stat-card .stat-value { font-size: 16px; line-height: 1.25; word-break: break-all; }
  #app .stat-card .stat-label { font-size: 11px; }
  /* 工作台模块卡片：手机端更紧凑 */
  #app .module-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  #app .module-card { padding: 14px 8px; gap: 6px; }
  #app .module-icon { font-size: 24px; }
  #app .module-label { font-size: 12px; }
  #app .module-badge { top: 5px; right: 5px; min-width: 16px; height: 16px; font-size: 10px; line-height: 16px; }
  /* 提醒/读书/论坛动态卡片在手机端单列不挤压 */
  #app .reminder-item { flex-direction: column; align-items: flex-start; gap: 6px; }
  #app .reading-wb-item > .flex { flex-direction: column; align-items: flex-start; gap: 8px; }
  #app .forum-post .post-header { flex-wrap: wrap; gap: 6px; }
  /* 抽屉侧边栏在手机上全宽，避免看到被挤压的主内容 */
  .sidebar.show { width: 100vw; }
}

@media (max-width: 480px) {
  #app .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  #app .stat-card { padding: 8px 10px; gap: 6px; }
  #app .stat-card .stat-icon { width: 34px; height: 34px; font-size: 15px; border-radius: 8px; }
  #app .stat-card .stat-value { font-size: 15px; }
  #app .module-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  #app .module-card { padding: 12px 6px; }
}

/* ===== 筛选条件按钮 + 卡片显隐（由 filter-collapse.js 控制） ===== */
.filter-card { display: none; max-width: 100%; box-sizing: border-box; overflow-x: hidden; }
.filter-card.open { display: block; }
.fc-breath { animation: fcBreath 2.4s ease-in-out infinite; }
@keyframes fcBreath {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 27, 109, .55); }
  50% { box-shadow: 0 0 0 10px rgba(255, 27, 109, 0); }
}
.fc-breath:hover { animation-duration: 1.2s; }

/* ===== 工作台整体：与其他页面一致，宽度跟随内容区自适应铺满 ===== */
.dashboard-wrap { width: 100%; }

/* ===== 渠道管理 ===== */
.form-static { padding: 8px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-card); min-height: 38px; display: flex; align-items: center; word-break: break-all; }
.ch-tabs .btn { white-space: nowrap; }
.policy-item { background: var(--bg-card); }
.flex-wrap { flex-wrap: wrap; }


/* ===== 课程学习页（Web 端 watchCourse） ===== */
/* 横屏视频（宽≥高）：视频顶部全宽，信息在下方；竖屏视频（宽<高）：视频左侧细高，信息右侧 */
.course-watch { display: block; }
.course-watch .video-wrap { width: 100%; border-radius: 8px; overflow: hidden; background: #000; margin: 0; }
.course-watch.mode-video .video-wrap { width: 100%; height: 360px; }
.course-watch.mode-doc .video-wrap { min-height: 500px; height: auto; }
.course-watch.landscape.mode-video .info-panel { margin-top: 14px; }
.course-watch.portrait.mode-video { display: flex; gap: 16px; align-items: flex-start; }
.course-watch.portrait.mode-video .video-wrap { width: 280px; height: 480px; flex-shrink: 0; }
.course-watch.portrait.mode-video .info-panel { flex: 1; min-width: 0; }
.course-watch .stat-row { display: flex; align-items: center; gap: 24px; margin: 12px 0 4px; flex-wrap: wrap; }
.course-watch .stat-cell { text-align: center; }
.course-watch .stat-cell.flex1 { flex: 1; text-align: left; min-width: 120px; }
.course-watch .stat-num { font-size: 28px; font-weight: 700; color: var(--primary); }
.course-watch .stat-lab { font-size: 12px; color: var(--text-light); margin-top: 2px; }
.course-watch .prog { height: 8px; border-radius: 999px; background: var(--border); overflow: hidden; }
.course-watch .prog-bar { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--primary), var(--primary-dark)); transition: width .3s; }
.course-watch .ring-wrap { display: flex; flex-direction: column; align-items: center; }
.course-watch .ring { width: 96px; height: 96px; border-radius: 50%; display: flex; align-items: center; justify-content: center; position: relative; }
.course-watch .ring-inner { position: absolute; inset: 10px; border-radius: 50%; background: var(--card-bg); }
.course-watch .ring-num { position: relative; font-size: 20px; font-weight: 800; color: var(--primary); display: flex; align-items: baseline; }
.course-watch .ring-pct { font-size: 12px; margin-left: 1px; }
.course-watch .rec-sec { margin-top: 16px; border-top: 1px solid var(--border); padding-top: 12px; }
.course-watch .rec-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.course-watch .rec-title { font-size: 14px; font-weight: 700; }
.course-watch .timeline { position: relative; padding-left: 16px; }
.course-watch .timeline::before { content: ''; position: absolute; left: 4px; top: 6px; bottom: 6px; width: 2px; background: var(--border); }
.course-watch .tl-item { display: flex; gap: 10px; padding: 6px 0; }
.course-watch .tl-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--primary); margin-top: 8px; flex-shrink: 0; box-shadow: 0 0 0 3px rgba(255,27,109,.15); }
.course-watch .tl-body { flex: 1; min-width: 0; }
.course-watch .tl-time { font-size: 14px; color: var(--text); }
.course-watch .tl-meta { font-size: 12px; color: var(--text-light); margin-top: 2px; }
.course-watch .tl-ellipsis { font-size: 12px; color: var(--primary); padding: 6px 0 4px 18px; text-align: center; cursor: pointer; }
.course-watch .tl-more { font-size: 12px; color: var(--text-light); padding: 6px 0 4px 18px; text-align: center; cursor: pointer; }
@media (max-width: 700px) {
  .course-watch.portrait.mode-video { flex-direction: column; }
  .course-watch.portrait.mode-video .video-wrap { width: 100%; height: 360px; }
}

/* ===== 渠道状态流转进度图 ===== */
.ch-status-flow { display: flex; align-items: center; justify-content: center; gap: 0; padding: 8px 4px 4px; flex-wrap: wrap; }
.ch-step { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 110px; padding: 6px; }
.ch-step-num { width: 38px; height: 38px; border-radius: 50%; background: var(--border); color: var(--text-light); font-weight: 700; display: flex; align-items: center; justify-content: center; font-size: 16px; transition: all .3s; }
.ch-step.passed .ch-step-num { background: var(--success); color: #fff; }
.ch-step.cur .ch-step-num {
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #fff;
  box-shadow: 0 0 0 0 rgba(255, 27, 109, 0.6);
  animation: ch-step-pulse 1.4s ease-in-out infinite;
}
@keyframes ch-step-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 27, 109, 0.6); transform: scale(1); }
  50% { box-shadow: 0 0 0 12px rgba(255, 27, 109, 0); transform: scale(1.08); }
}
.ch-step-name { font-size: 14px; font-weight: 600; }
.ch-step.passed .ch-step-name { color: var(--text-light); }
.ch-step.cur .ch-step-name { color: var(--primary); }
.ch-step-btn { font-size: 12px; padding: 4px 10px; }
.ch-step-arrow { width: 36px; height: 2px; background: var(--border); position: relative; margin: 0 4px; align-self: center; }
.ch-step-arrow::after { content: '▶'; position: absolute; right: -10px; top: -8px; color: var(--text-light); font-size: 14px; }
.ch-status-flow .ch-step.passed + .ch-step-arrow,
.ch-status-flow .ch-step.cur + .ch-step-arrow { background: var(--primary); }
.ch-status-flow .ch-step.passed + .ch-step-arrow::after,
.ch-status-flow .ch-step.cur + .ch-step-arrow::after { color: var(--primary); }

/* 政策模板预览卡片 */
.ch-tpl-preview { line-height: 1.6; }
.ch-tpl-preview .tag-light { font-size: 11px; }

/* ===== 个人资料：绑定微信按钮（微信绿） ===== */
.wechat-bind-bar { display: flex; justify-content: center; }
.wechat-btn {
  display: inline-block;
  min-width: 140px;
  padding: 6px 18px;
  border: none;
  border-radius: 6px;
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all .2s;
}
.wechat-btn-bind { background: #07C160; box-shadow: 0 2px 4px rgba(7, 193, 96, .25); }
.wechat-btn-bind:hover { background: #06ad56; }
.wechat-btn-bind:active { transform: scale(0.97); }
.wechat-btn-unbind { background: #fff; color: #888; border: 1px solid var(--border); }
.wechat-btn-unbind:hover { color: var(--danger); border-color: var(--danger); }

/* ===== 我的课程（线上+线下合并 / 卡片+列表切换） ===== */
.myc-toggle-btn { min-width: 72px; }
.myc-sec { margin-bottom: 22px; }
.myc-sec-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.myc-sec-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; padding: 4px 12px; border-radius: 6px; }
.myc-sec-tag.kind-online { background: #3b82f61a; color: #3b82f6; }
.myc-sec-tag.kind-offline { background: #16a0851a; color: #16a085; }
.myc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.view-list .myc-grid { display: block; }
.view-list .myc-grid .course-card { display: none; }
.view-list .myc-grid .myc-row { display: flex; }
.view-card .myc-grid .myc-row { display: none; }
.myc-row { display: none; align-items: center; gap: 14px; padding: 12px 14px; background: var(--card-bg); border: 1px solid var(--border); border-radius: 10px; margin-bottom: 10px; }
.myc-row-cover { width: 108px; height: 62px; border-radius: 8px; overflow: hidden; flex-shrink: 0; background: #000; }
.myc-row-cover img { width: 100%; height: 100%; object-fit: cover; }
.myc-row-cover .course-cover-placeholder { width: 100%; height: 100%; border-radius: 0; }
.myc-row-main { flex: 1; min-width: 0; }
.myc-row-title { font-size: 15px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.myc-row-prog { margin-top: 6px; max-width: 320px; }
.myc-row-act { flex-shrink: 0; }
.course-cover { position: relative; }
.course-cover-placeholder { width: 100%; height: 130px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; font-size: 34px; color: #fff; }
.course-cover-placeholder.cover-online { background: linear-gradient(135deg, #3b82f6, #6366f1); }
.course-cover-placeholder.cover-offline { background: linear-gradient(135deg, #16a085, #10b981); }
.course-cover-placeholder span:last-child { font-size: 13px; font-weight: 600; max-width: 90%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.course-kind-tag { position: absolute; top: 8px; left: 8px; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; color: #fff; }
.course-kind-tag.kind-online { background: rgba(59, 130, 246, .92); }
.course-kind-tag.kind-offline { background: rgba(22, 163, 133, .92); }
.course-signed-tag { position: absolute; bottom: 8px; right: 8px; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; background: rgba(255,255,255,.92); color: #16a085; }
/* 双视图容器显隐（卡片/列表同时渲染，CSS 切换） */
.view-card .view-list-only { display: none !important; }
.view-list .view-card-only { display: none !important; }
.view-card .view-card-only { display: grid !important; }
.view-list .view-list-only { display: block !important; }

/* 我的课程：大卡片容器 */
.myc-big-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: 14px; padding: 18px 18px 8px; }
.myc-big-card .myc-sec { margin-bottom: 22px; }

/* 我的课程：两个独立卡片 + 线下课表格 */
.myc-view-toggle { display: flex; gap: 8px; }
.myc-big-card-off { margin-top: 18px; }
.myc-off-table .myc-off-row {
  display: flex; align-items: center; gap: 14px; padding: 12px 14px;
  background: var(--card-bg); border: 1px solid var(--border); border-radius: 10px; margin-bottom: 10px;
}
.myc-off-table .myc-off-row:last-child { margin-bottom: 0; }
.myc-off-cover { width: 88px !important; height: 62px !important; }

/* 我的课程：搜索框 + 表格列排序 */
.myc-search { border-radius: 8px; font-size: 13px; }
.myc-sort-th { white-space: nowrap; }
.myc-sort-th:hover { color: var(--primary); }
.myc-sort-th.myc-sort-active { color: var(--primary); background: rgba(59,130,246,.06); }

/* 我的工作台：功能模块默认两行，可展开 */
.module-grid.collapsed { max-height: 240px; overflow: hidden; }

/* 工作台：展开/收起闪烁箭头 */
.wb-modules-arrow, .my-task-arrow {
  text-align: center;
  font-size: 18px;
  color: var(--primary);
  cursor: pointer;
  padding: 4px 0 0;
  animation: wbArrowBlink 1.2s ease-in-out infinite;
  user-select: none;
}
@keyframes wbArrowBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.25; }
}

/* ===== 大眼市场业务系统入口（2026-09-02） ===== */
/* 侧边栏「工作台」下方的醒目入口：描边加粗框 */
.nav-item.nav-item-market {
  border: 1.5px solid var(--primary, #ff1b6d);
  border-radius: 10px;
  margin: 2px 8px 2px 0;
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary, #ff1b6d) 12%, transparent), color-mix(in srgb, var(--primary, #ff1b6d) 4%, transparent));
  box-shadow: inset 0 0 0 0 transparent;
}
.nav-item.nav-item-market:hover {
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary, #ff1b6d) 22%, transparent), color-mix(in srgb, var(--primary, #ff1b6d) 10%, transparent));
}
.nav-text.nav-text-market {
  font-weight: 800;
  color: var(--primary, #ff1b6d);
}
/* 工作台顶部「市场业务系统」醒目按钮（头像同排右侧，颜色/阴影突出） */
.btn.btn-market {
  background: linear-gradient(135deg, var(--primary, #ff1b6d) 0%, var(--primary-dark, #c1125a) 100%);
  color: #fff;
  border: none;
  font-weight: 800;
  font-size: 15px;
  padding: 9px 18px;
  border-radius: 10px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.18), 0 0 0 3px color-mix(in srgb, var(--primary, #ff1b6d) 18%, transparent);
  white-space: nowrap;
}
.btn.btn-market:hover {
  filter: brightness(1.08);
  box-shadow: 0 5px 14px rgba(0, 0, 0, 0.22), 0 0 0 4px color-mix(in srgb, var(--primary, #ff1b6d) 24%, transparent);
}
@media (max-width: 768px) {
  .btn.btn-market { font-size: 13px; padding: 7px 12px; }
}
/* 兼容不支持 color-mix 的浏览器：退化为透明背景描边 */
@supports not (background: color-mix(in srgb, red 10%, transparent)) {
  .nav-item.nav-item-market { background: transparent; }
  .nav-item.nav-item-market:hover { background: rgba(127, 127, 127, 0.08); }
  .btn.btn-market { box-shadow: 0 3px 10px rgba(0, 0, 0, 0.18); }
}