/* ========== 本地字体加载 ========== */
@font-face {
  font-family: 'ZCOOL KuaiLe';
  src: url('assets/fonts/ZCOOLKuaiLe-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap; /* 先用系统字体显示，加载完再切换 */
}

/* ========== 骨架屏样式 ========== */
.skeleton-screen {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: linear-gradient(135deg, #E8F5E9 0%, #FFF8E7 50%, #FCE4EC 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.skeleton-screen.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.skeleton-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.skeleton-cloud {
  position: absolute;
  width: 80px;
  height: 40px;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 20px;
  animation: skeleton-float 3s ease-in-out infinite;
}

.skeleton-cloud.c1 { top: 15%; left: 10%; }
.skeleton-cloud.c2 { top: 25%; right: 15%; width: 100px; animation-delay: 1s; }

.skeleton-star {
  position: absolute;
  top: 60%;
  left: 20%;
  width: 30px;
  height: 30px;
  background: rgba(255, 215, 0, 0.4);
  border-radius: 50%;
  animation: skeleton-pulse 1.5s ease-in-out infinite;
}

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

@keyframes skeleton-pulse {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(1.1); }
}

.skeleton-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding: 32px;
  background: rgba(255, 255, 255, 0.85);
  border-radius: 24px;
  box-shadow: 0 8px 32px rgba(125, 200, 78, 0.15);
  min-width: 300px;
}

.skeleton-logo {
  width: 180px;
  height: 60px;
  background: linear-gradient(90deg, #e0e0e0 25%, #f0f0f0 50%, #e0e0e0 75%);
  background-size: 200% 100%;
  border-radius: 12px;
  animation: skeleton-shimmer 1.5s infinite;
}

.skeleton-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

.skeleton-input {
  height: 48px;
  background: linear-gradient(90deg, #e8e8e8 25%, #f5f5f5 50%, #e8e8e8 75%);
  background-size: 200% 100%;
  border-radius: 24px;
  animation: skeleton-shimmer 1.5s infinite;
}

.skeleton-input:nth-child(2) {
  animation-delay: 0.2s;
}

.skeleton-button {
  height: 48px;
  background: linear-gradient(90deg, #a8e6cf 25%, #c8f0dc 50%, #a8e6cf 75%);
  background-size: 200% 100%;
  border-radius: 24px;
  animation: skeleton-shimmer 1.5s infinite;
  animation-delay: 0.4s;
}

.skeleton-footer {
  width: 150px;
  height: 20px;
  background: linear-gradient(90deg, #e0e0e0 25%, #f0f0f0 50%, #e0e0e0 75%);
  background-size: 200% 100%;
  border-radius: 10px;
  animation: skeleton-shimmer 1.5s infinite;
  animation-delay: 0.6s;
}

@keyframes skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.skeleton-loading {
  position: absolute;
  bottom: 60px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: #6B8E4E;
  font-size: 16px;
}

.skeleton-spinner {
  width: 24px;
  height: 24px;
  border: 3px solid #a8e6cf;
  border-top-color: #7DC84E;
  border-radius: 50%;
  animation: skeleton-spin 0.8s linear infinite;
}

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

/* ========== 全局样式 ========== */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --primary: #7DC84E;
  --primary-dark: #5BA832;
  --secondary: #FFB6C1;
  --accent: #FFD93D;
  --bg-gradient: linear-gradient(135deg, #E8F5E9 0%, #FFF8E7 50%, #FCE4EC 100%);
  --card-bg: rgba(255, 255, 255, 0.85);
  --card-shadow: 0 8px 32px rgba(125, 200, 78, 0.15);
  --text-dark: #2D5016;
  --text-light: #6B8E4E;
  --border-radius: 20px;
  --font-cute: 'ZCOOL KuaiLe', 'Comic Sans MS', cursive, sans-serif;
}

body {
  font-family: var(--font-cute);
  background: var(--bg-gradient);
  min-height: 100vh;
  color: var(--text-dark);
  overflow-x: hidden;
  /* PWA 安全区域支持 */
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

/* PWA 模式特殊样式 */
body.pwa-mode {
  /* 全屏模式下的额外调整 */
  overscroll-behavior-y: contain;
  -webkit-user-select: none;
  user-select: none;
}

body.pwa-mode .login-page,
body.pwa-mode .app {
  padding-top: env(safe-area-inset-top);
}

/* iOS PWA 滚动优化 */
@supports (-webkit-touch-callout: none) {
  body.pwa-mode {
    /* 不要设置 overflow: hidden，否则无法滚动！ */
    min-height: 100vh;
    min-height: -webkit-fill-available;
  }
  
  body.pwa-mode .app {
    min-height: 100vh;
    min-height: -webkit-fill-available;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  body.pwa-mode .main {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ========== 魔法背景 ========== */
.magic-bg {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

.cloud {
  position: absolute;
  font-size: 60px;
  opacity: 0.4;
  animation: float 8s ease-in-out infinite;
}

.c1 { top: 10%; left: 5%; animation-delay: 0s; }
.c2 { top: 20%; right: 10%; animation-delay: 2s; font-size: 80px; }
.c3 { top: 60%; left: 15%; animation-delay: 4s; font-size: 40px; }

@keyframes float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-20px) rotate(5deg); }
}

.rainbow {
  position: absolute;
  top: -100px;
  right: -100px;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: conic-gradient(
    from 180deg,
    #FF6B6B 0deg,
    #FFD93D 60deg,
    #7DC84E 120deg,
    #4ECDC4 180deg,
    #A78BFA 240deg,
    #FF6B6B 360deg
  );
  opacity: 0.15;
  filter: blur(60px);
}

/* ========== 主应用容器 ========== */
.app {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

/* ========== 头部 ========== */
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 8px;
  background: var(--card-bg);
  border-radius: var(--border-radius);
  box-shadow: var(--card-shadow);
  backdrop-filter: blur(10px);
  margin-bottom: 16px;
  position: relative;
  z-index: 100;
}

.header::before,
.header::after {
  content: '';
  position: absolute;
  inset: 4px 10px;
  border-radius: 20px;
  pointer-events: none;
  opacity: 0.22;
  background-image:
    radial-gradient(circle, rgba(125, 200, 78, 0.35) 0 3px, transparent 6px),
    radial-gradient(circle, rgba(255, 193, 7, 0.30) 0 3px, transparent 7px),
    radial-gradient(circle, rgba(156, 39, 176, 0.22) 0 2px, transparent 6px),
    radial-gradient(circle, rgba(255, 152, 0, 0.25) 0 2px, transparent 6px);
  background-size: 220px 80px, 260px 90px, 300px 120px, 240px 100px;
  background-position: 0 0, 60px 12px, 120px 18px, 180px 8px;
  filter: blur(0.2px);
  animation: headerSparkle 9s ease-in-out infinite;
}

.header::after {
  opacity: 0.14;
  animation-duration: 13s;
  animation-direction: reverse;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  position: relative;
  overflow: hidden;
  min-height: 68px;
}

.mascot {
  width: 64px;
  height: 64px;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  animation: mascotDriftWide 18s ease-in-out infinite;
  z-index: 3;
}

.mascot img {
  width: 100%;
  height: 100%;
}

@keyframes bounce {
  0%, 100% { transform: translateY(-50%); }
  50% { transform: translateY(calc(-50% - 8px)); }
}

/* PC端：相对于header-left容器移动，使用calc保留translateY(-50%)居中 */
@keyframes mascotDriftWide {
  0% { left: 0; transform: translateY(-50%); opacity: 0; }
  8% { opacity: 1; }
  25% { left: 25%; transform: translateY(calc(-50% - 6px)); }
  50% { left: 50%; transform: translateY(calc(-50% + 4px)); }
  75% { left: 75%; transform: translateY(calc(-50% - 4px)); }
  95% { left: 88%; transform: translateY(calc(-50% + 2px)); opacity: 1; }
  100% { left: 92%; transform: translateY(-50%); opacity: 0; }
}

/* 平板端 */
@keyframes mascotDriftTablet {
  0% { left: 0; transform: translateY(-50%); opacity: 0; }
  10% { opacity: 1; }
  30% { left: 20%; transform: translateY(calc(-50% - 5px)); }
  55% { left: 45%; transform: translateY(calc(-50% + 3px)); }
  78% { left: 70%; transform: translateY(calc(-50% - 3px)); }
  95% { left: 85%; transform: translateY(calc(-50% + 2px)); opacity: 1; }
  100% { left: 90%; transform: translateY(-50%); opacity: 0; }
}

/* 手机端：保持原有vw效果，因为屏幕小，vw和百分比效果相近 */
@keyframes mascotDriftNarrow {
  0% { left: 0; transform: translateY(-50%); opacity: 0; }
  10% { opacity: 1; }
  30% { left: 25%; transform: translateY(calc(-50% - 4px)); }
  55% { left: 50%; transform: translateY(calc(-50% + 3px)); }
  78% { left: 72%; transform: translateY(calc(-50% - 3px)); }
  96% { left: 85%; transform: translateY(calc(-50% + 1px)); opacity: 1; }
  100% { left: 88%; transform: translateY(-50%); opacity: 0; }
}

.header-text h1 {
  font-size: 28px;
  background: linear-gradient(135deg, var(--primary-dark), var(--primary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.header-logo {
  width: 210px;
  max-width: 100%;
  height: auto;
  display: block;
}

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

.tagline {
  font-size: 13px;
  color: var(--text-light);
  margin-top: 0;
  line-height: 1.1;
}

@keyframes headerSparkle {
  0% { background-position: 0 0, 60px 12px, 120px 18px, 180px 8px; }
  100% { background-position: 120px -8px, 200px 4px, 260px 10px, 220px -4px; }
}

.header-badges {
  display: flex;
  gap: 16px;
}

.mini-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 16px;
  background: linear-gradient(135deg, #FFF8E7, #FFE4B5);
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(255, 217, 61, 0.3);
}

.badge-icon {
  font-size: 24px;
}

.badge-num {
  font-size: 20px;
  font-weight: bold;
  color: #E67E22;
}

/* 星星帮助按钮 */
.badge-help {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 18px;
  height: 18px;
  background: linear-gradient(135deg, #FF9800, #F57C00);
  color: white;
  border-radius: 50%;
  font-size: 12px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(255, 152, 0, 0.4);
  transition: transform 0.2s ease;
}

.badge-help:hover {
  transform: scale(1.2);
}

.mini-badge {
  position: relative;
}

#headerStarsDisplay {
  cursor: pointer;
  transition: transform 0.2s ease;
}

#headerStarsDisplay:hover {
  transform: scale(1.05);
}

.pet-badge {
  border: none;
  appearance: none;
  -webkit-appearance: none;
  font-family: inherit;
  color: inherit;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.pet-badge:hover {
  transform: scale(1.05);
}

.pet-badge:active {
  transform: scale(0.98);
}

.pet-badge:focus-visible {
  outline: 2px solid rgba(255, 193, 7, 0.6);
  outline-offset: 2px;
}

.pet-badge .badge-num {
  max-width: 72px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 星星数字弹跳动画 */
.star-bounce {
  animation: starBounce 0.6s ease;
}

@keyframes starBounce {
  0% { transform: scale(1); }
  30% { transform: scale(1.4); color: #FFD700; }
  50% { transform: scale(0.9); }
  70% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

/* 星星 +N 飘字动画 */
.star-float-animation {
  position: fixed;
  font-size: 24px;
  font-weight: bold;
  color: #FFD700;
  text-shadow: 0 2px 8px rgba(255, 215, 0, 0.6), 0 0 20px rgba(255, 215, 0, 0.4);
  pointer-events: none;
  z-index: 100001; /* 提高z-index，确保在桌游界面之上 */
  animation: starFloat 1.5s ease-out forwards;
  transform: translateX(-50%);
}

@keyframes starFloat {
  0% {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
  }
  50% {
    opacity: 1;
    transform: translateX(-50%) translateY(-30px) scale(1.3);
  }
  100% {
    opacity: 0;
    transform: translateX(-50%) translateY(-60px) scale(0.8);
  }
}

/* 星星减少动画 */
.star-float-animation.decrease {
  color: #FF6B6B;
  text-shadow: 0 2px 8px rgba(255, 107, 107, 0.6), 0 0 20px rgba(255, 107, 107, 0.4);
  animation: starDecrease 1.5s ease-out forwards;
}

@keyframes starDecrease {
  0% {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
  }
  30% {
    opacity: 1;
    transform: translateX(-50%) translateY(10px) scale(1.2);
  }
  100% {
    opacity: 0;
    transform: translateX(-50%) translateY(40px) scale(0.6);
  }
}

/* 星星抖动动画（减少时） */
.star-shake {
  animation: starShake 0.5s ease;
}

@keyframes starShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-5px); color: #FF6B6B; }
  40% { transform: translateX(5px); color: #FF6B6B; }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(3px); }
}

/* 星星获取提示弹窗 */
.stars-tips-popup {
  position: fixed;
  top: 80px;
  right: 20px;
  width: 280px;
  background: linear-gradient(135deg, #FFFDE7, #FFF8E1);
  border: 2px solid #FFD54F;
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 8px 32px rgba(255, 193, 7, 0.3);
  z-index: 9999;
  animation: slideDown 0.3s ease;
}

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

.stars-tips-popup h4 {
  margin: 0 0 12px 0;
  font-size: 16px;
  color: #F57C00;
  display: flex;
  align-items: center;
  gap: 8px;
}

.stars-tips-popup ul {
  margin: 0;
  padding-left: 20px;
  font-size: 14px;
  line-height: 1.8;
  color: #5D4037;
}

.stars-tips-popup li {
  margin-bottom: 4px;
}

.stars-tips-popup .star-amount {
  color: #FF9800;
  font-weight: bold;
}

.stars-tips-popup .close-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 24px;
  height: 24px;
  border: none;
  background: #FFCC80;
  border-radius: 50%;
  cursor: pointer;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.badge-label {
  font-size: 12px;
  color: #B8860B;
}

/* ========== 导航栏 ========== */
.nav-bar {
  display: flex;
  justify-content: center;
  gap: 12px;
  padding: 14px 24px;
  background: var(--card-bg);
  border-radius: var(--border-radius);
  box-shadow: var(--card-shadow);
  backdrop-filter: blur(10px);
  margin-bottom: 18px;
  position: relative;
  z-index: 50;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  border: none;
  border-radius: 16px;
  background: linear-gradient(135deg, #F5F5F5, #EEEEEE);
  font-family: inherit;
  font-size: 16px;
  color: var(--text-light);
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
}

.nav-item:hover {
  background: linear-gradient(135deg, #E8F5E9, #C8E6C9);
  color: var(--primary-dark);
  transform: translateY(-2px);
}

.nav-item.active {
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: white;
  box-shadow: 0 6px 20px rgba(125, 200, 78, 0.4);
  transform: scale(1.05);
}

.nav-icon {
  font-size: 20px;
}

/* ========== 主内容区 ========== */
.main {
  position: relative;
}

.page {
  display: none;
  animation: fadeIn 0.3s ease;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  box-sizing: border-box;
}

.page.active {
  display: block;
}

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

/* ========== 玻璃卡片 ========== */
.glass-card {
  background: var(--card-bg);
  border-radius: var(--border-radius);
  box-shadow: var(--card-shadow);
  backdrop-filter: blur(10px);
  border: 2px solid rgba(255, 255, 255, 0.5);
  padding: 20px;
}

/* ========== 打卡区域 ========== */
.checkin-zone {
  position: relative;
}

.checkin-card {
  display: grid;
  grid-template-columns: 1fr 1.5fr 1fr;
  align-items: center;
  gap: 20px;
  padding: 24px;
  background: linear-gradient(135deg, rgba(255,255,255,0.9), rgba(232,245,233,0.9));
  border-radius: 24px;
  box-shadow: 0 10px 40px rgba(125, 200, 78, 0.2);
  border: 3px solid rgba(125, 200, 78, 0.3);
  height: 100%;
  /* 入场动画 */
  animation: cardBounceIn 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) backwards;
}

/* 卡片入场弹跳动画 */
@keyframes cardBounceIn {
  0% {
    opacity: 0;
    transform: scale(0.8) translateY(30px);
  }
  50% {
    transform: scale(1.03) translateY(-5px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.checkin-left {
  display: flex;
  justify-content: center;
}

.checkin-mascot {
  position: relative;
  width: 120px;
  height: 120px;
}

.checkin-mascot img {
  width: 100%;
  height: 100%;
  animation: mascotWiggle 3s ease-in-out infinite;
}

@keyframes mascotWiggle {
  0%, 100% { transform: rotate(-5deg) scale(1); }
  50% { transform: rotate(5deg) scale(1.05); }
}

.mascot-bubble {
  position: absolute;
  top: -10px;
  left: 100%;
  background: white;
  padding: 8px 14px;
  border-radius: 20px;
  font-size: 13px;
  color: var(--primary-dark);
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  animation: bubblePop 0.5s ease;
}

.mascot-bubble::before {
  content: '';
  position: absolute;
  left: -8px;
  top: 50%;
  transform: translateY(-50%);
  border: 8px solid transparent;
  border-right-color: white;
}

@keyframes bubblePop {
  0% { transform: scale(0); opacity: 0; }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); opacity: 1; }
}

.checkin-center {
  text-align: center;
}

.checkin-center h2 {
  font-size: 22px;
  color: var(--text-dark);
  margin-bottom: 16px;
}

.progress-ring-wrap {
  position: relative;
  width: 140px;
  height: 140px;
  margin: 0 auto 16px;
}

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

.progress-bg {
  fill: none;
  stroke: #E8F5E9;
  stroke-width: 10;
}

.progress-bar {
  fill: none;
  stroke: url(#progressGradient);
  stroke-width: 10;
  stroke-linecap: round;
  stroke-dasharray: 264;
  stroke-dashoffset: 264;
  transition: stroke-dashoffset 0.8s ease;
}

.progress-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.progress-num {
  font-size: 42px;
  font-weight: bold;
  color: var(--primary-dark);
}

.progress-unit {
  font-size: 16px;
  color: var(--text-light);
}

.cheer-text {
  font-size: 16px;
  color: var(--primary-dark);
  padding: 8px 16px;
  background: linear-gradient(135deg, #FFF8E7, #FFFDE7);
  border-radius: 20px;
  display: inline-block;
}

.checkin-right {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.checkin-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 20px 40px;
  border: none;
  border-radius: 25px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: white;
  font-family: inherit;
  font-size: 18px;
  cursor: pointer;
  box-shadow: 0 8px 25px rgba(125, 200, 78, 0.4);
  transition: all 0.3s ease;
}

.checkin-btn:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 12px 35px rgba(125, 200, 78, 0.5);
}

.checkin-btn:active {
  transform: scale(0.95);
}

.checkin-btn.checked {
  background: linear-gradient(135deg, #FFD93D, #FFA500);
}

.checkin-btn.disabled {
  background: linear-gradient(135deg, #ccc, #aaa);
  cursor: not-allowed;
  box-shadow: none;
  opacity: 0.7;
}

.checkin-btn.disabled:hover {
  transform: none;
  box-shadow: none;
}

.btn-frog {
  font-size: 36px;
  animation: frogJump 1s ease-in-out infinite;
}

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

.checkin-status {
  font-size: 14px;
  color: var(--text-light);
  padding: 6px 16px;
  background: rgba(255,255,255,0.8);
  border-radius: 15px;
}

.checkin-status.done {
  background: linear-gradient(135deg, #FFD93D, #FFE082);
  color: #8B6914;
}

/* 撒花动画容器 */
.confetti-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 10000;
}

.confetti {
  position: absolute;
  font-size: 24px;
  animation: confettiFall 2s ease-out forwards;
}

@keyframes confettiFall {
  0% {
    transform: translateY(-20px) rotate(0deg) scale(0);
    opacity: 1;
  }
  50% {
    opacity: 1;
    transform: translateY(100px) rotate(180deg) scale(1);
  }
  100% {
    transform: translateY(300px) rotate(360deg) scale(0.5);
    opacity: 0;
  }
}

/* 卡通爆炸动画 */
.cartoon-burst {
  position: absolute;
  width: 0;
  height: 0;
  transform: translate(-50%, -50%);
}

.burst-core {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff3b0 0%, #ffd54f 60%, #ffb300 100%);
  box-shadow: 0 0 18px rgba(255, 214, 79, 0.9);
  animation: burstCore 1.8s ease-out forwards;
}

.burst-spark {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--c);
  transform: rotate(calc(var(--i) * 30deg)) translateY(0) scale(0.2);
  opacity: 0;
  animation: burstSpark 2.2s ease-out forwards;
  animation-delay: var(--d);
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.6);
}

@keyframes burstCore {
  0% { transform: scale(0.2); opacity: 0; }
  15% { transform: scale(1.5); opacity: 1; }
  30% { transform: scale(1.2); opacity: 1; }
  50% { transform: scale(1.4); opacity: 0.9; }
  70% { transform: scale(1.1); opacity: 0.7; }
  100% { transform: scale(0.5); opacity: 0; }
}

@keyframes burstSpark {
  0% { opacity: 0; transform: rotate(calc(var(--i) * 30deg)) translateY(0) scale(0.2); }
  20% { opacity: 1; transform: rotate(calc(var(--i) * 30deg)) translateY(-30px) scale(1.3); }
  50% { opacity: 1; transform: rotate(calc(var(--i) * 30deg)) translateY(-70px) scale(1); }
  100% { opacity: 0; transform: rotate(calc(var(--i) * 30deg)) translateY(-120px) scale(0.3); }
}

/* ========== 首页双栏布局 ========== */
.home-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}

/* 首页卡片入场动画 */
.home-grid > .glass-card {
  animation: cardBounceIn 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) backwards;
}

.home-grid > .glass-card:nth-child(1) { animation-delay: 0.4s; }
.home-grid > .glass-card:nth-child(2) { animation-delay: 0.5s; }
.home-grid > .glass-card:nth-child(3) { animation-delay: 0.6s; }

/* 卡片 hover 微动效 */
.home-grid > .glass-card {
  transition: all 0.3s ease;
}

.home-grid > .glass-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 40px rgba(125, 200, 78, 0.25);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 2px dashed rgba(125, 200, 78, 0.3);
}

.card-header h3 {
  font-size: 18px;
  color: var(--text-dark);
  display: flex;
  align-items: center;
  gap: 8px;
}

.card-icon {
  font-size: 22px;
}

.link-btn {
  background: none;
  border: none;
  font-family: inherit;
  font-size: 14px;
  color: var(--primary);
  cursor: pointer;
  transition: color 0.2s;
}

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

/* ========== 今日任务卡片 ========== */
.task-quick-list {
  max-height: 280px;
  overflow-y: auto;
}

.task-quick-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  margin-bottom: 10px;
  background: linear-gradient(135deg, #FAFAFA, #F5F5F5);
  border-radius: 16px;
  border-left: 4px solid var(--primary);
  transition: all 0.2s ease;
}

.task-quick-item:hover {
  transform: translateX(5px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.task-quick-item.done {
  border-left-color: #FFD93D;
  background: linear-gradient(135deg, #FFFDE7, #FFF8E1);
}

.task-check {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 3px solid var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: all 0.2s;
  flex-shrink: 0;
}

.task-quick-item.done .task-check {
  background: var(--primary);
  color: white;
}

.task-text {
  flex: 1;
  font-size: 15px;
  color: var(--text-dark);
}

.task-quick-item.done .task-text {
  text-decoration: line-through;
  color: var(--text-light);
}

.empty-hint {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-light);
  font-size: 15px;
}

/* ========== 日历卡片 ========== */
.month-nav {
  display: flex;
  align-items: center;
  gap: 12px;
}

.icon-btn {
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: white;
  font-size: 12px;
  cursor: pointer;
  transition: transform 0.2s;
}

.icon-btn:hover {
  transform: scale(1.1);
}

#monthLabel {
  font-size: 16px;
  font-weight: bold;
  color: var(--text-dark);
  min-width: 100px;
  text-align: center;
}

.calendar-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin-bottom: 8px;
}

.calendar-weekdays span {
  text-align: center;
  font-size: 13px;
  color: var(--text-light);
  padding: 8px 0;
}

.calendar-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  grid-auto-rows: minmax(34px, 1fr);
}

.calendar-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  font-size: 14px;
  color: var(--text-dark);
  background: #F8F9FA;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
}

.calendar-day:hover {
  background: #E8F5E9;
  transform: scale(1.05);
}

.calendar-day.today {
  background: linear-gradient(135deg, #E3F2FD, #BBDEFB);
  border: 2px dashed #2196F3;
  font-weight: bold;
}

.calendar-day.partial {
  background: linear-gradient(135deg, #FFF8E1, #FFECB3);
}

.calendar-day.done {
  background: linear-gradient(135deg, #E8F5E9, #C8E6C9);
}

.calendar-day.done::after {
  content: '🌸';
  position: absolute;
  width: auto;
  height: auto;
  font-size: 18px;
  bottom: 2px;
  right: 2px;
  animation: stampIn 0.3s ease;
}

@keyframes stampIn {
  0% { transform: scale(0) rotate(-30deg); }
  50% { transform: scale(1.2) rotate(10deg); }
  100% { transform: scale(1) rotate(0deg); }
}

.calendar-legend {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed rgba(125, 200, 78, 0.3);
}

.calendar-legend span {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-light);
}

.dot {
  width: 12px;
  height: 12px;
  border-radius: 4px;
}

.dot.done { background: #7DC84E; }
.dot.partial { background: #FFD93D; }
.dot.today { background: #2196F3; }

/* ========== 学科入口大卡片 ========== */
.subject-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 20px;
}

.subject-big-card {
  position: relative;
  padding: 20px;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  overflow: hidden;
  min-height: 150px;
  /* 入场动画 */
  animation: cardBounceIn 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) backwards;
}

.subject-big-card:nth-child(1) { animation-delay: 0.1s; }
.subject-big-card:nth-child(2) { animation-delay: 0.2s; }
.subject-big-card:nth-child(3) { animation-delay: 0.3s; }

/* 学科卡片 hover 光晕效果 */
.subject-big-card::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: radial-gradient(circle, rgba(255,255,255,0.8) 0%, transparent 70%);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.5s ease;
  z-index: 0;
  opacity: 0;
}

.subject-big-card:hover::before {
  width: 300%;
  height: 300%;
  opacity: 0.4;
}

.subject-big-card:hover {
  transform: translateY(-10px) scale(1.05);
  box-shadow: 
    0 20px 50px rgba(0,0,0,0.2),
    0 0 30px rgba(255,255,255,0.5),
    inset 0 0 20px rgba(255,255,255,0.3);
}

/* hover 时小动物抖动 */
.subject-big-card:hover .subject-mascot {
  animation: mascotWiggle 0.5s ease-in-out;
}

@keyframes mascotWiggle {
  0%, 100% { transform: rotate(0deg) scale(1); }
  25% { transform: rotate(-10deg) scale(1.1); }
  75% { transform: rotate(10deg) scale(1.1); }
}

.subject-big-card.chinese {
  background: linear-gradient(135deg, #FFE0E6 0%, #FFB6C1 100%);
}

.subject-big-card.chinese:hover {
  box-shadow: 
    0 20px 50px rgba(255,182,193,0.4),
    0 0 40px rgba(255,182,193,0.3);
}

.subject-big-card.math {
  background: linear-gradient(135deg, #E0F4FF 0%, #82B1FF 100%);
}

.subject-big-card.math:hover {
  box-shadow: 
    0 20px 50px rgba(130,177,255,0.4),
    0 0 40px rgba(130,177,255,0.3);
}

.subject-big-card.english {
  background: linear-gradient(135deg, #F3E8FF 0%, #B39DDB 100%);
}

.subject-big-card.english:hover {
  box-shadow: 
    0 20px 50px rgba(179,157,219,0.4),
    0 0 40px rgba(179,157,219,0.3);
}

.subject-bg {
  position: absolute;
  top: -30px;
  right: -30px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: rgba(255,255,255,0.3);
}

.subject-content {
  position: relative;
  z-index: 1;
}

.subject-emoji {
  font-size: 48px;
  margin-bottom: 12px;
  filter: drop-shadow(2px 4px 6px rgba(0,0,0,0.1));
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  display: inline-block;
}

/* hover 时 emoji 弹跳 */
.subject-big-card:hover .subject-emoji {
  transform: scale(1.2) rotate(-5deg);
  filter: drop-shadow(4px 8px 12px rgba(0,0,0,0.2));
}

.subject-big-card h3 {
  font-size: 24px;
  color: #333;
  margin-bottom: 8px;
}

.subject-big-card p {
  font-size: 14px;
  color: #555;
  margin-bottom: 16px;
  opacity: 0.9;
}

.subject-btn {
  padding: 10px 20px;
  border: none;
  border-radius: 20px;
  background: rgba(255,255,255,0.9);
  font-family: inherit;
  font-size: 14px;
  color: #333;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  position: relative;
  overflow: hidden;
}

.subject-btn::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(125, 200, 78, 0.3);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.4s ease;
}

.subject-btn:hover::after {
  width: 200%;
  height: 200%;
}

.subject-btn:hover {
  background: white;
  transform: scale(1.1) translateY(-2px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

/* 整个卡片 hover 时按钮有呼吸效果 */
.subject-big-card:hover .subject-btn {
  animation: btnPulse 1.5s ease-in-out infinite;
}

@keyframes btnPulse {
  0%, 100% { box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
  50% { box-shadow: 0 6px 20px rgba(125, 200, 78, 0.4); }
}

.subject-mascot {
  position: absolute;
  bottom: 16px;
  right: 20px;
  font-size: 50px;
  opacity: 0.6;
  transition: all 0.3s;
}

.subject-big-card:hover .subject-mascot {
  opacity: 1;
  transform: scale(1.2) rotate(10deg);
}

/* 今日已完成标记 */
.subject-done-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  background: linear-gradient(135deg, #4CAF50, #43A047);
  color: white;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(76, 175, 80, 0.4);
  z-index: 10;
  animation: badgePop 0.4s ease-out;
}

/* 错题复习提醒 */
.subject-review-hint {
  position: absolute;
  top: 12px;
  right: 12px;
  background: linear-gradient(135deg, #FF9800, #F57C00);
  color: white;
  padding: 5px 12px;
  border-radius: 16px;
  font-size: 12px;
  font-weight: 600;
  box-shadow: 0 3px 10px rgba(255, 152, 0, 0.4);
  z-index: 10;
  animation: reviewPulse 2s ease-in-out infinite;
}

@keyframes reviewPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); box-shadow: 0 4px 15px rgba(255, 152, 0, 0.6); }
}

@keyframes badgePop {
  0% { transform: scale(0); opacity: 0; }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); opacity: 1; }
}

/* ========== 页面头部 ========== */
.page-header {
  margin-bottom: 20px;
}

.page-header h2 {
  font-size: 26px;
  color: var(--text-dark);
  display: flex;
  align-items: center;
  gap: 10px;
}

.page-icon {
  font-size: 30px;
}

.page-desc {
  margin-top: 8px;
  font-size: 14px;
  color: var(--text-light);
}

.word-lookup-tip {
  margin-top: 10px;
  display: inline-block;
  padding: 6px 12px;
  border-radius: 16px;
  background: #fff7fb;
  border: 1px dashed #f9a8d4;
  color: #db2777;
  font-size: 12px;
}

/* ========== 任务面板 ========== */
.task-panel {
  padding: 24px;
}

.task-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 2px dashed rgba(125, 200, 78, 0.3);
}

.date-picker {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: linear-gradient(135deg, #FAFAFA, #F0F0F0);
  border-radius: 12px;
}

.date-picker input {
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 15px;
  color: var(--text-dark);
  outline: none;
}

.date-icon {
  font-size: 20px;
}

.tool-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  border: none;
  border-radius: 12px;
  background: linear-gradient(135deg, #E8F5E9, #C8E6C9);
  font-family: inherit;
  font-size: 14px;
  color: var(--primary-dark);
  cursor: pointer;
  transition: all 0.2s;
}

.task-nav-btn {
  padding: 10px 14px;
  background: linear-gradient(135deg, #F1F8E9, #DCEDC8);
}

.tool-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(125, 200, 78, 0.3);
}

.confirm-all-btn {
  background: linear-gradient(135deg, #FFF8E1, #FFECB3);
  color: #F57C00;
}

.task-input-row {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
}

.task-input-row input {
  flex: 1;
  padding: 14px 20px;
  border: 3px solid #E0E0E0;
  border-radius: 16px;
  font-family: inherit;
  font-size: 15px;
  outline: none;
  transition: border-color 0.2s;
}

.task-input-row input:focus {
  border-color: var(--primary);
}

.add-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 14px 24px;
  border: none;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  font-family: inherit;
  font-size: 15px;
  color: white;
  cursor: pointer;
  transition: all 0.2s;
}

.add-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 20px rgba(125, 200, 78, 0.4);
}

/* ========== 任务列表 ========== */
.task-list {
  list-style: none;
  max-height: 400px;
  overflow-y: auto;
}

.task-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  margin-bottom: 12px;
  background: linear-gradient(135deg, #FAFAFA, #F5F5F5);
  border-radius: 16px;
  border-left: 5px solid var(--primary);
  transition: all 0.2s;
}

.task-item:hover {
  transform: translateX(5px);
  box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.task-item.confirmed {
  border-left-color: #FFD93D;
  background: linear-gradient(135deg, #FFFDE7, #FFF8E1);
}

.task-checkbox {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: 3px solid var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
  flex-shrink: 0;
}

.task-checkbox.checked {
  background: var(--primary);
  color: white;
}

.task-checkbox.checked::after {
  content: '✓';
  font-size: 16px;
}

.task-content {
  flex: 1;
  font-size: 16px;
  color: var(--text-dark);
}

.task-item.confirmed .task-content {
  text-decoration: line-through;
  color: var(--text-light);
}

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

.task-btn {
  padding: 8px 14px;
  border: none;
  border-radius: 10px;
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s;
}

.task-btn.confirm-btn {
  background: linear-gradient(135deg, #E8F5E9, #C8E6C9);
  color: var(--primary-dark);
}

.task-btn.confirm-btn:hover {
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: white;
}

.task-btn.delete-btn {
  background: linear-gradient(135deg, #FFEBEE, #FFCDD2);
  color: #C62828;
}

.task-btn.delete-btn:hover {
  background: linear-gradient(135deg, #EF5350, #E53935);
  color: white;
}

.task-btn.confirmed-tag {
  background: #FFD93D;
  color: #8B6914;
  cursor: default;
}

.empty-task {
  text-align: center;
  padding: 40px;
  color: var(--text-light);
  font-size: 16px;
}

/* ========== 题目面板 ========== */
.quiz-panel {
  padding: 24px;
}

.quiz-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 2px dashed rgba(125, 200, 78, 0.3);
}

.quiz-title {
  font-size: 18px;
  color: var(--text-dark);
}

.refresh-btn {
  padding: 8px 16px;
  border: none;
  border-radius: 12px;
  background: linear-gradient(135deg, #E3F2FD, #BBDEFB);
  font-family: inherit;
  font-size: 14px;
  color: #1976D2;
  cursor: pointer;
  transition: all 0.2s;
}

.refresh-btn:hover {
  transform: scale(1.05);
}

.quiz-list {
  max-height: 500px;
  overflow-y: auto;
}

.quiz-item {
  padding: 20px;
  margin-bottom: 16px;
  background: linear-gradient(135deg, #FAFAFA, #F5F5F5);
  border-radius: 16px;
  border: 3px solid transparent;
  /* 题目切换动画 */
  animation: quizSlideIn 0.35s ease-out;
  transform-origin: center;
}

@keyframes quizSlideIn {
  0% {
    opacity: 0;
    transform: translateX(30px) scale(0.95);
  }
  100% {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

.quiz-item.correct {
  border-color: #81C784;
  background: linear-gradient(135deg, #E8F5E9, #C8E6C9);
}

.quiz-item.wrong {
  border-color: #E57373;
  background: linear-gradient(135deg, #FFEBEE, #FFCDD2);
}

.quiz-prompt {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 17px;
  font-weight: 500;
  color: var(--text-dark);
  margin-bottom: 16px;
  line-height: 1.8;
  flex: 1;
}

/* 题目朗读按钮 */
.quiz-prompt-wrapper {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 16px;
}

.quiz-prompt-wrapper .quiz-prompt {
  margin-bottom: 0;
}

.quiz-speak-btn {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: linear-gradient(135deg, #81C784, #66BB6A);
  color: white;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(102, 187, 106, 0.3);
}

.quiz-speak-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(102, 187, 106, 0.4);
}

.quiz-speak-btn:active {
  transform: scale(0.95);
}

.quiz-speak-btn.playing {
  background: linear-gradient(135deg, #FFB74D, #FFA726);
  animation: pulse-speak 1s ease-in-out infinite;
}

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

/* 英语对话题样式 */
.quiz-dialogue {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border-radius: 12px;
  padding: 14px 18px;
  margin: 12px 0;
  line-height: 2;
  font-size: 15px;
  border-left: 4px solid var(--primary);
}

.quiz-dialogue strong {
  color: var(--primary-dark);
  font-weight: 600;
}

/* 英语短文阅读样式 */
.quiz-passage {
  background: linear-gradient(135deg, #fff9e6 0%, #fff3cd 100%);
  border-radius: 12px;
  padding: 14px 18px;
  margin: 12px 0;
  line-height: 1.9;
  font-size: 15px;
  border-left: 4px solid #ffc107;
  text-align: justify;
}

/* 问题行样式 */
.quiz-question-line {
  background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
  border-radius: 10px;
  padding: 10px 16px;
  margin: 12px 0;
  font-size: 15px;
  border-left: 4px solid var(--primary);
}

.quiz-question-line strong {
  color: var(--primary-dark);
}

.quiz-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.quiz-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: white;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 2px solid transparent;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 16px;
  line-height: 1.6;
  position: relative;
  overflow: hidden;
}

.quiz-option::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,152,0,0.1), transparent);
  transition: left 0.4s ease;
}

.quiz-option:hover {
  background: #FFF8E1;
  transform: translateX(4px);
  box-shadow: 0 2px 8px rgba(255, 152, 0, 0.15);
}

.quiz-option:hover::before {
  left: 100%;
}

.quiz-option.selected {
  border-color: var(--primary);
  background: linear-gradient(135deg, #FFF8E1, #FFECB3);
  transform: scale(1.02);
  box-shadow: 0 4px 12px rgba(255, 152, 0, 0.25);
  animation: optionPop 0.3s ease;
}

@keyframes optionPop {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1.02); }
}

.quiz-option.selected::after {
  content: '✓';
  position: absolute;
  right: 12px;
  font-size: 18px;
  color: var(--primary);
  animation: checkPop 0.3s ease;
}

@keyframes checkPop {
  0% { transform: scale(0) rotate(-180deg); opacity: 0; }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

/* 连击显示 */
.quiz-streak {
  position: fixed;
  top: 120px;
  right: 20px;
  background: linear-gradient(135deg, #FF6B6B, #FF8E53);
  color: white;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 4px 15px rgba(255, 107, 107, 0.4);
  z-index: 1000;
  display: none;
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.quiz-streak.show {
  display: flex;
  align-items: center;
  gap: 6px;
  opacity: 1;
  animation: streakBounce 0.5s ease;
}

.quiz-streak.show.fading {
  opacity: 0;
  transition: opacity 0.5s ease;
}

.quiz-streak.fire {
  background: linear-gradient(135deg, #FF4500, #FF6B00);
  animation: streakFire 0.6s ease infinite alternate;
}

@keyframes streakBounce {
  0% { transform: scale(0) translateY(-20px); opacity: 0; }
  60% { transform: scale(1.2) translateY(0); opacity: 1; }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}

/* 星星更新动画 */
.star-updated {
  animation: starPulse 0.5s ease;
}

@keyframes starPulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.3); color: #FFD700; }
  100% { transform: scale(1); }
}

@keyframes streakFire {
  0% { box-shadow: 0 4px 15px rgba(255, 69, 0, 0.4), 0 0 20px rgba(255, 107, 0, 0.3); }
  100% { box-shadow: 0 4px 20px rgba(255, 69, 0, 0.6), 0 0 30px rgba(255, 107, 0, 0.5); }
}

/* 环形进度条 */
.quiz-ring-progress {
  position: relative;
  width: 50px;
  height: 50px;
  flex-shrink: 0;
}

.quiz-ring-progress svg {
  transform: rotate(-90deg);
}

.quiz-ring-progress .ring-bg {
  fill: none;
  stroke: #E0E0E0;
  stroke-width: 4;
}

.quiz-ring-progress .ring-fill {
  fill: none;
  stroke: var(--primary);
  stroke-width: 4;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.5s ease;
}

.quiz-ring-progress .ring-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-dark);
}

/* 正确/错误动画增强 */
/* 场景图标 */
.quiz-scene-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  font-size: 20px;
  background: linear-gradient(135deg, var(--scene-color, #FF6B6B), color-mix(in srgb, var(--scene-color, #FF6B6B) 70%, white));
  border-radius: 10px;
  margin-right: 8px;
  animation: sceneIconPop 0.4s ease;
  box-shadow: 0 3px 10px color-mix(in srgb, var(--scene-color, #FF6B6B) 40%, transparent);
}

@keyframes sceneIconPop {
  0% { transform: scale(0) rotate(-20deg); }
  60% { transform: scale(1.2) rotate(5deg); }
  100% { transform: scale(1) rotate(0deg); }
}

.quiz-item.correct {
  border-color: #81C784;
  background: linear-gradient(135deg, #E8F5E9, #C8E6C9);
  animation: correctPulse 0.5s ease;
}

@keyframes correctPulse {
  0% { box-shadow: 0 0 0 0 rgba(129, 199, 132, 0.6); }
  50% { box-shadow: 0 0 0 15px rgba(129, 199, 132, 0); }
  100% { box-shadow: 0 0 0 0 rgba(129, 199, 132, 0); }
}

.quiz-item.wrong {
  border-color: #E57373;
  background: linear-gradient(135deg, #FFEBEE, #FFCDD2);
  animation: wrongShake 0.4s ease;
}

@keyframes wrongShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-8px); }
  40% { transform: translateX(8px); }
  60% { transform: translateX(-5px); }
  80% { transform: translateX(5px); }
}

.quiz-option.selected {
  background: #E8F5E9;
}

.quiz-option input {
  display: none;
}

.option-radio {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 3px solid #BDBDBD;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.quiz-option.selected .option-radio {
  border-color: var(--primary);
  background: var(--primary);
}

.quiz-option.selected .option-radio::after {
  content: '✓';
  color: white;
  font-size: 12px;
}

.quiz-option-multi .option-checkbox {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 3px solid #BDBDBD;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.quiz-option-multi.selected .option-checkbox {
  border-color: var(--primary);
  background: var(--primary);
}

.quiz-option-multi.selected .option-checkbox::after {
  content: '✓';
  color: white;
  font-size: 12px;
}

.quiz-blank-input {
  min-width: 120px;
  padding: 12px 16px;
  margin: 0 10px;
  border: 3px solid #E0E0E0;
  border-radius: 12px;
  font-size: 18px;
  font-weight: 500;
  outline: none;
  background: linear-gradient(135deg, #FFFDE7, #FFF8E1);
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.05);
  transition: all 0.2s ease;
  text-align: center;
}

.quiz-blank-input:focus {
  border-color: var(--primary);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(255, 152, 0, 0.2);
  transform: scale(1.02);
}

.quiz-blank-input::placeholder {
  color: #BDBDBD;
  font-size: 14px;
}

/* 填空输入行（当题目中没有内嵌填空标记时显示） */
.fill-blanks-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 16px;
  padding: 16px;
  background: linear-gradient(135deg, #FFF8E1, #FFFDE7);
  border-radius: 12px;
  border: 2px dashed #FFB74D;
}

.fill-blanks-row .quiz-blank-input {
  flex: 1;
  min-width: 100px;
  max-width: 200px;
}

.setting-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: #555;
}

.setting-toggle input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--primary);
}

.setting-toggle .toggle-text {
  line-height: 1.5;
}

/* 旧的内嵌导航栏（已弃用） */
.quiz-progress-nav {
  display: none;
}

/* 固定底部导航栏 */
.quiz-fixed-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 20px;
  background: linear-gradient(135deg, rgba(255,255,255,0.98), rgba(255,248,225,0.98));
  border-top: 2px solid #FFE082;
  box-shadow: 0 -4px 20px rgba(0,0,0,0.1);
  z-index: 1000;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* 隐藏旧的提交批改按钮 */
.quiz-footer {
  display: none !important;
}

/* 给页面底部留出固定导航栏的空间 */
.quiz-list {
  padding-bottom: 100px;
}

.quiz-progress-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.quiz-accuracy {
  font-size: 12px;
  color: #4CAF50;
  font-weight: 600;
  background: #E8F5E9;
  padding: 2px 8px;
  border-radius: 10px;
}

.quiz-nav-btn {
  padding: 8px 14px;
  border-radius: 10px;
  border: 2px solid var(--primary);
  background: white;
  color: var(--primary-dark);
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
}

.quiz-nav-btn:hover:not(:disabled) {
  background: var(--primary);
  color: white;
}

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

.quiz-nav-btn.primary {
  background: var(--primary);
  color: white;
  font-weight: 600;
  min-width: 90px;
}

.quiz-nav-btn.primary:hover:not(:disabled) {
  background: var(--primary-dark);
  transform: scale(1.02);
}

.quiz-progress-text {
  font-size: 14px;
  color: #666;
  font-weight: 500;
}

.quiz-result-row {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 12px;
  min-height: 28px;
}

/* 答题解析框 */
.quiz-analysis-box {
  margin-top: 16px;
  padding: 16px;
  background: linear-gradient(135deg, #FFF8E1, #FFECB3);
  border: 2px solid #FFB74D;
  border-radius: 14px;
  animation: analysisSlideIn 0.4s ease-out;
}

@keyframes analysisSlideIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.quiz-analysis-box .analysis-header {
  font-size: 15px;
  font-weight: 600;
  color: #F57F17;
  margin-bottom: 10px;
}

.quiz-analysis-box .analysis-content {
  font-size: 14px;
  line-height: 1.7;
  color: #5D4037;
}

/* 移动端解析框适配 */
@media (max-width: 600px) {
  .quiz-analysis-box {
    padding: 14px;
    margin-top: 14px;
  }
  
  .quiz-analysis-box .analysis-header {
    font-size: 14px;
  }
  
  .quiz-analysis-box .analysis-content {
    font-size: 13px;
  }
}

/* 答题完成界面 */
.quiz-finish-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
  text-align: center;
  min-height: 300px;
  background: linear-gradient(135deg, #E8F5E9, #C8E6C9);
  border-radius: 20px;
  animation: finishFadeIn 0.5s ease-out;
}

@keyframes finishFadeIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.finish-icon {
  font-size: 64px;
  margin-bottom: 16px;
  animation: finishBounce 1s ease-in-out infinite;
}

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

.finish-title {
  font-size: 24px;
  font-weight: 700;
  color: #2E7D32;
  margin-bottom: 20px;
}

/* 薄弱知识点分析 */
.finish-weakness {
  width: 100%;
  max-width: 320px;
  background: white;
  border-radius: 12px;
  padding: 16px;
  margin: 16px 0;
  text-align: left;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.weakness-title {
  font-size: 14px;
  font-weight: 600;
  color: #333;
  margin-bottom: 12px;
}

.weakness-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.weakness-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: #F5F5F5;
  border-radius: 8px;
}

.weakness-cat {
  font-size: 13px;
  color: #555;
}

.weakness-rate {
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 600;
}

.weakness-rate.warning {
  background: #FFF3E0;
  color: #E65100;
}

.weakness-rate.danger {
  background: #FFEBEE;
  color: #C62828;
}

.weakness-tip {
  font-size: 12px;
  color: #888;
  margin-top: 10px;
  text-align: center;
}

/* 学习建议 */
.finish-advice {
  padding: 10px 16px;
  border-radius: 10px;
  font-size: 13px;
  margin: 12px 0;
}

.finish-advice.success {
  background: #E8F5E9;
  color: #2E7D32;
}

.finish-advice.good {
  background: #E3F2FD;
  color: #1565C0;
}

.finish-advice.warning {
  background: #FFF3E0;
  color: #E65100;
}

.finish-advice.danger {
  background: #FFEBEE;
  color: #C62828;
}

/* 完成面板操作按钮组 */
.finish-actions {
  display: flex;
  gap: 12px;
  margin-top: 16px;
  flex-wrap: wrap;
  justify-content: center;
}

.finish-btn.secondary {
  background: white;
  color: var(--primary);
  border: 2px solid var(--primary);
}

.finish-btn.secondary:hover {
  background: #FFF8E1;
}

/* 错题回顾弹窗 */
.wrong-review-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 20px;
  animation: fadeIn 0.2s ease;
}

.wrong-review-content {
  background: white;
  border-radius: 16px;
  max-width: 500px;
  width: 100%;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  animation: slideUp 0.3s ease;
}

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

.wrong-review-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid #EEE;
  font-size: 16px;
  font-weight: 600;
}

.wrong-review-close {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: #F5F5F5;
  cursor: pointer;
  font-size: 16px;
}

.wrong-review-close:hover {
  background: #FFEBEE;
  color: #C62828;
}

.wrong-review-list {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px;
}

.wrong-review-item {
  padding: 14px;
  background: #FAFAFA;
  border-radius: 10px;
  margin-bottom: 12px;
  border-left: 3px solid #FF5252;
}

.wrong-q {
  font-size: 14px;
  color: #333;
  line-height: 1.5;
  margin-bottom: 10px;
}

.wrong-info {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 13px;
}

.wrong-user {
  color: #888;
}

.wrong-user em {
  color: #C62828;
  font-style: normal;
  text-decoration: line-through;
}

.wrong-correct {
  color: #2E7D32;
}

.wrong-correct strong {
  font-weight: 600;
}

.wrong-analysis {
  margin-top: 10px;
  padding: 8px 12px;
  background: #E3F2FD;
  border-radius: 8px;
  font-size: 12px;
  color: #1565C0;
}

.wrong-review-footer {
  padding: 16px 20px;
  border-top: 1px solid #EEE;
  text-align: center;
}

.wrong-review-btn {
  padding: 10px 32px;
  background: var(--primary);
  color: white;
  border: none;
  border-radius: 20px;
  font-size: 14px;
  cursor: pointer;
}

.wrong-review-btn:hover {
  opacity: 0.9;
}

.finish-score {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}

.score-label {
  font-size: 14px;
  color: #666;
}

.score-value {
  font-size: 36px;
  font-weight: 700;
  color: var(--primary-dark);
}

.score-value.perfect {
  color: #FF6B6B;
  text-shadow: 0 2px 10px rgba(255, 107, 107, 0.3);
}

.score-percent {
  font-size: 16px;
  color: #888;
}

.finish-bonus {
  font-size: 16px;
  color: #FF9800;
  font-weight: 600;
  padding: 8px 16px;
  background: linear-gradient(135deg, #FFF8E1, #FFECB3);
  border-radius: 20px;
  margin-bottom: 16px;
  animation: bonusPulse 1.5s ease-in-out infinite;
}

@keyframes bonusPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

.finish-btn {
  padding: 14px 32px;
  font-size: 16px;
  font-weight: 600;
  color: white;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  border: none;
  border-radius: 25px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(76, 175, 80, 0.4);
  margin-top: 8px;
}

.finish-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(76, 175, 80, 0.5);
}

.finish-btn:active {
  transform: translateY(0);
}

/* 移动端完成界面适配 */
@media (max-width: 600px) {
  .quiz-finish-panel {
    padding: 30px 16px;
    min-height: 260px;
  }
  
  .finish-icon {
    font-size: 52px;
  }
  
  .finish-title {
    font-size: 20px;
  }
  
  .score-value {
    font-size: 30px;
  }
  
  .finish-btn {
    padding: 12px 28px;
    font-size: 15px;
  }
}

/* 大字反馈特效 */
.quiz-big-feedback {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 24px 40px;
  border-radius: 20px;
  font-size: 32px;
  font-weight: bold;
  z-index: 100;
  animation: feedback-pop 0.5s ease-out forwards;
  pointer-events: none;
}

.quiz-big-feedback.correct {
  background: linear-gradient(135deg, #4CAF50, #81C784);
  color: white;
  box-shadow: 0 8px 30px rgba(76, 175, 80, 0.4);
}

.quiz-big-feedback.wrong {
  background: linear-gradient(135deg, #FF7043, #FFAB91);
  color: white;
  box-shadow: 0 8px 30px rgba(255, 112, 67, 0.4);
}

.quiz-big-feedback .feedback-emoji {
  font-size: 40px;
  animation: emoji-bounce 0.6s ease-out infinite alternate;
}

.quiz-big-feedback .feedback-text {
  text-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.quiz-big-feedback.fade-out {
  animation: feedback-fade 0.5s ease-out forwards;
}

@keyframes feedback-pop {
  0% { transform: translate(-50%, -50%) scale(0) rotate(-10deg); opacity: 0; }
  50% { transform: translate(-50%, -50%) scale(1.1) rotate(3deg); }
  100% { transform: translate(-50%, -50%) scale(1) rotate(0deg); opacity: 1; }
}

@keyframes feedback-fade {
  0% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(0.8) translateY(-30px); opacity: 0; }
}

@keyframes emoji-bounce {
  0% { transform: translateY(0) rotate(-5deg); }
  100% { transform: translateY(-8px) rotate(5deg); }
}

/* 小人偶气泡 - 答题反馈 */
@keyframes bubble-show {
  0% { transform: translateX(-50%) scale(0.5); opacity: 0; }
  50% { transform: translateX(-50%) scale(1.1); }
  100% { transform: translateX(-50%) scale(1); opacity: 1; }
}

.quiz-loading-hint {
  text-align: center;
  padding: 40px 20px;
  color: #888;
  font-size: 16px;
}

.quiz-action-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
}

.quiz-submit-btn {
  padding: 8px 14px;
  border-radius: 10px;
  border: 2px solid var(--primary);
  background: var(--primary);
  color: white;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
}

.quiz-submit-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.quiz-result-hint {
  font-size: 14px;
  color: #666;
}

.quiz-result-hint.correct {
  color: #2E7D32;
}

.quiz-result-hint.wrong {
  color: #C62828;
}

.floating-frog.quiz-wrong {
  animation: frog-shake 2s ease-in-out;
}

.floating-frog.quiz-correct {
  animation: frog-bounce 2s ease-in-out;
}

@keyframes frog-shake {
  0%, 100% { transform: translateX(0) rotate(0deg); }
  5% { transform: translateX(-15px) rotate(-8deg); }
  10% { transform: translateX(15px) rotate(8deg); }
  15% { transform: translateX(-12px) rotate(-6deg); }
  20% { transform: translateX(12px) rotate(6deg); }
  25% { transform: translateX(-10px) rotate(-5deg); }
  30% { transform: translateX(10px) rotate(5deg); }
  35% { transform: translateX(-8px) rotate(-4deg); }
  40% { transform: translateX(8px) rotate(4deg); }
  45% { transform: translateX(-6px) rotate(-3deg); }
  50% { transform: translateX(6px) rotate(3deg); }
  55% { transform: translateX(-4px) rotate(-2deg); }
  60% { transform: translateX(4px) rotate(2deg); }
  70% { transform: translateX(-2px) rotate(-1deg); }
  80% { transform: translateX(2px) rotate(1deg); }
}

@keyframes frog-bounce {
  0% { transform: scale(1); }
  10% { transform: scale(1.2) rotate(-5deg); }
  20% { transform: scale(0.9) rotate(5deg); }
  30% { transform: scale(1.15) rotate(-3deg); }
  40% { transform: scale(0.95) rotate(3deg); }
  50% { transform: scale(1.1) rotate(-2deg); }
  60% { transform: scale(0.97) rotate(2deg); }
  70% { transform: scale(1.08); }
  80% { transform: scale(0.98); }
  90% { transform: scale(1.02); }
  100% { transform: scale(1); }
}

/* 答题面板震动（答错时） */
.quiz-panel.shake-wrong {
  animation: panel-shake 0.6s ease-in-out;
}

@keyframes panel-shake {
  0%, 100% { transform: translateX(0); }
  10% { transform: translateX(-8px); }
  20% { transform: translateX(8px); }
  30% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  50% { transform: translateX(-4px); }
  60% { transform: translateX(4px); }
  70% { transform: translateX(-2px); }
  80% { transform: translateX(2px); }
}

/* 答错时飘落的表情粒子 */
.wrong-particle {
  position: absolute;
  font-size: 28px;
  top: 20%;
  animation: wrong-fall 1.5s ease-out forwards;
  z-index: 100;
}

@keyframes wrong-fall {
  0% {
    transform: translateY(0) rotate(0deg) scale(0);
    opacity: 1;
  }
  20% {
    transform: translateY(30px) rotate(15deg) scale(1.2);
    opacity: 1;
  }
  50% {
    transform: translateY(80px) rotate(-10deg) scale(1);
    opacity: 0.8;
  }
  100% {
    transform: translateY(200px) rotate(25deg) scale(0.5);
    opacity: 0;
  }
}

.pinyin-base {
  margin: 8px 0 4px;
  color: var(--primary-dark);
  font-size: 15px;
}

.pinyin-label {
  font-size: 18px;
  letter-spacing: 1px;
}
.pinyin-option {
  font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
}

.option-tone {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 3px solid #BDBDBD;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.pinyin-option.selected .option-tone {
  border-color: var(--primary);
  background: var(--primary);
}

.pinyin-option.selected .option-tone::after {
  content: '✓';
  color: white;
  font-size: 12px;
}

.quiz-input {
  width: 100%;
  padding: 14px 18px;
  border: 3px solid #E0E0E0;
  border-radius: 14px;
  font-family: inherit;
  font-size: 18px;
  font-weight: 500;
  outline: none;
  transition: all 0.2s ease;
  background: linear-gradient(135deg, #FFFDE7, #FFF8E1);
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.05);
}

.quiz-input:focus {
  border-color: var(--primary);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(255, 152, 0, 0.2);
}

.quiz-input::placeholder {
  color: #BDBDBD;
  font-size: 15px;
  font-weight: normal;
}

.quiz-input.numeric-input,
.quiz-blank-input.numeric-input,
.vertical-input.numeric-input {
  background: linear-gradient(135deg, #fff7e6, #fff1f4);
  border-color: #f9a8d4;
  box-shadow: 0 2px 8px rgba(249, 168, 212, 0.25);
}

.quiz-feedback {
  margin-top: 12px;
  padding: 12px 16px;
  border-radius: 12px;
  font-size: 15px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  animation: feedbackSlide 0.3s ease;
}

@keyframes feedbackSlide {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

.quiz-feedback .feedback-icon {
  font-size: 18px;
  font-weight: bold;
}

.quiz-feedback .feedback-star {
  background: linear-gradient(135deg, #FFD700, #FFA500);
  color: white;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 600;
  margin-left: auto;
  animation: starBounce 0.5s ease;
}

@keyframes starBounce {
  0% { transform: scale(0); }
  60% { transform: scale(1.3); }
  100% { transform: scale(1); }
}

.quiz-feedback .wrongbook-hint {
  background: #FFF3E0;
  color: #E65100;
  padding: 3px 10px;
  border-radius: 10px;
  font-size: 12px;
  margin-left: auto;
  animation: wrongbookSlide 0.4s ease 0.2s both;
}

@keyframes wrongbookSlide {
  from { opacity: 0; transform: translateX(10px); }
  to { opacity: 1; transform: translateX(0); }
}

.quiz-feedback.correct {
  background: linear-gradient(135deg, #E8F5E9, #C8E6C9);
  color: #2E7D32;
  border: 1px solid #A5D6A7;
}

.quiz-feedback.wrong {
  background: linear-gradient(135deg, #FFEBEE, #FFCDD2);
  color: #C62828;
  border: 1px solid #EF9A9A;
}

.quiz-footer {
  margin-top: 20px;
  display: flex;
  align-items: center;
  gap: 20px;
}

/* 草稿区 */
.draft-panel {
  margin-top: 16px;
  padding: 12px;
  background: #f8fbff;
  border-radius: 12px;
  border: 1px dashed #c9d9f0;
}

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

.draft-title {
  font-weight: 600;
  color: #2d5aa6;
}

.draft-tools {
  display: flex;
  gap: 8px;
}

.draft-btn {
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid #c9d9f0;
  background: #ffffff;
  cursor: pointer;
  font-size: 12px;
}

.draft-btn.active {
  background: #e6f0ff;
  border-color: #7aa8f0;
  color: #2d5aa6;
  font-weight: 600;
}

.draft-canvas-wrap {
  width: 100%;
  height: 220px;
  background: #fff;
  border-radius: 10px;
  border: 1px solid #e2eaf6;
  overflow: hidden;
}

.draft-canvas {
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.draft-canvas-wrap {
  user-select: none;
  -webkit-user-select: none;
}

/* ========== 全局草稿面板 ========== */
.global-draft-panel {
  position: fixed;
  right: 20px;
  bottom: 120px;
  width: min(55vw, calc(100vw - 40px));
  min-width: 400px;
  background: linear-gradient(135deg, #ffffff, #f8fbff);
  border-radius: 20px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15), 0 2px 8px rgba(0, 0, 0, 0.1);
  z-index: 9998;
  overflow: hidden;
  border: 2px solid rgba(76, 175, 80, 0.3);
  display: none;
  transition: width 0.3s ease, height 0.3s ease, top 0.1s ease, left 0.1s ease, right 0.1s ease, bottom 0.1s ease;
}

.global-draft-panel.show {
  display: block !important;
  animation: draftPanelIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.global-draft-panel.dragging {
  transition: none;
  cursor: grabbing;
}

/* 全屏模式 */
.global-draft-panel.fullscreen {
  width: calc(100vw - 40px) !important;
  height: calc(100vh - 100px) !important;
  top: 20px !important;
  left: 20px !important;
  right: 20px !important;
  bottom: auto !important;
  border-radius: 16px;
}

.global-draft-panel.fullscreen .global-draft-canvas-wrap {
  height: calc(100vh - 170px) !important;
}

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

.global-draft-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: linear-gradient(135deg, #E8F5E9, #C8E6C9);
  border-bottom: 1px solid rgba(76, 175, 80, 0.2);
  cursor: grab;
  user-select: none;
}

.global-draft-header:active {
  cursor: grabbing;
}

.global-draft-title {
  font-weight: 700;
  font-size: 16px;
  color: #2E7D32;
}

.draft-drag-hint {
  font-size: 12px;
  font-weight: 400;
  color: #81C784;
  margin-left: 6px;
}

.global-draft-tools {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.global-draft-tools .draft-btn {
  padding: 6px 12px;
  font-size: 13px;
  border-radius: 10px;
  transition: all 0.2s ease;
}

.global-draft-tools .draft-btn:hover {
  transform: translateY(-1px);
}

.global-draft-tools .draft-btn.fullscreen-btn {
  background: linear-gradient(135deg, #E3F2FD, #BBDEFB);
  border-color: #90CAF9;
  color: #1565C0;
}

.global-draft-tools .draft-btn.fullscreen-btn:hover {
  background: linear-gradient(135deg, #BBDEFB, #90CAF9);
}

.global-draft-tools .draft-btn.close-btn {
  background: linear-gradient(135deg, #FFEBEE, #FFCDD2);
  border-color: #EF9A9A;
  color: #C62828;
}

.global-draft-tools .draft-btn.close-btn:hover {
  background: linear-gradient(135deg, #FFCDD2, #EF9A9A);
}

.global-draft-canvas-wrap {
  width: 100%;
  height: 50vh;
  min-height: 300px;
  max-height: 70vh;
  background: #fff;
  position: relative;
  touch-action: none;
}

.global-draft-canvas {
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  cursor: crosshair;
}

/* 大屏幕适配 */
@media (min-width: 1200px) {
  .global-draft-panel {
    width: min(60vw, 900px);
    bottom: 80px;
  }
  
  .global-draft-canvas-wrap {
    height: 55vh;
    max-height: 600px;
  }
}

@media (min-width: 1600px) {
  .global-draft-panel {
    width: min(55vw, 1100px);
  }
  
  .global-draft-canvas-wrap {
    height: 60vh;
    max-height: 700px;
  }
}

/* 草稿提示气泡 */
.floating-frog-draft-hint {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  background: linear-gradient(135deg, #FFF9C4, #FFF59D);
  color: #F57F17;
  padding: 8px 14px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(245, 127, 23, 0.25);
  border: 2px solid #FFD54F;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  pointer-events: none;
  z-index: 1;
}

.floating-frog-draft-hint::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid #FFD54F;
}

.floating-frog.show-draft-hint .floating-frog-draft-hint {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  animation: hintBounce 2s ease-in-out infinite;
}

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

/* 新消息提示气泡 */
.floating-frog-msg-hint {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: white;
  padding: 8px 14px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  margin-bottom: 10px;
  z-index: 2;
}

.floating-frog-msg-hint::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid #dc2626;
}

.floating-frog.show-msg-hint .floating-frog-msg-hint {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  animation: msgHintPulse 2s ease-in-out infinite;
}

@keyframes msgHintPulse {
  0%, 100% { transform: translateX(-50%) translateY(0) scale(1); }
  50% { transform: translateX(-50%) translateY(-3px) scale(1.02); }
}

/* 新消息时小青蛙晃动 */
.floating-frog.show-msg-hint .floating-frog-container {
  animation: frogShake 0.5s ease-in-out;
}

@keyframes frogShake {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-5deg); }
  75% { transform: rotate(5deg); }
}

/* 好友请求提示气泡 */
.floating-frog-friend-hint {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: white;
  padding: 10px 16px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 4px 16px rgba(245, 158, 11, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  margin-bottom: 10px;
  z-index: 3;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
}

.floating-frog-friend-hint::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid #d97706;
}

.floating-frog-friend-hint .friend-hint-badge {
  background: #fff;
  color: #d97706;
  font-size: 12px;
  font-weight: 700;
  min-width: 20px;
  height: 20px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
}

.floating-frog.show-friend-hint .floating-frog-friend-hint {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  animation: friendHintBounce 2s ease-in-out infinite;
}

@keyframes friendHintBounce {
  0%, 100% { transform: translateX(-50%) translateY(0) scale(1); }
  50% { transform: translateX(-50%) translateY(-5px) scale(1.03); }
}

/* 有好友请求时小青蛙跳动 */
.floating-frog.show-friend-hint .floating-frog-container {
  animation: frogExcited 1s ease-in-out infinite;
}

@keyframes frogExcited {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(-3px) rotate(-3deg); }
  50% { transform: translateY(0) rotate(0deg); }
  75% { transform: translateY(-3px) rotate(3deg); }
}

/* 小青蛙上的好友请求角标 */
.floating-frog-friend-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: white;
  font-size: 11px;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.5);
  z-index: 10;
  animation: badgePulse 1.5s ease-in-out infinite;
}

.floating-frog.has-friend-request .floating-frog-friend-badge {
  display: flex;
}

@keyframes badgePulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

/* 草稿面板展开时小青蛙样式 */
.floating-frog.draft-open .floating-frog-draft-hint {
  opacity: 0 !important;
  visibility: hidden !important;
}

/* 响应式：平板 */
@media (max-width: 768px) {
  .global-draft-panel {
    right: 15px;
    width: min(450px, calc(100vw - 30px));
    bottom: 100px;
  }
  
  .global-draft-canvas-wrap {
    height: 300px;
  }
}

/* 响应式：移动端草稿面板全宽 */
@media (max-width: 500px) {
  .global-draft-panel {
    right: 10px;
    left: 10px;
    width: auto;
    max-width: none;
    bottom: 90px;
  }
  
  .global-draft-canvas-wrap {
    height: 260px;
  }
  
  .global-draft-header {
    padding: 10px 12px;
  }
  
  .global-draft-tools .draft-btn {
    padding: 5px 10px;
    font-size: 12px;
  }
  
  .floating-frog-draft-hint {
    font-size: 12px;
    padding: 6px 12px;
  }
}

.submit-btn {
  padding: 14px 32px;
  border: none;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  font-family: inherit;
  font-size: 16px;
  color: white;
  cursor: pointer;
  transition: all 0.2s;
}

.submit-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 25px rgba(125, 200, 78, 0.4);
}

.quiz-result {
  font-size: 18px;
  font-weight: bold;
  color: var(--primary-dark);
}

/* ========== 竖式计算 ========== */
.vertical-problem {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  background: 
    repeating-linear-gradient(
      transparent,
      transparent 29px,
      #E3F2FD 29px,
      #E3F2FD 30px
    ),
    linear-gradient(135deg, #FAFAFA, #F5F5F5);
  border-radius: 16px;
  border: 3px dashed #90CAF9;
}

.vertical-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0;
}

.vertical-sign {
  width: 40px;
  font-size: 24px;
  text-align: center;
  color: var(--text-dark);
}

.vertical-digit {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  font-weight: 600;
  color: var(--text-dark);
  background: #f5f5f5;
  border-radius: 8px;
}

.vertical-input {
  width: 48px;
  height: 48px;
  border: 3px solid #BDBDBD;
  border-radius: 10px;
  font-family: inherit;
  font-size: 24px;
  font-weight: 600;
  text-align: center;
  outline: none;
  transition: all 0.2s;
  background: linear-gradient(135deg, #FFFDE7, #FFF8E1);
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.05);
}

.vertical-input:focus {
  border-color: var(--primary);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(255, 152, 0, 0.25);
  transform: scale(1.05);
}

.vertical-input.correct {
  border-color: #81C784;
  background: #E8F5E9;
}

.vertical-input.wrong {
  border-color: #E57373;
  background: #FFEBEE;
}

.vertical-line {
  width: 100%;
  height: 3px;
  background: var(--text-dark);
  margin: 8px 0;
}

.carry-input {
  width: 24px;
  height: 24px;
  border: 2px dashed #BDBDBD;
  border-radius: 50%;
  font-size: 14px;
  text-align: center;
  color: #E57373;
  outline: none;
}

/* ========== 错题本 ========== */
.wrong-panel {
  padding: 24px;
}

.wrong-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 2px dashed rgba(125, 200, 78, 0.3);
}

.wrong-header span {
  font-size: 18px;
  color: var(--text-dark);
}

@media (max-width: 600px) {
  .wrong-header {
    flex-direction: column;
    align-items: stretch;
  }
  
  .wrong-tabs {
    order: 1;
    justify-content: center;
  }
  
  .wrong-header .clear-btn {
    order: 2;
    align-self: flex-end;
  }
}

.clear-btn {
  padding: 8px 16px;
  border: none;
  border-radius: 12px;
  background: linear-gradient(135deg, #FFEBEE, #FFCDD2);
  font-family: inherit;
  font-size: 14px;
  color: #C62828;
  cursor: pointer;
  transition: all 0.2s;
}

.clear-btn:hover {
  background: linear-gradient(135deg, #EF5350, #E53935);
  color: white;
}

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

.wrong-item {
  padding: 16px;
  background: linear-gradient(135deg, #FFF8E1, #FFECB3);
  border-radius: 16px;
  border-left: 5px solid #FFA726;
}

.wrong-subject {
  font-size: 13px;
  color: #F57C00;
  margin-bottom: 8px;
}

.wrong-prompt {
  font-size: 15px;
  color: var(--text-dark);
  margin-bottom: 8px;
}

.wrong-user-answer {
  font-size: 14px;
  color: #C62828;
  padding: 8px 12px;
  background: #FFEBEE;
  border-radius: 8px;
  margin-bottom: 8px;
}

.wrong-answer {
  font-size: 14px;
  color: #2E7D32;
  padding: 8px 12px;
  background: #E8F5E9;
  border-radius: 8px;
}

.wrong-analysis {
  margin-top: 12px;
  padding: 14px;
  background: linear-gradient(135deg, #FFF8E1, #FFECB3);
  border-radius: 12px;
  border-left: 4px solid #FFA726;
}

.wrong-analysis .analysis-title {
  font-size: 14px;
  font-weight: 700;
  color: #E65100;
  margin-bottom: 8px;
}

.wrong-analysis .analysis-content {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 14px;
  color: var(--text-dark);
  line-height: 1.8;
}

.empty-wrong {
  grid-column: 1 / -1;
  text-align: center;
  padding: 60px 20px;
  color: var(--text-light);
  font-size: 16px;
}

/* 错题本学科筛选标签 */
.wrong-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.wrong-tab {
  padding: 8px 16px;
  border: none;
  border-radius: 20px;
  background: linear-gradient(135deg, #F5F5F5, #EEEEEE);
  font-family: inherit;
  font-size: 14px;
  color: var(--text-light);
  cursor: pointer;
  transition: all 0.2s;
}

.wrong-tab:hover {
  background: linear-gradient(135deg, #E8F5E9, #C8E6C9);
  color: var(--primary);
}

.wrong-tab.active {
  background: linear-gradient(135deg, var(--primary), #66BB6A);
  color: white;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(76, 175, 80, 0.3);
}

/* 错题统计信息 */
.wrong-stats {
  margin-bottom: 16px;
}

.wrong-stats-info {
  padding: 12px 16px;
  background: linear-gradient(135deg, #E3F2FD, #BBDEFB);
  border-radius: 12px;
  font-size: 14px;
  color: #1565C0;
}

.wrong-stats-info strong {
  font-size: 18px;
  color: #0D47A1;
}

/* 错题卡片头部（含删除按钮） */
.wrong-item-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 8px;
}

.wrong-delete-btn {
  padding: 4px 8px;
  border: none;
  border-radius: 8px;
  background: transparent;
  font-size: 14px;
  cursor: pointer;
  opacity: 0.5;
  transition: all 0.2s;
}

.wrong-item:hover .wrong-delete-btn {
  opacity: 1;
}

.wrong-delete-btn:hover {
  background: #FFEBEE;
  transform: scale(1.1);
}

/* ========== 设置面板 ========== */
.settings-panel {
  padding: 24px;
  max-width: 500px;
}

.setting-item {
  margin-bottom: 24px;
}

.setting-item label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  color: var(--text-dark);
  margin-bottom: 12px;
}

.setting-icon {
  font-size: 24px;
}

.setting-input {
  display: flex;
  gap: 12px;
}

.setting-input input {
  flex: 1;
  padding: 12px 16px;
  border: 3px solid #E0E0E0;
  border-radius: 12px;
  font-family: inherit;
  font-size: 18px;
  letter-spacing: 8px;
  text-align: center;
  outline: none;
  transition: border-color 0.2s;
}

.setting-input input:focus {
  border-color: var(--primary);
}

.save-btn {
  padding: 12px 24px;
  border: none;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  font-family: inherit;
  font-size: 15px;
  color: white;
  cursor: pointer;
  transition: all 0.2s;
}

.save-btn:hover {
  transform: scale(1.05);
}

.setting-hint {
  margin-top: 8px;
  font-size: 13px;
  color: var(--text-light);
}

/* ========== 弹窗 ========== */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  backdrop-filter: blur(5px);
}

.modal-overlay.hidden {
  display: none;
}

.modal-box {
  background: white;
  padding: 32px;
  border-radius: 24px;
  text-align: center;
  max-width: 360px;
  width: 90%;
  animation: modalIn 0.3s ease;
}

@keyframes modalIn {
  from {
    transform: scale(0.8);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

.modal-icon {
  font-size: 48px;
  margin-bottom: 16px;
}

.modal-box h3 {
  font-size: 22px;
  color: var(--text-dark);
  margin-bottom: 8px;
}

.modal-box p {
  font-size: 14px;
  color: var(--text-light);
  margin-bottom: 20px;
}

.modal-box input {
  width: 100%;
  padding: 14px;
  border: 3px solid #E0E0E0;
  border-radius: 12px;
  font-family: inherit;
  font-size: 24px;
  letter-spacing: 12px;
  text-align: center;
  outline: none;
  margin-bottom: 8px;
}

.modal-box input:focus {
  border-color: var(--primary);
}

.modal-error {
  color: #E53935;
  font-size: 13px;
  min-height: 20px;
  margin-bottom: 16px;
}

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

.modal-cancel,
.modal-confirm {
  flex: 1;
  padding: 14px;
  border: none;
  border-radius: 12px;
  font-family: inherit;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.2s;
}

.modal-cancel {
  background: #F5F5F5;
  color: var(--text-light);
}

.modal-cancel:hover {
  background: #E0E0E0;
}

.modal-confirm {
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: white;
}

.modal-confirm:hover {
  transform: scale(1.02);
}

.modal-confirm.danger {
  background: linear-gradient(135deg, #EF5350, #E53935);
}

/* ========== Toast ========== */
.toast {
  position: fixed;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  padding: 14px 28px;
  background: linear-gradient(135deg, var(--text-dark), #1A3D00);
  color: white;
  border-radius: 30px;
  font-size: 15px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.3);
  opacity: 0;
  transition: all 0.3s ease;
  z-index: 999999;
}

.toast.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

/* ========== 响应式设计 ========== */

/* 大屏幕桌面 (> 1200px) - 默认样式 */

/* 中等桌面 (992px - 1200px) */
@media (max-width: 1200px) {
  .app {
    max-width: 100%;
    padding: 16px;
  }
}

/* 平板横向 (768px - 992px) */
@media (max-width: 992px) {
  .subject-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .subject-big-card {
    min-height: 180px;
    padding: 20px;
  }
  
  .home-grid {
    grid-template-columns: 1fr;
  }
  
  .checkin-card {
    grid-template-columns: 1fr 1.5fr 1fr;
    padding: 20px;
    gap: 16px;
  }
  
  .header-text h1 {
    font-size: 24px;
  }
  
  .header-logo {
    width: 200px;
  }

  .mascot {
    animation-name: mascotDriftTablet;
  }
  
  .header-left {
    min-height: 64px;
  }
}

/* 平板竖向 (576px - 768px) */
@media (max-width: 768px) {
  .app {
    padding: 12px;
  }
  
  .header {
    flex-direction: column;
    gap: 16px;
    padding: 16px;
  }
  
  .header-left {
    flex-direction: column;
    text-align: center;
    width: 100%;
    align-items: flex-start;
  }
  
  .header-badges {
    justify-content: center;
  }

  .mascot {
    animation-name: mascotDriftNarrow;
  }
  
  .header-left {
    min-height: 60px;
  }
  
  .nav-bar {
    flex-wrap: wrap;
    justify-content: center;
    padding: 12px;
    gap: 8px;
  }
  
  .nav-item {
    padding: 10px 16px;
    font-size: 14px;
  }
  
  .nav-icon {
    font-size: 16px;
  }
  
  .checkin-card {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 20px;
  }
  
  .checkin-left {
    order: 2;
  }
  
  .checkin-center {
    order: 1;
  }
  
  .checkin-right {
    order: 3;
  }
  
  .checkin-mascot {
    width: 80px;
    height: 80px;
  }
  
  .mascot-bubble {
    position: static;
    margin-top: 10px;
  }
  
  .mascot-bubble::before {
    display: none;
  }
  
  .subject-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  .subject-big-card {
    min-height: 140px;
    padding: 20px;
  }
  
  .subject-big-card h3 {
    font-size: 20px;
  }
  
  .subject-mascot {
    font-size: 40px;
    bottom: 10px;
    right: 15px;
  }
  
  .task-toolbar {
    flex-direction: column;
    align-items: stretch;
  }
  
  .task-input-row {
    flex-direction: column;
  }
  
  .quiz-header {
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
  }
  
  .quiz-footer {
    flex-direction: column;
    align-items: stretch;
  }
  
  .submit-btn {
    width: 100%;
  }
  
  /* 词典响应式 */
  .dict-search-box {
    width: 100%;
    max-width: 320px;
  }
  
  .dict-search-box input {
    width: 180px;
    height: 44px;
    padding: 0 16px;
    font-size: 16px;
  }
  
  .dict-search-btn {
    height: 44px;
    padding: 0 14px;
    font-size: 14px;
  }
  
  .dict-mode-switch {
    flex-direction: row;
    gap: 8px;
  }
  
  .dict-mode-btn {
    padding: 10px 14px;
    font-size: 13px;
  }
  
  .dict-word-header {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .dict-audio-btns {
    width: 100%;
    justify-content: center;
  }
  
  .wrong-list {
    grid-template-columns: 1fr;
  }
  
  .calendar-day {
    font-size: 12px;
  }
}

/* 手机大屏 (480px - 576px) */
@media (max-width: 576px) {
  body {
    font-size: 14px;
  }
  
  .app {
    padding: 10px;
  }
  
  .header {
    padding: 14px;
    border-radius: 16px;
  }
  
  .header-text h1 {
    font-size: 20px;
  }
  
  .header-logo {
    width: 170px;
  }
  
  .tagline {
    font-size: 12px;
  }
  
  .mascot {
    width: 50px;
    height: 50px;
  }
  
  .mini-badge {
    padding: 6px 12px;
  }
  
  .badge-num {
    font-size: 18px;
  }
  
  .nav-bar {
    padding: 10px;
    border-radius: 16px;
    gap: 6px;
  }
  
  .nav-item {
    padding: 8px 12px;
    font-size: 13px;
    border-radius: 12px;
  }
  
  .nav-item span:not(.nav-icon) {
    display: none;
  }
  
  .nav-icon {
    font-size: 20px;
  }
  
  .glass-card {
    padding: 16px;
    border-radius: 16px;
  }
  
  .card-header h3 {
    font-size: 16px;
  }
  
  .progress-ring-wrap {
    width: 120px;
    height: 120px;
  }
  
  .progress-num {
    font-size: 32px;
  }
  
  .checkin-btn {
    padding: 16px 30px;
    font-size: 16px;
  }
  
  .btn-frog {
    font-size: 28px;
  }
  
  .subject-emoji {
    font-size: 36px;
  }
  
  .subject-big-card h3 {
    font-size: 18px;
  }
  
  .subject-big-card p {
    font-size: 13px;
  }
  
  .page-header h2 {
    font-size: 20px;
  }
  
  .quiz-prompt {
    font-size: 15px;
    line-height: 1.6;
  }
  
  .quiz-option {
    padding: 12px 14px;
    font-size: 14px;
  }
  
  .quiz-input {
    font-size: 14px;
    padding: 10px 14px;
  }
  
  .reading-title {
    font-size: 18px;
  }
  
  .reading-content {
    font-size: 15px;
    line-height: 2;
  }
  
  .ai-loading {
    padding: 24px 16px 40px;
  }
  
  .ai-loading-mascot {
    width: 80px;
    height: 80px;
  }
  
  .ai-loading-text {
    font-size: 16px;
  }
  
  .ai-difficulty-level {
    font-size: 12px;
    margin-bottom: 12px;
  }
  
  .dict-mascot {
    font-size: 48px;
  }
  
  .dict-word {
    font-size: 26px;
  }
  
  .meaning-def {
    font-size: 14px;
  }
  
  .audio-btn {
    padding: 10px 14px;
    font-size: 13px;
  }
  
  .task-item {
    padding: 12px 14px;
    flex-wrap: wrap;
  }
  
  .task-actions {
    width: 100%;
    justify-content: flex-end;
    margin-top: 8px;
  }
  
  .modal-box {
    padding: 24px 20px;
    border-radius: 20px;
  }
  
  .toast {
    padding: 12px 20px;
    font-size: 14px;
    width: 90%;
    text-align: center;
  }
}

/* 手机小屏 (< 480px) */
@media (max-width: 480px) {
  .app {
    padding: 8px;
  }
  
  .header {
    padding: 12px;
    margin-bottom: 12px;
  }
  
  .header-text h1 {
    font-size: 18px;
  }
  
  .header-logo {
    width: 150px;
  }
  
  .header-badges {
    gap: 10px;
  }
  
  .mini-badge {
    padding: 5px 10px;
  }
  
  .badge-icon {
    font-size: 20px;
  }
  
  .badge-num {
    font-size: 16px;
  }
  
  .badge-label {
    font-size: 10px;
  }
  
  .nav-bar {
    margin-bottom: 16px;
  }
  
  .nav-item {
    padding: 10px;
    border-radius: 50%;
    width: 44px;
    height: 44px;
    justify-content: center;
  }
  
  .checkin-card {
    padding: 16px;
    border-radius: 20px;
  }
  
  .checkin-center h2 {
    font-size: 18px;
  }
  
  .progress-ring-wrap {
    width: 100px;
    height: 100px;
  }
  
  .progress-num {
    font-size: 28px;
  }
  
  .progress-unit {
    font-size: 14px;
  }
  
  .cheer-text {
    font-size: 14px;
    padding: 6px 12px;
  }
  
  .checkin-btn {
    padding: 14px 24px;
    font-size: 14px;
    border-radius: 20px;
  }
  
  .subject-big-card {
    min-height: 120px;
    padding: 16px;
    border-radius: 20px;
  }
  
  .subject-emoji {
    font-size: 32px;
    margin-bottom: 8px;
  }
  
  .subject-big-card h3 {
    font-size: 16px;
    margin-bottom: 4px;
  }
  
  .subject-big-card p {
    font-size: 12px;
    margin-bottom: 12px;
  }
  
  .subject-btn {
    padding: 8px 16px;
    font-size: 13px;
  }
  
  .subject-mascot {
    font-size: 36px;
  }
  
  .calendar-weekdays span {
    font-size: 11px;
    padding: 6px 0;
  }
  
  .calendar-day {
    font-size: 11px;
    border-radius: 8px;
  }
  
  .calendar-day.done::after {
    width: 18px;
    height: 18px;
  }
  
  .calendar-legend {
    gap: 12px;
    flex-wrap: wrap;
  }
  
  .calendar-legend span {
    font-size: 11px;
  }
  
  .quiz-panel, .task-panel, .wrong-panel, .settings-panel {
    padding: 16px;
  }
  
  .quiz-item {
    padding: 14px;
    margin-bottom: 12px;
    border-radius: 14px;
  }
  
  .quiz-prompt {
    font-size: 14px;
    margin-bottom: 12px;
  }
  
  .quiz-option {
    padding: 10px 12px;
    font-size: 13px;
    border-radius: 10px;
  }
  
  .option-radio {
    width: 18px;
    height: 18px;
  }
  
  .vertical-digit, .vertical-input {
    width: 32px;
    height: 32px;
    font-size: 18px;
  }
  
  .vertical-sign {
    width: 32px;
    font-size: 20px;
  }
  
  .reading-passage {
    padding: 16px;
    border-radius: 14px;
  }
  
  .reading-title {
    font-size: 16px;
  }
  
  .reading-content {
    font-size: 14px;
    line-height: 1.9;
  }
  
  /* 移动端答题优化 */
  .quiz-fixed-nav {
    padding: 10px 12px;
    gap: 8px;
  }
  
  .quiz-fixed-nav .quiz-nav-btn {
    padding: 10px 12px;
    font-size: 13px;
    min-height: 40px;
  }
  
  .quiz-progress-center {
    flex: 0 0 auto;
  }
  
  .quiz-ring-progress {
    width: 42px;
    height: 42px;
  }
  
  .quiz-ring-progress .ring-text {
    font-size: 10px;
  }
  
  .quiz-accuracy {
    font-size: 10px;
    padding: 1px 6px;
  }
  
  .quiz-nav-btn {
    padding: 10px 12px;
    font-size: 13px;
    flex: 1;
    min-width: 70px;
  }
  
  .quiz-blank-input {
    min-width: 50px;
    padding: 6px 10px;
    font-size: 15px;
  }
  
  .quiz-input {
    padding: 12px 14px;
    font-size: 15px;
  }
  
  .quiz-scene-icon {
    width: 30px;
    height: 30px;
    font-size: 16px;
  }
  
  .quiz-streak {
    top: 80px;
    right: 10px;
    padding: 6px 12px;
    font-size: 12px;
  }
  
  .quiz-feedback {
    padding: 10px 12px;
    font-size: 13px;
    gap: 6px;
  }
  
  .quiz-feedback .feedback-star,
  .quiz-feedback .wrongbook-hint {
    font-size: 11px;
    padding: 2px 6px;
  }
  
  .quiz-analysis-box {
    padding: 12px;
  }
  
  .analysis-header {
    font-size: 13px;
  }
  
  .analysis-content {
    font-size: 12px;
  }
  
  /* 完成面板移动端 */
  .finish-weakness {
    max-width: 100%;
    padding: 12px;
  }
  
  .weakness-title {
    font-size: 13px;
  }
  
  .weakness-item {
    padding: 6px 10px;
  }
  
  .weakness-cat {
    font-size: 12px;
  }
  
  .weakness-rate {
    font-size: 11px;
  }
  
  .finish-advice {
    font-size: 12px;
    padding: 8px 12px;
  }
  
  .finish-actions {
    flex-direction: column;
    width: 100%;
  }
  
  .finish-btn {
    width: 100%;
    padding: 12px 20px;
  }
  
  /* 错题回顾弹窗移动端 */
  .wrong-review-modal {
    padding: 10px;
  }
  
  .wrong-review-content {
    max-height: 85vh;
  }
  
  .wrong-review-header {
    padding: 12px 16px;
    font-size: 15px;
  }
  
  .wrong-review-list {
    padding: 12px 16px;
  }
  
  .wrong-review-item {
    padding: 12px;
  }
  
  .wrong-q {
    font-size: 13px;
  }
  
  .wrong-info {
    font-size: 12px;
    gap: 8px;
  }
  
  .wrong-analysis {
    font-size: 11px;
    padding: 6px 10px;
  }
  
  .dict-search-card {
    padding: 20px;
  }
  
  .dict-mascot {
    font-size: 40px;
    margin-bottom: 12px;
  }
  
  .dict-mode-btn {
    padding: 10px 16px;
    font-size: 14px;
  }
  
  .dict-word {
    font-size: 22px;
  }
  
  .dict-phonetic {
    font-size: 14px;
  }
  
  .audio-btn {
    padding: 8px 12px;
    font-size: 12px;
  }
  
  .meaning-group {
    padding: 12px;
  }
  
  .meaning-def {
    font-size: 13px;
  }
  
  .vocab-item {
    padding: 10px 12px;
  }
  
  .vocab-word {
    font-size: 15px;
  }
  
  .vocab-meaning {
    max-width: 180px;
    font-size: 12px;
  }
}

/* ========== 移动端答题页面专项适配 ========== */

/* 平板适配 (768px - 1024px) */
@media (max-width: 1024px) and (min-width: 601px) {
  .quiz-panel {
    padding: 20px;
  }
  
  .quiz-item {
    padding: 18px;
  }
  
  .quiz-prompt {
    font-size: 16px;
    line-height: 1.7;
  }
  
  .quiz-option {
    padding: 14px 16px;
    font-size: 15px;
    min-height: 48px;
  }
  
  .quiz-nav-btn {
    padding: 12px 18px;
    font-size: 15px;
    min-height: 44px;
  }
  
  .quiz-nav-btn.primary {
    min-width: 100px;
  }
  
  .quiz-progress-text {
    font-size: 14px;
  }
  
  .quiz-blank-input {
    min-width: 80px;
    padding: 8px 12px;
    font-size: 15px;
  }
}

/* 手机适配 (≤600px) */
@media (max-width: 600px) {
  .quiz-panel {
    padding: 14px;
    border-radius: 16px;
  }
  
  .quiz-header {
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
  }
  
  .quiz-title {
    font-size: 16px;
  }
  
  .refresh-btn {
    padding: 8px 14px;
    font-size: 13px;
    align-self: flex-end;
  }
  
  .quiz-item {
    padding: 14px;
    margin-bottom: 12px;
    border-radius: 14px;
  }
  
  .quiz-prompt {
    font-size: 15px;
    line-height: 1.7;
    margin-bottom: 14px;
  }
  
  /* 选项 - 增大触摸区域 */
  .quiz-option {
    padding: 14px 14px;
    font-size: 15px;
    min-height: 50px;
    border-radius: 12px;
    gap: 10px;
  }
  
  .quiz-option-multi {
    padding: 14px 14px;
    min-height: 50px;
  }
  
  .option-radio, .option-checkbox {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
  }
  
  /* 答题导航按钮 */
  .quiz-progress-nav {
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
  }
  
  .quiz-nav-btn {
    padding: 12px 14px;
    font-size: 14px;
    min-height: 44px;
    flex: 1;
    min-width: 80px;
    justify-content: center;
    display: flex;
    align-items: center;
  }
  
  .quiz-nav-btn.primary {
    min-width: 90px;
  }
  
  .quiz-progress-text {
    order: -1;
    width: 100%;
    text-align: center;
    font-size: 13px;
    margin-bottom: 4px;
  }
  
  .quiz-result-row {
    margin-top: 10px;
  }
  
  .quiz-result-hint {
    font-size: 14px;
  }
  
  /* 填空输入框 */
  .quiz-input {
    font-size: 15px;
    padding: 12px 14px;
    border-radius: 10px;
  }
  
  .quiz-blank-input {
    min-width: 60px;
    padding: 8px 10px;
    font-size: 15px;
    border-radius: 8px;
  }
  
  /* 竖式计算 */
  .vertical-digit, .vertical-input {
    width: 36px;
    height: 36px;
    font-size: 20px;
  }
  
  .vertical-sign {
    width: 36px;
    font-size: 22px;
  }
  
  .vertical-line {
    margin: 8px 0;
  }
  
  /* 朗读按钮 */
  .quiz-speak-btn {
    padding: 6px 10px;
    font-size: 12px;
  }
  
  /* 大字反馈 */
  .quiz-big-feedback {
    font-size: 20px;
    padding: 16px 24px;
  }
  
  .quiz-big-feedback .feedback-emoji {
    font-size: 28px;
  }
  
  /* 阅读理解 */
  .reading-passage {
    padding: 14px;
  }
  
  .reading-title {
    font-size: 16px;
  }
  
  .reading-content {
    font-size: 14px;
    line-height: 1.9;
  }
  
  /* 提交批改按钮 */
  .quiz-submit-btn {
    padding: 12px 20px;
    font-size: 15px;
    width: 100%;
    margin-top: 12px;
  }
  
  /* AI加载动画 */
  .ai-loading {
    padding: 20px 14px 36px;
  }
  
  .ai-loading-mascot {
    width: 70px;
    height: 70px;
  }
  
  .ai-loading-text {
    font-size: 15px;
  }
  
  .ai-loading-tips {
    font-size: 12px;
  }
}

/* 超小屏幕手机 (≤400px) */
@media (max-width: 400px) {
  .quiz-panel {
    padding: 12px;
  }
  
  .quiz-item {
    padding: 12px;
  }
  
  .quiz-prompt {
    font-size: 14px;
  }
  
  .quiz-option {
    padding: 12px;
    font-size: 14px;
    min-height: 46px;
  }
  
  .quiz-nav-btn {
    padding: 10px 12px;
    font-size: 13px;
    min-width: 70px;
  }
  
  .quiz-progress-text {
    font-size: 12px;
  }
  
  .vertical-digit, .vertical-input {
    width: 30px;
    height: 30px;
    font-size: 16px;
  }
  
  .vertical-sign {
    width: 30px;
    font-size: 18px;
  }
  
  .quiz-blank-input {
    min-width: 50px;
    padding: 6px 8px;
    font-size: 14px;
  }
}

/* 横屏模式适配 */
@media (max-height: 500px) and (orientation: landscape) {
  .quiz-panel {
    padding: 12px;
  }
  
  .quiz-item {
    padding: 12px;
    margin-bottom: 8px;
  }
  
  .quiz-prompt {
    font-size: 14px;
    margin-bottom: 10px;
  }
  
  .quiz-options {
    gap: 6px;
  }
  
  .quiz-option {
    padding: 10px 12px;
    min-height: 40px;
  }
  
  .quiz-progress-nav {
    margin-top: 10px;
    gap: 8px;
  }
  
  .quiz-nav-btn {
    padding: 8px 12px;
    min-height: 36px;
  }
}

/* 触摸设备优化 */
@media (hover: none) and (pointer: coarse) {
  .quiz-option {
    /* 移除hover效果，增加触摸反馈 */
    transition: transform 0.1s ease, background 0.1s ease;
  }
  
  .quiz-option:active {
    transform: scale(0.98);
    background: #E8F5E9;
  }
  
  .quiz-nav-btn:active:not(:disabled) {
    transform: scale(0.96);
  }
  
  .refresh-btn:active {
    transform: scale(0.95);
  }
}

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

::-webkit-scrollbar-track {
  background: #F5F5F5;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg, #A5D6A7, #81C784);
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(135deg, #81C784, #66BB6A);
}

/* ========== 英文词典 ========== */
.dict-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* 搜索卡片 */
.dict-search-card {
  text-align: center;
  padding: 28px;
  background: linear-gradient(135deg, #FFF8E1, #FFE0B2);
  border: 2px solid #FFB74D;
  border-radius: 22px;
}

.dict-mascot {
  font-size: 60px;
  margin-bottom: 16px;
  animation: mascotWiggle 3s ease-in-out infinite;
}

/* 模式切换按钮 */
.dict-mode-switch {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 20px;
}

.dict-mode-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border: 2px solid #E0E0E0;
  border-radius: 18px;
  background: #FFFDF7;
  font-family: inherit;
  font-size: 14px;
  color: #6D4C41;
  cursor: pointer;
  transition: all 0.25s;
}

.dict-mode-btn:hover {
  border-color: #FFCC80;
  background: #FFF3E0;
}

.dict-mode-btn.active {
  border-color: #66BB6A;
  background: linear-gradient(135deg, #E8F5E9, #C8E6C9);
  color: #2E7D32;
  font-weight: 700;
}

.dict-search-box {
  display: inline-flex;
  gap: 0;
  margin: 0 auto 12px;
  align-items: stretch;
  background: #FFFDF7;
  border-radius: 18px;
  border: 2px solid #A5D6A7;
  overflow: hidden;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.dict-search-box:focus-within {
  border-color: #66BB6A;
  box-shadow: 0 0 0 4px rgba(102, 187, 106, 0.18);
}

.dict-search-box input {
  width: 220px;
  height: 46px;
  padding: 0 18px;
  border: none;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  outline: none;
  background: transparent;
  color: #5D4037;
  box-sizing: border-box;
}

.dict-search-box input::placeholder {
  color: #A1887F;
}

.dict-search-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 46px;
  padding: 0 18px;
  border: none;
  border-left: 2px solid rgba(102, 187, 106, 0.4);
  background: linear-gradient(135deg, #E8F5E9, #C8E6C9);
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  color: #2E7D32;
  cursor: pointer;
  transition: background 0.2s;
  box-sizing: border-box;
  white-space: nowrap;
}

.dict-search-btn:hover {
  background: linear-gradient(135deg, #AED581, #81C784);
  color: #1B5E20;
}

.dict-search-btn:active {
  background: linear-gradient(135deg, #81C784, #66BB6A);
}

.dict-hint {
  font-size: 13px;
  color: #8D6E63;
}

/* 查询结果卡片 */
.dict-result-card {
  padding: 24px;
  background: #FFFDF7;
  border: 2px solid #FFE0B2;
  border-radius: 22px;
  animation: slideUp 0.35s ease;
}

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

.dict-word-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 2px dashed rgba(255, 183, 77, 0.5);
}

.dict-word-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.dict-word {
  font-size: 32px;
  color: var(--text-dark);
  margin: 0;
}

.dict-phonetic {
  font-size: 16px;
  color: #7986CB;
  font-style: italic;
}

.dict-audio-btns {
  display: flex;
  gap: 12px;
}

.audio-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 18px;
  border: none;
  border-radius: 16px;
  font-family: inherit;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s;
}

.audio-btn.us {
  background: linear-gradient(135deg, #E3F2FD, #BBDEFB);
  color: #1565C0;
}

.audio-btn.uk {
  background: linear-gradient(135deg, #FFEBEE, #FFCDD2);
  color: #C62828;
}

.audio-btn:hover {
  transform: scale(1.08);
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.audio-btn:active {
  transform: scale(0.95);
}

.audio-btn.playing {
  animation: pulse 0.5s ease infinite;
}

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

.audio-icon {
  font-size: 20px;
}

.audio-label {
  font-weight: bold;
}

.flag {
  font-size: 18px;
}

/* 词义区域 */
.dict-meanings {
  margin-bottom: 20px;
}

.meaning-group {
  margin-bottom: 16px;
  padding: 16px;
  background: rgba(255,255,255,0.7);
  border-radius: 16px;
  border-left: 5px solid var(--primary);
}

.meaning-pos {
  display: inline-block;
  padding: 4px 12px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: white;
  border-radius: 10px;
  font-size: 13px;
  margin-bottom: 10px;
}

.meaning-def {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 16px;
  color: var(--text-dark);
  line-height: 1.8;
  margin-bottom: 10px;
}

.meaning-def.zh {
  font-size: 17px;
  color: #2E7D32;
  font-weight: 600;
}

.meaning-def.en {
  font-size: 15px;
  color: #555;
  margin-bottom: 14px;
  font-style: italic;
}

.zh-label, .en-label {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 8px;
  font-size: 12px;
  margin-right: 10px;
  font-weight: 600;
  font-style: normal;
}

.zh-label {
  background: linear-gradient(135deg, #E8F5E9, #C8E6C9);
  color: #2E7D32;
}

.en-label {
  background: linear-gradient(135deg, #E3F2FD, #BBDEFB);
  color: #1565C0;
}

/* 常用释义样式 - 突出显示 */
.meaning-group.common-meaning {
  background: linear-gradient(135deg, #FFF8E1, #FFECB3);
  border-left: 5px solid #FF9800;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(255, 152, 0, 0.15);
}

.meaning-pos.common-pos {
  background: linear-gradient(135deg, #FF9800, #F57C00);
  font-size: 15px;
  padding: 6px 14px;
}

.meaning-def.common-def {
  font-size: 20px;
  font-weight: 700;
  color: #E65100;
}

.example-label {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 11px;
  margin-right: 8px;
  background: linear-gradient(135deg, #FFF3E0, #FFE0B2);
  color: #E65100;
  font-weight: 600;
}

.meaning-example {
  font-size: 14px;
  color: #7986CB;
  font-style: italic;
  padding-left: 16px;
  border-left: 3px solid #C5CAE9;
}

.meaning-example::before {
  content: '📝 例句: ';
  font-style: normal;
}

.dict-actions {
  text-align: center;
}

.add-vocab-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 32px;
  border: none;
  border-radius: 20px;
  background: linear-gradient(135deg, #FFD93D, #FFA726);
  font-family: inherit;
  font-size: 16px;
  color: #5D4037;
  cursor: pointer;
  transition: all 0.3s;
  box-shadow: 0 6px 20px rgba(255, 167, 38, 0.35);
}

.add-vocab-btn:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 10px 30px rgba(255, 167, 38, 0.45);
}

.add-vocab-btn:disabled {
  background: #E0E0E0;
  color: #9E9E9E;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* 错误提示卡片 */
.dict-error-card {
  text-align: center;
  padding: 40px;
  background: #FFFDF7;
  border: 2px dashed #FFCC80;
  border-radius: 22px;
  animation: shake 0.5s ease;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-5px); }
  40%, 80% { transform: translateX(5px); }
}

.error-emoji {
  font-size: 52px;
  margin-bottom: 16px;
}

.error-text {
  font-size: 18px;
  color: #E6A157;
  margin-bottom: 8px;
}

.error-hint {
  font-size: 14px;
  color: #A1887F;
}

/* 词汇库卡片 */
.vocab-card {
  background: linear-gradient(135deg, rgba(255,255,255,0.95), rgba(255,243,224,0.9));
  border: 3px solid rgba(255, 167, 38, 0.2);
}

.vocab-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 3px dashed rgba(255, 167, 38, 0.3);
}

.vocab-header h3 {
  font-size: 18px;
  color: var(--text-dark);
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.vocab-icon {
  font-size: 24px;
}

.vocab-count {
  font-size: 14px;
  color: #FFA726;
  padding: 6px 14px;
  background: linear-gradient(135deg, #FFF8E1, #FFECB3);
  border-radius: 20px;
}

.vocab-list {
  max-height: 300px;
  overflow-y: auto;
}

/* 公共词典：按 module/unit 分组展示 */
.vocab-module {
  margin-bottom: 16px;
  padding-bottom: 6px;
  border-bottom: 2px dashed rgba(255, 167, 38, 0.2);
}

.vocab-module-title {
  font-size: 14px;
  font-weight: bold;
  color: #EF6C00;
  margin: 8px 0 6px;
}

.vocab-unit {
  margin-bottom: 12px;
}

.vocab-unit-title {
  font-size: 13px;
  color: #8D6E63;
  margin: 6px 0;
}

.vocab-unit-list .vocab-item {
  margin-bottom: 8px;
}

.empty-vocab {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-light);
}

.empty-emoji {
  font-size: 48px;
  display: block;
  margin-bottom: 12px;
}

.empty-vocab p {
  margin: 4px 0;
}

.empty-hint {
  font-size: 13px;
  color: #BDBDBD;
}

.vocab-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  margin-bottom: 10px;
  background: white;
  border-radius: 16px;
  border-left: 5px solid #FFB74D;
  transition: all 0.2s;
}

.vocab-item:hover {
  transform: translateX(5px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.vocab-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.vocab-word {
  font-size: 17px;
  font-weight: bold;
  color: var(--text-dark);
}

.vocab-meaning {
  font-size: 13px;
  color: var(--text-light);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 300px;
}

.vocab-item-btns {
  display: flex;
  gap: 8px;
}

.vocab-play-btn {
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: linear-gradient(135deg, #E3F2FD, #BBDEFB);
  font-size: 16px;
  cursor: pointer;
  transition: all 0.2s;
}

.vocab-play-btn:hover {
  transform: scale(1.1);
  background: linear-gradient(135deg, #BBDEFB, #90CAF9);
}

.vocab-play-btn.playing {
  animation: pulse 0.5s ease infinite;
  background: linear-gradient(135deg, #42A5F5, #1976D2);
  color: white;
}

.vocab-meaning-btn {
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: linear-gradient(135deg, #FFF3E0, #FFE0B2);
  font-size: 16px;
  cursor: pointer;
  transition: all 0.2s;
}

.vocab-meaning-btn:hover {
  transform: scale(1.1);
  background: linear-gradient(135deg, #FFB74D, #FB8C00);
  color: white;
}

.vocab-meaning-btn.loading {
  opacity: 0.6;
  cursor: default;
}

.vocab-delete-btn {
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: linear-gradient(135deg, #FFEBEE, #FFCDD2);
  font-size: 16px;
  cursor: pointer;
  transition: all 0.2s;
}

.vocab-delete-btn:hover {
  transform: scale(1.1);
  background: linear-gradient(135deg, #EF5350, #E53935);
  color: white;
}

/* 词汇库头部操作区 */
.vocab-header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.vocab-add-folder-btn {
  padding: 8px 14px;
  border: none;
  border-radius: 16px;
  background: linear-gradient(135deg, #E8F5E9, #C8E6C9);
  font-family: inherit;
  font-size: 13px;
  color: #2E7D32;
  cursor: pointer;
  transition: all 0.2s;
}

.vocab-add-folder-btn:hover {
  background: linear-gradient(135deg, #4CAF50, #43A047);
  color: white;
}

/* 词库文件夹列表 */
.vocab-folders {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 2px dashed rgba(255, 167, 38, 0.2);
}

.vocab-folder-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.vocab-folder-group-title {
  font-size: 14px;
  font-weight: 700;
  color: #2f6b3a;
  padding: 0 4px;
}

.vocab-folder-group-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 12px;
  background: rgba(125, 200, 78, 0.12);
  border: 2px dashed rgba(125, 200, 78, 0.35);
  color: #2f6b3a;
  font-weight: 700;
  cursor: pointer;
}

.vocab-folder-group-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.vocab-folder-group-list.collapsed {
  display: none;
}

.vocab-folder-actions {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 6px;
}

.folder-move-btn {
  border: none;
  background: rgba(125, 200, 78, 0.18);
  color: #2f6b3a;
  border-radius: 8px;
  padding: 2px 6px;
  cursor: pointer;
  font-size: 12px;
}

.folder-move-btn:hover {
  background: rgba(125, 200, 78, 0.3);
}

.vocab-folder {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  background: white;
  border: 2px solid #E0E0E0;
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.2s;
  user-select: none;
}

.vocab-folder:hover {
  border-color: #FFB74D;
  background: #FFF8E1;
}

.vocab-folder:active {
  transform: scale(0.98);
}

.vocab-folder.active {
  border-color: #FF9800;
  background: linear-gradient(135deg, #FFF3E0, #FFE0B2);
  box-shadow: 0 2px 8px rgba(255, 152, 0, 0.2);
}

.vocab-folder-icon {
  font-size: 18px;
}

.vocab-folder-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-dark);
}

.vocab-folder-count {
  font-size: 12px;
  color: white;
  background: #FFB74D;
  padding: 2px 8px;
  border-radius: 10px;
  min-width: 20px;
  text-align: center;
}

.vocab-folder.active .vocab-folder-count {
  background: #FF9800;
}

.folder-edit-btn,
.folder-delete-btn {
  width: 26px;
  height: 26px;
  border: none;
  border-radius: 8px;
  background: transparent;
  font-size: 12px;
  cursor: pointer;
  opacity: 0;
  transition: all 0.2s;
  margin-left: 2px;
}

.vocab-folder:hover .folder-edit-btn,
.vocab-folder:hover .folder-delete-btn {
  opacity: 1;
}

.folder-edit-btn:hover {
  background: #E3F2FD;
}

.folder-delete-btn:hover {
  background: #FFEBEE;
}

/* 词汇列表头部 */
.vocab-list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  margin-bottom: 8px;
}

.current-folder-name {
  font-size: 15px;
  font-weight: 600;
  color: #F57C00;
}

.current-folder-count {
  font-size: 13px;
  color: #FF9800;
  background: #FFF3E0;
  padding: 4px 10px;
  border-radius: 10px;
}

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

.vocab-batch-meaning-btn {
  padding: 6px 12px;
  border: none;
  border-radius: 12px;
  background: linear-gradient(135deg, #FFF3E0, #FFE0B2);
  font-family: inherit;
  font-size: 12px;
  color: #EF6C00;
  cursor: pointer;
  transition: all 0.2s;
}

.vocab-batch-meaning-btn:hover {
  background: linear-gradient(135deg, #FFB74D, #FB8C00);
  color: white;
}

.vocab-batch-meaning-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.vocab-add-word-btn {
  padding: 6px 12px;
  border: none;
  border-radius: 12px;
  background: linear-gradient(135deg, #E3F2FD, #BBDEFB);
  font-family: inherit;
  font-size: 12px;
  color: #1976D2;
  cursor: pointer;
  transition: all 0.2s;
}

.vocab-add-word-btn:hover {
  background: linear-gradient(135deg, #42A5F5, #1976D2);
  color: white;
}

/* 词库选择弹窗 */
.vocab-folder-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 11000;
  animation: fadeIn 0.2s ease;
}

.vocab-folder-modal-overlay.hidden {
  display: none;
}

.vocab-folder-modal {
  background: white;
  border-radius: 20px;
  width: 90%;
  max-width: 400px;
  max-height: 80vh;
  overflow: hidden;
  animation: slideUp 0.3s ease;
}

.vocab-folder-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  background: linear-gradient(135deg, #FFF3E0, #FFE0B2);
  border-bottom: 2px solid #FFB74D;
}

.vocab-folder-modal-header h4 {
  margin: 0;
  font-size: 17px;
  color: var(--text-dark);
}

.modal-close-btn {
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: rgba(0,0,0,0.1);
  font-size: 16px;
  cursor: pointer;
  transition: all 0.2s;
}

.modal-close-btn:hover {
  background: rgba(0,0,0,0.2);
}

.vocab-folder-modal-body {
  padding: 16px 20px;
  max-height: 300px;
  overflow-y: auto;
}

.vocab-folder-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 20px;
  border-top: 1px solid #E0E0E0;
}

/* 选择词库列表 */
.folder-select-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  margin-bottom: 8px;
  background: #FAFAFA;
  border: 2px solid transparent;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s;
}

.folder-select-item:hover {
  background: #FFF3E0;
  border-color: #FFB74D;
}

.folder-select-icon {
  font-size: 24px;
}

.folder-select-name {
  flex: 1;
  font-size: 15px;
  font-weight: 500;
  color: var(--text-dark);
}

.folder-select-count {
  font-size: 13px;
  color: var(--text-light);
}

/* 创建词库表单 */
.folder-form-group {
  margin-bottom: 16px;
}

.folder-form-group label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-dark);
  margin-bottom: 8px;
}

.folder-form-group input {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid #E0E0E0;
  border-radius: 12px;
  font-family: inherit;
  font-size: 15px;
  outline: none;
  transition: border-color 0.2s;
  box-sizing: border-box;
}

.folder-form-group input:focus {
  border-color: #FFB74D;
}

.folder-icon-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.icon-option {
  width: 44px;
  height: 44px;
  border: 2px solid #E0E0E0;
  border-radius: 12px;
  background: white;
  font-size: 22px;
  cursor: pointer;
  transition: all 0.2s;
}

.icon-option:hover {
  border-color: #FFB74D;
  background: #FFF8E1;
}

.icon-option.active {
  border-color: #FF9800;
  background: #FFF3E0;
  box-shadow: 0 2px 8px rgba(255, 152, 0, 0.3);
}

/* 弹窗按钮 */
.create-folder-btn {
  padding: 10px 20px;
  border: none;
  border-radius: 12px;
  background: linear-gradient(135deg, #E8F5E9, #C8E6C9);
  font-family: inherit;
  font-size: 14px;
  color: #2E7D32;
  cursor: pointer;
  transition: all 0.2s;
}

.create-folder-btn:hover {
  background: linear-gradient(135deg, #4CAF50, #43A047);
  color: white;
}

.cancel-btn {
  padding: 10px 20px;
  border: 2px solid #E0E0E0;
  border-radius: 12px;
  background: white;
  font-family: inherit;
  font-size: 14px;
  color: var(--text-light);
  cursor: pointer;
  transition: all 0.2s;
}

.cancel-btn:hover {
  background: #F5F5F5;
}

.confirm-btn {
  padding: 10px 24px;
  border: none;
  border-radius: 12px;
  background: linear-gradient(135deg, #FF9800, #F57C00);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: white;
  cursor: pointer;
  transition: all 0.2s;
}

.confirm-btn:hover {
  background: linear-gradient(135deg, #F57C00, #E65100);
  transform: translateY(-1px);
}

/* 移动端适配 */
@media (max-width: 600px) {
  .vocab-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  
  .vocab-header-actions {
    width: 100%;
    justify-content: space-between;
  }
  
  .vocab-folders {
    gap: 8px;
  }
  
  .vocab-folder {
    padding: 8px 12px;
  }
  
  .vocab-folder-name {
    font-size: 13px;
  }
  
  .folder-edit-btn,
  .folder-delete-btn {
    opacity: 1;
  }
  
  .vocab-list-header {
    flex-direction: row;
    align-items: center;
  }
}

.vocab-actions {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 2px dashed rgba(255, 167, 38, 0.3);
  text-align: center;
}

.clear-vocab-btn {
  padding: 10px 20px;
  border: none;
  border-radius: 12px;
  background: linear-gradient(135deg, #FFEBEE, #FFCDD2);
  font-family: inherit;
  font-size: 14px;
  color: #C62828;
  cursor: pointer;
  transition: all 0.2s;
}

.clear-vocab-btn:hover {
  background: linear-gradient(135deg, #EF5350, #E53935);
  color: white;
}

/* 加载动画 */
.dict-loading {
  text-align: center;
  padding: 40px;
}

.loading-spinner {
  font-size: 48px;
  animation: spin 1s linear infinite;
}

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

.loading-text {
  margin-top: 16px;
  font-size: 16px;
  color: var(--text-light);
}

/* ========== 单词默写功能样式 ========== */

/* 默写按钮 */
.vocab-dictation-btn {
  padding: 8px 14px;
  border: none;
  border-radius: 16px;
  background: linear-gradient(135deg, #E3F2FD, #BBDEFB);
  font-family: inherit;
  font-size: 13px;
  color: #1976D2;
  cursor: pointer;
  transition: all 0.2s;
}

.vocab-dictation-btn:hover {
  background: linear-gradient(135deg, #2196F3, #1976D2);
  color: white;
  transform: translateY(-1px);
}

/* 默写弹窗 */
.dictation-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  animation: fadeIn 0.2s ease;
}

.dictation-modal-overlay.hidden {
  display: none;
}

.dictation-modal {
  background: #fffaf3;
  border-radius: 20px;
  width: 90%;
  max-width: 480px;
  max-height: 85vh;
  overflow: hidden;
  animation: slideUp 0.3s ease;
  display: flex;
  flex-direction: column;
}

.dictation-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  background: linear-gradient(135deg, #FFF3E0, #FFE0B2);
  border-bottom: 2px solid #FFB74D;
}

.dictation-modal-header h4 {
  margin: 0;
  font-size: 18px;
  color: var(--text-dark);
}

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

/* 默写设置区域 */
.dictation-setup {
  padding: 0;
}

.dictation-form-row-compact {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}

.dictation-form-row-compact .dictation-form-group {
  flex: 1;
}

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

.dictation-form-group label {
  display: block;
  font-size: 18px;
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: 12px;
}

.dictation-select {
  width: 100%;
  padding: 20px 24px;
  border: 2px solid #FFCC80;
  border-radius: 16px;
  font-family: inherit;
  font-size: 20px;
  min-height: 70px;
  -webkit-appearance: none;
  appearance: none;
  background: #FFF7E6 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23F57C00' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") no-repeat right 16px center;
  background-size: 24px;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 6px 16px rgba(245, 124, 0, 0.12);
}

.dictation-select:focus {
  border-color: #F57C00;
  outline: none;
  box-shadow: 0 8px 20px rgba(245, 124, 0, 0.18);
}

.dictation-select.native-hidden {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  height: 0;
  width: 0;
}

.dictation-folder-trigger {
  width: 100%;
  padding: 18px 20px;
  border: 2px solid #FFCC80;
  border-radius: 16px;
  background: #FFF7E6;
  font-family: inherit;
  font-size: 16px;
  color: #5f4b32;
  cursor: pointer;
  text-align: left;
  box-shadow: 0 6px 16px rgba(245, 124, 0, 0.12);
}

.dictation-folder-trigger::after {
  content: "▾";
  float: right;
  color: #F57C00;
}

.dictation-folder-modal .folder-select-item {
  border: 1px solid #FFE0B2;
  background: #FFF7E6;
}

.dictation-number-input {
  display: flex;
  align-items: center;
  gap: 12px;
}

.dictation-number-input input {
  flex: 1;
  padding: 14px;
  border: 3px solid #E0E0E0;
  border-radius: 16px;
  font-family: inherit;
  font-size: 22px;
  font-weight: bold;
  text-align: center;
  min-width: 70px;
}

.dictation-number-input input:focus {
  border-color: #FFB74D;
  outline: none;
}

/* 加减按钮 - 更大更易点击 */
.num-btn {
  width: 52px;
  height: 52px;
  border: none;
  border-radius: 50%;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.num-btn:active {
  transform: scale(0.9);
}

.num-btn.minus {
  background: linear-gradient(135deg, #FFEBEE, #FFCDD2);
  color: #E53935;
  box-shadow: 0 3px 10px rgba(229, 57, 53, 0.2);
}

.num-btn.plus {
  background: linear-gradient(135deg, #E8F5E9, #C8E6C9);
  color: #43A047;
  box-shadow: 0 3px 10px rgba(67, 160, 71, 0.2);
}

.num-btn:hover {
  transform: scale(1.1);
}

.num-btn:active {
  transform: scale(0.95);
}

/* 选项复选框 */
.dictation-options {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 28px;
}

.dictation-checkbox {
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  font-size: 18px;
  color: var(--text-dark);
  padding: 12px 16px;
  background: #F5F5F5;
  border-radius: 14px;
  transition: all 0.2s;
}

.dictation-checkbox:active {
  background: #E0E0E0;
}

.dictation-checkbox input {
  display: none;
}

.checkbox-mark {
  width: 32px;
  height: 32px;
  border: 3px solid #BDBDBD;
  border-radius: 10px;
  position: relative;
  transition: all 0.2s;
  flex-shrink: 0;
}

.dictation-checkbox input:checked + .checkbox-mark {
  background: linear-gradient(135deg, #FFB74D, #F57C00);
  border-color: #F57C00;
}

.dictation-checkbox input:checked + .checkbox-mark::after {
  content: '✓';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 20px;
  font-weight: bold;
}

/* 开始按钮 - 大而醒目 */
.dictation-start-btn {
  width: 100%;
  padding: 22px 32px;
  border: none;
  border-radius: 20px;
  background: linear-gradient(135deg, #FFB74D, #F57C00);
  font-family: inherit;
  font-size: 22px;
  font-weight: 700;
  color: white;
  cursor: pointer;
  transition: all 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  box-shadow: 0 6px 20px rgba(76, 175, 80, 0.4);
}

.dictation-start-btn:hover {
  background: linear-gradient(135deg, #F9A825, #F57C00);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(245, 124, 0, 0.35);
}

.dictation-start-btn:active {
  transform: translateY(0) scale(0.98);
}

.dictation-start-btn span {
  font-size: 28px;
}

/* 默写进行中 */
.dictation-playing {
  text-align: center;
  padding: 20px;
}

.dictation-progress-wrap {
  margin-bottom: 30px;
}

.dictation-current-num {
  font-size: 18px;
  font-weight: 600;
  color: #1976D2;
  margin-bottom: 12px;
}

.dictation-progress-bar {
  height: 10px;
  background: #E3F2FD;
  border-radius: 5px;
  overflow: hidden;
}

.dictation-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #2196F3, #1976D2);
  border-radius: 5px;
  transition: width 0.3s ease;
  width: 0%;
}

/* 默写进行中占位 */
.dictation-playing-placeholder {
  text-align: center;
  padding: 40px 20px;
  color: #888;
}
.dictation-playing-placeholder p { margin: 8px 0; }
.dictation-playing-placeholder .hint { font-size: 13px; color: #aaa; }

/* 隐藏的状态元素 */
.dictation-speaker-status {
  display: none;
}

/* ===== 默写浮层 ===== */
.dictation-fullscreen.hidden {
  display: none !important;
}

.dictation-fullscreen {
  position: fixed;
  right: 32px;
  bottom: 120px;
  z-index: 11000;
  pointer-events: none;
}

.dictation-fs-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: auto;
}

/* 主体区域 */
.dictation-fs-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

/* 💬 气泡样式 */
.dictation-fs-bubble {
  background: #fff7fb;
  border: 2px solid #f9a8d4;
  border-radius: 22px;
  padding: 14px 18px;
  box-shadow: 0 10px 24px rgba(219, 39, 119, 0.18);
  position: relative;
  width: 260px;
  margin-bottom: 14px;
  animation: bubbleAppear 0.3s ease-out;
}

/* 气泡小三角 */
.dictation-fs-bubble::after {
  content: '';
  position: absolute;
  bottom: -12px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-top: 12px solid #fff7fb;
  filter: drop-shadow(0 2px 2px rgba(219,39,119,0.12));
}

@keyframes bubbleAppear {
  from { opacity: 0; transform: translateY(10px) scale(0.9); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* 气泡头部 */
.fs-bubble-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: #be185d;
  margin-bottom: 6px;
}

.fs-bubble-progress {
  background: #fde7f3;
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 600;
}

.fs-bubble-countdown {
  background: #fce7f3;
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 600;
}

.fs-bubble-word {
  font-size: 18px;
  font-weight: 700;
  color: #111827;
}

.fs-bubble-meaning {
  margin-top: 6px;
  font-size: 13px;
  color: #374151;
  line-height: 1.4;
  max-height: 72px;
  overflow: auto;
}

/* 小呱呱 */
.dictation-fs-frog {
  display: none;
}

.dictation-fs-frog img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.18));
  transition: transform 0.3s ease;
}

/* 说话动画 */
.dictation-fs-frog.speaking img {
  animation: frogSpeak 0.35s ease-in-out infinite;
}

@keyframes frogSpeak {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-18px) scale(1.08); }
}

/* 小按钮 */
.dictation-fs-btns {
  display: flex;
  gap: 10px;
  margin-top: 10px;
  justify-content: center;
}

.fs-btn {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: none;
  font-size: 20px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

.fs-btn:active {
  transform: scale(0.9);
}

.fs-btn.replay {
  background: linear-gradient(135deg, #86efac, #4ade80);
  color: white;
}

.fs-btn.pause {
  background: linear-gradient(135deg, #fdba74, #f97316);
  color: white;
}

.fs-btn.stop {
  background: linear-gradient(135deg, #fca5a5, #f87171);
  color: white;
}

/* 默写时隐藏右下角的浮动小青蛙 */
.floating-frog.dictation-hidden {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

/* 倒计时显示 */
.dictation-countdown {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 16px 0;
  padding: 12px 24px;
  background: linear-gradient(135deg, #FFF3E0, #FFE0B2);
  border-radius: 30px;
  border: 2px solid #FFB74D;
  animation: countdownPulse 1s ease-in-out infinite;
}

.dictation-countdown.active {
  display: inline-flex;
}

@keyframes countdownPulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 167, 38, 0.4); }
  50% { transform: scale(1.02); box-shadow: 0 0 0 8px rgba(255, 167, 38, 0); }
}

.countdown-label {
  font-size: 14px;
  color: #F57C00;
}

.countdown-num {
  font-size: 28px;
  font-weight: bold;
  color: #E65100;
  min-width: 36px;
  text-align: center;
  animation: countdownBounce 1s ease-in-out infinite;
}

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

.countdown-unit {
  font-size: 14px;
  color: #F57C00;
}

.dictation-hint {
  font-size: 16px;
  color: var(--text-dark);
}

.hint-label {
  color: var(--text-light);
}

.hint-text {
  font-weight: 600;
  color: #1976D2;
}

/* 控制按钮 */
.dictation-controls {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.dictation-ctrl-btn {
  padding: 12px 20px;
  border: none;
  border-radius: 14px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 6px;
}

.dictation-ctrl-btn.replay {
  background: linear-gradient(135deg, #E3F2FD, #BBDEFB);
  color: #1976D2;
}

.dictation-ctrl-btn.pause {
  background: linear-gradient(135deg, #FFF3E0, #FFE0B2);
  color: #F57C00;
}

.dictation-ctrl-btn.stop {
  background: linear-gradient(135deg, #FFEBEE, #FFCDD2);
  color: #E53935;
}

.dictation-ctrl-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* 默写结果 */
.dictation-result {
  padding: 20px;
}

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

.dictation-result-header .result-emoji {
  font-size: 56px;
  display: block;
  margin-bottom: 12px;
  animation: bounceIn 0.5s ease;
}

@keyframes bounceIn {
  0% { transform: scale(0); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

.dictation-result-header h4 {
  font-size: 22px;
  color: var(--text-dark);
  margin: 0 0 8px 0;
}

.dictation-result-header p {
  font-size: 14px;
  color: var(--text-light);
  margin: 0;
}

.dictation-answer-list {
  max-height: 350px;
  overflow-y: auto;
  margin-bottom: 20px;
  padding: 4px;
}

.dictation-answer-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: white;
  border-radius: 14px;
  margin-bottom: 10px;
  border-left: 4px solid #2196F3;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.answer-num {
  width: 32px;
  height: 32px;
  background: linear-gradient(135deg, #2196F3, #1976D2);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  flex-shrink: 0;
}

.answer-content {
  flex: 1;
  min-width: 0;
}

.answer-word {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: 2px;
}

.answer-phonetic {
  font-size: 13px;
  color: #9E9E9E;
  font-style: italic;
}

.answer-meaning {
  font-size: 13px;
  color: var(--text-light);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.answer-play-btn {
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: linear-gradient(135deg, #E3F2FD, #BBDEFB);
  font-size: 18px;
  cursor: pointer;
  transition: all 0.2s;
  flex-shrink: 0;
}

.answer-play-btn:hover {
  transform: scale(1.1);
  background: linear-gradient(135deg, #BBDEFB, #90CAF9);
}

.answer-play-btn.playing {
  animation: pulse 0.5s ease infinite;
  background: linear-gradient(135deg, #2196F3, #1976D2);
}

/* 结果操作按钮 */
.dictation-result-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
}

.dictation-again-btn,
.dictation-back-btn {
  padding: 14px 24px;
  border: none;
  border-radius: 14px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 8px;
}

.dictation-again-btn {
  background: linear-gradient(135deg, #2196F3, #1976D2);
  color: white;
}

.dictation-again-btn:hover {
  background: linear-gradient(135deg, #1976D2, #1565C0);
  transform: translateY(-2px);
}

.dictation-back-btn {
  background: linear-gradient(135deg, #F5F5F5, #E0E0E0);
  color: var(--text-dark);
}

.dictation-back-btn:hover {
  background: linear-gradient(135deg, #E0E0E0, #BDBDBD);
}

/* 隐藏元素 */
.dictation-playing.hidden,
.dictation-result.hidden,
.dictation-setup.hidden {
  display: none;
}

/* 移动端适配 */
@media (max-width: 600px) {
  .dictation-modal {
    width: 94%;
    max-height: 92vh;
    border-radius: 16px;
  }
  
  .dictation-modal-header {
    padding: 12px 16px;
  }
  
  .dictation-modal-body {
    padding: 16px;
  }
  
  .dictation-form-row-compact {
    flex-direction: column;
    gap: 14px;
  }
  
  .dictation-form-row {
    flex-direction: column;
  }
  
  .dictation-form-group {
    min-width: 100%;
  }
  
  .dictation-options {
    flex-direction: column;
    gap: 12px;
  }
  
  .dictation-controls {
    flex-direction: column;
  }
  
  .dictation-ctrl-btn {
    width: 100%;
    justify-content: center;
  }
  
  .dictation-result-actions {
    flex-direction: column;
  }
  
  .dictation-again-btn,
  .dictation-back-btn {
    width: 100%;
    justify-content: center;
  }
  
  .dictation-form-group label {
    font-size: 16px;
    margin-bottom: 8px;
  }
  
  .dictation-folder-trigger,
  .dictation-select {
    padding: 14px 16px;
    min-height: 56px;
    font-size: 15px;
  }
  
  .dictation-number-input {
    gap: 8px;
  }
  
  .dictation-number-input input {
    font-size: 18px;
    padding: 10px 12px;
    border-radius: 12px;
  }
  
  .num-btn {
    width: 44px;
    height: 44px;
    font-size: 24px;
  }
  
  .dictation-checkbox {
    font-size: 16px;
    padding: 10px 12px;
  }
  
  .checkbox-mark {
    width: 26px;
    height: 26px;
    border-radius: 8px;
  }
}

/* ========== AI 生成题目样式 ========== */

.ai-loading {
  text-align: center;
  padding: 30px 20px 60px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(232, 245, 233, 0.95));
  border-radius: 24px;
  border: 3px dashed #81C784;
  position: relative;
  overflow: hidden;
}

.ai-mode-tag {
  display: inline-block;
  padding: 8px 20px;
  background: linear-gradient(135deg, #4CAF50, #2E7D32);
  color: white;
  font-size: 14px;
  font-weight: 600;
  border-radius: 20px;
  box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3);
  white-space: nowrap;
  margin-bottom: 10px;
}

.ai-difficulty-level {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 13px;
  color: #666;
  margin-bottom: 16px;
}

.level-label {
  color: #888;
}

.level-dots {
  display: flex;
  gap: 6px;
}

.level-dot {
  font-size: 14px;
  color: #ccc;
  transition: all 0.3s;
}

.level-dot.active {
  color: #4CAF50;
  text-shadow: 0 0 8px rgba(76, 175, 80, 0.5);
}

.ai-loading::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 200%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(129, 199, 132, 0.1), transparent);
  animation: shimmer 2s infinite;
}

@keyframes shimmer {
  0% { transform: translateX(0); }
  100% { transform: translateX(50%); }
}

.ai-loading-mascot {
  width: 100px;
  height: 100px;
  margin: 0 auto 20px;
  animation: mascotBounce 1s ease-in-out infinite;
}

.ai-loading-mascot img {
  width: 100%;
  height: 100%;
}

@keyframes mascotBounce {
  0%, 100% { transform: translateY(0) rotate(-5deg); }
  50% { transform: translateY(-15px) rotate(5deg); }
}

.ai-loading-icon {
  font-size: 64px;
  animation: aiPulse 2s ease-in-out infinite;
  margin-bottom: 20px;
}

@keyframes aiPulse {
  0%, 100% { transform: scale(1) rotate(-5deg); }
  50% { transform: scale(1.15) rotate(5deg); }
}

.ai-loading-text {
  font-family: 'ZCOOL KuaiLe', -apple-system, sans-serif;
  font-size: 20px;
  font-weight: 600;
  color: var(--primary-green);
  margin-bottom: 12px;
}

.ai-loading-tips {
  font-size: 14px;
  color: var(--text-light);
  margin-bottom: 24px;
}

.loading-dots {
  display: flex;
  justify-content: center;
  gap: 12px;
}

.loading-dots span {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: linear-gradient(135deg, #81C784, #4CAF50);
  animation: dotBounce 1.4s infinite ease-in-out both;
}

.loading-dots span:nth-child(1) { animation-delay: -0.32s; }
.loading-dots span:nth-child(2) { animation-delay: -0.16s; }
.loading-dots span:nth-child(3) { animation-delay: 0s; }

@keyframes dotBounce {
  0%, 80%, 100% { transform: translateY(0) scale(1); }
  40% { transform: translateY(-12px) scale(1.2); }
}

/* 阅读理解文章样式 */
.reading-passage {
  background: linear-gradient(135deg, #FFFDE7, #FFF9C4);
  border: 2px solid #FFD54F;
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 20px;
  position: relative;
  overflow: hidden;
}

.reading-passage::before {
  content: '📖';
  position: absolute;
  top: -20px;
  right: -20px;
  font-size: 100px;
  opacity: 0.08;
  pointer-events: none;
}

.reading-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 2px dashed #FFD54F;
}

.reading-icon {
  font-size: 28px;
  animation: readingBounce 2s ease-in-out infinite;
}

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

.reading-title {
  font-family: 'ZCOOL KuaiLe', -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: #F57F17;
  flex: 1;
}

.reading-meta {
  display: flex;
  gap: 12px;
  font-size: 12px;
  color: #888;
}

.reading-meta span {
  background: rgba(255,255,255,0.6);
  padding: 2px 8px;
  border-radius: 8px;
}

.reading-content {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 17px;
  line-height: 2.2;
  color: var(--text-dark);
  text-indent: 2em;
  text-align: justify;
  letter-spacing: 0.5px;
  position: relative;
}

/* 阅读理解折叠功能 */
.reading-passage.collapsed .reading-content {
  max-height: 120px;
  overflow: hidden;
  mask-image: linear-gradient(to bottom, black 60%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, black 60%, transparent);
}

.reading-toggle {
  display: none;
  width: 100%;
  padding: 8px;
  margin-top: 12px;
  background: rgba(255,255,255,0.7);
  border: 1px solid #FFD54F;
  border-radius: 8px;
  color: #F57F17;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.reading-passage.collapsed .reading-toggle {
  display: block;
}

.reading-toggle:hover {
  background: rgba(255,255,255,0.9);
}

/* 阅读理解题目关联指示 */
.reading-question-hint {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #FFF8E1;
  color: #F57F17;
  padding: 2px 8px;
  border-radius: 8px;
  font-size: 11px;
  margin-left: 8px;
}

/* AI 题目标签容器 */
.quiz-tags {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

/* 分类标签 */
.quiz-category {
  display: inline-block;
  padding: 4px 12px;
  background: linear-gradient(135deg, #E3F2FD, #BBDEFB);
  color: #1565C0;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
}

/* 难度标签 */
.quiz-difficulty {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
}

.difficulty-basic {
  background: linear-gradient(135deg, #E8F5E9, #C8E6C9);
  color: #2E7D32;
}

.difficulty-medium {
  background: linear-gradient(135deg, #FFF3E0, #FFE0B2);
  color: #E65100;
}

.difficulty-hard {
  background: linear-gradient(135deg, #FCE4EC, #F8BBD9);
  color: #C2185B;
}

/* 题目解析样式 */
.quiz-analysis {
  margin-top: 16px;
  padding: 16px;
  background: linear-gradient(135deg, #E8F5E9, #C8E6C9);
  border-radius: 12px;
  border-left: 4px solid #4CAF50;
}

.quiz-analysis-title {
  font-size: 14px;
  font-weight: 700;
  color: #2E7D32;
  margin-bottom: 8px;
}

.quiz-analysis-content {
  font-size: 14px;
  color: var(--text-dark);
  line-height: 1.8;
}

/* ========== 登录页面 ========== */
.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-gradient);
  padding: 20px;
  position: relative;
  overflow: hidden;
}

.login-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.login-container {
  position: relative;
  z-index: 1;
  background: var(--card-bg);
  border-radius: 30px;
  box-shadow: 0 20px 60px rgba(125, 200, 78, 0.2);
  backdrop-filter: blur(10px);
  border: 3px solid rgba(125, 200, 78, 0.3);
  padding: 18px 26px;
  width: 100%;
  max-width: 420px;
  text-align: center;
  animation: loginIn 0.5s ease;
}

.auto-login-panel {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.92);
  border-radius: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  z-index: 2;
  text-align: center;
  padding: 20px;
}

.auto-login-spinner {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 4px solid rgba(125, 200, 78, 0.2);
  border-top-color: var(--primary);
  animation: autoLoginSpin 0.9s linear infinite;
}

.auto-login-text {
  font-size: 16px;
  color: var(--text-dark);
}

.auto-login-cancel {
  border: none;
  background: #fff;
  color: #2E7D32;
  font-size: 14px;
  padding: 8px 14px;
  border-radius: 12px;
  box-shadow: 0 6px 16px rgba(46, 125, 50, 0.15);
  cursor: pointer;
}

.auto-login-cancel:active {
  transform: scale(0.97);
}

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

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

.login-mascot {
  width: 100px;
  height: 100px;
  margin: 8px auto 2px;
  animation: mascotWiggle 3s ease-in-out infinite;
}

.login-mascot img {
  width: 100%;
  height: 100%;
}

.login-title {
  font-size: 28px;
  background: linear-gradient(135deg, var(--primary-dark), var(--primary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 8px;
}

.login-title-logo {
  width: 180px;
  max-width: 90%;
  height: auto;
  margin: 0 auto 2px;
  display: block;
}

.login-subtitle {
  font-size: 16px;
  color: var(--text-light);
  margin-bottom: 6px;
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.login-input-group {
  display: flex;
  align-items: center;
  background: white;
  border: 3px solid #E0E0E0;
  border-radius: 16px;
  padding: 4px;
  transition: border-color 0.3s;
}

.login-input-group:focus-within {
  border-color: var(--primary);
}

.login-input-icon {
  font-size: 24px;
  padding: 0 12px;
}

.login-input-group input {
  flex: 1;
  border: none;
  padding: 14px 12px;
  font-family: inherit;
  font-size: 16px;
  outline: none;
  background: transparent;
}

.login-error {
  color: #E53935;
  font-size: 14px;
  min-height: 24px;
  text-align: center;
}

.login-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 18px;
  border: none;
  border-radius: 999px;
  background: linear-gradient(135deg, #6FCF74, #2BB673);
  font-family: inherit;
  font-size: 18px;
  color: white;
  cursor: pointer;
  transition: all 0.3s;
  box-shadow: 0 10px 26px rgba(51, 170, 90, 0.28);
  margin-top: 4px;
}

.login-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(51, 170, 90, 0.35);
}

.login-btn:active {
  transform: translateY(0) scale(0.99);
}

.login-btn:disabled {
  background: #BDBDBD;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.login-btn-icon {
  font-size: 24px;
}

.login-footer {
  margin-top: 10px;
  color: var(--text-light);
  font-size: 14px;
}

/* ICP 备案信息 - 登录页底部 */
.login-page-beian {
  position: fixed;
  bottom: 16px;
  left: 0;
  right: 0;
  text-align: center;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 11px;
  z-index: 10;
}

.login-page-beian a {
  color: #aaa;
  text-decoration: none;
}

.login-page-beian a:hover {
  color: #666;
  text-decoration: underline;
}

.login-page-beian .beian-divider {
  color: #ccc;
  margin: 0 8px;
}

.login-page-beian .beian-icon {
  width: 11px;
  height: 11px;
  vertical-align: middle;
  margin-right: 3px;
  margin-top: -1px;
}

/* PWA 模式下登录页备案增加底部安全距离 */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .login-page-beian {
    bottom: calc(16px + env(safe-area-inset-bottom));
  }
}

/* 移动端备案信息换行显示 */
@media (max-width: 480px) {
  .login-page-beian {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    font-size: 10px;
  }
  
  .login-page-beian .beian-divider {
    display: none;
  }
  
  .login-page-beian .beian-icon {
    width: 10px;
    height: 10px;
  }
}

/* 主应用底部备案信息 */
.site-footer {
  text-align: center;
  padding: 20px 16px 32px;
  margin-top: 24px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  font-size: 10px;
  letter-spacing: 0;
}

.site-footer a {
  color: #aaa;
  text-decoration: none;
  font-family: inherit !important;
  font-weight: 400;
}

.site-footer a:hover {
  color: #666;
  text-decoration: underline;
}

.site-footer .beian-divider {
  color: #ccc;
  margin: 0 8px;
}

.site-footer .beian-icon {
  width: 10px;
  height: 10px;
  vertical-align: middle;
  margin-right: 2px;
  margin-top: -1px;
}

/* 移动端主应用备案信息换行显示 */
@media (max-width: 480px) {
  .site-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    font-size: 9px;
  }
  
  .site-footer .beian-divider {
    display: none;
  }
  
  .site-footer .beian-icon {
    width: 9px;
    height: 9px;
  }
}

/* PWA 模式下增加底部安全距离 */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .site-footer {
    padding-bottom: calc(32px + env(safe-area-inset-bottom));
  }
}

/* ========== 用户菜单 ========== */
.header-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.header-refresh-btn {
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: linear-gradient(135deg, #E3F2FD, #BBDEFB);
  color: #1976D2;
  font-size: 18px;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 10px rgba(25, 118, 210, 0.18);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

body.pwa-mode .header-refresh-btn {
  display: inline-flex;
}

.header-refresh-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(25, 118, 210, 0.28);
}

.header-refresh-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.header-refresh-btn.loading {
  animation: spin 0.9s linear infinite;
}

.user-menu {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  background: linear-gradient(135deg, #E8F5E9, #C8E6C9);
  border-radius: 30px;
  cursor: pointer;
  transition: all 0.3s;
}

.user-menu:hover {
  background: linear-gradient(135deg, #C8E6C9, #A5D6A7);
}

.user-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid white;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

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

.user-nickname {
  font-size: 15px;
  font-weight: 600;
  color: var(--primary-dark);
  max-width: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: white;
  border-radius: 16px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.2);
  padding: 8px;
  min-width: 160px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.2s ease;
  z-index: 9999;
  border: 2px solid rgba(125, 200, 78, 0.2);
}

.user-menu:hover .user-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 16px;
  border: none;
  border-radius: 12px;
  background: transparent;
  font-family: inherit;
  font-size: 14px;
  color: var(--text-dark);
  cursor: pointer;
  transition: all 0.2s;
}

.dropdown-item:hover {
  background: #F5F5F5;
}

.dropdown-item[data-action="logout"]:hover {
  background: #FFEBEE;
  color: #C62828;
}

/* ========== 个人中心页 ========== */
.profile-layout-new {
  max-width: 600px;
  margin: 0 auto;
}

.profile-layout-new .profile-card {
  padding: 24px;
  overflow: visible;
}

.profile-main {
  display: flex;
  gap: 24px;
  align-items: center;
  margin-bottom: 20px;
}

/* 旧版布局兼容 */
.profile-layout {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 20px;
  align-items: start;
}

.profile-left .profile-card {
  padding: 24px;
  text-align: center;
  overflow: visible;
}

.profile-avatar-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.profile-avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  overflow: hidden;
  border: 4px solid var(--primary);
  box-shadow: 0 6px 20px rgba(125, 200, 78, 0.3);
}

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

.avatar-upload-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: linear-gradient(135deg, #E3F2FD, #BBDEFB);
  color: #1976D2;
  border-radius: 20px;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s;
}

.avatar-upload-btn:hover {
  background: linear-gradient(135deg, #BBDEFB, #90CAF9);
  transform: scale(1.05);
}

.profile-info {
  margin-bottom: 20px;
  width: 100%;
}

.profile-username {
  font-size: 14px;
  color: var(--text-light);
  margin-bottom: 12px;
}

.profile-nickname-row {
  display: flex;
  gap: 8px;
  align-items: center;
  width: 100%;
}

.profile-nickname-input {
  flex: 1;
  min-width: 0;
  padding: 10px 14px;
  border: 3px solid #E0E0E0;
  border-radius: 12px;
  font-family: inherit;
  font-size: 16px;
  outline: none;
  transition: border-color 0.2s;
}

.profile-nickname-input:focus {
  border-color: var(--primary);
}

.profile-grade-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 2px dashed rgba(125, 200, 78, 0.2);
}

.grade-label {
  font-size: 14px;
  color: var(--text-light);
  white-space: nowrap;
}

.grade-select {
  flex: 1;
  padding: 10px 14px;
  border: 3px solid #E0E0E0;
  border-radius: 12px;
  font-family: inherit;
  font-size: 15px;
  color: var(--text-dark);
  background: white;
  cursor: pointer;
  outline: none;
  transition: border-color 0.2s;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%237DC84E' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
}

.grade-select:focus {
  border-color: var(--primary);
}

.grade-select:hover {
  border-color: var(--primary);
}

.profile-save-btn {
  padding: 10px 14px;
  border: none;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  font-family: inherit;
  font-size: 14px;
  color: white;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.2s;
}

.profile-save-btn:hover {
  transform: scale(1.05);
}

/* 推送通知设置 */
.push-section {
  margin: 16px 0;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.6);
}

.push-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.push-label {
  font-weight: 600;
  color: var(--text-dark);
  font-size: 14px;
}

.push-desc {
  margin-top: 6px;
  font-size: 12px;
  color: var(--text-light);
}

/* 清除缓存按钮 */
.clear-cache-btn {
  padding: 6px 14px;
  background: rgba(0, 0, 0, 0.06);
  color: var(--text-dark);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.clear-cache-btn:hover {
  background: rgba(0, 0, 0, 0.1);
}

.clear-cache-btn:active {
  transform: scale(0.95);
  background: rgba(0, 0, 0, 0.12);
}

/* Switch */
.switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #cbd5e1;
  transition: 0.2s;
  border-radius: 24px;
}

.slider:before {
  position: absolute;
  content: '';
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: 0.2s;
  border-radius: 50%;
}

.switch input:checked + .slider {
  background-color: #22c55e;
}

.switch input:checked + .slider:before {
  transform: translateX(20px);
}

.switch input:disabled + .slider {
  opacity: 0.6;
  cursor: not-allowed;
}

.profile-left .logout-btn {
  width: 100%;
  justify-content: center;
}

.logout-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border: none;
  border-radius: 12px;
  background: linear-gradient(135deg, #FFEBEE, #FFCDD2);
  font-family: inherit;
  font-size: 14px;
  color: #C62828;
  cursor: pointer;
  transition: all 0.3s;
}

.logout-btn:hover {
  background: linear-gradient(135deg, #EF5350, #E53935);
  color: white;
}

/* 新版个人中心 - 密码折叠区域 */
.password-section {
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  margin: 16px -24px;
  padding: 0 24px;
}

.password-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 0;
  cursor: pointer;
  user-select: none;
  transition: color 0.2s;
}

.password-toggle:hover {
  color: var(--primary);
}

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

.toggle-text {
  flex: 1;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-dark);
}

.toggle-arrow {
  font-size: 12px;
  color: var(--text-light);
  transition: transform 0.3s;
}

.password-toggle.active .toggle-arrow {
  transform: rotate(180deg);
}

.password-form {
  padding-bottom: 16px;
  overflow: hidden;
  transition: max-height 0.3s ease, opacity 0.3s ease;
}

.password-form.hidden {
  display: none;
}

.password-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.password-row input {
  flex: 1;
  min-width: 140px;
  padding: 12px 14px;
  border: 2px solid #E0E0E0;
  border-radius: 10px;
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s;
}

.password-row input:focus {
  border-color: var(--primary);
}

.password-row input::placeholder {
  color: #999;
}

.password-row .save-btn {
  padding: 12px 20px;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  color: white;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
  white-space: nowrap;
}

.password-row .save-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 107, 107, 0.3);
}

.profile-layout-new .profile-info {
  flex: 1;
}

.profile-layout-new .logout-btn {
  width: 100%;
  justify-content: center;
  margin-top: 16px;
}

/* 新版布局响应式 */
@media (max-width: 576px) {
  .profile-layout-new .profile-card {
    padding: 20px 16px;
  }
  
  .profile-main {
    flex-direction: column;
    text-align: center;
    gap: 16px;
  }
  
  .profile-layout-new .profile-info {
    width: 100%;
  }
  
  .password-section {
    margin: 16px -16px;
    padding: 0 16px;
  }
  
  .password-row {
    flex-direction: column;
  }
  
  .password-row input {
    width: 100%;
    min-width: auto;
  }
  
  .password-row .save-btn {
    width: 100%;
  }
}

.profile-right {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.settings-panel.compact {
  padding: 20px;
  max-width: none;
}

.settings-panel.compact .settings-title {
  font-size: 16px;
  margin-bottom: 16px;
}

.settings-title {
  font-size: 18px;
  color: var(--text-dark);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.settings-title .title-hint {
  font-size: 12px;
  font-weight: normal;
  color: var(--text-light);
}

.settings-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.settings-panel.compact .setting-item {
  margin-bottom: 0;
}

.settings-panel.compact .setting-item label {
  font-size: 13px;
  margin-bottom: 8px;
}

.settings-panel.compact .setting-item input {
  padding: 10px 12px;
  font-size: 14px;
  letter-spacing: 2px;
  width: 100%;
  border: 2px solid #E0E0E0;
  border-radius: 10px;
  outline: none;
  transition: border-color 0.2s;
  box-sizing: border-box;
}

.settings-panel.compact .setting-item input:focus {
  border-color: var(--primary);
}

.setting-input-btn {
  display: flex;
  gap: 8px;
}

.setting-input-btn input {
  flex: 1;
}

.save-btn.small {
  padding: 10px 16px;
  font-size: 13px;
  white-space: nowrap;
}

.settings-panel.compact .setting-hint {
  font-size: 11px;
  margin-top: 6px;
  color: var(--text-light);
}

/* 响应式 - 登录页和个人中心 */
@media (max-width: 992px) {
  .profile-layout {
    grid-template-columns: 1fr;
  }
  
  .profile-left .profile-card {
    display: flex;
    align-items: center;
    gap: 20px;
    text-align: left;
  }
  
  .profile-avatar-wrap {
    margin-bottom: 0;
  }
  
  .profile-info {
    flex: 1;
    margin-bottom: 0;
  }
  
  .profile-left .logout-btn {
    width: auto;
  }
  
  .settings-row {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .settings-row {
    grid-template-columns: 1fr 1fr;
  }
  
  .settings-row .setting-item:last-child {
    grid-column: span 2;
  }
  
  .profile-left .profile-card {
    flex-direction: column;
    text-align: center;
  }
  
  .profile-left .logout-btn {
    width: 100%;
  }
}

@media (max-width: 576px) {
  .login-container {
    padding: 16px 18px;
  }
  
  .login-title {
    font-size: 22px;
  }
  
  .login-title-logo {
    width: 135px;
    margin-top: 0;
  }
  
  .login-mascot {
    width: 80px;
    height: 80px;
    margin-bottom: 2px;
  }
  
  .settings-row {
    grid-template-columns: 1fr;
  }
  
  .settings-row .setting-item:last-child {
    grid-column: span 1;
  }
  
  .profile-nickname-row {
    flex-direction: column;
  }
  
  .profile-nickname-input {
    width: 100%;
  }
  
  .profile-save-btn {
    width: 100%;
  }
  
  .user-nickname {
    display: none;
  }
  
  .user-menu {
    padding: 6px;
  }
  
  .header-right {
    gap: 10px;
  }
}

/* ========== 首页顶部布局：打卡任务+日历 ========== */
.home-top-zone {
  display: grid;
  grid-template-columns: minmax(320px, 1fr) minmax(300px, 380px);
  gap: 16px;
  margin-bottom: 16px;
  align-items: stretch;
}

/* 左侧：打卡+任务联动区 */
.checkin-task-zone {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* 打卡状态条 */
.checkin-bar {
  display: grid;
  grid-template-columns: auto minmax(200px, 1fr) auto;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  background: linear-gradient(135deg, rgba(255,255,255,0.95), rgba(232,245,233,0.95));
  border: 2px solid rgba(125, 200, 78, 0.3);
}

.checkin-bar-left {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}

.checkin-bar-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.checkin-bar-info .checkin-title {
  font-size: 16px;
  font-weight: bold;
  margin: 0;
}

.checkin-bar-info .cheer-text {
  font-size: 13px;
  color: var(--text-light);
  margin: 0;
}

.checkin-bar-middle {
  display: flex;
  justify-content: center;
  min-width: 0;
}

.checkin-quote {
  margin-top: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 12px;
  color: #8D6E63;
  background: rgba(255, 248, 225, 0.9);
  border: 1px solid rgba(255, 204, 128, 0.6);
  border-radius: 14px;
  padding: 6px 10px;
  max-width: 100%;
}

.checkin-quote .quote-text {
  font-weight: 600;
  white-space: nowrap;
}

.checkin-quote .quote-source {
  opacity: 0.8;
  white-space: nowrap;
}

.checkin-quote .quote-refresh {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: none;
  background: rgba(255,193,7,0.2);
  cursor: pointer;
  transition: transform 0.2s ease;
}

.checkin-quote .quote-refresh:hover {
  transform: rotate(180deg);
}

.checkin-bar-right {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

/* 迷你进度环 */
.progress-ring-mini {
  width: 50px;
  height: 50px;
}

.progress-ring-mini .progress-num {
  font-size: 14px;
}

.progress-ring-mini .progress-unit {
  font-size: 8px;
}

/* 打卡任务区的任务卡片 */
.checkin-task-zone .task-card {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.checkin-task-zone .task-quick-list {
  flex: 1;
  max-height: 200px;
  overflow-y: auto;
}

/* 每日名言样式 */
.daily-quote {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: linear-gradient(135deg, rgba(255,248,225,0.95), rgba(255,243,205,0.9));
  border: 1px solid rgba(255,193,7,0.3);
  border-radius: var(--border-radius);
  position: relative;
  overflow: hidden;
}

.daily-quote::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  animation: quoteShimmer 3s ease-in-out infinite;
}

@keyframes quoteShimmer {
  0%, 100% { transform: translateX(-100%); }
  50% { transform: translateX(100%); }
}

.quote-icon {
  font-size: 24px;
  flex-shrink: 0;
  z-index: 1;
}

.quote-content {
  flex: 1;
  min-width: 0;
  z-index: 1;
}

.quote-text {
  font-size: 14px;
  color: #92400e;
  line-height: 1.5;
  margin: 0 0 4px 0;
  font-style: italic;
}

.quote-source {
  font-size: 12px;
  color: #b45309;
  opacity: 0.8;
}

.quote-refresh {
  background: none;
  border: none;
  font-size: 16px;
  cursor: pointer;
  padding: 6px;
  border-radius: 50%;
  transition: all 0.2s;
  opacity: 0.6;
  z-index: 1;
}

.quote-refresh:hover {
  opacity: 1;
  background: rgba(255,193,7,0.2);
  transform: rotate(180deg);
}

@media (max-width: 600px) {
  .daily-quote {
    padding: 12px 14px;
  }
  
  .quote-icon {
    font-size: 20px;
  }
  
  .quote-text {
    font-size: 13px;
  }
}

/* 右侧：日历 */
.calendar-zone {
  display: flex;
  flex-direction: column;
}

.calendar-zone .calendar-card {
  height: auto;
  display: flex;
  flex-direction: column;
  overflow: visible;
}

.calendar-zone .calendar-days {
  flex: none;
}

.subject-mascot {
  display: none;
}

/* ========== 学习小组样式 ========== */
.study-group-zone {
  display: flex;
  flex-direction: column;
}

.study-group-zone .group-card {
  height: 100%;
}

.group-card {
  padding: 14px 16px;
  border-radius: 20px;
  height: auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.95), rgba(232,245,233,0.95));
  box-shadow: 0 8px 30px rgba(125, 200, 78, 0.2);
  border: 2px solid rgba(125, 200, 78, 0.3);
  /* 入场动画 */
  animation: cardBounceIn 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.15s backwards;
  transition: all 0.3s ease;
}

.group-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 45px rgba(125, 200, 78, 0.3);
}

.group-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 2px dashed rgba(125, 200, 78, 0.3);
}

.group-icon {
  font-size: 16px;
}

.group-title {
  font-size: 14px;
  font-weight: bold;
  color: var(--text-dark);
  flex: 1;
}

.group-manage-btn {
  background: none;
  border: none;
  font-size: 14px;
  cursor: pointer;
  opacity: 0.6;
  transition: all 0.2s;
  padding: 2px;
}

.group-manage-btn:hover {
  opacity: 1;
  transform: rotate(90deg);
}

/* 无小组状态 */
.group-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 10px 8px;
}

.empty-icon {
  font-size: 32px;
  margin-bottom: 8px;
  animation: bounce 2s ease-in-out infinite;
}

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

.group-empty p {
  color: var(--text-light);
  font-size: 12px;
  margin-bottom: 10px;
}

.create-group-btn {
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 16px;
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s;
}

.create-group-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 15px rgba(125, 200, 78, 0.4);
}

/* 有小组状态 */
.group-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.group-name {
  font-size: 15px;
  font-weight: bold;
  color: var(--primary-dark);
  margin-bottom: 12px;
  text-align: center;
}

/* 成员头像列表 */
.group-members {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 2px dashed rgba(125, 200, 78, 0.2);
}

.member-avatar {
  position: relative;
  width: 42px;
  height: 42px;
}

.member-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 3px solid var(--primary);
  object-fit: cover;
  background: #f0f0f0;
}

.member-avatar.owner img {
  border-color: #FFD700;
}

.member-avatar .crown {
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 14px;
}

.member-name {
  position: absolute;
  bottom: -18px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  color: var(--text-light);
  white-space: nowrap;
  max-width: 50px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 排行榜 */
.group-ranking {
  flex: 1;
}

.ranking-title {
  font-size: 13px;
  color: var(--text-dark);
  margin-bottom: 8px;
  text-align: center;
}

.ranking-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ranking-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: rgba(125, 200, 78, 0.1);
  border-radius: 12px;
  font-size: 13px;
}

.ranking-item.top-1 {
  background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
  color: white;
}

.ranking-item.top-2 {
  background: linear-gradient(135deg, #C0C0C0 0%, #A0A0A0 100%);
  color: white;
}

.ranking-item.top-3 {
  background: linear-gradient(135deg, #CD7F32 0%, #8B4513 100%);
  color: white;
}

.ranking-position {
  font-weight: bold;
  min-width: 20px;
}

.ranking-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
}

.ranking-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ranking-streak {
  font-weight: bold;
  color: #FF6B6B;
}

.ranking-item.top-1 .ranking-streak,
.ranking-item.top-2 .ranking-streak,
.ranking-item.top-3 .ranking-streak {
  color: white;
}

/* 邀请通知 */
.group-invitations {
  position: absolute;
  top: 10px;
  right: 10px;
}

.invitation-badge {
  background: #FF6B6B;
  color: white;
  font-size: 12px;
  min-width: 20px;
  height: 20px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  animation: pulse 2s infinite;
}

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

/* 小组模态框 */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  backdrop-filter: blur(4px);
}

.modal-content {
  background: white;
  border-radius: 24px;
  max-width: 480px;
  width: 90%;
  max-height: 80vh;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  animation: modalIn 0.3s ease;
}

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

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 2px solid rgba(125, 200, 78, 0.2);
}

.modal-header h3 {
  font-size: 18px;
  color: var(--text-dark);
}

.modal-close {
  background: none;
  border: none;
  font-size: 28px;
  color: var(--text-light);
  cursor: pointer;
  line-height: 1;
  transition: color 0.2s;
}

.modal-close:hover {
  color: #FF6B6B;
}

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

/* 标签页 */
.group-tabs {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.group-tab {
  flex: 1;
  padding: 10px 16px;
  border: 2px solid #E0E0E0;
  background: white;
  border-radius: 12px;
  font-family: inherit;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
}

.group-tab.active {
  border-color: var(--primary);
  background: rgba(125, 200, 78, 0.1);
  color: var(--primary-dark);
}

.tab-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  background: #FF6B6B;
  color: white;
  font-size: 11px;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.group-tab-content {
  display: none;
}

.group-tab-content.active {
  display: block;
}

/* 创建小组表单 */
.no-group-tip {
  text-align: center;
  padding: 20px 0;
}

.tip-icon {
  font-size: 50px;
  margin-bottom: 12px;
}

.no-group-tip p {
  color: var(--text-light);
  margin-bottom: 20px;
}

.create-group-form {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.create-group-form input {
  flex: 1;
  max-width: 200px;
  padding: 10px 14px;
  border: 2px solid #E0E0E0;
  border-radius: 12px;
  font-family: inherit;
  font-size: 14px;
  outline: none;
}

.create-group-form input:focus {
  border-color: var(--primary);
}

/* 有小组状态 */
.current-group-info {
  text-align: center;
  padding: 16px;
  background: rgba(125, 200, 78, 0.1);
  border-radius: 16px;
  margin-bottom: 20px;
}

.current-group-name {
  font-size: 18px;
  font-weight: bold;
  color: var(--primary-dark);
}

.current-group-owner {
  font-size: 13px;
  color: var(--text-light);
  margin-top: 4px;
}

.invite-section, .members-section {
  margin-bottom: 20px;
}

.invite-section h4, .members-section h4 {
  font-size: 14px;
  color: var(--text-dark);
  margin-bottom: 12px;
}

.invite-search {
  display: flex;
  gap: 10px;
}

.invite-search input {
  flex: 1;
  padding: 10px 14px;
  border: 2px solid #E0E0E0;
  border-radius: 12px;
  font-family: inherit;
  font-size: 14px;
  outline: none;
}

.invite-search input:focus {
  border-color: var(--primary);
}

.btn-small {
  padding: 10px 16px;
  background: var(--primary);
  color: white;
  border: none;
  border-radius: 12px;
  font-family: inherit;
  font-size: 14px;
  cursor: pointer;
}

.btn-primary {
  padding: 10px 20px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: white;
  border: none;
  border-radius: 12px;
  font-family: inherit;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-primary:hover {
  transform: scale(1.02);
}

.btn-danger {
  padding: 10px 20px;
  background: #FF6B6B;
  color: white;
  border: none;
  border-radius: 12px;
  font-family: inherit;
  font-size: 14px;
  cursor: pointer;
}

.search-results {
  margin-top: 12px;
}

.search-result-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  background: #f8f8f8;
  border-radius: 12px;
  margin-bottom: 8px;
}

.search-result-item img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
}

.search-result-info {
  flex: 1;
}

.search-result-name {
  font-size: 14px;
  font-weight: bold;
}

.search-result-username {
  font-size: 12px;
  color: var(--text-light);
}

.invite-btn {
  padding: 6px 14px;
  background: var(--primary);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 12px;
  cursor: pointer;
}

.invite-btn:disabled {
  background: #ccc;
  cursor: not-allowed;
}

/* 成员列表 */
.members-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.member-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  background: #f8f8f8;
  border-radius: 12px;
}

.member-item img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}

.member-info {
  flex: 1;
}

.member-nickname {
  font-size: 14px;
  font-weight: bold;
}

.member-badge {
  font-size: 11px;
  padding: 2px 8px;
  background: #FFD700;
  color: #333;
  border-radius: 8px;
  margin-left: 6px;
}

.member-stats {
  font-size: 12px;
  color: var(--text-light);
}

/* 邀请列表 */
.invitations-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.no-invitations {
  text-align: center;
  color: var(--text-light);
  padding: 30px;
}

.invitation-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  background: rgba(125, 200, 78, 0.1);
  border-radius: 14px;
  border: 2px solid rgba(125, 200, 78, 0.2);
}

.invitation-info {
  flex: 1;
}

.invitation-group {
  font-size: 15px;
  font-weight: bold;
  color: var(--text-dark);
}

.invitation-from {
  font-size: 12px;
  color: var(--text-light);
}

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

.accept-btn {
  padding: 8px 16px;
  background: var(--primary);
  color: white;
  border: none;
  border-radius: 10px;
  font-size: 13px;
  cursor: pointer;
}

.reject-btn {
  padding: 8px 16px;
  background: #E0E0E0;
  color: #666;
  border: none;
  border-radius: 10px;
  font-size: 13px;
  cursor: pointer;
}

.group-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  padding-top: 16px;
  border-top: 2px dashed rgba(0, 0, 0, 0.1);
}

/* ========== 趣味对战样式 ========== */

/* 对战大厅 */
.battle-lobby {
  padding-bottom: 100px;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.battle-header {
  text-align: center;
  margin-bottom: 30px;
}

.battle-header h2 {
  background: linear-gradient(135deg, #FF6B6B, #FF8E53);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.battle-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.battle-actions-zone {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
  width: 100%;
}

.battle-ranking-zone {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
  width: 100%;
}

.battle-card {
  padding: 24px;
  border-radius: 24px;
  background: linear-gradient(135deg, rgba(255,255,255,0.95), rgba(255,235,238,0.95));
  border: 3px solid rgba(255,107,107,0.3);
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

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

.battle-card-header .card-emoji {
  font-size: 32px;
}

.battle-card-header h3 {
  font-size: 18px;
  color: var(--text-dark);
  flex: 1;
}

.battle-card-desc {
  color: var(--text-light);
  font-size: 14px;
  margin-bottom: 16px;
}

.battle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 32px;
  border: none;
  border-radius: 16px;
  font-family: inherit;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s;
}

.battle-btn.create {
  background: linear-gradient(135deg, #FF6B6B, #FF8E53);
  color: white;
  box-shadow: 0 8px 25px rgba(255, 107, 107, 0.4);
  width: 100%;
}

.battle-btn.create:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 35px rgba(255, 107, 107, 0.5);
}

.battle-btn.join {
  background: linear-gradient(135deg, #42A5F5, #1E88E5);
  color: white;
  padding: 14px 24px;
}

.battle-btn.join:hover {
  background: linear-gradient(135deg, #1E88E5, #1565C0);
}

.battle-btn.start {
  background: linear-gradient(135deg, #66BB6A, #43A047);
  color: white;
  box-shadow: 0 8px 25px rgba(102, 187, 106, 0.4);
}

.battle-btn.start:hover:not(:disabled) {
  transform: translateY(-3px);
  box-shadow: 0 12px 35px rgba(102, 187, 106, 0.5);
}

.battle-btn.start:disabled {
  background: #ccc;
  box-shadow: none;
  cursor: not-allowed;
}

.battle-btn.cancel {
  background: #E0E0E0;
  color: #666;
}

.battle-btn.cancel:hover {
  background: #BDBDBD;
}

.battle-btn.again {
  background: linear-gradient(135deg, #FF6B6B, #FF8E53);
  color: white;
}

.battle-btn.back {
  background: linear-gradient(135deg, #E0E0E0, #BDBDBD);
  color: #666;
}

/* 按钮加载状态 */
.battle-btn.loading {
  pointer-events: none;
  opacity: 0.8;
  position: relative;
}

.battle-btn.loading::after {
  content: '';
  position: absolute;
  inset: 0;
  background: inherit;
  border-radius: inherit;
  animation: btnPulse 1.2s ease-in-out infinite;
}

@keyframes btnPulse {
  0%, 100% { opacity: 0.8; }
  50% { opacity: 0.5; }
}

.btn-spinner {
  display: inline-block;
  animation: spinnerRotate 1s linear infinite;
  margin-right: 4px;
}

@keyframes spinnerRotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* 加入房间输入框 */
.join-room-input {
  display: flex;
  gap: 12px;
}

.join-room-input input {
  flex: 1;
  padding: 14px 18px;
  border: 3px solid #E0E0E0;
  border-radius: 14px;
  font-family: inherit;
  font-size: 18px;
  text-align: center;
  letter-spacing: 4px;
  text-transform: uppercase;
  outline: none;
  transition: border-color 0.2s;
}

.join-room-input input:focus {
  border-color: #42A5F5;
}

/* 我的战绩 */
.my-battle-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  width: 100%;
  box-sizing: border-box;
}

.stat-item {
  text-align: center;
  padding: 16px 8px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 16px;
}

.stat-value {
  display: block;
  font-size: 28px;
  font-weight: bold;
  color: var(--text-dark);
}

.stat-item.win .stat-value { color: #43A047; }
.stat-item.lose .stat-value { color: #E53935; }
.stat-item.draw .stat-value { color: #FFA000; }

.stat-label {
  font-size: 12px;
  color: var(--text-light);
}

/* 排行榜 */
.battle-ranking-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 400px;
  overflow-y: auto;
}

.battle-rank-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 14px;
  transition: transform 0.2s;
}

.battle-rank-item:hover {
  transform: translateX(5px);
}

.battle-rank-item.top-1 {
  background: linear-gradient(135deg, #FFD700, #FFA500);
  color: white;
}

.battle-rank-item.top-2 {
  background: linear-gradient(135deg, #C0C0C0, #A0A0A0);
  color: white;
}

.battle-rank-item.top-3 {
  background: linear-gradient(135deg, #CD7F32, #8B4513);
  color: white;
}

.rank-pos {
  font-size: 18px;
  font-weight: bold;
  min-width: 30px;
}

.rank-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid white;
}

.rank-info {
  flex: 1;
}

.rank-name {
  font-weight: bold;
  font-size: 14px;
}

.rank-stats {
  font-size: 12px;
  opacity: 0.8;
}

.rank-score {
  font-size: 18px;
  font-weight: bold;
}

/* 等待中的房间 */
.rooms-card .battle-card-header {
  margin-bottom: 12px;
}

.refresh-rooms-btn {
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  transition: transform 0.3s;
}

.refresh-rooms-btn:hover {
  transform: rotate(180deg);
}

.waiting-rooms-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 200px;
  overflow-y: auto;
}

.no-rooms {
  text-align: center;
  color: var(--text-light);
  padding: 20px;
  font-size: 14px;
}

.room-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s;
}

.room-item:hover {
  background: rgba(66, 165, 245, 0.1);
  transform: translateX(5px);
}

.room-item img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
}

.room-info {
  flex: 1;
}

.room-host {
  font-weight: bold;
  font-size: 14px;
}

.room-grade {
  font-size: 12px;
  color: var(--text-light);
}

.room-code {
  font-size: 12px;
  color: #42A5F5;
  font-weight: bold;
}

/* 对战等待室 */
.battle-waiting {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 500px;
}

.waiting-container {
  text-align: center;
  padding: 28px 32px;
  background: linear-gradient(135deg, rgba(255,255,255,0.95), rgba(255,235,238,0.95));
  border-radius: 32px;
  box-shadow: 0 20px 60px rgba(255, 107, 107, 0.2);
  border: 4px solid rgba(255, 107, 107, 0.3);
  max-width: 760px;
  width: 100%;
}

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

.waiting-room-info {
  text-align: left;
}

.room-code-label {
  font-size: 14px;
  color: var(--text-light);
  margin-bottom: 8px;
}

.room-code {
  font-size: 36px;
  font-weight: bold;
  letter-spacing: 8px;
  color: #FF6B6B;
  font-family: 'Courier New', monospace;
}

.copy-code-btn {
  margin-top: 12px;
  padding: 10px 20px;
  border: 2px solid #FF6B6B;
  background: white;
  color: #FF6B6B;
  border-radius: 12px;
  font-family: inherit;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
}

.copy-code-btn:hover {
  background: #FF6B6B;
  color: white;
}

.invite-btn {
  margin-top: 12px;
  margin-left: 8px;
  padding: 10px 20px;
  border: 2px solid #4CAF50;
  background: linear-gradient(135deg, #4CAF50, #43A047);
  color: white;
  border-radius: 12px;
  font-family: inherit;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 2px 8px rgba(76, 175, 80, 0.3);
}

.invite-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(76, 175, 80, 0.4);
}

.invite-btn:active {
  transform: translateY(0);
}

/* ========== 邀请弹窗样式（优化版） ========== */

.invite-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  animation: inviteModalFadeIn 0.2s ease forwards;
}

.invite-modal.closing {
  animation: inviteModalFadeOut 0.15s ease forwards;
}

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

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

.invite-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.invite-content {
  position: relative;
  background: #fff;
  border-radius: 20px;
  padding: 20px;
  width: 280px;
  max-width: 90%;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
  transform: scale(0.9);
  opacity: 0;
  animation: inviteContentPop 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) 0.05s forwards;
}

@keyframes inviteContentPop {
  from {
    transform: scale(0.9);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

.invite-modal.closing .invite-content {
  animation: inviteContentClose 0.15s ease forwards;
}

@keyframes inviteContentClose {
  from {
    transform: scale(1);
    opacity: 1;
  }
  to {
    transform: scale(0.95);
    opacity: 0;
  }
}

.invite-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  border: none;
  background: rgba(0, 0, 0, 0.05);
  border-radius: 50%;
  font-size: 14px;
  color: #999;
  cursor: pointer;
  transition: all 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.invite-close:hover {
  background: rgba(0, 0, 0, 0.1);
  color: #666;
}

.invite-loading {
  text-align: center;
  padding: 40px 20px;
}

.invite-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid #e8e8e8;
  border-top-color: #FF6B6B;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  margin: 0 auto 10px;
}

.invite-loading p {
  color: #888;
  font-size: 13px;
  margin: 0;
}

/* 标签切换 */
.invite-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.invite-tab {
  flex: 1;
  padding: 10px 12px;
  border: none;
  border-radius: 10px;
  background: #f5f5f5;
  color: #666;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.invite-tab.active {
  background: linear-gradient(135deg, #FF6B6B, #FF5252);
  color: white;
  box-shadow: 0 2px 8px rgba(255, 107, 107, 0.3);
}

.invite-tab:not(.active):hover {
  background: #eee;
}

/* 标签内容 */
.invite-tab-content {
  animation: tabContentFade 0.2s ease;
}

.invite-tab-content.hidden {
  display: none;
}

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

/* 二维码区域 */
.invite-qrcode {
  display: flex;
  justify-content: center;
  padding: 16px;
  background: #fafafa;
  border-radius: 12px;
  margin-bottom: 8px;
}

.invite-qrcode img {
  border-radius: 6px;
}

.invite-qr-tip {
  text-align: center;
  font-size: 12px;
  color: #999;
  margin: 0;
}

/* 链接预览 */
.invite-link-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 20px;
  background: linear-gradient(135deg, #FFE8E8, #FFD0D0);
  border-radius: 12px;
  margin-bottom: 12px;
}

.invite-link-preview .link-icon {
  font-size: 24px;
}

.invite-link-preview .link-text {
  font-size: 14px;
  color: #d32f2f;
  font-weight: 500;
}

/* 复制按钮 */
.invite-copy-btn {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 10px;
  background: linear-gradient(135deg, #FF6B6B, #FF5252);
  color: white;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  box-shadow: 0 3px 10px rgba(255, 107, 107, 0.25);
}

.invite-copy-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(255, 107, 107, 0.35);
}

.invite-copy-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(255, 107, 107, 0.2);
}

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

/* 玩家槽位 */
.waiting-players {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  margin-bottom: 24px;
}

.player-slot {
  text-align: center;
}

.player-avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto 12px;
  position: relative;
  border: 4px solid #E0E0E0;
  background: #f5f5f5;
}

.player-slot.host .player-avatar {
  border-color: #FF6B6B;
}

.player-slot.guest .player-avatar {
  border-color: #42A5F5;
}

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

.waiting-spinner {
  position: absolute;
  inset: -4px;
  border: 4px solid transparent;
  border-top-color: #42A5F5;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.player-name {
  font-size: 16px;
  font-weight: bold;
  color: var(--text-dark);
  margin-bottom: 8px;
}

.player-badge {
  display: inline-block;
  padding: 4px 12px;
  background: #FF6B6B;
  color: white;
  border-radius: 12px;
  font-size: 12px;
}

.player-badge.guest-badge {
  background: #42A5F5;
}

.vs-badge {
  font-size: 36px;
  font-weight: bold;
  color: #FFD700;
  text-shadow: 2px 2px 0 #FF6B6B;
}

.waiting-tips {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 24px;
  background: rgba(255, 107, 107, 0.1);
  border-radius: 16px;
  margin-bottom: 30px;
}

.waiting-tips .tip-icon {
  font-size: 24px;
}

.waiting-tips p {
  color: var(--text-dark);
  font-size: 14px;
}

/* ========== 简化的模式选择卡片 ========== */
.battle-mode-selector {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 16px auto;
  max-width: 560px;
}

.battle-mode-card {
  position: relative;
  padding: 16px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 16px;
  border: 3px solid transparent;
  cursor: pointer;
  transition: all 0.25s ease;
  display: flex;
  flex-direction: column;
}

.battle-mode-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(255, 107, 107, 0.15);
}

.battle-mode-card.selected {
  border-color: #FF6B6B;
  background: linear-gradient(135deg, rgba(255, 235, 238, 0.95), rgba(255, 255, 255, 0.98));
  box-shadow: 0 6px 20px rgba(255, 107, 107, 0.2);
}

.battle-mode-card input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.mode-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.mode-icon {
  font-size: 22px;
}

.mode-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-dark);
  flex: 1;
}

.mode-check {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #eee;
  color: white;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: all 0.2s ease;
}

.battle-mode-card.selected .mode-check {
  opacity: 1;
  background: linear-gradient(135deg, #FF6B6B, #FF8E53);
}

.mode-subtitle {
  font-size: 12px;
  color: var(--text-light);
  margin: 0 0 12px 0;
  line-height: 1.4;
}

/* 模式内的设置区域 */
.mode-settings {
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px dashed rgba(255, 107, 107, 0.2);
  display: none;
}

.battle-mode-card.selected .mode-settings {
  display: block;
}

.setting-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.setting-option {
  flex: 1;
  min-width: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 8px 10px;
  background: rgba(255, 235, 238, 0.5);
  border-radius: 10px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 12px;
}

.setting-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.setting-option:hover {
  background: rgba(255, 235, 238, 0.8);
}

.setting-option.selected {
  background: linear-gradient(135deg, #FF6B6B, #FF8E53);
  color: white;
  border-color: #FF6B6B;
}

.setting-option.selected .option-icon,
.setting-option.selected .option-text {
  color: white;
}

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

.option-text {
  font-weight: 600;
  color: var(--text-dark);
}

.difficulty-select {
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 2px solid rgba(255, 154, 162, 0.4);
  background: linear-gradient(180deg, #ffffff 0%, #fff7f7 100%);
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  font-family: inherit;
  font-size: 13px;
  color: var(--text-dark);
  cursor: pointer;
  text-align: center;
  padding-right: 34px;
  box-shadow: 0 6px 16px rgba(255, 160, 170, 0.18);
  background-image:
    radial-gradient(circle at 90% 45%, rgba(255, 180, 190, 0.85) 0, rgba(255, 180, 190, 0.85) 2px, transparent 3px),
    radial-gradient(circle at 90% 65%, rgba(255, 140, 160, 0.9) 0, rgba(255, 140, 160, 0.9) 2px, transparent 3px);
  background-repeat: no-repeat;
  background-position: right 14px center, right 10px center;
}

.difficulty-select:focus {
  outline: none;
  border-color: #FF6B6B;
}

/* 响应式：小屏幕堆叠显示 */
@media (max-width: 500px) {
  .battle-mode-selector {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  
  .battle-mode-card {
    padding: 14px;
  }
  
  .mode-title {
    font-size: 15px;
  }
}

/* 保留旧样式兼容（可能有其他地方用到） */
.battle-mode-panel {
  margin: 16px auto 14px;
  max-width: 560px;
}

.battle-mode-note {
  margin-top: 10px;
  font-size: 12px;
  color: #FF6B6B;
  text-align: center;
}

.waiting-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

/* 对战进行中 */
.battle-playing {
  padding: 20px;
}

.battle-game-container {
  max-width: 800px;
  margin: 0 auto;
  width: 100%;
}

/* 顶部状态栏 */
.battle-status-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  background: linear-gradient(135deg, rgba(255,255,255,0.95), rgba(255,235,238,0.95));
  border-radius: 20px;
  margin-bottom: 24px;
  box-shadow: 0 8px 30px rgba(255, 107, 107, 0.2);
}

.battle-player {
  display: flex;
  align-items: center;
  gap: 12px;
}

.battle-player.guest {
  flex-direction: row-reverse;
}

.battle-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #E0E0E0;
}

.battle-player.host .battle-avatar {
  border-color: #FF6B6B;
}

.battle-player.guest .battle-avatar {
  border-color: #42A5F5;
}

.battle-name {
  font-size: 14px;
  font-weight: bold;
  color: var(--text-dark);
}

.battle-score {
  font-size: 24px;
  font-weight: bold;
  color: #FF6B6B;
}

.battle-player.guest .battle-score {
  color: #42A5F5;
}

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

.battle-mode-label {
  margin-top: 6px;
  font-size: 12px;
  color: #FF6B6B;
  font-weight: 600;
}

.battle-maze-area {
  margin-top: 20px;
  padding: 18px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(229, 246, 255, 0.95));
  border-radius: 24px;
  box-shadow: 0 12px 30px rgba(66, 165, 245, 0.2);
  border: 3px solid rgba(66, 165, 245, 0.2);
  touch-action: none;
}

.battle-maze-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
}

.maze-title {
  font-size: 18px;
  font-weight: bold;
  color: var(--text-dark);
}

.maze-subtitle {
  font-size: 12px;
  color: var(--text-light);
}

.battle-maze-canvas-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
  touch-action: none;
}

#battleMazeCanvas {
  width: 100%;
  max-width: 900px;
  height: auto;
  border-radius: 18px;
  border: 3px solid rgba(255, 182, 193, 0.6);
  background: #FFF7E6;
  box-shadow: inset 0 0 20px rgba(255, 205, 210, 0.4);
  touch-action: none;
}

.battle-maze-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 16px;
}

.maze-hints {
  text-align: left;
  font-size: 12px;
  color: var(--text-light);
  line-height: 1.6;
}

.battle-maze-hint {
  margin-top: 12px;
  padding: 10px 14px;
  border-radius: 14px;
  background: rgba(255, 244, 214, 0.8);
  color: #7A3E00;
  font-size: 12px;
  text-align: center;
}

.battle-maze-scoreboard {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.9);
  border: 2px dashed rgba(66, 165, 245, 0.3);
}

.maze-score-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: 8px;
}

.maze-score-list {
  display: grid;
  gap: 6px;
}

.maze-score-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  padding: 6px 10px;
  border-radius: 10px;
  background: rgba(227, 242, 253, 0.7);
}

.maze-score-item.self {
  background: rgba(255, 224, 178, 0.7);
  font-weight: 600;
}

.battle-word-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 40;
  padding: 20px;
}

.battle-word-card {
  width: min(420px, 92vw);
  background: #fff;
  border-radius: 22px;
  padding: 20px 22px;
  text-align: center;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.2);
  border: 3px solid rgba(255, 154, 162, 0.35);
}

.battle-word-title {
  font-size: 16px;
  font-weight: bold;
  color: var(--text-dark);
  margin-bottom: 10px;
}

.battle-word-main {
  font-size: 22px;
  font-weight: bold;
  letter-spacing: 1px;
  color: #FF6B6B;
  margin-bottom: 6px;
}

.battle-word-meaning {
  font-size: 13px;
  color: var(--text-light);
  margin-bottom: 8px;
}

.battle-word-blank {
  font-size: 20px;
  letter-spacing: 2px;
  color: #42A5F5;
  margin-bottom: 12px;
}

.battle-word-card input {
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 2px solid rgba(66, 165, 245, 0.35);
  font-family: inherit;
  font-size: 14px;
  margin-bottom: 12px;
}

.battle-word-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.battle-word-btn {
  padding: 8px 14px;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
}

.battle-word-btn.primary {
  background: linear-gradient(135deg, #FF6B6B, #FF8E53);
  color: white;
}

.battle-word-btn.ghost {
  background: rgba(255, 235, 238, 0.8);
  color: #FF6B6B;
}

.battle-word-tip {
  margin-top: 8px;
  font-size: 12px;
  color: #FF6B6B;
  min-height: 16px;
}

@media (max-width: 768px) {
  .battle-playing {
    padding: 12px;
  }

  .battle-game-container {
    max-width: none;
  }

  .battle-maze-area {
    padding: 12px;
    margin-top: 14px;
  }

  .battle-maze-canvas-wrap {
    padding: 6px;
  }

  .battle-mode-panel {
    padding: 16px;
  }

  .battle-mode-option {
    grid-template-columns: 18px 1fr;
    padding: 10px 12px;
  }

  .battle-maze-controls {
    flex-direction: column;
    align-items: center;
  }

  .maze-hints {
    text-align: center;
  }

  .battle-mode-settings {
    flex-direction: column;
    align-items: flex-start;
  }
}

.question-progress {
  font-size: 14px;
  color: var(--text-light);
  margin-bottom: 8px;
}

/* 倒计时 */
.battle-timer {
  position: relative;
}

.timer-ring {
  width: 60px;
  height: 60px;
  position: relative;
}

.timer-ring svg {
  transform: rotate(-90deg);
}

.timer-bg {
  fill: none;
  stroke: #E0E0E0;
  stroke-width: 4;
}

.timer-bar {
  fill: none;
  stroke: #FF6B6B;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 113;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1s linear, stroke 0.3s;
}

.timer-bar.warning {
  stroke: #FFA000;
}

.timer-bar.danger {
  stroke: #E53935;
}

.timer-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: bold;
  color: #FF6B6B;
}

/* 题目区域 */
.battle-question-area {
  background: white;
  border-radius: 24px;
  padding: 32px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
  margin-bottom: 24px;
}

.question-category {
  display: inline-block;
  padding: 6px 16px;
  background: linear-gradient(135deg, #E3F2FD, #BBDEFB);
  color: #1565C0;
  border-radius: 20px;
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 20px;
}

.question-content {
  font-size: 20px;
  color: var(--text-dark);
  line-height: 1.8;
  margin-bottom: 30px;
  min-height: 60px;
}

/* 选项 */
.question-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.question-options:focus,
.question-options:focus-visible {
  outline: none;
  box-shadow: none;
}

.option-btn {
  padding: 20px 24px;
  border: 3px solid #E0E0E0;
  border-radius: 16px;
  background: white;
  font-family: inherit;
  font-size: 16px;
  color: var(--text-dark);
  cursor: pointer;
  transition: all 0.2s;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}

.option-btn:focus,
.option-btn:focus-visible {
  outline: none;
  box-shadow: none;
}

.option-btn:hover:not(:disabled) {
  border-color: #42A5F5;
  background: rgba(66, 165, 245, 0.05);
  transform: translateY(-2px);
}

@media (hover: none), (pointer: coarse) {
  .option-btn:hover:not(:disabled) {
    border-color: #E0E0E0;
    background: white;
    transform: none;
  }
  .option-btn:active:not(:disabled) {
    border-color: #E0E0E0;
    background: white;
  }
}

.option-btn.selected {
  border-color: #42A5F5;
  background: rgba(66, 165, 245, 0.1);
}

.option-btn.correct {
  border-color: #43A047;
  background: rgba(67, 160, 71, 0.1);
  color: #43A047;
}

.option-btn.wrong {
  border-color: #E53935;
  background: rgba(229, 57, 53, 0.1);
  color: #E53935;
}

.option-btn:disabled {
  cursor: not-allowed;
  opacity: 0.7;
}

.option-label {
  font-weight: bold;
  margin-right: 10px;
  color: #42A5F5;
}

/* 答题反馈 */
.battle-feedback {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 100;
}

.feedback-content {
  text-align: center;
  animation: feedbackIn 0.3s ease;
}

@keyframes feedbackIn {
  from { transform: scale(0.5); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.feedback-icon {
  font-size: 80px;
  margin-bottom: 16px;
}

.feedback-icon.correct {
  color: #43A047;
}

.feedback-icon.wrong {
  color: #E53935;
}

.feedback-text {
  font-size: 28px;
  font-weight: bold;
  color: white;
  margin-bottom: 12px;
}

.feedback-score {
  font-size: 36px;
  font-weight: bold;
  color: #FFD700;
}

/* 多人对战列表 */
.waiting-players-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin-top: 16px;
  position: relative;
}

.waiting-player-card {
  background: rgba(255, 255, 255, 0.85);
  border-radius: 16px;
  padding: 12px;
  text-align: center;
  border: 1px solid rgba(125, 200, 78, 0.2);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.waiting-player-card.hit-fan {
  animation: battleCardBlow 0.6s ease;
}

.waiting-player-card.hit-poop {
  animation: battleCardShake 0.55s ease;
}

.waiting-player-card.hit-flower {
  animation: battleCardGlow 0.7s ease;
}

.waiting-player-card.hit-water {
  animation: battleCardSplash 0.7s ease;
}

.waiting-avatar-stack {
  position: relative;
  width: 96px;
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.waiting-frog-hero {
  width: 86px;
  height: 86px;
  object-fit: contain;
  animation: battleFrogFloat 2.2s ease-in-out infinite;
  cursor: pointer;
}

.waiting-avatar-mini {
  position: absolute;
  right: -6px;
  bottom: -6px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid #fff;
  background: #fff;
  object-fit: cover;
  box-shadow: 0 4px 10px rgba(0,0,0,0.12);
}

/* 访客昵称首字 */
.waiting-avatar-initial {
  position: absolute;
  right: -6px;
  bottom: -6px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid #fff;
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(0,0,0,0.12);
}

.waiting-frog {
  width: 92px;
  height: 92px;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(255,255,255,0.95), rgba(232,245,233,0.9));
  border: 2px solid rgba(125, 200, 78, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 16px rgba(0,0,0,0.08);
  position: relative;
}

.waiting-frog-img {
  width: 70px;
  height: 70px;
  object-fit: contain;
  animation: battleFrogFloat 2.2s ease-in-out infinite;
  cursor: pointer;
}

.waiting-frog-img.hit-flower {
  animation: battleFrogGlow 0.6s ease;
}

.waiting-frog-img.hit-poop {
  animation: battleFrogShake 0.5s ease;
}

.waiting-frog-img.hit-fan {
  animation: battleFrogBlow 0.6s ease;
}

.waiting-frog-img.hit-water {
  animation: battleFrogSplash 0.6s ease;
}

.waiting-frog-img.poke,
.battle-frog-badge.poke,
.waiting-frog-hero.poke {
  animation: battleFrogPoke 0.4s ease;
}

.waiting-player-actions {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}

.battle-action-btn {
  border: none;
  background: #FFF8E1;
  border-radius: 12px;
  padding: 6px 10px;
  cursor: pointer;
  font-size: 16px;
  transition: transform 0.15s ease;
}

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

.battle-action-btn.flower {
  background: #FFE3E3;
}

.battle-action-btn.poop {
  background: #EDE7F6;
}

.battle-action-btn.fan {
  background: #E0F7FA;
}

.battle-action-btn.water {
  background: #E3F2FD;
}

.battle-avatar-wrap {
  position: relative;
  width: 48px;
  height: 48px;
  margin: 0 auto 6px;
  flex-shrink: 0;
}

.battle-avatar-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #E8F5E9;
  background: #fff;
}

.battle-frog-badge {
  position: absolute;
  right: -6px;
  bottom: -6px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid #fff;
  background: #fff;
  box-shadow: 0 4px 10px rgba(0,0,0,0.12);
  animation: battleFrogFloat 2.2s ease-in-out infinite;
  cursor: pointer;
}

.battle-frog-badge.poke {
  animation: battleFrogPoke 0.4s ease;
}

.waiting-frog-hero.hit-flower {
  animation: battleFrogGlow 0.6s ease;
}

.waiting-frog-hero.hit-poop {
  animation: battleFrogShake 0.5s ease;
}

.waiting-frog-hero.hit-fan {
  animation: battleFrogBlow 0.6s ease;
}

.waiting-frog-hero.hit-water {
  animation: battleFrogSplash 0.6s ease;
}

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

@keyframes battleFrogPoke {
  0% { transform: scale(1); }
  50% { transform: scale(1.15) rotate(6deg); }
  100% { transform: scale(1); }
}

@keyframes battleFrogGlow {
  0% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(255, 182, 193, 0)); }
  50% { transform: scale(1.16) rotate(4deg); filter: drop-shadow(0 0 18px rgba(255, 105, 180, 0.7)); }
  100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(255, 182, 193, 0)); }
}

@keyframes battleFrogShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-4px) rotate(-2deg); }
  40% { transform: translateX(4px) rotate(2deg); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(3px); }
}

@keyframes battleFrogGlow {
  0% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(255, 182, 193, 0)); }
  50% { transform: scale(1.16) rotate(4deg); filter: drop-shadow(0 0 18px rgba(255, 105, 180, 0.7)); }
  100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(255, 182, 193, 0)); }
}

@keyframes battleFrogShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-4px) rotate(-2deg); }
  40% { transform: translateX(4px) rotate(2deg); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(3px); }
}

.battle-interact-emoji {
  position: absolute;
  font-size: 24px;
  pointer-events: none;
  transition: transform 0.6s ease;
  z-index: 5;
}

.battle-interact-emoji.flower {
  filter: drop-shadow(0 6px 10px rgba(255, 105, 180, 0.35));
}

.battle-interact-emoji.poop {
  filter: drop-shadow(0 6px 10px rgba(111, 78, 55, 0.35));
}

.battle-interact-emoji.flower {
  animation: flowerSpin 0.7s ease;
}

.battle-interact-emoji.fan {
  filter: drop-shadow(0 6px 10px rgba(0, 150, 136, 0.35));
}

.battle-interact-emoji.water {
  filter: drop-shadow(0 6px 10px rgba(33, 150, 243, 0.35));
}

.battle-interact-burst {
  position: absolute;
  font-size: 20px;
  pointer-events: none;
  z-index: 6;
  animation: burstFade 0.6s ease;
}

.battle-interact-burst.poop {
  animation: burstDrop 0.8s ease;
}

.battle-interact-splash {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #8D6E63;
  opacity: 0.8;
  animation: splashPop 0.7s ease;
  z-index: 4;
}

.battle-interact-petal {
  position: absolute;
  font-size: 18px;
  pointer-events: none;
  z-index: 6;
  animation: petalFloat 0.9s ease;
}

.battle-interact-poop-cloud {
  position: absolute;
  font-size: 22px;
  pointer-events: none;
  z-index: 5;
  animation: poopCloud 0.9s ease;
  filter: drop-shadow(0 4px 6px rgba(121, 85, 72, 0.35));
}

@keyframes splashPop {
  0% { transform: scale(0.6); opacity: 0; }
  50% { transform: scale(1.4); opacity: 0.9; }
  100% { transform: scale(0.8); opacity: 0; }
}

@keyframes petalFloat {
  0% { transform: translateY(6px) scale(0.8); opacity: 0; }
  40% { opacity: 1; }
  100% { transform: translateY(-18px) scale(1.1) rotate(12deg); opacity: 0; }
}

@keyframes poopCloud {
  0% { transform: translateY(4px) scale(0.8); opacity: 0; }
  40% { opacity: 1; }
  100% { transform: translateY(-12px) scale(1.1); opacity: 0; }
}

@keyframes flowerSpin {
  0% { transform: scale(0.9) rotate(0deg); }
  100% { transform: scale(1.1) rotate(20deg); }
}

.battle-interact-trail {
  position: absolute;
  font-size: 14px;
  pointer-events: none;
  opacity: 0.9;
  z-index: 4;
  animation: trailFade 0.5s ease;
}

.battle-interact-trail.flower {
  color: #FFB6C1;
}

.battle-interact-trail.poop {
  color: #BCAAA4;
}

.battle-interact-trail.fan {
  color: #80DEEA;
}

.battle-interact-trail.water {
  color: #64B5F6;
}

.battle-interact-gust {
  position: absolute;
  font-size: 26px;
  pointer-events: none;
  z-index: 6;
  animation: gustBlow 0.95s ease;
}

.battle-interact-water {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #64B5F6;
  opacity: 0.85;
  animation: splashPop 0.85s ease;
  z-index: 5;
}

.battle-interact-waterfall {
  position: absolute;
  width: 48px;
  height: 60px;
  border-radius: 0 0 18px 18px;
  background: linear-gradient(180deg, rgba(33,150,243,0.55), rgba(129,212,250,0.2));
  animation: waterPour 0.85s ease;
  pointer-events: none;
  z-index: 4;
}

@keyframes trailFade {
  0% { opacity: 0; transform: scale(0.6); }
  50% { opacity: 1; transform: scale(1.1); }
  100% { opacity: 0; transform: scale(0.8); }
}

@keyframes gustBlow {
  0% { transform: translateX(-10px) scale(0.7); opacity: 0; }
  30% { opacity: 1; }
  100% { transform: translateX(54px) scale(1.55); opacity: 0; }
}

@keyframes waterPour {
  0% { transform: translateY(-12px) scaleY(0.5); opacity: 0; }
  40% { opacity: 1; }
  100% { transform: translateY(10px) scaleY(1.1); opacity: 0; }
}

@keyframes battleFrogBlow {
  0% { transform: translateX(0); }
  25% { transform: translateX(16px) rotate(5deg); }
  55% { transform: translateX(-10px) rotate(-4deg); }
  100% { transform: translateX(0) rotate(0); }
}

@keyframes battleFrogSplash {
  0% { transform: scale(1); filter: saturate(1); }
  35% { transform: scale(0.88) rotate(-2deg); filter: saturate(1.6); }
  70% { transform: scale(0.96) rotate(1deg); filter: saturate(1.2); }
  100% { transform: scale(1); filter: saturate(1); }
}

@keyframes battleCardBlow {
  0% { transform: translateX(0); }
  25% { transform: translateX(18px) rotate(2deg); }
  55% { transform: translateX(-12px) rotate(-2deg); }
  100% { transform: translateX(0); }
}

@keyframes battleCardShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px) rotate(-1deg); }
  40% { transform: translateX(6px) rotate(1deg); }
  60% { transform: translateX(-5px); }
  80% { transform: translateX(5px); }
}

@keyframes battleCardGlow {
  0% { transform: scale(1); box-shadow: 0 0 0 rgba(255, 182, 193, 0); }
  50% { transform: scale(1.03); box-shadow: 0 0 24px rgba(255, 105, 180, 0.35); }
  100% { transform: scale(1); box-shadow: 0 0 0 rgba(255, 182, 193, 0); }
}

@keyframes battleCardSplash {
  0% { transform: scale(1); box-shadow: 0 0 0 rgba(129, 212, 250, 0); }
  45% { transform: scale(0.98) rotate(-1deg); box-shadow: 0 0 24px rgba(129, 212, 250, 0.45); }
  100% { transform: scale(1); box-shadow: 0 0 0 rgba(129, 212, 250, 0); }
}

.battle-frog-bubble {
  position: absolute;
  top: -34px;
  left: 50%;
  transform: translateX(-50%) scale(0.95);
  background: #fff;
  border: 1px solid rgba(125, 200, 78, 0.4);
  border-radius: 12px;
  padding: 4px 8px;
  font-size: 12px;
  color: #5D4037;
  white-space: nowrap;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 4px 10px rgba(0,0,0,0.08);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.battle-frog-bubble::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  border-width: 6px 6px 0 6px;
  border-style: solid;
  border-color: #fff transparent transparent transparent;
}

.battle-frog-bubble.show {
  opacity: 1;
  transform: translateX(-50%) scale(1);
}

.battle-frog-bubble {
  position: absolute;
  top: -34px;
  left: 50%;
  transform: translateX(-50%) scale(0.95);
  background: #fff;
  border: 1px solid rgba(125, 200, 78, 0.4);
  border-radius: 12px;
  padding: 4px 8px;
  font-size: 12px;
  color: #5D4037;
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 4px 10px rgba(0,0,0,0.08);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.battle-frog-bubble::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  border-width: 6px 6px 0 6px;
  border-style: solid;
  border-color: #fff transparent transparent transparent;
}

.battle-frog-bubble.show {
  opacity: 1;
  transform: translateX(-50%) scale(1);
}

@keyframes burstFade {
  0% { opacity: 0; transform: scale(0.6); }
  50% { opacity: 1; transform: scale(1.1); }
  100% { opacity: 0; transform: scale(0.8); }
}

@keyframes burstDrop {
  0% { opacity: 0; transform: translateY(-8px) scale(0.6); }
  60% { opacity: 1; transform: translateY(4px) scale(1); }
  100% { opacity: 0; transform: translateY(10px) scale(0.9); }
}

.waiting-player-name {
  font-weight: 600;
  font-size: 14px;
  color: #333;
}

.waiting-player-status {
  font-size: 12px;
  color: #666;
  margin-top: 4px;
}

.waiting-player-status.ready {
  color: #2E7D32;
}

.battle-player-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 12px;
}

.battle-player-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 999px;
  padding: 6px 12px;
  border: 1px solid rgba(125, 200, 78, 0.2);
  font-size: 13px;
}

.battle-player-chip .battle-avatar-wrap {
  width: 28px;
  height: 28px;
  margin: 0;
}

.battle-player-chip .battle-avatar-img {
  border-width: 1px;
}

.battle-player-chip .battle-frog-badge {
  width: 16px;
  height: 16px;
  right: -4px;
  bottom: -4px;
  border-width: 1px;
}

.battle-player-score {
  font-weight: 700;
  color: #2E7D32;
}

.result-player-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.result-player-card {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 16px;
  padding: 12px;
  text-align: center;
  border: 1px solid rgba(125, 200, 78, 0.2);
}

.result-player-card img {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  margin-bottom: 6px;
}

.result-player-name {
  font-weight: 600;
  font-size: 14px;
  color: #333;
}

.result-player-score {
  font-size: 20px;
  font-weight: 700;
  color: #2E7D32;
}

.result-player-badge {
  display: inline-block;
  margin-top: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #FFD54F;
  color: #8D6E63;
  font-size: 12px;
}

.opponent-status {
  margin-top: 20px;
  font-size: 16px;
  color: rgba(255, 255, 255, 0.8);
}

/* 对战结果 */
.battle-result {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 500px;
  padding: 20px;
}

.result-container {
  background: linear-gradient(135deg, rgba(255,255,255,0.98), rgba(255,235,238,0.98));
  border-radius: 32px;
  padding: 40px;
  max-width: 700px;
  width: 100%;
  box-shadow: 0 20px 60px rgba(255, 107, 107, 0.3);
  border: 4px solid rgba(255, 107, 107, 0.3);
  text-align: center;
}

.result-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 40px;
}

.result-emoji {
  font-size: 60px;
  animation: bounce 1s ease-in-out infinite;
}

.result-text {
  font-size: 42px;
  font-weight: bold;
  background: linear-gradient(135deg, #FF6B6B, #FF8E53);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.result-text.lose {
  background: linear-gradient(135deg, #90A4AE, #607D8B);
  -webkit-background-clip: text;
  background-clip: text;
}

.result-text.draw {
  background: linear-gradient(135deg, #FFA000, #FF6F00);
  -webkit-background-clip: text;
  background-clip: text;
}

/* 比分展示 */
.result-scores {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  margin-bottom: 40px;
}

.result-player {
  text-align: center;
  position: relative;
}

.result-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid #E0E0E0;
  margin-bottom: 12px;
}

.result-player.host .result-avatar {
  border-color: #FF6B6B;
}

.result-player.guest .result-avatar {
  border-color: #42A5F5;
}

.result-name {
  font-size: 16px;
  font-weight: bold;
  color: var(--text-dark);
  margin-bottom: 8px;
}

.result-score {
  font-size: 36px;
  font-weight: bold;
  color: #FF6B6B;
}

.result-player.guest .result-score {
  color: #42A5F5;
}

.result-badge {
  position: absolute;
  top: -10px;
  right: -10px;
  padding: 6px 14px;
  background: linear-gradient(135deg, #FFD700, #FFA000);
  color: white;
  border-radius: 12px;
  font-size: 14px;
  font-weight: bold;
  box-shadow: 0 4px 12px rgba(255, 215, 0, 0.4);
}

.result-vs {
  font-size: 24px;
  font-weight: bold;
  color: #BDBDBD;
}

/* 答题详情 */
.result-details {
  background: rgba(0, 0, 0, 0.03);
  border-radius: 20px;
  padding: 24px;
  margin-bottom: 30px;
  text-align: left;
}

.result-details h4 {
  font-size: 16px;
  color: var(--text-dark);
  margin-bottom: 16px;
  text-align: center;
}

.result-answers {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 250px;
  overflow-y: auto;
}

.answer-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: white;
  border-radius: 12px;
}

.answer-num {
  font-weight: bold;
  color: var(--text-light);
  min-width: 30px;
}

.answer-content {
  flex: 1;
  font-size: 14px;
  color: var(--text-dark);
}

.answer-result {
  display: flex;
  gap: 20px;
}

.answer-host, .answer-guest {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
}

.answer-host .correct { color: #43A047; }
.answer-host .wrong { color: #E53935; }
.answer-guest .correct { color: #43A047; }
.answer-guest .wrong { color: #E53935; }

.result-actions {
  display: flex;
  gap: 16px;
  justify-content: center;
}

/* 响应式 */
@media (max-width: 900px) {
  .battle-layout {
    grid-template-columns: 1fr;
  }
  
  .my-battle-stats {
    grid-template-columns: repeat(4, 1fr);
  }
  
  .question-options {
    grid-template-columns: 1fr;
  }
  
  .battle-header {
    margin-bottom: 20px;
  }
  
  .battle-header h2 {
    font-size: 24px;
  }
  
  .page-desc {
    font-size: 14px;
  }
}

@media (max-width: 600px) {
  /* 对战大厅整体 */
  .battle-lobby {
    padding-bottom: 120px;
  }
  
  .battle-header {
    margin-bottom: 16px;
  }
  
  .battle-layout {
    gap: 16px;
  }
  
  .battle-actions-zone,
  .battle-ranking-zone {
    gap: 16px;
  }
  
  .waiting-players {
    flex-direction: column;
    gap: 20px;
  }
  
  .vs-badge {
    transform: rotate(90deg);
  }
  
  .battle-status-bar {
    flex-direction: column;
    gap: 16px;
    padding: 12px 16px;
  }
  
  .battle-player.guest {
    flex-direction: row;
  }
  
  .result-scores {
    flex-direction: column;
    gap: 20px;
  }
  
  .result-vs {
    transform: rotate(90deg);
  }
  
  .my-battle-stats {
    grid-template-columns: repeat(2, 1fr);
  }
  
  /* 移动端对战大厅卡片 */
  .battle-card {
    padding: 16px;
    border-radius: 16px;
  }
  
  .battle-card-header {
    margin-bottom: 12px;
  }
  
  .battle-card-header .card-emoji {
    font-size: 24px;
  }
  
  .battle-card-header h3 {
    font-size: 15px;
  }
  
  .battle-card-desc {
    font-size: 13px;
    margin-bottom: 12px;
  }
  
  .battle-btn {
    padding: 12px 16px;
    font-size: 14px;
    border-radius: 12px;
  }
  
  .join-room-input {
    flex-direction: column;
    gap: 10px;
  }
  
  .join-room-input input {
    font-size: 22px;
    letter-spacing: 6px;
    padding: 12px 14px;
  }
  
  /* 我的战绩 */
  .stat-item {
    padding: 12px 6px;
  }
  
  .stat-value {
    font-size: 22px;
  }
  
  .stat-label {
    font-size: 11px;
  }
  
  /* 排行榜 */
  .battle-ranking-list {
    max-height: 200px;
  }
  
  /* 等待中的房间 */
  .waiting-rooms-list {
    max-height: 150px;
  }
  
  /* 移动端等待室 */
  .battle-waiting {
    min-height: auto;
    padding: 20px 10px;
    align-items: flex-start;
  }
  
  .waiting-container {
    padding: 20px 16px;
    margin: 0;
    width: 100%;
    box-sizing: border-box;
  }
  
  .waiting-header {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .waiting-room-info {
    text-align: left;
  }
  
  .room-code {
    font-size: 32px;
    letter-spacing: 6px;
  }
  
  .copy-code-btn {
    padding: 8px 16px;
    font-size: 13px;
  }

  .waiting-actions {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
  }
  
  .player-avatar {
    width: 70px;
    height: 70px;
  }
  
  .player-name {
    font-size: 14px;
  }
  
  .player-badge {
    font-size: 11px;
    padding: 3px 10px;
  }

  .waiting-players-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .waiting-player-card {
    padding: 10px 8px 12px;
  }

  .waiting-player-actions {
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
  }

  .battle-action-btn {
    padding: 4px 8px;
    font-size: 14px;
  }
  
  .vs-badge {
    font-size: 28px;
  }
  
  .waiting-tips {
    flex-direction: column;
    text-align: center;
    padding: 12px 16px;
    margin-bottom: 20px;
  }
  
  .waiting-tips .tip-icon {
    font-size: 20px;
  }
  
  .waiting-tips p {
    font-size: 13px;
  }
  
  .waiting-actions {
    flex-direction: column;
    gap: 12px;
  }
  
  .waiting-actions .battle-btn {
    width: 100%;
  }
  
  /* 移动端对战进行中 */
  .battle-playing {
    padding: 10px;
  }
  
  .battle-avatar {
    width: 40px;
    height: 40px;
  }
  
  .battle-name {
    font-size: 12px;
  }
  
  .battle-score {
    font-size: 18px;
  }
  
  .timer-ring {
    width: 50px;
    height: 50px;
  }
  
  .timer-text {
    font-size: 16px;
  }
  
  .battle-question-area {
    padding: 20px 16px;
    border-radius: 16px;
  }
  
  .question-content {
    font-size: 16px;
    line-height: 1.6;
  }
  
  .option-btn {
    padding: 14px 16px;
    font-size: 14px;
  }
  
  /* 移动端对战结果 */
  .result-container {
    padding: 24px 16px;
    margin: 0 10px;
  }
  
  .result-emoji {
    font-size: 48px;
  }
  
  .result-text {
    font-size: 32px;
  }
  
  .result-avatar {
    width: 60px;
    height: 60px;
  }
  
  .result-score {
    font-size: 28px;
  }
  
  .result-details {
    padding: 16px;
  }
  
  .answer-row {
    flex-wrap: wrap;
    gap: 8px;
  }
  
  .answer-content {
    width: 100%;
    order: 1;
  }
  
  .answer-num {
    order: 0;
  }
  
  .answer-result {
    order: 2;
    width: 100%;
    justify-content: flex-end;
  }
  
  .result-actions {
    flex-direction: column;
    gap: 12px;
  }
  
  .result-actions .battle-btn {
    width: 100%;
  }
  
  /* 排行榜移动端适配 */
  .battle-rank-item {
    padding: 10px 12px;
  }
  
  .rank-avatar {
    width: 32px;
    height: 32px;
  }
  
  .rank-name {
    font-size: 13px;
  }
  
  .rank-stats {
    font-size: 11px;
  }
  
  .rank-score {
    font-size: 16px;
  }
}

/* 更小的屏幕 */
@media (max-width: 400px) {
  .stat-item {
    padding: 12px 4px;
  }
  
  .stat-value {
    font-size: 22px;
  }
  
  .stat-label {
    font-size: 11px;
  }
  
  .room-code {
    font-size: 28px;
    letter-spacing: 4px;
  }
  
  .battle-question-area {
    padding: 16px 12px;
  }
  
  .question-content {
    font-size: 15px;
  }
  
  .option-btn {
    padding: 12px 14px;
    font-size: 13px;
  }
}

/* ========== 对战加载动画 ========== */
.battle-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  gap: 20px;
}

.loading-spinner-battle {
  width: 60px;
  height: 60px;
  border: 5px solid rgba(255, 107, 107, 0.2);
  border-top-color: #FF6B6B;
  border-radius: 50%;
  animation: battleSpin 1s linear infinite;
}

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

.battle-loading .loading-text {
  font-size: 18px;
  font-weight: bold;
  color: #FF6B6B;
  animation: battleLoadingPulse 1.5s ease-in-out infinite;
}

@keyframes battleLoadingPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

.loading-dots {
  display: flex;
  gap: 8px;
}

.loading-dots span {
  width: 10px;
  height: 10px;
  background: #FF6B6B;
  border-radius: 50%;
  animation: loadingDots 1.4s ease-in-out infinite;
}

.loading-dots span:nth-child(1) { animation-delay: 0s; }
.loading-dots span:nth-child(2) { animation-delay: 0.2s; }
.loading-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes loadingDots {
  0%, 80%, 100% {
    transform: scale(0.6);
    opacity: 0.5;
  }
  40% {
    transform: scale(1);
    opacity: 1;
  }
}

/* ========== 成就徽章系统 ========== */

/* 首页3列布局 */
/* 底部两列布局：小组+徽章 */
.home-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 20px;
  align-items: stretch;
}

.home-grid-2 > * {
  height: 100%;
  min-height: 180px;
}

.home-grid-2 .group-card {
  height: 100%;
}

.home-grid-2 .badge-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.home-grid-2 .badge-preview-list {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;  /* 重要：允许 flex 子元素收缩 */
}

/* 响应式 */
@media (max-width: 1024px) {
  .home-top-zone {
    grid-template-columns: 1fr minmax(280px, 360px);
  }
}

@media (max-width: 900px) {
  .home-top-zone {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  .calendar-zone {
    order: -1;
  }
}

@media (max-width: 700px) {
  .home-grid-2 {
    grid-template-columns: 1fr;
  }
}

/* 首页徽章预览卡片 */
.badge-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: hidden;
}

.badge-card .badge-preview-more {
  flex-shrink: 0;
  margin-top: 8px;
}

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

.badge-preview-title {
  font-size: 18px;
  font-weight: bold;
  color: var(--text-dark);
}

.badge-preview-count {
  font-size: 14px;
  color: var(--text-light);
  background: linear-gradient(135deg, #FFD93D, #FFA500);
  padding: 4px 12px;
  border-radius: 20px;
  color: white;
  font-weight: bold;
}

.badge-preview-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
  gap: 8px 8px;
  padding-top: 8px;
  padding-bottom: 4px;
  overflow: visible;
  align-content: start;
}

/* 成就预览滚动容器 - 按行高度计算，避免截断 */
.badge-preview-scroll {
  /* 每行高度约 72px (52px图标 + 4px间距 + 16px文字) + 8px行间距 */
  max-height: calc(72px * 3 + 8px * 2);  /* 显示3行 */
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(125, 200, 78, 0.5) transparent;
}

.badge-preview-scroll::-webkit-scrollbar {
  width: 4px;
}

.badge-preview-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.badge-preview-scroll::-webkit-scrollbar-thumb {
  background: rgba(125, 200, 78, 0.5);
  border-radius: 4px;
}

.badge-preview-scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(125, 200, 78, 0.7);
}

.badge-preview-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.badge-preview-item:hover {
  transform: scale(1.1);
}

.badge-preview-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.2);
  animation: badgeFloat 3s ease-in-out infinite;
}

.badge-preview-item:nth-child(2) .badge-preview-icon {
  animation-delay: 0.5s;
}

.badge-preview-item:nth-child(3) .badge-preview-icon {
  animation-delay: 1s;
}

.badge-preview-name {
  font-size: 12px;
  color: var(--text-dark);
  font-weight: 600;
  text-align: center;
  max-width: 70px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

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

.badge-preview-empty {
  color: var(--text-light);
  font-size: 15px;
  text-align: center;
  flex: 1;
  padding: 20px 0;
}

.badge-preview-more {
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: white;
  border: none;
  padding: 10px 16px;
  border-radius: 12px;
  flex-shrink: 0;
  font-family: inherit;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-top: auto;
}

.badge-preview-more:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(125, 200, 78, 0.4);
}

/* 成就预览响应式 - 平板 */
@media (max-width: 1024px) {
  .badge-preview-list {
    grid-template-columns: repeat(auto-fill, minmax(55px, 1fr));
    gap: 8px 6px;
  }
  
  .badge-preview-icon {
    width: 48px;
    height: 48px;
    font-size: 24px;
  }
  
  .badge-preview-name {
    font-size: 11px;
    max-width: 60px;
  }
  
  /* 每行高度约 66px (48px图标 + 4px间距 + 14px文字) + 8px行间距 */
  .badge-preview-scroll {
    max-height: calc(66px * 3 + 8px * 2);
  }
}

/* 成就预览响应式 - 手机 */
@media (max-width: 768px) {
  .badge-preview-list {
    grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
    gap: 8px 6px;
  }
  
  .badge-preview-icon {
    width: 44px;
    height: 44px;
    font-size: 22px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  }
  
  .badge-preview-name {
    font-size: 10px;
    max-width: 55px;
  }
  
  .badge-preview-header {
    margin-bottom: 8px;
  }
  
  .badge-preview-more {
    padding: 8px 14px;
    font-size: 13px;
  }
  
  /* 每行高度约 60px (44px图标 + 4px间距 + 12px文字) + 8px行间距 */
  .badge-preview-scroll {
    max-height: calc(60px * 3 + 8px * 2);
  }
}

/* 成就预览响应式 - 小屏手机 */
@media (max-width: 480px) {
  .badge-preview-list {
    grid-template-columns: repeat(auto-fill, minmax(45px, 1fr));
    gap: 6px 4px;
  }
  
  .badge-preview-icon {
    width: 40px;
    height: 40px;
    font-size: 20px;
  }
  
  .badge-preview-name {
    font-size: 9px;
    max-width: 50px;
  }
  
  .badge-preview-count {
    font-size: 12px;
    padding: 3px 10px;
  }
  
  /* 每行高度约 54px (40px图标 + 4px间距 + 10px文字) + 6px行间距 */
  .badge-preview-scroll {
    max-height: calc(54px * 3 + 6px * 2);
  }
}

/* 个人中心徽章区域 */
.badges-section {
  margin-top: 24px;
  padding: 24px;
}

.badges-header {
  text-align: center;
  margin-bottom: 24px;
}

.badges-header h3 {
  font-size: 24px;
  color: var(--text-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.badges-icon {
  font-size: 28px;
}

.badges-subtitle {
  color: var(--text-light);
  margin-top: 8px;
  font-size: 14px;
}

.badges-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* 徽章分类 */
.badge-category {
  background: rgba(255, 255, 255, 0.5);
  border-radius: 16px;
  padding: 16px;
}

.badge-category-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 2px dashed rgba(125, 200, 78, 0.3);
}

.badge-category-icon {
  font-size: 24px;
}

.badge-category-name {
  font-size: 18px;
  font-weight: bold;
  color: var(--text-dark);
}

.badge-category-count {
  margin-left: auto;
  font-size: 14px;
  color: var(--text-light);
  background: rgba(125, 200, 78, 0.2);
  padding: 4px 12px;
  border-radius: 20px;
}

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

/* 单个徽章项 */
.badge-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  background: white;
  border-radius: 14px;
  transition: all 0.3s ease;
  border: 2px solid transparent;
}

.badge-item.unlocked {
  border-color: rgba(125, 200, 78, 0.4);
  box-shadow: 0 4px 12px rgba(125, 200, 78, 0.15);
}

.badge-item.unlocked:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(125, 200, 78, 0.25);
}

.badge-item.locked {
  opacity: 0.6;
  filter: grayscale(0.3);
}

.badge-item-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.badge-item.locked .badge-item-icon {
  background: linear-gradient(135deg, #E0E0E0, #BDBDBD);
}

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

.badge-item-name {
  font-size: 16px;
  font-weight: bold;
  color: var(--text-dark);
  margin-bottom: 4px;
}

.badge-item.locked .badge-item-name {
  color: #9E9E9E;
}

.badge-item-desc {
  font-size: 13px;
  color: var(--text-light);
  line-height: 1.4;
}

.badge-item-date {
  font-size: 12px;
  color: var(--primary);
  margin-top: 6px;
}

.badge-item-progress {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

.badge-progress-bar {
  flex: 1;
  height: 6px;
  background: rgba(0, 0, 0, 0.08);
  border-radius: 3px;
  overflow: hidden;
}

.badge-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  border-radius: 3px;
  transition: width 0.3s ease;
}

.badge-progress-text {
  font-size: 11px;
  color: var(--text-light);
  white-space: nowrap;
  min-width: 45px;
  text-align: right;
}

/* 徽章解锁弹窗 */
.badge-unlock-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.badge-unlock-modal.show {
  opacity: 1;
  visibility: visible;
}

.badge-unlock-content {
  background: white;
  border-radius: 24px;
  padding: 40px 50px;
  text-align: center;
  position: relative;
  overflow: hidden;
  transform: scale(0.8);
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  max-width: 90vw;
}

.badge-unlock-modal.show .badge-unlock-content {
  transform: scale(1);
}

.badge-unlock-confetti {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  background-image: 
    radial-gradient(circle at 20% 20%, #FFD93D 2px, transparent 2px),
    radial-gradient(circle at 80% 30%, #FF6B6B 2px, transparent 2px),
    radial-gradient(circle at 40% 80%, #7DC84E 2px, transparent 2px),
    radial-gradient(circle at 70% 70%, #A78BFA 2px, transparent 2px),
    radial-gradient(circle at 10% 60%, #4ECDC4 2px, transparent 2px),
    radial-gradient(circle at 90% 80%, #FFB6C1 2px, transparent 2px);
  background-size: 100% 100%;
  animation: confettiFloat 2s ease-in-out infinite;
}

@keyframes confettiFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); opacity: 0.8; }
  50% { transform: translateY(-10px) rotate(5deg); opacity: 1; }
}

.badge-unlock-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  filter: blur(60px);
  opacity: 0.3;
  animation: glowPulse 2s ease-in-out infinite;
}

@keyframes glowPulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.3; }
  50% { transform: translate(-50%, -50%) scale(1.2); opacity: 0.5; }
}

.badge-unlock-title {
  font-size: 24px;
  font-weight: bold;
  color: var(--text-dark);
  margin-bottom: 24px;
  animation: titleBounce 0.6s ease;
}

@keyframes titleBounce {
  0% { transform: translateY(-20px); opacity: 0; }
  60% { transform: translateY(5px); }
  100% { transform: translateY(0); opacity: 1; }
}

.badge-unlock-icon {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 50px;
  margin: 0 auto 20px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  animation: iconPop 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.2s both;
}

@keyframes iconPop {
  0% { transform: scale(0) rotate(-180deg); }
  100% { transform: scale(1) rotate(0deg); }
}

.badge-unlock-name {
  font-size: 28px;
  font-weight: bold;
  color: var(--text-dark);
  margin-bottom: 8px;
  animation: fadeInUp 0.5s ease 0.3s both;
}

.badge-unlock-desc {
  font-size: 16px;
  color: var(--text-light);
  margin-bottom: 28px;
  animation: fadeInUp 0.5s ease 0.4s both;
}

@keyframes fadeInUp {
  0% { transform: translateY(15px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

.badge-unlock-btn {
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: white;
  border: none;
  padding: 14px 40px;
  border-radius: 30px;
  font-family: inherit;
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  animation: fadeInUp 0.5s ease 0.5s both;
}

.badge-unlock-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(125, 200, 78, 0.4);
}

/* 响应式 */
@media (max-width: 600px) {
  .badge-category-list {
    grid-template-columns: 1fr;
  }
  
  .badge-unlock-content {
    padding: 30px 25px;
  }
  
  .badge-unlock-icon {
    width: 80px;
    height: 80px;
    font-size: 40px;
  }
  
  .badge-unlock-name {
    font-size: 22px;
  }
  
  .badge-unlock-desc {
    font-size: 14px;
  }
}

/* ========== 小青蛙宠物系统 ========== */

/* 可互动的小青蛙 */
.checkin-mascot {
  position: relative;
}

.interactive-frog-wrap {
  position: relative;
  width: 120px;
  height: 120px;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.interactive-frog-wrap:hover {
  transform: scale(1.1);
}

.interactive-frog-wrap:active {
  transform: scale(0.95);
}

.frog-body {
  width: 100%;
  height: 100%;
  animation: frogIdle 3s ease-in-out infinite;
}

@keyframes frogIdle {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-5px) rotate(2deg); }
}

/* 小青蛙装扮图标 */
.frog-outfit-icon {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 28px;
  filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.2));
  display: none;
  animation: outfitFloat 2s ease-in-out infinite;
}

@keyframes outfitFloat {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-3px); }
}

/* 心情指示器 */
.frog-mood-indicator {
  position: absolute;
  bottom: 5px;
  right: 5px;
  font-size: 20px;
  background: white;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

/* 小青蛙对话气泡 */
.frog-bubble {
  position: absolute;
  top: -15px;
  left: 100%;
  margin-left: 10px;
  background: white;
  padding: 10px 16px;
  border-radius: 20px;
  font-size: 14px;
  color: var(--text-dark);
  white-space: nowrap;
  box-shadow: 0 4px 15px rgba(0,0,0,0.15);
  opacity: 0;
  transform: translateX(-10px) scale(0.9);
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  pointer-events: none;
  z-index: 10;
}

.frog-bubble::before {
  content: '';
  position: absolute;
  left: -8px;
  top: 50%;
  transform: translateY(-50%);
  border: 8px solid transparent;
  border-right-color: white;
}

.frog-bubble.show {
  opacity: 1;
  transform: translateX(0) scale(1);
}

/* 打开面板按钮 - 换装入口 */
.frog-panel-btn {
  position: absolute;
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #E91E63, #9C27B0);
  border: 2px solid white;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 20px;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(156, 39, 176, 0.4);
  transition: all 0.3s ease;
  animation: btnPulse 2s ease-in-out infinite;
}

.frog-panel-btn:hover {
  transform: translateX(-50%) scale(1.15);
  box-shadow: 0 6px 20px rgba(156, 39, 176, 0.5);
}

/* 换装按钮提示文字 */
.frog-panel-btn::after {
  content: '换装';
  position: absolute;
  bottom: -22px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  color: #9C27B0;
  font-weight: bold;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.frog-panel-btn:hover::after {
  opacity: 1;
}

/* 小青蛙动作动画 */
.interactive-frog-wrap.action-jump .frog-body {
  animation: frogJump 0.6s ease;
}

@keyframes frogJump {
  0%, 100% { transform: translateY(0) scale(1); }
  30% { transform: translateY(-30px) scale(1.1, 0.9); }
  50% { transform: translateY(-35px) scale(0.9, 1.1); }
  70% { transform: translateY(-20px) scale(1.05, 0.95); }
}

.interactive-frog-wrap.action-happy .frog-body {
  animation: frogDance 0.4s ease infinite;
}

@keyframes frogDance {
  0%, 100% { transform: translateY(0) rotate(-5deg); }
  25% { transform: translateY(-10px) rotate(5deg); }
  50% { transform: translateY(0) rotate(-5deg); }
  75% { transform: translateY(-10px) rotate(5deg); }
}

.interactive-frog-wrap.action-wave .frog-body {
  animation: frogWave 0.5s ease;
}

@keyframes frogWave {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-15deg); }
  75% { transform: rotate(15deg); }
}

.interactive-frog-wrap.action-spin .frog-body {
  animation: frogSpin 0.8s ease;
}

@keyframes frogSpin {
  0% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(180deg) scale(1.1); }
  100% { transform: rotate(360deg) scale(1); }
}

.interactive-frog-wrap.action-eat .frog-body {
  animation: frogEat 0.8s ease;
}

@keyframes frogEat {
  0%, 100% { transform: scale(1); }
  25% { transform: scale(1.1, 0.9); }
  50% { transform: scale(0.9, 1.1); }
  75% { transform: scale(1.05, 0.95); }
}

.interactive-frog-wrap.action-love .frog-body {
  animation: frogLove 0.6s ease;
}

@keyframes frogLove {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.2); }
}

.interactive-frog-wrap.action-tired .frog-body {
  animation: frogTired 2s ease infinite;
}

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

/* 心情状态动画 */
.interactive-frog-wrap.mood-happy .frog-body {
  animation: frogHappy 1.5s ease-in-out infinite;
}

@keyframes frogHappy {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  25% { transform: translateY(-8px) rotate(3deg); }
  50% { transform: translateY(-3px) rotate(-3deg); }
  75% { transform: translateY(-8px) rotate(3deg); }
}

.interactive-frog-wrap.mood-tired .frog-body {
  animation: frogTired 3s ease-in-out infinite;
}

.interactive-frog-wrap.mood-sad .frog-body {
  animation: frogSad 2s ease-in-out infinite;
}

@keyframes frogSad {
  0%, 100% { transform: translateY(0) rotate(-5deg); }
  50% { transform: translateY(3px) rotate(-8deg); }
}

/* ========== 小青蛙互动面板 ========== */

.frog-panel-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: all 0.3s ease;
}

.frog-panel-overlay.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.frog-panel {
  background: linear-gradient(135deg, #E8F5E9, #FFF8E7);
  border-radius: 24px;
  width: 90%;
  max-width: 760px;
  max-height: 85vh;
  overflow: hidden;
  transform: scale(0.9) translateY(20px);
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.frog-panel-overlay.show .frog-panel {
  transform: scale(1) translateY(0);
}

.frog-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: white;
}

.frog-panel-header h3 {
  font-size: 20px;
  margin: 0;
}

.frog-panel-close {
  background: rgba(255,255,255,0.2);
  border: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 18px;
  color: white;
  cursor: pointer;
  transition: all 0.2s ease;
}

.frog-panel-close:hover {
  background: rgba(255,255,255,0.3);
  transform: rotate(90deg);
}

.frog-panel-body {
  padding: 20px;
  overflow-y: auto;
  overflow-x: hidden;
  max-height: calc(85vh - 60px);
}

.frog-panel-summary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: stretch;
  margin-bottom: 16px;
  min-width: 0;
}

.frog-panel-sections {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  min-width: 0;
}

.frog-section-wide {
  width: 100%;
}

/* 小青蛙展示区 */
.frog-display-area {
  text-align: center;
  margin-bottom: 20px;
  padding: 20px;
  border-radius: 16px;
  background: linear-gradient(135deg, #f5f5f5, #fff);
  transition: all 0.3s ease;
}

.frog-panel-summary .frog-display-area {
  margin-bottom: 0;
}

.frog-display-area.previewing {
  background: linear-gradient(135deg, #FFF8E1, #FFECB3);
  box-shadow: 0 4px 15px rgba(255, 193, 7, 0.2);
}

.frog-display {
  position: relative;
  display: inline-block;
  width: 120px;
  height: 120px;
  margin-bottom: 10px;
  transition: all 0.3s ease;
  background: white;
  border-radius: 16px;
  padding: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.frog-display.previewing {
  width: 160px;
  height: 160px;
  box-shadow: 0 4px 20px rgba(255, 193, 7, 0.3);
}

.frog-display-img {
  width: 100%;
  height: 100%;
  transition: all 0.3s ease;
  animation: frogDisplayBounce 2s ease-in-out infinite;
}

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

.frog-display-outfit {
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 32px;
}

.frog-name {
  font-size: 18px;
  font-weight: bold;
  color: var(--text-dark);
}

/* 预览描述 */
.frog-preview-desc {
  font-size: 13px;
  color: #666;
  margin-top: 6px;
  padding: 0 20px;
  display: none;
}

/* 预览操作按钮 */
.frog-preview-actions {
  display: none;
  justify-content: center;
  gap: 12px;
  margin-top: 12px;
}

.frog-preview-btn {
  padding: 8px 20px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
}

.frog-preview-btn.cancel {
  background: #f5f5f5;
  color: #666;
}

.frog-preview-btn.cancel:hover {
  background: #e0e0e0;
}

.frog-preview-btn.confirm {
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: white;
}

.frog-preview-btn.confirm:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(125, 200, 78, 0.4);
}

.frog-preview-btn.confirm.buy {
  background: linear-gradient(135deg, #FF9800, #F57C00);
}

.frog-preview-btn.confirm.buy:hover {
  box-shadow: 0 4px 12px rgba(255, 152, 0, 0.4);
}

.frog-preview-btn.confirm.disabled {
  background: #ccc;
  cursor: not-allowed;
}

.frog-preview-btn.confirm.disabled:hover {
  transform: none;
  box-shadow: none;
}

/* 星星帮助按钮 */
.stars-help-btn {
  background: #f0f0f0;
  border: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  font-size: 12px;
  cursor: pointer;
  margin-left: 8px;
  transition: all 0.2s ease;
}

.stars-help-btn:hover {
  background: #FFE082;
  transform: scale(1.1);
}

/* 星星获取提示 */
.stars-tips {
  background: linear-gradient(135deg, #FFF8E1, #FFECB3);
  border-radius: 12px;
  padding: 12px 16px;
  margin-top: 12px;
  border: 1px solid #FFD54F;
}

.stars-tips-title {
  font-size: 14px;
  font-weight: bold;
  color: #F57C00;
  margin-bottom: 8px;
}

.stars-tips-list {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 13px;
  color: #5D4037;
}

.stars-tips-list li {
  padding: 4px 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* 状态条 */
.frog-stats {
  background: white;
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 0;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.frog-section-wide .frog-food-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
  gap: 10px;
}

.frog-stat-hint {
  margin: 8px 0 0;
  font-size: 12px;
  color: #8D6E63;
  line-height: 1.5;
}

@media (max-width: 900px) {
  .frog-panel {
    max-width: 640px;
  }
}

@media (max-width: 768px) {
  .frog-panel-summary,
  .frog-panel-sections {
    grid-template-columns: 1fr;
  }
}

.frog-stat {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.frog-stat:last-of-type {
  margin-bottom: 0;
}

.stat-label {
  font-size: 14px;
  width: 80px;
  flex-shrink: 0;
}

.stat-bar {
  flex: 1;
  height: 16px;
  background: #E0E0E0;
  border-radius: 8px;
  overflow: hidden;
}

.stat-fill {
  height: 100%;
  border-radius: 8px;
  transition: width 0.5s ease;
}

.stat-fill.happiness {
  background: linear-gradient(90deg, #FFD93D, #FF9800);
}

.stat-fill.energy {
  background: linear-gradient(90deg, #4CAF50, #8BC34A);
}

.stat-value {
  font-size: 14px;
  font-weight: bold;
  width: 30px;
  text-align: right;
}

.frog-stars {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px dashed #E0E0E0;
  margin-top: 12px;
}

.stars-count {
  font-size: 20px;
  font-weight: bold;
  color: #FFA000;
}

/* 测试按钮 */
.test-add-stars {
  background: linear-gradient(135deg, #FFD93D, #FFA000);
  border: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: 14px;
  cursor: pointer;
  margin-left: 8px;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(255, 165, 0, 0.3);
}

.test-add-stars:hover {
  transform: scale(1.15);
  box-shadow: 0 4px 12px rgba(255, 165, 0, 0.5);
}

.test-add-stars:active {
  transform: scale(0.95);
}

/* 功能区块 */
.frog-section {
  background: white;
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 16px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.frog-section h4 {
  font-size: 16px;
  margin: 0 0 4px 0;
  color: var(--text-dark);
}

.section-hint {
  font-size: 12px;
  color: var(--text-light);
  margin: 0 0 12px 0;
}

/* 食物列表 */
.frog-food-list {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.frog-food-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 14px;
  background: linear-gradient(135deg, #FFF8E1, #FFECB3);
  border: 2px solid #FFD54F;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.frog-food-item:hover:not(.disabled) {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(255, 213, 79, 0.4);
}

.frog-food-item.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  filter: grayscale(0.5);
}

.food-icon {
  font-size: 28px;
}

.food-price {
  font-size: 12px;
  color: #F57C00;
  font-weight: bold;
}

/* 装扮列表 */
.frog-outfit-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.frog-outfit-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px;
  background: white;
  border: 2px solid #E0E0E0;
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.frog-outfit-item:hover:not(.disabled) {
  border-color: var(--primary);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(125, 200, 78, 0.2);
}

.frog-outfit-item.owned {
  border-color: var(--primary);
  background: linear-gradient(135deg, #E8F5E9, #C8E6C9);
}

.frog-outfit-item.equipped {
  border-color: #FFD93D;
  background: linear-gradient(135deg, #FFF8E1, #FFECB3);
  box-shadow: 0 4px 15px rgba(255, 213, 79, 0.3);
}

.frog-outfit-item.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.frog-outfit-item.previewing {
  border-color: #FF9800;
  background: linear-gradient(135deg, #FFF3E0, #FFE0B2);
  box-shadow: 0 4px 15px rgba(255, 152, 0, 0.3);
  transform: translateY(-2px);
}

/* 装扮预览图片 */
.outfit-preview {
  width: 60px;
  height: 60px;
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(135deg, #f0f9f0, #e8f5e9);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
  position: relative;
}

/* 加载中占位动画 */
.outfit-preview::after {
  content: '🐸';
  position: absolute;
  font-size: 24px;
  opacity: 0.3;
  animation: outfitLoading 1s ease-in-out infinite;
  pointer-events: none;
}

@keyframes outfitLoading {
  0%, 100% { transform: scale(1); opacity: 0.3; }
  50% { transform: scale(1.1); opacity: 0.5; }
}

.outfit-preview-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  position: relative;
  z-index: 1;
  background: transparent;
}

/* 图片加载完成后隐藏占位 */
.outfit-preview.loaded::after {
  opacity: 0;
  animation: none;
}

.frog-outfit-item:hover:not(.disabled) .outfit-preview {
  transform: scale(1.05);
  transition: transform 0.2s ease;
}

.frog-outfit-item.equipped .outfit-preview {
  background: linear-gradient(135deg, #FFF8E1, #FFE082);
  box-shadow: 0 2px 8px rgba(255, 193, 7, 0.3);
}

.outfit-icon {
  font-size: 18px;
  margin-top: -2px;
}

.outfit-name {
  font-size: 13px;
  font-weight: bold;
  color: var(--text-dark);
}

.outfit-price {
  font-size: 12px;
  color: #F57C00;
}

.outfit-status {
  font-size: 11px;
  color: var(--primary);
  background: rgba(125, 200, 78, 0.15);
  padding: 2px 8px;
  border-radius: 10px;
}

.frog-outfit-item.equipped .outfit-status {
  color: #F57C00;
  background: rgba(255, 165, 0, 0.15);
}

/* 专属定制装扮特殊样式 */
.frog-outfit-item.exclusive {
  background: linear-gradient(135deg, #f3e7ff, #ede4ff);
  border-color: #9c27b0;
  position: relative;
}

.frog-outfit-item.exclusive::before {
  content: '✨';
  position: absolute;
  top: -6px;
  right: -6px;
  font-size: 16px;
  animation: sparkle 1.5s ease-in-out infinite;
}

@keyframes sparkle {
  0%, 100% { transform: scale(1) rotate(0deg); opacity: 1; }
  50% { transform: scale(1.2) rotate(15deg); opacity: 0.8; }
}

.frog-outfit-item.exclusive .outfit-price {
  color: #9c27b0;
  font-weight: bold;
}

.frog-display.exclusive-outfit .frog-display-img,
.floating-frog.exclusive-outfit .floating-frog-img,
#interactiveFrog.exclusive-outfit .frog-body {
  filter: drop-shadow(0 6px 12px rgba(156, 39, 176, 0.35));
}

/* 装扮横向标签样式 */
.outfit-tabs {
  display: block;
  overflow-x: scroll;
  overflow-y: hidden;
  border-bottom: 2px solid #f0f0f0;
  margin-bottom: 12px;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  touch-action: pan-x;
  scrollbar-width: none;
}

.outfit-tabs-wrapper {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.outfit-tabs-wrapper .outfit-tabs {
  min-width: 0;
}


.outfit-tabs-track {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 4px;
  flex-wrap: nowrap;
}

.outfit-tabs::-webkit-scrollbar {
  display: none;
}

.outfit-tab {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
  flex: 0 0 auto;
  background: #f5f5f5;
  border: 2px solid transparent;
  border-radius: 20px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.outfit-tab:hover {
  background: #e8f5e9;
}

.outfit-tab.active {
  background: linear-gradient(135deg, var(--primary), #6ab04c);
  color: white;
  border-color: var(--primary);
  box-shadow: 0 2px 8px rgba(125, 200, 78, 0.3);
}

.tab-icon {
  font-size: 16px;
}

.tab-name {
  font-size: 13px;
  font-weight: 600;
}

.tab-count {
  font-size: 11px;
  background: rgba(0,0,0,0.1);
  padding: 1px 6px;
  border-radius: 10px;
}

.outfit-tab.active .tab-count {
  background: rgba(255,255,255,0.3);
}

/* 装扮内容区域 */
.outfit-items-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  max-height: none;
  overflow-y: visible;
  padding: 4px;
}

/* 重置原有样式 */
.frog-outfit-list {
  display: block;
  max-height: none;
  overflow: visible;
}

/* 响应式 */
@media (max-width: 500px) {
  .frog-panel {
    width: 95%;
    max-height: 90vh;
  }
  
  .outfit-items-container {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .outfit-tab {
    padding: 6px 10px;
  }
  
  .tab-name {
    font-size: 12px;
  }
  
  .frog-food-item {
    padding: 8px 10px;
  }
  
  .food-icon {
    font-size: 24px;
  }
}

/* ========== 学习报告页面 ========== */
.report-layout {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* 周期选择器 */
.report-period-selector {
  display: flex;
  justify-content: center;
  gap: 12px;
  padding: 16px;
  background: linear-gradient(135deg, rgba(255,255,255,0.95), rgba(232,245,233,0.9));
  border-radius: 18px;
  border: 2px solid rgba(125, 200, 78, 0.25);
}

.period-btn {
  padding: 10px 24px;
  border: 2px solid transparent;
  border-radius: 20px;
  background: white;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-light);
  cursor: pointer;
  transition: all 0.3s ease;
}

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

.period-btn.active {
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: white;
  border-color: transparent;
  box-shadow: 0 4px 12px rgba(125, 200, 78, 0.4);
}

/* 进步提示卡片 */
.progress-highlight-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 22px 24px;
  background: linear-gradient(135deg, #FFF8E1 0%, #FFECB3 60%, #FFE0B2 100%);
  border: 2px solid rgba(255, 183, 77, 0.35);
  border-radius: 22px;
  position: relative;
  overflow: hidden;
}

.progress-highlight-card::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    45deg,
    transparent 30%,
    rgba(255, 255, 255, 0.3) 50%,
    transparent 70%
  );
  animation: shimmer 3s infinite;
}

@keyframes shimmer {
  0% { transform: translateX(-100%) translateY(-100%); }
  100% { transform: translateX(100%) translateY(100%); }
}

.highlight-icon {
  font-size: 42px;
  animation: bounce 2s infinite;
  z-index: 1;
}

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

.highlight-text {
  flex: 1;
  font-size: 18px;
  font-weight: 700;
  color: #E07B25;
  z-index: 1;
}

.highlight-frog {
  font-size: 40px;
  animation: frogJump 1.5s infinite;
  z-index: 1;
}

@keyframes frogJump {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(-10px) rotate(-5deg); }
  50% { transform: translateY(-15px) rotate(0deg); }
  75% { transform: translateY(-10px) rotate(5deg); }
}

/* 统计概览 */
.report-overview {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.overview-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 18px 16px;
  border-radius: 18px;
  background: #FFFDF7;
  border: 2px solid rgba(255, 224, 178, 0.6);
  text-align: center;
  transition: transform 0.3s ease;
}

.overview-card:hover {
  transform: translateY(-5px);
}

.overview-icon {
  font-size: 36px;
  margin-bottom: 4px;
}

.overview-value {
  font-size: 32px;
  font-weight: bold;
  color: var(--primary-dark);
  font-family: 'Comic Neue', cursive;
}

.overview-label {
  font-size: 14px;
  color: var(--text-light);
}

/* 图表区域 */
.report-chart-section {
  padding: 22px;
  border-radius: 20px;
  background: #FFFDF7;
  border: 2px solid rgba(165, 214, 167, 0.35);
}

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

.chart-header h3 {
  font-size: 18px;
  color: var(--text-dark);
  display: flex;
  align-items: center;
  gap: 8px;
}

.chart-icon {
  font-size: 20px;
}

.chart-legend {
  display: flex;
  gap: 20px;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-light);
}

.legend-item i {
  width: 12px;
  height: 12px;
  border-radius: 3px;
}

.legend-item.chinese i { background: #FF6B6B; }
.legend-item.math i { background: #4DABF7; }
.legend-item.english i { background: #9775FA; }

.chart-container {
  position: relative;
  width: 100%;
  height: 280px;
  background: linear-gradient(180deg, rgba(125,200,78,0.05) 0%, transparent 100%);
  border-radius: 12px;
  overflow: hidden;
}

.chart-container canvas {
  width: 100% !important;
  height: 100% !important;
}

.chart-x-labels {
  display: flex;
  justify-content: space-between;
  padding: 8px 40px 0;
  font-size: 12px;
  color: var(--text-light);
}

/* 各科详细数据 */
.report-subjects {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.subject-report-card {
  padding: 18px;
  border-radius: 18px;
  background: #FFFDF7;
  border: 2px solid rgba(255, 224, 178, 0.5);
  transition: transform 0.3s ease;
}

.subject-report-card:hover {
  transform: translateY(-5px);
}

.subject-report-card.chinese {
  background: linear-gradient(135deg, rgba(255,255,255,0.95), rgba(255,182,193,0.22));
  border-color: rgba(255, 107, 107, 0.2);
}

.subject-report-card.math {
  background: linear-gradient(135deg, rgba(255,255,255,0.95), rgba(77,171,247,0.22));
  border-color: rgba(77, 171, 247, 0.2);
}

.subject-report-card.english {
  background: linear-gradient(135deg, rgba(255,255,255,0.95), rgba(151,117,250,0.22));
  border-color: rgba(151, 117, 250, 0.2);
}

.subject-report-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 2px dashed rgba(0,0,0,0.1);
}

.subject-report-header .subject-emoji {
  font-size: 28px;
}

.subject-report-header .subject-name {
  font-size: 18px;
  font-weight: bold;
  color: var(--text-dark);
}

.subject-stats {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}

.stat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.stat-label {
  font-size: 14px;
  color: var(--text-light);
}

.stat-value {
  font-size: 16px;
  font-weight: bold;
  color: var(--text-dark);
}

.stat-value.highlight {
  font-size: 20px;
  color: var(--primary-dark);
}

.subject-progress-bar {
  height: 10px;
  background: rgba(0,0,0,0.08);
  border-radius: 5px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  border-radius: 5px;
  transition: width 1s ease-out;
}

.progress-fill.chinese { background: linear-gradient(90deg, #FF6B6B, #FF8E8E); }
.progress-fill.math { background: linear-gradient(90deg, #4DABF7, #74C0FC); }
.progress-fill.english { background: linear-gradient(90deg, #9775FA, #B197FC); }

/* 学习建议 */
.report-tips {
  padding: 20px;
  background: #FFFDF7;
  border: 2px dashed rgba(255, 204, 128, 0.6);
  border-radius: 18px;
}

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

.tips-icon {
  font-size: 24px;
}

.tips-title {
  font-size: 18px;
  font-weight: bold;
  color: var(--text-dark);
}

.tips-content {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tip-item {
  padding: 12px 16px;
  background: white;
  border-radius: 12px;
  font-size: 14px;
  color: var(--text-dark);
  border-left: 4px solid var(--primary);
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

/* 学习报告响应式 */
@media (max-width: 900px) {
  .report-overview {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .report-subjects {
    grid-template-columns: 1fr;
  }
  
  .chart-header {
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
  }
}

@media (max-width: 600px) {
  .progress-highlight-card {
    flex-direction: column;
    text-align: center;
    padding: 20px;
  }
  
  .highlight-text {
    font-size: 16px;
  }
  
  .highlight-icon, .highlight-frog {
    font-size: 32px;
  }
  
  .report-period-selector {
    flex-wrap: wrap;
  }
  
  .period-btn {
    padding: 8px 16px;
    font-size: 13px;
  }
  
  .overview-card {
    padding: 16px 12px;
  }
  
  .overview-icon {
    font-size: 28px;
  }
  
  .overview-value {
    font-size: 24px;
  }
  
  .chart-container {
    height: 220px;
  }
  
  .chart-legend {
    gap: 12px;
    font-size: 12px;
  }
}

/* ========== 浮动小青蛙宠物 ========== */
.floating-frog {
  position: fixed;
  bottom: 100px;
  right: 30px;
  z-index: 9999;
  cursor: grab;
  user-select: none;
  touch-action: none;
  transition: transform 0.1s ease;
}

.floating-frog:active {
  cursor: grabbing;
}

.floating-frog.dragging {
  transition: none;
}

.floating-frog-container {
  position: relative;
  width: 120px;
  height: 120px;
  animation: frogFloat 3s ease-in-out infinite;
}

/* 角色特效层 */
.floating-frog-effect {
  position: absolute;
  top: -120px;
  left: 50%;
  transform: translateX(-50%);
  width: 150px;
  height: 150px;
  pointer-events: none;
  z-index: 10;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.floating-frog-effect.playing {
  opacity: 1;
}

/* 特效容器内的 SVG 样式 */
.floating-frog-effect svg {
  width: 100% !important;
  height: 100% !important;
}

/* 响应式特效层 */
@media (max-width: 768px) {
  .floating-frog-effect {
    width: 120px;
    height: 120px;
    top: -100px;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .floating-frog-effect {
    width: 130px;
    height: 130px;
    top: -110px;
  }
}

.floating-frog-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 8px 16px rgba(0,0,0,0.2));
  transition: transform 0.3s ease;
}

.floating-frog:hover .floating-frog-img {
  transform: scale(1.1);
}

.floating-frog.action-jump .floating-frog-img {
  animation: floatingFrogJump 0.6s ease-out !important;
}

.floating-frog.action-spin .floating-frog-img {
  animation: floatingFrogSpin 0.8s ease-in-out !important;
}

.floating-frog.action-wave .floating-frog-img {
  animation: floatingFrogWave 0.6s ease-in-out !important;
}

.floating-frog.action-happy .floating-frog-img {
  animation: floatingFrogHappy 0.5s ease-in-out !important;
}

/* 浮动青蛙专用动画 - 更明显的效果 */
@keyframes floatingFrogJump {
  0% { transform: translateY(0) scale(1); }
  20% { transform: translateY(5px) scale(1.1, 0.85); }
  40% { transform: translateY(-40px) scale(0.9, 1.15); }
  60% { transform: translateY(-45px) scale(0.95, 1.1); }
  80% { transform: translateY(-20px) scale(1.05, 0.95); }
  100% { transform: translateY(0) scale(1); }
}

@keyframes floatingFrogSpin {
  0% { transform: rotate(0deg) scale(1); }
  25% { transform: rotate(90deg) scale(1.1); }
  50% { transform: rotate(180deg) scale(1.15); }
  75% { transform: rotate(270deg) scale(1.1); }
  100% { transform: rotate(360deg) scale(1); }
}

@keyframes floatingFrogWave {
  0%, 100% { transform: rotate(0deg); }
  20% { transform: rotate(-20deg); }
  40% { transform: rotate(20deg); }
  60% { transform: rotate(-15deg); }
  80% { transform: rotate(15deg); }
}

@keyframes floatingFrogHappy {
  0%, 100% { transform: scale(1) rotate(0deg); }
  20% { transform: scale(1.2, 0.8) rotate(-5deg); }
  40% { transform: scale(0.9, 1.2) rotate(5deg); }
  60% { transform: scale(1.15, 0.9) rotate(-3deg); }
  80% { transform: scale(0.95, 1.1) rotate(3deg); }
}

.floating-frog-mood {
  position: absolute;
  bottom: -5px;
  right: -5px;
  font-size: 26px;
  background: white;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

/* 对话气泡 */
.floating-frog-bubble {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: white;
  border-radius: 18px;
  padding: 12px 16px;
  font-size: 14px;
  white-space: nowrap;
  box-shadow: 0 4px 15px rgba(0,0,0,0.15);
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  margin-bottom: 12px;
  z-index: 10;
}

.floating-frog-bubble::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 8px solid transparent;
  border-top-color: white;
}

.floating-frog-bubble.show {
  opacity: 1;
  visibility: visible;
}

.floating-frog.dict-open .floating-frog-bubble {
  opacity: 0;
  visibility: hidden;
}

.floating-frog-dict {
  position: absolute;
  bottom: 100%;
  right: -10px;
  transform: translateY(-6px);
  background: white;
  border-radius: 16px;
  padding: 10px 12px;
  width: 220px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
  border: 1px solid #f9a8d4;
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s ease;
  z-index: 2;
}

.floating-frog-dict.show {
  opacity: 1;
  visibility: visible;
}

.frog-dict-word {
  font-size: 16px;
  font-weight: 700;
  color: #1f2937;
  display: flex;
  align-items: center;
  gap: 6px;
}

.frog-dict-word .phonetic {
  font-size: 12px;
  font-weight: 500;
  color: #6b7280;
}

.frog-dict-meaning {
  margin-top: 6px;
  font-size: 13px;
  color: #374151;
  line-height: 1.4;
  max-height: 90px;
  overflow: auto;
}

.frog-dict-actions {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}

.frog-dict-btn {
  flex: 1;
  border: none;
  border-radius: 10px;
  padding: 6px 8px;
  font-size: 12px;
  cursor: pointer;
  background: #fce7f3;
  color: #be185d;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.frog-dict-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(190, 24, 93, 0.2);
}

.frog-dict-btn.close {
  flex: 0 0 32px;
  background: #f3f4f6;
  color: #6b7280;
}

.word-lookup-btn {
  position: absolute;
  z-index: 10000;
  padding: 6px 10px;
  font-size: 12px;
  border-radius: 14px;
  border: 1px solid #f9a8d4;
  background: #fff0f6;
  color: #be185d;
  box-shadow: 0 6px 16px rgba(190, 24, 93, 0.2);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: all 0.15s ease;
}

.word-lookup-btn.show {
  opacity: 1;
  visibility: visible;
}

.floating-frog-bubble.speaking {
  background: #fff3f7;
  border: 1px solid #f9a8d4;
  color: #db2777;
  font-size: 18px;
  letter-spacing: 1px;
  min-width: 58px;
  text-align: center;
  animation: frogTalking 0.8s ease-in-out infinite;
}

.floating-frog-bubble.speaking::before {
  content: "...";
  display: inline-block;
  width: 0ch;
  overflow: hidden;
  white-space: nowrap;
  letter-spacing: 3px;
  font-size: 20px;
  animation: frogDots 1.8s steps(4, end) infinite;
}

.floating-frog.speaking .floating-frog-img {
  animation: frogTalkNod 0.9s ease-in-out infinite;
}

@keyframes frogTalking {
  0%, 100% { transform: translateX(-50%) scale(1); }
  50% { transform: translateX(-50%) scale(1.06); }
}

@keyframes frogTalkNod {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(2px) scale(1.02); }
}

@keyframes frogDots {
  0% { width: 0ch; }
  100% { width: 3ch; }
}

/* 操作按钮 */
.floating-frog-actions {
  position: absolute;
  top: 50%;
  left: -55px;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 8px;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.floating-frog.logged-in:hover .floating-frog-actions,
.floating-frog.logged-in.show-actions .floating-frog-actions {
  opacity: 1;
  pointer-events: auto;
}

/* 触摸设备上始终显示操作按钮（修复平板/手机上无法点击的问题） */
@media (hover: none) and (pointer: coarse) {
  .floating-frog-actions {
    left: -55px;
    transform: translateY(-50%);
    flex-direction: column;
  }
  
  .floating-action-btn {
    width: 44px;
    height: 44px;
    font-size: 20px;
    /* 确保触摸目标足够大 */
    min-width: 44px;
    min-height: 44px;
  }
}

/* 备用方案：最大宽度检测（兼容不支持 hover 媒体查询的设备） */
@media (max-width: 1024px) and (any-pointer: coarse) {
  .floating-frog-actions {
    left: -55px;
    transform: translateY(-50%);
    flex-direction: column;
  }
}

.floating-action-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, #E91E63, #9C27B0);
  font-size: 20px;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(156, 39, 176, 0.3);
  transition: all 0.2s ease;
  /* 确保按钮在最上层，可以接收点击 */
  z-index: 10;
  position: relative;
  /* 触摸设备优化 */
  -webkit-tap-highlight-color: rgba(233, 30, 99, 0.3);
  touch-action: manipulation;
}

.floating-action-btn:hover {
  transform: scale(1.15);
}

.floating-action-btn:active {
  transform: scale(0.95);
  opacity: 0.8;
}

/* 浮动动画 */
@keyframes frogFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

@keyframes frogJump {
  0% { transform: translateY(0) scale(1); }
  30% { transform: translateY(-30px) scale(1.1, 0.9); }
  50% { transform: translateY(-40px) scale(0.95, 1.05); }
  80% { transform: translateY(-10px) scale(1.05, 0.95); }
  100% { transform: translateY(0) scale(1); }
}

@keyframes frogSpin {
  0% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(180deg) scale(1.1); }
  100% { transform: rotate(360deg) scale(1); }
}

@keyframes frogWave {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-15deg); }
  75% { transform: rotate(15deg); }
}

@keyframes frogHappy {
  0%, 100% { transform: scale(1); }
  25% { transform: scale(1.15, 0.9); }
  50% { transform: scale(0.9, 1.15); }
  75% { transform: scale(1.1, 0.95); }
}

/* 响应式 - 移动端（仅限鼠标设备） */
@media (max-width: 768px) and (hover: hover) {
  .floating-frog {
    bottom: 80px;
    right: 15px;
  }
  
  .floating-frog-container {
    width: 90px;
    height: 90px;
  }
  
  .floating-frog-mood {
    font-size: 20px;
    width: 28px;
    height: 28px;
  }
  
  .floating-frog-bubble {
    font-size: 12px;
    padding: 8px 12px;
  }
  
  .floating-frog-actions {
    left: -40px;
  }
  
  .floating-action-btn {
    width: 32px;
    height: 32px;
    font-size: 14px;
  }
}

/* 响应式 - 移动端触摸设备 */
@media (max-width: 768px) {
  .floating-frog {
    bottom: 80px;
    right: 15px;
  }
  
  .floating-frog-container {
    width: 90px;
    height: 90px;
  }
  
  .floating-frog-mood {
    font-size: 20px;
    width: 28px;
    height: 28px;
  }
  
  .floating-frog-bubble {
    font-size: 12px;
    padding: 8px 12px;
  }
  
  /* 好友请求提示响应式 */
  .floating-frog-friend-hint {
    font-size: 12px;
    padding: 8px 12px;
    margin-bottom: 8px;
  }
  
  .floating-frog-friend-hint .friend-hint-badge {
    min-width: 18px;
    height: 18px;
    font-size: 11px;
  }
  
  .floating-frog-friend-badge {
    min-width: 16px;
    height: 16px;
    font-size: 10px;
    top: -3px;
    right: -3px;
  }
}

/* 触摸设备移动端优化 - 按钮始终显示在下方 */
@media (max-width: 768px) and (any-pointer: coarse) {
  .floating-frog-actions {
    left: -55px;
    transform: translateY(-50%);
    flex-direction: column;
  }
  
  .floating-action-btn {
    width: 40px;
    height: 40px;
    font-size: 18px;
    min-width: 40px;
    min-height: 40px;
  }
}

/* 响应式 - iPad */
@media (min-width: 769px) and (max-width: 1024px) {
  .floating-frog {
    bottom: 90px;
    right: 25px;
  }
  
  .floating-frog-container {
    width: 100px;
    height: 100px;
  }
}

/* 隐藏原来打卡区的青蛙 - 现在用浮动的 */
.checkin-mascot {
  display: none;
}

/* ========== 紧凑版打卡区域 ========== */
.checkin-zone-compact {
  flex: 1;
}

.checkin-card-compact {
  padding: 24px 28px;
  background: linear-gradient(135deg, rgba(255,255,255,0.95), rgba(232,245,233,0.95));
  border-radius: var(--border-radius);
  box-shadow: 0 8px 30px rgba(125, 200, 78, 0.2);
  border: 2px solid rgba(125, 200, 78, 0.3);
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.checkin-main {
  display: flex;
  align-items: center;
  gap: 20px;
  width: 100%;
}

.checkin-progress {
  flex-shrink: 0;
}

.progress-ring-small {
  width: 60px;
  height: 60px;
}

.progress-ring-small .progress-ring {
  width: 60px;
  height: 60px;
}

.progress-ring-small .progress-num {
  font-size: 18px;
}

.progress-ring-small .progress-unit {
  font-size: 10px;
}

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

.checkin-title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--text-dark);
  white-space: nowrap;
}

.checkin-card-compact .cheer-text {
  font-size: 12px;
  color: var(--text-light);
  margin: 0;
  line-height: 1.4;
}

.checkin-action {
  flex-shrink: 0;
  text-align: center;
}

.checkin-btn-compact {
  min-width: 72px;
  height: 38px;
  padding: 0 16px;
  border-radius: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: linear-gradient(135deg, #FFE082, #FFB74D);
  border: 2px solid rgba(255, 171, 64, 0.6);
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(255, 183, 77, 0.35);
  transition: all 0.2s ease;
}

.checkin-btn-compact:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(255, 183, 77, 0.4);
}

.checkin-btn-compact.checked {
  background: linear-gradient(135deg, #A5D6A7, #66BB6A);
  border-color: rgba(76, 175, 80, 0.5);
  box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3);
}

.checkin-btn-compact.disabled {
  background: linear-gradient(135deg, #e0e0e0, #bdbdbd);
  border-color: rgba(189, 189, 189, 0.5);
  cursor: not-allowed;
  box-shadow: none;
  opacity: 0.7;
}

.checkin-btn-compact.disabled:hover {
  transform: none;
  box-shadow: none;
}

.checkin-btn-compact .btn-text {
  font-size: 13px;
  font-weight: 700;
  color: #6D4C41;
  letter-spacing: 1px;
}

.checkin-bar .checkin-status,
.checkin-card-compact .checkin-status {
  font-size: 10px;
  margin-top: 4px;
  padding: 3px 8px;
  background: rgba(255,255,255,0.7);
  border-radius: 10px;
  white-space: nowrap;
}

/* 响应式 - 移动端打卡区 */
@media (max-width: 768px) {
  .checkin-bar {
    /* 手机端改为纵向布局 */
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 16px;
    position: relative;
  }
  
  /* 第一行：进度圈 + 标题信息 */
  .checkin-bar-left {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-right: 70px; /* 为打卡按钮留空间 */
  }
  
  .checkin-bar-left .progress-ring-wrap {
    flex-shrink: 0;
  }
  
  .checkin-bar-info {
    flex: 1;
    min-width: 0;
  }
  
  .checkin-bar-info .checkin-title {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 2px;
  }
  
  .checkin-bar-info .cheer-text {
    font-size: 12px;
    color: var(--primary-dark);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background: none;
    padding: 0;
    border-radius: 0;
  }
  
  /* 打卡按钮：右上角固定，与第一行对齐 */
  .checkin-bar-right {
    position: absolute;
    right: 14px;
    top: 14px;
    transform: none;
    flex-direction: column;
    align-items: center;
  }
  
  .checkin-bar .checkin-status {
    font-size: 9px;
    padding: 2px 6px;
  }
  
  /* 名言区域：单独一行，居中显示 */
  .checkin-bar-middle {
    width: 100%;
    padding-top: 10px;
    border-top: 1px dashed rgba(125, 200, 78, 0.25);
    margin-top: 2px;
  }
  
  .checkin-quote {
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
    padding: 8px 12px;
    background: linear-gradient(135deg, rgba(255,248,231,0.8), rgba(255,253,231,0.8));
  }
  
  .checkin-quote .quote-text {
    white-space: normal;
    text-align: center;
    font-size: 13px;
    line-height: 1.6;
    flex: 1 1 100%;
    margin-bottom: 4px;
  }
  
  .checkin-quote .quote-source {
    font-size: 12px;
    color: var(--text-light);
  }
  
  .checkin-quote .quote-refresh {
    width: 22px;
    height: 22px;
    font-size: 12px;
  }
  
  .progress-ring-mini {
    width: 44px;
    height: 44px;
  }
  
  .progress-ring-mini .progress-num {
    font-size: 12px;
  }
  
  .checkin-btn-compact {
    width: 52px;
    height: 52px;
  }
  
  .checkin-btn-compact .btn-frog {
    font-size: 16px;
  }
  
  .checkin-btn-compact .btn-text {
    font-size: 11px;
    font-weight: 600;
  }
  
  .checkin-task-zone .task-quick-list {
    max-height: 150px;
  }
}

/* 更小屏幕的额外优化 */
@media (max-width: 400px) {
  .checkin-bar {
    padding: 12px 14px;
  }
  
  .checkin-bar-left {
    padding-right: 60px;
  }
  
  .checkin-bar-info .checkin-title {
    font-size: 14px;
  }
  
  .checkin-bar-info .cheer-text {
    font-size: 11px;
  }
  
  .checkin-quote .quote-text {
    font-size: 12px;
  }
  
  .checkin-quote .quote-source {
    font-size: 11px;
  }
  
  .checkin-btn-compact {
    width: 46px;
    height: 46px;
  }
  
  .checkin-btn-compact .btn-text {
    font-size: 10px;
  }
  
  .progress-ring-mini {
    width: 40px;
    height: 40px;
  }
}

/* ========== AI 聊天助手面板 ========== */
.chat-panel-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s, visibility 0.3s;
  padding: 20px;
}

.chat-panel-overlay.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.chat-panel {
  background: linear-gradient(145deg, #ffffff, #f8fafc);
  border-radius: 24px;
  width: 100%;
  max-width: 420px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.5) inset;
  transform: translateY(30px) scale(0.95);
  transition: transform 0.3s ease;
  overflow: hidden;
}

.chat-panel-overlay.show .chat-panel {
  transform: translateY(0) scale(1);
}

/* 聊天面板头部 - 整合联系人头像 */
.chat-panel-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: linear-gradient(135deg, #4ade80, #22c55e);
  color: white;
}

/* 左侧联系人头像区域（可滑动） */
.chat-header-contacts {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  flex-shrink: 0;
  max-width: 50%;
  padding: 4px 0;
}

.chat-header-contacts::-webkit-scrollbar {
  display: none;
}

.chat-contact {
  flex-shrink: 0;
  cursor: pointer;
  position: relative;
  transition: all 0.2s ease;
}

.chat-contact .contact-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.4);
  background: white;
  padding: 2px;
  transition: all 0.2s ease;
}

.chat-contact:hover .contact-avatar {
  transform: scale(1.08);
}

.chat-contact.active .contact-avatar {
  border-color: white;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
  transform: scale(1.1);
}

/* 未读消息红点 */
.chat-contact .unread-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 16px;
  height: 16px;
  background: #ef4444;
  color: white;
  font-size: 10px;
  font-weight: 600;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  border: 2px solid #22c55e;
}

/* 新消息闪烁 */
.chat-contact.has-new-message .contact-avatar {
  animation: newMessagePulse 1s ease-in-out infinite;
}

@keyframes newMessagePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.6); }
  50% { box-shadow: 0 0 0 5px rgba(239, 68, 68, 0); }
}

/* 在线状态点 */
.chat-contact .online-status {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 10px;
  height: 10px;
  background: #9ca3af;
  border-radius: 50%;
  border: 2px solid #22c55e;
}

.chat-contact .online-status.online {
  background: #fbbf24;
}

/* 添加好友按钮 */
.add-friend-btn {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  border: 2px dashed rgba(255, 255, 255, 0.5);
  color: white;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.add-friend-btn:hover {
  background: rgba(255, 255, 255, 0.35);
  transform: scale(1.05);
}

/* 好友管理提示 */
.add-friend-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.add-friend-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: #ef4444;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  display: none;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(239, 68, 68, 0.4);
}

.add-friend-hint {
  position: absolute;
  top: -36px;
  right: -10px;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: 14px;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: all 0.2s ease;
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.45);
  z-index: 2;
}

.add-friend-hint::after {
  content: '';
  position: absolute;
  bottom: -6px;
  right: 16px;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid #d97706;
}

.add-friend-hint.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.friend-contacts-list {
  display: flex;
  gap: 6px;
}

/* 中间信息区域 */
.chat-header-info {
  flex: 1;
  min-width: 0;
  text-align: center;
}

.chat-header-info h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-status {
  font-size: 14px;
  opacity: 0.9;
  display: flex;
  align-items: center;
  gap: 4px;
}

.chat-status::before {
  content: '';
  width: 8px;
  height: 8px;
  background: #86efac;
  border-radius: 50%;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(1.1); }
}

.chat-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* 结束好友聊天按钮 */
.end-friend-chat-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(239, 68, 68, 0.8);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  transition: all 0.2s;
}

.end-friend-chat-btn:hover {
  background: rgba(239, 68, 68, 1);
  transform: scale(1.05);
}

.chat-voice-toggle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  transition: background 0.2s;
}

.chat-voice-toggle:hover {
  background: rgba(255, 255, 255, 0.3);
}

.chat-voice-toggle.muted .voice-on { display: none; }
.chat-voice-toggle.muted .voice-off { display: inline; }
.chat-voice-toggle:not(.muted) .voice-off { display: none; }

.chat-panel-close {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  border: none;
  cursor: pointer;
  font-size: 18px;
  color: white;
  transition: background 0.2s;
}

.chat-panel-close:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* 聊天消息区域 */
.chat-messages {
  flex: 1;
  padding: 16px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 200px;
  max-height: 400px;
  background: #f8fafc;
}

.chat-message {
  display: flex;
  gap: 10px;
  max-width: 85%;
  animation: messageIn 0.3s ease;
}

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

.chat-message.assistant {
  align-self: flex-start;
}

.chat-message.user {
  align-self: flex-end;
  flex-direction: row-reverse;
}

.message-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}

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

.chat-message.user .message-avatar {
  background: linear-gradient(135deg, #60a5fa, #3b82f6);
}

.chat-message.user .message-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.message-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.message-bubble {
  padding: 14px 18px;
  border-radius: 18px;
  font-size: 18px;
  line-height: 1.6;
  word-break: break-word;
}

.chat-message.assistant .message-bubble {
  background: white;
  color: #374151;
  border-bottom-left-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.chat-message.user .message-bubble {
  background: linear-gradient(135deg, #4ade80, #22c55e);
  color: white;
  border-bottom-right-radius: 6px;
}

.message-time {
  font-size: 13px;
  color: #9ca3af;
  padding: 0 4px;
}

/* 正在输入指示器 */
.typing-indicator {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 12px 16px;
  background: white;
  border-radius: 18px;
  border-bottom-left-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.typing-indicator span {
  width: 8px;
  height: 8px;
  background: #9ca3af;
  border-radius: 50%;
  animation: typingBounce 1.4s infinite;
}

.typing-indicator span:nth-child(2) { animation-delay: 0.2s; }
.typing-indicator span:nth-child(3) { animation-delay: 0.4s; }

@keyframes typingBounce {
  0%, 60%, 100% { transform: translateY(0); }
  30% { transform: translateY(-6px); }
}

/* 语音播放指示器 */
.message-bubble.speaking {
  position: relative;
}

.message-bubble.speaking::after {
  content: '🔊';
  position: absolute;
  right: -24px;
  top: 50%;
  transform: translateY(-50%);
  animation: speakingPulse 0.6s infinite alternate;
}

@keyframes speakingPulse {
  from { opacity: 0.5; transform: translateY(-50%) scale(0.9); }
  to { opacity: 1; transform: translateY(-50%) scale(1.1); }
}

/* 快捷操作 */
.chat-quick-actions {
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  padding: 12px 16px;
  align-items: center;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  background: #f1f5f9;
  border-top: 1px solid #e2e8f0;
  scroll-behavior: smooth;
  /* 添加渐变遮罩提示可滚动 */
  mask-image: linear-gradient(to right, transparent 0%, black 3%, black 97%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 3%, black 97%, transparent 100%);
}

.chat-quick-actions::-webkit-scrollbar {
  display: none;
  height: 0;
  width: 0;
}

.quick-action-btn {
  flex: 0 0 auto;
  padding: 10px 16px;
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  font-size: 15px;
  color: #4b5563;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  touch-action: pan-x;
}

.quick-action-btn:hover {
  background: #f0fdf4;
  border-color: #86efac;
  color: #166534;
}

.quick-action-btn.photo-action {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: #1d4ed8;
}

.quick-action-btn.photo-action:hover {
  background: #dbeafe;
  border-color: #93c5fd;
  color: #1e40af;
}

.quick-action-btn:active {
  transform: scale(0.95);
}

/* 输入区域 */
.chat-input-area {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px;
  background: white;
  border-top: 1px solid #e2e8f0;
}

.chat-voice-input-btn {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f9a8d4, #f472b6);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  flex-shrink: 0;
  box-shadow: 0 6px 16px rgba(236, 72, 153, 0.35);
}

.chat-voice-input-btn:hover {
  transform: scale(1.05);
}

.chat-voice-input-btn.recording {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  animation: voicePulse 1s infinite;
}

.chat-photo-input {
  display: none;
}

@keyframes voicePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); }
  50% { box-shadow: 0 0 0 12px rgba(239, 68, 68, 0); }
}

.mic-icon {
  font-size: 26px;
  line-height: 1;
  position: relative;
  text-shadow: 0 2px 6px rgba(236, 72, 153, 0.35);
}

.mic-icon::after {
  content: "✨";
  position: absolute;
  right: -8px;
  top: -10px;
  font-size: 12px;
  opacity: 0.9;
}

#chatInput {
  flex: 1;
  padding: 14px 18px;
  border: 2px solid #e2e8f0;
  border-radius: 24px;
  font-size: 18px;
  outline: none;
  transition: border-color 0.2s;
}

#chatInput:focus {
  border-color: #4ade80;
}

#chatInput::placeholder {
  color: #9ca3af;
}

.chat-send-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, #4ade80, #22c55e);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3);
}

.chat-send-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 16px rgba(34, 197, 94, 0.4);
}

.chat-send-btn:active {
  transform: scale(0.95);
}

.chat-send-btn:disabled {
  background: #d1d5db;
  box-shadow: none;
  cursor: not-allowed;
}

.send-icon {
  color: white;
  font-size: 18px;
  transform: rotate(-15deg);
}

.message-bubble.image {
  padding: 8px;
}

.message-bubble.image img {
  max-width: 240px;
  width: 100%;
  border-radius: 12px;
  display: block;
}

.message-bubble.image .image-caption {
  margin-top: 6px;
  font-size: 14px;
  color: #4b5563;
}

/* 移动端适配 */
@media (max-width: 480px) {
  .chat-panel-overlay {
    padding: 0;
    align-items: flex-end;
  }
  
  .chat-panel {
    max-width: 100%;
    max-height: 90vh;
    border-radius: 24px 24px 0 0;
    transform: translateY(100%);
  }
  
  .chat-panel-overlay.show .chat-panel {
    transform: translateY(0);
  }
  
  .chat-messages {
    max-height: calc(90vh - 220px);
  }
  
  .chat-quick-actions {
    padding: 8px 12px;
    gap: 8px;
  }
  
  .quick-action-btn {
    padding: 6px 10px;
    font-size: 12px;
    line-height: 1.2;
    max-width: 120px;
    text-overflow: ellipsis;
    overflow: hidden;
  }
  
  .chat-header-contacts {
    max-width: 45%;
  }
  
  .chat-contact .contact-avatar {
    width: 32px;
    height: 32px;
  }
  
  .add-friend-btn {
    width: 36px;
    height: 36px;
  }
}

/* ========== 好友聊天消息区 ========== */
.friend-chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  background: #f8fafc;
}

.friend-chat-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #9ca3af;
  gap: 12px;
}

.friend-chat-empty span {
  font-size: 48px;
  opacity: 0.5;
}

.friend-chat-empty p {
  font-size: 14px;
}

/* 好友消息气泡 */
.friend-message {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
  animation: messageSlideIn 0.3s ease;
}

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

.friend-message.sent {
  flex-direction: row-reverse;
}

.friend-message .msg-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  flex-shrink: 0;
}

.friend-message .msg-content {
  max-width: 70%;
}

.friend-message .msg-bubble {
  padding: 10px 14px;
  border-radius: 16px;
  font-size: 14px;
  line-height: 1.5;
  word-break: break-word;
}

.friend-message.received .msg-bubble {
  background: white;
  color: #1f2937;
  border-bottom-left-radius: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.friend-message.sent .msg-bubble {
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: white;
  border-bottom-right-radius: 4px;
}

.friend-message .msg-time {
  font-size: 11px;
  color: #9ca3af;
  margin-top: 4px;
  text-align: right;
}

.friend-message.received .msg-time {
  text-align: left;
}

/* 正在输入提示 */
.friend-typing-indicator {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: #f1f5f9;
  font-size: 12px;
  color: #6b7280;
}

.typing-dot {
  width: 6px;
  height: 6px;
  background: #9ca3af;
  border-radius: 50%;
  animation: typingBounce 1.4s ease-in-out infinite;
}

.typing-dot:nth-child(2) { animation-delay: 0.2s; }
.typing-dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes typingBounce {
  0%, 60%, 100% { transform: translateY(0); }
  30% { transform: translateY(-4px); }
}

/* ========== 好友管理面板 ========== */
.friend-panel-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10001;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: all 0.3s ease;
  padding: 20px;
}

.friend-panel-overlay.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.friend-panel {
  background: white;
  border-radius: 20px;
  width: 100%;
  max-width: 450px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
  transform: translateY(20px) scale(0.95);
  transition: transform 0.3s ease;
  overflow: hidden;
}

.friend-panel-overlay.show .friend-panel {
  transform: translateY(0) scale(1);
}

.friend-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: linear-gradient(135deg, #4ade80, #22c55e);
  color: white;
}

.friend-panel-header h3 {
  font-size: 18px;
  font-weight: 600;
  margin: 0;
}

.friend-panel-close {
  background: rgba(255, 255, 255, 0.2);
  border: none;
  color: white;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 16px;
  transition: all 0.2s ease;
}

.friend-panel-close:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* 标签页 */
.friend-tabs {
  display: flex;
  background: #f1f5f9;
  padding: 4px;
  gap: 4px;
}

.friend-tab {
  flex: 1;
  padding: 10px 12px;
  background: transparent;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  color: #6b7280;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
}

.friend-tab:hover {
  background: rgba(255, 255, 255, 0.5);
}

.friend-tab.active {
  background: white;
  color: #22c55e;
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.friend-request-badge {
  position: absolute;
  top: 4px;
  right: 8px;
  background: #ef4444;
  color: white;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 10px;
  font-weight: 600;
}

/* 标签内容 */
.friend-tab-content {
  display: none;
  flex: 1;
  overflow-y: auto;
  padding: 16px;
}

.friend-tab-content.active {
  display: block;
}

.friend-empty {
  text-align: center;
  padding: 40px 20px;
  color: #9ca3af;
  font-size: 14px;
}

/* 好友列表 */
.friend-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.friend-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: #f8fafc;
  border-radius: 12px;
  transition: all 0.2s ease;
}

.friend-item:hover {
  background: #f1f5f9;
}

.friend-item .friend-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  position: relative;
}

.friend-item .friend-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.friend-item .friend-avatar .online-dot {
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 12px;
  height: 12px;
  background: #9ca3af;
  border-radius: 50%;
  border: 2px solid white;
}

.friend-item .friend-avatar .online-dot.online {
  background: #22c55e;
}

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

.friend-item .friend-name {
  font-size: 15px;
  font-weight: 600;
  color: #1f2937;
  margin-bottom: 4px;
}

.friend-item .friend-stats {
  display: flex;
  gap: 12px;
  font-size: 12px;
  color: #6b7280;
}

.friend-item .friend-stats span {
  display: flex;
  align-items: center;
  gap: 4px;
}

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

.friend-item .friend-actions button {
  padding: 8px 12px;
  border-radius: 8px;
  border: none;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.friend-item .chat-btn {
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: white;
}

.friend-item .chat-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(34, 197, 94, 0.3);
}

.friend-item .remove-btn {
  background: #fee2e2;
  color: #dc2626;
}

.friend-item .remove-btn:hover {
  background: #fecaca;
}

/* 好友请求项 */
.friend-request-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: #fef3c7;
  border-radius: 12px;
  margin-bottom: 12px;
}

.friend-request-item .request-info {
  flex: 1;
}

.friend-request-item .request-name {
  font-size: 15px;
  font-weight: 600;
  color: #1f2937;
}

.friend-request-item .request-time {
  font-size: 12px;
  color: #9ca3af;
  margin-top: 2px;
}

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

.friend-request-item .accept-btn {
  padding: 8px 16px;
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  cursor: pointer;
}

.friend-request-item .reject-btn {
  padding: 8px 16px;
  background: #f3f4f6;
  color: #6b7280;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  cursor: pointer;
}

/* 搜索添加 */
.friend-search-box {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
}

.friend-search-box input {
  flex: 1;
  padding: 12px 16px;
  border: 2px solid #e5e7eb;
  border-radius: 12px;
  font-size: 14px;
  transition: border-color 0.2s ease;
}

.friend-search-box input:focus {
  outline: none;
  border-color: #22c55e;
}

.friend-search-btn {
  padding: 12px 20px;
  background: linear-gradient(135deg, #4ade80, #22c55e);
  color: white;
  border: none;
  border-radius: 12px;
  font-size: 14px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
}

.friend-search-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3);
}

/* 搜索结果 */
.search-result-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: #f8fafc;
  border-radius: 12px;
  margin-bottom: 10px;
}

.search-result-item .user-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
}

.search-result-item .user-info {
  flex: 1;
}

.search-result-item .user-name {
  font-size: 15px;
  font-weight: 600;
  color: #1f2937;
}

.search-result-item .user-grade {
  font-size: 12px;
  color: #6b7280;
}

.search-result-item .add-btn {
  padding: 8px 16px;
  background: linear-gradient(135deg, #4ade80, #22c55e);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.search-result-item .add-btn:hover {
  transform: translateY(-1px);
}

.search-result-item .add-btn:disabled {
  background: #d1d5db;
  cursor: not-allowed;
}

/* 移动端好友面板 */
@media (max-width: 480px) {
  .friend-panel-overlay {
    padding: 0;
    align-items: flex-end;
  }
  
  .friend-panel {
    max-width: 100%;
    max-height: 85vh;
    border-radius: 20px 20px 0 0;
  }
  
  .friend-tabs {
    padding: 4px;
  }
  
  .friend-tab {
    font-size: 12px;
    padding: 8px 10px;
  }
}

/* ========== 默写模式选择 ========== */
.dictation-mode-section {
  margin: 16px 0;
  padding: 16px;
  background: linear-gradient(135deg, #fef9e7 0%, #fef3c7 100%);
  border-radius: 16px;
  border: 2px solid #fcd34d;
}

.dictation-mode-label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #92400e;
  margin-bottom: 12px;
}

.dictation-mode-toggle {
  display: flex;
  gap: 12px;
}

.dictation-mode-toggle .mode-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 8px;
  background: white;
  border: 2px solid #e5e7eb;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.dictation-mode-toggle .mode-btn:hover {
  border-color: #fbbf24;
  transform: translateY(-2px);
}

.dictation-mode-toggle .mode-btn.active {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  border-color: #f59e0b;
  color: white;
  box-shadow: 0 4px 12px rgba(251, 191, 36, 0.4);
}

.dictation-mode-toggle .mode-icon {
  font-size: 24px;
}

.dictation-mode-toggle .mode-text {
  font-size: 14px;
  font-weight: 600;
}

.dictation-mode-toggle .mode-desc {
  font-size: 11px;
  opacity: 0.8;
}

/* ========== 在线默写全屏界面 ========== */
.online-dictation-fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(180deg, #a8e6cf 0%, #88d8b0 50%, #7ed6a8 100%);
  z-index: 99999;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

.online-dictation-fullscreen.hidden {
  display: none;
}

.online-dictation-container {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  max-width: 600px;
  width: 100%;
  margin: 0 auto;
  padding: 16px;
  box-sizing: border-box;
  min-height: 100%;
}

/* 顶部状态栏 */
.od-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 20px;
  margin-bottom: 16px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.od-progress-info {
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-weight: 700;
}

.od-current {
  font-size: 28px;
  color: #059669;
}

.od-separator {
  font-size: 20px;
  color: #9ca3af;
}

.od-total {
  font-size: 20px;
  color: #6b7280;
}

.od-countdown {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  border-radius: 20px;
  color: white;
  font-weight: 600;
}

.countdown-icon {
  font-size: 16px;
}

.countdown-num {
  font-size: 20px;
  min-width: 24px;
  text-align: center;
}

.od-close-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: #fee2e2;
  color: #ef4444;
  font-size: 18px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.od-close-btn:hover {
  background: #fecaca;
  transform: scale(1.1);
}

/* 小青蛙和提示区域 */
.od-frog-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20px;
}

.od-frog {
  width: 100px;
  height: 100px;
  transition: transform 0.3s ease;
}

.od-frog.speaking {
  animation: frogBounce 0.5s ease-in-out infinite;
}

@keyframes frogBounce {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-10px) scale(1.05); }
}

.od-frog img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.od-speech-bubble {
  background: white;
  padding: 12px 24px;
  border-radius: 20px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  margin-top: -10px;
  position: relative;
  font-size: 16px;
  color: #374151;
  font-weight: 500;
}

.od-speech-bubble::before {
  content: '';
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid white;
}

/* 输入区域 */
.od-input-area {
  background: white;
  border-radius: 24px;
  padding: 24px;
  margin-bottom: 16px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

.od-input-display {
  min-height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
  border: 3px dashed #86efac;
  border-radius: 16px;
  margin-bottom: 12px;
}

.od-input-text {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: 4px;
  color: #166534;
  text-transform: lowercase;
  white-space: pre;
}

.od-space-dot {
  display: inline-block;
  color: #0d9488;
  font-size: 0.85em;
  font-weight: 700;
  vertical-align: middle;
  margin: 0 2px;
  padding: 1px 4px;
  background: rgba(13, 148, 136, 0.13);
  border: 1.5px solid rgba(13, 148, 136, 0.3);
  border-radius: 4px;
  user-select: none;
  line-height: 1;
}

.od-cursor {
  width: 3px;
  height: 36px;
  background: #059669;
  animation: cursorBlink 1s ease-in-out infinite;
  margin-left: 2px;
}

@keyframes cursorBlink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

.od-input-hint {
  text-align: center;
  font-size: 14px;
  color: #6b7280;
}

/* 控制按钮（精简版） */
.od-control-btns {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 8px;
}

.od-ctrl-btn-mini {
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  font-size: 20px;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.od-ctrl-btn-mini.replay {
  background: linear-gradient(135deg, #60a5fa, #3b82f6);
  color: white;
  box-shadow: 0 3px 8px rgba(59, 130, 246, 0.4);
}

.od-ctrl-btn-mini.skip {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: white;
  box-shadow: 0 3px 8px rgba(251, 191, 36, 0.4);
}

.od-ctrl-btn-mini:hover {
  transform: scale(1.1);
}

.od-ctrl-btn-mini:active {
  transform: scale(0.95);
}

/* 自定义可爱键盘（大按键版 - 适合小朋友） */
.od-keyboard {
  background: rgba(255, 255, 255, 0.98);
  border-radius: 20px 20px 0 0;
  padding: 10px 4px 16px;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
  margin: 0 -16px -16px;
  flex-shrink: 0;
}

.keyboard-row {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin-bottom: 5px;
}

.keyboard-row:last-child {
  margin-bottom: 0;
}

.keyboard-bottom {
  margin-top: 3px;
}

.key-btn {
  flex: 1;
  max-width: 42px;
  min-width: 0;
  height: 50px;
  padding: 0;
  border: none;
  border-radius: 10px;
  background: linear-gradient(180deg, #ffffff 0%, #f0f0f0 100%);
  box-shadow: 0 3px 0 #c0c0c0, 0 4px 6px rgba(0, 0, 0, 0.1);
  font-size: 20px;
  font-weight: 600;
  color: #333;
  cursor: pointer;
  transition: all 0.08s ease;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  position: relative;
  overflow: hidden;
}

.key-btn:hover {
  background: linear-gradient(180deg, #fff8e1 0%, #ffecb3 100%);
}

.key-btn:active {
  transform: scale(0.92) translateY(2px);
  box-shadow: 0 1px 0 #c0c0c0, 0 2px 3px rgba(0, 0, 0, 0.1);
  background: linear-gradient(180deg, #fff3e0 0%, #ffe0b2 100%);
}

/* Shift 键 */
.key-btn.key-shift {
  max-width: 52px;
  background: linear-gradient(180deg, #e3f2fd 0%, #bbdefb 100%);
  color: #1976d2;
  font-size: 20px;
}

.key-btn.key-shift.active {
  background: linear-gradient(180deg, #1976d2 0%, #1565c0 100%);
  color: white;
}

/* 退格键 */
.key-btn.key-backspace {
  max-width: 52px;
  background: linear-gradient(180deg, #ffebee 0%, #ffcdd2 100%);
  color: #c62828;
  font-size: 20px;
}

.key-btn.key-backspace:hover {
  background: linear-gradient(180deg, #ffcdd2 0%, #ef9a9a 100%);
}

/* 特殊字符键 */
.key-btn.key-special {
  max-width: 50px;
  background: linear-gradient(180deg, #f3e5f5 0%, #e1bee7 100%);
  color: #7b1fa2;
  font-size: 22px;
}

/* 空格键 */
.key-btn.key-space {
  flex: 3;
  max-width: 180px;
  height: 50px;
  background: linear-gradient(180deg, #e8f5e9 0%, #c8e6c9 100%);
  color: #2e7d32;
  font-size: 16px;
  font-weight: 600;
}

.key-btn.key-space:hover {
  background: linear-gradient(180deg, #c8e6c9 0%, #a5d6a7 100%);
}

/* 确认键 */
.key-btn.key-submit {
  flex: 2;
  max-width: 110px;
  height: 50px;
  background: linear-gradient(180deg, #4caf50 0%, #388e3c 100%);
  color: white;
  font-size: 16px;
  font-weight: 700;
  box-shadow: 0 3px 0 #2e7d32, 0 4px 8px rgba(76, 175, 80, 0.3);
}

.key-btn.key-submit:hover {
  background: linear-gradient(180deg, #66bb6a 0%, #43a047 100%);
}

.key-btn.key-submit:active {
  transform: scale(0.95) translateY(2px);
  box-shadow: 0 1px 0 #2e7d32, 0 2px 4px rgba(76, 175, 80, 0.2);
}

/* 按键按下时的涟漪反馈 - 让小朋友感知到按下了 */
.key-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle, rgba(255,193,7,0.3) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.15s ease;
  pointer-events: none;
}
.key-btn:active::after {
  opacity: 1;
}

/* ========== 在线默写结果界面 ========== */
.online-dictation-result {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(180deg, #fef3c7 0%, #fde68a 50%, #fcd34d 100%);
  z-index: 99999;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.online-dictation-result.hidden {
  display: none;
}

.od-result-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  max-width: 500px;
  width: 100%;
  margin: 0 auto;
  padding: 20px;
  box-sizing: border-box;
  overflow-y: auto;
}

.od-result-header {
  text-align: center;
  padding: 20px 0;
}

.od-result-frog {
  width: 80px;
  height: 80px;
  margin: 0 auto 12px;
}

.od-result-frog img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.od-result-title {
  font-size: 28px;
  color: #92400e;
  margin: 0 0 20px;
}

.od-result-score {
  margin-bottom: 20px;
}

.score-circle {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: linear-gradient(135deg, #4ade80, #22c55e);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  box-shadow: 0 8px 25px rgba(34, 197, 94, 0.4);
  color: white;
}

.score-circle.good {
  background: linear-gradient(135deg, #4ade80, #22c55e);
}

.score-circle.medium {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
}

.score-circle.poor {
  background: linear-gradient(135deg, #f87171, #ef4444);
}

.score-num {
  font-size: 42px;
  font-weight: 800;
  line-height: 1;
}

.score-unit {
  font-size: 16px;
  opacity: 0.9;
}

.od-result-stats {
  display: flex;
  justify-content: center;
  gap: 24px;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 16px;
  background: white;
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.stat-icon {
  font-size: 20px;
}

.stat-item.correct .stat-icon { color: #22c55e; }
.stat-item.wrong .stat-icon { color: #ef4444; }
.stat-item.total .stat-icon { color: #3b82f6; }

.stat-num {
  font-size: 24px;
  font-weight: 700;
  color: #1f2937;
}

.stat-label {
  font-size: 12px;
  color: #6b7280;
}

/* 结果列表 */
.od-result-list {
  flex: 1;
  background: white;
  border-radius: 20px;
  padding: 16px;
  margin: 20px 0;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  overflow-y: auto;
  max-height: 300px;
}

.od-result-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 12px;
  margin-bottom: 8px;
  transition: all 0.2s ease;
}

.od-result-item:last-child {
  margin-bottom: 0;
}

.od-result-item.correct {
  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
  border: 2px solid #86efac;
}

.od-result-item.wrong {
  background: linear-gradient(135deg, #fef2f2 0%, #fecaca 100%);
  border: 2px solid #fca5a5;
}

.result-status {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}

.od-result-item.correct .result-status {
  background: #22c55e;
  color: white;
}

.od-result-item.wrong .result-status {
  background: #ef4444;
  color: white;
}

.result-content {
  flex: 1;
  min-width: 0;
}

.result-word {
  font-size: 18px;
  font-weight: 700;
  color: #1f2937;
}

.result-input {
  font-size: 14px;
  color: #6b7280;
}

.od-result-item.wrong .result-input {
  color: #ef4444;
  text-decoration: line-through;
}

.result-meaning {
  font-size: 12px;
  color: #9ca3af;
  margin-top: 2px;
}

.result-play-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, #60a5fa, #3b82f6);
  color: white;
  font-size: 14px;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.result-play-btn:hover {
  transform: scale(1.1);
}

/* 结果操作按钮 */
.od-result-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  padding-bottom: 20px;
}

.od-action-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  border: none;
  border-radius: 16px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
}

.od-action-btn.again {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: white;
  box-shadow: 0 4px 12px rgba(251, 191, 36, 0.4);
}

.od-action-btn.close {
  background: linear-gradient(135deg, #4ade80, #22c55e);
  color: white;
  box-shadow: 0 4px 12px rgba(34, 197, 94, 0.4);
}

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

/* 手机端优化 - 按键加大适合小朋友 */
@media (max-width: 480px) {
  .online-dictation-container {
    padding: 6px 6px 0;
  }
  
  .od-header {
    padding: 6px 10px;
    margin-bottom: 6px;
  }
  
  .od-current {
    font-size: 22px;
  }
  
  .od-frog-area {
    margin-bottom: 6px;
  }
  
  .od-frog {
    width: 56px;
    height: 56px;
  }
  
  .od-speech-bubble {
    padding: 6px 12px;
    font-size: 13px;
  }
  
  .od-input-area {
    padding: 10px 14px;
    margin-bottom: 6px;
  }
  
  .od-input-display {
    min-height: 44px;
    padding: 10px;
  }
  
  .od-input-text {
    font-size: 26px;
    letter-spacing: 2px;
  }
  
  .od-cursor {
    height: 28px;
  }
  
  .od-control-btns {
    margin-bottom: 4px;
  }
  
  .od-ctrl-btn-mini {
    width: 36px;
    height: 36px;
    font-size: 16px;
  }
  
  .od-keyboard {
    padding: 6px 3px 12px;
    border-radius: 14px 14px 0 0;
    /* 键盘占满底部，利用安全区域 */
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  }
  
  .keyboard-row {
    gap: 3px;
    margin-bottom: 4px;
  }
  
  .key-btn {
    /* 不设 max-width，让 flex: 1 自动均分宽度，按键更大 */
    max-width: none;
    height: 46px;
    font-size: 19px;
    border-radius: 8px;
    box-shadow: 0 2px 0 #c0c0c0, 0 3px 4px rgba(0, 0, 0, 0.08);
  }
  
  .key-btn.key-shift,
  .key-btn.key-backspace {
    flex: 1.3;
    max-width: none;
    font-size: 18px;
  }
  
  .key-btn.key-special {
    flex: 1;
    max-width: none;
    font-size: 20px;
  }
  
  .key-btn.key-space {
    flex: 3;
    max-width: none;
    height: 46px;
    font-size: 14px;
  }
  
  .key-btn.key-submit {
    flex: 2.5;
    max-width: none;
    height: 46px;
    font-size: 15px;
    font-weight: 700;
  }
}

/* 横屏模式优化（高度受限时） */
@media (max-height: 500px) {
  .online-dictation-fullscreen {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  .online-dictation-container {
    padding: 6px 12px;
    max-width: 100%;
    min-height: auto;
  }
  
  .od-header {
    padding: 4px 10px;
    margin-bottom: 4px;
  }
  
  .od-current {
    font-size: 18px;
  }
  
  .od-countdown {
    padding: 3px 8px;
  }
  
  .countdown-num {
    font-size: 14px;
  }
  
  .od-close-btn {
    width: 28px;
    height: 28px;
    font-size: 12px;
  }
  
  .od-frog-area {
    flex-direction: row;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px;
  }
  
  .od-frog {
    width: 40px;
    height: 40px;
  }
  
  .od-speech-bubble {
    margin-top: 0;
    padding: 4px 10px;
    font-size: 12px;
  }
  
  .od-input-area {
    padding: 8px 12px;
    margin-bottom: 4px;
  }
  
  .od-input-display {
    min-height: 36px;
    padding: 6px;
  }
  
  .od-input-text {
    font-size: 20px;
    letter-spacing: 1px;
  }
  
  .od-cursor {
    height: 22px;
  }
  
  .od-input-hint {
    font-size: 11px;
    margin-top: 2px;
  }
  
  .od-control-btns {
    margin-bottom: 3px;
  }
  
  .od-ctrl-btn-mini {
    width: 30px;
    height: 30px;
    font-size: 14px;
  }
  
  .od-keyboard {
    padding: 3px 4px 6px;
    border-radius: 10px 10px 0 0;
    margin: 0 -12px -6px;
  }
  
  .keyboard-row {
    gap: 3px;
    margin-bottom: 3px;
  }
  
  .key-btn {
    max-width: none;
    height: 36px;
    font-size: 15px;
    border-radius: 5px;
    box-shadow: 0 1px 0 #c0c0c0;
  }
  
  .key-btn.key-shift,
  .key-btn.key-backspace {
    flex: 1.3;
    max-width: none;
    font-size: 14px;
  }
  
  .key-btn.key-special {
    max-width: none;
    font-size: 17px;
  }
  
  .key-btn.key-space {
    flex: 3;
    max-width: none;
    height: 36px;
    font-size: 11px;
  }
  
  .key-btn.key-submit {
    flex: 2.5;
    max-width: none;
    height: 36px;
    font-size: 12px;
  }
}

/* iPad横屏优化 - 更大屏幕 */
@media (min-width: 768px) and (max-height: 700px) and (min-height: 500px) {
  .online-dictation-fullscreen {
    overflow-y: auto;
  }
  
  .online-dictation-container {
    padding: 10px 16px;
    min-height: auto;
  }
  
  .od-header {
    padding: 6px 12px;
    margin-bottom: 6px;
  }
  
  .od-frog-area {
    flex-direction: row;
    align-items: center;
    gap: 12px;
    margin-bottom: 6px;
  }
  
  .od-frog {
    width: 55px;
    height: 55px;
  }
  
  .od-speech-bubble::before {
    display: none;
  }
  
  .od-input-area {
    padding: 10px 14px;
    margin-bottom: 6px;
  }
  
  .od-keyboard {
    padding: 6px 8px 10px;
  }
  
  .keyboard-row {
    gap: 4px;
    margin-bottom: 4px;
  }
  
  .key-btn {
    max-width: none;
    height: 40px;
    font-size: 17px;
  }
  
  .key-btn.key-shift,
  .key-btn.key-backspace {
    flex: 1.3;
    max-width: none;
  }
  
  .key-btn.key-space {
    flex: 3;
    max-width: none;
    height: 40px;
  }
  
  .key-btn.key-submit {
    flex: 2.5;
    max-width: none;
    height: 40px;
    font-size: 13px;
  }
}

/* iPad横屏优化 - 极限低高度 */
@media (min-width: 768px) and (max-height: 500px) {
  .online-dictation-container {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    max-width: 100%;
    padding: 6px 16px;
    gap: 8px;
  }
  
  .od-header {
    width: 100%;
    margin-bottom: 4px;
    padding: 4px 10px;
  }
  
  .od-frog-area {
    flex: 0 0 auto;
    flex-direction: row;
    gap: 8px;
    margin-bottom: 0;
  }
  
  .od-frog {
    width: 45px;
    height: 45px;
  }
  
  .od-speech-bubble {
    padding: 4px 10px;
    font-size: 11px;
  }
  
  .od-speech-bubble::before {
    display: none;
  }
  
  .od-input-area {
    flex: 1;
    min-width: 200px;
    max-width: 350px;
    padding: 6px 10px;
    margin-bottom: 0;
  }
  
  .od-input-display {
    min-height: 32px;
    padding: 4px;
  }
  
  .od-input-text {
    font-size: 18px;
  }
  
  .od-input-hint {
    font-size: 10px;
    margin-top: 2px;
  }
  
  .od-control-btns {
    position: static;
    flex-direction: row;
    gap: 6px;
    margin-bottom: 0;
  }
  
  .od-ctrl-btn-mini {
    width: 28px;
    height: 28px;
    font-size: 12px;
  }
  
  .od-keyboard {
    width: 100%;
    padding: 4px 8px 8px;
    margin: 0;
    border-radius: 10px 10px 0 0;
  }
  
  .keyboard-row {
    gap: 3px;
    margin-bottom: 3px;
  }
  
  .key-btn {
    max-width: none;
    height: 36px;
    font-size: 15px;
    border-radius: 5px;
  }
  
  .key-btn.key-shift,
  .key-btn.key-backspace {
    flex: 1.3;
    max-width: none;
    font-size: 13px;
  }
  
  .key-btn.key-special {
    max-width: none;
  }
  
  .key-btn.key-space {
    flex: 3;
    max-width: none;
    height: 36px;
    font-size: 11px;
  }
  
  .key-btn.key-submit {
    flex: 2.5;
    max-width: none;
    height: 36px;
    font-size: 12px;
  }
}

/* 平板端优化 */
@media (min-width: 481px) and (max-width: 768px) {
  .key-btn {
    max-width: 50px;
    height: 58px;
    font-size: 24px;
  }
  
  .key-btn.key-shift,
  .key-btn.key-backspace {
    max-width: 58px;
  }
  
  .key-btn.key-space {
    max-width: 200px;
  }
  
  .key-btn.key-submit {
    max-width: 110px;
  }
}

/* 大屏优化 */
@media (min-width: 769px) {
  .online-dictation-container {
    max-width: 650px;
  }
  
  .key-btn {
    max-width: 55px;
    height: 60px;
    font-size: 26px;
  }
  
  .key-btn.key-shift,
  .key-btn.key-backspace {
    max-width: 65px;
  }
  
  .key-btn.key-space {
    max-width: 220px;
  }
  
  .key-btn.key-submit {
    max-width: 120px;
    font-size: 18px;
  }
}