* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif; background: linear-gradient(135deg, #1a1f3a 0%, #2d3561 100%); min-height: 100vh; min-height: 100dvh; color: #fff; overflow: hidden; }
.app { width: 100%; height: 100vh; height: 100dvh; display: flex; flex-direction: column; }

/* Status Bar */
.status-bar { display: flex; justify-content: space-between; align-items: center; padding: 12px 24px; background: rgba(255,255,255,0.05); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(255,255,255,0.1); flex-shrink: 0; }
.status-left { display: flex; align-items: center; gap: 12px; }
.user-avatar { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, #667eea, #764ba2); display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600; }
.user-name { font-size: 14px; font-weight: 500; }
.exam-selector { padding: 6px 12px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.2); background: rgba(255,255,255,0.1); color: #fff; font-size: 12px; cursor: pointer; outline: none; }
.exam-selector option { background: #2d3561; }
.status-right { display: flex; align-items: center; gap: 12px; font-size: 14px; }
.time { font-weight: 600; }
.date { opacity: 0.7; }

/* Function Nav */
.func-nav { padding: 12px 24px; background: rgba(255,255,255,0.03); border-bottom: 1px solid rgba(255,255,255,0.1); flex-shrink: 0; }
.func-nav-scroll { display: flex; gap: 24px; overflow-x: auto; scrollbar-width: none; }
.func-nav-scroll::-webkit-scrollbar { display: none; }
.func-nav-item { display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; padding: 8px 0; white-space: nowrap; }
.func-nav-item span { font-size: 14px; color: rgba(255,255,255,0.7); transition: all 0.3s ease; }
.func-nav-item:hover span { color: #fff; }
.func-nav-item.active span { color: #fff; font-weight: 600; }
.nav-underline { width: 0; height: 2px; background: linear-gradient(90deg, #667eea, #764ba2); border-radius: 1px; transition: width 0.3s ease; }
.func-nav-item.active .nav-underline { width: 24px; }

/* Main Content */
.main-content { flex: 1; overflow: auto; padding: 20px 24px; position: relative; }
.main-content::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: 
    linear-gradient(rgba(100, 140, 200, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(100, 140, 200, 0.05) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
  z-index: 0;
}
.main-content > * {
  position: relative;
  z-index: 1;
}
.page-content { display: none; height: 100%; animation: fadeIn 0.3s ease; }
.page-content.active { display: block; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* Home */
.home-layout { display: grid; grid-template-columns: 2fr 3fr; gap: 20px; height: 100%; }
.home-left, .home-right { display: flex; flex-direction: column; gap: 16px; }
.glass-card { background: rgba(255,255,255,0.08); backdrop-filter: blur(10px); border-radius: 16px; border: 1px solid rgba(255,255,255,0.1); padding: 20px; }

/* ===== 新首页布局 ===== */
.home-layout-new {
  display: grid;
  grid-template-columns: calc((100% - 20px) / 3 + 100px) 1fr;
  gap: 20px;
  height: 100%;
}
.home-left-new, .home-right-new {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* AI主卡片 */
.ai-main-card {
  flex: 1;
  background: linear-gradient(135deg, rgba(74, 59, 143, 0.9), rgba(107, 91, 196, 0.85), rgba(139, 125, 216, 0.8));
  border-radius: 20px;
  border: 2px solid rgba(139, 125, 216, 0.5);
  padding: 20px;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: visible;
  backdrop-filter: blur(10px);
  margin-left: 180px;
}
.ai-main-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  position: relative;
  z-index: 2;
}
.ai-main-title {
  font-size: 20px;
  font-weight: 700;
  color: #fff;
}
.ai-stars {
  display: flex;
  gap: 6px;
}
.ai-star {
  color: rgba(200, 180, 255, 0.8);
  font-size: 16px;
  animation: twinkle 2s ease-in-out infinite;
}
.ai-star.small {
  font-size: 10px;
  animation-delay: 0.5s;
}
@keyframes twinkle {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.2); }
}
.ai-main-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
}

/* 卡通人物 */
.ai-character-new {
  width: 432px;
  height: 576px;
  position: absolute;
  left: -290px;
  bottom: -20px;
  flex-shrink: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  pointer-events: none;
  z-index: 10;
  overflow: visible;
}
.ai-char-img {
  width: 432px;
  height: 576px;
  object-fit: contain;
  object-position: bottom center;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.2));
}

/* AI功能列表 */
.ai-func-list {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  z-index: 2;
}
.ai-func-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
  backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.ai-func-card:hover {
  background: rgba(255, 255, 255, 0.22);
  transform: translateX(4px);
}
.ai-func-icon {
  font-size: 26px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  flex-shrink: 0;
}
.ai-func-info {
  flex: 1;
}
.ai-func-name {
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 2px;
}
.ai-func-desc {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
}

/* 功能卡片网格 - 科技感 2x2 布局 */
.func-cards-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 18px;
  flex: 1;
}
.func-color-card {
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  cursor: pointer;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s ease;
  padding: 22px 20px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  min-height: 140px;
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow:
    0 6px 20px rgba(0,0,0,0.25),
    inset 0 1px 0 rgba(255,255,255,0.35);
}
/* 顶部光晕层 */
.func-color-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(255,255,255,0.35), rgba(255,255,255,0) 55%),
    linear-gradient(180deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0) 45%);
  pointer-events: none;
  z-index: 1;
}
/* 底部装饰网格线 */
.func-color-card::after {
  content: '';
  position: absolute;
  right: -30px;
  bottom: -30px;
  width: 140px;
  height: 140px;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.08) 0 1px, transparent 1px 14px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.08) 0 1px, transparent 1px 14px);
  mask-image: radial-gradient(closest-side, black 40%, transparent 100%);
  -webkit-mask-image: radial-gradient(closest-side, black 40%, transparent 100%);
  transform: rotate(15deg);
  opacity: 0.7;
  pointer-events: none;
  z-index: 0;
}
.func-color-card:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow:
    0 16px 40px rgba(0,0,0,0.35),
    inset 0 1px 0 rgba(255,255,255,0.5),
    0 0 24px rgba(255,255,255,0.15);
}
.func-color-icon {
  position: relative;
  z-index: 2;
  width: 56px;
  height: 56px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.18);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.28);
  box-shadow:
    0 4px 12px rgba(0,0,0,0.15),
    inset 0 1px 0 rgba(255,255,255,0.4);
}
.func-color-icon svg {
  width: 34px;
  height: 34px;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.25));
}
.func-color-name {
  position: relative;
  z-index: 2;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: #fff;
  text-shadow: 0 2px 6px rgba(0,0,0,0.3);
  display: flex;
  align-items: center;
  gap: 8px;
}
.func-color-name::after {
  content: '›';
  font-size: 22px;
  opacity: 0.7;
  transition: transform 0.3s ease;
}
.func-color-card:hover .func-color-name::after {
  transform: translateX(4px);
  opacity: 1;
}
/* 各卡片渐变色 - 增强饱和度与深度 */
.func-color-card.purple {
  background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 60%, #4338ca 100%);
}
.func-color-card.blue-light {
  background: linear-gradient(135deg, #38bdf8 0%, #0ea5e9 60%, #0369a1 100%);
}
.func-color-card.cyan {
  background: linear-gradient(135deg, #22d3ee 0%, #06b6d4 60%, #0e7490 100%);
}
.func-color-card.gold {
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 60%, #b45309 100%);
}
.func-color-card.green {
  background: linear-gradient(135deg, #34d399 0%, #10b981 60%, #047857 100%);
}
.func-color-card.orange {
  background: linear-gradient(135deg, #fb923c 0%, #f97316 60%, #c2410c 100%);
}

/* 底部入口 */
.home-bottom-entries {
  display: flex;
  gap: 16px;
  padding-top: 4px;
}
.bottom-entry-item {
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 18px 24px;
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
  background: linear-gradient(135deg, rgba(168, 237, 234, 0.4), rgba(254, 214, 227, 0.3));
  border: 1px solid rgba(255, 255, 255, 0.15);
}
.bottom-entry-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(102, 126, 234, 0.3);
}
.countdown-item {
  background: linear-gradient(135deg, rgba(255,107,107,0.9), rgba(238,90,111,0.9));
  justify-content: center;
}
.countdown-content {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #fff;
}
.countdown-text {
  font-size: 18px;
  opacity: 0.9;
}
.countdown-days {
  font-size: 18px;
  opacity: 0.9;
}
.countdown-days strong {
  font-size: 40px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0,0,0,0.3);
  line-height: 1;
}
.bottom-entry-icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.2);
}
.bottom-entry-label {
  font-size: 15px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.95);
}

/* AI Module */
.ai-module { flex: 1; display: flex; flex-direction: column; background: linear-gradient(135deg, #4a3b8f, #6b5bc4, #8b7dd8); }
.ai-countdown-section { padding: 20px; text-align: center; border-bottom: 1px solid rgba(255,255,255,0.1); }
.countdown-mini-label { font-size: 14px; color: rgba(255,255,255,0.8); margin-bottom: 8px; }
.countdown-mini-number { font-size: 48px; font-weight: 700; background: linear-gradient(135deg, #f093fb, #f5576c); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.countdown-mini-unit { font-size: 16px; color: rgba(255,255,255,0.8); }
.ai-bottom-section { flex: 1; display: flex; align-items: center; padding: 20px; gap: 20px; }
.ai-character { width: 80px; height: 100px; position: relative; }
.char-body { width: 100%; height: 100%; position: relative; }
.char-head { width: 50px; height: 50px; background: #ffd4a3; border-radius: 50%; position: absolute; top: 0; left: 50%; transform: translateX(-50%); }
.face { width: 100%; height: 100%; border-radius: 50%; }
.hair { width: 55px; height: 30px; background: #4a3728; border-radius: 50% 50% 0 0; position: absolute; top: -5px; left: 50%; transform: translateX(-50%); }
.glasses { width: 40px; height: 12px; border: 2px solid #333; border-radius: 50%; position: absolute; top: 20px; left: 50%; transform: translateX(-50%); }
.glasses::before, .glasses::after { content: ''; position: absolute; width: 15px; height: 12px; border: 2px solid #333; border-radius: 50%; top: -2px; }
.glasses::before { left: -5px; }
.glasses::after { right: -5px; }
.mouth { width: 12px; height: 6px; border-bottom: 2px solid #ff6b6b; border-radius: 0 0 50% 50%; position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); }
.char-torso { width: 40px; height: 40px; background: #a8d8ea; border-radius: 20px 20px 0 0; position: absolute; top: 45px; left: 50%; transform: translateX(-50%); }
.char-backpack { width: 25px; height: 30px; background: #ff9a56; border-radius: 8px; position: absolute; top: 50px; right: 5px; }
.ai-module-content { flex: 1; }
.ai-title { font-size: 18px; font-weight: 600; margin-bottom: 16px; }
.ai-functions { display: flex; flex-direction: column; gap: 12px; }
.ai-function-item { display: flex; align-items: center; gap: 12px; padding: 12px; background: rgba(255,255,255,0.1); border-radius: 12px; cursor: pointer; transition: all 0.3s ease; }
.ai-function-item:hover { background: rgba(255,255,255,0.15); transform: translateX(4px); }
.ai-function-icon { font-size: 24px; }
.ai-function-name { font-size: 14px; font-weight: 600; }
.ai-function-desc { font-size: 12px; color: rgba(255,255,255,0.7); }

/* Task Card */
.task-card { flex: 1; }
.card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.card-header h3 { font-size: 16px; font-weight: 600; }
.task-progress { font-size: 12px; color: rgba(255,255,255,0.7); }
.task-list { display: flex; flex-direction: column; gap: 12px; }
.task-item { display: flex; align-items: center; gap: 12px; padding: 12px; background: rgba(255,255,255,0.05); border-radius: 10px; cursor: pointer; transition: all 0.3s ease; }
.task-item:hover { background: rgba(255,255,255,0.08); }
.task-item.completed .task-name { text-decoration: line-through; opacity: 0.6; }
.task-checkbox { width: 20px; height: 20px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.3); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.task-item.completed .task-checkbox { background: linear-gradient(135deg, #667eea, #764ba2); border-color: transparent; }
.task-item.completed .task-checkbox::after { content: '✓'; color: #fff; font-size: 12px; }
.task-content { flex: 1; }
.task-name { font-size: 14px; margin-bottom: 6px; }
.task-progress-bar { height: 4px; background: rgba(255,255,255,0.1); border-radius: 2px; overflow: hidden; }
.task-progress-fill { height: 100%; background: linear-gradient(90deg, #667eea, #764ba2); border-radius: 2px; }

/* Progress */
.bottom-panels { display: flex; gap: 16px; }
.progress-card { flex: 1; }
.progress-card h3 { font-size: 16px; font-weight: 600; margin-bottom: 16px; }
.ring-progress { width: 100px; height: 100px; position: relative; margin: 0 auto 16px; }
.ring-progress svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; }
.ring-percent { font-size: 24px; font-weight: 700; }
.ring-unit { font-size: 14px; color: rgba(255,255,255,0.7); }
.subject-progress { display: flex; flex-direction: column; gap: 10px; }
.subject-item { display: flex; align-items: center; gap: 10px; }
.subject-name { font-size: 12px; width: 40px; color: rgba(255,255,255,0.8); }
.subject-bar { flex: 1; height: 6px; background: rgba(255,255,255,0.1); border-radius: 3px; overflow: hidden; }
.subject-bar-fill { height: 100%; background: linear-gradient(90deg, #4facfe, #00f2fe); border-radius: 3px; }
.subject-value { font-size: 12px; color: rgba(255,255,255,0.7); width: 35px; text-align: right; }

/* Assessment */
.assessment-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; height: 100%; }
.assessment-left, .assessment-right { display: flex; flex-direction: column; }
.knowledge-graph { flex: 1; display: flex; flex-direction: column; }
.graph-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.graph-header h3 { font-size: 16px; font-weight: 600; }
.subject-switcher { position: relative; }
.subject-switch-btn { padding: 6px 14px; border-radius: 8px; border: none; background: linear-gradient(135deg, #667eea, #764ba2); color: #fff; font-size: 12px; cursor: pointer; transition: all 0.3s ease; }
.subject-switch-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(102,126,234,0.4); }
.subject-dropdown { display: none; position: absolute; top: 100%; right: 0; margin-top: 6px; background: rgba(30,35,60,0.95); border: 1px solid rgba(255,255,255,0.15); border-radius: 10px; min-width: 160px; z-index: 100; backdrop-filter: blur(10px); overflow: hidden; box-shadow: 0 8px 24px rgba(0,0,0,0.3); }
.subject-dropdown.show { display: block; }
.subject-dropdown-item { padding: 10px 16px; font-size: 13px; color: rgba(255,255,255,0.85); cursor: pointer; transition: background 0.2s; border-bottom: 1px solid rgba(255,255,255,0.06); }
.subject-dropdown-item:last-child { border-bottom: none; }
.subject-dropdown-item:hover { background: rgba(102,126,234,0.3); }
.subject-dropdown-item.active { background: linear-gradient(135deg, rgba(102,126,234,0.4), rgba(118,75,162,0.4)); color: #fff; font-weight: 600; }
.graph-subject-label { font-size: 13px; color: rgba(255,255,255,0.6); margin-bottom: 10px; padding-left: 2px; }
.graph-canvas { flex: 1; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.2); border-radius: 12px; margin-bottom: 16px; }
#knowledgeCanvas { max-width: 100%; max-height: 100%; }
.graph-legend { display: flex; justify-content: center; gap: 20px; }
.legend-item { display: flex; align-items: center; gap: 6px; font-size: 12px; color: rgba(255,255,255,0.8); }
.legend-dot { width: 10px; height: 10px; border-radius: 50%; }
.legend-dot.good { background: #43e97b; }
.legend-dot.normal { background: #f7b733; }
.legend-dot.poor { background: #fa709a; }
.legend-dot.unanswered { background: rgba(255,255,255,0.3); }

.func-grid { display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(4, 1fr); gap: 16px; height: 100%; }
.func-card { background: rgba(255,255,255,0.08); backdrop-filter: blur(10px); border-radius: 16px; border: 1px solid rgba(255,255,255,0.1); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; cursor: pointer; transition: all 0.3s ease; }
.func-card:hover { background: rgba(255,255,255,0.12); transform: translateY(-4px); box-shadow: 0 8px 24px rgba(102,126,234,0.3); }
.func-icon { font-size: 36px; }
.func-name { font-size: 14px; font-weight: 500; }

/* Placeholder */
.placeholder-page { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; text-align: center; }
.placeholder-icon { font-size: 64px; margin-bottom: 20px; }
.placeholder-page h2 { font-size: 24px; font-weight: 600; margin-bottom: 12px; }
.placeholder-page p { font-size: 14px; color: rgba(255,255,255,0.7); }

/* Bottom Nav */
/* ===== Bottom Nav (Tech) ===== */
.bottom-nav {
  position: relative;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 10px 12px 14px;
  background: linear-gradient(180deg, rgba(26,31,58,0.6) 0%, rgba(26,31,58,0.92) 100%);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid rgba(102,126,234,0.18);
  flex-shrink: 0;
  box-shadow: 0 -8px 24px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.05);
}
.bottom-nav::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, #667eea 30%, #764ba2 70%, transparent);
  opacity: .55;
}
.nav-item {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 4px 0 2px;
  cursor: pointer;
  color: rgba(255,255,255,0.55);
  transition: color .35s cubic-bezier(0.4,0,0.2,1), transform .3s ease;
}
.nav-item:hover { color: rgba(255,255,255,0.85); }
.nav-item:active { transform: scale(0.94); }

.nav-icon-wrap {
  position: relative;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .35s cubic-bezier(0.4,0,0.2,1);
}
.nav-svg {
  position: relative;
  width: 26px;
  height: 26px;
  z-index: 2;
  filter: drop-shadow(0 0 0 transparent);
  transition: filter .35s, transform .4s cubic-bezier(0.4,0,0.2,1);
}
.nav-svg-fill,
.nav-svg-ring {
  transition: opacity .35s, stroke-dashoffset .8s ease;
}
.nav-svg-dot { opacity: 0; transition: opacity .35s; }

/* 光晕指示 */
.nav-glow {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at center, rgba(102,126,234,0.55) 0%, rgba(102,126,234,0) 70%);
  opacity: 0;
  transform: scale(0.6);
  transition: opacity .4s, transform .4s cubic-bezier(0.4,0,0.2,1);
  z-index: 1;
  pointer-events: none;
}

.nav-item span {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2px;
  position: relative;
  z-index: 2;
}

/* 激活态：色彩点亮 + 发光 + 上浮 + 顶部胶囊高亮条 */
.nav-item.active { color: #fff; }
.nav-item.active .nav-icon-wrap { transform: translateY(-3px); }
.nav-item.active .nav-svg {
  filter: drop-shadow(0 0 6px rgba(102,126,234,0.85)) drop-shadow(0 2px 8px rgba(118,75,162,0.4));
  transform: scale(1.05);
}
.nav-item.active .nav-svg-fill { opacity: .45 !important; }
.nav-item.active .nav-svg-ring { opacity: 1 !important; animation: nav-ring-spin 6s linear infinite; transform-origin: center; transform-box: fill-box; }
.nav-item.active .nav-svg-dot { opacity: 1; animation: nav-dot-blink 1.6s ease-in-out infinite; }
.nav-item.active .nav-glow { opacity: 1; transform: scale(1.05); }
.nav-item.active span {
  background: linear-gradient(135deg, #a5b4fc 0%, #c4b5fd 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 600;
}
.nav-item.active::before {
  content: '';
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 28px;
  height: 3px;
  border-radius: 0 0 6px 6px;
  background: linear-gradient(90deg, #667eea, #764ba2);
  box-shadow: 0 2px 12px rgba(102,126,234,0.7);
  animation: nav-bar-in .4s cubic-bezier(0.4,0,0.2,1);
}

@keyframes nav-bar-in {
  from { width: 0; opacity: 0; }
  to { width: 28px; opacity: 1; }
}
@keyframes nav-dot-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: .35; }
}
@keyframes nav-ring-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* 兼容旧 .nav-icon（应该已被 SVG 替代） */
.nav-icon { font-size: 20px; }

/* ===== Module Overlay ===== */
.module-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, #1a1f3a 0%, #2d3561 100%); z-index: 1000; overflow: hidden; }
.module-overlay.active { display: flex; flex-direction: column; }
.module-container { flex: 1; display: flex; flex-direction: column; overflow: hidden; }

/* Module Header */
.module-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 24px; background: rgba(255,255,255,0.05); border-bottom: 1px solid rgba(255,255,255,0.1); flex-shrink: 0; }
.module-header-left { display: flex; align-items: center; gap: 12px; }
.module-back { width: 36px; height: 36px; border-radius: 50%; border: none; background: rgba(255,255,255,0.1); color: #fff; font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; }
.module-back:hover { background: rgba(255,255,255,0.2); }
.module-title { font-size: 18px; font-weight: 600; }
.module-header-right { display: flex; align-items: center; gap: 12px; }
.module-timer { font-size: 14px; color: #f7b733; font-weight: 600; font-family: monospace; padding: 6px 12px; background: rgba(247,183,51,0.1); border-radius: 8px; }
.module-progress { font-size: 14px; color: rgba(255,255,255,0.7); }

/* Module Body */
.module-body { flex: 1; overflow-y: auto; padding: 24px; }

/* Module Footer */
.module-footer { display: flex; align-items: center; justify-content: space-between; padding: 16px 24px; background: rgba(255,255,255,0.05); border-top: 1px solid rgba(255,255,255,0.1); flex-shrink: 0; }

/* Buttons */
.btn { padding: 10px 20px; border-radius: 10px; border: none; font-size: 14px; font-weight: 500; cursor: pointer; transition: all 0.3s ease; }
.btn-primary { background: linear-gradient(135deg, #667eea, #764ba2); color: #fff; }
.btn-primary:hover { transform: scale(1.05); box-shadow: 0 4px 16px rgba(102,126,234,0.4); }
.btn-secondary { background: rgba(255,255,255,0.1); color: #fff; }
.btn-secondary:hover { background: rgba(255,255,255,0.15); }
.btn-success { background: linear-gradient(135deg, #43e97b, #38f9d7); color: #1a1f3a; }
.btn-danger { background: linear-gradient(135deg, #fa709a, #fee140); color: #1a1f3a; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Cards */
.card { background: rgba(255,255,255,0.08); border-radius: 12px; border: 1px solid rgba(255,255,255,0.1); padding: 16px; margin-bottom: 12px; cursor: pointer; transition: all 0.3s ease; }
.card:hover { background: rgba(255,255,255,0.12); transform: translateX(4px); }
.card-title { font-size: 15px; font-weight: 500; margin-bottom: 6px; }
.card-desc { font-size: 12px; color: rgba(255,255,255,0.6); }
.card-meta { display: flex; gap: 12px; margin-top: 8px; }
.card-tag { font-size: 11px; padding: 3px 8px; border-radius: 4px; background: rgba(102,126,234,0.2); color: #a8c0ff; }
.card-tag.success { background: rgba(67,233,123,0.2); color: #43e97b; }
.card-tag.warning { background: rgba(247,183,51,0.2); color: #f7b733; }
.card-tag.danger { background: rgba(250,112,154,0.2); color: #fa709a; }

/* Form */
.form-group { margin-bottom: 20px; }
.form-label { display: block; font-size: 14px; font-weight: 500; margin-bottom: 8px; color: rgba(255,255,255,0.8); }
.form-select, .form-input { width: 100%; padding: 12px 16px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.2); background: rgba(255,255,255,0.08); color: #fff; font-size: 14px; outline: none; transition: all 0.3s ease; }
.form-select:focus, .form-input:focus { border-color: #667eea; background: rgba(255,255,255,0.12); }
.form-select option { background: #2d3561; }
.form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }

/* Question */
.question-card { background: rgba(255,255,255,0.05); border-radius: 16px; padding: 24px; margin-bottom: 20px; }
.question-text { font-size: 16px; line-height: 1.8; margin-bottom: 20px; padding: 16px; background: rgba(255,255,255,0.05); border-radius: 12px; border-left: 3px solid #667eea; }
.question-options { display: flex; flex-direction: column; gap: 12px; }
.question-option { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: rgba(255,255,255,0.06); border-radius: 12px; border: 2px solid transparent; cursor: pointer; transition: all 0.3s ease; }
.question-option:hover { background: rgba(255,255,255,0.1); border-color: rgba(102,126,234,0.3); }
.question-option.selected { background: rgba(102,126,234,0.2); border-color: #667eea; }
.question-option.correct { background: rgba(67,233,123,0.2); border-color: #43e97b; }
.question-option.wrong { background: rgba(250,112,154,0.2); border-color: #fa709a; }
.option-letter { width: 28px; height: 28px; border-radius: 50%; background: rgba(255,255,255,0.1); display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600; flex-shrink: 0; }
.question-option.selected .option-letter { background: #667eea; }
.question-option.correct .option-letter { background: #43e97b; }
.question-option.wrong .option-letter { background: #fa709a; }
.option-text { font-size: 14px; line-height: 1.5; }

/* Explanation */
.explanation { margin-top: 16px; padding: 16px; background: rgba(102,126,234,0.1); border-radius: 12px; border-left: 3px solid #667eea; animation: fadeIn 0.3s ease; }
.explanation-title { font-size: 13px; font-weight: 600; color: #667eea; margin-bottom: 8px; }
.explanation-text { font-size: 14px; line-height: 1.6; color: rgba(255,255,255,0.9); }

/* Dots Navigation */
.dots-nav { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,0.2); cursor: pointer; transition: all 0.3s ease; }
.dot.active { background: #667eea; transform: scale(1.3); }
.dot.answered { background: #43e97b; }
.dot.wrong { background: #fa709a; }

/* Stats */
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 16px; margin-bottom: 24px; }
.stat-card { background: rgba(255,255,255,0.08); border-radius: 12px; padding: 20px; text-align: center; }
.stat-value { font-size: 28px; font-weight: 700; background: linear-gradient(135deg, #667eea, #764ba2); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.stat-label { font-size: 12px; color: rgba(255,255,255,0.6); margin-top: 4px; }

/* Result */
.result-container { max-width: 600px; margin: 0 auto; }
.result-header { text-align: center; margin-bottom: 32px; }
.result-icon { font-size: 72px; margin-bottom: 16px; }
.result-title { font-size: 28px; font-weight: 600; margin-bottom: 8px; }
.result-subtitle { font-size: 14px; color: rgba(255,255,255,0.6); }
.result-details { margin-top: 24px; }
.result-item { display: flex; align-items: center; gap: 12px; padding: 12px; background: rgba(255,255,255,0.05); border-radius: 10px; margin-bottom: 8px; }
.result-item-icon { font-size: 18px; }
.result-item-text { flex: 1; font-size: 13px; }
.result-item-status { font-size: 12px; padding: 3px 10px; border-radius: 4px; }
.result-item-status.correct { background: rgba(67,233,123,0.2); color: #43e97b; }
.result-item-status.wrong { background: rgba(250,112,154,0.2); color: #fa709a; }

/* List */
.list-container { display: flex; flex-direction: column; gap: 12px; }
.list-item { display: flex; align-items: center; gap: 16px; padding: 16px; background: rgba(255,255,255,0.06); border-radius: 12px; cursor: pointer; transition: all 0.3s ease; }
.list-item:hover { background: rgba(255,255,255,0.1); transform: translateX(4px); }
.list-item-icon { font-size: 28px; }
.list-item-content { flex: 1; }
.list-item-title { font-size: 15px; font-weight: 500; margin-bottom: 4px; }
.list-item-desc { font-size: 12px; color: rgba(255,255,255,0.6); }
.list-item-action { padding: 8px 16px; border-radius: 8px; background: linear-gradient(135deg, #667eea, #764ba2); color: #fff; font-size: 13px; border: none; cursor: pointer; }

/* Mode Toggle */
.mode-toggle { display: flex; gap: 8px; padding: 4px; background: rgba(255,255,255,0.05); border-radius: 10px; }
.mode-btn { padding: 8px 16px; border-radius: 8px; border: none; background: transparent; color: rgba(255,255,255,0.6); font-size: 13px; cursor: pointer; transition: all 0.3s ease; }
.mode-btn.active { background: linear-gradient(135deg, #667eea, #764ba2); color: #fff; }

/* Empty State */
.empty-state { text-align: center; padding: 60px 20px; }
.empty-icon { font-size: 64px; margin-bottom: 16px; opacity: 0.5; }
.empty-text { font-size: 16px; color: rgba(255,255,255,0.6); }

/* Responsive */
@media (max-width: 1024px) { .home-layout, .assessment-layout { grid-template-columns: 1fr; } }
@media (max-width: 768px) { .func-grid { grid-template-columns: 1fr; } .bottom-panels { flex-direction: column; } .form-row { grid-template-columns: 1fr; } }

/* ===== 课程页面样式 ===== */
.course-page {
  padding: 20px;
  height: 100%;
  overflow-y: auto;
}

.course-header {
  margin-bottom: 24px;
}

.course-header h2 {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 16px;
  color: #fff;
}

.exam-filter {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.exam-filter-btn {
  padding: 10px 20px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.7);
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.exam-filter-btn:hover {
  background: rgba(255,255,255,0.1);
  color: #fff;
}

.exam-filter-btn.active {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: #fff;
  border-color: transparent;
}

.course-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
}

.course-card {
  background: rgba(255,255,255,0.06);
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid rgba(255,255,255,0.08);
}

.course-card:hover {
  transform: translateY(-4px);
  background: rgba(255,255,255,0.1);
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}

.course-cover {
  width: 100%;
  height: 160px;
  object-fit: cover;
  background: linear-gradient(135deg, #667eea, #764ba2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
}

.course-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.course-info {
  padding: 16px;
}

.course-title {
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.course-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 8px;
}

.course-hours,
.course-teacher {
  font-size: 13px;
  color: rgba(255,255,255,0.6);
  display: flex;
  align-items: center;
  gap: 4px;
}

.course-category {
  display: inline-block;
  padding: 4px 10px;
  background: rgba(102,126,234,0.2);
  color: #667eea;
  font-size: 12px;
  border-radius: 12px;
  margin-top: 8px;
}

.course-description {
  font-size: 13px;
  color: rgba(255,255,255,0.5);
  margin-top: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* 课程详情弹窗 */
.course-detail-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3000;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.course-detail-modal.active {
  opacity: 1;
  visibility: visible;
}

.course-detail-content {
  width: 90%;
  max-width: 600px;
  max-height: 80vh;
  background: linear-gradient(135deg, #1a1f3a, #2d3561);
  border-radius: 20px;
  overflow: hidden;
  transform: scale(0.9);
  transition: all 0.3s ease;
}

.course-detail-modal.active .course-detail-content {
  transform: scale(1);
}

.course-detail-header {
  position: relative;
  height: 200px;
  background: linear-gradient(135deg, #667eea, #764ba2);
}

.course-detail-header img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.8;
}

.course-detail-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(0,0,0,0.5);
  color: #fff;
  font-size: 20px;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.course-detail-body {
  padding: 24px;
  overflow-y: auto;
  max-height: calc(80vh - 200px);
}

.course-detail-title {
  font-size: 22px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 16px;
}

.course-detail-meta {
  display: flex;
  gap: 24px;
  margin-bottom: 20px;
}

.course-detail-meta-item {
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(255,255,255,0.7);
  font-size: 14px;
}

.course-detail-desc {
  font-size: 14px;
  color: rgba(255,255,255,0.6);
  line-height: 1.8;
  margin-bottom: 24px;
}

.course-detail-btn {
  width: 100%;
  padding: 14px;
  border-radius: 12px;
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
}

.course-detail-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(102,126,234,0.4);
}

/* 课程详情页 */
.course-detail-page {
  width: 100%;
  height: 100%;
  display: flex;
  gap: 16px;
  padding: 16px;
}

.course-detail-left {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.course-player {
  width: 100%;
  aspect-ratio: 16/9;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  position: relative;
}

/* 播放器左上角浮动返回按钮 */
.course-player-back {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 10;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.4);
  color: #fff;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 0.85;
}
.course-player-back:hover {
  background: rgba(102, 126, 234, 0.55);
  border-color: rgba(255, 255, 255, 0.55);
  opacity: 1;
  transform: scale(1.05);
}
.course-player-back:active {
  transform: scale(0.95);
}
.course-player-back svg {
  display: block;
}
/* 播放器全屏态时隐藏返回按钮，避免遮挡视频原生控件 */
.course-player:fullscreen .course-player-back,
.course-player:-webkit-full-screen .course-player-back {
  display: none;
}

.course-player video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.course-detail-info {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 16px;
  backdrop-filter: blur(10px);
}

.course-detail-info h2 {
  font-size: 20px;
  color: #fff;
  margin-bottom: 8px;
}

.course-detail-info p {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.6;
}

.course-detail-right {
  width: 380px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  backdrop-filter: blur(10px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.video-list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.video-list-header h3 {
  font-size: 16px;
  color: #fff;
}

.video-list-header span {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
}

.video-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
}

.video-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  margin-bottom: 4px;
}

.video-item:hover {
  background: rgba(255, 255, 255, 0.1);
}

.video-item.active {
  background: linear-gradient(135deg, #667eea, #764ba2);
}

.video-item-number {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: #fff;
  flex-shrink: 0;
}

.video-item.active .video-item-number {
  background: rgba(255, 255, 255, 0.3);
}

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

.video-item-title {
  font-size: 14px;
  color: #fff;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.video-item-duration {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
}

.video-item.active .video-item-duration {
  color: rgba(255, 255, 255, 0.8);
}

/* 课程详情：章节分组（来自后台课程目录） */
.cd-chapter {
  margin-bottom: 10px;
  padding: 6px 4px 8px;
  border-radius: 10px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
}
.cd-chapter-head {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px 8px;
  font-size: 13px;
  color: rgba(255,255,255,0.85);
  font-weight: 600;
  border-bottom: 1px dashed rgba(255,255,255,0.08);
  margin-bottom: 4px;
}
.cd-chapter-index {
  flex-shrink: 0;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: #fff;
  font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.cd-chapter-name {
  flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cd-chapter-count {
  flex-shrink: 0;
  font-size: 11px;
  padding: 1px 8px;
  border-radius: 8px;
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.65);
}
.cd-section-list { padding: 0 4px; }
.cd-section-empty {
  padding: 12px;
  font-size: 12px;
  color: rgba(255,255,255,0.45);
  text-align: center;
}
.cd-section-item {
  /* 复用 .video-item 基础样式 */
}
.cd-tag-handout {
  display: inline-flex; align-items: center;
  margin-left: 8px;
  padding: 1px 8px;
  border-radius: 10px;
  font-size: 11px;
  background: rgba(67,233,123,0.18);
  color: #b6f5d3;
  cursor: pointer;
  transition: all .15s;
}
.cd-tag-handout:hover { background: rgba(67,233,123,0.32); color: #fff; }

/* ===== 8大功能模块样式 ===== */

/* 模块页面通用样式 */
.module-page {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 20px;
  overflow-y: auto;
}

.module-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}

.module-header h2 {
  font-size: 24px;
  color: #fff;
  margin: 0;
}

.back-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border: none;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  transition: all 0.3s ease;
}
.back-btn svg { display: block; }

.back-btn:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* ========= 全局：所有返回按钮统一「< 返回」样式（箭头与文字对齐） ========= */
.back-btn,
.ek-back-btn,
.tutor-back-btn,
.oel-back-btn,
.ep-back-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  line-height: 1 !important;
}
/* 隐藏各按钮里的原 SVG，改用统一伪元素图标（高度 = 1em = 字符高度） */
.back-btn > svg,
.ek-back-btn > svg,
.tutor-back-btn > svg,
.oel-back-btn > svg,
.ep-back-btn > svg {
  display: none !important;
}
.back-btn::before,
.ek-back-btn::before,
.tutor-back-btn::before,
.oel-back-btn::before,
.ep-back-btn::before {
  content: '←';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 1em;
  line-height: 1;
  font-size: 1em;
  font-weight: 500;
  flex-shrink: 0;
  color: currentColor;
}
.back-btn > span,
.ek-back-btn > span,
.tutor-back-btn > span,
.oel-back-btn > span,
.ep-back-btn > span {
  display: inline-flex;
  align-items: center;
  line-height: 1;
}

.module-content {
  flex: 1;
  overflow-y: auto;
}

/* 设置卡片 */
.setup-card {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 16px;
  padding: 24px;
  max-width: 500px;
  margin: 0 auto;
}

.setup-card h3 {
  font-size: 20px;
  color: #fff;
  margin-bottom: 24px;
  text-align: center;
}

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

.form-group label {
  display: block;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 8px;
}

.form-select {
  width: 100%;
  padding: 12px 16px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  font-size: 14px;
  outline: none;
}

.form-select option {
  background: #2d3561;
  color: #fff;
}

.radio-group {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.radio-group label {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.8);
}

.radio-group input[type="radio"] {
  accent-color: #667eea;
}

.start-btn {
  width: 100%;
  padding: 14px;
  border-radius: 12px;
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  border: none;
  cursor: pointer;
  margin-top: 16px;
  transition: all 0.3s ease;
}

.start-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(102, 126, 234, 0.4);
}

/* 练习列表 */
.practice-list, .chapter-subject-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.practice-card, .chapter-subject-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.practice-card:hover, .chapter-subject-card:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: translateX(4px);
}

.practice-icon, .chapter-subject-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: linear-gradient(135deg, #667eea, #764ba2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: #fff;
  font-weight: bold;
}

.practice-info, .chapter-subject-info {
  flex: 1;
}

.practice-info h4, .chapter-subject-info h4 {
  font-size: 16px;
  color: #fff;
  margin-bottom: 4px;
}

.practice-info p, .chapter-subject-info p {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
}

.practice-arrow {
  font-size: 20px;
  color: rgba(255, 255, 255, 0.4);
}

/* 章节列表 */
.chapter-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.chapter-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
}

.chapter-number {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(102, 126, 234, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #667eea;
  font-weight: bold;
}

.chapter-info {
  flex: 1;
}

.chapter-info h4 {
  font-size: 15px;
  color: #fff;
  margin-bottom: 4px;
}

.chapter-info p {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
}

.chapter-actions {
  display: flex;
  gap: 8px;
}

.mode-btn {
  padding: 8px 16px;
  border-radius: 8px;
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: #fff;
  font-size: 13px;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
}

.mode-btn.secondary {
  background: rgba(255, 255, 255, 0.1);
}

.mode-btn:hover {
  transform: translateY(-2px);
}

/* 章节练习 · 进度徽章 */
.chapter-item.chapter-item-has-progress {
  position: relative;
  background: linear-gradient(135deg, rgba(102,126,234,0.14), rgba(255,255,255,0.05));
  box-shadow: inset 0 0 0 1px rgba(0,212,255,0.25);
}
.chapter-item.chapter-item-has-progress::before {
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 3px;
  border-radius: 12px 0 0 12px;
  background: linear-gradient(180deg, #00d4ff, #7c3aed);
  box-shadow: 0 0 10px rgba(0,212,255,0.6);
}
.chapter-progress-hint {
  color: #7ff2ff;
  font-weight: 600;
  animation: chProgBlink 2s ease-in-out infinite;
}
@keyframes chProgBlink {
  0%,100% { opacity: 1; }
  50% { opacity: 0.55; }
}
.chapter-progress-badge {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #00d4ff 0%, #7c3aed 100%);
  box-shadow: 0 2px 6px rgba(0,212,255,0.35);
  letter-spacing: 0.3px;
}
.chapter-progress-badge-2 {
  background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
  box-shadow: 0 2px 6px rgba(67,233,123,0.35);
  color: #04222a;
}

/* 考试列表 */
.exam-list, .mock-exam-list, .report-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.exam-card, .mock-exam-card, .report-card {
  padding: 16px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.exam-card:hover, .mock-exam-card:hover, .report-card:hover {
  background: rgba(255, 255, 255, 0.1);
}

.exam-card-header, .mock-exam-header, .report-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.exam-card-header h4, .mock-exam-header h4, .report-card-header h4 {
  font-size: 16px;
  color: #fff;
  margin: 0;
}

.exam-status {
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 12px;
}

.exam-status.completed {
  background: rgba(67, 233, 123, 0.2);
  color: #43e97b;
}

.exam-status.not-started {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.6);
}

.exam-card-info, .mock-exam-info, .report-card-info {
  display: flex;
  gap: 16px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 12px;
}

.exam-card-score {
  font-size: 14px;
  color: #667eea;
  font-weight: 500;
}

.exam-difficulty {
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 12px;
}

.exam-difficulty.easy {
  background: rgba(67, 233, 123, 0.2);
  color: #43e97b;
}

.exam-difficulty.medium {
  background: rgba(254, 225, 64, 0.2);
  color: #fee140;
}

.exam-difficulty.hard {
  background: rgba(255, 107, 107, 0.2);
  color: #ff6b6b;
}

.start-exam-btn {
  width: 100%;
  padding: 12px;
  border-radius: 10px;
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: #fff;
  font-size: 14px;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
}

.start-exam-btn:hover {
  transform: translateY(-2px);
}

/* 错题本样式 */
.wrong-stats {
  display: flex;
  gap: 16px;
  margin-bottom: 24px;
}

.stat-item {
  flex: 1;
  padding: 16px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  text-align: center;
}

.stat-value {
  font-size: 28px;
  color: #667eea;
  font-weight: bold;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
}

.wrong-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 24px;
}

.wrong-item {
  padding: 16px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
}

.wrong-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.wrong-item-index {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
}

.wrong-item-subject {
  padding: 2px 8px;
  border-radius: 8px;
  background: rgba(102, 126, 234, 0.2);
  color: #667eea;
  font-size: 12px;
}

.wrong-item-content p {
  font-size: 14px;
  color: #fff;
  margin: 0 0 12px 0;
}

.wrong-item-actions {
  display: flex;
  gap: 8px;
}

.review-btn, .mark-btn {
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12px;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
}

.review-btn {
  background: rgba(102, 126, 234, 0.2);
  color: #667eea;
}

.mark-btn {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.8);
}

.mark-btn.done {
  background: rgba(67, 233, 123, 0.2);
  color: #43e97b;
}

/* 报告卡片 */
.report-card-result {
  display: flex;
  align-items: center;
  gap: 16px;
}

.report-score {
  font-size: 28px;
  color: #667eea;
  font-weight: bold;
}

.report-accuracy {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
}

/* 报告详情 */
.report-detail-page {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 20px;
  overflow-y: auto;
}

.report-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}

.summary-item {
  padding: 16px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  text-align: center;
}

.summary-label {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 8px;
}

.summary-value {
  font-size: 20px;
  color: #fff;
  font-weight: bold;
}

.summary-value.highlight {
  color: #667eea;
  font-size: 28px;
}

.knowledge-analysis {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 24px;
}

.knowledge-analysis h3 {
  font-size: 16px;
  color: #fff;
  margin-bottom: 16px;
}

.knowledge-bars {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.knowledge-bar-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.knowledge-bar-label {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.8);
}

.knowledge-bar {
  height: 8px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  overflow: hidden;
}

.knowledge-bar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.3s ease;
}

.report-actions {
  display: flex;
  gap: 12px;
}

.action-btn {
  flex: 1;
  padding: 14px;
  border-radius: 12px;
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: #fff;
  font-size: 15px;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
}

.action-btn.secondary {
  background: rgba(255, 255, 255, 0.1);
}

.action-btn:hover {
  transform: translateY(-2px);
}

/* 答题页面 */
.answer-page {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: linear-gradient(135deg, #1a1f3a, #2d3561);
}

.answer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: rgba(0, 0, 0, 0.2);
}

.answer-title {
  font-size: 16px;
  color: #fff;
  font-weight: 500;
}

.answer-progress {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
}

.answer-body {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
}

.question-card {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 16px;
  padding: 24px;
}

.question-number {
  font-size: 14px;
  color: #667eea;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.question-type-tag {
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 10px;
  background: rgba(102, 126, 234, 0.2);
  color: #a8b4ff;
  font-weight: normal;
}

.question-material {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  padding: 12px 16px;
  margin-bottom: 16px;
  border-left: 3px solid #4facfe;
}

.material-label {
  font-size: 12px;
  color: #4facfe;
  font-weight: 600;
  margin-bottom: 6px;
}

.material-content {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.7;
}

.question-content {
  font-size: 16px;
  color: #fff;
  line-height: 1.6;
  margin-bottom: 24px;
}

.question-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.option-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 2px solid transparent;
}

.option-item:hover {
  background: rgba(255, 255, 255, 0.1);
}

.option-item.selected {
  background: rgba(102, 126, 234, 0.2);
  border-color: #667eea;
}

.option-item.correct {
  background: rgba(67, 233, 123, 0.2);
  border-color: #43e97b;
}

.option-item.wrong {
  background: rgba(255, 107, 107, 0.2);
  border-color: #ff6b6b;
}

.option-label {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #fff;
  font-weight: bold;
}

.option-item.selected .option-label {
  background: #667eea;
}

.option-item.correct .option-label {
  background: #43e97b;
}

.option-item.wrong .option-label {
  background: #ff6b6b;
}

.option-text {
  flex: 1;
  font-size: 15px;
  color: #fff;
}

.option-icon {
  font-size: 18px;
}

.option-item.correct .option-icon {
  color: #43e97b;
}

.option-item.wrong .option-icon {
  color: #ff6b6b;
}

.answer-explanation {
  margin-top: 20px;
  padding: 16px;
  background: rgba(102, 126, 234, 0.1);
  border-radius: 12px;
  border-left: 3px solid #667eea;
}

.answer-explanation h4 {
  font-size: 14px;
  color: #667eea;
  margin-bottom: 8px;
}

.answer-explanation .correct-answer {
  font-size: 13px;
  color: #43e97b;
  font-weight: normal;
  margin-left: 8px;
}

.answer-explanation p {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.6;
  margin: 0;
}

.answer-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: rgba(0, 0, 0, 0.2);
  gap: 12px;
}

.nav-btn.card-btn {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: #fff;
  padding: 10px 24px;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.35);
}

.nav-btn.card-btn:hover {
  background: linear-gradient(135deg, #7c8ff5, #8759b3);
  transform: translateY(-1px);
}

/* ========== 答题卡浮层 ========== */
.answer-card-mask {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
  z-index: 99998;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: acFadeIn 0.2s ease;
}

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

.answer-card-modal {
  width: min(560px, 92vw);
  max-height: 82vh;
  background: linear-gradient(160deg, #1e2749, #2d3561);
  border-radius: 16px;
  padding: 24px;
  color: #fff;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  gap: 16px;
  animation: acSlideUp 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes acSlideUp {
  from { transform: translateY(30px) scale(0.96); opacity: 0; }
  to { transform: translateY(0) scale(1); opacity: 1; }
}

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

.answer-card-title {
  font-size: 20px;
  font-weight: 700;
}

.answer-card-close {
  width: 32px;
  height: 32px;
  border: none;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border-radius: 50%;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.answer-card-close:hover {
  background: rgba(255, 255, 255, 0.2);
}

.answer-card-stats {
  display: flex;
  gap: 20px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.85);
}

.ac-stat em {
  font-style: normal;
  font-weight: 700;
  color: #fff;
  margin-right: 4px;
}

.ac-stat.ac-answered em { color: #a78bfa; }
.ac-stat.ac-unanswered em { color: #fbbf24; }

.answer-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(46px, 1fr));
  gap: 10px;
  max-height: 40vh;
  overflow-y: auto;
  padding: 4px 2px;
}

.answer-card-cell {
  aspect-ratio: 1;
  border-radius: 8px;
  border: 1.5px solid rgba(255, 255, 255, 0.18);
  background: transparent;
  color: rgba(255, 255, 255, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.answer-card-cell:hover {
  border-color: rgba(255, 255, 255, 0.4);
  transform: translateY(-2px);
}

.answer-card-cell.answered {
  background: linear-gradient(135deg, #667eea, #764ba2);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.35);
}

.answer-card-cell.current {
  outline: 2px solid #fbbf24;
  outline-offset: 2px;
}

.answer-card-legend {
  display: flex;
  gap: 18px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
  padding: 4px 0;
}

.ac-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.ac-legend-dot {
  width: 14px;
  height: 14px;
  border-radius: 4px;
  border: 1.5px solid rgba(255, 255, 255, 0.4);
}

.ac-legend-dot.answered {
  background: linear-gradient(135deg, #667eea, #764ba2);
  border-color: transparent;
}

.ac-legend-dot.current {
  outline: 2px solid #fbbf24;
  outline-offset: 1px;
}

.answer-card-submit {
  padding: 14px 24px;
  border: none;
  border-radius: 12px;
  background: linear-gradient(135deg, #fa709a, #ee5a6f);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(238, 90, 111, 0.35);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.answer-card-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(238, 90, 111, 0.5);
}

/* 答题卡未答完确认弹窗 */
.ac-confirm-mask {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(6px);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: acFadeIn 0.2s ease;
}

.ac-confirm-modal {
  width: min(400px, 88vw);
  background: linear-gradient(160deg, #1e2749, #2d3561);
  border-radius: 16px;
  padding: 32px 28px 24px;
  color: #fff;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  animation: acSlideUp 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

.ac-confirm-icon {
  width: 60px;
  height: 60px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  color: #fff;
}

.ac-confirm-title {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 6px;
}

.ac-confirm-desc {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.75);
  margin-bottom: 20px;
}

.ac-confirm-btns {
  display: flex;
  gap: 12px;
}

.ac-confirm-btn {
  flex: 1;
  padding: 12px 20px;
  border-radius: 10px;
  border: none;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.ac-confirm-btn.ac-continue {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border: 1.5px solid rgba(255, 255, 255, 0.25);
}

.ac-confirm-btn.ac-continue:hover {
  background: rgba(255, 255, 255, 0.18);
}

.ac-confirm-btn.ac-submit {
  background: linear-gradient(135deg, #fa709a, #ee5a6f);
  color: #fff;
  box-shadow: 0 6px 16px rgba(238, 90, 111, 0.35);
}

.ac-confirm-btn.ac-submit:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(238, 90, 111, 0.5);
}

.nav-btn {
  padding: 10px 20px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: 14px;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
}

.nav-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.2);
}

.nav-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.nav-btn.submit {
  background: linear-gradient(135deg, #667eea, #764ba2);
}

.question-dots {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
}

.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  cursor: pointer;
  transition: all 0.3s ease;
}

.dot.active {
  background: #667eea;
  transform: scale(1.3);
}

.dot.answered {
  background: rgba(102, 126, 234, 0.5);
}

/* 结果页面 */
.result-page {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px;
}

.result-header {
  text-align: center;
  margin-bottom: 32px;
}

.result-icon {
  font-size: 64px;
  margin-bottom: 16px;
}

.result-header h2 {
  font-size: 24px;
  color: #fff;
  margin: 0;
}

.result-stats {
  margin-bottom: 32px;
}

.stat-circle {
  position: relative;
  width: 120px;
  height: 120px;
}

.stat-circle svg {
  width: 100%;
  height: 100%;
}

.stat-circle .stat-value {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 32px;
  color: #fff;
  font-weight: bold;
}

.stat-circle .stat-label {
  position: absolute;
  top: 70%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
}

.result-details {
  display: flex;
  gap: 32px;
  margin-bottom: 32px;
}

.detail-item {
  text-align: center;
}

.detail-label {
  display: block;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 4px;
}

.detail-value {
  font-size: 18px;
  color: #fff;
  font-weight: 500;
}

.result-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}
.result-actions .action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 140px;
  padding: 12px 22px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
  line-height: 1;
}
.result-actions .action-btn svg { flex-shrink: 0; }
.result-actions .action-btn-primary {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #fff;
  box-shadow: 0 6px 20px rgba(102,126,234,0.35);
}
.result-actions .action-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(102,126,234,0.5); }
.result-actions .action-btn-retake {
  background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
  color: #fff;
  box-shadow: 0 6px 20px rgba(67,233,123,0.3);
}
.result-actions .action-btn-retake:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(67,233,123,0.45); }
.result-actions .action-btn-back {
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.85);
  border: 1px solid rgba(255,255,255,0.15);
}
.result-actions .action-btn-back:hover { background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.28); }
.result-actions .action-btn-disabled {
  background: rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.35);
  cursor: not-allowed;
}

/* 自定义答题退出/交卷 确认弹窗 */
.ac-confirm-mask {
  position: fixed;
  inset: 0;
  background: rgba(15, 20, 40, 0.65);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: acFadeIn .18s ease;
}
@keyframes acFadeIn { from { opacity: 0; } to { opacity: 1; } }
.ac-confirm-modal {
  width: min(420px, 100%);
  background: linear-gradient(160deg, #232849 0%, #1a1f3a 100%);
  border: 1px solid rgba(102,126,234,0.28);
  border-radius: 16px;
  padding: 24px 24px 20px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.55);
  color: #fff;
  animation: acSlideUp .22s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes acSlideUp { from { transform: translateY(20px); opacity: 0; } to { transform: none; opacity: 1; } }
.ac-confirm-title {
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 12px;
  letter-spacing: 0.3px;
}
.ac-confirm-msg {
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255,255,255,0.78);
  margin-bottom: 20px;
}
.ac-confirm-btns {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}
.ac-confirm-btn {
  min-width: 96px;
  padding: 10px 18px;
  border-radius: 10px;
  border: none;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all .25s ease;
  line-height: 1;
}
.ac-confirm-cancel {
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.85);
  border: 1px solid rgba(255,255,255,0.15);
}
.ac-confirm-cancel:hover { background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.28); }
.ac-confirm-ok {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #fff;
  box-shadow: 0 6px 20px rgba(102,126,234,0.35);
}
.ac-confirm-ok:hover { transform: translateY(-1px); box-shadow: 0 10px 26px rgba(102,126,234,0.5); }

/* 空状态 */
.empty-state {
  text-align: center;
  padding: 60px 20px;
}

.empty-icon {
  font-size: 64px;
  margin-bottom: 16px;
}

.empty-state h3 {
  font-size: 18px;
  color: #fff;
  margin-bottom: 8px;
}

.empty-state p {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
}

/* 答题结果区域 */
.answer-result {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
}

.answer-result-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

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

.answer-label {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
  min-width: 80px;
}

.answer-value {
  font-size: 16px;
  font-weight: 600;
  color: #fff;
}

.correct-answer .answer-value {
  color: #43e97b;
}

.user-answer.correct .answer-value {
  color: #43e97b;
}

.user-answer.wrong .answer-value {
  color: #fa709a;
}

.answer-status {
  margin-left: auto;
  font-size: 13px;
  padding: 4px 12px;
  border-radius: 12px;
}

.user-answer.correct .answer-status {
  background: rgba(67, 233, 123, 0.2);
  color: #43e97b;
}

.user-answer.wrong .answer-status {
  background: rgba(250, 112, 154, 0.2);
  color: #fa709a;
}

/* ==================== 学习工具页面 ==================== */
.learning-tools-page {
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: 28px;
  padding: 24px 32px;
  width: 100%;
  height: 540px !important;
  max-height: 540px !important;
  overflow: hidden !important;
  height: 100%;
  box-sizing: border-box;
  overflow-y: auto;
}

/* 左侧 Hero */
.tools-hero {
  position: relative;
  border-radius: 24px;
  background: linear-gradient(160deg, rgba(102,126,234,0.18) 0%, rgba(118,75,162,0.12) 50%, rgba(26,31,58,0.5) 100%);
  border: 1px solid rgba(102,126,234,0.3);
  overflow: hidden;
  padding: 28px 28px 32px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 540px;
  box-shadow: 0 12px 40px rgba(102,126,234,0.15), inset 0 1px 0 rgba(255,255,255,0.06);
}

.hero-bg-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(102,126,234,0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(102,126,234,0.08) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: radial-gradient(ellipse at center top, #000 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center top, #000 30%, transparent 75%);
  pointer-events: none;
}

.hero-orbit {
  position: absolute;
  border-radius: 50%;
  border: 1px dashed rgba(102,126,234,0.35);
  pointer-events: none;
}
.hero-orbit-1 { width: 480px; height: 480px; left: -120px; top: -120px; animation: orbit-spin 30s linear infinite; }
.hero-orbit-2 { width: 320px; height: 320px; right: -80px; bottom: -80px; border-color: rgba(240,147,251,0.25); animation: orbit-spin 24s linear infinite reverse; }

@keyframes orbit-spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }

.hero-image-wrap {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 4px 0 18px;
  z-index: 2;
}

.hero-image {
  position: relative;
  width: 100%;
  max-width: 320px;
  height: auto;
  filter: drop-shadow(0 12px 32px rgba(102,126,234,0.45));
  animation: hero-float 4s ease-in-out infinite;
  z-index: 2;
}

@keyframes hero-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.hero-image-glow {
  position: absolute;
  width: 280px;
  height: 280px;
  background: radial-gradient(circle, rgba(102,126,234,0.45) 0%, transparent 60%);
  filter: blur(40px);
  z-index: 1;
  animation: hero-glow-pulse 3s ease-in-out infinite;
}

@keyframes hero-glow-pulse {
  0%, 100% { opacity: .55; transform: scale(1); }
  50% { opacity: .9; transform: scale(1.08); }
}

.hero-text { position: relative; z-index: 2; text-align: center; margin-top: 20px; }

.hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  background: rgba(102,126,234,0.18);
  border: 1px solid rgba(102,126,234,0.45);
  border-radius: 100px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: #a5b4fc;
  margin-bottom: 12px;
}

.hero-tag-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #43e97b;
  box-shadow: 0 0 8px rgba(67,233,123,0.8);
  animation: hero-dot-blink 1.4s ease-in-out infinite;
}

@keyframes hero-dot-blink {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .4; transform: scale(.8); }
}

.hero-title {
  font-size: 32px;
  font-weight: 800;
  line-height: 1.2;
  margin: 0 0 12px;
  color: #fff;
}
.hero-title-line { display: inline; }
.hero-title-line + .hero-title-line { margin-left: 8px; }
.hero-title { white-space: nowrap; }
.hero-title-gradient {
  background: linear-gradient(135deg, #667eea 0%, #f093fb 50%, #fee140 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* 期中考试列表页滚动修复 */
.page-content[data-page="online-exam-list"] {
  overflow-y: auto !important;
  height: calc(100vh - 140px) !important;
  min-height: 500px !important;
}
.page-content[data-page="online-exam-list"] .oel-container {
  overflow-y: visible !important;
  flex-shrink: 0 !important;
}
.page-content[data-page="online-exam-list"] .oel-hero {
  flex-shrink: 0 !important;
}
.page-content[data-page="online-exam-list"] .oel-list {
  flex-shrink: 0 !important;
}

.hero-subtitle {
  font-size: 13px;
  color: rgba(255,255,255,0.7);
  line-height: 1.7;
  margin: 0 0 20px;
}

.hero-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 14px 18px;
  border-radius: 16px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(10px);
}

.hero-stat { display: flex; flex-direction: column; gap: 2px; align-items: center; }
.hero-stat-num {
  font-size: 20px;
  font-weight: 800;
  background: linear-gradient(135deg, #667eea, #764ba2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.hero-stat-label { font-size: 11px; color: rgba(255,255,255,0.55); }
.hero-stat-divider { width: 1px; height: 24px; background: rgba(255,255,255,0.1); }

/* 右侧模块 */
.tools-modules {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
}

.tools-modules-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 4px;
}

.modules-title {
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  margin: 0;
  position: relative;
  padding-left: 14px;
}
.modules-title::before {
  content: '';
  position: absolute;
  left: 0; top: 6px;
  width: 4px; height: 22px;
  border-radius: 2px;
  background: linear-gradient(180deg, #667eea, #764ba2);
  box-shadow: 0 0 12px rgba(102,126,234,0.7);
}

.modules-count {
  font-size: 12px;
  color: rgba(255,255,255,0.6);
  padding: 4px 12px;
  border-radius: 100px;
  background: rgba(102,126,234,0.12);
  border: 1px solid rgba(102,126,234,0.3);
}

.modules-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
  align-content: start;
}

.module-card {
  position: relative;
  padding: 22px 22px 24px;
  border-radius: 20px;
  background: linear-gradient(140deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.08);
  cursor: pointer;
  transition: all .4s cubic-bezier(0.4,0,0.2,1);
  overflow: hidden;
  color: rgba(255,255,255,0.95);
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 200px;
}

/* 第一行：2张大卡 grid-column 跨 3 */
.module-card:nth-child(1) { grid-column: span 3; }
.module-card:nth-child(2) { grid-column: span 3; }
/* 第二行：3张小卡 各跨 2 */
.module-card:nth-child(3),
.module-card:nth-child(4),
.module-card:nth-child(5) { grid-column: span 2; }

.module-card-deco {
  position: absolute;
  width: 180px; height: 180px;
  right: -60px; top: -60px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--card-color, rgba(102,126,234,0.6)) 0%, transparent 65%);
  opacity: .3;
  filter: blur(20px);
  transition: all .4s;
}

.module-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--card-line, linear-gradient(90deg, #667eea, #764ba2));
  opacity: 0;
  transition: opacity .4s;
}

.module-card:hover {
  transform: translateY(-6px);
  background: linear-gradient(140deg, rgba(255,255,255,0.1), rgba(255,255,255,0.04));
  border-color: var(--card-border, rgba(102,126,234,0.5));
  box-shadow: 0 18px 48px var(--card-shadow, rgba(102,126,234,0.28));
}
.module-card:hover::after { opacity: 1; }
.module-card:hover .module-card-deco { opacity: .55; transform: scale(1.2); }
.module-card:hover .module-card-icon { transform: rotate(-6deg) scale(1.08); }
.module-card:hover .module-card-arrow { gap: 8px; opacity: 1; }
.module-card:active { transform: translateY(-3px) scale(.99); }

.module-card-icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.1);
  color: #fff;
  transition: transform .4s cubic-bezier(0.4,0,0.2,1);
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}
.module-card-icon svg { width: 32px; height: 32px; }

.module-card-content { display: flex; flex-direction: column; gap: 6px; position: relative; z-index: 1; flex: 1; }
.module-card-title { font-size: 18px; font-weight: 700; color: #fff; margin: 0; letter-spacing: 0.3px; }
.module-card-desc { font-size: 12.5px; color: rgba(255,255,255,0.65); line-height: 1.6; margin: 0; flex: 1; }
.module-card-arrow {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--card-accent, #a5b4fc);
  opacity: .75;
  transition: all .3s;
  margin-top: 4px;
}

/* 各卡片配色 */
.module-paper { --card-color: rgba(102,126,234,0.7); --card-line: linear-gradient(90deg, #667eea, #764ba2); --card-border: rgba(102,126,234,0.5); --card-shadow: rgba(102,126,234,0.3); --card-accent: #a5b4fc; }
.module-resume { --card-color: rgba(240,147,251,0.7); --card-line: linear-gradient(90deg, #f093fb, #f5576c); --card-border: rgba(240,147,251,0.5); --card-shadow: rgba(240,147,251,0.3); --card-accent: #fbbf24; }
.module-correct { --card-color: rgba(67,233,123,0.7); --card-line: linear-gradient(90deg, #43e97b, #38f9d7); --card-border: rgba(67,233,123,0.5); --card-shadow: rgba(67,233,123,0.3); --card-accent: #6ee7b7; }
.module-handout { --card-color: rgba(79,172,254,0.7); --card-line: linear-gradient(90deg, #4facfe, #00f2fe); --card-border: rgba(79,172,254,0.5); --card-shadow: rgba(79,172,254,0.3); --card-accent: #7dd3fc; }
.module-photo { --card-color: rgba(250,112,154,0.7); --card-line: linear-gradient(90deg, #fa709a, #fee140); --card-border: rgba(250,112,154,0.5); --card-shadow: rgba(250,112,154,0.3); --card-accent: #fda4af; }

.module-paper .module-card-icon { background: linear-gradient(135deg, rgba(102,126,234,0.25), rgba(118,75,162,0.18)); border-color: rgba(102,126,234,0.35); }
.module-resume .module-card-icon { background: linear-gradient(135deg, rgba(240,147,251,0.25), rgba(245,87,108,0.18)); border-color: rgba(240,147,251,0.35); }
.module-correct .module-card-icon { background: linear-gradient(135deg, rgba(67,233,123,0.25), rgba(56,249,215,0.18)); border-color: rgba(67,233,123,0.35); }
.module-handout .module-card-icon { background: linear-gradient(135deg, rgba(79,172,254,0.25), rgba(0,242,254,0.18)); border-color: rgba(79,172,254,0.35); }
.module-photo .module-card-icon { background: linear-gradient(135deg, rgba(250,112,154,0.25), rgba(254,225,64,0.18)); border-color: rgba(250,112,154,0.35); }

/* 响应式 */
@media (max-width: 1200px) {
  .learning-tools-page { grid-template-columns: 360px 1fr; gap: 20px; padding: 20px; }
  .hero-image { max-width: 260px; }
  .hero-title { font-size: 26px; }
  .modules-grid { gap: 12px; }
}

@media (max-width: 900px) {
  .learning-tools-page { grid-template-columns: 1fr; padding: 16px; }
  .tools-hero { min-height: auto; padding: 24px 20px; }
  .hero-image { max-width: 200px; }
  .modules-grid { grid-template-columns: repeat(2, 1fr); }
  .module-card:nth-child(1),
  .module-card:nth-child(2),
  .module-card:nth-child(3),
  .module-card:nth-child(4),
  .module-card:nth-child(5) { grid-column: span 1; }
  .module-card:nth-child(5) { grid-column: span 2; }
}

@media (max-width: 540px) {
  .modules-grid { grid-template-columns: 1fr; }
  .module-card:nth-child(5) { grid-column: span 1; }
  .hero-title { font-size: 24px; }
  .hero-stats { padding: 10px; gap: 8px; }
  .hero-stat-num { font-size: 17px; }
}

/* ==================== 电子资料页面 ==================== */
.ematerials-page {
  padding: 20px;
  height: 100%;
  overflow-y: auto;
}

.ematerials-header {
  margin-bottom: 24px;
}

.ematerials-header h2 {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 16px;
  color: #fff;
}

.ematerials-list {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 24px;
}

.ematerial-card {
  background: rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.ematerial-card:hover {
  transform: translateY(-4px);
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.ematerial-card:active {
  transform: scale(0.97);
}

.ematerial-cover {
  width: 100%;
  height: 270px;
  background: linear-gradient(135deg, #667eea, #764ba2);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.ematerial-cover img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.ematerial-cover-placeholder {
  font-size: 48px;
  opacity: 0.6;
}

.ematerial-info {
  padding: 16px;
}

.ematerial-title {
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ematerial-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 8px;
}

.ematerial-type,
.ematerial-category {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
  display: flex;
  align-items: center;
  gap: 4px;
}

.ematerial-tag {
  display: inline-block;
  padding: 4px 10px;
  background: rgba(102, 126, 234, 0.2);
  color: #667eea;
  font-size: 12px;
  border-radius: 6px;
}

.ematerial-desc {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
  margin-top: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* ==================== 电子资料阅读器 ==================== */
.material-reader-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.85);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
}

.material-reader {
  width: 90%;
  max-width: 900px;
  height: 85vh;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.material-reader-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: linear-gradient(135deg, #1a1f3a, #2d3561);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  flex-shrink: 0;
}

.material-reader-back {
  padding: 6px 14px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: #fff;
  font-size: 14px;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.2s;
}

.material-reader-back:hover {
  background: rgba(255, 255, 255, 0.2);
}

.material-reader-title {
  font-size: 16px;
  color: #fff;
  margin: 0;
  flex: 1;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 16px;
}

.material-reader-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.material-reader-font-btn {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}

.material-reader-font-btn:hover {
  background: rgba(255, 255, 255, 0.2);
}

.material-reader-content {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
  font-size: 15px;
  line-height: 1.8;
  color: #333;
}

.material-reader-content img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  margin: 12px 0;
}

.material-reader-content h1,
.material-reader-content h2,
.material-reader-content h3 {
  color: #1a1f3a;
  margin: 16px 0 8px;
}

.material-reader-content p {
  margin: 8px 0;
}

.e-reader-file-icon {
  font-size: 64px;
  margin-bottom: 16px;
}

.e-reader-file a {
  color: #667eea;
  text-decoration: underline;
}

/* ==================== 综合分析 - 数据看板 ==================== */
.analysis-dashboard {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* 顶部统计卡片 */
.stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.stat-card {
  background: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.05) 100%);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 16px;
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.stat-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255,255,255,0.3);
  box-shadow: 0 8px 32px rgba(0,0,0,0.2);
}

.stat-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.stat-total .stat-icon { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
.stat-accuracy .stat-icon { background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%); }
.stat-days .stat-icon { background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); }
.stat-rank .stat-icon { background: linear-gradient(135deg, #fa709a 0%, #fee140 100%); }

.stat-info {
  display: flex;
  flex-direction: column;
}

.stat-value {
  font-size: 24px;
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
}

.stat-label {
  font-size: 12px;
  color: rgba(255,255,255,0.6);
  margin-top: 4px;
}

/* 中间区域 */
.middle-row {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 16px;
}

/* 底部区域 */
.bottom-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* 通用卡片样式 */
.dashboard-card {
  background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.03) 100%);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 20px;
  padding: 20px;
  overflow: hidden;
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.card-header h3 {
  font-size: 16px;
  font-weight: 600;
  color: #fff;
}

.card-badge {
  font-size: 11px;
  color: rgba(255,255,255,0.7);
  background: rgba(255,255,255,0.1);
  padding: 4px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.15);
}

/* 学习进度 */
.progress-content {
  display: flex;
  align-items: center;
  gap: 24px;
}

.circular-progress {
  position: relative;
  width: 120px;
  height: 120px;
  flex-shrink: 0;
}

.circular-progress svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.circular-progress .progress-bg {
  fill: none;
  stroke: rgba(255,255,255,0.1);
  stroke-width: 10;
}

.circular-progress .progress-fill {
  fill: none;
  stroke: url(#progressGradient);
  stroke-width: 10;
  stroke-linecap: round;
  transition: stroke-dashoffset 1s ease;
}

.progress-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.progress-value {
  display: block;
  font-size: 24px;
  font-weight: 700;
  color: #fff;
}

.progress-label {
  display: block;
  font-size: 11px;
  color: rgba(255,255,255,0.6);
  margin-top: 2px;
}

.progress-details {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.progress-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.progress-item .item-label {
  font-size: 12px;
  color: rgba(255,255,255,0.7);
  width: 60px;
  flex-shrink: 0;
}

.progress-item .item-bar {
  flex: 1;
  height: 6px;
  background: rgba(255,255,255,0.1);
  border-radius: 3px;
  overflow: hidden;
}

.progress-item .bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
  border-radius: 3px;
  transition: width 0.8s ease;
}

.progress-item .item-value {
  font-size: 12px;
  color: rgba(255,255,255,0.8);
  width: 36px;
  text-align: right;
}

/* 分数趋势 */
.trend-content {
  height: 180px;
}

.trend-chart {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.chart-grid {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 30px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.grid-line {
  height: 1px;
  background: rgba(255,255,255,0.08);
}

.chart-line {
  flex: 1;
  position: relative;
}

.chart-line svg {
  width: 100%;
  height: 100%;
}

.trend-path {
  stroke: #667eea;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 8px rgba(102,126,234,0.5));
  transition: d 0.8s ease;
}

.trend-area {
  opacity: 0.3;
}

.chart-points {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 30px;
  pointer-events: none;
}

.chart-point {
  position: absolute;
  width: 10px;
  height: 10px;
  background: #667eea;
  border: 2px solid #fff;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 10px rgba(102,126,234,0.6);
}

.chart-labels {
  display: flex;
  justify-content: space-between;
  padding-top: 8px;
}

.chart-labels span {
  font-size: 10px;
  color: rgba(255,255,255,0.5);
}

/* 薄弱知识点 */
.weakness-content {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.weakness-item {
  display: flex;
  align-items: center;
  gap: 12px;
}

.weakness-info {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 120px;
  flex-shrink: 0;
}

.weakness-rank {
  width: 22px;
  height: 22px;
  background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
}

.weakness-item:nth-child(2) .weakness-rank {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.weakness-item:nth-child(3) .weakness-rank {
  background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}

.weakness-name {
  font-size: 13px;
  color: rgba(255,255,255,0.9);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.weakness-bar {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
}

.weakness-bar .bar-bg {
  flex: 1;
  height: 8px;
  background: rgba(255,255,255,0.1);
  border-radius: 4px;
  overflow: hidden;
}

.weakness-bar .bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #fa709a 0%, #fee140 100%);
  border-radius: 4px;
  transition: width 0.8s ease;
}

.weakness-bar .bar-fill.danger {
  background: linear-gradient(90deg, #ff6b6b 0%, #ee5a6f 100%);
}

.weakness-rate {
  font-size: 12px;
  color: #fa709a;
  font-weight: 600;
  width: 40px;
  text-align: right;
}

/* 最近练习 */
.recent-content {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 200px;
  overflow-y: auto;
}

.recent-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.05);
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.08);
  transition: all 0.2s ease;
}

.recent-item:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.15);
}

.recent-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.recent-icon.special { background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); }
.recent-icon.chapter { background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%); }
.recent-icon.paper { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
.recent-icon.mock { background: linear-gradient(135deg, #fa709a 0%, #fee140 100%); }

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

.recent-title {
  font-size: 13px;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.recent-time {
  font-size: 11px;
  color: rgba(255,255,255,0.5);
  margin-top: 2px;
}

.recent-score {
  font-size: 14px;
  font-weight: 600;
  color: #43e97b;
}

.recent-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  text-align: center;
}

.recent-empty p {
  font-size: 13px;
  color: rgba(255,255,255,0.5);
  margin-top: 12px;
}

/* 响应式 */
@media (max-width: 768px) {
  .stats-row {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .middle-row,
  .bottom-row {
    grid-template-columns: 1fr;
  }
  
  .progress-content {
    flex-direction: column;
  }
  
  .circular-progress {
    width: 100px;
    height: 100px;
  }
}

/* ==================== 校内学习页面样式 ==================== */
.campus-page {
  display: flex;
  gap: 40px;
  padding: 20px;
  width: 100%;
  height: 100%;
  align-items: center;
  box-sizing: border-box;
}

/* 左侧插画区域 */
.campus-illustration {
  flex: 0 0 40%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
}

.campus-scene {
  width: 320px;
  height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.campus-building {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 20px 40px rgba(102, 126, 234, 0.3));
}

/* 云朵动画 */
.floating-cloud {
  animation: floatCloud 8s ease-in-out infinite;
}

.floating-cloud.slow {
  animation: floatCloud 12s ease-in-out infinite reverse;
}

@keyframes floatCloud {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(20px); }
}

/* 学生剪影动画 */
.student-figure {
  animation: studentBounce 2s ease-in-out infinite;
}

.student-figure:nth-child(2) {
  animation-delay: 0.5s;
}

@keyframes studentBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

.campus-title {
  font-size: 32px;
  font-weight: 700;
  color: #fff;
  margin-top: 20px;
  background: linear-gradient(135deg, #fff 0%, rgba(255,255,255,0.7) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.campus-subtitle {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 8px;
}

/* 右侧功能模块 */
.campus-modules {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 20px;
  height: 100%;
  align-content: center;
}

/* 第一个模块占两行 */
.campus-module-card:nth-child(1) {
  grid-row: span 2;
}

.campus-module-card {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 20px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.campus-module-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, transparent 0%, rgba(255,255,255,0.05) 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.campus-module-card:hover {
  transform: translateY(-8px);
  border-color: rgba(255, 255, 255, 0.3);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.campus-module-card:hover::before {
  opacity: 1;
}

/* 各模块渐变背景 */
.module-course {
  background: linear-gradient(135deg, rgba(79, 172, 254, 0.2) 0%, rgba(0, 242, 254, 0.1) 100%);
}

.module-textbook {
  background: linear-gradient(135deg, rgba(67, 233, 123, 0.2) 0%, rgba(56, 249, 215, 0.1) 100%);
}

.module-resource {
  background: linear-gradient(135deg, rgba(250, 112, 154, 0.2) 0%, rgba(254, 225, 64, 0.1) 100%);
}

.module-exam {
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.2) 0%, rgba(118, 75, 162, 0.1) 100%);
}

.module-knowledge {
  background: linear-gradient(135deg, rgba(94, 231, 223, 0.2) 0%, rgba(180, 144, 202, 0.1) 100%);
}

.module-icon {
  width: 72px;
  height: 72px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.module-info {
  text-align: center;
}

.module-info h3 {
  font-size: 18px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 6px;
}

.module-info p {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
}

/* 响应式 */
@media (max-width: 1024px) {
  .campus-page {
    flex-direction: column;
    padding: 20px;
  }
  
  .campus-illustration {
    flex: 0 0 auto;
  }
  
  .campus-scene {
    width: 240px;
    height: 300px;
  }
  
  .campus-modules {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
    max-width: 100%;
  }
  
  .campus-module-card:nth-child(1) {
    grid-row: span 1;
  }
}

@media (max-width: 640px) {
  .campus-modules {
    grid-template-columns: 1fr;
  }
}

/* ==================== 拍照搜题页面样式 ==================== */
/* 抵消 .main-content 的 padding-top:20px，使页面顶部到全局导航实际间距 = 0 */
.page-content[data-page="photo-search"] { margin-top: -20px; padding-bottom: 0 !important; }
/* 强制拍照搜题页 flex 满屏布局，避免内容溢出让底部导航被挤出视口 */
.page-content[data-page="photo-search"].active { display: flex !important; flex-direction: column !important; height: 100% !important; overflow: hidden !important; }
.photo-search-container { margin-top: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; padding-left: 48px !important; flex: 1 1 auto !important; min-height: 0 !important; display: flex !important; flex-direction: column !important; overflow: hidden !important; }
.photo-search-container .photo-search-header { margin-top: 0 !important; padding-top: 0 !important; flex-shrink: 0 !important; }
/* 拍照搜题页 · 返回按钮距离左侧 48px（容器已 padding-left:48px，返回按钮回到起点） */
.photo-search-container .photo-search-header .back-btn { margin-left: 0 !important; }
.aiexp-container .ai-qa-header .back-btn { margin-left: 0 !important; }
.photo-search-page {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
  overflow-y: auto;
}

.photo-search-content {
  width: 100%;
  max-width: 800px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.photo-search-header {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 24px;
  width: 100%;
}

.photo-search-back {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.photo-search-back:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: scale(1.05);
}

.photo-search-title {
  font-size: 24px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.photo-search-subtitle {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
  margin-top: 4px;
}

/* 拍照/上传区域 */
.photo-capture-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 400px;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  border-radius: 24px;
  border: 2px dashed rgba(255, 255, 255, 0.3);
  padding: 40px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.photo-capture-area:hover {
  border-color: rgba(102, 126, 234, 0.6);
  background: rgba(255, 255, 255, 0.08);
}

.photo-capture-area.has-image {
  border-style: solid;
  border-color: rgba(102, 126, 234, 0.4);
  padding: 20px;
}

/* 拍照搜题主内容区域 - 左右布局 (flex:1 撑满外层弹性容器，不再依赖 vh 计算) */
.photo-search-main {
  display: flex;
  gap: 24px;
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  padding: 0 20px 12px;
  box-sizing: border-box;
  overflow: hidden;
}

/* 左侧相机面板 */
.camera-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  justify-content: flex-start;
  padding-top: 20px;
}

/* 右侧结果面板 */
.result-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  overflow: hidden;
  min-height: 0;
  align-self: flex-start;
  height: calc(100% - 50px);
  max-height: calc(100% - 50px);
}

/* 结果空状态 */
.result-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  color: rgba(255, 255, 255, 0.4);
}

.result-empty svg {
  opacity: 0.3;
}

.result-empty p {
  font-size: 16px;
}

/* 拍照区域 */
.camera-section {
  flex: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

/* 取景框 - 适配左侧面板 */
.camera-viewfinder {
  width: 100%;
  max-width: 416px;
  aspect-ratio: 4/3;
  margin: 0 auto;
  border-radius: 20px;
  overflow: hidden;
  position: relative;
  background: #000;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
  border: 2px solid rgba(255, 255, 255, 0.15);
}

.viewfinder-frame {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 2;
}

.frame-corner {
  position: absolute;
  width: 40px;
  height: 40px;
  border: 3px solid rgba(102, 126, 234, 0.8);
}

.frame-corner.tl { top: 20px; left: 20px; border-right: none; border-bottom: none; border-radius: 8px 0 0 0; }
.frame-corner.tr { top: 20px; right: 20px; border-left: none; border-bottom: none; border-radius: 0 8px 0 0; }
.frame-corner.bl { bottom: 20px; left: 20px; border-right: none; border-top: none; border-radius: 0 0 0 8px; }
.frame-corner.br { bottom: 20px; right: 20px; border-left: none; border-top: none; border-radius: 0 0 8px 0; }

.scan-line {
  position: absolute;
  top: 0;
  left: 20px;
  right: 20px;
  height: 2px;
  background: linear-gradient(90deg, transparent, #667eea, transparent);
  animation: scan 2s ease-in-out infinite;
  box-shadow: 0 0 10px #667eea;
}

@keyframes scan {
  0%, 100% { top: 20px; }
  50% { top: calc(100% - 20px); }
}

/* 相机中心提示 */
.camera-center-hint {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
  pointer-events: none;
}

.camera-center-hint svg {
  opacity: 0.7;
  filter: drop-shadow(0 2px 8px rgba(102, 126, 234, 0.5));
}

.camera-center-hint p {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 1px;
  margin: 0;
}

.camera-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

/* 相机预览 */
.camera-preview {
  width: 100%;
  max-width: 800px;
  height: 600px;
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  background: #000;
  display: none;
}

.camera-preview.active {
  display: block;
}

.camera-preview video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.camera-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
}

.camera-corner {
  position: absolute;
  width: 30px;
  height: 30px;
  border: 3px solid #667eea;
}

.camera-corner.tl { top: 20px; left: 20px; border-right: none; border-bottom: none; }
.camera-corner.tr { top: 20px; right: 20px; border-left: none; border-bottom: none; }
.camera-corner.bl { bottom: 20px; left: 20px; border-right: none; border-top: none; }
.camera-corner.br { bottom: 20px; right: 20px; border-left: none; border-top: none; }

/* 图片预览 */
.image-preview {
  width: 100%;
  max-width: 500px;
  max-height: 400px;
  border-radius: 16px;
  overflow: hidden;
  display: none;
}

.image-preview.active {
  display: block;
}

.image-preview img {
  width: 100%;
  height: auto;
  max-height: 400px;
  object-fit: contain;
  border-radius: 16px;
}

/* 占位内容 */
.capture-placeholder {
  text-align: center;
  color: rgba(255, 255, 255, 0.7);
}

.capture-placeholder svg {
  width: 80px;
  height: 80px;
  margin-bottom: 20px;
  opacity: 0.6;
}

.capture-placeholder p {
  font-size: 16px;
  margin-bottom: 8px;
}

.capture-placeholder small {
  font-size: 13px;
  opacity: 0.6;
}

/* 操作按钮区域 */
.photo-actions {
  display: flex;
  gap: 16px;
  margin-top: 24px;
  flex-wrap: wrap;
  justify-content: center;
}

.photo-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  border-radius: 14px;
  border: none;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.photo-btn svg {
  width: 22px;
  height: 22px;
}

.photo-btn.primary {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #fff;
  box-shadow: 0 8px 24px rgba(102, 126, 234, 0.4);
}

.photo-btn.primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(102, 126, 234, 0.5);
}

.photo-btn.secondary {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.photo-btn.secondary:hover {
  background: rgba(255, 255, 255, 0.25);
  transform: translateY(-3px);
}

.photo-btn.danger {
  background: rgba(239, 68, 68, 0.2);
  color: #fca5a5;
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.photo-btn.danger:hover {
  background: rgba(239, 68, 68, 0.3);
  transform: translateY(-3px);
}

.photo-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none !important;
}

/* 结果区域 */
.photo-result {
  margin-top: 24px;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(10px);
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 24px;
  display: none;
}

.photo-result.active {
  display: block;
  animation: fadeInUp 0.5s ease;
}

.result-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.result-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.result-icon svg {
  width: 22px;
  height: 22px;
  color: #fff;
}

.result-title {
  font-size: 18px;
  font-weight: 600;
  color: #fff;
}

.result-content {
  color: rgba(255, 255, 255, 0.9);
  font-size: 15px;
  line-height: 1.8;
}

.result-content h4 {
  color: #667eea;
  font-size: 16px;
  margin: 16px 0 8px 0;
}

.result-content h4:first-child {
  margin-top: 0;
}

.result-content p {
  margin: 8px 0;
}

.result-content ul {
  margin: 8px 0;
  padding-left: 20px;
}

.result-content li {
  margin: 4px 0;
}

/* 加载动画 */
.loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(5px);
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 20px;
  border-radius: 24px;
  z-index: 10;
}

.loading-overlay.active {
  display: flex;
}

.loading-spinner {
  width: 60px;
  height: 60px;
  border: 4px solid rgba(255, 255, 255, 0.2);
  border-top-color: #667eea;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.loading-text {
  color: #fff;
  font-size: 16px;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

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

/* Camera actions buttons */
.camera-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  margin-top: 20px;
}

.action-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 12px;
}

.action-btn:hover {
  color: #fff;
  transform: scale(1.1);
}

.capture-btn {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  border: 3px solid rgba(255, 255, 255, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.capture-btn:hover {
  background: rgba(255, 255, 255, 0.3);
  border-color: #fff;
}

.capture-circle {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: #fff;
  transition: all 0.2s ease;
}

.capture-btn:active .capture-circle {
  transform: scale(0.9);
  background: #667eea;
}

/* Start search button */
.start-search-btn {
  display: block;
  width: 100%;
  max-width: 300px;
  margin: 20px auto 0;
  padding: 14px 28px;
  border-radius: 14px;
  border: none;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(102, 126, 234, 0.4);
  transition: all 0.3s ease;
}

.start-search-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(102, 126, 234, 0.5);
}

/* Captured image */
.captured-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Camera placeholder */
.camera-placeholder {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.5);
  gap: 12px;
  z-index: 2;
  background: rgba(0, 0, 0, 0.5);
}

.camera-placeholder p {
  font-size: 14px;
  margin: 0;
}

/* Camera center hint */
.camera-center-hint {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.6);
  z-index: 3;
  pointer-events: none;
}

.camera-center-hint p {
  font-size: 13px;
  margin: 0;
  white-space: nowrap;
}

/* Result section */
.result-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: transparent;
  border-radius: 0;
  border: none;
  padding: 20px;
  overflow-y: auto;
  min-height: 0;
  height: 100%;
}

.result-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.result-header h3 {
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  margin: 0;
}

.clear-btn {
  padding: 8px 16px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.8);
  font-size: 13px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.clear-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}

.result-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: #667eea;
  margin-bottom: 8px;
}

.result-text {
  color: rgba(255, 255, 255, 0.9);
  font-size: 14px;
  line-height: 1.8;
}

.result-question, .result-answer {
  margin-bottom: 16px;
}

/* Loading section */
.loading-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 40px;
  color: rgba(255, 255, 255, 0.8);
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(255, 255, 255, 0.2);
  border-top-color: #667eea;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

/* 响应式 */
@media (max-width: 1024px) {
  .photo-search-main {
    flex-direction: column;
    height: auto;
  }
  
  .camera-panel {
    flex: none;
    max-width: 100%;
  }
  
  .camera-viewfinder {
    min-height: 250px;
    max-height: 40vh;
  }
  
  .result-panel {
    min-height: 300px;
  }
}

@media (max-width: 768px) {
  .photo-search-page {
    padding: 15px;
  }
  
  .photo-capture-area {
    min-height: 300px;
    padding: 20px;
  }
  
  .camera-preview {
    height: 250px;
  }
  
  .photo-actions {
    flex-direction: column;
  }
  
  .photo-btn {
    width: 100%;
    justify-content: center;
  }
  
  .camera-viewfinder {
    min-height: 200px;
  }
}

/* ===== AI问答页面样式 ===== */
.ai-qa-page {
  min-height: calc(100vh - 140px);
  padding: 100px 100px;
  margin-top: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
}

.ai-qa-header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
  margin-bottom: 10px;
  padding: 8px 0;
}

.ai-qa-title-text {
  font-size: 28px;
  font-weight: 700;
  background: linear-gradient(135deg, #667eea, #764ba2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 0;
  letter-spacing: 1px;
}

/* ============ AI 问答 - 左右双面板 ============ */
.aiqa-main {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 24px;
  margin-top: 20px;
  min-height: 580px;
}

.aiqa-input-panel,
.aiqa-output-panel {
  position: relative;
  background: linear-gradient(160deg, rgba(30, 36, 70, 0.85), rgba(20, 25, 50, 0.95));
  border: 1px solid rgba(102, 126, 234, 0.22);
  border-radius: 24px;
  padding: 26px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  backdrop-filter: blur(20px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.aiqa-input-panel::before,
.aiqa-output-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 0% 0%, rgba(102, 126, 234, 0.12), transparent 50%),
    radial-gradient(circle at 100% 100%, rgba(118, 75, 162, 0.10), transparent 50%);
  pointer-events: none;
}

.aiqa-output-panel::before {
  background:
    radial-gradient(circle at 100% 0%, rgba(79, 172, 254, 0.14), transparent 50%),
    radial-gradient(circle at 0% 100%, rgba(0, 242, 254, 0.10), transparent 50%);
}

.aiqa-panel-deco {
  position: absolute;
  top: -60px;
  right: -60px;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(102, 126, 234, 0.30), transparent 70%);
  filter: blur(40px);
  pointer-events: none;
  animation: aiqa-deco-float 8s ease-in-out infinite;
}

.aiqa-panel-deco-right {
  background: radial-gradient(circle, rgba(0, 242, 254, 0.28), transparent 70%);
  top: auto;
  bottom: -60px;
  right: auto;
  left: -60px;
  animation-delay: -3s;
}

@keyframes aiqa-deco-float {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(20px, 30px) scale(1.15); }
}

.aiqa-panel-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  position: relative;
  z-index: 1;
}

.aiqa-panel-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea, #764ba2);
  box-shadow: 0 0 12px rgba(102, 126, 234, 0.8);
  animation: aiqa-dot-pulse 1.8s ease-in-out infinite;
}

.aiqa-panel-dot-right {
  background: linear-gradient(135deg, #4facfe, #00f2fe);
  box-shadow: 0 0 12px rgba(0, 242, 254, 0.8);
}

@keyframes aiqa-dot-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.4); opacity: 0.6; }
}

.aiqa-panel-label {
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 1px;
}

.aiqa-panel-tag {
  margin-left: auto;
  padding: 3px 10px;
  font-size: 10px;
  font-weight: 700;
  color: rgba(102, 126, 234, 0.95);
  background: rgba(102, 126, 234, 0.12);
  border: 1px solid rgba(102, 126, 234, 0.4);
  border-radius: 6px;
  letter-spacing: 1.5px;
}

.aiqa-status-pill {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.7);
  letter-spacing: 0.5px;
}

.aiqa-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  transition: all 0.3s;
}

.aiqa-status-pill.is-loading .aiqa-status-dot {
  background: #4facfe;
  box-shadow: 0 0 8px #4facfe;
  animation: aiqa-dot-pulse 1s ease-in-out infinite;
}

.aiqa-status-pill.is-loading {
  color: #4facfe;
  border-color: rgba(79, 172, 254, 0.4);
}

.aiqa-status-pill.is-done .aiqa-status-dot {
  background: #43e97b;
  box-shadow: 0 0 8px #43e97b;
}

.aiqa-status-pill.is-done {
  color: #43e97b;
  border-color: rgba(67, 233, 123, 0.4);
}

.aiqa-status-pill.is-error .aiqa-status-dot {
  background: #ff6b6b;
  box-shadow: 0 0 8px #ff6b6b;
}

.aiqa-status-pill.is-error {
  color: #ff6b6b;
  border-color: rgba(255, 107, 107, 0.4);
}

/* 输入区 */
.aiqa-input-wrap {
  position: relative;
  flex: 1;
  min-height: 280px;
  display: flex;
  flex-direction: column;
}

.aiqa-textarea {
  flex: 1;
  width: 100%;
  min-height: 240px;
  padding: 18px 18px 36px 18px;
  background: rgba(15, 20, 40, 0.6);
  border: 1px solid rgba(102, 126, 234, 0.25);
  border-radius: 16px;
  color: #fff;
  font-size: 15px;
  line-height: 1.7;
  font-family: inherit;
  resize: none;
  outline: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.3);
}

.aiqa-textarea::placeholder {
  color: rgba(255, 255, 255, 0.35);
  white-space: pre-line;
  line-height: 1.9;
}

.aiqa-textarea:focus {
  border-color: rgba(102, 126, 234, 0.8);
  background: rgba(15, 20, 40, 0.85);
  box-shadow:
    inset 0 2px 8px rgba(0, 0, 0, 0.3),
    0 0 0 4px rgba(102, 126, 234, 0.15),
    0 0 30px rgba(102, 126, 234, 0.25);
}

.aiqa-input-counter {
  position: absolute;
  bottom: 12px;
  right: 16px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

.aiqa-input-counter.is-near {
  color: #fea140;
}

.aiqa-input-counter.is-over {
  color: #ff6b6b;
}

/* 快捷示例 */
.aiqa-quick-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  position: relative;
  z-index: 1;
}

.aiqa-chip-label {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  margin-right: 2px;
}

.aiqa-chip {
  padding: 6px 12px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(102, 126, 234, 0.10);
  border: 1px solid rgba(102, 126, 234, 0.3);
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.25s ease;
  white-space: nowrap;
}

.aiqa-chip:hover {
  background: rgba(102, 126, 234, 0.22);
  border-color: rgba(102, 126, 234, 0.7);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.25);
}

.aiqa-chip:active {
  transform: scale(0.96);
}

/* 操作按钮 */
.aiqa-actions {
  display: flex;
  gap: 12px;
  margin-top: 18px;
  position: relative;
  z-index: 1;
}

.aiqa-btn-clear,
.aiqa-btn-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  font-family: inherit;
}

.aiqa-btn-clear {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.aiqa-btn-clear:hover {
  background: rgba(255, 107, 107, 0.15);
  border-color: rgba(255, 107, 107, 0.4);
  color: #ff8e8e;
}

.aiqa-btn-submit {
  flex: 1;
  position: relative;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #fff;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(102, 126, 234, 0.4);
  letter-spacing: 1px;
}

.aiqa-btn-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(102, 126, 234, 0.55);
}

.aiqa-btn-submit:active {
  transform: scale(0.98);
}

.aiqa-btn-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.aiqa-btn-glow {
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  animation: aiqa-btn-shine 3s ease-in-out infinite;
}

@keyframes aiqa-btn-shine {
  0%, 100% { left: -100%; }
  50% { left: 110%; }
}

.aiqa-input-tips {
  margin-top: 14px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  background: rgba(102, 126, 234, 0.06);
  border-left: 2px solid rgba(102, 126, 234, 0.4);
  border-radius: 4px 12px 12px 4px;
  position: relative;
  z-index: 1;
}

.aiqa-tip-icon {
  font-size: 14px;
}

/* 输出面板 */
.aiqa-output-wrap {
  flex: 1;
  min-height: 460px;
  max-height: 620px;
  overflow-y: auto;
  position: relative;
  z-index: 1;
}

.aiqa-output-wrap::-webkit-scrollbar { width: 6px; }
.aiqa-output-wrap::-webkit-scrollbar-thumb { background: rgba(102, 126, 234, 0.4); border-radius: 3px; }

/* 空状态 */
.aiqa-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 420px;
  padding: 30px;
  text-align: center;
}

.aiqa-empty-orbit {
  position: relative;
  width: 180px;
  height: 180px;
  margin-bottom: 24px;
}

.aiqa-empty-orb {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60px;
  height: 60px;
  margin: -30px 0 0 -30px;
  background: linear-gradient(135deg, #4facfe, #00f2fe);
  border-radius: 50%;
  box-shadow: 0 0 40px rgba(79, 172, 254, 0.7), inset 0 0 20px rgba(255, 255, 255, 0.3);
  animation: aiqa-orb-breathe 2.5s ease-in-out infinite;
}

@keyframes aiqa-orb-breathe {
  0%, 100% { transform: scale(1); box-shadow: 0 0 40px rgba(79, 172, 254, 0.7), inset 0 0 20px rgba(255, 255, 255, 0.3); }
  50% { transform: scale(1.15); box-shadow: 0 0 60px rgba(79, 172, 254, 0.95), inset 0 0 30px rgba(255, 255, 255, 0.5); }
}

.aiqa-empty-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  border: 1px dashed rgba(79, 172, 254, 0.4);
  animation: aiqa-ring-spin 12s linear infinite;
}

.aiqa-empty-ring-1 { width: 100px; height: 100px; margin: -50px 0 0 -50px; border-color: rgba(102, 126, 234, 0.5); }
.aiqa-empty-ring-2 { width: 140px; height: 140px; margin: -70px 0 0 -70px; border-color: rgba(118, 75, 162, 0.4); animation-direction: reverse; animation-duration: 16s; }
.aiqa-empty-ring-3 { width: 180px; height: 180px; margin: -90px 0 0 -90px; border-color: rgba(0, 242, 254, 0.25); animation-duration: 20s; }

@keyframes aiqa-ring-spin {
  to { transform: rotate(360deg); }
}

.aiqa-empty-title {
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 10px;
  letter-spacing: 1px;
}

.aiqa-empty-desc {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.55);
  margin: 0 0 24px;
  line-height: 1.8;
}

.aiqa-empty-features {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
}

.aiqa-feature-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 14px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.75);
  background: rgba(79, 172, 254, 0.08);
  border: 1px solid rgba(79, 172, 254, 0.25);
  border-radius: 999px;
}

.aiqa-feature-item span {
  font-size: 14px;
}

/* 回答区 */
.aiqa-answer {
  padding: 4px 4px 12px;
}

.aiqa-answer-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.aiqa-ai-avatar {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: linear-gradient(135deg, #4facfe, #00f2fe);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 20px rgba(79, 172, 254, 0.45);
  position: relative;
}

.aiqa-ai-avatar::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 16px;
  background: linear-gradient(135deg, #4facfe, #00f2fe);
  z-index: -1;
  opacity: 0.4;
  filter: blur(8px);
}

.aiqa-answer-name {
  color: #fff;
  font-size: 15px;
  font-weight: 600;
}

.aiqa-answer-sub {
  color: rgba(255, 255, 255, 0.55);
  font-size: 12px;
  margin-top: 2px;
}

.aiqa-answer-body {
  color: rgba(255, 255, 255, 0.92);
  font-size: 15px;
  line-height: 1.85;
  white-space: pre-wrap;
  word-break: break-word;
  padding: 18px 20px;
  background: rgba(79, 172, 254, 0.05);
  border-left: 3px solid rgba(79, 172, 254, 0.5);
  border-radius: 4px 14px 14px 4px;
  min-height: 60px;
  position: relative;
}

.aiqa-answer-body::after {
  content: '▊';
  display: inline-block;
  color: #4facfe;
  animation: aiqa-cursor 1s steps(2) infinite;
  margin-left: 2px;
}

.aiqa-answer.is-done .aiqa-answer-body::after {
  display: none;
}

@keyframes aiqa-cursor {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

.aiqa-answer-actions {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}

.aiqa-act-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 14px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.75);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.25s;
  font-family: inherit;
}

.aiqa-act-btn:hover {
  background: rgba(79, 172, 254, 0.15);
  border-color: rgba(79, 172, 254, 0.4);
  color: #4facfe;
}

/* 下载 PPT 按钮突出样式 */
.aiqa-act-btn.aiqa-act-btn-ppt {
  color: #fff;
  background: linear-gradient(135deg, #fa709a 0%, #ee5a6f 100%);
  border-color: rgba(250, 112, 154, 0.6);
  font-weight: 600;
  box-shadow: 0 4px 14px rgba(250, 112, 154, 0.35);
}
.aiqa-act-btn.aiqa-act-btn-ppt:hover {
  color: #fff;
  background: linear-gradient(135deg, #ff8bb0 0%, #f8697e 100%);
  border-color: rgba(250, 112, 154, 0.9);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(250, 112, 154, 0.5);
}
.aiqa-act-btn.aiqa-act-btn-ppt:active { transform: scale(0.97); }
.aiqa-act-btn.aiqa-act-btn-ppt:disabled {
  opacity: 0.7;
  cursor: wait;
  transform: none;
}

/* 响应式 */
@media (max-width: 1100px) {
  .aiqa-main {
    grid-template-columns: 1fr;
  }
  .aiqa-output-wrap {
    min-height: 360px;
  }
}

@media (max-width: 600px) {
  .aiqa-input-panel,
  .aiqa-output-panel {
    padding: 18px;
    border-radius: 18px;
  }
  .aiqa-actions {
    flex-direction: column;
  }
  .aiqa-btn-clear,
  .aiqa-btn-submit {
    width: 100%;
  }
}

/* 问答展示框 */
.ai-qa-display {
  width: 100%;
  max-width: 700px;
  min-height: 400px;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(102, 126, 234, 0.3);
  border-radius: 20px;
  padding: 24px;
  position: relative;
  overflow: hidden;
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* 装饰边框 */
.ai-qa-display::before,
.ai-qa-display::after {
  content: '';
  position: absolute;
  width: 40px;
  height: 40px;
  border: 2px solid rgba(102, 126, 234, 0.6);
}

.ai-qa-display::before {
  top: 12px;
  left: 12px;
  border-right: none;
  border-bottom: none;
  border-radius: 8px 0 0 0;
}

.ai-qa-display::after {
  bottom: 12px;
  right: 12px;
  border-left: none;
  border-top: none;
  border-radius: 0 0 8px 0;
}

.ai-qa-content {
  position: relative;
  z-index: 1;
  min-height: 350px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* 空状态 */
.ai-qa-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 350px;
  gap: 16px;
  color: rgba(255, 255, 255, 0.5);
}

.ai-qa-empty svg {
  opacity: 0.5;
  filter: drop-shadow(0 4px 12px rgba(102, 126, 234, 0.3));
}

.ai-qa-empty p {
  font-size: 16px;
  margin: 0;
}

/* 加载状态 */
.ai-qa-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 350px;
  gap: 16px;
}

.ai-qa-spinner {
  width: 50px;
  height: 50px;
  border: 3px solid rgba(102, 126, 234, 0.2);
  border-top-color: #667eea;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.ai-qa-loading p {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
}

/* 问答结果 */
.ai-qa-result {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ai-qa-question {
  background: rgba(102, 126, 234, 0.15);
  border: 1px solid rgba(102, 126, 234, 0.3);
  border-radius: 12px;
  padding: 16px;
}

.ai-qa-question-label {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.ai-qa-question-text {
  font-size: 16px;
  color: #fff;
  line-height: 1.6;
  margin: 0;
}

.ai-qa-answer {
  background: rgba(67, 233, 123, 0.1);
  border: 1px solid rgba(67, 233, 123, 0.3);
  border-radius: 12px;
  padding: 16px;
}

.ai-qa-answer-label {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.ai-qa-answer-text {
  font-size: 15px;
  color: #fff;
  line-height: 1.8;
  margin: 0;
  white-space: pre-wrap;
}

/* 输入区域 */
.ai-qa-input-area {
  width: 100%;
  max-width: 700px;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(102, 126, 234, 0.3);
  border-radius: 16px;
  padding: 16px;
  display: flex;
  gap: 12px;
  align-items: center;
}

.ai-qa-input {
  flex: 1;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  padding: 14px 18px;
  font-size: 16px;
  color: #fff;
  outline: none;
  transition: all 0.3s ease;
}

.ai-qa-input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.ai-qa-input:focus {
  border-color: rgba(102, 126, 234, 0.6);
  background: rgba(255, 255, 255, 0.15);
  box-shadow: 0 0 20px rgba(102, 126, 234, 0.2);
}

.ai-qa-voice-btn {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea, #764ba2);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
}

.ai-qa-voice-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6);
}

.ai-qa-voice-btn.recording {
  background: linear-gradient(135deg, #ff6b6b, #ee5a6f);
  animation: pulse-recording 1s ease-in-out infinite;
}

.ai-qa-send-btn {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: linear-gradient(135deg, #43e97b, #38f9d7);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(67, 233, 123, 0.4);
}

.ai-qa-send-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 20px rgba(67, 233, 123, 0.6);
}

.ai-qa-send-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

@keyframes pulse-recording {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}

/* 响应式 */
@media (max-width: 768px) {
  .ai-qa-display {
    min-height: 300px;
  }
  
  .ai-qa-content {
    min-height: 250px;
  }
  
  .ai-qa-empty,
  .ai-qa-loading {
    min-height: 250px;
  }
  
  .ai-qa-input-area {
    flex-wrap: wrap;
  }
  
  .ai-qa-input {
    width: 100%;
    order: 1;
  }
  
  .ai-qa-voice-btn,
  .ai-qa-send-btn {
    order: 2;
  }
}

/* ============ 论文写作页（复用 .aiqa-* 主体，新增表单专属样式） ============ */
.paperw-form { display:flex; flex-direction:column; gap:14px; padding:18px 22px 8px; flex:1; overflow-y:auto; }
.paperw-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.paperw-field { display:flex; flex-direction:column; gap:7px; }
.paperw-label { font-size:12.5px; color:rgba(255,255,255,0.82); font-weight:600; letter-spacing:.3px; display:flex; align-items:center; gap:6px; }
.paperw-req { color:#ff9aa2; font-size:14px; line-height:1; }
.paperw-hint { color:rgba(255,255,255,0.4); font-weight:400; font-size:11.5px; }
.paperw-input,
.paperw-textarea {
  width:100%; padding:11px 14px;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.10);
  border-radius:10px; color:#fff; font-size:13.5px;
  font-family:inherit; outline:none;
  transition:all .25s cubic-bezier(.4,0,.2,1);
  box-sizing:border-box;
}
.paperw-input::placeholder,
.paperw-textarea::placeholder { color:rgba(255,255,255,0.32); }
.paperw-input:focus,
.paperw-textarea:focus {
  background:rgba(102,126,234,0.10);
  border-color:rgba(102,126,234,0.55);
  box-shadow:0 0 0 4px rgba(102,126,234,0.12);
}
.paperw-input { height:42px; }
.paperw-textarea { min-height:78px; resize:vertical; line-height:1.55; }
.paperw-textarea-sm { min-height:54px; }
select.paperw-input {
  appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M2 4l4 4 4-4' fill='none' stroke='%23ffffffaa' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat;
  background-position:right 12px center;
  background-size:11px;
  padding-right:32px;
  cursor:pointer;
}
select.paperw-input option { background:#1a1f3a; color:#fff; }

.paperw-tips {
  margin-top:6px; padding:12px 14px;
  background:linear-gradient(135deg, rgba(102,126,234,0.10), rgba(118,75,162,0.06));
  border:1px solid rgba(102,126,234,0.22);
  border-radius:10px;
}
.paperw-tips-title { display:flex; align-items:center; gap:6px; color:#a5b4fc; font-size:12px; font-weight:600; margin-bottom:4px; }
.paperw-tips-body { color:rgba(255,255,255,0.6); font-size:11.8px; line-height:1.55; }

/* 写作结果正文：段落感更强 */
.paperw-answer-body {
  white-space:pre-wrap;
  line-height:1.85;
  font-size:14.5px;
  letter-spacing:.3px;
  text-indent:0;
}
.paperw-container .aiqa-output-wrap { padding-bottom:8px; }

/* 论文写作页色调：左侧偏蓝紫，右侧偏青绿 */
.paperw-container .aiqa-panel-dot-green { background:#4ade80; box-shadow:0 0 12px rgba(74,222,128,.7); }
.paperw-container .aiqa-panel-tag-green { color:#4ade80; background:rgba(74,222,128,.12); border-color:rgba(74,222,128,.3); }

/* ============ 论文写作页 · 重置按钮美化 v128 ============ */
.paperw-container .paperw-actions {
  display: flex;
  gap: 14px;
  padding: 14px 20px 16px;
  margin-top: 6px;
  flex-shrink: 0;
  background: linear-gradient(180deg, rgba(20,25,50,0) 0%, rgba(20,25,50,0.55) 45%, rgba(20,25,50,0.85) 100%);
  border-top: 1px solid rgba(255,255,255,0.06);
  backdrop-filter: blur(10px);
  align-items: center;
}
.paperw-container .paperw-actions .aiqa-btn-submit { flex: 1; }
.paperw-container .paperw-reset-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 118px;
  padding: 12px 22px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1px;
  color: rgba(255,255,255,0.88);
  background: linear-gradient(135deg, rgba(255,255,255,0.06) 0%, rgba(74,222,128,0.08) 100%);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 12px;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 14px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.08);
  backdrop-filter: blur(8px);
  -webkit-tap-highlight-color: transparent;
}
.paperw-container .paperw-reset-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 12px;
  padding: 1px;
  background: linear-gradient(135deg, rgba(74,222,128,0.55), rgba(56,249,215,0.35));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}
.paperw-container .paperw-reset-btn .paperw-reset-icon {
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  color: rgba(255,255,255,0.78);
}
.paperw-container .paperw-reset-btn:hover {
  color: #b6f5d0;
  background: linear-gradient(135deg, rgba(74,222,128,0.16) 0%, rgba(56,249,215,0.12) 100%);
  border-color: rgba(74,222,128,0.5);
  transform: translateY(-2px);
  box-shadow:
    0 10px 26px rgba(74,222,128,0.28),
    0 0 0 1px rgba(74,222,128,0.28) inset,
    inset 0 1px 0 rgba(255,255,255,0.14);
}
.paperw-container .paperw-reset-btn:hover::before { opacity: 1; }
.paperw-container .paperw-reset-btn:hover .paperw-reset-icon {
  transform: rotate(-180deg);
  color: #d5ffe6;
}
.paperw-container .paperw-reset-btn:active {
  transform: scale(0.96) translateY(0);
  box-shadow: 0 4px 12px rgba(74,222,128,0.22);
}
.paperw-container .paperw-reset-btn:focus-visible {
  outline: 2px solid rgba(74,222,128,0.6);
  outline-offset: 2px;
}
@media (max-width: 640px) {
  .paperw-container .paperw-actions { gap: 10px; padding: 12px 14px 14px; }
  .paperw-container .paperw-reset-btn { min-width: 92px; padding: 11px 16px; font-size: 13px; letter-spacing: 0.5px; }
}


@media (max-width: 700px) {
  .paperw-row { grid-template-columns:1fr; }
  .paperw-form { padding:14px 16px 6px; }
}

/* 论文写作页整体缩小 20% */
.paperw-container { zoom: 0.8; -moz-transform: scale(0.8); -moz-transform-origin: top center; margin-top:-50px !important; }

/* 论文写作页容器样式 */
.ai-qa-container.paperw-container { width:135%; max-width:1880px; margin:0 auto; padding:20px 24px; }
.paperw-container .ai-qa-header { display:flex; align-items:center; gap:12px; margin-bottom:16px; padding:0; }
.paperw-container .ai-qa-header .back-btn { display:inline-flex; align-items:center; gap:6px; line-height:1; padding:8px 14px; }
.paperw-container .ai-qa-header .back-btn svg { display:block; }
.paperw-container .aiqa-main { display:grid; grid-template-columns:1fr 1.1fr; gap:16px; min-height:560px; }
@media (max-width:1100px) { .paperw-container .aiqa-main { grid-template-columns:1fr; } }

/* AI 问答页整体缩小 5% */
/* AI 问答页内边距：上下左右 100px */
[data-page="ai-qa"] { padding: 100px !important; box-sizing: border-box; }
#ai-qa-page .ai-qa-container { zoom: 0.95; -moz-transform: scale(0.95); -moz-transform-origin: top center; }

/* ============ 照片调整页 ============ */
.ai-qa-container.photoadj-container { width:116%; max-width:1700px; margin:0 auto; margin-left:-8%; padding:0 20px 20px; }
.photoadj-container .ai-qa-header { display:flex; align-items:center; gap:12px; margin-bottom:16px; padding:0; }
.photoadj-container .aiqa-main { display:grid; grid-template-columns:1fr 1.1fr; gap:24px; min-height:560px; }

.photoadj-source-wrap {
  padding:18px 22px 8px; flex:1; display:flex; flex-direction:column; min-height:0;
}
.photoadj-preview {
  position:relative;
  flex:1; min-height:360px;
  background:radial-gradient(ellipse at center, rgba(102,126,234,0.08), transparent 70%), rgba(0,0,0,0.25);
  border:1.5px dashed rgba(102,126,234,0.3);
  border-radius:14px;
  overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.photoadj-preview-empty {
  text-align:center; color:rgba(255,255,255,0.5);
  display:flex; flex-direction:column; align-items:center; gap:8px;
}
.photoadj-preview-empty p { margin:6px 0 0; font-size:14px; color:rgba(255,255,255,0.7); font-weight:500; }
.photoadj-preview-empty small { font-size:11.5px; color:rgba(255,255,255,0.4); }
.photoadj-preview video,
.photoadj-preview img {
  width:100%; height:100%; object-fit:contain; display:block;
}
.photoadj-source-actions {
  display:flex; gap:10px; padding:14px 22px 18px;
}
.photoadj-btn-source {
  flex:1; padding:11px 14px;
  background:rgba(102,126,234,0.10);
  border:1px solid rgba(102,126,234,0.28);
  border-radius:10px; color:#fff;
  font-size:13px; font-weight:600; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  transition:all .25s cubic-bezier(.4,0,.2,1);
}
.photoadj-btn-source:hover {
  background:rgba(102,126,234,0.22);
  border-color:rgba(102,126,234,0.55);
  transform:translateY(-1px);
  box-shadow:0 4px 16px rgba(102,126,234,0.25);
}

/* 右侧 */
.photoadj-color-row {
  display:flex; align-items:center; gap:14px; padding:14px 22px 12px;
  border-bottom:1px solid rgba(255,255,255,0.06);
}
.photoadj-color-label { font-size:12.5px; color:rgba(255,255,255,0.75); font-weight:600; white-space:nowrap; }
.photoadj-colors { display:flex; gap:10px; flex:1; }
.photoadj-color {
  flex:1; cursor:pointer;
  display:flex; align-items:center; gap:8px;
  padding:9px 12px;
  background:rgba(255,255,255,0.03);
  border:1.5px solid rgba(255,255,255,0.1);
  border-radius:10px;
  transition:all .25s cubic-bezier(.4,0,.2,1);
  position:relative;
}
.photoadj-color input { position:absolute; opacity:0; pointer-events:none; }
.photoadj-color-swatch {
  width:22px; height:22px; border-radius:6px;
  border:2px solid rgba(255,255,255,0.4);
  flex-shrink:0;
  box-shadow:0 2px 8px rgba(0,0,0,0.3);
}
.photoadj-color-blue .photoadj-color-swatch { background:#3D85C6; }
.photoadj-color-white .photoadj-color-swatch { background:#ffffff; }
.photoadj-color-red .photoadj-color-swatch { background:#D9342B; }
.photoadj-color-name { font-size:12.5px; color:rgba(255,255,255,0.8); font-weight:600; }
.photoadj-color:hover { background:rgba(255,255,255,0.07); transform:translateY(-1px); }
.photoadj-color.is-checked {
  background:linear-gradient(135deg, rgba(102,126,234,0.18), rgba(118,75,162,0.12));
  border-color:rgba(102,126,234,0.7);
  box-shadow:0 4px 18px rgba(102,126,234,0.25);
}
.photoadj-color.is-checked .photoadj-color-name { color:#fff; }

.photoadj-result-wrap {
  flex:1; min-height:320px;
  position:relative;
  margin:14px 22px 0;
  background:rgba(0,0,0,0.18);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:14px;
  overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.photoadj-result { width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; padding:14px; }
.photoadj-result-img-box {
  flex:1; min-height:0; width:100%;
  display:flex; align-items:center; justify-content:center;
  border-radius:10px; overflow:hidden;
  background:#000;
}
.photoadj-result-img-box img { max-width:100%; max-height:100%; object-fit:contain; display:block; }
.photoadj-result-meta { font-size:12px; color:rgba(255,255,255,0.6); }

.photoadj-loading {
  display:flex; flex-direction:column; align-items:center; gap:14px;
  color:rgba(255,255,255,0.85);
}
.photoadj-loading p { margin:0; font-size:14px; font-weight:500; }
.photoadj-loading small { font-size:11.5px; color:rgba(255,255,255,0.5); }
.photoadj-loading-spinner {
  position:relative; width:60px; height:60px;
}
.photoadj-loading-spinner div {
  position:absolute; inset:0;
  border:3px solid transparent;
  border-top-color:#667eea;
  border-radius:50%;
  animation:photoadj-spin 1.2s cubic-bezier(.5,0,.5,1) infinite;
}
.photoadj-loading-spinner div:nth-child(2) { border-top-color:#a855f7; animation-delay:-.4s; }
.photoadj-loading-spinner div:nth-child(3) { border-top-color:#ec4899; animation-delay:-.8s; }
.photoadj-loading-spinner div:nth-child(4) { border-top-color:#f59e0b; animation-delay:-1.2s; }
@keyframes photoadj-spin { to { transform:rotate(360deg); } }

.photoadj-actions {
  display:flex; gap:10px; padding:14px 22px 18px;
}
.photoadj-btn-primary {
  flex:1; padding:13px 18px;
  background:linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border:0; border-radius:11px;
  color:#fff; font-size:14px; font-weight:600;
  cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  transition:all .25s cubic-bezier(.4,0,.2,1);
  box-shadow:0 6px 20px rgba(102,126,234,0.4);
  position:relative; overflow:hidden;
}
.photoadj-btn-primary::before {
  content:''; position:absolute; top:0; left:-100%; width:60%; height:100%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
  transition:.6s;
}
.photoadj-btn-primary:hover::before { left:130%; }
.photoadj-btn-primary:hover { transform:translateY(-1px); box-shadow:0 8px 26px rgba(102,126,234,0.55); }
.photoadj-btn-primary:disabled {
  opacity:.6; cursor:not-allowed;
  background:linear-gradient(135deg, #555, #333);
  box-shadow:none;
}
.photoadj-btn-ghost {
  padding:13px 18px;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.2);
  border-radius:11px;
  color:#fff; font-size:13.5px; font-weight:600; cursor:pointer;
  display:inline-flex; align-items:center; gap:6px;
  transition:all .25s;
}
.photoadj-btn-ghost:hover {
  background:rgba(255,255,255,0.1);
  border-color:rgba(255,255,255,0.4);
}

@media (max-width:1100px) { .photoadj-container .aiqa-main { grid-template-columns:1fr; } }
@media (max-width:700px) {
  .photoadj-color-row { flex-direction:column; align-items:stretch; }
  .photoadj-colors { width:100%; }
}

/* 照片调整页整体缩小 20% */
.photoadj-container { zoom: 0.8; -moz-transform: scale(0.8); -moz-transform-origin: top center; }

/* 照片调整页右移 300px（zoom 0.8 下用 375px 抵消） */
.ai-qa-container.photoadj-container { margin-left: 125px; }

/* 尺寸选择 */
.photoadj-size-row .photoadj-colors { gap:10px; }
.photoadj-size {
  flex:1; cursor:pointer;
  display:flex; align-items:center; gap:10px;
  padding:9px 12px;
  background:rgba(255,255,255,0.03);
  border:1.5px solid rgba(255,255,255,0.1);
  border-radius:10px;
  transition:all .25s cubic-bezier(.4,0,.2,1);
  position:relative;
  color:rgba(255,255,255,0.6);
}
.photoadj-size input { position:absolute; opacity:0; pointer-events:none; }
.photoadj-size-icon { display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.photoadj-size-info { display:flex; flex-direction:column; line-height:1.25; }
.photoadj-size-name { font-size:13px; color:rgba(255,255,255,0.85); font-weight:600; }
.photoadj-size-desc { font-size:11px; color:rgba(255,255,255,0.45); }
.photoadj-size:hover { background:rgba(255,255,255,0.07); transform:translateY(-1px); color:#fff; }
.photoadj-size.is-checked {
  background:linear-gradient(135deg, rgba(102,126,234,0.18), rgba(118,75,162,0.12));
  border-color:rgba(102,126,234,0.7);
  box-shadow:0 4px 18px rgba(102,126,234,0.25);
  color:#fff;
}
.photoadj-size.is-checked .photoadj-size-name { color:#fff; }

/* 照片调整页顶部与全局导航贴齐（zoom 0.8 下用 -25px 抵消 main-content 20px padding） */
.ai-qa-container.photoadj-container { margin-top: -25px; }

/* ============ 简历制作页（复用 paperw 样式） ============ */
.ai-qa-container.resume-container { width:100%; max-width:1500px; margin:0 auto; padding:0 20px 20px; }
.resume-container .ai-qa-header { display:flex; align-items:center; gap:12px; margin-bottom:16px; padding:0; }
.resume-container .aiqa-main { display:grid; grid-template-columns:1fr 1.05fr; gap:24px; min-height:0; }
@media (max-width:1100px) { .resume-container .aiqa-main { grid-template-columns:1fr; } }

.resume-section-title {
  font-size:13.5px; font-weight:700;
  color:#a5b4fc;
  margin:8px 0 -2px;
  letter-spacing:.3px;
  display:flex; align-items:center; gap:8px;
}
.resume-section-title::before {
  content:''; width:4px; height:14px;
  border-radius:2px;
  background:linear-gradient(180deg, #667eea, #764ba2);
}

/* 模板卡片 */
.resume-tpl {
  flex:1; cursor:pointer;
  display:flex; align-items:center; gap:8px;
  padding:9px 10px;
  background:rgba(255,255,255,0.03);
  border:1.5px solid rgba(255,255,255,0.1);
  border-radius:10px;
  transition:all .25s cubic-bezier(.4,0,.2,1);
  position:relative;
  color:rgba(255,255,255,0.6);
  min-width:0;
}
.resume-tpl input { position:absolute; opacity:0; pointer-events:none; }
.resume-tpl-icon { font-size:18px; flex-shrink:0; }
.resume-tpl-info { display:flex; flex-direction:column; line-height:1.25; min-width:0; }
.resume-tpl-name { font-size:12.5px; color:rgba(255,255,255,0.85); font-weight:600; }
.resume-tpl-desc { font-size:10.5px; color:rgba(255,255,255,0.45); }
.resume-tpl:hover { background:rgba(255,255,255,0.07); transform:translateY(-1px); color:#fff; }
.resume-tpl.is-checked {
  background:linear-gradient(135deg, rgba(102,126,234,0.18), rgba(118,75,162,0.12));
  border-color:rgba(102,126,234,0.7);
  box-shadow:0 4px 18px rgba(102,126,234,0.25);
  color:#fff;
}
.resume-tpl.is-checked .resume-tpl-name { color:#fff; }

/* ============ 讲义制作页 ============ */
.ai-qa-container.handout-container { width:116%; max-width:1700px; margin:0 auto; padding:20px; zoom:0.85; -moz-transform:scale(0.85); -moz-transform-origin:top center; }
.handout-container .ai-qa-header { display:flex; align-items:center; gap:12px; margin-bottom:16px; padding:8px 0; }
.handout-container .aiqa-main { display:grid; grid-template-columns:1fr 1.05fr; gap:24px; }
@media (max-width:1100px) { .handout-container .aiqa-main { grid-template-columns:1fr; } }

/* AI 问答页容器上移 100px */
[data-page="ai-qa"] { margin-top: -100px; }
/* AI 问答页 - 距顶部导航 0px + 底部收敛避免遮挡底部导航 */
.page-content[data-page="ai-qa"] {
  padding-top: 0 !important;
  padding-bottom: 20px !important;
  margin-top: -20px !important;
}
.page-content[data-page="ai-qa"] .ai-qa-container { margin-top: 0 !important; padding-top: 0 !important; margin-bottom: 0 !important; padding-bottom: 8px !important; }
.page-content[data-page="ai-qa"] .ai-qa-header { margin-top: 0 !important; padding-top: 0 !important; }

/* 讲义制作页左侧紧凑布局：让整个表单在一屏显示 */
.handout-container .paperw-form { gap:9px; padding:14px 18px 4px; }
.handout-container .paperw-field { gap:4px; }
.handout-container .paperw-label { font-size:11.5px; }
.handout-container .paperw-input { height:36px; padding:7px 12px; font-size:12.5px; border-radius:8px; }
.handout-container select.paperw-input { background-size:10px; padding-right:28px; }
.handout-container .paperw-textarea { min-height:48px; padding:8px 12px; font-size:12.5px; line-height:1.5; border-radius:8px; }
.handout-container .paperw-textarea-sm { min-height:42px; }
.handout-container #handout-objectives { min-height:54px; }
.handout-container .resume-section-title { font-size:12px; margin:5px 0 -2px; }
.handout-container .resume-section-title::before { height:11px; }
.handout-container .paperw-row { gap:9px; }
.handout-container .paperw-tips { margin-top:3px; padding:8px 12px; }
.handout-container .paperw-tips-title { font-size:11px; margin-bottom:3px; }
.handout-container .paperw-tips-body { font-size:10.8px; line-height:1.45; }
.handout-container .resume-tpl { padding:6px 8px; }
.handout-container .resume-tpl-icon { font-size:15px; }
.handout-container .resume-tpl-name { font-size:11.5px; }
.handout-container .resume-tpl-desc { font-size:10px; }
.handout-container .paperw-form-actions { padding:10px 18px 14px !important; }
.handout-container .photoadj-btn-primary,
.handout-container .photoadj-btn-ghost { padding:10px 14px; font-size:13px; }
.handout-container .aiqa-panel-head { padding:14px 22px 10px; }
.handout-container .aiqa-panel-sub { font-size:11.8px; }

/* 讲义制作页二次紧凑：让左侧表单确保单屏可见 */
.ai-qa-container.handout-container { zoom:0.78; -moz-transform:scale(0.78); }
.handout-container .aiqa-panel-head { padding:12px 18px 8px !important; }
.handout-container .aiqa-panel-title { font-size:16px; margin:2px 0 0; }
.handout-container .aiqa-panel-sub { font-size:11.5px; margin-top:2px; }
.handout-container .paperw-form { gap:7px !important; padding:10px 16px 0 !important; }
.handout-container .paperw-field { gap:3px !important; }
.handout-container .paperw-label { font-size:11px !important; margin:0; }
.handout-container .paperw-input { height:32px !important; padding:6px 11px !important; font-size:12px !important; }
.handout-container .paperw-textarea { min-height:42px !important; padding:7px 11px !important; font-size:12px !important; line-height:1.45 !important; }
.handout-container .paperw-textarea-sm { min-height:38px !important; }
.handout-container #handout-objectives { min-height:48px !important; }
.handout-container .resume-section-title { font-size:11.5px !important; margin:3px 0 0 !important; }
.handout-container .paperw-row { gap:8px !important; }
.handout-container .paperw-tips { padding:7px 11px !important; margin-top:2px !important; }
.handout-container .paperw-tips-title { font-size:10.8px !important; margin-bottom:2px !important; }
.handout-container .paperw-tips-body { font-size:10.5px !important; line-height:1.4 !important; }
.handout-container .resume-tpl { padding:5px 7px !important; gap:7px !important; }
.handout-container .resume-tpl-icon { font-size:14px !important; }
.handout-container .resume-tpl-name { font-size:11px !important; }
.handout-container .resume-tpl-desc { font-size:9.5px !important; }
.handout-container .paperw-form-actions { padding:10px 16px 14px !important; }
.handout-container .photoadj-btn-primary,
.handout-container .photoadj-btn-ghost { padding:9px 13px !important; font-size:12.5px !important; }

/* 讲义制作页整体上移 50px */
.ai-qa-container.handout-container { margin-top: -64px; position: relative; z-index: 20; }
/* 讲义制作页返回按钮点击修复：提升层级避免被全局顶栏遮挡 */
.handout-container .ai-qa-header {
  position: relative;
  z-index: 30;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 0 !important;
  margin-bottom: 16px !important;
  min-height: 44px;
}
.handout-container .ai-qa-header > * { align-self: center !important; }
.handout-container .ai-qa-header .back-btn {
  position: relative;
  z-index: 31;
  pointer-events: auto;
  cursor: pointer;
  height: 40px !important;
  padding: 0 16px !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 14px !important;
  box-sizing: border-box !important;
}
.handout-container .ai-qa-header .back-btn svg { display: none !important; }
.handout-container .ai-qa-header .back-btn span { line-height: 1 !important; display: inline-block; }
.handout-container .ai-qa-header .ai-qa-title-text {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 40px !important;
  height: 40px;
  display: inline-flex !important;
  align-items: center !important;
}
.handout-container .ai-qa-header .aiqa-status-pill {
  height: 32px;
  display: inline-flex !important;
  align-items: center !important;
}

/* ===== 讲义制作页：字号加大 + 左侧滚动（覆盖上面紧凑规则） ===== */
.ai-qa-container.handout-container { zoom: 1 !important; -moz-transform: none !important; width: 100% !important; max-width: 1500px !important; padding: 0 20px 20px !important; margin: -20px auto 0 !important; }
/* 一屏布局：两个容器都撑满可视区，不产生外层滚动 */
.handout-container .aiqa-main {
  min-height: 0 !important;
  height: calc(100vh - 320px) !important;
  max-height: calc(100vh - 320px) !important;
  align-items: stretch;
  overflow: hidden;
}
/* 移除旧规则里的 min-height:560px 限制（避免小屏时反而被拉高） */
.handout-container .aiqa-main[data-noop] { min-height: 0 !important; }
.handout-container .aiqa-panel { display: flex; flex-direction: column; overflow: hidden; min-height: 0; }
.handout-container .aiqa-input-panel { display: flex !important; flex-direction: column !important; overflow: hidden !important; min-height: 0 !important; height: 100% !important; padding: 20px !important; }
.handout-container .aiqa-input-panel .aiqa-panel-head { flex-shrink: 0 !important; padding: 4px 4px 10px !important; }
/* 右侧输出面板：确保 actions 栏（含"下载 PPT"按钮）不被截断 */
.handout-container .aiqa-output-panel { display: flex !important; flex-direction: column !important; overflow: hidden !important; min-height: 0 !important; height: 100% !important; padding: 20px !important; }
.handout-container .aiqa-output-panel .aiqa-panel-header { flex-shrink: 0 !important; }
.handout-container .aiqa-output-wrap {
  flex: 1 1 0 !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow-y: auto !important;
}
.handout-container .aiqa-answer-actions {
  flex-shrink: 0 !important;
  display: flex !important;
  flex-wrap: wrap;
  gap: 10px;
  padding: 14px 4px 4px !important;
  margin-top: 12px !important;
  border-top: 1px solid rgba(255,255,255,0.08);
  background: linear-gradient(180deg, rgba(20,25,50,0) 0%, rgba(20,25,50,0.4) 100%);
}
.handout-container .aiqa-panel-head { flex-shrink: 0 !important; padding: 18px 22px 12px !important; }
.handout-container .aiqa-panel-title { font-size: 17px !important; margin: 2px 0 0 !important; }
.handout-container .aiqa-panel-sub { font-size: 13.5px !important; margin-top: 4px !important; }
.handout-container .paperw-form-actions { flex-shrink: 0 !important; padding: 8px 22px 12px !important; }
.handout-container .paperw-form {
  flex: 1 !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden;
  gap: 8px !important;
  padding: 8px 22px 8px !important;
  scrollbar-gutter: stable;
}
/* 左侧表单字号 + 间距整体加大 */
.handout-container .paperw-field { gap: 8px !important; }
.handout-container .paperw-label { font-size: 14.5px !important; margin: 0 !important; }
.handout-container .paperw-input { height: 46px !important; padding: 11px 14px !important; font-size: 15px !important; border-radius: 10px !important; }
.handout-container select.paperw-input { background-size: 12px !important; padding-right: 32px !important; }
.handout-container .paperw-textarea { min-height: 92px !important; padding: 12px 14px !important; font-size: 15px !important; line-height: 1.65 !important; border-radius: 10px !important; }
.handout-container .paperw-textarea-sm { min-height: 82px !important; }
.handout-container #handout-objectives { min-height: 108px !important; }
.handout-container .resume-section-title { font-size: 16px !important; margin: 8px 0 !important; }
.handout-container .resume-section-title::before { height: 18px !important; width: 5px !important; }
.handout-container .paperw-row { gap: 8px !important; }
.handout-container .paperw-tips { margin-top: 8px !important; padding: 14px 16px !important; border-radius: 10px !important; }
.handout-container .paperw-tips-title { font-size: 13.5px !important; margin-bottom: 6px !important; }
.handout-container .paperw-tips-body { font-size: 13px !important; line-height: 1.6 !important; }
.handout-container .resume-tpl { padding: 10px 12px !important; gap: 8px !important; border-radius: 10px !important; }
.handout-container .resume-tpl-icon { font-size: 20px !important; }
.handout-container .resume-tpl-name { font-size: 14px !important; }
.handout-container .resume-tpl-desc { font-size: 12px !important; margin-top: 2px !important; }
.handout-container .photoadj-btn-primary,
.handout-container .photoadj-btn-ghost { padding: 12px 18px !important; font-size: 14.5px !important; border-radius: 10px !important; }
/* 滚动条美化 */
.handout-container .paperw-form::-webkit-scrollbar { width: 8px; }
.handout-container .paperw-form::-webkit-scrollbar-track { background: rgba(255,255,255,0.03); border-radius: 8px; }
.handout-container .paperw-form::-webkit-scrollbar-thumb { background: linear-gradient(180deg, rgba(102,126,234,0.55), rgba(118,75,162,0.55)); border-radius: 8px; }
.handout-container .paperw-form::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, rgba(102,126,234,0.75), rgba(118,75,162,0.75)); }

/* 简历制作页：左侧面板固定高度 + 内部滚动 */
.resume-container .aiqa-main { align-items: stretch; }
.resume-container .aiqa-panel { display:flex; flex-direction:column; max-height: calc(100vh - 80px); overflow: hidden; }
.resume-container .aiqa-input-panel .paperw-form { flex:1; overflow-y:auto; min-height:0; }
/* 滚动条美化 */
.resume-container .paperw-form::-webkit-scrollbar { width:6px; }
.resume-container .paperw-form::-webkit-scrollbar-thumb { background:rgba(102,126,234,0.35); border-radius:6px; }
.resume-container .paperw-form::-webkit-scrollbar-thumb:hover { background:rgba(102,126,234,0.55); }
.resume-container .paperw-form::-webkit-scrollbar-track { background:rgba(255,255,255,0.02); }
.resume-container .paperw-form-actions { flex-shrink:0; }
.resume-container .aiqa-panel-head { flex-shrink:0; }

/* 简历制作页：真正生效的滚动布局（resume HTML 用 aiqa-input-panel 不带 aiqa-panel） */
.resume-container .aiqa-main { align-items: stretch; height: calc(100vh - 100px); }
.resume-container .aiqa-input-panel,
.resume-container .aiqa-output-panel { display:flex; flex-direction:column; min-height:0; max-height:100%; overflow:hidden; }
.resume-container .aiqa-panel-header { flex-shrink:0; }
.resume-container .paperw-form { flex:1; overflow-y:auto !important; min-height:0; }
.resume-container .paperw-form-actions { flex-shrink:0; }
.resume-container .aiqa-output-wrap { flex:1; overflow-y:auto; min-height:0; }
.resume-container .aiqa-output-empty { flex:1; }

.resume-container .paperw-form::-webkit-scrollbar { width:6px; }
.resume-container .paperw-form::-webkit-scrollbar-thumb { background:rgba(102,126,234,0.4); border-radius:6px; }
.resume-container .paperw-form::-webkit-scrollbar-thumb:hover { background:rgba(102,126,234,0.65); }
.resume-container .paperw-form::-webkit-scrollbar-track { background:rgba(255,255,255,0.02); }

/* 简历制作页内边距 */
[data-page="resume-maker"] { padding: 0 20px 20px !important; box-sizing: border-box; margin-top: -20px !important; }

/* ============ 简历制作页 · 左侧滚动强化 + 字号加大 v127 ============ */
/* 左侧容器强制可滚：整个左侧面板（含 header/form/actions）不溢出，内部区块可滚动 */
.resume-container .aiqa-main {
  height: calc(100vh - 330px) !important;
  max-height: calc(100vh - 330px) !important;
  align-items: stretch !important;
}
.resume-container .aiqa-input-panel {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  max-height: 100% !important;
  overflow: hidden !important;
  min-height: 0 !important;
}
.resume-container .aiqa-input-panel .aiqa-panel-header { flex-shrink: 0 !important; }
.resume-container .aiqa-input-panel .paperw-form {
  flex: 1 1 auto !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  min-height: 0 !important;
  padding-right: 12px !important;      /* 给滚动条留白 */
  scrollbar-gutter: stable both-edges;  /* 稳定滚动条槽位 */
}
.resume-container .aiqa-input-panel .paperw-form-actions { flex-shrink: 0 !important; }
/* 滚动条视觉 */
.resume-container .paperw-form::-webkit-scrollbar { width: 8px !important; }
.resume-container .paperw-form::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(102,126,234,0.55), rgba(118,75,162,0.55)) !important;
  border-radius: 8px !important;
}
.resume-container .paperw-form::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(102,126,234,0.85), rgba(118,75,162,0.85)) !important;
}
.resume-container .paperw-form::-webkit-scrollbar-track {
  background: rgba(255,255,255,0.03) !important;
  border-radius: 8px !important;
}

/* 左侧文字加大 */
.resume-container .aiqa-panel-title { font-size: 16px !important; letter-spacing: 0.3px; }
.resume-container .aiqa-panel-tag { font-size: 12.5px !important; padding: 3px 10px !important; }
.resume-container .resume-section-title {
  font-size: 16px !important;
  font-weight: 700 !important;
  margin: 12px 0 6px !important;
  letter-spacing: 0.4px !important;
}
.resume-container .resume-section-title::before {
  width: 5px !important;
  height: 18px !important;
  border-radius: 3px !important;
}
.resume-container .paperw-label {
  font-size: 14.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.3px !important;
  color: rgba(255,255,255,0.9) !important;
  margin-bottom: 2px !important;
}
.resume-container .paperw-req { font-size: 16px !important; }
.resume-container .paperw-hint { font-size: 13px !important; }
.resume-container .paperw-input {
  height: 46px !important;
  padding: 10px 14px !important;
  font-size: 15px !important;
  border-radius: 10px !important;
}
.resume-container .paperw-textarea {
  min-height: 92px !important;
  padding: 12px 14px !important;
  font-size: 15px !important;
  line-height: 1.65 !important;
  border-radius: 10px !important;
}
.resume-container .paperw-textarea-sm { min-height: 68px !important; }
.resume-container select.paperw-input { padding-right: 34px !important; background-size: 12px !important; }
.resume-container .paperw-tips {
  font-size: 13.5px !important;
  padding: 12px 16px !important;
  line-height: 1.7 !important;
}
.resume-container .paperw-form { gap: 8px !important; padding: 8px 24px 8px !important; }
.resume-container .paperw-row { gap: 8px !important; }
.resume-container .paperw-field { gap: 8px !important; }
/* 键盘弹起时聚焦字段浮到最顶层 */
.resume-container .paperw-form { padding-bottom: 40vh !important; }
.handout-container .paperw-form { padding-bottom: 40vh !important; }
.resume-container .paperw-field:focus-within,
.resume-container .paperw-field.is-kbd-top,
.handout-container .paperw-field:focus-within,
.handout-container .paperw-field.is-kbd-top {
  position: sticky;
  top: 0;
  z-index: 100;
  background: linear-gradient(180deg, rgba(20,25,50,0.98) 0%, rgba(20,25,50,0.9) 100%);
  padding: 8px 4px 10px !important;
  margin: -4px -4px 0 !important;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.35), 0 0 0 1px rgba(102,126,234,0.35) inset;
  backdrop-filter: blur(8px);
}

/* ============ 简历制作页 · 重置按钮美化 v128 ============ */
.resume-container .resume-actions {
  display: flex;
  gap: 14px;
  padding: 14px 24px 18px;
  margin-top: 6px;
  flex-shrink: 0;
  background: linear-gradient(180deg, rgba(20,25,50,0) 0%, rgba(20,25,50,0.6) 40%, rgba(20,25,50,0.85) 100%);
  border-top: 1px solid rgba(255,255,255,0.06);
  backdrop-filter: blur(10px);
}
.resume-container .resume-reset-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 120px;
  padding: 12px 22px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1px;
  color: rgba(255,255,255,0.88);
  background: linear-gradient(135deg, rgba(255,255,255,0.06) 0%, rgba(102,126,234,0.08) 100%);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 12px;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 14px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.08);
  backdrop-filter: blur(8px);
  -webkit-tap-highlight-color: transparent;
}
.resume-container .resume-reset-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 12px;
  padding: 1px;
  background: linear-gradient(135deg, rgba(102,126,234,0.5), rgba(250,112,154,0.35));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}
.resume-container .resume-reset-btn .resume-reset-icon {
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  color: rgba(255,255,255,0.75);
}
.resume-container .resume-reset-btn:hover {
  color: #ffb7b7;
  background: linear-gradient(135deg, rgba(250,112,154,0.15) 0%, rgba(255,107,107,0.12) 100%);
  border-color: rgba(250,112,154,0.5);
  transform: translateY(-2px);
  box-shadow:
    0 10px 26px rgba(250,112,154,0.28),
    0 0 0 1px rgba(250,112,154,0.25) inset,
    inset 0 1px 0 rgba(255,255,255,0.14);
}
.resume-container .resume-reset-btn:hover::before { opacity: 1; }
.resume-container .resume-reset-btn:hover .resume-reset-icon {
  transform: rotate(-180deg);
  color: #ffcaca;
}
.resume-container .resume-reset-btn:active {
  transform: scale(0.96) translateY(0);
  box-shadow: 0 4px 12px rgba(250,112,154,0.25);
}
.resume-container .resume-reset-btn:focus-visible {
  outline: 2px solid rgba(250,112,154,0.6);
  outline-offset: 2px;
}
/* 生成按钮拉伸占据剩余空间 */
.resume-container .resume-actions .aiqa-btn-submit { flex: 1; }

/* 小屏适配 */
@media (max-width: 640px) {
  .resume-container .resume-actions { gap: 10px; padding: 12px 16px 14px; }
  .resume-container .resume-reset-btn { min-width: 96px; padding: 11px 16px; font-size: 13px; letter-spacing: 0.5px; }
}


/* 照片调整页：右侧面板设为可滚动，让所有内容在一屏显示 */
.photoadj-container .aiqa-main { align-items: stretch; height: calc(100vh - 150px); }
.photoadj-container .aiqa-input-panel,
.photoadj-container .aiqa-output-panel { display:flex; flex-direction:column; max-height:100%; overflow:hidden; min-height:0; }
.photoadj-container .photoadj-output-panel .aiqa-panel-header,
.photoadj-container .photoadj-output-panel .photoadj-color-row,
.photoadj-container .photoadj-output-panel .photoadj-actions { flex-shrink:0; }
.photoadj-container .photoadj-output-panel .photoadj-result-wrap { flex:1; overflow-y:auto; min-height:160px; }
.photoadj-container .photoadj-result-wrap::-webkit-scrollbar { width:6px; }
.photoadj-container .photoadj-result-wrap::-webkit-scrollbar-thumb { background:rgba(102,126,234,0.4); border-radius:6px; }
.photoadj-container .photoadj-result-wrap::-webkit-scrollbar-track { background:rgba(255,255,255,0.02); }

/* ============ 在线考试页 ============ */
/* 抵消 .main-content 的 padding-top: 20px，让页面顶部到导航实际间距 = 16px */
.page-content[data-page="online-exam"] { margin-top: -20px; }
.ai-qa-container.online-exam-container { width:100%; max-width:1600px; margin:0 auto; padding:0 24px; }
.online-exam-container .ai-qa-header { display:flex; align-items:center; gap:12px; margin-bottom:16px; padding:0; }
.online-exam-main {
  display:grid;
  grid-template-columns: 1fr 1.05fr;
  gap:16px;
  align-items:stretch;
}

/* 左侧 Hero */
.online-exam-hero {
  position:relative;
  border-radius:24px;
  padding:36px 32px 30px;
  background:linear-gradient(135deg, rgba(102,126,234,0.18), rgba(118,75,162,0.10), rgba(0,0,0,0.25));
  border:1px solid rgba(102,126,234,0.25);
  overflow:hidden;
  min-height:560px;
  display:flex; flex-direction:column; justify-content:flex-start;
}
.online-exam-hero-bg { position:absolute; inset:0; pointer-events:none; }
.online-exam-orbit {
  position:absolute;
  border-radius:50%;
  border:1.5px dashed rgba(102,126,234,0.35);
  animation:online-exam-spin 28s linear infinite;
}
.online-exam-orbit-1 { width:520px; height:520px; right:-200px; bottom:-180px; }
.online-exam-orbit-2 { width:340px; height:340px; right:-110px; bottom:-90px; animation-duration:18s; animation-direction:reverse; border-color:rgba(236,72,153,0.3); }
@keyframes online-exam-spin { to { transform:rotate(360deg); } }
.online-exam-glow {
  position:absolute;
  border-radius:50%;
  filter:blur(50px);
}
.online-exam-glow-1 { width:280px; height:280px; background:rgba(102,126,234,0.35); top:-60px; left:-50px; animation:online-exam-pulse 7s ease-in-out infinite; }
.online-exam-glow-2 { width:220px; height:220px; background:rgba(236,72,153,0.3); bottom:-40px; right:80px; animation:online-exam-pulse 9s ease-in-out infinite 1s; }
@keyframes online-exam-pulse { 0%,100% { opacity:.4; transform:scale(1); } 50% { opacity:.7; transform:scale(1.08); } }
.online-exam-grid {
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size:36px 36px;
  mask-image:radial-gradient(circle at 40% 60%, #000 30%, transparent 75%);
  -webkit-mask-image:radial-gradient(circle at 40% 60%, #000 30%, transparent 75%);
  opacity:.5;
}

.online-exam-hero-tag {
  position:relative; z-index:2;
  display:inline-flex; align-items:center; gap:6px;
  align-self:flex-start;
  padding:5px 12px;
  background:rgba(102,126,234,0.18);
  border:1px solid rgba(102,126,234,0.4);
  border-radius:100px;
  color:#a5b4fc; font-size:11.5px; font-weight:600;
  letter-spacing:.5px;
}
.online-exam-hero-dot {
  width:7px; height:7px; border-radius:50%;
  background:#4ade80;
  box-shadow:0 0 8px rgba(74,222,128,.8);
  animation:online-exam-pulse 2s ease-in-out infinite;
}
.online-exam-hero-title {
  position:relative; z-index:2;
  margin:14px 0 10px;
  font-size:32px; font-weight:800; letter-spacing:1px;
  color:#fff;
  display:flex; flex-direction:column; line-height:1.18;
}
.online-exam-hero-title-grad {
  background:linear-gradient(135deg, #4facfe 0%, #a855f7 50%, #ec4899 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}
.online-exam-hero-desc {
  position:relative; z-index:2;
  font-size:13.5px; color:rgba(255,255,255,0.7);
  margin:0 0 22px; line-height:1.7;
  max-width:90%;
}
.online-exam-hero-stats {
  position:relative; z-index:2;
  display:flex; gap:16px; flex-wrap:wrap;
}
.online-exam-stat {
  padding:10px 16px;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.12);
  border-radius:12px;
  min-width:90px;
  backdrop-filter:blur(10px);
}
.online-exam-stat-val {
  font-size:20px; font-weight:800;
  background:linear-gradient(135deg, #4facfe, #a855f7);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
  line-height:1.1;
}
.online-exam-stat-key { font-size:11px; color:rgba(255,255,255,0.6); margin-top:3px; }

.online-exam-hero-img {
  position:absolute;
  right:-30px; bottom:-30px;
  width:260px; height:260px;
  object-fit:contain;
  z-index:1;
  filter:drop-shadow(0 20px 40px rgba(168,85,247,0.3));
  animation:online-exam-float 6s ease-in-out infinite;
}
@keyframes online-exam-float {
  0%,100% { transform:translateY(0) rotate(-2deg); }
  50% { transform:translateY(-12px) rotate(2deg); }
}

/* 右侧 4 大入口卡片 */
.online-exam-list { display:flex; flex-direction:column; gap:16px; }
.online-exam-card {
  position:relative;
  display:flex; align-items:center; gap:18px;
  padding:18px 22px;
  background:linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
  border:1px solid rgba(255,255,255,0.10);
  border-radius:18px;
  cursor:pointer;
  overflow:hidden;
  transition:all .35s cubic-bezier(.4,0,.2,1);
}
.online-exam-card-glow {
  position:absolute; inset:0;
  background:radial-gradient(circle at 0% 50%, rgba(102,126,234,0.2), transparent 60%);
  opacity:0; transition:opacity .35s;
  pointer-events:none;
}
.online-exam-card:hover {
  transform:translateX(6px);
  border-color:rgba(102,126,234,0.4);
  box-shadow:0 10px 30px rgba(0,0,0,0.35);
}
.online-exam-card:hover .online-exam-card-glow { opacity:1; }
.online-exam-card:hover .online-exam-card-arrow { transform:translateX(4px); }
.online-exam-card:active { transform:translateX(3px) scale(.99); }

.online-exam-card-icon {
  flex-shrink:0;
  width:64px; height:64px;
  border-radius:16px;
  background:rgba(0,0,0,0.25);
  border:1px solid rgba(255,255,255,0.08);
  display:flex; align-items:center; justify-content:center;
  position:relative; z-index:1;
}
.online-exam-card-content { flex:1; min-width:0; position:relative; z-index:1; }
.online-exam-card-title {
  font-size:18px; font-weight:700; color:#fff;
  margin-bottom:4px; letter-spacing:.3px;
}
.online-exam-card-sub {
  font-size:12.5px; color:rgba(255,255,255,0.6);
  margin-bottom:8px;
}
.online-exam-card-meta { display:flex; align-items:center; gap:10px; }
.online-exam-tag {
  font-size:11px; font-weight:600;
  padding:3px 9px;
  border-radius:100px;
  border:1px solid currentColor;
}
.online-exam-tag-blue { color:#4facfe; background:rgba(79,172,254,0.12); border-color:rgba(79,172,254,0.35); }
.online-exam-tag-orange { color:#fa709a; background:rgba(250,112,154,0.12); border-color:rgba(250,112,154,0.35); }
.online-exam-tag-green { color:#43e97b; background:rgba(67,233,123,0.12); border-color:rgba(67,233,123,0.35); }
.online-exam-tag-purple { color:#a855f7; background:rgba(168,85,247,0.12); border-color:rgba(168,85,247,0.35); }
.online-exam-card-count { font-size:11.5px; color:rgba(255,255,255,0.5); }
.online-exam-card-arrow {
  color:rgba(255,255,255,0.4);
  transition:all .3s;
  flex-shrink:0;
  position:relative; z-index:1;
}

/* 不同卡片左侧高亮线 */
.online-exam-card::before {
  content:''; position:absolute; left:0; top:18px; bottom:18px;
  width:3px; border-radius:0 3px 3px 0;
  opacity:.85;
}
.online-exam-card-mid::before { background:linear-gradient(180deg, #4facfe, #00f2fe); }
.online-exam-card-final::before { background:linear-gradient(180deg, #fa709a, #fee140); }
.online-exam-card-daily::before { background:linear-gradient(180deg, #43e97b, #38f9d7); }
.online-exam-card-month::before { background:linear-gradient(180deg, #a855f7, #ec4899); }

@media (max-width:1100px) {
  .online-exam-main { grid-template-columns:1fr; }
  .online-exam-hero-img { width:200px; height:200px; right:-20px; bottom:-20px; }
  .online-exam-hero { min-height:380px; }
}
@media (max-width:600px) {
  .online-exam-hero { padding:24px 22px 20px; }
  .online-exam-hero-title { font-size:24px; }
  .online-exam-card-icon { width:54px; height:54px; }
  .online-exam-card-title { font-size:16px; }
}

/* 在线考试页：左右容器高度对齐 */
.online-exam-main { align-items: stretch; }
.online-exam-hero { min-height: auto; height: 100%; }
.online-exam-list { height: 100%; justify-content: space-between; }
.online-exam-card { flex: 1; }

/* ============ 学院课程页 ============ */
/* 抵消 .main-content 的 padding-top: 20px，让页面顶部到导航实际间距 = 16px */
.page-content[data-page="academy-courses"] { margin-top: -20px; }
.ai-qa-container.academy-container { width:100%; max-width:1600px; margin:0 auto; padding:0 24px 16px; }
.academy-container .ai-qa-header { display:flex; align-items:center; gap:12px; margin-bottom:16px; padding:0; }

/* 左右布局 */
.academy-layout {
  display:grid;
  grid-template-columns: 360px 1fr;
  gap:16px;
  align-items:stretch;
}
.academy-side {
  display:flex; flex-direction:column; gap:16px;
  min-width:0;
}
.academy-main {
  display:flex; flex-direction:column; gap:16px;
  min-width:0;
  max-height: calc(100vh - 180px);
  overflow-y:auto;
  padding-right:6px;
}
.academy-main::-webkit-scrollbar { width:6px; }
.academy-main::-webkit-scrollbar-thumb { background:rgba(102,126,234,0.3); border-radius:3px; }
@media (max-width: 1100px) {
  .academy-layout { grid-template-columns: 1fr; }
  .academy-main { max-height:none; overflow:visible; }
}

/* 顶部 Banner */
.academy-banner {
  position:relative;
  border-radius:22px;
  padding:22px 22px;
  background:linear-gradient(135deg, rgba(102,126,234,0.18), rgba(118,75,162,0.10), rgba(236,72,153,0.06));
  border:1px solid rgba(102,126,234,0.22);
  overflow:hidden;
  margin-bottom:0;
}
.academy-banner-bg { position:absolute; inset:0; pointer-events:none; }
.academy-orbit {
  position:absolute; border-radius:50%;
  border:1.5px dashed rgba(102,126,234,0.3);
  animation:online-exam-spin 26s linear infinite;
}
.academy-orbit-1 { width:380px; height:380px; right:-130px; top:-110px; }
.academy-orbit-2 { width:240px; height:240px; right:60px; top:-30px; animation-direction:reverse; animation-duration:18s; border-color:rgba(236,72,153,0.3); }
.academy-glow {
  position:absolute; border-radius:50%; filter:blur(60px);
}
.academy-glow-1 { width:280px; height:280px; background:rgba(102,126,234,0.3); top:-80px; left:50px; animation:online-exam-pulse 8s ease-in-out infinite; }
.academy-glow-2 { width:200px; height:200px; background:rgba(236,72,153,0.25); bottom:-60px; right:200px; animation:online-exam-pulse 10s ease-in-out infinite 1.2s; }

.academy-banner-content { position:relative; z-index:2; }
.academy-banner-tag {
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 11px;
  background:rgba(102,126,234,0.18);
  border:1px solid rgba(102,126,234,0.4);
  border-radius:100px;
  color:#a5b4fc; font-size:11.5px; font-weight:600; letter-spacing:.5px;
}
.academy-banner-dot {
  width:6px; height:6px; border-radius:50%; background:#4ade80; box-shadow:0 0 8px rgba(74,222,128,.8);
  animation:online-exam-pulse 2s ease-in-out infinite;
}
.academy-banner-title {
  font-size:24px; font-weight:800; color:#fff;
  margin:12px 0 6px; letter-spacing:.5px;
  background:linear-gradient(135deg, #fff, #c7d2fe, #fbcfe8);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}
.academy-banner-sub { font-size:13px; color:rgba(255,255,255,0.7); margin:0 0 14px; }
.academy-banner-stats { display:flex; gap:14px; flex-wrap:wrap; }
.academy-banner-stat {
  padding:8px 14px;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:10px;
  display:flex; flex-direction:column; line-height:1.2;
  min-width:80px;
}
.academy-banner-stat-val {
  font-size:18px; font-weight:800;
  background:linear-gradient(135deg, #4facfe, #a855f7);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}
.academy-banner-stat-key { font-size:11px; color:rgba(255,255,255,0.55); margin-top:2px; }

/* 筛选条 */
.academy-filter {
  background:rgba(255,255,255,0.025);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:16px;
  padding:14px 16px;
  display:flex; flex-direction:column; gap:12px;
  margin-bottom:0;
  flex:1;
  min-height:0;
}
.academy-side .academy-filter .academy-filter-group { flex-direction:column; align-items:flex-start; gap:8px; }
.academy-side .academy-filter .academy-filter-label { padding-top:0; }
.academy-side .academy-filter .academy-chips { max-height:none; }
.academy-filter-group { display:flex; align-items:flex-start; gap:14px; }
.academy-filter-label {
  flex-shrink:0;
  display:flex; align-items:center; gap:5px;
  font-size:12.5px; font-weight:600; color:#a5b4fc;
  padding-top:7px;
  min-width:46px;
}
.academy-chips {
  display:flex; flex-wrap:wrap; gap:6px;
  flex:1;
}
.academy-chip {
  padding:5px 12px;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.12);
  border-radius:100px;
  color:rgba(255,255,255,0.7);
  font-size:12.5px; font-weight:500;
  cursor:pointer;
  transition:all .2s;
}
.academy-chip:hover {
  background:rgba(102,126,234,0.12);
  border-color:rgba(102,126,234,0.4);
  color:#fff;
}
.academy-chip.is-active {
  background:linear-gradient(135deg, #667eea, #764ba2);
  border-color:transparent;
  color:#fff; font-weight:600;
  box-shadow:0 4px 14px rgba(102,126,234,0.4);
}
.academy-filter-search {
  display:flex; align-items:center; gap:8px;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.12);
  border-radius:10px;
  padding:7px 12px;
  color:rgba(255,255,255,0.5);
  transition:all .2s;
}
.academy-filter-search:focus-within {
  background:rgba(102,126,234,0.08);
  border-color:rgba(102,126,234,0.5);
  color:#a5b4fc;
}
.academy-filter-search input {
  flex:1; background:transparent; border:0; outline:none;
  color:#fff; font-size:13px; min-width:0;
}
.academy-filter-search input::placeholder { color:rgba(255,255,255,0.35); }

/* 课程网格 */
.academy-courses-grid {
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap:16px;
}
.academy-course-card {
  position:relative;
  background:linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
  border:1px solid rgba(255,255,255,0.10);
  border-radius:16px;
  overflow:hidden;
  cursor:pointer;
  transition:all .35s cubic-bezier(.4,0,.2,1);
  display:flex; flex-direction:column;
}
.academy-course-card:hover {
  transform:translateY(-4px);
  border-color:rgba(102,126,234,0.45);
  box-shadow:0 12px 30px rgba(0,0,0,0.4);
}
.academy-course-cover {
  position:relative;
  aspect-ratio: 16/9;
  background:linear-gradient(135deg, #667eea, #764ba2);
  overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.academy-course-cover img {
  width:100%; height:100%; object-fit:cover; display:block;
}
.academy-course-cover-fallback {
  font-size:48px; opacity:.4;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.4));
}
.academy-course-tag {
  position:absolute; top:10px; left:10px;
  padding:3px 9px;
  background:rgba(0,0,0,0.5);
  backdrop-filter:blur(8px);
  border-radius:100px;
  font-size:11px; font-weight:600;
  color:#fff;
  border:1px solid rgba(255,255,255,0.15);
}
.academy-course-grade {
  position:absolute; top:10px; right:10px;
  padding:3px 9px;
  background:rgba(102,126,234,0.85);
  border-radius:100px;
  font-size:11px; font-weight:600;
  color:#fff;
}
.academy-course-info { padding:14px 16px; flex:1; display:flex; flex-direction:column; }
.academy-course-title { font-size:15px; font-weight:700; color:#fff; margin-bottom:4px; line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.academy-course-teacher { font-size:12px; color:rgba(255,255,255,0.55); margin-bottom:10px; display:flex; align-items:center; gap:5px; }
.academy-course-meta { display:flex; justify-content:space-between; align-items:center; margin-top:auto; }
.academy-course-meta-left { display:flex; gap:10px; font-size:11.5px; color:rgba(255,255,255,0.5); }
.academy-course-meta-item { display:inline-flex; align-items:center; gap:3px; }
.academy-course-action {
  padding:4px 10px;
  background:linear-gradient(135deg, rgba(102,126,234,0.25), rgba(118,75,162,0.18));
  border:1px solid rgba(102,126,234,0.4);
  border-radius:6px;
  font-size:11.5px; font-weight:600; color:#fff;
  display:inline-flex; align-items:center; gap:3px;
}
.academy-course-action::after {
  content:'›'; font-size:14px; line-height:1;
}

/* 空态 */
.academy-empty {
  text-align:center; padding:50px 20px;
  color:rgba(255,255,255,0.5);
}
.academy-empty-icon { margin-bottom:14px; }
.academy-empty p { font-size:14px; margin:0; }

@media (max-width:700px) {
  .academy-filter-group { flex-direction:column; gap:6px; }
  .academy-filter-label { min-width:auto; padding-top:0; }
  .academy-courses-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap:10px; }
  .academy-course-title { font-size:13px; }
}

/* ============================================================
   ===== 平板设备全局自适配（覆盖 600 - 1366 全平板尺寸） =====
   断点参考：
   - 1366px iPad Pro 12.9 横屏
   - 1280px 大型安卓平板横屏
   - 1180px iPad Pro 11/Air 横屏
   - 1024px iPad mini 横屏 / iPad Pro 12.9 竖屏
   - 912px  Surface Pro 7
   - 834px  iPad Pro 11 竖屏
   - 820px  iPad Air 竖屏
   - 768px  iPad mini / 经典 iPad 竖屏
   - 600px  小型安卓平板
   ============================================================ */

/* ---- 通用：横屏(>=1024 && <=1366) 中型平板 ---- */
@media (min-width: 1024px) and (max-width: 1366px) {
  .main-content { padding: 16px 18px; }
  .status-bar { padding: 10px 18px; }
  .func-nav { padding: 10px 18px; }
  .func-nav-scroll { gap: 18px; }
  .func-nav-item span { font-size: 13px; }
  .home-layout-new { gap: 14px; }
  .func-cards-grid { gap: 12px; }
  .bottom-nav { padding: 8px 18px; }
  .ai-qa-container { padding: 16px 20px; }
  .academy-layout { grid-template-columns: 320px 1fr; gap: 16px; }
  .academy-main { max-height: calc(100vh - 160px); }
}

/* ---- 竖屏 iPad（768 - 1023） 通用调整 ---- */
@media (min-width: 768px) and (max-width: 1023px) {
  .main-content { padding: 14px 16px; }
  .status-bar { padding: 10px 16px; }
  .status-bar .user-name { font-size: 13px; }
  .status-bar .time { font-size: 13px; }
  .status-bar .date { font-size: 12px; }
  .func-nav { padding: 8px 16px; }
  .func-nav-scroll { gap: 14px; }
  .func-nav-item span { font-size: 12.5px; }
  .bottom-nav { padding: 6px 14px; }

  /* 首页 / 测评：单列纵向 */
  .home-layout,
  .home-layout-new,
  .assessment-layout {
    grid-template-columns: 1fr !important;
    height: auto;
  }
  .home-left, .home-right { gap: 12px; }

  /* 功能卡片：2~3 列自适配 */
  .func-cards-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px; }
  .func-grid { grid-template-columns: repeat(2, 1fr); }

  /* AI 工具页 - 双列改单列，去除大缩放 */
  .ai-qa-page .aiqa-main,
  .paperw-container .aiqa-main,
  .photoadj-container .aiqa-main,
  .resume-container .aiqa-main,
  .handout-container .aiqa-main {
    grid-template-columns: 1fr !important;
    gap: 14px;
  }
  .paperw-container, .photoadj-container, .resume-container, .handout-container {
    zoom: 1 !important;
    width: 100% !important;
    margin: 0 auto !important;
  }
  .ai-qa-container { padding: 14px 16px; }

  /* 学院课程：单列 */
  .academy-layout { grid-template-columns: 1fr !important; gap: 16px; }
  .academy-main { max-height: none; overflow: visible; padding-right: 0; }
  .academy-banner { padding: 18px 18px; }
  .academy-banner-title { font-size: 20px; }
  .academy-courses-grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }

  /* 在线考试：单列 */
  .online-exam-layout { grid-template-columns: 1fr !important; }

  /* 学习工具 hero 收起 */
  .ai-tools-layout { grid-template-columns: 1fr !important; }
  .ai-tools-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important; }
}

/* ---- 小型平板 / 大屏手机（<= 767px） ---- */
@media (max-width: 767px) {
  .main-content { padding: 12px 14px; }
  .status-bar { padding: 8px 14px; flex-wrap: wrap; gap: 6px; }
  .status-bar .exam-selector { font-size: 11px; padding: 4px 8px; }
  .user-avatar { width: 32px; height: 32px; font-size: 12px; }
  .user-name { font-size: 12px; }
  .func-nav { padding: 8px 14px; }
  .func-nav-scroll { gap: 12px; }
  .func-nav-item span { font-size: 12px; }
  .bottom-nav { padding: 6px 10px; }

  /* 单列 */
  .home-layout,
  .home-layout-new,
  .assessment-layout,
  .academy-layout,
  .online-exam-layout,
  .ai-tools-layout { grid-template-columns: 1fr !important; }

  .func-cards-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px; }
  .func-grid { grid-template-columns: 1fr; }

  /* AI 工具：单列、去缩放 */
  .ai-qa-page .aiqa-main,
  .paperw-container .aiqa-main,
  .photoadj-container .aiqa-main,
  .resume-container .aiqa-main,
  .handout-container .aiqa-main { grid-template-columns: 1fr !important; gap: 12px; }
  .paperw-container, .photoadj-container, .resume-container, .handout-container {
    zoom: 1 !important;
    width: 100% !important;
    margin: 0 !important;
  }
  .ai-qa-container { padding: 12px 14px; }

  /* 学院课程 */
  .academy-banner { padding: 16px; }
  .academy-banner-title { font-size: 18px; }
  .academy-banner-sub { font-size: 12px; }
  .academy-banner-stats { gap: 8px; }
  .academy-banner-stat { padding: 6px 10px; min-width: 64px; }
  .academy-banner-stat-val { font-size: 16px; }
  .academy-courses-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }

  /* 在线考试 */
  .online-exam-cards { grid-template-columns: repeat(2, 1fr) !important; gap: 10px; }
}

/* ---- 极小屏 / 折叠竖屏（<=480） ---- */
@media (max-width: 480px) {
  .main-content { padding: 10px 12px; }
  .func-cards-grid { grid-template-columns: 1fr !important; }
  .online-exam-cards { grid-template-columns: 1fr !important; }
  .academy-courses-grid { grid-template-columns: 1fr !important; }
}

/* ---- 平板横屏比例 (高度较矮，避免内容溢出) ---- */
@media (orientation: landscape) and (max-height: 820px) {
  .status-bar { padding-top: 8px; padding-bottom: 8px; }
  .func-nav { padding-top: 6px; padding-bottom: 6px; }
  .bottom-nav { padding-top: 6px; padding-bottom: 6px; }
  .main-content { padding-top: 12px; padding-bottom: 12px; }
}

/* ---- 触摸优化：按钮/点击区最小 40x40 ---- */
@media (pointer: coarse) {
  .back-btn,
  .academy-chip,
  .func-nav-item,
  .nav-item,
  .mode-btn { min-height: 36px; }
  button { touch-action: manipulation; }
}

/* ============ AI 讲题（ai-explain）专属样式 ============ */
/* 抵消 .main-content 的 padding-top:20px，使页面顶部到全局导航实际间距 = 0 */
.page-content[data-page="ai-explain"] { margin-top: -20px; }
.aiexp-container { margin-top: 0 !important; padding-top: 0 !important; padding-left: 48px !important; padding-right: 48px !important; }
.aiexp-container .ai-qa-header { align-items: center; gap: 12px; margin-top: 0 !important; padding-top: 0 !important; margin-bottom: 16px !important; }
.aiexp-badge {
  margin-left: 8px;
  padding: 4px 12px;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(67,233,123,0.18), rgba(56,249,215,0.18));
  border: 1px solid rgba(67,233,123,0.45);
  color: #43e97b;
  font-size: 12px;
  letter-spacing: 0.5px;
  text-shadow: 0 0 8px rgba(67,233,123,0.4);
}

.aiexp-subject-row {
  display: flex; align-items: flex-start; gap: 8px;
  margin: 0 0 12px;
  padding: 12px 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
}
.aiexp-subject-row .aiqa-chip-label { color: rgba(255,255,255,0.7); flex-shrink: 0; padding-top: 4px; }
.aiexp-subjects {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.aiexp-subj-chip {
  padding: 5px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.85);
  font-size: 12.5px;
  cursor: pointer;
  transition: all .2s cubic-bezier(0.4,0,0.2,1);
}
.aiexp-subj-chip:hover {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.35);
}
.aiexp-subj-chip.is-active {
  background: linear-gradient(135deg, #43e97b, #38f9d7);
  color: #0d1530;
  border-color: transparent;
  font-weight: 600;
  box-shadow: 0 4px 14px rgba(67,233,123,0.35);
}

.aiexp-btn-similar {
  background: linear-gradient(135deg, #fa709a, #fee140) !important;
  color: #1a1f3a !important;
  font-weight: 600;
}
.aiexp-btn-similar svg { stroke: #1a1f3a; }
.aiexp-btn-similar:hover { box-shadow: 0 6px 20px rgba(250,112,154,0.4); transform: translateY(-1px); }

/* Markdown 渲染 */
.aiqa-answer-body .aiexp-h2 {
  margin: 16px 0 8px;
  font-size: 17px;
  color: #43e97b;
  border-left: 3px solid #43e97b;
  padding-left: 10px;
  text-shadow: 0 0 6px rgba(67,233,123,0.3);
}
.aiqa-answer-body .aiexp-h3 {
  margin: 14px 0 6px;
  font-size: 15px;
  color: #4facfe;
  border-left: 3px solid #4facfe;
  padding-left: 10px;
}
.aiqa-answer-body .aiexp-h4 {
  margin: 12px 0 4px;
  font-size: 14px;
  color: #fee140;
}
.aiqa-answer-body .aiexp-li-num {
  margin: 4px 0 4px 8px;
  padding: 6px 10px 6px 8px;
  background: rgba(255,255,255,0.03);
  border-left: 2px solid rgba(102,126,234,0.5);
  border-radius: 4px;
  font-size: 14px;
  line-height: 1.7;
}
.aiqa-answer-body .aiexp-li-mark {
  display: inline-block;
  min-width: 22px;
  color: #667eea;
  font-weight: 700;
  margin-right: 4px;
}
.aiqa-answer-body .aiexp-li-dot {
  margin: 4px 0 4px 12px;
  font-size: 14px;
  line-height: 1.7;
  color: rgba(255,255,255,0.92);
}
.aiqa-answer-body .aiexp-inline-code {
  padding: 1px 6px;
  margin: 0 2px;
  background: rgba(102,126,234,0.18);
  border-radius: 4px;
  color: #b5c4ff;
  font-family: 'SFMono-Regular', Consolas, monospace;
  font-size: 13px;
}
.aiqa-answer-body .aiexp-code {
  margin: 10px 0;
  padding: 10px 12px;
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  color: #b5c4ff;
  font-family: 'SFMono-Regular', Consolas, monospace;
  font-size: 13px;
  white-space: pre-wrap;
  overflow-x: auto;
}
.aiqa-answer-body p {
  margin: 6px 0;
  font-size: 14.5px;
  line-height: 1.8;
  color: rgba(255,255,255,0.92);
}
.aiqa-answer-body strong { color: #fff; }

/* 打字动画 */
.aiexp-typing {
  display: inline-flex; gap: 6px;
  padding: 12px 0;
}
.aiexp-typing span {
  width: 8px; height: 8px;
  background: linear-gradient(135deg, #43e97b, #38f9d7);
  border-radius: 50%;
  animation: aiexpBlink 1.2s ease-in-out infinite;
  box-shadow: 0 0 8px rgba(67,233,123,0.6);
}
.aiexp-typing span:nth-child(2) { animation-delay: 0.2s; }
.aiexp-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes aiexpBlink {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
  40% { transform: scale(1); opacity: 1; }
}

.aiexp-err {
  padding: 14px 16px;
  background: rgba(255,107,107,0.12);
  border: 1px solid rgba(255,107,107,0.4);
  border-radius: 10px;
  color: #ff9a9a;
  font-size: 14px;
}

/* 状态 pill 颜色 */
.aiqa-status-pill.is-thinking .aiqa-status-dot { background: #fee140; box-shadow: 0 0 8px #fee140; animation: aiqaPulse 1s ease-in-out infinite; }
.aiqa-status-pill.is-done .aiqa-status-dot { background: #43e97b; box-shadow: 0 0 8px #43e97b; }
.aiqa-status-pill.is-error .aiqa-status-dot { background: #ff6b6b; box-shadow: 0 0 8px #ff6b6b; }
@keyframes aiqaPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }

/* ============== 电子资料页 emat-* ============== */
.emat-page {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 24px;
  padding: 12px 4px 24px;
  max-width: 1400px;
  margin: 0 auto;
  height: 540px !important;
  max-height: 540px !important;
  overflow: hidden !important;
}
.emat-page > .emat-hero,
.emat-page > .emat-grid { height: 100% !important; max-height: 100% !important; min-height: 0 !important; overflow-y: auto !important; }
.emat-hero {
  position: relative;
  border-radius: 20px;
  background: linear-gradient(160deg, #2b1a5c 0%, #1e2b5c 45%, #14224a 100%);
  overflow: hidden;
  min-height: 0;
  box-shadow: 0 12px 40px rgba(102, 126, 234, 0.25), inset 0 0 0 1px rgba(255,255,255,0.06);
}
.emat-hero-inner {
  position: relative;
  z-index: 2;
  padding: 28px 24px 20px;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.emat-hero-badge {
  display: inline-block;
  align-self: flex-start;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  color: #fff;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  box-shadow: 0 4px 14px rgba(102,126,234,0.45);
  letter-spacing: 0.5px;
  margin-bottom: 14px;
}

.emat-hero-topline {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.emat-hero-topline .emat-hero-badge {
  margin-bottom: 0;
  height: 30px;
  padding: 0 14px;
  line-height: 30px;
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
}
.emat-hero-topline .emat-exam-dropdown { display: inline-flex; align-items: center; }
.emat-hero-topline .emat-exam-dd-btn {
  height: 30px;
  padding: 0 14px;
  line-height: 1;
  box-sizing: border-box;
}
.emat-exam-dropdown {
  position: relative;
  display: inline-block;
}
.emat-exam-dd-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, rgba(102,126,234,0.22), rgba(118,75,162,0.22));
  border: 1px solid rgba(255,255,255,0.22);
  color: #fff;
  padding: 4px 14px 4px 15px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  cursor: pointer;
  outline: none;
  transition: all 0.25s cubic-bezier(0.4,0,0.2,1);
  min-width: 140px;
  backdrop-filter: blur(8px);
  letter-spacing: 0.3px;
  box-shadow: 0 4px 14px rgba(102,126,234,0.15);
}
.emat-exam-dd-btn:hover {
  background: linear-gradient(135deg, rgba(102,126,234,0.4), rgba(118,75,162,0.4));
  border-color: rgba(102,126,234,0.7);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(102,126,234,0.28);
}
.emat-exam-dd-btn.is-open {
  background: linear-gradient(135deg, #667eea, #764ba2);
  border-color: #667eea;
  box-shadow: 0 6px 22px rgba(102,126,234,0.4);
}
.emat-exam-dd-label {
  flex: 1;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 160px;
}
.emat-exam-dd-arrow {
  font-size: 12px;
  opacity: 0.85;
  transition: transform 0.25s;
}
.emat-exam-dd-btn.is-open .emat-exam-dd-arrow {
  transform: rotate(180deg);
}
.emat-exam-dd-panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 220px;
  max-height: 320px;
  overflow-y: auto;
  background: linear-gradient(180deg, #262d52 0%, #1a1f3a 100%);
  border: 1px solid rgba(102,126,234,0.35);
  border-radius: 14px;
  padding: 6px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.03) inset;
  backdrop-filter: blur(20px);
  opacity: 0;
  transform: translateY(-8px) scale(0.96);
  pointer-events: none;
  transition: all 0.22s cubic-bezier(0.4,0,0.2,1);
  z-index: 100;
}
.emat-exam-dd-panel.is-open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.emat-exam-dd-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  color: rgba(255,255,255,0.82);
  font-size: 14px;
  font-weight: 500;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.18s ease;
  white-space: nowrap;
}
.emat-exam-dd-item:hover {
  background: linear-gradient(135deg, rgba(102,126,234,0.35), rgba(118,75,162,0.35));
  color: #fff;
  transform: translateX(2px);
}
.emat-exam-dd-item.is-selected {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(102,126,234,0.35);
}
.emat-exam-dd-item.is-selected::after {
  content: '✓';
  margin-left: auto;
  font-size: 14px;
  color: #fff;
}
.emat-exam-dd-item-icon {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: linear-gradient(135deg, #4facfe, #00f2fe);
  flex-shrink: 0;
}
.emat-exam-dd-empty {
  padding: 20px 14px;
  color: rgba(255,255,255,0.5);
  font-size: 13px;
  text-align: center;
}
/* 滚动条美化 */
.emat-exam-dd-panel::-webkit-scrollbar {
  width: 6px;
}
.emat-exam-dd-panel::-webkit-scrollbar-track {
  background: transparent;
}
.emat-exam-dd-panel::-webkit-scrollbar-thumb {
  background: rgba(102,126,234,0.35);
  border-radius: 3px;
}
.emat-exam-dd-panel::-webkit-scrollbar-thumb:hover {
  background: rgba(102,126,234,0.55);
}
.emat-hero-title {
  margin: 0 0 8px;
  font-size: 28px;
  font-weight: 800;
  color: #fff;
  line-height: 1.25;
  letter-spacing: 0.5px;
  text-shadow: 0 2px 12px rgba(102,126,234,0.35);
}
.emat-hero-accent {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.emat-hero-sub {
  margin: 0 0 14px;
  font-size: 13px;
  color: rgba(255,255,255,0.72);
  letter-spacing: 0.3px;
}
.emat-hero-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}
.emat-hero-tag {
  padding: 5px 11px;
  font-size: 12px;
  color: rgba(255,255,255,0.85);
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(102,126,234,0.35);
  backdrop-filter: blur(6px);
}
.emat-hero-img {
  width: 100%;
  max-width: 340px;
  height: 180px;
  max-height: 180px;
  object-fit: cover;
  object-position: center bottom;
  margin: auto auto 0;
  display: block;
  filter: drop-shadow(0 10px 32px rgba(102,126,234,0.35));
  animation: ematFloat 6s ease-in-out infinite;
}
@keyframes ematFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

/* ============= 考试倒计时卡片 ============= */
.emat-countdown-box {
  position: relative;
  z-index: 3;
  margin: 14px auto 0;
  max-width: 340px;
  width: 100%;
  padding: 14px 20px;
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.22) 0%, rgba(118, 75, 162, 0.28) 100%);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 18px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 10px 28px rgba(102, 126, 234, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.14);
  overflow: hidden;
  text-align: center;
}
.emat-countdown-box::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 100% 0%, rgba(102, 217, 255, 0.22) 0%, transparent 55%);
  pointer-events: none;
}
.emat-countdown-title {
  position: relative;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.82);
  letter-spacing: 0.6px;
  line-height: 1.4;
  margin-bottom: 8px;
}
.emat-countdown-title em {
  font-style: normal;
  color: #ffffff;
  font-weight: 600;
  background: linear-gradient(135deg, #a4c9ff 0%, #e0b3ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  padding: 0 2px;
}
.emat-countdown-days {
  position: relative;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
  line-height: 1;
}
.emat-cd-label {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.78);
  letter-spacing: 0.4px;
}
.emat-cd-num {
  font-size: 32px;
  font-weight: 800;
  background: linear-gradient(135deg, #ffd166 0%, #ff6b9d 55%, #b490ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: 1px;
  text-shadow: 0 4px 20px rgba(255, 209, 102, 0.35);
  padding: 0 6px;
  min-width: 40px;
  display: inline-block;
}
.emat-hero-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.55;
  pointer-events: none;
}
.emat-hero-glow-1 {
  top: -60px; right: -40px;
  width: 220px; height: 220px;
  background: radial-gradient(circle, rgba(102,126,234,0.8) 0%, rgba(102,126,234,0) 70%);
}
.emat-hero-glow-2 {
  bottom: -60px; left: -40px;
  width: 220px; height: 220px;
  background: radial-gradient(circle, rgba(79,172,254,0.7) 0%, rgba(79,172,254,0) 70%);
}
.emat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: minmax(150px, auto);
  gap: 18px;
}
.emat-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 22px;
  border-radius: 18px;
  cursor: pointer;
  overflow: hidden;
  color: #fff;
  transition: transform 0.3s cubic-bezier(0.4,0,0.2,1), box-shadow 0.3s cubic-bezier(0.4,0,0.2,1);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 6px 20px rgba(0,0,0,0.25);
}
.emat-card::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.92;
  z-index: 0;
}
.emat-card > * { position: relative; z-index: 1; }
.emat-card::after {
  content: '';
  position: absolute;
  top: -60%; right: -20%;
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(255,255,255,0.25) 0%, transparent 70%);
  z-index: 0;
  pointer-events: none;
}
.emat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 36px rgba(0,0,0,0.4);
}
.emat-card:active { transform: scale(0.98); }
.emat-card-1::before { background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); }
.emat-card-2::before { background: linear-gradient(135deg, #fa709a 0%, #fee140 100%); }
.emat-card-3::before { background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%); }
.emat-card-4::before { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
.emat-card-5::before { background: linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 50%, #764ba2 100%); }
.emat-card-wide { grid-column: 1 / -1; }
.emat-card-icon {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: rgba(255,255,255,0.2);
  border: 1px solid rgba(255,255,255,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  backdrop-filter: blur(6px);
}
.emat-card-icon svg { width: 28px; height: 28px; }
.emat-card-body { flex: 1; min-width: 0; }
.emat-card-title {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 4px;
  text-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
.emat-card-desc {
  font-size: 13px;
  color: rgba(255,255,255,0.88);
  margin-bottom: 8px;
}
.emat-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.emat-card-tags span {
  padding: 3px 9px;
  font-size: 11px;
  background: rgba(255,255,255,0.22);
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 999px;
  color: #fff;
  backdrop-filter: blur(4px);
}
.emat-card-arrow {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,0.22);
  border: 1px solid rgba(255,255,255,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  transition: transform 0.3s;
}
.emat-card:hover .emat-card-arrow {
  transform: translateX(4px);
  background: rgba(255,255,255,0.35);
}

@media (max-width: 1100px) {
  .emat-page { grid-template-columns: 300px 1fr; gap: 18px; }
  .emat-hero { min-height: 560px; }
  .emat-hero-title { font-size: 24px; }
  .emat-hero-img { max-width: 260px; max-height: 220px; }
}
@media (max-width: 820px) {
  .emat-page { grid-template-columns: 1fr; }
  .emat-hero { min-height: 260px; }
  .emat-hero-inner { flex-direction: row; padding: 20px; align-items: center; flex-wrap: wrap; }
  .emat-hero-img { max-width: 180px; margin: 0; }
  .emat-hero-tags { margin-bottom: 0; }
}
@media (max-width: 560px) {
  .emat-grid { grid-template-columns: 1fr; }
  .emat-card-wide { grid-column: auto; }
  .emat-hero-inner { flex-direction: column; }
  .emat-hero-img { margin: 12px auto 0; max-width: 200px; }
  .emat-card { padding: 16px 18px; }
  .emat-card-icon { width: 46px; height: 46px; }
  .emat-card-icon svg { width: 22px; height: 22px; }
  .emat-card-title { font-size: 16px; }
}

/* ============== 教材学习页 ============== */
/* 抵消 .main-content 的 padding-top: 20px，让页面顶部到导航实际间距 = 16px；左右总边距 = main-content 24 + 内 24 = 48px */
.page-content[data-page="textbook-study"] { margin-top: -20px; }
.ai-qa-container.textbook-container { padding: 0 24px; }
.textbook-container .ai-qa-header { margin-bottom: 16px; padding: 0; }

/* Banner - 极简紧凑版（无插图） */
.textbook-banner {
  position: relative;
  margin: 0 0 16px;
  padding: 8px 16px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(79,172,254,0.18), rgba(0,242,254,0.12) 40%, rgba(118,75,162,0.18));
  border: 1px solid rgba(79,172,254,0.3);
  overflow: hidden;
}
.textbook-banner-glow {
  position: absolute; inset: -40%;
  background: radial-gradient(circle at 30% 40%, rgba(79,172,254,0.35), transparent 60%),
              radial-gradient(circle at 80% 70%, rgba(250,112,154,0.25), transparent 55%);
  pointer-events: none;
}
.textbook-banner-inner {
  position: relative;
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px;
}
.textbook-banner-text {
  display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0;
}
.textbook-banner-title {
  margin: 0;
  font-size: 15px; font-weight: 700;
  background: linear-gradient(135deg, #4facfe, #fee140);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  white-space: nowrap;
}
.textbook-banner-sub { margin: 0; font-size: 12px; color: rgba(255,255,255,0.7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; }
.textbook-banner-stats { display: flex; gap: 6px; flex-shrink: 0; }
.textbook-banner-stat {
  padding: 3px 9px;
  border-radius: 7px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  min-width: 52px;
  text-align: center;
  display: flex; align-items: baseline; gap: 4px; justify-content: center;
}
.textbook-banner-stat-val {
  font-size: 14px; font-weight: 700; color: #fff;
  text-shadow: 0 0 8px rgba(79,172,254,0.5);
}
.textbook-banner-stat-key { font-size: 10.5px; color: rgba(255,255,255,0.65); margin-top: 0; }

/* 筛选 */
.textbook-filter {
  display: flex; flex-direction: column; gap: 10px;
  padding: 14px 16px;
  margin-bottom: 16px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
}
.textbook-filter-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.textbook-filter-label { color: rgba(255,255,255,0.7); font-size: 13px; min-width: 44px; flex-shrink: 0; }
.textbook-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.textbook-chip {
  padding: 4px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.85);
  font-size: 12.5px;
  cursor: pointer;
  transition: all .2s;
}
.textbook-chip:hover { background: rgba(255,255,255,0.12); }
.textbook-chip.is-active {
  background: linear-gradient(135deg, #4facfe, #00f2fe);
  color: #0d1530;
  border-color: transparent;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(79,172,254,0.4);
}
.textbook-search {
  display: flex; align-items: center; gap: 8px;
  margin-top: 4px;
  padding: 8px 14px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px;
}
.textbook-search input {
  flex: 1; background: transparent; border: none; outline: none;
  color: #fff; font-size: 13.5px;
}
.textbook-search input::placeholder { color: rgba(255,255,255,0.4); }

/* 教材网格 */
.textbook-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
  padding: 4px;
}
.textbook-card {
  position: relative;
  padding: 16px 14px 14px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 14px;
  cursor: pointer;
  transition: all .3s cubic-bezier(0.4,0,0.2,1);
  display: flex; flex-direction: column; gap: 10px;
}
.textbook-card:hover {
  transform: translateY(-4px);
  background: rgba(255,255,255,0.09);
  border-color: rgba(79,172,254,0.5);
  box-shadow: 0 8px 24px rgba(79,172,254,0.25);
}
.textbook-card-cover {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--book-c1, #4facfe), var(--book-c2, #764ba2));
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  overflow: hidden;
  box-shadow: 2px 2px 0 rgba(0,0,0,0.2), inset 4px 0 0 rgba(0,0,0,0.15);
}
.textbook-card-cover::before {
  content: '';
  position: absolute;
  left: 6px; top: 0; bottom: 0;
  width: 2px;
  background: rgba(255,255,255,0.25);
}
.textbook-card-cover-text {
  text-align: center; padding: 16px 10px;
  z-index: 1;
}
.textbook-card-cover-subj {
  font-size: 22px; font-weight: 700;
  letter-spacing: 2px;
  text-shadow: 0 2px 6px rgba(0,0,0,0.3);
}
.textbook-card-cover-grade { font-size: 12px; margin-top: 6px; opacity: 0.9; }
.textbook-card-cover-edition { font-size: 10px; margin-top: 4px; opacity: 0.7; padding: 2px 8px; background: rgba(255,255,255,0.2); border-radius: 8px; display: inline-block; }
.textbook-card-meta { display: flex; flex-direction: column; gap: 2px; }
.textbook-card-title { font-size: 14px; color: #fff; font-weight: 600; line-height: 1.4; }
.textbook-card-sub { font-size: 12px; color: rgba(255,255,255,0.6); display: flex; align-items: center; gap: 6px; }
.textbook-card-sub .dot { width: 3px; height: 3px; background: rgba(255,255,255,0.4); border-radius: 50%; }
.textbook-empty {
  grid-column: 1/-1;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 40px 16px;
  color: rgba(255,255,255,0.5);
  font-size: 13px;
}

/* ============== 教材阅读器（翻页） ============== */
/* 阅读器打开时隐藏外层"教材学习"导航头，让阅读器占满 */
.textbook-container.reader-open > .ai-qa-header {
  display: none !important;
}
.textbook-container.reader-open {
  padding-top: 0 !important;
}

.reader-toolbar {
  display: flex; align-items: center; gap: 16px;
  padding: 10px 14px;
  margin-bottom: 14px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
}
.reader-close-btn { padding: 6px 12px !important; }
.reader-title {
  flex: 1;
  font-size: 16px; font-weight: 600; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.reader-fullscreen-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 10px;
  color: rgba(255,255,255,0.9);
  font-size: 13px; cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4,0,0.2,1);
  flex-shrink: 0;
}
.reader-fullscreen-btn:hover {
  background: rgba(102,126,234,0.28);
  border-color: rgba(102,126,234,0.6);
  color: #fff;
}
.reader-fullscreen-btn:active { transform: scale(0.95); }
.reader-fullscreen-btn svg { display: block; }

/* 全屏态下阅读容器铺满 */
#textbook-reader-view.is-fullscreen {
  background: linear-gradient(135deg, #1a1f3a 0%, #2d3561 100%);
  padding: 20px;
  height: 100vh; width: 100vw;
  display: flex; flex-direction: column;
}
#textbook-reader-view.is-fullscreen .reader-stage {
  flex: 1;
  padding: 20px 20px 10px;
  min-height: 0;
}
#textbook-reader-view.is-fullscreen .reader-book {
  width: min(1600px, calc(100vw - 200px));
  max-height: calc(100vh - 160px);
  aspect-ratio: 3 / 2;
}
#textbook-reader-view.is-fullscreen .reader-arrow {
  width: 56px; height: 56px;
}
#textbook-reader-view.is-fullscreen .reader-toolbar {
  padding: 14px 22px;
}
.reader-progress {
  display: flex; align-items: center; gap: 10px;
  font-size: 12px; color: rgba(255,255,255,0.7);
}
.reader-progress-bar {
  width: 140px; height: 4px;
  background: rgba(255,255,255,0.1);
  border-radius: 2px;
  overflow: hidden;
}
.reader-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #4facfe, #00f2fe);
  border-radius: 2px;
  width: 0%;
  transition: width 0.3s ease;
}

.reader-stage {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  gap: 18px;
  padding: 30px 20px;
  perspective: 2200px;
  min-height: 540px;
}
.reader-arrow {
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.08);
  color: #fff;
  cursor: pointer;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  transition: all .25s;
  backdrop-filter: blur(8px);
}
.reader-arrow:hover {
  background: linear-gradient(135deg, #4facfe, #764ba2);
  transform: scale(1.08);
  box-shadow: 0 6px 18px rgba(79,172,254,0.4);
}
.reader-arrow:disabled {
  opacity: 0.3; cursor: not-allowed;
  background: rgba(255,255,255,0.05);
  transform: none; box-shadow: none;
}

/* 书本本体 */
.reader-book {
  position: relative;
  display: flex;
  width: min(900px, 92%);
  aspect-ratio: 3 / 2;
  background: rgba(0,0,0,0.2);
  border-radius: 6px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.6), 0 0 0 2px rgba(255,255,255,0.04);
  transform-style: preserve-3d;
}
.reader-page {
  position: relative;
  width: 50%;
  background: linear-gradient(135deg, #fdfcf7 0%, #f6f3ea 100%);
  color: #1a1f3a;
  padding: 36px 36px;
  overflow: hidden;
  box-shadow: inset 0 0 30px rgba(0,0,0,0.04);
}
.reader-page-left {
  border-radius: 6px 0 0 6px;
  box-shadow: inset -8px 0 16px -10px rgba(0,0,0,0.35);
}
.reader-page-right {
  border-radius: 0 6px 6px 0;
  box-shadow: inset 8px 0 16px -10px rgba(0,0,0,0.35);
}
.reader-page-content {
  height: 100%;
  overflow-y: auto;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '宋体', serif;
  font-size: 14px;
  line-height: 1.9;
  color: #2a2f4a;
}
.reader-page-content::-webkit-scrollbar { width: 4px; }
.reader-page-content::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); border-radius: 2px; }
/* 资料查阅阅读器 - 图片撑满页面宽度，高度自适应 */
.rm-reader .reader-page-content img,
.reader-page-content .mt-page-img,
.reader-page-content img.rm-reader-page-img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  margin: 0 auto;
  border-radius: 6px;
}
.reader-page-empty {
  display: flex; align-items: center; justify-content: center;
  height: 100%;
  color: #b0b5c8;
  font-size: 16px;
  letter-spacing: 4px;
}
.reader-page-number {
  position: absolute;
  bottom: 16px; left: 0; right: 0;
  text-align: center;
  font-size: 11px;
  color: #999;
  letter-spacing: 1px;
}
.reader-page-left .reader-page-number { text-align: left; padding-left: 36px; }
.reader-page-right .reader-page-number { text-align: right; padding-right: 36px; }

.reader-spine {
  position: absolute;
  left: 50%; top: 0; bottom: 0;
  width: 4px;
  background: linear-gradient(to right, rgba(0,0,0,0.3), rgba(0,0,0,0.05), rgba(0,0,0,0.3));
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 4;
}

/* 翻页层 */
.reader-flip-layer {
  position: absolute;
  left: 50%; top: 0;
  width: 50%; height: 100%;
  transform-origin: left center;
  transform-style: preserve-3d;
  transition: transform 0.7s cubic-bezier(0.4, 0.0, 0.2, 1);
  z-index: 3;
  display: none;
}
.reader-flip-layer.is-flipping { display: block; }
.reader-flip-layer.flip-forward { transform: rotateY(-180deg); }
.reader-flip-layer.flip-backward {
  left: 0;
  transform-origin: right center;
  transform: rotateY(0deg);
}
.reader-flip-layer.flip-backward.is-flipping { transform: rotateY(0deg); }
.reader-flip-front, .reader-flip-back {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #fdfcf7 0%, #f6f3ea 100%);
  color: #1a1f3a;
  padding: 36px 36px;
  backface-visibility: hidden;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '宋体', serif;
  font-size: 14px;
  line-height: 1.9;
}
.reader-flip-back {
  transform: rotateY(180deg);
}

/* 页内 markdown 样式 */
.reader-page-content h1, .reader-flip-front h1, .reader-flip-back h1 {
  font-size: 22px; color: #1a1f3a; margin: 0 0 14px;
  padding-bottom: 8px;
  border-bottom: 2px solid #4facfe;
}
.reader-page-content h2, .reader-flip-front h2, .reader-flip-back h2 {
  font-size: 17px; color: #2d3561; margin: 16px 0 8px;
  padding-left: 10px;
  border-left: 4px solid #4facfe;
}
.reader-page-content h3, .reader-flip-front h3, .reader-flip-back h3 {
  font-size: 15px; color: #444; margin: 12px 0 6px;
}
.reader-page-content p, .reader-flip-front p, .reader-flip-back p {
  margin: 8px 0;
  text-indent: 2em;
  color: #2a2f4a;
}
.reader-page-content ul, .reader-flip-front ul, .reader-flip-back ul,
.reader-page-content ol, .reader-flip-front ol, .reader-flip-back ol {
  padding-left: 26px; margin: 8px 0;
}
.reader-page-content li, .reader-flip-front li, .reader-flip-back li {
  margin: 4px 0;
}
.reader-page-content strong, .reader-flip-front strong, .reader-flip-back strong {
  color: #c0392b;
}
.reader-page-content .reader-figure {
  margin: 14px auto;
  padding: 14px;
  background: linear-gradient(135deg, #eef5ff, #f3eafc);
  border-radius: 8px;
  text-align: center;
  font-size: 13px;
  color: #555;
  border: 1px dashed #bbb;
}

.reader-footer {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 10px;
}
.reader-pageinfo-bottom {
  font-size: 11px;
  color: rgba(255,255,255,0.55);
  letter-spacing: 0.5px;
}

.reader-hint {
  text-align: center;
  margin-top: 8px;
  font-size: 12px;
  color: rgba(255,255,255,0.5);
}

/* 响应式 */
@media (max-width: 900px) {
  .reader-book { aspect-ratio: auto; height: 60vh; }
  .reader-page { padding: 20px 18px; }
  .textbook-banner-art { display: none; }
  .textbook-banner-sub { display: none; }
}
@media (max-width: 600px) {
  .reader-book { flex-direction: column; height: auto; }
  .reader-page { width: 100%; }
  .reader-page-left { display: none; }
  .reader-page-right { border-radius: 6px; }
  .reader-spine { display: none; }
  .reader-flip-layer { width: 100%; left: 0 !important; }
  .textbook-banner { padding: 8px 12px; }
  .textbook-banner-title { font-size: 15px; }
  .textbook-banner-stat { padding: 3px 8px; min-width: 46px; }
  .textbook-banner-stat-val { font-size: 13px; }
}

/* ============ 刷题模考页 ============ */
.ep-page { min-height: 100%; padding-top: 8px; }
.ep-header { display: flex; align-items: center; gap: 14px; padding: 0 20px; margin-bottom: 16px; }
.ep-back-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 32px; padding: 0 14px 0 12px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 999px;
  color: rgba(255,255,255,0.85);
  font-size: 13px; font-weight: 500; line-height: 1;
  cursor: pointer; transition: all 0.25s cubic-bezier(0.4,0,0.2,1);
  box-sizing: border-box;
}
.ep-back-btn svg { display: block; }
.ep-back-btn:hover { background: rgba(102,126,234,0.35); border-color: rgba(102,126,234,0.6); color: #fff; transform: translateX(-2px); }
.ep-header-sub {
  display: inline-flex; align-items: center; height: 32px; padding: 0 14px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(250,112,154,0.18), rgba(254,225,64,0.18));
  border: 1px solid rgba(250,112,154,0.45);
  color: #fee140; font-size: 13px; font-weight: 500; letter-spacing: 0.4px;
  text-shadow: 0 0 8px rgba(254,225,64,0.35);
  line-height: 1; box-sizing: border-box;
}
.ep-body { display: grid; grid-template-columns: 340px 1fr; gap: 20px; padding: 0 20px 24px; }
.ep-left-card {
  background: linear-gradient(160deg, rgba(102,126,234,0.14), rgba(118,75,162,0.08));
  border: 1px solid rgba(102,126,234,0.22);
  border-radius: 18px; padding: 20px; position: relative; overflow: hidden;
  box-shadow: 0 6px 24px rgba(0,0,0,0.18);
}
.ep-left-card::before {
  content: ''; position: absolute; top: -60px; right: -60px;
  width: 180px; height: 180px; border-radius: 50%;
  background: radial-gradient(circle, rgba(79,172,254,0.28), transparent 70%);
  pointer-events: none;
}
.ep-left-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; position: relative; z-index: 1; }
.ep-left-title { font-size: 16px; font-weight: 700; color: #fff; letter-spacing: 0.4px; }
.ep-left-sub { font-size: 12px; color: rgba(255,255,255,0.6); margin-top: 4px; display: flex; align-items: center; gap: 4px; }
.ep-subject-dropdown { position: relative; display: inline-block; }
.ep-subject-dd-btn {
  height: 28px; padding: 0 28px 0 10px; border: 1px solid rgba(102,126,234,0.35); border-radius: 6px;
  background: rgba(102,126,234,0.12); color: #fff; font-size: 12px; font-weight: 500; cursor: pointer;
  white-space: nowrap; outline: none; transition: all .2s; position: relative;
}
.ep-subject-dd-btn:hover { border-color: rgba(102,126,234,0.65); background: rgba(102,126,234,0.22); }
.ep-subject-dd-btn::after {
  content: '▾'; position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  font-size: 10px; color: rgba(255,255,255,0.6); transition: transform .2s;
}
.ep-subject-dd-btn.open { background: rgba(102,126,234,0.3); }
.ep-subject-dd-btn.open::after { transform: translateY(-50%) rotate(180deg); }
.ep-subject-dd-panel {
  display: none; position: absolute; left: 0; top: calc(100% + 4px); min-width: 140px;
  background: linear-gradient(135deg, #262d52, #1a1f3a); border: 1px solid rgba(102,126,234,0.3);
  border-radius: 10px; padding: 4px; z-index: 999; box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  max-height: 220px; overflow-y: auto;
}
.ep-subject-dd-panel.open { display: block; }
.ep-subject-dd-item {
  padding: 6px 12px; border-radius: 6px; font-size: 12px; color: rgba(255,255,255,0.8);
  cursor: pointer; transition: all .15s; white-space: nowrap;
}
.ep-subject-dd-item:hover { background: rgba(102,126,234,0.25); color: #fff; }
.ep-subject-dd-item.active { background: linear-gradient(135deg, #667eea, #764ba2); color: #fff; font-weight: 600; }
.ep-sections-title { font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.85); margin: 10px 0 6px; padding-left: 2px; }
.ep-donut { position: relative; width: 90px; height: 90px; flex-shrink: 0; }
.ep-donut svg { display: block; }
#ep-donut-fill { transition: stroke-dashoffset 0.9s cubic-bezier(0.4,0,0.2,1); }
.ep-donut-value { position: absolute; top: 42%; left: 50%; transform: translate(-50%,-50%); font-size: 18px; font-weight: 700; color: #fff; }
.ep-donut-label { position: absolute; top: 65%; left: 50%; transform: translate(-50%,-50%); font-size: 10px; color: rgba(255,255,255,0.65); }
.ep-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 16px 0; position: relative; z-index: 1; }
.ep-stat { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; padding: 10px 6px; text-align: center; }
.ep-stat-num { font-size: 18px; font-weight: 700; background: linear-gradient(135deg,#4facfe,#00f2fe); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ep-stat-label { font-size: 11px; color: rgba(255,255,255,0.6); margin-top: 3px; }
.ep-subjects { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; position: relative; z-index: 1; max-height: 340px; overflow-y: auto; }
.ep-subjects::-webkit-scrollbar { width: 4px; }
.ep-subjects::-webkit-scrollbar-thumb { background: rgba(102,126,234,0.35); border-radius: 4px; }
.ep-subject-item { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; padding: 10px 12px; }
.ep-subject-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.ep-subject-name { font-size: 13px; font-weight: 600; color: #fff; }
.ep-subject-level { font-size: 11px; padding: 2px 8px; border-radius: 999px; font-weight: 600; }
.ep-level-strong { background: rgba(67,233,123,0.2); color: #43e97b; border: 1px solid rgba(67,233,123,0.4); }
.ep-level-mid { background: rgba(254,225,64,0.2); color: #fee140; border: 1px solid rgba(254,225,64,0.4); }
.ep-level-weak { background: rgba(255,107,107,0.2); color: #ff8a8a; border: 1px solid rgba(255,107,107,0.4); }
.ep-subject-bar { height: 6px; background: rgba(255,255,255,0.08); border-radius: 999px; overflow: hidden; }
.ep-subject-fill { height: 100%; border-radius: 999px; transition: width 0.6s cubic-bezier(0.4,0,0.2,1); }
.ep-empty { text-align: center; color: rgba(255,255,255,0.5); font-size: 12px; padding: 20px 0; }
.ep-func-grid { display: grid; gap: 14px; }
.ep-func-grid + .ep-func-grid { margin-top: 14px; }
.ep-func-grid-mix { grid-template-columns: repeat(6, 1fr); }
.ep-span-2 { grid-column: span 2; }
.ep-span-3 { grid-column: span 3; }
.ep-func-card {
  position: relative; overflow: hidden;
  border-radius: 16px; padding: 18px; cursor: pointer;
  border: 1px solid rgba(255,255,255,0.14);
  transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
  min-height: 140px; display: flex; flex-direction: column;
}
.ep-func-card::before {
  content: ''; position: absolute; top: -50px; right: -50px;
  width: 130px; height: 130px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.18), transparent 70%);
  pointer-events: none;
}
/* 科技感网格纹理背景 */
.ep-func-card::after {
  content: ''; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: radial-gradient(ellipse at bottom left, rgba(0,0,0,0.7), transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at bottom left, rgba(0,0,0,0.7), transparent 70%);
  pointer-events: none; opacity: 0.7;
  transition: opacity 0.3s;
}
.ep-func-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0,0,0,0.3); }
.ep-func-card:hover::after { opacity: 1; }
.ep-func-card:active { transform: scale(0.98); }
.ep-fc-1 { background: linear-gradient(135deg, #4facfe 0%, #00c6ff 100%); }
.ep-fc-2 { background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%); }
.ep-fc-3 { background: linear-gradient(135deg, #fa709a 0%, #fee140 100%); }
.ep-fc-4 { background: linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%); }
.ep-fc-5 { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
.ep-fc-6 { background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%); color: #2d3561; }
.ep-func-icon { font-size: 32px; line-height: 1; margin-bottom: 8px; filter: drop-shadow(0 2px 8px rgba(0,0,0,0.2)); }
/* 科技感 SVG 图标：圆形玻璃背板 + 发光 + 悬停动效 */
.ep-func-icon-svg {
  position: relative; z-index: 1;
  width: 52px; height: 52px; margin-bottom: 10px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(255,255,255,0.28), rgba(255,255,255,0.08));
  border: 1px solid rgba(255,255,255,0.35);
  box-shadow:
    0 6px 18px rgba(0,0,0,0.2),
    inset 0 1px 0 rgba(255,255,255,0.4),
    inset 0 -6px 12px rgba(0,0,0,0.08);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: all 0.4s cubic-bezier(0.4,0,0.2,1);
}
.ep-func-icon-svg svg {
  width: 34px; height: 34px;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.25));
  transition: transform 0.5s cubic-bezier(0.4,0,0.2,1);
}
.ep-func-icon-dark {
  background: linear-gradient(135deg, rgba(45,53,97,0.18), rgba(45,53,97,0.06));
  border-color: rgba(45,53,97,0.35);
  box-shadow:
    0 6px 18px rgba(45,53,97,0.15),
    inset 0 1px 0 rgba(255,255,255,0.35);
}
.ep-func-icon-dark svg { filter: drop-shadow(0 2px 4px rgba(45,53,97,0.2)); }
.ep-func-card:hover .ep-func-icon-svg {
  transform: translateY(-2px) rotate(-3deg);
  box-shadow:
    0 10px 28px rgba(0,0,0,0.28),
    inset 0 1px 0 rgba(255,255,255,0.5),
    0 0 24px rgba(255,255,255,0.35);
}
.ep-func-card:hover .ep-func-icon-svg svg { transform: scale(1.08); }
.ep-func-title { font-size: 16px; font-weight: 700; color: #fff; letter-spacing: 0.3px; margin-bottom: 4px; position: relative; z-index: 1; }
.ep-fc-6 .ep-func-title { color: #2d3561; }
.ep-func-desc { font-size: 12px; color: rgba(255,255,255,0.85); flex: 1; position: relative; z-index: 1; }
.ep-fc-6 .ep-func-desc { color: rgba(45,53,97,0.7); }
.ep-func-arrow { position: absolute; right: 16px; bottom: 14px; font-size: 20px; color: #fff; opacity: 0.7; transition: all 0.3s; z-index: 1; }
.ep-fc-6 .ep-func-arrow { color: #2d3561; }
.ep-func-card:hover .ep-func-arrow { opacity: 1; transform: translateX(4px); }
@media (max-width: 900px) {
  .ep-body { grid-template-columns: 1fr; }
  .ep-func-grid-mix { grid-template-columns: repeat(6, 1fr); }
  .ep-span-2, .ep-span-3 { grid-column: span 3; }
}
@media (max-width: 560px) {
  .ep-func-grid-mix { grid-template-columns: 1fr; }
  .ep-span-2, .ep-span-3 { grid-column: 1 / -1; }
}

/* ============== 辅导课程列表页 ============== */
.tutor-banner {
  margin: 0 0 14px;
  padding: 14px 20px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(102,126,234,0.28), rgba(118,75,162,0.18));
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 8px 24px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.08);
  position: relative;
  overflow: hidden;
}
.tutor-banner::before {
  content: '';
  position: absolute;
  top: -40px; right: -40px;
  width: 140px; height: 140px;
  background: radial-gradient(circle, rgba(102,126,234,0.4), transparent 70%);
  border-radius: 50%;
}
.tutor-banner-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  position: relative;
  z-index: 1;
}
.tutor-banner-left { min-width: 0; }
.tutor-banner-title {
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.5px;
}
.tutor-hi-grad {
  background: linear-gradient(135deg, #4facfe, #00f2fe);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.tutor-banner-sub {
  margin-top: 4px;
  font-size: 12.5px;
  color: rgba(255,255,255,0.75);
}
.tutor-banner-stats {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}
.tutor-stat {
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.18);
  display: flex;
  align-items: baseline;
  gap: 6px;
  color: #fff;
}
.tutor-stat-num {
  font-size: 18px;
  font-weight: 800;
  color: #4facfe;
  line-height: 1;
}
.tutor-stat-label {
  font-size: 11.5px;
  color: rgba(255,255,255,0.7);
}

/* 筛选行 chip */
/* 辅导课程页顶部 header 定制 */
.tutor-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 24px;
  margin-bottom: 16px;
}
.tutor-back-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 14px 0 12px !important;
  width: auto !important;
  height: 32px !important;
  min-height: 32px !important;
  line-height: 1 !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,0.08) !important;
  color: #fff !important;
  font-size: 13px;
  font-weight: 500;
  box-sizing: border-box;
  font-weight: 500;
  transition: all 0.2s ease;
  box-sizing: border-box;
}
.tutor-back-btn svg {
  display: block;
  flex-shrink: 0;
}
.tutor-back-btn span {
  display: inline-block;
  line-height: 1;
  position: relative;
  top: 0;
}
.tutor-back-btn:hover {
  background: rgba(102,126,234,0.35) !important;
  transform: translateX(-2px);
}
.tutor-back-btn svg { flex-shrink: 0; }
.tutor-back-btn span { line-height: 1; }
.tutor-header-sub {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 14px;
  margin-left: 4px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(67,233,123,0.18), rgba(56,249,215,0.18));
  border: 1px solid rgba(67,233,123,0.45);
  color: #43e97b;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.4px;
  text-shadow: 0 0 8px rgba(67,233,123,0.4);
  box-sizing: border-box;
}

/* 考试科目筛选 chip */
.tutor-filter-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 0 24px;
  margin-bottom: 16px;
}
.tutor-filter-label {
  color: rgba(255,255,255,0.65);
  font-size: 13px;
  margin-right: 4px;
}
.tutor-chip {
  padding: 6px 16px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.75);
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.tutor-chip:hover {
  background: rgba(102,126,234,0.22);
  color: #fff;
  border-color: rgba(102,126,234,0.5);
}
.tutor-chip.active {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 4px 12px rgba(102,126,234,0.4);
}
.tutor-filter-empty {
  color: rgba(255,255,255,0.6);
  font-size: 13px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(250,112,154,0.18);
  border: 1px solid rgba(250,112,154,0.3);
}

.tutor-current-type {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(102,126,234,0.24), rgba(118,75,162,0.24));
  border: 1px solid rgba(102,126,234,0.42);
  color: rgba(255,255,255,0.85);
  font-size: 13px;
  font-weight: 500;
  box-shadow: 0 4px 14px rgba(102,126,234,0.15);
}
.tutor-current-type span {
  color: #fff;
  font-weight: 700;
  background: linear-gradient(135deg, #4facfe, #00f2fe);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.tutor-current-type-warn {
  background: linear-gradient(135deg, rgba(250,112,154,0.22), rgba(254,225,64,0.22));
  border-color: rgba(250,112,154,0.42);
  color: rgba(255,255,255,0.85);
}
.tutor-chip {
  height: 32px;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.82);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  user-select: none;
}
.tutor-chip:hover {
  background: rgba(102,126,234,0.22);
  border-color: rgba(102,126,234,0.5);
  color: #fff;
  transform: translateY(-1px);
}
.tutor-chip.active {
  background: linear-gradient(135deg, #667eea, #764ba2);
  border-color: rgba(255,255,255,0.4);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 6px 18px rgba(102,126,234,0.5);
}

/* 课程卡片网格 */
.tutor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
  padding: 0 24px 24px;
}
.tutor-course-card {
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}
.tutor-course-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(102,126,234,0), rgba(102,126,234,0));
  pointer-events: none;
  transition: background 0.3s;
}
.tutor-course-card:hover {
  transform: translateY(-4px);
  border-color: rgba(102,126,234,0.5);
  box-shadow: 0 14px 40px rgba(102,126,234,0.35), 0 4px 12px rgba(0,0,0,0.2);
}
.tutor-course-card:hover::before {
  background: linear-gradient(135deg, rgba(102,126,234,0.1), rgba(118,75,162,0.05));
}
.tutor-course-card:active { transform: translateY(-2px) scale(0.98); }
.tutor-course-cover {
  height: 130px;
  background: linear-gradient(135deg, #4facfe, #667eea);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.tutor-course-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tutor-cover-fallback {
  font-size: 48px;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.25));
}
.tutor-cat {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,0.4);
  backdrop-filter: blur(8px);
  color: #fff;
  font-size: 11px;
  font-weight: 500;
  z-index: 1;
}
.tutor-course-body {
  flex: 1;
  padding: 14px 16px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.tutor-course-title {
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  min-height: 42px;
}
.tutor-course-desc {
  font-size: 12.5px;
  color: rgba(255,255,255,0.62);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.tutor-course-meta {
  margin-top: auto;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 11.5px;
  color: rgba(255,255,255,0.7);
}
.tutor-meta-item { display: inline-flex; align-items: center; gap: 3px; }
.tutor-course-cta {
  padding: 10px 16px 12px;
  border-top: 1px solid rgba(255,255,255,0.08);
  font-size: 12.5px;
  color: #4facfe;
  font-weight: 600;
  letter-spacing: 0.4px;
  transition: color 0.2s;
}
.tutor-course-card:hover .tutor-course-cta { color: #00f2fe; }

/* 空状态 */
.tutor-empty {
  grid-column: 1 / -1;
  padding: 60px 24px;
  text-align: center;
  color: rgba(255,255,255,0.6);
}
.tutor-empty-icon { font-size: 48px; margin-bottom: 12px; opacity: 0.7; }
.tutor-empty-text { font-size: 14px; }

/* 响应式 */
@media (max-width: 900px) {
  .tutor-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
  .tutor-banner-title { font-size: 16px; }
  .tutor-course-cover { height: 110px; }
}
@media (max-width: 560px) {
  .tutor-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .tutor-banner { padding: 10px 14px; }
  .tutor-banner-inner { flex-direction: column; align-items: flex-start; gap: 8px; }
  .tutor-course-title { font-size: 13.5px; min-height: 38px; }
}

/* ================= 复习资料页 ================= */
.rm-page { padding: 0 20px 40px; }
.rm-header {
  display: flex; align-items: center; gap: 12px;
  padding: 20px 0 12px;
}
.rm-header .ep-back-btn {
  display: inline-flex; align-items: center; gap: 4px;
  height: 32px; padding: 0 14px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 999px;
  color: #fff; font-size: 13px; line-height: 1;
  cursor: pointer;
  transition: all .25s ease;
  box-sizing: border-box;
}
.rm-header .ep-back-btn:hover {
  background: rgba(102, 126, 234, 0.28);
  border-color: rgba(102, 126, 234, 0.55);
}
.rm-header .ep-header-sub {
  display: inline-flex; align-items: center;
  height: 32px; padding: 0 14px; line-height: 1;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(72, 236, 172, 0.18), rgba(56, 219, 143, 0.1));
  border: 1px solid rgba(72, 236, 172, 0.4);
  color: #a7f3d0; font-size: 13px; letter-spacing: 0.5px;
  box-sizing: border-box;
}

.rm-toolbar {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; margin-bottom: 20px; flex-wrap: wrap;
}
.rm-title-block .rm-title {
  font-size: 22px; font-weight: 700;
  background: linear-gradient(135deg, #c9d6ff, #a1b7ff);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; letter-spacing: 0.5px;
}
.rm-title-block .rm-subtitle {
  margin-top: 4px; color: rgba(255,255,255,0.55); font-size: 12.5px;
}
.rm-filter-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.rm-chip {
  height: 30px; padding: 0 14px; line-height: 1;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.8);
  font-size: 12.5px; cursor: pointer;
  transition: all .25s ease;
}
.rm-chip:hover { background: rgba(102,126,234,0.2); border-color: rgba(102,126,234,0.5); color: #fff; }
.rm-chip.active {
  background: linear-gradient(135deg, #667eea, #764ba2);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 4px 18px rgba(102,126,234,0.4);
}

.rm-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-top: 0;
}
@media (max-width: 720px) {
  .rm-grid { grid-template-columns: 1fr; }
}

.rm-card {
  position: relative;
  display: flex; flex-direction: column;
  background: linear-gradient(160deg, rgba(30, 37, 68, 0.9), rgba(20, 24, 48, 0.9));
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px; overflow: hidden;
  cursor: pointer;
  transition: transform .3s cubic-bezier(0.4, 0, 0.2, 1), border-color .3s, box-shadow .3s;
}
.rm-card::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(102,126,234,0.0), rgba(118,75,162,0.0));
  transition: background .3s;
  pointer-events: none;
}
.rm-card:hover {
  transform: translateY(-6px);
  border-color: rgba(102,126,234,0.5);
  box-shadow: 0 18px 44px rgba(0,0,0,0.5), 0 0 0 1px rgba(102,126,234,0.3);
}
.rm-card:hover::before { background: linear-gradient(135deg, rgba(102,126,234,0.08), rgba(118,75,162,0.05)); }

.rm-card-cover {
  position: relative;
  aspect-ratio: 3 / 4; overflow: hidden;
  background: linear-gradient(135deg, #2a3061 0%, #1a1f3a 100%);
}
.rm-card-cover img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s cubic-bezier(0.4, 0, 0.2, 1);
}
.rm-card:hover .rm-card-cover img { transform: scale(1.06); }
.rm-cover-fallback {
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.rm-cover-fallback::before {
  content: '📘';
  font-size: 64px; opacity: 0.6;
}
.rm-card-glow {
  position: absolute; inset: -20% -20% auto auto; width: 60%; aspect-ratio: 1;
  background: radial-gradient(circle, rgba(102,126,234,0.25), transparent 70%);
  filter: blur(8px);
  pointer-events: none;
}
.rm-card-body {
  padding: 14px 16px 12px;
  display: flex; flex-direction: column; gap: 6px;
  flex: 1;
}
.rm-card-title {
  font-size: 15px; font-weight: 600; color: #fff;
  line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 42px;
}
.rm-card-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.rm-card-tag {
  padding: 2px 8px; border-radius: 6px;
  font-size: 11px; line-height: 1.5;
  border: 1px solid transparent;
}
.rm-card-tag-sub {
  background: rgba(72, 236, 172, 0.14);
  border-color: rgba(72, 236, 172, 0.35);
  color: #6ee7b7;
}
.rm-card-tag-type {
  background: rgba(102,126,234,0.16);
  border-color: rgba(102,126,234,0.4);
  color: #a5b4fc;
}
.rm-card-desc {
  color: rgba(255,255,255,0.55);
  font-size: 12px; line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: auto;
}
.rm-card-arrow {
  position: absolute; right: 14px; bottom: 14px;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea, #764ba2);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  opacity: 0; transform: translateX(-4px);
  transition: opacity .3s, transform .3s;
  box-shadow: 0 6px 20px rgba(102,126,234,0.5);
}
.rm-card:hover .rm-card-arrow { opacity: 1; transform: translateX(0); }

.rm-empty {
  grid-column: 1 / -1;
  padding: 60px 20px;
  text-align: center;
  color: rgba(255,255,255,0.6);
}
.rm-empty-icon { font-size: 64px; margin-bottom: 12px; opacity: 0.8; }
.rm-empty-title { font-size: 16px; font-weight: 600; color: #fff; margin-bottom: 6px; }
.rm-empty-desc { font-size: 13px; color: rgba(255,255,255,0.5); }

/* 阅读器 */
.rm-reader {
  position: fixed; inset: 0;
  background: linear-gradient(135deg, #0e1329 0%, #1a1f3a 100%);
  z-index: 9999;
  display: none;
  flex-direction: column;
}
.rm-reader.active { display: flex; }
.rm-reader:fullscreen,
.rm-reader.is-fullscreen {
  width: 100vw !important;
  height: 100vh !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: rgba(10, 15, 40, 0.98) !important;
  z-index: 999999 !important;
  display: flex !important;
}
.rm-reader:fullscreen .reader-stage,
.rm-reader.is-fullscreen .reader-stage { flex: 1; padding: 20px 20px 10px; min-height: 0; }
.rm-reader:fullscreen .reader-book,
.rm-reader.is-fullscreen .reader-book {
  width: min(1600px, calc(100vw - 200px));
  max-height: calc(100vh - 160px);
  aspect-ratio: 3 / 2;
}
.rm-reader:fullscreen .reader-arrow,
.rm-reader.is-fullscreen .reader-arrow {
  width: 56px; height: 56px;
}
.rm-reader:fullscreen .reader-toolbar,
.rm-reader.is-fullscreen .reader-toolbar {
  padding: 14px 22px;
}
/* 复习资料阅读器：内部与教材阅读器共用 .reader-* 布局 */
.rm-reader .reader-stage { flex: 1; }
.rm-reader .reader-toolbar { background: rgba(0,0,0,0.2); border-bottom: 1px solid rgba(255,255,255,0.08); }

.rm-reader-topbar {
  display: flex; align-items: center;
  padding: 14px 20px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  background: rgba(0,0,0,0.2);
  backdrop-filter: blur(8px);
}
.rm-reader-close,
.rm-reader-fullscreen {
  display: inline-flex; align-items: center; gap: 6px;
  height: 34px; padding: 0 14px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 999px;
  color: #fff; font-size: 13px; line-height: 1;
  cursor: pointer;
  transition: all .25s ease;
  box-sizing: border-box;
}
.rm-reader-close:hover,
.rm-reader-fullscreen:hover {
  background: rgba(102,126,234,0.28);
  border-color: rgba(102,126,234,0.55);
}
.rm-reader-fullscreen { padding: 0 10px; }
.rm-reader-title {
  flex: 1; text-align: center;
  color: #fff; font-size: 15px; font-weight: 600;
  padding: 0 20px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.rm-reader-body {
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  position: relative;
  padding: 30px 60px;
  overflow: hidden;
}
.rm-reader-page {
  width: 100%; height: 100%;
  max-width: 1000px;
  display: flex; align-items: center; justify-content: center;
  overflow: auto;
  padding: 4px;
}
.rm-reader-page canvas {
  display: block;
  margin: 0 auto;
}
.rm-reader-html {
  width: 100%; max-height: 100%;
  padding: 40px 48px;
  background: #fff;
  color: #333;
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.35);
  overflow: auto;
  line-height: 1.8;
  font-size: 15px;
}
.rm-reader-html h1, .rm-reader-html h2, .rm-reader-html h3 { color: #1a1f3a; }
.rm-reader-html img { max-width: 100%; }

.rm-reader-loading, .rm-reader-empty {
  color: rgba(255,255,255,0.6); font-size: 15px;
}

.rm-reader-download {
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  padding: 40px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
}
.rm-reader-download-icon { font-size: 72px; }
.rm-reader-download-title { font-size: 18px; font-weight: 600; color: #fff; }
.rm-reader-download-desc { color: rgba(255,255,255,0.6); font-size: 13px; }
.rm-reader-download-btn {
  padding: 12px 32px;
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: #fff; text-decoration: none;
  border-radius: 999px;
  font-size: 14px; font-weight: 600;
  box-shadow: 0 6px 20px rgba(102,126,234,0.4);
  transition: transform .2s;
}
.rm-reader-download-btn:hover { transform: translateY(-2px); }

.rm-reader-nav {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  backdrop-filter: blur(8px);
  color: #fff;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .25s ease;
  z-index: 2;
}
.rm-reader-nav:hover {
  background: linear-gradient(135deg, #667eea, #764ba2);
  border-color: transparent;
  box-shadow: 0 6px 22px rgba(102,126,234,0.5);
}
.rm-reader-nav-prev { left: 12px; }
.rm-reader-nav-next { right: 12px; }

.rm-reader-footer {
  padding: 12px 20px;
  text-align: center;
  border-top: 1px solid rgba(255,255,255,0.08);
  background: rgba(0,0,0,0.2);
}
.rm-reader-pageinfo {
  display: inline-block;
  padding: 4px 14px;
  border-radius: 999px;
  background: rgba(102,126,234,0.15);
  border: 1px solid rgba(102,126,234,0.3);
  color: #a5b4fc;
  font-size: 12px; letter-spacing: 1px;
}

@media (max-width: 768px) {
  .rm-toolbar { align-items: flex-start; }
  .rm-reader-body { padding: 20px 12px; }
  .rm-reader-nav { width: 36px; height: 36px; }
  .rm-reader-nav-prev { left: 6px; }
  .rm-reader-nav-next { right: 6px; }
  .rm-reader-html { padding: 24px 20px; font-size: 14px; }
}

/* ============== 学习报告仪表盘 ============== */
.sr-page {
  padding: 20px 24px 40px;
  min-height: 100%;
  background: radial-gradient(circle at 20% 0%, rgba(102,126,234,0.14), transparent 45%),
              radial-gradient(circle at 90% 40%, rgba(79,172,254,0.10), transparent 50%);
}
.sr-header {
  display: flex; align-items: center; gap: 14px;
  padding-left: 4px; margin-bottom: 16px;
}
.sr-header .back-btn { height: 32px; padding: 0 14px; line-height: 1; font-size: 13px; align-items: center; }
.sr-title-row {
  display: flex; align-items: baseline; gap: 14px;
  padding: 0 4px 20px;
}
.sr-title-main {
  font-size: 26px; font-weight: 700; letter-spacing: 1px;
  background: linear-gradient(135deg, #a8b5ff 0%, #f8faff 40%, #7cebff 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 2px 20px rgba(102,126,234,0.3);
}
.sr-title-sub { color: rgba(200,210,255,0.55); font-size: 13px; }

/* KPI 卡片 */
.sr-kpi-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
  margin-bottom: 20px;
}
.sr-kpi-card {
  position: relative; overflow: hidden;
  padding: 20px 20px 18px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(30,40,80,0.85) 0%, rgba(20,26,55,0.9) 100%);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 8px 30px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.06);
  display: flex; align-items: center; gap: 14px;
  transition: all 0.35s cubic-bezier(0.4,0,0.2,1);
}
.sr-kpi-card::before {
  content: ''; position: absolute; inset: -1px;
  border-radius: 18px; padding: 1px;
  background: linear-gradient(135deg, var(--kpi-1, #4facfe) 0%, var(--kpi-2, #667eea) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0.6; pointer-events: none;
}
.sr-kpi-card::after {
  content: ''; position: absolute; right: -30px; bottom: -30px;
  width: 120px; height: 120px; border-radius: 50%;
  background: radial-gradient(circle, var(--kpi-1, #4facfe) 0%, transparent 70%);
  opacity: 0.15; pointer-events: none;
}
.sr-kpi-1 { --kpi-1: #4facfe; --kpi-2: #00f2fe; }
.sr-kpi-2 { --kpi-1: #43e97b; --kpi-2: #38f9d7; }
.sr-kpi-3 { --kpi-1: #f093fb; --kpi-2: #f5576c; }
.sr-kpi-4 { --kpi-1: #fee140; --kpi-2: #fa709a; }
.sr-kpi-card:hover { transform: translateY(-3px); box-shadow: 0 12px 36px rgba(0,0,0,0.35); }
.sr-kpi-ic {
  width: 46px; height: 46px; border-radius: 12px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--kpi-1) 0%, var(--kpi-2) 100%);
  box-shadow: 0 6px 20px -6px var(--kpi-1);
  color: #fff;
}
.sr-kpi-ic svg { width: 22px; height: 22px; }
.sr-kpi-body { flex: 1; min-width: 0; }
.sr-kpi-label { font-size: 12px; color: rgba(200,210,255,0.6); margin-bottom: 4px; letter-spacing: 0.5px; }
.sr-kpi-value {
  font-size: 30px; font-weight: 700; line-height: 1.1;
  background: linear-gradient(135deg, #fff 0%, var(--kpi-1) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  font-family: 'DIN', 'Segoe UI', sans-serif;
  display: inline-block; vertical-align: baseline;
}
.sr-kpi-unit { display: inline-block; margin-left: 4px; font-size: 12px; color: rgba(200,210,255,0.5); }

/* 主体 grid */
.sr-main-grid {
  display: grid; grid-template-columns: 1.15fr 1fr; gap: 16px;
}
.sr-left, .sr-right { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.sr-panel {
  position: relative; overflow: hidden;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(30,40,80,0.7) 0%, rgba(20,26,55,0.85) 100%);
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: 0 8px 30px rgba(0,0,0,0.2);
  padding: 18px 18px 16px;
}
.sr-panel::before {
  content: ''; position: absolute; top: 0; left: 20px; right: 20px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(102,126,234,0.5), transparent);
}
.sr-panel-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 14px;
}
.sr-panel-title { font-size: 15px; font-weight: 600; color: #fff; letter-spacing: 0.5px; }
.sr-panel-sub { font-size: 12px; color: rgba(200,210,255,0.5); }
.sr-empty { padding: 30px 0; text-align: center; color: rgba(200,210,255,0.4); font-size: 13px; }

/* 学习进度 */
.sr-progress-list { display: flex; flex-direction: column; gap: 12px; }
.sr-progress-row {
  animation: srFadeIn 0.5s cubic-bezier(0.4,0,0.2,1) both;
  animation-delay: calc(var(--i) * 60ms);
}
.sr-progress-info {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 6px;
}
.sr-progress-name { font-size: 13px; color: #fff; font-weight: 500; }
.sr-progress-meta { font-size: 11px; color: rgba(200,210,255,0.55); }
.sr-progress-rate { color: #4facfe; font-weight: 600; font-size: 12px; }
.sr-progress-bar-wrap {
  height: 6px; border-radius: 3px; background: rgba(102,126,234,0.12); overflow: hidden;
}
.sr-progress-bar {
  height: 100%; border-radius: 3px;
  background: linear-gradient(90deg, #4facfe 0%, #667eea 50%, #a78bfa 100%);
  box-shadow: 0 0 10px rgba(102,126,234,0.5);
  transition: width 1s cubic-bezier(0.4,0,0.2,1);
}

/* 分数趋势 */
.sr-trend-chart { min-height: 220px; display: flex; align-items: center; justify-content: center; }

/* 薄弱知识点 */
.sr-weak-list { display: flex; flex-direction: column; gap: 12px; }
.sr-weak-row {
  display: flex; gap: 12px; align-items: center;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(102,126,234,0.05);
  border: 1px solid rgba(102,126,234,0.1);
  animation: srFadeIn 0.5s cubic-bezier(0.4,0,0.2,1) both;
  animation-delay: calc(var(--i) * 70ms);
}
.sr-weak-rank {
  width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 14px;
  background: linear-gradient(135deg, #f5576c 0%, #f093fb 100%);
  color: #fff; box-shadow: 0 4px 12px -4px rgba(245,87,108,0.6);
}
.sr-weak-row:nth-child(2) .sr-weak-rank { background: linear-gradient(135deg, #fa709a 0%, #fee140 100%); }
.sr-weak-row:nth-child(3) .sr-weak-rank { background: linear-gradient(135deg, #fee140 0%, #43e97b 100%); }
.sr-weak-row:nth-child(n+4) .sr-weak-rank { background: linear-gradient(135deg, #4facfe 0%, #a78bfa 100%); }
.sr-weak-main { flex: 1; min-width: 0; }
.sr-weak-name { font-size: 13px; color: #fff; font-weight: 500; margin-bottom: 3px; }
.sr-weak-sub { font-size: 11px; color: rgba(200,210,255,0.55); margin-bottom: 6px; }
.sr-weak-sub b { color: #ff9db3; font-weight: 600; }
.sr-weak-barwrap { height: 4px; border-radius: 2px; background: rgba(245,87,108,0.1); overflow: hidden; }
.sr-weak-bar {
  height: 100%; border-radius: 2px;
  background: linear-gradient(90deg, #f5576c 0%, #f093fb 100%);
  transition: width 1s cubic-bezier(0.4,0,0.2,1);
}

/* 最近练习 */
.sr-recent-list { display: flex; flex-direction: column; gap: 10px; }
.sr-recent-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(102,126,234,0.05);
  border: 1px solid rgba(102,126,234,0.1);
  transition: all 0.25s;
}
.sr-recent-row:hover { background: rgba(102,126,234,0.1); transform: translateX(2px); }
.sr-recent-info { flex: 1; min-width: 0; }
.sr-recent-name { font-size: 13px; color: #fff; font-weight: 500; margin-bottom: 3px; }
.sr-recent-meta { font-size: 11px; color: rgba(200,210,255,0.55); }
.sr-recent-score {
  padding: 4px 10px; border-radius: 8px;
  font-size: 13px; font-weight: 700;
  min-width: 52px; text-align: center;
}
.sr-recent-good { background: linear-gradient(135deg, rgba(67,233,123,0.2) 0%, rgba(56,249,215,0.2) 100%); color: #43e97b; border: 1px solid rgba(67,233,123,0.35); }
.sr-recent-mid { background: linear-gradient(135deg, rgba(254,225,64,0.15) 0%, rgba(250,112,154,0.15) 100%); color: #fee140; border: 1px solid rgba(254,225,64,0.35); }
.sr-recent-low { background: linear-gradient(135deg, rgba(245,87,108,0.2) 0%, rgba(240,147,251,0.2) 100%); color: #ff9db3; border: 1px solid rgba(245,87,108,0.35); }

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

@media (max-width: 1100px) {
  .sr-kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .sr-main-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .sr-kpi-grid { grid-template-columns: 1fr; }
  .sr-title-main { font-size: 22px; }
}
}

/* ============================================================
 * 错题分析页 · wrong-analysis
 * ============================================================ */
.wa-page {
  padding: 20px 28px 40px;
  max-width: 1400px;
  margin: 0 auto;
  color: #fff;
}
.wa-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
  padding-left: 20px;
}
.wa-title-row {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 0 20px 22px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  margin-bottom: 20px;
}
.wa-title-main {
  font-size: 26px;
  font-weight: 800;
  background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 50%, #a18cd1 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: 0.5px;
}
.wa-title-sub {
  font-size: 13px;
  color: rgba(255,255,255,0.55);
  font-weight: 500;
}

/* KPI 卡片行 */
.wa-kpi-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin: 0 20px 22px;
}
.wa-kpi-card {
  position: relative;
  padding: 20px 22px;
  border-radius: 16px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 14px;
  transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
}
.wa-kpi-card:hover {
  transform: translateY(-2px);
  border-color: rgba(255,255,255,0.15);
  box-shadow: 0 12px 32px rgba(0,0,0,0.35);
}
.wa-kpi-card::after {
  content: '';
  position: absolute;
  right: -30px;
  top: -30px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  filter: blur(40px);
  opacity: 0.35;
  pointer-events: none;
}
.wa-kpi-red::after   { background: radial-gradient(circle, #ff5f6d, transparent); }
.wa-kpi-blue::after  { background: radial-gradient(circle, #4facfe, transparent); }
.wa-kpi-green::after { background: radial-gradient(circle, #43e97b, transparent); }
.wa-kpi-orange::after{ background: radial-gradient(circle, #f6a44a, transparent); }
.wa-kpi-icon {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  flex-shrink: 0;
}
.wa-kpi-red   .wa-kpi-icon { background: linear-gradient(135deg, rgba(255,95,109,0.25), rgba(255,95,109,0.08)); }
.wa-kpi-blue  .wa-kpi-icon { background: linear-gradient(135deg, rgba(79,172,254,0.25), rgba(79,172,254,0.08)); }
.wa-kpi-green .wa-kpi-icon { background: linear-gradient(135deg, rgba(67,233,123,0.25), rgba(67,233,123,0.08)); }
.wa-kpi-orange.wa-kpi-icon,
.wa-kpi-orange .wa-kpi-icon { background: linear-gradient(135deg, rgba(246,164,74,0.25), rgba(246,164,74,0.08)); }
.wa-kpi-body { flex: 1; min-width: 0; }
.wa-kpi-value {
  font-size: 28px;
  font-weight: 800;
  line-height: 1;
  color: #fff;
}
.wa-kpi-label {
  margin-top: 6px;
  font-size: 12px;
  color: rgba(255,255,255,0.6);
  font-weight: 500;
}

/* 筛选行 */
.wa-filter-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 20px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.wa-filter-label {
  font-size: 13px;
  color: rgba(255,255,255,0.55);
  font-weight: 600;
  padding-right: 6px;
}
.wa-filter-chips {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.wa-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.8);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4,0,0.2,1);
  line-height: 1;
}
.wa-chip:hover {
  border-color: rgba(255,255,255,0.25);
  color: #fff;
  transform: translateY(-1px);
}
.wa-chip-active {
  background: linear-gradient(135deg, #ff5f6d, #ffc371);
  border-color: transparent;
  color: #fff;
  font-weight: 700;
  box-shadow: 0 6px 18px rgba(255,95,109,0.35);
}
.wa-chip-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background: rgba(0,0,0,0.25);
  font-size: 11px;
  font-weight: 700;
}
.wa-chip-active .wa-chip-badge { background: rgba(255,255,255,0.25); color: #fff; }

/* 错题列表 */
.wa-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  padding: 0 20px;
}
.wa-item {
  position: relative;
  background: linear-gradient(135deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 20px 22px;
  transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
  overflow: hidden;
}
.wa-item::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, #ff5f6d, #ffc371);
  opacity: 0.9;
}
.wa-item-reviewed::before { background: linear-gradient(180deg, #43e97b, #38f9d7); }
.wa-item:hover {
  border-color: rgba(255,255,255,0.15);
  box-shadow: 0 10px 28px rgba(0,0,0,0.32);
  transform: translateY(-2px);
}
.wa-item-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.wa-item-idx {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 26px;
  padding: 0 8px;
  border-radius: 8px;
  background: rgba(255,255,255,0.08);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}
.wa-item-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.wa-tag {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
}
.wa-tag-subject { background: linear-gradient(135deg, rgba(102,126,234,0.25), rgba(118,75,162,0.15)); color: #a5b4fc; border: 1px solid rgba(102,126,234,0.3); }
.wa-tag-chapter { background: rgba(67,233,123,0.15); color: #6ee7b7; border: 1px solid rgba(67,233,123,0.25); }
.wa-tag-kp      { background: rgba(79,172,254,0.15); color: #7dd3fc; border: 1px solid rgba(79,172,254,0.25); }
.wa-tag-done    { background: rgba(67,233,123,0.15); color: #4ade80; border: 1px solid rgba(67,233,123,0.25); }
.wa-tag-pending { background: rgba(255,95,109,0.15); color: #f87171; border: 1px solid rgba(255,95,109,0.25); }
.wa-item-time {
  margin-left: auto;
  font-size: 11px;
  color: rgba(255,255,255,0.45);
  font-weight: 500;
}
.wa-item-question {
  font-size: 15px;
  color: #fff;
  line-height: 1.6;
  font-weight: 500;
  padding: 4px 0 12px;
}
.wa-item-options {
  display: grid;
  gap: 8px;
  margin-bottom: 12px;
}
.wa-opt {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  font-size: 13px;
  color: rgba(255,255,255,0.85);
  transition: all 0.2s;
}
.wa-opt-correct {
  background: linear-gradient(135deg, rgba(67,233,123,0.12), rgba(56,249,215,0.05));
  border-color: rgba(67,233,123,0.35);
  color: #d1fae5;
}
.wa-opt-wrong {
  background: linear-gradient(135deg, rgba(255,95,109,0.15), rgba(255,107,107,0.05));
  border-color: rgba(255,95,109,0.35);
  color: #fecaca;
}
.wa-opt-letter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: rgba(255,255,255,0.1);
  font-weight: 800;
  font-size: 13px;
  flex-shrink: 0;
}
.wa-opt-correct .wa-opt-letter { background: linear-gradient(135deg, #43e97b, #38f9d7); color: #064e3b; }
.wa-opt-wrong .wa-opt-letter { background: linear-gradient(135deg, #ff5f6d, #ff9a9e); color: #fff; }
.wa-opt-text { flex: 1; }
.wa-opt-flag {
  font-size: 10px;
  padding: 3px 8px;
  border-radius: 6px;
  font-weight: 700;
  letter-spacing: 0.5px;
}
.wa-opt-flag-c { background: rgba(67,233,123,0.25); color: #6ee7b7; }
.wa-opt-flag-w { background: rgba(255,95,109,0.25); color: #fca5a5; }

/* 解析 */
.wa-item-analysis {
  margin-top: 4px;
  padding: 14px 16px;
  background: linear-gradient(135deg, rgba(102,126,234,0.08), rgba(118,75,162,0.04));
  border-left: 3px solid #667eea;
  border-radius: 10px;
  margin-bottom: 12px;
}
.wa-analysis-head {
  font-size: 12px;
  color: #a5b4fc;
  font-weight: 700;
  margin-bottom: 6px;
  letter-spacing: 0.5px;
}
.wa-analysis-body {
  font-size: 13px;
  color: rgba(255,255,255,0.75);
  line-height: 1.7;
}

.wa-item-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.wa-btn {
  height: 34px;
  padding: 0 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s;
  border: none;
  line-height: 1;
}
.wa-btn-primary {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: #fff;
  box-shadow: 0 4px 12px rgba(102,126,234,0.3);
}
.wa-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(102,126,234,0.4); }
.wa-btn-ghost {
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.85);
  border: 1px solid rgba(255,255,255,0.12);
}
.wa-btn-ghost:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.2);
}

.wa-item-ans-plain {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 10px 0 14px;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.wa-ans-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: #fff;
}
.wa-ans-label {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}
.wa-ans-label-c {
  background: linear-gradient(135deg, #43e97b, #38f9d7);
  color: #0f172a;
}
.wa-ans-label-w {
  background: linear-gradient(135deg, #ff6b6b, #ee5a6f);
  color: #fff;
}
.wa-ans-val {
  flex: 1;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.5;
  word-break: break-word;
}

/* 空态 */
.wa-empty {
  text-align: center;
  padding: 60px 20px;
  color: rgba(255,255,255,0.55);
}
.wa-empty-icon {
  font-size: 48px;
  margin-bottom: 12px;
  opacity: 0.7;
}
.wa-empty h3 {
  font-size: 18px;
  color: #fff;
  margin-bottom: 8px;
  font-weight: 700;
}
.wa-empty p {
  font-size: 13px;
  color: rgba(255,255,255,0.55);
}

/* 响应式 */
@media (max-width: 1100px) {
  .wa-kpi-row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .wa-kpi-row { grid-template-columns: 1fr; }
  .wa-title-main { font-size: 22px; }
  .wa-item { padding: 16px; }
  .wa-item-question { font-size: 14px; }
}

/* ============ 个人中心（我的） ============ */
.profile-page {
  padding: 20px 20px 100px;
  max-width: 1800px;
  margin: 0 auto;
  color: #fff;
}
.pf-hero {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  padding: 28px;
  background: linear-gradient(135deg, rgba(102,126,234,0.28), rgba(118,75,162,0.28));
  border: 1px solid rgba(255,255,255,0.15);
  box-shadow: 0 20px 40px -20px rgba(102,126,234,0.4), inset 0 1px 0 rgba(255,255,255,0.15);
  backdrop-filter: blur(16px);
  margin-bottom: 20px;
}
.pf-hero-bg { position: absolute; inset: 0; pointer-events: none; }
.pf-hero-orb {
  position: absolute;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.5;
}
.pf-orb-1 { top: -80px; right: -60px; background: radial-gradient(circle, #fa709a, transparent 70%); }
.pf-orb-2 { bottom: -100px; left: -60px; background: radial-gradient(circle, #4facfe, transparent 70%); }
.pf-hero-grid {
  position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 26px 26px;
  mask-image: radial-gradient(ellipse at 30% 100%, rgba(0,0,0,0.6), transparent 70%);
}
.pf-hero-content {
  position: relative;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.pf-avatar-wrap {
  position: relative;
  flex-shrink: 0;
}
.pf-avatar-ring {
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, #667eea, #fa709a, #fee140, #43e97b, #667eea);
  filter: blur(1px);
  animation: pfSpin 6s linear infinite;
}
@keyframes pfSpin { to { transform: rotate(360deg); } }
.pf-avatar {
  position: relative;
  width: 84px; height: 84px;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 34px; font-weight: 800;
  box-shadow: 0 8px 24px rgba(102,126,234,0.5), inset 0 2px 6px rgba(255,255,255,0.25);
  overflow: hidden;
}
.pf-avatar-edit {
  position: absolute;
  right: -2px; bottom: -2px;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, #43e97b, #38f9d7);
  color: #fff;
  border: 2px solid #1a1f3a;
  cursor: pointer;
  font-size: 12px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 10px rgba(67,233,123,0.5);
  transition: transform 0.2s;
}
.pf-avatar-edit:hover { transform: scale(1.15); }
.pf-info { flex: 1; min-width: 200px; }
.pf-name-row { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.pf-name {
  font-size: 22px;
  font-weight: 700;
  background: linear-gradient(135deg, #ffffff, #d0d8f8);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: 0.5px;
}
.pf-level-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, #fee140, #fa709a);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(250,112,154,0.4);
}
.pf-phone {
  font-size: 13px;
  color: rgba(255,255,255,0.75);
  margin-bottom: 10px;
  letter-spacing: 0.3px;
}
.pf-tags { display: flex; gap: 8px; flex-wrap: wrap; }
.pf-tag {
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.85);
  backdrop-filter: blur(6px);
}
.pf-edit-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(255,255,255,0.12);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.2);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  transition: all 0.2s;
  backdrop-filter: blur(10px);
}
.pf-edit-btn:hover {
  background: linear-gradient(135deg, #667eea, #764ba2);
  border-color: transparent;
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(102,126,234,0.4);
}

/* 快捷统计 */
.pf-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}
.pf-stat {
  position: relative;
  padding: 18px 14px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.1);
  text-align: center;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.pf-stat::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.05), transparent 60%);
  pointer-events: none;
}
.pf-stat:hover {
  transform: translateY(-3px);
  border-color: rgba(255,255,255,0.2);
  box-shadow: 0 12px 30px -10px rgba(102,126,234,0.4);
}
.pf-stat-icon {
  width: 40px; height: 40px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 8px;
  font-size: 20px;
  box-shadow: 0 6px 16px -4px rgba(0,0,0,0.35);
}
.pf-stat-value {
  font-size: 24px;
  font-weight: 800;
  background: linear-gradient(135deg, #ffffff, #a0aec0);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1.2;
}
.pf-stat-label {
  font-size: 12px;
  color: rgba(255,255,255,0.6);
  margin-top: 2px;
}

/* 功能菜单 */
.pf-menu-title {
  font-size: 15px;
  font-weight: 600;
  color: rgba(255,255,255,0.85);
  margin: 0 0 12px 4px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.pf-menu-title::before {
  content: '';
  width: 3px; height: 14px;
  background: linear-gradient(180deg, #667eea, #764ba2);
  border-radius: 2px;
}
.pf-menu-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}
.pf-menu-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.1);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}
.pf-menu-item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 100% 100%, rgba(102,126,234,0.12), transparent 60%);
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}
.pf-menu-item:hover {
  transform: translateY(-2px) translateX(2px);
  border-color: rgba(255,255,255,0.22);
  box-shadow: 0 12px 30px -8px rgba(102,126,234,0.35);
}
.pf-menu-item:hover::after { opacity: 1; }
.pf-menu-ic {
  width: 46px; height: 46px;
  border-radius: 12px;
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 16px -4px rgba(0,0,0,0.4), inset 0 1px 2px rgba(255,255,255,0.2);
  flex-shrink: 0;
}
.pf-menu-txt { flex: 1; min-width: 0; }
.pf-menu-name {
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 2px;
}
.pf-menu-desc {
  font-size: 12px;
  color: rgba(255,255,255,0.55);
}
.pf-menu-arrow {
  color: rgba(255,255,255,0.4);
  font-size: 22px;
  font-weight: 300;
  transition: transform 0.2s, color 0.2s;
}
.pf-menu-item:hover .pf-menu-arrow {
  color: rgba(255,255,255,0.9);
  transform: translateX(3px);
}

.pf-footer {
  text-align: center;
  padding: 20px 0 10px;
  color: rgba(255,255,255,0.4);
  font-size: 11px;
}
.pf-footer-ver { margin-bottom: 4px; letter-spacing: 1px; }
.pf-footer-copy { color: rgba(255,255,255,0.55); }

/* 编辑弹窗 */
.pf-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.pf-modal-mask {
  position: absolute;
  inset: 0;
  background: rgba(10, 14, 30, 0.72);
  backdrop-filter: blur(6px);
}
.pf-modal-card {
  position: relative;
  width: 100%;
  max-width: 380px;
  padding: 28px;
  border-radius: 20px;
  background: linear-gradient(135deg, #2d3561 0%, #1a1f3a 100%);
  border: 1px solid rgba(255,255,255,0.15);
  box-shadow: 0 30px 60px -20px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.1);
  color: #fff;
  animation: pfModalIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes pfModalIn {
  from { opacity: 0; transform: translateY(20px) scale(0.95); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.pf-modal-title {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 20px;
  background: linear-gradient(135deg, #ffffff, #a0aec0);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.pf-modal-field { margin-bottom: 16px; }
.pf-modal-field label {
  display: block;
  font-size: 12px;
  color: rgba(255,255,255,0.65);
  margin-bottom: 6px;
}
.pf-modal-field input {
  width: 100%;
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  color: #fff;
  font-size: 14px;
  outline: none;
  box-sizing: border-box;
  transition: border 0.2s, background 0.2s;
}
.pf-modal-field input:focus {
  border-color: rgba(102,126,234,0.6);
  background: rgba(102,126,234,0.1);
}
.pf-modal-actions { display: flex; gap: 10px; margin-top: 24px; }
.pf-btn-ghost {
  flex: 1;
  padding: 10px 16px;
  border-radius: 10px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.85);
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s;
}
.pf-btn-ghost:hover { background: rgba(255,255,255,0.12); }
.pf-btn-primary {
  flex: 1;
  padding: 10px 16px;
  border-radius: 10px;
  background: linear-gradient(135deg, #667eea, #764ba2);
  border: none;
  color: #fff;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  transition: all 0.2s;
  box-shadow: 0 6px 16px -4px rgba(102,126,234,0.5);
}
.pf-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 10px 24px -4px rgba(102,126,234,0.6); }

/* 我的订单空态 */
.mo-page { padding-top: 0; padding-bottom: 100px; }
.mo-empty {
  margin: 40px auto;
  max-width: 400px;
  padding: 48px 32px;
  text-align: center;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
  border: 1px dashed rgba(255,255,255,0.15);
}
.mo-empty-ic { font-size: 60px; margin-bottom: 12px; opacity: 0.7; }
.mo-empty-t { font-size: 18px; font-weight: 700; color: #fff; margin-bottom: 6px; }
.mo-empty-d { font-size: 13px; color: rgba(255,255,255,0.55); }

/* 响应式 */
@media (max-width: 720px) {
  .pf-stats { grid-template-columns: repeat(2, 1fr); }
  .pf-menu-grid { grid-template-columns: 1fr; }
  .pf-hero-content { gap: 14px; }
  .pf-avatar { width: 68px; height: 68px; font-size: 28px; }
  .pf-name { font-size: 19px; }
  .pf-edit-btn { padding: 6px 12px; font-size: 12px; }
}

/* ============ 错题分析 · 材料题材料块 ============ */
.wa-item-material {
  margin: 8px 0 12px;
  padding: 12px 14px;
  background: linear-gradient(135deg, rgba(102,126,234,0.14), rgba(118,75,162,0.10));
  border: 1px solid rgba(102,126,234,0.30);
  border-left: 3px solid rgba(102,126,234,0.85);
  border-radius: 10px;
  font-size: 13.5px;
  line-height: 1.75;
  color: rgba(255,255,255,0.88);
  position: relative;
}
.wa-item-material .wa-material-head {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px;
  margin-bottom: 6px;
  font-size: 11px;
  font-weight: 600;
  color: rgba(255,255,255,0.92);
  background: linear-gradient(135deg, rgba(102,126,234,0.65), rgba(118,75,162,0.65));
  border-radius: 999px;
  letter-spacing: 0.5px;
}
.wa-item-material .wa-material-body {
  white-space: pre-wrap;
  word-break: break-word;
}

/* ================ 错题分析 · AI 问问按钮 ================ */
.wa-btn-ai {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 14px 0 12px;
  color: #fff;
  background: linear-gradient(135deg, #00d4ff 0%, #7c3aed 55%, #ff3ec9 100%);
  background-size: 200% 200%;
  box-shadow: 0 6px 20px rgba(124, 58, 237, 0.35), inset 0 0 0 1px rgba(255,255,255,0.15);
  overflow: hidden;
  animation: waBtnAiFlow 6s ease-in-out infinite;
}
.wa-btn-ai::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.35) 50%, transparent 100%);
  transform: translateX(-120%);
  transition: transform 0.6s ease;
}
.wa-btn-ai:hover { transform: translateY(-1px); box-shadow: 0 10px 26px rgba(0,212,255,0.35), inset 0 0 0 1px rgba(255,255,255,0.25); }
.wa-btn-ai:hover::before { transform: translateX(120%); }
.wa-btn-ai:active { transform: scale(0.96); }
.wa-btn-ai-icon { display: inline-flex; align-items: center; justify-content: center; filter: drop-shadow(0 0 4px rgba(255,255,255,0.6)); }
.wa-btn-ai-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 8px #fff, 0 0 14px #00d4ff;
  animation: waBtnAiBlink 1.4s ease-in-out infinite;
}
@keyframes waBtnAiFlow { 0%,100%{background-position:0% 50%;} 50%{background-position:100% 50%;} }
@keyframes waBtnAiBlink { 0%,100%{opacity:1;transform:scale(1);} 50%{opacity:0.4;transform:scale(0.75);} }

/* ================ AI 问问弹框 ================ */
.wa-ai-modal {
  position: fixed; inset: 0; z-index: 9999;
  display: none;
  align-items: center; justify-content: center;
  padding: 20px;
}
.wa-ai-modal.active { display: flex; animation: waAiModalIn 0.28s ease-out; }
@keyframes waAiModalIn { from { opacity: 0; } to { opacity: 1; } }

.wa-ai-mask {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 30%, rgba(102,126,234,0.28), rgba(15,20,42,0.85) 60%);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.wa-ai-dialog {
  position: relative;
  width: min(720px, calc(100vw - 40px));
  max-height: calc(100vh - 40px);
  display: flex; flex-direction: column;
  border-radius: 20px;
  background:
    linear-gradient(160deg, rgba(38,42,88,0.96) 0%, rgba(25,29,60,0.98) 55%, rgba(20,24,52,0.98) 100%);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow:
    0 30px 80px rgba(0,0,0,0.55),
    0 0 0 1px rgba(255,255,255,0.05),
    inset 0 1px 0 rgba(255,255,255,0.08);
  overflow: hidden;
  animation: waAiDialogIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes waAiDialogIn {
  from { opacity: 0; transform: translateY(20px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.wa-ai-dialog::before {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: radial-gradient(ellipse at 50% 0%, rgba(0,0,0,0.6) 0%, transparent 65%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 0%, rgba(0,0,0,0.6) 0%, transparent 65%);
  pointer-events: none;
}

.wa-ai-deco {
  position: absolute;
  border-radius: 50%;
  filter: blur(50px);
  pointer-events: none;
  z-index: 0;
}
.wa-ai-deco-1 { width: 220px; height: 220px; background: rgba(0,212,255,0.35); top: -80px; left: -60px; animation: waAiDecoFloat1 8s ease-in-out infinite; }
.wa-ai-deco-2 { width: 180px; height: 180px; background: rgba(255,62,201,0.32); bottom: -60px; right: -50px; animation: waAiDecoFloat2 10s ease-in-out infinite; }
.wa-ai-deco-3 { width: 140px; height: 140px; background: rgba(124,58,237,0.35); top: 40%; right: 20%; animation: waAiDecoFloat1 12s ease-in-out infinite reverse; }
@keyframes waAiDecoFloat1 { 0%,100%{transform:translate(0,0);} 50%{transform:translate(30px,20px);} }
@keyframes waAiDecoFloat2 { 0%,100%{transform:translate(0,0);} 50%{transform:translate(-30px,-20px);} }

.wa-ai-head {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 22px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.wa-ai-head-left { display: flex; align-items: center; gap: 14px; }
.wa-ai-avatar {
  position: relative;
  width: 46px; height: 46px;
  border-radius: 14px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 60%, #ff3ec9 100%);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 18px rgba(102,126,234,0.5), inset 0 0 0 1px rgba(255,255,255,0.2);
}
.wa-ai-avatar-pulse {
  position: absolute; inset: -4px;
  border-radius: 16px;
  border: 2px solid rgba(0,212,255,0.6);
  animation: waAiPulse 2s ease-out infinite;
}
@keyframes waAiPulse {
  0% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.35); }
}
.wa-ai-title { color: #fff; font-size: 16px; font-weight: 700; letter-spacing: 0.4px; }
.wa-ai-subtitle {
  display: flex; align-items: center; gap: 6px;
  margin-top: 3px;
  color: rgba(255,255,255,0.6);
  font-size: 12px;
}
.wa-ai-live-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #00d4ff;
  box-shadow: 0 0 6px #00d4ff;
  animation: waBtnAiBlink 1.4s ease-in-out infinite;
}
.wa-ai-close {
  width: 34px; height: 34px;
  border-radius: 10px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.8);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.25s;
}
.wa-ai-close:hover { background: rgba(255,255,255,0.12); color: #fff; transform: rotate(90deg); }

.wa-ai-tabs {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 8px;
  padding: 12px 22px 0;
}
.wa-ai-tab {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
  color: rgba(255,255,255,0.7);
  font-size: 13px; font-weight: 600;
  cursor: pointer;
  transition: all 0.25s;
}
.wa-ai-tab:hover { color: #fff; background: rgba(255,255,255,0.06); }
.wa-ai-tab.active {
  color: #fff;
  background: linear-gradient(135deg, rgba(102,126,234,0.35), rgba(255,62,201,0.3));
  border-color: rgba(255,255,255,0.2);
  box-shadow: 0 4px 12px rgba(102,126,234,0.35);
}
.wa-ai-tab-icon { font-size: 14px; }

.wa-ai-question-card {
  position: relative;
  z-index: 1;
  margin: 14px 22px 0;
  padding: 14px 16px;
  border-radius: 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.9);
  font-size: 13px;
  line-height: 1.7;
  max-height: 160px;
  overflow: auto;
}
.wa-ai-q-tag { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.wa-ai-q-chip {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 11px; font-weight: 600;
  color: #fff;
  background: linear-gradient(135deg, rgba(102,126,234,0.7), rgba(118,75,162,0.7));
}
.wa-ai-q-chip-2 { background: linear-gradient(135deg, rgba(0,212,255,0.55), rgba(102,126,234,0.55)); }
.wa-ai-q-material {
  padding: 8px 10px;
  margin-bottom: 8px;
  border-radius: 8px;
  background: rgba(255,255,255,0.04);
  border-left: 3px solid rgba(0,212,255,0.5);
  font-size: 12.5px;
  color: rgba(255,255,255,0.75);
  white-space: pre-wrap; word-break: break-word;
}
.wa-ai-q-mlabel {
  display: inline-block;
  margin-right: 6px;
  padding: 1px 8px;
  border-radius: 999px;
  background: linear-gradient(135deg, #00d4ff, #7c3aed);
  color: #fff;
  font-size: 10px; font-weight: 700;
  vertical-align: 1px;
}
.wa-ai-q-stem { color: #fff; font-weight: 600; white-space: pre-wrap; word-break: break-word; }
.wa-ai-q-opts { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; color: rgba(255,255,255,0.72); font-size: 12.5px; }
.wa-ai-q-opt { display: block; }
.wa-ai-q-opt b { display: inline-block; width: 20px; color: #00d4ff; }

.wa-ai-body {
  position: relative;
  z-index: 1;
  flex: 1;
  overflow: auto;
  padding: 14px 22px 8px;
  min-height: 220px;
}
.wa-ai-pane { display: none; }
.wa-ai-pane.active { display: block; }

.wa-ai-loading {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 40px 0;
  gap: 14px;
}
.wa-ai-loader { display: flex; gap: 8px; }
.wa-ai-loader span {
  width: 12px; height: 12px; border-radius: 50%;
  background: linear-gradient(135deg, #00d4ff, #7c3aed);
  box-shadow: 0 0 12px rgba(0,212,255,0.6);
  animation: waAiLoaderBounce 1.2s ease-in-out infinite;
}
.wa-ai-loader span:nth-child(2) { animation-delay: 0.15s; }
.wa-ai-loader span:nth-child(3) { animation-delay: 0.3s; }
@keyframes waAiLoaderBounce {
  0%, 100% { transform: translateY(0); opacity: 0.5; }
  50% { transform: translateY(-10px); opacity: 1; }
}
.wa-ai-loading-text { color: rgba(255,255,255,0.7); font-size: 13px; letter-spacing: 0.3px; }
.wa-ai-loader-hint { color: rgba(255,255,255,0.55); font-size: 13px; padding: 30px 0; }

.wa-ai-content {
  color: rgba(255,255,255,0.9);
  font-size: 14px;
  line-height: 1.85;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.wa-ai-content-visible { opacity: 1; transform: translateY(0); }
.wa-ai-content .wa-ai-h {
  margin: 14px 0 8px;
  padding-left: 12px;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  border-left: 3px solid;
  border-image: linear-gradient(180deg, #00d4ff, #ff3ec9) 1;
}
.wa-ai-content .wa-ai-h:first-child { margin-top: 0; }
.wa-ai-content .wa-ai-p { margin: 6px 0; }
.wa-ai-content .wa-ai-ol,
.wa-ai-content .wa-ai-ul {
  display: flex; align-items: flex-start; gap: 8px;
  margin: 6px 0;
}
.wa-ai-content .wa-ai-ol-num {
  flex-shrink: 0;
  min-width: 22px; height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: #fff;
  font-size: 12px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  margin-top: 2px;
}
.wa-ai-content .wa-ai-ul-dot {
  flex-shrink: 0;
  width: 6px; height: 6px; border-radius: 50%;
  background: linear-gradient(135deg, #00d4ff, #7c3aed);
  margin-top: 10px;
  box-shadow: 0 0 6px rgba(0,212,255,0.6);
}
.wa-ai-content strong { color: #fff; }
.wa-ai-content code {
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(0,212,255,0.15);
  color: #7ff2ff;
  font-family: 'SFMono-Regular', Consolas, monospace;
  font-size: 12.5px;
}

.wa-ai-empty, .wa-ai-error {
  padding: 30px 20px;
  text-align: center;
  color: rgba(255,255,255,0.65);
  font-size: 13px;
  line-height: 1.8;
}
.wa-ai-error {
  color: #ffb4b4;
  background: rgba(255,80,80,0.06);
  border-radius: 10px;
  border: 1px dashed rgba(255,80,80,0.25);
}

.wa-ai-footer {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 12px 22px 16px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.wa-ai-fbtn {
  padding: 8px 18px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s;
  border: none;
  display: inline-flex; align-items: center; gap: 4px;
}
.wa-ai-fbtn-primary {
  color: #fff;
  background: linear-gradient(135deg, #00d4ff 0%, #7c3aed 100%);
  box-shadow: 0 4px 14px rgba(124,58,237,0.35);
}
.wa-ai-fbtn-primary:hover { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(124,58,237,0.45); }
.wa-ai-fbtn-ghost {
  color: rgba(255,255,255,0.85);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
}
.wa-ai-fbtn-ghost:hover { background: rgba(255,255,255,0.1); }

@media (max-width: 640px) {
  .wa-ai-dialog { width: calc(100vw - 20px); }
  .wa-ai-head { padding: 16px 16px 12px; }
  .wa-ai-tabs { padding: 10px 16px 0; }
  .wa-ai-question-card { margin: 12px 16px 0; }
  .wa-ai-body { padding: 12px 16px 6px; }
  .wa-ai-footer { padding: 10px 16px 14px; }
  .wa-ai-avatar { width: 40px; height: 40px; border-radius: 12px; }
  .wa-ai-title { font-size: 15px; }
}

/* ==================== 在线考试列表页 · 科技感 ==================== */
.oel-container { padding: 12px 20px 40px; max-width: 1200px; margin: 0 auto; }
.oel-hero {
  position: relative; overflow: hidden; padding: 26px 28px;
  background: linear-gradient(135deg, rgba(102,126,234,0.15), rgba(118,75,162,0.15));
  border: 1px solid rgba(102,126,234,0.35); border-radius: 20px; margin-bottom: 22px;
  display: flex; align-items: center; gap: 22px; backdrop-filter: blur(20px);
  box-shadow: 0 12px 40px rgba(102,126,234,0.15);
}
.oel-hero-decor {
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 20% 0%, rgba(102,126,234,0.35), transparent 40%),
    radial-gradient(circle at 100% 100%, rgba(118,75,162,0.35), transparent 45%),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.03) 0 1px, transparent 1px 60px),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.03) 0 1px, transparent 1px 60px);
  pointer-events: none;
}
.oel-hero-icon {
  width: 72px; height: 72px; border-radius: 20px; flex-shrink: 0;
  background: linear-gradient(135deg, var(--oel-c1,#4facfe), var(--oel-c2,#00f2fe));
  display: flex; align-items: center; justify-content: center;
  font-size: 36px; box-shadow: 0 10px 32px rgba(79,172,254,0.5);
  position: relative; z-index: 1;
}
.oel-hero-content { flex: 1; position: relative; z-index: 1; }
.oel-hero-title { font-size: 24px; font-weight: 700; color: #fff; margin-bottom: 6px; letter-spacing: 0.3px; }
.oel-hero-desc { font-size: 14px; color: rgba(255,255,255,0.65); margin-bottom: 12px; }
.oel-hero-stats { display: flex; align-items: center; gap: 10px; font-size: 13px; color: rgba(255,255,255,0.7); }
.oel-hero-stat span { font-weight: 700; color: #fff; font-size: 16px; margin-right: 4px; }
.oel-hero-stat-sep { color: rgba(255,255,255,0.3); }

.oel-list { display: flex; flex-direction: column; gap: 16px; }
.oel-card {
  position: relative; padding: 22px 24px;
  background: linear-gradient(135deg, rgba(28,32,60,0.85), rgba(35,40,72,0.85));
  border: 1px solid rgba(102,126,234,0.22); border-radius: 18px;
  transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
  animation: oel-card-in 0.5s cubic-bezier(0.4,0,0.2,1) backwards;
  animation-delay: calc(var(--oel-idx,0) * 0.06s);
}
@keyframes oel-card-in { from { opacity: 0; transform: translateY(18px);} to { opacity: 1; transform: translateY(0);} }
.oel-card:hover { transform: translateY(-3px); border-color: rgba(102,126,234,0.55); box-shadow: 0 12px 40px rgba(102,126,234,0.2); }
.oel-card-glow {
  position: absolute; inset: 0; border-radius: 18px; pointer-events: none; opacity: 0;
  background: radial-gradient(circle at 50% 0%, rgba(102,126,234,0.15), transparent 55%);
  transition: opacity 0.3s;
}
.oel-card:hover .oel-card-glow { opacity: 1; }

.oel-card-head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 14px; }
.oel-card-num {
  font-family: 'Courier New', monospace; font-size: 12px; font-weight: 700;
  color: transparent; background: linear-gradient(135deg, var(--oel-c1,#4facfe), var(--oel-c2,#00f2fe));
  -webkit-background-clip: text; background-clip: text; letter-spacing: 1px;
  padding: 6px 10px; border-radius: 8px; border: 1px solid rgba(102,126,234,0.35);
  flex-shrink: 0; line-height: 1;
}
.oel-card-title-wrap { flex: 1; min-width: 0; }
.oel-card-title { font-size: 17px; font-weight: 600; color: #fff; margin-bottom: 4px; letter-spacing: 0.2px; }
.oel-card-desc { font-size: 12.5px; color: rgba(255,255,255,0.55); line-height: 1.5; }
.oel-card-status-pill {
  flex-shrink: 0; padding: 5px 12px; border-radius: 999px; font-size: 12px; font-weight: 600;
  line-height: 1.4; letter-spacing: 0.3px;
}
.oel-status-active { background: rgba(67,233,123,0.15); color: #43e97b; border: 1px solid rgba(67,233,123,0.4); }
.oel-status-waiting { background: rgba(254,225,64,0.15); color: #fee140; border: 1px solid rgba(254,225,64,0.4); }
.oel-status-ended { background: rgba(255,107,107,0.15); color: #ff6b6b; border: 1px solid rgba(255,107,107,0.4); }
.oel-status-done { background: rgba(102,126,234,0.15); color: #a5b4fc; border: 1px solid rgba(102,126,234,0.4); }
.oel-status-retake { background: rgba(0,242,254,0.15); color: #00f2fe; border: 1px solid rgba(0,242,254,0.4); }
.oel-status-pending { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.7); border: 1px solid rgba(255,255,255,0.2); }

.oel-card-meta {
  display: flex; flex-wrap: wrap; gap: 12px 22px; margin-bottom: 16px;
  padding: 12px 14px; background: rgba(255,255,255,0.03); border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.06);
}
.oel-meta-item {
  display: flex; align-items: center; gap: 6px; font-size: 13px; color: rgba(255,255,255,0.75);
}
.oel-meta-item svg { color: var(--oel-c1,#4facfe); opacity: 0.9; flex-shrink: 0; }

.oel-card-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.oel-score-badge {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 8px 18px; border-radius: 12px;
  background: linear-gradient(135deg, rgba(102,126,234,0.2), rgba(118,75,162,0.2));
  border: 1px solid rgba(102,126,234,0.4); min-width: 84px;
}
.oel-score-num { font-size: 22px; font-weight: 700; color: #fff; line-height: 1; }
.oel-score-lbl { font-size: 11px; color: rgba(255,255,255,0.6); margin-top: 4px; }
.oel-card-btns { display: flex; gap: 10px; margin-left: auto; }

.oel-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 20px; border-radius: 12px; font-size: 14px; font-weight: 600;
  cursor: pointer; border: 1px solid transparent; transition: all 0.25s;
  letter-spacing: 0.3px; line-height: 1;
}
.oel-btn-primary {
  background: linear-gradient(135deg, #667eea, #764ba2); color: #fff;
  box-shadow: 0 4px 16px rgba(102,126,234,0.4);
}
.oel-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 6px 22px rgba(102,126,234,0.6); }
.oel-btn-retake {
  background: linear-gradient(135deg, #00f2fe, #4facfe); color: #fff;
  box-shadow: 0 4px 16px rgba(79,172,254,0.4);
}
.oel-btn-retake:hover { transform: translateY(-2px); box-shadow: 0 6px 22px rgba(79,172,254,0.6); }
.oel-btn-view {
  background: rgba(255,255,255,0.06); color: #fff;
  border: 1px solid rgba(102,126,234,0.4);
}
.oel-btn-view:hover:not(.oel-btn-disabled) { background: rgba(102,126,234,0.15); border-color: rgba(102,126,234,0.7); }
.oel-btn-disabled {
  background: rgba(255,255,255,0.04) !important; color: rgba(255,255,255,0.35) !important;
  border: 1px solid rgba(255,255,255,0.08) !important; cursor: not-allowed !important;
  box-shadow: none !important;
}
.oel-btn-disabled:hover { transform: none !important; }

.oel-empty {
  padding: 60px 20px; text-align: center; border: 1px dashed rgba(102,126,234,0.3);
  border-radius: 16px; background: rgba(255,255,255,0.02);
}
.oel-empty-icon { font-size: 48px; margin-bottom: 12px; opacity: 0.55; }
.oel-empty-title { font-size: 17px; font-weight: 600; color: #fff; margin-bottom: 6px; }
.oel-empty-desc { font-size: 13px; color: rgba(255,255,255,0.55); }

.result-subtitle { color: rgba(255,255,255,0.7); font-size: 14px; margin-top: 6px; }
.action-btn-disabled { background: rgba(255,255,255,0.05) !important; color: rgba(255,255,255,0.4) !important; cursor: not-allowed !important; }
.action-btn-retake { background: linear-gradient(135deg,#00f2fe,#4facfe) !important; color: #fff !important; }

@media (max-width: 640px) {
  .oel-hero { flex-direction: column; align-items: flex-start; padding: 20px; gap: 16px; }
  .oel-card-actions { flex-direction: column; align-items: stretch; }
  .oel-score-badge { flex-direction: row; align-items: center; gap: 8px; padding: 8px 14px; }
  .oel-card-btns { width: 100%; }
  .oel-card-btns .oel-btn { flex: 1; }
}

/* 期中考试页顶部导航：返回按钮 + 标题横排对齐 */
.oel-page-header {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  min-height: 44px;
  padding: 0 4px;
}
.oel-page-header .oel-back-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  height: 40px;
  padding: 0 16px;
  line-height: 1 !important;
  font-size: 15px;
  font-weight: 500;
  color: #fff;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 10px;
  cursor: pointer;
  transition: all .2s ease;
}
.oel-page-header .oel-back-btn:hover {
  background: rgba(255,255,255,0.14);
  border-color: rgba(255,255,255,0.28);
}
.oel-page-header .oel-back-btn svg {
  display: block;
  flex-shrink: 0;
  vertical-align: middle;
}
.oel-page-header .oel-back-btn span {
  line-height: 1 !important;
  font-size: 15px;
  display: inline-block;
  vertical-align: middle;
}
.oel-page-header .oel-page-title {
  margin: 0 !important;
  line-height: 40px !important;
  height: 40px;
  font-size: 20px;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(135deg, #a5b4fc 0%, #c4b5fd 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

}

/* ====== 课外知识页：科技感大气卡片 ====== */
.ek-page-header {
  display: inline-flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 12px !important;
  min-height: 48px;
  padding: 4px 16px 4px 4px;
  margin: 4px 0 18px;
  background: linear-gradient(135deg, rgba(99,102,241,0.14), rgba(139,92,246,0.10));
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 14px;
  width: auto;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  box-shadow: 0 6px 18px -6px rgba(0,0,0,0.35);
}
.ek-page-header .ek-back-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  height: 40px;
  padding: 0 14px;
  line-height: 1 !important;
  font-size: 15px;
  font-weight: 500;
  color: #fff;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 10px;
  cursor: pointer;
  flex-shrink: 0;
  white-space: nowrap;
  transition: all 0.25s cubic-bezier(0.4,0,0.2,1);
}
.ek-page-header .ek-back-btn:hover {
  background: rgba(255,255,255,0.14);
  border-color: rgba(255,255,255,0.28);
  transform: translateX(-2px);
}
.ek-page-header .ek-back-btn svg {
  display: block;
  flex-shrink: 0;
}
.ek-page-header .ek-back-btn span {
  line-height: 1 !important;
  font-size: 15px;
}
.ek-page-header .ek-title-bar {
  width: 1px;
  height: 24px;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,0.28), transparent);
  flex-shrink: 0;
}
.ek-page-header .ek-page-title {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 40px !important;
  height: 40px;
  display: inline-flex !important;
  align-items: center;
  font-size: 17px;
  font-weight: 700;
  color: #fff !important;
  background: none !important;
  -webkit-background-clip: initial !important;
  -webkit-text-fill-color: #fff !important;
  background-clip: initial !important;
  letter-spacing: 0.3px;
  white-space: nowrap;
  flex-shrink: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ek-page-header .ek-page-subtitle {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding-left: 12px;
  margin-left: 12px;
  border-left: 1px solid rgba(255,255,255,0.18);
  font-size: 13px;
  font-weight: 400;
  color: rgba(255,255,255,0.60) !important;
  letter-spacing: 0.3px;
  -webkit-text-fill-color: rgba(255,255,255,0.60) !important;
  background: none !important;
  white-space: nowrap;
}
.page-content[data-page="extra-knowledge"] .ek-page-header .ek-page-subtitle { display: none; }

/* ============ 课外知识主页 · 科技感重构 ============ */
.page-content[data-page="extra-knowledge"] {
  padding: 0 24px 32px !important;
  margin-top: -20px; /* 完全抵消 .main-content padding-top 20px → 顶部间距 0；左右总边距 = main-content 24 + 内 24 = 48px */
  overflow-y: auto !important;
  max-height: calc(100vh - 80px);
}

/* solo header：只放一个返回按钮，去掉胶囊背景 */
.ek-page-header-solo {
  display: inline-flex !important;
  align-items: center !important;
  padding: 0 !important;
  margin: 0 0 14px !important;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  min-height: auto !important;
  overflow: visible !important;
}

/* Hero 主视觉（一体化 · 紧凑版） */
.ek-hero {
  position: relative;
  margin: 0 0 16px;
  padding: 14px 18px 16px;
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(30,41,80,0.72) 0%, rgba(60,50,120,0.60) 50%, rgba(90,50,140,0.50) 100%);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 14px 32px -12px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.06);
}
.ek-hero-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 26px 26px;
  mask-image: radial-gradient(ellipse 80% 90% at 50% 50%, black 40%, transparent 90%);
  -webkit-mask-image: radial-gradient(ellipse 80% 90% at 50% 50%, black 40%, transparent 90%);
  pointer-events: none;
}
.ek-hero-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(24px);
  pointer-events: none;
  opacity: 0.6;
}
.ek-hero-orb-1 {
  width: 180px; height: 180px;
  background: radial-gradient(circle, #60a5fa 0%, transparent 70%);
  top: -70px; right: -50px;
}
.ek-hero-orb-2 {
  width: 180px; height: 180px;
  background: radial-gradient(circle, #f472b6 0%, transparent 70%);
  bottom: -80px; left: -50px;
}
.ek-hero-scanline {
  position: absolute;
  top: 0; left: -100%;
  width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent);
  animation: ekScan 6s linear infinite;
  pointer-events: none;
}
@keyframes ekScan {
  0% { left: -60%; }
  100% { left: 100%; }
}

/* 顶部条：返回按钮 + Badge + Stats 一行 */
.ek-hero-topbar {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.ek-back-btn-mini {
  height: 30px !important;
  padding: 0 10px !important;
  gap: 4px !important;
  font-size: 12.5px !important;
  border-radius: 8px !important;
  background: rgba(255,255,255,0.08) !important;
  border: 1px solid rgba(255,255,255,0.16) !important;
  flex-shrink: 0;
}
.ek-back-btn-mini span { font-size: 12.5px !important; }
.ek-back-btn-mini svg { width: 12px; height: 12px; }
.ek-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 8px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 1.4px;
  color: rgba(196,181,253,0.95);
  background: rgba(99,102,241,0.14);
  border: 1px solid rgba(167,139,250,0.32);
  border-radius: 20px;
  flex-shrink: 0;
  line-height: 1;
}
.ek-hero-badge-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #a78bfa;
  box-shadow: 0 0 8px #a78bfa;
  animation: ekPulse 2s ease-in-out infinite;
}
@keyframes ekPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.3); }
}
.ek-hero-stats {
  display: flex;
  gap: 6px;
  margin-left: auto;
  flex-shrink: 0;
}
.ek-hero-stat {
  min-width: 56px;
  padding: 5px 10px;
  border-radius: 10px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  text-align: center;
  backdrop-filter: blur(6px);
  line-height: 1.1;
}
.ek-hero-stat-val {
  display: block;
  font-size: 13px;
  font-weight: 800;
  background: linear-gradient(135deg, #60a5fa, #a78bfa);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: 0.3px;
}
.ek-hero-stat-key {
  display: block;
  font-size: 9.5px;
  color: rgba(255,255,255,0.5);
  margin-top: 1px;
  letter-spacing: 0.3px;
}

/* 主标题区 */
.ek-hero-body {
  position: relative;
  z-index: 1;
}
.ek-hero-title {
  margin: 0 0 4px;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: 0.5px;
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.ek-hero-title-1 {
  background: linear-gradient(135deg, #ffffff 0%, #dbeafe 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.ek-hero-title-2 {
  background: linear-gradient(135deg, #60a5fa 0%, #a78bfa 50%, #f0abfc 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.ek-hero-desc {
  margin: 0;
  font-size: 12px;
  color: rgba(255,255,255,0.60);
  line-height: 1.5;
  max-width: 640px;
}

@media (max-width: 540px) {
  .ek-hero-stats { margin-left: 0; width: 100%; }
  .ek-hero-stat { flex: 1; }
  .ek-hero-title { font-size: 20px; }
}


/* 分区标题 */
.ek-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2px 16px;
  margin-bottom: 0;
}
.ek-section-title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.ek-section-title-bar {
  width: 3px; height: 16px;
  border-radius: 3px;
  background: linear-gradient(180deg, #60a5fa, #a78bfa);
  box-shadow: 0 0 8px rgba(96,165,250,0.55);
}
.ek-section-title-text {
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.5px;
}
.ek-section-title-sub {
  font-size: 12px;
  color: rgba(255,255,255,0.45);
  letter-spacing: 0.3px;
}
.ek-section-hint {
  font-size: 11.5px;
  padding: 4px 10px;
  border-radius: 20px;
  color: rgba(255,255,255,0.65);
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
}

/* 卡片网格 */
.ek-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  padding: 0 0 4px;
}
.ek-card-wide { grid-column: 1 / -1; }

@media (max-width: 640px) {
  .ek-grid { grid-template-columns: 1fr; gap: 12px; }
  .ek-card-wide { grid-column: auto; }
  .ek-hero-title { font-size: 24px; }
  .ek-hero-stats { width: 100%; }
  .ek-hero-stat { flex: 1; min-width: 0; }
}

/* 卡片本体 */
.ek-card {
  position: relative;
  border-radius: 16px;
  padding: 16px 16px 14px;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.055) 0%, rgba(255,255,255,0.02) 100%),
    rgba(20,25,50,0.55);
  border: 1px solid rgba(255,255,255,0.10);
  backdrop-filter: blur(10px);
  cursor: pointer;
  transition: all 0.32s cubic-bezier(0.4,0,0.2,1);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 148px;
}
.ek-card-topline {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--ek-tone, linear-gradient(90deg, #6366f1, #a78bfa));
  opacity: 0.9;
}
.ek-card-glow {
  position: absolute;
  bottom: -60px; right: -60px;
  width: 160px; height: 160px;
  border-radius: 50%;
  background: var(--ek-glow, radial-gradient(circle, rgba(99,102,241,0.32) 0%, transparent 65%));
  opacity: 0.5;
  transition: opacity 0.4s, transform 0.4s;
  pointer-events: none;
}
.ek-card:hover {
  transform: translateY(-5px);
  border-color: rgba(255,255,255,0.22);
  box-shadow: 0 18px 34px -12px rgba(0,0,0,0.55), var(--ek-shadow, 0 0 0 1px rgba(99,102,241,0.28));
}
.ek-card:hover .ek-card-glow {
  opacity: 0.85;
  transform: scale(1.15);
}
.ek-card:hover .ek-card-arrow {
  transform: translateX(4px);
  color: #fff;
}
.ek-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.ek-card-icon {
  width: 40px; height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center; justify-content: center;
  background: var(--ek-icon-bg, linear-gradient(135deg, rgba(99,102,241,0.85), rgba(168,85,247,0.85)));
  box-shadow: 0 6px 14px -4px rgba(99,102,241,0.55);
  color: #fff;
  flex-shrink: 0;
}
.ek-card-tag {
  padding: 3px 10px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 1.2px;
  border-radius: 20px;
  background: var(--ek-tag-bg, rgba(99,102,241,0.16));
  color: var(--ek-tag-color, rgba(165,180,252,0.95));
  border: 1px solid var(--ek-tag-border, rgba(99,102,241,0.28));
}
.ek-card-title {
  margin: 4px 0 0;
  font-size: 17px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.3px;
  line-height: 1.25;
}
.ek-card-desc {
  margin: 0;
  font-size: 12.5px;
  color: rgba(255,255,255,0.58);
  line-height: 1.55;
  flex: 1;
}
.ek-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 10px;
  border-top: 1px dashed rgba(255,255,255,0.08);
  margin-top: 2px;
}
.ek-card-metrics {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.ek-card-metric {
  font-size: 11.5px;
  color: rgba(255,255,255,0.55);
  letter-spacing: 0.3px;
}
.ek-card-metric b {
  color: var(--ek-accent, #a5b4fc);
  font-weight: 700;
  font-size: 13px;
  margin-right: 2px;
}
.ek-card-metric-dot {
  width: 3px; height: 3px;
  border-radius: 50%;
  background: rgba(255,255,255,0.22);
}
.ek-card-arrow {
  font-size: 18px;
  color: rgba(255,255,255,0.45);
  transition: all 0.28s cubic-bezier(0.4,0,0.2,1);
  line-height: 1;
  flex-shrink: 0;
}

/* 五个卡片主题色（CSS 变量驱动） */
.ek-card-skill {
  --ek-tone: linear-gradient(90deg, #22d3ee, #3b82f6);
  --ek-glow: radial-gradient(circle, rgba(59,130,246,0.35), transparent 65%);
  --ek-icon-bg: linear-gradient(135deg, #22d3ee, #3b82f6);
  --ek-tag-bg: rgba(59,130,246,0.14);
  --ek-tag-color: #7dd3fc;
  --ek-tag-border: rgba(59,130,246,0.32);
  --ek-accent: #7dd3fc;
  --ek-shadow: 0 0 0 1px rgba(59,130,246,0.34);
}
.ek-card-frontier {
  --ek-tone: linear-gradient(90deg, #a78bfa, #f0abfc);
  --ek-glow: radial-gradient(circle, rgba(168,139,250,0.35), transparent 65%);
  --ek-icon-bg: linear-gradient(135deg, #a78bfa, #f0abfc);
  --ek-tag-bg: rgba(168,139,250,0.16);
  --ek-tag-color: #ddd6fe;
  --ek-tag-border: rgba(168,139,250,0.32);
  --ek-accent: #ddd6fe;
  --ek-shadow: 0 0 0 1px rgba(168,139,250,0.34);
}
.ek-card-industry {
  --ek-tone: linear-gradient(90deg, #f59e0b, #fbbf24);
  --ek-glow: radial-gradient(circle, rgba(245,158,11,0.35), transparent 65%);
  --ek-icon-bg: linear-gradient(135deg, #f59e0b, #fbbf24);
  --ek-tag-bg: rgba(245,158,11,0.14);
  --ek-tag-color: #fde68a;
  --ek-tag-border: rgba(245,158,11,0.32);
  --ek-accent: #fde68a;
  --ek-shadow: 0 0 0 1px rgba(245,158,11,0.34);
}
.ek-card-career {
  --ek-tone: linear-gradient(90deg, #ec4899, #f472b6);
  --ek-glow: radial-gradient(circle, rgba(236,72,153,0.35), transparent 65%);
  --ek-icon-bg: linear-gradient(135deg, #ec4899, #f472b6);
  --ek-tag-bg: rgba(236,72,153,0.14);
  --ek-tag-color: #fbcfe8;
  --ek-tag-border: rgba(236,72,153,0.32);
  --ek-accent: #fbcfe8;
  --ek-shadow: 0 0 0 1px rgba(236,72,153,0.34);
}
.ek-card-psychology {
  --ek-tone: linear-gradient(90deg, #34d399, #10b981);
  --ek-glow: radial-gradient(circle, rgba(52,211,153,0.35), transparent 65%);
  --ek-icon-bg: linear-gradient(135deg, #34d399, #10b981);
  --ek-tag-bg: rgba(52,211,153,0.14);
  --ek-tag-color: #a7f3d0;
  --ek-tag-border: rgba(52,211,153,0.32);
  --ek-accent: #a7f3d0;
  --ek-shadow: 0 0 0 1px rgba(52,211,153,0.34);
}

/* 底部 */
.ek-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 22px 0 4px;
  color: rgba(255,255,255,0.35);
}
.ek-footer-icon {
  display: inline-flex;
  color: rgba(167,139,250,0.5);
}
.ek-footer-text {
  margin: 0;
  font-size: 11.5px;
  letter-spacing: 1.2px;
  color: rgba(255,255,255,0.42);
}



/* ============ 课外知识 · 内页详情（Detail Page） ============ */
.page-content[data-page="extra-knowledge-detail"] {
  padding: 16px 20px 40px !important;
  overflow-y: auto !important;
  max-height: calc(100vh - 80px);
}

/* Hero — 一体化紧凑版（顶部条 + 主体） */
.ekd-hero {
  position: relative;
  border-radius: 16px;
  padding: 12px 16px 14px;
  margin: 2px 0 16px;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(99,102,241,0.16) 0%, rgba(139,92,246,0.11) 60%, rgba(217,70,239,0.10) 100%);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 8px 24px -10px rgba(0,0,0,0.45);
}
.ekd-hero-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 80% at 100% 0%, rgba(96,165,250,0.22), transparent 60%),
    radial-gradient(ellipse 60% 80% at 0% 100%, rgba(167,139,250,0.20), transparent 60%);
  pointer-events: none;
}
.ekd-hero-topbar {
  position: relative; z-index: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
  min-height: 30px;
  margin-bottom: 10px;
}
.ekd-hero-topbar .ek-back-btn-mini {
  flex-shrink: 0;
}
.ekd-hero-body {
  position: relative; z-index: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.ekd-hero-text { min-width: 0; flex: 1; }
.ekd-hero-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #4facfe, #00f2fe);
  box-shadow: 0 8px 18px -6px rgba(79,172,254,0.55);
  flex-shrink: 0;
}
.ekd-hero-icon svg { width: 22px; height: 22px; }
.ekd-hero-tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 20px;
  background: rgba(255,255,255,0.09);
  border: 1px solid rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.88);
  font-size: 10.5px;
  letter-spacing: 1px;
  height: 22px;
  line-height: 1;
  white-space: nowrap;
}
.ekd-hero-title {
  margin: 0 0 3px;
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #ffffff 0%, #e0e7ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1.25;
}
.ekd-hero-desc {
  margin: 0;
  font-size: 12px;
  color: rgba(255,255,255,0.62);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ekd-hero-stats {
  margin-left: auto;
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.ekd-hero-stat {
  text-align: center;
  padding: 4px 8px;
  border-radius: 8px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
  min-width: 46px;
  line-height: 1.1;
}
.ekd-hero-stat-val {
  display: block;
  font-size: 13px; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, #60a5fa, #a78bfa);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.ekd-hero-stat-key {
  display: block;
  font-size: 10px;
  color: rgba(255,255,255,0.55);
  margin-top: 1px;
}
@media (max-width: 640px) {
  .ekd-hero-topbar { flex-wrap: wrap; }
  .ekd-hero-stats { margin-left: 0; width: 100%; }
  .ekd-hero-stat { flex: 1; }
}

/* Tabs */
.ekd-tabs {
  display: flex;
  gap: 8px;
  padding: 4px 0 18px;
  overflow-x: auto;
  scrollbar-width: none;
}
.ekd-tabs::-webkit-scrollbar { display: none; }
.ekd-tab {
  flex-shrink: 0;
  padding: 8px 16px;
  border-radius: 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.70);
  font-size: 13px;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4,0,0.2,1);
  user-select: none;
}
.ekd-tab:hover {
  background: rgba(255,255,255,0.08);
  color: #fff;
}
.ekd-tab.active {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 4px 16px -4px rgba(102,126,234,0.55);
}

/* Grid */
.ekd-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  padding-bottom: 12px;
}
@media (max-width: 720px) {
  .ekd-grid { grid-template-columns: 1fr; }
  .ekd-hero-inner { grid-template-columns: 56px 1fr; }
  .ekd-hero-stats { grid-column: 1 / -1; margin-top: 8px; grid-auto-flow: column; }
}

.ekd-item {
  position: relative;
  border-radius: 16px;
  padding: 16px 16px 14px;
  background: linear-gradient(135deg, rgba(255,255,255,0.045), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.10);
  cursor: pointer;
  transition: all 0.28s cubic-bezier(0.4,0,0.2,1);
  overflow: hidden;
  animation: ekdItemIn 0.4s ease-out both;
}
@keyframes ekdItemIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.ekd-item::after {
  content: "";
  position: absolute;
  right: -30px; bottom: -30px;
  width: 100px; height: 100px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(99,102,241,0.18), transparent 70%);
  pointer-events: none;
}
.ekd-item:hover {
  transform: translateY(-3px);
  border-color: rgba(255,255,255,0.24);
  background: linear-gradient(135deg, rgba(255,255,255,0.075), rgba(255,255,255,0.03));
  box-shadow: 0 14px 30px -10px rgba(0,0,0,0.5);
}
.ekd-item-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.ekd-item-emoji {
  width: 38px; height: 38px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  flex-shrink: 0;
}
.ekd-item-tag {
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 10.5px;
  letter-spacing: 0.5px;
  background: rgba(96,165,250,0.18);
  color: #93c5fd;
  border: 1px solid rgba(96,165,250,0.30);
}
.ekd-item-tag.hot { background: rgba(244,63,94,0.18); color: #fda4af; border-color: rgba(244,63,94,0.30); }
.ekd-item-tag.new { background: rgba(34,197,94,0.18); color: #86efac; border-color: rgba(34,197,94,0.30); }
.ekd-item-tag.rec { background: rgba(234,179,8,0.18); color: #fde68a; border-color: rgba(234,179,8,0.30); }

.ekd-item-title {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  position: relative; z-index: 1;
}
.ekd-item-desc {
  margin: 0 0 10px;
  font-size: 12.5px;
  color: rgba(255,255,255,0.58);
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 38px;
  position: relative; z-index: 1;
}
.ekd-item-meta {
  display: flex;
  gap: 10px;
  align-items: center;
  padding-top: 8px;
  border-top: 1px dashed rgba(255,255,255,0.08);
  position: relative; z-index: 1;
}
.ekd-item-meta-item {
  font-size: 11.5px;
  color: rgba(255,255,255,0.55);
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.ekd-item-meta-item + .ekd-item-meta-item::before {
  content: "·";
  color: rgba(255,255,255,0.25);
  margin-right: 4px;
}
.ekd-item-arrow {
  margin-left: auto;
  color: rgba(255,255,255,0.45);
  font-size: 14px;
  transition: transform 0.25s;
}
.ekd-item:hover .ekd-item-arrow {
  color: #fff;
  transform: translateX(3px);
}

/* 主题色（按板块切换） */
.ekd-theme-skill .ekd-hero-icon { background: linear-gradient(135deg, #22d3ee, #3b82f6); box-shadow: 0 12px 26px -8px rgba(59,130,246,0.55); }
.ekd-theme-skill .ekd-hero-stat-val { background: linear-gradient(135deg, #22d3ee, #60a5fa); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }

.ekd-theme-frontier .ekd-hero-icon { background: linear-gradient(135deg, #a78bfa, #f0abfc); box-shadow: 0 12px 26px -8px rgba(167,139,250,0.55); }
.ekd-theme-frontier .ekd-hero-stat-val { background: linear-gradient(135deg, #c4b5fd, #f0abfc); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }

.ekd-theme-industry .ekd-hero-icon { background: linear-gradient(135deg, #f59e0b, #fbbf24); box-shadow: 0 12px 26px -8px rgba(245,158,11,0.55); }
.ekd-theme-industry .ekd-hero-stat-val { background: linear-gradient(135deg, #fbbf24, #fde68a); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }

.ekd-theme-career .ekd-hero-icon { background: linear-gradient(135deg, #ec4899, #f472b6); box-shadow: 0 12px 26px -8px rgba(236,72,153,0.55); }
.ekd-theme-career .ekd-hero-stat-val { background: linear-gradient(135deg, #f472b6, #fbcfe8); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }

.ekd-theme-psychology .ekd-hero-icon { background: linear-gradient(135deg, #34d399, #10b981); box-shadow: 0 12px 26px -8px rgba(52,211,153,0.55); }
.ekd-theme-psychology .ekd-hero-stat-val { background: linear-gradient(135deg, #6ee7b7, #34d399); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }

.ekd-footer {
  text-align: center;
  padding: 18px 0 8px;
}
.ekd-footer-text {
  font-size: 12px;
  color: rgba(255,255,255,0.35);
  margin: 0;
}

/* 弹窗（内容详情） */
.ekd-modal-mask {
  position: fixed; inset: 0;
  background: rgba(3, 6, 20, 0.72);
  backdrop-filter: blur(10px);
  z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  animation: ekdMaskIn 0.25s ease-out;
}
@keyframes ekdMaskIn { from { opacity: 0; } to { opacity: 1; } }
.ekd-modal {
  width: 100%;
  max-width: 620px;
  max-height: 85vh;
  overflow-y: auto;
  border-radius: 20px;
  padding: 26px 26px 22px;
  background: linear-gradient(135deg, #1a1f3a 0%, #2d3561 100%);
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 30px 60px -20px rgba(0,0,0,0.7);
  animation: ekdModalIn 0.28s cubic-bezier(0.4,0,0.2,1);
}
@keyframes ekdModalIn {
  from { opacity: 0; transform: translateY(20px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.ekd-modal-header {
  display: flex; align-items: flex-start; gap: 14px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.ekd-modal-emoji {
  width: 46px; height: 46px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px;
  background: linear-gradient(135deg, #667eea, #764ba2);
  flex-shrink: 0;
}
.ekd-modal-title {
  margin: 2px 0 4px;
  font-size: 18px;
  font-weight: 700;
  color: #fff;
}
.ekd-modal-subtitle {
  margin: 0;
  font-size: 12.5px;
  color: rgba(255,255,255,0.55);
}
.ekd-modal-close {
  margin-left: auto;
  width: 32px; height: 32px;
  border-radius: 10px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.75);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  line-height: 1;
  flex-shrink: 0;
  transition: all 0.2s;
}
.ekd-modal-close:hover {
  background: rgba(255,255,255,0.12);
  color: #fff;
}
.ekd-modal-body {
  padding-top: 16px;
}
.ekd-modal-section {
  margin-bottom: 16px;
}
.ekd-modal-section-title {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,0.85);
  margin: 0 0 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.ekd-modal-section-title::before {
  content: "";
  width: 3px; height: 14px;
  border-radius: 2px;
  background: linear-gradient(180deg, #667eea, #764ba2);
}
.ekd-modal-section-body {
  font-size: 13.5px;
  color: rgba(255,255,255,0.72);
  line-height: 1.75;
}
.ekd-modal-points {
  list-style: none;
  padding: 0;
  margin: 0;
}
.ekd-modal-points li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 8px;
  font-size: 13px;
  color: rgba(255,255,255,0.72);
  line-height: 1.6;
}
.ekd-modal-points li::before {
  content: "";
  position: absolute;
  left: 0; top: 8px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: linear-gradient(135deg, #60a5fa, #a78bfa);
  box-shadow: 0 0 0 3px rgba(99,102,241,0.18);
}
.ekd-modal-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px dashed rgba(255,255,255,0.08);
}
.ekd-modal-chip {
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 11.5px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.72);
}


/* ============ 资料查阅 · 校内学习（Material Lookup） ============ */
.page-content[data-page="material-lookup"] {
  padding: 0 24px 40px !important;
  margin-top: -20px; /* 完全抵消 .main-content padding-top 20px → 顶部间距 0；总左右 = main-content 24 + 内 24 = 48px */
  overflow-y: auto !important;
  max-height: calc(100vh - 80px);
}

/* Hero */
.ml-hero {
  position: relative;
  border-radius: 18px;
  padding: 12px 16px 14px;
  margin: 0 0 16px;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(59,130,246,0.14) 0%, rgba(139,92,246,0.10) 55%, rgba(236,72,153,0.10) 100%);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 10px 30px -10px rgba(0,0,0,0.4);
}
.ml-hero-bg {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px);
  background-size: 26px 26px;
  mask-image: radial-gradient(ellipse 65% 100% at 50% 50%, #000 55%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 65% 100% at 50% 50%, #000 55%, transparent 100%);
  opacity: 0.7;
  pointer-events: none;
}
.ml-hero-orb {
  position: absolute;
  width: 180px; height: 180px;
  border-radius: 50%;
  filter: blur(28px);
  opacity: 0.55;
  pointer-events: none;
}
.ml-hero-orb-1 {
  top: -60px; right: -30px;
  background: radial-gradient(circle, #60a5fa, transparent 70%);
}
.ml-hero-orb-2 {
  bottom: -60px; left: -20px;
  background: radial-gradient(circle, #f472b6, transparent 70%);
}

.ml-hero-topbar {
  position: relative; z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.ml-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 20px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.82);
  font-size: 10.5px;
  letter-spacing: 0.8px;
  font-weight: 600;
}
.ml-hero-badge-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: linear-gradient(135deg, #60a5fa, #a78bfa);
  box-shadow: 0 0 8px rgba(96,165,250,0.7);
  animation: mlPulse 2s ease-in-out infinite;
}
@keyframes mlPulse {
  0%,100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.4); opacity: 0.55; }
}
.ml-hero-stats {
  margin-left: auto;
  display: flex;
  gap: 6px;
}
.ml-hero-stat {
  padding: 4px 10px;
  border-radius: 10px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  text-align: center;
  min-width: 52px;
  display: flex; flex-direction: column; align-items: center;
  gap: 1px;
}
.ml-hero-stat-val {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #60a5fa, #a78bfa);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1.2;
}
.ml-hero-stat-key {
  font-size: 10px;
  color: rgba(255,255,255,0.55);
}

.ml-hero-body {
  position: relative; z-index: 2;
  display: flex;
  align-items: center;
  gap: 14px;
}
.ml-hero-icon {
  width: 46px; height: 46px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #4facfe, #764ba2);
  color: #fff;
  box-shadow: 0 10px 22px -8px rgba(79,172,254,0.55);
  flex-shrink: 0;
}
.ml-hero-text { min-width: 0; }
.ml-hero-title {
  margin: 0 0 3px;
  font-size: 19px;
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
}
.ml-hero-desc {
  margin: 0;
  font-size: 12px;
  color: rgba(255,255,255,0.62);
  line-height: 1.5;
}

/* 移动端 topbar 折行 */
@media (max-width: 560px) {
  .ml-hero-topbar { flex-wrap: wrap; }
  .ml-hero-stats { width: 100%; margin-left: 0; }
  .ml-hero-stat { flex: 1; }
}

/* 大 Tab: 实践学习 / 技能培训 */
.ml-category {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 16px;
}
.ml-cat-btn {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.10);
  background: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
  color: #fff;
  cursor: pointer;
  transition: all 0.28s cubic-bezier(0.4,0,0.2,1);
  overflow: hidden;
  text-align: left;
}
.ml-cat-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(96,165,250,0), rgba(96,165,250,0));
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}
.ml-cat-btn:hover {
  border-color: rgba(255,255,255,0.24);
  transform: translateY(-2px);
}
.ml-cat-btn.active {
  border-color: transparent;
  background: linear-gradient(135deg, rgba(59,130,246,0.30), rgba(139,92,246,0.30));
  box-shadow: 0 12px 28px -10px rgba(99,102,241,0.5), inset 0 0 0 1px rgba(255,255,255,0.20);
}
.ml-cat-btn.active[data-cat="skill"] {
  background: linear-gradient(135deg, rgba(52,211,153,0.28), rgba(20,184,166,0.28));
  box-shadow: 0 12px 28px -10px rgba(52,211,153,0.5), inset 0 0 0 1px rgba(255,255,255,0.20);
}
.ml-cat-icon {
  width: 40px; height: 40px;
  border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #22d3ee, #3b82f6);
  flex-shrink: 0;
  color: #fff;
  box-shadow: 0 8px 18px -8px rgba(59,130,246,0.6);
}
.ml-cat-btn[data-cat="skill"] .ml-cat-icon {
  background: linear-gradient(135deg, #34d399, #10b981);
  box-shadow: 0 8px 18px -8px rgba(52,211,153,0.6);
}
.ml-cat-info { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.ml-cat-title {
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
}
.ml-cat-en {
  font-size: 10px;
  letter-spacing: 1px;
  color: rgba(255,255,255,0.55);
  font-style: normal;
}
.ml-cat-arrow {
  font-size: 22px;
  color: rgba(255,255,255,0.35);
  transition: transform 0.25s, color 0.25s;
  line-height: 1;
}
.ml-cat-btn:hover .ml-cat-arrow { transform: translateX(3px); color: #fff; }
.ml-cat-btn.active .ml-cat-arrow { color: #fff; }

@media (max-width: 540px) {
  .ml-category { grid-template-columns: 1fr; }
}

/* 专业筛选 */
.ml-filter {
  margin-bottom: 16px;
}
.ml-filter-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 2px 10px;
}
.ml-filter-title {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ml-filter-bar {
  display: inline-block;
  width: 3px; height: 15px;
  border-radius: 2px;
  background: linear-gradient(180deg, #60a5fa, #a78bfa);
  box-shadow: 0 0 8px rgba(96,165,250,0.6);
}
.ml-filter-label {
  font-size: 14px;
  font-weight: 600;
  color: #fff;
}
.ml-filter-count {
  font-size: 11.5px;
  color: rgba(255,255,255,0.55);
  padding: 3px 10px;
  border-radius: 20px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
}
.ml-filter-head { gap: 8px; }
.ml-refresh-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px 4px 8px;
  font-size: 11.5px; font-weight: 500;
  color: rgba(191, 219, 254, 0.9);
  background: rgba(96, 165, 250, 0.08);
  border: 1px solid rgba(96, 165, 250, 0.25);
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.ml-refresh-btn:hover {
  color: #fff;
  background: rgba(96, 165, 250, 0.18);
  border-color: rgba(96, 165, 250, 0.5);
  transform: translateY(-1px);
}
.ml-refresh-btn:active { transform: translateY(0); }
.ml-refresh-btn svg { opacity: 0.85; }
.ml-refresh-btn:hover svg { animation: mlRefreshSpin 0.6s cubic-bezier(0.4, 0, 0.2, 1); }
@keyframes mlRefreshSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.ml-major-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.ml-major-chip {
  padding: 7px 14px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.72);
  font-size: 12.5px;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4,0,0.2,1);
  user-select: none;
  white-space: nowrap;
}
.ml-major-chip:hover {
  background: rgba(255,255,255,0.08);
  color: #fff;
  border-color: rgba(255,255,255,0.20);
}
.ml-major-chip.active {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 6px 16px -4px rgba(102,126,234,0.55);
}

/* 资料网格 */
.ml-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-top: 0;
}
@media (max-width: 720px) {
  .ml-grid { grid-template-columns: 1fr; }
}

.ml-item {
  position: relative;
  padding: 14px 14px 12px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(255,255,255,0.045), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.10);
  cursor: pointer;
  transition: all 0.28s cubic-bezier(0.4,0,0.2,1);
  overflow: hidden;
  animation: mlItemIn 0.4s ease-out both;
}
@keyframes mlItemIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.ml-item::after {
  content: "";
  position: absolute;
  right: -30px; bottom: -30px;
  width: 90px; height: 90px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(96,165,250,0.18), transparent 70%);
  pointer-events: none;
  transition: all 0.4s;
}
.ml-item:hover {
  transform: translateY(-3px);
  border-color: rgba(255,255,255,0.24);
  background: linear-gradient(135deg, rgba(255,255,255,0.075), rgba(255,255,255,0.03));
  box-shadow: 0 14px 30px -10px rgba(0,0,0,0.5);
}
.ml-item:hover::after {
  transform: scale(1.15);
  background: radial-gradient(circle, rgba(96,165,250,0.28), transparent 70%);
}
.ml-item-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.ml-item-type {
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: #fff;
  flex-shrink: 0;
}
.ml-type-pdf  { background: linear-gradient(135deg, #ef4444, #dc2626); }
.ml-type-doc  { background: linear-gradient(135deg, #3b82f6, #2563eb); }
.ml-type-ppt  { background: linear-gradient(135deg, #f59e0b, #d97706); }
.ml-type-vid  { background: linear-gradient(135deg, #a855f7, #7c3aed); }
.ml-type-zip  { background: linear-gradient(135deg, #10b981, #059669); }

.ml-item-badge {
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 10.5px;
  letter-spacing: 0.5px;
  font-weight: 600;
}
.ml-badge-hot { background: rgba(244,63,94,0.18); color: #fda4af; border: 1px solid rgba(244,63,94,0.30); }
.ml-badge-new { background: rgba(34,197,94,0.18); color: #86efac; border: 1px solid rgba(34,197,94,0.30); }
.ml-badge-rec { background: rgba(234,179,8,0.18); color: #fde68a; border: 1px solid rgba(234,179,8,0.30); }

.ml-item-title {
  margin: 0 0 6px;
  font-size: 14.5px;
  font-weight: 600;
  color: #fff;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  position: relative; z-index: 1;
}
.ml-item-brief {
  margin: 0 0 10px;
  font-size: 12px;
  color: rgba(255,255,255,0.55);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 36px;
  position: relative; z-index: 1;
}
.ml-item-meta {
  display: flex;
  gap: 10px;
  align-items: center;
  padding-top: 9px;
  border-top: 1px dashed rgba(255,255,255,0.08);
  position: relative; z-index: 1;
  flex-wrap: wrap;
}
.ml-item-meta-item {
  font-size: 11px;
  color: rgba(255,255,255,0.55);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.ml-item-meta-item svg {
  width: 12px; height: 12px;
  opacity: 0.7;
}

/* 空状态 */
.ml-empty {
  padding: 40px 20px;
  text-align: center;
  color: rgba(255,255,255,0.55);
}
.ml-empty-icon {
  margin: 0 auto 12px;
  width: 68px; height: 68px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.4);
}
.ml-empty p { margin: 0; font-size: 13px; }

.ml-footer {
  text-align: center;
  padding: 16px 0 8px;
  margin-top: 16px;
}
.ml-footer-text {
  font-size: 11.5px;
  color: rgba(255,255,255,0.35);
  letter-spacing: 1px;
  margin: 0;
}

/* ============ 资料查阅 · 翻页阅读器 ============ */
.ml-reader-mask {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(3, 6, 20, 0.75);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  padding: 0;
  animation: mlReaderMaskIn 0.25s ease-out;
}
.ml-reader-mask > .rm-reader.active { position: static; inset: auto; width: 100%; height: 100%; z-index: auto; }
@keyframes mlReaderMaskIn { from { opacity: 0; } to { opacity: 1; } }

.ml-reader {
  width: 100%;
  max-width: 720px;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  border-radius: 20px;
  overflow: hidden;
  background: linear-gradient(180deg, #1e2246 0%, #2a2f5f 100%);
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 30px 60px -20px rgba(0,0,0,0.7);
  animation: mlReaderIn 0.28s cubic-bezier(0.4,0,0.2,1);
}
@keyframes mlReaderIn {
  from { opacity: 0; transform: translateY(20px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.ml-reader-header {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 22px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.ml-reader-header-left {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  flex: 1;
  min-width: 0;
}
.ml-reader-type {
  padding: 4px 10px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.5px;
  flex-shrink: 0;
}
.ml-reader-titles { min-width: 0; }
.ml-reader-titles h3 {
  margin: 0 0 3px;
  font-size: 17px;
  font-weight: 700;
  color: #fff;
  line-height: 1.3;
  background: linear-gradient(135deg, #fff, #e0e7ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.ml-reader-titles p {
  margin: 0;
  font-size: 12px;
  color: rgba(255,255,255,0.6);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ml-reader-close {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.75);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  line-height: 1;
  flex-shrink: 0;
  transition: all 0.2s;
}
.ml-reader-close:hover {
  background: rgba(255,255,255,0.14);
  color: #fff;
}

.ml-reader-progress {
  height: 3px;
  background: rgba(255,255,255,0.08);
  position: relative;
  overflow: hidden;
}
.ml-reader-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #60a5fa, #a78bfa, #f472b6);
  transition: width 0.35s cubic-bezier(0.4,0,0.2,1);
}

.ml-reader-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 26px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0));
}
.ml-reader-body::-webkit-scrollbar { width: 6px; }
.ml-reader-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 3px; }

.ml-reader-page {
  animation: mlPageIn 0.35s ease-out;
}
@keyframes mlPageIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.ml-reader-page p {
  margin: 0 0 14px;
  font-size: 14.5px;
  line-height: 1.85;
  color: rgba(255,255,255,0.86);
  text-indent: 2em;
  letter-spacing: 0.3px;
}

.ml-reader-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 22px 18px;
  border-top: 1px solid rgba(255,255,255,0.08);
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.10));
}
.ml-reader-btn {
  padding: 8px 16px;
  border-radius: 10px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.80);
  font-size: 13px;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4,0,0.2,1);
}
.ml-reader-btn:hover:not(:disabled) {
  background: rgba(255,255,255,0.12);
  color: #fff;
  transform: translateY(-1px);
}
.ml-reader-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.ml-reader-btn-primary {
  background: linear-gradient(135deg, #667eea, #764ba2);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 6px 16px -4px rgba(102,126,234,0.55);
}
.ml-reader-btn-primary:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px -4px rgba(102,126,234,0.7);
}
.ml-reader-pager {
  font-size: 13px;
  color: rgba(255,255,255,0.65);
  letter-spacing: 0.5px;
}
.ml-reader-pager b {
  font-size: 15px;
  color: #fff;
  background: linear-gradient(135deg, #60a5fa, #a78bfa);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* 后台 material 类型徽章（小） */
.material-type-badge {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.5px;
}
.material-type-pdf { background: linear-gradient(135deg, #ef4444, #dc2626); }
.material-type-doc { background: linear-gradient(135deg, #3b82f6, #2563eb); }
.material-type-ppt { background: linear-gradient(135deg, #f59e0b, #d97706); }
.material-type-vid { background: linear-gradient(135deg, #a855f7, #7c3aed); }
.material-type-zip { background: linear-gradient(135deg, #10b981, #059669); }

/* ============ 资料查阅 · 阅读器 · 富媒体页面 ============ */
.ml-reader-page-title {
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 12px;
  padding: 6px 12px;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(96,165,250,0.18), rgba(167,139,250,0.14));
  border-left: 3px solid #60a5fa;
  display: inline-block;
}
.ml-reader-media {
  text-align: center;
  padding: 6px 0;
}
.ml-reader-media img { display: inline-block; }
.ml-reader-media-caption {
  margin-top: 10px;
  font-size: 12px;
  color: rgba(255,255,255,0.55);
}
.ml-reader-html {
  font-size: 14.5px;
  line-height: 1.85;
  color: rgba(255,255,255,0.86);
}
.ml-reader-html p { margin: 0 0 12px; text-indent: 2em; }
.ml-reader-html img { max-width: 100%; height: auto; display: block; margin: 12px auto; border-radius: 8px; }
.ml-reader-html strong, .ml-reader-html b { color: #fff; }
.ml-reader-html ul, .ml-reader-html ol { padding-left: 24px; margin: 8px 0; }
.ml-reader-html li { margin-bottom: 4px; }
.ml-reader-doc-card {
  text-align: center;
  padding: 30px 24px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
  border: 1px dashed rgba(255,255,255,0.14);
}
.ml-reader-doc-name {
  margin: 12px 0 4px;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
}
.ml-reader-doc-mime {
  font-size: 12px;
  color: rgba(255,255,255,0.5);
  letter-spacing: 0.5px;
}

/* ============ 资料查阅 · 书本翻页阅读器 ============ */
.ml-reader-book {
  width: 100%;
  max-width: 100vw;
  height: 100vh;
  background: linear-gradient(135deg, #3b2f22 0%, #4a3b2a 50%, #2c2318 100%);
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  display: flex;
  flex-direction: column;
}
.ml-reader-book .ml-reader-header {
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  border-radius: 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  padding: 14px 22px 12px;
  flex-shrink: 0;
}
.ml-reader-book .ml-reader-titles h3 {
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.ml-reader-book .ml-reader-progress {
  background: rgba(255,255,255,0.08);
  flex-shrink: 0;
}
.ml-reader-book .ml-reader-progress-fill {
  background: linear-gradient(90deg, #fde68a, #f59e0b, #b45309);
  transition: width 0.15s linear;
}

/* 全屏滚动阅读器 */
.ml-reader-scroll-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 24px 24px 60px;
  background: transparent !important;
  scroll-behavior: smooth;
}
.ml-reader-scroll-body::-webkit-scrollbar { width: 8px; }
.ml-reader-scroll-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 4px; }
.ml-book-page-scroll {
  width: 100%;
  max-width: 900px;
  margin: 0 auto 24px;
  background: linear-gradient(180deg, #fdfaf1 0%, #f6efdd 100%);
  border-radius: 8px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.35);
  overflow: hidden;
  position: relative;
  min-height: 60vh;
}
.ml-book-page-scroll .ml-book-page-inner {
  padding: 0;
  min-height: auto;
}
.ml-book-page-scroll .ml-book-page-num {
  text-align: center;
  color: #8b6b3d;
  font-size: 13px;
  padding: 8px 0 18px;
  font-family: "Songti SC", "Noto Serif SC", serif;
  letter-spacing: 4px;
}

/* 单页模式：一屏一页显示 */
.ml-reader-single .ml-reader-body,
.ml-reader-single-body {
  flex: 1;
  overflow: auto;
  display: block;
  padding: 0;
  background: #0d1226;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.3) transparent;
}
.ml-reader-single-body::-webkit-scrollbar { width: 10px; height: 10px; }
.ml-reader-single-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.25); border-radius: 6px; }
.ml-reader-single-body::-webkit-scrollbar-track { background: transparent; }
.ml-book-page-single {
  width: 100%;
  min-height: 100%;
  height: auto;
  display: block;
  background: transparent;
  box-shadow: none;
  border: none;
}
.ml-book-page-single .ml-book-page-inner {
  padding: 0;
  min-height: 100%;
  overflow: visible;
  display: block;
  position: relative;
}
.ml-book-page-single .ml-reader-image-fullbleed {
  position: relative;
  inset: auto;
  width: 100%;
  height: auto;
  display: block;
  background: #0d1226;
}
.ml-book-page-single .ml-reader-image-el {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
  max-height: none;
  object-fit: initial;
  margin: 0 auto;
}
.ml-book-page-single .ml-reader-image-loading,
.ml-book-page-single .ml-reader-image-err {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  min-height: 40vh;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.7);
  font-size: 14px;
  pointer-events: none;
}
.ml-book-page-single .ml-reader-html,
.ml-book-page-single .ml-reader-doc-card {
  max-height: 100%;
  overflow-y: auto;
  padding: 24px 40px;
  background: #fdfaf1;
  color: #2b1e10;
  width: 100%;
  max-width: 900px;
  border-radius: 10px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.4);
}
.ml-reader-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 12px 24px;
  background: rgba(20,25,45,0.95);
  border-top: 1px solid rgba(255,255,255,0.08);
  flex-shrink: 0;
}
.ml-reader-nav-btn {
  padding: 10px 22px;
  border-radius: 22px;
  border: 1px solid rgba(102,126,234,0.4);
  background: rgba(102,126,234,0.15);
  color: #fff;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
  min-width: 110px;
  font-weight: 500;
}
.ml-reader-nav-btn.ml-reader-nav-prev {
  margin-right: auto;
}
.ml-reader-nav-btn.ml-reader-nav-next {
  margin-left: auto;
}
.ml-reader-nav-btn:hover {
  background: rgba(102,126,234,0.35);
  border-color: rgba(102,126,234,0.7);
  transform: translateY(-1px);
}
.ml-reader-nav-btn:active {
  transform: translateY(0);
}
.ml-reader-nav-btn:disabled,
.ml-reader-nav-btn[disabled] {
  opacity: 0.35;
  cursor: not-allowed;
  transform: none;
}
.ml-reader-pageinfo {
  color: rgba(255,255,255,0.85);
  font-size: 14px;
  min-width: 90px;
  text-align: center;
  letter-spacing: 1.5px;
  font-weight: 500;
}

/* Book Stage：兼容旧结构（滚动模式已不使用，但保留隐藏样式） */
.ml-book-stage {
  position: relative;
  overflow: hidden;
  padding: 0 !important;
  background: transparent !important;
  flex: 1;
}
.ml-book-spread {
  display: none;
}
.ml-book-shadow {
  display: none;
}
.ml-book-shadow-l {
  left: 14px;
  background: linear-gradient(90deg, rgba(0,0,0,0.35), transparent);
  border-radius: 4px 0 0 4px;
}
.ml-book-shadow-r {
  right: 14px;
  background: linear-gradient(270deg, rgba(0,0,0,0.35), transparent);
  border-radius: 0 4px 4px 0;
}
.ml-book-spine {
  display: none;
}

/* 单页显示（我们用单页模式，但视觉上给页面感） */
.ml-book-page {
  position: relative;
  background:
    linear-gradient(90deg, rgba(0,0,0,0.08) 0%, transparent 3%, transparent 97%, rgba(0,0,0,0.08) 100%),
    linear-gradient(180deg, #fdfaf1 0%, #f6efdd 100%);
  border-radius: 6px;
  box-shadow:
    0 2px 8px rgba(0,0,0,0.25),
    inset 0 0 30px rgba(153,111,64,0.10),
    inset 0 1px 0 rgba(255,255,255,0.5);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 2;
}
.ml-book-page.ml-flip-next,
.ml-book-page.ml-flip-prev {
  animation: none;
}

.ml-book-page-inner {
  flex: 1;
  overflow-y: auto;
  padding: 32px 44px 12px;
  color: #2b1e10;
  font-size: 15px;
  line-height: 1.9;
  scrollbar-width: thin;
  scrollbar-color: #b98d54 transparent;
  position: relative;
}
.ml-book-page-inner::-webkit-scrollbar { width: 6px; }
.ml-book-page-inner::-webkit-scrollbar-thumb { background: rgba(153, 111, 64, 0.45); border-radius: 3px; }

/* 图片页面全屏铺满（无标题、无说明） */
.ml-book-page-inner .ml-reader-image-fullbleed {
  position: relative;
  display: block;
  background: #1a1f3a;
  border-radius: 4px;
  overflow: hidden;
  min-height: 200px;
}
.ml-book-page-inner .ml-reader-image-fullbleed img.ml-reader-image-el {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: contain;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}
.ml-book-page-inner .ml-reader-image-loading,
.ml-book-page-inner .ml-reader-image-err {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.6);
  font-size: 14px;
  pointer-events: none;
}
.ml-book-page-inner .ml-reader-image-loading,
.ml-book-page-inner .ml-reader-image-err {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.65);
  font-size: 14px;
  text-align: center;
  background: transparent;
}

.ml-book-page-inner p {
  margin: 0 0 14px;
  color: #2b1e10 !important;
  text-indent: 2em;
  letter-spacing: 0.4px;
  font-family: 'Noto Serif SC', 'Songti SC', 'STSong', 'SimSun', serif;
}
.ml-book-page-inner strong, .ml-book-page-inner b { color: #1c1409 !important; }
.ml-book-page-inner a { color: #8b4513; text-decoration: underline; }

/* 页面标题（章节标题）*/
.ml-book-page-inner .ml-reader-page-title {
  background: linear-gradient(135deg, rgba(139,69,19,0.15), rgba(180,120,40,0.10));
  border-left-color: #8b4513;
  color: #4a2c15;
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 18px;
  padding: 8px 14px;
}

/* html 类型页面：暖色系覆盖 */
.ml-book-page-inner .ml-reader-html {
  color: #2b1e10;
  font-size: 15.5px;
  line-height: 1.9;
}
.ml-book-page-inner .ml-reader-html p { color: #2b1e10; }
.ml-book-page-inner .ml-reader-html img { border-radius: 6px; box-shadow: 0 2px 8px rgba(120, 80, 30, 0.25); }

/* 图片页面 */
.ml-book-page-inner .ml-reader-media {
  padding: 0;
}
.ml-book-page-inner .ml-reader-media img {
  max-width: 100%;
  max-height: 60vh;
  border-radius: 6px;
  box-shadow: 0 4px 18px rgba(60, 40, 20, 0.35);
  background: #fff;
}
.ml-book-page-inner .ml-reader-media-caption {
  color: #6b4a25;
  margin-top: 8px;
  font-size: 12px;
  font-style: italic;
}

/* 文档页 */
.ml-book-page-inner .ml-reader-doc-card {
  background: rgba(139,69,19,0.06);
  border: 1px dashed rgba(139,69,19,0.3);
  color: #2b1e10;
}
.ml-book-page-inner .ml-reader-doc-name { color: #2b1e10; }
.ml-book-page-inner .ml-reader-doc-mime { color: #6b4a25; }

/* 页码 */
.ml-book-page-num {
  padding: 8px 0 12px;
  text-align: center;
  font-size: 11px;
  color: #8a6a3a;
  font-family: 'Noto Serif SC', 'Songti SC', serif;
  letter-spacing: 4px;
  border-top: 1px solid rgba(139,69,19,0.15);
  margin: 0 44px;
  background: transparent;
}

/* Footer 深色书封配色 */
.ml-reader-book .ml-reader-footer {
  background: linear-gradient(180deg, rgba(0,0,0,0.15), rgba(0,0,0,0.30));
  border-top: 1px solid rgba(255,255,255,0.06);
  border-radius: 0 0 10px 10px;
  padding: 12px 18px 14px;
}
.ml-reader-book .ml-reader-btn {
  background: rgba(255,240,200,0.08);
  border-color: rgba(255,240,200,0.20);
  color: #fde68a;
}
.ml-reader-book .ml-reader-btn:hover:not(:disabled) {
  background: rgba(255,240,200,0.14);
  color: #fff;
}
.ml-reader-book .ml-reader-btn-primary {
  background: linear-gradient(135deg, #b45309, #92400e);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 6px 16px -4px rgba(180,83,9,0.55);
}
.ml-reader-book .ml-reader-pager {
  color: rgba(253,230,138,0.75);
}
.ml-reader-book .ml-reader-pager b {
  background: linear-gradient(135deg, #fde68a, #f59e0b);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* 移动端：紧凑单页 */
@media (max-width: 640px) {
  .ml-reader-book { max-width: 100%; height: 92vh; padding: 6px; }
  .ml-book-spread { padding: 8px; }
  .ml-book-page-inner { padding: 20px 22px 8px; font-size: 14.5px; line-height: 1.8; }
  .ml-book-page-num { margin: 0 22px; }
  .ml-book-shadow { display: none; }
  .ml-book-spine { display: none; }
}


/* ========== 智能测评报告（华丽版） ========== */
.er-wrap {
  padding: 24px 24px 40px;
  background: linear-gradient(180deg, #0f1530 0%, #1a1f3a 40%, #2d3561 100%);
  color: #fff;
  min-height: 100vh;
}
.er-hero {
  position: relative;
  text-align: center;
  padding: 40px 20px 60px;
  border-radius: 24px;
  background: linear-gradient(135deg, rgba(102,126,234,0.25), rgba(118,75,162,0.25));
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 20px 60px rgba(102,126,234,0.25), inset 0 1px 0 rgba(255,255,255,0.08);
  overflow: hidden;
}
.er-hero-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(102,126,234,0.4), transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(118,75,162,0.4), transparent 50%);
  pointer-events: none;
}
.er-hero-content { position: relative; z-index: 2; }
.er-hero-label {
  display: inline-block;
  padding: 6px 18px;
  border-radius: 999px;
  background: rgba(255,255,255,0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.2);
  font-size: 12px;
  letter-spacing: 2px;
  color: rgba(255,255,255,0.9);
  margin-bottom: 14px;
}
.er-hero-title {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 1px;
  background: linear-gradient(90deg, #fff, #c4d4ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.er-hero-sub {
  margin-top: 8px;
  font-size: 14px;
  color: rgba(255,255,255,0.7);
}
.er-ring {
  position: relative;
  width: 220px; height: 220px;
  margin: 24px auto 8px;
}
.er-ring svg { width: 100%; height: 100%; display: block; }
.er-ring-inner {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
}
.er-ring-score {
  font-size: 56px;
  font-weight: 800;
  line-height: 1;
  background: linear-gradient(135deg, #fff, #c4d4ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.er-ring-unit {
  font-size: 14px;
  color: rgba(255,255,255,0.6);
  margin-top: 4px;
}
.er-ring-grade {
  margin-top: 6px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 2px;
}
.er-hero-grade {
  position: relative; z-index: 2;
  margin-top: 4px;
  font-size: 16px;
  color: rgba(255,255,255,0.85);
  letter-spacing: 4px;
}

.er-kpi-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 24px;
}
.er-kpi {
  padding: 18px 12px;
  border-radius: 16px;
  background: rgba(255,255,255,0.05);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.08);
  text-align: center;
  transition: transform .3s, box-shadow .3s;
}
.er-kpi:hover { transform: translateY(-4px); box-shadow: 0 10px 30px rgba(0,0,0,0.3); }
.er-kpi-val {
  font-size: 26px;
  font-weight: 700;
  line-height: 1.2;
}
.er-kpi-label {
  margin-top: 6px;
  font-size: 12px;
  color: rgba(255,255,255,0.6);
  letter-spacing: 1px;
}

.er-sec {
  margin-top: 24px;
  padding: 22px;
  border-radius: 20px;
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.08);
}
.er-sec-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.er-sec-card {
  padding: 16px;
  border-radius: 14px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
}
.er-sec-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 16px;
}
.er-sec-title {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 1px;
}
.er-sec-title-strong { color: #43e97b; }
.er-sec-title-weak { color: #ff6b6b; }
.er-sec-title-ai {
  background: linear-gradient(90deg, #4facfe, #fa709a);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-size: 18px;
  margin-bottom: 14px;
  display: block;
}
.er-sec-sub {
  font-size: 12px;
  color: rgba(255,255,255,0.5);
}

.er-kp-list { display: flex; flex-direction: column; gap: 14px; }
.er-kp-item {
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
}
.er-kp-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.er-kp-name { font-size: 14px; font-weight: 600; }
.er-kp-rate { font-size: 13px; font-weight: 700; }
.er-kp-bar {
  height: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  overflow: hidden;
}
.er-kp-fill {
  height: 100%;
  border-radius: 999px;
  transition: width 1s cubic-bezier(0.4,0,0.2,1);
}
.er-kp-meta {
  margin-top: 6px;
  font-size: 11px;
  color: rgba(255,255,255,0.5);
}

.er-tag-wrap { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.er-tag {
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid transparent;
}
.er-tag-strong {
  background: rgba(67,233,123,0.12);
  color: #43e97b;
  border-color: rgba(67,233,123,0.3);
}
.er-tag-weak {
  background: rgba(255,107,107,0.12);
  color: #ff6b6b;
  border-color: rgba(255,107,107,0.3);
}
.er-empty, .er-empty-hint {
  color: rgba(255,255,255,0.4);
  font-size: 13px;
  padding: 8px 0;
}

.er-advice { display: flex; flex-direction: column; gap: 10px; }
.er-advice-item {
  padding: 12px 16px;
  border-radius: 12px;
  background: linear-gradient(90deg, rgba(79,172,254,0.08), rgba(250,112,154,0.08));
  border-left: 3px solid #4facfe;
  font-size: 13px;
  line-height: 1.6;
  color: rgba(255,255,255,0.9);
}

.er-actions {
  display: flex;
  gap: 12px;
  margin-top: 28px;
  justify-content: center;
  flex-wrap: wrap;
}
.er-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: 12px;
  border: none;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: transform .2s, box-shadow .3s;
  min-width: 120px;
  justify-content: center;
}
.er-btn:hover { transform: translateY(-2px); }
.er-btn-primary {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: #fff;
  box-shadow: 0 8px 24px rgba(102,126,234,0.4);
}
.er-btn-ghost {
  background: rgba(255,255,255,0.08);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.2);
}
.er-btn-ghost:hover { background: rgba(255,255,255,0.15); }

@media (max-width: 640px) {
  .er-kpi-row { grid-template-columns: repeat(2, 1fr); }
  .er-sec-2col { grid-template-columns: 1fr; }
  .er-hero-title { font-size: 22px; }
  .er-ring { width: 180px; height: 180px; }
  .er-ring-score { font-size: 44px; }
}