/* ============================================================
   国际学校统一管理与升学指导平台 — 全局样式
   ============================================================ */

/* CSS 变量 */
:root {
  --primary: #4F46E5;
  --primary-light: #6366F1;
  --primary-dark: #4338CA;
  --primary-bg: #EEF2FF;
  --success: #10B981;
  --success-bg: #D1FAE5;
  --warning: #F59E0B;
  --warning-bg: #FEF3C7;
  --danger: #EF4444;
  --danger-bg: #FEE2E2;
  --info: #3B82F6;
  --info-bg: #DBEAFE;
  --slate: #64748B;
  --slate-bg: #F1F5F9;

  --gray-50: #F9FAFB;
  --gray-100: #F3F4F6;
  --gray-200: #E5E7EB;
  --gray-300: #D1D5DB;
  --gray-400: #9CA3AF;
  --gray-500: #6B7280;
  --gray-600: #4B5563;
  --gray-700: #374151;
  --gray-800: #1F2937;
  --gray-900: #111827;

  --sidebar-width: 240px;
  --sidebar-collapsed-width: 64px;
  --header-height: 60px;
  --radius: 8px;
  --radius-lg: 12px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
  --transition: all 0.2s ease;
}

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

html, body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  color: var(--gray-800);
  background: var(--gray-50);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-dark); }

/* 布局 */
.app-layout {
  display: flex;
  min-height: 100vh;
}

/* 侧边栏 */
.sidebar {
  width: var(--sidebar-width);
  background: var(--gray-900);
  color: var(--gray-300);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  position: fixed;
  height: 100vh;
  z-index: 100;
  transition: var(--transition);
}

.sidebar-brand {
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  white-space: nowrap;
  overflow: hidden;
}

.sidebar-brand .logo {
  width: 32px;
  height: 32px;
  background: var(--primary);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 700;
  font-size: 16px;
  flex-shrink: 0;
}

.sidebar-brand .brand-text {
  font-size: 13px;
  font-weight: 600;
  color: white;
  line-height: 1.3;
}

.sidebar-brand .brand-sub {
  font-size: 10px;
  color: var(--gray-400);
  margin-top: 2px;
}

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

.sidebar-nav .nav-section {
  padding: 8px 20px 4px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gray-500);
  font-weight: 600;
}

.sidebar-nav .nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 20px;
  cursor: pointer;
  transition: var(--transition);
  color: var(--gray-300);
  font-size: 13px;
  border-left: 3px solid transparent;
  white-space: nowrap;
  overflow: hidden;
}

.sidebar-nav .nav-item:hover {
  background: rgba(255,255,255,0.05);
  color: white;
}

.sidebar-nav .nav-item.active {
  background: rgba(79,70,229,0.15);
  color: white;
  border-left-color: var(--primary);
}

.sidebar-nav .nav-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sidebar-footer {
  padding: 12px 20px;
  border-top: 1px solid rgba(255,255,255,0.08);
  font-size: 11px;
  color: var(--gray-500);
}

/* 主内容区 */
.main-content {
  min-width: 0;
  flex: 1;
  margin-left: var(--sidebar-width);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* 顶部栏 */
.topbar {
  height: var(--header-height);
  background: white;
  border-bottom: 1px solid var(--gray-200);
  display: flex;
  align-items: center;
  padding: 0 24px;
  gap: 16px;
  position: sticky;
  top: 0;
  z-index: 50;
}

.topbar-search {
  min-width: 0;
  flex: 1;
  max-width: 400px;
  position: relative;
}

.topbar-search input {
  width: 100%;
  height: 36px;
  padding: 0 12px 0 36px;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius);
  font-size: 13px;
  background: var(--gray-50);
  transition: var(--transition);
}

.topbar-search input:focus {
  outline: none;
  border-color: var(--primary);
  background: white;
  box-shadow: 0 0 0 3px rgba(79,70,229,0.1);
}

.topbar-search .search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--gray-400);
}

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

/* 角色切换器 */
.role-switcher {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  background: var(--primary-bg);
  border-radius: var(--radius);
  max-width: 280px;
}

.role-switcher select {
  border: none;
  background: transparent;
  font-size: 12px;
  color: var(--primary-dark);
  font-weight: 600;
  cursor: pointer;
  outline: none;
  padding: 4px 4px;
  max-width: 210px;
  text-overflow: ellipsis;
}

.role-switcher .role-badge {
  font-size: 10px;
  background: var(--primary);
  color: white;
  padding: 2px 6px;
  border-radius: 4px;
  white-space: nowrap;
}

/* 当前身份标识 */
.identity-chip {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.2;
  padding-right: 4px;
}

.identity-chip .identity-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--gray-700);
  white-space: nowrap;
}

.identity-chip .identity-role {
  font-size: 10px;
  color: var(--gray-400);
  white-space: nowrap;
}

@media (max-width: 900px) {
  .identity-chip { display: none; }
}

/* 用户头像 */
.user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--primary);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
}

/* 页面内容 */
.page-content {
  padding: 24px;
  flex: 1;
}

.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  flex-wrap: wrap;
  gap: 12px;
}

.page-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--gray-900);
}

.page-subtitle {
  font-size: 13px;
  color: var(--gray-500);
  margin-top: 2px;
}

/* 卡片 */
.card {
  background: white;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--gray-200);
  overflow: hidden;
}

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

.card-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--gray-800);
}

.card-body {
  padding: 20px;
}

/* 统计卡片 */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(172px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.stat-card {
  background: white;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--gray-200);
  padding: 20px;
  cursor: pointer;
  transition: var(--transition);
}

.stat-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.stat-card .stat-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  font-size: 20px;
}

.stat-card .stat-value {
  font-size: 28px;
  font-weight: 700;
  color: var(--gray-900);
  line-height: 1;
}

.stat-card .stat-label {
  font-size: 12px;
  color: var(--gray-500);
  margin-top: 6px;
}

.stat-card .stat-trend {
  font-size: 11px;
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* 表格 */
.table-container {
  overflow-x: auto;
  border-radius: var(--radius-lg);
}

table.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

table.data-table thead th {
  background: var(--gray-50);
  padding: 10px 12px;
  text-align: left;
  font-weight: 600;
  color: var(--gray-600);
  border-bottom: 1px solid var(--gray-200);
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}

table.data-table thead th:hover {
  background: var(--gray-100);
}

table.data-table tbody td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--gray-100);
  color: var(--gray-700);
}

table.data-table tbody tr {
  transition: var(--transition);
  cursor: pointer;
}

table.data-table tbody tr:hover {
  background: var(--gray-50);
}

table.data-table tbody tr.selected {
  background: var(--primary-bg);
}

/* 标签/徽章 */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.badge-gray { background: var(--slate-bg); color: var(--slate); }
.badge-blue { background: var(--info-bg); color: var(--info); }
.badge-green { background: var(--success-bg); color: var(--success); }
.badge-amber { background: var(--warning-bg); color: var(--warning); }
.badge-red { background: var(--danger-bg); color: var(--danger); }
.badge-indigo { background: var(--primary-bg); color: var(--primary); }
.badge-purple { background: #F3E8FF; color: #7C3AED; }
.badge-orange { background: #FFEDD5; color: #EA580C; }
.badge-slate { background: #E2E8F0; color: #475569; }

/* ===== 学生标签 ===== */
.tag-chip {
  display: inline-flex;
  align-items: center;
  padding: 1px 7px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 500;
  line-height: 18px;
  white-space: nowrap;
  border: 1px solid transparent;
}

.tag-purple  { background: #F3E8FF; color: #6D28D9; border-color: #E9D5FF; }
.tag-indigo  { background: var(--primary-bg); color: var(--primary); border-color: #C7D2FE; }
.tag-blue    { background: var(--info-bg); color: var(--info); border-color: #BFDBFE; }
.tag-teal    { background: #CCFBF1; color: #0F766E; border-color: #99F6E4; }
.tag-green   { background: var(--success-bg); color: var(--success); border-color: #BBF7D0; }
.tag-amber   { background: var(--warning-bg); color: #B45309; border-color: #FDE68A; }
.tag-orange  { background: #FFEDD5; color: #C2410C; border-color: #FED7AA; }
.tag-red     { background: var(--danger-bg); color: var(--danger); border-color: #FECACA; }
.tag-slate   { background: #E2E8F0; color: #475569; border-color: #CBD5E1; }
.tag-gray    { background: var(--slate-bg); color: var(--slate); border-color: #E2E8F0; }

.tag-more {
  background: var(--gray-100);
  color: var(--gray-500);
  border-color: var(--gray-200);
  cursor: help;
}

.tag-empty { color: var(--gray-300); font-size: 12px; }

/* 标签组容器：限制宽度，超出换行 */
.tag-group {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  max-width: 260px;
}

/* 详情页标签区 */
.tag-section {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.tag-section .tag-chip {
  padding: 3px 10px;
  font-size: 12px;
}

/* 表单内标签多选 */
.tag-picker {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tag-picker-group-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--gray-500);
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}

.tag-picker-options {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.tag-option {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border: 1px solid var(--gray-200);
  border-radius: 14px;
  font-size: 12px;
  color: var(--gray-600);
  cursor: pointer;
  user-select: none;
  transition: all 0.15s ease;
  background: var(--white, white);
}

.tag-option:hover { border-color: var(--primary); color: var(--primary); }

.tag-option input { display: none; }

.tag-option.checked {
  background: var(--primary-bg);
  border-color: var(--primary);
  color: var(--primary);
  font-weight: 600;
}

.tag-option .tag-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* 学生列表中的标签列 */
td .tag-group { max-width: 240px; }

/* ===== 文档上传 ===== */
.upload-zone {
  border: 2px dashed var(--gray-300);
  border-radius: 10px;
  padding: 26px 20px;
  text-align: center;
  cursor: pointer;
  background: var(--gray-50);
  transition: all 0.15s ease;
}

.upload-zone:hover {
  border-color: var(--primary);
  background: var(--primary-bg);
}

.upload-zone.dragover {
  border-color: var(--primary);
  background: var(--primary-bg);
  box-shadow: inset 0 0 0 2px var(--primary-bg);
}

.upload-icon {
  font-size: 26px;
  line-height: 1;
  margin-bottom: 8px;
}

.upload-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-700);
  margin-bottom: 4px;
}

.upload-hint {
  font-size: 11px;
  color: var(--gray-400);
  line-height: 1.7;
}

/* 附件列表 */
.file-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.file-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--gray-50);
  border: 1px solid var(--gray-100);
  border-radius: 8px;
}

.file-icon {
  font-size: 20px;
  line-height: 1;
  flex-shrink: 0;
}

.file-meta {
  flex: 1;
  min-width: 0;
}

.file-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--gray-800);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-sub {
  font-size: 11px;
  color: var(--gray-400);
  margin-top: 2px;
}

.file-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
  align-items: center;
}

.file-actions a.btn {
  text-decoration: none;
}


/* 按钮 */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition);
  border: 1px solid transparent;
  white-space: nowrap;
}

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

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

.btn-secondary {
  background: white;
  color: var(--gray-700);
  border-color: var(--gray-300);
}

.btn-secondary:hover {
  background: var(--gray-50);
  border-color: var(--gray-400);
}

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

.btn-danger:hover {
  background: #DC2626;
}

.btn-sm {
  padding: 4px 10px;
  font-size: 12px;
}

.btn-icon {
  padding: 6px;
  width: 32px;
  height: 32px;
  justify-content: center;
}

.btn-group {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* 表单 */
.form-group {
  margin-bottom: 16px;
}

.form-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--gray-600);
  margin-bottom: 6px;
}

.form-label .required {
  color: var(--danger);
  margin-left: 2px;
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius);
  font-size: 13px;
  color: var(--gray-800);
  background: white;
  transition: var(--transition);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(79,70,229,0.1);
}

.form-input.error,
.form-select.error,
.form-textarea.error {
  border-color: var(--danger);
}

.form-error {
  font-size: 11px;
  color: var(--danger);
  margin-top: 4px;
}

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

.form-row {
  display: flex;
  gap: 16px;
}

.form-row > .form-group {
  flex: 1;
}

/* 模态框 */
.modal-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.4);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.modal {
  background: white;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  width: 100%;
  max-width: 600px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  animation: slideUp 0.2s ease;
}

@keyframes slideUp {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.modal.modal-lg { max-width: 800px; }
.modal.modal-xl { max-width: 1000px; }

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

.modal-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--gray-900);
}

.modal-close {
  background: none;
  border: none;
  font-size: 22px;
  cursor: pointer;
  color: var(--gray-400);
  padding: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  transition: var(--transition);
}

.modal-close:hover {
  background: var(--gray-100);
  color: var(--gray-600);
}

.modal-body {
  padding: 24px;
  overflow-y: auto;
  flex: 1;
}

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

/* 筛选栏 */
.filter-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.filter-bar .filter-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.filter-bar .filter-label {
  font-size: 12px;
  color: var(--gray-500);
  font-weight: 500;
}

.filter-bar select,
.filter-bar input {
  padding: 6px 10px;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius);
  font-size: 12px;
  background: white;
  cursor: pointer;
}

/* 空状态 */
.empty-state {
  text-align: center;
  padding: 48px 20px;
  color: var(--gray-400);
}

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

.empty-state .empty-text {
  font-size: 14px;
}

/* 详情面板 */
.detail-panel {
  background: white;
  border-radius: var(--radius-lg);
  border: 1px solid var(--gray-200);
  overflow: hidden;
}

.detail-section {
  padding: 16px 20px;
  border-bottom: 1px solid var(--gray-100);
}

.detail-section:last-child {
  border-bottom: none;
}

.detail-section-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-700);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}

.detail-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.detail-item .detail-label {
  font-size: 11px;
  color: var(--gray-400);
  font-weight: 500;
}

.detail-item .detail-value {
  font-size: 13px;
  color: var(--gray-700);
  font-weight: 500;
}

/* 时间线 */
.timeline {
  position: relative;
  padding-left: 24px;
}

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

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

.timeline-item::before {
  content: '';
  position: absolute;
  left: -20px;
  top: 4px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--primary);
  border: 2px solid white;
  box-shadow: 0 0 0 2px var(--primary);
}

.timeline-item .timeline-date {
  font-size: 11px;
  color: var(--gray-400);
  margin-bottom: 4px;
}

.timeline-item .timeline-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-700);
}

.timeline-item .timeline-content {
  font-size: 12px;
  color: var(--gray-500);
  margin-top: 4px;
}

/* 日历 */
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  background: var(--gray-200);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  overflow: hidden;
}

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

.calendar-cell {
  min-height: 80px;
  padding: 4px;
  background: white;
  transition: var(--transition);
  cursor: pointer;
  position: relative;
}

.calendar-cell:hover {
  background: var(--gray-50);
}

.calendar-cell.other-month {
  background: var(--gray-50);
  color: var(--gray-300);
}

.calendar-cell.today {
  background: var(--primary-bg);
}

.calendar-cell .calendar-date {
  font-size: 12px;
  font-weight: 600;
  color: var(--gray-600);
  text-align: right;
}

.calendar-cell.today .calendar-date {
  color: var(--primary);
}

.calendar-event {
  font-size: 10px;
  padding: 2px 4px;
  border-radius: 3px;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}

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

.toast {
  background: white;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  min-width: 280px;
  animation: slideInRight 0.3s ease;
  border-left: 4px solid var(--primary);
}

@keyframes slideInRight {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

.toast.toast-success { border-left-color: var(--success); }
.toast.toast-error { border-left-color: var(--danger); }
.toast.toast-warning { border-left-color: var(--warning); }

/* 标签页 */
.tabs {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--gray-200);
  margin-bottom: 16px;
}

.tab {
  padding: 8px 16px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  color: var(--gray-500);
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: var(--transition);
}

.tab:hover {
  color: var(--gray-700);
}

.tab.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
  font-weight: 600;
}

/* 分页 */
.pagination {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 16px;
}

.pagination button {
  padding: 4px 10px;
  border: 1px solid var(--gray-300);
  background: white;
  border-radius: var(--radius);
  font-size: 12px;
  cursor: pointer;
  transition: var(--transition);
}

.pagination button:hover:not(:disabled) {
  background: var(--gray-50);
  border-color: var(--primary);
}

.pagination button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.pagination .page-info {
  font-size: 12px;
  color: var(--gray-500);
}

/* 演示声明 */
.demo-notice {
  background: var(--warning-bg);
  border: 1px solid var(--warning);
  border-radius: var(--radius);
  padding: 8px 12px;
  font-size: 12px;
  color: #92400E;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}

/* 响应式 */
@media (max-width: 1024px) {
  .stat-grid {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  }
}

@media (max-width: 768px) {
  .sidebar {
    transform: translateX(-100%);
  }
  .sidebar.open {
    transform: translateX(0);
  }
  .main-content {
    margin-left: 0;
  }
  .topbar {
    padding: 0 12px;
  }
  .topbar-search {
    max-width: 200px;
  }
  .page-content {
    padding: 12px;
  }
  .stat-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  }
  .stat-card .stat-value {
    font-size: 22px;
  }
  .form-row {
    flex-direction: column;
  }
  .modal {
    max-width: 100%;
    max-height: 95vh;
  }
  .calendar-cell {
    min-height: 50px;
  }
  .calendar-event {
    display: none;
  }
}

/* 移动端遮罩 */
.sidebar-overlay {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.4);
  z-index: 99;
}

.sidebar-overlay.show {
  display: block;
}

/* 移动端菜单按钮 */
.mobile-menu-btn {
  display: none;
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  padding: 4px;
}

@media (max-width: 768px) {
  .mobile-menu-btn {
    display: block;
  }
}

/* 工具类 */
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-gray { color: var(--gray-500); }
.text-bold { font-weight: 600; }
.text-sm { font-size: 12px; }
.text-xs { font-size: 11px; }
.mt-2 { margin-top: 8px; }
.mt-4 { margin-top: 16px; }
.mb-2 { margin-bottom: 8px; }
.mb-4 { margin-bottom: 16px; }
.flex { display: flex; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: 8px; }
.gap-4 { gap: 16px; }
.w-full { width: 100%; }
.hidden { display: none; }
.cursor-pointer { cursor: pointer; }

/* Work navigation: daily actions first, configuration on demand. */
.sidebar-nav button.nav-item { width:100%; border:0; border-left:3px solid transparent; background:transparent; text-align:left; font:inherit; font-size:13px; }
.sidebar-nav button.nav-item.active { background:rgba(79,70,229,.2); border-left-color:#a5b4fc; }
.sidebar-nav .nav-icon { font-family:system-ui,sans-serif; font-size:19px; width:22px; text-align:center; }
.nav-divider { height:1px; margin:18px 20px 12px; background:rgba(255,255,255,.1); }
.nav-group > summary { padding:12px 20px; font-size:12px; cursor:pointer; color:#cbd5e1; }
.nav-group[open] > summary { color:white; }
.nav-group .nav-item { padding-left:26px; }
.sidebar-home-link { border:0; background:transparent; padding:5px 0; color:#c7d2fe; cursor:pointer; font:inherit; text-align:left; }
.workspace-path { display:flex; align-items:center; gap:10px; color:#64748b; font-size:12px; margin-bottom:16px; }
.workspace-path button,.home-text-link { border:0; background:transparent; font:inherit; color:#4f46e5; cursor:pointer; padding:4px 0; }
.workflow-strip { display:flex; gap:0; border:1px solid #dce2eb; border-radius:8px; margin-bottom:24px; overflow:hidden; background:white; }
.workflow-step { display:flex; align-items:center; justify-content:center; gap:8px; flex:1; padding:13px 10px; background:transparent; border:0; border-right:1px solid #e2e8f0; color:#64748b; font:inherit; font-size:12px; cursor:pointer; }
.workflow-step:last-child { border-right:0; }
.workflow-step > span { display:grid; place-items:center; width:22px; height:22px; border-radius:50%; background:#eef2f7; font-size:11px; }
.workflow-step.is-current { background:#eef2ff; color:#4338ca; font-weight:600; }
.workflow-step.is-current > span { background:#4f46e5; color:white; }
.prototype-note { margin-top:24px; padding-top:12px; border-top:1px solid #e2e8f0; color:#64748b; font-size:11px; }
.prototype-note summary { cursor:pointer; }
.prototype-note p { max-width:760px; margin-top:8px; line-height:1.8; }
.home-workspace { max-width:1440px; margin:0 auto; }
.home-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:24px; }
.home-heading h1 { font-size:28px; font-weight:650; color:#17233b; letter-spacing:-.5px; }
.home-heading p { margin-top:6px; color:#64748b; font-size:14px; }
.home-scope { color:#64748b; font-size:12px; border:1px solid #dce2eb; padding:5px 12px; border-radius:20px; white-space:nowrap; }
.home-actions { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-bottom:24px; }
.home-action { display:flex; flex-direction:column; align-items:flex-start; background:#fff; border:1px solid #dce2eb; border-radius:10px; padding:22px; text-align:left; font:inherit; cursor:pointer; color:#17233b; }
.home-action:hover { border-color:#818cf8; background:#fafbff; }
.home-action .home-action-icon { color:#4f46e5; font-size:25px; margin-bottom:12px; line-height:1; }
.home-action strong { font-size:16px; margin-bottom:6px; }
.home-action > span:not(.home-action-icon) { color:#64748b; font-size:12px; line-height:1.6; }
.home-action b { display:flex; align-items:center; justify-content:space-between; width:100%; margin-top:20px; color:#4f46e5; font-size:12px; font-weight:500; }
.home-action b span { font-size:20px; }
.home-columns { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:20px; }
.home-panel { min-width:0; background:white; border:1px solid #dce2eb; border-radius:10px; overflow:hidden; }
.home-panel > header { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:18px 22px; border-bottom:1px solid #edf0f5; }
.home-workspace h2 { font-size:15px; font-weight:650; color:#17233b; }
.home-no-work { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:35px 20px; text-align:center; }
.home-no-work > span { display:grid; place-items:center; width:38px; height:38px; border-radius:50%; color:#15803d; background:#edf7f0; font-size:20px; margin-bottom:12px; }
.home-no-work strong { font-size:14px; font-weight:500; }
.home-no-work p { font-size:12px; color:#64748b; margin:6px 0 18px; }
.home-helper { margin:16px 22px 0; color:#64748b; font-size:12px; }
.home-steps { list-style:none; padding:18px 22px; }
.home-steps li { display:flex; align-items:flex-start; gap:12px; padding:0 0 20px; position:relative; }
.home-steps li:last-child { padding-bottom:0; }
.home-steps li > span { display:grid; place-items:center; flex-shrink:0; width:26px; height:26px; border-radius:50%; color:#4f46e5; background:#eef2ff; font-size:12px; }
.home-steps strong { font-size:13px; font-weight:600; }
.home-steps p { color:#64748b; font-size:12px; margin:4px 0; line-height:1.7; }
.home-steps button { border:0; background:transparent; padding:3px 0; color:#4f46e5; cursor:pointer; font:inherit; font-size:12px; }
.home-plan-tasks { display:flex; gap:12px; align-items:center; justify-content:space-between; border-top:1px solid #edf0f5; padding:14px 22px; color:#64748b; font-size:12px; line-height:1.7; }
.home-plan-tasks strong { color:#334155; font-weight:500; }
.home-plan-tasks button { white-space:nowrap; }
.home-queue > button { display:flex; align-items:center; gap:12px; padding:16px 22px; border:0; border-bottom:1px solid #edf0f5; background:white; width:100%; text-align:left; cursor:pointer; font:inherit; }
.home-queue > button:hover { background:#f8fafc; }
.home-queue > button > span:nth-child(2) { flex:1; min-width:0; }
.home-queue strong { display:block; font-size:13px; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.home-queue small { color:#64748b; font-size:11px; }
.home-queue-tag { background:#eef2ff; color:#4338ca; padding:4px 7px; border-radius:4px; font-size:11px; white-space:nowrap; }
.home-queue-tag.is-overdue { background:#fff1f2; color:#be123c; }
.home-students { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-top:20px; padding:22px; background:white; border:1px solid #dce2eb; border-radius:10px; }
.home-students p { font-size:11px; color:#64748b; margin-top:4px; }
.home-grade-links { display:flex; gap:10px; flex-wrap:wrap; }
.home-grade-links button { display:flex; gap:10px; padding:9px 12px; background:#f8fafc; border:1px solid #e2e8f0; border-radius:6px; font:inherit; font-size:12px; cursor:pointer; color:#475569; }
.home-grade-links strong { color:#17233b; font-weight:500; }
.home-grade-links button:hover { border-color:#818cf8; }
.home-statistics { margin-top:24px; border-top:1px solid #e2e8f0; padding-top:15px; }
.home-statistics > summary { font-size:12px; color:#64748b; cursor:pointer; }
.home-statistics > div { padding-top:24px; }
.home-workspace button { touch-action:manipulation; }
.tabs > button.tab { font:inherit; background:transparent; border:0; border-bottom:2px solid transparent; }
.tabs > button.tab.active { border-bottom-color:var(--primary); }
.grade-rule-bar { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 20px; margin-bottom:18px; border:1px solid #dce2eb; background:#f8fafc; border-radius:8px; }
.grade-rule-bar strong { font-size:14px; color:#17233b; }
.grade-rule-bar p,.grade-help { font-size:12px; color:#64748b; line-height:1.8; margin:6px 0 12px; }
.grade-rule-bar p { margin-bottom:0; }
.grade-rule-bar .btn { flex-shrink:0; }
.grade-import-steps { padding:10px 12px; margin-bottom:12px; border-radius:6px; background:#eef2ff; color:#4338ca; font-size:13px; }
.grade-confirm { display:flex; align-items:flex-start; gap:8px; margin:16px 0; font-size:13px; line-height:1.8; }
.grade-confirm input { margin-top:5px; }
.grade-preview-summary { margin-top:18px; padding:12px; background:#eef2ff; color:#4338ca; border-radius:6px; font-weight:600; }
.grade-error { color:#b91c1c; font-size:12px; line-height:1.8; margin:8px 0; }
.grade-archive-line { display:flex; align-items:center; flex-wrap:wrap; gap:12px; padding:10px 0; border-bottom:1px solid #e2e8f0; font-size:12px; }
.student-reference-board { margin-top:20px; border-top:1px solid #e2e8f0; padding-top:18px; }
.student-reference-board > header { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.student-reference-board h3 { font-size:16px; }.student-reference-board h4 { font-size:14px; margin-bottom:12px; }
.student-work-columns { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.student-work-example { border:1px solid #dce2eb; border-radius:8px; padding:14px; margin-bottom:10px; background:#fff; }
.student-work-example > div { display:flex; justify-content:space-between; align-items:flex-start; gap:8px; }
.student-work-example strong { font-size:13px; font-weight:600; }
.student-work-example p { margin-top:8px; color:#64748b; font-size:12px; line-height:1.8; }
.student-actual-item { display:flex; justify-content:space-between; align-items:center; gap:12px; width:100%; padding:12px; border:1px solid #e2e8f0; border-radius:6px; background:white; margin:8px 0; text-align:left; font:inherit; cursor:pointer; }
@media(max-width:700px) { .student-work-columns { grid-template-columns:1fr; }.grade-rule-bar { flex-direction:column; align-items:flex-start; } }
@media(max-width:650px) { .topbar { gap:8px; } .topbar .user-avatar,.topbar .role-badge { display:none; } .topbar .topbar-right { gap:0; } }
button:focus-visible,summary:focus-visible { outline:3px solid #a5b4fc; outline-offset:3px; }
@media(max-width:1150px) { .home-columns { grid-template-columns:1fr; } .home-students { align-items:flex-start; flex-direction:column; gap:16px; } }
@media(max-width:650px) { .home-actions { grid-template-columns:1fr; gap:10px; } .home-action { padding:18px; } .home-action .home-action-icon { display:none; } .home-action b { margin-top:10px; } .home-heading { align-items:flex-start; } .home-heading h1 { font-size:24px; } .home-scope { display:none; } .workflow-strip { display:grid; grid-template-columns:1fr 1fr; } .workflow-step { justify-content:flex-start; font-size:11px; } .workflow-step:nth-child(-n+2) { border-bottom:1px solid #e2e8f0; } .topbar .identity-chip { display:none; } .topbar .role-switcher select { max-width:155px; } .topbar-search { min-width:0; } }
.ocr-upload { border: 2px dashed #a5b4fc; border-radius: 12px; background: #f7f8ff; padding: 24px; margin: 18px 0; text-align: center; }
.ocr-upload strong { display: block; font-size: 18px; color: #242e52; }
.ocr-upload p, #ocrFilesLabel { margin: 12px 0; color: #52617a; font-size: 13px; overflow-wrap: anywhere; }
.ocr-upload input[type=file] { display: block; max-width: 100%; margin: 12px auto; }
.ocr-alternative, .ocr-originals details { margin: 18px 0; padding: 12px; border: 1px solid #d9dfea; border-radius: 8px; }
.ocr-alternative summary, .ocr-originals summary { cursor: pointer; font-weight: 600; }
.ocr-originals pre { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 240px; overflow: auto; padding: 12px; background: #f6f7f9; }
.ocr-review-table { margin: 14px 0; max-height: 360px; overflow: auto; }
.ocr-review-table input { min-width: 110px; }
.ocr-review-table select { min-width: 145px; }
.ocr-review-table td:first-child select { min-width: 200px; }
.ocr-result-card { border: 1px solid #d9dfea; border-radius: 10px; padding: 16px; margin: 16px 0; background: #fafbfe; }
.ocr-result-card header { display: flex; gap: 12px; align-items: center; justify-content: space-between; margin-bottom: 14px; overflow-wrap: anywhere; }
.ocr-field-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; margin: 12px 0; }
.ocr-field-grid label { display: flex; flex-direction: column; gap: 6px; color: #46536a; font-size: 13px; min-width: 0; }
.ocr-field-grid .form-input { width: 100%; min-width: 0; box-sizing: border-box; }
.ocr-result-card summary { cursor: pointer; padding: 8px 0; color: #4859a0; }
.grade-retake-history { margin-bottom: 20px; }
body:has(.pdf-roster-notice) .filter-item:has(#studentGradeFilter), body:has(.pdf-roster-notice) .filter-item:has(#studentHouseFilter), body:has(.pdf-roster-notice) #studentsListContainer th:nth-child(3), body:has(.pdf-roster-notice) #studentsListContainer td:nth-child(3), body:has(.pdf-roster-notice) #studentsListContainer th:nth-child(4), body:has(.pdf-roster-notice) #studentsListContainer td:nth-child(4) { display: none; }
#gradesNameSearch, #gradesSubjectSearch { max-width: 200px; }
#gradesUnitSearch, #gradesPeriodFilter { max-width: 170px; }
@media(max-width:800px) { .ocr-field-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media(max-width:480px) { .ocr-field-grid { grid-template-columns: minmax(0,1fr); } }
#ocrProgress { padding: 10px 0; color: #394981; overflow-wrap: anywhere; }
@media (prefers-reduced-motion: reduce) { .ocr-review-table { scroll-behavior: auto; } }

/* 教师升学礼包：任务标准、DDL 与完成凭证并列，窄屏顺排。 */
.task-progress-toolbar { display:flex; gap:16px; align-items:end; flex-wrap:wrap; margin-bottom:16px; }
.task-progress-toolbar label { flex:1; min-width:180px; }
.task-progress-summary { display:flex; gap:20px; flex-wrap:wrap; padding:14px 0; border-bottom:1px solid var(--gray-200); margin-bottom:12px; }
.task-pack-help { color:var(--gray-600); font-size:13px; line-height:1.7; margin:12px 0; }
.task-pack-students { border:1px solid var(--gray-200); border-radius:8px; padding:12px; margin:16px 0; }
#taskPackStudents { display:flex; flex-wrap:wrap; gap:8px 16px; max-height:160px; overflow:auto; margin-top:10px; }
#taskPackStudents label { display:flex; align-items:center; gap:6px; min-width:125px; }
#taskPackStudents label[hidden] { display:none; }
.task-pack-item { display:grid; grid-template-columns: 1.1fr 1.6fr 160px auto; gap:12px; align-items:end; padding:14px 0; border-bottom:1px solid var(--gray-200); }
.task-pack-item label { min-width:0; font-size:13px; }
.task-pack-item textarea { min-height:72px; }
.task-evidence-list { display:flex; flex-wrap:wrap; gap:8px; margin:12px 0 20px; }
.task-evidence-list button { white-space:normal; overflow-wrap:anywhere; }
.task-history { max-height:240px; overflow:auto; }
.task-history p { border-left:2px solid var(--gray-200); padding:8px 12px; white-space:pre-wrap; overflow-wrap:anywhere; }
@media(max-width:760px) { .task-pack-item { grid-template-columns:1fr; } .task-progress-summary { gap:10px; } }

.task-work-extras > summary { cursor:pointer; padding:16px 0; font-weight:600; }

.overview-demo-note { display:flex; gap:12px; flex-wrap:wrap; padding:12px 16px; background:#fff8e8; border:1px solid #f2db9e; border-radius:8px; margin:16px 0; font-size:13px; }
.overview-filters { display:flex; flex-wrap:wrap; gap:16px; margin:22px 0; }
.overview-filters label { flex:1; min-width:180px; }
.overview-metrics { display:grid; grid-template-columns:repeat(4,1fr); background:white; border:1px solid var(--gray-200); border-radius:10px; overflow:hidden; }
.overview-metrics > * { padding:22px; border:0; border-right:1px solid var(--gray-200); text-align:left; background:white; color:inherit; font:inherit; }
.overview-metrics button { cursor:pointer; }
.overview-metrics button:hover { background:var(--gray-50); }
.overview-metrics strong { display:block; font-size:32px; line-height:1.5; }
.overview-metrics small { font-size:15px; font-weight:400; }
.overview-metrics p { color:var(--gray-500); font-size:12px; margin:0; }
.overview-teachers,.overview-students { margin-top:28px; }
.overview-teachers h2,.overview-students h2 { font-size:18px; margin-bottom:12px; }
.overview-teacher-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:12px; }
.overview-teacher-grid button { display:flex; flex-direction:column; gap:9px; text-align:left; font:inherit; padding:16px; border:1px solid var(--gray-200); border-radius:8px; background:white; cursor:pointer; }
.overview-teacher-grid button:hover { border-color:var(--primary); }
.overview-teacher-grid span,.overview-teacher-grid small { font-size:12px; color:var(--gray-600); }
.teacher-overview progress { width:100%; max-width:200px; height:8px; accent-color:var(--primary); }
.overview-students { background:white; border:1px solid var(--gray-200); border-radius:10px; padding:18px; }
.overview-students header { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; }
.overview-students header span,.overview-students td>div { font-size:12px; color:var(--gray-600); }
.overview-pagination { display:flex; justify-content:flex-end; align-items:center; gap:14px; margin-top:16px; }
@media(max-width:900px) { .overview-metrics { grid-template-columns:repeat(2,1fr); } }
@media(max-width:520px) { .overview-metrics > * { padding:14px; } .overview-teacher-grid { grid-template-columns:1fr; } }

.snapshot-meta {color:var(--gray-600);line-height:1.8;}
.snapshot-heading {font-size:18px;margin:24px 0 12px;}
.snapshot-notes article {padding:14px;border:1px solid var(--gray-200);border-radius:8px;margin-bottom:10px;}
.snapshot-notes header {display:flex;gap:10px;align-items:center;flex-wrap:wrap;}
.snapshot-notes p {white-space:pre-wrap;overflow-wrap:anywhere;margin:10px 0;}
.snapshot-notes small {display:block;color:var(--gray-500);margin-bottom:8px;}
.snapshot-resolution {background:var(--gray-50);padding:10px;}
.snapshot-record summary {font-weight:600;cursor:pointer;margin:22px 0 12px;}
.snapshot-record form > label {display:block;margin-bottom:12px;}
.overview-students .data-table td {max-width:240px;}

.overview-attention {display:flex;gap:12px;justify-content:space-between;align-items:center;flex-wrap:wrap;margin-top:14px;padding:12px 16px;border:1px solid var(--gray-200);border-radius:8px;background:white;font-size:13px;}

[hidden] { display: none !important; }
.login-view { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: #f4f6fa; }
.login-panel { width: min(100%, 410px); padding: 32px; border: 1px solid #dce2eb; border-radius: 12px; background: white; }
.login-brand { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: var(--primary); color: white; font-weight: 700; }
.login-panel h1 { margin: 16px 0 6px; font-size: 24px; }
.login-panel p { margin-bottom: 22px; color: #52617a; }
.login-panel form { display: grid; gap: 10px; }
.login-panel input { width: 100%; }
.login-panel button { margin-top: 10px; justify-content: center; }
#loginError { color: #a52135; min-height: 1.3em; }
@media (max-width: 650px) {
  .teacher-overview .home-heading { flex-wrap: wrap; }
  .teacher-overview .home-heading > div:first-child { width: 100%; }
}

.student-name-button { border: 0; padding: 0; background: transparent; color: inherit; text-align: left; font: inherit; font-weight: 600; cursor: pointer; }
.student-name-button:hover { text-decoration: underline; }