/* ============================================================
   口语对话网页端 · 视觉层（登录 / 任务 / 对话 / 历史协调）
   基调：暖纸底 + 深松绿（沉稳教辅感）+ 琥珀点缀（鼓励感），
   衬线展示字 + 无衬线正文；面向高年级 K12，克制不童趣。
   ============================================================ */

/* ---- 设计令牌与全局底色 ---- */
html, body { background: #f7f5ef; }
body {
  --paper: #f7f5ef;        /* 暖纸底 */
  --card: #ffffff;
  --ink: #22322b;          /* 主文字 */
  --ink-soft: #66766d;
  --ink-faint: #97a49b;
  --pine: #1f5c4a;         /* 深松绿（主色） */
  --pine-deep: #143c30;
  --pine-tint: #e6efe8;    /* 主色浅底 */
  --amber: #dd8a3c;        /* 琥珀（点缀/鼓励） */
  --amber-deep: #b96f26;
  --amber-tint: #faefdf;
  --line: #e7e4d8;         /* 纸感分隔线 */
  --shadow-card: 0 1px 2px #1c2b2412, 0 10px 30px -18px #1c2b2440;
  --shadow-lift: 0 2px 4px #1c2b2414, 0 18px 40px -20px #1c2b2455;
  --radius: 14px;
}

/* 通用控件微调（覆盖 style.css 的冷绿，统一为松绿） */
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline-color: #2c8669; }
.primary { background: #1f5c4a; border-radius: 9px; box-shadow: 0 10px 22px -14px #1f5c4ab0; }
.primary:hover { background: #17493a; }
.primary.running { background: #ab4c41; box-shadow: 0 10px 22px -14px #ab4c41b0; }

/* ============================================================
   登录页
   ============================================================ */
.auth-wrap {
  background:
    radial-gradient(1100px 480px at 78% -12%, #e9f0e6 0%, transparent 62%),
    radial-gradient(700px 380px at 8% 108%, #f4ead99e 0%, transparent 58%),
    linear-gradient(180deg, #faf8f2 0%, #f4f1e8 100%);
  min-height: 100dvh; display: flex; flex-direction: column;
}
.auth-main { flex: 1; display: grid; place-items: center; padding: 34px 20px; }
.auth-card {
  width: min(440px, 100%); background: var(--card);
  border: 1px solid #edeae0; border-radius: 18px;
  padding: 40px 38px 32px; position: relative; overflow: hidden;
  box-shadow: var(--shadow-lift);
}
.auth-card::before {  /* 顶部双色书脊线 */
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--pine) 0%, #3d8168 55%, var(--amber) 100%);
}
.auth-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.auth-brand .brand-symbol { width: 42px; height: 42px; border-radius: 11px; background: var(--pine); }
.auth-brand .brand-symbol svg { color: #eaf4ee; }
.auth-brand strong { font: 700 25px Georgia, serif; color: var(--ink); letter-spacing: .2px; }
.auth-brand span { font-size: 12px; color: var(--ink-soft); margin-left: 2px; }
.auth-eyebrow { font-size: 10px; font-weight: 700; letter-spacing: .18em; color: var(--amber-deep); margin: 26px 0 7px; }
.auth-title { font: 400 30px/1.25 Georgia, serif; color: #26433a; margin: 0 0 6px; }
.auth-sub { font: italic 400 14px/1.6 Georgia, serif; color: var(--ink-faint); margin: 0 0 24px; }
.auth-teacher { display: flex; gap: 11px; align-items: center; margin: 0 0 18px; padding: 12px 14px; border-radius: 10px;
  background: var(--pine-tint); border: 1px solid #d5e4d8; font-size: 12px; color: #35584a; }
.auth-teacher .avatar { width: 36px; height: 36px; font-size: 16px; background: var(--pine); color: #f0f7f1; }
.field { margin-bottom: 15px; }
.field label { display: block; font-size: 12px; color: #57685f; margin-bottom: 8px; font-weight: 550; }
.field input { width: 100%; height: 46px; border: 1px solid #ded9ca; border-radius: 10px; padding: 0 13px;
  font-size: 13px; color: var(--ink); background: #fdfcf9; transition: border-color .15s, box-shadow .15s; }
.field input::placeholder { color: #a9b2a9; }
.field input:focus-visible { outline: none; border-color: #2f7a5f; box-shadow: 0 0 0 3px #2c866926; }
.auth-submit { width: 100%; height: 48px; margin-top: 10px; font-size: 13px; letter-spacing: .06em; }
.auth-hint { margin: 18px 0 0; font-size: 11px; color: var(--ink-faint); text-align: center; line-height: 1.8; }
.auth-error { margin: 0 0 14px; padding: 10px 13px; border-radius: 9px; background: #f9ece6; border: 1px solid #eed6cb; color: #96462f; font-size: 12px; line-height: 1.7; }

/* ============================================================
   任务页
   ============================================================ */
.tasks-topbar {
  height: 78px; display: flex; align-items: center; justify-content: space-between;
  padding: 0 40px; background: #fffdf8; border-bottom: 1px solid var(--line);
}
.brand-symbol { background: var(--pine); }
.brand-symbol svg { color: #eaf4ee; }
.brand strong { color: var(--ink); }
.brand-chinese { color: #3e5d4f; }
.tasks-user { display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--ink); }
.tasks-user .avatar { width: 37px; height: 37px; font-size: 16px; background: var(--amber-tint); color: var(--amber-deep); font-family: Georgia, serif; }
.tasks-user small { display: block; font-size: 10px; color: var(--ink-faint); margin-top: 3px; }
.logout-button { border: 0; background: transparent; color: var(--ink-faint); font-size: 12px; height: 40px; padding: 0 6px; }
.logout-button:hover { color: #96462f; }

.tasks-main { max-width: 920px; margin: 0 auto; padding: 36px 28px 80px; }
.tasks-hero { margin: 4px 0 26px; }
.tasks-date { font-size: 11px; font-weight: 650; letter-spacing: .16em; color: var(--amber-deep); margin: 0 0 10px; }
.tasks-welcome { margin: 0 0 8px; font: 400 30px/1.25 Georgia, serif; color: #26433a; }
.tasks-welcome b { font-weight: 400; color: var(--pine); font-style: italic; }
.tasks-sub { color: var(--ink-soft); font-size: 12.5px; margin: 0; line-height: 1.7; }

.entry-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 0 0 34px; }
.entry-card {
  display: flex; align-items: center; gap: 15px; padding: 19px 20px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--card); text-align: left; color: inherit;
  box-shadow: var(--shadow-card); transition: transform .16s, box-shadow .16s, border-color .16s;
}
.entry-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); border-color: #cfdcd2; }
.entry-tile { width: 46px; height: 46px; flex-shrink: 0; display: grid; place-items: center; border-radius: 13px; }
.entry-tile svg { width: 22px; height: 22px; }
.entry-card[data-tone=green] .entry-tile { background: var(--pine-tint); color: var(--pine); }
.entry-card[data-tone=amber] .entry-tile { background: var(--amber-tint); color: var(--amber-deep); }
.entry-card strong { display: block; font-size: 14px; font-weight: 650; color: #25423a; }
.entry-card small { display: block; font-size: 11px; color: var(--ink-faint); margin-top: 5px; }
.entry-card em { font-style: normal; font-size: 11px; color: var(--pine); margin-left: auto; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 2px; font-weight: 600; }
.entry-card em svg { width: 14px; height: 14px; }

.tasks-heading { display: flex; align-items: baseline; gap: 12px; margin: 10px 0 6px; }
.tasks-heading .eyebrow-line { font: italic 400 13px Georgia, serif; color: var(--amber-deep); }
.tasks-heading h2 { font: 400 22px Georgia, serif; color: #26433a; margin: 0; }
.tasks-heading small { color: var(--ink-faint); font-size: 11px; margin-left: auto; }
#task-list { counter-reset: task-index; border-top: 1px solid var(--line); }
.task-card {
  width: 100%; display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 16px;
  padding: 20px 20px; margin: 0; background: transparent; border: 0; border-bottom: 1px solid var(--line);
  text-align: left; color: inherit; border-radius: 0; position: relative;
  transition: background .15s;
}
.task-card:hover { background: #fdfcf7; }
.task-card:active { transform: none; }
.task-card::before {  /* 序号：教辅目录感 */
  counter-increment: task-index; content: counter(task-index, decimal-leading-zero);
  font: italic 400 21px Georgia, serif; color: #c4cec4; transition: color .15s;
}
.task-card:hover::before { color: var(--amber); }
.task-card strong { display: block; font-size: 14.5px; font-weight: 600; color: #233d33; line-height: 1.5; }
.task-card small { display: block; font-size: 11.5px; color: var(--ink-faint); margin-top: 6px; line-height: 1.65; }
.task-side { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 7px; }
.task-accum { font-size: 11px; color: var(--ink-faint); white-space: nowrap; font-variant-numeric: tabular-nums; }
.task-accum b { color: var(--pine); font-weight: 650; }
.task-topic { font-size: 10px; padding: 3px 9px; border-radius: 999px; background: var(--pine-tint); color: #35584a; white-space: nowrap; }
.tasks-more { display: block; width: 100%; margin: 14px 0 0; padding: 15px; border: 1px dashed #d3cfc0; border-radius: 11px;
  background: transparent; color: var(--ink-soft); font-size: 12px; }
.tasks-more:hover { background: #fdfcf7; color: var(--pine); border-color: #b9c6bd; }
.tasks-empty { padding: 60px 20px; text-align: center; color: var(--ink-faint); font-size: 12px; }

/* ============================================================
   弹框（任务确认 / 音色 / 配置）
   ============================================================ */
dialog::backdrop { background: #1c2f2766; backdrop-filter: blur(3px); }
.app-dialog {
  width: min(440px, calc(100% - 40px)); border: 0; border-radius: 18px;
  padding: 30px 28px 24px; background: var(--card);
  box-shadow: 0 40px 90px -30px #143c3080;
}
.app-dialog h2 { font: 400 21px/1.35 Georgia, serif; color: #26433a; margin: 0 0 5px; }
.app-dialog .dialog-topic { font-size: 10px; font-weight: 700; letter-spacing: .16em; color: var(--amber-deep); margin: 0 0 14px; }
.app-dialog p { font-size: 12.5px; color: #57685f; line-height: 1.85; margin: 0 0 18px; }
.dialog-actions { display: flex; gap: 10px; justify-content: flex-end; }
.dialog-actions button { min-width: 108px; height: 43px; border-radius: 10px; font-size: 12.5px;
  border: 1px solid #ded9ca; background: #fffdf8; color: #57685f; }
.dialog-actions button:hover { border-color: #c4cec4; }
.dialog-actions .primary { background: var(--pine); border-color: var(--pine); color: #fff; }
.dialog-actions .primary:hover { background: #17493a; }

.voice-hint { display: flex; align-items: center; gap: 9px; padding: 12px 14px; border-radius: 11px;
  background: var(--pine-tint); border: 1px solid #d5e4d8; font-size: 11.5px; color: #35584a; margin-bottom: 18px; }
.voice-hint svg { width: 15px; height: 15px; color: var(--pine); flex-shrink: 0; }
.voice-hint b { font-weight: 650; }
.voice-hint .voice-change { margin-left: auto; display: inline-flex; align-items: center; gap: 5px;
  border: 1px solid #bcd4c2; background: #fff; border-radius: 999px; padding: 5px 12px; font-size: 11px;
  color: var(--pine); height: auto; }
.voice-hint .voice-change:hover { background: #fff; border-color: var(--pine); }
.voice-hint .voice-change svg { width: 13px; height: 13px; color: currentColor; }
.voice-list { display: flex; flex-direction: column; gap: 7px; margin: 0 0 18px; max-height: 46dvh; overflow: auto; }
.voice-row { display: flex; align-items: center; gap: 11px; padding: 13px 14px; border: 1px solid var(--line);
  border-radius: 12px; background: var(--card); cursor: pointer; font-size: 13px; color: var(--ink); text-align: left;
  transition: border-color .14s, background .14s; }
.voice-row:hover { border-color: #b9c6bd; background: #fdfcf7; }
.voice-row[aria-pressed="true"] { border-color: var(--pine); background: var(--pine-tint); }
.voice-row small { display: block; font-size: 10px; color: var(--ink-faint); margin-top: 3px; }
.voice-row svg { margin-left: auto; color: var(--pine); visibility: hidden; width: 16px; height: 16px; }
.voice-row[aria-pressed="true"] svg { visibility: visible; }

/* ============================================================
   对话页（任务模式）：单栏布局，覆盖 style.css 的三栏网格
   ============================================================ */
body[data-page=task-practice] .topbar { background: #fffdf8; border-bottom: 1px solid var(--line); height: 74px; }
body[data-page=task-practice] .workspace { display: flex; flex-direction: column; height: calc(100dvh - 121px); max-height: none; min-height: 520px; }
body[data-page=task-practice] .conversation { flex: 1; width: 100%; min-height: 0; max-width: 1100px; margin: 0 auto;
  background: var(--card); border: 1px solid var(--line); border-top: 0; border-bottom: 0; }
.conversation-heading { padding: 22px 30px 16px; }
.conversation-heading h2 { font: 400 24px/1.3 Georgia, serif; color: #26433a; }
.heading-stats { display: flex; align-items: center; gap: 15px; font-size: 11px; color: var(--ink-soft); white-space: nowrap; }
.heading-stats b { color: var(--pine); font-weight: 650; font-variant-numeric: tabular-nums; margin-right: 2px; }
.stat-timer { font-size: 18px; font-weight: 500; color: #2b4739; font-variant-numeric: tabular-nums; }
.stat-usage { max-width: 230px; overflow: hidden; text-overflow: ellipsis; color: var(--ink-faint); }
body[data-page=task-practice] .audio-stage { flex: none; min-width: 0; overflow: hidden; margin: 4px 30px 0;
  padding: 0 22px; color: #c3d7d0; background: linear-gradient(180deg, #132824, #0f211d);
  border: 1px solid #24443a; border-radius: 13px; }
body[data-page=task-practice] .transcript { padding: 24px 30px; }
body[data-page=task-practice] .empty { gap: 14px; }
body[data-page=task-practice] .empty-copy h3 { font-size: 30px; }
body[data-page=task-practice] .session-controls { border-top: 1px solid var(--line); padding: 16px 30px 20px; }
.review-action { display: flex; align-items: center; gap: 12px; margin: 0 0 13px; padding: 11px 13px;
  background: var(--pine-tint); border: 1px solid #d5e4d8; border-radius: 10px; }
.review-button { border: 0; background: var(--pine); color: white; border-radius: 9px; min-height: 34px; padding: 0 12px; font-size: 11px; flex-shrink: 0; }
.review-button:hover { background: #17493a; }
.config-grid { display: flex; flex-direction: column; gap: 4px; margin: 0 0 20px; }
.config-grid select { height: 42px; border-radius: 10px; border: 1px solid #ded9ca; background: #fdfcf9; width: 100%; padding: 0 10px; color: var(--ink); }
.config-grid input[type=range] { width: 100%; accent-color: var(--pine); height: 20px; margin: 9px 0 6px; }
.config-grid .range-heading { margin-top: 11px; }

/* ============================================================
   历史报告页协调（history/index.html 引入本文件）
   ============================================================ */
.topbar { background: #fffdf8; border-bottom: 1px solid #e7e4d8; height: 78px; }
.brand strong { color: #22322b; }
.back-link { color: #3e5d4f; }
.primary-action { background: #1f5c4a; border-color: #1f5c4a; }
.primary-action:hover { background: #17493a; }

/* ---- 响应式 ---- */
@media(max-width:650px) {
  .tasks-topbar { height: 64px; padding: 0 17px; }
  .tasks-main { padding: 24px 16px 60px; }
  .tasks-welcome { font-size: 24px; }
  .entry-cards { grid-template-columns: 1fr; }
  .task-card { grid-template-columns: 30px minmax(0,1fr) auto; gap: 11px; padding: 16px 14px; }
  .task-card::before { font-size: 15px; }
  .task-topic { display: none; }
  .auth-card { padding: 30px 22px 26px; }
  body[data-page=task-practice] .workspace { height: auto; min-height: calc(100dvh - 100px); }
  body[data-page=task-practice] .conversation { border: 0; min-height: 560px; }
  body[data-page=task-practice] .audio-stage { margin: 4px 20px 0; }
  body[data-page=task-practice] .transcript { padding: 20px; max-height: 45dvh; }
  .stat-usage { display: none; }
  body[data-page=task-practice] .topbar { height: 64px; }
}
@media(prefers-reduced-motion:reduce) { .entry-card:hover, .task-card:hover { transform: none; } }

/* ---- 练习设置共享组件：音色标签 / 纠错开关说明 ---- */
.voice-chip{display:inline-flex;align-items:center;gap:6px;border:1px solid #d5e4d8;background:var(--pine-tint);
  color:var(--pine);border-radius:999px;padding:5px 12px;font-size:11px;font-weight:600;height:auto;min-height:28px}
.voice-chip:hover{border-color:var(--pine);background:#fff}
.voice-chip svg{width:13px;height:13px}
.app-dialog .config-grid .toggle-row{margin-top:16px}
.app-dialog p.config-note{margin:6px 0 0;font-size:10.5px;color:var(--ink-faint);line-height:1.7}

/* ============================================================
   布局修正（2026-10-11 第二轮）：内容充满页面，消除两侧留白
   ============================================================ */
/* 任务页：通栏 + 任务卡片网格 */
.tasks-main{max-width:none;padding:34px 44px 90px}
.tasks-hero{max-width:760px}
#task-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(430px,1fr));gap:12px;border-top:0}
.task-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-card);
  transition:transform .16s,box-shadow .16s,border-color .16s}
.task-card:hover{box-shadow:var(--shadow-lift);border-color:#cfdcd2;background:#fffdf8}
/* 对话页：通栏（正文限宽保证可读性） */
body[data-page=task-practice] .conversation{max-width:none;border-left:0;border-right:0}
body[data-page=task-practice] .message p{max-width:78ch}
body[data-page=task-practice] .transcript{padding:24px clamp(24px,5vw,64px)}
body[data-page=task-practice] .conversation-heading{padding:22px clamp(24px,5vw,64px) 16px}
body[data-page=task-practice] .session-controls{padding:16px clamp(24px,5vw,64px) 20px}
body[data-page=task-practice] .audio-stage{margin:4px clamp(24px,5vw,64px) 0}
/* 历史页：去掉居中容器，左右分栏占满视口；正文区限宽保护可读性 */
.history-layout{max-width:none}
.history-detail .detail-heading,.history-detail .session-meta,.history-detail .report-section,
.history-detail .transcript-section,.history-detail .detail-error{max-width:1200px}
/* 练习结果视图 */
.result-view{border-bottom:1px solid var(--line);padding:22px clamp(24px,5vw,64px) 20px;background:#fdfcf8}
.result-head{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;flex-wrap:wrap}
.result-head h2{font:400 24px/1.3 Georgia,serif;color:#26433a;margin:6px 0 0}
.result-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.result-btn{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px;border-radius:9px;font-size:12px;font-weight:600}
.result-btn svg{width:15px;height:15px}
.result-btn.primary{background:var(--pine);border:1px solid var(--pine);color:#fff}
.result-btn.primary:hover{background:#17493a}
.result-btn.quiet{background:var(--card);border:1px solid #ded9ca;color:#57685f}
.result-btn.quiet:hover{border-color:#b9c6bd}
.result-status{margin-top:14px}
.result-loading{display:flex;gap:12px;align-items:flex-start;color:var(--ink-soft);font-size:12.5px;line-height:1.7}
.result-loading small{display:block;color:var(--ink-faint);margin-top:3px;font-size:11px}
.result-spinner{flex-shrink:0;width:17px;height:17px;margin-top:2px;border:2px solid #cfdcd2;border-top-color:var(--pine);border-radius:50%;animation:spin .9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.result-note{color:var(--ink-soft);font-size:12.5px;line-height:1.8}
.result-summary{background:var(--pine-tint);border:1px solid #d5e4d8;border-radius:11px;padding:15px 18px;max-width:760px}
.result-summary strong{display:block;font-size:15px;font-weight:650;color:#2b4c3e;margin-bottom:6px}
.result-summary p{margin:0;font-size:12.5px;line-height:1.7;color:#52705b}
.result-summary ul{display:flex;gap:26px;flex-wrap:wrap;margin:12px 0 0;padding:0;list-style:none;font-size:12px;color:#335842}
.result-summary li::before{content:"✓";margin-right:7px;color:#2d7a54}
.result-error{color:#96462f;background:#f9ece6;border:1px solid #eed6cb;border-radius:9px;padding:11px 14px;font-size:12.5px;max-width:760px}
/* 任务弹框：配置概要两行 */
.config-hint .config-lines{min-width:0;flex:1}
.config-hint .config-lines b{display:block}
.config-hint .config-lines small{display:block;font-size:10.5px;color:var(--ink-faint);margin-top:4px;line-height:1.6}
@media(max-width:900px){
  .tasks-main{padding:24px 18px 60px}
  #task-list{grid-template-columns:1fr}
  .history-detail .detail-heading,.history-detail .session-meta,.history-detail .report-section,
  .history-detail .transcript-section,.history-detail .detail-error{max-width:none}
  .result-actions{width:100%}
}

/* ---- 全局统一返回按钮：所有子页面左上角顶栏最左侧，同样式同位置 ---- */
.back-button{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 15px 0 12px;
  border:1.5px solid #b9cfc0;background:#fff;border-radius:999px;color:#1f5c4a;
  font-size:12.5px;font-weight:650;text-decoration:none;flex-shrink:0;
  transition:background .15s,border-color .15s,transform .15s}
.back-button:hover{border-color:#1f5c4a;background:#f3f8f4;transform:translateX(-1px)}
.back-button svg{width:16px;height:16px}
.top-actions,.tasks-topbar .tasks-user{flex-shrink:0}
@media(max-width:650px){
  .back-button{height:34px;padding:0 11px 0 9px;font-size:11.5px}
  .back-button svg{width:14px;height:14px}
}

/* 结果视图操作：与历史详情同风格（primary/quiet/danger，删除靠右红色警示） */
.result-actions{justify-content:flex-start}
.result-btn.danger{margin-left:auto;background:var(--card);border:1px solid #e8d6d0;color:#985746}
.result-btn.danger:hover{background:#fbf1ee;border-color:#c98d7b}
.result-btn.danger svg{color:currentColor}
@media(max-width:900px){.result-btn.danger{margin-left:0}}


/* ---- 手机端对话页标题栏修复：标题换行 + 统计条折行，消除横向溢出 ---- */
body[data-page=task-practice] .conversation-heading > div:first-child { min-width: 0; }  /* flex 子项允许收缩 */
body[data-page=task-practice] .conversation-heading h2 {
  overflow-wrap: anywhere;   /* 超长连续字符串也可断行 */
  word-break: break-word;
}
@media(max-width:650px) {
  /* 标题块独占一行（可换行），统计条折到下一行并允许自身换行 */
  body[data-page=task-practice] .conversation-heading { flex-wrap: wrap; gap: 10px 0; padding: 16px 20px 12px; }
  body[data-page=task-practice] .conversation-heading > div:first-child { width: 100%; }
  body[data-page=task-practice] .conversation-heading h2 { font-size: 19px; line-height: 1.4; }
  body[data-page=task-practice] .heading-stats { flex-wrap: wrap; white-space: normal; gap: 8px 12px; row-gap: 6px; }
  body[data-page=task-practice] .heading-stats span + span::before { display: none; }  /* 分隔竖线在折行时去掉 */
  body[data-page=task-practice] .stat-timer { font-size: 15px; }
}

/* ============================================================
   全站移动端兼容加固（2026-10-13）：消除横向溢出的通用保障
   ============================================================ */
/* 1) 兜底：body 不允许横向滚动（任何页面溢出都截断在自身容器内处理） */
html, body { overflow-x: hidden; }
/* 2) flex 容器的文本子项允许收缩+断词，防止长内容撑破 */
.topbar, .tasks-topbar, .appbar, .heading-stats, .detail-actions,
.entry-cards, .task-card, .result-actions { min-width: 0; }
.brand, .tasks-user, .config-lines, .result-head, .result-summary, .result-error { min-width: 0; }
.brand strong, .tasks-user > div, .heading-stats span, .result-summary p,
.stat-usage, .result-error, .config-lines b, .config-lines small { overflow-wrap: anywhere; min-width: 0; }

/* 3) 手机端顶栏压缩（≤650px）——通用 */
@media(max-width:650px) {
  .topbar { padding: 0 14px; gap: 8px; }
  .topbar .brand { gap: 6px; font-size: 17px; }
  .topbar .brand-symbol { width: 28px; height: 28px; border-radius: 6px; }
  .brand-chinese { display: none; }  /* 品牌中文名在手机隐藏，释放宽度 */
  .brand-caption { display: none !important; }
  .top-actions { gap: 6px; flex-shrink: 1; }
  .top-actions .history-nav { padding: 0 6px; font-size: 11px; }
  .top-actions .history-nav span { display: none; }  /* 只留图标 */
  .connection { font-size: 10px; gap: 4px; }
  .connection-text { display: none; }  /* 手机只留状态圆点 */

  .tasks-topbar { padding: 0 14px; gap: 8px; }
  .tasks-user { gap: 6px; font-size: 12px; }
  .tasks-user .avatar { width: 30px; height: 30px; font-size: 13px; }
  .tasks-user small { display: none; }
  .logout-button { font-size: 11px; padding: 0 2px; }

  /* 历史页顶栏 */
  .topbar .back-button { padding: 0 8px; font-size: 11px; gap: 4px; }
  .topbar .back-button span { display: none; }  /* 只留箭头图标 */

  /* 手册页 appbar */
  .appbar { gap: 10px; padding: 0 12px; }
  .appbar .back-button span { display: inline; }  /* 手册页保留"返回"文字 */
  .appbar .document-name { font-size: 10px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
}

/* 4) 历史页改移动端两级导航：列表↔详情（不再左右并存） */
@media(max-width:700px) {
  .history-layout { display: block; min-height: auto; }
  .history-sidebar {
    height: auto; position: static; border-right: 0; border-bottom: 1px solid #dfe8e1;
  }
  .history-list { max-height: none; overflow: visible; }
  /* 两级导航：默认只显示列表；选中某条后列表隐藏、详情展示 */
  .history-detail { padding: 22px 18px 60px; }
  .history-layout[data-view='list'] .history-detail { display: none; }
  .history-layout[data-view='detail'] .history-sidebar { display: none; }
  /* 详情页顶部加返回列表按钮（由 JS 动态注入） */
  .mobile-back-to-list {
    display: inline-flex; align-items: center; gap: 7px; margin-bottom: 16px;
    padding: 8px 14px; border: 1px solid #c8ddcf; background: #fff; border-radius: 8px;
    color: #1f5c4a; font-size: 12px; font-weight: 600; cursor: pointer;
  }
  .mobile-back-to-list svg { width: 14px; height: 14px; }
}
@media(min-width:701px) {
  .mobile-back-to-list { display: none !important; }
  .history-layout[data-view='list'] .history-detail,
  .history-layout[data-view='detail'] .history-sidebar { display: revert; }
}

/* ---- D26：时长胶囊（欢迎语下方，醒目显示剩余可用分钟） ---- */
.quota-capsule {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 4px 0 10px; padding: 8px 16px;
  background: linear-gradient(135deg, var(--pine-tint), #dff0e5);
  border: 1.5px solid #a8d4bc; border-radius: 999px;
  color: var(--pine); font-size: 13px; font-weight: 650;
}
.quota-capsule svg { width: 16px; height: 16px; color: var(--pine); }
.quota-capsule b { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
/* 余额偏低：琥珀色警示 */
.quota-capsule.quota-low { background: var(--amber-tint); border-color: #e8c391; color: var(--amber-deep); }
.quota-capsule.quota-low svg { color: var(--amber-deep); }
/* 余额为零：红色警示 */
.quota-capsule.quota-zero { background: #f9ece6; border-color: #e0b0a0; color: #96462f; }
.quota-capsule.quota-zero svg { color: #96462f; }

/* ============================================================
   v3（2026-10-13）：额度预警横幅（剩余 5 分钟 / 1 分钟两档）
   ============================================================ */
.quota-banner {
  position: fixed; top: 18px; left: 50%; transform: translateX(-50%); z-index: 60;
  display: flex; align-items: center; gap: 14px;
  background: var(--amber-tint, #faefdf); color: var(--amber-deep, #b96f26);
  border: 1px solid #f0ddc2; border-radius: 12px; padding: 10px 12px 10px 18px;
  font-size: 14px; box-shadow: 0 10px 30px -18px #1c2b2440; max-width: min(520px, 90vw);
}
.quota-banner.urgent { background: #f7e9e4; color: #96462f; border-color: #ecd2c7; font-weight: 600; }
.quota-banner button { background: #fff; border: 1px solid currentColor; color: inherit;
  border-radius: 8px; padding: 4px 12px; font-size: 13px; flex: none; }

/* ============================================================
   20261013 #5：登录页老师简介两行截断 + 完整简介弹框
   ============================================================ */
.brand-intro-clamp {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  line-clamp: 2; overflow: hidden; margin-bottom: 6px;
}
.brand-more {
  display: inline-block; background: none; border: none; padding: 0 0 14px;
  font: italic 400 13px/1 Georgia, serif; color: var(--pine, #2f6d58);
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.brand-more:hover { color: #17493a; }
.brand-intro-dialog {
  border: none; border-radius: 14px; padding: 26px 24px 20px; max-width: min(460px, 88vw);
  box-shadow: 0 24px 60px -24px #1c2b2455; background: #fffdf9;
}
.brand-intro-dialog::backdrop { background: #1c2f2766; backdrop-filter: blur(3px); }
.brand-intro-dialog p {
  font: italic 400 14px/1.9 Georgia, serif; color: var(--ink-soft, #57685f);
  white-space: pre-wrap; word-break: break-word; margin: 0 0 18px; max-height: 56vh; overflow: auto;
}
.brand-intro-dialog button {
  background: var(--pine, #2f6d58); color: #fff; border: none; border-radius: 9px;
  padding: 10px 26px; font-size: 13px; cursor: pointer; display: block; margin: 0 auto;
}

/* ============================================================
   20261013 R2/R6：录音播放单例弹框——标题/播放条/提示/关闭按钮全部居中，
   关闭按钮单独一行居中（原先 audio 与按钮挤在一行且不对齐）
   ============================================================ */
.audio-dialog {
  border: none; border-radius: 14px; padding: 22px 20px 18px; background: #fffdf9;
  width: min(440px, 92vw); box-shadow: 0 24px 60px -24px #1c2b2455;
}
.audio-dialog::backdrop { background: #1c2f2766; backdrop-filter: blur(3px); }
.audio-dialog strong {
  display: block; text-align: center; margin: 0 0 14px;
  font: 700 15px/1.4 inherit; color: var(--ink, #26433a); letter-spacing: .04em;
}
.audio-dialog audio { display: block; width: 100%; margin: 0 auto 10px; }
.audio-dialog .audio-dialog-hint {
  text-align: center; font-size: 12px; color: #8b998e; margin: 0 0 14px; min-height: 1.2em;
}
.audio-dialog button {
  display: block; margin: 0 auto; background: var(--pine, #2f6d58); color: #fff;
  border: none; border-radius: 9px; padding: 9px 30px; font-size: 13px; cursor: pointer;
}
.audio-dialog button:hover { background: #17493a; }

/* ============================================================
   20261013：学生端任务四分类 Tab（3 系统内置 + 口语作业）
   ============================================================ */
.task-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 18px; }
.task-tab {
  border: 1px solid var(--line, #dfe5dc); background: #fff; color: var(--ink-soft, #57685f);
  border-radius: 999px; padding: 9px 18px; font-size: 13.5px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px; transition: all .15s;
}
.task-tab small { font-size: 11px; color: var(--ink-faint, #8b998e); }
.task-tab:hover { border-color: var(--pine, #2f6d58); color: var(--pine-deep, #17493a); }
.task-tab.active { background: var(--pine, #2f6d58); border-color: var(--pine, #2f6d58); color: #fff; }
.task-tab.active small { color: #d8e8e0; }

/* 20261013 修正：两级分类——日常练习（内置三分类的次级 Tab）/ 口语作业 */
.task-tabs-secondary { margin: -8px 0 16px; padding-left: 4px; }
.task-tab.small { padding: 6px 14px; font-size: 12.5px; opacity: .92; }

/* 20261013：录音加载等待动画（音频就绪前隐藏播放条，不显示干巴巴的 00:00） */
.audio-loading { display: flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 54px; margin: 0 0 10px; color: var(--ink-soft, #57685f); font-size: 13.5px; }
.audio-loading[hidden] { display: none; }
.spin { width: 16px; height: 16px; border: 2px solid #d5dcd4; border-top-color: var(--pine, #2f6d58);
  border-radius: 50%; animation: audio-spin .8s linear infinite; }
@keyframes audio-spin { to { transform: rotate(360deg); } }