/**
 * 晨幻 · 视觉增强层
 * ---------------------------------------------------------------
 * 【为什么单独一个文件而不是改style.css】
 * style.css 是 1600+ 行的既有设计体系，承载全部线上功能。
 * 直接改动风险高（改一处坏全站）。本文件只用「追加」方式叠加，
 * 不覆盖任何既有选择器，出问题删掉整个文件即可回滚。
 *
 * 【设计目标：让人觉得"值这个价"】
 * 1. 质感 —— 玻璃拟态 + 光泽 + 层次，让界面看起来"贵"
 * 2. 仪式感 —— 关键动作（VIP、掌握、连读）有明确的视觉回馈
 * 3. 专业感 —— 等宽数字、精确的进度反馈、克制的动效
 * 4. 可信度 —— 真实数据可视化（连读统计、额度、连续天数）
 *
 * 所有效果均在 prefers-reduced-motion 下关闭，尊重系统设置。
 */

/* ============================================================
   一、质感层：玻璃 + 光泽
   ============================================================ */

/* 卡片玻璃质感（仅增强 hover 与关键卡片，不改全部卡片避免视觉疲劳） */
.card-glass {
  position: relative;
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012)),
    var(--panel);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
}

/* 顶部光泽：模拟光线扫过表面，是"高级感"最廉价的来源 */
.card-glass::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    rgba(233, 206, 138, 0.42),
    transparent);
  pointer-events: none;
}

/* 鎏金文字（VIP / 品牌强调用） */
.text-gold {
  background: linear-gradient(135deg, var(--gold-hi) 0%, var(--gold) 45%, #B8941F 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* 金色描边徽章 */
.badge-gold {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--gold-hi);
  background: var(--gold-soft);
  border: 1px solid rgba(212, 175, 55, 0.34);
}

/* ============================================================
   二、数据可视化：等宽数字 + 进度条
   ============================================================ */

/* 等宽数字：统计数值跳动时不抖动（专业感的关键细节） */
.num-mono {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
  letter-spacing: -0.01em;
}

/* 环形进度（连续打卡、掌握度） */
.ring-progress {
  --pct: 0;
  --size: 64px;
  --w: 5px;
  position: relative;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  background:
    conic-gradient(var(--gold) calc(var(--pct) * 1%),
                    rgba(151, 163, 199, 0.13) 0);
  display: grid;
  place-items: center;
}

.ring-progress::before {
  content: '';
  position: absolute;
  inset: var(--w);
  border-radius: 50%;
  background: var(--panel);
}

.ring-progress > span {
  position: relative;
  z-index: 1;
  font-size: calc(var(--size) * 0.26);
  font-weight: 800;
  color: var(--gold-hi);
  font-variant-numeric: tabular-nums;
}

/* 线性进度条 */
.bar {
  height: 6px;
  border-radius: 999px;
  background: rgba(151, 163, 199, 0.12);
  overflow: hidden;
}

.bar-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--gold) 0%, var(--gold-hi) 100%);
  transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.bar-fill.mint { background: linear-gradient(90deg, #3E9C74, var(--mint)); }
.bar-fill.sky  { background: linear-gradient(90deg, #4A7FA8, var(--sky)); }

/* ============================================================
   三、额度提示：让限制变得"可理解"而非"被拒绝"
   ============================================================ */

/*
  【设计思路】
  限流最伤用户感的不是"被拒绝"，而是"不知道为什么"。
  所以：进度条 + 明确剩余 + 接近上限时才提示升级，
  不用刺眼的红色警告（那会让用户觉得产品小气）。
*/
.quota-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 13px;
  border-radius: var(--radius-sm);
  background: rgba(93, 150, 198, 0.08);
  border: 1px solid rgba(93, 150, 198, 0.2);
  font-size: 12px;
  color: var(--t2);
}

.quota-bar .bar { flex: 1; height: 4px; }

.quota-bar.warn {
  background: rgba(212, 175, 55, 0.09);
  border-color: rgba(212, 175, 55, 0.28);
}

.quota-bar.exhausted {
  background: rgba(228, 104, 90, 0.09);
  border-color: rgba(228, 104, 90, 0.3);
}

.quota-num {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--t1);
  white-space: nowrap;
}

/* ============================================================
   四、连读训练：教学卡与标注
   ============================================================ */

.linking-banner {
  padding: 13px 15px;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, rgba(82, 183, 136, 0.11), rgba(93, 150, 198, 0.07));
  border: 1px solid rgba(82, 183, 136, 0.26);
  margin-top: 11px;
}

.linking-banner-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--mint);
  margin-bottom: 7px;
}

/* 连读词对：视觉上把"该连在一起"的两词标出来 */
.link-pair {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 9px;
  margin: 3px 4px 3px 0;
  border-radius: 7px;
  background: rgba(82, 183, 136, 0.13);
  border: 1px solid rgba(82, 183, 136, 0.3);
  font-family: var(--en-font);
  font-size: 13px;
  color: var(--t1);
  cursor: pointer;
  transition: transform 0.16s ease, background 0.16s ease;
}

.link-pair:active { transform: scale(0.96); background: rgba(82, 183, 136, 0.22); }

.link-pair .arrow {
  color: var(--mint);
  font-size: 11px;
  opacity: 0.75;
}

.link-explain {
  font-size: 12px;
  color: var(--t2);
  line-height: 1.6;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.2);
  border-left: 2px solid var(--mint);
  margin-top: 7px;
}

/* 规则教学卡 */
.rule-card {
  padding: 13px 14px;
  border-radius: var(--radius-sm);
  background: var(--panel-2);
  border: 1px solid var(--line);
  margin-bottom: 10px;
}

.rule-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

.rule-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--t1);
}

.rule-desc {
  font-size: 12px;
  color: var(--t3);
  margin-bottom: 8px;
}

.rule-example {
  font-family: var(--en-font);
  font-size: 14px;
  color: var(--gold-hi);
  padding: 6px 10px;
  border-radius: 7px;
  background: var(--gold-soft);
  display: inline-block;
}

/* ============================================================
   五、微交互：克制的反馈（不要过度动画）
   ============================================================ */

/* 按压反馈：所有可点元素统一手感 */
.pressable {
  transition: transform 0.12s cubic-bezier(0.22, 1, 0.36, 1);
}

.pressable:active { transform: scale(0.97); }

/* 播放中的声波动画（只对朗读按钮，不干扰其他） */
.wave-dots {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 12px;
}

.wave-dots i {
  display: block;
  width: 2px;
  height: 4px;
  border-radius: 1px;
  background: currentColor;
  animation: wave-bounce 0.9s ease-in-out infinite;
}

.wave-dots i:nth-child(2) { animation-delay: 0.15s; }
.wave-dots i:nth-child(3) { animation-delay: 0.3s; }
.wave-dots i:nth-child(4) { animation-delay: 0.45s; }

@keyframes wave-bounce {
  0%, 100% { height: 4px; opacity: 0.5; }
  50% { height: 11px; opacity: 1; }
}

/* 数字滚动进场：统计数值用，制造"数据在生成"的感知 */
.count-in {
  animation: countIn 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

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

/* 段落淡入：内容加载后的层次感 */
.fade-up {
  animation: fadeUp 0.34s cubic-bezier(0.22, 1, 0.36, 1) both;
}

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

/* ============================================================
   六、专业感细节
   ============================================================ */

/* 分区标题：小标签 + 细线，替代普通文字标题 */
.section-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--t3);
  text-transform: uppercase;
  margin: 18px 0 10px;
}

.section-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--line-strong), transparent);
}

/* 统计卡：三栏布局，数值优先 */
.stat-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
}

.stat-cell {
  padding: 12px 10px;
  border-radius: var(--radius-sm);
  background: var(--panel);
  border: 1px solid var(--line);
  text-align: center;
}

.stat-cell .v {
  font-size: 21px;
  font-weight: 800;
  color: var(--t1);
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}

.stat-cell .k {
  font-size: 11px;
  color: var(--t3);
  margin-top: 3px;
}

.stat-cell.gold .v { color: var(--gold-hi); }
.stat-cell.mint .v { color: var(--mint); }
.stat-cell.sky .v { color: var(--sky); }

/* 空状态：友好的引导而非冷冰冰的"暂无数据" */
.empty-hint {
  padding: 26px 18px;
  text-align: center;
  border-radius: var(--radius);
  background: var(--panel);
  border: 1px dashed var(--line-strong);
}

.empty-hint .t {
  font-size: 14px;
  color: var(--t2);
  margin-bottom: 4px;
}

.empty-hint .s {
  font-size: 12px;
  color: var(--t3);
}

/* ============================================================
   七、无障碍：尊重系统设置
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* 深色偏好已是默认，无需额外处理；这里只保证对比度下限 */
@media (prefers-contrast: more) {
  :root {
    --line: rgba(151, 163, 199, 0.3);
    --t2: #D2D6E4;
    --t3: #A0A7BC;
  }
}
/* ============================================================
   术语速记训练
   ============================================================ */
.gl-modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 4px; }
.gl-mode {
  background: var(--card, rgba(255,255,255,.04));
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  padding: 14px 10px;
  text-align: center;
  cursor: pointer;
  transition: border-color .2s, background .2s, transform .12s;
}
.gl-mode:active { transform: scale(.97); }
.gl-mode.sel {
  border-color: var(--gold, #d4af6a);
  background: rgba(212,175,106,.10);
}
.gl-mode .m-title { font-size: 15px; font-weight: 600; color: var(--gold, #d4af6a); }
.gl-mode .m-sub { font-size: 12px; opacity: .75; margin-top: 4px; }
.gl-mode .m-tag { font-size: 10px; opacity: .5; margin-top: 6px; }

.gl-filters { display: flex; gap: 8px; margin-bottom: 12px; }
.gl-select {
  flex: 1; min-width: 0;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 10px;
  color: inherit;
  padding: 10px;
  font-size: 14px;
}
.gl-start-btn {
  width: 100%; padding: 14px;
  border-radius: 12px; border: none;
  background: linear-gradient(135deg, #d4af6a, #b8912f);
  color: #1a1408; font-size: 15px; font-weight: 600;
  cursor: pointer;
}
.gl-start-btn:active { transform: scale(.99); }

.gl-progress { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.gl-progress .bar { flex: 1; height: 4px; background: rgba(255,255,255,.08); border-radius: 2px; overflow: hidden; }
.gl-progress .bar-fill { height: 100%; width: 0; background: var(--gold, #d4af6a); transition: width .3s; }
.gl-progress .num-mono { font-size: 12px; opacity: .7; min-width: 48px; text-align: right; }

.gl-card {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  padding: 22px 18px;
  margin-bottom: 12px;
}
.gl-ask { font-size: 12px; opacity: .6; margin-bottom: 12px; }
.gl-prompt {
  font-size: 24px; font-weight: 600; line-height: 1.35;
  margin-bottom: 18px; word-break: break-word;
}
.gl-audio-wrap { text-align: center; padding: 12px 0; }
.gl-play-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 26px; border-radius: 999px;
  background: rgba(212,175,106,.14);
  border: 1px solid var(--gold, #d4af6a);
  color: var(--gold, #d4af6a);
  font-size: 15px; cursor: pointer;
  min-height: 48px;
}
.gl-audio-hint { font-size: 11px; opacity: .5; margin-top: 8px; }

.gl-input-wrap { display: flex; gap: 8px; }
.gl-input {
  flex: 1; min-width: 0;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px;
  color: inherit;
  padding: 12px 14px;
  font-size: 16px; /* ≥16px 防 iOS 聚焦时自动放大 */
}
.gl-input:focus { outline: none; border-color: var(--gold, #d4af6a); }
.gl-submit {
  padding: 0 20px; border-radius: 10px; border: none;
  background: var(--gold, #d4af6a); color: #1a1408;
  font-size: 14px; font-weight: 600; cursor: pointer;
  min-height: 46px;
}
.gl-submit:disabled { opacity: .4; }

.gl-options { display: grid; gap: 8px; }
.gl-option {
  width: 100%; text-align: left;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 12px;
  color: inherit;
  padding: 14px;
  font-size: 15px;
  cursor: pointer;
  min-height: 48px;
}
.gl-option.right { border-color: #4ade80; background: rgba(74,222,128,.12); }
.gl-option.wrong { border-color: #f87171; background: rgba(248,113,113,.12); }

.gl-feedback { border-radius: 12px; padding: 14px; margin-top: 4px; }
.gl-feedback.ok { background: rgba(74,222,128,.10); border: 1px solid rgba(74,222,128,.3); }
.gl-feedback.bad { background: rgba(248,113,113,.10); border: 1px solid rgba(248,113,113,.3); }
.gl-feedback .fb-title { font-weight: 600; margin-bottom: 8px; }
.gl-feedback.ok .fb-title { color: #4ade80; }
.gl-feedback.bad .fb-title { color: #f87171; }
.gl-feedback .fb-ans { font-size: 13px; margin-bottom: 4px; }
.gl-feedback .fb-note { font-size: 13px; opacity: .85; }
.gl-feedback .fb-hint { font-size: 12px; opacity: .8; margin-top: 6px; }
.gl-feedback .fb-hint.warn { color: #fbbf24; opacity: 1; }
.gl-feedback .fb-explain {
  font-size: 12px; opacity: .7; margin-top: 10px;
  padding-top: 10px; border-top: 1px solid rgba(255,255,255,.10);
}

.gl-result-ring { position: relative; display: inline-block; margin: 12px auto; }
.gl-ring-num {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; font-weight: 600;
}
.gl-result-stats {
  display: flex; justify-content: space-around;
  margin: 14px 0; font-size: 13px;
}
.gl-wrong-list { margin-top: 12px; }
.gl-wrong-title { font-size: 13px; font-weight: 600; margin-bottom: 8px; opacity: .85; }
.gl-wrong-item {
  background: rgba(255,255,255,.04);
  border-left: 2px solid #f87171;
  border-radius: 8px;
  padding: 10px 12px; margin-bottom: 8px;
}
.gl-wrong-item .w-term { font-size: 14px; font-weight: 600; }
.gl-wrong-item .w-en { font-size: 13px; color: var(--gold, #d4af6a); margin-top: 2px; }
.gl-wrong-item .w-ex { font-size: 12px; opacity: .65; margin-top: 4px; }
.gl-perfect { text-align: center; padding: 16px; color: #4ade80; font-size: 14px; }
.gl-result-actions { display: flex; gap: 8px; margin-top: 16px; }
.gl-result-actions button { flex: 1; }

@media (prefers-reduced-motion: reduce) {
  .gl-mode, .gl-progress .bar-fill, #gl-ring { transition: none !important; }
}