:root{
  --accent:#FF3200; --ink:#111111; --dim:#666666; --border:#D9D9D9;
  --page:#F6F6F4; --panel:#EEEEEE; --hint:#F7F5F3; --dim2:#6b7280;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;color:var(--ink);background:#fff}
#topbar{position:sticky;top:0;z-index:40;padding:10px 14px;background:rgba(255,255,255,.95);border-bottom:1px solid var(--border);backdrop-filter:blur(6px)}
#topbar .top-inner{max-width:860px;margin:0 auto;display:flex;align-items:center;gap:8px}
#topbar .top-title{font-weight:700;font-size:17px}
#topbar .brand-script{height:38px;display:block}
#brandLogoDesk{display:none}
body.home #backBtn{position:absolute;left:14px}
body.home #topTitle{margin-left:16px}
#topbar .top-spacer{width:36px}
.icon-btn{width:36px;height:36px;border-radius:50%;border:1px solid var(--border);background:#fff;font-size:22px;line-height:1;cursor:pointer}
main{max-width:860px;margin:0 auto;padding:14px 14px 60px}
body.home{background:var(--page)}
/* directory */
.brand{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--border);border-radius:14px;padding:14px 16px;margin-bottom:14px}
.brand .logo{flex:none;width:123px;height:52px;display:flex;flex-direction:column;justify-content:center;border-right:1px solid var(--border);padding-right:12px}
.brand .logo .lg1{font-weight:800;font-size:19px;line-height:1.15}
.brand .logo .lg2{font-weight:800;font-size:19px;line-height:1.15;color:var(--accent)}
.brand .brand-lines{height:52px;display:flex;flex-direction:column;justify-content:space-between}
.brand .brand-lines .b1{font-weight:700;font-size:17px}
.brand .brand-lines .b2{font-size:13px;color:var(--dim)}
.brand .brand-lines .b3{font-size:13px;color:var(--dim)}
.search-wrap{background:#fff;border:1px solid var(--border);border-radius:14px;padding:12px 14px;margin-bottom:14px}
.search-wrap input{width:100%;border:1px solid var(--border);border-radius:10px;padding:10px 12px;font-size:15px;outline:none}
.search-results{margin-top:10px;display:flex;flex-direction:column;gap:8px}
.search-hit{border:1px solid var(--border);background:var(--panel);border-radius:10px;padding:9px 11px;cursor:pointer;font-size:14px}
.search-hit .where{color:var(--accent);font-weight:700;font-size:12px;margin-bottom:2px}
.search-hit .snip{color:#333}
.part-card{display:flex;justify-content:space-between;align-items:center;background:#fff;border:1px solid var(--border);border-radius:14px;padding:16px;margin-bottom:12px;cursor:pointer}
.part-card .pc-t{font-weight:700;font-size:16px}
.part-card .pc-s{color:var(--dim);font-size:13px;margin-top:3px}
.part-card .pc-d{color:var(--dim);font-size:13px;white-space:nowrap}
.section-title{font-weight:700;font-size:16px;margin:20px 2px 4px}
.part-tabs{display:flex;gap:6px;background:var(--panel);border-radius:12px;padding:5px;margin:2px 0 10px}
.part-tabs button{flex:1;border:none;background:transparent;padding:9px 0;font-size:15px;font-weight:600;color:#333;border-radius:9px;cursor:pointer;font-family:inherit}
.part-tabs button.sel{background:var(--accent);color:#fff}
.section-sub{color:var(--dim);font-size:13px;margin:0 2px 12px}
.video-card{background:#fff;border:1px solid var(--border);border-radius:14px;padding:14px 16px;margin-bottom:12px}
.video-card .v-head{font-size:15px;color:var(--dim);margin-bottom:10px}
.video-card .v-head .who{color:var(--accent);font-weight:700}
.video-card video{width:100%;border-radius:10px;background:#000;display:block}
/* part pages */
.strip-wrap{position:sticky;top:57px;z-index:30;background:#fff;padding:8px 0 6px}
.strip-arrow{position:absolute;top:50%;transform:translateY(-50%);font-size:24px;font-weight:700;line-height:1;color:var(--accent);pointer-events:none;padding-top:4px;padding-bottom:4px;opacity:.85}
.strip-arrow.right{right:0;background:linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,.82) 45%);padding-left:20px;padding-right:2px}
.strip-arrow.left{left:0;background:linear-gradient(to left, rgba(255,255,255,0), rgba(255,255,255,.82) 45%);padding-right:20px;padding-left:2px}
.strip-arrow[hidden]{display:none}
.strip{display:flex;gap:8px;overflow-x:auto;padding:2px;scrollbar-width:none}
.strip::-webkit-scrollbar{display:none}
.strip button{flex:none;width:38px;height:38px;border-radius:10px;border:1px solid var(--border);background:#fff;font-size:15px;cursor:pointer}
.strip button.sel{border:2px solid var(--accent);color:var(--accent);font-weight:700}
.page-tools{display:flex;justify-content:flex-end;margin:6px 0 10px}
.toggle-btn{border:1px solid var(--border);background:#fff;border-radius:999px;padding:7px 14px;font-size:13px;cursor:pointer}
.item{background:#fff;border:1px solid var(--border);border-radius:14px;padding:16px;margin-bottom:14px;scroll-margin-top:124px}
.item.flash{animation:flash 1.6s}
@keyframes flash{0%,60%{box-shadow:0 0 0 3px var(--accent)}100%{box-shadow:none}}
.item .q-head{display:flex;align-items:flex-start;gap:8px}
.item .q-num{flex:none;width:26px;height:26px;border-radius:50%;background:var(--accent);color:#fff;font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center;margin-top:1px}
.item .q-text{font-size:16px;font-weight:600;line-height:1.5;flex:1}
.item .title-text{font-size:17px;font-weight:700;line-height:1.4;flex:1}
.item .title-text .zt{color:var(--accent);font-weight:700;font-size:15px;margin-left:6px}
.roles{color:var(--dim);font-size:13px;margin:2px 0 6px 34px}
.justify{text-align:justify;hyphens:auto}
.passage{text-align:justify;hyphens:auto;font-size:15.5px;line-height:1.75;margin:10px 0 0 34px;color:#1a1a1a}
.qsub{margin:12px 0 0 34px}
.qsub .q-text{font-size:15px}
.hint{background:var(--hint);border-radius:10px;padding:10px 12px;font-size:14px;line-height:1.65;color:#333;margin:10px 0 0 34px;white-space:pre-wrap}
.note{font-size:12.5px;color:var(--dim2);margin:10px 0 0 34px;line-height:1.6}
.play-mini{flex:none;width:34px;height:34px;border-radius:50%;border:1px solid var(--accent);color:var(--accent);background:#fff;font-size:14px;cursor:pointer}
.play-mini.playing{background:var(--accent);color:#fff}
.tts-row{display:flex;gap:10px;margin:12px 0 0 34px}
.tts-btn{border:1px solid var(--accent);color:var(--accent);background:#fff;border-radius:999px;padding:8px 16px;font-size:14px;cursor:pointer}
.tts-btn.playing{background:var(--accent);color:#fff}
.chart-img{width:100%;border:1px solid var(--border);border-radius:10px;margin-top:12px;cursor:zoom-in;display:block}
.zoom-hint{font-size:12px;color:var(--dim2);margin-top:6px;text-align:center}
.answer-area{margin:14px 0 0 34px}
.answer-area label{font-size:13px;color:var(--dim2);display:block;margin-bottom:6px}
.answer-area textarea{width:100%;min-height:74px;border:1px solid var(--border);border-radius:10px;padding:10px;font-size:14.5px;line-height:1.6;font-family:inherit;resize:vertical}
.btn-row{display:flex;gap:8px;align-items:center;margin-top:8px;flex-wrap:wrap}
.btn{border:1px solid var(--border);background:#fff;border-radius:999px;padding:7px 16px;font-size:13.5px;cursor:pointer}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
.btn.danger{color:#c00}
.btn[data-act="rerecord"]{border-color:#007AFF;color:#007AFF}
body.playing [data-act="start"],body.playing [data-act="rerecord"]{opacity:.4;pointer-events:none}
body.recording [data-play]{opacity:.4;pointer-events:none}
.save-state{font-size:12.5px;color:var(--dim2)}
.rec-block{margin:14px 0 0 34px;border-top:1px dashed var(--border);padding-top:12px}
.rec-block .rec-title{font-size:13.5px;font-weight:600;margin-bottom:8px}
.score-box{margin-top:12px;border-top:1px dashed var(--border);padding-top:12px}
.btn-score{display:block;width:100%;background:#FFEDE8;color:var(--accent);border:1.5px solid rgba(255,50,0,.5);border-radius:999px;padding:13px 20px;font-size:16.5px;font-weight:700;cursor:pointer;font-family:inherit}
.score-row{display:flex;gap:10px}
.score-chip{flex:1;background:var(--panel);border-radius:10px;padding:8px 4px 7px;text-align:center}
.score-chip .sc-v{font-size:22px;font-weight:800;color:var(--accent);line-height:1.15}
.score-chip .sc-l{font-size:12px;color:var(--dim)}
.score-meta{font-size:12.5px;color:var(--dim);margin-top:8px}
.score-missed{font-size:15.5px;margin-top:6px;line-height:1.65;color:var(--accent)}
.score-fb{font-size:15.5px;line-height:1.65;margin-top:6px}
.rec-block audio{width:100%;margin-top:8px}
.rec-dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:#e00;margin-right:6px;animation:blink 1s infinite}
.rec-live{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:8px}
.rec-live .btn-row{margin-top:0}
.rec-wave{width:168px;height:40px;flex:none}
@keyframes blink{50%{opacity:.2}}
/* zoom overlay */
.zoom-overlay{position:fixed;inset:0;background:rgba(10,10,10,.94);z-index:100;display:flex;flex-direction:column}
.zoom-overlay[hidden]{display:none}
.zoom-bar{display:flex;justify-content:space-between;align-items:center;color:#ccc;font-size:13px;padding:12px 16px}
.zoom-bar button{border:1px solid #666;background:transparent;color:#fff;border-radius:999px;padding:6px 16px;cursor:pointer}
.zoom-stage{flex:1;overflow:hidden;display:flex;align-items:center;justify-content:center;touch-action:none}
.zoom-stage img{max-width:100%;max-height:100%;user-select:none;-webkit-user-drag:none;cursor:grab}
@media (max-width:560px){ .passage,.hint,.note,.qsub,.answer-area,.rec-block,.tts-row{margin-left:0} .roles{margin-left:0} }
#langSel{flex:none;margin-left:auto;border:1px solid var(--border);background:#fff;border-radius:999px;padding:3px 7px;font-size:12px;color:var(--ink);font-family:inherit}
#langLinks{flex:none;margin-left:auto;display:flex;gap:7px;align-items:center;font-size:13.5px}
#langLinks[hidden]{display:none}
#langLinks button{background:none;border:none;font:inherit;color:var(--dim);cursor:pointer;padding:2px 1px}
#langLinks button.on{color:var(--ink);font-weight:700}
#langLinks span{color:var(--border)}
.top-tabs{flex:1;display:flex;background:var(--panel);border-radius:999px;padding:3px;gap:2px}
.top-tabs[hidden]{display:none}
.top-tabs button{flex:1;border:none;background:transparent;border-radius:999px;padding:6px 0;font-size:14px;font-weight:600;color:var(--ink);cursor:pointer;font-family:inherit}
.top-tabs button.sel{background:var(--accent);color:#fff}
.part-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.part-head h2{min-width:0}
.part-head .toggle-btn{flex:none}
#siteFooter{display:none}
body.home #siteFooter{display:block;max-width:760px;margin:6px auto 0;padding:16px 4px 30px;border-top:1px solid var(--border);color:var(--dim);font-size:13.5px;line-height:1.7}
body.home main{padding-bottom:10px}
body.home #siteFooter h2{font-size:15px;color:var(--ink);margin:0 0 6px}
body.home #siteFooter p{margin:0 0 8px}
body.home #siteFooter .sf-en{font-size:12.5px}
body.home #siteFooter .sf-copy{font-size:12px;margin-top:12px;text-align:center}
@media (min-width:768px){
  body.home #app{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}
  body.home #app>*{margin-bottom:0}
  body.home #app .brand,body.home #app .search-wrap,body.home #app .section-title,body.home #app .section-sub{grid-column:1 / -1}
  body.home #app .section-title{margin-top:10px}
}
body.home #siteFooter .sf-links a{color:var(--accent);text-decoration:none;font-weight:600}

/* ===== 桌面端（宽屏+鼠标）：宽栏 + 左侧题号栏；手机与 iPad 不受影响 ===== */
@media (min-width:700px) and (min-height:500px){
  #brandLogoDesk{display:block;height:38px;margin-right:2px}
  body.home #topTitle .brand-script{display:none}
  main{max-width:1240px}
  #topbar .top-inner{max-width:1240px}
  body.home #siteFooter{max-width:1240px}
  body:not(.home) #app{display:grid;grid-template-columns:230px minmax(0,1fr);column-gap:22px;align-items:start}
  body:not(.home) #app .part-head,body:not(.home) #app .section-sub{grid-column:1/-1}
  body:not(.home) #app .strip-wrap{grid-column:1;position:sticky;top:76px;margin-top:2px}
  body:not(.home) #app .strip{flex-wrap:wrap;overflow:visible}
  body:not(.home) #app .strip-arrow{display:none}
  body:not(.home) #app .item{grid-column:2;min-width:0}
}

/* ===== 桌面端毛玻璃质感（仅电脑端；颜色仍为朗思红黑暖白） ===== */
@media (min-width:700px) and (min-height:500px){
  body,body.home{background:#F7F3EF;background-image:radial-gradient(820px 540px at 10% -60px,rgba(255,50,0,.24),rgba(255,50,0,0) 64%),radial-gradient(900px 620px at 94% 8%,rgba(255,138,61,.20),rgba(255,138,61,0) 64%),radial-gradient(760px 560px at -6% 88%,rgba(255,176,102,.16),rgba(255,176,102,0) 62%),radial-gradient(1080px 780px at 55% 115%,rgba(23,26,38,.09),rgba(23,26,38,0) 62%),linear-gradient(135deg,#FDF1EA 0%,#F7F3EF 46%,#FCF3E4 100%);background-attachment:fixed}
  #topbar{background:rgba(255,255,255,.46);backdrop-filter:blur(22px) saturate(1.75);-webkit-backdrop-filter:blur(22px) saturate(1.75)}
  .brand-card,.search-card,.part-card,.vid-card,.item,body:not(.home) #app .strip-wrap{background:rgba(255,255,255,.30);backdrop-filter:blur(24px) saturate(1.75);-webkit-backdrop-filter:blur(24px) saturate(1.75);border:1px solid rgba(255,255,255,.7);border-radius:24px;box-shadow:0 14px 34px rgba(74,44,30,.10),inset 0 1px 0 rgba(255,255,255,.75)}
  body:not(.home) #app .strip-wrap{padding:10px}
  .strip button{background:rgba(255,255,255,.55)}
  .strip button.cur{background:var(--accent)}
}

#brandLogoDesk{cursor:pointer}
#topTitle .brand-script{cursor:pointer}

/* ===== 桌面端主页背景缓慢流动（仅主页、仅电脑端） ===== */
@keyframes bgDrift{
  from{background-position:0% 0%,100% 0%,0% 100%,50% 100%,0% 0%;background-size:110% 110%,110% 110%,110% 110%,110% 110%,110% 110%;filter:hue-rotate(-8deg) saturate(1)}
  to{background-position:26% 18%,72% 20%,22% 80%,28% 86%,0% 0%;background-size:156% 156%,156% 156%,156% 156%,156% 156%,156% 156%;filter:hue-rotate(18deg) saturate(1.22)}
}
@media (min-width:700px) and (min-height:500px){
  body{background:#F7F3EF}
  body::before{content:"";position:fixed;inset:-6%;z-index:-1;pointer-events:none;background-image:radial-gradient(820px 540px at 10% -60px,rgba(255,50,0,.24),rgba(255,50,0,0) 64%),radial-gradient(900px 620px at 94% 8%,rgba(255,138,61,.20),rgba(255,138,61,0) 64%),radial-gradient(760px 560px at -6% 88%,rgba(255,176,102,.16),rgba(255,176,102,0) 62%),radial-gradient(1080px 780px at 55% 115%,rgba(23,26,38,.09),rgba(23,26,38,0) 62%),linear-gradient(135deg,#FDF1EA 0%,#F7F3EF 46%,#FCF3E4 100%);animation:bgDrift 1s ease-in-out infinite alternate}
  body:not(.home)::before{animation-duration:9s}
}

/* 主页卡片玻璃补正（类名对齐：brand / search-wrap / video-card） */
@media (min-width:700px) and (min-height:500px){
  .brand,.search-wrap,.video-card{background:rgba(255,255,255,.30);backdrop-filter:blur(24px) saturate(1.75);-webkit-backdrop-filter:blur(24px) saturate(1.75);border:1px solid rgba(255,255,255,.7);border-radius:24px;box-shadow:0 14px 34px rgba(74,44,30,.10),inset 0 1px 0 rgba(255,255,255,.75)}
}


/* 宽屏（含 iPad）：搜索框与结果也玻璃化 */
@media (min-width:700px) and (min-height:500px){
  .search-wrap input{background:rgba(255,240,231,.38);backdrop-filter:blur(14px) saturate(1.6);-webkit-backdrop-filter:blur(14px) saturate(1.6);border-color:rgba(255,255,255,.7);box-shadow:inset 0 1px 4px rgba(120,60,30,.08)}
  .search-hit{background:rgba(255,255,255,.45)}
}


/* 宽屏（含 iPad）：内容页内层框与按钮一并透明化 */
@media (min-width:700px) and (min-height:500px){
  .btn,.toggle-btn{background:rgba(255,255,255,.36)}
  .hint{background:rgba(146,96,58,.12);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.45)}
  .answer-area textarea{background:rgba(255,255,255,.30)}
  .score-chip{background:rgba(255,255,255,.34)}
  .strip button{background:rgba(255,255,255,.38)}
  .search-hit{background:rgba(255,255,255,.36)}
}

#topbar #ansToggle{flex:none;white-space:nowrap}
/* 宽屏（含 iPad）：隐藏答案离语言切换远一点 */
@media (min-width:700px) and (min-height:500px){
  #topbar #ansToggle{margin-left:22px}
}
/* 窄屏内容页：顶栏可换行，隐藏答案靠右不挤 */
@media (max-width:699px){
  body:not(.home) .top-inner{flex-wrap:wrap}
  body:not(.home) #ansToggle{margin-left:auto}
}



/* 宽屏：鼠标悬停时卡片透明度变化 */
@media (min-width:700px) and (min-height:500px){
  .brand,.search-wrap,.part-card,.video-card,.item,body:not(.home) #app .strip-wrap{transition:background-color .25s ease}
  .brand:hover,.search-wrap:hover,.part-card:hover,.video-card:hover,.item:hover,body:not(.home) #app .strip-wrap:hover{background-color:rgba(255,255,255,.50)}
}

/* 宽屏（电脑/iPad）：内容页正文区域红色用珊瑚红，顶部 Part 1-4 选择保持原红；手机不动 */
@media (min-width:700px) and (min-height:500px){
  body:not(.home) #app{--accent:#F06A55}
}


/* ===== 白天 / 黑夜模式 ===== */
#themeBtn{display:none;flex:none;background:none;border:1px solid var(--border);border-radius:999px;padding:3px 10px;font-size:13px;cursor:pointer;font-family:inherit;color:var(--ink)}
@media (max-width:699px){ body.home #themeBtn{display:inline-block} }
@media (min-width:700px) and (min-height:500px){ #themeBtn{display:inline-block} }
body.dark{--ink:#F3EEE8;--dim:#B9AFA3;--dim2:#9A9084;--border:rgba(255,255,255,.20);--panel:rgba(255,255,255,.10);--page:#2A2320;--hint:rgba(146,96,58,.28);background:#2A2320;color:var(--ink)}
body.dark #topbar{background:rgba(30,25,21,.85)}
body.dark .brand,body.dark .search-wrap,body.dark .part-card,body.dark .video-card,body.dark .item{background:#37302A}
body.dark .search-wrap input,body.dark .answer-area textarea{background:rgba(255,255,255,.08);color:var(--ink)}
body.dark .btn,body.dark .toggle-btn{background:rgba(255,255,255,.10);color:var(--ink)}
body.dark .strip button{background:rgba(255,255,255,.10);color:var(--ink)}
body.dark .hint{color:#EFE7DC}
body.dark .score-chip{background:rgba(255,255,255,.10)}
body.dark .search-hit{background:#37302A}
@media (min-width:700px) and (min-height:500px){
  body.dark{background:#2A2320}
  body.dark::before{background-image:radial-gradient(820px 540px at 10% -60px,rgba(255,50,0,.34),rgba(255,50,0,0) 64%),radial-gradient(900px 620px at 94% 8%,rgba(255,138,61,.26),rgba(255,138,61,0) 64%),radial-gradient(760px 560px at -6% 88%,rgba(255,176,102,.20),rgba(255,176,102,0) 62%),radial-gradient(1080px 780px at 55% 115%,rgba(0,0,0,.25),rgba(0,0,0,0) 62%),linear-gradient(135deg,#2E2721 0%,#2A2320 46%,#342C26 100%)}
  body.dark .brand,body.dark .search-wrap,body.dark .part-card,body.dark .video-card,body.dark .item,body.dark:not(.home) #app .strip-wrap{background:rgba(56,47,40,.48)}
  body.dark .brand:hover,body.dark .search-wrap:hover,body.dark .part-card:hover,body.dark .video-card:hover,body.dark .item:hover,body.dark:not(.home) #app .strip-wrap:hover{background-color:rgba(56,47,40,.66)}
  body.dark #topbar{background:rgba(30,25,21,.55)}
  body.dark .btn,body.dark .toggle-btn,body.dark .strip button,body.dark .answer-area textarea{background:rgba(255,255,255,.10)}
  body.dark .search-wrap input{background:rgba(255,240,231,.12)}
}

/* 黑夜模式：正文文字转白 */
body.dark .passage{color:#F3EEE8}
body.dark .search-hit .snip{color:#D8D0C6}
body.dark .part-tabs button{color:#EFE9E1}

/* 黑夜模式：搜索框文字更白 */
body.dark .search-wrap input{color:#fff}
body.dark .search-wrap input::placeholder{color:rgba(255,255,255,.88);opacity:1}

/* 黑夜模式补漏：题号条 / 播放钮 / 返回钮 / AI 评分钮 */
body.dark .strip-wrap{background:#2A2320}
body.dark .icon-btn,body.dark .play-mini,body.dark .tts-btn{background:rgba(255,255,255,.10);color:var(--ink)}
body.dark .play-mini,body.dark .tts-btn{color:var(--accent)}
body.dark .btn-score{background:rgba(255,50,0,.16)}

/* 黑夜模式：题号条两侧箭头渐变改暗 */
body.dark .strip-arrow.right{background:linear-gradient(to right, rgba(42,35,32,0), rgba(42,35,32,.88) 45%)}
body.dark .strip-arrow.left{background:linear-gradient(to left, rgba(42,35,32,0), rgba(42,35,32,.88) 45%)}

/* 宽屏白天模式：logo 旁返回键配色（玻璃底＋品牌红箭头） */
@media (min-width:700px) and (min-height:500px){
  body:not(.dark):not(.home) #backBtn{background:rgba(255,255,255,.45);color:var(--accent);border-color:rgba(255,255,255,.7);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
  body:not(.dark):not(.home) #backBtn:hover{background:rgba(255,255,255,.65)}
}

/* ===== AI 模拟考试（虚拟考官） ===== */
.exam-card{border:1.5px solid rgba(255,50,0,.45)}
.exam-wrap{max-width:640px;margin:0 auto}
.avatar{width:132px;margin:6px auto 2px;text-align:center}
.avatar svg{width:132px;height:132px;display:block}
.av-bg{fill:rgba(255,50,0,.10)}
.av-suit{fill:#2E3A46}.av-shirt{fill:#fff}.av-tie{fill:var(--accent)}
.av-skin{fill:#F3CBA7}.av-hair{fill:#3A2E28}
.av-brow{fill:none;stroke:#3A2E28;stroke-width:2.6;stroke-linecap:round}
.av-eye{fill:#26221F}.av-nose{fill:none;stroke:#D9A878;stroke-width:2.4;stroke-linecap:round}
.av-mouth{fill:#8A4B3A;transform-box:fill-box;transform-origin:center}
.av-eyes{transform-box:fill-box;transform-origin:center;animation:avBlink 4.8s infinite}
@keyframes avBlink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.08)}}
.av-speaking .av-mouth{animation:avTalk .26s ease-in-out infinite alternate}
@keyframes avTalk{from{transform:scaleY(.45)}to{transform:scaleY(1.9)}}
.av-speaking svg{animation:avBob 1.1s ease-in-out infinite alternate}
@keyframes avBob{from{transform:translateY(0)}to{transform:translateY(2.5px)}}
.av-listening .av-bg{stroke:var(--accent);stroke-width:2.5;animation:avPulse 1.4s ease-in-out infinite}
@keyframes avPulse{0%,100%{stroke-opacity:.25}50%{stroke-opacity:.9}}
.av-thinking .av-eyes{animation:avThink 1.1s ease-in-out infinite alternate}
@keyframes avThink{from{transform:translateX(-3px)}to{transform:translateX(3px)}}
.av-name{font-size:13px;color:var(--dim);margin-top:2px}
.ex-status{text-align:center;font-size:15px;font-weight:600;margin:8px 0 2px;min-height:22px}
.ex-timer{text-align:center;font-size:15px;color:var(--accent);font-weight:700;min-height:22px}
.ex-main{margin-top:6px}
.ex-part-title{font-size:21px;font-weight:800;text-align:center;margin:14px 0 10px}
.ex-intro{font-size:15px;line-height:1.75}
.ex-name{width:100%;box-sizing:border-box;border:1px solid var(--border);border-radius:12px;padding:12px 14px;font-size:16px;font-family:inherit;background:var(--panel);color:var(--ink);margin:8px 0}
.ex-sub{font-size:13.5px;color:var(--dim);text-align:center;margin-top:8px}
.ex-warn{color:var(--accent);font-weight:600;text-align:center}
.ex-q{font-size:19px;font-weight:700;line-height:1.55;text-align:center;margin:16px 4px 4px}
.ex-passage{text-align:justify;font-size:16.5px;line-height:1.85;background:rgba(127,127,127,.07);border:1px solid var(--border);border-radius:14px;padding:16px 18px;margin-top:10px}
.ex-chart{width:100%;border-radius:12px;border:1px solid var(--border);margin-top:8px}
.ex-scen{background:rgba(127,127,127,.07);border:1px solid var(--border);border-radius:14px;padding:14px 16px;font-size:15.5px;line-height:1.7;margin-top:10px}
.ex-roles{font-weight:700;color:var(--accent);margin-bottom:6px}
.ex-chat{margin-top:12px;display:flex;flex-direction:column;gap:8px;max-height:300px;overflow-y:auto;padding:2px}
.bubble{max-width:85%;border-radius:14px;padding:9px 13px;font-size:15px;line-height:1.6}
.bubble .b-who{display:block;font-size:11.5px;color:var(--dim);margin-bottom:2px}
.b-ex{align-self:flex-start;background:rgba(255,50,0,.09);border:1px solid rgba(255,50,0,.25)}
.b-me{align-self:flex-end;background:rgba(127,127,127,.10);border:1px solid var(--border)}
.ex-actions{text-align:center;margin:16px 0 8px;display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.ex-actions .btn{padding:11px 26px;font-size:16px}
.ex-primary{background:var(--accent);color:#fff;border-color:var(--accent);font-weight:700}
.ex-done{background:var(--accent);color:#fff;border-color:var(--accent);font-weight:700}
.rep-wrap{max-width:640px;margin:0 auto}
.rep-head{display:flex;align-items:baseline;gap:14px;justify-content:center;margin-top:8px}
.rep-score{font-size:52px;font-weight:800;color:var(--accent);line-height:1}
.rep-score span{font-size:18px;color:var(--dim)}
.rep-cefr{font-size:22px;font-weight:800;border:2px solid var(--accent);color:var(--accent);border-radius:999px;padding:3px 16px}
.rep-sub{text-align:center;color:var(--dim);font-size:14px;margin:6px 0 4px}
.rep-sec{font-weight:800;font-size:16px;margin:20px 0 8px}
.rep-row{display:flex;align-items:center;gap:10px;margin:7px 0;font-size:14px}
.rep-k{flex:0 0 44%}
.rep-bar{flex:1;height:9px;border-radius:99px;background:rgba(127,127,127,.18);overflow:hidden}
.rep-bar i{display:block;height:100%;background:var(--accent);border-radius:99px}
.rep-v{flex:0 0 44px;text-align:right;font-weight:700}
.rep-pf{background:rgba(127,127,127,.06);border:1px solid var(--border);border-radius:12px;padding:10px 14px;margin:8px 0}
.rep-pf p{margin:4px 0 0;font-size:14.5px;line-height:1.7}
.rep-p{font-size:15px;line-height:1.8}
.rep-ul{margin:4px 0;padding-left:20px;font-size:14.5px;line-height:1.75}
.rep-det{margin-top:18px}
.rep-det summary{cursor:pointer;font-weight:700}
.rep-tr{border-top:1px solid var(--border);padding:8px 0;font-size:14px}
.rep-tr p{margin:3px 0 0;line-height:1.65}

/* ===== 模考 v2：真实考试客户端布局 ===== */
.exclient{background:#fff;border:1px solid var(--border);border-radius:18px;padding:16px 18px 10px;max-width:880px;margin:0 auto}
body.dark .exclient{background:#241E19}
.exc-top{display:flex;align-items:center;gap:14px;border-bottom:1px solid var(--border);padding-bottom:10px}
.exc-brand{font-size:19px;font-weight:600;color:#111}
.exc-brand b{color:var(--accent);font-weight:600}
body.dark .exc-brand{color:#F3EEE8}
.exc-acad{font-size:12.5px;color:var(--dim);font-weight:500}
.exc-prog{font-size:13.5px;font-weight:700;color:var(--accent)}
.exc-timer{margin-left:auto;font-size:15px;font-weight:800;color:var(--accent);min-width:64px;text-align:right}
.exc-body{display:flex;gap:16px;margin-top:14px;align-items:flex-start}
.exc-main{flex:1;min-height:320px;min-width:0}
.exc-video{flex:none;width:230px;border:1px solid var(--border);border-radius:14px;overflow:hidden;background:rgba(255,50,0,.05)}
.exc-video .avatar{width:100%;margin:0}
.exc-video .avatar svg{width:100%;height:auto;display:block}
.exc-vname{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--dim);padding:6px 10px;background:rgba(127,127,127,.07)}
.exc-dot{width:8px;height:8px;border-radius:50%;background:#22c55e;flex:none}
.exc-ph{text-align:center;padding:52px 10px 30px}
.exc-ph-logo{font-size:40px;font-weight:600;color:#111;letter-spacing:-.5px}
.exc-ph-logo span{color:var(--accent)}
body.dark .exc-ph-logo{color:#F3EEE8}
.exc-ph-part{margin-top:14px;font-size:17px;font-weight:700}
.exc-ph-note{margin-top:6px;font-size:13.5px;color:var(--dim)}
@media (max-width:640px){
  .exc-body{flex-direction:column;gap:10px}
  .exc-video{order:-1;width:148px;align-self:flex-end}
  .exc-main{min-height:0;width:100%}
  .exc-ph{padding:30px 6px 18px}
  .exc-ph-logo{font-size:27px}
  .exclient{padding:12px 12px 8px}
  .ex-passage{font-size:16px;line-height:1.8;padding:14px 15px}
}

/* 模考页在宽屏网格里占满整行 */
@media (min-width:700px) and (min-height:500px){
  .exam-wrap,.exclient{grid-column:1/-1}
}

/* 录音声纹条 */
.ex-wave{max-width:640px;margin:8px auto 0;background:rgba(127,127,127,.07);border:1px solid var(--border);border-radius:12px;padding:6px 8px}
.ex-wave canvas{width:100%;height:52px;display:block}

/* Part 2 情景卡（题库原文） */
.ex-scen{max-width:560px;margin:26px auto 0;text-align:left;background:rgba(127,127,127,.06);border:1px solid var(--border);border-radius:16px;padding:20px 22px}
.ex-scen-tag{font-size:12.5px;font-weight:800;color:var(--accent);letter-spacing:.06em}
.ex-scen-text{font-size:17px;line-height:1.65;margin-top:8px}
.ex-scen-roles{margin-top:12px;font-size:13.5px;color:var(--dim)}

/* 真人考官视频 */
.avatar .av-vid{width:132px;height:132px;border-radius:50%;object-fit:cover;object-position:center 20%;display:block;margin:0 auto;background:#E8E2DA}
.exc-video .av-vid{width:100%;height:196px;border-radius:0;object-fit:cover;object-position:center 18%;margin:0}
@media (max-width:640px){ .exc-video .av-vid{height:118px} }

/* 示范对话（Part 2） */
.sample-wrap{margin:10px 0 0 34px}
.sample-btn{background:#fff;border:1.5px solid #c9c9c9;border-radius:999px;padding:7px 16px;font-size:14px;cursor:pointer;color:#222}
.sample-panel{border:1.5px solid #444;border-radius:6px;padding:14px 16px;margin-top:10px;background:#fff}
.sample-panel p{margin:0 0 10px;font-size:15px;line-height:1.65;color:#333}
.sample-panel p:last-child{margin-bottom:0}
.sample-panel b{color:#111}
body.dark .sample-btn{background:#2e2823;color:#f2ece6;border-color:#6b5f55}
body.dark .sample-panel{background:#2e2823;border-color:#8a7d71}
body.dark .sample-panel p{color:#e8e2da}
body.dark .sample-panel b{color:#fff}
@media (max-width:560px){ .sample-wrap{margin-left:0} }