/* ===== 重置 & 变量 ===== */
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
:root {
  --bg: #f5f5f7; --card: #ffffff; --primary: #4f46e5; --primary-light: #e0e7ff;
  --text: #1f2937; --text-secondary: #6b7280; --border: #e5e7eb;
  --success: #10b981; --danger: #ef4444; --radius: 16px;
  --review-gradient: linear-gradient(135deg,#eef2ff,#e0e7ff);
}
body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif;
  background: var(--bg); color: var(--text); min-height: 100vh;
  max-width: 420px; margin: 0 auto; position: relative; overflow-x: hidden;
}

/* ===== 通用 ===== */
.top-bar { display:flex; align-items:center; justify-content:center; padding:16px 20px 12px; background:var(--bg); position:sticky; top:0; z-index:100; }
.top-bar h2 { font-size:22px; font-weight:700; flex:1; text-align:center; }
.top-bar-btn { background:none; border:none; font-size:20px; cursor:pointer; padding:4px 8px; position:absolute; right:20px; }
.page { display:none; padding-bottom:80px; }
.page.active { display:block; }
.section-title { font-size:13px; color:var(--text-secondary); margin-bottom:10px; padding-left:22px; }

/* ===== 学习页 ===== */
.stats-bar { display:flex; justify-content:center; gap:28px; padding:0 20px 16px; }
.stats-bar .stat-item { text-align:center; }
.stats-bar .stat-num { font-size:20px; font-weight:700; color:var(--primary); }
.stats-bar .stat-label { font-size:11px; color:var(--text-secondary); }

.word-card-area { padding:0 20px; margin-bottom:16px; }
.word-card {
  background:var(--card); border-radius:var(--radius); box-shadow:0 2px 16px rgba(0,0,0,0.06);
  padding:30px 24px 24px; text-align:center; min-height:210px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  cursor:pointer; user-select:none; transition:transform 0.15s ease-out;
}
.word-card.swiping { transition:none; }
.word-card:active { transform:scale(0.98); }
.wc-front { display:flex; flex-direction:column; align-items:center; }
.wc-back { display:none; flex-direction:column; align-items:center; }
.word-card.flipped .wc-front { display:none; }
.word-card.flipped .wc-back { display:flex; }
.word-main { font-size:38px; font-weight:700; margin-bottom:6px; letter-spacing:1px; }
.word-phonetic { font-size:14px; color:var(--text-secondary); margin-bottom:18px; }
.speak-btn {
  width:50px; height:50px; border-radius:50%; background:var(--primary); color:#fff; border:none;
  font-size:22px; cursor:pointer; display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 14px rgba(79,70,229,0.35); margin-bottom:16px; transition:transform 0.15s;
}
.speak-btn:active { transform:scale(0.92); }
.card-flip-hint { font-size:11px; color:#c0c0c0; }
.word-zh { font-size:24px; color:var(--primary); font-weight:600; margin-bottom:12px; }
.word-example { font-size:13px; color:var(--text-secondary); line-height:1.6; margin-bottom:4px; }
.word-example-zh { font-size:12px; color:#9ca3af; line-height:1.6; margin-bottom:14px; }

.card-actions { display:flex; justify-content:center; gap:8px; padding:0 16px; margin-bottom:20px; }
.card-act-btn {
  flex:1; min-width:0; padding:9px 4px; border-radius:25px;
  border:1.5px solid var(--border); background:var(--card); font-size:12px;
  cursor:pointer; transition:all 0.15s; color:var(--text);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.card-act-btn:active { transform:scale(0.96); }
.card-act-btn.success { border-color:var(--success); color:var(--success); }
.card-act-btn.warn { border-color:#f59e0b; color:#f59e0b; }
.card-act-btn.fav { border-color:#f59e0b; color:#f59e0b; max-width:40px; padding:9px 0; font-size:16px; }
.card-act-btn.fav.active { background:#fef3c7; }

.progress-area { padding:0 20px; margin-bottom:20px; }
.progress-header { display:flex; justify-content:space-between; font-size:12px; color:var(--text-secondary); margin-bottom:6px; }
.progress-bar { height:5px; background:#e5e7eb; border-radius:3px; overflow:hidden; }
.progress-fill { height:100%; background:var(--primary); border-radius:3px; transition:width 0.4s; }

/* ===== 待学列表 ===== */
.wordlist-section { padding:0 20px; }
.wordlist-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.wordlist-item {
  background:var(--card); border-radius:12px; padding:12px 10px;
  display:flex; align-items:center; gap:8px; box-shadow:0 1px 3px rgba(0,0,0,0.04);
  font-size:13px; position:relative; overflow:hidden; cursor:pointer; transition:all 0.3s;
}
.wordlist-item.removing { animation:itemRemove 0.35s ease forwards; }
@keyframes itemRemove {
  0% { opacity:1; transform:scale(1); }
  50% { opacity:0.5; transform:scale(0.95); }
  100% { opacity:0; transform:scale(0.9); height:0; padding:0; margin:0; }
}
.wordlist-item.slide-up { animation:slideUp 0.35s ease; }
@keyframes slideUp { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }
.wordlist-item-current { border:1.5px solid var(--primary); background:var(--primary-light); }
.wordlist-num {
  width:22px; height:22px; border-radius:50%; background:var(--primary-light);
  color:var(--primary); font-size:11px; font-weight:700;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.wordlist-item-current .wordlist-num { background:var(--primary); color:#fff; }
.wordlist-word { font-weight:600; font-size:13px; }
.wordlist-zh { font-size:10px; color:var(--text-secondary); margin-top:2px; }
.wordlist-content { flex:1; min-width:0; }
.wordlist-actions { display:flex; gap:4px; flex-shrink:0; }
.wordlist-action-btn {
  width:28px; height:28px; border-radius:50%; border:none;
  background:var(--bg); font-size:13px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:all 0.15s; box-shadow:0 1px 3px rgba(0,0,0,0.06);
}
.wordlist-action-btn:active { transform:scale(0.88); }
.wordlist-edit-btn { color:var(--primary); }
.wordlist-edit-btn:active { background:var(--primary-light); }
.wordlist-delete-btn { color:var(--danger); }
.wordlist-delete-btn:active { background:#fee2e2; }
body.dark-mode .wordlist-action-btn { background:rgba(255,255,255,0.1); }
body.dark-mode .wordlist-edit-btn:active { background:rgba(79,70,229,0.2); }
body.dark-mode .wordlist-delete-btn:active { background:rgba(239,68,68,0.2); }

/* ===== 分类页 ===== */
.category-page { padding:0 16px; }
.cat-summary {
  display:flex; justify-content:center; gap:24px; padding:12px 0 16px;
  background:var(--card); border-radius:var(--radius); margin-bottom:16px;
  box-shadow:0 1px 4px rgba(0,0,0,0.04);
}
.cat-summary-item { text-align:center; }
.cat-summary-num { font-size:18px; font-weight:700; color:var(--primary); }
.cat-summary-label { font-size:10px; color:var(--text-secondary); }
.cat-section-title { font-size:13px; color:var(--text-secondary); margin-bottom:8px; padding-left:2px; }
.cat-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:20px; }
.cat-card {
  background:var(--card); border-radius:14px; padding:16px 12px;
  box-shadow:0 1px 4px rgba(0,0,0,0.04); cursor:pointer; transition:transform 0.15s;
}
.cat-card:active { transform:scale(0.97); }
.cat-icon { font-size:26px; margin-bottom:8px; }
.cat-name { font-size:13px; font-weight:600; margin-bottom:3px; }
.cat-count { font-size:10px; color:var(--text-secondary); }
.cat-progress { height:3px; background:var(--border); border-radius:2px; margin-top:8px; overflow:hidden; }
.cat-progress-fill { height:100%; background:var(--primary); border-radius:2px; transition:width 0.4s; }

/* ===== 我的页 ===== */
.my-page { padding:0 20px; }
.profile-header {
  background:var(--card); border-radius:var(--radius); padding:28px 20px 20px;
  text-align:center; box-shadow:0 1px 4px rgba(0,0,0,0.04); margin-bottom:16px;
}
.avatar {
  width:64px; height:64px; border-radius:50%; background:var(--primary-light);
  display:flex; align-items:center; justify-content:center; font-size:28px; margin:0 auto 10px;
}
.profile-name { font-size:17px; font-weight:700; margin-bottom:4px; }
.profile-desc { font-size:12px; color:var(--text-secondary); }

/* ===== 练习页 ===== */
.practice-page { padding:0 20px; }
.practice-cat-title { font-size:15px; font-weight:700; text-align:center; margin-bottom:16px; }
.practice-cat-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; }
.practice-cat-btn {
  background:var(--card); border-radius:14px; padding:16px 8px; text-align:center;
  box-shadow:0 1px 4px rgba(0,0,0,0.04); cursor:pointer; transition:transform 0.15s;
}
.practice-cat-btn:active { transform:scale(0.96); }
.practice-cat-icon { font-size:28px; margin-bottom:6px; }
.practice-cat-name { font-size:12px; font-weight:600; margin-bottom:2px; }
.practice-cat-count { font-size:10px; color:var(--text-secondary); }

.practice-header { display:flex; justify-content:space-between; font-size:12px; color:var(--text-secondary); margin-bottom:6px; }
.practice-progress-bar { height:4px; background:var(--border); border-radius:2px; overflow:hidden; margin-bottom:20px; }
.practice-progress-fill { height:100%; background:var(--primary); border-radius:2px; transition:width 0.4s; }

.practice-card {
  background:var(--card); border-radius:var(--radius); padding:30px 20px;
  text-align:center; box-shadow:0 2px 16px rgba(0,0,0,0.06); margin-bottom:20px;
}
.practice-zh { font-size:28px; font-weight:700; color:var(--primary); margin-bottom:8px; }
.practice-hint { font-size:13px; color:var(--text-secondary); margin-bottom:18px; }
.practice-input {
  width:100%; max-width:300px; padding:14px 16px; border:2.5px solid var(--border);
  border-radius:14px; font-size:22px; text-align:center; letter-spacing:2px;
  background:var(--bg); color:var(--text); outline:none; transition:border-color 0.2s;
}
.practice-input:focus { border-color:var(--primary); }
.practice-input.correct { border-color:var(--success); background:rgba(16,185,129,0.08); }
.practice-input.wrong { border-color:var(--danger); background:rgba(239,68,68,0.08); }
.practice-feedback { font-size:16px; font-weight:600; min-height:28px; margin-top:14px; }
.practice-feedback.correct { color:var(--success); }
.practice-feedback.wrong { color:var(--danger); }
.practice-answer-detail { margin-top:14px; padding-top:14px; border-top:1px solid var(--border); }
.practice-detail-en { font-size:16px; font-weight:600; color:var(--text); }
.practice-detail-phonetic { font-size:13px; color:var(--text-secondary); }
.practice-detail-ex { font-size:13px; color:var(--text-secondary); margin-top:6px; font-style:italic; }

.practice-actions { display:flex; gap:10px; }
.practice-actions .form-btn { flex:1; }

.practice-result { text-align:center; padding:20px 0; }
.practice-result-score { font-size:22px; font-weight:700; }

/* ===== 学习统计卡片 ===== */
.stats-card {
  background:var(--card); border-radius:var(--radius); padding:20px;
  box-shadow:0 1px 4px rgba(0,0,0,0.04); margin-bottom:20px;
}
.stats-card-title { font-size:13px; color:var(--text-secondary); margin-bottom:14px; }
.stats-card-grid { display:grid; grid-template-columns:1fr 1fr 1fr 1fr; gap:8px; }
.stats-card-item { text-align:center; }
.stats-card-num { font-size:22px; font-weight:700; color:var(--primary); }
.stats-card-label { font-size:10px; color:var(--text-secondary); margin-top:2px; }
.my-grid { display:grid; grid-template-columns:1fr 1fr 1fr 1fr; gap:8px; margin-bottom:24px; }
.my-grid-item {
  background:var(--card); border-radius:12px; padding:16px 6px; text-align:center;
  box-shadow:0 1px 3px rgba(0,0,0,0.03); cursor:pointer; transition:transform 0.15s;
}
.my-grid-item:active { transform:scale(0.95); }
.my-grid-icon { font-size:22px; margin-bottom:5px; }
.my-grid-name { font-size:10px; color:var(--text-secondary); line-height:1.3; }

/* ===== 设置列表 ===== */
.settings-group { margin-bottom:24px; }
.settings-group-title { font-size:12px; color:var(--text-secondary); margin-bottom:8px; padding-left:4px; }
.settings-item {
  display:flex; align-items:center; justify-content:space-between;
  background:var(--card); padding:13px 16px; border-radius:12px; margin-bottom:5px;
  cursor:pointer; box-shadow:0 1px 3px rgba(0,0,0,0.03);
}
.settings-item-left { display:flex; align-items:center; gap:12px; }
.settings-item-icon { width:30px; height:30px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:15px; }
.settings-item-name { font-size:14px; }
.settings-item-arrow { color:#c0c0c0; font-size:14px; }
.color-options { display:flex; gap:10px; padding:8px 4px 16px; flex-wrap:wrap; }
.color-dot { width:30px; height:30px; border-radius:50%; cursor:pointer; border:2.5px solid transparent; transition:border-color 0.15s; }
.color-dot.active { border-color:var(--text); }
.speech-rate-area { padding:8px 4px 16px; }
.speech-rate-control { display:flex; align-items:center; gap:10px; }
.speech-rate-label { font-size:12px; color:var(--text-secondary); flex-shrink:0; }
.speech-rate-slider {
  flex:1; height:4px; -webkit-appearance:none; appearance:none;
  background:var(--border); border-radius:2px; outline:none;
}
.speech-rate-slider::-webkit-slider-thumb {
  -webkit-appearance:none; width:20px; height:20px; border-radius:50%;
  background:var(--primary); cursor:pointer; box-shadow:0 2px 6px rgba(79,70,229,0.3);
}
.speech-rate-value { text-align:center; font-size:14px; color:var(--primary); font-weight:600; margin-top:8px; }

/* ===== 弹窗 ===== */
.modal-overlay {
  display:none; position:fixed; top:0; left:0; right:0; bottom:0;
  background:rgba(0,0,0,0.4); z-index:200; justify-content:center; align-items:flex-end;
}
.modal-overlay.show { display:flex; }
.modal {
  background:var(--card); border-radius:20px 20px 0 0; width:100%; max-width:420px;
  padding:24px 20px 34px; max-height:80vh; overflow-y:auto;
  animation:modalUp 0.3s ease;
}
@keyframes modalUp { from{transform:translateY(100%)} to{transform:translateY(0)} }
.modal-title { font-size:18px; font-weight:700; margin-bottom:20px; text-align:center; }
.form-group { margin-bottom:14px; }
.form-label { font-size:12px; color:var(--text-secondary); margin-bottom:5px; display:block; }
.form-input {
  width:100%; padding:10px 14px; border:1.5px solid var(--border); border-radius:10px;
  font-size:14px; background:var(--bg); color:var(--text); outline:none;
}
.form-input:focus { border-color:var(--primary); }
.form-btn {
  width:100%; padding:12px; border-radius:25px; border:none; background:var(--primary);
  color:#fff; font-size:15px; font-weight:600; cursor:pointer; margin-top:8px;
}
.form-btn:active { opacity:0.85; }
.form-btn.secondary { background:var(--bg); color:var(--text); border:1.5px solid var(--border); }
.form-btn.danger { background:var(--danger); }

/* ===== 测验弹窗内 ===== */
.quiz-question { font-size:20px; font-weight:600; text-align:center; margin-bottom:24px; }
.quiz-options { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:16px; }
.quiz-opt {
  padding:14px; border:1.5px solid var(--border); border-radius:12px; background:var(--card);
  font-size:15px; cursor:pointer; text-align:center; transition:all 0.2s;
}
.quiz-opt:hover { border-color:var(--primary); }
.quiz-opt.correct { border-color:var(--success); background:#ecfdf5; color:var(--success); }
.quiz-opt.wrong { border-color:var(--danger); background:#fef2f2; color:var(--danger); }
.quiz-opt.disabled { pointer-events:none; }
.quiz-result { text-align:center; font-size:16px; min-height:24px; margin-bottom:16px; }
.quiz-mode-btn {
  padding:5px 14px; border:1.5px solid var(--border); border-radius:8px;
  background:var(--card); font-size:13px; cursor:pointer; transition:all 0.2s; color:var(--text-secondary);
}
.quiz-mode-btn.active { border-color:var(--primary); background:var(--primary-light); color:var(--primary); font-weight:600; }

/* ===== 拼写弹窗内 ===== */
.spell-word-zh { font-size:24px; color:var(--primary); font-weight:600; margin-bottom:8px; }
.spell-hint { font-size:13px; color:var(--text-secondary); margin-bottom:20px; }
.spell-input {
  width:80%; max-width:260px; padding:12px 16px; border:2px solid var(--border);
  border-radius:12px; font-size:20px; text-align:center; letter-spacing:2px;
  background:var(--bg); color:var(--text); outline:none;
}
.spell-input:focus { border-color:var(--primary); }
.spell-input.correct { border-color:var(--success); background:#ecfdf5; }
.spell-input.wrong { border-color:var(--danger); background:#fef2f2; }
.spell-answer { font-size:14px; color:var(--text-secondary); margin-top:12px; min-height:20px; }

/* ===== 复习提醒卡片 ===== */
.review-banner {
  display:flex; align-items:center; gap:12px; margin:0 20px 16px;
  background:var(--review-gradient); border-radius:14px;
  padding:14px 16px; cursor:pointer; transition:transform 0.15s;
}
.review-banner:active { transform:scale(0.98); }
.review-banner-icon { font-size:24px; }
.review-banner-text { flex:1; }
.review-banner-title { font-size:14px; font-weight:600; color:var(--primary); }
.review-banner-desc { font-size:11px; color:var(--text-secondary); margin-top:2px; }
.review-banner-arrow { font-size:18px; color:var(--primary); font-weight:700; }

/* ===== 错题本弹窗 ===== */
.mistakes-list { max-height:50vh; overflow-y:auto; }
.mistake-item {
  background:var(--bg); border-radius:12px; padding:14px 16px; margin-bottom:8px;
  position:relative;
}
.mistake-word { font-size:16px; font-weight:700; }
.mistake-zh { font-size:13px; color:var(--text-secondary); margin-top:2px; }
.mistake-meta { display:flex; gap:12px; margin-top:6px; font-size:11px; }
.mistake-count { color:var(--danger); font-weight:600; }
.mistake-streak { color:var(--success); }
.mistake-actions { position:absolute; right:12px; top:50%; transform:translateY(-50%); display:flex; gap:6px; }
.mistake-btn {
  width:32px; height:32px; border-radius:50%; border:none; background:var(--card);
  font-size:14px; cursor:pointer; box-shadow:0 1px 3px rgba(0,0,0,0.08);
  display:flex; align-items:center; justify-content:center;
}
.mistake-btn.remove { color:var(--danger); }

/* ===== 收藏夹弹窗 ===== */
.favorites-list { max-height:55vh; overflow-y:auto; }
.fav-item {
  background:var(--bg); border-radius:12px; padding:14px 16px; margin-bottom:8px;
  position:relative; cursor:pointer;
}
.fav-item:active { opacity:0.85; }
.fav-word { font-size:16px; font-weight:700; }
.fav-phonetic { font-size:12px; color:var(--text-secondary); margin-top:2px; }
.fav-zh { font-size:13px; color:var(--primary); margin-top:4px; }
.fav-cat { font-size:11px; color:#9ca3af; margin-top:4px; }
.fav-actions { position:absolute; right:12px; top:50%; transform:translateY(-50%); display:flex; gap:6px; }

/* ===== 复习弹窗 ===== */
.review-word { font-size:34px; font-weight:700; margin-bottom:6px; letter-spacing:1px; }
.review-phonetic { font-size:14px; color:var(--text-secondary); margin-bottom:18px; }
.review-answer { margin-bottom:16px; }
.review-zh { font-size:22px; color:var(--primary); font-weight:600; margin-bottom:10px; }
.review-example { font-size:13px; color:var(--text-secondary); line-height:1.6; margin-bottom:4px; }
.review-example-zh { font-size:12px; color:#9ca3af; line-height:1.6; }
.review-rating-label { font-size:14px; color:var(--text-secondary); margin-bottom:12px; }
.review-rating-btns { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:16px; }
.rate-btn {
  padding:12px; border-radius:12px; border:2px solid; font-size:15px;
  font-weight:600; cursor:pointer; background:var(--card); transition:all 0.15s;
}
.rate-btn:active { transform:scale(0.96); }
.rate-bad { border-color:#ef4444; color:#ef4444; }
.rate-bad:hover, .rate-bad:active { background:#fef2f2; }
.rate-meh { border-color:#f59e0b; color:#f59e0b; }
.rate-meh:hover, .rate-meh:active { background:#fefce8; }
.rate-good { border-color:#10b981; color:#10b981; }
.rate-good:hover, .rate-good:active { background:#ecfdf5; }
.rate-great { border-color:#4f46e5; color:#4f46e5; }
.rate-great:hover, .rate-great:active { background:#eef2ff; }
.review-result { padding:20px 0; }

/* ===== 底部导航 ===== */
.tab-bar {
  position:fixed; bottom:0; left:50%; transform:translateX(-50%);
  width:100%; max-width:420px; background:var(--card);
  display:flex; justify-content:space-around; padding:8px 0 22px;
  border-top:1px solid var(--border); z-index:100;
}
.tab-item {
  display:flex; flex-direction:column; align-items:center; gap:1px;
  cursor:pointer; color:var(--text-secondary); font-size:10px;
  background:none; border:none; padding:4px 0; flex:1;
  transition:color 0.15s; -webkit-tap-highlight-color:transparent;
}
.tab-item .tab-icon { font-size:20px; }
.tab-item.active { color:var(--primary); font-weight:600; }

/* ===== Toast 通知 ===== */
#toast-container {
  position:fixed; top:12px; left:50%; transform:translateX(-50%);
  z-index:999; display:flex; flex-direction:column; align-items:center; gap:8px;
  pointer-events:none; max-width:420px; width:100%; padding:0 20px;
}
.toast {
  padding:12px 20px; border-radius:12px; font-size:14px; font-weight:500;
  color:#fff; pointer-events:auto; opacity:0; transform:translateY(-12px);
  transition:all 0.3s ease; box-shadow:0 4px 16px rgba(0,0,0,0.15);
  text-align:center; max-width:320px; word-break:break-word;
}
.toast.show { opacity:1; transform:translateY(0); }
.toast-info { background:var(--primary); }
.toast-success { background:var(--success); }
.toast-error { background:var(--danger); }
.toast-warn { background:#f59e0b; }

/* ===== 暗色模式适配 ===== */
body.dark-mode .mistake-item,
body.dark-mode .fav-item { background:rgba(255,255,255,0.06); }
body.dark-mode .mistake-btn { background:var(--card); color:var(--text); }
body.dark-mode .quiz-opt.correct { background:rgba(16,185,129,0.15); }
body.dark-mode .quiz-opt.wrong { background:rgba(239,68,68,0.15); }
body.dark-mode .spell-input.correct { background:rgba(16,185,129,0.15); }
body.dark-mode .spell-input.wrong { background:rgba(239,68,68,0.15); }
body.dark-mode .rate-bad:hover, body.dark-mode .rate-bad:active { background:rgba(239,68,68,0.15); }
body.dark-mode .rate-meh:hover, body.dark-mode .rate-meh:active { background:rgba(245,158,11,0.15); }
body.dark-mode .rate-good:hover, body.dark-mode .rate-good:active { background:rgba(16,185,129,0.15); }
body.dark-mode .rate-great:hover, body.dark-mode .rate-great:active { background:rgba(79,70,229,0.15); }
body.dark-mode .speech-rate-slider { background:var(--border); }
body.dark-mode .toast { box-shadow:0 4px 16px rgba(0,0,0,0.4); }

/* ===== 成就弹窗 ===== */
.achievements-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:16px; }
.achievement-card {
  background:var(--bg); border-radius:14px; padding:16px 12px;
  text-align:center; position:relative; transition:all 0.2s;
  box-shadow:0 1px 3px rgba(0,0,0,0.04);
}
.achievement-card.locked { opacity:0.45; filter:grayscale(0.8); }
.achievement-icon { font-size:32px; margin-bottom:8px; }
.achievement-name { font-size:13px; font-weight:700; margin-bottom:4px; }
.achievement-desc { font-size:10px; color:var(--text-secondary); line-height:1.4; }
.achievement-lock {
  position:absolute; top:10px; right:10px; font-size:14px; opacity:0.5;
}
body.dark-mode .achievement-card { background:rgba(255,255,255,0.06); }
body.dark-mode .achievement-card.locked { opacity:0.35; }

/* ===== 数据备份弹窗 ===== */
.backup-stat { background:var(--bg); border-radius:12px; padding:12px 8px; }
.backup-stat-num { font-size:22px; font-weight:700; color:var(--primary); }
.backup-stat-label { font-size:11px; color:var(--text-secondary); margin-top:2px; }
body.dark-mode .backup-stat { background:rgba(255,255,255,0.06); }

/* ===== 学习日历弹窗 ===== */
.calendar-header { text-align:center; margin-bottom:16px; }
.calendar-streak { font-size:14px; color:var(--primary); font-weight:600; margin-bottom:6px; }
.calendar-nav { display:flex; align-items:center; justify-content:center; gap:20px; margin-bottom:16px; }
.calendar-nav-btn {
  width:36px; height:36px; border-radius:50%; border:1.5px solid var(--border);
  background:var(--card); font-size:18px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition:all 0.15s;
}
.calendar-nav-btn:active { transform:scale(0.92); }
.calendar-month-title { font-size:16px; font-weight:700; min-width:120px; text-align:center; }
.cal-weekdays { display:grid; grid-template-columns:repeat(7, 1fr); gap:2px; margin-bottom:6px; }
.cal-weekday {
  text-align:center; font-size:11px; color:var(--text-secondary); font-weight:600; padding:4px 0;
}
.cal-grid { display:grid; grid-template-columns:repeat(7, 1fr); gap:2px; }
.cal-cell {
  aspect-ratio:1; border-radius:10px; display:flex; flex-direction:column;
  align-items:center; justify-content:center; font-size:13px; position:relative;
  transition:all 0.15s;
}
.cal-cell.empty { background:transparent; }
.cal-day { font-weight:500; color:var(--text); line-height:1; }
.cal-cell.today {
  background:var(--primary-light); border:2px solid var(--primary);
}
.cal-cell.today .cal-day { color:var(--primary); font-weight:700; }
.cal-cell.studied { background:var(--success); }
.cal-cell.studied .cal-day { color:#fff; font-weight:700; }
.cal-cell.studied.today {
  background:var(--success); border:2px solid var(--primary);
}
.cal-cell.studied.today .cal-day { color:#fff; }
.cal-indicator {
  font-size:8px; color:rgba(255,255,255,0.9); font-weight:600; margin-top:2px; line-height:1;
}
body.dark-mode .cal-cell.today { background:rgba(79,70,229,0.2); }
body.dark-mode .cal-cell.studied { background:rgba(16,185,129,0.7); }