:root {
  --bg: #f5f7f4;
  --panel: rgba(255,255,255,.88);
  --panel-solid: #ffffff;
  --text: #14211b;
  --muted: #66756d;
  --line: #dde7df;
  --brand: #2f7d4f;
  --brand-2: #95c8a6;
  --brand-dark: #0f1f19;
  --warning: #b45309;
  --danger: #b91c1c;
  --shadow: 0 18px 48px rgba(15,31,25,.10);
  --radius: 22px;
}
* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  background: radial-gradient(circle at 15% -10%, #dff0e4 0, rgba(223,240,228,0) 34%), var(--bg);
  color: var(--text);
}
body.dark {
  --bg: #0b1511;
  --panel: rgba(17, 30, 25, .9);
  --panel-solid: #111e19;
  --text: #edf6ef;
  --muted: #a9b8b0;
  --line: #264238;
  --brand: #77c494;
  --brand-2: #315844;
  --shadow: 0 18px 48px rgba(0,0,0,.25);
}
button, input, textarea, select { font: inherit; }
button { cursor: pointer; border: 0; }
.app-shell { min-height: 100vh; display: grid; grid-template-columns: 280px 1fr; grid-template-rows: 74px 1fr; }
.topbar {
  position: sticky; top: 0; z-index: 20; grid-column: 1 / -1;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 12px 22px; background: rgba(15,31,25,.94); color: #fff; backdrop-filter: blur(16px);
}
.brand-wrap { display: flex; align-items: center; gap: 12px; min-width: 0; }
.brand-logo { width: 44px; height: 44px; border-radius: 14px; background: #fff; object-fit: cover; }
.brand-title { font-weight: 800; letter-spacing: .2px; }
.brand-subtitle { color: rgba(255,255,255,.72); font-size: 12px; margin-top: 2px; }
.topbar-actions { display: flex; align-items: center; gap: 10px; }
.sidebar { grid-row: 2; padding: 22px 18px; border-right: 1px solid var(--line); background: rgba(255,255,255,.58); backdrop-filter: blur(18px); }
body.dark .sidebar { background: rgba(12,24,19,.65); }
.side-section-title { font-size: 13px; color: var(--muted); font-weight: 800; margin: 0 8px 12px; letter-spacing: .12em; }
.nav-list { display: grid; gap: 8px; }
.nav-item { text-align: left; padding: 13px 14px; border-radius: 15px; background: transparent; color: var(--muted); font-weight: 700; }
.nav-item.active, .nav-item:hover { background: var(--panel-solid); color: var(--brand); box-shadow: 0 10px 26px rgba(47,125,79,.09); }
.side-card { margin-top: 20px; padding: 16px; border: 1px solid var(--line); border-radius: 18px; background: var(--panel); }
.side-card-title { font-weight: 800; margin-bottom: 8px; }
.api-url { color: var(--muted); word-break: break-all; font-size: 13px; margin-bottom: 12px; }
.main { grid-row: 2; min-width: 0; padding: 24px; }
.view { display: none; max-width: 1180px; margin: 0 auto; }
.view.active { display: block; }
.hero { position: relative; overflow: hidden; border-radius: 30px; padding: 28px; color: white; background: linear-gradient(135deg, #0f1f19, #235a3b 54%, #4e9967); box-shadow: var(--shadow); }
.hero:after { content:""; position:absolute; inset:auto -60px -90px auto; width:280px; height:280px; background:rgba(255,255,255,.12); border-radius:999px; }
.hero h1 { margin: 0 0 8px; font-size: clamp(26px, 5vw, 44px); }
.hero p { max-width: 760px; margin: 0; color: rgba(255,255,255,.78); line-height: 1.75; }
.grid { display: grid; gap: 16px; }
.grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin: 26px 0 14px; }
.eyebrow { font-size: 12px; letter-spacing: .16em; color: var(--brand); font-weight: 900; text-transform: uppercase; }
.section-title { margin: 4px 0 0; font-size: 24px; font-weight: 900; }
.card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); box-shadow: 0 12px 36px rgba(15,31,25,.06); padding: 18px; }
.click-card { transition: .18s ease; }
.click-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.category-card { display:flex; gap: 15px; min-height: 150px; }
.category-icon { flex: 0 0 54px; width:54px; height:54px; border-radius:18px; display:grid; place-items:center; background: #e5f4ea; color: var(--brand); font-size: 24px; font-weight: 900; }
body.dark .category-icon { background: #183529; }
.card-title { font-size: 19px; font-weight: 900; margin-bottom: 7px; }
.card-desc { color: var(--muted); line-height: 1.65; }
.chips { display:flex; flex-wrap:wrap; gap:8px; margin-top: 12px; }
.chip { padding: 6px 10px; border-radius: 999px; background: rgba(47,125,79,.10); color: var(--brand); font-size: 12px; font-weight: 800; }
.toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 14px 0; }
.input, .select, .textarea { width: 100%; border: 1px solid var(--line); background: var(--panel-solid); color: var(--text); border-radius: 14px; padding: 12px 13px; outline: none; }
.textarea { min-height: 130px; resize: vertical; line-height: 1.6; }
.input:focus, .select:focus, .textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 4px rgba(47,125,79,.12); }
.primary-btn, .ghost-btn, .danger-btn { border-radius: 13px; padding: 11px 15px; font-weight: 800; }
.primary-btn { background: var(--brand); color: white; }
.ghost-btn { background: var(--panel-solid); color: var(--text); border: 1px solid var(--line); }
.danger-btn { background: #fee2e2; color: var(--danger); }
.small { padding: 8px 11px; font-size: 13px; }
.full { width: 100%; }
.icon-btn { width:44px; height:44px; border-radius: 14px; background: rgba(255,255,255,.12); color:#fff; }
.lesson-layout { display:grid; grid-template-columns: 330px 1fr; gap: 18px; align-items:start; }
.list-panel { max-height: calc(100vh - 130px); overflow:auto; position: sticky; top: 96px; }
.unit-title { font-weight: 900; margin: 12px 0 8px; color: var(--muted); }
.lesson-item { width: 100%; display:block; text-align:left; padding: 11px 12px; margin: 6px 0; border-radius: 13px; background: transparent; color: var(--text); border: 1px solid transparent; }
.lesson-item.active, .lesson-item:hover { background: rgba(47,125,79,.10); border-color: rgba(47,125,79,.18); }
.lesson-title { font-size: clamp(24px, 4vw, 38px); margin: 0 0 8px; }
.meta-row { display:flex; flex-wrap:wrap; gap:8px; color: var(--muted); margin: 12px 0; }
.action-grid { display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px; margin: 18px 0; }
.result { white-space: pre-wrap; line-height: 1.78; overflow-wrap: anywhere; }
.result h1, .result h2, .result h3 { line-height: 1.3; }
.result table { width:100%; border-collapse: collapse; margin: 12px 0; }
.result th, .result td { border:1px solid var(--line); padding: 8px; vertical-align: top; }
.result code { background: rgba(127,127,127,.12); padding: 2px 5px; border-radius: 6px; }
.split { display:grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.file-box { border: 1px dashed var(--brand); background: rgba(47,125,79,.08); border-radius: 18px; padding: 18px; text-align: center; }
.mistake-item { display:flex; justify-content:space-between; gap:12px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.toast { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%) translateY(20px); background: #0f1f19; color: #fff; padding: 12px 16px; border-radius: 999px; opacity: 0; pointer-events:none; transition:.2s; z-index:100; max-width: calc(100vw - 32px); }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.drawer-mask { display:none; }
.desktop-hidden { display:none; }
.loading { opacity:.68; pointer-events:none; }
@media (max-width: 920px) {
  .app-shell { grid-template-columns: 1fr; grid-template-rows: 68px 1fr; }
  .desktop-hidden { display: inline-grid; place-items:center; }
  .topbar { padding: 10px 14px; }
  .brand-logo { width: 38px; height: 38px; border-radius: 12px; }
  .brand-subtitle { display:none; }
  .topbar-actions .ghost-btn { display:none; }
  .sidebar { position: fixed; left: 0; top: 68px; bottom: 0; width: 282px; transform: translateX(-105%); transition:.22s ease; z-index: 40; box-shadow: var(--shadow); }
  .sidebar.open { transform: translateX(0); }
  .drawer-mask.open { display:block; position: fixed; inset: 68px 0 0; background: rgba(0,0,0,.28); z-index: 30; }
  .main { grid-row: 2; padding: 14px; }
  .hero { border-radius: 24px; padding: 22px; }
  .grid.cols-3, .grid.cols-2, .split, .lesson-layout { grid-template-columns: 1fr; }
  .list-panel { position: static; max-height: 360px; }
  .action-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .section-head { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 520px) {
  .topbar-actions .primary-btn { padding: 8px 10px; font-size: 12px; }
  .category-card { min-height: auto; }
  .action-grid { grid-template-columns: 1fr; }
  .card { padding: 15px; border-radius: 18px; }
  .lesson-title { font-size: 25px; }
}

/* AI Markdown / Formula fixes */
.result .ai-color { font-weight: 700; }
.result .ai-blue { color: #2563eb; }
.result .ai-red { color: #dc2626; }
.result .ai-green { color: #15803d; }
.result .ai-yellow { color: #a16207; }
.result .md-li { margin: 6px 0 6px 1.1em; }
.result .md-li::before { content: '•'; margin-right: 0.5em; color: var(--accent); }
.result mjx-container { overflow-x: auto; overflow-y: hidden; max-width: 100%; padding: 2px 0; }
.result mjx-container[display="true"] { margin: 12px 0 !important; }

/* AI Markdown / Formula fixes */
.result .ai-color { font-weight: 700; }
.result .ai-blue { color: #2563eb; }
.result .ai-red { color: #dc2626; }
.result .ai-green { color: #15803d; }
.result .ai-yellow { color: #a16207; }
.result .md-li { margin: 6px 0 6px 1.1em; }
.result .md-li::before { content: '•'; margin-right: 0.5em; color: var(--accent); }
.result mjx-container { overflow-x: auto; overflow-y: hidden; max-width: 100%; padding: 2px 0; }
.result mjx-container[display="true"] { margin: 12px 0 !important; }

/* Mini-program style two-step course flow */
.course-stack { display: grid; gap: 16px; }
.mini-hero, .selected-hero {
  position: relative; overflow: hidden; border-radius: 30px; padding: 28px;
  color: #fff; background: linear-gradient(135deg, #0f1f19, #245a3b 55%, #5aa071);
  box-shadow: var(--shadow); margin-bottom: 18px;
}
.mini-hero .hero-glow { position:absolute; width:280px; height:280px; border-radius:999px; right:-80px; bottom:-120px; background:rgba(255,255,255,.13); }
.hero-topline { display:flex; align-items:center; gap:12px; margin-bottom:18px; }
.hero-logo { width:50px; height:50px; border-radius:16px; background:#fff; object-fit:cover; }
.brand-big { font-size:24px; font-weight:900; letter-spacing:.2px; }
.brand-mini { color:rgba(255,255,255,.72); font-size:13px; margin-top:2px; }
.mini-hero h1, .selected-hero h1 { margin:0 0 10px; font-size:clamp(28px,5vw,46px); line-height:1.12; }
.mini-hero p, .selected-hero p { max-width:760px; margin:0; color:rgba(255,255,255,.78); line-height:1.75; }
.hero-stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-top:22px; max-width:520px; }
.hero-stats div { border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.10); border-radius:18px; padding:12px; }
.hero-stats b { display:block; font-size:26px; }
.hero-stats span { color:rgba(255,255,255,.72); font-size:12px; }
.course-card { position:relative; overflow:hidden; border:1px solid var(--line); border-radius:24px; background:var(--panel); padding:18px; display:flex; align-items:center; gap:16px; box-shadow:0 12px 36px rgba(15,31,25,.06); cursor:pointer; transition:.18s ease; }
.course-card:hover { transform:translateY(-2px); box-shadow:var(--shadow); border-color:rgba(47,125,79,.26); }
.course-card-bg { position:absolute; inset:auto -60px -80px auto; width:190px; height:190px; background:rgba(47,125,79,.08); border-radius:999px; }
.category-icon.xl { flex:0 0 62px; width:62px; height:62px; border-radius:22px; font-size:28px; z-index:1; }
.course-main { min-width:0; flex:1; position:relative; z-index:1; }
.course-topline, .course-meta-row { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.course-badge, .count-pill, .meta-chip { padding:6px 10px; border-radius:999px; font-size:12px; font-weight:900; }
.course-badge { background:rgba(47,125,79,.11); color:var(--brand); letter-spacing:.08em; }
.count-pill { background:var(--panel-solid); color:var(--muted); border:1px solid var(--line); }
.course-name { font-size:22px; font-weight:950; margin:10px 0 6px; }
.course-desc { color:var(--muted); line-height:1.65; }
.meta-chip { margin-top:10px; background:rgba(47,125,79,.08); color:var(--brand); }
.course-cta { position:relative; z-index:1; display:flex; align-items:center; gap:10px; color:var(--brand); font-weight:900; }
.course-cta b { font-size:32px; line-height:1; }
.section-note { color:var(--muted); font-size:13px; }
.selected-hero { display:flex; align-items:center; justify-content:space-between; gap:18px; }
.hero-actions { display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end; }
.lesson-workbench .tabs { display:flex; gap:8px; overflow:auto; padding-bottom:4px; margin-bottom:16px; }
.lesson-workbench .tab { white-space:nowrap; padding:10px 14px; border-radius:999px; background:var(--panel-solid); border:1px solid var(--line); color:var(--muted); font-weight:900; }
.lesson-workbench .tab.active, .lesson-workbench .tab:hover { color:#fff; background:var(--brand); border-color:var(--brand); }
.lecture-top { display:flex; justify-content:space-between; gap:14px; margin:8px 0 14px; }
.h2 { font-size:22px; font-weight:950; }
.muted { color:var(--muted); line-height:1.65; }
.lecture-level-panel { border:1px solid var(--line); background:rgba(47,125,79,.06); border-radius:18px; padding:14px; margin:12px 0 14px; }
.lecture-level-head { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:10px; }
.sub-h2 { font-weight:950; }
.level-current { color:var(--brand); font-size:13px; font-weight:900; }
.level-tabs { display:flex; gap:8px; flex-wrap:wrap; }
.level-pill { padding:9px 14px; border-radius:999px; background:var(--panel-solid); color:var(--text); border:1px solid var(--line); font-weight:900; }
.level-pill.active { background:var(--brand); color:#fff; border-color:var(--brand); }
.level-desc { color:var(--muted); margin-top:10px; line-height:1.65; font-size:13px; }
.lecture-paper { background:var(--panel-solid); border-radius:18px; padding:18px; border:1px solid var(--line); }
.section-head.compact { margin-top:18px; }
@media (max-width: 920px) {
  .selected-hero { align-items:flex-start; flex-direction:column; }
  .hero-actions { justify-content:flex-start; }
  .hero-stats { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .course-card { align-items:flex-start; }
  .course-cta span { display:none; }
  .ask-split { grid-template-columns:1fr; }
}
@media (max-width: 520px) {
  .mini-hero, .selected-hero { border-radius:24px; padding:22px; }
  .hero-stats { grid-template-columns:1fr; }
  .course-card { border-radius:20px; padding:15px; }
  .category-icon.xl { flex-basis:52px; width:52px; height:52px; border-radius:18px; font-size:23px; }
  .course-name { font-size:19px; }
}


/* ===== English module restored from mini-program logic ===== */
.english-hero { background: linear-gradient(135deg, rgba(24, 86, 64, .12), rgba(255, 255, 255, .78)); border: 1px solid rgba(14, 92, 68, .12); }
.english-tabs { display: flex; gap: 10px; margin: 14px 0 18px; overflow-x: auto; padding-bottom: 4px; }
.english-tab { border: 1px solid rgba(13, 72, 55, .14); background: rgba(255,255,255,.82); border-radius: 999px; padding: 10px 16px; font-weight: 800; color: var(--text); white-space: nowrap; cursor: pointer; }
.english-tab.active { background: var(--green); color: #fff; box-shadow: 0 10px 22px rgba(22, 99, 74, .20); }
.english-grid { display: grid; grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); gap: 16px; align-items: start; }
.english-control-card label { display: block; margin-top: 12px; margin-bottom: 6px; font-weight: 800; color: var(--text); }
.english-meta { margin-top: 12px; font-size: 13px; color: var(--muted); }
.english-practice-card { min-height: 420px; }
.word-stage-card { border-radius: 24px; padding: 20px; background: linear-gradient(180deg, rgba(247, 253, 249, .96), rgba(255,255,255,.92)); border: 1px solid rgba(14, 92, 68, .10); }
.word-progress { display: flex; justify-content: space-between; gap: 12px; color: var(--muted); font-size: 13px; font-weight: 800; }
.word-main { margin-top: 18px; font-size: clamp(34px, 7vw, 68px); line-height: 1; font-weight: 900; letter-spacing: -0.045em; color: var(--green); word-break: break-word; }
.word-phonetic { margin-top: 10px; color: var(--muted); font-size: 15px; }
.word-meaning { margin-top: 16px; font-size: 18px; font-weight: 800; color: var(--text); }
.word-note { margin-top: 10px; color: var(--muted); line-height: 1.7; }
.word-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.typing-box { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; margin-top: 14px; }
.word-input { font-size: 18px; font-weight: 800; }
.word-feedback { margin-top: 14px; display: none; border-radius: 18px; background: rgba(16, 88, 67, .06); padding: 14px; border: 1px solid rgba(16, 88, 67, .10); }
.word-feedback.show { display: block; }
.english-empty { text-align: center; padding: 48px 16px; color: var(--muted); }
.empty-icon { width: 76px; height: 76px; border-radius: 24px; margin: 0 auto 16px; display: grid; place-items: center; background: rgba(22, 99, 74, .10); color: var(--green); font-size: 30px; font-weight: 900; }
.speaking-question { border-radius: 22px; padding: 18px; background: rgba(22, 99, 74, .06); border: 1px solid rgba(22, 99, 74, .10); margin-bottom: 14px; }
.speaking-question h2 { margin: 8px 0; line-height: 1.35; }
.speaking-answer { min-height: 180px; }
body.dark .english-tab { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.12); }
body.dark .word-stage-card, body.dark .speaking-question { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.10); }
body.dark .word-feedback { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.10); }
@media (max-width: 820px) {
  .english-grid { grid-template-columns: 1fr; }
  .typing-box { grid-template-columns: 1fr; }
  .word-main { font-size: 48px; }
}

/* ===== UI polish: mini-program-like single English entry ===== */
:root {
  --soft-bg: #f6f8f5;
  --green: #21724f;
  --green-2: #64a77b;
  --cream: #fffaf0;
}
body { background: radial-gradient(circle at 18% 8%, rgba(98, 167, 123, .16), transparent 34%), linear-gradient(180deg, #f7faf6 0%, #eef5ef 100%); }
.topbar { backdrop-filter: blur(18px); background: rgba(255,255,255,.76); border-bottom: 1px solid rgba(34, 93, 65, .10); }
.sidebar { background: rgba(255,255,255,.76); backdrop-filter: blur(20px); border-right: 1px solid rgba(34, 93, 65, .10); }
.nav-item { border-radius: 18px; min-height: 46px; font-weight: 900; letter-spacing: .01em; }
.nav-item.active { background: linear-gradient(135deg, #1f6e4b, #6aaa7d); box-shadow: 0 14px 30px rgba(31, 110, 75, .22); }
.main { padding-top: 22px; }
.mini-hero, .selected-hero { background: linear-gradient(135deg, #10251c 0%, #1f6e4b 54%, #85ba83 100%); border: 1px solid rgba(255,255,255,.20); box-shadow: 0 24px 60px rgba(15,31,25,.16); }
.mini-hero::after { content: ''; position: absolute; inset: auto -60px -80px auto; width: 260px; height: 260px; border-radius: 999px; background: rgba(255,255,255,.12); }
.course-stack { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.course-card { min-height: 138px; background: rgba(255,255,255,.88); backdrop-filter: blur(14px); border-color: rgba(26, 93, 62, .10); }
.course-card:hover { transform: translateY(-4px); }
.category-icon.xl { background: linear-gradient(135deg, rgba(33, 114, 79, .12), rgba(255, 255, 255, .92)); box-shadow: inset 0 0 0 1px rgba(33,114,79,.08); }
.course-name { letter-spacing: -.02em; }
.course-cta { background: rgba(33,114,79,.08); border: 1px solid rgba(33,114,79,.10); border-radius: 999px; padding: 8px 12px; }
.selected-hero.polished-english-hero { background: linear-gradient(135deg, #17233f 0%, #1f7154 58%, #8bc77e 100%); }
.english-shell { border-radius: 28px; border: 1px solid rgba(25, 95, 67, .10); background: rgba(255,255,255,.62); box-shadow: 0 16px 45px rgba(15, 31, 25, .06); padding: 16px; }
.english-tabs { margin: 0 0 16px; background: rgba(240,247,242,.8); border: 1px solid rgba(25,95,67,.08); padding: 6px; border-radius: 999px; width: fit-content; max-width: 100%; }
.english-tab { border: 0; background: transparent; color: #537063; padding: 11px 18px; }
.english-tab.active { background: #fff; color: var(--green); box-shadow: 0 10px 26px rgba(31, 110, 75, .12); }
.english-grid { grid-template-columns: 320px minmax(0, 1fr); }
.english-control-card, .english-practice-card, .card { background: rgba(255,255,255,.86); backdrop-filter: blur(14px); border-color: rgba(27, 89, 61, .10); }
.word-stage-card { background: linear-gradient(135deg, #fffdf8 0%, #f0f8f2 100%); border: 1px solid rgba(33,114,79,.12); box-shadow: inset 0 1px 0 rgba(255,255,255,.9); }
.word-main { color: #1f6e4b; text-shadow: 0 14px 30px rgba(31,110,75,.10); }
.ghost-btn.light { color: #fff; background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.28); }
.ghost-btn.light:hover { background: rgba(255,255,255,.22); }
body.dark .topbar, body.dark .sidebar, body.dark .english-shell, body.dark .course-card, body.dark .card { background: rgba(22,28,25,.78); border-color: rgba(255,255,255,.10); }
body.dark .english-tabs { background: rgba(255,255,255,.06); }
body.dark .english-tab.active { background: rgba(255,255,255,.12); color: #aee0bc; }
@media (max-width: 980px) { .course-stack { grid-template-columns: 1fr; } .english-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .english-shell { padding: 10px; border-radius: 22px; } .english-tabs { width: 100%; border-radius: 18px; } .english-tab { flex: 1; text-align: center; padding: 10px 12px; } .course-cta { display: none; } }

/* Final formula rendering cleanup */
.result { white-space: normal; }
.result .math-block {
  display: block;
  overflow-x: auto;
  max-width: 100%;
  margin: 12px 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(47,125,79,.06);
  border: 1px solid rgba(47,125,79,.16);
  color: var(--text);
  font-weight: 600;
}
.result .math-inline {
  display: inline-block;
  max-width: 100%;
  overflow-x: auto;
  vertical-align: middle;
  color: var(--text);
  font-weight: 600;
}
.result .math-fallback {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  white-space: normal;
  color: var(--text);
}
.result .ai-orange { color: #c2410c; font-weight: 800; }
.result .ai-color .math-inline,
.result .ai-color .math-block { color: inherit; }

/* ===== H5 与微信小程序体验对齐补丁 2026-06-11 ===== */
:root {
  --mini-bg-top: #f6fbf7;
  --mini-bg-mid: #f8fafc;
  --mini-bg-end: #f6f7f4;
  --mini-title: #0f1f19;
  --mini-text: #1f2937;
  --mini-muted: #64748b;
  --mini-green: #166534;
  --mini-green-2: #2f7d4f;
  --mini-green-soft: #ecfdf5;
  --mini-line: #d9eadf;
  --mini-card-shadow: 0 4px 20px rgba(0, 0, 0, .04), 0 0 1px rgba(0, 0, 0, .10);
}
html { min-height: 100%; background: var(--mini-bg-end); }
body {
  min-height: 100%;
  background:
    radial-gradient(circle at 18% 0%, rgba(187, 247, 208, .42) 0, rgba(187, 247, 208, 0) 360px),
    linear-gradient(180deg, var(--mini-bg-top) 0%, var(--mini-bg-mid) 46%, var(--mini-bg-end) 100%);
  color: var(--mini-text);
  -webkit-tap-highlight-color: transparent;
}
body.dark {
  --mini-bg-top: #0b1511;
  --mini-bg-mid: #0f1f19;
  --mini-bg-end: #101915;
  --mini-title: #edf6ef;
  --mini-text: #edf6ef;
  --mini-muted: #a9b8b0;
  --mini-line: #264238;
}
.app-shell {
  min-height: 100vh;
  display: block;
  padding-top: calc(64px + env(safe-area-inset-top));
  padding-bottom: calc(76px + env(safe-area-inset-bottom));
}
.topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: calc(64px + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) 18px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0f1f19;
  color: #fff;
  border-bottom: 0;
  box-shadow: 0 6px 18px rgba(15, 31, 25, .18);
  z-index: 1000;
}
.brand-wrap { gap: 10px; }
.brand-logo { width: 38px; height: 38px; border-radius: 12px; background: #fff; }
.brand-title { font-size: 16px; font-weight: 900; line-height: 1.1; }
.brand-subtitle { font-size: 11px; color: rgba(255,255,255,.72); }
.topbar-actions, .desktop-hidden, .side-section-title, .side-card, .drawer-mask { display: none !important; }
.sidebar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: auto;
  width: auto;
  height: calc(66px + env(safe-area-inset-bottom));
  padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
  border-right: 0;
  border-top: 1px solid rgba(0,0,0,.12);
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  z-index: 1000;
  transform: none !important;
  box-shadow: 0 -6px 22px rgba(15,31,25,.08);
}
body.dark .sidebar { background: rgba(17, 30, 25, .96); border-top-color: rgba(255,255,255,.10); }

.app-shell.topbar-hidden {
  padding-top: env(safe-area-inset-top);
}
.app-shell.topbar-hidden .topbar,
.topbar.is-hidden {
  display: none !important;
}
@media (max-width: 520px) {
  .app-shell.topbar-hidden {
    padding-top: env(safe-area-inset-top);
  }
}
.nav-list {
  height: 100%;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  max-width: 760px;
  margin: 0 auto;
}
.nav-item {
  min-height: 52px;
  padding: 4px 2px;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  color: #6b7280;
  background: transparent;
  box-shadow: none;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.1;
}
.nav-item .tab-ico {
  min-width: 24px;
  height: 24px;
  padding: 0 6px;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  background: transparent;
  color: inherit;
  font-size: 13px;
  font-weight: 950;
}
.nav-item.active,
.nav-item:hover {
  background: transparent;
  color: var(--mini-green-2);
  box-shadow: none;
}
.nav-item.active .tab-ico {
  color: #fff;
  background: linear-gradient(135deg, #166534 0%, #2f7d4f 100%);
  box-shadow: 0 8px 18px rgba(22, 101, 52, .18);
}
.main {
  max-width: 760px;
  margin: 0 auto;
  padding: 14px 12px 24px;
}
.view { max-width: none; }
.card,
.course-card,
.english-control-card,
.english-practice-card {
  background: #ffffff;
  border: none;
  border-radius: 24px;
  box-shadow: var(--mini-card-shadow);
}
.card { padding: 18px; margin-bottom: 14px; }
.section-head {
  margin: 22px 2px 12px;
  align-items: flex-end;
}
.eyebrow,
.section-eyebrow {
  font-size: 12px;
  letter-spacing: .16em;
  color: var(--mini-green-2);
  font-weight: 950;
}
.section-title {
  color: var(--mini-title);
  font-size: 24px;
  font-weight: 950;
  line-height: 1.28;
}
.card-title,
.h2 { color: var(--mini-title); font-weight: 950; }
.card-desc,
.muted,
.section-note { color: var(--mini-muted); line-height: 1.72; }
.mini-hero,
.selected-hero {
  border-radius: 24px;
  padding: 22px;
  margin-bottom: 14px;
  background: linear-gradient(135deg, #0f1f19 0%, #166534 58%, #4e9967 100%);
  border: none;
  box-shadow: 0 16px 40px rgba(15, 31, 25, .18);
}
.hero-logo { width: 46px; height: 46px; border-radius: 16px; }
.brand-big { font-size: 23px; }
.mini-hero h1,
.selected-hero h1 {
  font-size: 29px;
  letter-spacing: -.02em;
  line-height: 1.18;
}
.hero-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 20px;
}
.hero-stats div {
  padding: 12px 8px;
  border-radius: 18px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18);
}
.hero-stats b { font-size: 26px; }
.course-stack { display: grid; grid-template-columns: 1fr; gap: 12px; }
.course-card {
  min-height: auto;
  padding: 18px;
  align-items: center;
  border: 1px solid #dfeee5;
  box-shadow: 0 10px 28px rgba(15, 23, 42, .05);
}
.course-card:hover { transform: translateY(-2px); }
.category-icon,
.category-icon.xl {
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  border-radius: 20px;
  display: grid;
  place-items: center;
  color: var(--mini-green-2);
  background: var(--mini-green-soft);
  font-size: 25px;
  font-weight: 950;
}
.course-badge,
.badge {
  background: var(--mini-green-soft);
  color: var(--mini-green);
  border: 1px solid #bbf7d0;
}
.count-pill,
.meta-chip,
.chip {
  background: #f3f7f4;
  color: #334155;
  border: 1px solid #e2e8e4;
}
.course-name { font-size: 20px; color: #111827; font-weight: 950; }
.course-desc { font-size: 14px; color: var(--mini-muted); line-height: 1.65; }
.course-cta { display: none; }
.selected-hero {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
}
.hero-actions { justify-content: flex-start; }
.primary-btn,
.ghost-btn,
.danger-btn,
.btn,
.mini-btn,
.level-pill,
.tab,
.english-tab {
  min-height: 38px;
  border-radius: 999px;
  font-weight: 900;
}
.primary-btn,
.btn {
  background: linear-gradient(135deg, #166534 0%, #2f7d4f 100%);
  box-shadow: 0 10px 22px rgba(22, 101, 52, .16);
}
.ghost-btn,
.btn.ghost {
  background: #ffffff;
  color: #334155;
  border: 1px solid #dbe3dd;
}
.input,
.select,
.textarea {
  border: 1px solid #d8e2dc;
  border-radius: 18px;
  background: #ffffff;
  font-size: 16px;
}
.textarea { min-height: 118px; }
.lesson-layout,
.mini-lesson-layout,
.grid.cols-2,
.grid.cols-3,
.split,
.english-grid { grid-template-columns: 1fr !important; }
.list-panel {
  position: static;
  max-height: 310px;
  overflow: auto;
  padding: 14px;
}
.lesson-item {
  padding: 12px 13px;
  border-radius: 14px;
  margin: 6px 0;
  border: 1px solid transparent;
}
.lesson-item.active {
  background: #ecfdf5;
  border-color: #bbf7d0;
  color: var(--mini-green);
}
.lesson-workbench .tabs,
.tabs,
.english-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 0 0 8px;
  background: transparent;
  border: 0;
  width: 100%;
}
.lesson-workbench .tab,
.tab,
.english-tab {
  flex-shrink: 0;
  padding: 10px 16px;
  background: #f3f7f4;
  color: #334155;
  border: 1px solid #e2e8e4;
}
.lesson-workbench .tab.active,
.tab.active,
.english-tab.active {
  background: var(--mini-green);
  color: #fff;
  border-color: var(--mini-green);
  box-shadow: 0 8px 18px rgba(22, 101, 52, .18);
}
.lecture-paper,
.ai-result,
.rich-box,
.problem-box,
.word-feedback {
  background: #fffefa;
  border: 1px solid #efe7d0;
  border-radius: 20px;
  color: var(--mini-text);
  line-height: 1.85;
}
.result { font-size: 16px; line-height: 1.85; }
.word-stage-card,
.speaking-question {
  border-radius: 22px;
  background: #f8fbf8;
  border: 1px solid #d9eadf;
}
.word-main { color: var(--mini-green); }
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(86px + env(safe-area-inset-bottom));
  transform: translateX(-50%) translateY(20px);
  z-index: 2000;
}
.floating-ai-root {
  position: fixed;
  right: 14px;
  bottom: calc(84px + env(safe-area-inset-bottom));
  z-index: 9999;
}
.floating-ai-root.expanded-root {
  left: auto;
  right: 12px;
  top: auto;
  bottom: calc(70px + env(safe-area-inset-bottom));
  display: block;
}
.ai-ball {
  width: 64px;
  height: 64px;
  border-radius: 999px;
  background: linear-gradient(135deg, #166534 0%, #22c55e 100%);
  color: #fff;
  box-shadow: 0 7px 17px rgba(22, 101, 52, .32);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.ai-ball-main { font-size: 18px; font-weight: 950; line-height: 1; }
.ai-ball-sub { margin-top: 2px; font-size: 12px; opacity: .9; }
.ai-panel {
  width: 325px;
  max-width: calc(100vw - 24px);
  max-height: min(78vh, 560px);
  overflow: auto;
  padding: 12px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid #d9eadf;
  box-shadow: 0 12px 32px rgba(15, 23, 42, .22);
}
.ai-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.ai-title { color: var(--mini-title); font-size: 16px; font-weight: 950; }
.ai-scope {
  display: inline-block;
  margin-top: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #ecfdf5;
  color: #166534;
  font-size: 11px;
  font-weight: 900;
}
.ai-context { margin-top: 3px; color: #64748b; font-size: 12px; line-height: 1.45; }
.ai-close,
.ai-btn {
  border: 0;
  border-radius: 999px;
  font-weight: 900;
}
.ai-close { min-width: 52px; height: 28px; background: #f3f4f6; color: #374151; font-size: 12px; }
.ai-textarea {
  margin-top: 10px;
  width: 100%;
  min-height: 86px;
  padding: 10px;
  border-radius: 14px;
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  font-size: 14px;
  line-height: 1.65;
}
.ai-actions { display: flex; gap: 8px; margin-top: 8px; }
.ai-btn { flex: 1; min-height: 34px; background: #166534; color: #fff; font-size: 13px; }
.ai-btn.ghost { background: #f3f4f6; color: #374151; }
.ai-panel .ai-result { margin-top: 10px; padding: 10px; font-size: 14px; }
@media (min-width: 900px) {
  .app-shell { max-width: 820px; margin: 0 auto; box-shadow: 0 0 0 1px rgba(15,31,25,.08), 0 24px 80px rgba(15,31,25,.10); }
  .topbar, .sidebar { left: 50%; transform: translateX(-50%) !important; max-width: 820px; }
  .floating-ai-root { right: calc((100vw - 820px) / 2 + 18px); }
  .floating-ai-root.expanded-root { left: auto; right: calc((100vw - 820px) / 2 + 12px); }
}
@media (max-width: 520px) {
  .app-shell { padding-top: calc(58px + env(safe-area-inset-top)); }
  .topbar { height: calc(58px + env(safe-area-inset-top)); }
  .main { padding: 12px 10px 20px; }
  .card { padding: 16px; border-radius: 20px; }
  .mini-hero, .selected-hero { padding: 20px; }
  .mini-hero h1, .selected-hero h1 { font-size: 26px; }
  .hero-stats { grid-template-columns: repeat(3, 1fr); }
  .hero-stats div { padding: 10px 6px; }
  .hero-stats b { font-size: 22px; }
  .course-card { padding: 15px; border-radius: 22px; }
  .category-icon, .category-icon.xl { width: 52px; height: 52px; flex-basis: 52px; font-size: 23px; }
  .nav-item { font-size: 11px; }
}
@media (min-width: 900px) {
  .topbar, .sidebar { right: auto; width: 100%; }
}

/* MINI_SELECTABLE_RICH_AND_FLOATING_AI_20260611 */
.ai-ball.folded {
  width: 56px;
  height: 56px;
  border-radius: 28px 0 0 28px;
  opacity: .98;
  box-shadow: 0 6px 16px rgba(22, 101, 52, .28);
}
.ai-ball.dragging {
  width: 64px;
  height: 64px;
  border-radius: 999px;
  opacity: 1;
}
.ai-ball.folded .ai-ball-sub { display: none; }
.ai-mistake-tools { margin-top: 8px; }
.ai-btn.mistake { width: 100%; background: #b45309; color: #fff; }

.selectable-rich-root {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.selectable-rich-segment {
  position: relative;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  border-radius: 9px;
  margin: 1px 0 4px;
  padding: 1px 2px;
  border: 1px solid transparent;
  transition: background-color .16s ease, border-color .16s ease, box-shadow .16s ease;
  touch-action: manipulation;
}
.selectable-rich-segment.selected {
  background: rgba(254, 243, 199, .72);
  border-color: #f59e0b;
  box-shadow: 0 4px 11px rgba(245, 158, 11, .12);
}
.selectable-rich-segment.formula-segment.selected {
  background: rgba(219, 234, 254, .78);
  border-color: #60a5fa;
  box-shadow: 0 4px 11px rgba(37, 99, 235, .10);
}
.selectable-rich-content.result {
  margin: 0;
  padding: 0;
  white-space: normal;
  overflow-wrap: anywhere;
}
.selectable-rich-content.result > p { margin: 0; }
.selection-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding: 6px 5px 5px;
  border-top: 1px solid rgba(245, 158, 11, .28);
}
.selection-count {
  height: 27px;
  line-height: 27px;
  padding: 0 7px;
  border-radius: 999px;
  background: #fffbeb;
  color: #92400e;
  border: 1px solid #fde68a;
  font-size: 12px;
  font-weight: 950;
}
.selection-btn {
  min-width: 0;
  min-height: 27px;
  line-height: 27px;
  padding: 0 9px;
  margin: 0;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  background: #fff;
  color: #334155;
  border: 1px solid #dbe3dd;
}
.selection-btn.primary { background: #166534; color: #fff; border-color: #166534; }
.selection-btn.warn { background: #fff7ed; color: #c2410c; border-color: #fed7aa; }
.selection-btn.ghost { background: #f8fafc; color: #64748b; border-color: #e2e8f0; }
.selection-ai-card {
  margin: 5px 4px 6px;
  padding: 9px;
  border-radius: 9px;
  background: #fff;
  border: 1px solid #dbeafe;
  box-shadow: 0 3px 9px rgba(37, 99, 235, .08);
}
.selection-ai-title {
  margin-bottom: 4px;
  color: #1d4ed8;
  font-size: 13px;
  font-weight: 950;
  line-height: 1.35;
}
.selection-empty {
  color: #94a3b8;
  font-size: 13px;
  line-height: 1.6;
}
.selection-dialog-mask {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 3000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 12px;
  background: rgba(15, 23, 42, .36);
  box-sizing: border-box;
}
.selection-dialog {
  width: 100%;
  max-width: 680px;
  box-sizing: border-box;
  border-radius: 15px;
  padding: 13px;
  background: #fff;
  box-shadow: 0 13px 40px rgba(15, 23, 42, .24);
}
.selection-dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 9px;
}
.selection-dialog-title {
  color: #0f172a;
  font-size: 16px;
  line-height: 1.35;
  font-weight: 950;
}
.selection-dialog-close {
  width: 28px;
  height: 28px;
  line-height: 24px;
  text-align: center;
  border-radius: 999px;
  color: #64748b;
  background: #f1f5f9;
  border: 0;
  font-size: 22px;
  font-weight: 400;
}
.selection-dialog-label {
  margin: 8px 0 4px;
  color: #166534;
  font-size: 12px;
  font-weight: 950;
}
.selection-dialog-preview {
  max-height: 75px;
  overflow: hidden;
  box-sizing: border-box;
  padding: 8px 9px;
  border-radius: 9px;
  color: #334155;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  font-size: 13px;
  line-height: 1.55;
  white-space: pre-wrap;
}
.selection-dialog-textarea {
  width: 100%;
  min-height: 88px;
  max-height: 180px;
  box-sizing: border-box;
  padding: 9px;
  border-radius: 10px;
  color: #111827;
  background: #fffefa;
  border: 1px solid #e5dec7;
  font-size: 14px;
  line-height: 1.62;
  resize: vertical;
}
.selection-dialog-error {
  margin-top: 5px;
  color: #dc2626;
  font-size: 12px;
  line-height: 1.45;
}
.selection-dialog-actions {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 11px;
}
.selection-dialog-btn {
  flex: 1;
  min-height: 38px;
  line-height: 38px;
  margin: 0;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 950;
}
.selection-dialog-btn.cancel { color: #475569; background: #f8fafc; border: 1px solid #e2e8f0; }
.selection-dialog-btn.confirm { color: #fff; background: #166534; border: 1px solid #166534; }
.mistake-result-preview { margin-top: 8px; }
.mistake-result-preview .selectable-rich-root {
  max-height: 260px;
  overflow: auto;
  padding-right: 2px;
}


/* Local KaTeX formula rendering fix 2026-06-11 */
.result .math-block.rendered-math {
  font-weight: 400;
  white-space: normal;
}
.result .math-block .katex-display {
  margin: 0;
  overflow-x: auto;
  overflow-y: hidden;
}
.result .math-inline.rendered-math {
  font-weight: 400;
  white-space: nowrap;
}
.result .math-inline .katex {
  font-size: 1.02em;
}
.result .math-img {
  max-width: 100%;
  vertical-align: middle;
}
.result .math-img-block {
  display: block;
  margin: 0 auto;
}
.result .math-img-inline {
  display: inline-block;
  max-height: 1.7em;
}


/* MINI_FLOATING_AI_FORCE_VISIBLE_20260611 */
.floating-ai-root { pointer-events: auto; }
.ai-ball { border: 0; cursor: pointer; user-select: none; -webkit-user-select: none; touch-action: none; }
.ai-panel { box-sizing: border-box; }

/* ===== Formula audit fix: robust real formula rendering ===== */
.result .rendered-math {
  white-space: normal;
  word-break: normal;
}
.result .katex-rendered .katex,
.result .katex-rendered .katex * {
  max-width: 100%;
}
.result .katex-rendered .katex-display {
  margin: 0;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 2px 0;
}
.result .html-math-rendered {
  font-family: "Times New Roman", "STIX Two Math", Cambria, Georgia, serif;
  letter-spacing: .01em;
}
.result .mini-math {
  display: inline-flex;
  align-items: center;
  gap: .12em;
  flex-wrap: wrap;
  line-height: 1.65;
  font-size: 1.03em;
}
.result .mini-math-display {
  display: flex;
  justify-content: center;
  min-width: max-content;
}
.result .mini-frac {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  margin: 0 .16em;
  line-height: 1.05;
}
.result .mini-frac-num {
  display: block;
  padding: 0 .22em .08em;
  border-bottom: 1.5px solid currentColor;
  text-align: center;
  min-width: 1.2em;
}
.result .mini-frac-den {
  display: block;
  padding: .08em .22em 0;
  text-align: center;
  min-width: 1.2em;
}
.result .mini-overline {
  text-decoration: overline;
  text-decoration-thickness: 1.5px;
}
.result .mini-sqrt {
  display: inline-flex;
  align-items: flex-start;
  margin: 0 .08em;
}
.result .mini-sqrt-body {
  border-top: 1.5px solid currentColor;
  padding: 0 .12em;
  margin-left: .03em;
}
.result .mini-op {
  margin: 0 .08em;
}
.result .mini-space {
  display: inline-block;
  width: .7em;
}
.result .mini-matrix {
  display: inline-flex;
  align-items: stretch;
  vertical-align: middle;
  margin: 0 .18em;
}
.result .mini-matrix-bracket {
  display: inline-flex;
  align-items: center;
  font-size: 1.55em;
  line-height: 1;
  padding: 0 .08em;
}
.result .mini-matrix-body {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: .12em;
}
.result .mini-matrix-row {
  display: flex;
  justify-content: center;
  gap: .55em;
  min-height: 1.3em;
}
.result .mini-matrix-cell {
  min-width: 1.2em;
  text-align: center;
}
.result sub,
.result sup {
  font-size: .72em;
  line-height: 0;
}
body.dark .result .math-block {
  background: rgba(47,125,79,.13);
  border-color: rgba(130,210,160,.22);
}


/* ===== MathJax SVG formula renderer replacement ===== */
.result .mathjax-rendered mjx-container,
.result .mathjax-pending .mathjax-fallback-content {
  max-width: 100%;
}
.result .mathjax-rendered mjx-container[jax="SVG"] {
  overflow-x: auto;
  overflow-y: hidden;
  padding: 2px 0;
}
.result .math-block.mathjax-rendered mjx-container[jax="SVG"][display="true"] {
  margin: 0;
  width: 100%;
}
.result .math-block.mathjax-pending,
.result .math-block.mathjax-fallback {
  display: block;
  overflow-x: auto;
}
.result .math-inline.mathjax-pending,
.result .math-inline.mathjax-fallback {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
}
.result .mathjax-fallback-content {
  font-family: "Times New Roman", "Cambria Math", "STIX Two Math", serif;
  white-space: nowrap;
}
.result .math-block .mathjax-fallback-content {
  white-space: normal;
}
.result .mathjax-rendered svg {
  max-width: 100%;
}
body.dark .result .mathjax-rendered svg {
  color: #edf6ef;
}


/* Formula/text stability patch: prevent page-wide horizontal overflow and keep formulas inside the mini-app canvas. */
html, body { max-width: 100%; overflow-x: hidden; }
.app-shell, .main, .view, .card, .result, .selectable-rich-content, .selectable-rich-segment { min-width: 0; max-width: 100%; }
.result, .selectable-rich-content { overflow-wrap: anywhere; word-break: normal; }
.result .math-block, .selectable-rich-content .math-block { overflow-x: auto; overflow-y: hidden; max-width: 100%; white-space: normal; }
.result .math-block mjx-container, .selectable-rich-content .math-block mjx-container { max-width: 100%; overflow-x: auto; overflow-y: hidden; }
.result .math-inline, .selectable-rich-content .math-inline { max-width: 100%; overflow-x: auto; overflow-y: hidden; }
.result .math-inline mjx-container, .selectable-rich-content .math-inline mjx-container { max-width: 100%; }

/* ===== Math stability rollback 2026-06-11 =====
   Keep the page at mini-program width. Long formulas may scroll inside their own green box only. */
html, body {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
}
.app-shell, .main, .view, .card, .selectable-rich-root, .selectable-rich-segment, .selectable-rich-content, .result {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-wrap: break-word !important;
}
@media (min-width: 900px) {
  .app-shell {
    width: 820px !important;
    max-width: 820px !important;
    min-width: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    overflow-x: hidden !important;
  }
  .main {
    width: 100% !important;
    max-width: 820px !important;
    overflow-x: hidden !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .view { width: 100% !important; max-width: 100% !important; }
  .topbar, .sidebar { width: 820px !important; max-width: 820px !important; }
}
.result p, .selectable-rich-content p {
  max-width: 100% !important;
  overflow-wrap: break-word !important;
  word-break: normal !important;
}
.result .math-block, .selectable-rich-content .math-block {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  white-space: nowrap !important;
  contain: inline-size !important;
}
.result .math-inline, .selectable-rich-content .math-inline {
  max-width: 100% !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  vertical-align: middle !important;
}
.result mjx-container, .selectable-rich-content mjx-container {
  max-width: 100% !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
}
.result mjx-container svg, .selectable-rich-content mjx-container svg {
  max-width: 100% !important;
}


/* ===== Lecture UI uplift ===== */
.lecture-shell { display: grid; gap: 16px; }
.lecture-heading-card {
  border: 1px solid rgba(33,114,79,.12);
  background: linear-gradient(135deg, rgba(18, 76, 56, .06), rgba(255,255,255,.94));
  border-radius: 22px;
  padding: 18px;
  box-shadow: 0 10px 28px rgba(22, 88, 64, .08);
}
.lecture-title-row { display:flex; justify-content:space-between; gap:18px; align-items:flex-start; }
.lecture-badge {
  display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:999px;
  background: rgba(33,114,79,.12); color: var(--green); font-size:12px; font-weight:900; letter-spacing:.08em; margin-bottom:10px;
}
.lecture-mini-tips { display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end; }
.mini-tip { padding:8px 12px; border-radius:999px; background:#fff; border:1px solid rgba(33,114,79,.12); color:#2b5d46; font-size:12px; font-weight:800; }
.lecture-hint-grid { margin-top:14px; display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:12px; }
.hint-card { background: rgba(255,255,255,.88); border:1px solid rgba(33,114,79,.10); border-radius:16px; padding:13px 14px; }
.hint-card b { display:block; margin-bottom:4px; color:#1f6e4b; }
.hint-card span { color: var(--muted); line-height:1.65; font-size:13px; }
.lecture-actions { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.lecture-primary-actions { display:flex; gap:10px; flex-wrap:wrap; }
.lecture-result-head { align-items:center; justify-content:space-between; gap:12px; }
.result-title-pill { padding:7px 12px; border-radius:999px; background:#ecfdf5; color:#166534; font-size:12px; font-weight:900; border:1px solid #bbf7d0; }
.result-shell { display:grid; gap:10px; }
.ask-collapse { border:1px solid rgba(33,114,79,.12); border-radius:20px; background: linear-gradient(180deg, rgba(248,251,248,.98), rgba(255,255,255,.96)); overflow:hidden; }
.ask-collapse-head { width:100%; border:0; background:transparent; display:flex; align-items:center; justify-content:space-between; gap:14px; padding:16px 18px; text-align:left; cursor:pointer; }
.ask-collapse-head:hover { background: rgba(33,114,79,.04); }
.ask-collapse-title { font-size:16px; font-weight:900; color:var(--mini-title); }
.ask-collapse-desc { margin-top:4px; color:var(--muted); font-size:13px; line-height:1.6; }
.ask-toggle-text { flex:0 0 auto; padding:8px 12px; border-radius:999px; background: rgba(33,114,79,.10); color:#166534; font-size:12px; font-weight:900; }
.ask-collapse-body { padding:0 18px 18px; border-top:1px solid rgba(33,114,79,.10); }
.ask-collapse:not(.open) .ask-collapse-body { display:none; }
.ask-chip-row { display:flex; flex-wrap:wrap; gap:8px; margin:14px 0 12px; }
.ask-chip { border:1px solid #d7eadd; background:#fff; color:#2d5a46; border-radius:999px; padding:8px 12px; font-size:12px; font-weight:800; cursor:pointer; }
.ask-chip:hover { background:#f0fbf4; border-color:#b7dec4; }
.ask-split .textarea { min-height: 126px; }
.lecture-empty { padding: 12px 0; }
.empty-spot { display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px; background:#f2fbf5; color:#166534; font-size:12px; font-weight:900; margin-bottom:12px; }
.lecture-paper { background: linear-gradient(180deg, #fffdf8 0%, #fff 100%); border: 1px solid #efe5ca; border-radius: 22px; padding: 22px; box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 12px 34px rgba(145, 114, 40, .06); }
.lecture-paper h1, .lecture-paper h2, .lecture-paper h3 { position: relative; color: #153f31; line-height:1.35; letter-spacing:-.01em; }
.lecture-paper h1 { font-size: 28px; margin: 6px 0 16px; padding-bottom: 10px; border-bottom:1px solid rgba(33,114,79,.16); }
.lecture-paper h2 { font-size: 22px; margin: 22px 0 12px; padding-left: 14px; }
.lecture-paper h2::before { content:''; position:absolute; left:0; top:4px; bottom:4px; width:4px; border-radius:999px; background: linear-gradient(180deg, #1f6e4b, #8dc39c); }
.lecture-paper h3 { font-size: 18px; margin: 18px 0 10px; color:#245640; }
.lecture-paper p { margin: 10px 0; color:#334155; }
.lecture-paper strong { color:#0f5132; font-weight:900; background: linear-gradient(180deg, transparent 60%, rgba(255, 235, 59, .28) 60%); }
.lecture-paper .md-li { position:relative; margin:10px 0; padding:10px 12px 10px 16px; border-radius:14px; background:#f8fbf8; border:1px solid #d8eadf; }
.lecture-paper .md-li::before { content:'•'; position:absolute; left:8px; top:10px; color:#1f6e4b; font-weight:900; }
.lecture-paper code { background:#f4f7f6; border:1px solid #dde9e2; color:#21523e; padding:2px 7px; border-radius:8px; }
.lecture-paper .math-block { margin: 16px 0; padding: 14px 12px; background: #faf8f1; border:1px solid #ece2c8; border-radius: 16px; overflow-x:auto; }
.lecture-paper .math-inline { background: rgba(33,114,79,.06); border-radius: 8px; padding: 0 4px; }
.lecture-paper blockquote { margin: 14px 0; padding: 12px 14px; border-left:4px solid #7db590; background:#f7fbf8; border-radius: 0 14px 14px 0; color:#416052; }
.lecture-paper table { width:100%; border-collapse:collapse; margin:14px 0; overflow:hidden; border-radius:14px; }
.lecture-paper th, .lecture-paper td { border:1px solid #e7e7d8; padding:10px 12px; text-align:left; }
.lecture-paper th { background:#f4fbf5; color:#1f6e4b; font-weight:900; }

@media (max-width: 760px) {
  .lecture-title-row { flex-direction:column; }
  .lecture-mini-tips { justify-content:flex-start; }
  .lecture-hint-grid { grid-template-columns:1fr; }
  .lecture-actions, .lecture-primary-actions { flex-direction:column; align-items:stretch; }
  .lecture-result-head { align-items:flex-start; }
  .ask-collapse-head { align-items:flex-start; }
}


/* ===== Lesson tool tab safety ===== */
.lesson-workbench .tab.disabled,
.lesson-workbench .tab:disabled,
.level-pill:disabled,
.primary-btn:disabled,
.ghost-btn:disabled {
  opacity: .58;
  cursor: not-allowed;
  filter: grayscale(.15);
}
.tool-shell .lecture-heading-card {
  background: linear-gradient(135deg, rgba(37, 99, 235, .05), rgba(255,255,255,.96));
}
.tool-heading-card .lecture-badge {
  background: rgba(37, 99, 235, .10);
  color: #1d4ed8;
}


/* ===== MathJax duplicate formula guard ===== */
mjx-assistive-mml,
.mathjax-rendered mjx-assistive-mml,
.result mjx-assistive-mml {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(1px, 1px, 1px, 1px) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
  padding: 0 !important;
  margin: -1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}


/* ===== Pretty checklist markers ===== */
.result .md-li.task-li,
.lecture-paper .md-li.task-li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 12px 0;
  padding: 12px 14px;
  border-radius: 16px;
  background: linear-gradient(135deg, #f7fcf8, #ffffff);
  border: 1px solid #d6eadc;
}
.result .md-li.task-li::before,
.lecture-paper .md-li.task-li::before {
  content: none !important;
}
.result .task-emoji,
.lecture-paper .task-emoji {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: #ecfdf5;
  box-shadow: inset 0 0 0 1px #bbf7d0;
  line-height: 1;
  margin-top: 1px;
}
.result .task-text,
.lecture-paper .task-text {
  min-width: 0;
  flex: 1;
}


/* ===== Markmap + export tools ===== */
.lecture-primary-actions .ghost-btn { white-space: nowrap; }
.markmap-card {
  min-height: 520px;
  border: 1px solid #e4e6e8;
  border-radius: 16px;
  background: #ffffff;
  overflow: hidden;
  position: relative;
}
.markmap-toolbar-note {
  display: inline-flex;
  margin: 12px 14px 0;
  padding: 6px 10px;
  border-radius: 999px;
  background: #f7f8f9;
  border: 1px solid #e1e3e5;
  color: #5d666d;
  font-size: 12px;
  font-weight: 600;
}
.markmap-svg {
  width: 100%;
  height: auto;
  min-height: 560px;
  display: block;
  background: #ffffff;
}
.mindmap-paper { padding: 12px !important; }
.mindmap-source {
  border-top: 1px solid #eceff1;
  background: #fbfcfd;
  padding: 10px 14px 14px;
}
.mindmap-source summary {
  cursor: pointer;
  color: #315644;
  font-weight: 800;
  font-size: 13px;
}
.mindmap-source pre {
  margin: 10px 0 0;
  padding: 12px;
  border-radius: 12px;
  background: #0f1f19;
  color: #e7f8ec;
  overflow: auto;
  font-size: 12px;
  line-height: 1.65;
}
.mindmap-fallback {
  padding: 18px;
  display: grid;
  gap: 10px;
}
.mindmap-fallback-node {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid #d7eadf;
  background: #fff;
  border-radius: 14px;
  padding: 10px 12px;
}
.mindmap-fallback-node.level-1 { font-size: 18px; background: #f3faf6; color: #1f4d39; }
.mindmap-fallback-node.level-2 { margin-left: 18px; color: #2d5a46; }
.mindmap-fallback-node.level-3 { margin-left: 36px; }
.mindmap-fallback-node.level-4,
.mindmap-fallback-node.level-5,
.mindmap-fallback-node.level-6 { margin-left: 54px; color: #566861; }

@media (max-width: 640px) {
  .markmap-svg { min-height: 520px; }
  .lecture-primary-actions { width: 100%; }
  .lecture-primary-actions .ghost-btn,
  .lecture-primary-actions .primary-btn { width: 100%; }
}

.mindmap-fallback-note {
  margin: 0;
  padding: 10px 14px;
  border-top: 1px solid #d7eadf;
  background: #f7fbf8;
  color: #42715b;
  font-size: 12px;
  font-weight: 700;
}
.markmap-svg text { font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.markmap-svg[data-local-rendered="1"] {
  min-height: 560px;
  background: #f8fbf9;
}
.markmap-svg[data-local-fallback="1"] {
  border-bottom: 1px solid #d7eadf;
}

/* ===== Global rich text/table/formula/emphasis polish ===== */
.result,
.lecture-paper,
.ai-result,
.rich-box,
.problem-box,
.word-feedback,
.selection-ai-card .result {
  --rich-green: #166534;
  --rich-green-2: #21724f;
  --rich-blue: #1d4ed8;
  --rich-orange: #b45309;
  --rich-red: #b91c1c;
  --rich-purple: #7c3aed;
  --rich-soft-green: #ecfdf5;
  --rich-soft-blue: #eff6ff;
  --rich-soft-orange: #fff7ed;
  --rich-soft-red: #fef2f2;
  --rich-soft-purple: #f5f3ff;
}

.md-table-wrap {
  width: 100%;
  overflow-x: auto;
  margin: 16px 0 18px;
  border: 1px solid #d8eadf;
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 10px 28px rgba(15, 23, 42, .05);
}

.md-table {
  width: 100%;
  min-width: 620px;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 14px;
  line-height: 1.7;
}

.md-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: linear-gradient(180deg, #ecfdf5, #f6fff8);
  color: #14532d;
  font-weight: 950;
  text-align: left;
  border-bottom: 1px solid #cce7d6;
}

.md-table th,
.md-table td {
  padding: 12px 14px;
  vertical-align: top;
  border-right: 1px solid #e4f0e8;
  border-bottom: 1px solid #e4f0e8;
  word-break: break-word;
}

.md-table th:last-child,
.md-table td:last-child { border-right: 0; }

.md-table tbody tr:nth-child(even) td { background: #fbfefc; }
.md-table tbody tr:hover td { background: #f0fbf4; }

.md-table td:first-child {
  color: #14532d;
  font-weight: 850;
  white-space: nowrap;
}

.lecture-paper .md-table-wrap,
.result .md-table-wrap { clear: both; }

.math-block,
.lecture-paper .math-block,
.result .math-block,
.ai-result .math-block,
.rich-box .math-block,
.problem-box .math-block,
.selection-ai-card .math-block {
  margin: 16px 0;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid #d8eadf;
  background: linear-gradient(180deg, #f8fffb, #fffdf7);
  overflow-x: auto;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85), 0 8px 20px rgba(22, 101, 52, .05);
}

.math-inline,
.lecture-paper .math-inline,
.result .math-inline,
.ai-result .math-inline,
.rich-box .math-inline,
.problem-box .math-inline,
.selection-ai-card .math-inline {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  vertical-align: -0.18em;
  padding: 1px 5px;
  margin: 0 2px;
  border-radius: 8px;
  background: rgba(33,114,79,.07);
  color: #123f2d;
}

mjx-container[jax="SVG"] {
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
}

mjx-assistive-mml {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(1px, 1px, 1px, 1px) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}

.em-strong,
.result strong,
.lecture-paper strong,
.ai-result strong,
.rich-box strong,
.problem-box strong {
  color: #0f5132;
  font-weight: 950;
  background: linear-gradient(180deg, transparent 58%, rgba(250, 204, 21, .34) 58%);
  border-radius: 4px;
  padding: 0 2px;
}

.ai-color,
.em-key,
.em-def,
.em-note,
.em-warn,
.em-formula {
  display: inline;
  font-weight: 900;
  border-radius: 8px;
  padding: 1px 5px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.ai-blue,
.em-key { color: #1d4ed8; background: rgba(37, 99, 235, .10); }

.ai-green,
.em-def,
.em-note { color: #166534; background: rgba(22, 163, 74, .12); }

.ai-orange,
.em-warn { color: #b45309; background: rgba(251, 146, 60, .15); }

.ai-red { color: #b91c1c; background: rgba(239, 68, 68, .12); }

.ai-yellow { color: #854d0e; background: rgba(250, 204, 21, .22); }

.em-formula { color: #7c3aed; background: rgba(124, 58, 237, .10); }

.result h1,
.result h2,
.result h3,
.lecture-paper h1,
.lecture-paper h2,
.lecture-paper h3 {
  color: #123f2d;
}

.result h2,
.lecture-paper h2 {
  padding-left: 14px;
  border-left: 4px solid #21724f;
}

@media (max-width: 640px) {
  .md-table { min-width: 540px; font-size: 13px; }
  .md-table th, .md-table td { padding: 10px 12px; }
  .math-block { padding: 12px; }
}


/* ===== Knowledge point picker UI ===== */
.knowledge-picker {
  margin: 16px 0;
  padding: 18px;
  border-radius: 24px;
  border: 1px solid rgba(33, 114, 79, .12);
  background:
    radial-gradient(circle at 12% 0%, rgba(34, 197, 94, .10), transparent 30%),
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,252,249,.96));
  box-shadow: 0 16px 40px rgba(15, 31, 25, .07);
}

.knowledge-picker-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.knowledge-progress {
  flex: 0 0 auto;
  padding: 8px 12px;
  border-radius: 999px;
  background: #ecfdf5;
  color: #166534;
  border: 1px solid #bbf7d0;
  font-weight: 900;
  font-size: 12px;
}

.knowledge-current-card {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 14px;
  margin-bottom: 14px;
  border-radius: 20px;
  border: 1px solid rgba(33, 114, 79, .12);
  background: #ffffff;
  box-shadow: 0 8px 22px rgba(15, 23, 42, .05);
}

.current-dot {
  width: 42px;
  height: 42px;
  border-radius: 15px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #ecfdf5, #fefce8);
  border: 1px solid #d9eadf;
  font-size: 20px;
}

.current-label {
  color: #166534;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .04em;
}

.current-title {
  margin-top: 2px;
  color: #123f2d;
  font-size: 17px;
  font-weight: 950;
  line-height: 1.35;
}

.current-sub {
  margin-top: 3px;
  color: #64748b;
  font-size: 13px;
  line-height: 1.5;
}

.knowledge-unit-stack {
  display: grid;
  gap: 12px;
  max-height: min(42vh, 420px);
  overflow: auto;
  padding: 2px 4px 4px 0;
  scrollbar-width: thin;
}

.knowledge-unit-card {
  border: 1px solid rgba(33, 114, 79, .10);
  border-radius: 18px;
  padding: 12px;
  background: rgba(255,255,255,.78);
}

.knowledge-unit-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.knowledge-unit-head span {
  flex: 0 0 auto;
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(33,114,79,.09);
  color: #166534;
  font-size: 11px;
  font-weight: 950;
}

.knowledge-unit-head b {
  min-width: 0;
  color: #263f32;
  font-size: 14px;
  line-height: 1.4;
}

.knowledge-lesson-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.knowledge-lesson-card {
  width: 100%;
  min-height: 76px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border-radius: 18px;
  border: 1px solid #e2eee7;
  background: #ffffff;
  color: #263f32;
  text-align: left;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}

.knowledge-lesson-card:hover {
  transform: translateY(-2px);
  border-color: #a7d8b8;
  box-shadow: 0 10px 24px rgba(22, 101, 52, .10);
  background: #fbfffc;
}

.knowledge-lesson-card.active {
  border-color: #22c55e;
  background: linear-gradient(135deg, #ecfdf5, #ffffff);
  box-shadow: 0 12px 28px rgba(22, 101, 52, .14);
}

.lesson-card-code {
  flex: 0 0 auto;
  min-width: 42px;
  height: 42px;
  padding: 0 8px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: #f1f5f3;
  color: #166534;
  font-weight: 950;
  font-size: 12px;
}

.knowledge-lesson-card.active .lesson-card-code {
  background: #166534;
  color: #ffffff;
}

.lesson-card-main {
  min-width: 0;
  flex: 1;
  display: grid;
  gap: 3px;
}

.lesson-card-main b {
  color: #173d2d;
  font-size: 14px;
  line-height: 1.35;
  font-weight: 900;
}

.lesson-card-main small {
  color: #64748b;
  font-size: 12px;
}

.lesson-card-status,
.lesson-card-arrow {
  flex: 0 0 auto;
  font-weight: 950;
}

.lesson-card-status {
  padding: 5px 8px;
  border-radius: 999px;
  background: #dcfce7;
  color: #166534;
  font-size: 11px;
}

.lesson-card-arrow {
  color: #94a3b8;
  font-size: 22px;
}

.list-panel { display: none; }

@media (max-width: 720px) {
  .knowledge-picker { padding: 15px; border-radius: 22px; }
  .knowledge-picker-head { align-items: flex-start; flex-direction: column; }
  .knowledge-lesson-grid { grid-template-columns: 1fr; }
  .knowledge-unit-stack { max-height: 360px; }
  .knowledge-lesson-card { min-height: 68px; }
}



/* ===== Course-page collapsible knowledge picker ===== */
.course-card-with-picker {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}

.course-card-with-picker.expanded {
  grid-template-columns: 1fr;
  align-items: stretch;
  border-color: rgba(34, 197, 94, .26);
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,253,249,.96));
}

.course-card-with-picker.expanded .course-cta {
  position: absolute;
  top: 18px;
  right: 18px;
}

.course-action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.course-enter-btn,
.course-knowledge-toggle {
  border: 0;
  border-radius: 999px;
  min-height: 38px;
  padding: 0 15px;
  font-weight: 950;
  cursor: pointer;
}

.course-enter-btn {
  color: #fff;
  background: linear-gradient(135deg, #166534, #22c55e);
  box-shadow: 0 8px 18px rgba(22, 101, 52, .18);
}

.course-knowledge-toggle {
  color: #166534;
  background: #ecfdf5;
  border: 1px solid #bbf7d0;
}

.course-knowledge-panel {
  grid-column: 1 / -1;
  margin-top: 6px;
  padding: 14px;
  border-radius: 20px;
  border: 1px solid #d8eadf;
  background: #fbfffc;
}

.course-knowledge-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  margin-bottom: 12px;
}

.course-knowledge-head b {
  display: block;
  color: #123f2d;
  font-size: 16px;
  font-weight: 950;
}

.course-knowledge-head span {
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
}

.course-knowledge-head > span {
  flex: 0 0 auto;
  padding: 6px 10px;
  border-radius: 999px;
  background: #f0fdf4;
  color: #166534;
  border: 1px solid #bbf7d0;
}

.course-knowledge-units {
  display: grid;
  gap: 12px;
  max-height: min(46vh, 470px);
  overflow: auto;
  padding-right: 4px;
  scrollbar-width: thin;
}

.course-knowledge-unit {
  border: 1px solid rgba(33,114,79,.10);
  border-radius: 18px;
  padding: 12px;
  background: #ffffff;
}

.course-knowledge-unit-title {
  display: flex;
  gap: 9px;
  align-items: center;
  margin-bottom: 10px;
}

.course-knowledge-unit-title span {
  flex: 0 0 auto;
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(33,114,79,.09);
  color: #166534;
  font-size: 11px;
  font-weight: 950;
}

.course-knowledge-unit-title b {
  min-width: 0;
  color: #263f32;
  font-size: 14px;
  line-height: 1.4;
}

.course-knowledge-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.course-knowledge-lesson {
  width: 100%;
  min-height: 70px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid #e2eee7;
  border-radius: 17px;
  background: #fff;
  color: #263f32;
  padding: 11px 12px;
  cursor: pointer;
  text-align: left;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}

.course-knowledge-lesson:hover {
  transform: translateY(-2px);
  border-color: #a7d8b8;
  background: #f8fffb;
  box-shadow: 0 10px 22px rgba(22, 101, 52, .10);
}

.course-knowledge-lesson.active {
  border-color: #22c55e;
  background: linear-gradient(135deg, #ecfdf5, #ffffff);
  box-shadow: 0 10px 24px rgba(22, 101, 52, .13);
}

.course-lesson-index {
  flex: 0 0 auto;
  min-width: 40px;
  height: 40px;
  padding: 0 8px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: #f1f5f3;
  color: #166534;
  font-size: 12px;
  font-weight: 950;
}

.course-knowledge-lesson.active .course-lesson-index {
  color: #fff;
  background: #166534;
}

.course-lesson-text {
  min-width: 0;
  flex: 1;
  display: grid;
  gap: 3px;
}

.course-lesson-text b {
  color: #173d2d;
  font-size: 14px;
  line-height: 1.35;
  font-weight: 900;
}

.course-lesson-text small {
  color: #64748b;
  font-size: 12px;
}

.course-lesson-current {
  flex: 0 0 auto;
  padding: 5px 8px;
  border-radius: 999px;
  background: #dcfce7;
  color: #166534;
  font-size: 11px;
  font-weight: 950;
}

.course-lesson-go {
  flex: 0 0 auto;
  color: #94a3b8;
  font-size: 22px;
  font-weight: 950;
}

.knowledge-picker {
  display: none !important;
}

@media (max-width: 760px) {
  .course-card-with-picker,
  .course-card-with-picker.expanded {
    grid-template-columns: 1fr;
  }
  .course-card-with-picker.expanded .course-cta {
    position: static;
    justify-content: flex-start;
  }
  .course-knowledge-list {
    grid-template-columns: 1fr;
  }
  .course-knowledge-units {
    max-height: 380px;
  }
}


/* ===== Minimal lesson switch button in lesson workspace ===== */
.minimal-lesson-btn {
  background: #ecfdf5 !important;
  color: #166534 !important;
  border-color: #bbf7d0 !important;
  box-shadow: 0 8px 18px rgba(22, 101, 52, .10);
}

.minimal-lesson-btn::before {
  content: '📚';
  margin-right: 6px;
}

.course-enter-btn {
  min-width: 112px;
}

@media (max-width: 520px) {
  .hero-actions .ghost-btn {
    min-height: 38px;
    padding: 0 12px;
  }
}


/* ===== Mobile course page polish + course order support ===== */
@media (max-width: 640px) {
  body {
    background:
      radial-gradient(circle at 15% 0%, rgba(34, 197, 94, .13), transparent 32%),
      linear-gradient(180deg, #f6faf7 0%, #eef6f0 100%);
  }

  .app-shell {
    width: 100%;
    overflow-x: hidden;
  }

  .topbar {
    padding: 8px 16px;
    min-height: 56px;
  }

  .brand-wrap {
    gap: 9px;
  }

  .brand-logo {
    width: 38px;
    height: 38px;
    border-radius: 13px;
  }

  .brand-title {
    font-size: 17px;
    line-height: 1.1;
    white-space: nowrap;
  }

  .brand-subtitle {
    display: none;
  }

  .topbar-actions {
    gap: 6px;
  }

  .topbar-actions .icon-btn,
  .topbar-actions button {
    width: 42px;
    height: 42px;
    border-radius: 999px;
  }

  .main {
    padding: 12px 10px 96px !important;
  }

  .mini-hero,
  .selected-hero {
    border-radius: 24px !important;
    padding: 18px !important;
    margin: 10px 0 14px !important;
    box-shadow: 0 14px 36px rgba(15, 31, 25, .16) !important;
  }

  .mini-hero .hero-topline {
    margin-bottom: 12px;
  }

  .mini-hero .hero-logo {
    width: 42px;
    height: 42px;
    border-radius: 14px;
  }

  .brand-big {
    font-size: 21px !important;
  }

  .mini-hero h1,
  .selected-hero h1 {
    font-size: 30px !important;
    line-height: 1.15 !important;
    margin-bottom: 10px !important;
    letter-spacing: -.03em;
  }

  .mini-hero p,
  .selected-hero p {
    font-size: 15px !important;
    line-height: 1.65 !important;
    max-width: 100%;
  }

  .hero-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin-top: 16px !important;
  }

  .hero-stats div {
    border-radius: 16px !important;
    padding: 10px 8px !important;
  }

  .hero-stats b {
    font-size: 24px !important;
  }

  .hero-stats span {
    font-size: 11px !important;
  }

  .section-head {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    margin: 18px 2px 12px !important;
    text-align: left !important;
  }

  .section-head > div {
    width: 100%;
  }

  .section-title {
    font-size: 26px !important;
    line-height: 1.18 !important;
    text-align: left !important;
  }

  .section-note {
    width: 100%;
    font-size: 13px !important;
    text-align: left !important;
    line-height: 1.55 !important;
  }

  .course-stack {
    gap: 12px !important;
  }

  .course-card,
  .course-card-with-picker {
    width: 100%;
    border-radius: 22px !important;
    padding: 15px !important;
    gap: 10px !important;
    align-items: flex-start !important;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .055) !important;
  }

  .course-card-bg {
    width: 150px !important;
    height: 150px !important;
    right: -70px !important;
    bottom: -70px !important;
  }

  .course-topline,
  .course-meta-row {
    gap: 7px !important;
  }

  .course-badge,
  .count-pill,
  .meta-chip {
    font-size: 11px !important;
    padding: 6px 9px !important;
  }

  .course-name {
    font-size: 22px !important;
    margin: 12px 0 6px !important;
    line-height: 1.25 !important;
  }

  .course-desc {
    font-size: 14px !important;
    line-height: 1.62 !important;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .course-action-row {
    margin-top: 12px !important;
    gap: 8px !important;
  }

  .course-enter-btn,
  .course-knowledge-toggle {
    min-height: 36px !important;
    padding: 0 13px !important;
    font-size: 13px !important;
  }

  .course-cta {
    display: none !important;
  }

  .course-card-with-picker.expanded {
    padding: 15px !important;
  }

  .course-knowledge-panel {
    margin-top: 12px !important;
    padding: 12px !important;
    border-radius: 18px !important;
  }

  .course-knowledge-head {
    align-items: flex-start !important;
    flex-direction: column !important;
    gap: 8px !important;
  }

  .course-knowledge-units {
    max-height: 360px !important;
  }

  .course-knowledge-list {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  .course-knowledge-lesson {
    min-height: 64px !important;
    border-radius: 15px !important;
    padding: 10px !important;
  }

  .course-lesson-index {
    min-width: 38px !important;
    height: 38px !important;
    border-radius: 13px !important;
  }

  .course-lesson-text b {
    font-size: 14px !important;
  }

  .floating-ai-root {
    right: 0 !important;
    bottom: calc(148px + env(safe-area-inset-bottom)) !important;
  }

  .ai-ball.folded {
    width: 58px !important;
    height: 58px !important;
    border-radius: 999px 0 0 999px !important;
  }
}

@media (max-width: 390px) {
  .mini-hero h1,
  .selected-hero h1 {
    font-size: 27px !important;
  }

  .mini-hero p,
  .selected-hero p {
    font-size: 14px !important;
  }

  .course-name {
    font-size: 20px !important;
  }

  .hero-stats b {
    font-size: 21px !important;
  }
}


/* ===== Restored library / PDF / harmony form tools ===== */
@media (max-width: 899px) {
  .nav-list { grid-template-columns: repeat(7, minmax(0, 1fr)) !important; }
  .nav-item { font-size: 11px !important; }
  .nav-item .tab-ico { min-width: 23px; height: 23px; font-size: 12px; padding: 0 5px; }
}

.resource-hero {
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  padding: 26px;
  margin-bottom: 18px;
  color: #fff;
  background: linear-gradient(135deg, #0f1f19 0%, #166534 58%, #4e9967 100%);
  box-shadow: 0 16px 40px rgba(15, 31, 25, .16);
}

.resource-hero::after {
  content: '';
  position: absolute;
  right: -80px;
  bottom: -120px;
  width: 280px;
  height: 280px;
  border-radius: 999px;
  background: rgba(255,255,255,.13);
}

.resource-hero h1 {
  position: relative;
  z-index: 1;
  margin: 6px 0 10px;
  font-size: clamp(28px, 5vw, 44px);
  line-height: 1.15;
}

.resource-hero p {
  position: relative;
  z-index: 1;
  max-width: 760px;
  margin: 0;
  color: rgba(255,255,255,.78);
  line-height: 1.75;
}

.resource-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.resource-card {
  display: grid;
  gap: 12px;
  align-content: start;
}

.resource-card-head {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.resource-icon {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: #ecfdf5;
  border: 1px solid #bbf7d0;
  font-size: 22px;
}

.compact-textarea {
  min-height: 96px !important;
}

.resource-sep {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #64748b;
  font-size: 12px;
  font-weight: 900;
}

.resource-sep::before,
.resource-sep::after {
  content: '';
  height: 1px;
  flex: 1;
  background: #dbe8df;
}

.book-mini-list {
  display: grid;
  gap: 9px;
}

.book-mini-item {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border-radius: 16px;
  background: #fbfffc;
  border: 1px solid #dcebe2;
}

.book-mini-icon {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: #f0fdf4;
}

.book-mini-item b {
  display: block;
  color: #173d2d;
  font-weight: 950;
  line-height: 1.35;
}

.book-mini-item small {
  display: block;
  margin-top: 2px;
  color: #64748b;
  line-height: 1.4;
  word-break: break-all;
}

.result-card {
  margin-top: 16px;
}

@media (max-width: 720px) {
  .resource-hero {
    border-radius: 24px;
    padding: 20px;
    margin: 10px 0 14px;
  }
  .resource-hero h1 {
    font-size: 28px;
  }
  .resource-hero p {
    font-size: 14px;
    line-height: 1.65;
  }
  .resource-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .resource-card {
    border-radius: 22px;
    padding: 15px;
  }
}


/* ===== Privacy-safe resources, separated form board, practice OCR ===== */
@media (max-width: 899px) {
  .nav-list { grid-template-columns: repeat(7, minmax(0, 1fr)) !important; }
  .nav-item { font-size: 10px !important; }
  .nav-item .tab-ico { min-width: 22px !important; height: 22px !important; font-size: 11px !important; padding: 0 5px !important; }
}

.resource-grid.one-col {
  grid-template-columns: 1fr !important;
}

.privacy-note {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 14px;
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
}

.form-hero {
  background: linear-gradient(135deg, #1f1a0f 0%, #7c3aed 52%, #d97706 100%) !important;
}

.practice-layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.practice-ocr-card {
  grid-column: 1 / -1;
  background: linear-gradient(135deg, rgba(34,197,94,.06), rgba(255,255,255,.96));
}

.practice-card label {
  display: block;
  margin: 12px 0 7px;
  color: #1f3d2d;
  font-weight: 900;
}

@media (max-width: 720px) {
  .practice-layout {
    grid-template-columns: 1fr;
  }
}


/* ===== Practice scope + compact OCR controls ===== */
.practice-scope-card {
  margin-bottom: 14px;
  background: linear-gradient(135deg, rgba(236,253,245,.92), rgba(255,255,255,.96));
  border-color: #d8eadf;
}
.practice-scope-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.practice-scope-title {
  margin-top: 4px;
  color: #123f2d;
  font-size: 22px;
  font-weight: 950;
  line-height: 1.25;
}
.practice-scope-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}
.scope-pill {
  min-height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid #d8eadf;
  background: #fff;
  color: #334155;
  font-weight: 900;
}
.scope-pill.active {
  color: #fff;
  background: #166534;
  border-color: #166534;
  box-shadow: 0 8px 18px rgba(22,101,52,.18);
}
.textarea-action-wrap {
  position: relative;
}
.textarea-action-wrap .textarea {
  padding-right: 52px;
}
.mini-ocr-btn {
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #16a34a, #22c55e);
  color: #fff;
  box-shadow: 0 8px 18px rgba(22,101,52,.22);
  font-size: 16px;
}
.mini-ocr-btn.loading,
.mini-ocr-btn:disabled {
  opacity: .68;
  cursor: wait;
}
.answer-upload-mini {
  display: grid;
  gap: 8px;
  margin-top: 10px;
  color: #64748b;
  font-size: 13px;
  font-weight: 700;
}
.compact-file {
  padding: 9px 10px !important;
  border-radius: 14px !important;
}
.practice-ocr-card {
  display: none !important;
}
@media (max-width: 760px) {
  .practice-scope-main {
    align-items: flex-start;
    flex-direction: column;
  }
  .practice-scope-actions {
    justify-content: flex-start;
    width: 100%;
  }
  .scope-pill,
  .practice-scope-actions .ghost-btn {
    flex: 1 1 auto;
  }
}


/* ===== Practice problem/answer flow fix ===== */
.current-problem-box {
  margin-bottom: 16px;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid #d8eadf;
  background: linear-gradient(180deg, #f8fffb, #ffffff);
}

.current-problem-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.current-problem-head span {
  color: #123f2d;
  font-size: 16px;
  font-weight: 950;
}

.current-problem-head small {
  color: #64748b;
  font-size: 12px;
  line-height: 1.45;
}

.current-problem-textarea {
  min-height: 150px;
  background: #ffffff;
}

.practice-card label {
  display: block;
  margin: 10px 0 8px;
  color: #173d2d;
  font-weight: 950;
}

.answer-upload-mini {
  display: none !important;
}

@media (max-width: 760px) {
  .current-problem-head {
    align-items: flex-start;
    flex-direction: column;
  }
  .current-problem-textarea {
    min-height: 130px;
  }
}


/* ===== Practice current problem rich view ===== */
.current-problem-box.rich {
  background: linear-gradient(180deg, #f8fffb, #fffefa);
  border-color: #cfe8d8;
}

.current-problem-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.current-problem-head span {
  flex: 0 0 auto;
}

.current-problem-head small {
  flex: 1;
  min-width: 0;
}

.problem-edit-btn {
  flex: 0 0 auto;
  min-height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  color: #166534;
  background: #ecfdf5;
  border: 1px solid #bbf7d0;
  font-size: 12px;
  font-weight: 950;
}

.current-problem-rich {
  margin-top: 10px;
  padding: 14px;
  border-radius: 16px;
  background: #ffffff;
  border: 1px solid #e1efe7;
  max-height: none;
  overflow: visible;
  line-height: 1.85;
}

.current-problem-rich .selectable-rich-root {
  display: grid;
  gap: 8px;
}

.current-problem-rich .selectable-rich-segment {
  padding: 0;
  border: 0;
  background: transparent;
}

.current-problem-rich .selectable-rich-content {
  padding: 0;
}

.current-problem-rich p {
  margin: 8px 0;
}

.current-problem-rich .math-block {
  margin: 12px 0;
}

.current-problem-textarea {
  min-height: 220px;
}

@media (max-width: 640px) {
  .current-problem-head {
    flex-wrap: wrap;
    align-items: flex-start;
  }
  .current-problem-head small {
    order: 3;
    flex-basis: 100%;
  }
  .problem-edit-btn {
    margin-left: auto;
  }
  .current-problem-rich {
    padding: 12px;
  }
}


/* ===== Practice problem formula normalization display ===== */
.current-problem-rich .math-inline {
  font-weight: 700;
}

.current-problem-rich .math-block {
  margin: 14px 0;
  padding: 14px 12px;
  text-align: center;
}

.current-problem-rich .math-block mjx-container {
  margin: 0 auto !important;
}

.current-problem-rich .em-strong,
.current-problem-rich strong {
  background: transparent;
  color: inherit;
  padding: 0;
}

.current-problem-rich p {
  line-height: 1.95;
}



/* ===== Restore mistakes entry and make mobile nav swipeable ===== */
.nav-item.nav-mistakes .tab-ico {
  background: rgba(180, 83, 9, .10);
  color: #b45309;
}

.nav-item.nav-mistakes.active .tab-ico,
.nav-item.nav-mistakes.active {
  color: #b45309;
}

@media (max-width: 899px) {
  .sidebar {
    overflow: hidden !important;
  }

  .nav-list {
    display: flex !important;
    grid-template-columns: none !important;
    gap: 4px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 0 6px 4px !important;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }

  .nav-list::-webkit-scrollbar {
    display: none;
  }

  .nav-item {
    flex: 0 0 58px !important;
    min-width: 58px !important;
    scroll-snap-align: center;
  }

  .nav-item .tab-label {
    white-space: nowrap;
  }

  .nav-item.nav-mistakes {
    order: 4;
  }

  .practice-scope-actions {
    gap: 8px;
  }
}

@media (max-width: 380px) {
  .nav-item {
    flex-basis: 54px !important;
    min-width: 54px !important;
    font-size: 10px !important;
  }
}


/* ===== Mistakes location grouping ===== */
.mistake-overview {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
  background: linear-gradient(135deg, #ecfdf5, #ffffff);
}

.mistake-overview b {
  display: block;
  font-size: 30px;
  color: #166534;
  line-height: 1;
}

.mistake-overview span {
  color: #166534;
  font-weight: 900;
  font-size: 13px;
}

.mistake-groups {
  display: grid;
  gap: 16px;
}

.mistake-group {
  border: 1px solid #d8eadf;
  border-radius: 24px;
  background: rgba(255,255,255,.9);
  box-shadow: 0 12px 34px rgba(15, 23, 42, .055);
  overflow: hidden;
}

.mistake-group-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  background: linear-gradient(135deg, rgba(22, 101, 52, .08), rgba(255,255,255,.96));
  border-bottom: 1px solid #e1eee6;
}

.mistake-group-kicker {
  color: #166534;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.mistake-group-head h3 {
  margin: 4px 0 4px;
  color: #123f2d;
  font-size: 20px;
  line-height: 1.25;
}

.mistake-group-head p {
  margin: 0;
  color: #64748b;
  line-height: 1.45;
}

.mistake-group-head > span {
  flex: 0 0 auto;
  padding: 7px 11px;
  border-radius: 999px;
  background: #ecfdf5;
  color: #166534;
  border: 1px solid #bbf7d0;
  font-size: 12px;
  font-weight: 950;
}

.mistake-group-list {
  display: grid;
  gap: 12px;
  padding: 14px;
}

.mistake-item-rich {
  display: block;
  padding: 14px;
  border: 1px solid #e3efe7;
  border-radius: 18px;
  background: #fff;
}

.mistake-main {
  min-width: 0;
}

.mistake-top-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.mistake-top-row strong {
  color: #102a1f;
  font-size: 17px;
  line-height: 1.35;
}

.mistake-time {
  margin-top: 3px;
  color: #94a3b8;
  font-size: 12px;
}

.mistake-location {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 11px 0 8px;
}

.mistake-loc-chip {
  padding: 5px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  border: 1px solid transparent;
}

.mistake-loc-chip.board {
  color: #1d4ed8;
  background: #eff6ff;
  border-color: #bfdbfe;
}

.mistake-loc-chip.course {
  color: #166534;
  background: #ecfdf5;
  border-color: #bbf7d0;
}

.mistake-loc-chip.unit {
  color: #7c3aed;
  background: #f5f3ff;
  border-color: #ddd6fe;
}

.mistake-loc-chip.lesson {
  color: #b45309;
  background: #fff7ed;
  border-color: #fed7aa;
}

.mistake-loc-chip.page {
  color: #475569;
  background: #f8fafc;
  border-color: #e2e8f0;
}

.mistake-path {
  margin: 8px 0 10px;
  padding: 9px 11px;
  border-radius: 13px;
  background: #f8fafc;
  color: #475569;
  font-size: 12px;
  line-height: 1.55;
}

.mistake-question {
  margin: 10px 0;
  border: 1px solid #e3efe7;
  border-radius: 14px;
  background: #fbfffc;
  overflow: hidden;
}

.mistake-question summary {
  padding: 9px 11px;
  color: #166534;
  font-weight: 900;
  cursor: pointer;
}

.mistake-question .result {
  padding: 0 12px 12px;
}

.mistake-result-preview {
  margin-top: 10px;
}

@media (max-width: 640px) {
  .mistake-overview {
    align-items: flex-start;
  }
  .mistake-group-head {
    flex-direction: column;
  }
  .mistake-top-row {
    align-items: flex-start;
  }
  .mistake-top-row .danger-btn {
    padding: 8px 10px;
  }
}


/* ===== Mistake collapse + form visibility fix ===== */
.nav-item.nav-form .tab-ico {
  background: rgba(124, 58, 237, .10);
  color: #7c3aed;
}

.form-shortcut-card {
  background: linear-gradient(135deg, rgba(124, 58, 237, .06), rgba(255,255,255,.96));
}

.mistake-group,
.mistake-item-rich,
.mistake-ai-summary {
  transition: box-shadow .18s ease, border-color .18s ease;
}

.mistake-group > summary,
.mistake-item-rich > summary,
.mistake-question > summary,
.mistake-answer > summary,
.mistake-result-detail > summary,
.mistake-ai-summary > summary {
  cursor: pointer;
  list-style: none;
}

.mistake-group > summary::-webkit-details-marker,
.mistake-item-rich > summary::-webkit-details-marker,
.mistake-question > summary::-webkit-details-marker,
.mistake-answer > summary::-webkit-details-marker,
.mistake-result-detail > summary::-webkit-details-marker,
.mistake-ai-summary > summary::-webkit-details-marker {
  display: none;
}

.mistake-group:not([open]) .mistake-group-toggle::after,
.mistake-item-rich:not([open]) .mistake-toggle-text::after {
  content: '展开';
}

.mistake-group[open] .mistake-group-toggle::after,
.mistake-item-rich[open] .mistake-toggle-text::after {
  content: '收起';
}

.mistake-group-toggle,
.mistake-toggle-text {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  color: #166534;
  background: #ecfdf5;
  border: 1px solid #bbf7d0;
  font-size: 12px;
  font-weight: 950;
}

.mistake-group-toggle {
  font-size: 0;
}

.mistake-summary {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px;
}

.mistake-summary-main {
  min-width: 0;
  flex: 1;
}

.mistake-summary-main strong {
  display: block;
  color: #102a1f;
  font-size: 16px;
  line-height: 1.35;
}

.mistake-path.compact {
  margin: 6px 0 0;
  padding: 0;
  background: transparent;
  color: #64748b;
  font-size: 12px;
  border-radius: 0;
}

.mistake-delete-btn {
  flex: 0 0 auto;
}

.mistake-item-rich {
  padding: 0 !important;
  overflow: hidden;
}

.mistake-item-rich[open] {
  border-color: #cde9d7;
  box-shadow: 0 10px 22px rgba(22,101,52,.08);
}

.mistake-item-rich .mistake-main {
  padding: 0 14px 14px;
  border-top: 1px solid #eef6f0;
}

.mistake-question.missing {
  margin: 10px 0;
  padding: 12px;
  border: 1px dashed #fbbf24;
  border-radius: 14px;
  background: #fffbeb;
  color: #92400e;
}

.mistake-question.missing p {
  margin: 6px 0 0;
  line-height: 1.6;
  font-size: 13px;
}

.mistake-answer,
.mistake-result-detail {
  margin-top: 10px;
  border: 1px solid #e3efe7;
  border-radius: 14px;
  background: #fbfffc;
  overflow: hidden;
}

.mistake-answer summary,
.mistake-result-detail summary {
  padding: 9px 11px;
  color: #166534;
  font-weight: 900;
}

.mistake-answer .result,
.mistake-result-detail .mistake-result-preview {
  padding: 0 12px 12px;
}

@media (max-width: 899px) {
  .nav-list {
    justify-content: flex-start !important;
  }
  .nav-item.nav-form {
    order: 4;
  }
  .nav-item.nav-mistakes {
    order: 3;
  }
}

@media (max-width: 640px) {
  .mistake-summary {
    flex-wrap: wrap;
  }
  .mistake-toggle-text {
    margin-left: auto;
  }
}


/* ===== Fixed 7-button bottom nav with colored icons ===== */
.nav-seven .nav-item .tab-ico {
  border: 1px solid transparent;
  font-weight: 950;
}
.nav-course .tab-ico { background: #dcfce7 !important; color: #166534 !important; border-color: #bbf7d0 !important; }
.nav-practice .tab-ico { background: #eff6ff !important; color: #1d4ed8 !important; border-color: #bfdbfe !important; }
.nav-recite .tab-ico { background: #f5f3ff !important; color: #7c3aed !important; border-color: #ddd6fe !important; }
.nav-mistakes .tab-ico { background: #fff7ed !important; color: #b45309 !important; border-color: #fed7aa !important; }
.nav-form .tab-ico { background: #fdf2f8 !important; color: #be185d !important; border-color: #fbcfe8 !important; }
.nav-resources .tab-ico { background: #fefce8 !important; color: #a16207 !important; border-color: #fde68a !important; }
.nav-settings .tab-ico { background: #f1f5f9 !important; color: #475569 !important; border-color: #cbd5e1 !important; }

.nav-course.active, .nav-course:hover { color: #166534 !important; }
.nav-practice.active, .nav-practice:hover { color: #1d4ed8 !important; }
.nav-recite.active, .nav-recite:hover { color: #7c3aed !important; }
.nav-mistakes.active, .nav-mistakes:hover { color: #b45309 !important; }
.nav-form.active, .nav-form:hover { color: #be185d !important; }
.nav-resources.active, .nav-resources:hover { color: #a16207 !important; }
.nav-settings.active, .nav-settings:hover { color: #475569 !important; }

.nav-item.active .tab-ico {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 8px 18px rgba(15, 23, 42, .12);
}

@media (max-width: 899px) {
  .sidebar {
    height: calc(74px + env(safe-area-inset-bottom)) !important;
    padding: 6px 4px calc(7px + env(safe-area-inset-bottom)) !important;
    overflow: visible !important;
  }

  .nav-list,
  .nav-list.nav-seven {
    height: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    gap: 2px !important;
    overflow: visible !important;
    padding: 0 !important;
    max-width: none !important;
    scroll-snap-type: none !important;
  }

  .nav-item,
  .nav-list .nav-item {
    min-width: 0 !important;
    width: auto !important;
    flex: initial !important;
    flex-basis: auto !important;
    min-height: 56px !important;
    padding: 3px 1px !important;
    border-radius: 14px !important;
    font-size: 10px !important;
    gap: 3px !important;
    order: initial !important;
  }

  .nav-item .tab-ico {
    min-width: 25px !important;
    width: 25px !important;
    height: 25px !important;
    padding: 0 !important;
    border-radius: 999px !important;
    display: grid !important;
    place-items: center !important;
    font-size: 12px !important;
    line-height: 1 !important;
  }

  .nav-item .tab-label {
    display: block !important;
    white-space: nowrap !important;
    font-size: 10px !important;
    line-height: 1.05 !important;
    transform: scale(.96);
    transform-origin: center;
  }

  .app-shell {
    padding-bottom: calc(84px + env(safe-area-inset-bottom)) !important;
  }
}

@media (max-width: 370px) {
  .sidebar { padding-left: 2px !important; padding-right: 2px !important; }
  .nav-list.nav-seven { gap: 1px !important; }
  .nav-item .tab-ico {
    min-width: 23px !important;
    width: 23px !important;
    height: 23px !important;
    font-size: 11px !important;
  }
  .nav-item .tab-label {
    font-size: 9px !important;
    transform: scale(.92);
  }
}


/* ===== Move settings to topbar gear ===== */
.top-settings-btn {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.12);
  color: #fff;
  font-size: 20px;
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 8px 20px rgba(0,0,0,.16);
}

.top-settings-btn:hover {
  background: rgba(255,255,255,.20);
  transform: translateY(-1px);
}

@media (max-width: 899px) {
  .topbar {
    justify-content: center !important;
  }

  .topbar-actions {
    display: flex !important;
    position: absolute;
    right: 12px;
    top: env(safe-area-inset-top);
    height: 56px;
    align-items: center;
    gap: 0;
  }

  .topbar-actions #themeBtn,
  .topbar-actions #healthBtn {
    display: none !important;
  }

  .top-settings-btn {
    width: 40px;
    height: 40px;
    font-size: 19px;
    background: rgba(255,255,255,.14);
  }

  .nav-list.nav-six {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    overflow: visible !important;
    gap: 3px !important;
    padding: 0 4px 4px !important;
  }

  .nav-list.nav-six .nav-item {
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }
}

@media (max-width: 380px) {
  .nav-list.nav-six .nav-item {
    font-size: 10px !important;
  }
  .nav-list.nav-six .tab-ico {
    min-width: 22px !important;
    height: 22px !important;
    font-size: 11px !important;
  }
  .top-settings-btn {
    width: 38px;
    height: 38px;
  }
}


/* ===== Topbar settings gear visibility fix ===== */
/* 前面的小程序样式里曾经用 .topbar-actions { display:none!important; }
   导致设置齿轮在桌面/手机都可能被隐藏。这里统一强制显示。 */
.topbar {
  position: fixed;
}

.topbar .topbar-actions {
  display: flex !important;
  position: absolute !important;
  right: 16px !important;
  top: env(safe-area-inset-top) !important;
  height: 64px !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  z-index: 1010 !important;
}

.topbar .top-settings-btn {
  display: inline-grid !important;
  place-items: center !important;
  width: 42px !important;
  height: 42px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  background: rgba(255,255,255,.16) !important;
  color: #fff !important;
  font-size: 20px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  box-shadow: 0 8px 22px rgba(0,0,0,.18) !important;
  cursor: pointer !important;
}

.topbar .top-settings-btn:hover {
  background: rgba(255,255,255,.24) !important;
  transform: translateY(-1px);
}

@media (min-width: 900px) {
  .topbar .topbar-actions {
    right: calc((100vw - 820px) / 2 + 16px) !important;
    top: env(safe-area-inset-top) !important;
  }

  .topbar .topbar-actions #themeBtn,
  .topbar .topbar-actions #healthBtn {
    display: none !important;
  }
}

@media (max-width: 899px) {
  .topbar .topbar-actions {
    right: 12px !important;
    height: 58px !important;
  }

  .topbar .topbar-actions #themeBtn,
  .topbar .topbar-actions #healthBtn {
    display: none !important;
  }

  .topbar .top-settings-btn {
    width: 40px !important;
    height: 40px !important;
    font-size: 19px !important;
  }
}


/* ===== Topbar settings gear true right-side fix ===== */
/* 设置齿轮固定在黑色顶栏右侧，不再受桌面居中容器计算影响。 */
.topbar {
  position: fixed !important;
}

.topbar .topbar-actions {
  display: flex !important;
  position: absolute !important;
  left: auto !important;
  right: 14px !important;
  top: env(safe-area-inset-top) !important;
  height: 64px !important;
  width: auto !important;
  align-items: center !important;
  justify-content: flex-end !important;
  z-index: 1200 !important;
  pointer-events: auto !important;
}

.topbar .topbar-actions #themeBtn,
.topbar .topbar-actions #healthBtn {
  display: none !important;
}

.topbar .top-settings-btn {
  display: inline-grid !important;
  place-items: center !important;
  margin-left: auto !important;
  margin-right: 0 !important;
  width: 42px !important;
  height: 42px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255,255,255,.25) !important;
  background: rgba(255,255,255,.16) !important;
  color: #fff !important;
  font-size: 20px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  box-shadow: 0 8px 22px rgba(0,0,0,.18) !important;
  cursor: pointer !important;
}

@media (min-width: 900px) {
  .topbar .topbar-actions {
    right: 14px !important;
    left: auto !important;
    top: env(safe-area-inset-top) !important;
    transform: none !important;
  }
}

@media (max-width: 899px) {
  .topbar .topbar-actions {
    right: max(12px, env(safe-area-inset-right)) !important;
    left: auto !important;
    height: 58px !important;
  }

  .topbar .top-settings-btn {
    width: 40px !important;
    height: 40px !important;
    font-size: 19px !important;
  }
}


/* ===== Practice image upload / preview / crop ===== */
.mini-action-stack {
  position: absolute;
  right: 10px;
  bottom: 10px;
  display: flex;
  gap: 8px;
  z-index: 4;
}

.mini-upload-btn,
.mini-ocr-btn {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  border: 0;
  color: #fff;
  font-size: 18px;
  box-shadow: 0 8px 18px rgba(15, 23, 42, .18);
}

.mini-upload-btn {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
}

.mini-ocr-btn {
  background: linear-gradient(135deg, #22c55e, #16a34a);
}

.practice-image-panel {
  margin-top: 10px;
  border: 1px dashed #d7e7dd;
  border-radius: 18px;
  background: linear-gradient(180deg, #fbfffc, #f7fbf8);
  padding: 12px;
}

.practice-image-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.practice-image-panel-head span {
  color: #123f2d;
  font-size: 14px;
  font-weight: 950;
}

.practice-image-panel-head small {
  color: #64748b;
  line-height: 1.55;
  font-size: 12px;
}

.practice-image-empty {
  padding: 16px;
  border-radius: 14px;
  background: #fff;
  color: #94a3b8;
  font-size: 13px;
}

.practice-image-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(138px, 1fr));
  gap: 10px;
}

.practice-image-card {
  border: 1px solid #e1eee6;
  border-radius: 16px;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 8px 18px rgba(15, 23, 42, .04);
}

.practice-image-card img {
  width: 100%;
  height: 108px;
  object-fit: cover;
  display: block;
  background: #f8fafc;
}

.practice-image-meta {
  padding: 8px 10px 4px;
  color: #334155;
  font-size: 12px;
  line-height: 1.35;
  min-height: 37px;
  word-break: break-all;
}

.practice-image-actions {
  display: flex;
  gap: 6px;
  padding: 0 10px 10px;
}

.practice-image-actions .ghost-btn,
.practice-image-actions .danger-btn {
  flex: 1;
  min-height: 32px;
  padding: 0 8px;
  font-size: 12px;
}

.crop-modal-mask {
  position: fixed;
  inset: 0;
  background: rgba(2, 6, 23, .52);
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.crop-modal {
  width: min(920px, 100%);
  max-height: calc(100vh - 40px);
  background: #fff;
  border-radius: 24px;
  box-shadow: 0 24px 70px rgba(0,0,0,.26);
  overflow: auto;
  padding: 18px;
}

.crop-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.crop-modal-head b {
  display: block;
  color: #102a1f;
  font-size: 18px;
  margin-bottom: 6px;
}

.crop-modal-head p {
  margin: 0;
  color: #64748b;
  line-height: 1.55;
  font-size: 13px;
}

.crop-stage {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  background: #0f172a;
  min-height: 320px;
  touch-action: none;
}

.crop-stage img {
  width: 100%;
  max-height: 62vh;
  object-fit: contain;
  display: block;
  margin: 0 auto;
  user-select: none;
  -webkit-user-drag: none;
}

.crop-selection {
  position: absolute;
  border: 2px solid #22c55e;
  background: rgba(34, 197, 94, .18);
  box-shadow: 0 0 0 200vmax rgba(2, 6, 23, .26);
  pointer-events: none;
  display: none;
}

.crop-selection.active {
  display: block;
}

.crop-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 14px;
}

.mistake-image-section {
  margin-top: 10px;
  border: 1px solid #e3efe7;
  border-radius: 14px;
  background: #fbfffc;
  overflow: hidden;
}

.mistake-image-section summary {
  padding: 9px 11px;
  color: #166534;
  font-weight: 900;
  cursor: pointer;
}

.mistake-image-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(122px, 1fr));
  gap: 10px;
  padding: 0 12px 12px;
}

.mistake-image-card {
  border: 1px solid #e3efe7;
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
  margin: 0;
}

.mistake-image-card img {
  width: 100%;
  height: 100px;
  object-fit: cover;
  display: block;
}

.mistake-image-card figcaption {
  padding: 7px 8px;
  color: #475569;
  font-size: 12px;
  line-height: 1.35;
  word-break: break-all;
}

@media (max-width: 640px) {
  .practice-image-grid,
  .mistake-image-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .mini-action-stack {
    right: 8px;
    bottom: 8px;
    gap: 6px;
  }
  .mini-upload-btn,
  .mini-ocr-btn {
    width: 38px;
    height: 38px;
    font-size: 17px;
  }
  .crop-modal {
    padding: 14px;
    border-radius: 20px;
  }
  .crop-stage {
    min-height: 240px;
  }
}


/* ===== OCR upload/recognize button overlap fix ===== */
/* 旧版 .mini-ocr-btn 是绝对定位；新版把上传/识别放进 .mini-action-stack。
   这里强制让两个小按钮回到横向排列，避免重叠。 */
.textarea-action-wrap {
  position: relative;
}

.textarea-action-wrap .mini-action-stack {
  position: absolute !important;
  right: 10px !important;
  bottom: 10px !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  z-index: 5 !important;
}

.textarea-action-wrap .mini-action-stack .mini-upload-btn,
.textarea-action-wrap .mini-action-stack .mini-ocr-btn {
  position: static !important;
  right: auto !important;
  left: auto !important;
  top: auto !important;
  bottom: auto !important;
  flex: 0 0 42px !important;
  width: 42px !important;
  height: 42px !important;
  margin: 0 !important;
  transform: none !important;
}

.textarea-action-wrap textarea {
  padding-right: 112px !important;
}

@media (max-width: 640px) {
  .textarea-action-wrap .mini-action-stack {
    right: 8px !important;
    bottom: 8px !important;
    gap: 6px !important;
  }

  .textarea-action-wrap .mini-action-stack .mini-upload-btn,
  .textarea-action-wrap .mini-action-stack .mini-ocr-btn {
    flex-basis: 38px !important;
    width: 38px !important;
    height: 38px !important;
  }

  .textarea-action-wrap textarea {
    padding-right: 96px !important;
  }
}


/* ===== Integrate OCR into generate/grade buttons ===== */
.textarea-action-wrap.no-mini-actions textarea {
  padding-right: 12px !important;
}

.media-toolbar {
  margin-top: 10px;
  justify-content: flex-start;
}

.media-toolbar .ghost-btn::before {
  content: '🖼';
  margin-right: 6px;
}

.practice-card .mini-action-stack {
  display: none !important;
}



/* ===== Inline knowledge picker for practice page ===== */
.practice-picker-mask {
  position: fixed;
  inset: 0;
  z-index: 2800;
  background: rgba(2, 6, 23, .45);
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding: 18px;
}

.practice-picker-panel {
  width: min(860px, 100%);
  max-height: min(82vh, 760px);
  overflow: hidden;
  border-radius: 26px;
  background: #fff;
  box-shadow: 0 28px 80px rgba(2, 6, 23, .28);
  display: flex;
  flex-direction: column;
}

.practice-picker-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 18px 14px;
  border-bottom: 1px solid #e4efe8;
  background: linear-gradient(135deg, #ecfdf5, #ffffff);
}

.practice-picker-head h2 {
  margin: 3px 0 5px;
  color: #123f2d;
  font-size: 24px;
  line-height: 1.2;
}

.practice-picker-head p {
  margin: 0;
  color: #64748b;
  font-size: 13px;
  line-height: 1.5;
}

.practice-picker-body {
  overflow: auto;
  padding: 14px;
  display: grid;
  gap: 12px;
}

.picker-course {
  border: 1px solid #dceee4;
  border-radius: 20px;
  background: #fbfffc;
  overflow: hidden;
}

.picker-course > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 15px;
  background: #ffffff;
}

.picker-course > summary::-webkit-details-marker {
  display: none;
}

.picker-course > summary b {
  display: block;
  color: #123f2d;
  font-size: 16px;
  line-height: 1.35;
}

.picker-course > summary span {
  display: block;
  color: #64748b;
  font-size: 12px;
  margin-top: 3px;
}

.picker-course > summary em {
  flex: 0 0 auto;
  font-style: normal;
  color: #166534;
  background: #ecfdf5;
  border: 1px solid #bbf7d0;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 950;
}

.picker-course[open] > summary em::after {
  content: ' / 收起';
}

.picker-course-body {
  display: grid;
  gap: 12px;
  padding: 12px;
  border-top: 1px solid #e4efe8;
}

.picker-unit {
  border: 1px solid rgba(33, 114, 79, .10);
  border-radius: 16px;
  background: #fff;
  padding: 11px;
}

.picker-unit-title {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 9px;
}

.picker-unit-title span {
  flex: 0 0 auto;
  color: #166534;
  background: rgba(22, 101, 52, .08);
  border-radius: 999px;
  padding: 5px 8px;
  font-size: 11px;
  font-weight: 950;
}

.picker-unit-title b {
  color: #263f32;
  line-height: 1.4;
  font-size: 14px;
}

.picker-lesson-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.picker-lesson-btn {
  width: 100%;
  min-height: 60px;
  border: 1px solid #e2eee7;
  border-radius: 15px;
  background: #fff;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 10px;
  align-items: center;
  text-align: left;
  padding: 10px;
  cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease;
}

.picker-lesson-btn:hover {
  transform: translateY(-1px);
  border-color: #a7d8b8;
  box-shadow: 0 8px 18px rgba(22, 101, 52, .08);
}

.picker-lesson-btn.active {
  border-color: #22c55e;
  background: linear-gradient(135deg, #ecfdf5, #ffffff);
  box-shadow: 0 9px 22px rgba(22,101,52,.12);
}

.picker-lesson-code {
  grid-row: span 2;
  min-width: 40px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: #f1f5f3;
  color: #166534;
  font-size: 12px;
  font-weight: 950;
}

.picker-lesson-btn.active .picker-lesson-code {
  background: #166534;
  color: #fff;
}

.picker-lesson-name {
  min-width: 0;
  color: #173d2d;
  font-size: 14px;
  line-height: 1.35;
  font-weight: 900;
}

.picker-lesson-btn small {
  color: #64748b;
  font-size: 12px;
}

@media (max-width: 640px) {
  .practice-picker-mask {
    padding: 0;
    align-items: flex-end;
  }

  .practice-picker-panel {
    max-height: 88vh;
    border-radius: 24px 24px 0 0;
  }

  .practice-picker-head {
    padding: 16px;
  }

  .practice-picker-head h2 {
    font-size: 21px;
  }

  .picker-lesson-list {
    grid-template-columns: 1fr;
  }
}



/* ===== Practice picker scroll/all courses/scope fix ===== */
.practice-picker-mask {
  align-items: center !important;
  overflow: hidden !important;
  touch-action: none;
}

.practice-picker-panel {
  max-height: min(88vh, 760px) !important;
  min-height: 0 !important;
}

.practice-picker-body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain;
  padding-bottom: 24px !important;
}

.picker-board {
  border: 1px solid #d1eadb;
  border-radius: 22px;
  background: linear-gradient(180deg, #f7fef9, #ffffff);
  overflow: hidden;
}

.picker-board > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 15px 16px;
  background: linear-gradient(135deg, rgba(22,101,52,.08), rgba(255,255,255,.96));
  border-bottom: 1px solid #e4efe8;
}

.picker-board > summary::-webkit-details-marker {
  display: none;
}

.picker-board > summary b {
  display: block;
  color: #0f5132;
  font-size: 17px;
  line-height: 1.35;
}

.picker-board > summary span {
  display: block;
  margin-top: 3px;
  color: #64748b;
  font-size: 12px;
}

.picker-board > summary em {
  flex: 0 0 auto;
  font-style: normal;
  color: #166534;
  background: #ecfdf5;
  border: 1px solid #bbf7d0;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 950;
}

.picker-board[open] > summary em::after {
  content: ' / 收起';
}

.picker-board-body {
  display: grid;
  gap: 12px;
  padding: 12px;
}

.picker-course-scope-btn {
  width: 100%;
  min-height: 58px;
  border: 1px solid #bfdbfe;
  border-radius: 16px;
  background: linear-gradient(135deg, #eff6ff, #ffffff);
  color: #1d4ed8;
  text-align: left;
  padding: 11px 13px;
  cursor: pointer;
  display: grid;
  gap: 4px;
  margin-bottom: 4px;
}

.picker-course-scope-btn span {
  font-weight: 950;
  font-size: 14px;
}

.picker-course-scope-btn small {
  color: #64748b;
  font-size: 12px;
}

.picker-course-scope-btn.active {
  border-color: #2563eb;
  background: linear-gradient(135deg, #dbeafe, #ffffff);
  box-shadow: 0 10px 24px rgba(37, 99, 235, .12);
}

@media (max-width: 640px) {
  .practice-picker-mask {
    align-items: flex-end !important;
    overflow: hidden !important;
  }

  .practice-picker-panel {
    height: 88vh !important;
    max-height: 88vh !important;
  }

  .practice-picker-body {
    max-height: none !important;
    padding-bottom: calc(28px + env(safe-area-inset-bottom)) !important;
  }
}



/* ===== Scroll picker + crop modal click fix ===== */
/* 之前弹窗遮罩 touch-action:none 会拦截移动端滚动；这里改成只让内部面板滚动。 */
.practice-picker-mask {
  touch-action: auto !important;
  overflow: hidden !important;
  pointer-events: auto !important;
}

.practice-picker-panel {
  height: min(88vh, 760px) !important;
  max-height: min(88vh, 760px) !important;
  min-height: 320px !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  pointer-events: auto !important;
}

.practice-picker-body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow-y: scroll !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-y !important;
  overscroll-behavior: contain !important;
}

.practice-image-actions button,
.practice-image-actions .ghost-btn,
.practice-image-actions .danger-btn {
  pointer-events: auto !important;
  position: relative !important;
  z-index: 2 !important;
}

.crop-modal-mask {
  z-index: 5000 !important;
  pointer-events: auto !important;
}

.crop-modal {
  pointer-events: auto !important;
}

.crop-stage {
  touch-action: none !important;
  cursor: crosshair;
}

.crop-modal-actions button,
.crop-modal-head button {
  pointer-events: auto !important;
  position: relative !important;
  z-index: 2 !important;
}

@media (max-width: 640px) {
  .practice-picker-panel {
    height: 88vh !important;
    max-height: 88vh !important;
    min-height: 60vh !important;
  }
}


/* ===== Final picker scroll + safe crop output fix ===== */
.practice-picker-mask {
  touch-action: auto !important;
  overflow: hidden !important;
  pointer-events: auto !important;
}

.practice-picker-panel {
  height: min(88vh, 760px) !important;
  max-height: min(88vh, 760px) !important;
  min-height: 360px !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

.practice-picker-body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-y !important;
  overscroll-behavior: contain !important;
  padding-bottom: calc(32px + env(safe-area-inset-bottom)) !important;
}

.crop-modal-mask {
  z-index: 5000 !important;
  pointer-events: auto !important;
}

.crop-modal {
  pointer-events: auto !important;
}

.crop-stage {
  min-height: 240px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 12px !important;
  touch-action: none !important;
}

.crop-image-wrap {
  position: relative !important;
  display: inline-block !important;
  max-width: 100% !important;
  max-height: 62vh !important;
  touch-action: none !important;
  cursor: crosshair !important;
  line-height: 0 !important;
}

.crop-image-wrap img,
.crop-stage img {
  display: block !important;
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 62vh !important;
  object-fit: contain !important;
  margin: 0 !important;
}

.crop-selection {
  position: absolute !important;
  pointer-events: none !important;
}

.crop-modal-actions button,
.crop-modal-head button,
.practice-image-actions button {
  pointer-events: auto !important;
  position: relative !important;
  z-index: 3 !important;
}

@media (max-width: 640px) {
  .practice-picker-panel {
    height: 88vh !important;
    max-height: 88vh !important;
    min-height: 60vh !important;
  }
  .crop-image-wrap,
  .crop-image-wrap img,
  .crop-stage img {
    max-height: 58vh !important;
  }
}


/* ===== Final fix: make practice scope picker inline-scrollable ===== */
/* 固定弹窗在部分手机 WebView 里会被 touch/overflow 拦截，所以改成刷题页内展开卡片。
   这样使用页面原生滚动，不再依赖遮罩层内部滚动。 */
.practice-picker-mask,
#practicePickerMask {
  position: static !important;
  inset: auto !important;
  z-index: auto !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 14px 0 16px !important;
  padding: 0 !important;
  background: transparent !important;
  overflow: visible !important;
  touch-action: pan-y !important;
  pointer-events: auto !important;
}

.practice-picker-panel {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
  border-radius: 24px !important;
  box-shadow: 0 14px 34px rgba(15, 23, 42, .08) !important;
  border: 1px solid #d8eadf !important;
}

.practice-picker-body {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
  touch-action: pan-y !important;
  -webkit-overflow-scrolling: auto !important;
  overscroll-behavior: auto !important;
}

.practice-picker-head {
  position: sticky;
  top: calc(64px + env(safe-area-inset-top));
  z-index: 5;
}

@media (max-width: 640px) {
  .practice-picker-mask,
  #practicePickerMask {
    margin: 12px 0 14px !important;
  }

  .practice-picker-panel {
    height: auto !important;
    max-height: none !important;
    border-radius: 22px !important;
  }

  .practice-picker-body {
    padding-bottom: 18px !important;
  }

  .practice-picker-head {
    top: calc(56px + env(safe-area-inset-top));
  }
}


/* ===== Native practice scope picker ===== */
/* 手机端改用系统原生 select，不再使用长列表弹窗滚动。 */
.practice-native-picker {
  margin: 14px 0 16px !important;
  border-radius: 24px !important;
  border: 1px solid #d8eadf !important;
  background: linear-gradient(180deg, #fbfffc, #ffffff) !important;
  box-shadow: 0 14px 34px rgba(15, 23, 42, .07) !important;
}

.practice-native-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid #e4efe8;
  margin-bottom: 14px;
}

.practice-native-head h2 {
  margin: 3px 0 5px;
  color: #123f2d;
  font-size: 24px;
  line-height: 1.2;
}

.practice-native-head p {
  margin: 0;
  color: #64748b;
  font-size: 13px;
  line-height: 1.55;
}

.native-picker-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.native-select-field {
  display: grid;
  gap: 7px;
}

.native-select-field span {
  color: #166534;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .03em;
}

.native-select-field.disabled {
  opacity: .58;
}

.native-select-field .select {
  width: 100%;
  min-height: 46px;
  border-radius: 15px;
  border: 1px solid #d8eadf;
  background: #ffffff;
  color: #123f2d;
  font-weight: 800;
}

.native-picker-preview {
  margin: 14px 0 0;
  padding: 12px 13px;
  border-radius: 16px;
  background: #ecfdf5;
  border: 1px solid #bbf7d0;
  display: grid;
  gap: 4px;
}

.native-picker-preview b {
  color: #166534;
  font-size: 12px;
}

.native-picker-preview span {
  color: #123f2d;
  font-weight: 900;
  line-height: 1.45;
}

.native-picker-actions {
  margin-top: 14px;
}

/* 旧的长列表弹窗彻底降级，避免和原生选择器冲突 */
.practice-picker-mask:not(.crop-modal-mask),
.practice-picker-panel,
.practice-picker-body {
  touch-action: auto !important;
}

@media (max-width: 640px) {
  .practice-native-picker {
    border-radius: 22px !important;
    margin: 12px 0 14px !important;
  }

  .practice-native-head {
    flex-direction: column;
  }

  .native-picker-grid {
    grid-template-columns: 1fr;
  }

  .native-select-field .select {
    min-height: 48px;
    font-size: 16px;
  }

  .native-picker-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}


/* ===== Native practice picker top placement + overflow fix ===== */
.practice-native-picker {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  margin: 12px 0 16px !important;
  overflow: hidden !important;
}

.practice-native-picker *,
.native-picker-grid,
.native-select-field,
.native-select-field .select {
  box-sizing: border-box !important;
  max-width: 100% !important;
}

.native-picker-grid {
  width: 100% !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.native-select-field {
  min-width: 0 !important;
  width: 100% !important;
}

.native-select-field .select {
  width: 100% !important;
  min-width: 0 !important;
  display: block !important;
}

.native-picker-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}

.native-picker-actions .primary-btn,
.native-picker-actions .ghost-btn {
  min-width: 120px;
}

@media (max-width: 720px) {
  .practice-native-picker {
    margin: 10px 0 14px !important;
    padding: 14px !important;
    border-radius: 20px !important;
  }

  .practice-native-head {
    gap: 10px !important;
    margin-bottom: 12px !important;
    padding-bottom: 12px !important;
  }

  .practice-native-head h2 {
    font-size: 20px !important;
  }

  .native-picker-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .native-picker-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
  }

  .native-picker-actions .primary-btn,
  .native-picker-actions .ghost-btn {
    width: 100% !important;
    min-width: 0 !important;
  }
}


/* ===== Rewritten lightweight practice scope switcher ===== */
.practice-switcher {
  margin: 12px 0 16px !important;
  padding: 16px !important;
  border-radius: 22px !important;
  border: 1px solid #d8eadf !important;
  background: linear-gradient(180deg, #fbfffc, #ffffff) !important;
  box-shadow: 0 12px 30px rgba(15, 23, 42, .06) !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

.practice-switcher *,
.practice-switcher *::before,
.practice-switcher *::after {
  box-sizing: border-box !important;
  max-width: 100% !important;
}

.practice-switcher-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid #e4efe8;
}

.practice-switcher-head h2 {
  margin: 2px 0 4px;
  color: #123f2d;
  font-size: 22px;
  line-height: 1.2;
}

.practice-switcher-head p {
  margin: 0;
  color: #64748b;
  font-size: 13px;
  line-height: 1.5;
}

.practice-switcher-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.practice-switcher-grid label {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.practice-switcher-grid label span {
  color: #166534;
  font-size: 12px;
  font-weight: 950;
}

.practice-switcher-grid label.is-disabled {
  opacity: .58;
}

.practice-switcher-grid .select {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 46px;
  display: block;
  border-radius: 15px;
  border: 1px solid #d8eadf;
  background: #fff;
  color: #123f2d;
  font-weight: 800;
}

.practice-switcher-preview {
  margin-top: 13px;
  padding: 11px 12px;
  border-radius: 15px;
  background: #ecfdf5;
  border: 1px solid #bbf7d0;
  display: grid;
  gap: 4px;
}

.practice-switcher-preview b {
  color: #166534;
  font-size: 12px;
}

.practice-switcher-preview span {
  color: #123f2d;
  font-weight: 900;
  line-height: 1.45;
}

.practice-switcher-actions {
  margin-top: 13px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.practice-switcher-actions .primary-btn,
.practice-switcher-actions .ghost-btn {
  min-width: 120px;
}

@media (max-width: 720px) {
  .practice-switcher {
    padding: 14px !important;
    border-radius: 20px !important;
  }

  .practice-switcher-head {
    flex-direction: column;
  }

  .practice-switcher-head h2 {
    font-size: 20px;
  }

  .practice-switcher-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .practice-switcher-grid .select {
    min-height: 48px;
    font-size: 16px;
  }

  .practice-switcher-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .practice-switcher-actions .primary-btn,
  .practice-switcher-actions .ghost-btn {
    min-width: 0;
    width: 100%;
  }
}


/* ===== English mini-program parity restore ===== */
.english-shell {
  display: grid;
  gap: 16px;
}

.mini-program-tabs {
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 4px;
}

.mini-program-tabs::-webkit-scrollbar {
  display: none;
}

.mini-program-tabs .english-tab {
  flex: 0 0 auto;
}

.english-dashboard {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 16px;
}

.daily-card-h5 h2 {
  margin: 4px 0 8px;
  color: #123f2d;
  font-size: 28px;
}

.daily-progress-bar {
  height: 12px;
  border-radius: 999px;
  background: #e7f2eb;
  overflow: hidden;
  margin: 14px 0 8px;
}

.daily-progress-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #166534, #22c55e);
}

.daily-progress-text {
  color: #166534;
  font-size: 13px;
  font-weight: 900;
}

.daily-grid-h5 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.daily-grid-h5 div,
.ielts-stat-list div {
  border-radius: 16px;
  background: #f8fafc;
  padding: 12px;
  border: 1px solid #e3efe7;
}

.daily-grid-h5 b,
.ielts-stat-list b {
  display: block;
  color: #123f2d;
  font-size: 22px;
  line-height: 1;
}

.daily-grid-h5 span,
.ielts-stat-list span {
  display: block;
  margin-top: 6px;
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
}

.daily-quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.ielts-stat-list {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.word-stage-card.dictation .word-main {
  letter-spacing: .04em;
  color: #1d4ed8;
}

.word-reveal {
  margin-top: 12px;
  border-radius: 14px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  padding: 10px 12px;
  color: #1d4ed8;
  font-weight: 900;
}

.speaking-chat {
  display: grid;
  gap: 10px;
  max-height: 360px;
  overflow: auto;
  padding: 6px 4px 12px;
  margin-bottom: 12px;
}

.speaking-msg {
  border: 1px solid #e3efe7;
  border-radius: 17px;
  padding: 12px;
  background: #fff;
}

.speaking-msg.examiner {
  background: linear-gradient(135deg, #ecfdf5, #ffffff);
}

.speaking-msg.student {
  background: linear-gradient(135deg, #eff6ff, #ffffff);
}

.speaking-msg b {
  display: block;
  color: #166534;
  margin-bottom: 6px;
}

.speaking-record-tip {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 14px;
  background: #f8fafc;
  color: #64748b;
  font-size: 13px;
  line-height: 1.5;
}

.wrong-words-board {
  display: grid;
  gap: 12px;
}

.wrong-group {
  border: 1px solid #d8eadf;
  border-radius: 18px;
  background: #fbfffc;
  overflow: hidden;
}

.wrong-group > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 14px;
  background: #fff;
  color: #123f2d;
}

.wrong-group > summary::-webkit-details-marker {
  display: none;
}

.wrong-group > summary span {
  color: #166534;
  font-weight: 950;
}

.wrong-word-list {
  display: grid;
  gap: 10px;
  padding: 12px;
}

.wrong-word-card {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid #e4efe8;
}

.wrong-word-card b {
  color: #123f2d;
  font-size: 18px;
}

.wrong-word-card span {
  color: #64748b;
  margin-left: 8px;
}

.wrong-word-card p {
  margin: 6px 0;
  color: #334155;
}

.wrong-word-card small {
  color: #94a3b8;
  line-height: 1.45;
}

.wrong-word-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-content: flex-start;
  justify-content: flex-end;
}

@media (max-width: 760px) {
  .english-dashboard,
  .english-grid {
    grid-template-columns: 1fr !important;
  }

  .daily-grid-h5 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .daily-quick-actions,
  .word-actions,
  .wrong-word-card {
    flex-direction: column;
  }

  .wrong-word-actions {
    justify-content: flex-start;
  }

  .speaking-chat {
    max-height: 300px;
  }
}


/* ===== English typing practice: hidden-word, stable input, mobile UI ===== */
.typing-practice-shell {
  display: grid;
  gap: 14px;
}

.typing-settings-card {
  padding: 16px !important;
}

.typing-settings-row {
  display: grid;
  grid-template-columns: 1.2fr .9fr .75fr auto;
  gap: 10px;
  align-items: end;
}

.typing-settings-row label {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.typing-settings-row label span {
  color: #166534;
  font-size: 12px;
  font-weight: 950;
}

.typing-settings-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.typing-stage {
  border: 1px solid #d8eadf;
  border-radius: 24px;
  background:
    radial-gradient(circle at 85% 16%, rgba(34,197,94,.10), transparent 32%),
    linear-gradient(180deg, #fbfffc, #ffffff);
  padding: 22px;
  min-height: 330px;
  display: grid;
  align-content: center;
  gap: 14px;
}

.typing-stage.ok {
  border-color: #86efac;
  background: linear-gradient(180deg, #f0fdf4, #ffffff);
}

.typing-stage.bad {
  border-color: #fecaca;
  background: linear-gradient(180deg, #fff7f7, #ffffff);
}

.typing-stage-top {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: #64748b;
  font-size: 13px;
  font-weight: 950;
}

.typing-prompt {
  display: grid;
  gap: 8px;
}

.typing-cn {
  color: #102a1f;
  font-size: clamp(26px, 5vw, 46px);
  line-height: 1.25;
  font-weight: 950;
}

.typing-ph {
  color: #64748b;
  font-size: 15px;
  line-height: 1.45;
}

.typing-hidden-word {
  min-height: 74px;
  display: flex;
  align-items: center;
  color: #166534;
  font-size: clamp(36px, 8vw, 72px);
  line-height: 1;
  font-weight: 950;
  letter-spacing: .18em;
}

.typing-answer {
  color: #166534;
  font-size: clamp(38px, 8vw, 72px);
  line-height: 1.08;
  font-weight: 950;
  word-break: break-word;
}

.typing-answer.bad {
  color: #b91c1c;
}

.typing-note {
  color: #64748b;
  font-size: 14px;
  line-height: 1.55;
}

.typing-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 4px;
}

.fixed-typing-box {
  margin-top: 14px;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 10px !important;
  position: sticky;
  bottom: calc(78px + env(safe-area-inset-bottom));
  z-index: 20;
  background: rgba(255,255,255,.96);
  padding: 10px;
  border: 1px solid #e3efe7;
  border-radius: 20px;
  backdrop-filter: blur(10px);
}

.fixed-typing-box .word-input {
  min-height: 52px;
  font-size: 18px;
  font-weight: 850;
}

.fixed-typing-box .primary-btn {
  min-height: 52px;
  white-space: nowrap;
}

.typing-practice-card .word-feedback {
  margin-top: 12px;
  border-radius: 18px;
  padding: 12px 14px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}

@media (max-width: 760px) {
  .typing-settings-row {
    grid-template-columns: 1fr;
  }

  .typing-settings-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .typing-stage {
    min-height: 300px;
    padding: 18px;
    border-radius: 22px;
  }

  .typing-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .typing-actions .ghost-btn {
    width: 100%;
    min-height: 42px;
  }

  .fixed-typing-box {
    bottom: calc(84px + env(safe-area-inset-bottom));
    grid-template-columns: 1fr auto !important;
  }

  .fixed-typing-box .word-input {
    font-size: 16px;
  }
}


/* ===== English AI study plan onboarding and readable plan cards ===== */
.english-plan-onboarding {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, .9fr);
  gap: 16px;
  align-items: start;
}

.plan-question-card h2,
.english-plan-summary h2 {
  margin: 4px 0 8px;
  color: #123f2d;
  font-size: 26px;
  line-height: 1.2;
}

.plan-req {
  min-height: 138px;
}

.plan-form-row {
  display: grid;
  grid-template-columns: 1.2fr repeat(3, .55fr);
  gap: 10px;
  margin-top: 12px;
}

.plan-form-row label {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.plan-form-row label span {
  color: #166534;
  font-size: 12px;
  font-weight: 950;
}

.plan-permission {
  margin: 12px 0 4px;
  padding: 11px 12px;
  border-radius: 16px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  color: #1d4ed8;
  font-size: 13px;
  line-height: 1.55;
  font-weight: 850;
}

.plan-actions {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.primary-btn.soft {
  background: #22c55e;
}

.plan-status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}

.plan-status {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 950;
}

.plan-status.accepted {
  background: #dcfce7;
  color: #166534;
  border: 1px solid #86efac;
}

.plan-status.draft {
  background: #fff7ed;
  color: #b45309;
  border: 1px solid #fed7aa;
}

.plan-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0;
}

.plan-metrics div {
  border-radius: 16px;
  background: #f8fafc;
  border: 1px solid #e3efe7;
  padding: 12px;
  min-width: 0;
}

.plan-metrics b {
  display: block;
  color: #123f2d;
  font-size: 20px;
  line-height: 1.15;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.plan-metrics span {
  display: block;
  margin-top: 6px;
  color: #64748b;
  font-size: 12px;
  font-weight: 850;
}

.plan-order-note {
  display: grid;
  gap: 5px;
  margin: 12px 0;
  padding: 12px;
  border-radius: 16px;
  background: #ecfdf5;
  border: 1px solid #bbf7d0;
}

.plan-order-note b {
  color: #166534;
}

.plan-order-note span {
  color: #475569;
  line-height: 1.55;
  font-size: 13px;
}

.plan-id-preview {
  margin: 10px 0;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 10px 12px;
  background: #f8fafc;
}

.plan-id-preview summary {
  cursor: pointer;
  color: #475569;
  font-weight: 900;
}

.plan-id-preview code {
  display: block;
  margin-top: 8px;
  white-space: normal;
  word-break: break-all;
  color: #64748b;
}

.plan-phases {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.plan-phases div {
  border-left: 4px solid #22c55e;
  background: #fbfffc;
  border-radius: 12px;
  padding: 10px 12px;
}

.plan-phases b {
  color: #123f2d;
}

.plan-phases p {
  margin: 5px 0 0;
  color: #64748b;
  line-height: 1.55;
}

.plan-tips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.plan-tips span {
  border-radius: 999px;
  padding: 6px 10px;
  background: #f1f5f9;
  color: #475569;
  font-size: 12px;
  font-weight: 850;
}

.plan-error {
  padding: 12px;
  border-radius: 14px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #b91c1c;
  line-height: 1.55;
}

@media (max-width: 820px) {
  .english-plan-onboarding {
    grid-template-columns: 1fr;
  }

  .plan-form-row {
    grid-template-columns: 1fr 1fr;
  }

  .plan-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .plan-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .plan-actions .primary-btn,
  .plan-actions .ghost-btn,
  .plan-actions .danger-btn {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .plan-form-row,
  .plan-metrics {
    grid-template-columns: 1fr;
  }
}


/* ===== English repeat-until-correct lock ===== */
.typing-stage.bad .typing-note {
  color: #b91c1c;
  font-weight: 900;
}

.typing-stage.bad .typing-hidden-word,
.typing-stage.bad .typing-answer {
  color: #b91c1c;
}

.typing-stage.bad .typing-actions #wordNextBtn {
  opacity: .62;
  cursor: not-allowed;
}

.word-feedback.show {
  line-height: 1.65;
}



/* ===== English typing: no top controls + wrong answer reveal/retry ===== */
.typing-practice-shell.no-settings {
  gap: 0;
}

.typing-practice-shell.no-settings .typing-practice-card {
  margin-top: 0;
}

.english-empty .primary-btn {
  margin-top: 14px;
}

.typing-stage.bad .typing-note {
  color: #b91c1c;
  font-weight: 950;
}

.typing-stage.bad .typing-answer {
  color: #b91c1c;
}

.typing-stage.bad .typing-actions #wordNextBtn {
  opacity: 1;
  cursor: pointer;
  border-color: #fecaca;
  color: #b91c1c;
}



/* ===== English accepted plan persistence hint ===== */
.daily-quick-actions [data-english-tab="plan"] {
  border-color: #bbf7d0;
  color: #166534;
  background: #ecfdf5;
}



/* ===== English corpus always follows accepted plan ===== */
.english-empty p {
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}



/* ===== English refresh restores exact current word ===== */
.typing-practice-card::before {
  content: '已按计划保存当前词，刷新后会回到同一个词';
  display: block;
  margin: 0 0 10px;
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
}



/* ===== English plan exact word tracking ===== */
.typing-practice-card::before {
  content: '按计划练习：已记录当前具体单词 ID，刷新后恢复同一个词';
}



/* ===== English fixed AI word order after plan acceptance ===== */
.plan-order-note b {
  display: block;
  margin-bottom: 4px;
}

.typing-practice-card::before {
  content: '按固定词序练习：AI 计划接受后词序已锁定，除非修改计划';
}



/* ===== Rewritten English module: plan-first fixed word order ===== */
.eng-plan-layout,
.eng-daily {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, .9fr);
  gap: 16px;
  align-items: start;
}

.eng-plan-form h1,
.eng-today-card h1,
.eng-plan-card h2 {
  margin: 5px 0 8px;
  color: #123f2d;
  line-height: 1.15;
}

.eng-plan-grid {
  display: grid;
  grid-template-columns: 1.2fr repeat(3, .6fr);
  gap: 10px;
  margin-top: 12px;
}

.eng-plan-grid label {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.eng-plan-grid span {
  color: #166534;
  font-size: 12px;
  font-weight: 950;
}

.eng-plan-permission {
  margin: 12px 0;
  padding: 11px 12px;
  border-radius: 16px;
  background: #ecfdf5;
  border: 1px solid #bbf7d0;
  color: #166534;
  font-weight: 900;
  line-height: 1.55;
  font-size: 13px;
}

.eng-plan-status {
  display: inline-flex;
  border-radius: 999px;
  padding: 6px 10px;
  background: #dcfce7;
  color: #166534;
  border: 1px solid #86efac;
  font-size: 12px;
  font-weight: 950;
  margin-bottom: 8px;
}

.eng-plan-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0;
}

.eng-plan-metrics div {
  border-radius: 16px;
  background: #f8fafc;
  border: 1px solid #e3efe7;
  padding: 12px;
  min-width: 0;
}

.eng-plan-metrics b {
  display: block;
  color: #123f2d;
  font-size: 20px;
  line-height: 1.15;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.eng-plan-metrics span {
  display: block;
  color: #64748b;
  margin-top: 6px;
  font-size: 12px;
  font-weight: 850;
}

.eng-order-preview {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 14px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}

.eng-order-preview summary {
  cursor: pointer;
  color: #475569;
  font-weight: 900;
}

.eng-order-preview code {
  display: block;
  margin-top: 8px;
  white-space: normal;
  word-break: break-word;
  color: #64748b;
  line-height: 1.55;
}

.typing-practice-card::before {
  content: '固定词序：读音、判题、显示都来自同一个当前单词对象';
  display: block;
  margin: 0 0 10px;
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
}

.primary-btn.soft {
  background: #22c55e;
}

@media (max-width: 820px) {
  .eng-plan-layout,
  .eng-daily {
    grid-template-columns: 1fr;
  }

  .eng-plan-grid,
  .eng-plan-metrics {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 480px) {
  .eng-plan-grid,
  .eng-plan-metrics {
    grid-template-columns: 1fr;
  }
}


/* ===== English wrong-word attribution groups ===== */
.wrong-board-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.wrong-total-pill {
  flex: 0 0 auto;
  border-radius: 999px;
  padding: 7px 11px;
  background: #ecfdf5;
  border: 1px solid #bbf7d0;
  color: #166534;
  font-size: 12px;
  font-weight: 950;
}

.wrong-attr-group {
  border: 1px solid #d8eadf;
  border-radius: 20px;
  background: #fbfffc;
  overflow: hidden;
  margin-top: 12px;
}

.wrong-attr-group > summary {
  cursor: pointer;
  list-style: none;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  background: linear-gradient(135deg, #ffffff, #f7fef9);
}

.wrong-attr-group > summary::-webkit-details-marker {
  display: none;
}

.wrong-attr-icon {
  width: 42px;
  height: 42px;
  border-radius: 15px;
  display: grid;
  place-items: center;
  background: #ecfdf5;
  color: #166534;
  font-weight: 950;
  border: 1px solid #bbf7d0;
}

.wrong-attr-group summary b {
  display: block;
  color: #123f2d;
  font-size: 16px;
}

.wrong-attr-group summary small {
  display: block;
  margin-top: 4px;
  color: #64748b;
  line-height: 1.45;
}

.wrong-attr-group summary em {
  font-style: normal;
  color: #166534;
  background: #dcfce7;
  border-radius: 999px;
  padding: 5px 9px;
  font-size: 12px;
  font-weight: 950;
}

.attr-card {
  align-items: flex-start;
}

.wrong-word-title {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: baseline;
}

.wrong-word-title b {
  color: #123f2d;
  font-size: 19px;
}

.wrong-word-title span {
  color: #64748b;
  font-size: 13px;
}

@media (max-width: 640px) {
  .wrong-board-head {
    flex-direction: column;
  }

  .wrong-attr-group > summary {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .wrong-attr-group summary em {
    grid-column: 1 / -1;
    width: fit-content;
  }

  .wrong-word-card.attr-card {
    flex-direction: column;
  }

  .wrong-word-actions {
    width: 100%;
    justify-content: flex-start;
  }
}


/* ===== IELTS speaking: recording + latest topic + follow-up scoring ===== */
.speaking-layout {
  display: grid;
  grid-template-columns: minmax(260px, .85fr) minmax(0, 1.4fr);
  gap: 16px;
  align-items: start;
}

.speaking-control-card,
.speaking-exam-card {
  border-radius: 24px;
}

.speaking-control-card label,
.speaking-exam-card label {
  display: block;
  margin-top: 12px;
  margin-bottom: 7px;
  color: #166534;
  font-size: 12px;
  font-weight: 950;
}

.speaking-latest-note {
  margin: 12px 0;
  padding: 10px 12px;
  border-radius: 15px;
  background: #ecfdf5;
  border: 1px solid #bbf7d0;
  color: #166534;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.5;
}

.speaking-chat {
  display: grid;
  gap: 10px;
  max-height: 460px;
  overflow: auto;
  padding: 4px 2px 12px;
  margin-bottom: 12px;
}

.speaking-msg {
  border: 1px solid #e3efe7;
  border-radius: 18px;
  padding: 12px;
  background: #fff;
}

.speaking-msg.examiner.question {
  background: linear-gradient(135deg, #ecfdf5, #ffffff);
  border-color: #bbf7d0;
}

.speaking-msg.examiner.feedback {
  background: linear-gradient(135deg, #eff6ff, #ffffff);
  border-color: #bfdbfe;
}

.speaking-msg.student {
  background: linear-gradient(135deg, #fff7ed, #ffffff);
  border-color: #fed7aa;
}

.speaking-msg b {
  display: block;
  margin-bottom: 7px;
  color: #123f2d;
}

.speaking-answer {
  min-height: 130px;
}

.speaking-toolbar {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

#recordSpeakingBtn.recording {
  background: #fef2f2;
  border-color: #fecaca;
  color: #b91c1c;
  animation: speakingPulse 1.2s infinite;
}

@keyframes speakingPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(185, 28, 28, .22); }
  50% { box-shadow: 0 0 0 8px rgba(185, 28, 28, 0); }
}

.speaking-record-tip {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 15px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  color: #64748b;
  font-size: 13px;
  line-height: 1.55;
}

@media (max-width: 820px) {
  .speaking-layout {
    grid-template-columns: 1fr;
  }

  .speaking-chat {
    max-height: 360px;
  }

  .speaking-toolbar {
    display: grid;
    grid-template-columns: 1fr;
  }

  .speaking-toolbar .primary-btn,
  .speaking-toolbar .ghost-btn {
    width: 100%;
  }
}


/* ===== Speaking browser ASR hint ===== */
.speaking-record-tip::before {
  content: '🎙 ';
}



/* ===== Local accounts / personal spaces ===== */
.account-settings-card {
  display: grid;
  gap: 12px;
}

.account-current {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px;
  border-radius: 18px;
  background: linear-gradient(135deg, #ecfdf5, #ffffff);
  border: 1px solid #bbf7d0;
}

.account-avatar {
  width: 46px;
  height: 46px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: #166534;
  color: #fff;
  font-size: 20px;
  font-weight: 950;
}

.account-current b {
  display: block;
  color: #123f2d;
  font-size: 17px;
}

.account-current span,
.account-mini-card span {
  display: block;
  margin-top: 4px;
  color: #64748b;
  font-size: 12px;
  line-height: 1.45;
}

.account-settings-card label {
  color: #166534;
  font-size: 12px;
  font-weight: 950;
  margin-top: 4px;
}

.account-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.account-list {
  display: grid;
  gap: 8px;
  margin-top: 4px;
}

.account-mini-card {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  padding: 10px 11px;
  border-radius: 15px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}

.account-mini-card.active {
  background: #ecfdf5;
  border-color: #bbf7d0;
}

.account-mini-card b {
  color: #123f2d;
}

.account-mini-card em {
  flex: 0 0 auto;
  font-style: normal;
  color: #166534;
  font-size: 12px;
  font-weight: 950;
  background: #dcfce7;
  border-radius: 999px;
  padding: 5px 8px;
}

.card-desc.small {
  font-size: 12px;
}

@media (max-width: 640px) {
  .account-row {
    grid-template-columns: 1fr;
  }

  .account-row .primary-btn,
  .account-row .ghost-btn,
  .account-settings-card .danger-btn {
    width: 100%;
  }

  .account-mini-card {
    align-items: flex-start;
    flex-direction: column;
  }
}


/* ===== Required login / register gate ===== */
body.auth-locked {
  overflow: hidden;
  background: radial-gradient(circle at top left, rgba(34,197,94,.18), transparent 32%),
              linear-gradient(135deg, #f7fff9, #eef8f2 46%, #f8fafc);
}

body.auth-locked #app {
  display: none !important;
}

#authGate {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: grid;
  place-items: center;
  padding: 20px;
  background: radial-gradient(circle at 20% 15%, rgba(22,101,52,.16), transparent 34%),
              radial-gradient(circle at 85% 80%, rgba(59,130,246,.12), transparent 30%),
              linear-gradient(135deg, #f7fff9, #eef8f2 48%, #f8fafc);
}

.auth-shell {
  width: min(100%, 460px);
}

.auth-card {
  border-radius: 28px;
  padding: 24px;
  background: rgba(255,255,255,.92);
  border: 1px solid #d8eadf;
  box-shadow: 0 24px 70px rgba(15, 23, 42, .14);
  backdrop-filter: blur(14px);
  display: grid;
  gap: 12px;
}

.auth-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 4px;
}

.auth-brand img {
  width: 46px;
  height: 46px;
  border-radius: 14px;
}

.auth-brand b {
  display: block;
  color: #123f2d;
  font-size: 18px;
}

.auth-brand span {
  display: block;
  color: #64748b;
  font-size: 12px;
  margin-top: 3px;
}

.auth-card h1 {
  margin: 4px 0 0;
  color: #123f2d;
  font-size: 28px;
  line-height: 1.15;
}

.auth-card p {
  margin: 0;
  color: #64748b;
  line-height: 1.6;
}

.auth-card label {
  color: #166534;
  font-size: 12px;
  font-weight: 950;
  margin-top: 4px;
}

.auth-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 6px;
}

.auth-message {
  border-radius: 14px;
  padding: 10px 12px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #b91c1c;
  font-size: 13px;
  font-weight: 850;
}

.auth-legacy-note {
  border-radius: 14px;
  padding: 10px 12px;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  color: #9a3412;
  font-size: 13px;
  line-height: 1.55;
}

.auth-small {
  font-size: 12px;
  text-align: center;
}


.auth-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(15, 23, 42, .42);
  backdrop-filter: blur(8px);
}

.auth-modal-backdrop[hidden] {
  display: none !important;
}

.auth-modal {
  position: relative;
  width: min(100%, 440px);
  border-radius: 26px;
  padding: 24px;
  background: rgba(255, 255, 255, .98);
  border: 1px solid #d8eadf;
  box-shadow: 0 30px 90px rgba(15, 23, 42, .25);
  display: grid;
  gap: 12px;
  animation: authModalIn .18s ease-out;
}

@keyframes authModalIn {
  from { transform: translateY(10px) scale(.98); opacity: 0; }
  to { transform: translateY(0) scale(1); opacity: 1; }
}

.auth-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 999px;
  background: #f1f5f9;
  color: #334155;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.auth-modal-close:hover {
  background: #e2e8f0;
}

.auth-modal-kicker {
  color: #16a34a;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .14em;
}

.auth-modal h2 {
  margin: 0;
  color: #123f2d;
  font-size: 25px;
  line-height: 1.18;
}

.auth-modal p {
  margin: 0;
  color: #64748b;
  line-height: 1.6;
}

.auth-modal label {
  color: #166534;
  font-size: 12px;
  font-weight: 950;
  margin-top: 2px;
}

.auth-password-hint {
  font-size: 12px;
  text-align: center;
}

.auth-modal-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 4px;
}

.account-row-3 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
}

@media (max-width: 640px) {
  #authGate {
    padding: 14px;
    align-items: start;
    overflow: auto;
  }

  .auth-card {
    margin-top: 24px;
    border-radius: 24px;
    padding: 18px;
  }

  .auth-actions,
  .auth-modal-actions,
  .account-row-3 {
    grid-template-columns: 1fr;
  }

  .auth-modal-backdrop {
    align-items: start;
    overflow: auto;
    padding: 14px;
  }

  .auth-modal {
    margin-top: 18px;
    border-radius: 24px;
    padding: 20px 18px;
  }
}


/* ===== Cloud sync account controls ===== */
.auth-legacy-note {
  background: #eff6ff !important;
  border-color: #bfdbfe !important;
  color: #1d4ed8 !important;
}

.account-settings-card .toolbar {
  flex-wrap: wrap;
}



/* ===== Mobile English typing keyboard jump fix =====
   Keep the input DOM stable in JS and remove mobile sticky/focus scroll jumps. */
.typing-practice-card,
.typing-stage,
.fixed-typing-box,
#wordAnswerInput {
  overflow-anchor: none;
}

@media (max-width: 760px) {
  .fixed-typing-box {
    position: relative !important;
    bottom: auto !important;
    z-index: 5 !important;
    transform: translateZ(0);
  }

  body.english-typing-keyboard .fixed-typing-box {
    position: relative !important;
    bottom: auto !important;
  }

  .typing-practice-card .word-feedback {
    display: block !important;
    min-height: 88px;
    visibility: hidden;
    opacity: 0;
    transition: opacity .12s ease;
  }

  .typing-practice-card .word-feedback.show {
    visibility: visible;
    opacity: 1;
  }

  .typing-practice-card {
    padding-bottom: calc(18px + env(safe-area-inset-bottom));
  }
}

/* ===== User-facing AI disclaimer + mobile keyboard stability fix ===== */
.ai-disclaimer {
  display: grid;
  gap: 3px;
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 14px;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  color: #7c2d12;
  font-size: 13px;
  line-height: 1.55;
}
.ai-disclaimer b {
  display: block;
  color: #9a3412;
  font-size: 13px;
  font-weight: 950;
}
.ai-disclaimer span { display: block; }
body.dark .ai-disclaimer {
  background: rgba(251, 146, 60, .10);
  border-color: rgba(251, 146, 60, .24);
  color: #fed7aa;
}
body.dark .ai-disclaimer b { color: #fdba74; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* iOS/微信内置浏览器聚焦 16px 以下输入框会自动放大；统一不低于 16px，但不禁用双指缩放。 */
input,
textarea,
select,
button,
.ai-textarea,
.selection-dialog-textarea,
.word-input,
.speaking-answer {
  font-size: max(16px, 1em) !important;
}

@media (max-width: 899px) {
  :root { --keyboard-offset: 0px; }
  .sidebar {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    bottom: calc(-1 * var(--keyboard-offset, 0px)) !important;
    transform: translateZ(0) !important;
    will-change: bottom;
    z-index: 1000 !important;
  }
  .toast {
    bottom: calc(86px + env(safe-area-inset-bottom) - var(--keyboard-offset, 0px)) !important;
  }
  .floating-ai-root.expanded-root {
    bottom: calc(70px + env(safe-area-inset-bottom) - var(--keyboard-offset, 0px)) !important;
  }
}

/* 合规说明与隐私提示卡片 */
.policy-card { grid-column: 1 / -1; }
.policy-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.policy-grid > div { border: 1px solid rgba(20, 83, 45, .12); background: rgba(255,255,255,.66); border-radius: 14px; padding: 12px; }
.policy-grid b { display: block; font-size: 13px; margin-bottom: 6px; color: var(--text); }
.policy-grid span { display: block; font-size: 12px; line-height: 1.65; color: var(--muted); }
.policy-details { margin-top: 12px; font-size: 12px; line-height: 1.7; color: var(--muted); }
.policy-details summary { cursor: pointer; color: var(--text); font-weight: 700; }
.policy-details p { margin: 8px 0 0; }
.dark .policy-grid > div { background: rgba(15, 23, 42, .48); border-color: rgba(255,255,255,.10); }
@media (max-width: 760px) { .policy-grid { grid-template-columns: 1fr; } }

/* 用户协议与跨境传输确认 */
.consent-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 12px 0;
  padding: 12px;
  border: 1px solid rgba(20, 83, 45, .14);
  border-radius: 14px;
  background: rgba(255,255,255,.72);
  font-size: 12px;
  line-height: 1.65;
  color: var(--muted);
}
.consent-row input { width: 18px; height: 18px; margin-top: 2px; flex: 0 0 auto; }
.consent-row span { flex: 1; }
.dark .consent-row { background: rgba(15, 23, 42, .48); border-color: rgba(255,255,255,.10); }


/* 首次进入用户协议弹窗 */
.initial-policy-open { overflow: hidden !important; }
.initial-policy-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
  background: rgba(8, 15, 25, .66);
  backdrop-filter: blur(12px);
}
.initial-policy-card {
  width: min(920px, 100%);
  max-height: min(92vh, 820px);
  display: flex;
  flex-direction: column;
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 24px 80px rgba(15, 23, 42, .35);
  padding: 22px;
  color: var(--text);
}
.dark .initial-policy-card { background: rgba(15, 23, 42, .97); border-color: rgba(255,255,255,.12); }
.initial-policy-kicker { font-size: 12px; font-weight: 800; letter-spacing: .12em; color: var(--primary); text-transform: uppercase; }
.initial-policy-card h2 { margin: 8px 0 8px; font-size: 24px; line-height: 1.25; }
.initial-policy-desc { margin: 0 0 12px; color: var(--muted); line-height: 1.7; font-size: 14px; }
.initial-policy-scroll {
  overflow: auto;
  border: 1px solid rgba(20, 83, 45, .12);
  border-radius: 18px;
  background: rgba(248, 250, 252, .75);
  padding: 14px 16px;
  max-height: 48vh;
}
.dark .initial-policy-scroll { background: rgba(2, 6, 23, .42); border-color: rgba(255,255,255,.10); }
.initial-policy-scroll h3 { margin: 0 0 8px; font-size: 16px; }
.policy-list { margin: 8px 0 0; padding-left: 20px; color: var(--muted); font-size: 13px; line-height: 1.78; }
.policy-list li { margin: 6px 0; }
.full-policy-body { margin-top: 10px; color: var(--muted); font-size: 13px; line-height: 1.82; }
.full-policy-body h4 { margin: 16px 0 6px; color: var(--text); font-size: 14px; }
.full-policy-body p { margin: 6px 0; }
.initial-policy-check { margin-top: 14px; }
.initial-policy-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 12px; }
.initial-policy-note { margin: 10px 0 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.initial-policy-actions button:disabled { opacity: .52; cursor: not-allowed; }
@media (max-width: 640px) {
  .initial-policy-modal { align-items: stretch; padding: 10px; }
  .initial-policy-card { max-height: calc(100svh - 20px); border-radius: 20px; padding: 16px; }
  .initial-policy-card h2 { font-size: 20px; }
  .initial-policy-scroll { max-height: 48svh; padding: 12px; }
  .initial-policy-actions { flex-direction: column-reverse; }
  .initial-policy-actions button { width: 100%; }
}


/* ===== Smart floating back button ===== */
.smart-back-fab {
  position: fixed;
  right: 18px;
  bottom: calc(164px + env(safe-area-inset-bottom));
  width: 52px;
  height: 52px;
  border-radius: 999px;
  border: 1px solid rgba(22, 101, 52, .20);
  background: rgba(255, 255, 255, .92);
  color: #166534;
  box-shadow: 0 14px 32px rgba(15, 23, 42, .18);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  z-index: 9998;
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px) scale(.96);
  transition: opacity .18s ease, transform .18s ease, box-shadow .18s ease;
  -webkit-tap-highlight-color: transparent;
}
.smart-back-fab.show {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}
.smart-back-fab:active {
  transform: translateY(1px) scale(.97);
  box-shadow: 0 8px 18px rgba(15, 23, 42, .16);
}
.smart-back-icon {
  font-size: 25px;
  line-height: 1;
  font-weight: 950;
  transform: translateY(-1px);
}
.smart-back-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
body.dark .smart-back-fab {
  background: rgba(20, 31, 26, .94);
  color: #bbf7d0;
  border-color: rgba(187, 247, 208, .18);
  box-shadow: 0 14px 32px rgba(0, 0, 0, .35);
}
@media (min-width: 821px) {
  .smart-back-fab {
    right: calc((100vw - 820px) / 2 + 18px);
    bottom: 108px;
  }
}
@media (max-width: 760px) {
  .smart-back-fab {
    right: 12px;
    bottom: calc(154px + env(safe-area-inset-bottom) - var(--keyboard-offset, 0px));
    width: 48px;
    height: 48px;
  }
  .smart-back-icon { font-size: 23px; }
}
@media (max-width: 390px) {
  .smart-back-fab {
    right: 10px;
    bottom: calc(150px + env(safe-area-inset-bottom) - var(--keyboard-offset, 0px));
  }
}


/* ===== MOBILE_ENGLISH_TYPING_LOCK_CSS_20260611: 英语单词移动端打字锁屏 =====
   输入英文单词/短语时，把“中文提示卡 + 输入框”固定在可视区域内，
   避免键盘弹出、微信切回、切换下一个词时上下跳动；不禁止双指缩放。 */
:root {
  --typing-vvh: 100svh;
  --typing-vvtop: 0px;
}
@supports (height: 100dvh) {
  :root { --typing-vvh: 100dvh; }
}

@media (max-width: 760px) {
  body.english-typing-lock {
    overflow: hidden !important;
    height: 100% !important;
    overscroll-behavior: none;
    touch-action: pan-x pan-y pinch-zoom;
  }

  body.english-typing-lock .topbar {
    transform: translateY(-120%) !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  body.english-typing-lock .sidebar {
    transform: translateY(120%) !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  body.english-typing-lock .floating-ai-root,
  body.english-typing-lock #smartBackFab {
    display: none !important;
  }

  body.english-typing-lock .main {
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body.english-typing-lock #view-english {
    position: fixed !important;
    z-index: 1500 !important;
    top: var(--typing-vvtop, 0px) !important;
    left: 0 !important;
    right: 0 !important;
    height: var(--typing-vvh, 100svh) !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 6px 6px max(6px, env(safe-area-inset-bottom)) !important;
    overflow: hidden !important;
    background: linear-gradient(180deg, #f7faf6 0%, #eef8f0 100%) !important;
  }

  body.english-typing-lock .english-hero,
  body.english-typing-lock .english-tabs {
    display: none !important;
  }

  body.english-typing-lock .english-shell {
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body.english-typing-lock .typing-practice-shell,
  body.english-typing-lock .typing-practice-card {
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    overflow: hidden !important;
  }

  body.english-typing-lock .typing-practice-card {
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body.english-typing-lock .typing-stage {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
    padding: 14px 18px !important;
    border-radius: 20px !important;
    gap: 8px !important;
    align-content: space-evenly !important;
    border-color: rgba(34, 197, 94, .18) !important;
  }

  body.english-typing-lock .typing-stage-top {
    font-size: 12px !important;
    line-height: 1.2 !important;
  }

  body.english-typing-lock .typing-cn {
    font-size: clamp(28px, 8.4vw, 42px) !important;
    line-height: 1.16 !important;
    letter-spacing: -.03em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  body.english-typing-lock .typing-ph,
  body.english-typing-lock .typing-note {
    font-size: 13px !important;
    line-height: 1.35 !important;
  }

  body.english-typing-lock .typing-hidden-word {
    min-height: 42px !important;
    font-size: clamp(28px, 8vw, 44px) !important;
    line-height: 1 !important;
  }

  body.english-typing-lock .typing-answer {
    font-size: clamp(28px, 8vw, 44px) !important;
    line-height: 1.08 !important;
  }

  body.english-typing-lock .typing-actions {
    margin-top: 0 !important;
    gap: 8px !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body.english-typing-lock .typing-actions .ghost-btn {
    width: 100% !important;
    min-height: 36px !important;
    padding: 8px 10px !important;
    font-size: 14px !important;
  }

  body.english-typing-lock .fixed-typing-box {
    flex: 0 0 auto !important;
    position: relative !important;
    bottom: auto !important;
    z-index: 2 !important;
    margin-top: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 8px !important;
    padding: 8px !important;
    border-radius: 18px !important;
    background: rgba(255,255,255,.98) !important;
    box-shadow: 0 8px 22px rgba(15,31,25,.08);
  }

  body.english-typing-lock .fixed-typing-box .word-input {
    min-height: 50px !important;
    font-size: 16px !important;
    line-height: 1.2 !important;
  }

  body.english-typing-lock .fixed-typing-box .primary-btn {
    min-height: 50px !important;
    padding: 0 16px !important;
    border-radius: 999px !important;
  }

  body.english-typing-lock .typing-practice-card .word-feedback {
    display: none !important;
    min-height: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
  }
}

@media (max-width: 760px) and (max-height: 560px) {
  body.english-typing-lock #view-english { padding: 4px !important; }
  body.english-typing-lock .typing-stage { padding: 10px 14px !important; gap: 5px !important; }
  body.english-typing-lock .typing-cn { font-size: clamp(24px, 7.4vw, 36px) !important; }
  body.english-typing-lock .typing-ph,
  body.english-typing-lock .typing-note { font-size: 12px !important; line-height: 1.25 !important; }
  body.english-typing-lock .typing-hidden-word,
  body.english-typing-lock .typing-answer { min-height: 34px !important; font-size: clamp(24px, 7vw, 36px) !important; }
  body.english-typing-lock .typing-actions .ghost-btn { min-height: 32px !important; padding: 6px 8px !important; }
  body.english-typing-lock .fixed-typing-box { padding: 6px !important; }
  body.english-typing-lock .fixed-typing-box .word-input,
  body.english-typing-lock .fixed-typing-box .primary-btn { min-height: 44px !important; }
}


.form-graphic-card {
  margin: 0 0 14px;
  padding: 14px;
  border: 1px solid rgba(31, 110, 67, .12);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(244,249,246,.96), rgba(255,255,255,.98));
}
.form-graphic-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 6px;
}
.form-graphic-scroll svg {
  display: block;
  min-width: 680px;
  height: auto;
}


.form-history-card { margin: 14px 0; }
.form-history-head { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:10px; }
.form-history-list { display:grid; gap:8px; }
.form-history-item { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:10px; border:1px solid rgba(31,110,67,.12); border-radius:16px; background:rgba(255,255,255,.72); }
.form-history-item.active { border-color: rgba(31,110,67,.45); background:rgba(236,253,245,.88); }
.form-history-main { min-width:0; display:flex; flex-direction:column; gap:3px; }
.form-history-main b { font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.form-history-main span { font-size:12px; color:var(--mini-muted); }
.form-history-actions { display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; }
.form-history-actions .small { min-height:30px; padding:6px 10px; font-size:12px; }
.selection-btn.danger { background:#fee2e2; color:#b91c1c; }
.form-rating-mask { position:fixed; inset:0; z-index:2600; background:rgba(15,31,25,.42); display:flex; align-items:center; justify-content:center; padding:18px; }
.form-rating-dialog { width:min(520px, 100%); background:#fff; border-radius:24px; padding:20px; box-shadow:0 24px 80px rgba(0,0,0,.25); border:1px solid rgba(31,110,67,.12); }
.form-rating-title { font-size:20px; font-weight:900; color:#10351f; margin-bottom:8px; }
.form-rating-desc { font-size:13px; color:#647067; line-height:1.6; margin-bottom:10px; }
.form-rating-report { padding:10px 12px; border-radius:14px; background:#f0fdf4; color:#166534; font-weight:800; margin-bottom:12px; }
.form-stars { display:flex; gap:6px; margin:8px 0 12px; }
.form-star { border:0; background:#eef2f0; color:#94a3a0; width:42px; height:42px; border-radius:14px; font-size:24px; cursor:pointer; }
.form-star.active { background:#fef3c7; color:#d97706; }
.form-rating-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:12px; }
@media (max-width: 520px) {
  .form-history-item { align-items:flex-start; flex-direction:column; }
  .form-history-actions { width:100%; justify-content:flex-start; }
  .form-rating-dialog { border-radius:20px; padding:16px; }
  .form-star { width:38px; height:38px; }
}


.form-result-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.form-result-head .small {
  white-space: nowrap;
}
@media (max-width: 520px) {
  .form-result-head { align-items: flex-start; }
  .form-result-head .small { padding: 8px 10px; font-size: 12px; }
}


/* SMART_BACK_MOBILE_TAP_FIX_20260612: 提高右下角返回按钮层级，避免被底部栏/浮层遮住导致点不动。 */
.smart-back-fab {
  z-index: 2147483000 !important;
  pointer-events: none !important;
  touch-action: manipulation !important;
  user-select: none !important;
  -webkit-user-select: none !important;
}
.smart-back-fab.show { pointer-events: auto !important; }
.smart-back-fab * { pointer-events: none !important; }
@media (max-width: 760px) {
  .smart-back-fab {
    right: max(12px, env(safe-area-inset-right)) !important;
    bottom: calc(92px + env(safe-area-inset-bottom)) !important;
    width: 52px !important;
    height: 52px !important;
  }
}
@media (max-width: 390px) {
  .smart-back-fab { bottom: calc(92px + env(safe-area-inset-bottom)) !important; }
}

/* ENGLISH_TYPING_EXIT_BUTTON_20260612: 移动端全屏打字增加手动退出按钮，防止切回应用后卡住。 */
.typing-exit-lock-btn {
  display: none;
  border: 0;
  background: rgba(15, 31, 25, .78);
  color: #fff;
  border-radius: 999px;
  min-height: 34px;
  padding: 0 12px;
  font-size: 13px;
  font-weight: 800;
  box-shadow: 0 8px 20px rgba(15,31,25,.18);
}
@media (max-width: 760px) {
  body.english-typing-lock .typing-exit-lock-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    position: fixed !important;
    z-index: 2147483001 !important;
    top: calc(var(--typing-vvtop, 0px) + 8px + env(safe-area-inset-top)) !important;
    right: max(10px, env(safe-area-inset-right)) !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
  }
  body.english-typing-lock .typing-stage { padding-top: 44px !important; }
}


.form-result-head { gap: 10px; }
.form-result-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.form-pending-card {
  margin: 10px 0 14px;
  padding: 12px;
  border: 1px solid rgba(22, 101, 52, .16);
  border-radius: 18px;
  background: rgba(240, 253, 244, .78);
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
}
.form-pending-card b { display: block; margin-bottom: 3px; }
.form-pending-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 520px) {
  .form-pending-card { align-items: stretch; flex-direction: column; }
  .form-pending-actions button { flex: 1; }
  .form-result-actions { width: 100%; justify-content: flex-start; margin-top: 8px; }
}

/* ===== v7: move context navigation controls to the right =====
   Keeps the course/lesson switch buttons near the right edge, matching thumb/eye flow.
   Affects: 选知识点 / 换课程 / 换板块 / 切换知识点 action clusters. */
.selected-hero:not(.polished-english-hero) {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: start !important;
  gap: 16px !important;
}

.selected-hero:not(.polished-english-hero) > .hero-actions,
.lesson-hero > .hero-actions {
  width: auto !important;
  margin-left: auto !important;
  justify-content: flex-end !important;
  align-self: start !important;
}

.selected-hero:not(.polished-english-hero) > #backCatsBtn {
  justify-self: end !important;
  align-self: start !important;
  margin-left: auto !important;
}

.practice-scope-actions {
  margin-left: auto !important;
  justify-content: flex-end !important;
}

@media (max-width: 760px) {
  .selected-hero:not(.polished-english-hero) {
    grid-template-columns: 1fr !important;
  }

  .selected-hero:not(.polished-english-hero) > .hero-actions,
  .lesson-hero > .hero-actions {
    width: 100% !important;
    margin-left: 0 !important;
    justify-content: flex-end !important;
    align-self: stretch !important;
  }

  .selected-hero:not(.polished-english-hero) > #backCatsBtn {
    justify-self: end !important;
    align-self: end !important;
    margin-left: 0 !important;
  }

  .practice-scope-actions {
    width: 100% !important;
    justify-content: flex-end !important;
  }

  .scope-pill,
  .practice-scope-actions .ghost-btn {
    flex: 0 0 auto !important;
  }
}

/* ===== v8 feature hero cards for bottom tools ===== */
.feature-hero {
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  padding: 26px;
  margin: 8px 0 18px;
  color: #fff;
  background: linear-gradient(135deg, #0f1f19 0%, #166534 58%, #4e9967 100%);
  box-shadow: 0 16px 40px rgba(15, 31, 25, .16);
}
.feature-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 74% 18%, rgba(255,255,255,.16), transparent 32%), linear-gradient(135deg, rgba(255,255,255,.08), transparent 50%);
  pointer-events: none;
}
.feature-hero::after {
  content: '';
  position: absolute;
  right: -74px;
  bottom: -122px;
  width: 286px;
  height: 286px;
  border-radius: 999px;
  background: rgba(255,255,255,.14);
  pointer-events: none;
}
.feature-hero-content {
  position: relative;
  z-index: 1;
  max-width: 780px;
}
.feature-hero h1 {
  margin: 6px 0 10px;
  font-size: clamp(30px, 5vw, 46px);
  line-height: 1.12;
  letter-spacing: -.04em;
}
.feature-hero p {
  max-width: 760px;
  margin: 0;
  color: rgba(255,255,255,.8);
  line-height: 1.75;
}
.feature-hero .eyebrow {
  color: rgba(134, 239, 172, .95);
  letter-spacing: .26em;
}
.feature-hero-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}
.feature-hero-pills span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 11px;
  border-radius: 999px;
  color: rgba(255,255,255,.92);
  background: rgba(255,255,255,.13);
  border: 1px solid rgba(255,255,255,.18);
  font-size: 12px;
  font-weight: 900;
  backdrop-filter: blur(6px);
}
.feature-hero-practice {
  background: linear-gradient(135deg, #172554 0%, #2563eb 52%, #22c55e 100%);
}
.feature-hero-recite {
  background: linear-gradient(135deg, #3b0764 0%, #7c3aed 52%, #f97316 100%);
}
.feature-hero-mistakes {
  background: linear-gradient(135deg, #431407 0%, #dc2626 52%, #f59e0b 100%);
}
.feature-hero-resources {
  background: linear-gradient(135deg, #0f1f19 0%, #15803d 52%, #14b8a6 100%);
}
@media (max-width: 720px) {
  .feature-hero {
    border-radius: 24px;
    padding: 20px;
    margin: 10px 0 14px;
  }
  .feature-hero h1 { font-size: 30px; }
  .feature-hero p { font-size: 14px; line-height: 1.65; }
  .feature-hero-pills { margin-top: 12px; }
}

/* ===== Practice image recognition mode ===== */
.image-mode-field {
  margin: 8px 0 4px;
  max-width: 420px;
}
.image-mode-field span {
  display: block;
  margin-bottom: 6px;
  color: #526357;
  font-size: 12px;
  font-weight: 800;
}
.image-mode-field .select {
  width: 100%;
}