/* ===========================================================
   托福全科题库 · Design System
   paper / ink / deep teal / copper
   =========================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

:root{
  /* 面：向考试界面的冷中性靠拢（去掉暖米调） */
  --paper:#F4F5F5;
  --paper-2:#ECEEEE;
  --surface:#FFFFFF;
  --ink:#1A1A1A;
  --ink-2:#494D4D;
  --ink-3:#878C8C;
  --line:#E2E4E4;
  --line-2:#CBD0D0;

  /* 主色：TOEFL 考试界面青绿 */
  --brand:#066A6E;
  --brand-2:#077F83;
  --brand-soft:#E6F0F0;
  --brand-ring:rgba(6,106,110,.16);

  --copper:#8A6A3C;
  --amber:#B0761E;
  --danger:#B4341F;
  --ok:#1D7A4C;

  /* 圆角收紧：考试界面是紧凑的，不是圆润卡片 */
  --r-sm:6px;
  --r:8px;
  --r-lg:10px;

  /* 字体：Helvetica/Arial 打头，中文回落系统黑体 */
  --sans:"Helvetica Neue",Helvetica,Arial,-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --display:"Helvetica Neue",Helvetica,Arial,-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
  --num:"Helvetica Neue",Helvetica,Arial,-apple-system,sans-serif;

  --shadow-s:0 1px 1px rgba(0,0,0,.035);
  --shadow-m:0 2px 7px -3px rgba(0,0,0,.10);
  --shadow-l:0 12px 30px -18px rgba(0,0,0,.22);
}

html,body{ height:100%; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:15px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body::before{
  content:"";
  position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(1200px 600px at 12% -10%, rgba(18,115,109,.07), transparent 60%),
    radial-gradient(900px 520px at 100% 0%, rgba(176,104,60,.06), transparent 55%);
}
#app{ position:relative; z-index:1; }

a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; cursor:pointer; border:0; background:none; }
input,textarea{ font:inherit; color:inherit; }
::selection{ background:rgba(18,115,109,.16); }

.wrap{ width:100%; max-width:1180px; margin:0 auto; padding:0 28px; }
.mono{ font-family:var(--mono); font-variant-numeric:tabular-nums; }

/* ---------- top nav ---------- */
.nav{
  position:sticky; top:0; z-index:40;
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  background:rgba(247,245,240,.82);
  border-bottom:1px solid var(--line);
}
.nav-in{
  height:66px; display:flex; align-items:center; gap:18px;
}
.brand{ display:flex; align-items:center; gap:11px; }
.brand-mark{ width:30px; height:30px; flex:0 0 auto; }
.brand-name{ font-weight:650; letter-spacing:-.01em; font-size:15.5px; }
.brand-sub{
  font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-3); font-weight:600; margin-top:-3px;
}
.nav-links{ display:flex; gap:2px; margin-left:auto; align-items:center; }
.nav-link{
  padding:7px 12px; border-radius:999px; font-size:13.5px; color:var(--ink-2);
  transition:.18s; white-space:nowrap;
}
.nav-link:hover{ background:var(--paper-2); color:var(--ink); }
.nav-link.on{ background:var(--brand); color:#fff; }
.nav-meta{
  font-size:11.5px; color:var(--ink-3); padding-left:14px; margin-left:6px;
  border-left:1px solid var(--line-2); white-space:nowrap;
}

/* ---------- home hero ---------- */
.hero{ padding:44px 0 24px; }
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--brand); font-weight:650;
  border:1px solid rgba(6,106,110,.22); background:var(--brand-soft);
  padding:5px 11px; border-radius:999px;
}
.hero h1{
  font-family:var(--display);
  font-size:clamp(32px,4.2vw,52px);
  line-height:1.06; letter-spacing:-.035em; font-weight:600;
  margin:18px 0 0; max-width:15em;
}
.hero h1 em{ font-style:normal; color:var(--brand); }

/* ---------- subject cards ---------- */
.section-head{
  display:flex; align-items:baseline; gap:14px; margin:26px 0 16px;
}
.section-head h2{
  font-size:13px; letter-spacing:.16em; text-transform:uppercase;
  font-weight:700; color:var(--ink-3); margin:0;
}
.section-head .rule{ flex:1; height:1px; background:var(--line); }

.grid-sub{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.sub-card{
  position:relative; display:block; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r-lg);
  padding:22px 24px 18px; transition:.22s cubic-bezier(.2,.7,.3,1);
  box-shadow:var(--shadow-s); overflow:hidden;
}
.sub-card::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(135deg, rgba(18,115,109,.055), transparent 42%);
  opacity:0; transition:.22s;
}
.sub-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-m); border-color:var(--line-2); }
.sub-card:hover::after{ opacity:1; }
.sub-top{ display:flex; align-items:flex-start; gap:14px; }
.sub-icon{
  width:42px; height:42px; flex:0 0 auto; border-radius:11px;
  background:var(--brand-soft); color:var(--brand);
  display:grid; place-items:center; border:1px solid rgba(6,106,110,.13);
}
.sub-title{ font-size:21px; font-weight:650; letter-spacing:-.01em; line-height:1.25; }
.sub-en{
  font-family:var(--display); font-size:10.5px; color:var(--ink-3);
  letter-spacing:.14em; text-transform:uppercase; font-weight:600; margin-top:3px;
}
.sub-arrow{
  margin-left:auto; color:var(--ink-3); transition:.22s; padding-top:4px;
}
.sub-card:hover .sub-arrow{ color:var(--brand); transform:translate(3px,-3px); }
.sub-nums{
  display:flex; gap:22px; margin-top:16px; padding-top:14px; border-top:1px dashed var(--line);
}
.sub-num .v{ font-family:var(--display); font-size:22px; line-height:1; font-variant-numeric:tabular-nums; font-weight:600; letter-spacing:-.03em; }
.sub-num .k{ font-size:11px; color:var(--ink-3); margin-top:5px; letter-spacing:.06em; }
.pills{ display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; }

/* short viewports: keep all four section cards above the fold */
@media (max-height:860px){
  .hero{ padding:26px 0 14px; }
  .hero h1{ font-size:clamp(28px,3.6vw,42px); margin-top:12px; }
  .section-head{ margin:16px 0 12px; }
  .sub-card{ padding:18px 22px 14px; }
  .sub-icon{ width:38px; height:38px; }
  .sub-title{ font-size:19.5px; }
  .sub-nums{ margin-top:12px; padding-top:12px; }
}
.pill{
  font-size:11.5px; color:var(--ink-2); background:var(--paper-2);
  border:1px solid var(--line); border-radius:999px; padding:3px 9px; white-space:nowrap;
}
.pill b{ color:var(--ink); font-weight:600; font-variant-numeric:tabular-nums; }

/* ---------- footer ---------- */
.foot{
  margin:80px 0 0; padding:30px 0 48px; border-top:1px solid var(--line);
  color:var(--ink-3); font-size:12.5px; display:flex; gap:20px; flex-wrap:wrap;
  justify-content:space-between;
}

/* ---------- subject page ---------- */
.page-head{ padding:44px 0 9px; }
.crumbs{ font-size:12.5px; color:var(--ink-3); display:flex; gap:8px; align-items:center; }
.crumbs a:hover{ color:var(--brand); }
.page-title{
  display:flex; align-items:flex-end; gap:16px; flex-wrap:wrap; margin-top:14px;
}
.page-title h1{ font-family:var(--display); font-size:40px; line-height:1.08; margin:0; letter-spacing:-.035em; font-weight:600; }
.page-title .meta{ color:var(--ink-3); font-size:13px; padding-bottom:6px; }

.tabs{ display:flex; gap:8px; margin:28px 0 0; flex-wrap:wrap; }
.tab{
  display:flex; align-items:center; gap:9px; padding:10px 16px; border-radius:999px;
  border:1px solid var(--line); background:var(--surface); color:var(--ink-2);
  font-size:13.5px; transition:.18s; box-shadow:var(--shadow-s);
}
.tab:hover{ border-color:var(--line-2); color:var(--ink); }
.tab.on{ background:var(--ink); color:#fff; border-color:var(--ink); }
.tab .n{ font-size:11px; opacity:.62; font-variant-numeric:tabular-nums; }

.toolbar{
  display:flex; gap:10px; align-items:center; margin:22px 0 6px; flex-wrap:wrap;
}
.search{
  flex:1; min-width:200px; display:flex; align-items:center; gap:9px;
  background:var(--surface); border:1px solid var(--line); border-radius:10px;
  padding:0 13px; height:40px; max-width:360px;
}
.search input{ border:0; outline:0; background:none; width:100%; font-size:13.5px; }
.search svg{ color:var(--ink-3); flex:0 0 auto; }
.seg{ display:flex; background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:3px; }
.seg button{
  padding:6px 12px; border-radius:7px; font-size:12.5px; color:var(--ink-2); transition:.15s;
}
.seg button.on{ background:var(--paper-2); color:var(--ink); font-weight:600; }
.count-note{ font-size:12.5px; color:var(--ink-3); margin-left:auto; font-variant-numeric:tabular-nums; }

.list{ margin:14px 0 0; border-top:1px solid var(--line); }
.row{
  display:grid; grid-template-columns:74px 1fr auto auto; gap:18px; align-items:center;
  padding:15px 14px 15px 8px; border-bottom:1px solid var(--line);
  transition:.15s; cursor:pointer; position:relative;
}
.row:hover{ background:var(--surface); box-shadow:var(--shadow-s); }
.row:hover .row-go{ color:var(--brand); transform:translateX(2px); }
.row > *{ min-width:0; }
.row-date{ text-align:center; line-height:1.15; }
.row-date .d{ font-family:var(--display); font-size:19px; font-variant-numeric:tabular-nums; font-weight:600; letter-spacing:-.02em; }
.row-date .m{ font-size:10.5px; color:var(--ink-3); letter-spacing:.08em; }
.row-name{ font-size:14.5px; font-weight:550; letter-spacing:-.005em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.row-sub{ font-size:12px; color:var(--ink-3); margin-top:3px; display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.tag{
  font-size:10.5px; padding:1.5px 7px; border-radius:5px; letter-spacing:.04em;
  background:var(--paper-2); color:var(--ink-2); border:1px solid var(--line);
}
.tag.jj{ background:rgba(6,106,110,.08); color:var(--brand); border-color:rgba(6,106,110,.16); }
.tag.tm{ background:rgba(176,104,60,.09); color:var(--copper); border-color:rgba(176,104,60,.18); }
.row-c{ font-size:12.5px; color:var(--ink-2); white-space:nowrap; font-variant-numeric:tabular-nums; }
.row-go{ color:var(--line-2); transition:.18s; }

.more{
  display:block; width:100%; margin:18px 0 0; padding:13px; border-radius:10px;
  border:1px solid var(--line); background:var(--surface); color:var(--ink-2); font-size:13.5px;
  transition:.18s;
}
.more:hover{ border-color:var(--brand); color:var(--brand); }

/* ---------- practice runner ---------- */
.runner{ min-height:100vh; display:flex; flex-direction:column; }
.rbar{
  position:sticky; top:0; z-index:50; background:rgba(247,245,240,.9);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.rbar-in{ height:64px; display:flex; align-items:center; gap:16px; }
.icon-btn{
  width:34px; height:34px; border-radius:9px; display:grid; place-items:center;
  color:var(--ink-2); border:1px solid transparent; transition:.15s; flex:0 0 auto;
}
.icon-btn:hover{ background:var(--paper-2); border-color:var(--line); color:var(--ink); }
.rbar-title{ min-width:0; }
.rbar-title .t{ font-size:14.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:46vw; }
.rbar-title .s{ font-size:11.5px; color:var(--ink-3); margin-top:-1px; }
.rbar-right{ margin-left:auto; display:flex; align-items:center; gap:16px; }

.prog{ display:flex; align-items:center; gap:9px; font-size:12px; color:var(--ink-3); font-variant-numeric:tabular-nums; }
.prog-bar{ width:96px; height:3px; border-radius:99px; background:var(--line-2); overflow:hidden; }
.prog-bar i{ display:block; height:100%; background:var(--brand); border-radius:99px; transition:width .3s; }

/* timer ring */
.ring{ position:relative; width:56px; height:56px; flex:0 0 auto; }
.ring svg{ transform:rotate(-90deg); display:block; }
.ring .track{ stroke:var(--line-2); }
.ring .bar{ stroke:var(--brand); transition:stroke-dashoffset .28s linear, stroke .4s; }
.ring .num{ font-family:var(--num); font-variant-numeric:tabular-nums; font-family:var(--num); font-variant-numeric:tabular-nums;
  position:absolute; inset:0; display:grid; place-items:center;
  font-family:var(--mono); font-size:14px; font-weight:600; letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}
.ring.warn .bar{ stroke:var(--amber); }
.ring.warn .num{ color:var(--amber); }
.ring.crit .bar{ stroke:var(--danger); }
.ring.crit .num{ color:var(--danger); }
.ring.idle .bar{ stroke:var(--line-2); }
@keyframes pulse{ 0%,100%{opacity:1} 50%{opacity:.45} }
.ring.crit{ animation:pulse 1s ease-in-out infinite; }
.ring-hint{ font-size:10px; color:var(--ink-3); text-align:center; margin-top:-2px; letter-spacing:.05em; }

.rbody{ flex:1; padding:30px 0 90px; }

/* question card */
.qcard{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:28px 30px; box-shadow:var(--shadow-s);
}
.q-head{ display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.q-no{
  font-family:var(--mono); font-size:11.5px; font-weight:600; color:var(--brand);
  background:var(--brand-soft); border:1px solid rgba(6,106,110,.15);
  padding:2px 8px; border-radius:6px; letter-spacing:.04em;
}
.q-type{ font-size:11.5px; color:var(--ink-3); letter-spacing:.06em; text-transform:uppercase; }
.q-prompt{ font-size:16px; line-height:1.7; font-weight:500; }
.q-prompt .zh{ display:block; font-size:13px; color:var(--ink-3); font-weight:400; margin-top:6px; }

/* choices */
.choices{ display:flex; flex-direction:column; gap:9px; margin-top:20px; }
.choice{
  display:flex; gap:13px; align-items:flex-start; text-align:left;
  padding:13px 16px; border:1px solid var(--line); border-radius:11px;
  background:var(--surface); transition:.16s; width:100%;
}
.choice:hover:not(.locked){ border-color:var(--brand); background:var(--brand-soft); }
.choice .k{
  flex:0 0 auto; width:22px; height:22px; border-radius:6px; display:grid; place-items:center;
  font-size:11.5px; font-weight:700; background:var(--paper-2); color:var(--ink-2); margin-top:1px;
  font-family:var(--mono);
}
.choice .x{ font-size:14.5px; line-height:1.6; }
.choice .zh{ display:block; font-size:12.5px; color:var(--ink-3); margin-top:2px; }
.choice.pick{ border-color:var(--brand); background:var(--brand-soft); }
.choice.pick .k{ background:var(--brand); color:#fff; }
.choice.right{ border-color:rgba(29,122,76,.45); background:rgba(29,122,76,.07); }
.choice.right .k{ background:var(--ok); color:#fff; }
.choice.wrong{ border-color:rgba(180,52,31,.4); background:rgba(180,52,31,.06); }
.choice.wrong .k{ background:var(--danger); color:#fff; }
.choice.locked{ cursor:default; }
.choice:disabled{ opacity:1; }

/* verdict */
.verdict{
  margin-top:20px; border-radius:12px; padding:16px 18px; font-size:13.5px; line-height:1.7;
  border:1px solid var(--line); background:var(--paper-2);
}
.verdict.ok{ border-color:rgba(29,122,76,.3); background:rgba(29,122,76,.06); }
.verdict.no{ border-color:rgba(180,52,31,.3); background:rgba(180,52,31,.055); }
.verdict .vt{ font-weight:650; display:flex; align-items:center; gap:7px; }
.verdict.ok .vt{ color:var(--ok); }
.verdict.no .vt{ color:var(--danger); }
.verdict .exp{ margin-top:8px; color:var(--ink-2); }

/* passage */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:26px; align-items:start; }
.passage{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:26px 28px; font-size:14.5px; line-height:1.9; color:var(--ink);
  position:sticky; top:92px; max-height:calc(100vh - 120px); overflow:auto;
  box-shadow:var(--shadow-s);
}
.passage p{ margin:0 0 1em; }
.passage p:last-child{ margin-bottom:0; }
.passage h4{
  font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3);
  margin:0 0 14px; font-weight:700;
}
.passage::-webkit-scrollbar{ width:8px; }
.passage::-webkit-scrollbar-thumb{ background:var(--line-2); border-radius:99px; }

.qlist{ display:flex; flex-direction:column; gap:16px; }

/* blank-fill (reading T1) */
.wc{ min-height:calc(100vh - 156px); display:flex; flex-direction:column; justify-content:center; }
.fill-passage{ font-size:16px; line-height:1.85; max-width:820px; margin:0 auto; }
.blank{
  display:inline-block; white-space:nowrap; vertical-align:baseline;
  padding:0 2px; border-radius:5px; transition:.15s;
}
.blank.cur{ background:none; box-shadow:0 0 0 1.5px rgba(6,106,110,.3); }
.blank .fixed{ font-family:var(--mono); color:var(--ink); font-size:15px; letter-spacing:.02em; }
/* 每个待填字母一条独立短横线，横线之间留空 */
.blank input{
  width:.9em; text-align:center; border:0; outline:0; background:none;
  border-bottom:2.5px solid rgba(22,33,31,.62);
  font-family:var(--mono); font-size:16px; padding:0; margin:0 3px;
  height:1.3em; line-height:1.3em;
  border-radius:2px 2px 0 0; vertical-align:baseline; text-transform:lowercase;
  transition:.15s;
}
.blank input:focus{ border-bottom-color:var(--brand); background:none; }
.blank.ok input{ border-bottom-color:var(--ok); color:var(--ok); }
.blank.no input{ border-bottom-color:var(--danger); color:var(--danger); }
.blank .reveal{
  font-family:var(--mono); color:var(--ok); font-size:15px; margin-left:4px;
}
.blank.no .reveal{ color:var(--danger); text-decoration:line-through; }

/* empty slot placeholder */
.slot:empty::after{ content:"＿＿＿"; color:var(--ink-3); font-size:13px; font-weight:400; letter-spacing:1px; }
.qdots{ display:flex; gap:6px; justify-content:center; margin-top:22px; flex-wrap:wrap; }
.qdots i{ width:26px; height:3px; border-radius:99px; background:var(--line-2); display:block; transition:.2s; }
.qdots i.on{ background:var(--brand); }
.qdots i.ok{ background:var(--ok); }
.qdots i.no{ background:var(--danger); }

/* listening */
.audio-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:20px 22px; display:flex; align-items:center; gap:16px; box-shadow:var(--shadow-s);
}
.play-btn{
  width:48px; height:48px; border-radius:50%; background:var(--brand); color:#fff;
  display:grid; place-items:center; flex:0 0 auto; transition:.18s;
  box-shadow:0 6px 18px -8px rgba(6,106,110,.7);
}
.play-btn:hover{ background:var(--brand-2); transform:scale(1.04); }
.play-btn:disabled{ background:var(--line-2); box-shadow:none; cursor:not-allowed; }
.wave{ flex:1; }
.wave-top{ display:flex; justify-content:space-between; font-size:11.5px; color:var(--ink-3); margin-bottom:7px; font-variant-numeric:tabular-nums; }
.wave-bar{ height:5px; border-radius:99px; background:var(--paper-2); overflow:hidden; }
.wave-bar i{ display:block; height:100%; background:var(--brand); border-radius:99px; transition:width .2s linear; }

/* speaking */
.stage-vis{ display:flex; justify-content:center; margin:26px 0 6px; height:44px; align-items:center; }
.wave-anim{ display:inline-flex; gap:4px; align-items:flex-end; height:100%; }
.wave-anim i{ display:block; width:4px; border-radius:3px; background:var(--brand); animation:wv 1.05s ease-in-out infinite; }
.wave-anim i:nth-child(1){ height:12px; animation-delay:0s }
.wave-anim i:nth-child(2){ height:26px; animation-delay:.12s }
.wave-anim i:nth-child(3){ height:38px; animation-delay:.24s }
.wave-anim i:nth-child(4){ height:22px; animation-delay:.36s }
.wave-anim i:nth-child(5){ height:32px; animation-delay:.48s }
.wave-anim i:nth-child(6){ height:16px; animation-delay:.6s }
.wave-anim.rec i{ background:var(--brand-2); animation-duration:.5s; }
.wave-anim.idle i{ animation-play-state:paused; opacity:.3; }
@keyframes wv{ 0%,100%{ transform:scaleY(.4) } 50%{ transform:scaleY(1) } }
.speak-stage{
  text-align:center; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:46px 30px; box-shadow:var(--shadow-s);
}
.speak-prompt{
  font-family:var(--display); font-size:clamp(23px,3.2vw,38px); line-height:1.3;
  letter-spacing:-.028em; font-weight:600; margin:6px 0 0;
}
.speak-zh{ color:var(--ink-3); font-size:14px; margin-top:14px; }
.speak-timer{
  font-family:var(--num); font-size:64px; line-height:1; letter-spacing:-.03em;
  font-variant-numeric:tabular-nums; margin:30px 0 0;
}
.speak-timer.small{ font-size:58px; margin-top:20px; }
.speak-phase{
  display:inline-flex; align-items:center; gap:7px; font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--brand); font-weight:650; margin-bottom:4px;
}
.speak-phase.rec{ color:var(--brand); }
.dot{ width:7px; height:7px; border-radius:50%; background:currentColor; }
.speak-phase.rec .dot{ animation:pulse .9s infinite; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 18px; border-radius:8px; font-size:14px; font-weight:600; transition:.18s;
  border:1px solid var(--line); background:var(--surface); color:var(--ink);
}
.btn:hover{ border-color:var(--line-2); background:var(--paper-2); }
.btn.primary{ background:var(--brand); color:#fff; border-color:var(--brand); }
.btn.primary:hover{ background:var(--brand-2); border-color:var(--brand-2); }
.btn.ghost{ background:transparent; }
.btn.lg{ padding:13px 26px; font-size:15px; border-radius:11px; }

/* writing editor */
.editor{
  width:100%; min-height:340px; resize:vertical; border:1px solid var(--line);
  border-radius:var(--r); padding:18px 20px; font-size:15px; line-height:1.8;
  background:var(--surface); outline:0; transition:.18s;
}
.editor:focus{ border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-ring); }
.editor-foot{ display:flex; justify-content:space-between; align-items:center; margin-top:10px; font-size:12.5px; color:var(--ink-3); }

/* sentence build */
.build-sent{
  font-size:17px; line-height:2.6; background:var(--paper-2); border-radius:11px;
  padding:18px 20px; border:1px dashed var(--line-2);
}
.slot{
  display:inline-block; min-width:88px; padding:0 8px; margin:0 3px;
  border-bottom:2px solid var(--brand); text-align:center; color:var(--brand);
  font-weight:550; cursor:pointer; transition:.15s; border-radius:4px 4px 0 0;
}
.slot.filled{ background:rgba(6,106,110,.07); }
.slot.ok{ border-bottom-color:var(--ok); color:var(--ok); background:rgba(29,122,76,.07); }
.slot.no{ border-bottom-color:var(--danger); color:var(--danger); background:rgba(180,52,31,.06); text-decoration:line-through; }
.bank{ display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.token{
  padding:7px 13px; border-radius:8px; border:1px solid var(--line-2);
  background:var(--surface); font-size:14px; transition:.15s; box-shadow:var(--shadow-s);
}
.token:hover{ border-color:var(--brand); color:var(--brand); transform:translateY(-1px); }
.token.used{ opacity:.32; pointer-events:none; text-decoration:line-through; }

/* misc */
.notice{
  font-size:12.5px; color:var(--ink-2); background:var(--brand-soft);
  border:1px solid rgba(6,106,110,.15); border-radius:10px; padding:11px 14px;
  display:flex; gap:9px; align-items:flex-start; line-height:1.6;
}
.center{ text-align:center; }
.mt8{ margin-top:8px } .mt16{ margin-top:16px } .mt24{ margin-top:24px } .mt32{ margin-top:32px }
.muted{ color:var(--ink-3); }
.hr{ height:1px; background:var(--line); margin:26px 0; border:0; }

.done-card{ max-width:620px; margin:60px auto; }
.done-card h2{ font-family:var(--display); font-size:32px; font-weight:600; margin:0 0 10px; letter-spacing:-.035em; }
.done-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; margin-top:26px; }
.done-grid div{ background:var(--surface); padding:20px 16px; text-align:center; }
.done-grid .v{ font-family:var(--display); font-size:28px; line-height:1; font-variant-numeric:tabular-nums; font-weight:600; letter-spacing:-.03em; }
.done-grid .k{ font-size:11px; color:var(--ink-3); letter-spacing:.1em; text-transform:uppercase; margin-top:7px; }

.toast{
  position:fixed; left:50%; bottom:28px; transform:translate(-50%,20px); opacity:0;
  background:var(--ink); color:#fff; padding:10px 18px; border-radius:99px;
  font-size:13px; transition:.28s; pointer-events:none; z-index:99; box-shadow:var(--shadow-l);
}
.toast.on{ opacity:1; transform:translate(-50%,0); }

.skel{
  background:linear-gradient(90deg,var(--paper-2) 25%,#E4E7E7 37%,var(--paper-2) 63%);
  background-size:400% 100%; animation:sk 1.3s ease infinite; border-radius:8px;
}
@keyframes sk{ 0%{background-position:100% 50%}100%{background-position:0 50%} }

/* ---------- 骨架屏：形状与最终布局同构 ---------- */
.sk-bar, .sk-line{ display:block; border-radius:5px; flex:none; }
.sk-line{ margin-bottom:12px; }
.sk-line:last-child{ margin-bottom:0; }
.sk-right{ margin-left:auto; }
.sk-caret{ width:11px; height:11px; border-radius:3px; }
.sk-mark{ width:32px; height:32px; border-radius:50%; flex:none; }

/* 左目录 */
.sk-row{
  display:flex; align-items:center; gap:8px;
  padding:9px 8px; border-radius:8px;
}
.sk-row.set{ padding:7px 9px; }
.sk-row.set.on{ background:var(--brand-soft); }
.sk-row.item{
  margin-left:18px; padding:5px 9px 5px 12px;
  border-left:2px solid var(--line); border-radius:7px;
}

/* 主区 */
.sk-ring{ width:56px; height:56px; border-radius:50%; border:3px solid var(--paper-2); flex:none; }
.sk-ring.lg{ width:132px; height:132px; border-width:5px; }
.sk-prose{ width:100%; max-width:820px; margin:0 auto; }
.sk-gap{ height:20px; }
.sk-cols{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:26px; }
.sk-col{ display:flex; flex-direction:column; gap:18px; min-width:0; }
.sk-card{
  border:1px solid var(--line); border-radius:12px;
  padding:22px 24px; background:var(--surface);
}
.sk-hero{
  display:flex; flex-direction:column; align-items:center; gap:22px;
  padding:34px 20px 30px;
  border:1px solid var(--line); border-radius:12px; margin-bottom:18px;
}
.sk-hero-lines{ width:100%; max-width:420px; display:flex; flex-direction:column; align-items:center; }
.sk-hero-lines .sk-line{ margin-bottom:10px; }
.sk-audio{
  display:flex; align-items:center; gap:16px;
  padding:18px 22px; margin-bottom:18px;
  border:1px solid var(--line); border-radius:12px;
}
.sk-playbtn{ width:48px; height:48px; border-radius:50%; flex:none; }
.sk-audio-lines{ flex:1; min-width:0; display:flex; flex-direction:column; gap:13px; }
.sk-audio-lines .sk-line{ margin:0; }
.sk-burger{ width:36px; height:36px; border-radius:9px; display:none; }

/* 骨架卡片撑满可视区（真实阅读页的卡片是长的，太矮会显得塌） */
.sk-wb .wb-card{ min-height:calc(100dvh - 176px); display:flex; flex-direction:column; }
/* 正文按卡片剩余高度铺开，避免底部空洞 */
.sk-fill{ display:flex; flex-direction:column; flex:1; min-height:0; }
.sk-fill .sk-prose{ flex:1; display:flex; flex-direction:column; justify-content:space-between; }
.sk-fill .sk-cols{ flex:1; align-items:stretch; }
.sk-fill .sk-cols > .sk-card{ display:flex; flex-direction:column; justify-content:space-between; }
.sk-fill .sk-col{ flex:1; display:flex; flex-direction:column; justify-content:space-between; gap:18px; }

/* 首页 */
.sk-homecard{ pointer-events:none; min-height:249px; }
.sk-subicon{ width:42px; height:42px; border-radius:11px; flex:none; }
.sk-subtitle{ flex:1; min-width:0; }
.sk-eyebrow{ display:block; width:262px; height:30px; border-radius:999px; }
.sk-h1{ margin-top:22px; display:flex; flex-direction:column; gap:12px; }
.sk-h1 .sk-bar{ height:clamp(32px,4.2vw,56px); border-radius:10px; }
.sk-lead{ margin-top:20px; display:flex; flex-direction:column; gap:24px; max-width:36em; }
.sk-lead .sk-line{ height:13px; margin:0; }
.sk-stat-v{ display:block; width:64px; height:32px; border-radius:6px; }
.sk-stat-k{ display:block; width:46px; height:13px; margin-top:11px; }
.sk-home .section-head{ min-height:21px; }

@media (max-width:1100px){
  .sk-cols{ grid-template-columns:minmax(0,1fr); gap:18px; }
}
@media (max-width:900px){
  .sk-burger{ display:inline-block; }
  .sk-ring.lg{ width:104px; height:104px; }
  .sk-wb .wb-card{ min-height:calc(100dvh - 170px); }
  .sk-eyebrow{ width:200px; height:26px; }
  .sk-homecard{ min-height:0; }
}
@media (prefers-reduced-motion:reduce){
  .skel{ animation:none; background:#E9ECEC; }
}

/* responsive */
@media (max-width:900px){
  body{ overflow-x:hidden; }
  .wrap{ padding:0 18px; }
  .split{ grid-template-columns:1fr; }
  .passage{ position:static; max-height:none; }
  .grid-sub{ grid-template-columns:1fr; }
  .hero{ padding:44px 0 30px; }
  .stat{ padding:16px 22px 16px 0; margin-right:22px; }
  .row{ grid-template-columns:60px 1fr auto; }
  .row-go{ display:none; }
  .rbar-title .t{ max-width:38vw; }
  .qcard{ padding:22px 20px; }
  .speak-timer{ font-size:48px; }
  .done-grid{ grid-template-columns:1fr; }
}
@media (max-width:700px){
  .nav-in{ height:58px; gap:10px; }
  .brand-name,.brand-sub{ display:none; }
  .nav-meta{ display:none; }
  .nav-links{ gap:0; min-width:0; margin-left:auto; }
  .nav-link{ padding:6px 8px; font-size:12.5px; }
  .hero h1{ font-size:34px; }
  .hero p.lead{ font-size:15px; }
  .stats{ display:grid; grid-template-columns:1fr 1fr; }
  .stat{ padding:14px 12px 14px 0; margin:0; border-right:0; border-bottom:1px solid var(--line); }
  .stat:nth-child(odd){ border-right:1px solid var(--line); }
  .stat:nth-child(even){ padding-left:16px; }
  .stat:nth-child(n+3){ border-bottom:0; }
  .stat .v{ font-size:26px; }
  .page-head{ padding:28px 0 4px; }
  .page-title h1{ font-size:28px; }
  .tabs{ gap:6px; overflow-x:auto; padding-bottom:4px; }
  .tab{ padding:8px 12px; font-size:12.5px; white-space:nowrap; }
  .toolbar{ gap:8px; }
  .search{ max-width:none; width:100%; }
  .count-note{ margin-left:0; }
  .row{ grid-template-columns:52px 1fr auto; gap:12px; padding:13px 6px; }
  .row-date .d{ font-size:17px; }
  .row-c{ display:none; }
  .rbar-in{ height:58px; gap:10px; }
  .prog-bar{ width:56px; }
  .ring{ width:48px; height:48px; }
  .ring svg{ width:48px; height:48px; }
  .ring .num{ font-family:var(--num); font-variant-numeric:tabular-nums; font-family:var(--num); font-variant-numeric:tabular-nums; font-size:12.5px; }
  .fill-passage{ font-size:15px; }
  .speak-prompt{ font-size:22px; }
  .speak-timer.small{ font-size:44px; }
  .done-card h2{ font-size:26px; }
  .editor{ min-height:260px; }
}

/* ---------- transcript toggle ---------- */
.tr-row{ display:flex; align-items:center; gap:10px; margin-top:12px; }
.tr-btn{
  display:inline-flex; align-items:center; gap:7px; padding:6px 12px;
  border:1px solid var(--line); border-radius:999px; background:var(--surface);
  font-size:12.5px; color:var(--ink-2); transition:.16s; box-shadow:var(--shadow-s);
}
.tr-btn:hover{ border-color:var(--line-2); color:var(--ink); }
.tr-btn.on{ background:var(--brand-soft); border-color:rgba(6,106,110,.3); color:var(--brand); }
.tr-line{ display:flex; gap:10px; padding:5px 0; border-bottom:1px dashed var(--line); font-size:14px; line-height:1.65; }
.tr-line:last-child{ border-bottom:0; }
.tr-line b{ flex:0 0 34px; color:var(--brand); font-family:var(--mono); font-size:11.5px; font-weight:600; padding-top:3px; }

/* ---------- switch ---------- */
.switch{ display:inline-flex; align-items:center; gap:8px; font-size:12.5px; color:var(--ink-2); cursor:pointer; user-select:none; }
.switch input{ appearance:none; -webkit-appearance:none; width:34px; height:19px; border-radius:999px; background:var(--line-2); position:relative; outline:0; cursor:pointer; transition:.2s; margin:0; }
.switch input::after{ content:""; position:absolute; top:2px; left:2px; width:15px; height:15px; border-radius:50%; background:#fff; transition:.2s; box-shadow:0 1px 2px rgba(0,0,0,.18); }
.switch input:checked{ background:var(--brand); }
.switch input:checked::after{ transform:translateX(15px); }

/* ---------- speaking nav ---------- */
.speak-nav{ display:flex; align-items:center; justify-content:center; gap:14px; margin-top:30px; flex-wrap:wrap; }
.speak-nav .btn{ padding:9px 16px; font-size:13.5px; }
.mt12{ margin-top:12px; }

@media (max-width:700px){
  .speak-nav{ gap:8px; }
  .speak-nav .btn{ padding:8px 12px; font-size:12.5px; }
  .blank input{ margin:0 2px; }
}

/* ---------- question navigation ---------- */
.q-nav{ display:flex; align-items:center; justify-content:center; gap:12px; margin-top:24px; flex-wrap:wrap; }
.q-nav-mid{ font-size:12.5px; color:var(--ink-3); text-align:center; min-width:120px; font-variant-numeric:tabular-nums; }
.q-nav .btn{ padding:9px 16px; font-size:13.5px; }
.q-nav .btn:disabled{ opacity:.45; cursor:not-allowed; }
.btn.primary:disabled{ background:var(--line-2); border-color:var(--line-2); color:#fff; opacity:1; }
.btn:disabled{ box-shadow:none; }
@media (max-width:700px){ .q-nav{ gap:8px; } .q-nav .btn{ padding:8px 12px; font-size:12.5px; } .q-nav-mid{ min-width:90px; } }

/* ---------- review (wrong answers) ---------- */
.review{ text-align:left; max-width:760px; margin:8px auto 0; }
.rv-bar{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; border-top:1px solid var(--line); padding-top:22px; margin-top:10px; }
.rv-bar h3{ font-size:16px; font-weight:600; letter-spacing:-.01em; margin:0; }
.rv-bar .muted{ font-size:12.5px; }
.rv{ border:1px solid var(--line); border-radius:12px; background:var(--surface); padding:16px 18px; margin-top:14px; box-shadow:var(--shadow-s); }
.rv-top{ display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.rv-prompt{ font-size:14.5px; line-height:1.75; color:var(--ink); }
.rv-cmp{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:12px; }
.rv-cmp > div{ background:var(--bg); border-radius:8px; padding:9px 12px; }
.rv-cmp .k{ display:block; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); margin-bottom:3px; }
.rv-cmp .v{ font-size:13.5px; line-height:1.5; }
.rv-cmp .v.bad{ color:var(--danger); }
.rv-cmp .v.good{ color:var(--ok); font-weight:600; }
.rv-exp{ margin-top:11px; font-size:13px; line-height:1.75; color:var(--ink-2); border-left:2px solid var(--line-2); padding-left:12px; }
.rv-all{ display:inline-flex; align-items:center; gap:8px; margin-top:22px; padding:10px 16px; border-radius:999px; background:var(--ok-soft, rgba(29,122,76,.1)); color:var(--ok); font-size:13.5px; }
@media (max-width:700px){ .rv-cmp{ grid-template-columns:1fr; } }

/* ---------- writing T1: correct word under a wrong slot ---------- */
.slot .slot-fix{
  display:block; font-style:normal; font-weight:600; font-size:10.5px;
  color:var(--ok); letter-spacing:0; text-decoration:none;
  line-height:1.35; margin-top:1px; white-space:nowrap;
}
.slot.no{ text-decoration:line-through; }
.slot.no .slot-fix{ text-decoration:none; }

/* ---------- prominent correct answer ---------- */
.answer-box{
  margin-top:12px; border-radius:10px; padding:12px 14px;
  background:rgba(29,122,76,.08); border:1px solid rgba(29,122,76,.22);
}
.answer-box .k{
  display:block; font-size:10px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ok); font-weight:700; margin-bottom:5px;
}
.answer-box .v{ font-size:15px; line-height:1.65; color:var(--ink); font-weight:550; }

/* ================= subject-site layout ================= */
.site{ display:grid; grid-template-columns:276px minmax(0,1fr); height:100vh; height:100dvh; }
.scrim{ display:none; }
.rail{
  height:100vh; height:100dvh; overflow:auto; border-right:1px solid var(--line);
  background:var(--surface); display:flex; flex-direction:column;
}
.rail-top{ padding:16px 16px 12px; border-bottom:1px solid var(--line); }
.rail-brand{ display:flex; align-items:center; gap:8px; font-size:13.5px; font-weight:650; letter-spacing:-.01em; color:var(--ink); }
.rail-brand .dot{ width:7px; height:7px; border-radius:50%; background:var(--brand); }
.rail-sw{ display:flex; gap:9px; margin-top:8px; flex-wrap:nowrap; }
.rail-sw .sw{ font-size:9.5px; letter-spacing:.03em; text-transform:uppercase; color:var(--ink-3); white-space:nowrap; }
.rail-sw .sw.on{ color:var(--brand); font-weight:700; }
.rail-types{ padding:10px 10px 6px; display:flex; flex-direction:column; gap:2px; border-bottom:1px solid var(--line); }
.rail-type{ display:grid; grid-template-columns:26px 1fr auto; gap:7px; align-items:center; padding:8px 9px; border-radius:8px; font-size:12.5px; color:var(--ink-2); }
.rail-type .t{ font-family:var(--mono); font-size:10.5px; color:var(--ink-3); }
.rail-type .c{ font-size:11px; color:var(--ink-3); font-variant-numeric:tabular-nums; }
.rail-type:hover{ background:var(--paper-2); }
.rail-type.on{ background:var(--brand-soft); color:var(--brand); font-weight:600; }
.rail-type.on .t,.rail-type.on .c{ color:var(--brand); opacity:.8; }
.rail-search{ padding:10px 12px; }
.search.sm{ padding:7px 10px; }
.search.sm input{ font-size:12.5px; }
.rail-list{ flex:1; overflow:auto; padding:0 8px 14px; }
.rl-month{ margin-bottom:2px; }
.rl-mhead{ width:100%; display:grid; grid-template-columns:16px 1fr auto; gap:6px; align-items:center; padding:8px 8px; border-radius:8px; font-size:12px; color:var(--ink-2); }
.rl-mhead:hover{ background:var(--paper-2); }
.rl-mhead .mn{ text-align:left; font-weight:600; letter-spacing:.02em; }
.rl-mhead .mc{ font-size:10.5px; color:var(--ink-3); font-variant-numeric:tabular-nums; }
.rl-day{ margin-left:10px; border-left:1px solid var(--line); }
.rl-dhead{ width:100%; display:grid; grid-template-columns:26px 1fr auto 14px; gap:6px; align-items:baseline; padding:6px 8px 6px 10px; border-radius:0 8px 8px 0; font-size:12px; color:var(--ink-2); }
.rl-dhead:hover{ background:var(--paper-2); }
.rl-dhead .dd{ font-family:var(--mono); font-size:13px; font-weight:600; color:var(--ink); }
.rl-dhead .dm{ font-size:10.5px; color:var(--ink-3); text-align:left; }
.rl-dhead .dc{ font-size:10px; color:var(--ink-3); }
.rl-dhead .caret{ display:flex; align-items:center; justify-content:center; color:var(--ink-3); opacity:.7; }
.rl-day.act > .rl-dhead{ background:var(--brand-soft); color:var(--brand); }
.rl-day.act > .rl-dhead .dd{ color:var(--brand); }
.rl-sets{ padding:2px 0 6px 12px; }
.rl-set{ display:grid; grid-template-columns:16px 1fr; gap:6px; padding:5px 8px; border-radius:7px; font-size:11.5px; color:var(--ink-2); }
.rl-set .k{ color:var(--ink-3); font-family:var(--mono); font-size:10px; }
.rl-set .nm{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rl-set:hover{ background:var(--paper-2); color:var(--ink); }
.rl-set.on{ background:var(--brand); color:#fff; }
.rl-set.on .k{ color:rgba(255,255,255,.75); }
.rail-foot{ border-top:1px solid var(--line); padding:10px 16px; display:flex; justify-content:space-between; font-size:11px; color:var(--ink-3); }
.runwrap{ height:100vh; height:100dvh; overflow:auto; display:flex; flex-direction:column; min-width:0; }
.runwrap .rbody{ flex:1; }
@media (max-width:900px){
  .site{ grid-template-columns:1fr; }
  body.rail-open .scrim{ display:block; position:fixed; inset:0; background:rgba(0,0,0,.32); z-index:59; }
  .rail{
    position:fixed; left:0; top:0; width:282px; z-index:61;
    height:100dvh; transform:translateX(-101%); transition:transform .22s ease;
    box-shadow:0 12px 44px rgba(0,0,0,.22);
    touch-action:pan-y; overscroll-behavior:contain;
  }
  body.rail-open .rail{ transform:none; }
  .rail-list{ min-height:0; -webkit-overflow-scrolling:touch; touch-action:pan-y; overscroll-behavior:contain; }
}

body.rail-hidden .site{ grid-template-columns:0 minmax(0,1fr); }
body.rail-hidden .rail{ display:none; }

/* ===== mobile pass ===== */
@media (max-width:700px){
  /* 顶栏：标题与副标题各占一行、超长省略，进度条让位给倒计时环 */
  .rbar-in{ height:auto; padding:9px 0 10px; gap:8px; align-items:center; }
  .rbar-title{ flex:1; min-width:0; }
  .rbar-title .t{ font-size:13.5px; max-width:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .rbar-title .s{ font-size:10.5px; max-width:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .rbar-right{ flex:0 0 auto; }
  .prog{ display:none; }
  .ring{ width:52px; height:52px; }
  .ring svg{ width:52px; height:52px; }
  .ring .num{ font-family:var(--num); font-variant-numeric:tabular-nums; font-family:var(--num); font-variant-numeric:tabular-nums; font-size:13px; }

  /* 阅读填空正文：收字号与行距，避免一词一行 */
  .fill-passage{ font-size:15px; line-height:1.8; }
  .qcard{ padding:18px 16px; }
  .fill-passage .blank input{ margin:0 2px; height:1.55em; line-height:1.55em; }
  .blank{ padding:3px 2px; }

  /* 写作句子重组：空格变窄，一行能放下多个 */
  .sentence{ font-size:15px; line-height:2.35; }
  .slot{ min-width:44px; padding:0 5px; margin:0 2px; font-size:14px; }
  .slot:empty::after{ content:""; }
  .token{ font-size:13px; padding:8px 12px; }

  /* 导航按钮更好按 */
  .q-nav .btn{ min-height:42px; }
  .q-nav-mid{ font-size:12px; }

  /* 左栏行高加大，便于手指点 */
  .rl-mhead, .rl-dhead{ padding-top:10px; padding-bottom:10px; }
  .rl-set{ padding-top:9px; padding-bottom:9px; font-size:12px; }
  .rail-type{ padding:11px 9px; }
  .rail-brand{ font-size:14px; }

  /* 结题统计块 */
  .done-grid{ grid-template-columns:1fr; }
}
@media (max-width:390px){
  .rbar-title .t{ font-size:13px; }
  .fill-passage{ font-size:14.5px; }
  .slot{ min-width:40px; }
}

/* 口语：手机端卡片内边距与导航布局 */
@media (max-width:700px){
  .speak-stage{ padding:30px 18px; }
  .speak-timer.small{ font-size:40px; }
  .speak-nav{
    display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:22px;
    grid-template-areas:"prev next" "sw sw";
  }
  .speak-nav .btn{ width:100%; padding:11px 10px; font-size:13.5px; }
  .speak-nav #prev{ grid-area:prev; }
  .speak-nav #next{ grid-area:next; }
  .speak-nav .switch{ grid-area:sw; justify-content:center; margin-top:2px; }
  .speak-prompt{ font-size:19px; }
}

/* 超时锁定（阅读 T1） */
.blank.timeup{ opacity:.55; }
.blank.timeup input{ border-bottom-style:dashed; }

/* ===== 考试机台顶栏：实心主色条（参考 TOEFL 考试界面） ===== */
.rbar{
  background:var(--brand);
  border-bottom:1px solid rgba(0,0,0,.14);
  backdrop-filter:none; -webkit-backdrop-filter:none;
  color:#fff;
}
.rbar .rbar-title .t{ color:#fff; }
.rbar .rbar-title .s{ color:rgba(255,255,255,.72); }
.rbar .prog{ color:rgba(255,255,255,.78); }
.rbar .prog-bar{ background:rgba(255,255,255,.26); }
.rbar .prog-bar i{ background:#fff; }
.rbar .icon-btn{ color:#fff; background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.22); }
.rbar .icon-btn:hover{ background:rgba(255,255,255,.2); }
.rbar .ring .track{ stroke:rgba(255,255,255,.28); }
.rbar .ring .bar{ stroke:#fff; }
.rbar .ring .num{ color:#fff; }
.rbar .ring.warn .num{ color:#FFE08A; }
.rbar .ring.crit .num{ color:#FFC6B8; }

/* 听力：时间到的提示（不揭示答案） */
.q-type.ts-up{ color:var(--danger); font-weight:650; letter-spacing:.02em; }

/* =============================================================
   工作台布局（2026-11 重做）
   参考 realtoeflspeaking：顶栏 + 320px 目录 + 浅底白卡片
   配色沿用本站青绿主色，不改成参考站的荧光绿
   ============================================================= */
.wb{
  display:grid;
  grid-template-columns:240px minmax(0,1fr);
  grid-template-rows:62px minmax(0,1fr);
  height:100dvh;
  background:var(--paper);
}
.wb-top{
  grid-column:1/-1;
  display:flex; align-items:center; gap:16px;
  padding:0 22px;
  background:var(--surface);
  border-bottom:1px solid var(--line);
  position:relative; z-index:60;
}
.wb-burger{ display:none; }
.wb-brand{
  display:flex; flex-direction:column; align-items:flex-start; gap:1px;
  flex:0 1 auto; min-width:0; overflow:hidden;
  color:var(--ink);
}
.wb-brand .wb-title{
  display:block; max-width:100%;
  font-family:var(--display); font-size:17px; font-weight:700; letter-spacing:.2px;
  line-height:1.25; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.wb-brand .wb-sub{
  font-size:11.5px; color:var(--ink-3); line-height:1.3;
  white-space:nowrap; max-width:46vw; overflow:hidden; text-overflow:ellipsis;
}
.wb-brand .dot{
  width:9px; height:9px; border-radius:50%;
  background:var(--brand); box-shadow:0 0 0 4px var(--brand-ring);
}
.wb-pills{
  margin-left:auto; display:flex; align-items:center; gap:6px; flex-wrap:nowrap;
  min-width:0; overflow-x:auto; scrollbar-width:none;
}
.wb-pills::-webkit-scrollbar{ display:none; }
.wb-pill{
  display:inline-flex; align-items:center; gap:7px;
  height:34px; padding:0 15px; border-radius:999px;
  font-size:14px; font-weight:600; color:var(--ink-3);
  border:1px solid transparent; white-space:nowrap;
  transition:background .15s,color .15s,border-color .15s;
}
.wb-pill:hover{ background:var(--paper-2); color:var(--ink-2); }
.wb-pill.on{
  background:var(--brand); color:#fff;
  box-shadow:0 1px 3px rgba(16,24,40,.08),0 6px 20px rgba(16,24,40,.06);
}
.wb-pill .k{ opacity:.62; font-variant-numeric:tabular-nums; }

/* ---- 左目录 ---- */
.wb-side{
  background:var(--surface);
  border-right:1px solid var(--line);
  display:flex; flex-direction:column;
  min-height:0; overflow:hidden;
}
.wb-side-top{ padding:12px 12px 8px; }
.wb-side-types{ display:flex; gap:6px; padding:0 12px 10px; flex-wrap:wrap; }
.wb-type{
  flex:1 1 auto; min-width:0;
  display:flex; align-items:center; justify-content:center; gap:6px;
  height:31px; padding:0 9px; border-radius:8px;
  font-size:12.5px; font-weight:600; color:var(--ink-3);
  background:var(--paper); border:1px solid var(--line);
  white-space:nowrap; overflow:hidden;
}
.wb-type .k{ font-variant-numeric:tabular-nums; opacity:.75; }
.wb-type.on{ background:var(--brand-soft); border-color:var(--brand); color:var(--brand); }
.wb-search{
  display:flex; align-items:center; gap:8px;
  height:37px; padding:0 11px; border-radius:10px;
  background:var(--paper); border:1px solid var(--line);
  color:var(--ink-3);
}
.wb-search input{
  flex:1; min-width:0; border:0; background:none; outline:none;
  font-size:13px; color:var(--ink);
}
.wb-tree{
  flex:1; min-height:0; overflow-y:auto;
  padding:4px 8px 16px;
  -webkit-overflow-scrolling:touch; overscroll-behavior:contain; touch-action:pan-y;
}
.wb-day{ margin-bottom:1px; }
.wb-dhead{
  width:100%; display:flex; align-items:center; gap:7px;
  padding:9px 8px; border-radius:8px;
  font-size:12px; font-weight:700; color:var(--ink-3);
  letter-spacing:.01em;
}
.wb-dhead:hover{ background:var(--paper); }
.wb-dhead .caret{ display:inline-flex; width:11px; color:var(--ink-3); }
.wb-dhead .cnt{ margin-left:auto; font-weight:600; color:var(--ink-3); opacity:.8; font-variant-numeric:tabular-nums; }
.wb-sets{ padding:0 0 6px 4px; }
.wb-set{
  display:flex; align-items:center; gap:8px;
  padding:7px 9px; border-radius:8px;
  font-size:13px; color:var(--ink-2); line-height:1.35;
}
.wb-set:hover{ background:var(--paper); }
.wb-set.on{ background:var(--brand-soft); color:var(--brand); font-weight:600; }
.wb-set .caret{ display:inline-flex; width:11px; color:currentColor; opacity:.6; flex:none; }
.wb-set .nm{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wb-items{ padding:1px 0 6px 18px; }
.wb-item{
  display:flex; align-items:center; gap:8px;
  padding:5px 9px 5px 12px; border-radius:7px;
  font-size:12.5px; color:var(--ink-3);
  border-left:2px solid var(--line);
}
.wb-item:hover{ background:var(--paper); color:var(--ink-2); }
.wb-item.on{ color:var(--brand); border-left-color:var(--brand); background:rgba(6,106,110,.05); }
.wb-empty{ padding:16px 12px; font-size:13px; color:var(--ink-3); }
.wb-foot{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:9px 14px; border-top:1px solid var(--line);
  font-size:11.5px; color:var(--ink-3);
}
.wb-foot a{ color:var(--brand); font-weight:600; }

/* ---- 右主区 ---- */
.wb-main{
  min-width:0; min-height:0; overflow-y:auto;
  padding:18px 30px 56px;
  -webkit-overflow-scrolling:touch;
}
.wb-crumb{
  display:flex; align-items:center; gap:7px; flex-wrap:wrap;
  font-size:13px; color:var(--ink-3); margin:0 0 12px;
}
.wb-crumb b{ color:var(--ink-2); font-weight:600; }
.wb-crumb .sep{ opacity:.45; }
.wb-crumb .q{ color:var(--brand); font-weight:600; }
.wb-card{
  background:var(--surface);
  border-radius:14px;
  border:1px solid var(--line);
  box-shadow:0 1px 3px rgba(16,24,40,.05),0 8px 24px -12px rgba(16,24,40,.14);
  overflow:hidden;
}
.wb-cardbar{
  display:flex; align-items:center; gap:14px;
  padding:12px 22px; border-bottom:1px solid var(--line);
  background:var(--surface);
}
.wb-cardbar .ttl{
  font-size:13.5px; font-weight:650; color:var(--ink);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.wb-cardbar .sub{ font-size:12px; color:var(--ink-3); margin-top:1px; }
.wb-cardbar .grow{ flex:1; min-width:0; }
.wb-cardbar .prog{ flex:none; font-size:11.5px; color:var(--ink-3); }
.wb-cardbar .prog-bar{ width:104px; height:3px; border-radius:2px; background:var(--paper-2); overflow:hidden; margin-top:5px; }
.wb-cardbar .prog-bar i{ display:block; height:100%; background:var(--brand); }
.wb-body{ padding:22px 30px 30px; }
.wb-body .wrap{ max-width:none; padding:0; }

/* 卡片内控件对齐参考站：胶囊按钮、圆角输入 */
.wb-body .btn{ border-radius:999px; padding:9px 18px; font-size:13.5px; font-weight:600; }
.wb-body .btn.primary{ background:var(--brand); color:#fff; border-color:var(--brand); box-shadow:0 1px 3px rgba(16,24,40,.10); }
.wb-body .btn.primary:hover{ background:var(--brand-2); }
.wb-body .btn.lg{ padding:11px 22px; font-size:14px; }
.wb-body .icon-btn{ border-radius:50%; }
.wb-body .notice{ border-radius:10px; }

/* 抽屉遮罩（移动端） */
.wb-scrim{ display:none; }

@media (max-width:900px){
  .wb{ grid-template-columns:minmax(0,1fr); grid-template-rows:60px minmax(0,1fr); }
  .wb-top{ height:60px; padding:0 12px; gap:8px; }
  .wb-burger{
    display:inline-flex; align-items:center; justify-content:center;
    width:36px; height:36px; border-radius:9px; flex:none;
    background:var(--paper); border:1px solid var(--line); color:var(--ink-2);
  }
  .wb-brand{ font-size:15px; gap:8px; }
  .wb-brand .dot{ width:8px; height:8px; }
  .wb-pills{ gap:4px; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .wb-pill{ height:30px; padding:0 11px; font-size:12.5px; }
  .wb-pill .k{ display:none; }
  .wb-side{
    position:fixed; top:0; bottom:0; left:0; width:min(84vw,320px);
    z-index:61; transform:translateX(-102%);
    transition:transform .24s ease;
    box-shadow:0 0 0 1px var(--line), 0 18px 40px -20px rgba(0,0,0,.3);
  }
  body.rail-open .wb-side{ transform:none; }
  .wb-main{ padding:14px 14px 72px; }
  .wb-body{ padding:16px 16px 22px; }
  .wb-crumb{ font-size:12px; margin-bottom:10px; }
  .wb-cardbar{ padding:10px 14px; gap:10px; }
  .wb-cardbar .prog-bar{ width:70px; }
  .wb-scrim{
    display:block; position:fixed; inset:0; z-index:59;
    background:rgba(15,23,32,.34);
    opacity:0; pointer-events:none; transition:opacity .2s;
  }
  body.rail-open .wb-scrim{ opacity:1; pointer-events:auto; }
}

/* 超窄屏：品牌字缩一号，把横向空间让给题型胶囊 */
@media (max-width:520px){
  .wb-brand{ font-size:13.5px; gap:7px; letter-spacing:0; }
  .wb-brand .dot{ width:7px; height:7px; box-shadow:0 0 0 3px var(--brand-ring); }
  .wb-top{ gap:6px; padding:0 10px; }
  .wb-pill{ padding:0 10px; font-size:12px; }
}

/* =============================================================
   做题页外壳 · 参照 realtoeflreading / realtoefllistening /
   realtoeflwriting / realtoeflspeaking 的版式（2026-11 重做）
   白顶栏（站名＋副标题／题型胶囊／工具）＋ 320 左目录
   浅灰舞台（面包屑 ＋ 白卡片）；卡片内：题型标签＋标题＋元信息
   → 内容 → 底部计时圆环 ＋ ← 上一题 / 下一题 →
   ============================================================= */

/* ---- 顶栏右侧：音量 / 一览 / 信息 / 隐藏计时 ---- */
.ex-act{ margin-left:12px; display:flex; align-items:center; gap:8px; flex:none; }
.ex-ic{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  height:34px; padding:0 12px; border-radius:10px;
  background:#fff; border:1px solid var(--line); color:var(--ink-2);
  font-size:12.5px; font-weight:600; line-height:1; white-space:nowrap;
  transition:border-color .15s, color .15s, background .15s;
}
.ex-ic:hover{ border-color:var(--brand); color:var(--brand); background:var(--brand-soft); }
.ex-ic svg{ flex:none; }

/* 顶部弹层（Volume / Examinee Information） */
.ex-pop{
  position:absolute; top:calc(100% + 6px); right:6px; z-index:70;
  background:#fff; border-radius:14px;
  box-shadow:0 8px 28px rgba(16,24,40,.16), 0 0 0 1px rgba(16,24,40,.06);
  color:var(--ink);
}
.ex-pop[hidden]{ display:none; }
.ex-vol{ width:240px; padding:14px 16px 16px; }
.ex-vol .t{ font-size:12.5px; font-weight:700; color:var(--ink-2); margin-bottom:12px; }
.ex-vol input[type=range]{
  -webkit-appearance:none; appearance:none;
  width:100%; height:4px; border-radius:2px; background:#DFE3E3; outline:none;
}
.ex-vol input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; width:16px; height:16px; border-radius:50%;
  background:var(--brand); border:2px solid #fff; box-shadow:0 1px 4px rgba(0,0,0,.24);
  cursor:pointer;
}
.ex-vol .row{ display:flex; align-items:center; gap:9px; }
.ex-infobox{ width:322px; padding:16px 18px 18px; }
.ex-infobox .t{ font-size:13px; font-weight:700; color:var(--ink); margin-bottom:12px; }
.ex-infobox dl{
  margin:0; display:grid; grid-template-columns:86px minmax(0,1fr);
  gap:8px 12px; font-size:12.5px; line-height:1.5;
}
.ex-infobox dt{ color:var(--ink-3); font-weight:600; }
.ex-infobox dd{ margin:0; color:var(--ink); word-break:break-word; }

/* ---- 舞台：面包屑 ＋ 左对齐白卡片（高度贴合内容） ---- */
.wb-main{
  display:block;
  min-width:0; min-height:0; overflow-y:auto;
  padding:20px 26px 48px;
  background:#F4F6F7;
  -webkit-overflow-scrolling:touch;
}
.wb-main > .wb-crumb{
  width:auto; max-width:none;
  margin:0 0 12px; font-size:12.5px; color:var(--ink-3);
}
.wb-main > .wb-crumb b{ color:var(--ink-2); font-weight:600; }
.wb-main > .wb-crumb .q{ color:var(--ink-3); font-weight:400; }

.ex-sheet{
  width:100%; max-width:980px; margin:0;
  background:var(--surface);
  border:1px solid var(--line); border-radius:12px;
  box-shadow:0 1px 3px rgba(16,24,40,.07), 0 8px 24px -14px rgba(16,24,40,.18);
  display:flex; flex-direction:column;
  overflow:hidden; position:relative;
}

/* 卡片头：题型标签 ＋ 标题／指导语 ＋ 右侧元信息 */
.ex-bar{
  display:flex; align-items:flex-start; gap:10px;
  padding:16px 18px 10px;
  background:var(--surface);
}
.ex-tag{
  flex:none; margin-top:1px;
  font-size:11px; font-weight:800; letter-spacing:.02em; line-height:1.5;
  padding:2px 7px; border-radius:6px; color:#fff; background:var(--brand);
}
.ex-dir{ flex:1; min-width:0; }
.ex-dir h1{
  margin:0; text-align:left;
  font-family:var(--sans);
  font-size:13px; font-weight:400; line-height:1.7; color:var(--ink-2);
  letter-spacing:0;
}
.ex-dir .ex-sub{
  margin-top:4px; text-align:left;
  font-size:11.5px; color:var(--ink-3); line-height:1.5;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.ex-meta{
  flex:none; margin-top:2px; font-size:11px; color:var(--ink-3);
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.ex-prog{ height:2px; background:transparent; }
.ex-prog i{ display:block; height:100%; background:var(--brand); transition:width .25s linear; }

/* 内容区（卡片随内容长高，整页滚动） */
.ex-body{
  padding:4px 18px 2px;
  display:flex; flex-direction:column;
}
.ex-body > *{ min-width:0; }
.ex-body .wrap{ max-width:none; padding:0; }

/* 卡片底部（无分隔条）：计时圆环 → 翻页 → 提示，一律左对齐 */
.ex-dock{
  display:flex; flex-direction:column; align-items:flex-start; gap:0;
  padding:14px 18px 16px;
}
.ex-ring{ position:relative; width:78px; height:78px; flex:none; }
.ex-ring svg{ display:block; width:100%; height:100%; }
.ex-ring .rtrack{ fill:none; stroke:var(--paper-2); stroke-width:8; }
.ex-ring .rbar{
  fill:none; stroke:var(--brand); stroke-width:8; stroke-linecap:round;
  transition:stroke-dashoffset .12s linear, stroke .2s;
}
.ex-ring.warn .rbar{ stroke:var(--amber); }
.ex-ring.crit .rbar{ stroke:var(--danger); }
.ex-ring .rcenter{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.ex-ring .rnum{
  font-size:23px; font-weight:800; line-height:1;
  color:var(--ink); font-variant-numeric:tabular-nums;
}
.ex-ring .rnum.sm{ font-size:13px; letter-spacing:-.02em; }
.ex-ring .rcap{ font-size:8.5px; color:var(--ink-3); margin-top:2px; letter-spacing:0; }

.ex-dock-r{ width:100%; min-width:0; }
.ex-navg{ display:flex; align-items:center; gap:7px; }
.ex-nb{
  display:inline-flex; align-items:center; justify-content:center; gap:5px;
  height:24px; padding:0 9px; border-radius:6px;
  background:#fff; border:1px solid var(--line); color:var(--ink-2);
  font-size:11.5px; font-weight:600; line-height:1; white-space:nowrap;
  transition:border-color .15s, color .15s, background .15s;
}
.ex-nb:hover:not(:disabled){ border-color:var(--brand); color:var(--brand); background:var(--brand-soft); }
.ex-nb:disabled{ opacity:.42; cursor:not-allowed; }
.ex-pos{
  font-size:11.5px; color:var(--ink-3); font-variant-numeric:tabular-nums;
  min-width:62px; text-align:center;
}
.ex-hint{ font-size:11px; color:var(--ink-3); margin-top:9px; line-height:1.5; }

/* ---- 卡片内题型块：贴合参考站的圆角浅框，不做整页卷面 ---- */
.ex-body .qcard{
  background:var(--surface); border:1px solid var(--line); border-radius:10px;
  box-shadow:none; padding:14px 16px;
}
.ex-body .qlist{ gap:14px; }
.ex-body .q-head{ margin-bottom:10px; gap:9px; }
.ex-body .q-no{
  font-family:var(--sans); font-size:11px; font-weight:700; letter-spacing:.02em;
  color:var(--ink-2); background:var(--paper); border:1px solid var(--line);
  padding:2px 8px; border-radius:6px;
}
.ex-body .q-type{ font-size:11px; color:var(--ink-3); letter-spacing:0; text-transform:none; }
.ex-body .q-prompt{ font-size:15px; font-weight:600; line-height:1.6; }
.ex-body .choices{ margin-top:14px; gap:8px; }
.ex-body .choice{ padding:11px 14px; border-radius:10px; }
.ex-body .choice .k{ width:20px; height:20px; border-radius:5px; font-size:11px; }
.ex-body .choice .x{ font-size:14px; line-height:1.6; }
.ex-body .verdict{ margin-top:14px; border-radius:10px; padding:12px 14px; font-size:13px; line-height:1.65; }
.ex-body .passage{ position:static; max-height:none; box-shadow:none; padding:16px 18px; font-size:14.5px; line-height:1.85; }
.ex-body .passage h4{ margin-bottom:10px; font-size:11.5px; }
.ex-body .fill-passage{ font-size:16px; line-height:2.1; max-width:820px; }
.ex-body .wc{ min-height:0; display:block; }
/* 填空：每个待填字母一条独立短横线，数量 = 待填字母数（不拼成整词长条） */
.ex-body .blank{ padding:0 2px; }
.ex-body .blank input{
  width:.72em; margin:0 2.5px; padding:0;
  border:0; border-bottom:2px solid rgba(22,33,31,.68);
  border-radius:1.5px;
}
.ex-body .blank input:first-child{ margin-left:1px; }
.ex-body .blank input:focus{ border-bottom-color:var(--brand); background-color:#C8C8C8; }
.ex-body .blank .fixed{ font-family:var(--sans); font-size:16px; letter-spacing:0; }
.ex-body .audio-card{ box-shadow:none; padding:16px 18px; }
.ex-body .speak-stage{
  background:none; border:0; border-radius:0; box-shadow:none;
  padding:8px 0 4px;
}
.ex-body .speak-stage .btn{ border-radius:6px; }
.ex-body .notice{
  background:var(--paper); border:1px solid var(--line); border-radius:10px;
  padding:10px 14px; font-size:12.5px; color:var(--ink-2);
}
.ex-body .center{ text-align:left; }
.ex-body .done-card{ margin:18px auto; }
.ex-body .review{ max-width:none; }

/* 分栏：两栏各自滚动，卡片本身不滚；内容短时按内容高度收缩 */
.ex-body .split{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  grid-template-rows:minmax(0,1fr);
  gap:16px; align-items:start;
  height:clamp(320px, calc(100dvh - 400px), 680px);
}
.ex-body .split > *{
  min-width:0; height:100%;
  overflow-y:auto; overscroll-behavior:contain; padding-bottom:4px;
}
.ex-body .split > .passage{ overflow-y:auto; }
/* 学术讨论的教授/学生发言：浅底小块，不用带框的告示卡 */
.ex-body .split > .passage .verdict{
  background:var(--paper); border:0; border-radius:10px;
  padding:12px 14px; margin-top:10px; font-size:13px;
}
.ex-body .split > .passage .verdict .vt{ font-weight:700; }

/* 运行器自带的翻页条由卡片底部代理，文字按钮收起（口语保留自动播放开关） */
.ex-body .q-nav, .ex-body .qdots{ display:none; }
.ex-body .speak-nav{ margin-top:6px; }
.ex-body .speak-nav .btn{ display:none; }

/* ---- Review 面板（覆盖整张卡片） ---- */
.ex-review{ display:flex; flex-direction:column; min-height:0; flex:1; }
.ex-rv-tip{ font-size:13px; line-height:1.75; color:var(--ink-2); margin:0 0 12px; }
.ex-rv-tbl{
  border:1px solid var(--line); border-radius:12px; overflow:hidden;
  display:flex; flex-direction:column; min-height:0; flex:1;
}
.ex-rv-row{
  display:grid; grid-template-columns:66px minmax(0,1fr) 132px;
  align-items:center; gap:0; min-height:37px;
  border-bottom:1px solid var(--line);
  font-size:13px; color:var(--ink);
}
.ex-rv-row:last-child{ border-bottom:0; }
.ex-rv-row > span{ padding:7px 12px; }
.ex-rv-row > span:first-child{ text-align:center; font-variant-numeric:tabular-nums; }
.ex-rv-row > span:last-child{ text-align:center; color:var(--ink-3); }
.ex-rv-row.head{
  background:var(--brand); color:#fff; font-weight:700;
  border-bottom:1px solid var(--brand); min-height:36px;
}
.ex-rv-row.head > span:first-child{ text-align:left; }
.ex-rv-row.head > span:last-child{ color:#fff; }
.ex-rv-row.on{ background:var(--brand-soft); }
.ex-rv-row[data-go]{ cursor:pointer; }
.ex-rv-row[data-go]:hover{ background:var(--paper); }
.ex-rv-row.ok > span:last-child{ color:var(--ok); font-weight:600; }
.ex-rv-row.no > span:last-child{ color:var(--danger); font-weight:600; }
.ex-rv-body{ overflow:auto; min-height:0; }
.ex-rv-desc{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ---- 骨架屏：与新外壳同构 ---- */
.sk-wb .wb-brand{ gap:0; }
.sk-wb .ex-bar{ min-height:64px; }
.sk-wb .ex-dir{ display:block; }
.sk-wb .sk-ring{ width:100px; height:100px; border-radius:50%; flex:none; }
.sk-wb .ex-dock{ align-items:center; }
.sk-wb .ex-hint{ display:flex; }
.sk-ev2{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:18px; }
.sk-doc{ padding:16px 18px; border:1px solid var(--line); border-radius:12px; }
.sk-qcol{ padding:0; }
.sk-qz{ display:block; }
.sk-opts{ margin-top:14px; display:flex; flex-direction:column; gap:12px; }
.sk-opt{ display:flex; align-items:center; gap:11px; }
.sk-circ{ width:18px; height:18px; border-radius:5px; flex:none; }
.sk-aud{
  display:flex; align-items:center; gap:14px;
  border:1px solid var(--line); border-radius:12px;
  padding:14px 16px; margin-bottom:16px;
}
.sk-playbtn{ width:44px; height:44px; border-radius:50%; flex:none; }
.sk-audlines{ flex:1; min-width:0; }
.sk-micring{ width:86px; height:86px; border-radius:50%; flex:none; }
.sk-prose{ padding:16px 18px; border:1px solid var(--line); border-radius:12px; }

@media (max-width:1180px){
  .ex-ic .lbl{ display:none; }
  .ex-ic{ padding:0 10px; width:34px; }
  .wb-brand .wb-sub{ max-width:34vw; }
}
@media (max-width:900px){
  .wb{ grid-template-rows:56px minmax(0,1fr); }
  .wb-top{ padding:0 12px; gap:8px; }
  .wb-brand{ max-width:30vw; }
  .wb-brand .wb-title{ font-size:14px; }
  .wb-brand .wb-sub{ display:none; }
  .wb-main{ padding:12px 12px 32px; overflow-y:auto; }
  .wb-main > .wb-crumb{ font-size:12px; margin-bottom:10px; }
  .ex-sheet{ border-radius:12px; }
  .ex-bar{ padding:12px 14px 10px; gap:10px; }
  .ex-dir h1{ font-size:15px; }
  .ex-body{ padding:14px 14px 16px; overflow:visible; }
  .ex-dock{ padding:12px 14px 14px; }
  .ex-ring{ width:70px; height:70px; }
  .ex-ring .rnum{ font-size:21px; }
  .ex-nb{ height:26px; padding:0 9px; }
  .ex-pos{ min-width:60px; }
  .ex-body .split{ max-height:none; }
  .ex-body .split > *{ max-height:none; }
  .ex-body .split{ display:block; height:auto; overflow:visible; }
  .ex-body .split > *, .ex-body .split > .passage{
    height:auto; overflow:visible; padding-bottom:0; margin-bottom:14px;
  }
  .ex-body .qcard{ padding:14px 15px; }
  .ex-pop{ right:12px; top:52px; }
  .ex-infobox{ width:min(322px,calc(100vw - 24px)); }
  .ex-vol{ width:min(240px,calc(100vw - 24px)); }
  .ex-rv-row{ grid-template-columns:44px minmax(0,1fr) 88px; font-size:12px; }
  .sk-ev2{ grid-template-columns:minmax(0,1fr); }
  .sk-wb .ex-ring{ width:74px; height:74px; }
}
@media (max-width:640px){
  .wb-brand{ display:none; }
  .ex-act{ gap:6px; }
  .ex-ic{ width:32px; height:32px; border-radius:9px; padding:0; }
  .wb-pill{ height:30px; padding:0 11px; font-size:12px; }
  .wb-pill .k{ display:none; }
  .ex-tag{ font-size:11px; padding:2px 8px; }
  .ex-body .blank input{ margin:0 1.8px; }
}
@media (max-width:520px){
  .wb-brand .wb-title{ font-size:13.5px; letter-spacing:0; }
  .wb-top{ gap:6px; padding:0 10px; }
  .wb-pill{ padding:0 10px; }
}

/* =============================================================
   2026-11-10 · 做题页复刻 wofo.cc 模考界面
   结构：左 240px 日期栏（不变） + 右侧灰底 #B4B4B4 上居中
        1024px 考试列（青绿顶栏 46 → 白色工具行 31 → 黑框白纸 1024×686）
   ============================================================= */
.wb{ grid-template-rows:minmax(0,1fr); background:#B4B4B4; }
.wb > .wb-side{ grid-row:1; grid-column:1; }
.wb-main{
  grid-column:2;
  display:flex; flex-direction:column;
  padding:0; background:#B4B4B4;
  overflow-y:auto; overflow-x:hidden;
}
.exw{ width:1024px; max-width:100%; margin:0 auto; flex:none; }

/* ---- 青绿顶栏 46px ---- */
.exw-top{
  display:flex; align-items:center; gap:8px;
  height:46px; padding:0 10px;
  background:var(--brand); position:relative;
}
.exw-burger{ display:none; }
.exw-brand{
  flex:none; color:#fff; font-size:14px; font-weight:700; line-height:1;
  white-space:nowrap; letter-spacing:.2px; padding:0 2px;
}
.exw-exit{
  flex:none; height:28px; padding:0 11px; border-radius:8px;
  display:inline-flex; align-items:center; justify-content:center;   /* a 默认 inline，height 不生效 → 文字看起来偏上 */
  background:none; border:1px solid rgba(255,255,255,.5);
  color:rgba(255,255,255,.95); font-size:13px; line-height:1; white-space:nowrap;
  text-decoration:none; box-sizing:border-box;
}
.exw-exit:hover{ background:rgba(255,255,255,.12); }
.exw-pills{ display:flex; align-items:center; gap:4px; min-width:0; overflow:hidden; }
.exw-pill{
  height:26px; padding:0 9px; border-radius:7px;
  display:inline-flex; align-items:center; gap:5px;
  font-size:12px; color:rgba(255,255,255,.82); white-space:nowrap;
  border:1px solid transparent;
}
.exw-pill:hover{ background:rgba(255,255,255,.12); color:#fff; }
.exw-pill.on{ background:rgba(255,255,255,.94); color:var(--brand); font-weight:700; }
.exw-pill .k{ font-size:11px; opacity:.7; }
.exw-acts{ margin-left:auto; display:flex; align-items:center; gap:8px; flex:none; }
.exw-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  height:40px; padding:0 16px; border-radius:12px;
  background:#2B8084; border:1px solid #F5F5F5; color:#fff;
  font-size:13px; font-weight:600; line-height:1; white-space:nowrap;
  transition:background .15s,opacity .15s;
}
.exw-btn:hover{ background:#358E92; }
.exw-btn.next{ background:#fff; border-color:#F5F5F5; color:var(--brand-2); }
.exw-btn.next:hover{ background:#F2F8F8; }
.exw-btn.slim{ padding:0 12px; }
.exw-btn:disabled{ opacity:.45; cursor:default; }

/* ---- 白色工具行 31px ---- */
.exw-tools{
  display:flex; align-items:center; gap:10px;
  height:31px; padding:0 8px 0 6px;
  background:#fff; color:#3D3D3D; font-size:13px;
  border-bottom:1px solid #fff;
}
.exw-tools .sec{ padding-left:2px; }
.exw-tools .sep{ width:1px; height:13px; background:#C9C9C9; flex:none; }
.exw-tools .cnt{ color:#3D3D3D; }
.exw-tools .rt{ margin-left:auto; display:flex; align-items:center; gap:12px; }
.exw-clock{
  font-variant-numeric:tabular-nums; font-size:13px; color:#3D3D3D;
  letter-spacing:.2px;
}
.exw-clock.on{ font-weight:700; }
.exw-clock.warn{ color:var(--amber); }
.exw-clock.crit{ color:var(--danger); }
.exw-hide{
  display:inline-flex; align-items:center; gap:6px;
  height:22px; padding:0 2px; background:none; border:0;
  color:#3D3D3D; font-size:13px; line-height:1;
}
.exw-hide:hover{ color:var(--brand); }

/* ---- 黑框白纸 1024×686 ---- */
.exw-paper{
  width:1024px; max-width:100%; height:686px;
  background:#fff; border:1px solid #000; padding:2px;
  overflow:hidden; display:flex;
}
.exw-in{
  flex:1; min-width:0; overflow-y:auto; overflow-x:hidden;
  padding:26px 34px 22px;
  font-family:var(--sans);
  font-size:15.7px; line-height:1.5; color:#000;
  display:block;
}
/* 居中加粗指导语（照 wofo 的 itemTypeDirection） */
.exw-dir{
  margin:6px 0 24px; text-align:center;
  font-size:16.5px; font-weight:700; line-height:1.4; color:#000;
}
.exw-dir:empty{ display:none; }

/* ---- 纸面内的题目构件：全部去卡片化 ---- */
.exw-in .notice{ display:none; }
.exw-in .qcard{
  background:none; border:0; border-radius:0; box-shadow:none;
  padding:0; margin:0 0 18px;
}
.exw-in .q-head{ display:none; }
.exw-in .q-prompt{ font-size:15.7px; line-height:1.5; color:#000; margin-bottom:14px; }
.exw-in .choices{ display:flex; flex-direction:column; gap:2px; }
.exw-in .choice{
  display:flex; align-items:flex-start; gap:10px;
  padding:7px 0; border:0; background:none; border-radius:0;
  font-size:15.7px; line-height:1.42; color:#000; text-align:left;
}
.exw-in .choice:hover{ background:none; }
.exw-in .choice .k{
  flex:none; width:15px; height:15px; margin-top:3px;
  border-radius:50%; border:1.5px solid #000; background:#fff;
  font-size:0; color:transparent; display:inline-block;
  transition:box-shadow .12s, background .12s;
}
.exw-in .choice .x{ flex:1; min-width:0; }
.exw-in .choice.right .k{ background:#000; box-shadow:inset 0 0 0 3px #fff; }
.exw-in .choice.wrong{ color:var(--danger); }
.exw-in .choice.wrong .k{ border-color:var(--danger); background:var(--danger); box-shadow:inset 0 0 0 3px #fff; }
.exw-in .verdict{ margin:12px 0 4px; padding:0; border:0; background:none; font-size:13.5px; }
.exw-in .verdict .vt{ font-weight:700; }
.exw-in .verdict.ok .vt{ color:var(--ok); }
.exw-in .verdict.no .vt{ color:var(--danger); }

/* 左右两栏（阅读 T3 / 写作 T2 T3）：不画分隔线，靠栏距分开 */
.exw-in .split{
  display:grid; grid-template-columns:1fr 1fr; grid-template-rows:minmax(0,1fr);
  gap:44px; align-items:stretch;
  height:100%; min-height:0;
}
.exw-in .split > *{ min-width:0; height:100%; overflow-y:auto; }
.exw-in .split > *:first-child{ padding-right:2px; }
.exw-in .split > *:last-child{ padding-left:2px; }
.exw-in .passage{
  position:static; max-height:none; background:#fff; box-shadow:none;
  border:2px solid var(--brand); border-radius:5px;
  padding:14px 16px; font-size:15.7px; line-height:1.5;
}
.exw-in .passage h4{
  margin:0 0 16px; text-align:center;
  font-size:16.5px; font-weight:700; letter-spacing:0;
  text-transform:none; color:#000;
}
.exw-in .passage p{ margin:0 0 12px; }

/* 纸面内的按钮：青绿实心胶囊 */
.exw-in .btn{
  height:34px; padding:0 16px; border-radius:8px;
  border:1px solid var(--line-2); background:#fff; color:var(--ink-2);
  font-size:13px; font-weight:600;
}
.exw-in .btn.primary{ background:var(--brand); border-color:var(--brand); color:#fff; }
.exw-in .btn.primary:hover{ background:var(--brand-2); }
.exw-in .btn:disabled{ opacity:.45; }
.exw-in .q-nav{ display:none; }
.exw-in .center{ text-align:left; }
.exw-in .mt16{ margin-top:16px; }
.exw-foot{
  display:flex; align-items:center; gap:12px;
  margin-top:18px; padding-top:14px; border-top:1px solid var(--line);
}
.exw-foot .hint{ font-size:12.5px; color:var(--ink-3); }

/* ---- 阅读 T1 填词：浅灰实心块 + 底部逐字母下划线段 ---- */
.exw-in .fill-passage{
  font-size:15.7px; line-height:2.05; max-width:none; margin:0;
  font-family:var(--sans);
}
.exw-in .blank{ padding:0 1px; vertical-align:baseline; }
.exw-in .blank .fixed{ font-family:inherit; font-size:15.7px; letter-spacing:0; }
/* 每个待填字母一个「槽」：槽宽 = 字形宽(1ch) + 字距(0.3ch) = 下划线周期(1.3ch)
   等宽字体 + 左对齐 → 第 i 个字母正好压在第 i 段下划线上（与 wofo 同构，且严格对位） */
.exw-in .blank input{
  --cw:1.3ch;               /* 下划线周期 = 单字槽宽 */
  width:calc(var(--n,1) * var(--cw));
  height:21px; margin:0 1px; padding:0; box-sizing:border-box;
  border:0; border-radius:0; outline:0;
  background-color:#D3D3D3;
  background-image:repeating-linear-gradient(90deg,#696969 0 1ch,rgba(0,0,0,0) 0 var(--cw));
  background-size:100% 1px;
  background-position:0 100%;
  background-repeat:no-repeat;
  font-family:var(--mono); font-size:17px; font-weight:400;
  letter-spacing:0.3ch; word-spacing:0;
  line-height:21px; color:#000; caret-color:#000;
  text-align:start; text-transform:none; text-indent:0; vertical-align:baseline;
  -webkit-appearance:none; appearance:none;
}
.exw-in .blank input:focus{ background-color:#C8C8C8; }
/* 交卷后：对的整词绿、错的整词红，错的后面绿色补出正确答案 */
.exw-in .blank.ok input{
  background-color:#DCEFE2;
  background-image:repeating-linear-gradient(90deg,#1D7A4C 0 1ch,rgba(0,0,0,0) 0 var(--cw));
  color:#1D7A4C; -webkit-text-fill-color:#1D7A4C; font-weight:700; opacity:1;
}
.exw-in .blank.no input{
  background-color:#F7E1DD;
  background-image:repeating-linear-gradient(90deg,#B4341F 0 1ch,rgba(0,0,0,0) 0 var(--cw));
  color:#B4341F; -webkit-text-fill-color:#B4341F; font-weight:700; opacity:1;
}
.exw-in .blank .reveal{
  font-family:var(--sans); font-size:15.7px; font-weight:700;
  margin-left:3px; color:#1D7A4C; white-space:nowrap;
}
.exw-in .blank.no .reveal{ color:#1D7A4C; text-decoration:none; }
.exw-in .blank.no .reveal::before{
  content:"→"; margin-right:3px; font-weight:400; color:#1D7A4C; opacity:.85;
}
/* 交卷后的得分条 */
.exw-foot .sc{
  display:inline-block; padding:2px 10px; border-radius:20px;
  font-size:13.5px; font-weight:700; letter-spacing:.2px;
}
.exw-foot .sc.ok{ background:#DCEFE2; color:#1D7A4C; }
.exw-foot .sc.no{ background:#F7E1DD; color:#B4341F; }
.exw-foot .sc.mid{ background:#E1EFF0; color:#066A6E; }
.exw-foot .sc-x{ margin-left:10px; font-size:12.5px; color:#6B6B6B; }

/* ---- 手机：纸面改成整宽、高度自适应 ---- */
@media (max-width:900px){
  .wb{ display:block; height:auto; min-height:100dvh; }
  .wb-main{ display:block; padding:0; }
  .exw{ width:100%; }
  .exw-top{ padding:0 8px; gap:6px; }
  .exw-burger{
    display:inline-flex; align-items:center; justify-content:center;
    width:32px; height:32px; border-radius:8px; flex:none;
    background:rgba(255,255,255,.14); border:0; color:#fff;
  }
  .exw-brand{ font-size:12.5px; }
  .exw-acts{ gap:6px; }
  .exw-btn{ height:34px; padding:0 10px; font-size:12px; border-radius:9px; }
  .exw-paper{ height:auto; min-height:calc(100dvh - 78px); }
  .exw-in{ padding:18px 16px 20px; overflow:visible; }
  .exw-in .split{ display:block; height:auto; }
  .exw-in .split > *{ height:auto; overflow:visible; padding:0; border:0; }
  .exw-in .split > *:first-child{ padding-bottom:14px; border-bottom:1px solid #000; margin-bottom:14px; }
}

/* 复刻 wofo：当前空不加描边高亮（真实考试只有光标） */
.exw-in .blank.cur{ box-shadow:none; background:none; }
.exw-in .blank.cur input{ background-color:#C8C8C8; }

/* ============================================================
   听力：方向句居中加粗 + 圆点选项（无音频卡片）
   ============================================================ */
.exw-lq-dir{
  margin:2px 0 22px; text-align:center;
  font-size:15.7px; font-weight:700; line-height:1.4; color:#000;
}
.exw-lq-stem{
  font-size:15.7px; line-height:1.5; color:#000;
  margin:0 auto 14px; max-width:560px;
}
.exw-lq-opts{ max-width:560px; margin:0 auto; }
.exw-lq-tip{ font-size:14px; color:#7A7A7A; padding:2px 0 6px; }
.exw-lq-opts .choice{ padding:6px 0; }
.exw-lq-opts .choice .k{ border-color:#7A7A7A; }
.exw-lq-opts .choice.locked .k{ border-color:#B4B4B4; }
.exw-lq-opts .choice.right .k{ background:#066A6E; border-color:#066A6E; box-shadow:inset 0 0 0 3px #fff; }
.exw-lq-opts .choice.wrong .k{ background:#B4341F; border-color:#B4341F; box-shadow:inset 0 0 0 3px #fff; }
.exw-lq-opts .choice.right .x{ color:#0B6B3A; font-weight:600; }
.exw-lq-opts .choice.wrong .x{ color:#B4341F; }

.exw-lbar{
  display:flex; align-items:center; gap:16px;
  margin-top:20px; padding-top:10px;
  border-top:1px solid #E4E4E4;
}
.exw-link{
  padding:0; border:0; background:none;
  font-size:12.5px; color:#2B8084; text-decoration:underline; text-underline-offset:2px;
  cursor:pointer;
}
.exw-link:hover{ color:#066A6E; }
.exw-lhint{ font-size:12.5px; color:#8A8A8A; }
.exw-mark{ margin-top:14px; font-size:13.5px; font-weight:700; }
.exw-mark.ok{ color:#0B6B3A; }
.exw-mark.no{ color:#B4341F; }
.exw-exp{ margin-top:6px; font-size:13px; line-height:1.7; color:#4A4A4A; max-width:660px; }
.exw-ltr{ margin-top:14px; padding-top:12px; border-top:1px solid #E4E4E4; }
.exw-trt{ font-size:14px; line-height:1.85; color:#333; white-space:pre-wrap; max-width:720px; }
.exw-trl{ display:flex; gap:10px; font-size:14px; line-height:1.85; color:#333; max-width:720px; }
.exw-trl > b{ flex:none; width:22px; color:#2B8084; font-weight:700; }

/* 必须作答弹层 */
.exw-modal{
  position:absolute; inset:0; z-index:8;
  background:rgba(60,60,60,.42);
  display:flex; align-items:flex-start; justify-content:center;
  padding-top:52px;
}
.exw-modal-in{
  width:360px; max-width:calc(100% - 32px);
  background:#fff; border-radius:14px; padding:22px 24px 20px;
  box-shadow:0 18px 44px rgba(0,0,0,.28);
}
.exw-modal-h{
  display:flex; align-items:center; gap:9px;
  font-size:17px; font-weight:700; color:#1F2328;
}
.exw-warn{
  display:inline-flex; align-items:center; justify-content:center;
  width:18px; height:18px; border-radius:50%;
  background:#E3A008; color:#fff; font-size:12px; font-weight:700;
}
.exw-modal-b{
  margin:12px 0 18px; font-size:13.5px; line-height:1.6; color:#3D3D3D;
  padding-top:12px; border-top:1px solid #EAEAEA;
}
.exw-modal .exw-btn{ height:34px; padding:0 18px; border-radius:9px; }

/* ============================================================
   写作 T1：空格改成单条下划线，词库改成纯文字（仿 wofo）
   ============================================================ */
.exw-in .build-sent{
  font-size:15.7px; line-height:2.3; color:#000;
  background:none; border:0; border-radius:0; padding:0;
}
.exw-in .qcard .q-type{ display:none; }
.exw-in .slot{
  display:inline-block; min-width:96px; height:22px; margin:0 8px; padding:0 6px;
  border:0; border-bottom:1px solid #3A3A3A; border-radius:0; background:none;
  font-size:15.7px; line-height:21px; text-align:center; vertical-align:baseline;
}
.exw-in .slot:empty::after{ content:""; }
.exw-in .slot.filled{ background:none; }
.exw-in .slot.ok{ border-bottom-color:#0B6B3A; color:#0B6B3A; background:none; text-decoration:none; }
.exw-in .slot.no{ border-bottom-color:#B4341F; color:#B4341F; background:none; text-decoration:line-through; }
.exw-in .slot .slot-fix{ margin-left:6px; font-size:13px; color:#0B6B3A; text-decoration:none; }
.exw-in .bank{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:14px 26px; padding:6px 0 2px; }
.exw-in .token{
  border:0; background:none; padding:0; border-radius:0;
  font-size:15.7px; font-weight:400; color:#111; line-height:1.5;
}
.exw-in .token:hover{ color:#066A6E; transform:none; }
.exw-in .token.used{ color:#C4C4C4; opacity:1; text-decoration:none; pointer-events:none; }
.exw-in .qdots{ display:none; }

/* ============================================================
   口语：无卡片舞台，圆形录音指示 + 居中题干（仿 wofo）
   ============================================================ */
.exw-in .speak-stage{ background:none; border:0; box-shadow:none; padding:0; text-align:center; }
.exw-in .speak-prompt{
  font-family:var(--sans);
  font-size:17px; line-height:1.6; font-weight:700; letter-spacing:0;
  color:#000; text-align:center; margin:0 auto 6px; max-width:760px;
}
.exw-in .speak-zh{ text-align:center; color:#8A8A8A; font-size:13px; margin-top:8px; }
.exw-in .speak-phase{
  display:inline-flex; align-items:center; gap:7px;
  margin-top:18px; font-size:13px; color:#2B8084; font-weight:600;
}
.exw-in .speak-phase .dot{
  width:7px; height:7px; border-radius:50%; background:#2B8084; display:inline-block;
}
.exw-in .speak-phase.rec{ color:#B4341F; }
.exw-in .speak-phase.rec .dot{ background:#B4341F; }
.exw-in .stage-vis{
  width:132px; height:132px; margin:26px auto 0; border-radius:50%;
  background:radial-gradient(circle at 50% 42%,#10939A,#066A6E 72%);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 12px 30px rgba(6,106,110,.20);
}
.exw-in .stage-vis .wave-anim{ height:52px; gap:4px; align-items:center; }
.exw-in .stage-vis .wave-anim i{ background:#fff; width:4px; border-radius:2px; }
.exw-in .stage-vis .wave-anim.rec i{ background:#FFE4E0; animation-duration:.45s; }
.exw-in .speak-timer{ display:none; }
.exw-in .speak-nav{ margin-top:18px; display:flex; justify-content:center; gap:18px; align-items:center; }
.exw-in .speak-nav .btn{ display:none; }
.exw-in .speak-nav .switch{ font-size:12.5px; color:#5A5A5A; }
.exw-in .intro-opts .switch{ font-size:12.5px; color:#5A5A5A; }

/* ============================================================
   手机（≤900px）：顶栏与工具行收紧，纸面整宽
   ============================================================ */
@media (max-width:900px){
  .exw-pills{ display:none; }
  .exw-acts{ gap:6px; }
  .exw-acts .exw-btn.slim{ display:none; }
  .exw-btn{ height:32px; padding:0 10px; font-size:12px; border-radius:9px; }
  .exw-exit{ height:26px; padding:0 9px; font-size:12px; }
  .exw-tools{
    gap:7px; padding:0 10px; font-size:11.5px;
    white-space:nowrap; overflow:hidden;
  }
  .exw-tools .set{ display:none; }
  .exw-tools .cnt{ overflow:hidden; text-overflow:ellipsis; }
  .exw-tools .rt{ gap:8px; }
  .exw-hide .lbl{ display:none; }
  .exw-paper{
    height:auto; min-height:calc(100dvh - 78px);
    border-left:0; border-right:0;
  }
  .exw-in{ padding:16px 14px 22px; font-size:15px; }
  .exw-dir{ font-size:15px; margin:4px 0 18px; }
  .exw-in .split > *:first-child{ padding-bottom:14px; border-bottom:1px solid #DADADA; margin-bottom:16px; }
  .exw-lq-opts, .exw-lq-stem{ max-width:none; }
  .exw-modal{ padding-top:24px; }
}

/* 两栏里的文档卡片：卡片自己滚，边框始终完整（仿 wofo 的邮件/文章卡） */
.exw-in .split > *:first-child{ overflow:hidden; }
.exw-in .split > *:first-child > .passage{
  height:100%; overflow-y:auto;
}
@media (max-width:900px){
  .exw-in .split > *:first-child{ overflow:visible; }
  .exw-in .split > *:first-child > .passage{ height:auto; overflow:visible; }
}

/* 让 #exHost 撑满卷面剩余高度，两栏才能真正各占半屏并各自滚动 */
.exw-in{ display:flex; flex-direction:column; }
.exw-host{ flex:1 1 auto; min-height:0; display:flex; flex-direction:column; }
.exw-in .split{ flex:1 1 auto; min-height:0; height:auto; }
@media (max-width:900px){
  .exw-host{ display:block; }
  .exw-in .split{ flex:none; }
}
/* 卡片本身就是两栏的第一格，滚动要落在卡片自己身上 */
.exw-in .split > .passage{ overflow-y:auto; }
@media (max-width:900px){
  .exw-in .split > .passage{ overflow:visible; height:auto; }
}

/* 写作 T2/T3：编辑器撑满右栏，别留大片空白（只在 .split-ed 生效） */
.exw-in .split-ed > *:last-child{ display:flex; flex-direction:column; min-height:0; }
.exw-in .split-ed > *:last-child > *{ min-height:0; }
.exw-in .split-ed > *:last-child .qcard{
  display:flex; flex-direction:column; flex:1 1 auto; min-height:0; margin:0;
}
.exw-in .split-ed > *:last-child .editor{
  flex:1 1 auto; min-height:200px; margin:0;
}
@media (max-width:900px){
  .exw-in .split-ed > *:last-child{ display:block; }
  .exw-in .split-ed > *:last-child .editor{ min-height:220px; }
}

/* 手机：顶栏只留 目录 / 音量 / Review / Next；文档卡片保留边框 */
@media (max-width:900px){
  .exw-brand, .exw-exit{ display:none; }
  .exw-in .split > .passage{
    border:2px solid var(--brand); border-radius:5px;
    padding:12px 14px; height:auto; overflow:visible;
  }
}