/* ============================================================
   幻兽学院 - 完整样式表
   版本: v3.0 (完全修复版)
   修改说明:
   - 2026/04/15: 修复所有功能，完善每日任务、排行榜、管理中心等所有页面
   ============================================================ */

:root {
  --bg1: #f0f2f5; --bg2: #e8eaef; --bg3: #dde0e6;
  --gold: #f7971e; --orange: #e8860f; --accent: linear-gradient(90deg, #f7971e, #ffd200);
  --sky: #4d96ff; --pink: #fd79a8; --grass: #55cc55;
  --glass: rgba(255,255,255,0.75); --glass2: rgba(255,255,255,0.9);
  --border: rgba(0,0,0,0.08); --text: #1a1a2e; --text2: #666; --text3: #999;
  --radius: 14px;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body {
  font-family: 'Microsoft YaHei', 'PingFang SC', -apple-system, sans-serif;
  background: var(--bg1); color: var(--text); overflow-x: hidden;
  background-image: radial-gradient(ellipse at 20% 50%, rgba(247,151,30,0.06) 0%, transparent 60%),
                    radial-gradient(ellipse at 80% 20%, rgba(100,50,200,0.04) 0%, transparent 50%);
}

/* ========== 基础布局 ========== */
.header {
  background: rgba(255,255,255,0.85); backdrop-filter: blur(20px);
  padding: 0 24px; height: 60px; display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 100;
}
.logo { display: flex; align-items: center; gap: 10px; }
.logo-icon { font-size: 28px; }
.logo-text { font-size: 20px; font-weight: 900; background: var(--accent); -webkit-background-clip: text; -webkit-text-fill-color: transparent; letter-spacing: 2px; }
.logo-ver { font-size: 11px; color: var(--text3); margin-left: 4px; }
.nav-tabs { display: flex; gap: 2px; background: rgba(255,255,255,0.03); border-radius: 24px; padding: 3px; }
.nav-tab {
  padding: 7px 18px; border-radius: 20px; border: none; background: transparent;
  color: var(--text2); cursor: pointer; font-size: 13px; transition: all .3s; white-space: nowrap;
}
.nav-tab.active { background: var(--accent); color: #000; font-weight: bold; box-shadow: 0 2px 12px rgba(247,151,30,0.3); }
.nav-tab:hover:not(.active) { background: var(--glass2); color: #333; }
.container { max-width: 1300px; margin: 0 auto; padding: 20px; position: relative; z-index: 1; }
.page { display: none; animation: fadeIn .3s; }
.page.active { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* ========== 神兽乐园 ========== */
.toolbar { display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; align-items: center; }
.toolbar .form-input { flex: none; width: 200px; }
.tool-btn {
  padding: 8px 16px; border-radius: 10px; border: 1px solid var(--border);
  background: var(--glass); color: var(--text); font-size: 13px; cursor: pointer;
  transition: all .2s; display: flex; align-items: center; gap: 6px;
}
.tool-btn:hover { background: var(--glass2); border-color: rgba(255,255,255,0.2); }
.tool-btn.primary { background: rgba(247,151,30,0.15); border-color: rgba(247,151,30,0.3); color: var(--gold); }

.beast-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}
.beast-card {
  background: linear-gradient(145deg, #ffffff, #f5f7fa); border-radius: 16px; padding: 18px;
  border: 1px solid rgba(0,0,0,0.06); box-shadow: 0 2px 12px rgba(0,0,0,0.04);
  transition: all .3s cubic-bezier(0.4, 0, 0.2, 1); cursor: pointer;
  position: relative; overflow: hidden;
}
.beast-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--el-color, #ff9800), var(--el-color-light, #ffb74d));
  pointer-events: none;
}
.beast-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(0,0,0,0.1);
}

/* 心情动画 */
.beast-card.mood-happy .avatar { animation: avatarHappy 2s ease-in-out infinite; }
.beast-card.mood-excited .avatar { animation: avatarExcited 1s ease-in-out infinite; transform: scale(1.1); }
.beast-card.mood-sad .avatar { animation: avatarSad 3s ease-in-out infinite; filter: brightness(0.8); }
.beast-card.mood-tired .avatar { animation: avatarTired 4s ease-in-out infinite; transform: scale(0.95); }
@keyframes avatarHappy { 0%, 100% { transform: translateY(0) rotate(0deg) scale(1); } 25% { transform: translateY(-5px) rotate(-3deg) scale(1.05); } 75% { transform: translateY(-5px) rotate(3deg) scale(1.05); } }
@keyframes avatarExcited { 0%, 100% { transform: translateY(0) rotate(0deg) scale(1); } 50% { transform: translateY(-10px) rotate(5deg) scale(1.15); } }
@keyframes avatarSad { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(2px) rotate(-2deg); } }
@keyframes avatarTired { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(1px) rotate(1deg); } }

/* 稀有度样式 */
.rarity-badge { position: absolute; top: 10px; right: 10px; padding: 4px 10px; border-radius: 8px; font-size: 10px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.5px; box-shadow: 0 2px 8px rgba(0,0,0,0.15); z-index: 10; }
.rarity-badge.common { background: #78909c; color: #fff; }
.rarity-badge.rare { background: #42a5f5; color: #fff; }
.rarity-badge.epic { background: #ab47bc; color: #fff; }
.rarity-badge.legendary { background: linear-gradient(135deg,#ffd54f,#ff6f00); color: #000; animation: legendaryBadge 1s ease-in-out infinite; }
@keyframes legendaryBadge { 0%,100% { box-shadow: 0 0 10px rgba(255,202,40,0.5); } 50% { box-shadow: 0 0 20px rgba(255,202,40,0.8); } }

/* 卡片头像 */
.beast-card .avatar {
  width: 80px; height: 80px; border-radius: 20px; display: flex; align-items: center;
  justify-content: center; flex-shrink: 0;
  box-shadow: 0 4px 15px var(--el-glow, rgba(247,151,30,0.3));
  position: relative; background: linear-gradient(145deg, var(--el-color, #ff9800), var(--el-color-dark, #e65100));
  border: 3px solid rgba(255,255,255,0.8); animation: avatarFloat 3s ease-in-out infinite; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes avatarFloat { 0%, 100% { transform: translateY(0) rotate(0deg); } 25% { transform: translateY(-3px) rotate(-1deg); } 75% { transform: translateY(-3px) rotate(1deg); } }
.avatar-emoji { font-size: 36px; }
.beast-img { width: 85%; height: 85%; object-fit: contain; filter: drop-shadow(0 4px 8px rgba(0,0,0,0.2)); transition: transform 0.3s ease; }
.beast-card:hover .beast-img { transform: scale(1.1) rotate(3deg); }

/* 星星显示 */
.star-display { letter-spacing: 2px; }
.star-filled { color: #ffd700; }
.star-empty { color: #ccc; }

.beast-card .top-row { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.beast-card .info { flex: 1; min-width: 0; }
.beast-card .badges { display: flex; gap: 5px; margin-top: 6px; flex-wrap: wrap; }
.badge { display: inline-flex; align-items: center; gap: 3px; padding: 3px 10px; border-radius: 20px; font-size: 10px; font-weight: bold; }
.badge.level { background: linear-gradient(135deg, var(--el-color, #ff9800), var(--el-color-dark, #e65100)); color: #fff; border: 1px solid rgba(255,255,255,0.3); }
.badge.element { background: rgba(0,0,0,0.06); color: var(--el-color, #e65100); border: 1px solid rgba(0,0,0,0.1); }
.badge.team { background: rgba(80,200,255,0.15); color: #0277bd; border: 1px solid rgba(80,200,255,0.3); }
.badge.mood { background: rgba(255,200,200,0.3); font-size: 11px; }
.exp-bar-wrap { background: rgba(0,0,0,0.1); border-radius: 10px; height: 8px; overflow: hidden; }
.exp-bar { height: 100%; border-radius: 10px; transition: width .6s cubic-bezier(0.4, 0, 0.2, 1); background: linear-gradient(90deg, var(--el-color, #ff9800), var(--el-color-light, #ffb74d)); }
.beast-card .exp-row { display: flex; justify-content: space-between; margin-top: 6px; font-size: 11px; color: #666; font-weight: 500; }
.beast-card .bottom-stats { display: flex; gap: 10px; margin-top: 12px; justify-content: center; }
.mini-stat { font-size: 11px; color: #555; display: flex; align-items: center; gap: 3px; background: rgba(0,0,0,0.04); padding: 5px 10px; border-radius: 12px; border: 1px solid rgba(0,0,0,0.06); }
.mini-stat b { color: #1a1a2e; font-weight: 700; }

/* 卡片快捷奖励图标 */
.card-quick-reward { width: 32px; height: 32px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; font-size: 16px; background: rgba(85,204,85,0.15); border: 1px solid rgba(85,204,85,0.3); cursor: pointer; transition: all .2s; color: #2e7d32; }
.card-quick-reward:hover { transform: scale(1.15); background: rgba(85,204,85,0.3); }
.card-quick-reward.done { background: rgba(128,128,128,0.1); border-color: rgba(128,128,128,0.2); cursor: not-allowed; opacity: 0.5; color: #999; }
.card-quick-reward.done:hover { transform: none; }

/* ========== 弹窗 ========== */
.modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.75); z-index: 200; align-items: center; justify-content: center; animation: fadeIn .2s; }
.modal-overlay.show { display: flex; }
.modal { background: linear-gradient(135deg, #ffffff, #f5f5fa); border-radius: 20px; padding: 28px; max-width: 560px; width: 92%; max-height: 88vh; overflow-y: auto; border: 1px solid rgba(255,255,255,0.1); color: #1a1a2e; position: relative; }
.modal::-webkit-scrollbar { width: 4px; }
.modal::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 4px; }
.modal-close { position: absolute; top: 14px; right: 14px; background: rgba(255,255,255,0.08); border: none; color: #aaa; width: 32px; height: 32px; border-radius: 50%; font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.modal-close:hover { background: rgba(255,75,75,0.2); color: #ff5555; }
.modal .hero { display: flex; align-items: center; gap: 18px; margin-bottom: 20px; padding-bottom: 18px; border-bottom: 1px solid var(--border); position: relative; }
.modal .hero::before { content: ''; position: absolute; left: -10px; top: 50%; transform: translateY(-50%); width: 4px; height: 60%; background: var(--el-color, var(--orange)); border-radius: 2px; }
.modal .avatar-lg { width: 80px; height: 80px; border-radius: 18px; display: flex; align-items: center; justify-content: center; font-size: 42px; flex-shrink: 0; box-shadow: 0 0 24px var(--el-glow, rgba(247,151,30,0.2)); position: relative; background: var(--el-bg); }
.modal .hero-info { flex: 1; }
.modal .hero-name { font-size: 20px; font-weight: bold; }
.modal .hero-sub { font-size: 12px; color: var(--text2); margin-top: 2px; }
.modal .hero-mood { font-size: 12px; margin-top: 4px; }
.section { margin-bottom: 18px; }
.section-title { font-size: 13px; color: var(--orange); margin-bottom: 10px; display: flex; align-items: center; gap: 6px; }
.section-title::after { content: ''; flex: 1; height: 1px; background: var(--border); }

/* 属性网格 */
.attr-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.attr-item { background: var(--glass); border-radius: 10px; padding: 10px 6px; text-align: center; transition: all .2s; }
.attr-item:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
.attr-item .a-icon { font-size: 16px; }
.attr-item .a-val { font-size: 18px; font-weight: bold; color: #1a1a2e; }
.attr-item .a-bar { height: 4px; border-radius: 2px; margin-top: 4px; background: var(--glass2); overflow: hidden; }
.attr-item .a-label { font-size: 9px; color: var(--text3); margin-top: 2px; text-transform: uppercase; letter-spacing: 0.5px; }

/* 任务迷你列表 */
.task-mini-grid { display: flex; flex-direction: column; gap: 6px; }
.task-mini { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: rgba(0,0,0,0.04); border-radius: 10px; cursor: pointer; transition: all .2s; }
.task-mini:hover { background: rgba(247,151,30,0.1); }
.task-mini.done { opacity: 0.5; }
.task-mini-icon { font-size: 18px; }
.task-mini-name { flex: 1; font-size: 13px; color: #333; }
.task-mini-status { font-size: 12px; color: #888; }

/* 快捷奖励弹窗 */
.quick-reward-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.quick-reward-btn { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px 10px; border-radius: 14px; border: 1px solid var(--border); background: var(--glass); cursor: pointer; transition: all .2s; font-size: 13px; }
.quick-reward-btn:hover { transform: scale(1.05); border-color: var(--gold); background: rgba(247,151,30,0.1); }
.quick-reward-btn.punish:hover { border-color: #ff5555; background: rgba(255,82,82,0.1); }
.qrb-icon { font-size: 28px; }
.qrb-name { font-weight: 600; color: var(--text); }
.qrb-exp { font-size: 12px; color: var(--gold); font-weight: bold; }
.quick-reward-btn.punish .qrb-exp { color: #ff5555; }
.log-list { max-height: 160px; overflow-y: auto; }
.log-item { padding: 8px 12px; border-radius: 8px; margin-bottom: 6px; background: rgba(0,0,0,0.04); font-size: 12px; display: flex; align-items: center; gap: 8px; border: 1px solid rgba(0,0,0,0.05); }
.log-item .log-time { color: var(--text3); flex-shrink: 0; font-size: 11px; }
.log-item .log-exp { font-weight: bold; flex-shrink: 0; }
.log-item .log-exp.pos { color: #16a34a; }
.log-item .log-exp.neg { color: #dc2626; }

/* ========== 今日任务页面 ========== */
.task-header { text-align: center; margin-bottom: 20px; }
.task-header h2 { font-size: 20px; margin-bottom: 8px; color: #1a1a2e; }
.task-streak { display: inline-flex; align-items: center; gap: 8px; background: rgba(247,151,30,0.1); padding: 6px 16px; border-radius: 20px; font-size: 13px; color: var(--orange); }
.task-streak-icon { font-size: 18px; }
.student-selector { margin-bottom: 16px; }
.task-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.task-card { background: #fff; border-radius: 16px; padding: 18px; border: 1px solid rgba(0,0,0,0.08); box-shadow: 0 2px 8px rgba(0,0,0,0.04); transition: all .3s; }
.task-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.1); }
.task-card.completed { border-color: var(--gold); background: rgba(247,151,30,0.05); }
.task-card-icon { font-size: 32px; margin-bottom: 10px; }
.task-card-name { font-size: 16px; font-weight: bold; margin-bottom: 4px; color: #1a1a2e; }
.task-card-desc { font-size: 12px; color: #666; margin-bottom: 10px; }
.task-card-progress { font-size: 12px; color: #888; margin-bottom: 10px; }
.task-card-progress .done { color: var(--orange); font-weight: bold; }
.task-claim-btn { width: 100%; padding: 10px; border-radius: 10px; border: none; background: var(--accent); color: #000; font-size: 14px; font-weight: bold; cursor: pointer; transition: all .2s; }
.task-claim-btn:hover { transform: scale(1.02); box-shadow: 0 4px 12px rgba(247,151,30,0.3); }
.task-claim-btn:disabled { background: #e9ecef; color: #aaa; cursor: not-allowed; transform: none; box-shadow: none; }
.task-claim-btn.claimed { background: var(--gold); }

/* ========== 每日任务网格总览 ========== */
.task-legend-wrap {
  background: #fff;
  border-radius: 12px;
  padding: 12px 16px;
  margin-bottom: 16px;
  display: flex;
  gap: 20px;
  align-items: center;
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.task-legend {
  display: flex;
  gap: 16px;
  font-size: 12px;
  color: #666;
}
.legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
}
.legend-icon {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}
.legend-icon.available { background: rgba(247,151,30,0.15); }
.legend-icon.done { background: rgba(34,197,94,0.15); }
.legend-icon.maxed { background: rgba(168,85,247,0.15); }

.task-grid-container {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 2px 12px rgba(0,0,0,0.04);
}

.task-grid-header {
  display: flex;
  background: linear-gradient(135deg, #f8f9fa, #e9ecef);
  color: #1a1a2e;
  font-size: 12px;
  font-weight: bold;
  border-bottom: 2px solid rgba(0,0,0,0.08);
}

.task-grid-row {
  display: flex;
  border-bottom: 1px solid rgba(0,0,0,0.05);
  transition: background 0.2s;
}
.task-grid-row:last-child { border-bottom: none; }
.task-grid-row:hover { background: rgba(0,0,0,0.02); }

.task-grid-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 8px;
  background: #fff;
}

.student-col {
  width: 120px;
  min-width: 120px;
  justify-content: flex-start;
  padding-left: 16px;
  font-size: 13px;
  color: #1a1a2e;
  background: #f5f7fa;
  border-right: 1px solid rgba(0,0,0,0.06);
}

.task-col {
  width: 80px;
  min-width: 80px;
  font-size: 16px;
  flex-direction: column;
  gap: 2px;
  background: #f5f7fa;
}

/* 数据行任务单元格：与表头 .task-col 列宽一致（80px）
   修复：此前宽度由内容撑开，已完成(✅)与未完成(📝+15)单元格宽度不同，
   导致行与行、行与表头列宽错位 */
.task-grid-cell.task-cell {
  width: 80px;
  min-width: 80px;
}

.task-col-name {
  font-size: 11px;
  color: #666;
  margin-top: 2px;
  font-weight: 500;
}

.task-cell {
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
}

.task-cell.available {
  background: rgba(247,151,30,0.08);
}
.task-cell.available:hover {
  background: rgba(247,151,30,0.2);
  transform: scale(1.05);
}
.task-cell.available .task-claim-exp {
  font-size: 9px;
  color: var(--orange);
  opacity: 0;
  transition: opacity 0.2s;
}
.task-cell.available:hover .task-claim-exp {
  opacity: 1;
}

.task-cell.done {
  background: rgba(34,197,94,0.08);
  cursor: default;
}
.task-cell.done .task-done-icon {
  font-size: 18px;
  opacity: 0.7;
}

.task-cell.maxed {
  background: rgba(168,85,247,0.08);
  cursor: default;
}
.task-cell.maxed .task-maxed-icon {
  font-size: 16px;
  opacity: 0.5;
}

.task-student-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.task-student-name {
  font-weight: 600;
  color: #1a1a2e;
  font-size: 14px;
}
.task-student-level {
  font-size: 11px;
  color: #888;
}

.task-claim-icon {
  font-size: 20px;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .task-legend-wrap { flex-wrap: wrap; gap: 10px; }
  .task-grid-container { overflow-x: auto; }
  .task-grid-header, .task-grid-row { min-width: 600px; }
  .student-col { width: 80px; min-width: 80px; }
  .task-col { width: 60px; min-width: 60px; }
  .task-grid-header { background: linear-gradient(135deg, #e9ecef, #dee2e6); color: #1a1a2e; }
  .task-grid-row:hover { background: rgba(0,0,0,0.02); }
}

/* 快捷操作区 */
.quick-actions { margin-top: 24px; }
/* 批量操作按钮（表格上方） */
.quick-actions.top { margin-top: 0; margin-bottom: 16px; }
.quick-btn.punish { background: rgba(247,151,30,0.12); border-color: rgba(247,151,30,0.4); }

/* 批量奖励/惩罚弹窗（两段式：① 项目/扣分 + ② 学生选择） */
.modal.batch-modal { padding: 22px 24px 20px; }

/* 文字层级：标题更大、说明更小更淡、步骤标签中等加粗 */
.batch-modal h3 { font-size: 20px; font-weight: 800; }
.batch-modal-desc { color: var(--text3); font-size: 12px; line-height: 1.5; margin: 4px 0 16px; }
.batch-modal .section-title { font-size: 13px; font-weight: 700; color: #444; margin: 0 0 8px; }
.batch-step { color: var(--gold); font-weight: 800; margin-right: 2px; }

/* ① 奖励模式：每日任务项目单选网格（图标 + 名字 + exp） */
.batch-task-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0 0 16px; }
.batch-task-item { position: relative; display: flex; align-items: center; gap: 6px; padding: 9px 10px; border-radius: 10px; border: 1.5px solid #e5e5ea; background: #fff; cursor: pointer; transition: all .15s; font-size: 13px; }
.batch-task-item:hover { border-color: #ffd3a1; background: #fffaf3; }
.batch-task-item.selected { border-color: var(--gold); background: linear-gradient(135deg, rgba(247,151,30,0.14), rgba(247,151,30,0.05)); box-shadow: 0 2px 8px rgba(247,151,30,0.2); }
.batch-task-item.selected::after { content: '✓'; position: absolute; top: -8px; right: -8px; z-index: 2; width: 18px; height: 18px; border-radius: 50%; background: var(--gold); color: #fff; font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 4px rgba(247,151,30,0.45); }
.batch-task-icon { font-size: 16px; }
.batch-task-name { flex: 1; text-align: left; color: #1a1a2e; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.batch-task-item.selected .batch-task-name { font-weight: 700; }
.batch-task-exp { font-weight: 700; color: var(--gold); font-size: 12px; }

/* ① 惩罚模式：扣分数量（快捷按钮 5/10/20 + 自定义输入） */
.batch-deduct-grid { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 16px; }
.batch-deduct-btn { padding: 9px 20px; border-radius: 10px; border: 1.5px solid #e5e5ea; background: #fff; cursor: pointer; font-size: 14px; font-weight: 700; color: #1a1a2e; transition: all .15s; }
.batch-deduct-btn:hover { border-color: #ffd3a1; background: #fffaf3; }
.batch-deduct-btn.selected { border-color: var(--gold); background: linear-gradient(135deg, rgba(247,151,30,0.16), rgba(247,151,30,0.06)); color: #c96f00; box-shadow: 0 2px 8px rgba(247,151,30,0.2); }
.batch-deduct-custom { width: 84px; padding: 8px 10px; border-radius: 10px; border: 1.5px solid #e5e5ea; font-size: 13px; outline: none; color: #1a1a2e; background: #fff; }
.batch-deduct-custom:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(247,151,30,0.15); }
.batch-deduct-unit { color: var(--text3); font-size: 12px; }

/* ② 学生选择区（整行点击切换，未选中灰字+删除线；选中浅蓝底+蓝勾） */
.batch-student-toolbar { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; }
.batch-student-links { display: flex; gap: 6px; }
/* 全选/全不选按钮（蓝色填充，与确认按钮同色） */
.batch-all-btn { padding: 3px 12px; border-radius: 8px; border: 1px solid var(--sky); background: var(--sky); color: #fff; font-size: 12px; font-weight: 600; cursor: pointer; transition: all .15s; }
.batch-all-btn:hover { background: #3d86ef; border-color: #3d86ef; }
.batch-student-count { font-size: 12px; color: var(--text3); display: flex; align-items: center; gap: 2px; }
.batch-student-count b { color: var(--gold); font-weight: 700; }
.batch-student-list { border: 1px solid #ececf1; border-radius: 12px; max-height: 208px; overflow-y: auto; background: #fff; }
.batch-student-item { display: flex; align-items: center; gap: 10px; padding: 8px 12px; cursor: pointer; border-bottom: 1px solid #f4f4f8; font-size: 14px; transition: background .12s; }
.batch-student-item:last-child { border-bottom: none; }
.batch-student-item:hover { background: #f6f8fd; }
.batch-student-item .batch-student-box { width: 20px; height: 20px; border-radius: 6px; border: 2px solid #c8c8d0; background: #fff; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; color: #fff; flex-shrink: 0; transition: all .12s; }
.batch-student-item.selected { background: rgba(77,150,255,0.07); }
.batch-student-item.selected .batch-student-box { background: var(--sky); border-color: var(--sky); box-shadow: 0 1px 4px rgba(77,150,255,0.4); }
.batch-student-name { flex: 1; }
.batch-student-item.selected .batch-student-name { color: #1a1a2e; font-weight: 700; }
.batch-student-item:not(.selected) .batch-student-name { color: #b5b5bf; text-decoration: line-through; }

/* 底部按钮：取消中性边框；确认与全选同蓝（惩罚模式红色） */
.batch-modal-foot { display: flex; justify-content: flex-end; gap: 10px; margin-top: 14px; }
.batch-cancel { background: #fff; border-color: #d9d9e0; color: #5a5a66; }
.batch-cancel:hover { background: #f4f4f8; border-color: #c4c4cf; color: #333; }
.batch-modal .batch-confirm { min-width: 150px; background: var(--sky); border-color: var(--sky); color: #fff; font-weight: 700; }
.batch-modal .batch-confirm:hover { background: #3d86ef; border-color: #3d86ef; color: #fff; }
.batch-modal .batch-confirm.punish-mode { background: #e0564a; border-color: #e0564a; color: #fff; }
.batch-modal .batch-confirm.punish-mode:hover { background: #c9473c; border-color: #c9473c; }
.quick-actions h3 { font-size: 14px; color: var(--text2); margin-bottom: 12px; }
.quick-btn-grid { display: flex; gap: 8px; flex-wrap: wrap; }
.quick-btn { padding: 8px 16px; border-radius: 10px; border: 1px solid var(--border); background: var(--glass); font-size: 13px; cursor: pointer; transition: all .2s; }
.quick-btn:hover { background: rgba(247,151,30,0.1); border-color: var(--gold); }
.quick-btn.class { background: rgba(77,150,255,0.1); border-color: rgba(77,150,255,0.3); }
.quick-btn.random { background: rgba(255,121,168,0.1); border-color: rgba(255,121,168,0.3); }
.quick-btn.duty { background: rgba(85,204,85,0.1); border-color: rgba(85,204,85,0.3); }

/* 无惩罚奖励提示 */
.no-punish-banner { background: linear-gradient(135deg, #55cc55, #44a844); color: #fff; padding: 12px 20px; border-radius: 12px; margin-bottom: 16px; display: flex; align-items: center; gap: 10px; font-size: 14px; }
.no-punish-banner .icon { font-size: 24px; }
.no-punish-banner.recovering { background: linear-gradient(135deg, #ff9800, #e65100); }

/* ========== 课堂工具 ========== */
.tools-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.tool-card { background: var(--glass); border-radius: var(--radius); padding: 22px; border: 1px solid var(--border); }
.tool-card h3 { font-size: 16px; margin-bottom: 14px; display: flex; align-items: center; gap: 8px; }
.rollcall-container { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 14px 0; min-height: 120px; justify-content: center; }
.rollcall-container { display: flex; flex-direction: column; align-items: center; gap: 12px; margin: 14px 0; min-height: 140px; justify-content: center; }
.rollcall-display { width: 80px; height: 80px; border-radius: 50%; background: var(--glass2); font-size: 48px; font-weight: bold; display: flex; align-items: center; justify-content: center; border: 3px solid var(--border); transition: all .3s; }
.rollcall-display.spinning { border-color: var(--orange); box-shadow: 0 0 20px rgba(247,151,30,0.3); animation: nameScroll .1s linear infinite; }
.rollcall-display.result { border-color: var(--gold); box-shadow: 0 0 25px rgba(255,210,0,0.4); animation: resultPop .5s ease-out; }
@keyframes nameScroll { 0%,100% { opacity: 1; } 50% { opacity: 0.8; } }
@keyframes resultPop { 0% { transform: scale(0.95); opacity: 0.6; } 100% { transform: scale(1); opacity: 1; } }
/* 点名结果名字：字号适中、长名字自动换行居中、动效温和 */
.rollcall-name { font-size: 24px; font-weight: 600; color: var(--text); text-align: center; max-width: 100%; overflow-wrap: break-word; line-height: 1.35; padding: 0 6px; animation: slideUp .35s ease-out; }
@keyframes slideUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.rollcall-rewards { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; animation: slideUp .4s ease-out; animation-delay: .1s; animation-fill-mode: both; }
.reward-btn { padding: 10px 18px; border-radius: 12px; border: none; font-size: 14px; font-weight: bold; cursor: pointer; transition: all .2s; box-shadow: 0 3px 10px rgba(0,0,0,0.15); }
.reward-btn.star { background: linear-gradient(135deg, #ffd700, #ffb300); color: #000; }
.reward-btn.star:hover { transform: translateY(-2px); box-shadow: 0 5px 20px rgba(255,215,0,0.5); }
.reward-btn.good { background: linear-gradient(135deg, #4ade80, #22c55e); color: #000; }
.reward-btn.good:hover { transform: translateY(-2px); box-shadow: 0 5px 20px rgba(74,222,128,0.5); }
.reward-btn.effort { background: linear-gradient(135deg, #60a5fa, #3b82f6); color: #fff; }
.reward-btn.effort:hover { transform: translateY(-2px); box-shadow: 0 5px 20px rgba(96,165,250,0.5); }
.reward-btn:active { transform: translateY(0); }
.rollcall-skip { animation: slideUp .4s ease-out; animation-delay: .15s; animation-fill-mode: both; }
.countdown-display { text-align: center; padding: 20px; border-radius: 14px; background: var(--glass2); font-size: 64px; font-weight: 900; margin: 14px 0; font-variant-numeric: tabular-nums; letter-spacing: 4px; color: var(--gold); }
.countdown-display.warning { color: #ff5555; animation: countPulse 1s infinite; }
@keyframes countPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.5; } }
.cd-btns { display: flex; gap: 8px; justify-content: center; }
.cd-presets { display: flex; gap: 6px; justify-content: center; margin-bottom: 10px; flex-wrap: wrap; }
.cd-preset { padding: 4px 12px; border-radius: 8px; border: 1px solid var(--border); background: transparent; color: var(--text2); font-size: 12px; cursor: pointer; transition: all .2s; }
.cd-preset:hover { background: var(--glass2); color: #333; }
.cd-preset.active { border-color: var(--orange); color: var(--gold); }
.tool-tip { font-size: 11px; color: var(--text2); text-align: center; margin-top: 10px; }

/* 幸运转盘 */
/* ========== 随机奖励转盘 ========== */
.reward-spinner-container { display: flex; justify-content: center; margin: 10px 0; }
.reward-spinner {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    #ffd700 0deg 90deg,
    #4ade80 90deg 180deg,
    #60a5fa 180deg 270deg,
    #ffd700 270deg 360deg
  );
  position: relative;
  box-shadow: 0 4px 20px rgba(0,0,0,0.25);
  transition: transform 0.3s ease;
}
.reward-spinner-inner {
  position: absolute;
  inset: 40px;
  border-radius: 50%;
  background: var(--bg2, #1a1a2e);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: bold;
  box-shadow: inset 0 2px 10px rgba(0,0,0,0.3);
  color: var(--text, #fff);
}
.reward-spinner.spinning {
  animation: rewardSpin 0.8s ease-out forwards;
}
@keyframes rewardSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(1440deg); }
}
.reward-result {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  animation: fadeIn .4s ease-out;
}
.reward-result-name {
  font-size: 20px;
  font-weight: bold;
  color: var(--text, #fff);
}
.reward-result-detail {
  padding: 8px 20px;
  border-radius: 20px;
  font-size: 16px;
  font-weight: bold;
  color: #000;
}

/* ========== 早读检测 ========== */
.reading-container { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 10px 0; }
.reading-volume-bar {
  width: 100%;
  height: 30px;
  background: rgba(0,0,0,0.08);
  border-radius: 15px;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,0.1);
}
.reading-volume-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #ff5555, #ffaa00, #4ade80);
  border-radius: 13px;
  transition: width 0.1s ease;
}
.reading-volume-fill.qualified { background: linear-gradient(90deg, #4ade80, #22c55e); }
.reading-threshold-line {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 3px;
  background: #fff;
  box-shadow: 0 0 6px rgba(255,255,255,0.8);
}
.reading-dB { font-size: 24px; font-weight: bold; color: #1a1a2e; }
.reading-status { font-size: 14px; padding: 4px 12px; border-radius: 12px; background: rgba(0,0,0,0.06); color: #555; }
.reading-status.qualified { background: linear-gradient(135deg, #4ade80, #22c55e); color: #000; }
.reading-status.not-qualified { background: #ff5555; color: #fff; }
.reading-timer { font-size: 14px; color: #666; font-variant-numeric: tabular-nums; }
.reading-threshold-control { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #888; }
.reading-slider { width: 100px; accent-color: var(--orange, #f7971e); }
.reading-rewards-preview { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 4px; }
.reward-tier { font-size: 11px; padding: 3px 8px; border-radius: 8px; background: var(--glass, rgba(255,255,255,0.05)); }
.reading-btns { display: flex; gap: 8px; justify-content: center; margin-top: 8px; }
.reading-btns .tool-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin-top: 12px; }
.team-card { background: var(--glass); border-radius: 12px; padding: 14px; text-align: center; border: 2px solid var(--border); cursor: pointer; transition: all .3s; }
.team-card:hover { border-color: var(--team-color, var(--orange)); }
.team-card .team-icon { font-size: 28px; margin-bottom: 4px; }
.team-card .team-name { font-weight: bold; font-size: 14px; }
.team-card .team-score { font-size: 20px; font-weight: 900; color: var(--gold); margin: 4px 0; }
.team-card .team-members { font-size: 11px; color: var(--text2); }

/* ========== 排行榜 ========== */
.rank-controls { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.rank-period-tabs { display: flex; gap: 6px; }
.rank-period-tab { padding: 8px 16px; border-radius: 12px; border: 1px solid var(--border); background: transparent; color: var(--text2); font-size: 13px; cursor: pointer; transition: all .2s; }
.rank-period-tab.active { background: var(--accent); color: #000; font-weight: bold; box-shadow: 0 2px 10px rgba(247,151,30,0.25); }
.rank-period-tab:hover:not(.active) { background: var(--glass2); }
.rank-type-tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.rank-type-tab { padding: 5px 12px; border-radius: 10px; border: 1px solid var(--border); background: transparent; color: var(--text2); font-size: 11px; cursor: pointer; transition: all .2s; }
.rank-type-tab.active { border-color: var(--orange); color: var(--gold); background: rgba(247,151,30,0.1); }
.rank-type-tab:hover:not(.active) { background: var(--glass2); }
.rank-list { display: flex; flex-direction: column; gap: 6px; }
.rank-item { display: flex; align-items: center; padding: 12px 16px; border-radius: 12px; background: var(--glass); transition: all .3s; cursor: pointer; }
.rank-item:hover { background: rgba(0,0,0,0.05); transform: translateX(4px); }
.rank-position { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 24px; margin-right: 12px; flex-shrink: 0; }
.rank-position .rank-num { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 13px; background: rgba(255,255,255,0.08); color: var(--text2); }
.rank-item:nth-child(1) .rank-position { font-size: 32px; }
.rank-item:nth-child(2) .rank-position { font-size: 28px; }
.rank-item:nth-child(3) .rank-position { font-size: 26px; }
.rank-avatar { font-size: 28px; margin-right: 12px; }
.rank-info { flex: 1; min-width: 0; }
.rank-name { font-weight: bold; font-size: 14px; display: flex; align-items: center; gap: 6px; }
.rank-detail { font-size: 11px; color: var(--text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rank-score { font-size: 14px; font-weight: bold; color: var(--gold); margin-left: 12px; white-space: nowrap; }
.rank-up { color: #55cc55; font-size: 12px; font-weight: normal; }
.rank-down { color: #ff5555; font-size: 12px; font-weight: normal; }
.rank-tips { margin-top: 16px; padding: 12px; background: rgba(247,151,30,0.08); border-radius: 10px; font-size: 12px; color: var(--text2); text-align: center; }

/* ========== 数据统计 ========== */
.stats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; margin-bottom: 20px; }
.stat-card { background: var(--glass); border-radius: var(--radius); padding: 16px; text-align: center; border: 1px solid var(--border); }
.stat-card .sc-val { font-size: 28px; font-weight: 900; background: var(--accent); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.stat-card .sc-label { font-size: 12px; color: var(--text2); margin-top: 4px; }
.chart-bar { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.chart-bar .cb-label { width: 60px; text-align: right; font-size: 11px; color: var(--text2); }
.chart-bar .cb-track { flex: 1; height: 20px; background: var(--glass2); border-radius: 6px; overflow: hidden; }
.chart-bar .cb-fill { height: 100%; border-radius: 6px; transition: width .6s ease; display: flex; align-items: center; padding-left: 6px; font-size: 10px; font-weight: bold; color: #000; }

/* ========== 管理中心 ========== */
.manage-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 16px; }
.manage-section { background: var(--glass); border-radius: var(--radius); padding: 22px; border: 1px solid var(--border); }
.manage-section h2 { font-size: 15px; margin-bottom: 14px; color: var(--orange); display: flex; align-items: center; gap: 6px; }
.form-row { display: flex; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.form-input { flex: 1; min-width: 100px; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--glass2); color: #1a1a2e; font-size: 13px; outline: none; }
.form-input:focus { border-color: var(--orange); }
.form-input::placeholder { color: var(--text3); }
select.form-input { cursor: pointer; }
.btn { padding: 9px 18px; border-radius: 10px; border: none; font-size: 13px; cursor: pointer; font-weight: bold; transition: all .2s; white-space: nowrap; }
.btn-add { background: var(--accent); color: #000; }
.btn-reset { background: rgba(255,75,75,0.15); color: #ff5555; }
.btn-export { background: rgba(80,200,120,0.15); color: #50c878; }
.btn:hover { transform: scale(1.03); opacity: .9; }
.student-table { width: 100%; }
.student-row { display: flex; align-items: center; padding: 8px 10px; border-radius: 10px; margin-bottom: 4px; background: var(--glass); font-size: 13px; transition: all .2s; }
.student-row:hover { background: rgba(0,0,0,0.04); }
.student-row .sr-idx { width: 30px; color: var(--text3); font-size: 11px; }
.student-row .sr-avatar { font-size: 20px; margin-right: 8px; }
.student-row .sr-name { flex: 1; font-weight: 600; }
.student-row .sr-info { color: var(--text2); font-size: 11px; margin-right: 8px; }
.student-row .sr-btns { display: flex; gap: 4px; }
.sr-btn { padding: 4px 8px; border-radius: 6px; border: none; font-size: 10px; cursor: pointer; transition: all .2s; background: var(--glass2); color: var(--text2); }
.sr-btn:hover { color: #333; }
.sr-btn.del { color: #ff5555; }
.sr-btn.del:hover { background: rgba(255,75,75,0.2); }

/* ========== 奖励记录 ========== */
.record-item { display: flex; align-items: center; padding: 10px; border-bottom: 1px solid rgba(255,255,255,0.1); }
.record-item > div:first-of-type { flex: 1; }
.record-item .record-exp { color: #4CAF50; font-weight: bold; font-size: 16px; }
.records-header { margin-bottom: 16px; }
.records-filters { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }

/* ========== Toast ========== */
.toast-wrap { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 9999; display: flex; flex-direction: column-reverse; gap: 8px; align-items: center; }
.toast { padding: 10px 24px; border-radius: 12px; font-size: 13px; font-weight: bold; background: rgba(255,255,255,0.95); color: #333; border: 1px solid var(--border); backdrop-filter: blur(10px); animation: toastIn .3s, toastOut .3s 2s forwards; box-shadow: 0 4px 20px rgba(0,0,0,0.1); white-space: nowrap; }
.toast.reward { border-color: rgba(80,200,120,0.3); }
.toast.punish { border-color: rgba(255,75,75,0.3); }
.toast.warning { border-color: rgba(255,152,0,0.4); background: rgba(255,240,200,0.95); color: #b35c00; }
@keyframes toastIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes toastOut { from { opacity: 1; } to { opacity: 0; transform: translateY(-10px); } }

/* ========== 空状态 ========== */
.empty-state { text-align: center; padding: 50px 20px; color: var(--text3); grid-column: 1/-1; }
.empty-state .empty-icon { font-size: 56px; margin-bottom: 12px; opacity: 0.5; }
.empty-state p { font-size: 13px; }

/* ========== 进化动画 ========== */
.evo-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.9) 100%);
  z-index: 999;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.evo-overlay.show {
  display: flex;
  animation: evoFadeIn 0.3s ease-out;
}
@keyframes evoFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.evo-content {
  text-align: center;
  animation: evoPopIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes evoPopIn {
  0% { transform: scale(0.5); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
.evo-title {
  font-size: 28px;
  font-weight: 900;
  color: #fff;
  text-shadow: 0 0 30px rgba(255, 215, 0, 0.8);
  margin-bottom: 30px;
  animation: evoTitleGlow 1s ease-in-out infinite alternate;
}
@keyframes evoTitleGlow {
  from { text-shadow: 0 0 20px rgba(255, 215, 0, 0.6); }
  to { text-shadow: 0 0 40px rgba(255, 215, 0, 1), 0 0 60px rgba(255, 215, 0, 0.5); }
}
.evo-stages {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  margin-bottom: 20px;
}
.evo-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.evo-stage.old .evo-emoji {
  font-size: 60px;
  opacity: 0.6;
  filter: grayscale(30%);
  animation: evoOldPulse 1s ease-in-out infinite;
}
@keyframes evoOldPulse {
  0%, 100% { transform: scale(1); opacity: 0.6; }
  50% { transform: scale(1.05); opacity: 0.8; }
}
.evo-stage.new .evo-emoji {
  font-size: 80px;
  animation: evoNewBounce 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  filter: drop-shadow(0 0 20px rgba(255, 215, 0, 0.8));
}
@keyframes evoNewBounce {
  0% { transform: scale(0) rotate(-20deg); }
  60% { transform: scale(1.2) rotate(10deg); }
  100% { transform: scale(1) rotate(0deg); }
}
.evo-img {
  width: 80px;
  height: 80px;
  object-fit: contain;
  animation: evoNewBounce 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  filter: drop-shadow(0 0 20px rgba(255, 215, 0, 0.8));
}
.evo-stage.old .evo-img {
  width: 60px;
  height: 60px;
  opacity: 0.6;
  filter: grayscale(30%);
  animation: evoOldPulse 1s ease-in-out infinite;
}
.evo-stage-name {
  font-size: 18px;
  font-weight: bold;
  color: #fff;
  padding: 6px 16px;
  border-radius: 20px;
  background: rgba(255,255,255,0.1);
}
.evo-stage.old .evo-stage-name { color: rgba(255,255,255,0.5); }
.evo-stage.new .evo-stage-name {
  background: linear-gradient(135deg, #ffd700, #ff8f00);
  color: #000;
  box-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
}
.evo-arrow {
  font-size: 40px;
  color: #ffd700;
  animation: evoArrowPulse 0.5s ease-in-out infinite alternate;
}
@keyframes evoArrowPulse {
  from { transform: translateX(-5px); opacity: 0.7; }
  to { transform: translateX(5px); opacity: 1; }
}
.evo-level {
  font-size: 16px;
  color: rgba(255,255,255,0.7);
  margin-top: 10px;
}
.evo-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.evo-particle {
  position: absolute;
  font-size: 24px;
  animation: evoParticleFloat 2s ease-out forwards;
  opacity: 0;
}
@keyframes evoParticleFloat {
  0% { transform: translateY(100px) scale(0); opacity: 0; }
  20% { opacity: 1; }
  100% { transform: translateY(-100px) scale(1.5); opacity: 0; }
}

/* ========== 抽取新宠物弹窗 ========== */
.gacha-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.95) 100%);
  z-index: 1000;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.gacha-modal.show {
  display: flex;
  animation: gachaFadeIn 0.3s ease-out;
}
@keyframes gachaFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.gacha-content {
  text-align: center;
  animation: gachaPopIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes gachaPopIn {
  0% { transform: scale(0.3) rotate(-10deg); opacity: 0; }
  50% { transform: scale(1.1) rotate(3deg); }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}
.gacha-result {
  background: linear-gradient(145deg, #1a1a2e, #16213e);
  border: 2px solid rgba(255, 215, 0, 0.5);
  border-radius: 24px;
  padding: 40px 50px;
  box-shadow: 0 0 60px rgba(255, 215, 0, 0.3);
}
.gacha-title {
  font-size: 32px;
  font-weight: 900;
  color: #ffd700;
  text-shadow: 0 0 30px rgba(255, 215, 0, 0.8);
  margin-bottom: 30px;
  animation: gachaTitleGlow 1s ease-in-out infinite alternate;
}
@keyframes gachaTitleGlow {
  from { text-shadow: 0 0 20px rgba(255, 215, 0, 0.6); }
  to { text-shadow: 0 0 50px rgba(255, 215, 0, 1), 0 0 80px rgba(255, 215, 0, 0.5); }
}
.gacha-pet {
  margin-bottom: 20px;
}
.gacha-img {
  width: 120px;
  height: 120px;
  object-fit: contain;
  animation: gachaImgBounce 1s ease-in-out infinite;
  filter: drop-shadow(0 0 20px rgba(255, 215, 0, 0.8));
}
@keyframes gachaImgBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
.gacha-emoji {
  font-size: 80px;
  animation: gachaImgBounce 1s ease-in-out infinite;
}
.gacha-info {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  margin-bottom: 15px;
}
.gacha-name {
  font-size: 24px;
  font-weight: bold;
  color: #fff;
}
.gacha-rarity {
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: bold;
  color: #fff;
}
.gacha-level {
  font-size: 18px;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 10px;
}
.gacha-retire {
  margin-bottom: 12px;
  padding: 8px 14px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  background: rgba(255, 215, 0, 0.12);
  border: 1px solid rgba(255, 215, 0, 0.4);
  color: #ffd700;
}
.gacha-hint {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 25px;
}
.gacha-confirm-btn {
  background: linear-gradient(135deg, #ffd700, #ff8f00);
  border: none;
  border-radius: 25px;
  padding: 12px 40px;
  font-size: 16px;
  font-weight: bold;
  color: #000;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 4px 20px rgba(255, 215, 0, 0.4);
}
.gacha-confirm-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 30px rgba(255, 215, 0, 0.6);
}

/* ========== 成就通知 ========== */
.achievement-toast {
  position: fixed;
  top: 80px;
  left: 50%;
  transform: translateX(-50%) translateY(-20px);
  background: linear-gradient(135deg, #1a1a2e, #16213e);
  border: 2px solid;
  border-radius: 16px;
  padding: 16px 24px;
  z-index: 2000;
  opacity: 0;
  pointer-events: none;
  transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  text-align: center;
  min-width: 280px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}
.achievement-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}
.achievement-toast .ach-icon {
  font-size: 48px;
  margin-bottom: 8px;
  animation: achIconBounce 0.6s ease-out;
}
@keyframes achIconBounce {
  0% { transform: scale(0) rotate(-20deg); }
  60% { transform: scale(1.3) rotate(10deg); }
  100% { transform: scale(1) rotate(0deg); }
}
.achievement-toast .ach-title {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 4px;
  font-weight: 500;
}
.achievement-toast .ach-name {
  font-size: 20px;
  font-weight: bold;
  color: #fff;
  margin-bottom: 6px;
  text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
.achievement-toast .ach-desc {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 10px;
}
.achievement-toast .ach-reward {
  font-size: 13px;
  padding: 4px 12px;
  border-radius: 12px;
  display: inline-block;
}

/* ========== 撤销按钮 ========== */
.undo-btn {
  width: 100%;
  padding: 12px;
  border-radius: 10px;
  border: 2px solid var(--gold);
  background: rgba(247, 151, 30, 0.1);
  color: var(--gold);
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s;
}
.undo-btn:hover:not(:disabled) {
  background: rgba(247, 151, 30, 0.2);
  transform: scale(1.02);
}
.undo-btn:disabled {
  border-color: var(--text3);
  color: var(--text3);
  background: transparent;
  cursor: not-allowed;
}

/* ========== 解锁按钮 ========== */
.unlock-new-pet-btn {
  width: 100%;
  padding: 14px;
  border-radius: 12px;
  border: 2px solid #ffd700;
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.2), rgba(255, 143, 0, 0.2));
  color: #ffd700;
  font-size: 15px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s;
  animation: unlockPulse 2s ease-in-out infinite;
}
.unlock-new-pet-btn:hover {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.4), rgba(255, 143, 0, 0.4));
  transform: scale(1.02);
  box-shadow: 0 0 30px rgba(255, 215, 0, 0.4);
}
@keyframes unlockPulse {
  0%, 100% { box-shadow: 0 0 10px rgba(255, 215, 0, 0.3); }
  50% { box-shadow: 0 0 25px rgba(255, 215, 0, 0.6); }
}

/* ========== 满级警告 ========== */
.maxed-warning {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.15), rgba(255, 143, 0, 0.15));
  border: 1px solid rgba(255, 215, 0, 0.3);
  border-radius: 10px;
  padding: 10px 15px;
  margin: 10px 15px;
  color: #ffd700;
  font-size: 13px;
  text-align: center;
}

/* ========== 宠物历史 ========== */
.pet-history-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pet-history-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: rgba(0, 0, 0, 0.05);
  border-radius: 10px;
  font-size: 13px;
  border: 1px solid rgba(0,0,0,0.05);
}
.pet-history-item .ph-icon {
  font-size: 20px;
}
.pet-history-item .ph-name {
  color: var(--text);
  font-weight: 600;
}
.pet-history-item .ph-rarity {
  font-size: 11px;
  font-weight: bold;
  padding: 2px 8px;
  border-radius: 10px;
  color: #fff;
}
.pet-history-item .ph-level {
  color: var(--text2);
  margin-left: auto;
  font-size: 12px;
}
.pet-history-item .ph-check {
  color: #22c55e;
  font-weight: bold;
}

/* ========== 成就列表 ========== */
.achievement-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.achievement-badge {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border-radius: 20px;
  border: 1px solid;
  font-size: 12px;
  cursor: help;
  transition: all 0.2s;
  background: rgba(0,0,0,0.15);
}
.achievement-badge:hover {
  transform: scale(1.05);
  filter: brightness(1.1);
}
.achievement-badge .ab-icon {
  font-size: 16px;
}
.achievement-badge .ab-name {
  color: var(--text);
  font-weight: 600;
}

/* ========== 悬赏系统 ========== */
.bounty-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
}
.bounty-card {
  background: linear-gradient(145deg, #ffffff, #f8f9fa);
  border-radius: 16px;
  padding: 20px;
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
  transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}
.bounty-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--gold), #ffd200);
}
.bounty-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(0,0,0,0.12);
}
.bounty-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.bounty-type-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: bold;
  background: rgba(247,151,30,0.1);
  color: var(--orange);
  border: 1px solid rgba(247,151,30,0.2);
}
.bounty-card-title {
  font-size: 16px;
  font-weight: bold;
  color: #1a1a2e;
  margin-bottom: 8px;
  line-height: 1.4;
}
.bounty-card-desc {
  font-size: 13px;
  color: #555;
  line-height: 1.6;
  margin-bottom: 14px;
  min-height: 42px;
}
.bounty-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 12px;
  border-top: 1px solid rgba(0,0,0,0.06);
}
.bounty-reward {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: bold;
  background: rgba(85,204,85,0.1);
  color: #2e7d32;
  border: 1px solid rgba(85,204,85,0.2);
}
.bounty-status {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: bold;
}
.bounty-status.active {
  background: rgba(77,150,255,0.1);
  color: #1565c0;
  border: 1px solid rgba(77,150,255,0.2);
}
.bounty-status.completed {
  background: rgba(85,204,85,0.1);
  color: #2e7d32;
  border: 1px solid rgba(85,204,85,0.2);
}
.bounty-status.expired {
  background: rgba(255,100,100,0.1);
  color: #c62828;
  border: 1px solid rgba(255,100,100,0.2);
}
.bounty-deadline {
  font-size: 11px;
  color: #888;
  display: flex;
  align-items: center;
  gap: 4px;
}
.bounty-actions {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}

/* ========== 稀有度标签 ========== */
.rarity-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: bold;
  color: #fff;
  vertical-align: middle;
  margin-left: 5px;
}
.rarity-badge.common { background: #999999; }
.rarity-badge.rare { background: #3b82f6; }
.rarity-badge.epic { background: #a855f7; }
.rarity-badge.legendary { background: #f59e0b; }

/* ========== 响应式 ========== */
@media (max-width: 768px) {
  .header { padding: 0 12px; height: 54px; }
  .logo-text { font-size: 16px; }
  .nav-tabs { gap: 1px; overflow-x: auto; max-width: 70%; }
  .nav-tab { padding: 6px 12px; font-size: 12px; }
  .container { padding: 14px; }
  .beast-grid { grid-template-columns: 1fr; }
  .manage-grid { grid-template-columns: 1fr; }
  .tools-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   P0 商店系统 + 徽章系统（商店徽章计划）
   ============================================================ */

/* ---------- 顶部商店入口按钮 ---------- */
/* 修复：弹窗关闭按钮需浮在 hero 等后续内容之上（否则被遮挡不可点） */
.modal-close { z-index: 10; }
.shop-open-btn {
  flex: none;
  margin-left: 10px;
  padding: 7px 16px;
  border-radius: 20px;
  border: 1px solid rgba(247, 151, 30, 0.35);
  background: linear-gradient(135deg, rgba(247, 151, 30, 0.18), rgba(255, 215, 0, 0.12));
  color: #b45309;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all .25s;
  box-shadow: 0 2px 8px rgba(247, 151, 30, 0.15);
}
.shop-open-btn:hover {
  background: linear-gradient(135deg, rgba(247, 151, 30, 0.32), rgba(255, 215, 0, 0.22));
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(247, 151, 30, 0.28);
}
@media (max-width: 768px) {
  .shop-open-btn { padding: 6px 10px; font-size: 12px; margin-left: 6px; }
}

/* ---------- 商店弹窗 ---------- */
.shop-modal { max-width: 760px; }
.shop-loading { text-align: center; padding: 60px 0; color: #888; font-size: 14px; }
.shop-error-state { text-align: center; padding: 40px 0; color: #888; }
.shop-toolbar { display: flex; gap: 10px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
.shop-wallet { display: flex; gap: 8px; flex-wrap: wrap; }
.shop-wallet-item {
  background: rgba(247, 151, 30, 0.1);
  border: 1px solid rgba(247, 151, 30, 0.25);
  color: #b45309;
  border-radius: 12px;
  padding: 6px 12px;
  font-size: 13px;
}
.shop-wallet-item b { font-size: 15px; }
.shop-group-title {
  font-size: 13px;
  font-weight: 700;
  color: #555;
  margin: 14px 0 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.shop-group-title::after { content: ''; flex: 1; height: 1px; background: #eee; }
.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.shop-item {
  background: #fff;
  border: 1.5px solid #e8e8ee;
  border-radius: 14px;
  padding: 14px 12px;
  text-align: center;
  cursor: pointer;
  transition: all .2s;
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
}
.shop-item:hover { border-color: var(--gold, #f7971e); transform: translateY(-2px); box-shadow: 0 6px 16px rgba(247, 151, 30, 0.12); }
.shop-item.locked {
  cursor: not-allowed;
  opacity: 0.62;
  filter: grayscale(0.4);
  background: #f7f7f9;
}
.shop-item.locked:hover { transform: none; box-shadow: none; border-color: #e0e0e6; }
.shop-item-emoji { font-size: 34px; line-height: 1.2; }
.shop-item-name { font-size: 14px; font-weight: 700; color: #333; }
.shop-item-desc { font-size: 11px; color: #999; line-height: 1.4; min-height: 28px; }
.shop-item-price { font-size: 13px; font-weight: 700; color: #b45309; }
.shop-lock-reason { font-size: 11px; color: #b45309; background: rgba(247, 151, 30, 0.08); border-radius: 8px; padding: 3px 6px; }
.shop-empty { grid-column: 1 / -1; text-align: center; color: #aaa; font-size: 12px; padding: 20px 0; }
.shop-tip { margin-top: 14px; font-size: 11px; color: #999; line-height: 1.6; background: #fafafa; border-radius: 10px; padding: 8px 12px; }

/* 蛋池保底进度条 */
.shop-pity { margin-top: 4px; }
.shop-pity-text { font-size: 10px; color: #888; margin-bottom: 3px; }
.shop-pity-bar { height: 5px; background: #f0f0f3; border-radius: 3px; overflow: hidden; }
.shop-pity-fill { height: 100%; background: linear-gradient(90deg, #ffd166, #f59e0b); border-radius: 3px; transition: width .4s; }

/* ---------- 待兑现表格（管理中心） ---------- */
.orders-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.orders-table th {
  text-align: left; padding: 8px 10px; font-size: 12px; color: #888;
  border-bottom: 1px solid #eee; background: rgba(0,0,0,0.02);
}
.orders-table td { padding: 8px 10px; border-bottom: 1px solid #f4f4f6; color: #333; }
.orders-table tr:hover td { background: rgba(247, 151, 30, 0.04); }
.shop-orders-empty { font-size: 12px; color: #999; text-align: center; padding: 18px 0; }

/* ---------- 宠物列表（详情弹窗，P0） ---------- */
.pet-list-hint { font-size: 11px; color: #aaa; font-weight: 400; margin-left: 6px; }
.pet-list-rows { display: flex; flex-direction: column; gap: 8px; }
.pet-row {
  display: flex; align-items: center; gap: 12px;
  background: #fff; border: 1.5px solid #ececf1; border-radius: 12px;
  padding: 8px 12px; transition: all .15s;
}
.pet-row:hover:not(.active) { border-color: var(--gold, #f7971e); box-shadow: 0 2px 10px rgba(247, 151, 30, 0.1); }
.pet-row.active {
  border-color: var(--gold, #f7971e);
  background: rgba(247, 151, 30, 0.05);
  box-shadow: 0 2px 10px rgba(247, 151, 30, 0.12);
}
.pet-row-avatar {
  position: relative;
  width: 44px; height: 44px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; flex-shrink: 0;
}
.pet-row-info { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pet-row-name { font-size: 14px; font-weight: 600; color: #333; display: flex; align-items: center; gap: 6px; }
.pet-row-rarity { font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: 8px; background: rgba(0,0,0,0.06); }
.pet-row-meta { font-size: 11px; color: #999; }
.pet-status {
  flex: none; font-size: 11px; font-weight: 600;
  border-radius: 8px; padding: 2px 9px; border: 1px solid;
}
.pet-status.cur { color: #b45309; border-color: var(--gold, #f7971e); background: rgba(247, 151, 30, 0.1); }
.pet-status.old { color: #999; border-color: #ddd; background: #f7f7f9; }
.pet-status.maxed { color: #a855f7; border-color: #d8b4fe; background: rgba(168, 85, 247, 0.08); }
.pet-medal-mini {
  position: absolute; top: -6px; right: -6px;
  font-size: 13px; line-height: 1;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.25));
}

/* ---------- 徽章墙 / 徽章（P0，CSS 程序化零素材） ---------- */
.medal-wall { display: flex; flex-wrap: wrap; gap: 10px; padding: 4px 0; }
.medal-badge {
  --medal-bg: linear-gradient(145deg, #e2e8f0, #cbd5e1);
  --medal-color: #64748b;
  position: relative;
  width: 46px; height: 46px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: help;
  transition: transform .2s;
}
.medal-badge:hover { transform: scale(1.12); }
.medal-circle {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--medal-bg);
  border: 2px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
  display: flex; align-items: center; justify-content: center;
  font-size: 19px;
}
.medal-ribbon {
  position: absolute; bottom: -3px; left: 50%; transform: translateX(-50%);
  font-size: 15px; line-height: 1;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}
/* 缎带颜色：🥉 铜 = 成熟 / 🥇 金 = 满级（渐变模拟金属质感） */
.medal-badge.medal-mature .medal-ribbon {
  background: linear-gradient(180deg, #d9a066, #a9713d);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  color: transparent;
}
.medal-badge.medal-max .medal-ribbon {
  background: linear-gradient(180deg, #ffd700, #d4a017);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  color: transparent;
}
/* 学生卡片：养过 N 只角标 + 当前宠物徽章角标 */
.pets-count-badge {
  position: absolute; top: 10px; right: 10px;
  font-size: 11px; font-weight: 700;
  background: rgba(247, 151, 30, 0.12);
  border: 1px solid rgba(247, 151, 30, 0.35);
  color: #b45309;
  border-radius: 10px; padding: 1px 8px;
  z-index: 2;
}
.card-medal-corner {
  position: absolute; top: -4px; right: -4px;
  font-size: 15px; line-height: 1;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25));
  z-index: 2;
}
.beast-card .avatar, .modal .avatar-lg { position: relative; }

/* ---------- 孵蛋动画（CSS 简单实现） ---------- */
.egg-hatch-stage { text-align: center; padding: 34px 0 26px; }
.egg-hatch-egg {
  display: inline-block; font-size: 76px;
  animation: eggShake .45s ease-in-out infinite alternate;
  filter: drop-shadow(0 8px 16px rgba(247, 151, 30, 0.35));
}
.egg-hatch-text { margin-top: 14px; color: #888; font-size: 13px; }
@keyframes eggShake {
  from { transform: rotate(-8deg) scale(1); }
  to { transform: rotate(8deg) scale(1.07); }
}
@keyframes petPop {
  0% { transform: scale(0.2); opacity: 0; }
  70% { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
/* ---------- 悬赏已结束折叠区 ---------- */
#bountyEndedToggle.active { background: rgba(247,151,30,0.15); border-color: rgba(247,151,30,0.3); color: var(--gold); }
.bounty-ended { margin-top: 18px; border-top: 1px dashed #e5e5ea; padding-top: 12px; }
.bounty-ended summary { cursor: pointer; font-size: 13px; font-weight: 700; color: #888; padding: 6px 0; user-select: none; }
.bounty-ended summary:hover { color: #555; }
.bounty-ended-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; margin-top: 10px; opacity: .85; }

/* ---------- 学生详情"我的特权" ---------- */
.section-subtitle { font-size: 12px; font-weight: 700; color: #666; margin: 10px 0 6px; }
.privilege-row { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 8px; background: #fafafa; border: 1px solid #eee; margin-bottom: 6px; font-size: 13px; flex-wrap: wrap; }
.privilege-row > span:first-child { flex: 1; }

/* ============================================================
   CSS 蛋形（商店宠物蛋视觉重做 2026-08-23）
   纯 CSS 绘制：椭圆渐变 + 高光 + 斑点纹理 + 品级光晕
   ============================================================ */
.egg-visual {
  position: relative;
  width: 54px; height: 70px;
  margin: 2px auto 6px;
  border-radius: 50% 50% 46% 46% / 58% 58% 42% 42%;
  background: linear-gradient(150deg, #fff8ef 0%, #f7e0c0 42%, #e0b184 82%, #c9945e 100%);
  box-shadow:
    inset -5px -7px 12px rgba(160, 100, 50, .35),
    inset 4px 6px 10px rgba(255, 255, 255, .65),
    0 4px 10px rgba(0, 0, 0, .14);
}
/* 高光 */
.egg-visual::before {
  content: '';
  position: absolute;
  left: 9px; top: 9px;
  width: 15px; height: 22px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .8);
  transform: rotate(-22deg);
  filter: blur(1px);
}
/* 斑点纹理 */
.egg-visual::after {
  content: '';
  position: absolute;
  right: 11px; bottom: 16px;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: rgba(170, 110, 60, .35);
  box-shadow: -16px -10px 0 2px rgba(170, 110, 60, .22),
              14px -18px 0 1px rgba(170, 110, 60, .28);
}

/* ---- 稀有蛋：冰蓝渐变 + 光点 ---- */
.egg-visual.egg-egg_rare {
  background: linear-gradient(150deg, #f2fbff 0%, #cde9f7 42%, #8fc4e6 82%, #5d9fd0 100%);
  box-shadow:
    inset -5px -7px 12px rgba(50, 120, 180, .35),
    inset 4px 6px 10px rgba(255, 255, 255, .7),
    0 4px 12px rgba(70, 150, 220, .35);
}
.egg-visual.egg-egg_rare::after {
  background: rgba(80, 160, 220, .5);
  box-shadow: -16px -10px 0 2px rgba(80, 160, 220, .3),
              14px -18px 0 1px rgba(80, 160, 220, .38),
              0px -8px 0 0 rgba(255, 255, 255, .9);
}

/* ---- 史诗蛋：紫晶渐变 + 星芒 ---- */
.egg-visual.egg-egg_epic {
  background: linear-gradient(150deg, #f7f2ff 0%, #e2d0f8 42%, #b18be0 82%, #7d52c2 100%);
  box-shadow:
    inset -5px -7px 12px rgba(90, 50, 160, .38),
    inset 4px 6px 10px rgba(255, 255, 255, .7),
    0 4px 14px rgba(140, 90, 220, .4);
}
.egg-visual.egg-egg_epic::after {
  width: 7px; height: 7px;
  background: rgba(255, 255, 255, .95);
  box-shadow: -14px -12px 0 1px rgba(200, 170, 255, .9),
              12px -16px 0 0 rgba(255, 255, 255, .85),
              -4px -22px 0 0 rgba(230, 210, 255, .8),
              18px -6px 0 1px rgba(200, 170, 255, .7);
}

/* ---- 传说蛋：鎏金渐变 + 光晕呼吸 ---- */
.egg-visual.egg-egg_legend {
  background: linear-gradient(150deg, #ffe28a 0%, #ffc94d 45%, #eda52c 80%, #bb7309 100%);
  animation: egg-legend-glow 2.6s ease-in-out infinite;
}
.egg-visual.egg-egg_legend::before {
  background: rgba(255, 255, 255, .95);
}
.egg-visual.egg-egg_legend::after {
  width: 6px; height: 6px;
  background: rgba(255, 255, 255, .85);
  box-shadow: -14px -12px 0 1px rgba(255, 250, 220, .9),
              12px -16px 0 0 rgba(255, 240, 200, .85),
              -4px -22px 0 0 rgba(255, 245, 215, .8);
}
@keyframes egg-legend-glow {
  0%, 100% { box-shadow: inset -5px -7px 12px rgba(160, 100, 30, .35),
             inset 4px 6px 10px rgba(255, 255, 255, .75),
             0 0 10px rgba(245, 193, 78, .45); }
  50% { box-shadow: inset -5px -7px 12px rgba(160, 100, 30, .35),
         inset 4px 6px 10px rgba(255, 255, 255, .75),
         0 0 22px rgba(245, 193, 78, .85); }
}

/* 锁定态压暗 */
.shop-item.locked .egg-visual {
  filter: brightness(.88) saturate(.95);
  animation: none;
}

/* ---------- 学生详情内嵌迷你商店 ---------- */
.shop-mini-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.shop-mini-card { background: #fff; border: 1px solid #E5E6EB; border-radius: 12px; padding: 10px 6px; text-align: center; color: #4E5969; box-shadow: 0 1px 3px rgba(0,0,0,.06); transition: all .2s; }
.shop-mini-card .sm-nm { font-size: 12px; font-weight: 600; color: #1A1A2E; margin-top: 2px; }
.shop-mini-card:hover { border-color: var(--blue); box-shadow: 0 2px 8px rgba(43,92,245,.15); }
.shop-mini-card.locked { opacity: .6; cursor: not-allowed; }

.shop-mini-card .sm-pr { font-size: 12px; color: #E8860C; font-weight: 700; }
.shop-mini-card .sm-lock { font-size: 10px; color: #B0B4CC; margin-top: 2px; }



/* ---------- 早读大卡（激励仪表盘） ---------- */
.reading-card { grid-column: 1 / -1; padding: 26px 28px; }
/* 麦克风自检状态行：把「为什么检测不了声音」直接显示出来（HTTPS / 接口 / 权限） */
.reading-mic-status { margin-top: 12px; font-size: 12px; color: #86909c; line-height: 1.8; }
.reading-mic-status.warn { color: #d46b08; }

/* 实时状态行：达标点火提示 → 大号达标计时（呼吸绿点） */
.reading-live { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 26px; margin: 2px 0 2px; }
.reading-live-dot { width: 11px; height: 11px; border-radius: 50%; background: #c0c4cc; flex: none; }
.reading-live-dot.on { background: #22c55e; animation: rd-live-ping 1.2s ease-out infinite; }
@keyframes rd-live-ping { 0% { box-shadow: 0 0 0 0 rgba(34,197,94,.55); } 100% { box-shadow: 0 0 0 13px rgba(34,197,94,0); } }
.reading-live-text { font-size: 16px; font-weight: 800; color: #9ca3af; letter-spacing: .3px; }
.reading-live-text.on { color: #15803d; }

/* 涨经验倒计时 chip：贴在经验条标题右侧 */
.reading-exp-next { margin-left: auto; margin-right: 8px; font-size: 12px; font-weight: 700; color: #c2570a; background: rgba(247,151,30,.14); border: 1px solid rgba(247,151,30,.35); padding: 3px 9px; border-radius: 999px; white-space: nowrap; }

/* +1 落地的卡片金边闪光 */
.reading-card.reading-gain { animation: rd-gain-glow 1.6s ease; }
@keyframes rd-gain-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(247,151,30,0); border-color: var(--border); }
  30% { box-shadow: 0 0 0 4px rgba(247,151,30,.4); border-color: #f7971e; }
}

/* P0-2 音量三档：超大声（金）填充 + 徽章 */
.reading-volume-fill.loud { background: linear-gradient(90deg, #fbbf24, #f59e0b); }
.reading-status.loud {
  background: linear-gradient(135deg, #fbbf24, #f59e0b); color: #451a03;
  animation: rd-pulse 1.2s ease-in-out infinite; box-shadow: 0 0 10px rgba(245,158,11,.5);
}

/* P0-4 未达标口吻软化：红改琥珀，少责备感 */
.reading-status.not-qualified { background: linear-gradient(135deg, #fde68a, #fcd34d); color: #78350f; }

/* P0-1/P0-3 全屏轻庆祝（不挡操作） */
.reading-celeb {
  position: fixed; inset: 0; z-index: 2000;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none; opacity: 0; transition: opacity .45s ease;
}
.reading-celeb.show { opacity: 1; }
.reading-celeb .celeb-inner {
  text-align: center; padding: 26px 40px; border-radius: 20px;
  background: rgba(255,255,255,.92); border: 2px solid #f7971e;
  box-shadow: 0 14px 40px rgba(247,151,30,.35);
  font-size: 30px; font-weight: 900; color: #1a1a2e; letter-spacing: 1px;
  transform: scale(.7); animation: rd-celeb-pop .5s cubic-bezier(.2,1.6,.4,1) forwards;
}
.reading-celeb .celeb-inner b { color: #c2570a; font-size: 1.2em; }
.reading-celeb.big .celeb-inner { font-size: 40px; padding: 30px 48px; }
@keyframes rd-celeb-pop { 0% { transform: scale(.6); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }

/* P0-5 结束结算数据卡（注入确认弹窗内） */
.reading-summary { display: grid; gap: 8px; margin: 10px 0 6px; text-align: left; }
.reading-summary .row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 12px; border-radius: 10px; background: rgba(26,26,46,.05); font-size: 15px;
}
.reading-summary .row b { font-size: 17px; color: #1a1a2e; }
.reading-summary .sum-exp { color: #c2570a; }
.reading-summary .sum-coin { color: #b45309; }
.confirm-hint { margin-top: 10px; font-size: 12px; color: #98a2b3; line-height: 1.6; }
.reading-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.reading-head h3 { margin: 0; }
.reading-threshold-control { display: flex; align-items: center; gap: 10px; font-size: 13px; color: #86909c; }
.reading-slider { width: 140px; accent-color: #f7971e; }
.reading-main { display: flex; flex-direction: column; gap: 14px; }
.reading-volume-bar { position: relative; height: 44px; border-radius: 12px; background: rgba(26,26,46,.08); border: 1px solid var(--border); overflow: hidden; }
.reading-volume-fill { height: 100%; width: 0%; background: linear-gradient(90deg, #7c8cf8, #5b6cf5); border-radius: 12px 0 0 12px; transition: width .12s linear; }
.reading-volume-fill.qualified { background: linear-gradient(90deg, #4ade80, #22c55e); }
.reading-threshold-line { position: absolute; top: 0; bottom: 0; width: 3px; background: #ef4444; border-radius: 2px; box-shadow: 0 0 6px rgba(239,68,68,.8); }
.reading-metrics { display: flex; align-items: baseline; justify-content: center; gap: 16px; }
.reading-dB { font-size: 44px; font-weight: 800; color: #1a1a2e; font-variant-numeric: tabular-nums; line-height: 1; }
.reading-dB-unit { font-size: 18px; font-weight: 600; color: #86909c; margin-left: 2px; }
.reading-status { font-size: 15px; font-weight: 600; padding: 5px 16px; border-radius: 14px; background: rgba(0,0,0,.06); color: #555; }
.reading-status.qualified { background: linear-gradient(135deg, #4ade80, #22c55e); color: #062e12; animation: rd-pulse 1.6s ease-in-out infinite; }
.reading-status.not-qualified { background: #ff5555; color: #fff; }
.reading-exp-wrap { background: linear-gradient(135deg, rgba(247,151,30,.12), rgba(255,182,72,.08)); border: 1px solid rgba(247,151,30,.35); border-radius: 14px; padding: 14px 16px; }
.reading-exp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.reading-exp-title { font-size: 15px; font-weight: 700; color: #c2570a; }
.reading-exp-value { font-size: 26px; font-weight: 800; color: #f7971e; font-variant-numeric: tabular-nums; }
.reading-exp-value.exp-pop { animation: rd-pop .9s ease-out; }
.reading-exp-bar { position: relative; height: 18px; border-radius: 9px; background: rgba(122,74,0,.12); overflow: hidden; }
.reading-exp-bar::after { content:''; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 2px), rgba(255,255,255,.45) calc(10% - 2px) 10%); }
.reading-exp-fill { height: 100%; width: 0%; background: linear-gradient(90deg, #f7971e, #ffb648); border-radius: 9px 0 0 9px; transition: width .5s ease; }
.reading-exp-tip { margin-top: 8px; font-size: 13px; color: #b4823a; text-align: center; }
.reading-btns { display: flex; gap: 12px; justify-content: center; margin-top: 16px; }
.reading-btns .tool-btn { min-width: 160px; padding: 12px 20px; font-size: 16px; }
@keyframes rd-pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes rd-pop { 0% { transform: scale(1); } 30% { transform: scale(1.5); color: #22c55e; } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .reading-status.qualified, .reading-exp-value.exp-pop { animation: none; } }

/* 学院币徽章（学生卡片） */
.badge.coins { background: linear-gradient(135deg, #fff3d6, #ffe3a8); color: #b45309; font-weight: 700; }

/* 备案号页脚（法定要求悬挂于首页底部；服务端注入，config.ICP_BEIAN_NO 空则不渲染）。
   放在内容流末尾、导航栏为顶部固定样式，故不会遮挡任何交互元素。 */
.hs-beian {
  margin: 10px 16px 32px;
  padding-top: 14px;
  border-top: 1px solid rgba(0, 0, 0, .06);
  text-align: center;
  font-size: 12px;
  line-height: 1.9;
  color: #86909c;
}
.hs-beian a { color: #86909c; text-decoration: none; }
.hs-beian a:hover { color: #4e6ef2; }