@charset "UTF-8";
/* ==========================================================================
   乐往科技官网 · 听力自测工具站内样式
   适用范围：/hearingtest/ 下的测试页（index.html / index_en.html）
   最后重写：2026-09-22（界面优化 + 官网视觉适配）
   设计基线：与 lewang.net.cn 全站一致（暖色板 / 页头页脚 / 双端适配）

   ⚠️ 维护提醒
   本文件与 bundle.js、bundle_enhanced.js 存在「选择器契约」：
   JS 会动态添加 .hidden .options.hard .options.expert .option-button.correct
   .option-button.incorrect .difficulty-btn.selected .result-details.show
   .resolution-percentage.excellent/.good/.warning .firework .confetti .star
   .floating-celebration .streak-plus-one .answer-feedback.error-feedback
   .details-toggle-button.active 等类名，并依赖下列 id 存在：
   #pinyin-display #play-button #play-count #options #progress-bar
   #progress-text #test-section #result-section #result-percentage
   #result-progress-fill #resolution-feedback #restart-button
   #details-toggle-button #result-details #detail-accuracy #detail-word-count
   #detail-correct-count #detail-test-duration #fireworks-container
   #word-count-slider #word-count-value #default-difficulty
   删除或改名上述选择器 / id 前，请先同步修改 JS（契约清单见文件末尾）。
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 设计令牌（与全站一致）
   -------------------------------------------------------------------------- */
:root{
  --bg:#FFF8F1; --card:#FFFFFF; --ink:#3B2A1A; --sub:#8A7156;
  --accent:#E8590C; --accent-dark:#C2410C; --amber:#F0A02E;
  --line:#F3E3CE; --cream:#FBEFDF; --tint:#FDEEE0;
  --ok:#2E7D32; --no:#C0392B; --warn:#B07A1E;
  --shadow:0 10px 30px rgba(192,86,43,.10);
  --radius:14px;
}

/* --------------------------------------------------------------------------
   2. 基础重置与排版
   -------------------------------------------------------------------------- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
*{scroll-margin-top:78px}
body{
  font-family:"PingFang SC","Microsoft YaHei","Noto Sans SC",sans-serif;
  background:var(--bg);color:var(--ink);line-height:1.85;font-size:16px;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
::selection{background:rgba(232,89,12,.16)}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;height:auto}
ul{padding-left:22px}
li{margin:5px 0}
h1{font-size:27px;line-height:1.35;margin-bottom:6px}
h2{font-size:19px;line-height:1.5;margin:32px 0 12px;padding-left:10px;border-left:4px solid var(--accent)}
h3{font-size:16.5px;line-height:1.5}
p{margin:8px 0}
.hidden{display:none!important}
.note{font-size:13px;color:var(--sub)}

/* --------------------------------------------------------------------------
   3. 站点外壳：页头 / 页脚 / 容器
   -------------------------------------------------------------------------- */
.container{max-width:880px;margin:0 auto;padding:0 24px}

header{background:rgba(255,248,241,.95);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50;transition:box-shadow .3s ease}
header.scrolled{box-shadow:0 4px 20px rgba(61,43,31,.09)}
.nav{display:flex;align-items:center;justify-content:space-between;height:60px}
/* 页头内容宽度全站固定：避免跨页品牌图标位置跳动（2026-09-21） */
header .container.nav{max-width:1080px}
.logo{display:flex;align-items:center;gap:10px;font-weight:700;font-size:18px;color:var(--ink);text-decoration:none}
.logo:hover{text-decoration:none}
.logo .mark{width:40px;height:40px;flex:none;display:block;max-width:none}
.nav-links{display:flex;gap:20px;font-size:14.5px}
.nav-links a{color:var(--ink);text-decoration:none}
.nav-links a:hover{color:var(--accent);text-decoration:none}
.nav-links a.cur{color:var(--accent);font-weight:700}
@media(max-width:820px){.nav-links{display:none}}

main{padding:44px 0 70px}
.crumb{font-size:13px;color:var(--sub);margin-bottom:22px}
.crumb a{color:var(--sub);text-decoration:none}
.crumb a:hover{color:var(--accent)}

footer{background:#33241a;color:#D9C6AE;padding:30px 0;text-align:center;font-size:13px;margin-top:40px}
footer a{color:#D9C6AE;text-decoration:none}
footer a:hover{color:var(--amber)}
footer .f-nav{display:flex;flex-wrap:wrap;gap:6px 16px;justify-content:center;margin-bottom:10px;font-size:13.5px}

/* 返回顶部 */
.btt{position:fixed;right:18px;bottom:18px;width:44px;height:44px;border-radius:13px;border:none;cursor:pointer;background:linear-gradient(135deg,#C0562B,#E08C4A);color:#fff;font-size:19px;line-height:1;opacity:0;visibility:hidden;transform:translateY(8px);transition:all .3s ease;box-shadow:0 8px 20px rgba(192,86,43,.32);z-index:999}
.btt.show{opacity:1;visibility:visible;transform:none}
.btt:hover{transform:translateY(-2px)}

/* --------------------------------------------------------------------------
   4. 页头区（hero-band）与 GEO 答案块（tldr）
   -------------------------------------------------------------------------- */
.hero-band{background:linear-gradient(135deg,#FDEEE0,#FFF8F1);border:1px solid var(--line);border-radius:18px;padding:32px 34px;margin-bottom:10px}
.hero-band .kicker{color:var(--accent);font-weight:700;font-size:13px;letter-spacing:2px}
.hero-band p.lead{font-size:17px;margin-top:10px;color:var(--ink)}
.hero-band .meta-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.hero-band .pill{background:#fff;border:1px solid var(--line);color:var(--sub);border-radius:20px;padding:3px 13px;font-size:12.5px}

.tldr{background:#FDF6EC;border:1px solid #F0DCC4;border-left:4px solid #C0562B;border-radius:10px;padding:16px 18px;margin:20px 0 24px}
.tldr h2{font-size:16px;margin:0 0 8px;padding:0;border:0;color:#C0562B}
.tldr p{margin:0 0 8px;font-size:15px;line-height:1.85}
.tldr .facts{font-size:14px;color:#8A7156;margin:10px 0 0;padding-left:20px;line-height:1.8}
.tldr .facts li{margin-bottom:4px}
.tldr .facts b{color:var(--ink)}

/* --------------------------------------------------------------------------
   5. 工具外壳
   -------------------------------------------------------------------------- */
.tool{margin:26px 0 6px}
.main-content{display:block}

.tool-head{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:26px 28px;box-shadow:var(--shadow)}
.header-content .tool-title{font-size:20px;margin:0 0 4px;border:0;padding:0}
.header-content p{font-size:14px;color:var(--sub);margin:0}
/* 工具卡内不再放品牌图标（2026-09-22 界面优化），保留此规则防止旧标记回流 */
.tool-head .logo-container,.tool-head .logo{display:none}

/* 设置区 */
.test-settings{margin-top:22px;padding-top:20px;border-top:1px dashed var(--line)}
.settings-row{display:flex;flex-wrap:wrap;gap:22px 34px}
.setting-group{flex:1 1 260px;min-width:240px}
.setting-group > label{display:block;font-size:13.5px;font-weight:700;color:var(--ink);margin-bottom:8px}
.difficulty-buttons{display:flex;flex-wrap:wrap;gap:10px}
.difficulty-btn{
  display:inline-flex;align-items:center;gap:7px;
  background:#fff;border:1.5px solid var(--line);color:var(--ink);
  border-radius:12px;padding:10px 18px;font-size:14.5px;font-weight:600;
  cursor:pointer;font-family:inherit;transition:all .2s ease;
  min-height:46px;touch-action:manipulation;-webkit-tap-highlight-color:transparent;
}
.difficulty-btn .btn-icon{font-size:15px;line-height:1;transition:transform .2s ease}
.difficulty-btn:hover{border-color:var(--amber);background:#FFFDFA}
.difficulty-btn:hover .btn-icon{transform:scale(1.08)}
.difficulty-btn.selected{background:var(--tint);border-color:var(--accent);color:var(--accent-dark);box-shadow:0 4px 12px rgba(232,89,12,.14)}
.difficulty-btn:active{transform:scale(.97)}
.difficulty-btn::before{content:none}

/* 题量滑块 */
.slider-container{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.slider-container > span{font-size:12.5px;color:var(--sub)}
.slider-container input[type="range"]{
  -webkit-appearance:none;appearance:none;flex:1 1 140px;min-width:120px;height:6px;
  border-radius:3px;background:linear-gradient(90deg,var(--amber),var(--accent));
  outline:none;cursor:pointer;
}
.slider-container input[type="range"]::-webkit-slider-runnable-track{height:6px;border-radius:3px;background:transparent}
.slider-container input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:22px;height:22px;border-radius:50%;
  background:#fff;border:3px solid var(--accent);cursor:pointer;margin-top:-8px;
  box-shadow:0 2px 8px rgba(192,86,43,.3);transition:transform .18s ease;
}
.slider-container input[type="range"]::-webkit-slider-thumb:hover{transform:scale(1.12)}
.slider-container input[type="range"]::-moz-range-track{height:6px;border-radius:3px;background:linear-gradient(90deg,var(--amber),var(--accent))}
.slider-container input[type="range"]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#fff;border:3px solid var(--accent);cursor:pointer}
.word-count-display{background:var(--cream);color:var(--accent-dark);border-radius:9px;padding:3px 12px;font-size:13.5px;font-weight:700}
.word-count-display span{font-variant-numeric:tabular-nums}

/* 开始闸门：先让用户点一下，音频才不会被浏览器自动播放策略拦掉 */
.start-gate{
  margin-top:24px;background:linear-gradient(135deg,#FDEEE0,#FFF8F1);border:1px dashed #E8C9A8;
  border-radius:16px;padding:30px 24px;text-align:center;
}
.start-gate h2{font-size:17px;border:0;padding:0;margin:0 0 8px}
.start-gate p{font-size:14px;color:var(--sub);max-width:520px;margin:0 auto 16px}
.start-gate ol{text-align:left;max-width:460px;margin:0 auto 20px;font-size:14px;color:var(--sub)}
.start-gate ol li{margin:6px 0}

/* --------------------------------------------------------------------------
   6. 测试区
   -------------------------------------------------------------------------- */
#test-section{position:relative;margin-top:24px}
.progress-container{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px 16px;margin-bottom:18px}
.progress-info{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:8px}
.progress-label{font-size:13px;color:var(--sub)}
.progress-stats{font-size:14px;font-weight:700;color:var(--accent);font-variant-numeric:tabular-nums}
.progress-bar{position:relative;height:9px;background:var(--cream);border-radius:6px;overflow:hidden}
.progress-fill{height:100%;width:0;border-radius:6px;background:linear-gradient(90deg,var(--amber),var(--accent));transition:width .35s ease}
.progress-shine{position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.65),transparent);animation:progress-shine 2.2s ease-in-out infinite}

.canvas{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:34px 24px;text-align:center;box-shadow:var(--shadow)}
.pinyin-display{font-size:26px;font-weight:700;color:var(--ink);min-height:44px;display:flex;align-items:center;justify-content:center;margin-bottom:22px;letter-spacing:1px}
.pinyin-display::before{content:none}

.play-button{
  position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:10px;
  background:linear-gradient(135deg,#E8590C,#C2410C);color:#fff;border:none;
  border-radius:50px;padding:16px 34px;font-size:17px;font-weight:700;font-family:inherit;
  cursor:pointer;transition:all .22s ease;box-shadow:0 8px 20px rgba(232,89,12,.3);
  min-height:54px;touch-action:manipulation;-webkit-tap-highlight-color:transparent;
}
.play-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 12px 26px rgba(232,89,12,.4)}
.play-button:active:not(:disabled){transform:scale(.97)}
.play-button:disabled{background:#E4D6C6;color:#9C8672;cursor:not-allowed;box-shadow:none}
.play-button:disabled:hover{transform:none;box-shadow:none}
.play-button::before{content:none}
.play-button .play-icon{font-size:17px;line-height:1;display:inline-block;transition:transform .2s ease}
.play-button:hover .play-icon{transform:scale(1.1)}
.play-count{font-size:13px;font-weight:600;color:rgba(255,255,255,.85);margin-left:2px}
.play-button:disabled .play-count{color:rgba(120,100,80,.75)}

.options{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-top:20px}
.options.hard{grid-template-columns:repeat(2,1fr)}
.options.expert{grid-template-columns:repeat(3,1fr)}
.options:not(.hard):not(.expert) .option-button{font-size:19px}
.option-button{
  position:relative;background:#fff;border:2px solid var(--line);border-radius:14px;
  padding:18px 16px;font-size:19px;font-weight:600;color:var(--ink);font-family:inherit;
  cursor:pointer;transition:all .2s ease;min-height:64px;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;
}
.option-button::before{content:none}
.option-button:hover:not(.correct):not(.incorrect){border-color:var(--amber);background:#FFFDFA;transform:translateY(-2px)}
.option-button:hover::before{content:none}
.option-button:active:not(.correct):not(.incorrect){transform:scale(.97)}
.option-button.correct{background:var(--ok);border-color:var(--ok);color:#fff;animation:correct-pulse .45s ease}
.option-button.incorrect{background:var(--no);border-color:var(--no);color:#fff;animation:incorrect-shake .45s ease}
.correct-word{font-weight:800;color:var(--ok)}

/* 祝贺 / 反馈特效（元素由 JS 动态插入） */
.fireworks-container{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:10}
.firework{position:absolute;width:11px;height:11px;border-radius:50%;background:var(--amber);animation:firework-explode 1.2s ease-out forwards;box-shadow:0 0 12px currentColor;will-change:transform,opacity}
.firework::before,.firework::after{content:"";position:absolute;inset:0;border-radius:50%;background:inherit;animation:firework-spark 1.2s ease-out forwards}
.confetti{position:absolute;width:9px;height:14px;border-radius:2px;background:var(--amber);animation:confetti-fall 1.8s linear forwards}
.star{position:absolute;font-size:16px;animation:star-twinkle 1.3s ease-in-out forwards}
.floating-celebration{position:absolute;font-size:34px;color:var(--ok);animation:float-up 1.1s ease-out forwards;z-index:20;pointer-events:none}
.streak-plus-one{position:absolute;font-size:20px;font-weight:800;color:var(--accent);animation:float-up 1.1s ease-out forwards;z-index:20;pointer-events:none}
.answer-feedback{position:absolute;left:50%;transform:translateX(-50%);padding:9px 20px;border-radius:20px;font-size:15px;font-weight:700;color:#fff;background:var(--ok);animation:feedbackPop 1.5s ease forwards;z-index:25;pointer-events:none}
.answer-feedback .feedback-text{display:inline-block}
.answer-feedback.error-feedback{background:var(--no)}
.answer-feedback .correct-word{color:#fff}

/* 连对提示 */
.streak-display{position:relative;display:none;align-items:center;gap:6px;justify-content:center;margin:0 auto 14px;background:var(--cream);color:var(--accent-dark);border-radius:20px;padding:4px 16px;font-size:13.5px;font-weight:700;width:fit-content}
.streak-display.pulse{animation:streak-pulse .5s ease}
.streak-text{position:relative;z-index:2}
.streak-glow{position:absolute;inset:0;border-radius:20px;background:radial-gradient(circle,rgba(240,160,46,.4),transparent 70%);animation:streak-glow-pulse 1.4s ease-in-out infinite}

/* 成就条 */
.achievement-bar{display:flex;align-items:center;gap:10px;background:var(--cream);border:1px solid var(--line);border-radius:12px;padding:10px 16px;margin:14px 0;font-size:13.5px;color:var(--accent-dark)}
.achievement-icon{font-size:20px;line-height:1}
.achievement-text b{color:var(--accent)}
.achievement-text.celebrate{animation:achievement-pop .6s ease}

/* --------------------------------------------------------------------------
   7. 结果区
   -------------------------------------------------------------------------- */
#result-section{margin-top:24px}
#result-section h2{font-size:20px;border-left:4px solid var(--accent)}
.result-card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:30px 28px;box-shadow:var(--shadow)}
.result-percentage-wrapper,.resolution-display{text-align:center}
.resolution-subtitle{font-size:14px;color:var(--sub);letter-spacing:1px}
.resolution-percentage{
  font-size:56px;font-weight:800;line-height:1.15;margin:12px 0 4px;
  font-variant-numeric:tabular-nums;color:var(--accent);
  animation:percentage-pop .5s ease;
}
.resolution-percentage::after{display:inline-block;font-size:13px;font-weight:700;letter-spacing:2px;border-radius:20px;padding:2px 13px;margin-top:10px;vertical-align:6px}
.resolution-percentage.excellent{color:var(--ok)}
.resolution-percentage.excellent::after{content:"优秀";background:#E8F0E8;color:var(--ok)}
.resolution-percentage.good{color:var(--accent)}
.resolution-percentage.good::after{content:"良好";background:var(--tint);color:var(--accent-dark)}
.resolution-percentage.warning{color:var(--warn)}
.resolution-percentage.warning::after{content:"继续加油";background:#FBF1DE;color:var(--warn)}
.result-percentage{font-size:56px;font-weight:800;line-height:1.15;margin:12px 0;color:var(--accent);font-variant-numeric:tabular-nums}

.resolution-progress{margin:18px auto 6px;max-width:520px}
.resolution-progress .progress-bar{height:12px;background:var(--cream)}
.resolution-progress .progress-fill{background:linear-gradient(90deg,var(--amber),var(--accent))}
.resolution-progress .progress-fill::after{content:none}
.resolution-feedback{font-size:15px;color:var(--ink);background:var(--cream);border-radius:12px;padding:14px 18px;margin:20px 0 0;line-height:1.8;animation:feedback-appear .5s ease}

.details-toggle-button{
  display:flex;align-items:center;justify-content:center;gap:8px;width:100%;
  background:#fff;border:1.5px solid var(--line);color:var(--accent-dark);
  border-radius:12px;padding:13px 18px;font-size:14.5px;font-weight:700;font-family:inherit;
  cursor:pointer;transition:all .2s ease;margin-top:22px;min-height:48px;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;
}
.details-toggle-button:hover{border-color:var(--amber);background:#FFFDFA}
.details-toggle-button:active{transform:scale(.99)}
.toggle-icon{font-size:15px}
.toggle-arrow{margin-left:4px;transition:transform .25s ease}
.details-toggle-button.active .toggle-arrow{transform:rotate(180deg)}

.result-details{display:none;margin-top:18px;padding-top:6px;border-top:1px dashed var(--line)}
.result-details.show{display:block;animation:details-appear .35s ease}
.detail-item{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:12px 4px;border-bottom:1px solid var(--line)}
.detail-item:last-child{border-bottom:none}
.detail-label{font-size:14px;color:var(--sub)}
.detail-value{font-size:15.5px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}

.result-header{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.result-header .result-icon{font-size:22px}
.result-header h3{font-size:16.5px;margin:0}
.result-item{display:flex;align-items:center;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--line)}
.result-item:last-child{border-bottom:none}
.result-item-icon{font-size:17px;margin-right:8px}
.result-item-label{font-size:14px;color:var(--sub)}
.result-item-value{font-size:15.5px;font-weight:700;font-variant-numeric:tabular-nums}

.restart-button,.next-button{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:linear-gradient(135deg,#E8590C,#C2410C);color:#fff;border:none;
  border-radius:12px;padding:15px 34px;font-size:16px;font-weight:700;font-family:inherit;
  cursor:pointer;transition:all .22s ease;box-shadow:0 8px 20px rgba(232,89,12,.28);
  margin-top:24px;min-height:52px;touch-action:manipulation;-webkit-tap-highlight-color:transparent;
}
.restart-button:hover,.next-button:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(232,89,12,.38)}
.restart-button:active,.next-button:active{transform:scale(.97)}
.restart-icon{font-size:17px;line-height:1}
#result-section > .restart-button{display:flex;width:100%;max-width:320px;margin:24px auto 0}

/* --------------------------------------------------------------------------
   8. 页面说明 / 免责 / 来源 / FAQ / 相关工具
   -------------------------------------------------------------------------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:24px 26px;margin:16px 0}
.card h2{margin-top:0}
.card h3{font-size:15.5px;margin:16px 0 6px;color:var(--ink)}
.card p,.card li{font-size:14.5px;color:#4A3A2C}

.notice{background:#FDF6EC;border:1px solid #F0DCC4;border-left:4px solid var(--amber);border-radius:12px;padding:16px 20px;margin:18px 0;font-size:13.5px;line-height:1.85;color:#6B543C}
.notice b{color:var(--accent-dark)}

.faq{margin-top:4px}
.faq details{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px 20px;margin:12px 0}
.faq details[open]{border-color:#E8C9A8;background:#FFFDFA}
.faq summary{font-weight:700;font-size:16px;list-style:none;display:flex;gap:10px;align-items:flex-start;cursor:pointer}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"Q";flex:none;width:22px;height:22px;border-radius:7px;background:var(--cream);color:var(--accent);font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center;margin-top:4px}
.faq details p{margin:10px 0 2px 32px;color:#4A3A2C;font-size:14.5px}
.faq summary .qx{flex:none;margin-left:auto;width:22px;height:22px;border-radius:50%;background:var(--cream);color:var(--accent);display:flex;align-items:center;justify-content:center;margin-top:4px}
.faq summary .qx::before{content:"";width:13px;height:13px;background:currentColor;clip-path:polygon(8% 24%,50% 76%,92% 24%,92% 42%,50% 58%,8% 42%);transition:transform .24s ease}
.faq details[open] summary .qx{background:var(--accent);color:#fff}
.faq details[open] summary .qx::before{transform:rotate(180deg)}

table{width:100%;border-collapse:collapse;margin:14px 0;font-size:14.5px}
caption{caption-side:top;text-align:left;font-size:13px;color:var(--sub);padding-bottom:8px}
th,td{border:1px solid var(--line);padding:10px 12px;text-align:left;vertical-align:top}
thead th{background:var(--cream);color:var(--accent-dark);font-weight:700}
tbody tr:nth-child(even){background:#FFFCF8}

.sources{font-size:13px;color:var(--sub);line-height:1.85}
.sources h2{font-size:17px}
.sources ul{padding-left:20px}
.sources li{margin:6px 0}

.eeat{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:12px;padding:20px 24px;margin:20px 0;font-size:13.5px;color:#4A3A2C;line-height:1.85}
.eeat h3{font-size:15px;margin:0 0 8px;color:var(--ink)}
.eeat .org{font-weight:700;color:var(--ink)}
.eeat .badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.eeat .badges span{background:var(--cream);color:#8A5A16;border-radius:8px;padding:3px 12px;font-size:12.5px}

.crosslinks{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;margin:18px 0}
.crosslink{display:block;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:20px 22px;text-decoration:none;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.crosslink:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(192,86,43,.13);border-color:#E8C9A8;text-decoration:none}
.crosslink .cl-tag{display:inline-block;background:var(--cream);color:#B07A1E;border-radius:6px;padding:0 8px;font-size:12px;margin-bottom:8px}
.crosslink .cl-title{font-weight:700;font-size:15.5px;color:var(--ink);display:block;margin-bottom:4px}
.crosslink .cl-desc{font-size:13.5px;color:var(--sub);line-height:1.7;display:block}

.cta-band{background:linear-gradient(135deg,#FDEEE0,#FFF8F1);border:1px solid var(--line);border-radius:18px;padding:28px 30px;margin:22px 0;text-align:center}
.cta-band h2{font-size:18px;border:0;padding:0;margin:0 0 8px}
.cta-band p{font-size:14.5px;color:var(--sub);max-width:560px;margin:0 auto 16px}
.btn{display:inline-flex;align-items:center;gap:8px;border-radius:12px;padding:13px 28px;font-size:15px;font-weight:700;transition:.2s}
.btn:hover{text-decoration:none;transform:translateY(-2px)}
.btn-primary{background:var(--accent);color:#fff;box-shadow:0 8px 20px rgba(232,89,12,.28)}
.btn-primary:hover{background:var(--accent-dark)}
.btn-ghost{background:#fff;color:var(--ink);border:1.5px solid var(--line)}
.btn-ghost:hover{border-color:var(--amber)}

/* 滚动显现 */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}

/* --------------------------------------------------------------------------
   9. 动效关键帧（含 JS 动态生成元素所需）
   -------------------------------------------------------------------------- */
@keyframes page-load{from{opacity:0}to{opacity:1}}
@keyframes content-fade-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes button-select{0%{transform:scale(.96)}100%{transform:scale(1)}}
@keyframes button-press{0%{transform:scale(1)}50%{transform:scale(.96)}100%{transform:scale(1)}}
@keyframes play-icon-press{0%{transform:scale(1)}50%{transform:scale(.85)}100%{transform:scale(1)}}
@keyframes option-hover{from{transform:translateY(0)}to{transform:translateY(-2px)}}
@keyframes correct-pulse{0%{transform:scale(1)}40%{transform:scale(1.05)}100%{transform:scale(1)}}
@keyframes incorrect-shake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
@keyframes shake{0%,100%{transform:translateX(0)}10%,30%,50%,70%,90%{transform:translateX(-5px)}20%,40%,60%,80%{transform:translateX(5px)}}
@keyframes shine{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
@keyframes progress-shine{0%{transform:translateX(-100%)}60%,100%{transform:translateX(120%)}}
@keyframes firework-explode{0%{transform:scale(.3);opacity:1}30%{transform:scale(1.7);opacity:1}100%{transform:scale(3.4);opacity:0}}
@keyframes firework-spark{0%{transform:scale(.4);opacity:.9}100%{transform:scale(2.6);opacity:0}}
@keyframes star-twinkle{0%{opacity:0;transform:scale(.4)}50%{opacity:1;transform:scale(1.1)}100%{opacity:0;transform:scale(.8)}}
@keyframes confetti-fall{0%{transform:translateY(-10px) rotate(0);opacity:1}100%{transform:translateY(140px) rotate(320deg);opacity:0}}
@keyframes float-up{0%{opacity:0;transform:translateY(6px)}20%{opacity:1}100%{opacity:0;transform:translateY(-56px)}}
@keyframes feedbackPop{0%{opacity:0;transform:translate(-50%,8px) scale(.9)}20%{opacity:1;transform:translate(-50%,0) scale(1)}100%{opacity:0;transform:translate(-50%,-30px) scale(1)}}
@keyframes feedback-appear{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes resolution-appear{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes details-appear{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@keyframes percentage-pop{0%{opacity:0;transform:scale(.82)}60%{transform:scale(1.04)}100%{opacity:1;transform:scale(1)}}
@keyframes achievement-pop{0%{transform:scale(.9)}60%{transform:scale(1.04)}100%{transform:scale(1)}}
@keyframes streak-pulse{0%{transform:scale(1)}50%{transform:scale(1.08)}100%{transform:scale(1)}}
@keyframes streak-appear{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@keyframes streak-glow-pulse{0%,100%{opacity:.35}50%{opacity:.8}}
@keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none}
  .progress-shine,.streak-glow{animation:none}
}

/* --------------------------------------------------------------------------
   10. 双端适配（窄屏优先保证可用：导航换行居中不隐藏）
   -------------------------------------------------------------------------- */
@media (max-width:820px){
  .nav{flex-direction:column;height:auto;padding:10px 0;gap:8px}
  .nav-links{display:flex!important;flex-wrap:wrap;justify-content:center;gap:10px 14px;font-size:13.5px}
  main{padding:30px 0 54px}
  .hero-band{padding:26px 22px}
  h1{font-size:23px}
  .canvas{padding:26px 18px}
  .pinyin-display{font-size:22px}
}

@media (max-width:640px){
  body{font-size:15px}
  .container{padding:0 16px}
  h1{font-size:21px}
  h2{font-size:17.5px;margin-top:26px}
  .hero-band{padding:22px 18px;border-radius:16px}
  .hero-band p.lead{font-size:15.5px}
  .crumb{font-size:12.5px;margin-bottom:18px}
  .tldr{padding:14px}
  .tldr p{font-size:14.5px}
  .tldr .facts{font-size:13.5px}
  .tool-head{padding:20px 18px}
  .setting-group{min-width:0;flex:1 1 100%}
  .difficulty-btn{flex:1 1 calc(50% - 5px);justify-content:center;padding:10px 12px;font-size:14px}
  .canvas{padding:24px 16px;border-radius:16px}
  .pinyin-display{font-size:19px;min-height:38px;margin-bottom:18px}
  .play-button{width:100%;justify-content:center;padding:15px 20px;font-size:16px}
  .options{gap:10px;grid-template-columns:repeat(2,1fr)}
  .options.hard,.options.expert{grid-template-columns:repeat(2,1fr)}
  .option-button{padding:15px 10px;font-size:17px;min-height:58px}
  .result-card{padding:22px 18px}
  .resolution-percentage,.result-percentage{font-size:44px}
  .detail-item{flex-direction:column;align-items:flex-start;gap:2px}
  .detail-label{font-size:13px}
  .detail-value{font-size:15px}
  .card{padding:18px}
  .card p,.card li{font-size:14px}
  .faq details{padding:14px 16px}
  .faq summary{font-size:15px}
  .faq details p{margin-left:0;font-size:14px}
  .cta-band{padding:22px 18px}
  .btt{width:38px;height:38px;right:12px;bottom:14px;border-radius:11px;font-size:16px}
  table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .start-gate{padding:24px 18px}
}

@media (max-width:380px){
  .options{grid-template-columns:1fr}
  .options.hard,.options.expert{grid-template-columns:repeat(2,1fr)}
  .option-button{font-size:16px}
  .resolution-percentage,.result-percentage{font-size:38px}
}

/* 触摸设备：放大点击目标 */
@media (hover:none) and (pointer:coarse){
  .option-button{min-height:60px}
  .difficulty-btn{min-height:48px}
  .play-button{min-height:58px}
}

/* --------------------------------------------------------------------------
   JS 契约清单（改动前请同步修改 JS）
   bundle.js / bundle_enhanced.js
     ids: pinyin-display, play-button, play-count, options, test-section,
          result-section, result-percentage, result-progress-fill,
          resolution-feedback, restart-button, details-toggle-button,
          result-details, detail-accuracy, detail-word-count,
          detail-correct-count, detail-test-duration, fireworks-container,
          progress-bar, progress-text, word-count-slider, word-count-value,
          default-difficulty(bundle_enhanced)
     classes: hidden, selected, correct, incorrect, options(.hard/.expert),
              show, active, options, option-button
     querySelector: .difficulty-btn, .main-content, .play-icon, .play-text,
                    .toggle-arrow
   -------------------------------------------------------------------------- */