:root {
  /* Soft UI Evolution — Ocean 设计系统 */
  --bg: #F7F9FC;
  --bg-alt: #FFFFFF;
  --surface: #FFFFFF;
  --border: #E5EAF2;
  --border-light: #EEF2F7;
  --text: #0A0F1A;
  --text-secondary: #667085;
  --text-muted: #6B7280;
  --primary: #1F3CFF; /* OceanV3 theme */
  --primary-hover: #142CCB;
  --primary-light: #D9E0FF;
  --primary-lightest: #EEF3FF;
  --primary-dark: #142CCB;
  --success: #12A150;
  --success-light: #D1FAE5;
  --success-bg: #ECFDF5;
  --warning: #F59E0B;
  --warning-light: #FEF3C7;
  --warning-bg: #FFFBEB;
  --danger: #E5484D;
  --danger-light: #FEE2E2;
  --danger-bg: #FEF2F2;
  --info: #1F3CFF;
  --info-light: #D9E0FF;
  --info-bg: #EEF3FF;
  /* Sidebar */
  --sidebar-bg: #F3F5F9;
  --sidebar-active: #FFFFFF;
  --sidebar-text: #2B303B;
  --sidebar-text-hover: #0F172A;
  --sidebar-icon: #98A2B3;
  --sidebar-divider: #E5EAF2;
  /* Shadows — Soft UI multi-layer */
  --shadow-xs: 0 1px 2px rgba(16,24,40,0.04);
  --shadow-sm: 0 2px 8px rgba(16,24,40,0.06);
  --shadow-md: 0 4px 16px rgba(16,24,40,0.08);
  --shadow-lg: 0 8px 32px rgba(16,24,40,0.10);
  --shadow-xl: 0 12px 48px rgba(16,24,40,0.12);
  /* Radii */
  --radius: 10px;
  --radius-sm: 8px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-full: 9999px;
  /* Layout */
  --sidebar-w: 230px;
  --topbar-h: 60px;
  /* Typography */
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'SF Mono', 'Cascadia Code', 'Consolas', monospace;
  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-base: 0.25s ease;
  --transition-slow: 0.35s ease;
}

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

body {
  font-family: var(--font-family);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  overflow: hidden;
  height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#app { height: 100vh; display: flex; flex-direction: column; }

/* ========== Auth Pages ========== */
.auth-container {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: linear-gradient(135deg, #16308F 0%, #1F3CFF 55%, #0284C7 100%);
  padding: 20px;
}

.auth-card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 40px;
  width: 100%;
  max-width: 420px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.15);
}

.auth-card .logo {
  text-align: center;
  margin-bottom: 32px;
}

.auth-card .logo-icon {
  width: 56px; height: 56px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  overflow: hidden;
}

.auth-card .logo-text {
  font-size: 20px;
  font-weight: 600;
  color: var(--text);
}

.auth-card h2 {
  font-size: 18px;
  margin-bottom: 24px;
  color: var(--text);
  text-align: center;
}

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

.form-group label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: 6px;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 14px;
  color: var(--text);
  background: var(--surface);
  transition: border-color 0.2s;
  outline: none;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(31,60,255,0.12);
}

.form-group textarea {
  resize: vertical;
  min-height: 80px;
}

.role-select {
  display: flex;
  gap: 12px;
  margin-top: 4px;
}

.role-option {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: all 0.2s;
  font-size: 14px;
}

.role-option:hover {
  border-color: var(--primary-light);
  background: var(--primary-light);
}

.role-option.active {
  border-color: var(--primary);
  background: var(--primary-light);
  font-weight: 500;
}

.role-option input[type="radio"] {
  width: auto;
  accent-color: var(--primary);
}

/* Study Direction Select */
.study-direction-select {
  display: flex;
  gap: 12px;
  margin-top: 4px;
}

.direction-option {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 12px;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: all 0.2s;
  font-size: 14px;
  background: var(--bg-primary);
}

.direction-option:hover {
  border-color: var(--primary-light);
  background: var(--primary-light);
}

.direction-option.active {
  border-color: var(--primary);
  background: linear-gradient(135deg, var(--primary-light) 0%, rgba(16,24,40,0.08) 100%);
  font-weight: 600;
  color: var(--primary);
  box-shadow: 0 2px 8px rgba(16,24,40,0.15);
}

.direction-option input[type="radio"] {
  width: auto;
  accent-color: var(--primary);
}

.direction-option .direction-icon {
  font-size: 24px;
  margin-bottom: 4px;
}

.direction-option .direction-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.direction-option .direction-title {
  font-weight: 600;
}

.direction-option .direction-desc {
  font-size: 11px;
  color: var(--text-secondary);
}

.direction-option.active .direction-desc {
  color: var(--primary);
  opacity: 0.8;
}.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px; /* OceanV3 p2 */
  padding: 0 18px;
  height: 38px;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
  line-height: 1.4;
}

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

.btn-success {
  background: var(--success);
  color: white;
}
.btn-success:hover { opacity: 0.9; }

.btn-danger {
  background: var(--danger);
  color: white;
}
.btn-danger:hover { opacity: 0.9; }

.btn-warning {
  background: var(--warning);
  color: white;
}
.btn-warning:hover { opacity: 0.9; }

.btn-outline {
  background: #FFFFFF;
  border: 1px solid var(--primary);
  color: var(--primary);
}
.btn-outline:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-light);
}

.btn-sm { height: 32px; padding: 0 12px; font-size: 12px; }
.btn-block { width: 100%; }

.auth-switch {
  text-align: center;
  margin-top: 20px;
  font-size: 13px;
  color: var(--text-secondary);
}

.auth-switch a {
  color: var(--primary);
  text-decoration: none;
  font-weight: 500;
  cursor: pointer;
}

.auth-switch a:hover { text-decoration: underline; }

/* ========== Layout ========== */
.layout {
  display: flex;
  height: 100vh;
  overflow: hidden;
}

/* Sidebar — Canvas LMS style (dark blue-gray) */
.sidebar {
  width: var(--sidebar-w);
  min-width: var(--sidebar-w);
  background: var(--sidebar-bg);
  border-right: 1px solid #E3E7EF;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  box-shadow: none;
}

.sidebar-header {
  padding: 0 16px;
  height: 60px;
  border-bottom: none;
  display: flex;
  align-items: center;
  gap: 12px;
}

.sidebar-header .logo-mark {
  width: 40px; height: 40px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  box-shadow: none;
}

.sidebar-header .logo-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.2px;
}

.sidebar-nav {
  flex: 1;
  padding: 8px 0;
  overflow-y: auto;
}

.nav-group-label { /* OceanV3 p3 sidebar-type */
  padding: 26px 20px 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: #98A2B3;
  text-transform: none;
}

.nav-subgroup-label {
  margin: 4px 8px 0;
  padding: 6px 16px 4px;
  font-size: 12px;
  font-weight: 600;
  color: #9AA4B2;
  letter-spacing: 0.3px;
}

.nav-item.nav-static { cursor: default; }
.nav-item.nav-static:hover { background: transparent; border-left-color: transparent; }
.wt-tabs { display: flex; gap: 8px; padding: 4px 0 16px; }
.wt-tab { padding: 8px 18px; border: 1px solid var(--border); background: var(--surface); border-radius: 8px; font-size: 14px; font-weight: 500; color: var(--text-secondary); cursor: pointer; transition: all .15s; }
.wt-tab.on { background: var(--primary); color: #fff; border-color: var(--primary); }

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 13px;
  margin: 2px 7px;
  height: 40px;
  font-size: 14px;
  font-weight: 450;
  color: #667085;
  cursor: pointer;
  transition: all var(--transition-fast);
  text-decoration: none;
  position: relative;
  border-radius: var(--radius-sm);
  border-left: 3px solid transparent;
}

.nav-item:hover {
  background: rgba(255,255,255,0.9);
  color: #1D2739;
}

.nav-item.active {
  background: #FFFFFF;
  color: #101828;
  font-weight: 600;
  border-left-color: transparent;
  border-radius: var(--radius-sm);
  box-shadow: 0 1px 4px rgba(16,24,40,0.10), 0 0 0 1px rgba(16,24,40,0.03);
}

.nav-item.active .nav-icon {
  color: var(--primary);
}

.nav-item .nav-icon {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
  color: var(--sidebar-icon);
  transition: color var(--transition-fast);
}

.nav-item:hover .nav-icon {
  color: var(--text);
}

.nav-item .badge {
  margin-left: auto;
  background: var(--danger);
  color: white;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  min-width: 20px;
  text-align: center;
  line-height: 16px;
  box-shadow: 0 1px 3px rgba(239,68,68,0.3);
}

.student-sidebar-menu {
  padding: 8px 0 18px;
}

.student-primary-nav {
  margin: 4px 10px 12px;
  height: 46px;
  font-size: 15px;
  font-weight: 700;
}

.student-nav-group {
  margin: 8px 0 12px;
}

.student-nav-group-title { /* OceanV3 p2b */
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 28px;
  margin: 18px 10px 2px;
  padding: 0 14px;
  color: #9AA4B2;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: none;
}

.student-nav-group-title .nav-icon {
  display: none;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #B4BCC9;
  flex-shrink: 0;
}

.student-sub-nav {
  height: 36px;
  margin: 1px 10px 1px 16px;
  padding: 0 12px;
  font-size: 13.5px;
  font-weight: 450;
  color: #4A5567;
  border-left: 3px solid transparent; border-radius: var(--radius-sm);
}

.student-sub-nav .nav-icon {
  width: 18px;
  height: 18px;
  opacity: 1;
  color: #98A2B3;
}

.student-sub-nav.active {
  margin-left: 16px;
  padding-left: 12px;
  background: #FFFFFF;
  color: #101828;
  font-weight: 600;
  border-left-color: transparent;
  box-shadow: 0 1px 4px rgba(16,24,40,0.10), 0 0 0 1px rgba(16,24,40,0.03);
}
.student-sub-nav:hover:not(.active) { background: rgba(255,255,255,0.7); }

/* Sidebar student list — Canvas dark sidebar style */
.student-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px 0 12px;
  margin: 1px 8px;
  height: 40px;
  font-size: 13px;
  border-radius: 4px;
  border-left: 3px solid transparent;
  transition: background 0.15s, border-color 0.15s;
  cursor: pointer;
  color: var(--sidebar-text);
}
.student-nav-item.active {
  background: var(--sidebar-active);
  border-left-color: transparent;
  color: var(--sidebar-text-hover);
}
.student-nav-item:hover:not(.active) {
  background: #F5F7FB;
}
.student-nav-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #EEF3FF;
  color: var(--sidebar-text);
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-weight: 600;
}
.student-nav-item.active .student-nav-icon {
  background: var(--primary);
  color: #fff;
}
.student-nav-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
  font-size: 13px;
  color: var(--sidebar-text);
}
.student-nav-item.active .student-nav-name {
  color: var(--sidebar-text-hover);
  font-weight: 600;
}

/* Sidebar task count badge — red, only shown when > 0 */
.student-nav-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--danger);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  flex-shrink: 0;
}

.sidebar-students-list {
  max-height: 300px;
  overflow-y: auto;
}
.student-flyout {
  position: fixed; top: 0; left: var(--sidebar-w);
  width: 280px; height: 100vh; background: var(--sidebar-bg);
  z-index: 200; display: flex; flex-direction: column;
  box-shadow: 4px 0 18px rgba(16,24,40,0.08); border-right: 1px solid var(--border);
  transform: translateX(-10px); opacity: 0; visibility: hidden;
  transition: transform 0.18s ease, opacity 0.18s ease, visibility 0.18s;
}
.student-flyout.open { transform: none; opacity: 1; visibility: visible; }
.student-flyout-header {
  height: 52px; flex-shrink: 0; display: flex; align-items: center;
  justify-content: space-between; padding: 0 16px; color: var(--text);
  font-size: 15px; font-weight: 600; border-bottom: none;
}
.student-flyout-close { background: none; border: none; color: var(--text-muted); font-size: 15px; cursor: pointer; line-height: 1; padding: 4px; }
.student-flyout-close:hover { color: var(--text); }
.student-flyout .sidebar-students-list { flex: 1; max-height: none; overflow-y: auto; padding-bottom: 12px; }
.student-nav-toggle { cursor: pointer; }
.student-toggle-arrow { margin-left: auto; opacity: 0.55; transition: transform 0.15s; font-size: 16px; }
.student-nav-toggle.active .student-toggle-arrow { transform: rotate(90deg); }
.main-content { transition: margin-left 0.2s ease; }
body.student-panel-open .main-content { margin-left: 280px; }

/* Topbar — Canvas LMS style (flat, no shadow) */
.topbar {
  height: var(--topbar-h);
  background: var(--surface);
  border-bottom: none;
  box-shadow: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  flex-shrink: 0;
}

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

.topbar-title {
  font-size: 18px;
  font-weight: 400;
  color: var(--text-muted);
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.portal-switch {
  position: relative;
  display: inline-block;
}

.portal-switch-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border: 1px solid #dadce0;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  background: var(--surface);
  color: var(--text-secondary);
  transition: all 0.2s;
}

.portal-switch-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: #e8f0fe;
}

.portal-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 6px;
  background: var(--surface);
  border: none;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(60,64,67,0.2), 0 8px 24px rgba(60,64,67,0.12);
  min-width: 140px;
  z-index: 100;
  display: none;
  overflow: hidden;
}

.portal-dropdown.show { display: block; }

.portal-dropdown-item {
  display: block;
  width: 100%;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  border: none;
  background: none;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s;
}

.portal-dropdown-item:hover {
  background: #e8f0fe;
  color: var(--primary);
}

.topbar-help {
  font-size: 18px;
  cursor: pointer;
  color: #9aa0a6;
  transition: color 0.2s;
}
.topbar-help:hover { color: var(--primary); }

.topbar-user {
  font-size: 13px;
  color: var(--text-secondary);
  font-weight: 500;
}

.topbar-logout {
  font-size: 13px;
  color: var(--danger);
  cursor: pointer;
  background: none;
  border: none;
  font-weight: 500;
  transition: opacity 0.2s;
}
.topbar-logout:hover { opacity: 0.7; }

/* Main content */




/* ========== Cards & Stats — Canvas LMS style ========== */






.stat-icon {
  width: 44px; height: 44px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}

.stat-icon.blue { background: var(--info-light); color: var(--info); }
.stat-icon.green { background: var(--success-light); color: var(--success); }
.stat-icon.yellow { background: var(--warning-light); color: var(--warning); }
.stat-icon.red { background: var(--danger-light); color: var(--danger); }
.stat-icon.purple { background: var(--primary-light); color: var(--primary); }

.stat-info h3 {
  font-size: 24px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}

.stat-info p {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 2px;
}





.card {
  background: var(--surface);
  border-radius: 10px;
  border: none;
  box-shadow: 0 1px 3px rgba(16,24,40,0.06), 0 1px 2px rgba(16,24,40,0.03);
  margin-bottom: 16px;
}

.card-header {
  padding: 16px 20px 6px;
  border-bottom: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.card-header h3 {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}

.card-body {
  padding: 20px;
}

/* ========== Tables — Canvas LMS style ========== */
.table-wrapper {
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
}

table th, table td {
  padding: 10px 14px;
  text-align: left;
  font-size: 13px;
  border-bottom: 1px solid var(--border-light);
}

table th {
  font-weight: 600;
  color: var(--text-muted);
  background: #F7F9FC;
  font-size: 12px;
  text-transform: none;
  letter-spacing: 0.3px;
}

table tbody tr:nth-child(even) {
  background: transparent;
}

table tr:hover td {
  background: #F5F7FB;
}

/* Status Tags */
.tag {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1;
}

/* Group mini-tag — compact inline label */
.group-tag {
  display: inline-flex;
  align-items: center;
  padding: 0px 6px;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 500;
  line-height: 1.5;
  background: var(--info-light);
  color: var(--info);
  white-space: nowrap;
  vertical-align: middle;
}
.group-tag::before {
  content: '📁';
  font-size: 9px;
  margin-right: 2px;
}

/* Student remark card */
.remark-card {
  width: 100%;
  margin-top: 10px;
  padding: 10px 14px;
  background: linear-gradient(135deg, var(--bg-secondary) 0%, rgba(16,24,40,0.03) 100%);
  border-radius: 8px;
  border-left: 3px solid var(--primary);
  position: relative;
}
.remark-card .remark-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}
.remark-card .remark-text {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}
.remark-card .remark-actions {
  position: absolute;
  top: 8px;
  right: 10px;
}
.remark-empty-btn {
  margin-top: 8px;
}

.tag-success { background: var(--success-light); color: var(--success); }
.tag-warning { background: var(--warning-light); color: var(--warning); }
.tag-danger { background: var(--danger-light); color: var(--danger); }
.tag-info { background: var(--info-light); color: var(--info); }
.tag-primary { background: var(--primary-light); color: var(--primary); }

/* Quick status selector - looks like a tag but is a dropdown */
.status-select {
  display: inline-block;
  padding: 2px 6px 2px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  border: none;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-repeat: no-repeat;
  background-position: right 4px center;
  background-size: 10px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='%236b7280'%3E%3Cpath d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
  padding-right: 18px;
  outline: none;
  transition: box-shadow 0.15s;
}
.status-select:hover { box-shadow: 0 0 0 2px rgba(26,115,232,0.2); }
.status-select:focus { box-shadow: 0 0 0 2px rgba(26,115,232,0.35); }
.status-select.s-pending { background-color: var(--warning-light); color: var(--warning); }
.status-select.s-in-progress { background-color: var(--info-light); color: var(--info); }
.status-select.s-completed { background-color: var(--success-light); color: var(--success); }
.status-select.s-confirmed { background-color: var(--success-light); color: var(--success); }
.status-select.s-cancelled { background-color: var(--danger-light); color: var(--danger); }

/* Progress bar */
.progress-bar {
  height: 6px;
  background: var(--border);
  border-radius: 3px;
  overflow: hidden;
}

.progress-bar .fill {
  height: 100%;
  background: var(--primary);
  border-radius: 3px;
  transition: width 0.3s;
}

/* ========== Modal ========== */
.modal-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal {
  background: var(--surface);
  border-radius: 4px;
  width: 90%;
  max-width: 520px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}

.modal.modal-wide { width: 95vw; max-width: 1800px; max-height: 92vh; }
/* 预约课程弹窗：比默认宽，容得下一行 2~3 张老师卡片（比 modal-wide 的 1800px 克制） */
.modal.rc-course-modal { width: min(94vw, 920px); max-width: 920px; max-height: 92vh; }
.modal.essay-draft-modal { width: min(94vw, 1100px); max-width: 1100px; max-height: 92vh; }
/* 文书工坊 · 稿件批注 */
.essay-anno-doc{background:#FBFCFE;border:1px solid var(--border-light);border-radius:10px;padding:8px 6px;}
.essay-anno-para{padding:3px 10px;border-radius:8px;}
.essay-anno-para:hover{background:#F4F7FE;}
.essay-anno-para.has{background:#FFFDF5;}
.essay-anno-ptext{font-size:14.5px;line-height:1.85;color:var(--text);white-space:pre-wrap;position:relative;padding-right:28px;}
.essay-anno-add{position:absolute;right:0;top:2px;opacity:0;border:none;background:#EAF0FC;color:#16308F;border-radius:6px;width:24px;height:24px;cursor:pointer;font-size:13px;line-height:1;transition:.12s;}
.essay-anno-para:hover .essay-anno-add{opacity:1;}
.essay-anno-gap{height:8px;}
.essay-anno-clist{margin:6px 0 4px 12px;display:flex;flex-direction:column;gap:6px;border-left:2px solid #F0C86A;padding-left:10px;}
.essay-anno-item{background:#fff;border:1px solid var(--border-light);border-radius:8px;padding:7px 10px;}
.essay-anno-meta{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--text-muted);margin-bottom:3px;}
.essay-anno-who{font-weight:700;}
.essay-anno-who.adv{color:#0C447C;}
.essay-anno-who.stu{color:#475569;}
.essay-anno-del{margin-left:auto;border:none;background:none;color:#B4322E;cursor:pointer;font-size:11.5px;}
.essay-anno-text{font-size:13px;line-height:1.6;color:var(--text);white-space:pre-wrap;}
.essay-anno-form{margin:6px 0 4px 12px;}
.essay-anno-form textarea{width:100%;font-family:inherit;font-size:13px;line-height:1.6;resize:vertical;border:1px solid var(--border);border-radius:8px;padding:8px;box-sizing:border-box;}
.essay-anno-fbtn{display:flex;gap:8px;justify-content:flex-end;margin-top:6px;}
.essay-anno-overall{margin-top:14px;border-top:1px solid var(--border);padding-top:12px;}
.essay-anno-oh{font-size:13px;font-weight:700;color:var(--text);margin-bottom:8px;}
.essay-anno-empty{font-size:13px;color:var(--text-muted);margin-bottom:8px;}
.essay-anno-oadd textarea{width:100%;font-family:inherit;font-size:13px;line-height:1.6;resize:vertical;border:1px solid var(--border);border-radius:8px;padding:8px;box-sizing:border-box;}
.essay-anno-overall .essay-anno-item{margin-bottom:6px;}
/* 文书工坊 · Word 式选区批注 */
.essay-anno-wrap{display:flex;gap:14px;align-items:flex-start;flex-wrap:wrap;}
.essay-diff-genbtn{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:#16308F;background:linear-gradient(180deg,#F4F7FE,#EAF0FC);border:1px solid #D3E0F7;border-radius:9px;padding:8px 14px;cursor:pointer;}
.essay-diff-genbtn:hover{background:linear-gradient(180deg,#EFF4FE,#E0EAFB);}
.essay-anno-body{flex:1;min-width:260px;white-space:pre-wrap;font-size:14.5px;line-height:1.9;color:var(--text);background:#FBFCFE;border:1px solid var(--border-light);border-radius:10px;padding:14px 16px;}
.essay-anno-hl{background:#FEF0C7;border-bottom:2px solid #F0C86A;cursor:pointer;border-radius:2px;padding:0 1px;}
.essay-anno-hl:hover,.essay-anno-hl.flash{background:#FCE196;}
.essay-anno-list{flex:0 0 300px;max-width:340px;min-width:240px;}
.essay-anno-lh{font-size:12px;font-weight:700;color:var(--text-muted);margin-bottom:8px;}
.essay-anno-c{background:#fff;border:1px solid var(--border-light);border-left:3px solid #F0C86A;border-radius:8px;padding:9px 12px;margin-bottom:8px;cursor:pointer;transition:.12s;}
.essay-anno-c:hover{box-shadow:0 2px 8px rgba(0,0,0,.06);}
.essay-anno-c.flash{background:#FFFBEB;}
.essay-anno-quote{font-size:12px;color:#92500A;background:#FFFBEB;border-radius:5px;padding:2px 7px;margin-bottom:5px;display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.essay-anno-cmeta{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--text-muted);margin-bottom:3px;}
.essay-anno-ctext{font-size:13px;line-height:1.6;color:var(--text);white-space:pre-wrap;}
.essay-anno-float{position:fixed;z-index:3000;}
.essay-anno-fbtn2{background:#16308F;color:#fff;border:none;border-radius:8px;padding:6px 12px;font-size:13px;font-weight:600;cursor:pointer;box-shadow:0 3px 12px rgba(0,0,0,.2);}
.essay-anno-box{background:#fff;border:1px solid var(--border);border-radius:12px;box-shadow:0 8px 28px rgba(0,0,0,.18);padding:12px;width:300px;}
.essay-anno-box-q{font-size:12px;color:#92500A;background:#FFFBEB;border-radius:6px;padding:4px 8px;margin-bottom:8px;max-height:48px;overflow:auto;}
.essay-anno-box textarea{width:100%;font-family:inherit;font-size:13px;line-height:1.6;resize:vertical;border:1px solid var(--border);border-radius:8px;padding:8px;box-sizing:border-box;}
.essay-anno-box-btn{display:flex;gap:8px;justify-content:flex-end;margin-top:8px;}
@media(max-width:900px){.essay-anno-wrap{flex-direction:column;}.essay-anno-list{flex:1 1 auto;max-width:none;width:100%;}}

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

.modal-header h3 {
  font-size: 16px;
  font-weight: 600;
}

.modal-close {
  width: 28px; height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  font-size: 18px;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: 4px;
}
.modal-close:hover { background: var(--bg); }

.modal-body { padding: 24px; overflow-y: auto; flex: 1; min-height: 0; }
.modal.expert-booking-modal {
  width: min(92vw, 920px);
  max-width: 920px;
  max-height: 90vh;
}
.modal.course-detail-lg,
.modal.expert-booking-modal:has(.course-detail-cover) {
  width: min(94vw, 880px);
  max-width: 880px;
  max-height: 96vh;
}
.modal.course-detail-lg .modal-body,
.modal.expert-booking-modal:has(.course-detail-cover) .modal-body { padding-top: 16px; padding-bottom: 16px; }
.modal.expert-booking-modal .modal-body {
  padding: 24px 28px;
}
.modal.expert-booking-modal .modal-footer {
  padding: 16px 28px;
}
/* 专家任务 modal - 允许 select 下拉溢出 */
.modal.ct-modal { max-height: none; overflow: visible; }
.modal.ct-modal .modal-body { overflow: visible; }
.modal-overlay:has(.ct-modal) { overflow-y: auto; align-items: flex-start; padding-top: 40px; }

/* 自定义下拉选择器 */
.custom-select { position: relative; }
.custom-select-trigger {
  width: 100%;
  padding: 10px 36px 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 14px;
  color: var(--text);
  background: var(--surface);
  cursor: pointer;
  transition: border-color 0.2s;
  outline: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  user-select: none;
}
.custom-select-trigger::after {
  content: '';
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  border: 5px solid transparent;
  border-top: 6px solid var(--text-muted);
  pointer-events: none;
}
.custom-select.open .custom-select-trigger { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(31,60,255,0.12); }
.custom-select-trigger.placeholder { color: var(--text-muted); }

.custom-select-dropdown {
  display: none;
  position: absolute;
  left: 0; right: 0;
  top: calc(100% + 4px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
  z-index: 9999;
  max-height: 220px;
  overflow-y: auto;
}
.custom-select.open .custom-select-dropdown { display: block; }

.custom-select-option {
  padding: 9px 12px;
  font-size: 14px;
  color: var(--text);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background 0.15s;
}
.custom-select-option:hover { background: var(--bg); }
.custom-select-option.selected { background: rgba(16,24,40,0.08); color: var(--primary); font-weight: 500; }
.custom-select-option.disabled { color: var(--text-muted); pointer-events: none; }

.modal-footer {
  padding: 16px 24px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* ========== Toast ========== */
.toast-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.toast {
  padding: 12px 20px;
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 500;
  color: white;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  animation: toastIn 0.3s ease;
  max-width: 360px;
}

.toast-success { background: var(--success); }
.toast-error { background: var(--danger); }
.toast-warning { background: var(--warning); }
.toast-info { background: var(--info); }

@keyframes toastIn {
  from { opacity: 0; transform: translateX(40px); }
  to { opacity: 1; transform: translateX(0); }
}

/* ========== Chat ========== */
.chat-container {
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--topbar-h) - 48px);
  max-height: 600px;
}

.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.chat-bubble {
  max-width: 70%;
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.5;
}

.chat-bubble.sent {
  background: var(--primary);
  color: white;
  align-self: flex-end;
  border-bottom-right-radius: 4px;
}

.chat-bubble.received {
  background: var(--bg);
  color: var(--text);
  align-self: flex-start;
  border-bottom-left-radius: 4px;
}

.chat-sender {
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 2px;
}

.chat-time {
  font-size: 10px;
  opacity: 0.7;
  margin-top: 4px;
}

.chat-input-area {
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  display: flex;
  gap: 8px;
}

.chat-input-area input {
  flex: 1;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 13px;
  outline: none;
}

.chat-input-area input:focus { border-color: var(--primary); }




/* ========== AI Assistant Sidebar Entry + Center Panel ========== */
/* Sidebar bottom AI entry — student only */
.sidebar-ai-entry {
  flex-shrink: 0;
  margin: 8px 12px 14px;
  padding: 12px 14px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 100%);
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
  box-shadow: 0 2px 8px rgba(26,115,232,0.3);
}
.sidebar-ai-entry:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(26,115,232,0.45);
}
.sidebar-ai-entry:active {
  transform: translateY(0);
}
.sidebar-ai-icon {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: rgba(255,255,255,0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.sidebar-ai-text {
  min-width: 0;
}
.sidebar-ai-label {
  font-size: 14px;
  font-weight: 600;
  color: #FFFFFF;
  line-height: 1.2;
}
.sidebar-ai-desc {
  font-size: 11px;
  color: rgba(255,255,255,0.72);
  margin-top: 2px;
  line-height: 1.2;
}

/* Overlay backdrop */
.ai-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.32);
  z-index: 10000;
  animation: ai-fade-in 0.15s ease-out;
}
@keyframes ai-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Center panel - 放大版 */
.ai-floating-panel {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1100px;
  height: 750px;
  max-height: calc(100vh - 60px);
  max-width: calc(100vw - 40px);
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 60px rgba(0,0,0,0.25);
  z-index: 10001;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: ai-panel-in 0.2s ease-out;
}
@keyframes ai-panel-in {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.95); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

.ai-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  border-bottom: 1px solid var(--border-light);
  background: #F5F6F8;
  flex-shrink: 0;
}
.ai-panel-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
}
.ai-panel-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Prominent "New Chat" button */
.ai-new-chat-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 6px;
  border: 1px solid var(--primary);
  background: var(--primary);
  color: white;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, box-shadow 0.15s;
}
.ai-new-chat-btn:hover {
  background: #1565c0;
  box-shadow: 0 2px 8px rgba(26,115,232,0.3);
}

.ai-panel-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
}
.ai-panel-btn:hover {
  background: #EBF3FC;
  color: var(--primary);
}

.ai-panel-body {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.ai-panel-sidebar {
  width: 280px;
  border-right: 1px solid var(--border-light);
  overflow-y: auto;
  background: #F5F6F8;
  flex-shrink: 0;
}

.ai-panel-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: #FFFFFF;
}

.ai-panel-messages {
  flex: 1;
  overflow-y: auto;
  padding: 24px 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: #FAFBFC;
}

.ai-welcome {
  text-align: center;
  padding: 60px 24px;
  color: var(--text-muted);
}
.ai-welcome h3 {
  margin: 8px 0;
  color: var(--text);
  font-size: 18px;
}
.ai-welcome p {
  font-size: 14px;
  margin: 4px 0;
}

/* Quick action buttons on welcome screen */
.ai-quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
  justify-content: center;
}
.ai-quick-btn {
  padding: 10px 18px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 13px;
  cursor: pointer;
  transition: all 0.15s;
}
.ai-quick-btn:hover {
  border-color: var(--primary);
  background: #EBF3FC;
  color: var(--primary);
}

.ai-panel-input {
  padding: 18px 24px;
  border-top: 1px solid var(--border-light);
  display: flex;
  flex-direction: column;
  gap: 9px;
  align-items: stretch;
  background: #FFFFFF;
  flex-shrink: 0;
}
.ai-panel-input textarea {
  flex: 1;
  padding: 14px 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 15px;
  outline: none;
  resize: none;
  min-height: 52px;
  max-height: 150px;
  font-family: inherit;
  line-height: 1.5;
  transition: border-color 0.2s;
}
.ai-panel-input textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(26,115,232,0.15);
}
.ai-panel-input .btn-primary {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
}

/* AI conversation list items */
.ai-conv-list {
  padding: 10px;
}
.ai-conv-item {
  padding: 10px 12px;
  border-radius: 6px;
  cursor: pointer;
  margin-bottom: 3px;
  position: relative;
  transition: background 0.15s;
  border: 1px solid transparent;
}
.ai-conv-item:hover {
  background: #EBF3FC;
  border-color: #B4D7FB;
}
.ai-conv-item.active {
  background: #EBF3FC;
  border-color: var(--primary);
}
.ai-conv-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-right: 18px;
}
.ai-conv-item.active .ai-conv-title {
  color: var(--primary);
  font-weight: 600;
}
.ai-conv-time {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 3px;
}
.ai-conv-delete {
  position: absolute;
  top: 8px;
  right: 8px;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 2px 5px;
  border-radius: 4px;
  opacity: 0;
  transition: opacity 0.15s;
}
.ai-conv-item:hover .ai-conv-delete {
  opacity: 1;
}
.ai-conv-delete:hover {
  background: var(--danger-light);
  color: var(--danger);
}

/* AI typing dots */
.ai-typing-dots {
  display: inline-flex;
  gap: 5px;
  padding: 4px 0;
}
.ai-typing-dots span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--text-muted);
  animation: ai-blink 1.4s infinite both;
}
.ai-typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.ai-typing-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes ai-blink {
  0%, 80%, 100% { opacity: 0.3; }
  40% { opacity: 1; }
}

/* AI chat bubbles in panel */
.ai-panel-messages .chat-bubble.sent {
  background: var(--primary);
  color: white;
  align-self: flex-end;
  border-radius: 14px 14px 4px 14px;
  max-width: 80%;
  padding: 10px 16px;
  font-size: 14px;
  line-height: 1.6;
}
.ai-panel-messages .chat-bubble.received {
  background: #F5F6F8;
  color: var(--text);
  align-self: flex-start;
  border-radius: 14px 14px 14px 4px;
  max-width: 80%;
  padding: 10px 16px;
  font-size: 14px;
  line-height: 1.6;
  border: 1px solid var(--border-light);
}
.ai-panel-messages .chat-sender {
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 3px;
}
.ai-panel-messages .chat-bubble.sent .chat-sender {
  color: rgba(255,255,255,0.7);
}
.ai-panel-messages .chat-time {
  font-size: 11px;
  color: #aaaaaa;
  margin-top: 4px;
}
.ai-stream-content {
  word-break: break-word;
  line-height: 1.7;
}


/* ========== Markdown content styling inside AI chat bubbles ========== */
.ai-md-content {
  font-size: 14px;
  line-height: 1.7;
  color: var(--text);
}
.ai-md-content > *:first-child { margin-top: 0; }
.ai-md-content > *:last-child { margin-bottom: 0; }

.ai-md-content h1, .ai-md-content h2, .ai-md-content h3,
.ai-md-content h4, .ai-md-content h5, .ai-md-content h6 {
  margin: 14px 0 8px;
  line-height: 1.35;
  color: var(--primary);
  font-weight: 700;
}
.ai-md-content h1 { font-size: 20px; border-bottom: 2px solid #EBF3FC; padding-bottom: 6px; }
.ai-md-content h2 { font-size: 17px; border-bottom: 1px solid #EBF3FC; padding-bottom: 4px; }
.ai-md-content h3 { font-size: 15px; }
.ai-md-content h4 { font-size: 14px; color: var(--text); }

.ai-md-content p {
  margin: 8px 0;
  line-height: 1.7;
}
.ai-md-content ul {
  margin: 8px 0;
  padding-left: 22px;
  list-style-type: disc;
}
.ai-md-content ol {
  margin: 8px 0;
  padding-left: 22px;
  list-style-type: decimal;
}
.ai-md-content li {
  margin: 4px 0;
  line-height: 1.6;
}
.ai-md-content li::marker {
  color: var(--primary);
}
.ai-md-content strong {
  font-weight: 700;
  color: #1a1a1a;
}
.ai-md-content em {
  font-style: italic;
  color: #555555;
}
.ai-md-content a {
  color: var(--primary);
  text-decoration: underline;
}
.ai-md-content code {
  background: #EFF3F8;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 13px;
  font-family: 'SF Mono', 'Fira Code', 'Menlo', Consolas, monospace;
  color: #c7254e;
  border: 1px solid #E0E6ED;
}
.ai-md-content pre {
  background: #282c34;
  color: #abb2bf;
  padding: 14px 16px;
  border-radius: 8px;
  overflow-x: auto;
  margin: 10px 0;
  font-size: 13px;
  line-height: 1.55;
  border: 1px solid #3d4350;
}
.ai-md-content pre code {
  background: none;
  padding: 0;
  color: inherit;
  font-size: inherit;
  border: none;
  border-radius: 0;
}
.ai-md-content blockquote {
  border-left: 4px solid var(--primary);
  padding: 8px 14px;
  margin: 10px 0;
  background: #F8FAFF;
  border-radius: 0 6px 6px 0;
  color: #555555;
}
.ai-md-content hr {
  border: none;
  border-top: 2px solid #EBF3FC;
  margin: 14px 0;
}
.ai-md-content table {
  border-collapse: collapse;
  margin: 10px 0;
  width: 100%;
  font-size: 13px;
}
.ai-md-content th, .ai-md-content td {
  border: 1px solid var(--border);
  padding: 8px 12px;
  text-align: left;
}
.ai-md-content th {
  background: var(--primary);
  color: white;
  font-weight: 600;
}
.ai-md-content td {
  background: #FFFFFF;
}
.ai-md-content tr:nth-child(even) td {
  background: #F8F9FA;
}

/* Received bubble overrides for markdown spacing */
.ai-panel-messages .chat-bubble.received {
  white-space: normal;
  max-width: 88%;
}
.ai-panel-messages .chat-bubble.received .ai-md-content {
  white-space: normal;
  overflow-wrap: break-word;
}

/* ========== Tabs ========== */
.tabs {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--border);
  margin-bottom: 20px;
}

.tab-btn {
  padding: 10px 20px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  border: none;
  background: none;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: all 0.2s;
}

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

.tab-btn.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
}

/* ========== Grid layouts ========== */
.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

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

/* ========== Goal Cards ========== */
.goal-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.goal-icon {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}

.goal-icon.completed { background: var(--success-light); color: var(--success); }
.goal-icon.in-progress { background: var(--info-light); color: var(--info); }
.goal-icon.pending { background: var(--bg); color: var(--text-muted); }

.goal-title { font-size: 14px; font-weight: 500; }
.goal-desc { font-size: 12px; color: var(--text-secondary); }

/* ========== Goal Card with Tasks — Canvas style ========== */
.goal-card-with-tasks {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 20px;
  margin-bottom: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  transition: box-shadow 0.2s, border-color 0.2s, background 0.2s;
  cursor: pointer;
  user-select: none;
}

.goal-card-with-tasks:hover {
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}

.goal-card-with-tasks.goal-selected {
  border-color: var(--primary);
  background: #EBF3FC;
  box-shadow: 0 2px 6px rgba(26,115,232,0.15);
}

.goal-card-with-tasks .goal-batch-check {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--primary);
}

.goal-progress {
  height: 6px;
  background: var(--border);
  border-radius: 3px;
  overflow: hidden;
}

.goal-progress .fill {
  height: 100%;
  background: var(--primary);
  border-radius: 3px;
  transition: width 0.3s;
}

/* ========== Task Priority Tags ========== */
.task-priority {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
}

.task-priority-low {
  background: var(--bg);
  color: var(--text-muted);
}

.task-priority-normal {
  background: var(--info-light);
  color: var(--info);
}

.task-priority-high {
  background: var(--danger-light);
  color: var(--danger);
}

/* ========== Task Goal Tag ========== */
.task-goal-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  background: var(--primary-light);
  color: var(--primary);
}

/* ========== Timeline ========== */
.timeline {
  position: relative;
  padding-left: 28px;
}

.timeline::before {
  content: '';
  position: absolute;
  left: 8px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--border);
}

.timeline-item {
  position: relative;
  padding-bottom: 20px;
}

.timeline-item::before {
  content: '';
  position: absolute;
  left: -24px;
  top: 4px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--primary);
  border: 2px solid var(--primary-light);
}

.timeline-item .time {
  font-size: 12px;
  color: var(--text-muted);
}

.timeline-item .desc {
  font-size: 13px;
  color: var(--text);
  margin-top: 2px;
}

/* ========== Upload — Canvas style ========== */
.upload-area {
  border: 2px dashed var(--border);
  border-radius: var(--radius);
  padding: 40px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
}

.upload-area:hover {
  border-color: var(--primary);
  background: #EBF3FC;
}

.upload-area .upload-icon {
  font-size: 32px;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.upload-area p {
  font-size: 14px;
  color: var(--text-secondary);
}

/* ========== Calendar ========== */
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.calendar-header-cell {
  padding: 8px;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
}

.calendar-cell {
  padding: 8px;
  min-height: 60px;
  border: 1px solid var(--border);
  font-size: 12px;
  cursor: pointer;
  transition: background 0.15s;
}

.calendar-cell:hover { background: #EBF3FC; }
.calendar-cell.today { background: #EBF3FC; border-color: var(--primary); }
.calendar-cell .day-num { font-weight: 500; color: var(--text); }
.calendar-cell .event-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--primary);
  display: inline-block;
  margin-top: 4px;
}

/* ========== Search ========== */
.search-bar {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
}

.search-bar input {
  flex: 1;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 14px;
  outline: none;
}

.search-bar input:focus { border-color: var(--primary); }

.search-bar select {
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 14px;
  outline: none;
  background: var(--surface);
}

/* ========== School Cards — Canvas style ========== */
.school-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  transition: box-shadow 0.2s, transform 0.2s, border-color 0.2s;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.school-card:hover {
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
  transform: translateY(-1px);
  border-color: var(--primary);
}

.school-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.school-card .school-rank {
  font-size: 12px;
  font-weight: 600;
  color: var(--primary);
  background: var(--primary-light);
  padding: 2px 8px;
  border-radius: 10px;
  display: inline-block;
}

.school-rank.rank-top10 {
  background: linear-gradient(135deg, #ff6b35, #ff9a56);
  color: #fff;
}

.school-rank.rank-top30 {
  background: linear-gradient(135deg, #6366f1, #818cf8);
  color: #fff;
}

.school-rank.rank-top50 {
  background: linear-gradient(135deg, #0ea5e9, #38bdf8);
  color: #fff;
}

.school-flag {
  font-size: 12px;
  color: var(--text-secondary);
}

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

.school-card .school-short {
  font-size: 13px;
  color: var(--text-secondary);
}

.school-card .school-programs {
  margin-top: 4px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.program-tag {
  font-size: 11px;
  background: var(--bg);
  color: var(--text-secondary);
  padding: 2px 8px;
  border-radius: 4px;
  white-space: nowrap;
}

.school-card .school-info {
  margin-top: 8px;
  font-size: 12px;
  color: var(--text-muted);
  display: flex;
  gap: 16px;
}

.school-count {
  font-size: 13px;
  color: var(--text-secondary);
  white-space: nowrap;
  align-self: center;
}

/* ========== School Detail Modal ========== */
.school-detail {
  font-size: 14px;
  line-height: 1.6;
}

.school-detail .detail-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

.school-detail .detail-type {
  font-size: 13px;
  color: var(--text-secondary);
  background: var(--bg);
  padding: 2px 10px;
  border-radius: 12px;
}

.school-detail .detail-section {
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

.school-detail .detail-section:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.school-detail .detail-row {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
}

.school-detail .detail-label {
  font-weight: 500;
  color: var(--text-secondary);
}

.school-detail .detail-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.school-detail .req-tag {
  font-size: 12px;
  background: #fef3c7;
  color: #92400e;
  padding: 2px 8px;
  border-radius: 4px;
}

/* ========== Switch toggle ========== */
.switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}

.switch-row .label { font-size: 14px; color: var(--text); }
.switch-row .desc { font-size: 12px; color: var(--text-muted); margin-top: 2px; }

.switch {
  position: relative;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
}

.switch input { opacity: 0; width: 0; height: 0; }

.switch .slider {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: var(--border);
  border-radius: 24px;
  cursor: pointer;
  transition: 0.3s;
}

.switch .slider::before {
  content: '';
  position: absolute;
  width: 18px; height: 18px;
  left: 3px; bottom: 3px;
  background: white;
  border-radius: 50%;
  transition: 0.3s;
}

.switch input:checked + .slider { background: var(--primary); }
.switch input:checked + .slider::before { transform: translateX(20px); }

/* ========== Step Process ========== */
.steps {
  display: flex;
  margin-bottom: 24px;
}

.step {
  flex: 1;
  text-align: center;
  position: relative;
}

.step::after {
  content: '';
  position: absolute;
  top: 15px;
  left: 50%;
  width: 100%;
  height: 2px;
  background: var(--border);
}

.step:last-child::after { display: none; }

.step-num {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  background: var(--border);
  color: var(--text-secondary);
  position: relative;
  z-index: 1;
}

.step.active .step-num { background: var(--primary); color: white; }
.step.done .step-num { background: var(--success); color: white; }

.step-label {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 6px;
}

.step.active .step-label { color: var(--primary); font-weight: 500; }
.step.done .step-label { color: var(--success); }

/* ========== Empty State ========== */
.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-muted);
}

.empty-state .icon { font-size: 48px; margin-bottom: 12px; }
.empty-state p { font-size: 14px; }

/* ========== Pagination ========== */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 20px;
}

.pagination button {
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  font-size: 13px;
  cursor: pointer;
  color: var(--text-secondary);
}

.pagination button:hover { border-color: var(--primary); color: var(--primary); }
.pagination button.active { background: var(--primary); color: white; border-color: var(--primary); }
.pagination button:disabled { opacity: 0.4; cursor: not-allowed; }

/* ========== Responsive ========== */

}

/* Scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* Utility */
.text-center { text-align: center; }
.text-right { text-align: right; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mb-16 { margin-bottom: 16px; }
.mb-24 { margin-bottom: 24px; }
.flex-between { display: flex; justify-content: space-between; align-items: center; }
.gap-8 { gap: 8px; }
.gap-12 { gap: 12px; }
.hidden { display: none !important; }

/* Consultant multi-select checkboxes */
.consultant-checkboxes {
  max-height: 280px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px;
}
.checkbox-item {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s;
  gap: 8px;
}
.checkbox-item:hover {
  background: var(--primary-light);
}
.checkbox-item input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--primary);
  cursor: pointer;
}

/* ========== Collapsible Monthly Timeline ========== */
.timeline-month-section {
  margin-bottom: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.timeline-month-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: var(--bg);
  cursor: pointer;
  user-select: none;
  transition: background 0.2s;
}

.timeline-month-header:hover {
  background: var(--primary-light);
}

.timeline-month-toggle {
  font-size: 12px;
  color: var(--text-muted);
  transition: transform 0.3s ease;
  display: inline-block;
}

.timeline-month-section.collapsed .timeline-month-toggle {
  transform: rotate(-90deg);
}

.timeline-month-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  flex: 1;
}

.timeline-month-count {
  font-size: 12px;
  color: var(--text-muted);
  background: var(--surface);
  padding: 2px 8px;
  border-radius: 10px;
  border: 1px solid var(--border);
}

.timeline-month-body {
  padding: 8px 16px;
  max-height: 500px;
  overflow-y: auto;
  transition: max-height 0.3s ease, padding 0.3s ease, opacity 0.3s ease;
}

.timeline-month-section.collapsed .timeline-month-body {
  max-height: 0;
  padding: 0 16px;
  opacity: 0;
  overflow: hidden;
}

.timeline-month-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}

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

.timeline-month-item.tl-item-clickable:hover {
  background: var(--surface-alt, #f5f5f5);
  border-radius: 8px;
  transition: background 0.15s;
}

.timeline-item-icon {
  font-size: 16px;
  flex-shrink: 0;
  width: 24px;
  text-align: center;
}

.timeline-item-source {
  font-size: 11px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 3px;
  flex-shrink: 0;
  white-space: nowrap;
  line-height: 1.4;
}
.timeline-item-source.source-goal {
  color: #9333ea;
  background: #f3e8ff;
}
.timeline-item-source.source-task {
  color: #2563eb;
  background: #dbeafe;
}
.timeline-item-source.source-consultant {
  color: #d97706;
  background: #fef3c7;
}
.timeline-item-source.source-appointment {
  color: #059669;
  background: #d1fae5;
}

.timeline-item-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.timeline-item-date {
  font-size: 12px;
  color: var(--text-muted);
  flex-shrink: 0;
  white-space: nowrap;
}

/* Timeline item — completed strikethrough */
.timeline-item-done {
  text-decoration: line-through;
  color: var(--text-muted);
}

/* Timeline status change buttons */
.timeline-status-btns {
  display: inline-flex;
  gap: 3px;
  flex-shrink: 0;
  margin-left: 4px;
}
.timeline-status-btn {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 3px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-secondary);
  cursor: pointer;
  white-space: nowrap;
  line-height: 1.5;
  transition: all 0.15s;
}
.timeline-status-btn:hover {
  background: var(--primary-light);
  color: var(--primary);
  border-color: var(--primary);
}

/* Timeline status select - matches table status-select style */
.timeline-status-select {
  display: inline-block;
  padding: 2px 6px 2px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  border: none;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-repeat: no-repeat;
  background-position: right 4px center;
  background-size: 10px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='%236b7280'%3E%3Cpath d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
  padding-right: 18px;
  outline: none;
  transition: box-shadow 0.15s;
  min-width: 72px;
  text-align: left;
}
.timeline-status-select:hover { box-shadow: 0 0 0 2px rgba(16,24,40,0.2); }
.timeline-status-select:focus { box-shadow: 0 0 0 2px rgba(16,24,40,0.35); }
.timeline-status-select.s-pending { background-color: var(--warning-light); color: var(--warning); }
.timeline-status-select.s-in-progress { background-color: var(--info-light); color: var(--info); }
.timeline-status-select.s-completed { background-color: var(--success-light); color: var(--success); }
.timeline-status-select.s-confirmed { background-color: var(--success-light); color: var(--success); }
.timeline-status-select.s-cancelled { background-color: var(--danger-light); color: var(--danger); }

/* Recurring task tags */
.recurrence-tag {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  margin-left: 6px;
  vertical-align: middle;
}
.recurrence-tag.recurrence-daily {
  background: #fef3c7;
  color: #d97706;
}
.recurrence-tag.recurrence-weekly {
  background: #dbeafe;
  color: #2563eb;
}
.recurrence-tag.recurrence-biweekly {
  background: #cffafe;
  color: #0891b2;
}
.recurrence-tag.recurrence-monthly {
  background: #ede9fe;
  color: #7c3aed;
}
.recurrence-tag.recurrence-bimonthly {
  background: #fce7f3;
  color: #db2777;
}

/* ========== Template Pages ========== */
.template-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 16px;
}

.template-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
}

.template-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--primary);
  border-radius: 4px 0 0 4px;
}

.template-card:hover {
  border-color: var(--primary);
  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.1);
  transform: translateY(-1px);
}

.template-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 10px;
}

.template-card-header h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  padding-left: 4px;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  word-break: break-all;
  line-height: 1.4;
}

.template-card-actions {
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.2s;
}

.template-card:hover .template-card-actions {
  opacity: 1;
}

.template-card-desc {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 12px;
  line-height: 1.5;
  padding-left: 4px;
}

.template-card-stats {
  display: flex;
  gap: 16px;
  font-size: 13px;
  color: var(--text-muted);
}

.template-card-stats span {
  display: flex;
  align-items: center;
  gap: 4px;
}

.template-card-date {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

/* Template detail */
.template-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}

.template-breadcrumb .back-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 14px;
  padding: 4px 8px;
  border-radius: var(--radius);
  transition: all 0.15s;
  background: none;
  border: none;
}

.template-breadcrumb .back-btn:hover {
  background: var(--primary-light);
  color: var(--primary);
}

.template-breadcrumb .separator {
  color: var(--text-muted);
  font-size: 12px;
}

.template-breadcrumb .current {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}

.template-desc-bar {
  background: var(--primary-light);
  padding: 12px 16px;
  border-radius: var(--radius);
  margin-bottom: 20px;
  font-size: 14px;
  color: var(--primary-dark);
  border-left: 3px solid var(--primary);
}

/* Template goal cards */
.tpl-goal-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px 20px;
  margin-bottom: 12px;
  transition: box-shadow 0.2s;
}

.tpl-goal-card:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.tpl-goal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.tpl-goal-title-area {
  display: flex;
  align-items: center;
  gap: 8px;
}

.tpl-goal-type-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  background: var(--primary-light);
  flex-shrink: 0;
}

.tpl-goal-title {
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}

.tpl-goal-actions {
  display: flex;
  gap: 4px;
}

.tpl-goal-desc {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 4px 0 6px 36px;
}

.tpl-goal-date {
  font-size: 12px;
  color: var(--text-muted);
  margin-left: 36px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.tpl-goal-date span {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Template task items (nested in goal) */
.tpl-task-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-top: 1px solid var(--border);
  font-size: 13px;
}

.tpl-task-priority {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.tpl-task-priority.high { background: var(--danger); }
.tpl-task-priority.normal { background: var(--warning); }
.tpl-task-priority.low { background: var(--success); }

.tpl-task-info {
  flex: 1;
  min-width: 0;
}

.tpl-task-title {
  font-weight: 500;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}

.tpl-task-date {
  font-size: 12px;
  color: var(--text-muted);
  margin-left: 8px;
}

.tpl-task-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 0.15s;
}

.tpl-task-item:hover .tpl-task-actions {
  opacity: 1;
}

/* Template task cards (standalone in tasks tab) */
.tpl-task-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 16px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: box-shadow 0.2s;
}

.tpl-task-card:hover {
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

.tpl-task-card .tpl-task-priority {
  width: 8px;
  height: 8px;
}

.tpl-task-card .tpl-task-info {
  flex: 1;
  min-width: 0;
}

.tpl-task-card .tpl-task-title {
  font-weight: 500;
  font-size: 14px;
}

.tpl-task-card .tpl-task-meta {
  display: flex;
  gap: 12px;
  margin-top: 2px;
}

.tpl-task-card .tpl-task-meta span {
  font-size: 12px;
  color: var(--text-muted);
}

.tpl-task-card .tpl-task-goal-link {
  font-size: 12px;
  color: var(--primary);
  cursor: default;
}

.tpl-task-card .tpl-task-desc {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 2px;
}

.tpl-task-card .tpl-task-actions {
  opacity: 0;
  transition: opacity 0.15s;
}

.tpl-task-card:hover .tpl-task-actions {
  opacity: 1;
}

/* Template empty states */
.tpl-empty {
  text-align: center;
  padding: 48px 20px;
  color: var(--text-muted);
}

.tpl-empty .tpl-empty-icon {
  font-size: 48px;
  margin-bottom: 12px;
  opacity: 0.5;
}

.tpl-empty p {
  font-size: 14px;
  margin-bottom: 16px;
}

.tpl-empty .btn {
  margin-top: 4px;
}

/* ========== School Picker (专家端选校) ========== */
.school-picker {
  margin-bottom: 4px;
}

.school-picker-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
  min-height: 28px;
  align-items: center;
}

.school-picker-tags:empty::after {
  content: '暂未选择院校';
  color: var(--text-muted);
  font-size: 13px;
}

.school-picker-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 14px;
  font-size: 13px;
  font-weight: 500;
  animation: tagIn 0.2s ease;
}

.school-picker-tag.reach {
  background: #fef2f2;
  color: #dc2626;
  border: 1px solid #fecaca;
}

.school-picker-tag.match {
  background: #eff6ff;
  color: #2563eb;
  border: 1px solid #bfdbfe;
}

.school-picker-tag.safety {
  background: #f0fdf4;
  color: #16a34a;
  border: 1px solid #bbf7d0;
}

.school-picker-tag-remove {
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  opacity: 0.6;
  transition: opacity 0.15s;
}

.school-picker-tag-remove:hover {
  opacity: 1;
}

/* Major input inside school-picker tag */
.sp-tag-name {
  white-space: nowrap;
}

.sp-tag-major {
  border: none;
  border-bottom: 1px dashed var(--text-muted);
  background: transparent;
  font-size: 12px;
  padding: 1px 4px;
  width: 100px;
  color: inherit;
  outline: none;
  font-family: inherit;
  transition: border-color 0.15s;
}

.sp-tag-major:focus {
  border-bottom-color: var(--primary);
  width: 140px;
}

.sp-tag-major::placeholder {
  color: var(--text-muted);
  opacity: 0.6;
  font-size: 11px;
}

/* Suggested school item with major input (student side) */
.suggest-item {
  padding: 6px 10px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.suggest-item .suggest-major {
  border: none;
  border-bottom: 1px dashed var(--text-muted);
  background: transparent;
  font-size: 12px;
  padding: 2px 4px;
  width: 110px;
  outline: none;
  color: var(--text-secondary);
  font-family: inherit;
}

.suggest-item .suggest-major:focus {
  border-bottom-color: var(--primary);
  width: 140px;
}

.suggest-item .suggest-major::placeholder {
  color: var(--text-muted);
  opacity: 0.5;
  font-size: 11px;
}

.school-picker-input-wrap {
  position: relative;
}

.school-picker-search {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 13px;
  outline: none;
  background: var(--surface);
  box-sizing: border-box;
}

.school-picker-search:focus {
  border-color: var(--primary);
}

.school-picker-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-height: 200px;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  z-index: 1000;
}

.school-picker-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  cursor: pointer;
  font-size: 13px;
  transition: background 0.1s;
  border-bottom: 1px solid var(--border);
}

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

.school-picker-item:hover {
  background: var(--primary-light);
}

.school-picker-item .sp-item-name {
  font-weight: 500;
  color: var(--text);
}

.school-picker-item .sp-item-meta {
  font-size: 11px;
  color: var(--text-muted);
  flex-shrink: 0;
  margin-left: 12px;
}

.school-picker-item.selected {
  background: var(--bg);
  color: var(--text-muted);
  cursor: default;
}

.school-picker-item.selected .sp-item-name {
  color: var(--text-muted);
}

.school-picker-no-result {
  padding: 16px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
}

@keyframes tagIn {
  from { opacity: 0; transform: scale(0.85); }
  to { opacity: 1; transform: scale(1); }
}

/* ========== Batch Operation Toolbar — Canvas style ========== */
.batch-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: #EBF3FC;
  border: 1px solid #B4D7FB;
  border-radius: 4px;
  margin-bottom: 12px;
  animation: batchToolbarFadeIn 0.3s ease;
}

.batch-toolbar .btn-delete-batch {
  background: var(--danger);
  color: white;
  border: none;
  padding: 6px 14px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.batch-toolbar .btn-delete-batch:hover:not(:disabled) {
  opacity: 0.9;
  box-shadow: 0 2px 8px rgba(234,67,53,0.3);
}

.batch-toolbar .btn-delete-batch:disabled {
  background: var(--border-light);
  color: var(--text-muted);
  cursor: not-allowed;
  box-shadow: none;
}

.batch-check {
  width: 16px;
  height: 16px;
  accent-color: var(--primary);
  cursor: pointer;
  flex-shrink: 0;
}

.batch-check:hover {
  box-shadow: 0 0 0 2px var(--primary-light);
  border-radius: 3px;
}

@keyframes batchToolbarFadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ========== Student Overview — Canvas LMS Style ========== */

/* Welcome Banner — Canvas clean style with blue accent strip */
.stu-welcome {
  background: var(--surface);
  border-radius: 4px;
  padding: 0;
  margin-bottom: 20px;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.stu-welcome::after { display: none; }
.stu-welcome::before { display: none; }
.stu-welcome-accent {
  height: 4px;
  background: var(--primary);
}
.stu-welcome-inner {
  padding: 20px 24px 18px;
}
.stu-welcome-greeting {
  font-size: 20px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
  position: static;
  z-index: auto;
}
.stu-welcome-sub {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 12px;
  position: static;
  z-index: auto;
}
.stu-welcome-sub span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.stu-welcome-sub .dot {
  width: 4px; height: 4px;
  background: #9aa0a6;
  border-radius: 50%;
  display: inline-block;
  margin: 0 8px;
}
.stu-progress-track {
  height: 6px;
  background: var(--border-light);
  border-radius: 3px;
  overflow: hidden;
  position: static;
  z-index: auto;
}
.stu-progress-fill {
  height: 100%;
  background: var(--primary);
  border-radius: 3px;
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.stu-progress-label {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 6px;
  position: static;
  z-index: auto;
}

/* Stat Cards — Soft UI Evolution */
.stu-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 20px;
}
@media (max-width: 900px) {
  .stu-stats { grid-template-columns: repeat(2, 1fr); }
}
.stu-stat-card {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 20px 24px 18px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-base), transform var(--transition-base);
  position: relative;
  overflow: hidden;
}
.stu-stat-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  border-radius: var(--radius) var(--radius) 0 0;
}
.stu-stat-card.sc-blue::before { background: var(--primary); }
.stu-stat-card.sc-green::before { background: var(--success); }
.stu-stat-card.sc-amber::before { background: var(--warning); }
.stu-stat-card.sc-red::before { background: var(--danger); }
.stu-stat-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.stu-stat-num {
  font-size: 28px;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}
.stu-stat-label {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 4px;
  font-weight: 500;
  letter-spacing: 0.2px;
}

/* Two-column layout */
.stu-duo {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 16px;
  margin-bottom: 20px;
}
@media (max-width: 960px) {
  .stu-duo { grid-template-columns: 1fr; }
}

.stu-overview-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.75fr) minmax(300px, 0.85fr);
  gap: 16px;
  align-items: start;
  margin-bottom: 20px;
}
.stu-overview-timeline {
  min-width: 0;
}
.stu-overview-timeline .stu-card-body {
  padding: 16px 20px 20px;
}
.stu-overview-activities {
  min-width: 0;
}
.stu-overview-activities .stu-card-body {
  max-height: 680px;
  overflow-y: auto;
}
@media (max-width: 1100px) {
  .stu-overview-grid {
    grid-template-columns: 1fr;
  }
  .stu-overview-activities .stu-card-body {
    max-height: none;
  }
}

/* Canvas LMS Card base — Soft UI Evolution */
.stu-card {
  background: var(--surface);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.stu-card-header {
  padding: 16px 24px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border-light);
}
.stu-card-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.1px;
}
.stu-card-link {
  font-size: 13px;
  color: var(--primary);
  cursor: pointer;
  text-decoration: none;
  font-weight: 500;
}
.stu-card-link:hover { text-decoration: underline; }
.stu-card-body {
  padding: 0 24px 16px;
}

/* Todo table — Soft UI Evolution */
.stu-todo-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
.stu-todo-table colgroup .col-pri { width: 44px; }
.stu-todo-table colgroup .col-title { }
.stu-todo-table colgroup .col-assignee { width: 80px; }
.stu-todo-table colgroup .col-date { width: 96px; }
.stu-todo-table colgroup .col-status { width: 80px; }

.stu-todo-table thead th {
  padding: 10px 12px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: none;
  letter-spacing: 0.3px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  background: var(--bg-alt);
  white-space: nowrap;
}
.stu-todo-table tbody tr {
  transition: background var(--transition-fast);
}
.stu-todo-table tbody tr:nth-child(even) {
  background: var(--bg-alt);
}
.stu-todo-table tbody tr:hover {
  background: var(--primary-light);
}
.stu-todo-table tbody tr.stu-todo-row-clickable {
  cursor: pointer;
}
.stu-todo-table tbody tr.stu-todo-row-clickable:hover,
.stu-todo-table tbody tr.stu-todo-row-clickable:focus {
  background: #eef4ff;
  outline: none;
  box-shadow: inset 3px 0 0 #1a73e8;
}
.stu-todo-table tbody td {
  padding: 12px;
  font-size: 13px;
  color: var(--text);
  border-bottom: 1px solid var(--border-light);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stu-todo-table tbody td.td-title {
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stu-todo-table tbody td.td-date {
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.stu-todo-table tbody td.td-assignee {
  color: var(--text-muted);
}
.task-detail-view {
  display: grid;
  gap: 14px;
}
.task-detail-title {
  color: var(--text-primary);
  font-size: 18px;
  font-weight: 750;
  line-height: 1.4;
}
.task-detail-desc {
  min-height: 44px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-secondary);
  color: var(--text-secondary);
  padding: 12px;
  font-size: 13px;
  line-height: 1.7;
  white-space: pre-wrap;
}
.task-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.task-detail-grid > div {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  padding: 11px 12px;
}
.task-detail-grid > div.wide {
  grid-column: 1 / -1;
}
.task-detail-grid span {
  display: block;
  color: var(--text-muted);
  font-size: 11px;
  margin-bottom: 5px;
}
.task-detail-grid strong {
  display: block;
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 650;
  overflow-wrap: anywhere;
}
.task-detail-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 4px;
}
@media (max-width: 640px) {
  .task-detail-grid {
    grid-template-columns: 1fr;
  }
  .task-detail-actions {
    flex-direction: column;
  }
  .task-detail-actions .btn {
    width: 100%;
  }
}

/* Priority dot — Soft UI Evolution */
.stu-pri {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  vertical-align: middle;
}
.stu-pri.high { background: var(--danger); }
.stu-pri.normal { background: var(--warning); }
.stu-pri.low { background: var(--text-muted); }

/* Status chip — Soft UI Evolution */
.stu-chip {
  display: inline-block;
  padding: 3px 12px;
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2px;
}
.stu-chip.pending { background: var(--warning-light); color: var(--warning); }
.stu-chip.in-progress { background: var(--info-light); color: var(--info); }
.stu-chip.overdue { background: var(--danger-light); color: var(--danger); }
.stu-chip.confirmed { background: var(--success-light); color: var(--success); }

/* Consultant Card — Google style */
.stu-consultant-card {
  padding: 20px;
}
.stu-consultant-avatar {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: white;
  font-size: 20px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}
.stu-consultant-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}
.stu-consultant-specialty {
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 8px;
}
.stu-consultant-contact {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 4px;
}
.stu-consultant-contact .icon {
  font-size: 14px;
  width: 18px;
  text-align: center;
}
.stu-msg-section {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid #e8eaed;
}
.stu-msg-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}
.stu-msg-preview {
  font-size: 13px;
  color: var(--text);
  line-height: 1.5;
  padding: 10px 14px;
  background: #f8f9fa;
  border-radius: 10px;
  position: relative;
}
.stu-msg-preview::before {
  content: '';
  position: absolute;
  top: -6px; left: 16px;
  width: 0; height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid #f8f9fa;
}
.stu-msg-date {
  font-size: 11px;
  color: #9aa0a6;
  margin-top: 4px;
  text-align: right;
}
.stu-no-consultant {
  text-align: center;
  padding: 32px 20px;
  color: var(--text-secondary);
  font-size: 13px;
}
.stu-no-consultant .icon {
  font-size: 40px;
  margin-bottom: 8px;
  opacity: 0.5;
}

/* Timeline — Canvas LMS style */
.stu-timeline-section {
  margin-bottom: 0;
}
/* Timeline status filter bar */
.tl-filter-bar {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.tl-filter-btn {
  padding: 7px 14px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: #F2F4F8;
  color: var(--text-secondary);
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s;
}
.tl-filter-btn:hover {
  background: #E8EBF1;
  color: var(--text);
}
.tl-filter-btn.active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}
.stu-tl-month {
  border: none;
  margin-bottom: 4px;
}
.stu-tl-month-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 4px 8px;
  background: transparent;
  cursor: pointer;
  user-select: none;
  transition: background 0.2s;
}
.stu-tl-month-header:hover { background: transparent; }
.stu-tl-toggle {
  font-size: 12px;
  color: var(--text-muted);
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  display: inline-block;
}
.stu-tl-month.collapsed .stu-tl-toggle { transform: rotate(-90deg); }
/* Timeline month distinction */
.stu-tl-month-past .stu-tl-month-header { background: transparent; }
.stu-tl-month-past .stu-tl-month-title { color: #6B6B6B; }
.stu-tl-month-current .stu-tl-month-header { background: transparent; }
.stu-tl-month-current .stu-tl-month-title { color: var(--primary); }
.stu-tl-month-future .stu-tl-month-header { background: transparent; }
.stu-tl-month-future .stu-tl-month-title { color: var(--text); }
/* Consultant timeline month distinction */
.timeline-month-section.tl-month-past .timeline-month-header { background: transparent; }
.timeline-month-section.tl-month-past .timeline-month-title { color: #6B6B6B; }
.timeline-month-section.tl-month-current .timeline-month-header { background: transparent; }
.timeline-month-section.tl-month-current .timeline-month-title { color: #E65100; }
.timeline-month-section.tl-month-future .timeline-month-header { background: transparent; }
.timeline-month-section.tl-month-future .timeline-month-title { color: #4A7C4A; }
.stu-tl-month-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  flex: 1;
}
.stu-tl-count {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  background: transparent;
  padding: 0;
}
.stu-tl-summary {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  margin-bottom: 12px;
  padding: 2px 2px;
  background: transparent;
  color: var(--text-muted);
  font-size: 12.5px;
}
.stu-tl-body {
  padding: 0 4px 4px;
  max-height: 600px;
  overflow-y: auto;
  transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1), padding 0.3s, opacity 0.3s;
}
.stu-tl-month.collapsed .stu-tl-body {
  max-height: 0;
  padding: 0 16px;
  opacity: 0;
  overflow: hidden;
}
.stu-tl-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 6px;
  border-bottom: none;
  border-radius: 8px;
  min-width: 0;
}
.stu-tl-item:last-child { border-bottom: none; }
.stu-tl-item.tl-item-clickable {
  cursor: pointer;
}
.stu-tl-item.tl-item-clickable:hover {
  background: #F5F7FB;
  border-radius: 8px;
}
.stu-tl-item-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  margin: 0 6px;
  background: #C4CAD4;
}
.stu-tl-item-dot.s-in-progress { background: var(--primary); }
.stu-tl-item-dot.s-completed, .stu-tl-item-dot.s-confirmed { background: var(--success); }
.stu-tl-item-dot.s-cancelled { background: var(--text-muted); }
.stu-tl-item-source {
  font-size: 11px;
  font-weight: 500;
  padding: 0;
  color: var(--text-muted);
  flex-shrink: 0;
  white-space: nowrap;
}
.stu-tl-item-source.src-goal, .stu-tl-item-source.src-task, .stu-tl-item-source.src-appointment { background: transparent; color: var(--text-muted); }
.stu-tl-item-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.stu-tl-item-date {
  font-size: 12px;
  color: var(--text-muted);
  flex-shrink: 0;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.stu-tl-item-assignee {
  flex-shrink: 0;
  color: var(--text-muted);
  font-size: 11px;
  white-space: nowrap;
}
@media (max-width: 720px) {
  .stu-overview-timeline .stu-card-body {
    padding: 14px;
  }
  .stu-tl-item {
    flex-wrap: wrap;
    gap: 8px;
  }
  .stu-tl-item-title {
    flex-basis: calc(100% - 110px);
  }
  .stu-tl-item-date,
  .stu-tl-item-assignee,
  .timeline-status-select,
  .stu-tl-item .tag {
    margin-left: 34px;
  }
}

/* Empty state — Google style */
.stu-empty {
  text-align: center;
  padding: 36px 20px;
  color: #9aa0a6;
}
.stu-empty .icon { font-size: 36px; margin-bottom: 8px; }
.stu-empty p { font-size: 13px; }
.stu-empty-guide {
  display: grid;
  gap: 12px;
  padding: 14px 0 2px;
}
.stu-empty-guide-hero {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  border: 1px solid #c2e7ff;
  border-radius: 12px;
  background: linear-gradient(135deg, #eef8ff 0%, #f8fbff 100%);
  padding: 16px;
  box-shadow: 0 8px 24px rgba(60, 64, 67, 0.08);
}
.stu-empty-guide-mark {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0b57d0;
  background: #d3e3fd;
  font-size: 22px;
  font-weight: 800;
}
.stu-empty-guide-kicker {
  display: block;
  color: #0b57d0;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  margin-bottom: 4px;
}
.stu-empty-guide h3 {
  margin: 0;
  color: var(--text-primary);
  font-size: 17px;
  font-weight: 750;
}
.stu-empty-guide p {
  margin: 5px 0 0;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.6;
}
.stu-empty-action-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.stu-empty-action-card {
  appearance: none;
  border: 1px solid var(--primary-light);
  border-radius: 10px;
  background: var(--primary-lightest);
  padding: 13px;
  min-height: 104px;
  text-align: left;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.stu-empty-action-card:hover {
  transform: translateY(-2px);
  border-color: #aecbfa;
  box-shadow: 0 8px 20px rgba(60, 64, 67, 0.12);
}
.stu-empty-action-card span {
  display: inline-flex;
  border-radius: 999px;
  padding: 4px 9px;
  font-size: 11px;
  font-weight: 800;
}
.stu-empty-action-card strong {
  color: var(--text-primary);
  font-size: 14px;
  margin-top: 10px;
}
.stu-empty-action-card small {
  color: var(--text-muted);
  font-size: 12px;
  margin-top: 4px;
}
.stu-empty-action-card.mint {
  background: #e6f4ea;
  border-color: #ceead6;
}
.stu-empty-action-card.mint span {
  background: #137333;
  color: #fff;
}
.stu-empty-action-card.lilac {
  background: #f0ecff;
  border-color: #d7c9ff;
}
.stu-empty-action-card.lilac span {
  background: #5f35b1;
  color: #fff;
}
.stu-empty-action-card.peach {
  background: #fef7e0;
  border-color: #fde293;
}
.stu-empty-action-card.peach span {
  background: #b06000;
  color: #fff;
}
@media (max-width: 720px) {
  .stu-empty-guide-hero {
    grid-template-columns: 44px minmax(0, 1fr);
  }
  .stu-empty-guide-hero .btn {
    grid-column: 1 / -1;
    width: 100%;
  }
  .stu-empty-action-grid {
    grid-template-columns: 1fr;
  }
}

/* ========== Consultant Student Cards Grid ========== */
.stu-cards-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

.stu-cards-stats .stu-stat-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  border-radius: var(--radius) var(--radius) 0 0;
}
.stu-cards-stats .stu-stat-card.sc-blue::before { background: var(--primary); }
.stu-cards-stats .stu-stat-card.sc-green::before { background: var(--success); }
.stu-cards-stats .stu-stat-card.sc-amber::before { background: var(--warning); }

.stu-cards-stats .stu-stat-icon {
  width: 48px; height: 48px;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.stu-cards-stats .stu-stat-card.sc-blue .stu-stat-icon { background: var(--info-light); color: var(--info); }
.stu-cards-stats .stu-stat-card.sc-green .stu-stat-icon { background: var(--success-light); color: var(--success); }
.stu-cards-stats .stu-stat-card.sc-amber .stu-stat-icon { background: var(--warning-light); color: var(--warning); }

.stu-cards-stats .stu-stat-body { flex: 1; }
.stu-cards-stats .stu-stat-num {
  font-size: 26px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.stu-cards-stats .stu-stat-desc {
  font-size: 12px;
  color: var(--text-secondary);
  font-weight: 500;
}

/* Section header — Soft UI Evolution */
.stu-cards-section { margin-bottom: 24px; }
.stu-cards-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 16px;
}
.stu-cards-header h3 {
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
  margin: 0;
}
.stu-cards-count {
  font-size: 12px;
  color: var(--text-secondary);
  font-weight: 500;
}

/* Cards grid — Soft UI Evolution */
.stu-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 1100px) {
  .stu-cards-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .stu-cards-grid { grid-template-columns: 1fr; }
}

/* Individual student card — Soft UI Evolution */
.stu-cards-grid .stu-card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  padding: 20px 24px 18px;
  cursor: pointer;
  transition: box-shadow var(--transition-base), transform var(--transition-base);
  position: relative;
  overflow: hidden;
}
.stu-cards-grid .stu-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.stu-cards-grid .stu-card.sc-green::before { background: var(--success); }
.stu-cards-grid .stu-card.sc-amber::before { background: var(--warning); }
.stu-cards-grid .stu-card.sc-red::before { background: var(--danger); }
.stu-cards-grid .stu-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}

/* Card top — avatar + name + group */
.stu-card-top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.stu-card-avatar {
  width: 40px; height: 40px;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: var(--shadow-sm);
}
.stu-card.sc-amber .stu-card-avatar { background: linear-gradient(135deg, var(--warning), #B45309); }
.stu-card.sc-red .stu-card-avatar { background: linear-gradient(135deg, var(--danger), #DC2626); }

.stu-card-info {
  flex: 1;
  min-width: 0;
}
.stu-card-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.3;
}
.stu-card-degree {
  font-size: 11px;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 2px;
}
.stu-card-group-tag {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  background: var(--border-light);
  color: var(--text-secondary);
  white-space: nowrap;
  flex-shrink: 0;
  max-width: 72px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Card metrics row */
.stu-card-metrics {
  display: flex;
  gap: 16px;
  margin-bottom: 12px;
}
.stu-card-metric {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.stu-card-metric-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.stu-card-metric-val {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.stu-card-metric-val.has-pending {
  color: var(--danger);
}

/* Card progress bar */
.stu-card-progress {
  height: 4px;
  background: var(--border-light);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 6px;
}
.stu-card-progress-bar {
  height: 100%;
  background: var(--success);
  border-radius: 2px;
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.stu-card-progress-label {
  font-size: 10px;
  color: var(--text-secondary);
  font-weight: 500;
}

/* Empty state for cards */
.stu-cards-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 40px 20px;
  color: var(--text-muted);
  font-size: 13px;
}

/* ========== Activity Timeline Styles ========== */
.activity-timeline::before {
  content: '';
  position: absolute;
  left: 15px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #e0e0e0;
}

.activity-item:last-child {
  border-bottom: none !important;
}

.stu-activity-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid #e8e8e8;
  border-radius: 8px;
  cursor: default;
  transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
}
.stu-activity-row.unread {
  background: #eef5ff;
  border-left: 3px solid #1a73e8;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(26, 115, 232, 0.08);
}
.stu-activity-row.unread:hover,
.stu-activity-row.unread:focus {
  background: #e6f0ff;
  outline: none;
}
.stu-activity-row.read {
  background: #fff;
}
.stu-activity-row.read .stu-activity-text {
  color: #667085;
}
.stu-activity-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #dbeafe;
  color: #1a73e8;
  font-size: 12px;
  flex-shrink: 0;
  margin-top: 1px;
}
.stu-activity-row.read .stu-activity-dot {
  background: #f1f3f4;
  color: #9aa0a6;
  filter: grayscale(1);
}
.stu-activity-content {
  flex: 1;
  min-width: 0;
}
.stu-activity-text {
  color: #2d3b4e;
  font-size: 13px;
  line-height: 1.45;
}
.stu-activity-actor {
  color: #2d3b4e;
  font-weight: 650;
}
.stu-activity-time {
  color: #888;
  font-size: 11px;
  margin-top: 3px;
}
.stu-activity-status {
  align-self: flex-start;
  border-radius: 999px;
  padding: 2px 7px;
  background: #e8f0fe;
  color: #1a73e8;
  font-size: 11px;
  font-weight: 650;
  line-height: 1.4;
  white-space: nowrap;
}
.stu-activity-row.read .stu-activity-status {
  background: #f1f3f4;
  color: #8a8f98;
  font-weight: 500;
}
.stu-unread-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  background: #1a73e8;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  margin-left: 6px;
  vertical-align: middle;
}
#overview-activities-list {
  padding: 0;
}
#overview-activities-list .stu-activity-row {
  border-radius: 0;
  padding: 12px 18px;
}
#overview-activities-list .stu-activity-row:last-child {
  border-bottom: none;
}

.activities-container {
  padding: 0;
}

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

.page-header h2 {
  font-size: 20px;
  font-weight: 600;
  color: var(--text);
}

/* ===== 布局重构样式 ===== */

/* Topbar 变成最小化 — 只保留标题和帮助按钮，去掉用户名和退出 */


/* Sidebar 角色切换 */
.sidebar-role-switch {
  margin-bottom: 10px;
}
.sidebar-role-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #98A2B3;
  margin-bottom: 6px;
  padding: 0 4px;
}
.sidebar-role-options {
  display: flex;
  gap: 6px;
}
.sidebar-role-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #F5F7FB;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}
.sidebar-role-btn:hover {
  background: #EEF3FF;
  color: var(--text);
  border-color: #D9E0FF;
}
.sidebar-role-btn.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
  box-shadow: 0 2px 8px rgba(16,24,40,0.35);
}

/* Sidebar 底部区域 */
.sidebar-bottom {
  margin-top: auto;
  padding: 12px;
  flex-shrink: 0;
}

/* Sidebar 用户信息 */
.sidebar-user-entry {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  background: transparent;
  border-top: 1px solid var(--border);
  margin-top: 4px;
}
.sidebar-user-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #EEF3FF;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.sidebar-user-info {
  flex: 1;
  min-width: 0;
}
.sidebar-user-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}
.sidebar-logout-btn {
  font-size: 11px;
  color: var(--text-secondary);
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px 0;
  line-height: 1.2;
  transition: color 0.15s;
}
.sidebar-logout-btn:hover {
  color: var(--text);
}




/* ===== main-content 全高 ===== */



*/








/* ===== 布局调整 ===== */
.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
  min-width: 0;
}
.page-content {
  flex: 1;
  overflow-y: auto;
}
.topbar-minimal {
  display: none !important;
}

/* ===== 侧边栏 AI 导航项 + 分隔线 ===== */



/* ===== 侧边栏 AI 助手 - 立体按钮 ===== */
.sidebar-ai-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 12px 14px 6px 14px;
  padding: 12px 16px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  color: #fff;
  cursor: pointer;
  box-shadow:
    0 4px 14px rgba(26,86,219,0.35),
    0 1px 3px rgba(0,0,0,0.12),
    inset 0 1px 0 rgba(255,255,255,0.2);
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
}
.sidebar-student-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0 8px 14px;
}
.sidebar-action-card {
  margin: 0;
  min-height: 64px;
  border-radius: 14px;
}
.sidebar-student-actions .sidebar-ai-btn {
  margin: 0;
  box-shadow: none;
}
.sidebar-student-actions .sidebar-ai-btn:hover {
  box-shadow: none;
}
.sidebar-student-actions .sidebar-ai-btn:active {
  box-shadow: none;
}
.sidebar-market-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  width: auto;
  height: auto;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--text);
  background: #FFFFFF;
  box-shadow: none;
  overflow: hidden;
}
.sidebar-market-btn .sidebar-ai-btn-icon { background: #EEF3FF; color: var(--primary); box-shadow: none; }
.sidebar-market-btn .sidebar-ai-btn-label { color: var(--text); font-weight: 600; }
.sidebar-market-btn .sidebar-ai-btn-desc { color: var(--text-secondary); }
.sidebar-market-btn::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 50%;
  background: none;
  pointer-events: none;
}
.sidebar-market-btn:hover {
  background: #F5F7FB;
  color: var(--text);
  border-color: #D9E0FF;
  transform: translateY(-1px);
  box-shadow: none;
}
.sidebar-market-btn.active {
  background: #EEF3FF;
  color: var(--primary);
  border-color: #D9E0FF;
  box-shadow: none;
}
.sidebar-ai-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0) 100%);
  border-radius: 14px 14px 0 0;
  pointer-events: none;
}
.sidebar-ai-btn:hover {
  background: linear-gradient(135deg, #5a95f5 0%, #1a56db 100%);
  box-shadow:
    0 6px 20px rgba(26,86,219,0.45),
    0 2px 6px rgba(0,0,0,0.15),
    inset 0 1px 0 rgba(255,255,255,0.25);
  transform: translateY(-1px);
}
.sidebar-ai-btn:active {
  background: linear-gradient(135deg, #3575e8 0%, #1546b8 100%);
  box-shadow:
    0 2px 8px rgba(26,86,219,0.3),
    0 1px 2px rgba(0,0,0,0.1),
    inset 0 1px 0 rgba(255,255,255,0.1);
  transform: translateY(0);
}
.sidebar-ai-btn-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(255,255,255,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.25);
}
.sidebar-ai-btn-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.sidebar-ai-btn-label {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.3px;
}
.sidebar-ai-btn-desc {
  font-size: 11px;
  color: rgba(255,255,255,0.7);
  font-weight: 400;
}

.nav-divider {
  height: 1px;
  background: #e8e8e8;
  margin: 4px 16px;
}

/* ===== 响应式 ===== */
@media (max-width: 900px) {
  
}
@media (max-width: 500px) {
  
  
}

/* ===== 区域标题栏 ===== */


/* ===== 统计卡片（任务管理/申请进度等通用） ===== */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}
.stat-card {
  background: var(--surface);
  border-radius: 10px;
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: 0 1px 3px rgba(16,24,40,0.06), 0 1px 2px rgba(16,24,40,0.03);
  border: none;
  transition: box-shadow var(--transition-fast), transform var(--transition-fast);
}
.stat-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}
.stat-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}
.stat-icon.yellow { background: var(--warning-light); color: var(--warning); }
.stat-icon.blue { background: var(--info-light); color: var(--info); }
.stat-icon.green { background: var(--success-light); color: var(--success); }
.stat-icon.red { background: var(--danger-light); color: var(--danger); }
.stat-icon.purple { background: var(--primary-light); color: var(--primary); }
.stat-info h3 {
  font-size: 28px;
  font-weight: 800;
  color: var(--text);
  margin: 0;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.stat-info p {
  font-size: 13px;
  color: var(--text-muted);
  margin: 2px 0 0 0;
}

/* ===== 升学与申请页面 - 全新UI ===== */
.stu-study-page {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #f7f8fc;
  overflow-y: auto;
  box-sizing: border-box;
  width: 100%;
}

/* ===== 两栏面板布局 ===== */
.study-panels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  padding: 20px 24px 24px 24px;
  flex: 1;
  align-items: start;
}
.study-panel {
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 60px);
}
.study-panel-header {
  padding: 16px 20px;
  flex-shrink: 0;
}
.study-panel-header-inner {
  display: flex;
  align-items: center;
  gap: 10px;
}
.study-panel-header-icon {
  font-size: 22px;
}
.study-panel-header h3 {
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  margin: 0;
  flex: 1;
}
.study-panel-header .btn-add-app {
  background: rgba(255,255,255,0.2);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.3);
  font-size: 12px;
  padding: 5px 14px;
}
.study-panel-header .btn-add-app:hover {
  background: rgba(255,255,255,0.35);
  box-shadow: none;
  transform: none;
}
.study-panel-body {
  padding: 16px 18px;
  overflow-y: auto;
  flex: 1;
}

/* 面板内统计卡片间距缩小 */
.study-panel-body .app-stats-row {
  gap: 8px;
  margin-bottom: 14px;
}
.study-panel-body .app-stat-item {
  padding: 10px 14px;
  border-radius: 10px;
}
.study-panel-body .app-stat-num {
  font-size: 22px;
}
.study-panel-body .app-stat-label {
  font-size: 12px;
}

/* 面板内层级组间距缩小 */
.study-panel-body .tier-groups { gap: 10px; }
.study-panel-body .tier-group { border-radius: 10px; }
.study-panel-body .tier-header { padding: 8px 14px; }
.study-panel-body .tier-body { padding: 4px 10px 10px 10px; }
.study-panel-body .app-card { padding: 10px 12px; margin-bottom: 6px; }

/* 响应式 - 小屏幕上下排列 */
@media (max-width: 960px) {
  .study-panels {
    grid-template-columns: 1fr;
  }
  .study-panel {
    max-height: none;
  }
}

/* ==================== Admin Task Cards ==================== */
.task-card.admin-task-card {
  background: var(--card);
  border-radius: 12px;
  padding: 16px 20px;
  margin-bottom: 12px;
  border: 1px solid var(--border);
  transition: box-shadow 0.2s;
}
.task-card.admin-task-card:hover {
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
.task-card .task-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.task-card .task-card-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--foreground);
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
  min-width: 0;
}
.task-card .task-card-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
.task-card .task-card-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.task-card .task-card-meta span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.task-card .task-card-desc {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 8px;
  line-height: 1.5;
}
.task-card .task-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: var(--muted);
  flex-wrap: wrap;
  gap: 8px;
}

/* 区域块 */
.study-section {
  margin-top: 28px;
}
.study-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.study-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
}
.study-section-title .study-section-icon {
  font-size: 22px;
}
.study-section-title h3 {
  font-size: 20px;
  font-weight: 700;
  color: #1e293b;
  margin: 0;
}
.btn-add-app {
  padding: 8px 18px;
  background: #4f46e5;
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}
.btn-add-app:hover {
  background: #4338ca;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(16,24,40,0.3);
}

/* ===== 申请进度 - 统计概览 ===== */
.app-stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}
.app-stat-item {
  background: #fff;
  border-radius: 12px;
  padding: 16px 20px;
  border-left: 4px solid;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.app-stat-num {
  font-size: 28px;
  font-weight: 800;
  color: #1e293b;
  line-height: 1.2;
}
.app-stat-label {
  font-size: 13px;
  color: #94a3b8;
  margin-top: 2px;
}

/* 专家方案横幅 */
.plan-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);
  border-radius: 12px;
  border: 1px solid #c7d2fe;
  margin-bottom: 20px;
}
.plan-banner-icon { font-size: 24px; }
.plan-banner-text strong { color: #4338ca; font-size: 14px; }
.plan-banner-plans { margin-top: 4px; display: flex; gap: 8px; flex-wrap: wrap; }
.plan-tag {
  display: inline-block;
  padding: 2px 10px;
  background: #fff;
  border: 1px solid #a5b4fc;
  border-radius: 6px;
  font-size: 12px;
  color: #4338ca;
  cursor: pointer;
  transition: background 0.15s;
}
.plan-tag:hover { background: #eef2ff; }

/* ===== 申请进度 - 分层组 ===== */
.tier-groups { display: flex; flex-direction: column; gap: 16px; }
.tier-group {
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}
.tier-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px;
}
.tier-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 700;
}
.tier-icon { font-size: 18px; }
.tier-count {
  font-size: 12px;
  font-weight: 500;
  color: #94a3b8;
  background: #fff;
  padding: 2px 8px;
  border-radius: 10px;
}
.tier-suggest-count {
  font-size: 12px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 10px;
}
.tier-body { padding: 4px 14px 14px 14px; }

/* ===== 申请卡片 ===== */
.app-card {
  background: #fafbfc;
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 8px;
  border-left: 4px solid transparent;
  transition: all 0.15s;
}
.app-card:hover {
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.app-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.app-card-school {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.app-card-name {
  font-size: 15px;
  font-weight: 700;
  color: #1e293b;
}
.app-card-rank {
  font-size: 11px;
  font-weight: 600;
  color: #4f46e5;
  background: #eef2ff;
  padding: 2px 8px;
  border-radius: 6px;
}
.app-card-tier {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 6px;
}
.app-card-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}
.app-status-pill {
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 8px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  outline: none;
}
.app-card-del {
  width: 24px;
  height: 24px;
  border: none;
  background: transparent;
  color: #cbd5e1;
  font-size: 14px;
  cursor: pointer;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}
.app-card-del:hover {
  background: #fef2f2;
  color: #ef4444;
}
.app-card-meta {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 8px;
  font-size: 13px;
  color: #94a3b8;
}

/* ===== 推荐院校 ===== */
.suggest-section {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed #e2e8f0;
}
.suggest-title {
  font-size: 13px;
  color: #64748b;
  margin-bottom: 8px;
  font-weight: 600;
}
.suggest-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 8px;
}
.suggest-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
}
.suggest-card-name {
  font-size: 14px;
  font-weight: 600;
  color: #1e293b;
}
.suggest-card-bottom {
  display: flex;
  gap: 6px;
  align-items: center;
}
.suggest-major-input {
  flex: 1;
  padding: 4px 8px;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  font-size: 12px;
  outline: none;
}
.suggest-major-input:focus { border-color: #a5b4fc; }
.suggest-apply-btn {
  padding: 4px 12px;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.15s;
}
.suggest-apply-btn:hover { opacity: 0.85; }
.tier-empty {
  text-align: center;
  color: #94a3b8;
  padding: 24px;
  font-size: 14px;
}

/* ===== 文书管理 ===== */
.doc-upload-zone {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 22px;
  background: #fff;
  border: 2px dashed #d1d5db;
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.2s;
  margin-bottom: 16px;
}
.doc-upload-zone:hover {
  border-color: #818cf8;
  background: #faf5ff;
}
.doc-upload-icon { font-size: 28px; }
.doc-upload-text strong { display: block; font-size: 15px; color: #1e293b; }
.doc-upload-text span { font-size: 13px; color: #94a3b8; }

.docs-list { display: flex; flex-direction: column; gap: 8px; }
.docs-empty {
  text-align: center;
  color: #94a3b8;
  padding: 32px;
  font-size: 14px;
}
.docs-empty-icon { font-size: 36px; margin-bottom: 8px; }

.doc-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  transition: all 0.15s;
}
.doc-card:hover {
  box-shadow: 0 3px 10px rgba(0,0,0,0.08);
}
.doc-card-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.doc-ext {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.5px;
}
.doc-card-info { flex: 1; min-width: 0; }
.doc-card-name {
  font-size: 14px;
  font-weight: 600;
  color: #1e293b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.doc-card-meta {
  display: flex;
  gap: 10px;
  margin-top: 4px;
  font-size: 12px;
  color: #94a3b8;
  align-items: center;
}
.doc-status-pill {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 6px;
}
.doc-card-actions { display: flex; gap: 6px; flex-shrink: 0; }
.doc-action-btn {
  padding: 6px 14px;
  background: #f1f5f9;
  color: #475569;
  border: none;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.15s;
}
.doc-action-btn:hover {
  background: #e2e8f0;
  color: #1e293b;
}

/* ===== 布局 ===== */
.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
  min-width: 0;
}
.page-content {
  flex: 1;
  overflow-y: auto;
}
.topbar-minimal { display: none !important; }

/* ===== 响应式 ===== */
@media (max-width: 768px) {
  .app-stats-row { grid-template-columns: repeat(2, 1fr); }
  .suggest-grid { grid-template-columns: 1fr; }
  .stu-study-page { padding: 0 16px 16px 16px; }
}


/* ============================================================
   Soft UI Evolution — Ocean Design System Extensions
   ============================================================ */

/* ---------- Welcome Banner ---------- */
.welcome-banner {
  background: linear-gradient(135deg, var(--primary) 0%, #6366F1 40%, #7C3AED 100%);
  border-radius: var(--radius-lg);
  padding: 28px 32px;
  color: white;
  box-shadow: var(--shadow-md);
  position: relative;
  overflow: hidden;
}
.welcome-banner::after {
  content: '';
  position: absolute;
  top: -50%;
  right: -10%;
  width: 300px;
  height: 300px;
  background: rgba(255,255,255,0.05);
  border-radius: 50%;
}
.welcome-banner h2 {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 6px;
  position: relative;
  z-index: 1;
}
.welcome-banner p {
  font-size: 14px;
  opacity: 0.85;
  position: relative;
  z-index: 1;
}

/* ---------- Kanban Board (Milestones) ---------- */
.kanban-board {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding: 4px 0;
}
.kanban-column {
  flex: 1;
  min-width: 280px;
  background: var(--bg-alt);
  border-radius: var(--radius-lg);
  padding: 16px;
  border: 1px solid var(--border-light);
}
.kanban-column-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-light);
}
.kanban-column-header .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.kanban-column-header .dot.todo { background: var(--text-muted); }
.kanban-column-header .dot.in-progress { background: var(--primary); }
.kanban-column-header .dot.done { background: var(--success); }
.kanban-column-header h3 {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  flex: 1;
}
.kanban-column-header .count {
  font-size: 12px;
  font-weight: 600;
  padding: 2px 10px;
  border-radius: var(--radius-full);
  background: var(--border);
  color: var(--text-secondary);
}
.kanban-card {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 10px;
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-xs);
  transition: all var(--transition-fast);
  cursor: pointer;
}
.kanban-card:hover {
  box-shadow: var(--shadow-sm);
  border-color: var(--primary-light);
}
.kanban-card h4 {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 8px;
}
.kanban-card .progress-bar {
  height: 6px;
  background: var(--border-light);
  border-radius: 3px;
  margin-bottom: 8px;
  overflow: hidden;
}
.kanban-card .progress-bar .fill {
  height: 100%;
  background: var(--primary);
  border-radius: 3px;
  transition: width var(--transition-slow);
}
.kanban-card .meta {
  font-size: 11px;
  color: var(--text-muted);
  display: flex;
  justify-content: space-between;
}

/* ---------- View Toggle (List / Kanban) ---------- */
.view-toggle {
  display: flex;
  background: var(--bg-alt);
  border-radius: var(--radius);
  padding: 3px;
  border: 1px solid var(--border-light);
}
.view-toggle button {
  padding: 8px 18px;
  border: none;
  background: transparent;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition-fast);
}
.view-toggle button.active {
  background: var(--primary);
  color: white;
  box-shadow: var(--shadow-xs);
}
.view-toggle button:hover:not(.active) {
  color: var(--text);
  background: rgba(16,24,40,0.05);
}

/* ---------- Status Badges ---------- */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 12px;
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
}
.status-badge.pending {
  background: var(--warning-bg);
  color: var(--warning);
}
.status-badge.in-progress, .status-badge.review {
  background: var(--info-bg);
  color: var(--info);
}
.status-badge.completed, .status-badge.confirmed, .status-badge.admitted {
  background: var(--success-bg);
  color: var(--success);
}
.status-badge.cancelled, .status-badge.rejected {
  background: var(--danger-bg);
  color: var(--danger);
}

/* ---------- Priority Dots ---------- */
.priority-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}
.priority-dot.high { background: var(--danger); }
.priority-dot.medium { background: var(--warning); }
.priority-dot.low { background: var(--success); }

/* ---------- School / Application Cards ---------- */
.app-card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 20px;
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-base);
  cursor: pointer;
}
.app-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--primary-light);
  transform: translateY(-2px);
}
.app-card .school-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 6px;
}
.app-card .program {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 12px;
}
.app-card .app-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: var(--text-muted);
}

/* ---------- Activity Feed ---------- */
.feed-item {
  padding: 14px 0;
  border-bottom: 1px solid var(--border-light);
}
.feed-item:last-child { border-bottom: none; }
.feed-item .feed-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 4px;
}
.feed-item .feed-time {
  font-size: 11px;
  color: var(--text-muted);
}

/* ---------- Empty State ---------- */
.empty-state {
  text-align: center;
  padding: 48px 24px;
}
.empty-state .empty-icon {
  font-size: 48px;
  margin-bottom: 16px;
  opacity: 0.5;
}
.empty-state h3 {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 8px;
}
.empty-state p {
  font-size: 14px;
  color: var(--text-muted);
  margin-bottom: 20px;
}

/* ---------- Modal refined ---------- */
.modal-overlay {
  background: rgba(30,27,75,0.4);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.modal {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  border: 1px solid var(--border-light);
}

/* ---------- Toast refined ---------- */
.toast {
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 14px 20px;
  font-size: 14px;
  font-weight: 500;
}

/* ---------- Section Titles ---------- */
.section-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ---------- Page Content Spacing ---------- */
.page-content {
  padding: 32px;
  overflow-y: auto;
  min-height: 0;
}

/* ---------- Scrollbar Styling ---------- */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* ---------- Form enhancements ---------- */
.form-group input,
.form-group select,
.form-group textarea {
  border-radius: var(--radius);
  border-color: var(--border);
  transition: all var(--transition-fast);
  font-family: var(--font-family);
}
.form-group input:hover,
.form-group select:hover,
.form-group textarea:hover {
  border-color: var(--primary-light);
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(31,60,255,0.12);
}

/* ---------- Button base enhancements ---------- */
.btn {
  font-family: var(--font-family);
  font-weight: 500;
  border-radius: var(--radius);
  transition: all var(--transition-fast);
  cursor: pointer;
}
.btn:active { transform: scale(0.98); }

/* ---------- Tag / Chip ---------- */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 500;
  background: var(--primary-lightest);
  color: var(--primary);
}

/* ---------- Timeline refined ---------- */
.timeline-item {
  position: relative;
  padding-left: 28px;
  padding-bottom: 20px;
  border-left: 2px solid var(--border-light);
}
.timeline-item::before {
  content: '';
  position: absolute;
  left: -6px;
  top: 4px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--primary);
  border: 2px solid var(--surface);
}
.timeline-item:last-child { border-left-color: transparent; }

/* ---------- AI Panel refined ---------- */
.ai-panel-sidebar {
  background: var(--surface);
  border-left: 1px solid var(--border-light);
  box-shadow: var(--shadow-lg);
}

/* ---------- Responsive adjustments ---------- */
@media (max-width: 768px) {
  .sidebar { width: 64px; min-width: 64px; }
  .sidebar .nav-item { justify-content: center; padding: 0; }
  .sidebar .nav-item span:not(.nav-icon):not(.student-nav-icon) { display: none; }
  .page-content { padding: 16px; }
  .topbar { padding: 0 16px; }
  .kanban-board { flex-direction: column; }
  .kanban-column { min-width: 100%; }
}


/* ============================================================
   专家端 & 管理端 — Soft UI Evolution 专属样式
   ============================================================ */

/* ---------- Quick Actions (Consultant Dashboard) ---------- */
.quick-actions {
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 24px;
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-sm);
}
.quick-actions h3 {
  color: var(--text);
  font-weight: 600;
}

/* ---------- Back Button ---------- */
.back-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: var(--surface);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-fast);
  margin-bottom: 16px;
}
.back-btn:hover {
  background: var(--primary-lightest);
  color: var(--primary);
  border-color: var(--primary-light);
}

/* ---------- Page Header ---------- */
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 24px;
}
.page-header h2 {
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
}

/* ---------- Separator ---------- */
.separator {
  border: none;
  border-top: 1px solid var(--border-light);
  margin: 20px 0;
}

/* ---------- Search Bar ---------- */
.search-bar {
  display: flex;
  align-items: center;
  gap: 8px;
}
.search-bar input {
  padding: 8px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 13px;
  font-family: var(--font-family);
  min-width: 220px;
  transition: all var(--transition-fast);
}
.search-bar input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(31,60,255,0.12);
}

/* ---------- Sort Select ---------- */
.sort-select select {
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 13px;
  font-family: var(--font-family);
  background: var(--surface);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition-fast);
}
.sort-select select:focus {
  outline: none;
  border-color: var(--primary);
}

/* ============================================================
   学校选择器 (School Picker) — Consultant
   ============================================================ */
.school-card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 20px;
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-xs);
  transition: all var(--transition-base);
  cursor: pointer;
}
.school-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--primary-light);
  transform: translateY(-2px);
}
.school-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 12px;
}
.school-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
}
.school-flag {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  flex-shrink: 0;
}
.school-info {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 8px;
}
.school-programs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}
.school-count {
  font-size: 12px;
  color: var(--text-muted);
}

.school-picker {
  position: relative;
}
.school-picker-input-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  min-height: 42px;
  cursor: text;
  transition: all var(--transition-fast);
}
.school-picker-input-wrap:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(31,60,255,0.12);
}
.school-picker-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.school-picker-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 500;
  background: var(--primary-lightest);
  color: var(--primary);
}
.school-picker-tag-remove {
  cursor: pointer;
  opacity: 0.6;
  font-size: 14px;
  line-height: 1;
}
.school-picker-tag-remove:hover {
  opacity: 1;
}
.school-picker-search {
  flex: 1;
  min-width: 120px;
  border: none;
  outline: none;
  font-size: 13px;
  font-family: var(--font-family);
  background: transparent;
}
.school-picker-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 4px;
  background: var(--surface);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  max-height: 280px;
  overflow-y: auto;
  z-index: 200;
}
.school-picker-item {
  padding: 10px 16px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text);
  transition: background var(--transition-fast);
  border-bottom: 1px solid var(--border-light);
}
.school-picker-item:last-child {
  border-bottom: none;
}
.school-picker-item:hover {
  background: var(--primary-lightest);
}
.school-picker-no-result {
  padding: 16px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
}
.school-rank {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--radius-full);
}
.school-rank.rank-top10 {
  background: var(--warning-bg);
  color: var(--warning);
}

/* ============================================================
   学生备注 (Remark Cards) — Consultant
   ============================================================ */
.remark-card {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 16px;
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-xs);
  margin-bottom: 12px;
}
.remark-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}
.remark-text {
  font-size: 14px;
  color: var(--text);
  line-height: 1.6;
}
.remark-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  justify-content: flex-end;
}
.remark-empty-btn {
  padding: 12px 20px;
  background: var(--primary-lightest);
  border: 2px dashed var(--primary-light);
  border-radius: var(--radius);
  color: var(--primary);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  text-align: center;
  transition: all var(--transition-fast);
}
.remark-empty-btn:hover {
  background: var(--primary-light);
  border-color: var(--primary);
}

/* ============================================================
   聊天组件 (Chat) — Consultant Messages
   ============================================================ */
.chat-container {
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--topbar-h) - 80px);
  background: var(--surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.chat-bubble {
  max-width: 70%;
  padding: 12px 18px;
  border-radius: var(--radius-lg);
  font-size: 14px;
  line-height: 1.6;
  word-break: break-word;
}
.chat-bubble.sent {
  align-self: flex-end;
  background: var(--primary);
  color: #fff;
  border-bottom-right-radius: 4px;
}
.chat-bubble.received {
  align-self: flex-start;
  background: var(--bg-alt);
  color: var(--text);
  border-bottom-left-radius: 4px;
}
.chat-sender {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.chat-time {
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 4px;
  text-align: right;
}
.chat-input-area {
  display: flex;
  gap: 12px;
  padding: 16px 24px;
  border-top: 1px solid var(--border-light);
  background: var(--bg-alt);
}
.chat-input-area textarea {
  flex: 1;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 14px;
  font-family: var(--font-family);
  resize: none;
  min-height: 44px;
  transition: all var(--transition-fast);
}
.chat-input-area textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(31,60,255,0.12);
}

/* ============================================================
   模板管理 (Templates) — Consultant + Admin
   ============================================================ */
.template-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}
.template-card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
  transition: all var(--transition-base);
  cursor: pointer;
}
.template-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--primary-light);
  transform: translateY(-2px);
}
.template-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 20px 20px 12px;
}
.template-card-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  word-break: break-all;
  line-height: 1.4;
}
.template-card-desc {
  padding: 0 20px;
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: 12px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.template-card-stats {
  padding: 0 20px 12px;
  display: flex;
  gap: 16px;
  font-size: 12px;
  color: var(--text-muted);
}
.template-card-date {
  padding: 0 20px 12px;
  font-size: 12px;
  color: var(--text-muted);
}
.template-card-actions {
  padding: 12px 20px;
  border-top: 1px solid var(--border-light);
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.template-breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 16px;
}
.template-breadcrumb span {
  color: var(--primary);
  cursor: pointer;
  font-weight: 500;
}
.template-breadcrumb span:hover {
  text-decoration: underline;
}
.template-desc-bar {
  padding: 12px 16px;
  background: var(--bg-alt);
  border-left: 3px solid var(--primary);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 16px;
}

/* ============================================================
   模板内里程碑 & 任务卡片 — Admin Template Detail
   ============================================================ */
.tpl-goal-card {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 16px 20px;
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-xs);
  margin-bottom: 12px;
  transition: all var(--transition-fast);
}
.tpl-goal-card:hover {
  border-color: var(--primary-light);
}
.tpl-goal-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.tpl-goal-type-icon {
  font-size: 20px;
  flex-shrink: 0;
}
.tpl-goal-title-area {
  flex: 1;
}
.tpl-goal-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}
.tpl-goal-desc {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 8px;
  line-height: 1.5;
}
.tpl-goal-date {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.tpl-goal-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}
.tpl-task-item {
  margin-left: 36px;
  margin-bottom: 8px;
}
.tpl-task-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--bg-alt);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-light);
  transition: all var(--transition-fast);
}
.tpl-task-card:hover {
  background: var(--primary-lightest);
  border-color: var(--primary-light);
}
.tpl-task-info {
  flex: 1;
}
.tpl-task-desc {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 2px;
}
.tpl-task-meta {
  font-size: 12px;
  color: var(--text-muted);
}
.tpl-task-date {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
}
.tpl-task-goal-link {
  font-size: 11px;
  color: var(--primary);
  cursor: pointer;
}
.tpl-task-actions {
  display: flex;
  gap: 4px;
}
.tpl-empty {
  text-align: center;
  padding: 48px 24px;
}
.tpl-empty-icon {
  font-size: 48px;
  margin-bottom: 12px;
  opacity: 0.4;
}
.tpl-empty p {
  font-size: 14px;
  color: var(--text-muted);
}

/* ============================================================
   标签按钮 (Tab Buttons) — Admin User Management
   ============================================================ */
.tab-btn {
  padding: 8px 20px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition-fast);
}
.tab-btn:hover {
  color: var(--text);
  background: rgba(16,24,40,0.04);
}
.tab-btn.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
  font-weight: 600;
}

/* ============================================================
   开关组件 (Toggle Switch) — Admin
   ============================================================ */
.switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid var(--border-light);
}
.switch-row:last-child {
  border-bottom: none;
}
.switch-row .label {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
}
.switch-row .desc {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}
.switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
}
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--border);
  border-radius: 24px;
  transition: all var(--transition-fast);
}
.slider::before {
  content: '';
  position: absolute;
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background: white;
  border-radius: 50%;
  transition: all var(--transition-fast);
  box-shadow: var(--shadow-xs);
}
.switch input:checked + .slider {
  background: var(--primary);
}
.switch input:checked + .slider::before {
  transform: translateX(20px);
}

/* ============================================================
   表格容器 (Table Wrapper) — Admin
   ============================================================ */
.table-wrapper {
  background: var(--surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
}
.table-wrapper table {
  width: 100%;
  border-collapse: collapse;
}
.table-wrapper th {
  background: var(--bg-alt);
  padding: 12px 16px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-align: left;
  border-bottom: 1px solid var(--border-light);
}
.table-wrapper td {
  padding: 12px 16px;
  font-size: 13px;
  border-bottom: 1px solid var(--border-light);
  color: var(--text);
}
.table-wrapper tr:last-child td {
  border-bottom: none;
}
.table-wrapper tr:hover td {
  background: var(--primary-lightest);
}

/* ============================================================
   复选框列表 (Checkbox Items) — Admin
   ============================================================ */
.checkbox-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
}
.checkbox-item input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--primary);
  cursor: pointer;
}
.consultant-checkboxes {
  max-height: 300px;
  overflow-y: auto;
  padding: 8px 0;
}

/* ============================================================
   程序标签 & 分组标签 — Consultant
   ============================================================ */
.program-tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 500;
  background: var(--info-bg);
  color: var(--info);
}
.group-tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 500;
  background: var(--success-bg);
  color: var(--success);
}

/* ============================================================
   Stat Icon 配色 — Dashboard
   ============================================================ */
.stat-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}
.stat-icon.blue {
  background: var(--info-bg);
  color: var(--info);
}
.stat-icon.green {
  background: var(--success-bg);
  color: var(--success);
}
.stat-icon.red {
  background: var(--danger-bg);
  color: var(--danger);
}
.stat-icon.yellow {
  background: var(--warning-bg);
  color: var(--warning);
}
.stat-icon.primary {
  background: var(--primary-lightest);
  color: var(--primary);
}
.stat-icon.purple {
  background: #F3E8FF;
  color: #7C3AED;
}
.stat-info {
  flex: 1;
}
.stat-info .stat-value {
  font-size: 24px;
  font-weight: 700;
  color: var(--text);
}
.stat-info .stat-label {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}

/* ============================================================
   布局工具类
   ============================================================ */
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mb-24 { margin-bottom: 24px; }

/* ============================================================
   批量操作工具栏 (Batch Toolbar) — Consultant
   ============================================================ */
.batch-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: var(--primary-lightest);
  border: 1px solid var(--primary-light);
  border-radius: var(--radius);
  margin-bottom: 16px;
}
.batch-toolbar .batch-count {
  font-size: 13px;
  font-weight: 600;
  color: var(--primary);
}
.batch-check {
  width: 16px;
  height: 16px;
  accent-color: var(--primary);
  cursor: pointer;
}

/* ============================================================
   按钮扩展样式
   ============================================================ */
.btn-xs {
  padding: 4px 10px;
  font-size: 12px;
  border-radius: var(--radius-sm);
}
.btn-sm {
  padding: 6px 14px;
  font-size: 13px;
  border-radius: var(--radius);
}
.btn-danger {
  background: var(--danger);
  color: #fff;
  border: 1px solid var(--danger);
}
.btn-danger:hover {
  background: #DC2626;
  box-shadow: var(--shadow-sm);
}
.btn-warning {
  background: var(--warning);
  color: #fff;
  border: 1px solid var(--warning);
}
.btn-warning:hover {
  background: #B45309;
  box-shadow: var(--shadow-sm);
}
.btn-success {
  background: var(--success);
  color: #fff;
  border: 1px solid var(--success);
}
.btn-success:hover {
  background: #059669;
  box-shadow: var(--shadow-sm);
}
.btn-outline {
  background: var(--surface);
  color: var(--text-secondary);
  border: 1px solid var(--border);
}
.btn-outline:hover {
  background: var(--bg-alt);
  color: var(--text);
  border-color: var(--text-muted);
}
.btn-danger-outline {
  background: var(--surface);
  color: var(--danger);
  border: 1px solid var(--danger-light);
}
.btn-danger-outline:hover {
  background: var(--danger-bg);
}

/* ============================================================
   多选操作按钮 (Delete Batch Button)
   ============================================================ */
.btn-delete-batch {
  background: var(--danger);
  color: #fff;
  border: none;
  padding: 6px 16px;
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-fast);
}
.btn-delete-batch:hover {
  background: #DC2626;
  box-shadow: var(--shadow-sm);
}

/* ============================================================
   预约状态选择器 (Appointment Status Select)
   ============================================================ */
.app-status-select {
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 13px;
  font-family: var(--font-family);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  transition: all var(--transition-fast);
}
.app-status-select:focus {
  outline: none;
  border-color: var(--primary);
}

/* ============================================================
   标签系统 (Tags)
   ============================================================ */
.tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
}
.tag-primary {
  background: var(--primary-lightest);
  color: var(--primary);
}
.tag-success {
  background: var(--success-bg);
  color: var(--success);
}
.tag-warning {
  background: var(--warning-bg);
  color: var(--warning);
}
.tag-danger {
  background: var(--danger-bg);
  color: var(--danger);
}
.tag-info {
  background: var(--info-bg);
  color: var(--info);
}
.tag-default {
  background: var(--bg-alt);
  color: var(--text-secondary);
}

/* ============================================================
   分页组件 (Pagination)
   ============================================================ */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 20px;
}
.pagination button {
  padding: 6px 14px;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-fast);
}
.pagination button:hover:not(:disabled) {
  background: var(--primary-lightest);
  color: var(--primary);
  border-color: var(--primary-light);
}
.pagination button.active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}
.pagination button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ============================================================
   侧边栏角色切换按钮
   ============================================================ */
.sidebar-role-switch {
  padding: 12px 16px 8px;
  border-top: 1px solid var(--sidebar-divider);
}
.sidebar-role-label {
  font-size: 10px;
  font-weight: 600;
  color: rgba(255,255,255,0.35);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 8px;
}
.sidebar-role-options {
  display: flex;
  gap: 6px;
}
.sidebar-role-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.04);
  color: var(--sidebar-text);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-fast);
}
.sidebar-role-btn:hover {
  background: rgba(255,255,255,0.08);
  color: var(--sidebar-text-hover);
}
.sidebar-role-btn.active {
  background: var(--sidebar-active);
  border-color: var(--primary);
  color: var(--sidebar-text-hover);
  box-shadow: 0 0 0 1px var(--primary);
}

/* ============================================================
   侧边栏底部用户信息
   ============================================================ */
.sidebar-bottom {
  margin-top: auto;
}
.sidebar-user-entry {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  border-top: 1px solid var(--sidebar-divider);
}
.sidebar-user-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #EEF3FF;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.sidebar-user-info {
  flex: 1;
  min-width: 0;
}
.sidebar-user-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sidebar-logout-btn {
  font-size: 11px;
  color: var(--text-secondary);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  margin-top: 2px;
}
.sidebar-logout-btn:hover {
  color: var(--danger);
}

/* ============================================================
   侧边栏学生列表项
   ============================================================ */
.student-nav-item {
  padding-left: 16px !important;
}
.student-nav-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #EEF3FF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--sidebar-icon);
  flex-shrink: 0;
}
.student-nav-item.active .student-nav-icon {
  background: var(--primary);
  color: #fff;
}
.student-nav-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.student-nav-badge {
  font-size: 10px;
  font-weight: 600;
  background: var(--danger);
  color: #fff;
  padding: 2px 7px;
  border-radius: var(--radius-full);
  min-width: 18px;
  text-align: center;
  line-height: 14px;
  box-shadow: 0 1px 3px rgba(239,68,68,0.3);
}

/* ============================================================
   门户切换下拉
   ============================================================ */
.portal-switch {
  position: relative;
}
.portal-switch-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: var(--bg-alt);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  font-size: 13px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition-fast);
}
.portal-switch-btn:hover {
  background: var(--primary-lightest);
  color: var(--primary);
  border-color: var(--primary-light);
}
.portal-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 4px;
  background: var(--surface);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  min-width: 140px;
  z-index: 500;
  overflow: hidden;
}
.portal-dropdown.show {
  display: block;
}
.portal-dropdown-item {
  display: block;
  width: 100%;
  padding: 10px 16px;
  border: none;
  background: none;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
  text-align: left;
  transition: background var(--transition-fast);
}
.portal-dropdown-item:hover {
  background: var(--primary-lightest);
}
.portal-dropdown-item:not(:last-child) {
  border-bottom: 1px solid var(--border-light);
}

/* ============================================================
   Topbar Minimal 样式
   ============================================================ */
.topbar-minimal {
  background: var(--surface);
  border-bottom: 1px solid var(--border-light);
  box-shadow: var(--shadow-xs);
}
.topbar-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
}
.topbar-help {
  color: var(--text-muted);
  cursor: pointer;
  transition: color var(--transition-fast);
}
.topbar-help:hover {
  color: var(--text);
}

/* ============================================================
   响应式 — 专家端/管理端
   ============================================================ */
@media (max-width: 768px) {
  .template-grid {
    grid-template-columns: 1fr;
  }
  .grid-2, .grid-3 {
    grid-template-columns: 1fr;
  }
  .chat-container {
    height: calc(100vh - var(--topbar-h) - 40px);
  }
  .quick-actions {
    padding: 16px;
  }
}

/* ============================================================
   循环任务标签 (Recurrence Tag) — Consultant
   ============================================================ */
.recurrence-tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: 500;
}

/* ============================================================
   Current page indicator
   ============================================================ */
.current {
  font-weight: 600;
  color: var(--primary);
}

/* ============================================================
   任务列表
   ============================================================ */
.tasks-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ============================================================
   专家端 - 我的任务工作台
   ============================================================ */
.mytask-workbench {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.mytask-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  padding: 2px 0 4px;
}

.mytask-kicker {
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 700;
}

.mytask-page-title {
  color: var(--text);
  font-size: 24px;
  line-height: 1.2;
  margin: 2px 0 0;
}

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

.mytask-stat {
  min-height: 82px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
}

.mytask-stat-label {
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 700;
}

.mytask-stat-value {
  color: var(--text);
  font-size: 28px;
  font-weight: 800;
  line-height: 1.1;
  margin-top: 8px;
}

.mytask-stat-alert .mytask-stat-value {
  color: var(--danger);
}

.mytask-controls {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px;
}

.mytask-filter-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(130px, 1fr));
  gap: 12px;
  flex: 1;
}

.mytask-select-field {
  position: relative;
  min-width: 0;
}

.mytask-select-field label {
  position: absolute;
  left: 11px;
  top: -7px;
  z-index: 1;
  background: var(--surface);
  color: #5F6368;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  padding: 0 4px;
}

.mytask-select-field::after {
  content: "";
  position: absolute;
  right: 12px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-right: 1.8px solid #5F6368;
  border-bottom: 1.8px solid #5F6368;
  transform: translateY(-65%) rotate(45deg);
  pointer-events: none;
}

.mytask-select-field select {
  width: 100%;
  height: 42px;
  appearance: none;
  -webkit-appearance: none;
  font-family: var(--font-family);
  background: var(--surface);
  border: 1px solid #DADCE0;
  border-radius: 8px;
  color: #202124;
  font-size: 13px;
  font-weight: 600;
  padding: 0 36px 0 12px;
  box-shadow: none;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.mytask-select-field select:hover {
  border-color: #9AA0A6;
  background: #FFFFFF;
}

.mytask-select-field select:focus {
  border-color: #1A73E8;
  box-shadow: 0 0 0 1px #1A73E8;
  outline: none;
}

.mytask-select-field select option {
  font-family: var(--font-family);
  font-size: 13px;
  font-weight: 500;
  color: #202124;
  background: #FFFFFF;
}

.mytask-select-field:focus-within label {
  color: #1A73E8;
}

.mytask-view-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.mytask-sections {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.mytask-section {
  background: var(--surface);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  overflow: hidden;
}

.mytask-section-header {
  background: #FBFCFF;
  border-bottom: 1px solid var(--border-light);
  padding: 14px 16px;
}

.mytask-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
  font-size: 15px;
  font-weight: 800;
}

.mytask-section-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--section-color) 14%, #fff);
  color: var(--section-color);
  font-size: 13px;
}

.mytask-section-count {
  background: color-mix(in srgb, var(--section-color) 12%, #fff);
  color: var(--section-color);
  border: 1px solid color-mix(in srgb, var(--section-color) 28%, #fff);
  border-radius: var(--radius-full);
  padding: 1px 9px;
  font-size: 12px;
  font-weight: 800;
  margin-left: auto;
}

.mytask-section-subtitle {
  color: var(--text-secondary);
  font-size: 12px;
  margin-top: 4px;
}

.mytask-section-body {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mytask-card {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  gap: 14px;
  background: #FBFCFF;
  border-radius: var(--radius-sm);
  padding: 14px;
  border: 1px solid var(--border-light);
  transition: background 0.2s, border-color 0.2s;
}

.mytask-card:hover {
  border-color: color-mix(in srgb, var(--section-color) 42%, var(--border));
  background: #FFFFFF;
}

.mytask-card.mytask-overdue {
  border-left: 3px solid var(--danger);
}

.mytask-card.mytask-zhishi {
  background: #FFFDF9;
}

.mtk-left {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mtk-title-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
}

.mtk-title {
  color: var(--text);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.4;
  min-width: 0;
  overflow-wrap: anywhere;
}

.mytask-source-chip {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
  flex-shrink: 0;
}

.mytask-source-chip.source-student {
  color: #047857;
  background: #ECFDF5;
  border: 1px solid #A7F3D0;
}

.mytask-source-chip.source-zhishi {
  color: #C2410C;
  background: #FFF7ED;
  border: 1px solid #FDBA74;
}

.mtk-info {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  color: var(--text-secondary);
  font-size: 12px;
}

.mtk-info-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.mtk-info-label {
  color: var(--text-muted);
  font-weight: 700;
}

.mtk-desc {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.mtk-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  flex-shrink: 0;
  min-width: 170px;
}

.mtk-badges {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
}

.mtk-badge-label {
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 800;
}

.mtk-actions {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.mtk-actions .btn-sm,
.mytask-table .btn-sm {
  min-height: 28px;
  padding: 4px 9px;
  font-size: 12px;
  line-height: 1.2;
  border-radius: 6px;
}

.mtk-actions .status-select,
.mytask-table .status-select {
  min-height: 28px;
  height: 28px;
  padding: 3px 22px 3px 8px;
  font-size: 12px;
  border-radius: 6px;
}

.mytask-list-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.mytask-list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-light);
  background: #FBFCFF;
}

.mytask-list-header h3 {
  font-size: 15px;
  margin: 0;
}

.mytask-list-header span {
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 700;
}

.mytask-list-body {
  padding: 0;
}

.mytask-table th {
  white-space: nowrap;
}

.mytask-table td {
  vertical-align: middle;
}

.mytask-table tr.is-overdue td:first-child {
  border-left: 3px solid var(--danger);
}

.mytask-table-empty {
  text-align: center;
  color: var(--text-muted);
  padding: 32px 12px;
}

@media (max-width: 1180px) {
  .mytask-summary-grid {
    grid-template-columns: repeat(3, minmax(120px, 1fr));
  }
  .mytask-controls {
    align-items: stretch;
    flex-direction: column;
  }
  .mytask-view-toggle {
    justify-content: flex-end;
  }
}

@media (max-width: 900px) {
  .mytask-sections,
  .mytask-filter-grid,
  .mytask-summary-grid {
    grid-template-columns: 1fr;
  }
  .mytask-toolbar {
    align-items: stretch;
    flex-direction: column;
  }
  .mytask-card {
    flex-direction: column;
  }
  .mtk-right {
    align-items: stretch;
    min-width: 0;
  }
  .mtk-actions,
  .mtk-badges,
  .mytask-view-toggle {
    justify-content: flex-start;
  }
}

/* 管理端 - 专家任务管理 */
.admin-ctask-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: flex-start;
}

.admin-ctask-left,
.admin-ctask-right {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.admin-ctask-item {
  background: var(--bg-alt);
  border-radius: 12px;
  padding: 14px 18px;
  border: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.admin-ctask-item:hover {
  border-color: var(--accent);
}

.admin-ctask-item-info {
  flex: 1;
  min-width: 0;
}

.admin-ctask-item-title {
  font-weight: 600;
  font-size: 14px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.admin-ctask-item-meta {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 2px;
}

@media (max-width: 768px) {
  .admin-ctask-grid {
    grid-template-columns: 1fr;
  }
}

/* AI Milestone Confirmation UI */
.ai-milestone-confirm {
  margin-top: 12px;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  background: #f8f9fa;
  padding: 12px;
}
.ai-ms-title-bar {
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 10px;
  color: #333;
}
.ai-ms-list {
  max-height: 300px;
  overflow-y: auto;
  margin-bottom: 10px;
}
.ai-milestone-item {
  padding: 8px 10px;
  border-radius: 8px;
  background: #fff;
  margin-bottom: 6px;
  border: 1px solid #eee;
}
.ai-milestone-item:hover {
  border-color: #c8d6e5;
}
.ai-milestone-header {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ai-ms-check {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.ai-ms-title {
  flex: 1;
  font-weight: 500;
  font-size: 13px;
  color: #222;
}
.ai-ms-priority {
  flex-shrink: 0;
}
.ai-ms-desc {
  font-size: 12px;
  color: #666;
  margin: 4px 0 2px 24px;
  line-height: 1.4;
}
.ai-ms-dates {
  font-size: 11px;
  color: #999;
  margin-left: 24px;
}
.ai-ms-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.ai-ms-success {
  text-align: center;
  padding: 16px;
  color: #27ae60;
  font-weight: 600;
  font-size: 14px;
}
/* AI Task confirm card */
.ai-task-confirm {
  background: #FFF9F0;
  border: 1px solid #F0D0A0;
  border-radius: 12px;
  padding: 16px;
  margin-top: 12px;
}
.ai-task-confirm-header {
  font-size: 14px;
  font-weight: 600;
  color: #E67E22;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.ai-task-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid #F5E6D0;
}
.ai-task-item:last-child { border-bottom: none; }
.ai-task-item input[type="checkbox"] { margin-top: 3px; }
.ai-task-info { flex: 1; }
.ai-task-info-title { font-weight: 600; font-size: 13px; color: #333; }
.ai-task-info-desc { font-size: 12px; color: #666; margin-top: 2px; }
.ai-task-info-meta { font-size: 11px; color: #999; margin-top: 2px; }
.ai-task-actions { margin-top: 12px; display: flex; gap: 8px; }

/* Expert market */
.expert-market-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: 24px;
  align-items: stretch;
}
.market-mode-tabs {
  display: inline-flex;
  gap: 6px;
  margin: 14px 0 18px;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
}
.market-mode-tab {
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text-secondary);
  padding: 9px 18px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.market-mode-tab:hover {
  color: var(--text);
  background: rgba(30,27,75,0.08);
}
.market-mode-tab.active {
  background: var(--primary);
  color: #fff;
}
.course-market-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: 24px;
  align-items: stretch;
}
.course-market-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 100%;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
  cursor: pointer;
  transition: border-color .16s ease, transform .16s ease;
}
.course-market-card:hover {
  border-color: #8ab4f8;
  transform: translateY(-1px);
}
.course-card-cover {
  aspect-ratio: 4 / 3;
  background: #eef4ff;
  overflow: hidden;
}
.course-card-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.course-card-cover-fallback {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  color: #1967d2;
  font-size: 42px;
  font-weight: 800;
}
.course-card-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  min-width: 0;
}
.course-card-kicker {
  color: #1967d2;
  font-size: 12px;
  font-weight: 800;
}
.course-card-body h3 {
  margin: 0;
  color: var(--text-primary);
  font-size: 17px;
  line-height: 1.35;
}
.course-card-subtitle,
.course-card-desc {
  margin: 0;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.6;
}
.course-card-desc {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.course-card-meta,
.course-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.course-card-meta span,
.course-card-tags span {
  border-radius: 999px;
  background: #f1f3f4;
  color: var(--text-secondary);
  padding: 4px 8px;
  font-size: 12px;
  font-weight: 600;
}
.course-card-tags span {
  background: #e8f0fe;
  color: #1967d2;
}
.course-card-meta .course-type-tag {
  background: #d7e3ff;
  color: #174ea6;
}
.course-card-meta .course-meta-duration {
  background: #e6f4ea;
  color: #137333;
}
.course-card-meta .course-meta-level {
  background: #fef7e0;
  color: #b06000;
}
.course-card-meta .course-meta-audience {
  background: #fce8e6;
  color: #c5221f;
}
.course-card-meta .course-meta-status {
  background: #e8f0fe;
  color: #1967d2;
}
.course-card-meta .course-meta-class {
  background: #e6f4f1;
  color: #00796b;
}
.course-card-meta .course-meta-capacity {
  background: #f3e8fd;
  color: #7b1fa2;
}
.course-card-tags .course-tag-color-1 {
  background: #e8f0fe;
  color: #174ea6;
}
.course-card-tags .course-tag-color-2 {
  background: #e6f4ea;
  color: #137333;
}
.course-card-tags .course-tag-color-3 {
  background: #fef7e0;
  color: #b06000;
}
.course-card-tags .course-tag-color-4 {
  background: #fce8e6;
  color: #c5221f;
}
.course-card-footer {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 14px 14px;
}
.course-card-price {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.25;
}
.course-card-price-label {
  font-size: 11px;
  color: var(--text-secondary, #8a93a0);
  margin-bottom: 3px;
}
.course-card-price-value {
  font-size: 17px;
  font-weight: 700;
  color: var(--text-primary, #1f2933);
  white-space: nowrap;
}
.course-card-footer .expert-card-cta {
  width: auto;
  flex-shrink: 0;
  white-space: nowrap;
  padding: 8px 16px;
}
.course-card-footer strong {
  min-width: 0;
  color: var(--text-primary);
  font-size: 15px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.course-detail-modal {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.course-detail-cover {
  border-radius: 8px;
  overflow: hidden;
  background: #eef4ff;
  flex-shrink: 0;
}
.course-detail-cover img {
  width: 100%;
  height: auto;
  display: block;
}
.course-detail-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
}
.course-detail-head h3 {
  margin: 4px 0 6px;
  color: var(--text-primary);
  font-size: 22px;
}
.course-detail-head p {
  margin: 0;
  color: var(--text-secondary);
  line-height: 1.6;
}
.course-detail-rich .expert-rich-detail {
  margin-top: 0;
}
.course-class-list {
  display: grid;
  gap: 12px;
  margin-top: 4px;
}
.course-class-list h4 {
  margin: 0;
  color: var(--text-primary);
  font-size: 16px;
}
.course-class-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  transition: border-color 0.16s ease, background 0.16s ease;
}
.course-class-card:hover {
  border-color: #6d5dfc;
  background: #f8f7ff;
}
.course-class-card.selected {
  border-color: #4f46e5;
  background: #f5f3ff;
}
.course-class-card strong {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  color: var(--text-primary);
  font-size: 15px;
}
.course-class-selected-badge {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: #4f46e5;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}
.course-class-card p,
.course-class-card small {
  display: block;
  margin: 4px 0 0;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.5;
}
.course-detail-section-title {
  margin: 0 0 10px;
  color: var(--text-primary);
  font-size: 16px;
}
.course-class-detail {
  display: grid;
  gap: 16px;
}
.course-class-detail-head h3 {
  margin: 8px 0 4px;
  color: var(--text-primary);
  font-size: 22px;
}
.course-class-detail-head p {
  margin: 0;
  color: var(--text-secondary);
}
.course-class-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.course-class-detail-grid div,
.course-class-detail-note {
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
}
.course-class-detail-grid span,
.course-class-detail-note span {
  display: block;
  margin-bottom: 6px;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 700;
}
.course-class-detail-grid strong,
.course-class-detail-note p {
  margin: 0;
  color: var(--text-primary);
  font-size: 14px;
  line-height: 1.6;
}
.btn.btn-disabled {
  background: #d1d5db;
  border-color: #d1d5db;
  color: #fff;
  cursor: pointer;
}
.course-detail-purchase {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 16px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: none;
}
.course-detail-purchase span {
  display: block;
  margin-bottom: 3px;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 700;
}
.course-detail-purchase strong {
  color: var(--text);
  font-size: 22px;
  line-height: 1.2;
}
.course-detail-purchase .btn {
  min-width: 118px;
}
.modal.expert-booking-modal .modal-footer.course-detail-footer {
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.course-detail-footer-price {
  min-width: 0;
}
.course-detail-footer-price span {
  display: block;
  margin-bottom: 3px;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 700;
}
.course-detail-footer-price strong {
  color: var(--text);
  font-size: 20px;
  line-height: 1.25;
}
.course-detail-footer-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-shrink: 0;
}
.course-detail-footer-actions .btn {
  min-width: 96px;
}
.course-category-section,
.expert-category-section {
  width: 100%;
  min-width: 0;
}
.expert-category-tabs,
.market-category-tabs {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  padding: 4px 0 22px;
  margin-top: 6px;
  scrollbar-width: none;
}
.expert-category-tabs::-webkit-scrollbar,
.market-category-tabs::-webkit-scrollbar {
  display: none;
}
.expert-category-tab,
.course-category-tab,
.expert-service-category-tab {
  border: 0;
  background: transparent;
  color: #6f737d;
  border-radius: 999px;
  padding: 12px 17px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: all .18s ease;
}
.expert-category-tab:hover,
.course-category-tab:hover,
.expert-service-category-tab:hover {
  color: var(--text);
  background: rgba(30,27,75,0.08);
}
.expert-category-tab.active,
.course-category-tab.active,
.expert-service-category-tab.active {
  background: var(--primary);
  color: #fff;
}
.expert-section-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 4px 0 12px;
}
.expert-section-head h3 {
  margin: 0;
  font-size: 18px;
  color: var(--text-primary);
}
.expert-section-head span {
  font-size: 12px;
  color: var(--text-muted);
}
.expert-service-item-section {
  margin-bottom: 22px;
}
.expert-service-item-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 10px;
  padding: 12px 14px;
  background: #f8fafd;
  border: 1px solid var(--border);
  border-radius: 10px;
}
.expert-service-item-head h4 {
  margin: 0;
  color: var(--text-primary);
  font-size: 15px;
}
.expert-service-item-head p {
  margin: 4px 0 0;
  color: var(--text-muted);
  font-size: 12px;
}
.expert-service-item-head span {
  color: #1967d2;
  background: #e8f0fe;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 12px;
  white-space: nowrap;
}
.expert-card,
.expert-request-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 1px 2px rgba(60, 64, 67, 0.08);
}
.expert-card {
  position: relative;
  overflow: hidden;
  border: 0;
  border-radius: 18px;
  min-height: 0;
  padding: 0 0 14px;
  display: flex;
  flex-direction: column;
  background: #fff;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(60, 64, 67, 0.08);
  min-width: 0;
  transition: transform .18s ease, box-shadow .18s ease;
}
.expert-card:focus {
  outline: 2px solid #1a73e8;
  outline-offset: 4px;
}
.expert-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(60, 64, 67, 0.12);
}
.expert-card-clickzone {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
.expert-card-cover {
  position: relative;
  height: clamp(190px, 18vw, 250px);
  flex: 0 0 clamp(190px, 18vw, 250px);
  margin: 0 0 12px;
  border-radius: 18px 18px 0 0;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(232, 240, 254, .95), rgba(252, 232, 230, .92)),
    #f8fafd;
}
.expert-card-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.expert-card-cover::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(32, 33, 36, 0) 48%, rgba(32, 33, 36, .52) 100%);
  pointer-events: none;
}
.expert-card-cover-overlay {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 10px;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.expert-card-cover-overlay span {
  min-width: 0;
  max-width: 70%;
  padding: 5px 9px;
  border: 1px solid rgba(255, 255, 255, .32);
  border-radius: 999px;
  background: rgba(32, 33, 36, .58);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  backdrop-filter: blur(8px);
}
.expert-card-cover-overlay span:last-child {
  flex-shrink: 0;
  max-width: 35%;
}
.expert-card-head,
.expert-request-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.expert-card-head {
  justify-content: flex-start;
  min-height: 36px;
  padding: 0 14px;
  min-width: 0;
}
.expert-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #e8f0fe;
  color: #1a73e8;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  overflow: hidden;
}
.expert-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.expert-card h3,
.expert-request-title {
  margin: 0;
  font-size: 14px;
  font-weight: 650;
  color: var(--text-primary);
}
.expert-card-titleblock {
  min-width: 0;
  flex: 1;
}
.expert-card-titleblock h3 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.expert-card-head p,
.expert-request-sub {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--text-muted);
}
.expert-category-badge {
  display: none;
}
.expert-card-rating {
  display: flex;
  align-items: center;
  gap: 1px;
  margin-top: 4px;
  font-size: 12px;
}
.expert-card-rating span {
  color: #dadce0;
}
.expert-card-rating span.on {
  color: #fbbc04;
}
.expert-card-rating b {
  margin-left: 5px;
  color: var(--text-muted);
  font-weight: 600;
}
.expert-request-sub {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.expert-meta,
.expert-tags,
.expert-request-detail {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 14px 0;
  min-width: 0;
}
.expert-meta:empty,
.expert-tags:empty {
  display: none;
}
.expert-meta span,
.expert-tags span {
  font-size: 11px;
  color: #1f2937;
  background: #eef2ff;
  border: 1px solid #dbe3ff;
  border-radius: 999px;
  padding: 4px 9px;
  font-weight: 700;
}
.expert-tags.dark span {
  background: #174ea6;
  border-color: #174ea6;
  color: #fff;
}
.expert-bio {
  min-height: 42px;
  margin: 10px 14px 0;
  font-size: 15px;
  line-height: 1.4;
  color: #202124;
  font-weight: 650;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.expert-detail-text {
  margin: 6px 14px 0;
  font-size: 12px;
  line-height: 1.55;
  color: var(--text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.expert-services {
  margin-top: 14px;
  border-top: 1px solid var(--border);
  padding-top: 10px;
}
.expert-card-footer {
  margin-top: auto;
  padding: 12px 14px 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(84px, 94px);
  align-items: center;
  gap: 10px;
  border-top: 0;
  min-width: 0;
}
.expert-card-price {
  min-width: 0;
}
.expert-card-price strong {
  display: block;
  color: #202124;
  font-size: 15px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.expert-card-price span {
  color: var(--text-muted);
  font-size: 12px;
}
.expert-service-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.expert-service-row:last-child {
  border-bottom: none;
}
.expert-service-row strong {
  font-size: 13px;
  color: var(--text-primary);
}
.expert-service-row p,
.expert-service-row small,
.expert-service-empty,
.expert-note-empty {
  margin: 3px 0 0;
  font-size: 12px;
  color: var(--text-muted);
}
.expert-card-cta {
  width: 100%;
  min-width: 0;
  border: 0;
  border-radius: 999px;
  margin-top: 0;
  padding: 8px 12px;
  color: #fff;
  background: var(--primary);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  height: 34px;
  white-space: nowrap;
}
.expert-card-cta:hover {
  background: var(--primary);
  filter: brightness(0.9);
}
.expert-card-cta.disabled {
  background: #dadce0;
  color: #5f6368;
  cursor: not-allowed;
}
.payment-confirm-box {
  border: 1px solid #d2e3fc;
  border-radius: 10px;
  background: #f8fafd;
  padding: 14px;
}
.payment-confirm-box h4 {
  margin: 0 0 8px;
  color: var(--text-primary);
  font-size: 16px;
}
.payment-confirm-box p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.7;
}
.payment-confirm-note {
  margin-top: 12px;
  border-radius: 8px;
  background: #fff8e1;
  color: #8a5a00;
  padding: 9px 10px;
  font-size: 12px;
}
.expert-booking-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
}
.expert-booking-section {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  padding: 18px;
}
.expert-booking-section h4 {
  margin: 0 0 12px;
  color: var(--text-primary);
  font-size: 15px;
  font-weight: 700;
}
.form-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 16px;
}
.expert-booking-form textarea {
  resize: vertical;
}
.payment-rank-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.payment-rank-row:last-child {
  border-bottom: none;
}
.payment-rank-row span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-primary);
  font-size: 13px;
}
.payment-rank-row strong {
  color: #188038;
  font-size: 13px;
}
.payment-rank-row small {
  color: var(--text-muted);
  font-size: 12px;
}
.expert-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
}
.expert-stats > div {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px;
}
.expert-stats strong {
  display: block;
  font-size: 22px;
  color: var(--text-primary);
}
.expert-stats span {
  font-size: 12px;
  color: var(--text-muted);
}
.expert-request-card + .expert-request-card {
  margin-top: 12px;
}
.expert-request-detail > div {
  min-width: 150px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.expert-request-detail strong {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 500;
}
.expert-request-detail span,
.expert-request-note,
.expert-request-admin-note {
  font-size: 13px;
  color: var(--text-secondary);
}
.expert-request-note,
.expert-request-admin-note {
  margin-top: 12px;
  background: var(--bg-secondary);
  border-radius: 6px;
  padding: 10px;
  line-height: 1.6;
}
.expert-request-admin-note {
  background: #fff8e1;
}
.expert-request-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
}

/* ===== 专家服务页 UI 统一 ===== */
.expert-page .expert-stats { gap: 12px; margin-bottom: 16px; }
.expert-page .expert-stats > div { padding: 12px 16px; border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.expert-page .expert-stats strong { font-size: 20px; }
.expert-page .expert-request-card { padding: 16px 18px; margin-bottom: 12px; border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.expert-page .expert-request-detail { margin: 14px 0 0; gap: 12px 28px; }
.expert-page .expert-request-detail > div { min-width: 110px; }
.expert-page .expert-request-note,
.expert-page .expert-request-admin-note { margin-top: 10px; padding: 8px 12px; background: var(--bg-secondary); border-radius: 8px; }
.expert-page .expert-request-actions { margin-top: 14px; }
.expert-page select:not(.status-select) { font-size: 13px; height: 32px; padding: 0 28px 0 12px; border: 1px solid var(--border); border-radius: 8px; background: #fff; color: var(--text-primary); cursor: pointer; }
.expert-note-list {
  margin-top: 12px;
}
.expert-note-item {
  padding: 8px 0;
  border-top: 1px solid var(--border);
  font-size: 13px;
  color: var(--text-secondary);
}
.expert-note-item small {
  display: block;
  margin-top: 4px;
  color: var(--text-muted);
  font-size: 11px;
}
.expert-detail-page {
  padding-bottom: 24px;
}
.expert-detail-hero {
  margin-top: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}
.expert-detail-cover {
  height: 220px;
  background: linear-gradient(135deg, #e8f0fe, #fef7e0);
}
.expert-detail-cover img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.expert-detail-profile {
  display: flex;
  gap: 16px;
  align-items: center;
  padding: 18px;
}
.expert-detail-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: #e8f0fe;
  color: #1a73e8;
  font-size: 24px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}
.expert-detail-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.expert-detail-profile h2 {
  margin: 0;
}
.expert-detail-copy {
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.8;
  white-space: pre-wrap;
}
.expert-detail-service {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 88px;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.expert-detail-service:last-child {
  border-bottom: none;
}
.expert-detail-service.selected {
  background: #f8fafd;
  margin: 0 -12px;
  padding: 12px;
  border-radius: 8px;
}
.expert-detail-service strong {
  color: var(--text-primary);
}
.expert-detail-service p,
.expert-detail-service small {
  display: block;
  margin: 4px 0 0;
  color: var(--text-muted);
  font-size: 12px;
}
.expert-rich-detail {
  display: grid;
  gap: 14px;
  margin-top: 12px;
}
.expert-rich-detail .expert-detail-copy {
  margin: 0;
}
.expert-rich-image {
  margin: 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  background: var(--bg-secondary);
}
.expert-rich-image img {
  width: 100%;
  display: block;
  max-height: 360px;
  object-fit: cover;
}
.expert-rich-image figcaption {
  padding: 9px 12px;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.5;
  background: var(--surface);
}
.admin-expert-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #e8f0fe;
  color: #1a73e8;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  overflow: hidden;
}
.admin-expert-avatar img,
.admin-expert-upload-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.admin-expert-editor-media {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 16px;
  margin-bottom: 16px;
}
.admin-expert-editor-media label {
  display: block;
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.admin-expert-upload-preview {
  width: 96px;
  height: 96px;
  border: 1px dashed var(--border);
  border-radius: 12px;
  background: var(--bg-secondary);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-bottom: 8px;
}
.admin-expert-upload-preview.wide {
  width: 100%;
  max-width: 360px;
  height: 120px;
}
.admin-rich-toolbar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 8px 0 10px;
}
.admin-rich-editor {
  display: grid;
  gap: 10px;
}
.admin-rich-block {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
  background: var(--surface);
}
.admin-rich-block-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.admin-rich-block-head strong {
  color: var(--text-primary);
  font-size: 13px;
}
.admin-rich-block-head > div {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.admin-rich-image-row {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}
.admin-rich-image-preview {
  height: auto;
  min-height: 118px;
  max-height: 360px;
  border: 1px dashed var(--border);
  border-radius: 10px;
  background: var(--bg-secondary);
  color: var(--text-muted);
  display: block;
  text-align: center;
  line-height: 118px;
  overflow-y: auto;
}
.admin-rich-image-preview img {
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
}
.admin-rich-image-fields {
  display: grid;
  gap: 8px;
}
.admin-rich-empty {
  border: 1px dashed var(--border);
  border-radius: 10px;
  color: var(--text-muted);
  background: var(--bg-secondary);
  padding: 16px;
  font-size: 13px;
  text-align: center;
}
.expert-catalog-board {
  display: grid;
  gap: 14px;
}
.expert-catalog-category {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  overflow: hidden;
}
.expert-catalog-category.is-disabled {
  opacity: .58;
}
.expert-catalog-category-head,
.expert-catalog-item-main {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}
.expert-catalog-category-head {
  padding: 14px;
  background: #f8fafd;
  border-bottom: 1px solid var(--border);
}
.expert-catalog-category-head h4,
.expert-catalog-item-main strong {
  margin: 0;
  color: var(--text-primary);
}
.expert-catalog-category-head p,
.expert-catalog-item-main p,
.expert-catalog-item-main small {
  margin: 4px 0 0;
  color: var(--text-muted);
  font-size: 12px;
}
.expert-catalog-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.expert-catalog-items {
  padding: 10px 14px 14px;
}
.expert-catalog-item {
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.expert-catalog-item:last-child {
  border-bottom: none;
}
.expert-assigned-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 10px;
}
.expert-assigned-entry {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  border: 1px solid #d2e3fc;
  border-radius: 8px;
  background: #f8fafd;
  padding: 10px 12px;
  cursor: pointer;
  transition: background .16s ease, border-color .16s ease;
}
.expert-assigned-entry:hover {
  background: #eef4ff;
  border-color: #8ab4f8;
}
.expert-assigned-entry-main {
  min-width: 0;
}
.expert-assigned-entry-main strong {
  display: block;
  color: var(--text-primary);
  font-size: 13px;
}
.expert-assigned-entry-main span,
.expert-assigned-entry-main small {
  display: block;
  margin-top: 3px;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.45;
}
.expert-assigned-entry-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
  flex-shrink: 0;
}
.expert-sort-controls {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.expert-sort-btn {
  width: 28px;
  height: 28px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fff;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
}
.expert-sort-btn:hover:not(:disabled) {
  border-color: #8ab4f8;
  color: #1967d2;
  background: #f8fafd;
}
.expert-sort-btn:disabled {
  opacity: .38;
  cursor: not-allowed;
}
.expert-service-edit-hint {
  margin-bottom: 14px;
  padding: 10px 12px;
  border: 1px solid #d2e3fc;
  border-radius: 8px;
  background: #f8fafd;
  color: var(--text-secondary);
  font-size: 13px;
}
.expert-assigned-empty {
  color: var(--text-muted);
  font-size: 12px;
}
.course-admin-row {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.course-admin-row.course-admin-row-one-to-one {
  display: block;
  padding: 0;
}
.course-admin-row.is-filter-hidden {
  display: none !important;
}
.course-admin-row:last-child {
  border-bottom: 0;
}
.course-admin-row.is-disabled {
  opacity: .58;
}
.course-admin-cover {
  width: 72px;
  height: 50px;
  border-radius: 8px;
  background: #eef4ff;
  overflow: hidden;
  display: grid;
  place-items: center;
  color: #1967d2;
  font-size: 12px;
  font-weight: 800;
}
.course-admin-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.course-admin-main {
  min-width: 0;
}
.course-admin-main strong {
  display: block;
  color: var(--text-primary);
  font-size: 14px;
}
.course-admin-main p,
.course-admin-main small {
  display: block;
  margin: 4px 0 0;
  color: var(--text-muted);
  font-size: 12px;
}

@media (max-width: 768px) {
  .expert-market-grid {
    grid-template-columns: 1fr;
  }
  .modal.expert-booking-modal {
    width: calc(100vw - 24px);
    max-height: 92vh;
  }
  .modal.expert-booking-modal .modal-body,
  .modal.expert-booking-modal .modal-footer {
    padding-left: 18px;
    padding-right: 18px;
  }
  .modal.expert-booking-modal .modal-footer.course-detail-footer {
    align-items: stretch;
    flex-direction: column;
  }
  .course-detail-footer-actions {
    width: 100%;
  }
  .course-detail-footer-actions .btn {
    flex: 1;
  }
  .expert-booking-form {
    min-width: 0;
  }
  .form-grid-2 {
    grid-template-columns: 1fr;
  }
  .expert-service-row,
  .expert-request-main,
  .expert-request-actions {
    align-items: stretch;
    flex-direction: column;
  }
  .expert-card-footer,
  .expert-detail-service,
  .course-class-card {
    grid-template-columns: 1fr;
  }
  .course-class-detail-grid {
    grid-template-columns: 1fr;
  }
  .admin-expert-editor-media {
    grid-template-columns: 1fr;
  }
  .admin-rich-image-row {
    grid-template-columns: 1fr;
  }
  .expert-catalog-category-head,
  .expert-catalog-item-main,
  .expert-assigned-entry,
  .course-admin-row,
  .expert-service-item-head {
    flex-direction: column;
  }
  .course-admin-row {
    display: flex;
    align-items: stretch;
  }
  .expert-assigned-list {
    grid-template-columns: 1fr;
  }
  .expert-assigned-entry-actions,
  .expert-catalog-actions {
    justify-content: flex-start;
  }
}

/* ===== Responsive Stability Pass: avoid overlap on narrow monitors ===== */
html,
body,
#app,
.layout,
.main-content,
.page-content,
.card,
.card-body,
.card-header,
.page-header {
  min-width: 0;
}

.page-header,
.card-header,
.stu-card-header,
.mytask-toolbar,
.mytask-list-header,
.expert-section-head,
.expert-catalog-category-head,
.expert-catalog-item-main,
.expert-service-item-head {
  flex-wrap: wrap;
}

.page-header > *,
.card-header > *,
.stu-card-header > *,
.mytask-toolbar > *,
.expert-section-head > *,
.expert-catalog-category-head > *,
.expert-catalog-item-main > *,
.expert-service-item-head > * {
  min-width: 0;
}

.page-header h2,
.card-header h3,
.stu-card-header h3,
.mytask-page-title,
.expert-section-head h3,
.course-admin-main strong,
.expert-catalog-category-head h4,
.expert-catalog-item-main strong {
  overflow-wrap: anywhere;
}

.table-wrapper {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.table-wrapper table,
.data-table {
  min-width: 720px;
}

td,
th,
.tag,
.btn,
.status-select,
.sort-select,
.course-card-meta span,
.course-card-tags span,
.expert-meta span,
.expert-tags span,
.mytask-source-chip {
  max-width: 100%;
}

td,
.expert-request-note,
.expert-request-admin-note,
.expert-detail-copy,
.course-card-desc,
.task-card .task-card-desc,
.mytask-card,
.mtk-title,
.mtk-desc {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.btn,
.btn-sm,
.expert-card-cta,
.market-mode-tab,
.expert-category-tab,
.course-category-tab,
.expert-service-category-tab {
  min-width: 0;
}

.expert-catalog-actions,
.expert-assigned-entry-actions,
.task-card .task-card-actions,
.task-card .task-card-footer,
.mtk-actions,
.mytask-view-toggle,
.course-detail-footer-actions,
.modal-footer {
  flex-wrap: wrap;
}

@media (max-width: 1280px) {
  .page-content {
    padding: 24px;
  }

  .stats-grid,
  .app-stats-row,
  .stu-stats,
  .mytask-summary-grid {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
  }

  .mytask-filter-grid {
    grid-template-columns: repeat(2, minmax(160px, 1fr));
  }

  .mytask-sections,
  .admin-ctask-grid {
    grid-template-columns: 1fr;
  }

  .course-admin-row {
    grid-template-columns: 64px minmax(0, 1fr);
  }

  .course-admin-row .expert-catalog-actions,
  .course-admin-row > :last-child {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }
}

@media (max-width: 1100px) {
  .page-content {
    padding: 20px;
  }

  .card-header,
  .page-header,
  .stu-card-header,
  .mytask-list-header {
    align-items: flex-start;
    gap: 10px;
  }

  .card-header > .btn,
  .card-header > div,
  .page-header > .btn,
  .page-header > div,
  .stu-card-header > div {
    max-width: 100%;
  }

  .expert-request-main,
  .expert-service-row,
  .expert-assigned-entry,
  .expert-catalog-category-head,
  .expert-catalog-item-main,
  .expert-service-item-head {
    align-items: stretch;
    flex-direction: column;
  }

  .expert-catalog-actions,
  .expert-assigned-entry-actions,
  .expert-request-actions {
    justify-content: flex-start;
  }

  .expert-request-detail {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }
}

@media (max-width: 900px) {
  .page-content {
    padding: 16px;
  }

  .card-body {
    padding: 16px;
  }

  .modal {
    width: calc(100vw - 24px);
    max-width: calc(100vw - 24px);
  }

  .modal-body,
  .modal-footer {
    padding-left: 16px;
    padding-right: 16px;
  }

  .form-grid,
  .form-grid-2,
  .task-detail-grid,
  .course-class-detail-grid,
  .payment-rank-row {
    grid-template-columns: 1fr !important;
  }

  .course-card-footer,
  .expert-card-footer,
  .expert-detail-service,
  .course-class-card {
    grid-template-columns: 1fr;
  }

  .course-card-footer .expert-card-cta,
  .expert-card-footer .expert-card-cta,
  .course-detail-footer-actions,
  .course-detail-footer-actions .btn {
    width: 100%;
  }

  .calendar-grid {
    min-width: 680px;
  }
}

@media (max-width: 640px) {
  .table-wrapper table,
  .data-table {
    min-width: 640px;
  }

  .page-header,
  .card-header,
  .stu-card-header,
  .mytask-toolbar,
  .mytask-list-header,
  .modal-footer {
    flex-direction: column;
    align-items: stretch;
  }

  .card-header .btn,
  .page-header .btn,
  .stu-card-header .btn,
  .modal-footer .btn,
  .task-detail-actions .btn {
    width: 100%;
  }

  .market-mode-tabs {
    display: flex;
    width: 100%;
    overflow-x: auto;
  }

  .market-mode-tab {
    flex: 1 0 auto;
  }
}


/* 顶部栏 + 侧栏折叠 */
.app-topbar{flex:none;height:60px;display:flex;align-items:center;gap:12px;padding:0 20px;border-bottom:1px solid var(--border);background:var(--surface,#fff);}
.app-topbar-toggle{background:none;border:none;cursor:pointer;color:var(--text-secondary);padding:6px;border-radius:8px;display:flex;align-items:center;line-height:0;}
.app-topbar-toggle:hover{background:rgba(0,0,0,.06);}
.app-topbar-title{font-size:16px;font-weight:600;color:var(--text-primary,#1f2933);}
.layout.sidebar-collapsed .sidebar{display:none !important;}


/* 聊天页撑满 */
.imchat-root{height:100%;}
.page-content:has(.imchat-root){padding:0;}


/* 计划页 标签切换 */
.plan-tabs{display:flex;gap:4px;border-bottom:1px solid var(--border);margin-bottom:16px;}
.plan-tab{padding:10px 18px;border:none;background:none;cursor:pointer;font-size:14px;font-weight:600;color:var(--text-secondary);border-bottom:2px solid transparent;margin-bottom:-1px;}
.plan-tab:hover{color:var(--primary);}
.plan-tab.active{color:var(--primary);border-bottom-color:var(--primary);}

/* ===== 一级分组可折叠 ===== */
.student-nav-group-title{cursor:pointer;display:flex;align-items:center;user-select:none;}
.nav-group-label{cursor:pointer;display:flex;align-items:center;user-select:none;}
.nav-grp-chevron{margin-left:auto;display:inline-flex;align-items:center;justify-content:center;transition:transform .18s ease;opacity:.45;flex-shrink:0;}
.student-nav-group-title:hover .nav-grp-chevron,.nav-group-label:hover .nav-grp-chevron{opacity:.8;}
.student-nav-group.collapsed .nav-grp-chevron,.nav-group-label.collapsed .nav-grp-chevron{transform:rotate(-90deg);}
.student-nav-group.collapsed .student-sub-nav{display:none;}
.nav-grp-hidden{display:none !important;}
.sidebar.collapsed .nav-grp-chevron{display:none;}

/* 申请状态默认色 */
.tag-default{background:#eceff3;color:#5f6b7a;}

/* 申请状态推进控件 */
.appst{display:inline-flex;flex-direction:column;gap:6px;align-items:flex-start;min-width:120px;}
.appst-row{display:flex;flex-wrap:wrap;gap:6px;}
.appst-btn{font-size:11.5px;line-height:1;padding:5px 11px;border-radius:8px;border:1px solid transparent;cursor:pointer;font-weight:600;white-space:nowrap;transition:all .15s ease;}
.appst-next{background:#1F3CFF;color:#fff;box-shadow:0 1px 3px rgba(16,24,40,.28);}
.appst-next:hover{background:#142CCB;box-shadow:0 2px 6px rgba(16,24,40,.36);}
.appst-prev{background:#fff;color:#5f6b7a;border-color:#d4d9e0;}
.appst-prev:hover{background:#f4f6f9;border-color:#b9c0c9;}
.appst-exit{background:#fff;color:#9aa3ad;border-color:#e3e6eb;font-weight:500;padding:4px 10px;font-size:11px;}
.appst-exit:hover{background:#FEF2F2;color:#DC2626;border-color:#FCA5A5;}

/* ===== 申请项目 ProjectUI ===== */
.proj-wrap{padding:4px;}
.proj-head{margin-bottom:14px;}
.proj-head h3{margin:0 0 2px;font-size:18px;}
.proj-sub{font-size:12px;color:var(--text-secondary);}
.proj-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;}
.proj-card{background:var(--surface,#fff);border:1px solid var(--border-light,#e8ebf0);border-radius:12px;padding:16px;cursor:pointer;transition:all .15s;box-shadow:0 1px 2px rgba(0,0,0,.03);}
.proj-card:hover{border-color:#c3c9ff;box-shadow:0 4px 12px rgba(16,24,40,.1);transform:translateY(-1px);}
.proj-card-top{display:flex;align-items:center;gap:8px;margin-bottom:10px;}
.proj-card-icon{font-size:20px;}
.proj-card-name{font-weight:600;font-size:15px;color:var(--text-primary,#1f2933);}
.proj-card-meta{font-size:12px;color:var(--text-secondary);}
.proj-card-ms{margin-top:8px;font-size:11.5px;color:#1F3CFF;background:#EEF3FF;border-radius:6px;padding:3px 8px;display:inline-block;}
.proj-loading,.proj-empty{padding:18px;text-align:center;color:var(--text-secondary);font-size:13px;}
.proj-detail{padding:4px;}
.proj-dhead{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px;}
.proj-dhead h3{margin:0;font-size:18px;}
.proj-back{color:var(--text-secondary);font-size:13px;text-decoration:none;}
.proj-back:hover{color:#1F3CFF;}
.proj-ms-badge{font-size:12px;color:#1F3CFF;background:#EEF3FF;border-radius:6px;padding:3px 10px;}
.proj-sec{background:var(--surface,#fff);border:1px solid var(--border-light,#e8ebf0);border-radius:12px;padding:14px 16px;margin-bottom:14px;}
.proj-sec-h{display:flex;justify-content:space-between;align-items:center;font-weight:600;font-size:14px;margin-bottom:10px;}
.proj-btn{background:#1F3CFF;color:#fff;border:none;border-radius:7px;padding:6px 12px;font-size:12.5px;cursor:pointer;font-weight:500;display:inline-block;}
.proj-btn:hover{background:#142CCB;}
.proj-file,.proj-task{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:7px 0;border-bottom:1px solid var(--border-light,#f0f2f5);font-size:13px;}
.proj-file:last-child,.proj-task:last-child{border-bottom:none;}
.proj-file-act a{color:#1F3CFF;text-decoration:none;font-size:12px;}
.proj-upload-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.proj-upload-actions select,.proj-file-category{height:32px;border:1px solid var(--border-light,#d8dce2);border-radius:7px;background:#fff;padding:0 9px;color:var(--text-primary);}
.proj-dropzone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:92px;margin:4px 0 12px;border:1px dashed #B8C4FF;border-radius:8px;background:#F8FAFF;color:#4B5A70;cursor:pointer;transition:.15s;}
.proj-dropzone span{font-size:12px;color:var(--text-secondary);}.proj-dropzone.is-dragging{border-color:#1F3CFF;background:#EEF3FF;color:#1F3CFF;}
.proj-upload-status{min-height:18px;font-size:12px;color:#1F3CFF;}.proj-file-group{border-top:1px solid var(--border-light,#eef1f5);padding-top:10px;margin-top:10px;}
.proj-file-group-head{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:600;color:#445066;}.proj-file-group-head b{font-size:11px;min-width:20px;text-align:center;border-radius:10px;background:#EEF3FF;color:#1F3CFF;}
.proj-file-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.proj-file-category{flex:0 0 118px;height:30px;font-size:12px;}.proj-file-act{white-space:nowrap;}
@media(max-width:720px){.proj-sec-h,.proj-file{align-items:flex-start;flex-direction:column}.proj-file-category{width:100%;flex-basis:auto}.proj-file-act{white-space:normal}.proj-upload-actions{width:100%}}
.followup-dropzone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:84px;border:1px dashed #B8C4FF;border-radius:8px;background:#F8FAFF;color:#42516A;cursor:pointer;}.followup-dropzone span{font-size:12px;color:var(--text-secondary)}.followup-dropzone.is-dragging{border-color:#1F3CFF;background:#EEF3FF;color:#1F3CFF}
.followup-pending-files,.followup-attachment-list{display:flex;gap:7px;flex-wrap:wrap;margin-top:8px}.followup-pending-files span,.followup-attachment{display:inline-flex;align-items:center;gap:5px;max-width:100%;padding:5px 9px;border:1px solid #DCE3FF;border-radius:6px;background:#F7F9FF;color:#2843B8;font-size:12px}.followup-pending-files button{border:0;background:transparent;color:#6B7280;cursor:pointer}
.followup-existing-files{display:grid;gap:6px;margin-bottom:9px}.followup-existing-file{display:flex;align-items:center;gap:7px;padding:7px 9px;background:#F8FAFC;border-radius:6px}.followup-existing-file span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.followup-file-count{margin-top:4px;color:#1F3CFF;font-size:11px}
.proj-task-st{font-size:11px;color:var(--text-secondary);background:#f1f3f6;border-radius:5px;padding:2px 8px;white-space:nowrap;}
.proj-taskform{display:flex;gap:8px;margin-bottom:10px;flex-wrap:wrap;}
.proj-taskform input{flex:1;min-width:140px;padding:6px 10px;border:1px solid var(--border-light,#d8dce2);border-radius:7px;font-size:13px;}
.proj-taskform select{padding:6px 8px;border:1px solid var(--border-light,#d8dce2);border-radius:7px;font-size:13px;}
.proj-cmt{padding:8px 0;border-bottom:1px solid var(--border-light,#f3f4f7);}
.proj-cmt-h{display:flex;gap:8px;align-items:baseline;}
.proj-cmt-h b{font-size:13px;}
.proj-cmt-t{font-size:11px;color:var(--text-muted,#aaa);}
.proj-cmt-b{font-size:13px;color:var(--text-primary,#333);margin:2px 0;line-height:1.6;}
.proj-cmt-reply{font-size:11.5px;color:#1F3CFF;text-decoration:none;}
.proj-cmt-replies{margin-left:18px;border-left:2px solid #eef0f4;padding-left:12px;margin-top:4px;}
.proj-cmtbar{margin-top:12px;}
.proj-reply-hint{font-size:12px;color:var(--text-secondary);margin-bottom:6px;}
.proj-reply-hint a{color:#DC2626;text-decoration:none;margin-left:6px;}
.proj-cmtinput{display:flex;gap:8px;}
.proj-cmtinput input{flex:1;padding:8px 12px;border:1px solid var(--border-light,#d8dce2);border-radius:8px;font-size:13px;}

/* 申请项目卡片 - 专业版(覆盖) */
.proj-grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px;}
.proj-card{position:relative;background:#fff;border:1px solid #ebedf2;border-radius:16px;padding:20px 20px 16px;cursor:pointer;transition:all .2s ease;box-shadow:0 1px 3px rgba(16,24,40,.05);overflow:hidden;}
.proj-card::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#6366F1,#8B5CF6);}
.proj-card.proj-card-general::before{background:linear-gradient(90deg,#0EA5E9,#06B6D4);}
.proj-card:hover{box-shadow:0 10px 28px rgba(16,24,40,.14);transform:translateY(-3px);border-color:#d8dbff;}
.proj-card-icon-wrap{width:50px;height:50px;border-radius:13px;display:flex;align-items:center;justify-content:center;font-size:25px;background:linear-gradient(135deg,#EEF3FF,#F5F3FF);margin-bottom:14px;box-shadow:inset 0 0 0 1px rgba(99,102,241,.08);}
.proj-card-general .proj-card-icon-wrap{background:linear-gradient(135deg,#E0F2FE,#ECFEFF);}
.proj-card-name{font-weight:700;font-size:17px;color:#1f2933;margin-bottom:10px;letter-spacing:.2px;line-height:1.3;}
.proj-card-status{margin-bottom:10px;}
.proj-card-status .tag{font-size:12px;padding:3px 10px;}
.proj-card .proj-card-ms{font-size:12px;color:#6b7280;background:#f7f8fa;border-radius:8px;padding:6px 11px;display:inline-block;margin-bottom:14px;margin-top:0;}
.proj-card-stats{display:flex;gap:16px;padding-top:13px;border-top:1px solid #f0f2f5;font-size:12.5px;color:#8a93a0;}
.proj-card-stats span{display:inline-flex;align-items:center;gap:4px;white-space:nowrap;}
.proj-head h3{font-size:20px;font-weight:700;}

/* ===== 课程卡片固定高度、信息截断与底部对齐 ===== */
.course-market-grid { align-items: start; }
.course-market-card {
  height: 500px;
  min-height: 500px;
  max-height: 500px;
  overflow: hidden;
}
.course-card-cover {
  height: 220px;
  min-height: 220px;
  max-height: 220px;
  aspect-ratio: auto;
  flex: 0 0 220px;
}
.course-card-cover img,
.course-card-cover-fallback {
  width: 100%;
  height: 100%;
}
.course-card-body { flex: 1 1 auto; min-height: 0; overflow: hidden; gap: 7px; }
.course-card-kicker {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.course-card-body h3 {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 16px;
}
.course-card-brief {
  margin: 0; color: var(--text-secondary); font-size: 13px; line-height: 1.55;
  min-height: calc(1.55em * 2);
  max-height: calc(1.55em * 2);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.course-card-meta { display: flex; flex-wrap: wrap; gap: 6px; overflow: hidden; max-height: 26px; }
.course-card-tags { display: flex; flex-wrap: nowrap; gap: 6px; overflow: hidden; max-height: 26px; margin-top: 2px; }
.course-card-tags span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.course-card-tags span:nth-child(n+4) { display: none; }
.course-card-footer {
  flex: 0 0 72px;
  min-height: 72px;
  max-height: 72px;
  box-sizing: border-box;
  border-top: 1px solid var(--border, #e4e8ef);
}
.course-card-price { flex: 1 1 auto; min-width: 0; }
.course-card-price-value {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.course-card-footer .expert-card-cta { width: auto; flex: 0 0 auto; }

/* 申请项目 任务优先级/状态 */
.proj-task-ic { font-size: 14px; opacity: .55; flex-shrink: 0; }
.proj-task-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.proj-task-title.proj-task-done { text-decoration: line-through; color: var(--text-muted, #aaa); }
.proj-pri { font-size: 11px; padding: 1px 8px; border-radius: 5px; white-space: nowrap; flex-shrink: 0; font-weight: 500; }
.proj-pri-high { background: #FEECEC; color: #DC2626; }
.proj-pri-normal { background: #EEF3FF; color: #1F3CFF; }
.proj-pri-low { background: #F1F3F6; color: #8a93a0; }
.proj-task-status { font-size: 12px; padding: 3px 7px; border-radius: 6px; border: 1px solid #d8dce2; cursor: pointer; flex-shrink: 0; }
.proj-task-status.st-done { background: #E6F7EE; color: #059669; border-color: #A7E8C8; }
.proj-task-status.st-todo { background: #f4f6f9; color: #5f6b7a; }

.proj-task-assignee { font-size: 11.5px; color: #1F3CFF; white-space: nowrap; flex-shrink: 0; }

.stu-tl-item-project { font-size: 11px; color: #1F3CFF; white-space: nowrap; }

.proj-task-act { font-size: 12px; white-space: nowrap; flex-shrink: 0; }
.proj-task-act a { color: #1F3CFF; text-decoration: none; }
.proj-task-act a:hover { text-decoration: underline; }

/* ===== 侧栏滑杆优化(三端) ===== */
.sidebar, .sidebar-nav, .sidebar-students-list, .student-sidebar-menu {
  scrollbar-width: thin;
  scrollbar-color: rgba(120,130,150,0.28) transparent;
}
.sidebar::-webkit-scrollbar,
.sidebar-nav::-webkit-scrollbar,
.sidebar-students-list::-webkit-scrollbar,
.student-sidebar-menu::-webkit-scrollbar { width: 6px; }
.sidebar::-webkit-scrollbar-track,
.sidebar-nav::-webkit-scrollbar-track,
.sidebar-students-list::-webkit-scrollbar-track,
.student-sidebar-menu::-webkit-scrollbar-track { background: transparent; }
.sidebar::-webkit-scrollbar-thumb,
.sidebar-nav::-webkit-scrollbar-thumb,
.sidebar-students-list::-webkit-scrollbar-thumb,
.student-sidebar-menu::-webkit-scrollbar-thumb {
  background: rgba(120,130,150,0.25);
  border-radius: 8px;
  border: 1px solid transparent;
  background-clip: content-box;
  transition: background .2s;
}
.sidebar:hover::-webkit-scrollbar-thumb,
.sidebar-nav:hover::-webkit-scrollbar-thumb,
.sidebar-students-list:hover::-webkit-scrollbar-thumb,
.student-sidebar-menu:hover::-webkit-scrollbar-thumb { background: rgba(90,100,120,0.45); }

/* ==== 升学信息表单 ==== */
.ai-form { font-size: 13px; }
.ai-part { margin-bottom: 22px; }
.ai-part-title { font-size: 15px; font-weight: 600; color: var(--text); margin: 0 0 12px; padding-bottom: 6px; border-bottom: 2px solid var(--primary); }
.ai-block { margin-bottom: 16px; }
.ai-block-title { font-size: 13px; font-weight: 600; color: var(--text-secondary); margin-bottom: 8px; }
.ai-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px 14px; }
.ai-cell { display: flex; flex-direction: column; gap: 4px; }
.ai-cell.ai-full { grid-column: 1 / -1; }
.ai-lbl { font-size: 12px; color: var(--text-muted); }
.ai-inp { width: 100%; padding: 6px 8px; border: 1px solid var(--border); border-radius: 6px; font-size: 13px; background: var(--surface); color: var(--text); box-sizing: border-box; }
.ai-inp:focus { outline: none; border-color: var(--primary); }
.ai-ta { resize: vertical; font-family: inherit; }
.ai-ro { padding: 6px 8px; min-height: 20px; color: var(--text); }
.ai-empty { color: var(--text-muted); }
.ai-tablewrap { overflow-x: auto; }
.ai-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.ai-table th, .ai-table td { border: 1px solid var(--border); padding: 5px 6px; text-align: left; vertical-align: top; }
.ai-table th { background: rgba(0,0,0,0.03); font-weight: 600; color: var(--text-secondary); white-space: nowrap; }
.ai-table .ai-inp { border: none; padding: 3px 4px; background: transparent; }
.ai-idx { width: 36px; color: var(--text-muted); white-space: nowrap; }
.ai-rowhead { font-weight: 600; color: var(--text-secondary); background: rgba(0,0,0,0.03); white-space: nowrap; }
.ai-note { font-size: 12px; color: var(--text-muted); background: rgba(0,0,0,0.03); padding: 8px 10px; border-radius: 6px; margin-bottom: 10px; }

/* ==== 文件预览弹窗 ==== */
.pv-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 3000; display: flex; align-items: center; justify-content: center; padding: 24px; }
.pv-box { background: var(--surface, #fff); border-radius: 12px; width: min(1000px, 96vw); height: min(88vh, 900px); display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,0.4); }
.pv-head { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.pv-title { flex: 1; font-size: 14px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv-actions { display: flex; align-items: center; gap: 8px; }
.pv-dlbtn { padding: 4px 12px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--text); font-size: 13px; cursor: pointer; }
.pv-close { border: none; background: none; font-size: 16px; color: var(--text-muted); cursor: pointer; line-height: 1; padding: 4px 8px; }
.pv-body { flex: 1; overflow: auto; background: #525659; position: relative; }
.pv-loading, .pv-unsupported { color: #fff; text-align: center; padding: 60px 20px; font-size: 14px; line-height: 1.7; }
.pv-frame { width: 100%; height: 100%; border: none; }
.pv-img { display: block; max-width: 100%; margin: 0 auto; }
.pv-doc { background: #fff; padding: 20px; min-height: 100%; }
.pv-xlsx { background: #fff; padding: 12px; overflow: auto; }
.pv-xlsx table { border-collapse: collapse; font-size: 13px; }
.pv-xlsx td, .pv-xlsx th { border: 1px solid #ccc; padding: 3px 6px; }
.pv-sheet-tabs { display: flex; gap: 4px; padding: 8px; background: #f5f5f5; overflow-x: auto; }
.pv-sheet-tab { padding: 4px 12px; border: 1px solid #ccc; border-radius: 4px; background: #fff; cursor: pointer; font-size: 12px; white-space: nowrap; }
.pv-sheet-tab.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.pv-file-link { cursor: pointer; color: var(--primary); }
.pv-file-link:hover { text-decoration: underline; }


/* ===== 已报名课程 (my-courses) + 集市报名角标 ===== */
.my-courses-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;}
.mc-card{background:#fff;border:1px solid var(--border,#E8EAF2);border-radius:14px;overflow:hidden;cursor:pointer;display:flex;flex-direction:column;transition:box-shadow .15s,transform .15s;}
.mc-card:hover{box-shadow:0 6px 20px rgba(0,0,0,.08);transform:translateY(-2px);}
.mc-cover{position:relative;height:120px;background:#EEF3FF;overflow:hidden;}
.mc-cover img{width:100%;height:100%;object-fit:cover;display:block;}
.mc-cover-fallback{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:40px;font-weight:700;color:#A9B4D0;background:linear-gradient(135deg,#EEF3FF,#D9E0FF);}
.mc-pay-badge{position:absolute;top:10px;right:10px;font-size:11px;font-weight:600;padding:3px 9px;border-radius:10px;color:#fff;line-height:1.4;}
.mc-pay-badge.pay-paid{background:#16A34A;}
.mc-pay-badge.pay-pending{background:#F59E0B;}
.mc-body{padding:12px 14px 6px;flex:1;}
.mc-kicker{font-size:11px;color:#1F3CFF;margin-bottom:4px;}
.mc-body h3{font-size:15px;color:#1f2933;margin:0 0 6px;line-height:1.4;}
.mc-class,.mc-time{font-size:12.5px;color:var(--text-secondary,#6B7280);margin:2px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mc-foot{display:flex;justify-content:space-between;align-items:center;padding:8px 14px 12px;border-top:1px solid #F1F2F7;}
.mc-amount{font-size:15px;font-weight:700;color:#1f2933;}
.mc-view{font-size:12.5px;color:#1F3CFF;}
.mc-detail .mc-info-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:14px 0;}
.mc-info-block{background:#F8F9FC;border-radius:12px;padding:12px 14px;}
.mc-info-block h4{font-size:13px;color:#1f2933;margin:0 0 8px;}
.mc-kv{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;padding:3px 0;}
.mc-kv span{color:var(--text-secondary,#6B7280);flex-shrink:0;}
.mc-kv b{color:#1f2933;font-weight:600;text-align:right;word-break:break-all;}
.course-card-cover{position:relative;}
.course-enrolled-badge{position:absolute;top:10px;left:10px;font-size:11px;font-weight:600;padding:3px 9px;border-radius:10px;color:#fff;z-index:2;line-height:1.4;}
.course-enrolled-badge.paid{background:#16A34A;}
.course-enrolled-badge.pending{background:#F59E0B;}
@media(max-width:640px){.mc-detail .mc-info-grid{grid-template-columns:1fr;}}

/* ===== 我的学生 侧板 头部（搜索 + 分组 + 责任人）优化 ===== */
.sidebar-filter-box{padding:8px 12px 10px;display:flex;flex-direction:column;gap:8px;}
.sidebar-search-wrap{position:relative;}
.sidebar-search-ic{position:absolute;left:10px;top:50%;transform:translateY(-50%);width:15px;height:15px;color:#98A2B3;pointer-events:none;}
.sidebar-search-input{width:100%;height:34px;padding:0 12px 0 32px;font-size:13px;border:1px solid var(--border);border-radius:8px;background:#F5F7FB;color:var(--text);outline:none;box-sizing:border-box;transition:border-color .2s,background .2s;}
.sidebar-search-input::placeholder{color:#98A2B3;}
.sidebar-search-input:focus{border-color:var(--primary);background:#fff;}
.sidebar-group-select{width:100%;height:34px;padding:0 10px;font-size:12.5px;border:1px solid var(--border);border-radius:8px;background:#F5F7FB;color:var(--text-secondary);font-weight:500;outline:none;cursor:pointer;transition:border-color .2s;}
.sidebar-group-select:focus{border-color:var(--primary);}
.sidebar-group-select option{color:#2D3B4E;}
.sidebar-resp-label{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text-secondary);cursor:pointer;user-select:none;padding:1px 2px;}
.sidebar-resp-label input{width:14px;height:14px;cursor:pointer;accent-color:#1a73e8;flex-shrink:0;}
.sidebar-empty{padding:16px;color:var(--text-muted);font-size:13px;text-align:center;}

/* OceanV3 p3b — 选校分组头去填充色块：保留细语义左线，去掉红/蓝/绿底噪点 */
.card-header[style*="#fef2f2"],
.card-header[style*="#eff6ff"],
.card-header[style*="#f0fdf4"] { background: #FFFFFF !important; }
.card[style*="border-left:4px solid #ef4444"],
.card[style*="border-left:4px solid #3b82f6"],
.card[style*="border-left:4px solid #22c55e"] { border-left-width: 3px !important; }
/* 批次头(未分批次/各批次)：去蓝底填充 -> 素净小标题+细左线 */
div[style*="background:#eff6ff"][style*="border-left:4px solid #1a73e8"] {
  background: transparent !important;
  border-left: 3px solid #1F3CFF !important;
  border-radius: 0 !important;
  padding: 2px 0 2px 12px !important;
  margin-bottom: 14px !important;
}

/* OceanV3 p3c — 申请状态推进单元：主次分层，去拥挤 */
.appst{display:inline-flex;flex-direction:column;gap:7px;align-items:flex-start;min-width:128px;}
.appst-primary{display:flex;}
.appst-more{display:flex;flex-wrap:wrap;gap:2px;align-items:center;}
.appst-btn{font-size:12px;line-height:1;padding:7px 12px;border-radius:8px;border:1px solid transparent;cursor:pointer;font-weight:600;white-space:nowrap;transition:all .15s ease;}
.appst-next{background:#1F3CFF;color:#fff;box-shadow:0 1px 2px rgba(31,60,255,.20);}
.appst-next:hover{background:#142CCB;box-shadow:0 2px 6px rgba(31,60,255,.28);}
.appst-restore{background:#fff;color:#475467;border-color:#D0D5DD;}
.appst-restore:hover{background:#F5F7FB;border-color:#B9C0C9;}
/* 次级/终止 -> 无边框文字动作，弱化不抢眼 */
.appst-link{background:transparent;border:none;padding:3px 7px;border-radius:6px;font-size:12px;font-weight:500;line-height:1;cursor:pointer;white-space:nowrap;transition:all .12s ease;}
.appst-link.appst-prev{color:#8A94A3;}
.appst-link.appst-prev:hover{color:#344054;background:#F2F4F8;}
.appst-link.appst-exit{color:#B0B7C0;}
.appst-link.appst-exit:hover{color:#DC2626;background:#FEF2F2;}

/* OceanV3 p3d — 申请材料卡片：去彩色顶栏/去紫、emoji→SVG、meta 分隔点 */
.proj-card::before{display:none !important;}
.proj-card .proj-card-icon-wrap,
.proj-card-general .proj-card-icon-wrap{background:#EEF3FF !important;color:#1F3CFF;box-shadow:inset 0 0 0 1px rgba(31,60,255,.10);}
.proj-card-icon-wrap svg{display:block;}
.proj-card:hover{border-color:#C9D2FF !important;}
.proj-task-ic{display:none !important;}
.proj-card-stats{gap:0 !important;}
.proj-card-stats span+span::before{content:'·';margin:0 10px;color:#cbd2dc;}

/* ============ OceanV3 · Stripe scoped layer (.ocv3 = 申请面板) ============ */
.ocv3{ --nv:#0A2540; --sl:#425466; --mu:#697386; --fa:#8792A2; --bd:#E3E8EE; --bds:#D5DBE1; --br:#1F3CFF; --brh:#142CCB; --br100:#EEF3FF; --sf2:#FBFCFD; color:var(--sl); }
.ocv3 h3, .ocv3 h4, .ocv3 strong{ color:var(--nv); }

/* cards -> Stripe surface */
.ocv3 .card{ border:1px solid var(--bd) !important; border-left:1px solid var(--bd) !important; border-radius:8px !important; box-shadow:0 1px 1px rgba(10,37,64,.04),0 3px 6px rgba(10,37,64,.05) !important; overflow:visible !important; margin-bottom:16px !important; }
.ocv3 .card-header{ background:#fff !important; border-bottom:1px solid var(--bd) !important; padding:14px 18px !important; }
.ocv3 .card-header h3{ font-size:14.5px; font-weight:600; letter-spacing:-.1px; }
.ocv3 .card-body{ overflow:visible !important; padding:0 !important; }
.ocv3 .card-body > table{ margin:0; }

/* metric cards */
.ocv3 .stats-grid{ gap:14px !important; padding:16px 18px; }
.ocv3 .stat-card{ background:#fff; border:1px solid var(--bd); border-radius:8px; padding:15px 16px; box-shadow:0 1px 1px rgba(10,37,64,.04),0 3px 6px rgba(10,37,64,.04); }
.ocv3 .stat-value{ font-size:28px; font-weight:600; letter-spacing:-.5px; line-height:1; font-variant-numeric:tabular-nums; }
.ocv3 .stat-label{ font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--fa); margin-top:8px; }

/* table -> Stripe */
.ocv3 table.app-fixed{ border-collapse:collapse; width:100%; font-size:13.5px; }
.ocv3 .app-fixed thead th{ background:var(--sf2); border-bottom:1px solid var(--bd); color:var(--fa); font-size:11px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; padding:10px 12px; text-align:left; }
.ocv3 .app-fixed tbody td{ padding:13px 12px; border-bottom:1px solid var(--bd); color:var(--sl); vertical-align:middle; }
.ocv3 .app-fixed tbody tr:last-child td{ border-bottom:none; }
.ocv3 .app-fixed tbody tr:hover{ background:var(--sf2); }
.ocv3 .app-fixed strong{ font-weight:600; }

/* pills */
.ocv3 .tag{ height:22px; padding:0 9px; border-radius:11px; font-size:12px; font-weight:600; display:inline-flex; align-items:center; line-height:1; }
.ocv3 .tag-primary{ background:#E0E6FF; color:#142CCB; }
.ocv3 .tag-info{ background:#D7ECFF; color:#0B5FA5; }
.ocv3 .tag-success{ background:#CBF4C9; color:#0E6245; }
.ocv3 .tag-warning{ background:#F8E5B9; color:#983B00; }
.ocv3 .tag-danger{ background:#FDE2E4; color:#B3093C; }
.ocv3 .tag-default{ background:#E7ECF1; color:#4F5B67; }

/* buttons -> Stripe */
.ocv3 .btn-primary{ background:var(--br); background-image:linear-gradient(rgba(255,255,255,.10),rgba(255,255,255,0)); color:#fff; border:none; border-radius:6px; font-weight:500; box-shadow:0 1px 1px rgba(10,37,64,.18),0 1px 2px rgba(10,37,64,.12); }
.ocv3 .btn-primary:hover{ background:var(--brh); }
.ocv3 .btn-outline{ background:#fff; color:var(--nv); border:none !important; box-shadow:0 0 0 1px var(--bds),0 1px 1px rgba(10,37,64,.04),0 2px 4px rgba(10,37,64,.06); border-radius:6px; }
.ocv3 .btn-outline:hover{ background:var(--sf2); }

/* status compact cell */
.ocv3 .appst-compact{ display:inline-flex; flex-direction:column; gap:7px; align-items:flex-start; }
.ocv3 .appst-next{ background:var(--br) !important; background-image:linear-gradient(rgba(255,255,255,.10),rgba(255,255,255,0)); color:#fff !important; border:none !important; border-radius:6px; font-weight:500; font-size:12.5px; height:28px; padding:0 11px; box-shadow:0 1px 1px rgba(10,37,64,.18),0 1px 2px rgba(10,37,64,.12); }
.ocv3 .appst-next:hover{ background:var(--brh) !important; }
.ocv3 .appst-restore{ background:#fff !important; color:var(--nv) !important; box-shadow:0 0 0 1px var(--bds); border:none !important; border-radius:6px; height:28px; }

/* suggest chips + plan banner tidy */
.ocv3 .suggest-item .btn-primary{ box-shadow:none; }

/* ============ row overflow menu (⋯) ============ */
.ocv3-actcell{ text-align:right; position:relative; }
.ocv3-mbtn{ width:30px; height:30px; border-radius:6px; border:none; background:transparent; color:#697386; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; transition:background .12s,color .12s; }
.ocv3-mbtn:hover{ background:#EEF1F5; color:#0A2540; }
.ocv3-mbtn.on{ background:#EEF3FF; color:#1F3CFF; }
.ocv3-menu{ position:absolute; top:36px; right:8px; min-width:172px; background:#fff; border:1px solid #E3E8EE; border-radius:9px; box-shadow:0 0 0 1px rgba(10,37,64,.04),0 10px 28px rgba(10,37,64,.16); padding:5px; z-index:60; display:none; }
.ocv3-menu.open{ display:block; }
.ocv3-mi{ display:flex; align-items:center; gap:9px; width:100%; padding:8px 10px; border:none; background:none; font:inherit; font-size:13px; color:#425466; border-radius:6px; cursor:pointer; text-align:left; white-space:nowrap; transition:background .1s,color .1s; }
.ocv3-mi:hover{ background:#FBFCFD; color:#0A2540; }
.ocv3-mi svg{ width:15px; height:15px; flex:none; color:#8792A2; }
.ocv3-mi:hover svg{ color:#425466; }
.ocv3-mi.dang{ color:#B3093C; }
.ocv3-mi.dang svg{ color:#B3093C; }
.ocv3-mi.dang:hover{ background:#FDE2E4; }
.ocv3-msep{ height:1px; background:#E3E8EE; margin:5px 6px; }

/* OceanV3 p-align — 申请面板表格整行顶部对齐（⋯与各列跟院校名齐平） */
.ocv3 .app-fixed tbody td{ vertical-align:top !important; }
.ocv3-actcell{ vertical-align:top !important; }
.ocv3 .app-fixed tbody td:not(.ocv3-actcell){ padding-top:15px !important; }
.ocv3-mbtn{ margin-top:2px; }

/* OceanV3 p-mipri — 菜单里的主动作(推进)高亮 */
.ocv3-mi-pri{ color:#1F3CFF; font-weight:600; }
.ocv3-mi-pri svg{ color:#1F3CFF !important; }
.ocv3-mi-pri:hover{ background:#EEF3FF; color:#142CCB; }

/* ================= OceanV3 · Stripe 共享外壳 (global) ================= */
/* 侧栏：白底 + 冷灰细边 */
.sidebar{ background:#FFFFFF !important; border-right:1px solid #E3E8EE !important; box-shadow:none !important; }
.sidebar-header{ border-bottom:1px solid #E3E8EE !important; }
.sidebar-header .logo-title{ color:#0A2540 !important; }

/* 分组标题 -> overline 浅灰 */
.nav-group-label, .student-nav-group-title{ color:#8792A2 !important; font-size:11px !important; font-weight:600 !important; letter-spacing:.06em !important; }
.nav-subgroup-label{ color:#8792A2 !important; font-weight:600 !important; }

/* 导航项 idle */
.nav-item, .student-sub-nav{ color:#425466 !important; font-weight:450 !important; }
.nav-item .nav-icon, .student-sub-nav .nav-icon{ color:#8792A2 !important; }

/* hover */
.nav-item:hover:not(.active), .student-sub-nav:hover:not(.active){ background:#F6F8FA !important; color:#0A2540 !important; }
.nav-item:hover:not(.active) .nav-icon, .student-sub-nav:hover:not(.active) .nav-icon{ color:#425466 !important; }

/* 选中 -> 品牌浅蓝底 + 品牌字（扁平，无白卡/无阴影/无左条） */
.nav-item.active, .student-sub-nav.active{ background:#EEF3FF !important; color:#1F3CFF !important; font-weight:600 !important; box-shadow:none !important; border-left-color:transparent !important; }
.nav-item.active .nav-icon, .student-sub-nav.active .nav-icon{ color:#1F3CFF !important; }

/* 底部用户区：退出弱化 */
.sidebar-logout-btn{ color:#8792A2 !important; }

/* 顶栏：海军蓝标题 + 冷灰边 */
.app-topbar{ border-bottom:1px solid #E3E8EE !important; background:#FFFFFF !important; }
.app-topbar-title{ color:#0A2540 !important; font-size:18px !important; font-weight:600 !important; letter-spacing:-.3px !important; }

/* ============ OceanV3 · Stripe 全局基座（安全的通用组件） ============ */
/* 卡片 */
.page-content .card{ border:1px solid #E3E8EE !important; border-radius:8px !important; box-shadow:0 1px 1px rgba(10,37,64,.04),0 3px 6px rgba(10,37,64,.05) !important; }
.page-content .card-header{ border-bottom:1px solid #E3E8EE !important; }
.page-content .card-header h3, .page-content .card-header h4{ color:#0A2540 !important; letter-spacing:-.1px; }
/* 统计卡 */
.page-content .stat-card{ border:1px solid #E3E8EE !important; border-radius:8px !important; box-shadow:0 1px 1px rgba(10,37,64,.04),0 3px 6px rgba(10,37,64,.04) !important; }
.page-content .stat-value{ color:#0A2540; font-variant-numeric:tabular-nums; letter-spacing:-.4px; }
.page-content .stat-label{ color:#8792A2 !important; font-size:11px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; }
/* 药丸标签 */
.page-content .tag{ border-radius:11px; font-weight:600; }
.page-content .tag-primary{ background:#E0E6FF !important; color:#142CCB !important; }
.page-content .tag-info{ background:#D7ECFF !important; color:#0B5FA5 !important; }
.page-content .tag-success{ background:#CBF4C9 !important; color:#0E6245 !important; }
.page-content .tag-warning{ background:#F8E5B9 !important; color:#983B00 !important; }
.page-content .tag-danger{ background:#FDE2E4 !important; color:#B3093C !important; }
.page-content .tag-default{ background:#E7ECF1 !important; color:#4F5B67 !important; }
/* 按钮 */
.page-content .btn-primary{ background:#1F3CFF; background-image:linear-gradient(rgba(255,255,255,.10),rgba(255,255,255,0)); color:#fff; border:none; border-radius:6px; box-shadow:0 1px 1px rgba(10,37,64,.18),0 1px 2px rgba(10,37,64,.12); }
.page-content .btn-primary:hover{ background:#142CCB; }
.page-content .btn-outline{ background:#fff; color:#0A2540; border:1px solid #D5DBE1; border-radius:6px; box-shadow:0 1px 1px rgba(10,37,64,.03); }
.page-content .btn-outline:hover{ background:#F6F8FA; border-color:#C3CBD6; }
/* 输入聚焦环 */
.page-content input:focus, .page-content textarea:focus, .page-content select:focus{ outline:none; border-color:#1F3CFF; box-shadow:0 0 0 3px rgba(31,60,255,.12); }

/* ============ OceanV3 · Stripe 全局数据表 ============ */
.page-content table thead th{ background:#FBFCFD !important; color:#8792A2 !important; font-size:11px !important; font-weight:600 !important; letter-spacing:.04em; text-transform:uppercase; border-bottom:1px solid #E3E8EE !important; padding:11px 14px !important; }
.page-content table tbody td{ border-bottom:1px solid #E3E8EE !important; color:#425466; padding:13px 14px !important; }
.page-content table tbody tr:last-child td{ border-bottom:none !important; }
.page-content table tbody tr:hover{ background:#FBFCFD !important; }
.page-content table tbody strong, .page-content table tbody b{ color:#0A2540; }

/* OceanV3 · 去紫扫尾 */
.stat-icon.purple{ background:#E6FBF8 !important; color:#0D9488 !important; }
.welcome-banner{ background:linear-gradient(135deg,#1F3CFF 0%,#3A54FF 55%,#142CCB 100%) !important; }

/* OceanV3 · 列表内删除按钮柔化（弹窗确认按钮不受影响） */
.page-content .btn-danger{ background:#FDE2E4 !important; color:#B3093C !important; border:none !important; box-shadow:none !important; }
.page-content .btn-danger:hover{ background:#FBD0D5 !important; color:#8A0B33 !important; }

/* OceanV3 · 学生详情时间轴去 emoji 图标（类型已由标签体现） */
.timeline-item-icon{ display:none !important; }

/* OceanV3 · consultant 申请面板 tier 卡（.card.ocv3）：细边 + 允许溢出(⋯菜单不被裁) */
.card.ocv3{ border-left-width:1px !important; overflow:visible !important; }
.card.ocv3 .card-body{ overflow:visible !important; }

/* OceanV3 · 学生端首组「我的主页」平铺(无标题、顶部直接铺功能) */
.student-nav-group.flat{ margin:6px 0 14px; }
.student-nav-group.flat .student-sub-nav{ margin-left:10px; }

/* OceanV3 · 减少线条（用留白/层次代替） */
.sidebar-header{ border-bottom:none !important; }
.app-topbar{ border-bottom:none !important; }
.page-content .card-header{ border-bottom:none !important; }
.card.ocv3 .card-header{ border-bottom:none !important; }

/* OceanV3 · 顶栏标题下补回一条横线（logo下/卡片头仍无线） */
.app-topbar{ border-bottom:1px solid #E3E8EE !important; }

/* OceanV3 · 侧栏底部用户区：一条通栏横线分隔（原来内缩不完整） */
.sidebar-user-entry{ margin:8px -12px 0 !important; padding:14px 32px !important; border-top:1px solid #E5EAF2 !important; }

/* OceanV3 · 升学信息表单标签加深一点 */
.ai-lbl{ color:#667085 !important; }

/* OceanV3 · 升学信息子段标题补下划线（满宽灰线，与 Part 蓝线成层次、对齐一致） */
.ai-block-title{ border-bottom:1px solid #E3E8EE !important; padding-bottom:6px !important; margin-bottom:12px !important; }

/* OceanV3 · appinfo 表格(带添加一行/无卡片边框)最后一行补回底线，闭合表格 */
.page-content .ai-table tbody tr:last-child td{ border-bottom:1px solid #E3E8EE !important; }

/* 2026-07-10 fix: 管理端模板卡片标题竖排(flex横排把h3挤成min-content,中文逐字断行) → 头部纵向堆叠,标题占满整行 */
.template-card-header { flex-direction: column; align-items: stretch; gap: 8px; }
.template-card-header h3 { flex: none; width: 100%; min-width: 0; word-break: normal; overflow-wrap: anywhere; }
.template-card-header .template-card-actions { flex-wrap: wrap; }

/* 2026-07-10: 模板卡片审核操作常驻显示(取消hover才显示) */
.template-card-actions { opacity: 1; }

/* 2026-07-10: 管理端课程管理 课程类型筛选(全部/1对1课程/班级课程) */
.course-type-filter { display:flex; gap:8px; margin-bottom:16px; flex-wrap:wrap; }
.ctf-btn { padding:6px 14px; border-radius:8px; border:1px solid #E3E8EE; background:#fff; color:#425466; font-size:13px; font-weight:500; cursor:pointer; transition:background .12s,color .12s,border-color .12s; }
.ctf-btn:hover { border-color:#C9D2FF; color:#0A2540; }
.ctf-btn.active { background:#1F3CFF; border-color:#1F3CFF; color:#fff; }

/* row-actions-flat v1 — flatten row action buttons inside data tables (no nested boxes) */
.table-wrapper td .btn.btn-sm,
.table-wrapper td .btn {
  border: none;
  background: transparent;
  box-shadow: none;
  padding: 3px 9px;
  height: auto;
  min-height: 0;
  line-height: 1.55;
  font-size: 13px;
  font-weight: 500;
  border-radius: 6px;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.table-wrapper td .btn.btn-outline { color: #667085; }
.table-wrapper td .btn.btn-outline:hover { background: #EEF1F6; color: #1D2739; }
.table-wrapper td .btn.btn-primary { color: var(--primary); background: transparent; }
.table-wrapper td .btn.btn-primary:hover { background: rgba(31,60,255,0.09); color: var(--primary); }
.table-wrapper td .btn.btn-danger { color: var(--danger); background: transparent; }
.table-wrapper td .btn.btn-danger:hover { background: #FDECEC; color: var(--danger); }
.table-wrapper td .btn.btn-success { color: #188038; background: transparent; }
.table-wrapper td .btn.btn-success:hover { background: #E6F4EA; color: #188038; }
.table-wrapper td .btn + .btn { margin-left: 2px; }

/* denest-tables v1 — collapse redundant nested boxes around data tables, reclaim width */
/* the inner table-wrapper inside a card is a second bordered box: strip its chrome */
.card-body > .table-wrapper {
  border: none;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  overflow: visible;
  overflow-x: auto;
}
/* let the table span the full card width: drop card-body side padding for table cards */
.card-body:has(> .table-wrapper) {
  padding: 0 0 8px;
}
/* keep non-table blocks (filters/pagination/provider cards) inset */
.card-body:has(> .table-wrapper) > *:not(.table-wrapper) {
  padding-left: 20px;
  padding-right: 20px;
}
/* align edge cells with the header title (card-header pads 20px left) */
.card-body:has(> .table-wrapper) > .table-wrapper th:first-child,
.card-body:has(> .table-wrapper) > .table-wrapper td:first-child { padding-left: 20px; }
.card-body:has(> .table-wrapper) > .table-wrapper th:last-child,
.card-body:has(> .table-wrapper) > .table-wrapper td:last-child { padding-right: 20px; }

/* sort-select-v2 — 统一筛选下拉框样式（含直接 class 在 select 上的情况）+ 自定义箭头 */
select.sort-select,
.sort-select select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding: 8px 32px 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-family: var(--font-family);
  color: var(--text);
  background-color: var(--surface);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 15px;
  min-width: 132px;
  line-height: 1.4;
  cursor: pointer;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
select.sort-select:hover,
.sort-select select:hover {
  border-color: #C7D0DE;
}
select.sort-select:focus,
.sort-select select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(31,60,255,0.12);
}


/* 课程详情底部：≥561px 保持紧凑一行(价格左/按钮右)，仅手机竖排 */
@media (min-width: 561px) {
  .modal.expert-booking-modal .modal-footer.course-detail-footer {
    flex-direction: row;
    align-items: center;
  }
  .modal.expert-booking-modal .modal-footer.course-detail-footer .course-detail-footer-actions {
    width: auto;
  }
  .modal.expert-booking-modal .modal-footer.course-detail-footer .course-detail-footer-actions .btn {
    width: auto;
    flex: 0 0 auto;
  }
}


/* 编辑课程封面预览：完整显示上传图(不裁剪)，长图区域内纵向滚动 */
#course-cover-preview {
  display: block;
  height: auto;
  min-height: 120px;
  max-height: 400px;
  max-width: 420px;
  overflow-y: auto;
  padding: 0;
  text-align: center;
  line-height: 120px;
}
#course-cover-preview img {
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
}


/* 课程详情「图片块」：学生端完整显示(不裁剪/不限高)，长图随弹窗纵向滚动 */
.course-detail-rich .expert-rich-image img {
  max-height: none;
  height: auto;
  object-fit: contain;
}

.page-content:has(.ai-page-root){padding:0;}
.ai-page-root{height:100%;}
.ai-page{height:100%;display:flex;flex-direction:column;background:#fff;overflow:hidden;}
.modal.chat-modal{width:1100px;max-width:calc(100vw - 40px);}
.modal.chat-modal .modal-body{padding:0;}

.mc-cover{position:relative;}
.sidebar-ai-btn.nav-item, .sidebar-ai-btn.nav-item .sidebar-ai-btn-label{color:#fff;}
.modal.chat-modal{width:min(1400px, 94vw);max-width:none;}

/* Phase A 全局 */
*:focus-visible{outline:2px solid var(--primary);outline-offset:2px;}
button:focus:not(:focus-visible),.market-mode-tab:focus:not(:focus-visible),.plan-tab:focus:not(:focus-visible),.expert-category-tab:focus:not(:focus-visible){outline:none;}
.empty-state{padding:26px 20px !important;}
.empty-state .icon,.empty-state .empty-icon{font-size:34px !important;margin-bottom:8px !important;}

/* C1 升学信息 分步向导 */
.ai-wizard{display:flex;gap:20px;align-items:flex-start;}
.ai-wizard-nav{width:220px;flex-shrink:0;position:sticky;top:16px;}
.ai-wizard-prog{background:var(--card,#fff);border:1px solid var(--border);border-radius:12px;padding:14px;margin-bottom:12px;}
.ai-prog-top{display:flex;justify-content:space-between;font-size:13px;color:var(--text-secondary);margin-bottom:6px;}
.ai-prog-top b{color:var(--primary);}
.ai-prog-bar{height:6px;background:#EEF1F5;border-radius:3px;overflow:hidden;}
.ai-prog-bar i{display:block;height:100%;background:var(--primary);transition:width .3s;}
.ai-saved{font-size:12px;color:var(--text-muted);margin-top:8px;}
.ai-steplist{list-style:none;margin:0;padding:0;background:var(--card,#fff);border:1px solid var(--border);border-radius:12px;overflow:hidden;}
.ai-step{display:flex;align-items:center;gap:10px;padding:11px 14px;cursor:pointer;font-size:14px;color:var(--text-secondary);border-left:3px solid transparent;}
.ai-step:hover{background:#F7F9FC;}
.ai-step.active{background:#EEF2FF;color:var(--primary);border-left-color:var(--primary);font-weight:600;}
.ai-step-no{width:22px;height:22px;border-radius:50%;background:#EEF1F5;color:var(--text-secondary);display:flex;align-items:center;justify-content:center;font-size:12px;flex-shrink:0;}
.ai-step.active .ai-step-no{background:var(--primary);color:#fff;}
.ai-wizard-main{flex:1;min-width:0;background:var(--card,#fff);border:1px solid var(--border);border-radius:12px;padding:20px;}
.ai-wizard-foot{display:flex;justify-content:flex-end;gap:10px;margin-top:18px;padding-top:16px;border-top:1px solid var(--border);}
@media(max-width:820px){.ai-wizard{flex-direction:column;}.ai-wizard-nav{width:100%;position:static;}.ai-steplist{display:flex;overflow-x:auto;}.ai-step{border-left:none;border-bottom:3px solid transparent;white-space:nowrap;}.ai-step.active{border-left:none;border-bottom-color:var(--primary);}}

/* ===== Phase C-② 计划与任务 ===== */
.pt-summary{display:flex;flex-wrap:wrap;align-items:center;gap:22px;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:16px 22px;margin-bottom:4px;}
.pt-sum-group{display:flex;flex-direction:column;gap:7px;padding-right:22px;border-right:1px solid var(--border);}
.pt-sum-group:last-child{border-right:none;padding-right:0;}
.pt-sum-label{font-size:12px;color:var(--text-muted);}
.pt-sum-vals{display:flex;align-items:center;gap:10px;}
.pt-sum-main{font-size:22px;font-weight:700;color:var(--text);line-height:1;}
.pt-sum-main small{font-size:12px;font-weight:500;color:var(--text-muted);margin-left:2px;}
.pt-sum-pills{display:flex;gap:6px;flex-wrap:wrap;}
.pt-pill{font-size:12px;padding:3px 10px;border-radius:999px;font-weight:600;white-space:nowrap;}
.pt-pill.warn{background:#FEF3C7;color:#B45309;}
.pt-pill.info{background:#DBEAFE;color:#1D4ED8;}
.pt-pill.ok{background:#DCFCE7;color:#15803D;}
.pt-statrow{display:flex;gap:10px;margin-bottom:14px;}
.pt-statrow .pt-stat{flex:1;display:flex;align-items:baseline;gap:8px;background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:12px 16px;}
.pt-statrow .pt-stat .n{font-size:22px;font-weight:700;line-height:1;}
.pt-statrow .pt-stat .l{font-size:12px;color:var(--text-muted);}
.dash-count{display:inline-block;margin-left:8px;font-size:12px;font-weight:600;color:var(--text-muted);background:rgba(120,130,150,0.12);border-radius:999px;padding:1px 10px;vertical-align:middle;}
.exam-table td,.exam-table th{vertical-align:middle;}
@media(max-width:720px){
  .pt-summary{gap:12px;padding:14px 16px;}
  .pt-sum-group{border-right:none;padding-right:0;flex:1 1 100%;flex-direction:row;align-items:center;justify-content:space-between;}
  .pt-statrow{flex-direction:column;}
}

/* ===== Phase C-④ 课程与专家：搜索/排序 + 专家卡片精简 ===== */
.mkt-toolbar{display:flex;gap:10px;align-items:center;margin:0 4px 16px;flex-wrap:wrap;}
.mkt-search-box{position:relative;flex:1 1 220px;min-width:170px;max-width:360px;}
.mkt-search-box svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--text-muted);pointer-events:none;}
.mkt-search{width:100%;height:38px;padding:0 12px 0 34px;border:1px solid var(--border);border-radius:10px;font-size:13px;background:var(--surface);color:var(--text);}
.mkt-search:focus{border-color:var(--primary);outline:none;}
.mkt-sort{height:38px;padding:0 30px 0 12px;border:1px solid var(--border);border-radius:10px;font-size:13px;background:var(--surface);color:var(--text);cursor:pointer;}
/* 专家卡片精简变体：去详情大图、统一头像 */
.expert-card-lite .expert-card-cover{display:none;}
.expert-card-lite .expert-card-head{align-items:center;padding:16px 14px 0;min-height:0;}
.expert-card-lite .expert-avatar{width:52px;height:52px;font-size:20px;}
.expert-card-lite .expert-card-titleblock h3{font-size:16px;white-space:normal;line-height:1.25;}
.expert-lite-sub{font-size:12px;color:var(--text-muted);margin:3px 0 2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.expert-card-lite .expert-card-rating{margin-top:2px;}

/* ===== Phase C-⑤ 资料库：右侧抽屉 + 拖拽上传 ===== */
.stu-drawer-overlay{position:fixed;inset:0;background:rgba(15,23,42,.42);z-index:1200;display:flex;justify-content:flex-end;opacity:0;transition:opacity .2s ease;}
.stu-drawer-overlay.open{opacity:1;}
.stu-drawer{width:min(560px,94vw);max-width:94vw;height:100%;background:var(--surface,#fff);display:flex;flex-direction:column;box-shadow:-8px 0 32px rgba(0,0,0,.18);transform:translateX(100%);transition:transform .24s cubic-bezier(.4,0,.2,1);}
.stu-drawer-overlay.open .stu-drawer{transform:translateX(0);}
.stu-drawer-head{display:flex;align-items:center;justify-content:space-between;padding:16px 22px;border-bottom:1px solid var(--border);flex-shrink:0;}
.stu-drawer-head h3{margin:0;font-size:17px;font-weight:650;color:var(--text);}
.stu-drawer-x{border:none;background:none;font-size:24px;line-height:1;color:var(--text-muted);cursor:pointer;padding:0 4px;border-radius:6px;}
.stu-drawer-x:hover{background:rgba(120,130,150,.12);}
.stu-drawer-body{flex:1;overflow-y:auto;padding:20px 22px;}
.stu-drawer-foot{flex-shrink:0;display:flex;gap:10px;align-items:center;padding:14px 22px;border-top:1px solid var(--border);background:var(--surface);}
@media(max-width:560px){.stu-drawer{width:100vw;}}
.res-dropzone{border:1.5px dashed var(--border);border-radius:12px;padding:22px;text-align:center;color:var(--text-muted);font-size:13px;cursor:pointer;transition:border-color .15s,background .15s,color .15s;display:flex;flex-direction:column;align-items:center;gap:8px;}
.res-dropzone:hover,.res-dropzone.dragover{border-color:var(--primary);background:rgba(31,60,255,.04);color:var(--primary);}

/* ===== Phase D 追加 ===== */
/* D-1 侧栏底部对话按钮 */
.sidebar-chat-btn{margin:0 0 8px;border:1px solid var(--sidebar-divider);background:#fff;font-weight:500;color:#344054;height:42px;}
.sidebar-chat-btn:hover{background:#fff;color:var(--primary);border-color:var(--primary);}
.sidebar-chat-btn .nav-icon{color:var(--primary);}
.sidebar-chat-btn .im-navbadge{margin-left:auto;background:var(--danger,#DC2626);color:#fff;font-size:11px;font-weight:600;min-width:18px;height:18px;border-radius:9px;display:flex;align-items:center;justify-content:center;padding:0 5px;}
/* D-3 计划与任务 三合一 + 考试右侧 */
.pt-main-grid{display:grid;grid-template-columns:minmax(0,1fr) 336px;gap:20px;align-items:start;margin-top:20px;}
.pt-left{min-width:0;}
.pt-right{min-width:0;}
.pt-seg{display:inline-flex;background:rgba(120,130,150,.10);border-radius:10px;padding:3px;margin-bottom:14px;gap:2px;}
.pt-seg-btn{border:none;background:none;padding:7px 15px;border-radius:8px;font-size:13px;font-weight:600;color:var(--text-muted);cursor:pointer;white-space:nowrap;}
.pt-seg-btn.active{background:var(--surface,#fff);color:var(--primary);box-shadow:0 1px 3px rgba(16,24,40,.12);}
@media(max-width:900px){.pt-main-grid{grid-template-columns:1fr;}.pt-right{margin-top:8px;}}

/* ===== Phase E：蓝系模块辅色 + 修复与打磨 ===== */
:root{
  --acc-navy:#16308F; --acc-navy-mid:#4C63C7; --acc-navy-light:#DDE4F7; --acc-navy-bg:#F0F4FC;
  --acc-sky:#0284C7; --acc-sky-light:#D6EDFB; --acc-sky-bg:#F0F9FF;
  --acc-teal:#0D9488; --acc-teal-deep:#0B6B62; --acc-teal-light:#CCF1EC; --acc-teal-bg:#F0FBF9;
  --acc-amber:#D97706; --acc-amber-deep:#92500A; --acc-amber-light:#FCEBCB; --acc-amber-bg:#FFFBEB;
  --acc-slate:#475569; --acc-slate-light:#E2E8F0; --acc-slate-bg:#F8FAFC;
}
/* E-1 考试紧凑行 */
.exam-row{display:flex;align-items:center;gap:10px;padding:11px 2px;border-bottom:1px solid var(--border-light);}
.exam-row:last-child{border-bottom:none;}
.exam-row-main{flex:1;min-width:0;}
.exam-row-title{display:flex;align-items:center;gap:8px;font-size:14px;}
.exam-row-title strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.exam-row-sub{font-size:12px;color:var(--text-muted);margin-top:3px;}
.exam-row-acts{display:flex;gap:4px;flex-shrink:0;}
.exam-act-btn{width:28px;height:28px;border:1px solid var(--border);background:var(--surface);border-radius:8px;color:var(--text-secondary);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;}
.exam-act-btn:hover{color:var(--primary);border-color:var(--primary);}
.exam-act-btn.danger:hover{color:var(--danger);border-color:var(--danger);}
/* E-2 任务卡片行 */
.task-rows{display:flex;flex-direction:column;}
.task-row{display:flex;align-items:flex-start;gap:10px;padding:12px 2px;border-bottom:1px solid var(--border-light);}
.task-row:last-child{border-bottom:none;}
.task-row.done{opacity:.6;}
.task-row>input.batch-check{margin-top:4px;flex-shrink:0;}
.task-row-main{flex:1;min-width:0;}
.task-row-title{display:flex;align-items:center;gap:7px;flex-wrap:wrap;font-size:14px;}
.task-row-title .tt{font-weight:550;}
.task-row-title .tt.strike{text-decoration:line-through;}
.task-row-desc{font-size:12px;color:var(--text-muted);margin-top:3px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.task-row-meta{font-size:12px;color:var(--text-secondary);margin-top:4px;}
.task-row-meta .sep{margin:0 6px;color:var(--text-muted);}
.task-row-side{display:flex;align-items:center;gap:5px;flex-shrink:0;}
/* E-5 跟进记录 3 行截断，点击展开 */
.fu-body{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.fu-body.open{display:block;-webkit-line-clamp:unset;}
/* E-5 右栏吸顶 */
.pt-right{position:sticky;top:8px;}
/* E-4 AI 历史对话头 + 快捷问题 hover 海军蓝 */
.ai-conv-hd{padding:12px 16px 6px;font-size:12px;font-weight:600;color:var(--text-muted);}
.ai-quick-btn:hover{border-color:var(--acc-navy);color:var(--acc-navy);background:var(--acc-navy-bg);}
/* E-4 课程 kicker、分区边条着青色 */
.course-card-kicker{color:var(--acc-teal) !important;}
.cg-sec{border-left:3px solid var(--acc-teal-light);border-radius:var(--radius);}
.course-card-cover-fallback{display:flex;align-items:center;justify-content:center;color:var(--acc-teal);background:var(--acc-teal-bg);}

/* ===== Phase F：珊瑚橙 + 玫瑰粉 辅助色 ===== */
:root{
  --acc-coral:#D85A30; --acc-coral-deep:#993C1D; --acc-coral-light:#F5C4B3; --acc-coral-bg:#FAECE7;
  --acc-rose:#D4537E; --acc-rose-deep:#993556; --acc-rose-light:#F4C0D1; --acc-rose-bg:#FBEAF0;
}
.tag-rose{background:var(--acc-rose-bg);color:var(--acc-rose-deep);}
.expert-card-rating b{color:var(--acc-rose-deep) !important;}
.im-side-tools .im-sidebtn:hover{color:var(--acc-rose);border-color:var(--acc-rose);}
/* F-14 申请材料卡：统计行钉底对齐 */
.proj-card{display:flex;flex-direction:column;}
.proj-card-stats{margin-top:auto;}

/* ===== 文书工坊 Essay Workshop ===== */
.app-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;}
.app-tile{display:flex;gap:14px;align-items:center;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:18px;cursor:pointer;transition:border-color .15s,box-shadow .15s,transform .15s;}
.app-tile:hover{border-color:var(--primary);box-shadow:0 4px 16px rgba(16,24,40,.08);transform:translateY(-1px);}
.app-tile.disabled{cursor:default;opacity:.72;}
.app-tile.disabled:hover{border-color:var(--border);box-shadow:none;transform:none;}
.app-tile-ic{width:48px;height:48px;border-radius:13px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.app-tile-title{font-size:15px;font-weight:600;color:var(--text);}
.app-tile-desc{font-size:12.5px;color:var(--text-muted);margin-top:3px;line-height:1.5;}
.essay-back{width:32px;height:32px;border:1px solid var(--border);background:var(--surface);border-radius:9px;font-size:18px;color:var(--text-secondary);cursor:pointer;flex-shrink:0;}
.essay-back:hover{color:var(--primary);border-color:var(--primary);}
.essay-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px;}
.essay-card{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:16px;cursor:pointer;transition:border-color .15s,box-shadow .15s,transform .15s;}
.essay-card:hover{border-color:var(--primary);box-shadow:0 4px 16px rgba(16,24,40,.08);transform:translateY(-1px);}
.essay-card-top{display:flex;align-items:center;gap:10px;}
.essay-card-ic{width:36px;height:36px;border-radius:10px;background:#F0F4FC;color:#16308F;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.essay-card-ic svg{width:18px;height:18px;}
.essay-card-title{font-size:15px;font-weight:600;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.essay-card-type{font-size:12px;color:var(--acc-navy,#16308F);margin-top:1px;}
.essay-card-meta{font-size:12.5px;color:var(--text-secondary);margin-top:12px;}
.essay-card-meta .sep,.essay-meta-bar .sep{margin:0 7px;color:var(--text-muted);}
.essay-card-foot{font-size:11px;color:var(--text-muted);margin-top:6px;}
.essay-meta-bar{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:12px 16px;font-size:13px;color:var(--text-secondary);margin-bottom:16px;}
.essay-prompt{margin-top:8px;padding-top:8px;border-top:1px dashed var(--border);color:var(--text);font-size:13px;line-height:1.6;white-space:pre-wrap;}
.essay-detail{display:grid;grid-template-columns:172px minmax(0,1fr);gap:18px;align-items:start;margin-bottom:16px;}
.essay-timeline{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:8px;position:sticky;top:8px;}
.essay-tl-hd{font-size:12px;font-weight:600;color:var(--text-muted);padding:8px 8px 6px;}
.essay-tl-item{display:flex;gap:9px;padding:9px 8px;border-radius:9px;cursor:pointer;align-items:flex-start;}
.essay-tl-item:hover{background:#F6F7FB;}
.essay-tl-item.active{background:#F0F4FC;}
.essay-tl-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;margin-top:4px;}
.essay-tl-dot.done{background:var(--acc-teal,#0D9488);}
.essay-tl-dot.wait{background:var(--acc-amber,#D97706);}
.essay-tl-no{font-size:13px;font-weight:600;color:var(--text);}
.essay-tl-meta{font-size:11px;color:var(--text-muted);line-height:1.4;margin-top:1px;}
.essay-round-pane{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:18px 20px;min-height:200px;}
.essay-round-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:12px;flex-wrap:wrap;}
.essay-round-head h3{margin:0;font-size:16px;}
.essay-round-note{font-weight:400;font-size:13px;color:var(--text-muted);}
.essay-doc{white-space:pre-wrap;font-size:14.5px;line-height:1.85;color:var(--text);background:#FBFCFE;border:1px solid var(--border-light);border-radius:10px;padding:14px 16px;}
.essay-fb{margin-top:16px;border-top:1px solid var(--border);padding-top:14px;}
.essay-fb.pending{border-top:none;padding-top:0;}
.essay-fb-hd{display:flex;align-items:center;gap:8px;margin-bottom:8px;}
.essay-fb-badge{font-size:12px;font-weight:600;color:#0C447C;background:#D6EDFB;border-radius:999px;padding:3px 11px;}
.essay-fb-badge.pending{color:#92500A;background:#FCEBCB;}
.essay-fb-body{font-size:14px;line-height:1.75;color:var(--text);white-space:pre-wrap;}
.essay-fb-revised{margin-top:12px;}
.essay-fb-revised-hd{font-size:12px;font-weight:600;color:var(--text-muted);margin-bottom:6px;}
.essay-submit{margin-top:2px;}
.essay-hint{background:var(--acc-amber-bg,#FFFBEB);color:var(--acc-amber-deep,#92500A);border-radius:10px;padding:12px 16px;font-size:13px;}
.essay-hint.ok{background:var(--acc-teal-bg,#F0FBF9);color:var(--acc-teal-deep,#0B6B62);}
/* 文书工坊 · AI 原稿↔修改稿对比 */
.essay-diff{margin-top:14px;}
.essay-diff-cta{display:flex;flex-direction:column;gap:8px;}
.essay-diff-err{font-size:12.5px;color:#B4322E;}
.essay-diff-go{align-self:flex-start;display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;color:#16308F;background:linear-gradient(180deg,#F4F7FE,#EAF0FC);border:1px solid #D3E0F7;border-radius:10px;padding:9px 15px;cursor:pointer;transition:.15s;}
.essay-diff-go:hover{background:linear-gradient(180deg,#EFF4FE,#E0EAFB);border-color:#B9CDF0;}
.essay-diff-spark{color:#3E64D8;font-size:14px;}
.essay-diff-loading{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--text-muted);background:#F7F9FD;border:1px solid var(--border-light);border-radius:10px;padding:12px 15px;}
.essay-diff-dot{width:9px;height:9px;border-radius:50%;background:#3E64D8;animation:essayDiffPulse 1s infinite ease-in-out;}
@keyframes essayDiffPulse{0%,100%{opacity:.3;transform:scale(.8);}50%{opacity:1;transform:scale(1.15);}}
.essay-diff-panel{background:linear-gradient(180deg,#FCFDFF,#F6FAFE);border:1px solid #E3EAF6;border-radius:12px;padding:14px 16px;}
.essay-diff-hd{display:flex;align-items:center;gap:8px;margin-bottom:10px;}
.essay-diff-badge{font-size:12px;font-weight:700;color:#16308F;background:linear-gradient(180deg,#E9EFFC,#DCE6FA);border-radius:999px;padding:3px 11px;letter-spacing:.2px;}
.essay-diff-time{font-size:11.5px;color:var(--text-muted);}
.essay-diff-regen{margin-left:auto;font-size:12px;color:var(--text-muted);background:none;border:1px solid var(--border);border-radius:8px;padding:3px 10px;cursor:pointer;transition:.15s;}
.essay-diff-regen:hover{color:#16308F;border-color:#B9CDF0;background:#F4F7FE;}
.essay-diff-overall{font-size:13.5px;line-height:1.7;color:var(--text);background:#F0F5FE;border-left:3px solid #3E64D8;border-radius:0 8px 8px 0;padding:10px 14px;margin-bottom:12px;}
.essay-diff-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px;}
.essay-diff-item{display:flex;gap:10px;align-items:flex-start;}
.essay-diff-cat{flex:none;font-size:11.5px;font-weight:600;border-radius:7px;padding:3px 9px;margin-top:1px;white-space:nowrap;}
.essay-diff-tx{min-width:0;flex:1;}
.essay-diff-point{font-size:13.5px;line-height:1.7;color:var(--text);}
.essay-diff-ba{margin-top:5px;display:flex;flex-wrap:wrap;align-items:center;gap:7px;font-size:12.5px;line-height:1.6;}
.essay-diff-ba .ba-b{color:#9A3B38;background:#FCEEEC;border-radius:6px;padding:2px 8px;text-decoration:line-through;text-decoration-color:#D8A6A3;}
.essay-diff-ba .ba-arw{color:var(--text-muted);}
.essay-diff-ba .ba-a{color:#0B6B62;background:#E7F6F2;border-radius:6px;padding:2px 8px;}
.essay-diff-same{font-size:13px;color:var(--text-muted);background:#F7F9FD;border-radius:8px;padding:10px 14px;}
.essay-diff-advice{margin-top:12px;font-size:13px;line-height:1.7;color:#5A4A12;background:#FFFBEB;border:1px solid #F3E4B8;border-radius:9px;padding:10px 14px;}
.essay-diff-advice b{display:block;font-size:12px;color:#92500A;margin-bottom:3px;}
.essay-diff-cat.c-st{color:#16308F;background:#E8EEFC;}
.essay-diff-cat.c-ct{color:#0B6B62;background:#E6F6F3;}
.essay-diff-cat.c-lg{color:#0C6FB8;background:#E1F1FB;}
.essay-diff-cat.c-gr{color:#92500A;background:#FBECCD;}
.essay-diff-cat.c-lo{color:#475569;background:#EEF2F6;}
.essay-diff-cat.c-ln{color:#B4322E;background:#FCE7E4;}
.essay-diff-cat.c-ot{color:#475569;background:#EEF2F6;}
/* 服务端文书工坊：学生列表 + 看板 */
.essay-pending-chip{font-size:12px;font-weight:600;color:#B45309;background:#FEF3C7;border-radius:999px;padding:3px 11px;}
.essay-stu-list{display:flex;flex-direction:column;gap:10px;}
.essay-stu-card{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:14px 16px;cursor:pointer;transition:.15s;}
.essay-stu-card:hover{border-color:#B9CDF0;box-shadow:0 2px 10px rgba(22,48,143,.06);}
.essay-stu-avatar{flex:none;width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,#E8EEFC,#DCE6FA);color:#16308F;font-weight:700;display:flex;align-items:center;justify-content:center;font-size:16px;}
.essay-stu-name{font-weight:600;color:var(--text);display:flex;align-items:center;gap:8px;}
.essay-stu-meta{font-size:12.5px;color:var(--text-muted);margin-top:2px;}
.essay-stu-dot{flex:none;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--danger,#DC2626);color:#fff;font-size:11px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;}
.essay-stu-dot.mini{min-width:8px;width:8px;height:8px;padding:0;}
.essay-stu-arrow{flex:none;color:var(--text-muted);font-size:20px;line-height:1;}
.essay-board-sec{margin-bottom:16px;}
.essay-board-item{display:flex;align-items:center;gap:10px;padding:10px 8px;border-radius:9px;cursor:pointer;transition:.12s;}
.essay-board-item:hover{background:#F4F7FE;}
.essay-board-item + .essay-board-item{border-top:1px solid var(--border-light);}
.essay-board-ic{flex:none;width:30px;height:30px;border-radius:8px;background:#F0F4FC;color:#16308F;display:flex;align-items:center;justify-content:center;}
.essay-board-ic svg{width:17px;height:17px;}
.essay-board-title{font-weight:600;color:var(--text);font-size:14px;display:flex;align-items:center;gap:6px;}
.essay-board-sub{font-size:12px;color:var(--text-muted);margin-top:1px;}
@media(max-width:820px){.essay-detail{grid-template-columns:1fr;}.essay-timeline{position:static;display:flex;overflow-x:auto;gap:4px;}.essay-timeline .essay-tl-hd{display:none;}.essay-tl-item{flex-direction:column;min-width:96px;}}

/* ===== Batch2 #2 预约选老师：老师详情全屏覆盖 ===== */
.rc-tcover{position:absolute;inset:0;background:var(--surface,#fff);z-index:30;display:flex;flex-direction:column;border-radius:inherit;overflow:hidden;}
.rc-tcover-hd{display:flex;align-items:center;gap:10px;padding:16px 20px;border-bottom:1px solid var(--border);flex-shrink:0;}
.rc-tcover-back{background:none;border:none;color:var(--primary);font-size:14px;font-weight:500;cursor:pointer;padding:0;}
.rc-tcover-title{font-size:16px;font-weight:600;color:var(--text);}
.rc-tcover-body{flex:1;overflow-y:auto;padding:22px;}
.rc-tcover-foot{display:flex;gap:10px;justify-content:flex-end;padding:14px 20px;border-top:1px solid var(--border);flex-shrink:0;background:var(--surface);}
.rc-tcover .rc-tv-head{display:flex;align-items:center;gap:14px;margin-bottom:16px;}
.rc-tcover .rc-tv-avatar{width:64px;height:64px;border-radius:50%;background:#e8eefb;color:#1a73e8;display:flex;align-items:center;justify-content:center;font-weight:600;overflow:hidden;font-size:24px;flex:0 0 auto;}
.rc-tcover .rc-tv-avatar img{width:100%;height:100%;object-fit:cover;}
.rc-tcover .rc-tv-head h3{margin:0;font-size:19px;}
.rc-tcover .rc-tv-sub{font-size:13px;color:var(--text-muted);margin-top:3px;}
.rc-tcover .rc-tv-rows{font-size:14px;}
.rc-tcover .rc-trow{font-size:14px;line-height:1.7;margin-bottom:6px;}
.rc-tcover .rc-tlabel{color:var(--text-muted);margin-right:8px;}

/* ===== Batch5 #9/#10 我的课程 完成/点评 ===== */
.mc-review-chip{position:absolute;top:10px;right:10px;font-size:11px;padding:2px 8px;border-radius:8px;font-weight:600;}
.mc-action{display:flex;align-items:center;gap:10px;padding:10px 12px;border-top:1px solid var(--border-light);}
.mc-action-hint{flex:1;font-size:12px;color:var(--text-secondary);}
.course-hist-list{display:flex;flex-direction:column;}
.course-hist-row{display:flex;align-items:center;gap:12px;padding:12px 6px;border-bottom:1px solid var(--border-light);cursor:pointer;}
.course-hist-row:last-child{border-bottom:none;}
.course-hist-row:hover{background:#F9FAFC;}
.course-hist-row .chr-main{flex:1;min-width:0;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.course-hist-row .chr-sub{color:var(--text-muted);font-weight:400;font-size:13px;}
.course-hist-row .chr-date{font-size:12px;color:var(--text-muted);flex-shrink:0;}

/* ===== 文书工坊 · 交替稿滚动流布局（2026-07-20）=====
   左列「往来各稿」独立窄列吸附；右列所有稿件纵向排列成滚动流，
   点左列某一稿 scrollIntoView 定位；发送/回稿框收在右列末尾，不再横向伸出。 */
.essay-timeline{max-height:calc(100vh - 92px);overflow-y:auto;}
.essay-flow{display:flex;flex-direction:column;gap:16px;min-width:0;}
.essay-draft-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:18px 20px;scroll-margin-top:12px;transition:border-color .2s, box-shadow .2s;}
.essay-draft-card.active{border-color:#B7C6F5;box-shadow:0 0 0 3px #EEF3FF;}
.essay-flow .essay-submit{margin-top:0;}
.essay-flow .essay-hint{margin-bottom:0;}
@media(max-width:820px){.essay-timeline{max-height:none;overflow-y:visible;}}

/* ===== 富文本编辑器（管理端课程/专家指导内容，2026-07-21）===== */
.rt-wrap{border:1px solid var(--border,#E5EAF2);border-radius:8px;overflow:hidden;background:#fff;}
.rt-bar{display:flex;flex-wrap:wrap;align-items:center;gap:2px;padding:5px 6px;background:#F7F9FC;border-bottom:1px solid var(--border,#E5EAF2);}
.rt-btn{min-width:30px;height:28px;padding:0 7px;border:1px solid transparent;border-radius:6px;background:transparent;color:#334155;font-size:13px;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;}
.rt-btn:hover{background:#E9EEF6;border-color:#DbE3EE;}
.rt-btn:active{background:#DCE6F6;}
.rt-sep{width:1px;height:18px;background:#DCE3ED;margin:0 3px;}
.rt-edit{min-height:120px;max-height:420px;overflow-y:auto;padding:10px 12px;font-size:14px;line-height:1.75;color:var(--text,#0A0F1A);outline:none;}
.rt-edit:focus{background:#FCFDFF;}
.rt-edit:empty:before{content:attr(data-ph);color:#98A2B3;}
.rt-edit p{margin:0 0 8px;} .rt-edit h3{font-size:16px;font-weight:700;margin:10px 0 6px;} .rt-edit h4{font-size:14.5px;font-weight:700;margin:8px 0 5px;}
.rt-edit ul,.rt-edit ol{margin:6px 0 8px;padding-left:22px;} .rt-edit li{margin:2px 0;}
.rt-edit a{color:var(--primary,#1F3CFF);text-decoration:underline;}
/* 学生端富文本内容渲染：让 .expert-detail-copy 里的富标签正常显示 */
.expert-detail-copy h3{font-size:16px;font-weight:700;margin:10px 0 6px;}
.expert-detail-copy h4{font-size:14.5px;font-weight:700;margin:8px 0 5px;}
.expert-detail-copy ul,.expert-detail-copy ol{margin:6px 0 10px;padding-left:22px;}
.expert-detail-copy li{margin:3px 0;}
.expert-detail-copy a{color:var(--primary,#1F3CFF);text-decoration:underline;}
.expert-detail-copy strong,.expert-detail-copy b{font-weight:700;}

/* 行内富文本（副标题等单行字段）：矮一点、不撑高，工具栏更紧凑 */
.rt-wrap.rt-inline .rt-edit{min-height:0;padding:8px 11px;line-height:1.5;}

/* ===== 文书素材（Essay Material）问答表单 2026-07-22 ===== */
/* 文书工坊里「文书素材」入口卡（学生端/服务端置顶） */
.em-entry{display:flex;align-items:center;gap:12px;padding:14px 16px;margin-bottom:14px;border:1px solid #DCE6FA;background:linear-gradient(180deg,#F5F8FF,#FFFFFF);border-radius:14px;cursor:pointer;transition:box-shadow .15s,border-color .15s;}
.em-entry:hover{border-color:#B9CCF6;box-shadow:0 4px 16px rgba(31,60,255,.08);}
.em-entry-ic{width:40px;height:40px;flex:none;border-radius:11px;background:#1F3CFF;color:#fff;font-weight:700;font-size:16px;display:flex;align-items:center;justify-content:center;}
.em-entry-title{font-weight:700;color:var(--text,#0A0F1A);font-size:15px;}
.em-entry-sub{font-size:12.5px;color:var(--text-muted,#8A94A6);margin-top:2px;}

/* 首次进入：选择本科/硕博 */
.em-choose-wrap{max-width:640px;}
.em-choose-lead{color:var(--text-secondary,#475569);font-size:14px;line-height:1.7;margin:6px 0 16px;}
.em-choose-card{display:flex;align-items:center;gap:14px;padding:18px;border:1px solid var(--border,#E5EAF2);border-radius:14px;background:#fff;cursor:pointer;margin-bottom:12px;transition:box-shadow .15s,border-color .15s;}
.em-choose-card:hover{border-color:#B9CCF6;box-shadow:0 6px 20px rgba(31,60,255,.08);}
.em-choose-ic{width:46px;height:46px;flex:none;border-radius:12px;background:#EEF3FF;color:#1F3CFF;font-weight:700;font-size:19px;display:flex;align-items:center;justify-content:center;}
.em-choose-title{font-weight:700;font-size:16px;color:var(--text,#0A0F1A);display:flex;align-items:center;gap:8px;}
.em-choose-sub{font-size:13px;color:var(--text-muted,#8A94A6);margin-top:3px;}
.em-choose-badge{font-size:11px;font-weight:600;color:#12A150;background:#ECFDF5;border-radius:999px;padding:2px 9px;}

/* 顶部工具条：变体切换 + 保存状态/按钮，吸顶 */
.em-toolbar{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:10px 0;margin-bottom:8px;background:var(--bg,#F6F8FC);border-bottom:1px solid var(--border,#E5EAF2);}
.em-seg{display:inline-flex;background:#EEF2F8;border-radius:10px;padding:3px;gap:2px;}
.em-seg-btn{border:none;background:transparent;color:#475569;font-size:13px;font-weight:600;padding:6px 12px;border-radius:8px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;}
.em-seg-btn.active{background:#fff;color:#1F3CFF;box-shadow:0 1px 3px rgba(0,0,0,.08);}
.em-seg-count{font-size:11px;background:#1F3CFF;color:#fff;border-radius:999px;padding:0 6px;line-height:16px;min-width:16px;text-align:center;}
.em-toolbar-right{margin-left:auto;display:flex;align-items:center;gap:12px;}
.em-status{font-size:12.5px;color:var(--text-muted,#8A94A6);}
.em-status.ok{color:#12A150;}
.em-status.dirty{color:#B26A00;}
.em-status.saving{color:#1F3CFF;}

/* 分区 */
.em-sec{margin:18px 0 8px;}
.em-sec-head{display:flex;align-items:center;gap:11px;padding:0 2px 10px;border-bottom:2px solid #EEF2F8;margin-bottom:14px;}
.em-sec-idx{width:26px;height:26px;flex:none;border-radius:8px;background:#1F3CFF;color:#fff;font-weight:700;font-size:13px;display:flex;align-items:center;justify-content:center;}
.em-sec-zh{font-weight:700;font-size:15.5px;color:var(--text,#0A0F1A);}
.em-sec-en{font-size:12px;color:var(--text-muted,#98A2B3);margin-top:1px;}

/* 单题 */
.em-q{display:flex;gap:12px;padding:14px;border:1px solid var(--border,#E9EDF3);border-radius:12px;background:#fff;margin-bottom:12px;}
.em-q-num{flex:none;font-weight:700;font-size:13px;color:#1F3CFF;background:#EEF3FF;border-radius:8px;padding:3px 9px;height:fit-content;}
.em-q-body{flex:1;min-width:0;}
.em-q-zh{font-size:14px;line-height:1.7;color:var(--text,#0A0F1A);font-weight:500;}
.em-q-en{font-size:12.5px;line-height:1.6;color:var(--text-muted,#98A2B3);margin:4px 0 10px;}
.em-a{width:100%;box-sizing:border-box;border:1px solid var(--border,#E3E8EE);border-radius:9px;padding:10px 12px;font-size:14px;line-height:1.75;font-family:inherit;color:var(--text,#0A0F1A);resize:vertical;min-height:64px;background:#FCFDFF;}
.em-a:focus{outline:none;border-color:#1F3CFF;background:#fff;box-shadow:0 0 0 3px rgba(31,60,255,.08);}
.em-a[readonly]{background:#F6F8FC;color:#475569;}
.em-extra-list{display:flex;flex-direction:column;gap:10px;margin-top:10px;}
.em-extra-row{padding-top:10px;border-top:1px solid #E9EDF3;}
.em-extra-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px;}
.em-extra-label{font-size:12px;font-weight:600;color:#667085;}
.em-add-input{display:inline-flex;align-items:center;gap:6px;margin-top:10px;padding:7px 10px;border:1px solid #CBD8F4;border-radius:8px;background:#fff;color:#1F3CFF;font-size:12.5px;font-weight:600;cursor:pointer;}
.em-add-input:hover{border-color:#1F3CFF;background:#F5F8FF;}
.em-add-input span{font-size:17px;line-height:1;}
.em-remove-input{width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;flex:none;border:1px solid #E3E8EE;border-radius:7px;background:#fff;color:#667085;cursor:pointer;font-size:18px;line-height:1;}
.em-remove-input:hover{border-color:#F04438;background:#FFF6F5;color:#D92D20;}

/* 底部保存条 */
.em-savebar{position:sticky;bottom:0;display:flex;justify-content:flex-end;gap:10px;padding:14px 0;margin-top:8px;background:linear-gradient(180deg,rgba(246,248,252,0),var(--bg,#F6F8FC) 40%);}
@media (max-width:640px){ .em-q{flex-direction:column;gap:8px;} .em-toolbar{gap:8px;} }

/* Part7 推荐人等表格内下拉：加宽+留箭头位，避免"请选择"被截断 (2026-07-22) */
.ai-table select.ai-inp { min-width: 88px; padding-right: 20px; }

/* ================= 服务端「我的学生」视觉优化 A：单行封顶 + 提密度（2026-07-24, v1.4.14）================= */
/* ① 时间线：内容封顶宽度 —— 消灭标题与右侧日期/负责人/状态之间的大空档；整体更紧凑 */
#timeline-content { max-width: min(1080px, 100%); }
#timeline-content .timeline-month-section { margin-bottom: 8px; }
#timeline-content .timeline-month-header { padding: 9px 14px; gap: 8px; }
#timeline-content .timeline-month-title { font-size: 13px; }
#timeline-content .timeline-month-count { font-size: 11px; padding: 1px 7px; }
#timeline-content .timeline-month-body { padding: 2px 14px; }
#timeline-content .timeline-month-item { padding: 7px 2px; gap: 10px; }
#timeline-content .timeline-item-title { font-size: 13px; font-weight: 500; }
#timeline-content .timeline-item-date { font-size: 12px; }
#timeline-content .timeline-item-source { font-weight: 600; padding: 1px 7px; }
/* 顶部筛选条内联「共 N 项」，去掉原来单独那块厚重灰盒（配合 render 改动） */
#timeline-content .tl-filter-bar { align-items: center; }
#timeline-content .tl-count-inline { font-size: 12px; color: var(--text-muted); margin-left: auto; white-space: nowrap; }

/* ② 侧边栏字体层级微调：分组标题更轻更淡当分隔用，菜单项略收字号 */
.sidebar-nav .nav-group-label { font-weight: 550; letter-spacing: 0.6px; color: #9AA4B2; }
.sidebar-nav .nav-item { font-size: 13.5px; }

/* ③ 中间「我的学生」抽屉：列表上缘更贴合 */
.student-flyout .sidebar-students-list { padding-top: 4px; }

/* ===== 时间线自适应 (1)+(2) 安全版（2026-07-24, v1.4.17）：min()封顶 + 视口断点，无容器查询 ===== */
@media (max-width: 1366px){
  #timeline-content .timeline-month-header{ padding: 8px 12px; }
  #timeline-content .timeline-month-item{ padding: 6px 2px; }
  #timeline-content .timeline-item-title{ font-size: 12.5px; }
  #timeline-content .timeline-item-date{ font-size: 11.5px; }
}
@media (min-width: 2200px){ #timeline-content{ max-width: min(1200px, 100%); } }

/* ===== 安全的 (4) 桌面密度收敛（2026-07-24, v1.4.18）：
   本站 #app/侧栏是 height:100vh，zoom 会让满高元素缩成 90vh、底部露空——故不用 zoom、不用 transform、不碰 100vh；
   仅在宽屏(>=1200)下把内容区「继承字号」收一档，纯文字变小、绝不塌陷。可调 12.5~13.5 或删。===== */
@media (min-width: 1200px){
  #page-content { font-size: 13px; }
}


/* 院校 USNews 综合排名徽标（美国校，与蓝色 QS 徽标区分；琥珀色，避开紫色）2026-07-25 */
.school-rank-usnews{ margin-left:5px; background:#FEF3C7 !important; color:#92600A !important; }
/* One-to-one course discovery: course -> teacher -> combined offering. */
.oto-page{display:flex;flex-direction:column;gap:20px;max-width:1180px;margin:0 auto;padding-bottom:32px}
.oto-course-hero,.oto-offer-hero,.oto-teacher-hero{display:grid;grid-template-columns:minmax(260px,420px) minmax(0,1fr);gap:32px;align-items:center;padding:28px 0;border-bottom:1px solid var(--border,#e4e8ef);background:#fff}
.oto-teacher-hero{grid-template-columns:112px minmax(0,1fr)}
.oto-course-cover{width:100%;aspect-ratio:16/10;overflow:hidden;background:#eef4ff;border:1px solid #dce6f8;border-radius:8px}
.oto-course-cover img{width:100%;height:100%;display:block;object-fit:cover}
.oto-cover-fallback{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:#eef4ff;color:#1769d2;font-size:58px;font-weight:700}
.oto-course-summary h1,.oto-offer-summary h1,.oto-teacher-hero h1{margin:5px 0 10px;font-size:38px;line-height:1.22;letter-spacing:0;color:var(--text-primary,#1f2933)}
.oto-course-summary>p,.oto-teacher-hero>div>p{margin:0 0 14px;color:var(--text-secondary,#5e6c7b);line-height:1.75}
.oto-chip-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.oto-chip-row span,.oto-teacher-meta span{display:inline-flex;align-items:center;min-height:26px;padding:3px 9px;border-radius:6px;background:#f2f6fc;color:#36536f;font-size:12px}
.oto-price{display:flex;align-items:baseline;gap:6px;margin-top:20px;color:#1769d2}
.oto-price small{color:var(--text-muted,#8b98a7);font-size:12px;margin-right:4px}
.oto-price strong{font-size:24px;letter-spacing:0}
.oto-price span{font-size:13px;color:var(--text-secondary,#5e6c7b)}
.oto-content-band{padding:8px 0 0}
.oto-rich{min-width:0;color:var(--text-secondary,#4c5b6b);font-size:14px;line-height:1.85}
.oto-rich h2,.oto-section-title h2{margin:0 0 14px;color:var(--text-primary,#1f2933);font-size:20px;letter-spacing:0}
.oto-rich img{max-width:100%;height:auto;border-radius:8px}
.oto-section-title{display:flex;justify-content:space-between;align-items:end;margin-bottom:14px}
.oto-section-title span{display:block;margin-bottom:3px;color:#1769d2;font-size:12px;font-weight:600}
.oto-teacher-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.oto-teacher-card{display:flex;flex-direction:column;min-width:0;padding:18px;background:#fff;border:1px solid var(--border,#e4e8ef);border-radius:8px;cursor:pointer;transition:border-color .16s,box-shadow .16s,transform .16s}
.oto-teacher-card:hover,.oto-course-option:hover{border-color:#8db7ed;box-shadow:0 8px 22px rgba(33,75,125,.10);transform:translateY(-2px)}
.oto-teacher-head,.oto-offer-teacher{display:flex;align-items:center;gap:12px}
.oto-teacher-head h3{margin:0 0 3px;font-size:16px;letter-spacing:0}
.oto-teacher-head p,.oto-offer-teacher span{margin:0;color:var(--text-muted,#8b98a7);font-size:12px}
.oto-teacher-avatar{width:54px;height:54px;flex:0 0 54px;display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:50%;background:#edf4ff;color:#1769d2;font-size:19px;font-weight:700}
.oto-teacher-avatar.large{width:96px;height:96px;flex-basis:96px;font-size:30px}
.oto-teacher-avatar img{width:100%;height:100%;display:block;object-fit:cover}
.oto-teacher-bio{flex:1;margin:14px 0 12px;color:var(--text-secondary,#5e6c7b);font-size:13px;line-height:1.7;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.oto-teacher-meta{display:flex;gap:7px;flex-wrap:wrap}
.oto-teacher-offer-price{display:flex;align-items:baseline;gap:4px;margin-top:14px;color:#1769d2;font-size:21px;font-weight:700}
.oto-teacher-offer-price span{font-size:12px;font-weight:500;color:var(--text-secondary,#5e6c7b)}
.oto-teacher-actions{display:flex;gap:8px;margin-top:16px;flex-wrap:wrap}
.oto-course-list{display:flex;flex-direction:column;gap:12px}
.oto-course-option{display:grid;grid-template-columns:130px minmax(0,1fr) auto;gap:16px;align-items:center;padding:12px;background:#fff;border:1px solid var(--border,#e4e8ef);border-radius:8px;cursor:pointer;transition:border-color .16s,box-shadow .16s,transform .16s}
.oto-course-option-cover{width:130px;aspect-ratio:16/10;display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:6px;background:#eef4ff;color:#1769d2;font-size:28px;font-weight:700}
.oto-course-option-cover img{width:100%;height:100%;object-fit:cover}
.oto-course-option-body{min-width:0}.oto-course-option-body small{color:#1769d2}.oto-course-option-body h3{margin:3px 0 5px;font-size:17px;letter-spacing:0}.oto-course-option-body p{margin:0 0 7px;color:var(--text-secondary,#5e6c7b);font-size:13px;line-height:1.55}.oto-course-option-body strong{color:#1769d2}.oto-course-option-body span{margin-left:4px;color:var(--text-muted,#8b98a7);font-size:12px}
.oto-breadcrumb{display:flex;align-items:center;gap:8px;color:var(--text-muted,#8b98a7);font-size:13px}.oto-breadcrumb button{padding:0;border:0;background:none;color:#1769d2;cursor:pointer;font:inherit}
.oto-offer-teacher{width:max-content;max-width:100%;margin:14px 0;padding:10px 12px;border:1px solid #dce6f8;border-radius:8px;background:#f8fbff;cursor:pointer}.oto-offer-teacher strong,.oto-offer-teacher span{display:block}.oto-book-btn{width:100%;max-width:320px;min-height:44px;margin-top:20px}
.oto-offer-columns{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;padding-top:8px}
@media(max-width:900px){.oto-teacher-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.oto-course-hero,.oto-offer-hero{grid-template-columns:minmax(220px,340px) minmax(0,1fr);gap:22px}}
@media(max-width:680px){.oto-page{gap:16px}.oto-course-hero,.oto-offer-hero,.oto-teacher-hero,.oto-offer-columns{grid-template-columns:1fr;gap:18px}.oto-teacher-hero{justify-items:start}.oto-course-summary h1,.oto-offer-summary h1,.oto-teacher-hero h1{font-size:26px}.oto-teacher-grid{grid-template-columns:1fr}.oto-course-option{grid-template-columns:86px minmax(0,1fr)}.oto-course-option-cover{width:86px}.oto-course-option>.btn{grid-column:1/-1;width:100%}.oto-book-btn{max-width:none}.oto-teacher-actions .btn{flex:1;min-width:130px}}

/* Student one-to-one course entrance: banner plus teacher-first SKU cards. */
.oto-course-shell-page{
  max-width:1280px;
  gap:24px;
  padding:4px 0 48px;
}
.oto-shell-nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:36px;
  color:var(--text-muted,#8b98a7);
  font-size:13px;
}
.oto-shell-nav button{
  display:inline-flex;
  align-items:center;
  gap:7px;
  min-height:36px;
  padding:0;
  border:0;
  background:transparent;
  color:var(--text-secondary,#526170);
  font:inherit;
  font-weight:600;
  cursor:pointer;
}
.oto-shell-nav button:hover{color:#1769d2}
.oto-shell-nav button svg{width:18px;height:18px;flex:0 0 18px}
.oto-shell-nav>span{color:var(--text-muted,#8b98a7)}
.oto-shell-banner{
  position:relative;
  height:320px;
  overflow:hidden;
  border-radius:8px;
  background:#dfeafa;
  isolation:isolate;
}
.oto-shell-banner-media,
.oto-shell-banner-media img{
  width:100%;
  height:100%;
  display:block;
}
.oto-shell-banner-media img{object-fit:cover;object-position:center}
.oto-shell-banner-scrim{
  position:absolute;
  inset:0;
  z-index:1;
  background:linear-gradient(90deg,rgba(7,24,49,.78) 0%,rgba(7,24,49,.54) 42%,rgba(7,24,49,.08) 76%,rgba(7,24,49,0) 100%);
  pointer-events:none;
}
.oto-shell-banner-copy{
  position:absolute;
  z-index:2;
  left:40px;
  bottom:34px;
  width:min(620px,calc(100% - 80px));
  color:#fff;
}
.oto-shell-banner-copy>span{
  display:block;
  margin-bottom:8px;
  color:#d7e8ff;
  font-size:13px;
  font-weight:700;
}
.oto-shell-banner-copy h1{
  margin:0;
  color:#fff;
  font-size:34px;
  line-height:1.25;
  letter-spacing:0;
}
.oto-shell-banner-copy p{
  max-width:560px;
  margin:10px 0 0;
  overflow:hidden;
  color:rgba(255,255,255,.86);
  font-size:14px;
  line-height:1.65;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
}
.oto-shell-banner-copy>div{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:16px;
}
.oto-shell-banner-copy>div strong{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:4px 10px;
  border:1px solid rgba(255,255,255,.34);
  border-radius:6px;
  background:rgba(9,29,55,.30);
  color:#fff;
  font-size:12px;
  font-weight:600;
}
.oto-shell-banner-fallback{
  width:100%;
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  background:#dfeafa;
  color:#1769d2;
}
.oto-shell-banner-fallback span{font-size:72px;font-weight:750;line-height:1}
.oto-shell-banner-fallback small{font-size:13px;font-weight:600}
.oto-shell-teacher-section{padding-top:4px}
.oto-shell-section-head{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:24px;
  margin-bottom:18px;
}
.oto-shell-section-head>div>span{
  display:block;
  margin-bottom:4px;
  color:#1769d2;
  font-size:12px;
  font-weight:700;
}
.oto-shell-section-head h2{
  margin:0;
  color:var(--text-primary,#1f2933);
  font-size:24px;
  line-height:1.35;
  letter-spacing:0;
}
.oto-shell-section-head p{
  margin:6px 0 0;
  color:var(--text-secondary,#5e6c7b);
  font-size:13px;
}
.oto-shell-section-head>strong{
  flex:0 0 auto;
  color:var(--text-secondary,#5e6c7b);
  font-size:13px;
  font-weight:600;
}
.oto-shell-teacher-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
}
.oto-shell-teacher-card{
  min-width:0;
  min-height:360px;
  display:flex;
  flex-direction:column;
  padding:20px;
  border:1px solid var(--border,#e1e7ef);
  border-radius:8px;
  background:#fff;
  transition:border-color .16s,box-shadow .16s,transform .16s;
}
.oto-shell-teacher-card:hover{
  border-color:#8db7ed;
  box-shadow:0 10px 24px rgba(33,75,125,.10);
  transform:translateY(-2px);
}
.oto-shell-teacher-head{display:flex;align-items:center;gap:14px;min-width:0}
.oto-shell-teacher-avatar{
  width:68px;
  height:68px;
  flex:0 0 68px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  border-radius:50%;
  background:#eaf2ff;
  color:#1769d2;
  font-size:23px;
  font-weight:700;
}
.oto-shell-teacher-avatar img{width:100%;height:100%;display:block;object-fit:cover}
.oto-shell-teacher-identity{min-width:0}
.oto-shell-teacher-identity>span{color:#1769d2;font-size:11px;font-weight:700}
.oto-shell-teacher-identity h3{
  margin:2px 0 3px;
  overflow:hidden;
  color:var(--text-primary,#1f2933);
  font-size:18px;
  line-height:1.35;
  letter-spacing:0;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.oto-shell-teacher-identity p{
  margin:0;
  overflow:hidden;
  color:var(--text-muted,#8b98a7);
  font-size:12px;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.oto-shell-offer-copy{margin-top:18px;padding-top:16px;border-top:1px solid #edf0f4}
.oto-shell-offer-copy h4{
  margin:0 0 7px;
  overflow:hidden;
  color:var(--text-primary,#1f2933);
  font-size:15px;
  line-height:1.5;
  letter-spacing:0;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.oto-shell-offer-copy p{
  min-height:42px;
  margin:0;
  overflow:hidden;
  color:var(--text-secondary,#5e6c7b);
  font-size:13px;
  line-height:1.62;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
}
.oto-shell-meta{
  min-height:28px;
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  margin-top:12px;
  overflow:hidden;
}
.oto-shell-meta span{
  display:inline-flex;
  align-items:center;
  min-height:26px;
  padding:3px 8px;
  border-radius:6px;
  background:#f2f6fc;
  color:#526b84;
  font-size:11px;
  white-space:nowrap;
}
.oto-shell-teacher-footer{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:12px;
  margin-top:auto;
  padding-top:18px;
}
.oto-shell-price{min-width:0;display:flex;align-items:baseline;gap:4px;color:#1769d2}
.oto-shell-price small{display:none}
.oto-shell-price strong{font-size:22px;line-height:1;letter-spacing:0}
.oto-shell-price span{color:var(--text-muted,#8b98a7);font-size:11px;white-space:nowrap}
.oto-shell-teacher-footer .btn{min-width:96px;min-height:40px;padding:8px 15px}
.oto-shell-empty{
  min-height:230px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:34px 20px;
  border:1px solid var(--border,#e1e7ef);
  border-radius:8px;
  background:#fff;
  text-align:center;
}
.oto-shell-empty>div{
  width:54px;
  height:54px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:#eef4ff;
  color:#1769d2;
}
.oto-shell-empty svg{width:25px;height:25px}
.oto-shell-empty h3{margin:14px 0 5px;color:var(--text-primary,#1f2933);font-size:16px;letter-spacing:0}
.oto-shell-empty p{margin:0;color:var(--text-muted,#8b98a7);font-size:13px}
@media(max-width:900px){
  .oto-shell-banner{height:280px}
  .oto-shell-teacher-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:680px){
  .oto-course-shell-page{gap:18px;padding-top:0}
  .oto-shell-nav>span{display:none}
  .oto-shell-banner{height:220px}
  .oto-shell-banner-copy{left:20px;bottom:20px;width:calc(100% - 40px)}
  .oto-shell-banner-copy h1{font-size:25px}
  .oto-shell-banner-copy p{font-size:13px;-webkit-line-clamp:1}
  .oto-shell-banner-copy>div{margin-top:12px}
  .oto-shell-section-head{align-items:start;margin-bottom:14px}
  .oto-shell-section-head h2{font-size:21px}
  .oto-shell-section-head p{max-width:260px;line-height:1.55}
  .oto-shell-teacher-grid{grid-template-columns:1fr}
  .oto-shell-teacher-card{min-height:340px;padding:18px}
  .oto-shell-teacher-footer .btn{min-width:104px}
}
/* 服务方详情：基本信息、专业背景与关联产品。 */
.provider-detail-page {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}

.provider-detail-toolbar {
  min-height: 56px;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border);
}

.provider-detail-identity {
  padding: 24px 28px;
  display: flex;
  align-items: center;
  gap: 18px;
}

.provider-detail-avatar {
  width: 72px;
  height: 72px;
  flex: 0 0 72px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: #1f3cff;
  background: #eef3ff;
  font-size: 26px;
  font-weight: 700;
}

.provider-detail-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.provider-detail-heading {
  min-width: 0;
}

.provider-detail-title {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.provider-detail-title h2 {
  margin: 0;
  font-size: 22px;
  line-height: 1.35;
  letter-spacing: 0;
}

.provider-detail-heading > p {
  margin: 6px 0 0;
  color: var(--text-muted);
  font-size: 14px;
}

.provider-detail-meta {
  margin-top: 10px;
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  color: var(--text-muted);
  font-size: 13px;
}

.provider-detail-section {
  padding: 22px 28px 26px;
  border-top: 1px solid var(--border);
}

.provider-detail-section-head {
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.provider-detail-section-head h3 {
  margin: 0;
  font-size: 16px;
  letter-spacing: 0;
}

.provider-detail-section-head > span {
  color: var(--text-muted);
  font-size: 13px;
}

.provider-info-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--border);
  border-left: 1px solid var(--border);
}

.provider-info-item {
  min-height: 76px;
  padding: 13px 15px;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.provider-info-item > span,
.provider-detail-notes > div > span {
  color: var(--text-muted);
  font-size: 12px;
}

.provider-info-item > strong {
  min-width: 0;
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 500;
  overflow-wrap: anywhere;
}

.provider-info-item > strong small {
  margin-top: 4px;
  display: block;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 400;
}

.provider-detail-notes {
  margin-top: 16px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 24px;
}

.provider-detail-notes > div {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
  color: var(--text-primary);
  font-size: 14px;
  line-height: 1.7;
  overflow-wrap: anywhere;
}

.provider-product-table table {
  min-width: 680px;
}

.provider-product-sub {
  margin-top: 4px;
  color: var(--text-muted);
  font-size: 12px;
}

.provider-empty-cell {
  padding: 28px !important;
  color: var(--text-muted);
  text-align: center;
}

.provider-edit-section-title {
  margin: 6px 0 14px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--border);
  color: var(--text-primary);
  font-size: 15px;
  font-weight: 700;
}

.provider-edit-section-title:not(:first-child) {
  margin-top: 24px;
}

@media (max-width: 980px) {
  .provider-info-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .provider-detail-toolbar,
  .provider-detail-identity,
  .provider-detail-section {
    padding-left: 16px;
    padding-right: 16px;
  }

  .provider-detail-identity {
    align-items: flex-start;
  }

  .provider-detail-avatar {
    width: 56px;
    height: 56px;
    flex-basis: 56px;
    font-size: 21px;
  }

  .provider-info-grid,
  .provider-detail-notes {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* 产品汇总：紧凑、可扫描的运营台布局。 */
.product-summary-page {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.product-summary-header {
  min-height: 56px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.product-summary-heading h2 {
  margin: 0;
  color: var(--text-primary);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0;
}

.product-summary-heading p {
  margin: 6px 0 0;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.5;
}

.product-summary-settings {
  height: 40px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 14px;
  background: #fff;
}

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

.product-summary-stats > div {
  min-width: 0;
  min-height: 86px;
  position: relative;
  overflow: hidden;
  padding: 16px 20px 15px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
}

.product-summary-stats > div::before {
  content: '';
  width: 3px;
  position: absolute;
  inset: 14px auto 14px 0;
  border-radius: 0 3px 3px 0;
  background: #1f3cff;
}

.product-summary-stats > .is-course::before {
  background: #3b82f6;
}

.product-summary-stats > .is-expert::before {
  background: #f59e0b;
}

.product-summary-stats > .is-education::before {
  background: #0f9f7f;
}

.product-summary-stats span {
  display: block;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.4;
}

.product-summary-stats strong {
  display: block;
  margin-top: 6px;
  color: var(--text-primary);
  font-size: 25px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
}

.product-summary-panel {
  min-width: 0;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
}

.product-summary-toolbar {
  padding: 15px 16px;
  display: grid;
  grid-template-columns: minmax(280px, 1fr) 142px 220px 132px auto;
  gap: 10px;
  align-items: center;
  border-bottom: 1px solid var(--border);
}

.product-summary-search {
  min-width: 0;
  height: 40px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 12px;
  color: #8a97a8;
  background: #fff;
  border: 1px solid #cfd8e5;
  border-radius: 6px;
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.product-summary-search:focus-within {
  border-color: #1f3cff;
  box-shadow: 0 0 0 3px rgba(31, 60, 255, 0.1);
}

.product-summary-search svg {
  flex: 0 0 auto;
}

.product-summary-search input {
  width: 100%;
  min-width: 0;
  height: 38px;
  padding: 0;
  color: var(--text-primary);
  background: transparent;
  border: 0;
  border-radius: 0;
  outline: 0;
  box-shadow: none;
  font-size: 13px;
}

.product-summary-search input:focus {
  border: 0;
  box-shadow: none;
}

.product-summary-filter,
.product-summary-category-select {
  width: 100%;
  height: 40px;
  min-width: 0;
  padding: 0 10px;
  color: var(--text-primary);
  background: #fff;
  border: 1px solid #cfd8e5;
  border-radius: 6px;
  font-size: 13px;
}

.product-summary-filter:focus,
.product-summary-category-select:focus {
  border-color: #1f3cff;
  outline: 0;
  box-shadow: 0 0 0 3px rgba(31, 60, 255, 0.1);
}

.product-summary-reset {
  height: 40px;
  padding: 0 14px;
  white-space: nowrap;
}

.product-summary-result {
  min-height: 34px;
  padding: 8px 16px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  color: var(--text-muted);
  background: #fafbfc;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
}

.product-summary-result span {
  margin-right: 3px;
  color: var(--text-secondary);
  font-weight: 600;
}

.product-summary-table-wrap {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.product-summary-table {
  width: 100%;
  min-width: 1180px;
  table-layout: fixed;
  border-collapse: collapse;
}

.product-summary-table .col-sku { width: 9%; }
.product-summary-table .col-name { width: 23%; }
.product-summary-table .col-type { width: 8%; }
.product-summary-table .col-provider { width: 9%; }
.product-summary-table .col-catalog { width: 12%; }
.product-summary-table .col-category { width: 23%; }
.product-summary-table .col-price { width: 8%; }
.product-summary-table .col-status { width: 8%; }

.product-summary-table th {
  height: 44px;
  padding: 10px 14px;
  color: #738094;
  background: #f8fafc;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
  text-align: left;
  letter-spacing: 0;
  white-space: nowrap;
}

.product-summary-table td {
  min-width: 0;
  padding: 14px;
  color: var(--text-secondary);
  background: #fff;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  line-height: 1.45;
  vertical-align: middle;
}

.product-summary-table tbody tr:last-child td {
  border-bottom: 0;
}

.product-summary-table tbody tr:hover td {
  background: #f8faff;
}

.product-summary-table tbody tr.is-category-invalid td {
  background: #fffdf9;
}

.product-summary-table tbody tr.is-category-invalid:hover td {
  background: #fffaf2;
}

.product-summary-sku {
  max-width: 100%;
  display: inline-block;
  overflow: hidden;
  padding: 4px 7px;
  color: #24324a;
  background: #f1f4f9;
  border-radius: 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-summary-name {
  overflow: hidden;
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 650;
  line-height: 1.45;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-summary-sub {
  margin-top: 4px;
  overflow: hidden;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-summary-type,
.product-summary-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

.product-summary-status {
  min-width: 62px;
}

.product-summary-nowrap,
.product-summary-catalog {
  min-width: 0;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}

.product-summary-nowrap {
  white-space: nowrap;
}

.product-summary-catalog {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.product-summary-category-select {
  height: 38px;
  font-size: 12px;
}

.product-summary-category-warning {
  margin-top: 7px;
  display: flex;
  align-items: center;
  gap: 6px;
  color: #c2410c;
  font-size: 12px;
  line-height: 1.35;
}

.product-summary-category-warning span {
  width: 6px;
  height: 6px;
  flex: 0 0 6px;
  border-radius: 50%;
  background: #f97316;
}

.product-summary-price {
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}

.product-summary-price > span,
.product-summary-compensation {
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 400;
}

.product-summary-compensation {
  margin-top: 5px;
  white-space: nowrap;
}

@media (max-width: 1180px) {
  .product-summary-toolbar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .product-summary-search {
    grid-column: 1 / -1;
  }

  .product-summary-reset {
    width: 100%;
  }
}

@media (max-width: 760px) {
  .product-summary-header {
    align-items: stretch;
    flex-direction: column;
  }

  .product-summary-settings {
    width: 100%;
    justify-content: center;
  }

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

  .product-summary-stats > div {
    min-height: 78px;
    padding: 14px 16px;
  }

  .product-summary-toolbar {
    grid-template-columns: minmax(0, 1fr);
  }

  .product-summary-filter.is-category {
    grid-column: auto;
  }
}
.course-spec-editor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: 12px;
}

.course-spec-editor-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-secondary);
  transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}

.course-spec-editor-card.is-enabled {
  border-color: #8eb6ff;
  background: #f5f8ff;
  box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.08);
}

.form-group label.course-spec-editor-toggle {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 11px;
  margin: 0;
  color: var(--text-primary);
  font-size: inherit;
  cursor: pointer;
  user-select: none;
}

.course-spec-editor-toggle > input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.course-spec-editor-switch {
  position: relative;
  display: inline-block;
  flex: 0 0 auto;
  width: 38px;
  height: 22px;
  border: 1px solid #cbd5e1;
  border-radius: 999px;
  background: #e2e8f0;
  transition: background-color 160ms ease, border-color 160ms ease;
}

.course-spec-editor-switch::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.2);
  transition: transform 160ms ease;
}

.course-spec-editor-toggle > input:checked + .course-spec-editor-switch {
  border-color: var(--primary);
  background: var(--primary);
}

.course-spec-editor-toggle > input:checked + .course-spec-editor-switch::after {
  transform: translateX(16px);
}

.course-spec-editor-toggle > input:focus-visible + .course-spec-editor-switch {
  outline: 3px solid rgba(37, 99, 235, 0.18);
  outline-offset: 2px;
}

.course-spec-editor-name {
  display: block;
  min-width: 0;
  white-space: nowrap;
}

.course-spec-editor-name strong,
.course-spec-editor-name small {
  display: block;
  letter-spacing: 0;
}

.course-spec-editor-name strong {
  color: var(--text-primary);
  font-size: 15px;
  line-height: 22px;
}

.course-spec-editor-name small {
  margin-top: 2px;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
}

.form-group label.course-spec-editor-price {
  display: block;
  flex: 1 1 210px;
  min-width: 180px;
  margin: 0;
}

.course-spec-editor-price > span:first-child {
  display: block;
  margin-bottom: 6px;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 500;
  line-height: 18px;
  white-space: nowrap;
}

.course-spec-editor-price-control {
  display: flex;
  align-items: center;
  width: 100%;
  min-width: 0;
}

.course-spec-editor-currency {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  width: 38px;
  border: 1px solid var(--border);
  border-right: 0;
  border-radius: 6px 0 0 6px;
  background: #fff;
  color: var(--text-secondary);
  font-size: 14px;
}

.course-spec-editor-price-control input {
  flex: 1 1 auto;
  width: 1%;
  min-width: 0;
  border-radius: 0 6px 6px 0;
}

.course-spec-editor-card:not(.is-enabled) .course-spec-editor-price {
  opacity: 0.58;
}

.course-spec-editor-help {
  display: block;
  margin-top: 8px;
  color: var(--text-muted);
  line-height: 1.6;
}

@media (max-width: 540px) {
  .course-spec-editor-card {
    align-items: stretch;
  }

  .course-spec-editor-price {
    flex-basis: 100%;
  }
}

/* Student detail tabs remain horizontally scrollable without visible scrollbars. */
.student-detail-tabs {
  display: flex;
  gap: 0;
  overflow-x: auto;
  overflow-y: hidden;
  margin-bottom: 16px;
  border-bottom: 2px solid var(--border);
  white-space: nowrap;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.student-detail-tabs::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.student-detail-tabs .tab-btn {
  flex: 0 0 auto;
}
.core-handoff-error {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 32px;
  background: #f6f8fc;
  color: #12233d;
}

.core-handoff-error section {
  width: min(520px, 100%);
  padding: 36px;
  border: 1px solid #dfe6f2;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 12px 32px rgba(18, 35, 61, 0.08);
}

.core-handoff-error h1 { margin: 0 0 12px; font-size: 24px; }
.core-handoff-error p { margin: 0 0 24px; color: #66748a; }

.core-handoff-error a {
  color: #1f3cff;
  font-weight: 600;
  text-decoration: none;
}