html, body {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
html::-webkit-scrollbar,
body::-webkit-scrollbar {
  display: none;
}


.blob[data-v-511369a3] {
  position: absolute;
  background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%);
  filter: blur(80px);
  opacity: 0.18;
  border-radius: 50%;
  animation: blob-511369a3 20s linear infinite;
  z-index: -2;
}
@keyframes blob-511369a3 {
0% {
    transform: translate(0, 0) scale(1);
}
33% {
    transform: translate(10%, -15%) scale(1.2);
}
66% {
    transform: translate(-15%, 5%) scale(0.9);
}
100% {
    transform: translate(0, 0) scale(1);
}
}
.glassmorphism[data-v-511369a3] {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 4px 20px rgba(31, 38, 135, 0.1);
}
.card-hover[data-v-511369a3] {
  transition: all 0.3s ease;
}
.card-hover[data-v-511369a3]:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(31, 38, 135, 0.15);
}
.gradient-bg[data-v-511369a3] {
  background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%);
}
.progress-ring[data-v-511369a3] {
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
}
.module-badge[data-v-511369a3] {
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}
.status-not-started[data-v-511369a3] {
  background-color: #e5e7eb;
  color: #6b7280;
}
.status-in-progress[data-v-511369a3] {
  background-color: #dbeafe;
  color: #1d4ed8;
}
.status-completed[data-v-511369a3] {
  background-color: #dcfce7;
  color: #166534;
}
.fade-enter-active[data-v-511369a3],
.fade-leave-active[data-v-511369a3] {
  transition: opacity 0.2s;
}
.fade-enter[data-v-511369a3],
.fade-leave-to[data-v-511369a3] {
  opacity: 0;
}
.review-table[data-v-511369a3] .el-table__cell {
  padding: 16px 24px;
}
.review-table[data-v-511369a3] .el-table__header .cell {
  padding: 0;
}
.review-table[data-v-511369a3] .el-table__header th {
  background: transparent;
}

/* Tailwind directives removed; standalone CSS equivalents */

/* 透明白背景类 */
.bgw-70 {
  background-color: rgba(255, 255, 255, 0.70);
}

.bgw-50 {
  background-color: rgba(255, 255, 255, 0.50);
}

.bgw-80 {
  background-color: rgba(255, 255, 255, 0.80);
}

/* 玻璃拟态 */
.glassmorphism {
  background-color: rgba(255, 255, 255, 0.70);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.30);
  border-radius: 0.75rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
}

/* 卡片悬浮效果 */
.card-hover {
  transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

.card-hover:hover {
  transform: translateY(-0.25rem);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
}

/* 渐变背景 */
.gradient-bg {
  background-image: linear-gradient(to bottom right, #7e22ce, #d946ef);
}

/* 导航标签 */
.nav-tab {
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  transition: color 200ms, background-color 200ms, box-shadow 200ms;
  font-size: 0.875rem;
  line-height: 1.25rem;
  cursor: pointer;
  font-weight: 400;
}

.nav-tab.active {
  color: #ffffff;
  background-image: linear-gradient(to bottom right, #7e22ce, #d946ef);
}

.nav-tab:not(.active) {
  color: #6b7280;
  /* gray-500 */
  background-color: rgba(255, 255, 255, 0.50);
}

.nav-tab:not(.active):hover {
  color: #374151;
  /* gray-700 */
  background-color: rgba(255, 255, 255, 0.80);
}

/* 题目类型与学员状态通用样式 */
.question-type,
.student-status {
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
}

/* 类型颜色 */
.type-ai-programming {
  background-color: #e0f2fe;
  color: #0284c7;
}

/* sky-100 / sky-600 */
.type-ai-video {
  background-color: #dcfce7;
  color: #16a34a;
}

/* green-100 / green-600 */
.type-ai-graphics {
  background-color: #fae8ff;
  color: #c026d3;
}

/* fuchsia-100 / fuchsia-600 */
.type-ai-text {
  background-color: #fef3c7;
  color: #d97706;
}

/* amber-100 / amber-600 */

/* 学员状态 */
.status-active {
  background-color: #dcfce7;
  color: #15803d;
}

/* green-100 / green-700 */
.status-inactive {
  background-color: #fee2e2;
  color: #b91c1c;
}

/* red-100 / red-700 */

/* ================== 响应式基础样式 ================== */
/* 防止iOS上的文字大小自动调整 */
html {
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* 移动设备触摸反馈 */
* {
  -webkit-tap-highlight-color: transparent;
}

/* 确保可点击元素有足够的触摸区域 */
button,
.a,
input[type="button"],
input[type="submit"],
input[type="reset"],
.el-button,
.el-select,
.el-input {
  touch-action: manipulation;
}

/* 响应式表格容器 */
.responsive-table-container {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* 响应式卡片 */
.responsive-card {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* 响应式按钮组 */
.responsive-button-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* 响应式输入组 */
.responsive-input-group {
  width: 100%;
  box-sizing: border-box;
}

/* 移动端隐藏/显示工具类 */
.hidden-mobile {
  display: block;
}

.visible-mobile {
  display: none;
}

/* 平板端隐藏/显示工具类 */
.hidden-tablet {
  display: block;
}

.visible-tablet {
  display: none;
}

/* ================== 平板端适配 (641-768px) ================== */
@media (max-width: 768px) {

  /* 调整字体大小 */
  body {
    font-size: 14px;
  }

  h1 {
    font-size: 1.75rem;
  }

  h2 {
    font-size: 1.5rem;
  }

  h3 {
    font-size: 1.25rem;
  }

  /* 调整边距 */
  .container {
    padding-left: 16px;
    padding-right: 16px;
  }

  /* 卡片样式调整 */
  .glassmorphism {
    border-radius: 0.5rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  }

  /* 导航标签调整 */
  .nav-tab {
    padding: 0.4rem 0.8rem;
    font-size: 0.8125rem;
  }

  /* 表格容器调整 */
  .responsive-table-container {
    margin-left: -16px;
    margin-right: -16px;
    width: calc(100% + 32px);
  }

  /* 平板端隐藏/显示切换 */
  .hidden-tablet {
    display: none;
  }

  .visible-tablet {
    display: block;
  }

  /* 调整间距 */
  .mb-4 {
    margin-bottom: 1rem;
  }

  .mt-4 {
    margin-top: 1rem;
  }
}

/* ================== 手机端适配 (≤640px) ================== */
@media (max-width: 640px) {

  /* 调整字体大小 */
  body {
    font-size: 15px;
    line-height: 1.5;
  }

  h1 {
    font-size: 1.5rem;
  }

  h2 {
    font-size: 1.25rem;
  }

  h3 {
    font-size: 1.125rem;
  }

  h4 {
    font-size: 1rem;
  }

  /* 调整边距 */
  .container {
    padding-left: 12px;
    padding-right: 12px;
  }

  /* 卡片样式调整 */
  .glassmorphism {
    background-color: rgba(255, 255, 255, 0.85);
    border-radius: 0.5rem;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  }

  /* 导航标签调整 */
  .nav-tab {
    padding: 0.6rem 1rem;
    font-size: 0.875rem;
    margin-bottom: 4px;
    width: 100%;
    text-align: center;
  }

  /* 调整可点击元素大小 */
  button,
  .el-button {
    min-height: 30px;
    min-width: 30px;
    font-size: 0.75rem;
  }

  /* 输入框调整 */
  input,
  select,
  textarea,
  .el-input__inner {
    font-size: 1rem;
    height: 44px;
    line-height: 44px;
  }

  /* 表格容器调整 */
  .responsive-table-container {
    margin-left: -12px;
    margin-right: -12px;
    width: calc(100% + 24px);
  }

  /* 移动端隐藏/显示切换 */
  .hidden-mobile {
    display: none;
  }

  .visible-mobile {
    display: block;
  }

  /* 调整间距 */
  .mb-4 {
    margin-bottom: 1rem;
  }

  .mt-4 {
    margin-top: 1rem;
  }

  .p-4 {
    padding: 1rem;
  }

  /* 标题区域调整 */
  .title-area {
    padding: 1rem;
  }

  /* 状态标签调整 */
  .question-type,
  .student-status {
    padding: 0.25rem 0.75rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
  }
}

/* ================== 暗色主题响应式适配 ================== */
@media (max-width: 640px) {
  html.dark {
    /* 调整暗色主题下的基础颜色 */
    --bg-primary: #0f172a;
    --bg-secondary: #1e293b;
    --text-primary: #e2e8f0;
    --text-secondary: #94a3b8;
  }

  html.dark .glassmorphism {
    background-color: rgba(15, 23, 42, 0.85);
    border-color: rgba(148, 163, 184, 0.1);
  }

  html.dark .nav-tab:not(.active) {
    color: #94a3b8;
    /* gray-400 */
    background-color: rgba(30, 41, 59, 0.50);
  }

  html.dark .nav-tab:not(.active):hover {
    color: #e2e8f0;
    /* gray-200 */
    background-color: rgba(30, 41, 59, 0.80);
  }
}

/* ================== 滚动条样式优化 ================== */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(156, 163, 175, 0.5);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(156, 163, 175, 0.7);
}

/* 移动端优化滚动条 */
@media (max-width: 640px) {
  ::-webkit-scrollbar {
    width: 4px;
    height: 4px;
  }

  ::-webkit-scrollbar-thumb {
    border-radius: 2px;
  }
}
/* 教师端移动端适配补充样式 */
/* 引入后针对不方便直接添加类名的结构做媒体查询增强。
   使用 Tailwind 原则：能用类的地方优先类，这里处理跨组件或第三方库表格。 */

/* 小屏：表格允许横向滚动 */
@media (max-width: 768px) {
  .table-responsive-wrapper { width:100%; overflow-x:auto; }
  .table-responsive-wrapper table { min-width:600px; }
}

/* 超小屏：栈式展示（为明确加上 stack-mobile 类的表格，不强制所有表格） */
@media (max-width: 640px) {
  table.stack-mobile thead { display:none; }
  table.stack-mobile tr { display:block; margin-bottom:12px; background:#ffffff; border:1px solid #e2e8f0; border-radius:10px; box-shadow:0 1px 3px rgba(0,0,0,.06); padding:6px 8px; }
  table.stack-mobile td { display:flex; padding:4px 6px; font-size:13px; line-height:1.4; }
  table.stack-mobile td::before { content: attr(data-label); flex:0 0 90px; font-weight:600; color:#475569; }
}

/* 表单优化：标签上移 */
@media (max-width: 640px) {
  .form-row { display:block !important; }
  .form-row > label { display:block; margin-bottom:4px; font-size:13px; }
  .form-row .form-field { width:100% !important; }
}

/* 卡片内边距缩减 */
@media (max-width: 640px) {
  .content-card, .card-glass { padding:14px 16px !important; }
}

/* 大标题缩放 */
@media (max-width: 640px) {
  h1.page-title { font-size:18px !important; }
  h2.page-title { font-size:16px !important; }
}

/* 操作按钮行换行 */
@media (max-width: 640px) {
  .actions-row { flex-wrap:wrap; gap:8px !important; }
  .actions-row .btn-gradient, .actions-row .btn-create, .actions-row .btn-soft { width:auto; }
}

/* 暗色下保持卡片对比度 */
html.dark table.stack-mobile tr { background: rgba(30,41,59,.85); border-color: rgba(255,255,255,.08); }
html.dark table.stack-mobile td::before { color:#cbd5e1; }

/* ================== 第二阶段移动端精细化适配 ================== */
/* 满宽覆盖：去除教师端在超窄屏的居中留白，让内容贴边（适度内边距） */
@media (max-width: 640px) {
  .teacher-layout .max-w-7xl,
  .teacher-layout .max-w-6xl,
  .teacher-layout .max-w-5xl,
  .teacher-layout .max-w-4xl,
  .teacher-layout .max-w-md {
    max-width: 100% !important;
  }
  .teacher-layout main { padding-left:12px !important; padding-right:12px !important; }
  .teacher-layout header { padding-left:16px !important; padding-right:16px !important; }
}

/* 超窄屏进一步收缩左右留白，避免可用宽度浪费 */
@media (max-width: 380px) {
  .teacher-layout main { padding-left:8px !important; padding-right:8px !important; }
  .teacher-layout header { padding-left:12px !important; padding-right:12px !important; }
}

/* 安全区域支持（iOS 刘海等） */
@supports (padding: env(safe-area-inset-top)) {
  .safe-area-y { padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); }
}

/* 抽屉开启时锁定页面滚动（通过 body-lock 类控制） */
.body-lock { overflow:hidden; height:100vh; touch-action:none; }

/* 装饰元素在极窄屏隐藏（如背景彩色 blob，避免遮挡主要内容） */
@media (max-width: 400px) {
  .blob, .hero-blob { display:none !important; }
}

/* 自适应标题字号（提供可选类，不强制已有结构） */
.adaptive-title-1 { font-size: clamp(20px, 5vw, 28px); font-weight:700; }
.adaptive-title-2 { font-size: clamp(18px, 4.5vw, 24px); font-weight:600; }

/* 提升信息密度：移动端卡片标题/段落间距细化 */
@media (max-width:640px){
  .content-card h2, .content-card h3, .glassmorphism h2, .glassmorphism h3 { margin-top:6px; margin-bottom:10px; }
  .content-card p, .glassmorphism p { margin-bottom:8px; }
}

/* 聊天气泡在超窄屏强制占满（减少字换行深度） */
@media (max-width:380px){
  .chat-bubble-user, .chat-bubble-ai { max-width:100% !important; }
}

/* 暗色模式下的安全区域适配（透明度轻调） */
html.dark .safe-area-y { background-clip: padding-box; }

/* 全局基础样式与复用类（抽取自多端页面） */ /* 教师端移动端适配补充 */
:root {
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, .04);
  --shadow-md: 0 4px 14px -4px rgba(0, 0, 0, .12);
  --shadow-card: 0 4px 20px rgba(31, 38, 135, .10);
  --shadow-card-hover: 0 8px 24px rgba(31, 38, 135, .15);
  --color-primary: #0ea5e9;
  --color-primary-grad-from: #0ea5e9;
  --color-primary-grad-to: #22d3ee;
  --color-accent-purple: #7e22ce;
  --color-accent-purple-to: #6d28d9;
  --color-text-strong: #1f2937;
  --color-text-soft: #64748b;
  /* 考试管理 - 具体考试列表（亮色默认）*/
  --exam-children-wrapper-bg: #fafcff;
  --exam-child-item-bg: #ffffff;
  --exam-child-item-border: #e2e8f0;
  --exam-child-meta-text: #475569;
  --exam-child-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}

/* 卡片通用 */
.content-card,
.card-glass {
  background: rgba(255, 255, 255, .7);
  backdrop-filter: blur(10px);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255, 255, 255, .3);
  box-shadow: var(--shadow-card);
  transition: .3s;
}

.content-card:hover,
.card-glass:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-2px);
}

/* 渐变主按钮 */
.btn-primary,
.btn-gradient {
  background: linear-gradient(135deg, var(--color-primary-grad-from), var(--color-primary-grad-to));
  color: #fff;
  border-radius: var(--radius-md);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 500;
  padding: 10px 18px;
  transition: .25s;
}

.btn-primary:hover,
.btn-gradient:hover {
  box-shadow: 0 8px 20px rgba(14, 165, 233, .3);
  transform: translateY(-1px);
}

/* 紫色创建按钮（教师端） */
.btn-create,
.btn-purple {
  background: linear-gradient(90deg, var(--color-accent-purple), var(--color-accent-purple-to));
  color: #fff;
  border-radius: var(--radius-md);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 500;
  padding: 10px 22px;
  box-shadow: 0 4px 14px -4px rgba(109, 40, 217, .45);
  transition: .25s;
}

.btn-create:hover,
.btn-purple:hover {
  transform: translateY(-2px);
}

/* 软色次按钮 */
.btn-soft {
  background: #f5f3ff;
  color: #6d28d9;
  border-radius: var(--radius-md);
  padding: 8px 16px;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 500;
}

.btn-soft:hover {
  background: #ede9fe;
}

/* 操作按钮（浅蓝、绿色等） */
.btn-detail {
  background: #e0f2fe;
  color: #0369a1;
  border-radius: var(--radius-md);
  padding: 8px 16px;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  font-weight: 500;
}

.btn-review {
  background: var(--color-accent-purple);
  color: #fff;
  border-radius: var(--radius-md);
  padding: 8px 16px;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  font-weight: 500;
}

.btn-finished {
  background: #dcfce7;
  color: #166534;
  border-radius: var(--radius-md);
  padding: 8px 16px;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  font-weight: 500;
}

/* 徽章 / 状态标签 */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 500;
  border-radius: 999px;
  letter-spacing: .5px;
}

.badge-pending {
  background: #eff6ff;
  color: #1d4ed8;
}

.badge-running {
  background: #ecfdf5;
  color: #047857;
}

.badge-finished {
  background: #f1f5f9;
  color: #475569;
}

.badge-active {
  background: #dcfce7;
  color: #15803d;
}

.badge-wait {
  background: #e0f2fe;
  color: #0369a1;
}

.badge-danger {
  background: #fee2e2;
  color: #dc2626;
}

/* 统一滚动条 */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: rgba(241, 245, 249, .5);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  background: rgba(14, 165, 233, .3);
  border-radius: 4px;
  -webkit-transition: background .3s;
  transition: background .3s;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(14, 165, 233, .5);
}

/* Admin 端隐藏滚动条（弹窗内除外） */
.admin-shell,
.admin-shell * {
  scrollbar-width: none; /* Firefox */
}

.admin-shell ::-webkit-scrollbar {
  display: none; /* Chrome / Safari / Edge */
}

/* 弹窗内恢复滚动条 */
.el-dialog,
.el-dialog *,
.el-dialog__wrapper .el-dialog,
.el-dialog__wrapper .el-dialog * {
  scrollbar-width: thin;
}

.el-dialog ::-webkit-scrollbar,
.el-dialog__wrapper .el-dialog ::-webkit-scrollbar {
  display: block;
  width: 8px;
  height: 8px;
}

/* 工具类 */
.text-soft {
  color: var(--color-text-soft);
}

.text-strong {
  color: var(--color-text-strong);
}

.shadow-sm {
  box-shadow: var(--shadow-sm) !important;
}

.rounded-md {
  border-radius: var(--radius-md) !important;
}

.rounded-lg {
  border-radius: var(--radius-lg) !important;
}

/* 淡入 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity .25s;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}

/* Dark Theme Overrides */
html.dark {
  --color-text-strong: #f1f5f9;
  --color-text-soft: #94a3b8;
  --color-primary-grad-from: #0ea5e9;
  --color-primary-grad-to: #38bdf8;
  /* 暗色覆写变量 */
  --exam-children-wrapper-bg: rgba(30, 42, 58, 0.55);
  --exam-child-item-bg: rgba(17, 25, 39, 0.9);
  --exam-child-item-border: rgba(100, 116, 139, 0.28);
  --exam-child-meta-text: #94a3b8;
  --exam-child-shadow: 0 2px 6px -2px rgba(0, 0, 0, 0.45);
  background: #0f172a;
  /* fallback */
  color: var(--color-text-strong);
}

html.dark body {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}

html.dark .admin-shell {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}

/* 管理端暗色下，统一文本为浅色，避免出现黑字 */
html.dark .admin-shell,
html.dark .admin-shell h1,
html.dark .admin-shell h2,
html.dark .admin-shell h3,
html.dark .admin-shell h4,
html.dark .admin-shell h5,
html.dark .admin-shell h6,
html.dark .admin-shell p,
html.dark .admin-shell span,
html.dark .admin-shell li,
html.dark .admin-shell div,
html.dark .admin-shell th,
html.dark .admin-shell td,
html.dark .admin-shell label,
html.dark .admin-shell small {
  color: #e5e7eb;
}

/* 次级文字颜色 */
html.dark .admin-shell .text-soft,
html.dark .admin-shell .breadcrumb,
html.dark .admin-shell .sub,
html.dark .admin-shell .desc {
  color: #cbd5e1;
}

html.dark .sidebar {
  background: rgba(30, 41, 59, .75);
  border-right: 1px solid rgba(255, 255, 255, .08);
}

html.dark .menu-item {
  color: #94a3b8 !important;
}

html.dark .menu-item.active {
  background: rgba(14, 165, 233, .15);
  color: #38bdf8;
  border-left-color: #38bdf8;
}

html.dark .menu-item:not(.active):hover {
  background: rgba(71, 85, 105, .35);
}

html.dark .top-nav {
  background: rgba(30, 41, 59, .7);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}

html.dark .page-title {
  color: #e2e8f0;
}

html.dark .breadcrumb {
  color: #64748b;
}

html.dark .search-box input {
  background: #1e293b;
  color: #e2e8f0;
  border-color: #334155;
}

html.dark .search-box input:focus {
  border-color: #38bdf8;
  box-shadow: 0 0 0 3px rgba(56, 189, 248, .35);
}

html.dark .content-card,
html.dark .card-glass,
html.dark .glassmorphism {
  background: rgba(30, 41, 59, .65);
  border: 1px solid rgba(255, 255, 255, .08);
  box-shadow: 0 4px 20px rgba(0, 0, 0, .45);
}

/* 管理端局部使用的 .card 也切换为暗色 */
html.dark .card {
  background: rgba(30, 41, 59, .75) !important;
  border-color: rgba(255, 255, 255, .08) !important;
  color: #e5e7eb !important;
}

/* 卡片内部所有后代元素文本默认浅色，避免嵌套子元素出现黑字 */
html.dark .card * {
  color: inherit;
}

/* 表格页头/单元文字在暗色下变为浅色 */
html.dark .th {
  color: #e5e7eb !important;
}

html.dark .td {
  color: #e5e7eb !important;
}

html.dark .card-hover:hover {
  box-shadow: 0 8px 28px rgba(0, 0, 0, .55);
}

html.dark .sender-tag.system {
  background-color: rgba(14, 165, 233, 0.15);
  color: #38bdf8;
}

html.dark .sender-tag.teacher {
  background-color: rgba(22, 163, 74, 0.15);
  color: #34d399;
}

html.dark .sender-tag.student {
  background-color: rgba(99, 102, 241, 0.15);
  color: #818cf8;
}

html.dark .message-item.unread {
  background-color: rgba(14, 165, 233, 0.07);
}

html.dark .notify {
  color: #cbd5e1;
}

html.dark .notify:hover {
  color: #38bdf8;
}

html.dark .theme-btn {
  color: #cbd5e1;
}

html.dark .theme-btn:hover {
  color: #38bdf8;
}

html.dark ::-webkit-scrollbar-track {
  background: rgba(30, 41, 59, .6);
}

html.dark ::-webkit-scrollbar-thumb {
  background: rgba(56, 189, 248, .35);
}

html.dark ::-webkit-scrollbar-thumb:hover {
  background: rgba(56, 189, 248, .55);
}

/* 表单与链接在暗色下的文本颜色 */
html.dark .admin-shell .el-form-item__label {
  color: #cbd5e1;
}

html.dark .admin-shell .el-input__inner,
html.dark .admin-shell .el-select .el-input__inner {
  background: #0b1220;
  color: #e5e7eb;
  border-color: #334155;
}

/* 暗色：全局弹窗（append-to-body 脱离 admin-shell 时）输入控件统一暗色 */
html.dark .el-dialog__wrapper .el-input__inner,
html.dark .el-dialog__wrapper .el-select .el-input__inner,
html.dark .el-dialog__wrapper .el-textarea__inner {
  background: #0b1220 !important;
  color: #e5e7eb !important;
  border-color: #334155 !important;
  box-shadow: none;
}

html.dark .el-dialog__wrapper .el-input__inner:focus,
html.dark .el-dialog__wrapper .el-select .el-input__inner:focus,
html.dark .el-dialog__wrapper .el-textarea__inner:focus {
  border-color: #38bdf8 !important;
  box-shadow: 0 0 0 3px rgba(56, 189, 248, .25) !important;
}

html.dark .el-dialog__wrapper .el-input__inner::-moz-placeholder, html.dark .el-dialog__wrapper .el-textarea__inner::-moz-placeholder {
  color: #64748b !important;
}

html.dark .el-dialog__wrapper .el-input__inner::placeholder,
html.dark .el-dialog__wrapper .el-textarea__inner::placeholder {
  color: #64748b !important;
}

/* 弹窗容器及标题颜色 */
html.dark .el-dialog {
  background: rgba(30, 41, 59, 0.85) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(10px);
  color: #e5e7eb;
}

html.dark .el-dialog__title {
  color: #e2e8f0;
}

html.dark .el-dialog__headerbtn .el-dialog__close {
  color: #94a3b8;
}

html.dark .el-dialog__headerbtn:hover .el-dialog__close {
  color: #38bdf8;
}

html.dark .el-dialog__footer {
  border-top: 1px solid rgba(148, 163, 184, 0.15);
}

/* 自定义标题类统一白色 */
html.dark .dlg-title,
html.dark .tv-title,
html.dark .view-title,
html.dark .teacher-view-dialog .tv-title,
html.dark .teacher-edit-dialog .dlg-title,
html.dark .teacher-add-dialog .dlg-title,
html.dark .publish-dialog .el-dialog__title,
html.dark .admin-view-dialog .view-title,
html.dark .org-dialog .el-dialog__title {
  color: #ffffff !important;
}

/* 暗色：管理端弹窗正文统一文字白色（不影响占位符与禁用态） */
html.dark .el-dialog__body,
html.dark .el-dialog__body p,
html.dark .el-dialog__body .el-form-item__label,
html.dark .el-dialog__body .el-form-item__content,
html.dark .el-dialog__body label,
html.dark .el-dialog__body .text,
html.dark .el-dialog__body span,
html.dark .el-dialog__body div,
html.dark .el-dialog__body th,
html.dark .el-dialog__body td {
  color: #f1f5f9;
}

/* 次级提示类仍保持柔和灰可单独覆盖（如 .text-soft, .desc 等），此规则放后面再调即可 */
/* 暗色：发布考试通知弹窗内部卡片与内容 */
html.dark .publish-dialog .section {
  background: rgba(17, 25, 39, 0.9) !important;
  border: 1px solid rgba(148, 163, 184, 0.18) !important;
  box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.55);
}

html.dark .publish-dialog .field-label {
  color: #e2e8f0 !important;
}

html.dark .publish-dialog .module-card {
  background: rgba(30, 41, 59, 0.55) !important;
  border: 1px solid rgba(148, 163, 184, 0.18) !important;
}

html.dark .publish-dialog .teacher-box {
  background: rgba(30, 41, 59, 0.55) !important;
  border: 1px dashed rgba(148, 163, 184, 0.35) !important;
}

html.dark .publish-dialog .empty-state {
  color: #94a3b8 !important;
}

html.dark .publish-dialog .empty-state .t1 {
  color: #cbd5e1 !important;
}

html.dark .publish-dialog .empty-state .t2 {
  color: #64748b !important;
}

html.dark .publish-dialog .score-box .lab,
html.dark .publish-dialog .assign-row label {
  color: #94a3b8 !important;
}

html.dark .publish-dialog .module-title {
  color: #ffffff !important;
}

html.dark .publish-dialog .section-head h3 {
  color: #ffffff !important;
}

/* 发布考试通知 - 考试模块配置内部白底覆盖 */
html.dark .publish-dialog .module-card {
  background: rgba(15, 23, 42, 0.85) !important;
  border-color: rgba(148, 163, 184, 0.18) !important;
}

html.dark .publish-dialog .module-card .assign-row {
  background: rgba(17, 25, 39, 0.95) !important;
  border-color: rgba(100, 116, 139, 0.35) !important;
}

html.dark .publish-dialog .module-card .assign-row label {
  color: #cbd5e1 !important;
}

html.dark .publish-dialog .module-card .assign-row .el-input__inner {
  background: #0b1220 !important;
  border-color: #334155 !important;
  color: #e5e7eb !important;
}

html.dark .publish-dialog .module-card .assign-row .el-input__inner::-moz-placeholder {
  color: #64748b !important;
}

html.dark .publish-dialog .module-card .assign-row .el-input__inner::placeholder {
  color: #64748b !important;
}

/* 暗色：数字输入框加减按钮 */
html.dark .el-input-number__decrease,
html.dark .el-input-number__increase {
  background: #0b1220;
  border-color: #334155;
  color: #cbd5e1;
}

html.dark .el-input-number__decrease:hover,
html.dark .el-input-number__increase:hover {
  background: #1e293b;
  color: #38bdf8;
}

html.dark .el-input-number.is-disabled .el-input-number__decrease,
html.dark .el-input-number.is-disabled .el-input-number__increase,
html.dark .el-input-number__decrease.is-disabled,
html.dark .el-input-number__increase.is-disabled {
  background: #1e2533;
  color: #475569;
  border-color: #2a3646;
  cursor: not-allowed;
}

html.dark .el-input-number__increase:after,
html.dark .el-input-number__decrease:after {
  /* 移除默认分隔线高亮 */
  background: rgba(255, 255, 255, 0.06);
}

/* 暗色：数字输入框整体与输入框边框颜色（计数器外框） */
html.dark .el-input-number .el-input__inner {
  background: #0b1220 !important;
  border: 1px solid #334155 !important;
  color: #e2e8f0 !important;
  box-shadow: none;
}

html.dark .el-input-number:hover .el-input__inner,
html.dark .el-input-number .el-input__inner:focus {
  border-color: #38bdf8 !important;
}

html.dark .el-input-number.is-disabled .el-input__inner {
  background: #1e2533 !important;
  border-color: #2a3646 !important;
  color: #475569 !important;
}

html.dark .el-input-number.is-disabled:hover .el-input__inner {
  border-color: #2a3646 !important;
}

/* 暗色：文本域字数统计计数器 */
html.dark .el-input__count {
  background: rgba(15, 23, 42, 0.9) !important;
  border: 1px solid rgba(148, 163, 184, 0.25) !important;
  color: #cbd5e1 !important;
  box-shadow: 0 2px 6px -2px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
}

html.dark .el-input.is-error .el-input__count {
  border-color: #f87171 !important;
}

/* 组织弹窗：单行输入字数统计在暗色模式下进一步压低亮度，贴合输入框背景 */
html.dark .org-dialog .el-input:not(.el-textarea) .el-input__count {
  background: #0b1220 !important;
  /* 与输入框同色 */
  border: 1px solid #2a3646 !important;
  color: #94a3b8 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  border-radius: 4px !important;
  padding: 2px 6px !important;
}

html.dark .org-dialog .el-input:not(.el-textarea):hover .el-input__count {
  border-color: #334155 !important;
  color: #cbd5e1 !important;
}

/* 暗色：计数字段内部容器（修复透明问题） */
html.dark .el-input__count-inner {
  background: rgba(255, 255, 255, 0.08) !important;
  /* 若需纯白可改为 #fff */
  color: #e2e8f0 !important;
  border-radius: 4px;
  padding: 0 4px;
  line-height: 1.2;
}


html.dark .admin-shell .el-input__inner::-moz-placeholder {
  color: #94a3b8;
}


html.dark .admin-shell .el-input__inner::placeholder {
  color: #94a3b8;
}

html.dark .admin-shell .el-link {
  color: #cbd5e1;
}

html.dark .admin-shell .el-link.el-link--primary {
  color: #38bdf8;
}

/* ========== 暗色：上传 / 图片区域统一风格 ========== */
html.dark .upload-dialog .el-dialog__body .upload-area .el-upload-dragger,
html.dark .upload-area .el-upload-dragger {
  background: rgba(15, 23, 42, 0.9) !important;
  border: 2px dashed #334155 !important;
  color: #94a3b8 !important;
  transition: .2s;
}

html.dark .upload-area .el-upload-dragger:hover {
  border-color: #38bdf8 !important;
  background: rgba(30, 41, 59, 0.85) !important;
  color: #cbd5e1 !important;
}

html.dark .upload-area .el-icon-upload {
  color: #64748b !important;
}

html.dark .upload-area .el-upload__text {
  color: #38bdf8 !important;
}

html.dark .upload-area .el-upload__tip {
  color: #64748b !important;
}

/* 上传文件列表条目 */
html.dark .el-upload-list__item {
  background: rgba(17, 25, 39, 0.85) !important;
  border: 1px solid #334155 !important;
  color: #cbd5e1 !important;
}

html.dark .el-upload-list__item:hover {
  background: rgba(30, 41, 59, 0.9) !important;
  border-color: #38bdf8 !important;
}

html.dark .el-upload-list__item .el-icon-close {
  color: #94a3b8 !important;
}

html.dark .el-upload-list__item .el-icon-close:hover {
  color: #f87171 !important;
}

/* 图片预览与占位（Element Image 组件） */
html.dark .el-image,
html.dark .el-image__inner,
html.dark .el-image__placeholder,
html.dark .el-image__error {
  background: #0b1220 !important;
}

html.dark .el-image__error {
  color: #64748b !important;
}

/* 加强：上传区域暗色优先级（处理 scoped 覆盖问题） */
html.dark .admin-shell .upload-area .el-upload-dragger,
html.dark .upload-dialog .upload-area .el-upload-dragger,
html.dark body .upload-area .el-upload-dragger {
  background: rgba(15, 23, 42, 0.9) !important;
  border-color: #334155 !important;
}

html.dark .admin-shell .upload-area .el-upload-dragger:hover,
html.dark .upload-dialog .upload-area .el-upload-dragger:hover,
html.dark body .upload-area .el-upload-dragger:hover {
  background: rgba(30, 41, 59, 0.85) !important;
  border-color: #38bdf8 !important;
}

/* 缩略图容器与 img 标签暗色背景 */
html.dark .el-upload-list__item-thumbnail,
html.dark .el-upload-list__item-thumbnail img,
html.dark .upload-area img {
  background: #0b1220 !important;
}

/* 分发题库确认弹窗 警告块暗色适配 */
html.dark .distribute-dialog .warn {
  background: rgba(120, 53, 15, 0.18) !important;
  /* 暖色低透明深底 */
  border: 1px solid rgba(251, 191, 36, 0.45) !important;
  /* amber 边框 */
  box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.08) inset;
}

html.dark .distribute-dialog .warn-title {
  color: #fbbf24 !important;
}

html.dark .distribute-dialog .warn-title i {
  color: #f59e0b !important;
}

html.dark .distribute-dialog .warn-text {
  color: #fde68a !important;
}

/* 列表提示颜色在暗色下微调亮度 */
html.dark .distribute-dialog .ops .x {
  color: #f87171 !important;
}

html.dark .distribute-dialog .ops .ok {
  color: #34d399 !important;
}

html.dark .distribute-dialog .ops .info {
  color: #60a5fa !important;
}

/* 资源分发弹窗 warn-box 暗色适配 */
html.dark .distribute-dialog .warn-box {
  background: rgba(120, 53, 15, 0.18) !important;
  border: 1px solid rgba(251, 191, 36, 0.45) !important;
  color: #fde68a !important;
  /* 主文字色 */
}

html.dark .distribute-dialog .warn-box .el-icon-warning-outline {
  color: #f59e0b !important;
}

html.dark .distribute-dialog .warn-box .wb-title {
  color: #fbbf24 !important;
}

html.dark .distribute-dialog .warn-box .wb-text {
  color: #fde68a !important;
}

/* 编辑资源弹窗：当前文件行暗色 */
html.dark .edit-resource-dialog .current-file-row {
  background: rgba(30, 41, 59, 0.65) !important;
  border: 1px solid #334155 !important;
  color: #e2e8f0 !important;
}

html.dark .edit-resource-dialog .current-file-row .fname {
  color: #e2e8f0 !important;
}

html.dark .edit-resource-dialog .current-file-row .fsize {
  color: #64748b !important;
}

html.dark .edit-resource-dialog .current-file-row .file-ico {
  color: #60a5fa !important;
}

html.dark .edit-resource-dialog .current-file-row:hover {
  border-color: #38bdf8 !important;
}

/* ========== 暗色：默认(白色)按钮统一改深色 ========== */
html.dark .el-button--default:not(.is-plain) {
  background: #1e293b !important;
  color: #e2e8f0 !important;
  border: 1px solid #334155 !important;
  box-shadow: none;
}

html.dark .el-button--default:not(.is-plain):hover {
  background: #334155 !important;
  border-color: #465870 !important;
  color: #f1f5f9 !important;
}

html.dark .el-button--default:not(.is-plain):active {
  background: #0f172a !important;
  border-color: #465870 !important;
  color: #ffffff !important;
}

html.dark .el-button--default:not(.is-plain).is-disabled,
html.dark .el-button--default:not(.is-plain).is-disabled:focus,
html.dark .el-button--default:not(.is-plain).is-disabled:hover {
  background: #1e2533 !important;
  border-color: #2a3646 !important;
  color: #475569 !important;
  cursor: not-allowed;
}

/* plain 变体：保持透明但文字提亮，hover 给轻微底色 */
html.dark .el-button--default.is-plain {
  background: transparent !important;
  color: #e2e8f0 !important;
  border: 1px solid #334155 !important;
}

html.dark .el-button--default.is-plain:hover,
html.dark .el-button--default.is-plain:focus {
  background: rgba(51, 65, 85, 0.35) !important;
  border-color: #465870 !important;
  color: #ffffff !important;
}

html.dark .el-button--default.is-plain:active {
  background: rgba(30, 41, 59, 0.55) !important;
  border-color: #4a5f78 !important;
}

html.dark .el-button--default.is-plain.is-disabled,
html.dark .el-button--default.is-plain.is-disabled:hover,
html.dark .el-button--default.is-plain.is-disabled:focus {
  background: transparent !important;
  color: #475569 !important;
  border-color: #2a3646 !important;
}

/* 暗色：primary plain 按钮去除白底并融入深色主题 */
html.dark .el-button--primary.is-plain {
  background: rgba(56, 189, 248, 0.12) !important;
  border: 1px solid #38bdf8 !important;
  color: #38bdf8 !important;
}

html.dark .el-button--primary.is-plain:hover,
html.dark .el-button--primary.is-plain:focus {
  background: rgba(56, 189, 248, 0.18) !important;
  color: #7dd3fc !important;
  border-color: #7dd3fc !important;
}

html.dark .el-button--primary.is-plain:active {
  background: rgba(56, 189, 248, 0.28) !important;
  color: #e0faff !important;
  border-color: #38bdf8 !important;
}

html.dark .el-button--primary.is-plain.is-disabled,
html.dark .el-button--primary.is-plain.is-disabled:hover,
html.dark .el-button--primary.is-plain.is-disabled:focus {
  background: rgba(56, 189, 248, 0.08) !important;
  border-color: rgba(56, 189, 248, 0.25) !important;
  color: rgba(125, 211, 252, 0.45) !important;
}

/* 暗色：Tailwind 蓝色浅背景替换，避免过亮或透明感不足 */
html.dark .bg-blue-50 {
  background: rgba(56, 189, 248, 0.12) !important;
}

html.dark .bg-blue-100 {
  background: rgba(56, 189, 248, 0.18) !important;
}

html.dark .bg-blue-200 {
  background: rgba(56, 189, 248, 0.25) !important;
}

/* 若有 hover 变体（编译后类名 .hover:bg-blue-100 仍会在元素上），可直接利用上面基础覆盖；如需更显著 hover，可追加：*/
html.dark .hover\:bg-blue-100:hover {
  background: rgba(56, 189, 248, 0.22) !important;
}

html.dark .hover\:bg-blue-200:hover {
  background: rgba(56, 189, 248, 0.32) !important;
}

html.dark .admin-shell .el-breadcrumb__inner {
  color: #94a3b8;
}

html.dark .admin-shell .el-tag {
  background: rgba(255, 255, 255, .08);
  color: #e5e7eb;
  border-color: rgba(255, 255, 255, .12);
}

/* Admin: 报名管理 - 选择组织树在暗色模式下的卡片样式（全局覆盖，避免 scoped 冲突） */
html.dark .sign-page .org-node {
  background: rgba(30, 41, 59, .75) !important;
  border-color: rgba(255, 255, 255, .08) !important;
  color: #e5e7eb !important;
}

html.dark .sign-page .org-node.root {
  background: rgba(30, 41, 59, .85) !important;
}

html.dark .sign-page .org-node .meta .name {
  color: #e5e7eb !important;
}

html.dark .sign-page .org-node .meta .desc {
  color: #cbd5e1 !important;
}

html.dark .sign-page .org-node:hover {
  background: rgba(56, 189, 248, 0.08) !important;
}

html.dark .sign-page .org-node.active {
  box-shadow: 0 0 0 3px rgba(56, 189, 248, .25) !important;
  border-color: #38bdf8 !important;
}

html.dark .sign-page .caret {
  border-right-color: #94a3b8 !important;
  border-bottom-color: #94a3b8 !important;
}

html.dark .qp-list-head {
  background-color: #0b1220;
}
/* 覆盖 Element 默认局部基础以融入玻璃拟态 / Tailwind 体系 */
body .el-table th,
body .el-table td {
  padding: 12px 16px;
}

body .el-table {
  background: transparent;
}

body .el-table th {
  background: rgba(255, 255, 255, 0.6);
  font-weight: 600;
  color: #4b5563;
}

body .el-table__body-wrapper tr:hover>td {
  background: rgba(124, 58, 237, 0.05);
}

body .el-pagination.is-background .el-pager li:not(.disabled).active {
  background: #fff;
  color: #7c3aed;
  border: 1px solid #7c3aed;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

body .el-pagination.is-background .el-pager li {
  background: #fff;
  border: 1px solid #d1d5db;
  color: #374151;
  min-width: 36px;
  height: 36px;
  line-height: 34px;
  border-radius: 6px;
}

body .el-pagination button {
  background: #fff;
  border: 1px solid #d1d5db;
  color: #6b7280;
  width: 36px;
  height: 36px;
  border-radius: 6px;
}

body .el-pagination button:disabled {
  background: #f3f4f6;
  color: #9ca3af;
}

/* 仅做最小侵入性覆盖，保持原 Tailwind 视觉 */
.el-button+.el-button {
  margin-left: 0;
}

.el-button {
  font-weight: 500;
}

.el-input__inner,
.el-select .el-input__inner {
  border-radius: 0.5rem;
  height: 2.75rem;
  line-height: 2.75rem;
}

.el-select {
  width: 100%;
}

/* 去除默认表单控件阴影/颜色以便沿用自定义类 */
.el-input__inner:focus {
  box-shadow: none;
}

/* 调整小号文字对齐 */
.el-input__inner {
  padding-left: 2.75rem;
}

/* 清除 Element 默认 body 字体影响 */
body {
  font-family: inherit;
}

/* Button 颜色透明化，使用自带类控制 */
.el-button--primary {
  background: #7c3aed;
  border-color: #7c3aed;
}

.el-button--primary:hover {
  background: #6d28d9;
  border-color: #6d28d9;
}

/* Dialog 层级与定制 */
.student-detail-dialog {
  border-radius: 0.75rem;
  padding: 0;
  overflow: hidden;
}

.el-overlay,
.v-modal {
  backdrop-filter: blur(2px);
}

.el-upload-dragger {
  width: 500px !important;
}

/* 提升弹窗层级防止被自定义定位元素覆盖 */
.el-dialog {
  border-radius: 16px;
}

.student-detail-dialog {
  z-index: 2050 !important;
}

.el-overlay {
  z-index: 2000 !important;
}

/* ============= 全局按钮统一（页面内统一为 mini；不影响弹窗） ============= */
/* 说明：所有弹窗使用 append-to-body 渲染到 <body> 根部，故仅在 #app 内覆盖样式即可避免影响弹窗 */
#app .el-button,
#app .el-button--small,
#app .el-button--mini {
  font-size: 12px;
  padding: 6px 12px;
  /* 接近 Element mini 尺寸 */
  border-radius: 6px;
}

/* 邻接按钮的统一间距（页面区域） */
#app .el-button+.el-button {
  margin-left: 8px;
}

/* 表格工具栏/页头中的链接按钮与常规按钮在一起时的间距（兜底） */
#app .el-button+.el-link,
#app .el-link+.el-button {
  margin-left: 8px;
}

/* Dialog footer 按钮间距统一 */
.el-dialog__footer {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0;
}

.el-dialog__footer .el-button+.el-button {
  margin-left: 12px;
}

/* 若某个弹窗需要更宽松间距，可在其自定义类下覆盖，如 .publish-dialog .el-dialog__footer .el-button + .el-button { margin-left:16px; } */
/* 提供一个紧凑工具类（在 footer 根元素加 class="footer-compact"） */
.footer-compact .el-button+.el-button {
  margin-left: 8px !important;
}

/* ============= 暗色主题下 Element 表格/卡片覆盖 ============= */
html.dark body .el-table {
  background: transparent;
  color: #e5e7eb;
}

html.dark body .el-table th,
html.dark body .el-table tr,
html.dark body .el-table td {
  background: rgba(30, 41, 59, .75) !important;
  color: #e5e7eb !important;
  border-color: rgba(148, 163, 184, .25) !important;
}

/* 悬浮行的深色高亮 */
html.dark body .el-table__body-wrapper tr:hover>td {
  background: rgba(56, 189, 248, 0.08) !important;
}

/* 分页深色 */
html.dark body .el-pagination.is-background .el-pager li {
  background: #0b1220;
  border-color: #334155;
  color: #cbd5e1;
}

html.dark body .el-pagination.is-background .el-pager li:not(.disabled).active {
  background: #0ea5e9;
  color: #0b1220;
  border-color: #0ea5e9;
}

html.dark body .el-pagination button {
  background: #0b1220;
  border-color: #334155;
  color: #94a3b8;
}

/* ================== 暗色模式弹窗统一背景 ================== */
html.dark body .el-dialog {
  background: rgba(23, 30, 43, 0.92) !important;
  /* 深色半透明底 */
  backdrop-filter: blur(14px) saturate(1.2);
  border: 1px solid rgba(148, 163, 184, 0.18);
  box-shadow: 0 12px 36px -8px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.02);
}

html.dark body .el-dialog__header {
  border-bottom: 1px solid rgba(148, 163, 184, 0.18);
}

html.dark body .el-dialog__title {
  color: #e2e8f0;
}

html.dark body .el-dialog__body {
  color: #cbd5e1;
}

html.dark body .el-dialog__footer {
  background: transparent;
  border-top: 1px solid rgba(148, 163, 184, 0.12);
}

html.dark body .el-message-box {
  background: #1e293b;
  border: 1px solid rgba(148, 163, 184, .3);
}

html.dark body .el-message-box__title {
  color: #e2e8f0;
}

html.dark body .el-message-box__content {
  color: #cbd5e1;
}

/* ================== 手机端响应式适配 ================== */
/* 平板端 (641-768px) */
@media (max-width: 768px) {

  /* 弹窗适配 */
  .el-dialog {
    width: 90% !important;
    margin: 5vh auto !important;
    max-width: none !important;
  }

  /* 表格适配 */
  body .el-table {
    min-width: 600px;
  }

  body .el-table th,
  body .el-table td {
    padding: 10px 8px;
    font-size: 13px;
  }

  /* 分页适配 */
  body .el-pagination.is-background .el-pager li {
    min-width: 30px;
    height: 30px;
    line-height: 28px;
    font-size: 12px;
  }

  body .el-pagination button {
    width: 30px;
    height: 30px;
    font-size: 12px;
  }

  /* 表单元素适配 */
  .el-input__inner,
  .el-select .el-input__inner {
    height: 2.5rem;
    line-height: 2.5rem;
    font-size: 14px;
  }

  .el-button {
    font-size: 13px;
    padding: 8px 16px;
  }

  /* 上传组件适配 */
  .el-upload-dragger {
    width: 100% !important;
    max-width: 400px;
  }

  /* 步骤条适配 */
  .el-steps {
    padding: 0 8px;
  }

  .el-step__title {
    font-size: 12px;
  }

  /* 标签页适配 */
  .el-tabs__header {
    margin: 0 0 16px;
  }

  .el-tabs__item {
    font-size: 13px;
    padding: 10px 16px;
  }

  /* 消息框适配 */
  .el-message-box {
    width: 90% !important;
    margin: 5vh auto !important;
  }
}

/* 手机端 (≤640px) */
@media (max-width: 640px) {

  /* 弹窗适配 - 接近全屏显示 */
  .el-dialog {
    width: 96% !important;
    margin: 2vh auto !important;
    max-width: none !important;
    min-height: 80vh;
    display: flex;
    flex-direction: column;
  }

  .el-dialog__body {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
  }

  .el-dialog__header {
    padding: 16px;
  }

  .el-dialog__title {
    font-size: 16px;
  }

  .el-dialog__footer {
    padding: 16px;
    flex-wrap: wrap-reverse;
  }

  /* 表格适配 - 允许水平滚动 */
  body .el-table {
    min-width: 500px;
    font-size: 12px;
  }

  body .el-table th,
  body .el-table td {
    padding: 8px 6px;
    font-size: 12px;
  }

  /* 分页适配 - 更紧凑的布局 */
  .el-pagination {
    font-size: 12px;
  }

  body .el-pagination.is-background .el-pager li {
    min-width: 28px;
    height: 28px;
    line-height: 26px;
    font-size: 11px;
    margin: 0 2px;
  }

  body .el-pagination button {
    width: 28px;
    height: 28px;
    font-size: 11px;
  }

  /* 表单元素适配 - 更大的点击区域 */
  .el-input__inner,
  .el-select .el-input__inner {
    height: 2.75rem;
    line-height: 2.75rem;
    font-size: 15px;
    padding-left: 1rem;
  }

  /* 按钮适配 - 更大的点击区域 */
  .el-button {
    font-size: 14px;
    padding: 10px 20px;
    min-height: 34px;
    min-width: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* 按钮间距适配 */
  .el-dialog__footer .el-button {
    width: 100%;
    margin: 4px 0 !important;
  }

  .el-dialog__footer .el-button+.el-button {
    margin-left: 0 !important;
  }

  /* 下拉菜单适配 */
  .el-select-dropdown {
    width: 90vw !important;
    max-width: none !important;
  }

  /* 日期选择器适配 */
  .el-date-editor {
    width: 100% !important;
  }

  .el-date-picker {
    width: 90vw !important;
    max-width: none !important;
  }

  /* 复选框和单选框适配 */
  .el-checkbox__label,
  .el-radio__label {
    font-size: 14px;
    padding-left: 8px;
  }

  .el-checkbox__inner,
  .el-radio__inner {
    width: 18px;
    height: 18px;
  }

  /* 消息提示适配 */
  .el-message {
    min-width: 280px;
    max-width: 90vw;
    font-size: 14px;
  }

  /* 通知适配 */
  .el-notification {
    width: 90vw;
    max-width: none;
    margin: 0;
    left: 5% !important;
  }

  /* 标签适配 */
  .el-tag {
    padding: 4px 8px;
    font-size: 12px;
  }

  /* 进度条适配 */
  .el-progress {
    font-size: 12px;
  }

  /* 时间线适配 */
  .el-timeline-item__timestamp {
    font-size: 12px;
  }

  /* 工具提示适配 */
  .el-tooltip__popper {
    max-width: 90vw;
    font-size: 12px;
  }

  /* 消息框适配 */
  .el-message-box {
    width: 96% !important;
    margin: 2vh auto !important;
  }

  .el-message-box__title {
    font-size: 16px;
  }

  .el-message-box__content {
    font-size: 14px;
  }

  /* 上传组件适配 */
  .el-upload-dragger {
    width: 100% !important;
    padding: 20px 10px;
  }

  /* 步骤条适配 */
  .el-steps {
    padding: 0;
  }

  .el-step__title {
    font-size: 11px;
    white-space: normal;
    line-height: 1.2;
    margin-top: 4px;
  }

  /* 标签页适配 */
  .el-tabs__header {
    margin: 0 0 12px;
  }

  .el-tabs__nav-wrap {
    padding: 0;
  }

  .el-tabs__item {
    font-size: 12px;
    padding: 8px 12px;
  }
}

/* 暗色主题下的手机端适配 */
@media (max-width: 640px) {
  html.dark body .el-dialog {
    background: rgba(23, 30, 43, 0.95) !important;
  }

  html.dark body .el-pagination.is-background .el-pager li {
    background: #0b1220;
    border-color: #334155;
  }

  html.dark body .el-pagination button {
    background: #0b1220;
    border-color: #334155;
  }

  html.dark body .el-message-box {
    background: #1e293b;
    border-color: #334155;
  }
}