/* ============================================================
   Aura 英语学习助手 —— 焕新治愈系浅色版
   ============================================================ */

:root {
  --bg: #F8FAFC;
  --card: #FFFFFF;
  --border: #E2E8F0;
  --border-hover: #CBD5E1;

  --text-main: #0F172A;
  --text-muted: #64748B;
  --text-sub: #334155;

  /* 学习语义高亮色 */
  --indigo-glow: #4F46E5;
  --indigo-soft: #EEF2FF;
  --coral-glow: #E11D48;
  --coral-soft: #FFF1F2;
  --teal-glow: #0D9488;
  --teal-soft: #F0FDFA;
  --emerald-glow: #059669;
  --emerald-soft: #ECFDF5;
  --amber-glow: #D97706;
  --amber-soft: #FFFBEB;

  --r-lg: 20px;
  --r-md: 14px;
  --r-sm: 10px;
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text-main);
  display: flex;
  justify-content: center;
  min-height: 100vh;
}

.app {
  width: 100%;
  max-width: 480px;
  background: var(--card);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
}

@media (min-width: 560px) {
  .app {
    min-height: 88vh;
    margin: 32px 0;
    border-radius: 28px;
    overflow: hidden;
    box-shadow: 0 20px 50px -15px rgba(15, 23, 42, 0.08), 0 0 0 1px var(--border);
  }
}

/* 顶部学习彩条已移除 */

.view { flex: 1; display: flex; flex-direction: column; }
.hidden { display: none !important; }
.body { padding: 20px 20px 36px; }

/* 顶部导航 */
.topbar { display: flex; justify-content: space-between; align-items: center; padding-bottom: 16px; }

.target { font-size: 12px; font-weight: 600; color: #4F46E5; background: var(--indigo-soft); padding: 5px 12px; border-radius: 999px; border: 1px solid rgba(79,70,229,0.15); }

.icon-link {
  font-size: 13px; font-weight: 600; color: #4F46E5; background: var(--indigo-soft);
  padding: 7px 14px; border-radius: 999px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid rgba(79,70,229,0.15); font-family: inherit; transition: all 0.2s;
}
.icon-link:hover { background: #E0E7FF; }
.icon-link.plain { background: #F1F5F9; color: var(--text-sub); border-color: var(--border); }
.icon-link.plain:hover { background: #E2E8F0; color: #0F172A; }

.section { margin-top: 24px; }
.label { font-size: 12.5px; font-weight: 600; color: var(--text-muted); margin-bottom: 8px; }
.hint { font-size: 12px; color: var(--text-muted); margin-top: 10px; line-height: 1.6; }

.banner { background: var(--amber-soft); color: #92400E; border: 1px solid rgba(217,119,6,0.2); border-radius: var(--r-md); padding: 12px 15px; font-size: 12.5px; line-height: 1.7; margin-top: 14px; }
.banner b { font-weight: 700; color: #B45309; }
.banner.err { background: #FFF1F2; color: #9F1239; border-color: rgba(225,29,72,0.2); }

/* ---------- 核心：首页大语音按钮交互区 ---------- */
.home { padding: 24px; min-height: 640px; display: flex; flex-direction: column; }
.home-mid { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 32px; }

.home-tip { text-align: center; }
.home-tip .t1 { font-size: 22px; font-weight: 700; color: #0F172A; letter-spacing: -0.3px; }
.home-tip .t2 { font-size: 13.5px; color: var(--text-muted); margin-top: 8px; line-height: 1.7; }

/* 沉浸式大录音钮（带波纹光环） */
.big-btn {
  position: relative;
  width: 178px; height: 178px; border-radius: 50%; border: 1px solid #C7D2FE; cursor: pointer; font-family: inherit;
  background: linear-gradient(145deg, #FFFFFF 0%, #EEF2FF 100%);
  box-shadow: 0 16px 35px rgba(79, 70, 229, 0.15), inset 0 2px 6px rgba(255, 255, 255, 0.9);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  transition: all 0.25s cubic-bezier(.34,1.56,.64,1);
}
.big-btn:hover { transform: scale(1.04); border-color: #818CF8; box-shadow: 0 20px 40px rgba(79, 70, 229, 0.25); }
.big-btn:active { transform: scale(0.95); }
.big-btn .txt { font-size: 14.5px; font-weight: 600; color: #4F46E5; }

/* 录音时的呼吸波纹动画 */
.big-btn.rec { background: linear-gradient(145deg, #FFF1F2, #FFE4E6); border-color: #FECDD3; animation: none; }
.big-btn.rec .txt { color: #E11D48; }
.big-btn.rec .icon-wrap svg { stroke: #E11D48; }

.big-btn.rec .mic-ripple {
  position: absolute; width: 100%; height: 100%; border-radius: 50%;
  border: 2px solid #E11D48; opacity: 0; animation: ripple 1.6s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
}
.big-btn.rec .mic-ripple.delay { animation-delay: 0.8s; }

@keyframes ripple {
  0% { transform: scale(1); opacity: 0.8; }
  100% { transform: scale(1.45); opacity: 0; }
}

.home-bottom { display: none; }

/* ---------- 语音转文字后的输入态：干净的一块 ---------- */
#home-input { padding-top: 8px; }
textarea.said {
  width: 100%; border: 1px solid var(--border); background: #FFFFFF; border-radius: var(--r-md);
  padding: 16px 18px; font-size: 15.5px; line-height: 1.8; color: var(--text-main);
  font-family: inherit; resize: none; min-height: 132px; transition: border-color 0.2s, box-shadow 0.2s;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}
textarea.said::placeholder { color: #A8B3C4; }
textarea.said:focus { outline: none; border-color: #A5B4FC; box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.08); }
.btn-row { display: flex; gap: 10px; margin-top: 14px; }
.btn { border: none; border-radius: 999px; padding: 13px 26px; font-size: 14.5px; font-weight: 600; cursor: pointer; font-family: inherit; transition: all 0.2s; }
.btn:active { transform: scale(0.97); }
.btn.primary { flex: 1; background: #4F46E5; color: #fff; }
.btn.primary:hover { background: #4338CA; }
.btn.primary:disabled { opacity: 0.5; cursor: default; }
.btn.ghost { background: transparent; color: var(--text-muted); border: 1px solid var(--border); flex: 0 0 auto; }
.btn.ghost:hover { background: #F1F5F9; color: var(--text-sub); }

/* AI 思考加载中卡片 */
.loading { display: flex; justify-content: center; padding: 32px 0; }
.ai-thinking-card { background: #F8FAFC; border: 1px solid var(--border); border-radius: var(--r-lg); padding: 28px 24px; display: flex; flex-direction: column; align-items: center; gap: 16px; width: 100%; }
.wave-loader { display: flex; gap: 6px; align-items: center; height: 28px; }
.wave-loader span { width: 4px; height: 100%; background: #4F46E5; border-radius: 4px; animation: wave 1.2s ease-in-out infinite; }
.wave-loader span:nth-child(2) { animation-delay: 0.15s; background: #E11D48; }
.wave-loader span:nth-child(3) { animation-delay: 0.3s; background: #0D9488; }
.wave-loader span:nth-child(4) { animation-delay: 0.45s; background: #D97706; }
.wave-loader span:nth-child(5) { animation-delay: 0.6s; background: #059669; }
@keyframes wave { 0%, 40%, 100% { transform: scaleY(0.3); opacity: 0.5; } 20% { transform: scaleY(1); opacity: 1; } }

/* ---------- 今日页：连贯内容流（不用卡片框） ---------- */

/* 区块：极淡分隔线 + 小标题 */
.sec { margin-top: 30px; padding-top: 24px; border-top: 1px solid #EDF1F6; }
.sec.first { margin-top: 20px; padding-top: 0; border-top: none; }
.sec-h {
  display: flex; align-items: center; gap: 8px;
  font-size: 13.5px; font-weight: 700; color: #334155; margin-bottom: 14px;
}
.sec-h::before {
  content: ''; width: 3px; height: 14px; border-radius: 2px; background: #4F46E5; flex: 0 0 auto;
}

/* 你说的中文原话：带浅底的块 */
.said-box {
  display: flex; align-items: flex-start; gap: 12px;
  background: #F4F6FB; border-radius: 14px; padding: 15px 16px;
}
.said-cn { flex: 1; font-size: 16px; font-weight: 500; line-height: 1.8; color: #1E293B; }

/* 地道整句 */
.hero { margin-top: 0; }
.sent { font-size: 22px; line-height: 2; font-weight: 600; color: #0F172A; letter-spacing: 0.2px; }
.sent .p1 { background: #EEF2FF; color: #4F46E5; border-radius: 6px; padding: 2px 7px; }
.sent .p2 { background: #FFF1F2; color: #E11D48; border-radius: 6px; padding: 2px 7px; }
.sent .p3 { background: #F0FDFA; color: #0D9488; border-radius: 6px; padding: 2px 7px; }

/* 句尾的喇叭图标（点一下听整句） */
.sent .spk {
  display: inline-flex; align-items: center; justify-content: center;
  width: 27px; height: 27px; margin-left: 9px; vertical-align: middle;
  border-radius: 50%; background: #EEF2FF; color: #4F46E5;
  transition: background .15s, color .15s, transform .15s;
}
.sent .spk svg { width: 16px; height: 16px; }
.sent[data-say]:hover .spk { background: #E0E7FF; }
.sent.speaking .spk { background: #4F46E5; color: #fff; }
.sent[data-say].speaking { outline: none; }
.sent .spk:active { transform: scale(.92); }

.rhythm { margin-top: 12px; font-size: 12px; color: #94A3B8; line-height: 1.7; }

/* 中英配对：紧凑块 */
.pairs { margin-top: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.pair { display: flex; flex-direction: column; gap: 2px; max-width: 100%; padding: 8px 13px 9px; border-radius: 11px; }
.pair .cn { font-size: 11.5px; line-height: 1.4; color: #8B93A5; }
.pair .en { font-size: 14px; font-weight: 600; line-height: 1.4; }
.pair.c1 { background: #EEF2FF; } .pair.c1 .en { color: #4F46E5; }
.pair.c2 { background: #FFF1F2; } .pair.c2 .en { color: #E11D48; }
.pair.c3 { background: #F0FDFA; } .pair.c3 .en { color: #0D9488; }

/* 引申句：左侧一条细彩线代替卡片 */
.exts { margin-top: 0; display: flex; flex-direction: column; gap: 18px; }
.ext { padding-left: 15px; border-left: 2px solid #E2E8F0; }
.ext .en { font-size: 15px; font-weight: 600; line-height: 1.55; color: #0F172A; }
.ext .cn { font-size: 12.5px; color: #A8B3C4; margin-top: 5px; line-height: 1.65; }
.ext.c1 { border-left-color: #C7D2FE; } .ext.c1 .en { color: #4F46E5; }
.ext.c2 { border-left-color: #FECDD3; } .ext.c2 .en { color: #E11D48; }
.ext.c3 { border-left-color: #99F6E4; } .ext.c3 .en { color: #0D9488; }

/* 词：轻 chip，无边框 */
.chips { margin-top: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  border: none; border-radius: 9px; padding: 7px 12px; line-height: 1.35; font-size: 13px; font-weight: 600;
  cursor: pointer; font-family: inherit; text-align: left; background: #EEF2FF; color: #4F46E5;
  transition: transform .15s;
}
.chip:active { transform: scale(.96); }
.chip small { display: block; font-size: 10.5px; font-weight: 400; margin-top: 2px; opacity: .7; }
.chip.w2 { background: #FFF1F2; color: #E11D48; }
.chip.w3 { background: #ECFDF5; color: #059669; }
.chip.w0 { background: #F1F5F9; color: #9AA7B8; }

/* 语法：左侧细线，无底色 */
.grammar { margin-top: 0; padding-left: 15px; border-left: 2px solid #FCD34D; }
.grammar .g-title { font-size: 14px; font-weight: 700; color: #B45309; margin-bottom: 9px; line-height: 1.6; }
.grammar .g-body { font-size: 13.5px; color: #78716C; line-height: 1.9; }
.grammar code { font-size: 13px; font-weight: 600; background: #FEF3C7; padding: 1px 7px; border-radius: 6px; color: #B45309; }
.grammar .g-ex { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }

.footer { margin-top: 28px; }

/* ---------- 记录档案页样式 ---------- */
.search { display: flex; align-items: center; gap: 10px; background: #F8FAFC; border: 1px solid var(--border); border-radius: 999px; padding: 12px 18px; margin-top: 14px; transition: all 0.2s; }
.search:focus-within { border-color: #4F46E5; background: #FFFFFF; box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1); }
.search input { flex: 1; border: none; background: none; font-size: 14px; font-family: inherit; color: var(--text-main); outline: none; }
.search input::placeholder { color: var(--text-muted); }

.day-head { font-size: 12px; color: var(--text-muted); margin: 24px 2px 10px; }
.day-head b { color: var(--text-main); font-weight: 600; font-size: 13.5px; }

/* 记录条目：只有时间 + 中文 */
.rec-item {
  display: flex; align-items: baseline; gap: 14px;
  padding: 14px 2px; border-bottom: 1px solid #F1F5F9;
  cursor: pointer; transition: background .15s;
}
.rec-item:last-child { border-bottom: none; }
.rec-item:hover { background: #FAFBFD; }
.rec-time { flex: 0 0 auto; font-size: 12px; color: #A8B3C4; font-variant-numeric: tabular-nums; }
.rec-text {
  flex: 1; min-width: 0; font-size: 15px; line-height: 1.7; color: #1E293B; font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.empty { text-align: center; color: var(--text-muted); font-size: 13.5px; padding: 48px 0; line-height: 1.9; }

/* ---------- 可点击发音交互 ---------- */
[data-say] { cursor: pointer; transition: filter 0.15s; }
[data-say]:hover { filter: brightness(0.94); }
.sent[data-say]:hover { filter: brightness(0.97); }
.grammar .g-title [data-say], .grammar .g-body [data-say] { border-radius: 4px; padding: 0 3px; margin: 0 -2px; }
.grammar .g-title [data-say]:hover, .grammar .g-body [data-say]:hover { background: #FEF3C7; }

[data-say].speaking { outline: 2px solid #4F46E5; outline-offset: 2px; }

/* ---------- 点击英文后弹出的小菜单 ---------- */
.say-menu {
  position: fixed; z-index: 60; display: flex; flex-direction: column; padding: 5px;
  background: #FFFFFF; border: 1px solid var(--border); border-radius: var(--r-sm);
  box-shadow: 0 10px 28px -10px rgba(15,23,42,.22), 0 2px 6px -2px rgba(15,23,42,.08);
  min-width: 132px; animation: sayMenuIn .12s ease-out;
}
.say-menu.hidden { display: none; }
@keyframes sayMenuIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* 触控安全区：手指点得中，别做成 36px 的小条 */
.say-item {
  display: flex; align-items: center; gap: 9px; width: 100%;
  min-height: 46px; box-sizing: border-box;
  border: none; background: transparent; font-family: inherit; text-align: left;
  font-size: 14.5px; font-weight: 600; color: var(--text-sub);
  padding: 10px 14px; border-radius: 8px; cursor: pointer;
  transition: background .15s, color .15s;
  -webkit-tap-highlight-color: transparent;
}
.say-item svg { flex: 0 0 auto; opacity: .7; }
.say-item:hover { background: var(--indigo-soft); color: var(--indigo-glow); }
.say-item:hover svg { opacity: 1; }
.say-item:active { background: #E0E7FF; }

/* 选中态和发音态用同一套描边，位置一目了然 */
[data-say].picked { outline: 2px solid #4F46E5; outline-offset: 2px; }
/* ============ 跟读打分：半透明黑蒙层 ============ */
.shadow {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(10, 14, 24, .74);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 32px 24px; gap: 0; text-align: center;
  animation: shadowIn .16s ease-out;
}
.shadow.hidden { display: none; }
@keyframes shadowIn { from { opacity: 0; } to { opacity: 1; } }

.shadow-x {
  position: absolute; top: 18px; right: 18px;
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(255,255,255,.1); border: none; color: rgba(255,255,255,.72);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.shadow-x:hover { background: rgba(255,255,255,.18); color: #fff; }

.shadow-stage { display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 420px; }
.shadow-stage.hidden { display: none; }

.shadow-hint { font-size: 13px; color: rgba(255,255,255,.5); letter-spacing: .5px; margin-bottom: 18px; }

/* 要读的那句英文 */
.shadow-say {
  font-size: 25px; font-weight: 700; color: #fff; line-height: 1.5;
  margin-bottom: 26px; letter-spacing: .2px;
}

/* 录音指示 */
.shadow-rec {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; color: rgba(255,255,255,.62);
  font-variant-numeric: tabular-nums; margin-bottom: 30px;
  opacity: 0; transition: opacity .2s;
}
.shadow-rec.on { opacity: 1; }
.shadow-rec .dot {
  width: 8px; height: 8px; border-radius: 50%; background: #F87171;
  animation: recPulse 1.3s ease-in-out infinite;
}
@keyframes recPulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.8); } }

/* 主按钮「我已读完」 */
.shadow-go {
  border: none; cursor: pointer; font-family: inherit;
  width: 132px; height: 132px; border-radius: 50%;
  background: #4F46E5; color: #fff;
  font-size: 17px; font-weight: 700; letter-spacing: .5px;
  box-shadow: 0 12px 32px -8px rgba(79,70,229,.7);
  transition: transform .14s, box-shadow .14s;
  animation: goBreath 2.6s ease-in-out infinite;
}
.shadow-go:hover { transform: scale(1.04); }
.shadow-go:active { transform: scale(.96); animation: none; }
.shadow-go:disabled { opacity: .55; cursor: default; animation: none; }
@keyframes goBreath {
  0%,100% { box-shadow: 0 12px 32px -8px rgba(79,70,229,.7), 0 0 0 0 rgba(79,70,229,.45); }
  50%     { box-shadow: 0 12px 32px -8px rgba(79,70,229,.7), 0 0 0 12px rgba(79,70,229,0); }
}

.shadow-tip { font-size: 12.5px; color: rgba(255,255,255,.38); margin-top: 20px; }

/* 评测中的波形 */
.shadow-wave { display: flex; align-items: flex-end; gap: 5px; height: 42px; margin-bottom: 22px; }
.shadow-wave span {
  width: 5px; border-radius: 3px; background: rgba(255,255,255,.75);
  animation: waveUp 1s ease-in-out infinite;
}
.shadow-wave span:nth-child(1) { height: 14px; animation-delay: 0s; }
.shadow-wave span:nth-child(2) { height: 26px; animation-delay: .12s; }
.shadow-wave span:nth-child(3) { height: 38px; animation-delay: .24s; }
.shadow-wave span:nth-child(4) { height: 26px; animation-delay: .36s; }
.shadow-wave span:nth-child(5) { height: 14px; animation-delay: .48s; }
@keyframes waveUp { 0%,100% { transform: scaleY(.4); } 50% { transform: scaleY(1); } }

/* 结果 */
.shadow-score {
  font-size: 76px; font-weight: 800; line-height: 1; letter-spacing: -2px;
  font-variant-numeric: tabular-nums; margin-bottom: 10px;
}
.shadow-score.good { color: #4ADE80; }
.shadow-score.ok   { color: #A3E635; }
.shadow-score.warn { color: #FBBF24; }
.shadow-score.bad  { color: #FB7185; }

.shadow-band { font-size: 13.5px; color: rgba(255,255,255,.6); margin-bottom: 26px; }

.shadow-bars { width: 100%; margin-bottom: 18px; }
.shadow-bars .row { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; }
.shadow-bars .nm { flex: 0 0 46px; text-align: left; font-size: 12.5px; color: rgba(255,255,255,.55); }
.shadow-bars .bar { flex: 1; height: 5px; border-radius: 3px; background: rgba(255,255,255,.14); overflow: hidden; }
.shadow-bars .bar i { display: block; height: 100%; border-radius: 3px; transition: width .5s ease-out; }
.shadow-bars .bar i.good { background: #4ADE80; }
.shadow-bars .bar i.ok   { background: #A3E635; }
.shadow-bars .bar i.warn { background: #FBBF24; }
.shadow-bars .bar i.bad  { background: #FB7185; }
.shadow-bars .vl { flex: 0 0 30px; text-align: right; font-size: 12.5px; color: rgba(255,255,255,.72); font-variant-numeric: tabular-nums; }
.shadow-extra { font-size: 12px; color: rgba(255,255,255,.4); text-align: center; margin-top: 6px; }

/* 逐词 */
.shadow-words { width: 100%; margin-bottom: 24px; }
.shadow-wt { font-size: 11.5px; color: rgba(255,255,255,.38); text-align: left; margin-bottom: 8px; }
.shadow-wl { display: flex; flex-wrap: wrap; gap: 5px 7px; line-height: 1.7; }
.shadow-wl span { font-size: 14.5px; font-weight: 600; }
.shadow-wl span.good { color: #4ADE80; }
.shadow-wl span.ok   { color: #A3E635; }
.shadow-wl span.warn { color: #FBBF24; }
.shadow-wl span.bad  { color: #FB7185; text-decoration: underline dotted; text-underline-offset: 3px; }

.shadow-err { font-size: 14.5px; color: #FCA5A5; line-height: 1.8; margin-bottom: 26px; }

.shadow-foot { display: flex; gap: 12px; }
.shadow-again, .shadow-close2 {
  font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  padding: 11px 26px; border-radius: 999px; transition: background .15s, color .15s;
}
.shadow-again { background: rgba(255,255,255,.12); color: rgba(255,255,255,.85); border: none; }
.shadow-again:hover { background: rgba(255,255,255,.2); color: #fff; }
.shadow-close2 { background: #fff; color: #0F172A; border: none; }
.shadow-close2:hover { background: #E2E8F0; }

/* 读得不好的字母组合 + 提示 */
.shadow-sounds { width: 100%; margin-bottom: 24px; }
.shadow-sl { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.shadow-sl span {
  display: inline-flex; align-items: baseline; gap: 5px;
  padding: 5px 11px; border-radius: 8px; background: rgba(255,255,255,.07);
}
.shadow-sl span b { font-size: 15px; font-weight: 800; letter-spacing: .3px; }
.shadow-sl span i { font-size: 11px; font-style: normal; color: rgba(255,255,255,.42); }
.shadow-sl span.good b { color: #4ADE80; }
.shadow-sl span.ok   b { color: #A3E635; }
.shadow-sl span.warn b { color: #FBBF24; }
.shadow-sl span.bad  b { color: #FB7185; }
.shadow-warn { font-size: 11.5px; color: rgba(255,195,120,.75); text-align: center; margin-top: 10px; }

/* ---------- 今日页面顶部的返回键 ---------- */
.back-btn {
  width: 38px; height: 38px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: #F1F5F9; color: var(--text-sub);
  border: 1px solid var(--border); cursor: pointer; font-family: inherit;
  padding: 0; transition: background .18s, color .18s, transform .18s;
  -webkit-tap-highlight-color: transparent;
}
.back-btn:hover { background: #E2E8F0; color: #0F172A; }
.back-btn:active { transform: scale(.9); }

/* ---------- 打分页的入场动画 ---------- */
/* 分数：先弹一下 */
.shadow-score.pop { animation: scorePop .62s cubic-bezier(.2, 1.5, .35, 1) both; }
@keyframes scorePop {
  0%   { opacity: 0; transform: scale(.55); filter: blur(5px); }
  55%  { opacity: 1; transform: scale(1.09); filter: blur(0); }
  100% { opacity: 1; transform: scale(1); }
}

/* 评级文字：稍晚一点淡入 */
.shadow-band { animation: fadeUp .42s ease-out .28s both; }
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(7px); }
  to   { opacity: 1; transform: none; }
}

/* 维度条：整行淡入 + 条子从 0 长出来 */
.shadow-bars .bar i { width: 0; }
.shadow-bars .row { animation: fadeUp .44s ease-out both; }
.shadow-bars .bar i { transition: width .78s cubic-bezier(.22, .9, .25, 1); }
.shadow-extra { animation: fadeUp .42s ease-out both; }

/* 逐词：一个一个冒出来 */
.shadow-wl span { animation: wordIn .38s cubic-bezier(.2, 1.35, .4, 1) both; }
@keyframes wordIn {
  0%   { opacity: 0; transform: translateY(8px) scale(.86); }
  100% { opacity: 1; transform: none; }
}

/* 待练音素：同样错开出现 */
.shadow-sl span { animation: wordIn .4s cubic-bezier(.2, 1.35, .4, 1) both; }
.shadow-warn { animation: fadeUp .42s ease-out .5s both; }

/* 底部按钮：最后浮现 */
.shadow-stage[data-stage="result"] .shadow-foot { animation: fadeUp .46s ease-out .5s both; }
.shadow-stage[data-stage="error"] .shadow-err { animation: fadeUp .4s ease-out both; }

/* 评测中的波形再柔一点 */
.shadow-wave span { animation-duration: 1.15s; }

/* 用户如果在系统里关了动画，就别动 */
@media (prefers-reduced-motion: reduce) {
  .shadow-score.pop, .shadow-band, .shadow-bars .row, .shadow-extra,
  .shadow-wl span, .shadow-sl span, .shadow-warn,
  .shadow-stage .shadow-foot, .shadow-stage .shadow-err {
    animation: none !important;
  }
  .shadow-bars .bar i { transition: none; }
}

/* ---------- 记录页顶栏右侧（条数 + 标识入口）---------- */
.topbar-right { display: inline-flex; align-items: center; gap: 9px; }

/* ---------- 我的标识面板 ---------- */
.sync {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(10, 14, 24, .55);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center; padding: 24px;
  animation: shadowIn .15s ease-out;
}
.sync.hidden { display: none; }

.sync-card {
  position: relative; width: 100%; max-width: 340px;
  background: #fff; border-radius: var(--r-lg); padding: 26px 22px 22px;
  box-shadow: 0 24px 60px -18px rgba(15,23,42,.4);
  animation: syncIn .22s cubic-bezier(.2, 1.2, .4, 1) both;
}
@keyframes syncIn { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }

.sync-x {
  position: absolute; top: 14px; right: 14px;
  width: 32px; height: 32px; border-radius: 50%; padding: 0;
  background: #F1F5F9; border: none; color: var(--text-muted);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.sync-x:hover { background: #E2E8F0; color: var(--text-main); }

.sync-h { font-size: 12.5px; font-weight: 600; color: var(--text-muted); letter-spacing: .3px; }
.sync-h2 { font-size: 13px; font-weight: 600; color: var(--text-sub); margin-bottom: 10px; }

.sync-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 26px; font-weight: 700; letter-spacing: 2px; color: var(--indigo-glow);
  background: var(--indigo-soft); border: 1px solid rgba(79,70,229,.14);
  border-radius: var(--r-md); padding: 14px 10px; text-align: center;
  margin: 12px 0 12px; user-select: all;
}

.sync-btn {
  width: 100%; border: none; cursor: pointer; font-family: inherit;
  font-size: 14px; font-weight: 600; padding: 11px 16px; border-radius: 999px;
  background: var(--indigo-glow); color: #fff; transition: opacity .15s, background .15s;
}
.sync-btn:hover { opacity: .88; }
.sync-btn:active { transform: scale(.98); }
.sync-btn.ghost { background: #F1F5F9; color: var(--text-sub); }
.sync-btn.ghost:hover { background: #E2E8F0; }

.sync-tip { font-size: 12px; color: var(--text-muted); line-height: 1.75; margin-top: 12px; }

.sync-sep { height: 1px; background: var(--border); margin: 18px 0 16px; }

.sync-in {
  width: 100%; box-sizing: border-box;
  border: 1px solid var(--border); border-radius: var(--r-sm);
  padding: 11px 13px; font-size: 15px; font-family: ui-monospace, Menlo, monospace;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--text-main); background: #fff; margin-bottom: 10px;
}
.sync-in:focus { outline: none; border-color: var(--indigo-glow); box-shadow: 0 0 0 3px rgba(79,70,229,.1); }

.sync-msg { font-size: 12.5px; margin-top: 10px; min-height: 16px; line-height: 1.6; }
.sync-msg.ok { color: var(--emerald-glow); }
.sync-msg.bad { color: var(--coral-glow); }

/* ---------- 今日页顶栏：返回键 + 中文原话同一行 ---------- */
.topbar.said-topbar {
  justify-content: flex-start; align-items: flex-start; gap: 12px;
  padding-bottom: 4px;
}
.said-topbar .back-btn { margin-top: 1px; }
.said-cn {
  flex: 1; min-width: 0;
  font-size: 16px; font-weight: 500; line-height: 1.75; color: #1E293B;
  word-break: break-word;
}

/* ---------- 评测过的分数角标 ---------- */
[data-say].scored { position: relative; }
[data-say].scored::after {
  content: attr(data-score) " 分";
  position: absolute; top: -7px; right: -7px;
  min-width: 20px; height: 18px; padding: 0 7px; box-sizing: border-box;
  border-radius: 9px; background: #64748B; color: #fff;
  font-size: 11px; font-weight: 700; line-height: 18px; text-align: center;
  letter-spacing: 0; font-variant-numeric: tabular-nums;
  white-space: nowrap;
  box-shadow: 0 1px 4px rgba(15,23,42,.2);
  pointer-events: none; z-index: 2;
  animation: badgeIn .32s cubic-bezier(.2, 1.5, .4, 1) both;
}
@keyframes badgeIn {
  0%   { opacity: 0; transform: scale(.4); }
  100% { opacity: 1; transform: scale(1); }
}
[data-say].sc-good::after { background: #059669; }
[data-say].sc-ok::after   { background: #65A30D; }
[data-say].sc-warn::after { background: #D97706; }
[data-say].sc-bad::after  { background: #E11D48; }

/* 句子/整块上的角标稍微外挪一点，别压到字 */
.sent.scored::after { top: -10px; right: -4px; }
.pair.scored::after { top: -8px; right: -8px; }
.chip.scored::after { top: -6px; right: -6px; }

@media (prefers-reduced-motion: reduce) {
  [data-say].scored::after { animation: none; }
}

/* ---------- 试听：听我的 / 听原音 ---------- */
.shadow-listen-row {
  display: flex; gap: 10px; margin-bottom: 22px;
  animation: fadeUp .44s ease-out .1s both;
}
.shadow-listen {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 40px; padding: 9px 18px; box-sizing: border-box;
  border: 1px solid rgba(255,255,255,.22); border-radius: 999px;
  background: rgba(255,255,255,.1); color: rgba(255,255,255,.9);
  font-family: inherit; font-size: 13.5px; font-weight: 600;
  cursor: pointer; white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  transition: background .15s, color .15s, border-color .15s, transform .12s;
}
.shadow-listen svg { flex: 0 0 auto; }
.shadow-listen:hover { background: rgba(255,255,255,.2); color: #fff; }
.shadow-listen:active { transform: scale(.96); }
.shadow-listen.playing {
  background: rgba(255,255,255,.94); color: #0F172A; border-color: transparent;
}
.shadow-listen:disabled { opacity: .38; cursor: default; }
.shadow-listen:disabled:hover { background: rgba(255,255,255,.1); color: rgba(255,255,255,.9); transform: none; }

/* 出错阶段：红色提示下面接试听 */
.shadow-stage[data-stage="error"] .shadow-listen-row { margin-top: -8px; }