/* 江苏职教高考学测刷题系统 v5.4.1
   UI 2.0 Pilot 01 — 普通刷题 + 解析
   Scope: only active practice/materialGroup pages. Other routes keep the v5.4 production UI. */

:root{
  --ui2-page:#f6f8fb;
  --ui2-surface:#ffffff;
  --ui2-surface-2:#f9fafb;
  --ui2-surface-muted:#f1f4f8;
  --ui2-text:#172033;
  --ui2-text-2:#4a5568;
  --ui2-text-3:#7a8495;
  --ui2-border:#dde3ea;
  --ui2-border-strong:#cbd3dd;
  --ui2-brand:#1f63d7;
  --ui2-brand-strong:#174ea8;
  --ui2-brand-soft:#eef4ff;
  --ui2-success:#23845c;
  --ui2-success-soft:#eef9f4;
  --ui2-danger:#c2413b;
  --ui2-danger-soft:#fff3f2;
  --ui2-warning:#a86611;
  --ui2-warning-soft:#fff8ea;
  --ui2-radius-xs:6px;
  --ui2-radius-sm:8px;
  --ui2-radius-md:12px;
  --ui2-radius-lg:16px;
}

body.ui2-practice-active{
  color:var(--ui2-text);
  background:var(--ui2-page)!important;
}
body.ui2-practice-active:before{display:none!important}
body.ui2-practice-active .app-shell{width:min(1240px,calc(100% - 32px));padding-top:0}
body.ui2-practice-active .topbar{
  top:0;
  padding:12px 0;
  background:rgba(246,248,251,.96);
  border-bottom:1px solid var(--ui2-border);
  backdrop-filter:none;
}
body.ui2-practice-active .brand-logo{
  width:42px;height:42px;border-radius:10px;
  background:var(--ui2-brand);
  box-shadow:none;
  font-size:20px;
}
body.ui2-practice-active .brand-logo:after{display:none}
body.ui2-practice-active .brand h1{font-size:18px;letter-spacing:-.02em;color:var(--ui2-text)}
body.ui2-practice-active .brand p{color:var(--ui2-text-3);font-size:12px}
body.ui2-practice-active .nav-tabs{
  gap:3px;
  padding:4px;
  background:var(--ui2-surface);
  border:1px solid var(--ui2-border);
  border-radius:12px;
  box-shadow:none;
  backdrop-filter:none;
}
body.ui2-practice-active .nav-btn,
body.ui2-practice-active .v53-class-btn,
body.ui2-practice-active .v54-assignment-btn,
body.ui2-practice-active .v49-tools-btn,
body.ui2-practice-active .v50-account-btn{
  border-radius:8px!important;
  box-shadow:none!important;
}
body.ui2-practice-active .nav-btn{padding:8px 11px;color:var(--ui2-text-2);font-weight:700}
body.ui2-practice-active .nav-btn:hover{background:var(--ui2-surface-muted);color:var(--ui2-text)}
body.ui2-practice-active .nav-btn.active{
  color:var(--ui2-brand-strong);
  background:var(--ui2-brand-soft);
  box-shadow:none;
}
body.ui2-practice-active .main-panel{
  min-height:72vh;
  margin-top:0;
  padding:24px 0 44px;
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
}

/* ---------- Practice frame ---------- */
body.ui2-practice-active .practice-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) 264px;
  gap:24px;
  align-items:start;
}
body.ui2-practice-active .practice-layout>section{min-width:0}
body.ui2-practice-active .progress-wrap{margin:0 0 14px}
body.ui2-practice-active .progress-meta{
  margin-bottom:8px;
  color:var(--ui2-text-2);
  font-size:13px;
  font-weight:650;
}
body.ui2-practice-active .progress-meta span:first-child{color:var(--ui2-text);font-weight:760}
body.ui2-practice-active .progress-bar{
  height:4px;
  background:#e7ebf0;
  border-radius:3px;
}
body.ui2-practice-active .progress-bar>div{
  background:var(--ui2-brand);
  border-radius:3px;
}
body.ui2-practice-active .question-card{
  padding:26px 28px;
  background:var(--ui2-surface);
  border:1px solid var(--ui2-border);
  border-radius:var(--ui2-radius-md);
  box-shadow:none;
}
body.ui2-practice-active .question-top{
  justify-content:flex-start;
  align-items:center;
  gap:6px;
  margin-bottom:20px;
}
body.ui2-practice-active .question-top .badge{
  padding:4px 7px;
  border:1px solid var(--ui2-border);
  border-radius:var(--ui2-radius-xs);
  background:var(--ui2-surface-2);
  color:var(--ui2-text-2);
  font-size:11px;
  font-weight:700;
  letter-spacing:.01em;
}
body.ui2-practice-active .question-top .badge.ready{color:var(--ui2-success);background:var(--ui2-success-soft);border-color:#ccebdd}
body.ui2-practice-active .question-top .badge.partial{color:var(--ui2-warning);background:var(--ui2-warning-soft);border-color:#f0dfb6}
body.ui2-practice-active .question-text,
body.ui2-practice-active .stem-title{
  color:var(--ui2-text);
  font-size:19px;
  font-weight:620;
  line-height:1.78;
  letter-spacing:.002em;
}
body.ui2-practice-active .stem-title{
  margin:16px 0 18px;
  padding:14px 0 14px 16px;
  background:transparent;
  border:0;
  border-left:3px solid var(--ui2-brand);
  border-radius:0;
}
body.ui2-practice-active .material-reading-box{
  max-height:46vh;
  margin:14px 0 20px;
  padding:18px;
  color:var(--ui2-text-2);
  background:var(--ui2-surface-2);
  border:1px solid var(--ui2-border);
  border-radius:var(--ui2-radius-sm);
  line-height:1.82;
}
body.ui2-practice-active .material-reading-box h3{color:var(--ui2-text);font-size:14px;letter-spacing:.02em}
body.ui2-practice-active .notice,
body.ui2-practice-active .batch-tip,
body.ui2-practice-active .instant-tip{
  margin:12px 0 18px;
  padding:11px 13px;
  border-radius:var(--ui2-radius-sm);
  font-size:13px;
  font-weight:600;
  line-height:1.65;
  box-shadow:none;
}
body.ui2-practice-active .batch-tip,
body.ui2-practice-active .instant-tip{
  color:var(--ui2-brand-strong);
  background:var(--ui2-brand-soft);
  border:1px solid #d7e4fb;
}
body.ui2-practice-active .notice{
  color:#8b5313;
  background:var(--ui2-warning-soft);
  border:1px solid #eeddb6;
}

/* ---------- Options ---------- */
body.ui2-practice-active .options{gap:9px}
body.ui2-practice-active .option,
body.ui2-practice-active .article-option{
  min-height:50px;
  padding:13px 15px;
  gap:12px;
  align-items:center;
  color:var(--ui2-text);
  background:var(--ui2-surface);
  border:1px solid var(--ui2-border);
  border-radius:10px;
  box-shadow:none;
  transition:border-color .12s ease,background .12s ease;
}
body.ui2-practice-active .option:hover,
body.ui2-practice-active .article-option:hover{
  transform:none;
  filter:none;
  background:#fbfdff;
  border-color:#a9c5f4;
}
body.ui2-practice-active .option.selected,
body.ui2-practice-active .article-option.selected{
  color:var(--ui2-text);
  background:var(--ui2-brand-soft);
  border-color:#7da8ec;
  box-shadow:inset 3px 0 0 var(--ui2-brand);
}
body.ui2-practice-active .option.correct,
body.ui2-practice-active .article-option.correct{
  background:var(--ui2-success-soft);
  border-color:#9dd3bd;
  box-shadow:inset 3px 0 0 var(--ui2-success);
}
body.ui2-practice-active .option.wrong,
body.ui2-practice-active .article-option.wrong{
  background:var(--ui2-danger-soft);
  border-color:#e6aaa7;
  box-shadow:inset 3px 0 0 var(--ui2-danger);
}
body.ui2-practice-active .option-key{
  display:inline-grid;
  place-items:center;
  width:28px;height:28px;min-width:28px;
  color:var(--ui2-text-2);
  background:var(--ui2-surface-2);
  border:1px solid var(--ui2-border);
  border-radius:7px;
  font-size:13px;
  font-weight:760;
}
body.ui2-practice-active .option.selected .option-key{color:var(--ui2-brand-strong);background:#fff;border-color:#b8cdf0}
body.ui2-practice-active .option.correct .option-key{color:var(--ui2-success);background:#fff;border-color:#b7dccd}
body.ui2-practice-active .option.wrong .option-key{color:var(--ui2-danger);background:#fff;border-color:#edc1bf}

/* ---------- Controls ---------- */
body.ui2-practice-active .footer-tools{
  margin-top:24px;
  padding-top:18px;
  border-top:1px solid var(--ui2-border);
}
body.ui2-practice-active .btn{
  min-height:40px;
  padding:9px 14px;
  border-radius:var(--ui2-radius-sm);
  font-weight:720;
  box-shadow:none!important;
  transition:background .12s ease,border-color .12s ease,color .12s ease;
}
body.ui2-practice-active .btn:hover{transform:none;filter:none}
body.ui2-practice-active .btn.primary{color:#fff;background:var(--ui2-brand);border:1px solid var(--ui2-brand)}
body.ui2-practice-active .btn.primary:hover{background:var(--ui2-brand-strong);border-color:var(--ui2-brand-strong)}
body.ui2-practice-active .btn.ghost,
body.ui2-practice-active .btn:not(.primary):not(.danger):not(.success){color:var(--ui2-text-2);background:#fff;border:1px solid var(--ui2-border)}
body.ui2-practice-active .btn.danger{color:var(--ui2-danger);background:#fff;border:1px solid #e8b6b3}
body.ui2-practice-active .btn.success{color:var(--ui2-success);background:var(--ui2-success-soft);border:1px solid #b9dfcf}
body.ui2-practice-active .btn:disabled{opacity:.48}
body.ui2-practice-active .math-view-switch{align-items:center;margin:8px 0 16px}
body.ui2-practice-active .math-view-switch .btn{min-height:34px;padding:6px 10px}
body.ui2-practice-active .math-mode-hint{color:var(--ui2-text-3);font-size:12px;font-weight:600}
body.ui2-practice-active .math-text-card{
  padding:18px;
  border:1px solid var(--ui2-border);
  border-radius:var(--ui2-radius-sm);
  background:var(--ui2-surface-2);
  line-height:1.9;
}

/* ---------- Side panel ---------- */
body.ui2-practice-active .side-panel{gap:12px;position:sticky;top:86px}
body.ui2-practice-active .timer-card,
body.ui2-practice-active .side-panel>.card,
body.ui2-practice-active .group-nav-card,
body.ui2-practice-active .article-nav-card{
  padding:16px;
  color:var(--ui2-text);
  background:var(--ui2-surface);
  border:1px solid var(--ui2-border);
  border-radius:var(--ui2-radius-md);
  box-shadow:none;
}
body.ui2-practice-active .timer-card span{color:var(--ui2-text-3);font-size:12px;font-weight:650}
body.ui2-practice-active .timer-card b{display:inline-block;margin-top:5px;color:var(--ui2-text);font-size:28px;font-variant-numeric:tabular-nums}
body.ui2-practice-active .side-panel .card h3{font-size:14px!important;color:var(--ui2-text);font-weight:760}
body.ui2-practice-active .side-panel .helper{color:var(--ui2-text-3);font-size:12px;line-height:1.6}
body.ui2-practice-active .mini-list,
body.ui2-practice-active .instant-progress-list{gap:6px}
body.ui2-practice-active .mini-dot,
body.ui2-practice-active .instant-step{
  width:31px;height:31px;
  border-radius:7px;
  color:var(--ui2-text-2);
  background:var(--ui2-surface-2);
  border:1px solid var(--ui2-border);
  box-shadow:none!important;
  font-size:11px;
  font-weight:700;
}
body.ui2-practice-active .mini-dot:hover{transform:none;border-color:#adc4e8}
body.ui2-practice-active .mini-dot.current,
body.ui2-practice-active .instant-step.current{
  color:#fff;
  background:var(--ui2-brand);
  border-color:var(--ui2-brand);
  box-shadow:none;
}
body.ui2-practice-active .mini-dot.right{color:var(--ui2-success);background:var(--ui2-success-soft);border-color:#bddfce}
body.ui2-practice-active .mini-dot.bad{color:var(--ui2-danger);background:var(--ui2-danger-soft);border-color:#e9bebc}
body.ui2-practice-active .mini-dot.unanswered{color:var(--ui2-warning);background:var(--ui2-warning-soft);border-color:#ead8ae}

/* ---------- Answer / Explanation 2.0 ---------- */
body.ui2-practice-active .answer-panel{
  margin-top:24px;
  padding-top:0;
  border-top:0;
  line-height:1.75;
}
body.ui2-practice-active .answer-panel.show{display:block}
.ui2-explanation{display:grid;gap:0;border-top:1px solid var(--ui2-border)}
.ui2-result-summary{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  padding:18px 0;
  border-bottom:1px solid var(--ui2-border);
}
.ui2-result-status{display:flex;align-items:center;gap:10px;min-width:120px;font-size:17px;font-weight:780}
.ui2-result-status:before{content:"";width:9px;height:9px;border-radius:50%;background:currentColor;flex:0 0 auto}
.ui2-result-status.ok{color:var(--ui2-success)}
.ui2-result-status.bad{color:var(--ui2-danger)}
.ui2-answer-facts{color:var(--ui2-text-2);font-size:14px;text-align:right;line-height:1.7}
.ui2-answer-facts b{color:var(--ui2-text)}
.ui2-explain-section{padding:20px 0;border-bottom:1px solid var(--ui2-border)}
.ui2-explain-section:last-child{border-bottom:0}
.ui2-explain-kicker{margin-bottom:6px;color:var(--ui2-text-3);font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.ui2-explain-title{margin:0 0 8px;color:var(--ui2-text);font-size:16px;font-weight:780;line-height:1.5}
.ui2-explain-body{color:var(--ui2-text-2);font-size:15px;line-height:1.82;white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word}
.ui2-explain-section.hint{padding-left:14px;border-left:3px solid #8eb1eb}
.ui2-explain-section.hint .ui2-explain-title{color:var(--ui2-brand-strong)}
.ui2-explain-section.concept{background:linear-gradient(90deg,var(--ui2-brand-soft),rgba(238,244,255,0));padding-left:14px}
.ui2-step-list{display:grid;gap:0}
.ui2-step{
  display:grid;
  grid-template-columns:30px minmax(0,1fr);
  gap:12px;
  padding:14px 0;
  border-bottom:1px solid #edf0f4;
}
.ui2-step:last-child{border-bottom:0;padding-bottom:0}
.ui2-step-index{display:grid;place-items:center;width:26px;height:26px;border-radius:7px;background:var(--ui2-surface-muted);color:var(--ui2-text-2);font-size:12px;font-weight:800}
.ui2-step-label{margin-bottom:4px;color:var(--ui2-text);font-size:13px;font-weight:780}
.ui2-step-body{color:var(--ui2-text-2);font-size:15px;line-height:1.78;white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word}
.ui2-explain-section.verify{background:var(--ui2-success-soft);padding:16px;border:1px solid #c9e6d8;border-radius:var(--ui2-radius-sm);margin:18px 0 0}
.ui2-explain-section.verify .ui2-explain-kicker,.ui2-explain-section.verify .ui2-explain-title{color:var(--ui2-success)}
.ui2-explain-section.takeaway{background:var(--ui2-surface-2);padding:16px;border-radius:var(--ui2-radius-sm);margin-top:18px;border:1px solid var(--ui2-border)}
.ui2-source{padding:14px 0 0;color:var(--ui2-text-3);font-size:12px;line-height:1.6}
.ui2-no-explanation{padding:16px 0;color:var(--ui2-text-3);font-size:13px}
body.ui2-practice-active .answer-imgs{margin-top:16px;padding-top:16px;border-top:1px solid var(--ui2-border)}
body.ui2-practice-active .answer-panel.ui2-subjective-result{
  padding:18px;
  background:var(--ui2-surface-2);
  border:1px solid var(--ui2-border);
  border-radius:var(--ui2-radius-md);
}
body.ui2-practice-active .copy-panel,
body.ui2-practice-active .math-fill-note{
  background:#fff;
  border:1px solid var(--ui2-border);
  border-radius:var(--ui2-radius-sm);
}
body.ui2-practice-active .keyword-chip{border-radius:6px}

/* ---------- Article / grouped material questions ---------- */
body.ui2-practice-active .article-question-block{
  margin:16px 0;
  padding:18px;
  background:#fff;
  border:1px solid var(--ui2-border);
  border-radius:var(--ui2-radius-md);
  box-shadow:none;
}
body.ui2-practice-active .article-question-block.answered{background:#fff}
body.ui2-practice-active .article-sub-status .badge{border-radius:6px}

/* ---------- Input / subjective ---------- */
body.ui2-practice-active .answer-textarea,
body.ui2-practice-active .score-input,
body.ui2-practice-active select,
body.ui2-practice-active input{
  border-radius:var(--ui2-radius-sm);
  border-color:var(--ui2-border);
  box-shadow:none;
}
body.ui2-practice-active .answer-textarea:focus,
body.ui2-practice-active .score-input:focus,
body.ui2-practice-active select:focus,
body.ui2-practice-active input:focus{
  border-color:#8eb1eb;
  box-shadow:0 0 0 3px rgba(31,99,215,.08);
}

/* ---------- Accessibility ---------- */
body.ui2-practice-active button:focus-visible,
body.ui2-practice-active select:focus-visible,
body.ui2-practice-active input:focus-visible,
body.ui2-practice-active textarea:focus-visible{
  outline:3px solid rgba(31,99,215,.25);
  outline-offset:2px;
}

@media(max-width:1000px){
  body.ui2-practice-active .practice-layout{grid-template-columns:minmax(0,1fr) 230px;gap:18px}
}
@media(max-width:900px){
  body.ui2-practice-active .app-shell{width:min(100% - 20px,1240px)!important}
  body.ui2-practice-active .topbar{position:static!important;background:transparent!important;border-bottom:0!important}
  body.ui2-practice-active .nav-tabs{
    position:static!important;width:100%!important;display:flex!important;
    gap:3px!important;padding:4px!important;border-radius:10px!important;
    background:#fff!important;border:1px solid var(--ui2-border)!important;
    box-shadow:none!important;backdrop-filter:none!important;
    justify-content:flex-start!important;overflow-x:auto!important;flex-wrap:nowrap!important;
  }
  body.ui2-practice-active .nav-btn{flex:0 0 auto!important;min-width:auto!important;padding:8px 10px!important;font-size:12px!important}
  body.ui2-practice-active .main-panel{padding:8px 0 28px!important;min-height:0!important}
  body.ui2-practice-active .practice-layout{grid-template-columns:1fr!important;gap:14px}
  body.ui2-practice-active .side-panel{position:static;display:grid;grid-template-columns:120px minmax(0,1fr);gap:10px;order:-1}
  body.ui2-practice-active .side-panel .timer-card{grid-column:1}
  body.ui2-practice-active .side-panel>.card{grid-column:2}
  body.ui2-practice-active .side-panel>.group-nav-card,
  body.ui2-practice-active .side-panel>.article-nav-card{grid-column:1 / -1}
}
@media(max-width:620px){
  body.ui2-practice-active{padding-bottom:0!important}
  body.ui2-practice-active .app-shell{width:100%!important;padding:0!important}
  body.ui2-practice-active .topbar{padding:10px 12px 8px!important;gap:8px!important}
  body.ui2-practice-active .brand-logo{width:36px;height:36px;border-radius:9px;font-size:17px}
  body.ui2-practice-active .brand h1{font-size:16px!important;line-height:1.2!important}
  body.ui2-practice-active .brand p{font-size:11px!important}
  body.ui2-practice-active .nav-tabs{width:100%!important}
  body.ui2-practice-active .main-panel{padding:8px 12px 28px!important}
  body.ui2-practice-active .progress-meta{font-size:12px;gap:12px}
  body.ui2-practice-active .progress-meta span:last-child{text-align:right}
  body.ui2-practice-active .question-card{padding:20px 16px;border-radius:10px}
  body.ui2-practice-active .question-top{margin-bottom:16px}
  body.ui2-practice-active .question-text,
  body.ui2-practice-active .stem-title{font-size:17px;line-height:1.72}
  body.ui2-practice-active .material-reading-box{max-height:none;padding:14px}
  body.ui2-practice-active .option,
  body.ui2-practice-active .article-option{min-height:48px;padding:12px 12px}
  body.ui2-practice-active .option-key{width:27px;height:27px;min-width:27px}
  body.ui2-practice-active .side-panel{grid-template-columns:102px minmax(0,1fr)}
  body.ui2-practice-active .timer-card,
  body.ui2-practice-active .side-panel>.card{padding:12px;border-radius:9px}
  body.ui2-practice-active .timer-card b{font-size:23px}
  body.ui2-practice-active .mini-dot,
  body.ui2-practice-active .instant-step{width:28px;height:28px;border-radius:6px}
  body.ui2-practice-active .footer-tools{align-items:stretch;gap:10px}
  body.ui2-practice-active .footer-tools>.actions{width:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  body.ui2-practice-active .footer-tools>.actions:first-child{grid-template-columns:repeat(3,minmax(0,1fr))}
  body.ui2-practice-active .footer-tools .btn{width:100%;padding:9px 8px;font-size:13px}
  .ui2-result-summary{display:block;padding:16px 0}
  .ui2-answer-facts{margin-top:8px;text-align:left}
  .ui2-explain-section{padding:17px 0}
  .ui2-step{grid-template-columns:26px minmax(0,1fr);gap:9px}
  .ui2-step-index{width:24px;height:24px}
  .ui2-explain-body,.ui2-step-body{font-size:14px;line-height:1.75}
  body.ui2-practice-active .article-question-block{padding:14px;border-radius:10px}
}
@media(max-width:390px){
  body.ui2-practice-active .footer-tools>.actions:first-child{grid-template-columns:1fr 1fr}
  body.ui2-practice-active .footer-tools>.actions:first-child .btn:last-child{grid-column:1 / -1}
}

/* ============================================================
   v5.4.2 — Legacy information architecture cleanup
   Keep capabilities; remove repeated explanations and visual noise.
   ============================================================ */

/* During an active answering session the global nav is already locked by v3.9.
   Hiding it prevents the disabled “首页/刷题/...” strip from consuming space. */
body.ui2-practice-active .nav-tabs{display:none!important}
body.ui2-practice-active .topbar{
  min-height:auto!important;
  align-items:center!important;
  justify-content:flex-start!important;
}

/* Legacy metadata is redundant with the actual question UI. */
body.ui2-practice-active .question-top.ui2-legacy-meta{display:none!important}
body.ui2-practice-active .batch-tip.ui2-legacy-tip,
body.ui2-practice-active .instant-tip.ui2-legacy-tip{display:none!important}
body.ui2-practice-active .math-mode-hint.ui2-legacy-math-hint{display:none!important}

/* One quiet mode label in the progress line replaces several badges + a notice box. */
body.ui2-practice-active .progress-meta{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
body.ui2-practice-active .progress-meta .ui2-mode-meta{
  margin-left:auto;
  color:var(--ui2-text-3);
  font-size:12px;
  font-weight:700;
  white-space:nowrap;
}

/* Knowledge mapping remains useful, but becomes metadata instead of a hero pill. */
body.ui2-practice-active .ui2-knowledge-meta{
  display:flex!important;
  flex-wrap:wrap!important;
  align-items:center!important;
  gap:6px!important;
  margin:2px 0 14px!important;
}
body.ui2-practice-active .ui2-knowledge-meta .knowledge-chip-v42,
body.ui2-practice-active .ui2-knowledge-meta button,
body.ui2-practice-active .ui2-knowledge-meta span{
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  color:var(--ui2-text-3)!important;
  box-shadow:none!important;
  font-size:12px!important;
  font-weight:650!important;
  line-height:1.55!important;
}
body.ui2-practice-active .ui2-knowledge-meta button{cursor:pointer!important;text-decoration:none!important}
body.ui2-practice-active .ui2-knowledge-meta button:hover{color:var(--ui2-brand-strong)!important;text-decoration:underline!important;text-underline-offset:3px}

/* Keep the valuable text/original-paper switch; make it a tiny segmented control. */
body.ui2-practice-active .math-view-switch.ui2-compact-view-switch{
  display:inline-flex!important;
  width:auto!important;
  gap:2px!important;
  margin:2px 0 14px!important;
  padding:3px!important;
  border:1px solid var(--ui2-border)!important;
  border-radius:9px!important;
  background:var(--ui2-surface-2)!important;
}
body.ui2-practice-active .math-view-switch.ui2-compact-view-switch .btn{
  width:auto!important;
  min-width:54px!important;
  min-height:30px!important;
  padding:5px 9px!important;
  border:0!important;
  border-radius:6px!important;
  font-size:12px!important;
}
body.ui2-practice-active .math-view-switch.ui2-compact-view-switch .btn:not(.primary){background:transparent!important}

/* Footer hierarchy: answer/navigation first, management actions second. */
body.ui2-practice-active .footer-tools{display:grid!important;gap:10px!important}
body.ui2-practice-active .footer-tools>.actions{display:flex!important;gap:8px!important;flex-wrap:wrap!important}
body.ui2-practice-active .footer-tools>.actions:last-child{
  padding-top:10px!important;
  border-top:1px solid #edf0f4!important;
}
body.ui2-practice-active .footer-tools>.actions:last-child .btn{
  min-height:34px!important;
  padding:6px 10px!important;
  font-size:12px!important;
  color:var(--ui2-text-3)!important;
  background:transparent!important;
  border-color:transparent!important;
}
body.ui2-practice-active .footer-tools>.actions:last-child .btn:hover{
  color:var(--ui2-text)!important;
  background:var(--ui2-surface-muted)!important;
}
body.ui2-practice-active .footer-tools>.actions:last-child .btn.success{color:var(--ui2-success)!important}

@media(max-width:900px){
  body.ui2-practice-active .topbar{padding:8px 10px!important}
  body.ui2-practice-active .brand{gap:9px!important}
  body.ui2-practice-active .brand-logo{width:34px!important;height:34px!important;border-radius:8px!important;font-size:16px!important}
  body.ui2-practice-active .brand h1{font-size:15px!important}
  body.ui2-practice-active .brand p{display:none!important}

  /* Compact session tool strip: time + horizontally scrollable question numbers. */
  body.ui2-practice-active .side-panel.ui2-session-tools{
    order:-1!important;
    display:flex!important;
    align-items:center!important;
    gap:10px!important;
    width:100%!important;
    padding:6px 0 10px!important;
    border-bottom:1px solid var(--ui2-border)!important;
    position:static!important;
  }
  body.ui2-practice-active .ui2-compact-timer{
    display:flex!important;
    align-items:center!important;
    flex:0 0 auto!important;
    padding:0!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
  }
  body.ui2-practice-active .ui2-compact-timer span,
  body.ui2-practice-active .ui2-compact-timer br{display:none!important}
  body.ui2-practice-active .ui2-compact-timer b{
    margin:0!important;
    font-size:13px!important;
    font-weight:760!important;
    color:var(--ui2-text-2)!important;
  }
  body.ui2-practice-active .ui2-compact-timer b:before{
    content:'⏱ ';
    color:var(--ui2-text-3);
    font-size:12px;
  }
  body.ui2-practice-active .ui2-progress-card{
    display:flex!important;
    align-items:center!important;
    flex:1 1 auto!important;
    min-width:0!important;
    padding:0!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    overflow:hidden!important;
  }
  body.ui2-practice-active .ui2-progress-card h3,
  body.ui2-practice-active .ui2-progress-card .helper{display:none!important}
  body.ui2-practice-active .ui2-progress-card .mini-list,
  body.ui2-practice-active .ui2-progress-card .instant-progress-list{
    display:flex!important;
    flex-wrap:nowrap!important;
    gap:5px!important;
    overflow-x:auto!important;
    scrollbar-width:none!important;
    padding:1px!important;
  }
  body.ui2-practice-active .ui2-progress-card .mini-list::-webkit-scrollbar,
  body.ui2-practice-active .ui2-progress-card .instant-progress-list::-webkit-scrollbar{display:none!important}
  body.ui2-practice-active .ui2-progress-card .mini-dot,
  body.ui2-practice-active .ui2-progress-card .instant-step{
    width:27px!important;height:27px!important;min-width:27px!important;
    border-radius:6px!important;
  }
  /* Group/material navigation is still semantically important; it remains a normal block. */
  body.ui2-practice-active .side-panel.ui2-session-tools>.group-nav-card,
  body.ui2-practice-active .side-panel.ui2-session-tools>.article-nav-card{
    flex:1 0 100%!important;
  }
}

@media(max-width:620px){
  body.ui2-practice-active .main-panel{padding:6px 12px 24px!important}
  body.ui2-practice-active .progress-wrap{margin-bottom:10px!important}
  body.ui2-practice-active .progress-meta{gap:6px!important}
  body.ui2-practice-active .progress-meta .ui2-mode-meta{margin-left:auto!important;font-size:11px!important}
  body.ui2-practice-active .question-card{padding-top:17px!important}
  body.ui2-practice-active .footer-tools>.actions{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  body.ui2-practice-active .footer-tools>.actions:first-child .btn:nth-child(3){grid-column:1 / -1}
  body.ui2-practice-active .footer-tools>.actions:last-child{display:flex!important;justify-content:space-between!important}
  body.ui2-practice-active .footer-tools>.actions:last-child .btn{width:auto!important;flex:0 0 auto!important}
}

@media(max-width:900px){
  body.ui2-practice-active .practice-layout{min-width:0!important;grid-template-columns:minmax(0,1fr)!important}
  body.ui2-practice-active .practice-layout>section,
  body.ui2-practice-active .side-panel.ui2-session-tools{min-width:0!important;max-width:100%!important;width:100%!important}
  body.ui2-practice-active .ui2-progress-card,
  body.ui2-practice-active .ui2-progress-card .mini-list,
  body.ui2-practice-active .ui2-progress-card .instant-progress-list{min-width:0!important;max-width:100%!important}
}


/* v5.4.2 mixed navigator type labels + mobile scroll continuity */
body.ui2-practice-active .mini-list{
  overscroll-behavior-inline:contain;
}
body.ui2-practice-active .mini-dot{
  width:44px;
  height:42px;
  min-width:44px;
  padding:4px 3px;
  display:grid;
  grid-template-rows:auto auto;
  place-items:center;
  align-content:center;
  line-height:1;
  flex:0 0 auto;
}
body.ui2-practice-active .mini-dot-num{
  display:block;
  font-size:11px;
  font-weight:800;
  line-height:1;
}
body.ui2-practice-active .mini-dot-kind{
  display:block;
  margin-top:3px;
  font-size:9px;
  font-weight:700;
  line-height:1;
  opacity:.72;
  white-space:nowrap;
}
body.ui2-practice-active .mini-dot.current .mini-dot-kind{opacity:.92}
@media(max-width:900px){
  body.ui2-practice-active .ui2-progress-card .mini-dot{
    width:42px!important;
    height:38px!important;
    min-width:42px!important;
    padding:3px 2px!important;
    border-radius:7px!important;
  }
  body.ui2-practice-active .ui2-progress-card .mini-dot-num{font-size:10px!important}
  body.ui2-practice-active .ui2-progress-card .mini-dot-kind{font-size:8px!important;margin-top:2px!important}
}


/* v7.2 grouped practice navigator */
body.ui2-practice-active .progress-card-grouped-v72{
  overflow:hidden;
}
body.ui2-practice-active .question-type-groups-v72{
  display:grid;
  gap:13px;
  margin-top:10px;
}
body.ui2-practice-active .question-type-group-v72{
  display:grid;
  gap:7px;
  padding-top:11px;
  border-top:1px solid var(--ui2-border);
}
body.ui2-practice-active .question-type-group-v72:first-child{
  padding-top:0;
  border-top:0;
}
body.ui2-practice-active .question-type-title-v72{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  color:var(--ui2-text-2);
  font-size:12px;
  font-weight:780;
  line-height:1.45;
}
body.ui2-practice-active .question-type-title-v72 span{
  color:var(--ui2-text-3);
  font-size:10px;
  font-weight:700;
  white-space:nowrap;
}
body.ui2-practice-active .question-type-group-v72.current .question-type-title-v72{
  color:var(--ui2-brand-strong);
}
body.ui2-practice-active .question-type-dots-v72{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
body.ui2-practice-active .grouped-mini-dot-v72{
  width:31px;
  height:31px;
  min-width:31px;
  padding:0;
  display:grid;
  place-items:center;
  grid-template-rows:1fr;
  flex:0 0 auto;
}
body.ui2-practice-active .grouped-mini-dot-v72 .mini-dot-num{
  font-size:11px;
  margin:0;
}
body.ui2-practice-active .grouped-mini-dot-v72.locked{
  cursor:default;
}

@media(max-width:900px){
  body.ui2-practice-active .ui2-progress-card.progress-card-grouped-v72{
    display:block!important;
    min-width:0!important;
    overflow-x:auto!important;
    scrollbar-width:none!important;
  }
  body.ui2-practice-active .ui2-progress-card.progress-card-grouped-v72::-webkit-scrollbar{
    display:none!important;
  }
  body.ui2-practice-active .progress-card-grouped-v72 .question-type-groups-v72{
    display:flex!important;
    flex-wrap:nowrap!important;
    align-items:flex-start!important;
    gap:14px!important;
    min-width:max-content!important;
    margin:0!important;
    padding:1px!important;
  }
  body.ui2-practice-active .progress-card-grouped-v72 .question-type-group-v72{
    min-width:max-content!important;
    padding:0 0 0 12px!important;
    border-top:0!important;
    border-left:1px solid var(--ui2-border)!important;
    gap:5px!important;
  }
  body.ui2-practice-active .progress-card-grouped-v72 .question-type-group-v72:first-child{
    padding-left:0!important;
    border-left:0!important;
  }
  body.ui2-practice-active .progress-card-grouped-v72 .question-type-title-v72{
    justify-content:flex-start!important;
    gap:6px!important;
    font-size:10px!important;
    white-space:nowrap!important;
  }
  body.ui2-practice-active .progress-card-grouped-v72 .question-type-title-v72 span{
    font-size:9px!important;
  }
  body.ui2-practice-active .progress-card-grouped-v72 .question-type-dots-v72{
    flex-wrap:nowrap!important;
    gap:5px!important;
  }
  body.ui2-practice-active .progress-card-grouped-v72 .grouped-mini-dot-v72{
    width:28px!important;
    height:28px!important;
    min-width:28px!important;
  }
}


/* 2026-10-09: English dialogue source, especially at phone widths.
   Display-only. The original question and answer keys remain unchanged. */
body.ui2-practice-active .english-dialogue-reading{
  max-height:none;
  white-space:normal;
  overflow:visible;
  overflow-wrap:break-word;
  word-break:normal;
}
body.ui2-practice-active .english-dialogue-layout{
  display:grid;
  gap:17px;
  min-width:0;
  font-size:15px;
  line-height:1.68;
}
body.ui2-practice-active .dialogue-source-heading{
  font-weight:750;
  font-size:13px;
  color:var(--ui2-text-3);
}
body.ui2-practice-active .dialogue-choice-list,
body.ui2-practice-active .dialogue-turn-list{
  display:grid;
  gap:9px;
  min-width:0;
}
body.ui2-practice-active .dialogue-choice{
  display:grid;
  grid-template-columns:28px minmax(0,1fr);
  gap:6px;
  padding:9px 11px;
  background:#fff;
  border:1px solid var(--ui2-border);
  border-radius:9px;
  align-items:start;
  min-width:0;
}
body.ui2-practice-active .dialogue-choice-key{
  color:var(--ui2-brand-strong);
  font-weight:800;
}
body.ui2-practice-active .dialogue-choice-text,
body.ui2-practice-active .dialogue-speech{
  min-width:0;
  overflow-wrap:break-word;
}
body.ui2-practice-active .dialogue-turn-list{
  border-top:1px solid var(--ui2-border);
  padding-top:15px;
}
body.ui2-practice-active .dialogue-turn{
  display:grid;
  grid-template-columns:minmax(72px,22%) minmax(0,1fr);
  align-items:start;
  gap:10px;
  min-width:0;
}
body.ui2-practice-active .dialogue-speaker{
  color:var(--ui2-brand-strong);
  font-weight:800;
  overflow-wrap:anywhere;
}
body.ui2-practice-active .dialogue-original-fallback{
  white-space:normal;
  overflow-wrap:break-word;
}
body.ui2-practice-active .dialogue-linebreak{display:block;height:0}
@media(max-width:600px){
  body.ui2-practice-active .english-dialogue-reading{
    padding:13px 12px;
    margin:12px 0 16px;
  }
  body.ui2-practice-active .english-dialogue-layout{gap:13px;font-size:14px;line-height:1.62}
  body.ui2-practice-active .dialogue-choice-list,
  body.ui2-practice-active .dialogue-turn-list{gap:8px}
  body.ui2-practice-active .dialogue-choice{padding:8px 9px;grid-template-columns:23px minmax(0,1fr);gap:5px}
  body.ui2-practice-active .dialogue-turn{grid-template-columns:72px minmax(0,1fr);gap:8px}
  body.ui2-practice-active .dialogue-turn-list{padding-top:12px}
}


/* English dialogues 1-8: I and II are separate, independently matched columns. */
body.ui2-practice-active .dialogue-matching-columns{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
  min-width:0;
}
body.ui2-practice-active .dialogue-match-column{min-width:0}
body.ui2-practice-active .dialogue-match-column h4{
  margin:0 0 10px;
  color:var(--ui2-brand-strong);
  font-size:13px;
  font-weight:800;
  line-height:1.5;
}
body.ui2-practice-active .english-dialogue-matching .dialogue-choice-list{
  align-content:start;
}
@media(max-width:620px){
  body.ui2-practice-active .dialogue-matching-columns{
    grid-template-columns:minmax(0,1fr);
    gap:19px;
  }
  body.ui2-practice-active .dialogue-match-column+.dialogue-match-column{
    padding-top:15px;
    border-top:1px solid var(--ui2-border);
  }
}

.practice-nav-pager-v1011{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:10px 0;color:var(--muted);font-size:12px}
.practice-nav-pager-v1011 label{display:inline-flex;align-items:center;gap:6px}
.practice-nav-pager-v1011 select{max-width:100%;min-width:120px;background:var(--panel-solid,#fff);border:1px solid var(--line);border-radius:10px;padding:7px 8px;color:var(--text);font:inherit}
.practice-nav-range-v1011{font-weight:800}
@media(max-width:700px){.practice-nav-pager-v1011{align-items:stretch;flex-direction:column}.practice-nav-pager-v1011 select{min-width:0;width:100%}}

/* 700-question navigation: keep range selection distinct from horizontal rail */
@media(max-width:900px){
  body.ui2-practice-active .ui2-progress-card:not(.progress-card-grouped-v72){
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    align-items:stretch!important;
    row-gap:3px!important;
  }
  body.ui2-practice-active .ui2-progress-card:not(.progress-card-grouped-v72)>.practice-nav-pager-v1011{
    width:100%!important;
    min-width:0!important;
    display:flex!important;
    flex-flow:row wrap!important;
    align-items:center!important;
    gap:6px!important;
    margin:0 0 4px!important;
  }
  body.ui2-practice-active .ui2-progress-card:not(.progress-card-grouped-v72)>.mini-list,
  body.ui2-practice-active .ui2-progress-card:not(.progress-card-grouped-v72)>.instant-progress-list{
    width:100%!important;
    min-width:0!important;
  }
  body.ui2-practice-active .progress-card-grouped-v72>.practice-nav-pager-v1011{
    position:sticky;
    left:0;
    width:max-content;
    max-width:100%;
    z-index:1;
    background:var(--ui2-surface,#fff);
  }
}

/* Continuous 700+ question scrolling, 42 mounted DOM cells. */
body.ui2-practice-active .ui2-progress-card .mini-list.practice-virtual-nav-v1012,
body.ui2-practice-active .progress-card-grouped-v72 .mini-list.practice-virtual-nav-v1012{
display:block!important;position:relative!important;overflow-x:auto!important;overflow-y:hidden!important;
width:100%!important;max-width:100%!important;min-width:0!important;flex:1 1 auto!important;
padding:2px 0!important;scrollbar-width:none!important;overscroll-behavior-x:contain!important;
touch-action:pan-x!important;}
body.ui2-practice-active .practice-virtual-nav-v1012::-webkit-scrollbar{display:none!important}
body.ui2-practice-active .practice-virtual-track-v1012{position:relative!important;height:46px!important}
body.ui2-practice-active .practice-virtual-window-v1012{position:absolute!important;left:0;top:0;display:flex!important;flex-wrap:nowrap!important;gap:5px!important;align-items:center!important;width:max-content!important}
body.ui2-practice-active .ui2-progress-card .practice-virtual-window-v1012 .mini-dot,
body.ui2-practice-active .ui2-progress-card .practice-virtual-window-v1012 .instant-step{
box-sizing:border-box!important;flex:0 0 48px!important;width:48px!important;min-width:48px!important;
max-width:48px!important;height:42px!important;min-height:42px!important;padding:3px 1px!important}
body.ui2-practice-active .practice-virtual-window-v1012 .mini-dot-kind{display:block!important;max-width:46px;overflow:hidden;white-space:nowrap;font-size:9px!important}
body.ui2-practice-active .practice-virtual-tools-v1012{display:flex!important;align-items:center!important;justify-content:space-between!important;flex-wrap:wrap!important;gap:4px 8px!important;max-width:100%!important;font-size:11px!important;margin-bottom:4px!important}
body.ui2-practice-active .practice-virtual-tools-v1012>span{font-weight:750;white-space:nowrap}
body.ui2-practice-active .practice-virtual-tools-v1012 label{display:flex;align-items:center;gap:5px;flex:1 1 110px;max-width:340px;font-size:10px!important}
body.ui2-practice-active .practice-virtual-tools-v1012 input[type=range]{width:100%;min-width:65px;min-height:24px;accent-color:var(--ui2-brand,#2563eb);box-shadow:none!important}
@media(max-width:900px){
body.ui2-practice-active .ui2-progress-card.practice-virtual-group-card-v1012{display:grid!important;grid-template-columns:minmax(0,1fr)!important;overflow:hidden!important;width:100%!important;min-width:0!important}
body.ui2-practice-active .practice-virtual-group-card-v1012 .practice-virtual-nav-v1012{min-width:0!important;max-width:100%!important}
body.ui2-practice-active .ui2-progress-card .practice-virtual-tools-v1012{width:100%!important;min-width:0!important}}