/* css/app.css — CET-6 词汇刷题系统，统一样式表 (cascade merged 2026-10) */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:rgba(0,0,0,0)}

/* ---------- 1. 设计令牌（浅色 / 默认） ---------- */
:root,
:root[data-theme="light"] {
  --bg:       #f2f2f7;
  --surface:  #ffffff;
  --surface2: #f4f4f7;
  --text:     #1c1c1e;
  --text2:    #64646a;
  --accent:   #5b5bd6;
  --accent2:  #8b8bf0;
  --green:    #1d7f38;
  --red:      #d70015;
  --orange:   #b45309;
  --blue:     #0062c4;
  --pink:     #c62a92;
  --border:   rgba(60, 60, 67, 0.14);

  --radius: 16px;
  --radius-sm: 10px;
  --shadow: 0 1px 2px rgba(0,0,0,.05), 0 6px 18px rgba(0,0,0,.06);

  --material-chrome: rgba(255,255,255,.72);
  --material-card:    rgba(255,255,255,.90);
  --edge-light: inset 0 1px 0 rgba(255,255,255,.85);
  --tap: 44px;
}

/* ---------- 2. 设计令牌（深色） ---------- */
:root[data-theme="dark"] {
  --bg:       #000000;
  --surface:  #1c1c1e;
  --surface2: #2c2c2e;
  --text:     #f5f5f7;
  --text2:    #a8a8ad;
  --accent:   #7d7aff;
  --accent2:  #a5a5ff;
  --green:    #30d158;
  --red:      #ff453a;
  --orange:   #ff9f0a;
  --blue:     #0a84ff;
  --pink:     #ff6482;
  --border:   rgba(84, 84, 88, 0.58);
  --shadow:   0 1px 2px rgba(0,0,0,.5), 0 6px 20px rgba(0,0,0,.5);
  --material-chrome: rgba(28,28,30,.76);
  --material-card:    rgba(28,28,30,.90);
  --edge-light: inset 0 1px 0 rgba(255,255,255,.09);
}
@media(prefers-color-scheme:dark){
  :root:not([data-theme]) {
    --bg:#000000; --surface:#1c1c1e; --surface2:#2c2c2e;
    --text:#f5f5f7; --text2:#a8a8ad;
    --accent:#7d7aff; --accent2:#a5a5ff;
    --green:#30d158; --red:#ff453a; --orange:#ff9f0a;
    --blue:#0a84ff; --pink:#ff6482;
    --border:rgba(84,84,88,.58);
    --shadow:0 1px 2px rgba(0,0,0,.5), 0 6px 20px rgba(0,0,0,.5);
    --material-chrome: rgba(28,28,30,.76);
    --material-card: rgba(28,28,30,.90);
    --edge-light: inset 0 1px 0 rgba(255,255,255,.09);
  }
}


/* 主题切换：圆形扩散过渡（View Transitions API，从主题按钮圆心扩散到全屏）
   注意1：::view-transition-new(root) 的基础 clip-path 必须保持“全圆”，
   动画用 both 填充且显式 from/to，否则动画结束后会弹回 circle(0)，
   露出底层旧主题快照，造成“切换完成前闪一下旧页面”的 bug。
   注意2：--vt-r 必须比“到最远视口角的距离”再大一圈（见 switchTheme 里的
   *1.15+30 余量），否则圆边只在动画最后一帧才扫过左右下角；而旧缓动
   cubic-bezier(0.23,1,0.32,1) 收尾近乎停滞，会让左右下角长时间残留旧主题，
   看起来像“卡顿一下才切换”。余量 + 较平缓的缓动保证整屏在动画中段就已
   被新主题覆盖，圆边在视口外收尾，不再有角落残留。 */
::view-transition-old(root){animation:none;mix-blend-mode:normal}
::view-transition-new(root){mix-blend-mode:normal;clip-path:circle(var(--vt-r,200vmax) at var(--vt-x,50%) var(--vt-y,50%));animation:themeReveal 450ms cubic-bezier(0.33,1,0.68,1) both}
@keyframes themeReveal{from{clip-path:circle(0 at var(--vt-x,50%) var(--vt-y,50%))}to{clip-path:circle(var(--vt-r,200vmax) at var(--vt-x,50%) var(--vt-y,50%))}}
@media (prefers-reduced-motion: reduce){
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}
/* 不支持 View Transitions 的浏览器回退：切换期间给颜色类属性一段短暂过渡，
   避免无动画的生硬瞬切。仅在切换的 ~320ms 内挂到 <html> 上，平时不生效，
   不给滚动等常规操作增加过渡开销。 */
html.theme-fade, html.theme-fade *, html.theme-fade *::before, html.theme-fade *::after{
  transition: background-color .28s ease, color .28s ease, border-color .28s ease, fill .28s ease, stroke .28s ease !important;
}
body{
  /* 音标字形兜底：部分 Android 机型/精简 ROM 缺少 IPA Extensions 字形
     （ə ɪ ʊ ɜ ɒ ʌ θ ð ʃ ʒ ŋ ɡ 等），会渲染成空白或方框，看起来就像"音标写错了
     /音标不见了"。这里把带 IPA 覆盖的字体排在中文兜底之前，中文字符仍由
     Noto Sans SC 接管。 */
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Droid Sans','Noto Sans SC',sans-serif;
  background:var(--bg);color:var(--text);min-height:100vh;
}
.container{max-width:720px;margin:0 auto;padding:16px}

.header{position:relative;text-align:center;padding:24px 16px;background:var(--surface);border-radius:var(--radius);margin-bottom:20px;border:1px solid var(--border);box-shadow:var(--shadow)}
.header-row{position:relative;display:grid;grid-template-columns:1fr minmax(0,auto) 1fr;align-items:center;min-height:46px}
.header-row h1{grid-column:2;font-size:1.6em;color:var(--accent);margin:0;line-height:1.3;text-align:center}
/* 白天黑夜切换按钮（仓库 4.0 <theme-button> 组件）：位于页头原深浅切换按钮位置 */
.theme-slot{grid-column:3;justify-self:end;align-self:center;display:flex;align-items:center;min-height:46px}
theme-button{position:relative;display:inline-block;outline:none}
.header h1{font-size:1.6em;color:var(--accent);margin-bottom:8px}
.header .subtitle{color:var(--text2);font-size:0.88em;line-height:1.7;max-width:520px;margin:0 auto}
/* 注意：媒体查询必须放在上面两条基础规则之后（同优先级时后者生效），
   否则小屏 h1/subtitle 缩小不会生效（此前的规则被基础规则覆盖，h1 会在小屏换行） */
@media(max-width:480px){
  .header-row h1{font-size:1.15em}
  .header .subtitle{font-size:0.8em}
}

.tabs{display:flex;gap:4px;margin-bottom:20px;background:var(--surface);border-radius:var(--radius);padding:4px;box-shadow:var(--shadow);border:1px solid var(--border);position:sticky;top:0;z-index:100;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.tab-btn{flex:1;padding:11px 14px;border:none;background:transparent;color:var(--text2);border-radius:calc(var(--radius) - 4px);cursor:pointer;font-size:0.88em;font-weight:500;display:flex;align-items:center;justify-content:center;gap:5px;transition:background 200ms,color 200ms,box-shadow 200ms;white-space:nowrap}@media (hover: hover) and (pointer: fine){
.tab-btn:hover{color:var(--text)}}
.tab-btn.active{background:var(--accent);color:#fff;box-shadow:0 1px 3px rgba(0,0,0,0.1)}

.mode-row{display:flex;gap:10px;margin-bottom:18px;align-items:center;justify-content:center;flex-wrap:wrap}
.mode-row label{color:var(--text2);font-size:0.88em}
.mode-btn{padding:10px 20px;border:2px solid var(--border);background:var(--surface);color:var(--text);border-radius:20px;cursor:pointer;font-size:0.88em;font-weight:500;transition:border-color 200ms,background 200ms}@media (hover: hover) and (pointer: fine){
.mode-btn:hover{border-color:var(--accent)}}
.mode-btn.active{background:var(--accent);border-color:var(--accent);color:#fff}

.saved-bar{background:rgba(124,58,237,0.06);border:1px solid var(--accent);padding:10px 16px;border-radius:var(--radius-sm);margin-bottom:16px;font-size:0.88em;display:none;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px}
.saved-bar.show{display:flex}
.saved-bar strong{color:var(--accent)}

.quiz-card{background:var(--surface);border-radius:var(--radius);padding:32px;margin-bottom:20px;border:1px solid var(--border);box-shadow:var(--shadow);min-height:280px;animation:cardIn 240ms cubic-bezier(0.4,0,0.2,1) both}
@keyframes cardIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.q-label{color:var(--accent);font-size:0.82em;font-weight:600;letter-spacing:1px;margin-bottom:8px;display:inline-flex;align-items:center;gap:6px;background:rgba(124,58,237,0.08);padding:4px 10px;border-radius:14px}
.q-word{font-size:2em;font-weight:700;margin-bottom:6px;word-break:break-word}
.pos-badge{display:inline-block;font-size:0.44em;font-weight:500;color:var(--accent);background:rgba(124,58,237,0.08);padding:2px 8px;border-radius:4px;vertical-align:middle;margin-right:4px;letter-spacing:0.5px}
.q-pron{color:var(--text2);font-size:0.95em;margin-bottom:20px;font-style:italic}
.options{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.opt-btn{padding:14px 18px;background:var(--surface2);border:2px solid transparent;border-radius:var(--radius-sm);color:var(--text);cursor:pointer;font-size:0.95em;text-align:left;display:flex;align-items:center;gap:10px;word-break:break-word;transition:border-color 150ms,background 150ms}@media (hover: hover) and (pointer: fine){
.opt-btn:hover{border-color:var(--accent);background:rgba(124,58,237,0.06)}}
.opt-btn:active{transform:scale(0.96);transition:transform 80ms cubic-bezier(0.34,1.56,0.64,1)}@media (hover: hover) and (pointer: fine){
#browseList [onclick*="speakWord"]:hover{background:rgba(124,58,237,0.12)}}
#jumpInput:focus{outline:none;border-color:var(--accent)!important;box-shadow:0 0 0 3px rgba(124,58,237,0.12)}
.opt-btn .ol{font-weight:700;color:var(--accent2);min-width:24px;font-size:0.82em;flex-shrink:0}
.opt-btn.correct{border-color:var(--green)!important;background:rgba(5,150,105,0.1)!important}
.opt-btn.wrong{border-color:var(--red)!important;background:rgba(220,38,38,0.08)!important}
.opt-btn:disabled{pointer-events:none;opacity:0.7}
.opt-btn.correct:disabled,.opt-btn.wrong:disabled{opacity:1}
.opt-entering{animation:slideUp 250ms cubic-bezier(0.4,0,0.2,1) both}
.opt-flash-green{animation:flashGreen 300ms ease}
.opt-shake{animation:shake 400ms ease}

.feedback{margin-top:20px;padding:20px;border-radius:var(--radius-sm);display:none}
.feedback.show{display:block;animation:slideUp 200ms cubic-bezier(0.4,0,0.2,1)}
.feedback.ok{border:1px solid rgba(5,150,105,0.2);background:rgba(5,150,105,0.04)}
.feedback.fail{border:1px solid rgba(220,38,38,0.2);background:rgba(220,38,38,0.04)}
.feedback.close{border:1px solid rgba(217,119,6,0.2);background:rgba(217,119,6,0.04)}
.feedback h4{margin-bottom:8px;font-size:1.05em}
.feedback.ok h4{color:var(--green)}
.feedback.fail h4{color:var(--red)}
.feedback.close h4{color:var(--orange)}
.fb-mem{background:rgba(124,58,237,0.06);padding:12px 16px;border-radius:var(--radius-sm);margin:10px 0;border-left:3px solid var(--accent);line-height:1.6}
.fb-mem strong{color:var(--accent)}
.fb-conf{margin-top:12px;padding-top:10px;border-top:1px dashed var(--border)}
.fb-conf .ci{padding:5px 0;color:var(--text2);font-size:0.88em;border-bottom:1px solid var(--border)}
.fb-conf .ci strong{color:var(--orange)}
.fb-key{margin-top:10px;font-size:0.82em;color:var(--text2);line-height:1.8}
.gmap-wrap{margin:10px 0 2px;text-align:center}
.gmap-title{font-size:0.85em;color:var(--text2);margin-bottom:4px}
.gmap-back{margin:4px 0 8px;padding:5px 14px;background:var(--surface2);border:1px solid var(--border);color:var(--text);border-radius:16px;cursor:pointer;font-size:0.8em;transition:background 200ms}
.gmap-back:hover{background:rgba(124,58,237,0.08)}
.gmap-legend{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:4px 16px;font-size:0.75em;color:var(--text2);margin:2px 0 8px}
.gmap-legend .gl-badge, .gl-badge{display:inline-flex;align-items:center;justify-content:center;min-width:15px;height:15px;border-radius:8px;background:var(--green);color:#fff;font-size:10px;font-weight:700;line-height:1;padding:0 3px;border:1.5px solid var(--surface);box-sizing:border-box;vertical-align:-2px;margin-right:2px}
.gmap-legend .gl-leaf, .gl-leaf{display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;border-radius:50%;border:1.6px solid var(--accent);background:var(--surface2);vertical-align:-2px;margin-right:4px;box-sizing:border-box}
.gmap-legend .gl-leaf .gl-badge{min-width:0;height:auto;margin:0;padding:0;background:transparent;border:0;color:var(--green);font-size:10px}
/* 手机端词群导图：点击圆圈/单词弹出的中文释义气泡（替代悬停） */
#gmapTip{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:400;background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.25);padding:10px 14px;max-width:86vw;font-size:0.9em;display:none;text-align:left;cursor:pointer}
#gmapTip .gmt-ph{color:var(--text2);font-size:0.88em;margin-left:6px}
#gmapTip .gmt-m{color:var(--text);margin-top:3px;line-height:1.5}
.word-detail{margin-top:14px;border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden;background:var(--surface)}
.word-detail .wd-head{padding:10px 14px;cursor:pointer;display:flex;align-items:center;justify-content:space-between;font-size:0.9em;font-weight:600;background:var(--surface2);user-select:none;transition:background 200ms,color 200ms}@media (hover: hover) and (pointer: fine){
.word-detail .wd-head:hover{background:rgba(124,58,237,0.08);color:var(--accent)}}
.word-detail .wd-head:active{background:rgba(124,58,237,0.14)}
.word-detail .wd-arrow{transition:transform 200ms;font-size:0.8em;color:var(--text2)}
.word-detail.open .wd-arrow{transform:rotate(180deg)}
.word-detail .wd-body{display:none;padding:12px 14px}
.word-detail.open .wd-body{display:block}
.wd-row{padding:8px 0;border-bottom:1px dashed var(--border);line-height:1.7}
.wd-row:last-child{border-bottom:none}
.wd-tag{display:inline-block;min-width:56px;font-size:0.8em;color:var(--accent);font-weight:600;margin-right:6px}
.wd-txt{color:var(--text);font-size:0.9em;word-break:break-word}
.wd-txt.en{color:var(--accent);font-weight:500}

@keyframes slideUp{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
@keyframes flashGreen{0%,100%{transform:scale(1)}50%{transform:scale(1.02);box-shadow:0 0 12px rgba(5,150,105,0.3)}}
@keyframes slideDown{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}
@keyframes toastIn{from{transform:translate(-50%,-100%);opacity:0}to{transform:translate(-50%,0);opacity:1}}
@keyframes toastOut{from{transform:translate(-50%,0);opacity:1}to{transform:translate(-50%,-100%);opacity:0}}
@keyframes countdownBar{from{width:100%}to{width:0%}}

.next-btn{display:none;margin-top:16px;padding:12px 32px;background:var(--accent);color:#fff;border:none;border-radius:20px;cursor:pointer;font-size:1em;font-weight:600;transition:background 200ms,transform 180ms,box-shadow 200ms;box-shadow:0 2px 8px rgba(0,0,0,0.12)}
.skip-btn{transition:border-color 200ms,color 200ms,background 200ms}@media (hover: hover) and (pointer: fine){
.skip-btn:hover{border-color:var(--accent)!important;color:var(--accent)!important;background:rgba(124,58,237,0.06)!important}}@media (hover: hover) and (pointer: fine){
.next-btn:hover{background:var(--accent2)}}
.next-btn:active{transform:scale(0.96);transition:transform 80ms cubic-bezier(0.34,1.56,0.64,1)}
.next-btn.show{display:inline-block}

.mode-btn:active,.ctrl-btn:active,.tab-btn:active{transform:scale(0.96);transition:transform 80ms cubic-bezier(0.34,1.56,0.64,1)}

.ctrl-row{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap;justify-content:center}
.ctrl-btn{padding:9px 18px;border:2px solid var(--border);background:transparent;color:var(--text);border-radius:20px;cursor:pointer;font-size:0.88em;transition:border-color 200ms,background 200ms}
.hm-range{padding:5px 12px;font-size:0.8em}
.hm-range.active{border-color:var(--accent,#7c3aed);background:var(--accent,#7c3aed);color:#fff}@media (hover: hover) and (pointer: fine){
.ctrl-btn:hover{border-color:var(--accent);background:rgba(124,58,237,0.06)}}
.ctrl-btn.danger{border-color:var(--red);color:var(--red)}@media (hover: hover) and (pointer: fine){
.ctrl-btn.danger:hover{background:rgba(220,38,38,0.06)}}
.ctrl-btn.accent{background:var(--accent);border-color:var(--accent);color:#fff}@media (hover: hover) and (pointer: fine){
.ctrl-btn.accent:hover{background:var(--accent2)}}
.ctrl-btn:disabled{opacity:0.4;pointer-events:none}
.favorite-toggle{min-width:34px;padding:6px 10px;color:var(--orange);border-color:rgba(217,119,6,0.35)}
.favorite-toggle.active{background:rgba(217,119,6,0.12);border-color:var(--orange)}
.favorite-toggle[aria-pressed="true"]{font-weight:700}
.word-info-row{display:flex;align-items:flex-start;justify-content:flex-start;gap:18px;margin-top:18px;margin-bottom:16px}
.word-info-main{flex:0 1 auto;max-width:calc(100% - 130px);min-width:0}
.word-info-main .q-word{margin-bottom:6px}
.word-info-main .q-pron{margin-bottom:0}
.word-info-actions{display:flex;align-items:flex-start;flex:0 0 auto;padding-top:2px}
.word-info-actions .favorite-toggle{white-space:nowrap}

.stats-bar{display:grid;grid-template-columns:repeat(auto-fit,minmax(100px,1fr));gap:12px;margin-bottom:16px}
.sc{background:var(--surface);padding:14px 10px;border-radius:var(--radius-sm);text-align:center;border:1px solid var(--border);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px}
.sc .sv{font-size:1.45em;font-weight:700;line-height:1.1}
.sc .sl{font-size:0.75em;color:var(--text2);letter-spacing:0.2px}

.empty{text-align:center;padding:50px 20px;color:var(--text2)}
.empty .ei{font-size:2.5em;margin-bottom:10px}

.panels{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:20px}
.panel{background:var(--surface);border-radius:var(--radius);border:1px solid var(--border);overflow:hidden;box-shadow:var(--shadow)}
.panel-h{padding:14px 18px;background:var(--surface2);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px}
.panel-h h3{font-size:0.92em;display:flex;align-items:center;gap:8px}
.panel-b{max-height:420px;overflow-y:auto;padding:10px}
.panel-b::-webkit-scrollbar{width:5px}
.panel-b::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}

.search-box{background:var(--surface2);border:1px solid var(--border);color:var(--text);padding:8px 14px;border-radius:18px;font-size:0.85em;width:170px;outline:none;transition:border-color 200ms,box-shadow 200ms}
.search-box:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(124,58,237,0.12)}
#browseList > div{transition:background 200ms}@media (hover: hover) and (pointer: fine){
#browseList > div:hover{background:var(--surface2)}}
.search-box:focus{border-color:var(--accent)}
.search-box::placeholder{color:var(--text2)}

.hi{padding:10px 12px;border-radius:var(--radius-sm);margin-bottom:6px;background:var(--surface2);font-size:0.83em;border-left:3px solid var(--red);transition:box-shadow 200ms}@media (hover: hover) and (pointer: fine){
.hi:hover{box-shadow:var(--shadow)}}
.hi.retry{border-left-color:var(--orange)}
.hi.mastered{border-left-color:var(--green)}
.hi .hw{font-weight:600;color:var(--accent)}
.hi .ht{color:var(--text2);font-size:0.8em}
.hi .hd{margin-top:3px;color:var(--text2)}

.badge{display:inline-block;padding:2px 8px;border-radius:10px;font-size:0.72em;font-weight:600}
.badge.wb{background:rgba(220,38,38,0.12);color:var(--red)}
.badge.rb{background:rgba(217,119,6,0.12);color:var(--orange)}

.stats-sec{background:var(--surface);border-radius:var(--radius);padding:24px;margin-bottom:20px;border:1px solid var(--border);box-shadow:var(--shadow)}
.stats-sec h2{font-size:1.15em;margin-bottom:14px;display:flex;align-items:center;gap:8px}
.sg{display:grid;grid-template-columns:repeat(auto-fit,minmax(145px,1fr));gap:10px}
.sdc{background:var(--surface2);padding:14px;border-radius:var(--radius-sm);text-align:center}
.sdc .sdv{font-size:1.3em;font-weight:700}
.sdc .sdl{font-size:0.76em;color:var(--text2);margin-top:2px}
.pbar{height:7px;background:var(--border);border-radius:4px;margin-top:8px;overflow:hidden}
.pbar .fill{height:100%;border-radius:4px;transform-origin:left;transform:scaleX(0);transition:transform 300ms cubic-bezier(0.4,0,0.2,1)}
.fill.g{background:var(--green)}.fill.r{background:var(--red)}.fill.b{background:var(--blue)}

.retry-info{background:rgba(217,119,6,0.06);border:1px solid rgba(217,119,6,0.2);padding:12px 18px;border-radius:var(--radius-sm);margin-bottom:16px;font-size:0.9em;display:none}
.retry-info.show{display:block}
.retry-info strong{color:var(--orange)}

.export-btn{font-size:0.78em;padding:4px 12px}

.info-callout{background:rgba(37,99,235,0.06);border:1px solid rgba(37,99,235,0.15);padding:10px 16px;border-radius:var(--radius-sm);margin-bottom:16px;font-size:0.85em;display:none}
.info-callout.show{display:block}

/* === POOL SELECTOR & FREQUENCY FILTER === */
.pool-row{display:flex;gap:10px;margin-bottom:18px;align-items:center;justify-content:center;flex-wrap:wrap}
.freq-filter-row{display:flex;gap:10px;margin-bottom:18px;align-items:center;justify-content:center;flex-wrap:wrap}
.freq-filter-row{display:none}
.freq-filter-row.show{display:flex}
.freq-chip{padding:7px 16px;border:2px solid var(--border);background:var(--surface);color:var(--text);border-radius:20px;cursor:pointer;font-size:0.82em;font-weight:500;transition:border-color 200ms,background 200ms;white-space:nowrap}@media (hover: hover) and (pointer: fine){
.freq-chip:hover{border-color:var(--accent)}}
.freq-chip.active.f5{border-color:#dc2626;background:rgba(220,38,38,0.1);color:#dc2626}
.freq-chip.active.f4{border-color:#d97706;background:rgba(217,119,6,0.1);color:#d97706}
.freq-chip.active.f3{border-color:#059669;background:rgba(5,150,105,0.1);color:#059669}
.freq-chip.active.f2{border-color:#2563eb;background:rgba(37,99,235,0.1);color:#2563eb}
.freq-chip.active.f1{border-color:#7c3aed;background:rgba(124,58,237,0.1);color:#7c3aed}
.freq-chip .fc{color:var(--text2);font-size:0.78em}
.freq-chip.active{border-color:var(--accent);background:var(--accent);color:#fff}
.gate1-btn{padding:12px 30px;border:2px solid var(--border);background:var(--surface);color:var(--text);border-radius:24px;cursor:pointer;font-size:1em;font-weight:600;transition:transform 120ms cubic-bezier(0.34,1.56,0.64,1),border-color 200ms,background 200ms;min-width:120px}@media (hover: hover) and (pointer: fine){
.gate1-btn:hover{transform:scale(1.04)}}@media (hover: hover) and (pointer: fine){
.gate1-btn.ok:hover{border-color:#22c55e;background:rgba(34,197,94,0.12);color:#22c55e}}@media (hover: hover) and (pointer: fine){
.gate1-btn.no:hover{border-color:#ef4444;background:rgba(239,68,68,0.12);color:#ef4444}}
.freq-count{margin-left:8px;color:var(--text2);font-size:0.82em}

/* Rules card */
.rules-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:18px 22px;margin-bottom:16px;position:relative;box-shadow:var(--shadow)}
.rules-card h3{font-size:1em;color:var(--accent);margin-bottom:12px;cursor:pointer;display:flex;align-items:center;gap:8px;user-select:none}
.rules-card h3 .arrow{transition:transform 200ms;font-size:0.75em}
.rules-card.collapsed h3 .arrow{transform:rotate(-90deg)}
.rules-body{font-size:0.84em;line-height:1.7;color:var(--text2);transition:max-height 300ms,opacity 200ms;overflow:hidden}
.rules-card.collapsed .rules-body{max-height:0;opacity:0;margin-top:0}
.rules-body .rb{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin:6px 0}
.flevel-dot{display:inline-block;width:10px;height:10px;border-radius:50%;flex-shrink:0}
.flevel-dot.f5{background:#dc2626}
.flevel-dot.f4{background:#d97706}
.flevel-dot.f3{background:#059669}
.flevel-dot.f2{background:#2563eb}
.flevel-dot.f1{background:#7c3aed}

/* Freq stats in stats page */
.freq-stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;margin-top:10px}
.fdc{background:var(--surface2);padding:12px 14px;border-radius:var(--radius-sm);border-left:3px solid var(--accent)}
.fdc .fdv{font-size:1.1em;font-weight:700}
.fdc .fdl{font-size:0.75em;color:var(--text2);margin-top:2px}

/* === DICTATION MODE === */
.dict-input{width:100%;padding:14px 18px;font-size:1.15em;border:2px solid var(--border);border-radius:var(--radius);background:var(--surface);color:var(--text);transition:border-color 180ms,box-shadow 200ms,transform 180ms,background 300ms;outline:none;font-family:inherit}
.dict-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(124,58,237,0.2);transform:scale(1.01)}
.dict-input.result-green{border-color:var(--green)!important;box-shadow:0 0 0 3px rgba(5,150,105,0.2)!important;background:rgba(5,150,105,0.04)!important}
.dict-input.result-red{border-color:var(--red)!important;box-shadow:0 0 0 3px rgba(220,38,38,0.2)!important;background:rgba(220,38,38,0.04)!important}
.dict-input.result-orange{border-color:var(--orange)!important;box-shadow:0 0 0 3px rgba(217,119,6,0.2)!important;background:rgba(217,119,6,0.04)!important}
.dict-submit-btn{margin-top:12px;padding:12px 32px;background:var(--accent);color:#fff;border:none;border-radius:20px;cursor:pointer;font-size:1em;font-weight:600;transition:background 180ms,transform 80ms cubic-bezier(0.34,1.56,0.64,1)}@media (hover: hover) and (pointer: fine){
.dict-submit-btn:hover{background:var(--accent2)}}
.dict-submit-btn:active{transform:scale(0.96)}

@media(max-width:768px){
  .options{grid-template-columns:1fr}
  .panels{grid-template-columns:1fr}
  .q-word{font-size:1.5em}
  .quiz-card{padding:20px}
  .tabs{flex-wrap:wrap;justify-content:center;position:sticky;top:0;z-index:100;background:var(--surface);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
  .tab-btn{flex:unset;font-size:0.78em;padding:8px 10px}
  .search-box{width:120px}
  .chart-row{grid-template-columns:1fr!important}
}

/* === QUIZ FULLSCREEN MODE === */
.quiz-card{position:relative}
.toggle-fs-btn{position:absolute;top:10px;right:10px;padding:6px 12px;background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text2);cursor:pointer;font-size:0.78em;transition:transform 80ms cubic-bezier(0.34,1.56,0.64,1),border-color 150ms,background 150ms;z-index:10}
.quiz-card:not(.fullscreen) .toggle-fs-btn{position:static;margin:0;flex-shrink:0}@media (hover: hover) and (pointer: fine){
.toggle-fs-btn:hover{border-color:var(--accent);color:var(--accent)}}
.toggle-fs-btn:active{transform:scale(0.96)}
.quiz-top-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.quiz-top-row .q-label{margin-bottom:0;flex:1;min-width:0;word-break:break-word}
/* 全屏时隐藏重复标签，工具栏仅为右上角退出按钮预留稳定高度 */
.quiz-card.fullscreen .quiz-top-row{min-height:48px;margin-bottom:8px;padding-right:0}
.quiz-card.fullscreen .quiz-top-row .q-label{display:none}
.quiz-card.fullscreen{position:fixed;top:0;left:0;width:100vw;height:100vh;height:100dvh;z-index:200;display:flex;flex-direction:column;overflow:hidden;border-radius:0;margin:0;padding:0}
.quiz-card.fullscreen .quiz-scroll{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:32px;padding-bottom:16px}
.quiz-card.fullscreen .quiz-actions{flex-shrink:0;padding:12px 32px calc(env(safe-area-inset-bottom, 0px) + 12px);border-top:1px solid var(--border);background:var(--surface);display:flex;flex-direction:column;align-items:center;gap:10px}
.quiz-card.fullscreen .quiz-actions .next-btn{margin-top:0;width:100%;max-width:420px}
.quiz-card.fullscreen .quiz-actions .next-btn.show{display:block}
.quiz-card.fullscreen .toggle-fs-btn{position:fixed;top:12px;right:12px;z-index:201}

/* === TOAST === */
.toast{position:fixed;top:0;left:50%;transform:translateX(-50%);padding:14px 24px;border-radius:0 0 var(--radius) var(--radius);color:#fff;font-size:0.92em;z-index:300;animation:toastIn 300ms cubic-bezier(0.22,0.61,0.36,1) forwards;box-shadow:0 4px 20px rgba(0,0,0,0.15);min-width:260px;max-width:calc(100vw - 24px);box-sizing:border-box;text-align:center;line-height:1.5;word-break:break-word;overflow:hidden}
.toast.ok{background:var(--green)}
.toast.error{background:var(--red)}
.toast.out{animation:toastOut 300ms ease forwards}
.toast .toast-bar{position:absolute;bottom:0;left:0;height:3px;background:rgba(255,255,255,0.5);animation:countdownBar 3s linear forwards}
.opt-btn:focus-visible,.ctrl-btn:focus-visible,.mode-btn:focus-visible,.tab-btn:focus-visible,.dict-submit-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--radius-sm)}
[aria-hidden=true]{speak:none}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.back-to-top{position:fixed;right:24px;bottom:calc(env(safe-area-inset-bottom,0px) + 24px);width:44px;height:44px;border-radius:50%;border:none;background:var(--accent);color:#fff;font-size:20px;line-height:44px;text-align:center;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.3);z-index:250;opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .2s,visibility .2s,transform .2s}
.back-to-top.show{opacity:1;visibility:visible;transform:translateY(0)}@media (hover: hover) and (pointer: fine){
.back-to-top:hover{filter:brightness(1.08)}}

/* === CHART STYLES === */
.chart-row{display:grid;grid-template-columns:1fr 1fr;gap:20px;background:transparent;border:none;box-shadow:none;padding:0}
.chart-half{background:var(--surface);border-radius:var(--radius);padding:20px;border:1px solid var(--border);box-shadow:var(--shadow)}
.chart-half h2{font-size:1em;margin-bottom:12px}
.chart-half canvas{max-height:250px}

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

.settings-head h2{font-size:1.05rem;font-weight:700}
.settings-hint,.setting-note{color:var(--text2);font-size:.78rem}
.settings-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.settings-panel .mode-row,.settings-panel .pool-row,.settings-panel .freq-filter-row{display:grid;grid-template-columns:1fr;gap:6px;margin:0;align-items:stretch;justify-content:initial}
.settings-panel .setting-item label{color:var(--text2);font-size:.78rem;font-weight:700;letter-spacing:.02em}
.setting-select{width:100%;min-height:42px;padding:9px 34px 9px 12px;border:1px solid var(--border);border-radius:7px;background:var(--surface2);color:var(--text);font:inherit;font-size:.88rem;cursor:pointer;outline:none;appearance:auto;transition:border-color 160ms,box-shadow 160ms,background 160ms}
.setting-select:hover{border-color:var(--accent)}
.setting-select:focus{border-color:var(--accent);background:var(--surface);box-shadow:0 0 0 3px rgba(15,118,110,.14)}
.settings-panel .freq-filter-row{display:grid}
.settings-panel .freq-count{display:block;margin:0;color:var(--accent);font-size:.74rem}
.memory-setting{grid-column:1 / -1;grid-template-columns:auto minmax(150px,220px) 1fr!important;align-items:center!important;gap:12px!important;padding-top:4px}
.memory-setting label{margin-right:2px}
.memory-toggle{min-height:38px;padding:8px 16px;border-radius:7px!important;background:var(--surface2);border:1px solid var(--border);color:var(--text);font-weight:700}
.memory-toggle.active{background:var(--accent);border-color:var(--accent);color:#fff}
.auto-speak-setting{grid-column:1 / -1;grid-template-columns:auto minmax(150px,220px) 1fr!important;align-items:center!important;gap:12px!important;padding-top:4px}
.auto-speak-setting label{margin-right:2px}
.auto-speak-toggle{min-height:38px;padding:8px 16px;border-radius:7px!important;background:var(--surface2);border:1px solid var(--border);color:var(--text);font-weight:700}
.auto-speak-toggle.active{background:var(--accent);border-color:var(--accent);color:#fff}
.rules-card{margin-bottom:18px;padding:16px 20px;border-radius:10px;box-shadow:none}
.rules-card h3{margin:0;color:var(--text);font-size:.92rem}
.rules-card h3:first-letter{color:var(--accent)}
.rules-body{font-size:.82rem}
.quiz-card{max-width:900px;margin:0 auto 18px;padding:36px;border-radius:12px;box-shadow:var(--shadow);border-color:var(--border)}
.quiz-card.fullscreen{width:100vw;max-width:none;margin:0}
.q-label{color:var(--accent);background:rgba(15,118,110,.1);border-radius:5px;letter-spacing:.04em}
.q-word{font-size:2.15rem;line-height:1.25}
.pos-badge{color:var(--accent);background:rgba(15,118,110,.1)}
.opt-btn{min-height:58px;background:var(--surface2);border:1px solid transparent;border-radius:7px;padding:14px 16px}
.opt-btn>span:last-child{min-width:0;overflow-wrap:anywhere}
.option-pos{display:inline-block;margin:0 5px;color:var(--accent);font-size:.78em;font-weight:700;white-space:nowrap}
/* 朗读 / 发音练习 按钮：同一行、同高（尺寸只由 .pron-pill 决定），发音练习加 .wide 略宽 */
.pron-pill-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.pron-pill{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:4px 12px;font-size:1.05em;line-height:1.5;background:var(--surface2);border:1px solid var(--border);border-radius:20px;cursor:pointer;color:var(--text);user-select:none;-webkit-tap-highlight-color:transparent;transition:border-color 150ms,background 150ms}
.pron-pill:hover{border-color:var(--accent)}
.pron-pill.wide{padding-left:16px;padding-right:16px}
.pron-pill.disabled{opacity:.55;cursor:not-allowed}
.pp-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);display:none;align-items:center;justify-content:center;z-index:9999;padding:16px}
.pp-overlay.open{display:flex}
.pp-panel{width:min(440px,100%);max-height:86vh;overflow:auto;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:18px 18px 14px;box-shadow:0 18px 50px rgba(0,0,0,.45)}
.pp-head{display:flex;align-items:center;justify-content:space-between;font-weight:700;font-size:1.02em;margin-bottom:10px}
.pp-close{cursor:pointer;color:var(--text2);font-size:.95em;padding:2px 6px;border-radius:6px}
.pp-close:hover{background:var(--surface2);color:var(--text)}
.pp-word{font-size:1.5em;font-weight:700;margin-bottom:4px;word-break:break-word}
.pp-ipa{font-size:.62em;color:var(--text2);font-weight:400;margin-left:6px}
.pp-tip{font-size:.82em;color:var(--text2);margin-bottom:12px;line-height:1.5}
.pp-actions{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.pp-btn{padding:8px 14px;background:var(--surface2);border:1px solid var(--border);border-radius:9px;color:var(--text);cursor:pointer;font-size:.9em}
.pp-btn.primary{border-color:var(--accent);color:var(--accent)}
.pp-btn.disabled{opacity:.5;cursor:not-allowed}
.pp-status{font-size:.84em;color:var(--text2);min-height:1.3em;margin-bottom:6px;word-break:break-word}
.pp-result{font-size:.95em;font-weight:600;min-height:1.3em;margin-bottom:8px;word-break:break-word}
.pp-result.ok{color:var(--green,#3fb950)}
.pp-result.near{color:var(--accent2,#d29922)}
.pp-result.bad{color:var(--red,#f85149)}
.pp-manual{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.pp-tools{margin-top:2px}
.pp-micsel{display:flex;align-items:center;gap:8px;font-size:.8em;color:var(--text2);margin:0 0 8px}
.pp-micsel select{flex:1;min-width:0;padding:4px 6px;background:var(--surface2);color:var(--text);border:1px solid var(--border);border-radius:6px;font-size:1em}
/* 跟读练习：识别资源准备与按钮状态 */
.pp-btn:disabled{opacity:.55;cursor:not-allowed}
@media(max-width:480px){.pp-panel{padding:14px 12px}}
.pp-model{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:.78em;color:var(--text2);margin:0 0 10px}
.pp-model.ok #ppModelState{color:var(--green,#3fb950)}
.pp-model.busy #ppModelState{color:var(--accent2,#d29922)}
.pp-stats{font-size:.78em;color:var(--text2);border-top:1px solid var(--border);padding-top:8px}
/* 麦克风自检：实时输入电平，用来判断"系统/浏览器到底有没有收到声音" */
.pp-meter{display:none;align-items:center;gap:8px;margin:0 0 8px;font-size:.78em;color:var(--text2)}
.pp-meter.on{display:flex}
.pp-meter-track{flex:1;height:8px;background:var(--surface2);border:1px solid var(--border);border-radius:6px;overflow:hidden}
.pp-meter-fill{display:block;height:100%;width:0%;background:var(--accent);transition:width 80ms linear}
.pp-meter-fill.low{background:var(--red,#f85149)}
.pp-meter-val{min-width:74px;text-align:right}
.opt-btn:hover{border-color:var(--accent);background:rgba(15,118,110,.08)}
.opt-btn .ol{display:inline-flex;align-items:center;justify-content:center;min-width:28px;height:28px;border-radius:5px;background:var(--surface);color:var(--accent);border:1px solid var(--border)}
.opt-btn.correct{border-color:var(--green)!important;background:rgba(22,163,74,.1)!important}
.opt-btn.wrong{border-color:var(--red)!important;background:rgba(220,38,38,.08)!important}
.stats-bar{max-width:900px;margin:0 auto 16px;gap:10px}
.sc{padding:13px 10px;border-radius:8px;box-shadow:none}
.sc .sv{color:var(--text)}
.question-progress{margin:0 auto 16px;max-width:900px;padding:10px 12px;border:1px solid var(--border);border-radius:8px;background:var(--surface)}
/* 横向滚动只作用于进度点轨道；"X / N 已完成"文字固定在上方不随滚动移出视野 */
.progress-viewport{overflow-x:auto;scrollbar-width:thin}
.progress-meta{display:flex;justify-content:space-between;gap:12px;margin-bottom:8px;color:var(--text2);font-size:.75rem;white-space:nowrap}
.progress-meta strong{color:var(--accent)}
.progress-track{display:flex;gap:5px;min-width:max-content;padding:0 calc(50% - 12px)}
.progress-dot{display:inline-flex;align-items:center;justify-content:center;width:24px;height:7px;border-radius:4px;background:var(--border);color:transparent;font-size:0;transition:background 180ms,transform 180ms}
.progress-dot.current{background:var(--accent);transform:scaleY(1.35)}
.progress-dot.correct{background:var(--green)}
.progress-dot.wrong{background:var(--red)}
.progress-dot.skip{background:var(--orange)}
.progress-dot.current.correct,.progress-dot.current.wrong,.progress-dot.current.skip{outline:2px solid var(--accent);outline-offset:2px}
.ctrl-btn{border-width:1px;border-radius:7px}
.next-btn{border-radius:7px;background:var(--accent)}
.panel,.stats-sec,.chart-half{border-radius:10px;box-shadow:var(--shadow)}
.search-box{border-radius:7px;background:var(--surface);padding:9px 12px}
.ctrl-btn:focus-visible,.mode-btn:focus-visible,.tab-btn:focus-visible,.setting-select:focus-visible,.dict-submit-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media(max-width:768px){
  .container{padding:14px 14px 36px}
  .header{padding:22px 16px}
  .header-row{display:block;min-height:0}
  .header-row h1{margin-bottom:12px}
  .theme-slot{position:absolute;top:0;right:0;min-height:0}
  .tabs{overflow-x:auto;justify-content:flex-start}
  .tab-btn{flex:0 0 auto;padding:10px 13px;font-size:.8rem}
  .tab-btn.active::after{right:10px;left:10px}
  .settings-head{display:block}
  .settings-hint{display:block;margin-top:5px}
  .settings-grid{grid-template-columns:1fr 1fr}
  .memory-setting{grid-column:1 / -1}
  .quiz-card{padding:22px 18px}
  .q-word{font-size:1.7rem}
  .quiz-card.fullscreen .quiz-scroll{padding:14px 12px 8px;overflow-y:auto;touch-action:pan-y}
  .quiz-card.fullscreen .quiz-top-row .q-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;word-break:normal}
  .quiz-card.fullscreen .options{grid-template-columns:1fr 1fr;gap:8px}
  .quiz-card.fullscreen .opt-btn{min-height:50px;padding:8px 10px;font-size:.86rem;line-height:1.25;gap:6px}
  .quiz-card.fullscreen .opt-btn .ol{min-width:22px;width:22px;height:22px;font-size:.75em}
}
@media(max-width:480px){
  .settings-grid{grid-template-columns:1fr}
  .memory-setting{grid-template-columns:1fr!important;gap:6px!important}
  .memory-setting .setting-note{margin-top:0}
  .auto-speak-setting{grid-template-columns:1fr!important;gap:6px!important}
  .auto-speak-setting .setting-note{margin-top:0}
  .quiz-card{padding:18px 14px}
  .q-word{font-size:1.5rem}
  .quiz-card.fullscreen .quiz-scroll{padding:10px 8px 6px;overflow-y:auto}
  .quiz-card.fullscreen .quiz-top-row{margin-bottom:4px}
  .quiz-card.fullscreen .q-word{font-size:1.35rem}
  .quiz-card.fullscreen .question-progress{margin-bottom:8px;padding:6px 8px}
  .quiz-card.fullscreen .options{gap:6px}
  .quiz-card.fullscreen .opt-btn{min-height:44px;padding:6px 7px;font-size:.78rem;line-height:1.2}
  .quiz-card.fullscreen .opt-btn .ol{min-width:20px;width:20px;height:20px;font-size:.7em}
}



 * ========================================================================== */


/* ---------- 3. 排版（HIG：字距随尺寸收紧，正文中性） ---------- */
body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI",
               system-ui, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  line-height: 1.5;
  letter-spacing: 0;
  transition: background-color 460ms cubic-bezier(.32,.72,0,1),
              color 460ms cubic-bezier(.32,.72,0,1);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---------- 4. 焦点环：永不移除 ---------- */
:focus { outline: none; }
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ---------- 5. 即时按压反馈（pointer-down 即响应） ---------- */
.ctrl-btn, .tab-btn, .opt-btn, .mode-btn, .freq-chip, .hm-range,
.gmap-back, .pp-btn, .pp-close, .back-to-top, #backToTopBtn, .wd-head {
  transition:
    transform        160ms cubic-bezier(.32,.72,0,1),
    background-color 160ms cubic-bezier(.32,.72,0,1),
    box-shadow       160ms cubic-bezier(.32,.72,0,1),
    border-color     160ms cubic-bezier(.32,.72,0,1),
    opacity          160ms cubic-bezier(.32,.72,0,1),
    filter           160ms cubic-bezier(.32,.72,0,1);
  -webkit-tap-highlight-color: transparent;
}
.ctrl-btn:active, .tab-btn:active, .opt-btn:active, .mode-btn:active,
.freq-chip:active, .hm-range:active, .gmap-back:active,
.pp-btn:active, .pp-close:active, .back-to-top:active, #backToTopBtn:active,
.wd-head:active {
  transform: scale(.965);
  transition-duration: 80ms;
}

/* ---------- 6. 最小触达区 44pt ----------
 * 只加高度，不改 display：.tab-btn 原本是 .tabs 的 flex 子项，
 * 覆盖 display 会打乱 flex 分配并让标签文字重叠。 */
.ctrl-btn, .mode-btn, .pp-btn, .gmap-back {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.tab-btn { min-height: 44px; }
.back-to-top, #backToTopBtn { min-width: 44px; min-height: 44px; }

/* .tabs 是 sticky 浮动栏（HIG：内容在其下滚动），补上材质与滚动边缘 */
.tabs {
  background: var(--material-chrome);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
}

/* ---------- 7. 卡片：半透明材质 + 接触阴影 ----------
 * 只用于浮在内容之上的表面（题目卡 / 单词详解 / 图表卡 / 手写板）。
 * .header 是页头卡片，不是浮动栏，保持不透明实底。 */
.panel, .quiz-card, .chart-half, .word-detail, .hw-panel {
  background: var(--material-card);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow), 0 0 0 .5px var(--border);
}

/* ---------- 8. 主按钮：唯一高饱和填充，其余灰阶 ---------- */
.ctrl-btn.accent, .mode-btn.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  box-shadow: 0 4px 14px rgba(91,91,214,.32);
}
:root[data-theme="dark"] .ctrl-btn.accent,
:root[data-theme="dark"] .mode-btn.active {
  box-shadow: 0 4px 18px rgba(125,122,255,.36);
}

/* ---------- 9. 选项按钮：作答主交互面 ---------- */
.opt-btn {
  min-height: 60px;
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 0 0 1px var(--border);
}
.opt-btn.correct { box-shadow: inset 0 0 0 2px var(--green), 0 2px 10px rgba(0,0,0,.08); }
.opt-btn.wrong   { box-shadow: inset 0 0 0 2px var(--red),   0 2px 10px rgba(0,0,0,.08); }
.opt-btn.correct:disabled, .opt-btn.wrong:disabled { opacity: 1; }

/* ---------- 10. 作答反馈：材质「到达」而非单纯淡入 ---------- */
@keyframes material-arrive {
  0%   { filter: brightness(1.45); transform: scale(1.02); }
  60%  { filter: brightness(1.10); }
  100% { filter: brightness(1);    transform: scale(1); }
}
.opt-flash-green { animation: material-arrive 460ms cubic-bezier(.32,.72,0,1) both; }
.opt-shake { animation: shake-soft 460ms cubic-bezier(.32,.72,0,1) both; }
@keyframes shake-soft {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(5px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(2px); }
}

/* ---------- 11. 单词大字：字距随尺寸收紧 ---------- */
.q-word {
  font-size: clamp(1.75rem, 6vw, 2.5rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.022em;
}

/* ---------- 12. 统计数字等宽对齐 ---------- */
.sv, .sdv, .fdv { font-variant-numeric: tabular-nums; font-weight: 680; }

/* ---------- 12.5 回顶按钮：真正的浮动材质表面 ---------- */
.back-to-top, #backToTopBtn {
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 6px 20px rgba(0,0,0,.18), 0 0 0 .5px var(--border);
}

/* ---------- 13. Toast：材质进场 ---------- */
.toast {
  background: var(--material-card);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  box-shadow: 0 18px 48px rgba(0,0,0,.16), 0 0 0 .5px var(--border);
}

/* ---------- 14. 使用指南折叠：网格行高动画 ---------- */
.rules-body {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 460ms cubic-bezier(.32,.72,0,1),
              opacity 320ms cubic-bezier(.32,.72,0,1);
}
.rules-body > * { min-height: 0; }
.rules-card.collapsed .rules-body { grid-template-rows: 0fr; opacity: 0; overflow: hidden; }

/* ---------- 15. 滚动条（仅精确指针） ---------- */
@media (hover: hover) and (pointer: fine) {
  ::-webkit-scrollbar { width: 10px; height: 10px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb {
    background: rgba(120,120,128,.45);
    border-radius: 999px;
    border: 3px solid transparent;
    background-clip: content-box;
  }
  ::-webkit-scrollbar-thumb:hover { background: rgba(120,120,128,.7); background-clip: content-box; }
}

/* ---------- 16. 移动端安全区 ---------- */
@media (max-width: 480px) {
  .container { padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px)); }
}

/* ---------- 17. 降级：减少动效（保留可理解性反馈，去掉位移） ---------- */
@media (prefers-reduced-motion: reduce) {
  .opt-flash-green, .opt-shake, .opt-entering { animation: none !important; }
  .opt-btn.correct { background: var(--green); color: #fff; }
  .opt-btn.wrong   { background: var(--red);   color: #fff; }
  .ctrl-btn:active, .tab-btn:active, .opt-btn:active,
  .mode-btn:active, .freq-chip:active { transform: none; }
}

/* ---------- 18. 降级：减少透明度 ---------- */
@media (prefers-reduced-transparency: reduce) {
  .panel, .quiz-card, .chart-half, .word-detail, .toast {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: var(--surface);
  }
}

/* ---------- 19. 降级：高对比度 ---------- */
@media (prefers-contrast: more) {
  :root { --border: rgba(0,0,0,.45); --text2: #3a3a3c; }
  :root[data-theme="dark"] { --border: rgba(255,255,255,.5); --text2: #d1d1d6; }
  .panel, .quiz-card, .opt-btn, .ctrl-btn, .word-detail, .chart-half {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: var(--surface);
    box-shadow: 0 0 0 1px var(--border);
  }
}
</style>