/* ============================================
   SQL 实战教学平台 · 重构版
   设计方向：赛博朋克·数字矩阵
   Design System v2
   ============================================ */
@import url('https://fonts.loli.net/css2?family=Orbitron:wght@400;500;600;700;800;900&family=Rajdhani:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* 霓虹核心色 */
  --cyan: #00f0ff;
  --purple: #7b2ff7;
  --green: #00ff88;
  --pink: #ff3366;
  --amber: #ffaa00;
  --blue: #4d8aff;

  /* 泛光效果 */
  --glow-cyan: 0 0 20px rgba(0, 240, 255, 0.35), 0 0 60px rgba(0, 240, 255, 0.1);
  --glow-purple: 0 0 20px rgba(123, 47, 247, 0.35), 0 0 60px rgba(123, 47, 247, 0.1);
  --glow-green: 0 0 20px rgba(0, 255, 136, 0.35), 0 0 60px rgba(0, 255, 136, 0.1);
  --glow-pink: 0 0 20px rgba(255, 51, 102, 0.35);

  /* 渐变 */
  --gradient-primary: linear-gradient(135deg, var(--cyan), var(--purple));
  --gradient-accent: linear-gradient(135deg, var(--cyan), var(--green));
  --gradient-warm: linear-gradient(135deg, var(--amber), var(--pink));
  --gradient-dark: linear-gradient(180deg, rgba(8,12,24,0.98), rgba(6,10,20,0.95));

  /* 表面色 */
  --surface-0: #060a14;
  --surface-1: rgba(10, 16, 30, 0.95);
  --surface-2: rgba(14, 22, 42, 0.9);
  --surface-3: rgba(18, 28, 54, 0.85);
  --surface-card: rgba(12, 20, 40, 0.88);
  --surface-glass: rgba(10, 16, 30, 0.75);

  /* 边框 */
  --border-subtle: rgba(0, 240, 255, 0.08);
  --border-default: rgba(0, 240, 255, 0.15);
  --border-strong: rgba(0, 240, 255, 0.25);

  /* 文字 */
  --text-primary: #eef0ff;
  --text-secondary: #a0a8d4;
  --text-tertiary: #6b74a8;
  --text-inverse: #060a14;

  /* 间距 */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;

  /* 圆角 */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* 字体 */
  --font-display: 'Orbitron', 'Rajdhani', system-ui, sans-serif;
  --font-body: 'Rajdhani', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;

  /* 过渡 */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --transition-fast: 0.15s var(--ease-out);
  --transition-base: 0.25s var(--ease-out);
  --transition-slow: 0.4s var(--ease-out);
  --transition-spring: 0.4s var(--ease-spring);

  /* 布局 */
  --sidebar-width: 340px;
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  height: 100%; margin: 0;
  font-family: var(--font-body);
  font-size: 14px; line-height: 1.6;
  color: var(--text-primary);
  background: var(--surface-0);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

/* ===== 背景氛围层 ===== */
body::before {
  content: '';
  position: fixed; inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 15% 25%, rgba(0, 240, 255, 0.05) 0%, transparent 60%),
    radial-gradient(ellipse 60% 80% at 85% 75%, rgba(123, 47, 247, 0.05) 0%, transparent 60%),
    radial-gradient(ellipse 50% 50% at 50% 50%, rgba(0, 255, 136, 0.02) 0%, transparent 50%);
  pointer-events: none; z-index: 0;
}

/* 网格线 */
body::after {
  content: '';
  position: fixed; inset: 0;
  background-image:
    linear-gradient(rgba(0, 240, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 240, 255, 0.025) 1px, transparent 1px);
  background-size: 64px 64px;
  pointer-events: none; z-index: 0;
  animation: gridPulse 10s ease-in-out infinite;
}

@keyframes gridPulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

/* 扫描线 */
.scanlines::before {
  content: '';
  position: fixed; inset: 0;
  background: repeating-linear-gradient(0deg,
    transparent, transparent 2px,
    rgba(0, 240, 255, 0.007) 2px, rgba(0, 240, 255, 0.007) 4px);
  pointer-events: none; z-index: 9998;
}

#app {
  height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative; z-index: 1;
}

/* ===== 导航栏 ===== */
.navbar {
  background: rgba(6, 10, 20, 0.92);
  backdrop-filter: blur(24px) saturate(200%);
  -webkit-backdrop-filter: blur(24px) saturate(200%);
  border-bottom: 1px solid var(--border-default);
  box-shadow: 0 4px 40px rgba(0,0,0,0.4);
  z-index: 1030;
  min-height: 56px;
}

.navbar::after {
  content: '';
  position: absolute; bottom: -1px; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 5%, var(--cyan), var(--purple), transparent 95%);
  animation: navGlow 4s ease-in-out infinite;
}

@keyframes navGlow {
  0%, 100% { opacity: 0.4; transform: scaleX(0.9); }
  50% { opacity: 1; transform: scaleX(1); }
}

.navbar-brand {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--cyan) !important;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  text-shadow: 0 0 20px rgba(0, 240, 255, 0.3);
  position: relative;
  padding-left: 0;
}

.navbar-brand::before {
  content: '// ';
  color: rgba(0, 240, 255, 0.3);
  font-weight: 400;
}

/* ===== 页面容器 ===== */
#auth-page {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
}

#student-page {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}

#teacher-page, #admin-page {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-lg);
  background: var(--surface-0);
}

/* ===== 认证卡片 ===== */
.auth-wrapper {
  width: 100%;
  max-width: 460px;
  position: relative;
}

.auth-wrapper::before {
  content: '';
  position: absolute;
  top: -2px; left: -2px; right: -2px; bottom: -2px;
  background: var(--gradient-primary);
  border-radius: calc(var(--radius-xl) + 4px);
  opacity: 0.15;
  animation: authBorderGlow 4s ease-in-out infinite;
  z-index: -1;
}

@keyframes authBorderGlow {
  0%, 100% { opacity: 0.1; }
  50% { opacity: 0.25; }
}

.auth-card {
  background: var(--surface-glass);
  backdrop-filter: blur(32px);
  -webkit-backdrop-filter: blur(32px);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  box-shadow: 0 24px 80px rgba(0,0,0,0.5), 0 0 60px rgba(0,240,255,0.03);
  overflow: hidden;
}

.auth-card .card-header {
  background: transparent;
  border-bottom: 1px solid var(--border-subtle);
  padding: 0;
}

.auth-card .nav-tabs {
  border-bottom: none;
}

.auth-card .nav-link {
  color: var(--text-tertiary);
  font-weight: 500;
  border: none !important;
  padding: 1rem 1.5rem;
  transition: var(--transition-base);
  position: relative;
  font-size: 13px;
  letter-spacing: 0.5px;
}

.auth-card .nav-link::after {
  content: '';
  position: absolute;
  bottom: 0; left: 50%;
  width: 0; height: 2px;
  background: var(--gradient-primary);
  transition: var(--transition-base);
  transform: translateX(-50%);
  border-radius: 2px 2px 0 0;
}

.auth-card .nav-link.active {
  color: var(--cyan);
  font-weight: 600;
  text-shadow: 0 0 12px rgba(0, 240, 255, 0.2);
  background: transparent;
}

.auth-card .nav-link.active::after { width: 50%; }

.auth-card .nav-link:hover {
  color: var(--text-primary);
  background: rgba(0, 240, 255, 0.03);
}

.auth-card .card-body { padding: var(--space-xl); }

/* 角色选择 */
#login-role-selector {
  display: flex;
  gap: var(--space-sm);
}

.role-card {
  flex: 1;
  text-align: center;
  padding: 14px 8px;
  border: 1.5px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: rgba(10, 16, 30, 0.5);
  cursor: pointer;
  transition: var(--transition-spring);
  position: relative;
  overflow: hidden;
  user-select: none;
}

.role-card::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: var(--radius-md);
  background: radial-gradient(circle at 50% 50%, rgba(0,240,255,0.06), transparent 70%);
  opacity: 0; transition: opacity var(--transition-base);
  pointer-events: none;
}

.role-card:hover {
  border-color: var(--border-strong);
  transform: translateY(-2px) scale(1.02);
  background: rgba(0, 240, 255, 0.04);
  box-shadow: 0 4px 24px rgba(0,240,255,0.08);
}

.role-card:hover::before { opacity: 1; }

.role-card:active {
  transform: translateY(0) scale(0.97);
  transition-duration: 0.08s;
}

.role-card.active {
  border-color: var(--cyan);
  background: rgba(0, 240, 255, 0.08);
  box-shadow: 0 0 24px rgba(0,240,255,0.12), inset 0 0 20px rgba(0,240,255,0.03);
}

.role-card.active::before {
  opacity: 1;
  background: radial-gradient(circle at 50% 50%, rgba(0,240,255,0.1), transparent 70%);
}

.role-card .role-icon {
  font-size: 28px;
  display: block;
  margin-bottom: 4px;
  transition: transform var(--transition-spring), filter var(--transition-base);
}

.role-card:hover .role-icon {
  transform: scale(1.15);
  filter: drop-shadow(0 0 8px rgba(0, 240, 255, 0.3));
}

.role-card.active .role-icon {
  transform: scale(1.1);
  filter: drop-shadow(0 0 12px rgba(0, 240, 255, 0.4));
}

.role-card .role-label {
  font-size: 13px; font-weight: 600;
  letter-spacing: 0.5px;
  color: var(--text-secondary);
  transition: color var(--transition-base);
}

.role-card:hover .role-label { color: var(--text-primary); }
.role-card.active .role-label {
  color: var(--cyan);
  text-shadow: 0 0 10px rgba(0, 240, 255, 0.2);
}

/* ===== 学生布局 ===== */
.student-layout {
  display: flex; flex: 1; overflow: hidden;
  min-height: 0;
}

.question-sidebar {
  width: var(--sidebar-width);
  min-width: var(--sidebar-width);
  max-height: 100%;
  background: var(--surface-1);
  border-right: 1px solid var(--border-subtle);
  display: flex; flex-direction: column;
  overflow: hidden;
  position: relative;
}

.question-sidebar::after {
  content: '';
  position: absolute; top: 0; right: 0;
  width: 1px; height: 100%;
  background: linear-gradient(180deg, transparent, var(--cyan), var(--purple), transparent);
  opacity: 0.15;
}

.sidebar-header {
  padding: var(--space-md) var(--space-md) var(--space-sm);
  border-bottom: 1px solid var(--border-subtle);
  background: rgba(0,240,255,0.02);
  position: sticky; top: 0; z-index: 1;
}

.sidebar-header h5 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700; font-size: 0.9rem;
  color: var(--cyan);
  letter-spacing: 1px;
  text-transform: uppercase;
}

.question-list {
  flex: 1; overflow-y: auto;
  padding: var(--space-sm);
}

.question-item {
  position: relative;
  padding: 0.8rem 1rem;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: var(--transition-base);
  border: 1px solid transparent;
  margin-bottom: 6px;
  display: flex; justify-content: space-between;
  align-items: center;
  background: rgba(10, 16, 30, 0.4);
  overflow: hidden;
}

.question-item::before {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--gradient-primary);
  border-radius: 0 3px 3px 0;
  transform: scaleY(0);
  transition: transform 0.3s var(--ease-out);
}

.question-item:hover {
  background: rgba(0,240,255,0.04);
  border-color: var(--border-default);
  transform: translateX(4px);
}

.question-item:hover::before { transform: scaleY(0.6); }

.question-item.active {
  background: rgba(0,240,255,0.07);
  border-color: var(--border-strong);
  box-shadow: 0 0 24px rgba(0,240,255,0.06);
}

.question-item.active::before { transform: scaleY(1); }

.question-item .q-title {
  font-weight: 600; font-size: 13px;
  color: var(--text-primary);
}

.question-item .q-meta {
  font-size: 11px; color: var(--text-secondary);
  margin-top: 2px;
}

/* 题号 */
.q-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(0,240,255,0.1);
  color: var(--cyan);
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 1px;
}

.question-item.active .q-number {
  background: var(--cyan);
  color: var(--text-inverse);
}

/* 已完成标记 */
.question-item.completed {
  border-color: rgba(0,255,136,0.2);
}
.question-item.completed::before {
  background: var(--green);
}
.q-completed-badge {
  color: var(--green);
  font-size: 16px;
  flex-shrink: 0;
  margin-top: 2px;
  filter: drop-shadow(0 0 6px rgba(0,255,136,0.4));
}

/* 右侧内容 */
.question-content {
  flex: 1; display: flex; flex-direction: column;
  overflow: hidden; min-width: 0;
  background: rgba(6, 10, 20, 0.5);
}

.content-header {
  padding: var(--space-md) var(--space-lg) var(--space-sm);
  border-bottom: 1px solid var(--border-subtle);
  background: var(--surface-1);
  flex-shrink: 0;
}

.content-header h4 {
  font-family: var(--font-display);
  font-weight: 700; font-size: 1rem;
  color: var(--text-primary);
  letter-spacing: 0.5px;
}

.content-body {
  flex: 1; overflow-y: auto;
  padding: var(--space-md) var(--space-lg);
  min-height: 0;
}

/* 表结构卡片 */
.schema-card {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  overflow: hidden;
  transition: var(--transition-base);
}

.schema-card:hover { border-color: var(--border-default); }

.schema-header {
  display: flex; justify-content: space-between;
  align-items: center;
  padding: 0.6rem 0.9rem;
  cursor: pointer; user-select: none;
  font-size: 13px; font-weight: 600;
  color: var(--cyan);
  background: rgba(0,240,255,0.03);
  transition: background var(--transition-fast);
}

.schema-header:hover { background: rgba(0,240,255,0.06); }

.schema-toggle-icon {
  transition: transform 0.3s var(--ease-out);
  font-size: 11px; color: var(--text-tertiary);
}

.schema-toggle-icon.collapsed { transform: rotate(-90deg); }

.schema-body {
  max-height: 300px; overflow-y: auto;
  transition: max-height 0.3s ease, padding 0.2s ease;
}

.schema-body.collapsed {
  max-height: 0; padding: 0 0.9rem;
  overflow: hidden;
}

.schema-content { padding: 0.6rem 0.9rem 0.9rem; }

.schema-preview {
  padding: 0.35rem 0.9rem 0.5rem;
  font-size: 12px; color: var(--text-secondary);
}

#init-sql-display {
  font-family: var(--font-mono);
  font-size: 12px; line-height: 1.6;
  white-space: pre-wrap; word-break: break-word;
  color: var(--text-primary);
}

/* 编辑器区域 */
.editor-section {
  flex: none;
  border-top: 1px solid var(--border-subtle);
  background: var(--surface-1);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  margin: 0 var(--space-sm);
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  border-bottom: none;
}

.editor-header {
  padding: 0.45rem 1rem;
  display: flex; justify-content: space-between;
  align-items: center;
  background: rgba(0,240,255,0.02);
  border-bottom: 1px solid var(--border-subtle);
  flex-shrink: 0;
}

.editor-header label {
  font-weight: 600; font-size: 13px;
  margin: 0; color: var(--cyan);
  font-family: var(--font-display);
  letter-spacing: 0.5px;
}

#editor-area .CodeMirror {
  height: 140px !important;
  font-family: var(--font-mono);
  font-size: 13px; line-height: 1.7;
  border-radius: 0;
  background: #080c18;
  color: var(--text-primary);
}

.CodeMirror-gutters {
  background: rgba(0,240,255,0.02) !important;
  border-right: 1px solid var(--border-subtle) !important;
}

.CodeMirror-linenumber { color: rgba(160, 168, 212, 0.4) !important; }
.CodeMirror-cursor { border-left-color: var(--cyan) !important; }
.CodeMirror-selected { background: rgba(0,240,255,0.1) !important; }

.editor-toolbar {
  display: flex; gap: var(--space-sm);
  padding: 0.5rem 1rem;
  border-top: 1px solid var(--border-subtle);
  background: rgba(0,240,255,0.02);
  flex-shrink: 0;
}

/* 结果区域 */
.result-section {
  flex-shrink: 0;
  max-height: 340px; overflow-y: auto;
  background: var(--surface-1);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  margin: 0 var(--space-sm) var(--space-sm);
  border: 1px solid var(--border-subtle);
  border-top: none;
}

.result-header {
  padding: 0.5rem 1.25rem;
  font-weight: 600; font-size: 13px;
  background: rgba(0,240,255,0.02);
  border-bottom: 1px solid var(--border-subtle);
  display: flex; justify-content: space-between;
  align-items: center;
  position: sticky; top: 0; z-index: 1;
  color: var(--cyan);
  font-family: var(--font-display);
  letter-spacing: 0.5px;
}

.result-body { padding: 0.75rem 1.25rem; color: var(--text-primary); }

.result-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.result-table th {
  background: rgba(0,240,255,0.04);
  font-weight: 600; padding: 7px 12px;
  border-bottom: 1px solid rgba(0,240,255,0.12);
  text-align: left; white-space: nowrap;
  font-size: 12px; text-transform: uppercase;
  letter-spacing: 0.5px; color: var(--cyan);
}

.result-table td {
  padding: 6px 12px;
  border-bottom: 1px solid rgba(0,240,255,0.04);
  color: var(--text-primary);
}

.result-table tr:last-child td { border-bottom: none; }
.result-table tr:hover td { background: rgba(0,240,255,0.03); }

/* 提交历史 */
.history-section {
  border-top: 1px solid var(--border-subtle);
  background: var(--surface-1);
  margin: 0 var(--space-sm) var(--space-sm);
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--border-subtle);
}

.history-header {
  padding: 0.6rem 1.25rem;
  cursor: pointer;
  display: flex; justify-content: space-between;
  align-items: center;
  background: rgba(0,240,255,0.02);
  user-select: none;
  transition: var(--transition-base);
  color: var(--text-secondary);
}

.history-header:hover {
  background: rgba(0,240,255,0.05);
  color: var(--text-primary);
}

.history-body {
  padding: 0.75rem 1.25rem;
  max-height: 250px; overflow-y: auto;
}

.history-item {
  padding: 0.5rem 0;
  border-bottom: 1px solid rgba(0,240,255,0.04);
  font-size: 13px;
}

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

.history-item .h-meta {
  display: flex; justify-content: space-between;
  color: var(--text-secondary);
  font-size: 12px; margin-bottom: 4px;
}

.history-item .h-sql {
  background: rgba(8, 12, 24, 0.8);
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 12px; white-space: pre-wrap;
  word-break: break-all; max-height: 60px;
  overflow-y: auto;
  border: 1px solid var(--border-subtle);
  color: var(--text-primary);
}

/* ===== 通用卡片 ===== */
.card {
  background: var(--surface-card);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
  transition: var(--transition-base);
  color: var(--text-primary);
}

.card:hover {
  box-shadow: 0 12px 48px rgba(0,0,0,0.4);
  border-color: var(--border-default);
}

.card-header {
  background: rgba(0,240,255,0.02);
  border-bottom: 1px solid var(--border-subtle);
  font-weight: 600; padding: 1rem 1.25rem;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
  color: var(--text-primary);
}

/* ===== 按钮系统 ===== */
.btn {
  border-radius: var(--radius-sm);
  font-weight: 600;
  padding: 0.5rem 1.1rem;
  transition: var(--transition-base);
  font-size: 13px;
  letter-spacing: 0.3px;
  position: relative;
  overflow: hidden;
}

.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(0.97); }

.btn-primary {
  background: linear-gradient(135deg, #00c8d4, var(--purple));
  border: 1px solid rgba(0,240,255,0.25);
  color: #fff;
}

.btn-primary:hover {
  background: linear-gradient(135deg, var(--cyan), #9b4dff);
  box-shadow: var(--glow-cyan);
  border-color: rgba(0,240,255,0.4);
}

.btn-success {
  background: linear-gradient(135deg, #00cc6a, var(--green));
  border: 1px solid rgba(0,255,136,0.25);
  color: var(--text-inverse);
  font-weight: 700;
}

.btn-success:hover {
  box-shadow: var(--glow-green);
  border-color: rgba(0,255,136,0.4);
}

.btn-warning {
  background: linear-gradient(135deg, #ff8800, var(--amber));
  border: 1px solid rgba(255,170,0,0.25);
  color: var(--text-inverse);
  font-weight: 700;
}

.btn-warning:hover { box-shadow: 0 4px 20px rgba(255,170,0,0.35); }

.btn-danger {
  background: linear-gradient(135deg, #cc0033, var(--pink));
  border: 1px solid rgba(255,51,102,0.25);
  color: #fff;
}

.btn-danger:hover { box-shadow: var(--glow-pink); }

.btn-outline-primary {
  border-color: rgba(0,240,255,0.3);
  color: var(--cyan);
  background: transparent;
}

.btn-outline-primary:hover {
  background: rgba(0,240,255,0.08);
  color: var(--cyan);
  border-color: var(--cyan);
  box-shadow: 0 0 16px rgba(0,240,255,0.15);
}

.btn-outline-success {
  border-color: rgba(0,255,136,0.3);
  color: var(--green);
}

.btn-outline-success:hover {
  background: rgba(0,255,136,0.08);
  color: var(--green);
  border-color: var(--green);
  box-shadow: 0 0 16px rgba(0,255,136,0.15);
}

.btn-outline-warning {
  border-color: rgba(255,170,0,0.3);
  color: var(--amber);
}

.btn-outline-warning:hover {
  background: rgba(255,170,0,0.08);
  color: var(--amber);
  border-color: var(--amber);
  box-shadow: 0 0 16px rgba(255,170,0,0.15);
}

.btn-outline-danger {
  border-color: rgba(255,51,102,0.3);
  color: var(--pink);
}

.btn-outline-danger:hover {
  background: rgba(255,51,102,0.08);
  color: var(--pink);
  border-color: var(--pink);
  box-shadow: 0 0 16px rgba(255,51,102,0.15);
}

.btn-outline-info {
  border-color: rgba(0,240,255,0.25);
  color: var(--cyan);
}

.btn-outline-info:hover {
  background: rgba(0,240,255,0.08);
  color: var(--cyan);
  box-shadow: 0 0 16px rgba(0,240,255,0.15);
}

.btn-outline-secondary {
  border-color: rgba(160,168,212,0.2);
  color: var(--text-secondary);
}

.btn-outline-secondary:hover {
  background: rgba(160,168,212,0.08);
  color: var(--text-primary);
  border-color: rgba(160,168,212,0.4);
}

.btn-sm { font-size: 12px; padding: 0.3rem 0.7rem; }

/* ===== 输入框 ===== */
.form-control, .form-select {
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-default);
  font-size: 14px;
  padding: 0.55rem 0.85rem;
  transition: var(--transition-base);
  background: rgba(8, 12, 24, 0.8);
  color: var(--text-primary);
}

.form-control::placeholder {
  color: rgba(160, 168, 212, 0.4);
}

.form-control:focus, .form-select:focus {
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px rgba(0,240,255,0.08), 0 0 20px rgba(0,240,255,0.06);
  outline: none;
  background: rgba(8, 12, 24, 0.95);
  color: var(--text-primary);
}

.form-label {
  color: var(--text-secondary);
  font-weight: 500; font-size: 13px;
  letter-spacing: 0.3px;
}

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

/* ===== Tabs ===== */
#teacher-tabs {
  border-bottom: 1px solid var(--border-subtle);
  gap: 0;
}

#teacher-tabs .nav-link {
  color: var(--text-tertiary);
  font-weight: 500;
  border: none;
  padding: 0.75rem 1.25rem;
  transition: var(--transition-base);
  position: relative;
  background: transparent;
  border-radius: 0;
  font-size: 13px;
  letter-spacing: 0.3px;
}

#teacher-tabs .nav-link::after {
  content: '';
  position: absolute; bottom: 0; left: 50%;
  width: 0; height: 2px;
  background: var(--gradient-primary);
  transition: var(--transition-base);
  border-radius: 2px 2px 0 0;
  transform: translateX(-50%);
}

#teacher-tabs .nav-link:hover {
  color: var(--text-primary);
  background: rgba(0,240,255,0.02);
}

#teacher-tabs .nav-link.active {
  color: var(--cyan);
  font-weight: 600;
  text-shadow: 0 0 12px rgba(0,240,255,0.15);
}

#teacher-tabs .nav-link.active::after { width: 60%; }

#admin-page .nav-tabs { border-bottom-color: var(--border-subtle); }
#admin-page .nav-link {
  color: var(--text-tertiary); border: none;
  background: transparent; transition: var(--transition-base);
}
#admin-page .nav-link:hover { color: var(--text-primary); background: rgba(0,240,255,0.02); }
#admin-page .nav-link.active {
  color: var(--cyan); background: transparent;
  border-bottom: 2px solid var(--cyan);
}

/* ===== Modal ===== */
.modal-content {
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-default);
  box-shadow: 0 32px 80px rgba(0,0,0,0.5), 0 0 60px rgba(0,240,255,0.03);
  background: rgba(10, 16, 30, 0.96);
  backdrop-filter: blur(32px);
  color: var(--text-primary);
}

.modal-header {
  border-bottom: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  padding: 1rem 1.25rem;
}

.modal-footer {
  border-top: 1px solid var(--border-subtle);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  padding: 0.75rem 1.25rem;
}

.btn-close { filter: invert(1) brightness(200%); opacity: 0.5; }
.btn-close:hover { opacity: 0.8; }

/* ===== 表格 ===== */
.table {
  color: var(--text-primary);
  --bs-table-bg: transparent;
  --bs-table-border-color: var(--border-subtle);
  --bs-table-striped-bg: rgba(0,240,255,0.02);
  --bs-table-hover-bg: rgba(0,240,255,0.03);
}

.table > :not(caption) > * > * {
  color: var(--text-primary);
  border-bottom-color: var(--border-subtle);
}

.table-light {
  --bs-table-bg: rgba(0,240,255,0.03);
  --bs-table-color: var(--cyan);
}

.table-light th {
  background: rgba(0,240,255,0.04) !important;
  color: var(--cyan) !important;
  border-color: var(--border-subtle) !important;
  font-weight: 600; font-size: 12px;
  text-transform: uppercase; letter-spacing: 0.5px;
}

.table-hover > tbody > tr:hover > * {
  --bs-table-bg-state: rgba(0,240,255,0.03);
}

.question-table th {
  background: rgba(0,240,255,0.03);
  font-weight: 600; font-size: 12px;
  text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--cyan);
  border-bottom: 1px solid rgba(0,240,255,0.12);
}

.question-table td {
  vertical-align: middle; font-size: 13px;
  padding: 0.6rem 0.75rem;
  color: var(--text-primary);
  border-bottom: 1px solid rgba(0,240,255,0.04);
}

.question-table tr:hover td { background: rgba(0,240,255,0.02); }

/* ===== 成绩管理 ===== */
.student-selector { max-height: 400px; overflow-y: auto; }

/* ===== 教师题目列表：垂直滚动 ===== */
#tab-questions > #question-list-wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
}
#tab-questions .table-responsive {
  flex: 1;
  overflow-y: auto;
  max-height: calc(100vh - 260px);
}

/* ===== 统计卡片 ===== */
.stat-card {
  text-align: center;
  padding: 1.5rem 0.75rem;
  border-radius: var(--radius-lg);
  background: var(--surface-2);
  border: 1px solid var(--border-subtle);
  transition: var(--transition-base);
  position: relative; overflow: hidden;
  min-height: 100px;
}

.stat-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--cyan), transparent);
  opacity: 0; transition: opacity var(--transition-base);
}

.stat-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.4), 0 0 24px rgba(0,240,255,0.05);
  border-color: var(--border-default);
}

.stat-card:hover::before { opacity: 1; }

.stat-value {
  font-family: var(--font-display);
  font-size: 2rem; font-weight: 800;
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1.2;
}

.stat-label {
  font-size: 12px; color: var(--text-secondary);
  margin-top: 4px;
  text-transform: uppercase; letter-spacing: 1px;
  font-weight: 500;
}

/* ===== Badge 系统 ===== */
.badge-easy {
  background: rgba(0,255,136,0.1);
  color: var(--green);
  font-weight: 500; padding: 2px 10px;
  border-radius: var(--radius-full);
  border: 1px solid rgba(0,255,136,0.15);
}

.badge-medium {
  background: rgba(255,170,0,0.1);
  color: var(--amber);
  font-weight: 500; padding: 2px 10px;
  border-radius: var(--radius-full);
  border: 1px solid rgba(255,170,0,0.15);
}

.badge-hard {
  background: rgba(255,51,102,0.1);
  color: var(--pink);
  font-weight: 500; padding: 2px 10px;
  border-radius: var(--radius-full);
  border: 1px solid rgba(255,51,102,0.15);
}

.badge {
  font-weight: 500; letter-spacing: 0.3px;
  border-radius: var(--radius-full);
}

.badge.bg-secondary {
  background: rgba(160,168,212,0.12) !important;
  color: var(--text-secondary) !important;
  border: 1px solid rgba(160,168,212,0.15);
}

.badge.bg-primary {
  background: rgba(0,240,255,0.1) !important;
  color: var(--cyan) !important;
  border: 1px solid rgba(0,240,255,0.2);
}

.badge.bg-success {
  background: rgba(0,255,136,0.1) !important;
  color: var(--green) !important;
  border: 1px solid rgba(0,255,136,0.2);
}

.badge.bg-warning {
  background: rgba(255,170,0,0.1) !important;
  color: var(--amber) !important;
  border: 1px solid rgba(255,170,0,0.2);
}

.badge.bg-danger {
  background: rgba(255,51,102,0.1) !important;
  color: var(--pink) !important;
  border: 1px solid rgba(255,51,102,0.2);
}

.badge.bg-info {
  background: rgba(0,240,255,0.08) !important;
  color: var(--cyan) !important;
  border: 1px solid rgba(0,240,255,0.15);
}

.badge.bg-dark {
  background: rgba(123,47,247,0.12) !important;
  color: #b388ff !important;
  border: 1px solid rgba(123,47,247,0.2);
}

/* ===== 得分样式 ===== */
.score-pass {
  color: var(--green); font-weight: 700;
  text-shadow: 0 0 8px rgba(0,255,136,0.2);
}

.score-fail {
  color: var(--pink); font-weight: 700;
  text-shadow: 0 0 8px rgba(255,51,102,0.2);
}

/* ===== 空状态 ===== */
.empty-state {
  text-align: center; padding: 3rem 1.5rem;
  color: var(--text-secondary);
}

.empty-state i {
  font-size: 3rem; margin-bottom: 1rem;
  opacity: 0.3; color: var(--text-tertiary);
}

/* ===== 加载动画 ===== */
.spinner-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(6, 10, 20, 0.7);
  backdrop-filter: blur(8px);
  z-index: 9999;
  align-items: center; justify-content: center;
}

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

.spinner-border {
  color: var(--cyan) !important;
}

/* ===== Toast ===== */
.toast-container {
  position: fixed; top: 1rem; right: 1rem;
  z-index: 9999;
  display: flex; flex-direction: column;
  gap: 0.5rem;
}

.toast {
  border-radius: var(--radius-sm);
  box-shadow: 0 8px 32px rgba(0,0,0,0.3), 0 0 16px rgba(0,240,255,0.03);
  animation: toastSlideIn 0.3s var(--ease-out);
  border: 1px solid var(--border-default);
  min-width: 280px;
  backdrop-filter: blur(16px);
}

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

@keyframes toastProgress {
  from { width: 100%; }
  to { width: 0%; }
}

/* ===== 连接状态 ===== */
.connection-status {
  display: inline-flex; align-items: center;
  gap: 5px; font-size: 12px;
}

.dot {
  width: 8px; height: 8px;
  border-radius: 50%; display: inline-block;
  transition: var(--transition-base);
}

.dot.online {
  background: var(--green);
  box-shadow: 0 0 8px rgba(0,255,136,0.5);
  animation: dotPulse 2s ease-in-out infinite;
}

@keyframes dotPulse {
  0%, 100% { box-shadow: 0 0 4px rgba(0,255,136,0.3); }
  50% { box-shadow: 0 0 12px rgba(0,255,136,0.6); }
}

.dot.offline {
  background: var(--pink);
  box-shadow: 0 0 6px rgba(255,51,102,0.4);
}

/* ===== 代码块 ===== */
pre {
  font-family: var(--font-mono);
  font-size: 13px;
  border-radius: var(--radius-sm);
  background: rgba(8, 12, 24, 0.8) !important;
  border: 1px solid var(--border-subtle);
  padding: 0.75rem 1rem;
  overflow-x: auto;
  line-height: 1.6;
  color: var(--text-primary);
}

code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  color: var(--cyan);
}

/* ===== Alert ===== */
.alert {
  border-radius: var(--radius-sm);
  border: 1px solid;
}

.alert-info {
  background: rgba(0,240,255,0.05);
  border-color: rgba(0,240,255,0.12);
  color: var(--cyan);
}

.alert-success {
  background: rgba(0,255,136,0.05);
  border-color: rgba(0,255,136,0.12);
  color: var(--green);
}

.alert-warning {
  background: rgba(255,170,0,0.05);
  border-color: rgba(255,170,0,0.12);
  color: var(--amber);
}

.alert-danger {
  background: rgba(255,51,102,0.05);
  border-color: rgba(255,51,102,0.12);
  color: var(--pink);
}

/* ===== List Group ===== */
.list-group {
  --bs-list-group-bg: rgba(10, 16, 30, 0.9);
  --bs-list-group-border-color: var(--border-subtle);
  --bs-list-group-color: var(--text-primary);
  --bs-list-group-hover-bg: rgba(0,240,255,0.04);
  --bs-list-group-active-bg: rgba(0,240,255,0.08);
  --bs-list-group-active-color: var(--cyan);
}

.list-group-item {
  background: rgba(10, 16, 30, 0.9) !important;
  border-color: var(--border-subtle) !important;
  color: var(--text-primary) !important;
  transition: var(--transition-base);
}

.list-group-item:hover {
  background: rgba(0,240,255,0.04) !important;
}

.list-group-item.active {
  background: linear-gradient(135deg, rgba(0,240,255,0.1), rgba(123,47,247,0.1)) !important;
  border-color: rgba(0,240,255,0.25) !important;
  color: var(--cyan) !important;
}

/* ===== 试卷答题 ===== */
#exam-page {
  position: fixed; inset: 0;
  display: flex; flex-direction: column;
  z-index: 1050;
  background: var(--surface-0);
}

#exam-page::before {
  content: '';
  position: fixed; inset: 0;
  background:
    radial-gradient(ellipse at 15% 30%, rgba(0,240,255,0.04) 0%, transparent 50%),
    radial-gradient(ellipse at 85% 70%, rgba(123,47,247,0.04) 0%, transparent 50%);
  pointer-events: none; z-index: -1;
}

.exam-q-card {
  border: 1px solid var(--border-subtle) !important;
  background: var(--surface-2) !important;
}

.exam-q-card .card-header {
  background: rgba(0,240,255,0.02) !important;
  border-bottom: 1px solid var(--border-subtle) !important;
}

.exam-sql-textarea {
  background: rgba(8, 12, 24, 0.8) !important;
  border: 1px solid var(--border-subtle) !important;
  color: var(--text-primary) !important;
  font-family: var(--font-mono) !important;
}

.exam-sql-textarea:focus {
  border-color: var(--cyan) !important;
  box-shadow: 0 0 0 3px rgba(0,240,255,0.08) !important;
}

/* 试卷模态框 */
#exam-question-pool, #exam-student-checkboxes {
  border: 1px solid var(--border-subtle) !important;
  background: rgba(8, 12, 24, 0.5);
  border-radius: var(--radius-sm);
}

.exam-pool-item {
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  transition: var(--transition-fast);
  color: var(--text-primary);
}

.exam-pool-item:hover { background: rgba(0,240,255,0.04); }

.exam-student-table th {
  color: var(--cyan);
  border-bottom-color: var(--border-subtle);
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px;
}

.exam-student-table td {
  color: var(--text-primary);
  border-bottom-color: var(--border-subtle);
}

.exam-student-row.table-primary {
  --bs-table-bg-state: rgba(0,240,255,0.06);
}

/* ===== 管理员统计卡片 ===== */
#admin-stats-cards .card {
  background: var(--surface-2);
  border: 1px solid var(--border-subtle);
}

/* ===== 组卷管理 - 作答详情 ===== */
.es-student-card {
  padding: 1rem 1.25rem !important;
  border: 1px solid var(--border-subtle) !important;
  background: var(--surface-2) !important;
  border-radius: var(--radius-md) !important;
  margin-bottom: 0.5rem;
  transition: var(--transition-base);
}

.es-student-card:hover {
  border-color: rgba(0,240,255,0.2) !important;
  box-shadow: 0 0 24px rgba(0,240,255,0.04);
  background: rgba(0,240,255,0.02) !important;
}

.es-rank-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(0,240,255,0.12), rgba(123,47,247,0.12));
  color: var(--cyan);
  font-size: 0.75rem; font-weight: 700;
  border: 1px solid rgba(0,240,255,0.15);
}

.es-score-bar {
  height: 6px;
  background: rgba(255,255,255,0.04);
  border-radius: 3px; overflow: hidden;
}

.es-score-bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.6s var(--ease-out);
  box-shadow: 0 0 8px currentColor;
}

.es-chip {
  display: inline-flex; align-items: center;
  padding: 2px 8px; border-radius: var(--radius-full);
  font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.3px;
  border: 1px solid transparent;
}

.es-chip-pass {
  background: rgba(0,255,136,0.08);
  color: var(--green);
  border-color: rgba(0,255,136,0.15);
}

.es-chip-fail {
  background: rgba(255,51,102,0.08);
  color: var(--pink);
  border-color: rgba(255,51,102,0.15);
}

.es-chip-neutral {
  background: rgba(255,255,255,0.03);
  color: var(--text-tertiary);
  border-color: var(--border-subtle);
}

/* ===== 题目作答统计 ===== */
.qs-student-card {
  padding: 1rem 1.25rem !important;
  border: 1px solid var(--border-subtle) !important;
  background: var(--surface-2) !important;
  border-radius: var(--radius-md) !important;
  margin-bottom: 0.5rem;
  transition: var(--transition-base);
}

.qs-student-card:hover {
  border-color: rgba(0,240,255,0.2) !important;
  box-shadow: 0 0 24px rgba(0,240,255,0.04);
  background: rgba(0,240,255,0.02) !important;
}

.qs-submission-history {
  display: flex; flex-wrap: wrap;
  gap: 6px; margin-top: 8px;
}

.qs-sub-item {
  display: inline-flex; align-items: center;
  gap: 6px; padding: 3px 10px;
  border-radius: var(--radius-full);
  font-size: 0.72rem; font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
  transition: var(--transition-base);
}

.qs-sub-item:hover { filter: brightness(1.3); }

.qs-sub-pass {
  background: rgba(0,255,136,0.06);
  color: var(--green);
  border-color: rgba(0,255,136,0.12);
}

.qs-sub-fail {
  background: rgba(255,51,102,0.06);
  color: var(--pink);
  border-color: rgba(255,51,102,0.12);
}

.qs-sub-error {
  background: rgba(255,170,0,0.1);
  color: var(--amber);
  padding: 1px 6px;
  border-radius: var(--radius-full);
  font-size: 0.65rem; font-weight: 600;
}

.qs-sql-code {
  background: rgba(6, 10, 20, 0.9) !important;
  color: var(--cyan) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: 6px;
  padding: 8px 12px;
  font-family: var(--font-mono);
  font-size: 0.78rem; line-height: 1.5;
  white-space: pre-wrap; word-break: break-all;
  margin: 0; max-height: 200px;
  overflow-y: auto;
}

.wrong-question-description {
  color: #4b5563;
  background: #e5e7eb !important;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  padding: 6px 8px;
  line-height: 1.6;
}

.wrong-question-description :is(h1, h2, h3, h4, h5, h6, strong, b) {
  color: #aeb9c6;
}

.wrong-question-description code {
  color: #9fc5ff;
  background: rgba(13, 17, 23, .9);
  padding: 1px 4px;
  border-radius: 3px;
}

/* ===== 工具类 ===== */
.text-muted { color: var(--text-secondary) !important; }
.text-info { color: var(--cyan) !important; }
.text-success { color: var(--green) !important; }
.text-danger { color: var(--pink) !important; }
.text-warning { color: var(--amber) !important; }
.text-primary { color: var(--cyan) !important; }

a { color: var(--cyan); transition: var(--transition-fast); }
a:hover { color: var(--purple); }

hr { border-color: var(--border-subtle); opacity: 0.5; }

/* 下拉菜单 */
.dropdown-menu {
  background: rgba(10, 16, 30, 0.96);
  border: 1px solid var(--border-default);
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}

.dropdown-item { color: var(--text-primary); }
.dropdown-item:hover {
  background: rgba(0,240,255,0.06);
  color: var(--cyan);
}

/* ===== 响应式 ===== */
@media (max-width: 991.98px) {
  .student-layout { flex-direction: column; }

  .question-sidebar {
    width: 100%; min-width: unset;
    max-height: 220px;
    border-right: none;
    border-bottom: 1px solid var(--border-subtle);
  }

  .CodeMirror { height: 120px !important; }
  .result-section { max-height: 250px; }

  #teacher-page, #admin-page { padding: var(--space-sm); }
  #teacher-tabs .nav-link { padding: 0.6rem 0.75rem; font-size: 12px; }
}

/* ===== 滚动条 ===== */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: rgba(6, 10, 20, 0.5); }
::-webkit-scrollbar-thumb {
  background: rgba(0,240,255,0.12);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(0,240,255,0.25); }

/* ===== 动画 ===== */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes cyberPulse {
  0% { box-shadow: 0 0 0 0 rgba(0,240,255,0.25); }
  70% { box-shadow: 0 0 0 10px rgba(0,240,255,0); }
  100% { box-shadow: 0 0 0 0 rgba(0,240,255,0); }
}

.btn-primary:focus { animation: cyberPulse 1s ease-out; }

.tab-pane.fade.show.active {
  animation: fadeInUp 0.3s var(--ease-out);
}

/* ===== Border overrides ===== */
.border-bottom { border-bottom-color: var(--border-subtle) !important; }
.border { border-color: var(--border-subtle) !important; }
.border-0 { border: none !important; }
.bg-white { background: var(--surface-1) !important; }

/* ===== 模态框中输入框 ===== */
.modal-sql-editor {
  background: rgba(8, 12, 24, 0.8) !important;
  color: var(--text-primary) !important;
  font-family: var(--font-mono) !important;
  border-color: var(--border-subtle) !important;
}

.modal-sql-editor:focus {
  border-color: var(--cyan) !important;
  box-shadow: 0 0 0 3px rgba(0,240,255,0.08) !important;
}

/* ===== 输入组 ===== */
.input-group .btn-outline-secondary {
  border-color: var(--border-subtle);
  color: var(--text-secondary);
  background: rgba(8, 12, 24, 0.5);
}

.input-group .btn-outline-secondary:hover {
  background: rgba(0,240,255,0.06);
  color: var(--cyan);
  border-color: rgba(0,240,255,0.25);
}

/* ===== 学生管理表格 ===== */
#student-mgmt-table th {
  background: rgba(0,240,255,0.03);
  font-weight: 600; font-size: 12px;
  text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--cyan);
  border-bottom: 1px solid rgba(0,240,255,0.12);
}

#student-mgmt-table td {
  vertical-align: middle; padding: 0.6rem 0.75rem;
  color: var(--text-primary);
  border-bottom: 1px solid rgba(0,240,255,0.04);
}

#student-mgmt-table tr:hover td { background: rgba(0,240,255,0.02); }

/* ===== 批量绑定表格 ===== */
#batch-bind-table th {
  color: var(--cyan);
  border-bottom-color: var(--border-subtle);
  background: rgba(0,240,255,0.03);
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px;
}

#batch-bind-table td {
  border-bottom-color: var(--border-subtle);
  color: var(--text-primary);
}

#batch-bind-table .table-danger td {
  background: rgba(255,51,102,0.06) !important;
}

/* ============================================================
   Design system v3 · Calm SQL Workspace
   Clean, readable, classroom-first.  This layer intentionally
   overrides the former decorative cyberpunk presentation while
   preserving every existing DOM hook and JavaScript interaction.
   ============================================================ */
:root {
  --cyan: #2563eb;
  --purple: #7c3aed;
  --green: #059669;
  --pink: #dc2626;
  --amber: #d97706;
  --blue: #2563eb;
  --surface-0: #f7f9fc;
  --surface-1: #ffffff;
  --surface-2: #ffffff;
  --surface-3: #f8fafc;
  --surface-card: #ffffff;
  --surface-glass: #ffffff;
  --border-subtle: #e6eaf0;
  --border-default: #d9e1ec;
  --border-strong: #b8c7dc;
  --text-primary: #172033;
  --text-secondary: #5f6f86;
  --text-tertiary: #8391a5;
  --text-inverse: #ffffff;
  --font-display: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --sidebar-width: 320px;
}

html, body { background: var(--surface-0); color: var(--text-primary); overflow: hidden; }
body::before, body::after { display: none; }
#app { min-height: 100vh; height: 100vh; }

/* Navigation */
.navbar { min-height: 68px; background: rgba(255,255,255,.94); border-bottom: 1px solid var(--border-subtle); box-shadow: 0 1px 0 rgba(15,23,42,.03), 0 8px 24px rgba(15,23,42,.04); }
.navbar::after { height: 2px; background: linear-gradient(90deg, #2563eb, #7c3aed, #06b6d4); animation: none; opacity: .9; transform: none; }
.navbar-brand { display: inline-flex; align-items: center; gap: 10px; padding: 0; color: var(--text-primary) !important; font-family: var(--font-display); font-size: .95rem; letter-spacing: 0; text-transform: none; text-shadow: none; line-height: 1.15; }
.navbar-brand::before { display: none; }
.navbar-brand strong, .navbar-brand small { display: block; }
.navbar-brand strong { font-weight: 750; letter-spacing: -.02em; }
.navbar-brand small { margin-top: 3px; color: var(--text-tertiary); font-size: .63rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.brand-mark { display: grid; width: 38px; height: 38px; place-items: center; color: #fff; background: linear-gradient(135deg, #2563eb, #4f46e5); border-radius: 11px; box-shadow: 0 7px 16px rgba(37,99,235,.22); }
.connection-status { padding: 6px 10px; border-radius: 999px; background: #f8fafc; border: 1px solid var(--border-subtle); }
.connection-status #connection-text { color: var(--text-secondary) !important; }

/* Login is a useful welcome screen, not a decorative billboard. */
#auth-page { padding: 36px 24px; overflow: auto; background: radial-gradient(circle at 8% 18%, rgba(37,99,235,.1), transparent 33%), radial-gradient(circle at 88% 80%, rgba(124,58,237,.09), transparent 30%), #f7f9fc; }
.auth-wrapper { max-width: 1060px; display: grid; grid-template-columns: minmax(0,1.1fr) minmax(390px,.9fr); gap: clamp(44px,8vw,110px); align-items: center; }
.auth-intro { max-width: 570px; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 999px; color: #38527d; background: #edf4ff; border: 1px solid #d8e8ff; font-size: .7rem; font-weight: 750; letter-spacing: .1em; }
.auth-intro h1 { margin: 20px 0 14px; color: #172033; font-size: clamp(2.25rem,4vw,3.6rem); font-weight: 800; letter-spacing: -.055em; line-height: 1.12; }
.auth-intro h1 em { color: #2563eb; font-style: normal; }
.auth-intro p { max-width: 500px; color: #5f6f86; font-size: 1.05rem; line-height: 1.8; }
.auth-highlights { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.auth-highlights span { display: inline-flex; align-items: center; gap: 7px; padding: 8px 10px; border: 1px solid var(--border-subtle); border-radius: 9px; color: #506078; background: rgba(255,255,255,.7); font-size: .82rem; font-weight: 650; }
.auth-highlights i { color: #2563eb; }
.auth-wrapper::before { display: none; }
.auth-card { border: 1px solid #e1e7f0; border-radius: 20px; background: #fff; box-shadow: 0 22px 60px rgba(30,41,59,.1); }
.auth-card .card-header { border-bottom-color: var(--border-subtle); }
.auth-card .card-body { padding: 28px !important; }
.auth-card .nav-link { padding: 15px; color: var(--text-secondary); font-weight: 700; }
.auth-card .nav-link.active { color: #2563eb; text-shadow: none; }
.auth-card .nav-link.active::after { width: 42%; height: 3px; background: #2563eb; }
.role-card { padding: 13px 8px; border-color: var(--border-default); background: #fff; box-shadow: none; }
.role-card:hover { border-color: #a7c5f8; background: #f8fbff; box-shadow: 0 8px 18px rgba(37,99,235,.08); transform: translateY(-2px); }
.role-card.active { border-color: #2563eb; background: #eff6ff; box-shadow: inset 0 0 0 1px #2563eb; }
.role-card.active .role-label { color: #2563eb; text-shadow: none; }

/* Shared surfaces and controls */
.card { background: #fff; border-color: var(--border-subtle); box-shadow: 0 5px 18px rgba(15,23,42,.045); color: var(--text-primary); }
.card:hover { border-color: var(--border-default); box-shadow: 0 10px 26px rgba(15,23,42,.07); }
.card-header { padding: 14px 18px; background: #fbfcfe; border-bottom-color: var(--border-subtle); color: #334155; }
.btn { border-radius: 8px; box-shadow: none; font-weight: 650; letter-spacing: 0; }
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: #2563eb; border-color: #2563eb; color: #fff; }
.btn-primary:hover { background: #1d4ed8; border-color: #1d4ed8; box-shadow: 0 6px 16px rgba(37,99,235,.2); }
.btn-success { background: #059669; border-color: #059669; color: #fff; }
.btn-warning { background: #d97706; border-color: #d97706; color: #fff; }
.btn-danger { background: #dc2626; border-color: #dc2626; }
.btn-outline-primary { border-color: #bfdbfe; color: #2563eb; }
.btn-outline-primary:hover { background: #eff6ff; color: #1d4ed8; border-color: #93c5fd; box-shadow: none; }
.btn-outline-success { border-color: #a7f3d0; color: #047857; }
.btn-outline-success:hover { background: #ecfdf5; color: #047857; border-color: #6ee7b7; box-shadow: none; }
.btn-outline-warning { border-color: #fde68a; color: #b45309; }
.btn-outline-warning:hover { background: #fffbeb; color: #92400e; border-color: #fcd34d; box-shadow: none; }
.btn-outline-danger { border-color: #fecaca; color: #dc2626; }
.btn-outline-danger:hover { background: #fef2f2; color: #b91c1c; border-color: #fca5a5; box-shadow: none; }
.btn-outline-secondary { border-color: #d6dee9; color: #526176; }
.btn-outline-secondary:hover { background: #f8fafc; border-color: #c0cad8; color: #334155; }
.form-control, .form-select { background: #fff; color: var(--text-primary); border-color: #d8e0ea; }
.form-control:focus, .form-select:focus { background: #fff; color: var(--text-primary); border-color: #7ca9f7; box-shadow: 0 0 0 3px rgba(37,99,235,.12); }
.form-control::placeholder { color: #9ba8b9; }
.form-label { color: #475569; font-weight: 650; }
.input-group-text { color: var(--text-tertiary) !important; background: #f8fafc !important; border-color: #d8e0ea !important; }
.text-muted { color: var(--text-secondary) !important; }
.text-primary, .text-info { color: #2563eb !important; }
.text-success { color: #059669 !important; }
.text-danger { color: #dc2626 !important; }
.text-warning { color: #b45309 !important; }

/* Student workspace */
.student-layout { background: #f7f9fc; }
.question-sidebar { background: #fff; border-right-color: var(--border-subtle); }
.question-sidebar::after { display: none; }
.sidebar-header { padding: 18px 16px 12px; background: #fff; border-bottom: 0; }
.sidebar-header h5 { color: #172033; font-family: var(--font-display); font-size: .92rem; letter-spacing: -.01em; text-transform: none; }
.question-list { padding: 8px; }
.question-item { padding: 12px; margin-bottom: 4px; border-radius: 10px; background: #fff; }
.question-item::before { width: 3px; background: #2563eb; }
.question-item:hover { transform: none; background: #f6f9ff; border-color: #d8e6fc; }
.question-item.active { background: #eff6ff; border-color: #bcd4fb; box-shadow: none; }
.question-item .q-title { color: #263448; }
.question-item .q-meta { color: #728198; }
.q-number { background: #eef3fa; color: #526176; }
.question-item.active .q-number { background: #2563eb; color: #fff; }
.question-item.completed { border-color: #b7ead5; }
.question-item.completed::before { background: #059669; }
.q-completed-badge { color: #059669; filter: none; }
.question-content { background: #f7f9fc; }
.content-header { padding: 20px 28px 14px; background: #fff; border-bottom-color: var(--border-subtle); }
.content-header h4 { color: #172033; font-family: var(--font-display); font-size: 1.12rem; letter-spacing: -.02em; }
.content-body { padding: 20px 28px; }
.schema-card { background: #fff; border-color: var(--border-subtle); box-shadow: 0 3px 12px rgba(15,23,42,.03); }
.schema-card:hover { border-color: #cbd8e8; }
.schema-header { color: #334155; background: #fbfcfe; }
.schema-header:hover { background: #f5f8fc; }
.schema-preview { color: #66758b; }
#init-sql-display, pre { color: #d9e5f5; background: #172033 !important; border-color: #26364d; }
.editor-section { margin: 0 16px; background: #fff; border-color: var(--border-subtle); box-shadow: 0 5px 18px rgba(15,23,42,.04); }
.editor-header, .editor-toolbar { background: #fbfcfe; border-color: var(--border-subtle); }
.editor-header label, .result-header { color: #334155; font-family: var(--font-display); letter-spacing: -.01em; }
.result-section, .history-section { margin-left: 16px; margin-right: 16px; background: #fff; border-color: var(--border-subtle); box-shadow: 0 5px 18px rgba(15,23,42,.04); }
.result-header, .history-header { background: #fbfcfe; border-color: var(--border-subtle); }
.history-header { color: #526176; }
.result-table th { color: #526176; background: #f5f8fc; border-bottom-color: #e2e8f0; }
.result-table td { color: #334155; border-bottom-color: #edf1f5; }
.result-table tr:hover td { background: #f8fbff; }

/* Teacher and admin workspaces */
#teacher-page, #admin-page { padding: 24px 28px; background: #f7f9fc; }
#teacher-tabs { gap: 6px; padding: 5px; margin-bottom: 20px; border: 1px solid var(--border-subtle); border-radius: 12px; background: #fff; box-shadow: 0 3px 12px rgba(15,23,42,.035); overflow-x: auto; flex-wrap: nowrap; }
#teacher-tabs .nav-link { padding: 9px 13px; border-radius: 8px; color: #68778d; white-space: nowrap; }
#teacher-tabs .nav-link::after { display: none; }
#teacher-tabs .nav-link:hover { background: #f4f7fb; color: #334155; }
#teacher-tabs .nav-link.active { color: #1d4ed8; background: #eff6ff; text-shadow: none; }
.table { --bs-table-bg: transparent; --bs-table-border-color: #e7ecf2; --bs-table-hover-bg: #f7faff; color: #334155; }
.table > :not(caption) > * > * { color: #334155; border-bottom-color: #e7ecf2; }
.table-light, .table-light th, .question-table th, #student-mgmt-table th { --bs-table-bg: #f8fafc; background: #f8fafc !important; color: #607086 !important; border-color: #e5eaf0 !important; font-size: .72rem; letter-spacing: .055em; }
.question-table td, #student-mgmt-table td { color: #334155; border-bottom-color: #e7ecf2; }
.question-table tr:hover td, #student-mgmt-table tr:hover td { background: #f7faff; }
.stat-card { background: #fff; border-color: var(--border-subtle); box-shadow: 0 4px 14px rgba(15,23,42,.035); }
.stat-card::before { background: #2563eb; }
.stat-card:hover { transform: translateY(-2px); border-color: #cedcf0; box-shadow: 0 12px 24px rgba(15,23,42,.075); }
.stat-value { background: none; -webkit-text-fill-color: #172033; color: #172033; font-size: 1.8rem; letter-spacing: -.04em; }
.stat-label { color: #7a899f; letter-spacing: .04em; text-transform: none; }
.badge { font-weight: 650; }
.badge.bg-primary { background: #e8f1ff !important; color: #1d4ed8 !important; border-color: #cfe0ff; }
.badge.bg-success { background: #eafaf3 !important; color: #047857 !important; border-color: #c7f1dd; }
.badge.bg-warning { background: #fff7df !important; color: #a16207 !important; border-color: #fde7ad; }
.badge.bg-danger { background: #fff0f0 !important; color: #b91c1c !important; border-color: #ffd3d3; }
.badge.bg-secondary { background: #f1f5f9 !important; color: #526176 !important; border-color: #e2e8f0; }
.badge.bg-dark { background: #eef2ff !important; color: #4f46e5 !important; border-color: #dfe2ff; }

/* Secondary surfaces and overlays */
.modal-content { background: #fff; color: #172033; border-color: #e1e7ee; box-shadow: 0 24px 70px rgba(15,23,42,.2); }
.modal-header, .modal-footer { border-color: var(--border-subtle); }
.btn-close { filter: none; opacity: .55; }
.list-group-item { background: #fff !important; color: #334155 !important; border-color: var(--border-subtle) !important; }
.list-group-item:hover { background: #f7faff !important; }
.list-group-item.active { background: #eff6ff !important; color: #1d4ed8 !important; border-color: #bfdbfe !important; }
.dropdown-menu { background: #fff; border-color: var(--border-default); box-shadow: 0 12px 30px rgba(15,23,42,.12); }
.dropdown-item { color: #334155; }
.dropdown-item:hover { background: #f5f8fc; color: #1d4ed8; }
#exam-page { background: #f7f9fc; }
#exam-page::before { display: none; }
.exam-q-card, .es-student-card, .qs-student-card { background: #fff !important; border-color: var(--border-subtle) !important; }
.exam-q-card .card-header { background: #fbfcfe !important; border-bottom-color: var(--border-subtle) !important; }
.exam-sql-textarea { background: #172033 !important; border-color: #26364d !important; color: #e5edf8 !important; }
.spinner-overlay { background: rgba(247,249,252,.72); }
.toast { border-color: var(--border-default); box-shadow: 0 14px 30px rgba(15,23,42,.13); }

@media (max-width: 767.98px) {
  .navbar { min-height: 60px; }
  .navbar-brand small, .connection-status, #navbar-role { display: none; }
  .navbar .container-fluid { padding-left: 12px !important; padding-right: 12px !important; }
  #auth-page { align-items: flex-start; padding: 28px 16px; }
  .auth-wrapper { display: block; }
  .auth-intro { margin-bottom: 30px; }
  .auth-intro h1 { font-size: 2.25rem; }
  .auth-intro p { font-size: .95rem; }
  .content-header, .content-body { padding-left: 16px; padding-right: 16px; }
  .editor-section, .result-section, .history-section { margin-left: 8px; margin-right: 8px; }
  #teacher-page, #admin-page { padding: 14px; }
  #teacher-tabs .nav-link { padding: 8px 10px; font-size: .76rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* v4.0 · 深色高对比主题：统一覆盖旧版浅色主题 */
:root {
  --surface-0: #080b12;
  --surface-1: #0e1420;
  --surface-2: #151e2d;
  --surface-3: #1c293b;
  --surface-card: #111a28;
  --surface-glass: #0f1724;
  --border-subtle: #33445c;
  --border-default: #48617f;
  --border-strong: #6685aa;
  --text-primary: #f4f7fb;
  --text-secondary: #c3cfdd;
  --text-tertiary: #9eafc3;
  --text-inverse: #07101b;
  --cyan: #5ee7f5;
  --blue: #70a7ff;
  --green: #55e6a5;
  --amber: #ffd166;
  --pink: #ff718c;
}

html, body { background: #080b12; color: #f4f7fb; }
body::before { display: block; opacity: .8; }
body::after { display: block; opacity: .45; }
.navbar { background: #0b111c; border-bottom-color: #3b526f; box-shadow: 0 8px 28px rgba(0,0,0,.45); }
.navbar-brand { color: #f4f7fb !important; }
.navbar-brand small { color: #9eafc3; }
.brand-mark { color: #fff; background: linear-gradient(135deg, #2563eb, #7c3aed); }
.connection-status { background: #151e2d; border-color: #48617f; }
.connection-status #connection-text { color: #c3cfdd !important; }
#auth-page, .student-layout, #teacher-page, #admin-page, #exam-page { background: #080b12; }
#auth-page { background: radial-gradient(circle at 8% 18%, rgba(37,99,235,.18), transparent 33%), radial-gradient(circle at 88% 80%, rgba(124,58,237,.15), transparent 30%), #080b12; }
.auth-intro h1 { color: #f4f7fb; }
.auth-intro h1 em, .auth-highlights i { color: #70a7ff; }
.auth-intro p { color: #c3cfdd; }
.eyebrow { color: #b9d8ff; background: #142849; border-color: #3868a8; }
.auth-highlights span { background: #111a28; border-color: #48617f; color: #c3cfdd; }
.auth-card, .card, .editor-section, .result-section, .history-section, .schema-card, .stat-card { background: #111a28; border-color: #48617f; color: #f4f7fb; }
.auth-card { box-shadow: 0 18px 55px rgba(0,0,0,.55); }
.auth-card .card-header, .card-header, .editor-header, .editor-toolbar, .result-header, .history-header, .schema-header { background: #182438; border-color: #33445c; color: #f4f7fb; }
.role-card { background: #121d2d; border-color: #48617f; color: #f4f7fb; }
.role-card:hover { background: #1a2c47; border-color: #70a7ff; }
.role-card.active { background: #17375f; border-color: #70a7ff; }
.role-card.active .role-label { color: #b9d8ff; }
.form-control, .form-select { background: #0e1623; border-color: #58718f; color: #f4f7fb; }
.form-control:focus, .form-select:focus { background: #111c2c; color: #fff; border-color: #70a7ff; box-shadow: 0 0 0 3px rgba(112,167,255,.24); }
.form-control::placeholder { color: #9eafc3; }
.form-label { color: #d8e2ee; }
.input-group-text { color: #c3cfdd !important; background: #182438 !important; border-color: #58718f !important; }
.text-muted, .form-text { color: #b2c0d1 !important; }
.text-primary, .text-info { color: #8dbaff !important; }
.text-success { color: #55e6a5 !important; }
.text-danger { color: #ff849b !important; }
.text-warning { color: #ffd166 !important; }
.question-sidebar { background: #0d1521; border-right-color: #48617f; }
.sidebar-header { background: #111a28; border-bottom: 1px solid #33445c; }
.sidebar-header h5, .content-header h4 { color: #f4f7fb; }
.question-item { background: #111a28; border-color: #33445c; }
.question-item:hover { background: #1a2c47; border-color: #587eae; }
.question-item.active { background: #17375f; border-color: #70a7ff; }
.question-item .q-title { color: #f0f5fb; }
.question-item .q-meta, .schema-preview { color: #b2c0d1; }
.q-number { background: #26364b; color: #e0e9f4; }
.question-item.active .q-number { background: #70a7ff; color: #07101b; }
.question-content, .content-body { background: #080b12; }
.content-header { background: #0e1623; border-bottom-color: #48617f; }
.schema-header:hover, .result-table tr:hover td { background: #1b2b43; }
#init-sql-display, pre, .exam-sql-textarea { color: #e8f2ff !important; background: #0a101a !important; border-color: #48617f !important; }
.editor-section, .result-section, .history-section { box-shadow: 0 8px 24px rgba(0,0,0,.3); }
.table { --bs-table-bg: transparent; --bs-table-color: #f0f5fb; --bs-table-border-color: #33445c; --bs-table-hover-bg: #1b2b43; color: #f0f5fb; }
.table > :not(caption) > * > * { color: #e4edf7; border-bottom-color: #33445c; }
.table-light, .table-light th, .question-table th, #student-mgmt-table th { background: #1b293d !important; color: #dce8f5 !important; border-color: #48617f !important; }
.question-table td, #student-mgmt-table td, .result-table td { color: #e4edf7; border-bottom-color: #33445c; }
.result-table th { color: #dce8f5; background: #1b293d; border-bottom-color: #48617f; }
.stat-value { -webkit-text-fill-color: #f4f7fb; color: #f4f7fb; }
.stat-label { color: #b2c0d1; }
.badge.bg-primary { background: #17375f !important; color: #b9d8ff !important; }
.badge.bg-success { background: #123d31 !important; color: #74f0b8 !important; }
.badge.bg-warning { background: #4a3812 !important; color: #ffd166 !important; }
.badge.bg-danger { background: #4b1e2a !important; color: #ff9aae !important; }
.badge.bg-secondary { background: #26364b !important; color: #d6e2ef !important; }
.badge.bg-dark { background: #26364b !important; color: #c8d8ed !important; }
.modal-content, .dropdown-menu { background: #111a28; color: #f4f7fb; border-color: #48617f; box-shadow: 0 24px 70px rgba(0,0,0,.65); }
.list-group-item { background: #111a28 !important; color: #e4edf7 !important; border-color: #33445c !important; }
.list-group-item:hover, .dropdown-item:hover { background: #1b2b43 !important; }
.dropdown-item { color: #e4edf7; }
.btn-close { filter: invert(1) brightness(2); opacity: .8; }
.spinner-overlay { background: rgba(8,11,18,.82); }

/* 学生端试卷：深色高对比覆盖，避免题目和运行结果与白色卡片混在一起 */
#exam-page,
#exam-page #exam-questions-container {
  background: #080b12 !important;
  color: #f4f7fb !important;
}

#exam-page .exam-q-card {
  background: #111a28 !important;
  border: 1px solid #48617f !important;
  color: #f4f7fb !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .3);
}

#exam-page .exam-q-card .card-header {
  background: #182438 !important;
  border-bottom: 1px solid #48617f !important;
  color: #f4f7fb !important;
}

#exam-page .exam-q-card .card-body {
  background: #111a28 !important;
  color: #e4edf7 !important;
}

#exam-page .exam-q-card .text-muted,
#exam-page .exam-q-card small.text-muted {
  color: #c3cfdd !important;
}

#exam-page .exam-q-card pre,
#exam-page .exam-q-card .exam-sql-textarea {
  background: #0a101a !important;
  border-color: #48617f !important;
  color: #e8f2ff !important;
}

#exam-page .exam-q-result {
  color: #e4edf7 !important;
  background: #0e1623;
  border: 1px solid #33445c;
  border-radius: 6px;
  padding: 6px 8px;
}

#exam-page .exam-q-result:empty {
  display: none;
}

#exam-page .exam-q-result .result-table {
  color: #e4edf7 !important;
  background: #111a28 !important;
  border-color: #48617f !important;
}

#exam-page .exam-q-result .result-table th {
  color: #dce8f5 !important;
  background: #1b293d !important;
  border-color: #48617f !important;
}

#exam-page .exam-q-result .result-table td {
  color: #e4edf7 !important;
  background: #111a28 !important;
  border-color: #33445c !important;
}