/* ==========================================================================
   背单词模块样式（vocab/app.css）
   设计规范：纯苹果 iOS 极简风 —— 纯白、高留白、圆角卡片、柔和动画、无广告、无弹窗
   配色：浅色高级色系（蓝 #007AFF 为主色，其余用系统灰阶），护眼、专注
   要点：
     1. 全部使用系统字体（SF Pro / 苹方），不加自定义字体（微信内置字体渲染最稳）
     2. 圆角 16/20，阴影极轻，靠留白与分隔线区分层次而不是靠边框
     3. 所有可点元素都有 44px 最小热区（iOS HIG）
     4. 安全区适配：底部 tab 与按钮抬过 Home Indicator
   ========================================================================== */

:root {
    --vw-blue: #007AFF;
    --vw-blue-dim: rgba(0, 122, 255, .12);
    --vw-green: #34C759;
    --vw-orange: #FF9500;
    --vw-red: #FF3B30;
    --vw-purple: #5856D6;

    --vw-bg: #F2F2F7;
    --vw-card: #FFFFFF;
    --vw-text: #1C1C1E;
    --vw-text-2: #3C3C43;
    --vw-text-3: rgba(60, 60, 67, .6);
    --vw-text-4: rgba(60, 60, 67, .38);
    --vw-line: rgba(60, 60, 67, .14);

    --vw-radius: 16px;
    --vw-radius-lg: 20px;
    --vw-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 8px 24px rgba(0, 0, 0, .04);
    --vw-nav-h: 44px;
    --vw-tab-h: 52px;
    --vw-safe-b: env(safe-area-inset-bottom, 0px);
    --vw-safe-t: env(safe-area-inset-top, 0px);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    background: var(--vw-bg);
    color: var(--vw-text);
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC",
                 "Helvetica Neue", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    font-size: 16px;
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
    overscroll-behavior-y: none;
}

body { overflow: hidden; }

.vw-app {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    background: var(--vw-bg);
}

/* ---------------- 顶部导航 ---------------- */
.vw-nav {
    flex: none;
    padding-top: var(--vw-safe-t);
    background: rgba(255, 255, 255, .86);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-bottom: .5px solid var(--vw-line);
    z-index: 30;
}

.vw-nav-bar {
    height: var(--vw-nav-h);
    display: flex;
    align-items: center;
    padding: 0 8px;
    position: relative;
}

.vw-nav-back {
    width: 40px; height: 40px;
    border: 0; background: transparent; color: var(--vw-blue);
    display: none; align-items: center; justify-content: center;
    padding: 0; cursor: pointer;
}
.vw-nav-back:active { opacity: .4; }
.vw-nav.can-back .vw-nav-back { display: flex; }

.vw-nav-title {
    flex: 1;
    text-align: center;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: .2px;
    padding: 0 40px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.vw-nav-right { position: absolute; right: 12px; display: flex; align-items: center; gap: 12px; }
.vw-nav-right button {
    border: 0; background: transparent; color: var(--vw-blue);
    font-size: 16px; padding: 6px 2px; cursor: pointer; font-family: inherit;
}
.vw-nav-right button:active { opacity: .4; }

/* ---------------- 内容区 ---------------- */
.vw-main {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 12px 16px calc(24px + var(--vw-tab-h) + var(--vw-safe-b));
}
.vw-main.vw-no-tab { padding-bottom: calc(24px + var(--vw-safe-b)); }
.vw-main.vw-flush { padding: 0 0 calc(var(--vw-tab-h) + var(--vw-safe-b)) 0; }

/* 大标题（iOS large title） */
.vw-large {
    font-size: 30px; font-weight: 700; letter-spacing: -.4px;
    margin: 6px 2px 14px;
}
.vw-sub { color: var(--vw-text-3); font-size: 14px; margin: -8px 2px 14px; }

/* 分区标题 */
.vw-section {
    font-size: 13px; font-weight: 600; color: var(--vw-text-3);
    margin: 20px 4px 8px; letter-spacing: .3px;
}
.vw-section:first-child { margin-top: 6px; }

/* ---------------- 卡片 ---------------- */
.vw-card {
    background: var(--vw-card);
    border-radius: var(--vw-radius);
    box-shadow: var(--vw-shadow);
    padding: 16px;
    margin-bottom: 12px;
}
.vw-card.vw-flat { box-shadow: none; border: .5px solid var(--vw-line); }
.vw-card.vw-tight { padding: 12px 14px; }
.vw-card.vw-tap { transition: transform .16s ease, box-shadow .16s ease; }
.vw-card.vw-tap:active { transform: scale(.985); box-shadow: none; }

.vw-row { display: flex; align-items: center; gap: 12px; }
.vw-row + .vw-row { margin-top: 12px; }
.vw-col { display: flex; flex-direction: column; gap: 4px; }
.vw-grow { flex: 1; min-width: 0; }
.vw-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.vw-center { display: flex; align-items: center; justify-content: center; }

.vw-title { font-size: 17px; font-weight: 600; }
.vw-text { font-size: 15px; color: var(--vw-text-2); }
.vw-muted { font-size: 13px; color: var(--vw-text-3); }
.vw-dim { color: var(--vw-text-4); }
.vw-mono { font-variant-numeric: tabular-nums; }
.vw-ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 列表（iOS 分组列表） */
.vw-list { background: var(--vw-card); border-radius: var(--vw-radius); box-shadow: var(--vw-shadow); overflow: hidden; margin-bottom: 12px; }
.vw-item {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 16px; min-height: 52px;
    border-bottom: .5px solid var(--vw-line);
    background: var(--vw-card);
    transition: background .15s ease;
    cursor: pointer;
}
.vw-item:last-child { border-bottom: 0; }
.vw-item:active { background: #F7F7FA; }
.vw-item-icon { width: 28px; text-align: center; font-size: 19px; flex: none; }
.vw-item-body { flex: 1; min-width: 0; }
.vw-item-title { font-size: 16px; }
.vw-item-desc { font-size: 13px; color: var(--vw-text-3); margin-top: 2px; }
.vw-chev { color: var(--vw-text-4); flex: none; }
.vw-chev::after { content: "›"; font-size: 20px; line-height: 1; }

/* ---------------- 按钮 ---------------- */
.vw-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    height: 46px; padding: 0 20px;
    border: 0; border-radius: 13px;
    background: var(--vw-blue); color: #fff;
    font-size: 16px; font-weight: 600; font-family: inherit;
    cursor: pointer; transition: opacity .18s ease, transform .18s ease;
    width: 100%;
}
.vw-btn:active { opacity: .82; transform: scale(.985); }
.vw-btn[disabled] { opacity: .38; pointer-events: none; }
.vw-btn.vw-ghost { background: var(--vw-blue-dim); color: var(--vw-blue); }
.vw-btn.vw-plain { background: #EFEFF4; color: var(--vw-text); }
.vw-btn.vw-danger { background: var(--vw-red); }
.vw-btn.vw-sm { height: 36px; font-size: 14px; padding: 0 14px; border-radius: 10px; width: auto; }
.vw-btn.vw-lg { height: 52px; font-size: 17px; }
.vw-btn-row { display: flex; gap: 10px; }
.vw-btn-row .vw-btn { flex: 1; }

/* ---------------- 标签 / 徽标 ---------------- */
.vw-tag {
    display: inline-flex; align-items: center;
    padding: 3px 9px; border-radius: 999px;
    font-size: 12px; font-weight: 600;
    background: #EFEFF4; color: var(--vw-text-3);
}
.vw-tag.vw-blue { background: var(--vw-blue-dim); color: var(--vw-blue); }
.vw-tag.vw-green { background: rgba(52, 199, 89, .14); color: #248A3D; }
.vw-tag.vw-orange { background: rgba(255, 149, 0, .15); color: #C25E00; }
.vw-tag.vw-red { background: rgba(255, 59, 48, .12); color: #C0231B; }
.vw-tag.vw-purple { background: rgba(88, 86, 214, .13); color: #4B49C0; }

.vw-badge {
    position: absolute; top: 4px; right: 50%;
    transform: translateX(14px);
    min-width: 17px; height: 17px; padding: 0 5px;
    border-radius: 999px; background: var(--vw-red); color: #fff;
    font-size: 11px; font-weight: 700; font-style: normal;
    display: flex; align-items: center; justify-content: center;
}

/* ---------------- 进度 ---------------- */
.vw-progress { height: 8px; border-radius: 999px; background: #E9E9EE; overflow: hidden; }
.vw-progress > i { display: block; height: 100%; border-radius: 999px; background: var(--vw-blue); transition: width .45s cubic-bezier(.22, .61, .36, 1); }
.vw-progress.vw-green > i { background: var(--vw-green); }

.vw-ring { position: relative; width: 92px; height: 92px; flex: none; }
.vw-ring svg { transform: rotate(-90deg); }
.vw-ring-bg { stroke: #E9E9EE; }
.vw-ring-fg { stroke: var(--vw-blue); stroke-linecap: round; transition: stroke-dashoffset .6s cubic-bezier(.22, .61, .36, 1); }
.vw-ring-text { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.vw-ring-num { font-size: 24px; font-weight: 700; letter-spacing: -.5px; }
.vw-ring-label { font-size: 11px; color: var(--vw-text-3); }

/* 数据格子 */
.vw-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.vw-grid.vw-3 { grid-template-columns: repeat(3, 1fr); }
.vw-stat { background: var(--vw-card); border-radius: var(--vw-radius); padding: 14px; box-shadow: var(--vw-shadow); }
.vw-stat-num { font-size: 22px; font-weight: 700; letter-spacing: -.4px; }
.vw-stat-label { font-size: 12px; color: var(--vw-text-3); margin-top: 2px; }

/* ---------------- 单词学习页 ---------------- */
.vw-study { display: flex; flex-direction: column; height: 100%; padding: 8px 16px calc(20px + var(--vw-safe-b)); }
.vw-study-top { flex: none; display: flex; align-items: center; gap: 10px; }
.vw-study-count { font-size: 13px; color: var(--vw-text-3); font-variant-numeric: tabular-nums; }

.vw-word-card {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    background: var(--vw-card); border-radius: var(--vw-radius-lg);
    box-shadow: var(--vw-shadow); margin: 14px 0; padding: 28px 22px;
    text-align: center; position: relative; overflow: hidden;
}
.vw-word { font-size: 40px; font-weight: 700; letter-spacing: -.6px; line-height: 1.15; word-break: break-word; }
.vw-word.vw-long { font-size: 30px; }
.vw-word-phonetic { font-size: 17px; color: var(--vw-text-3); margin-top: 10px; font-family: "Times New Roman", serif; }
.vw-word-pos { margin-top: 16px; }
.vw-word-meaning {
    margin-top: 14px; font-size: 22px; font-weight: 500; line-height: 1.5;
    max-height: 40vh; overflow-y: auto;
}
.vw-word-meaning.vw-hidden { filter: blur(9px); opacity: .55; user-select: none; }
.vw-word-hint { position: absolute; bottom: 14px; left: 0; right: 0; font-size: 12px; color: var(--vw-text-4); }

/* ---- 单词卡上的考试标签（高中 / CET4 / CET6 / 考研 …）---- */
/* 数据异步到达，没有标签时整行不占位（:empty） */
.vw-word-exams { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.vw-word-exams:empty { display: none; }
.vw-tag.vw-exam { background: rgba(255, 149, 0, .15); color: #C25E00; }

/* ---- 详解模式：只留单词，其余让位 ---- */
/* 一条词的详解动辄上千像素，展开时把音标/词性/释义/标签/发音/翻页都收起来，
   把屏幕高度几乎全给详解；收起或翻页时立刻恢复。 */
.vw-detail-mode .vw-study-top,
.vw-detail-mode .vw-progress,
.vw-detail-mode .vw-word-exams,
.vw-detail-mode .vw-word-phonetic,
.vw-detail-mode .vw-word-pos,
.vw-detail-mode .vw-word-meaning,
.vw-detail-mode .vw-center,          /* 发音按钮（居中容器内） */
.vw-detail-mode .vw-study-lock,
.vw-detail-mode .vw-study-nav { display: none !important; }

/* 详解模式下单词小一号：它不再占主导，但仍是“这是哪个词”的锚点 */
.vw-detail-mode .vw-word { font-size: 28px; }
.vw-detail-mode .vw-word.vw-long { font-size: 22px; }
.vw-detail-mode .vw-word-card { padding-bottom: 8px; }

/* 屏幕让出来了，详解区就能占更多高度（dvh 适配移动端地址栏伸缩） */
.vw-detail-mode .vw-detail {
    max-height: calc(100vh - 190px);
    max-height: calc(100dvh - 190px);
}

/* ---- 单词详解浮层（答错复习用）---- */
.vw-dict-layer {
    position: fixed; inset: 0; z-index: 60;
    display: flex; flex-direction: column; justify-content: flex-end;
}
.vw-dict-layer[hidden] { display: none; }
.vw-dict-mask { position: absolute; inset: 0; background: rgba(0, 0, 0, .45); }
.vw-dict-panel {
    position: relative; display: flex; flex-direction: column;
    max-height: 86vh; max-height: 86dvh;
    background: var(--vw-card);
    border-radius: var(--vw-radius-lg) var(--vw-radius-lg) 0 0;
    overflow: hidden;
}
.vw-dict-head {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 16px 10px; border-bottom: 1px solid var(--vw-line);
}
.vw-dict-title { flex: 1; font-size: 18px; font-weight: 700; }
.vw-dict-close {
    border: 0; background: transparent; color: var(--vw-text-3);
    font-size: 22px; line-height: 1; padding: 2px 8px; cursor: pointer;
}
/* body 自身滚动：内容再长也始终看得到底部「知道了」按钮 */
.vw-dict-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 0 14px; }
.vw-dict-body .vw-detail-sec:first-child { padding-top: 14px; }
.vw-dict-foot { padding: 10px 16px calc(12px + var(--vw-safe-b)); border-top: 1px solid var(--vw-line); }
.vw-btn.vw-block { display: block; width: 100%; }

/* ---- 「更多详解」与详解区 ---- */
.vw-word-actions { margin-top: 16px; }
/* 详解可能很长（真题多的词十几条），所以固定高度 + 内部滚动：
   卡片高度稳定，不会把页面撞开；收起按钮始终在卡片上，随时能退回。 */
.vw-detail {
    margin-top: 14px; text-align: left;
    /* 用页面底色（浅色 #F2F2F7 / 深色 #000）而不是自造变量：
        --vw-bg-2 并不存在，之前一直回退到硬编码浅灰 —— 深色模式下会成为
        一块刺眼的浅色。用 --vw-bg 与白/深灰卡片都天然有层次。 */
    background: var(--vw-bg); border-radius: 12px;
    max-height: min(58vh, 460px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* 滚到底不把整页一起带着滚（H5 上这是最容易被吐槽的点） */
    overscroll-behavior: contain;
}
.vw-detail[hidden] { display: none; }
.vw-detail-inner { padding: 14px 14px 0; }
.vw-detail-loading, .vw-detail-empty { font-size: 13px; color: var(--vw-text-4); padding: 14px 14px 10px; }
/* 贴在滚动区底部：滚到任意位置都看得到，不用再滚回去才能收 */
.vw-detail-foot {
    position: sticky; bottom: 0;
    padding: 10px 14px 12px; text-align: center;
    /* 必须是实色：半透明的话，滚过去的内容会从底下透出来 */
    background: var(--vw-bg);
    border-top: 1px solid var(--vw-line);
    border-radius: 0 0 12px 12px;
}
/* 分隔线让长内容更好扫读（第一块不加） */
.vw-detail-sec { margin-bottom: 16px; }
.vw-detail-sec + .vw-detail-sec { padding-top: 14px; border-top: 1px solid var(--vw-line); }
.vw-detail-sec h4 {
    margin: 0 0 8px; font-size: 12px; font-weight: 700;
    color: var(--vw-text-3); letter-spacing: .4px;
}
.vw-sense { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 6px; font-size: 14px; line-height: 1.6; }
.vw-sense-text { flex: 1; }
.vw-forms { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; color: var(--vw-text-3); }
.vw-form b { color: var(--vw-text); font-weight: 600; }
.vw-syno { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; margin-bottom: 6px; font-size: 14px; }
.vw-syno-words { font-weight: 600; }
.vw-syno-tran { color: var(--vw-text-3); font-size: 13px; }
.vw-phrs { width: 100%; border-collapse: collapse; font-size: 14px; }
.vw-phrs td { padding: 4px 0; vertical-align: top; }
.vw-phrs td:first-child { width: 42%; padding-right: 10px; font-weight: 600; }
/* 例句 / 真题 */
.vw-example { margin-bottom: 10px; font-size: 14px; }
.vw-example-en { line-height: 1.55; }
.vw-example-zh { color: var(--vw-text-3); font-size: 13px; margin-top: 2px; }
.vw-example-src { color: var(--vw-text-4); font-size: 12px; margin-top: 2px; }
/* 真题用左侧色条区分（与普通例句不同来源） */
.vw-exam-sent { padding-left: 9px; border-left: 3px solid rgba(255, 149, 0, .5); }
.vw-root { margin-bottom: 8px; font-size: 14px; }
.vw-root-word { display: block; margin: 3px 0 0 4px; line-height: 1.55; }
.vw-root-word b { font-weight: 600; }
.vw-etym { font-size: 13.5px; line-height: 1.75; color: var(--vw-text-2); }

/* 发音按钮 */
.vw-audio {
    margin-top: 22px;
    display: inline-flex; align-items: center; gap: 8px;
    height: 50px; padding: 0 24px; border-radius: 999px;
    border: 0; background: var(--vw-blue-dim); color: var(--vw-blue);
    font-size: 16px; font-weight: 600; font-family: inherit; cursor: pointer;
    transition: transform .18s ease, background .18s ease;
}
.vw-audio:active { transform: scale(.96); }
.vw-audio.vw-playing { background: var(--vw-blue); color: #fff; }
.vw-audio.vw-played { background: rgba(52, 199, 89, .15); color: #248A3D; }
.vw-audio svg { width: 20px; height: 20px; }

/* 上一个 / 下一个 */
.vw-study-nav { flex: none; display: flex; gap: 10px; }
.vw-study-nav .vw-btn { flex: 1; }
.vw-study-lock { text-align: center; font-size: 12.5px; color: var(--vw-orange); margin-top: 10px; min-height: 18px; }

/* ---------------- 测验 ---------------- */
.vw-quiz-top { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.vw-quiz-progress { flex: 1; }

.vw-opt {
    display: flex; align-items: center; gap: 12px;
    min-height: 56px; padding: 14px 16px;
    background: var(--vw-card); border-radius: 14px;
    box-shadow: var(--vw-shadow);
    margin-bottom: 10px; cursor: pointer;
    transition: transform .14s ease, background .18s ease, box-shadow .18s ease;
    border: 1.5px solid transparent;
}
.vw-opt:active { transform: scale(.99); }
.vw-opt-key {
    width: 26px; height: 26px; border-radius: 8px; flex: none;
    background: #EFEFF4; color: var(--vw-text-3);
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 700;
}
.vw-opt-text { font-size: 16.5px; line-height: 1.4; flex: 1; }
.vw-opt.vw-right { border-color: var(--vw-green); background: rgba(52, 199, 89, .07); }
.vw-opt.vw-right .vw-opt-key { background: var(--vw-green); color: #fff; }
.vw-opt.vw-wrong { border-color: var(--vw-red); background: rgba(255, 59, 48, .06); }
.vw-opt.vw-wrong .vw-opt-key { background: var(--vw-red); color: #fff; }
.vw-opt.vw-dim { opacity: .5; }

/* 拼写输入 */
.vw-spell {
    width: 100%; height: 58px; padding: 0 18px;
    border-radius: 14px; border: 1.5px solid var(--vw-line);
    background: var(--vw-card); color: var(--vw-text);
    font-size: 22px; font-family: inherit; letter-spacing: 1px;
    outline: none; transition: border-color .2s ease;
}
.vw-spell:focus { border-color: var(--vw-blue); }
.vw-spell.vw-right { border-color: var(--vw-green); color: #248A3D; }
.vw-spell.vw-wrong { border-color: var(--vw-red); color: #C0231B; }
.vw-spell-answer { text-align: center; font-size: 15px; margin-top: 8px; }

/* 拼写：触摸设备用自绘键盘（原因见 quiz.js 里 createSpellField 的注释）。
   显示区套的还是 .vw-spell，所以和桌面端的原生输入框看起来是同一个东西。 */
.vw-spell-kbd {
    /* 比桌面那个 58px 的 <input> 矮几像素：它下面紧跟着 207px 的键盘，
       375px 屏上「确定 + 整个键盘」必须同时进屏（见下面 .vw-kbd 的注释）。 */
    display: block; height: auto; min-height: 54px;
    padding: 12px 18px; line-height: 1.35;
    cursor: text; outline: none;
    /* 不接受系统文本选择与长按菜单：否则长按显示区就能把答案粘进来 */
    -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.vw-spell-kbd::before {
    content: attr(data-ph);
    color: var(--vw-text-4);
    font-size: 15px; font-weight: 400; letter-spacing: 0;
}
.vw-spell-kbd.vw-has-text::before { content: none; }
/* pre-wrap 才能看出末尾的空格（多词短语靠它）*/
.vw-spell-text { white-space: pre-wrap; word-break: break-all; }
.vw-spell-caret {
    display: none; width: 2px; height: 1.05em; margin-left: 2px;
    background: var(--vw-blue); vertical-align: -.16em;
    animation: vw-caret 1.1s steps(1) infinite;
}
.vw-spell-kbd.vw-has-text .vw-spell-caret { display: inline-block; }
@keyframes vw-caret { 0%, 45% { opacity: 1; } 45.01%, 100% { opacity: 0; } }

/* 自绘键盘。
   键宽统一定成「10 键 + 9 个间隙」的宽度，行数少的居中排 —— 这样各行的键
   宽窄一致（和真键盘一样），不会因为某行键少就变成宽键盘。

   尺寸：误触的根源是键太小（手指接触面比键宽）。三件事把键撑到真键盘的量级：
     ① 左右各借 -16px 撑满整屏 —— 键盘本来被 .vw-main 的 16px 内边距压窄了；
     ② 间隙 5px → 4px（真键盘的间隙本来就很窄），同样的宽度下键更宽；
     ③ 键高 42 → 48px，超过 iOS HIG 的 44px 最小热区。
   375px 宽屏实测 33×48px（iOS 自带键盘约 37×42），已接近系统键盘的手感。

   代价与补偿：键高 42→48 会让键盘长高 24px，而 375px 屏（iPhone 8/SE2）
   原本“确定 + 键盘”刚好不进屏。所以同时从非按键处把高度收回来：
   行间隙 6→4px、与「确定」的上间距 12→6px、输入框 58→54px、提示行 12→8px，
   —— 键更大了，页面总高反而和以前一致（实测 375px 仍不需滚动）。 */
.vw-kbd {
    --vw-kbd-kw: calc((100% - 36px) / 10);   /* 10 键 + 9 个 4px 间隙 */
    margin: 6px -16px 0;
    /* 借满整屏之后边键会贴到屏幕边：横屏刘海机上再让开安全区 */
    padding-left: calc(4px + env(safe-area-inset-left, 0px));
    padding-right: calc(4px + env(safe-area-inset-right, 0px));
    display: flex; flex-direction: column; gap: 4px;
    -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
    /* 连点两个键不该触发双击缩放（点在键与键之间的缝里也一样）*/
    touch-action: manipulation;
}
/* 宽屏下 .vw-main 已经限宽 620px 居中，不用再向两侧借边（否则会支出容器）*/
@media (min-width: 700px) {
    .vw-kbd { margin-left: 0; margin-right: 0; }
}
.vw-kbd-row { display: flex; gap: 4px; justify-content: center; }
/* 必须显式写 [hidden] 的规则：上面这行 display:flex 是类选择器，
   优先级高于浏览器默认的 [hidden]{display:none} —— 不写这句，
   收起的符号行照样会显示出来（www 那边踩过同一个坑）。 */
.vw-kbd-row[hidden] { display: none; }
.vw-kbd-chars > .vw-kbd-key { width: var(--vw-kbd-kw); flex: none; }
/* 退格加长到 1.5 个字母键宽（2026-10-02 用户反馈「退格键太小」，要求加长）。
   必须写在上面那条**之后** —— 两条同优先级（都是"两个类"），靠顺序生效。
   底行宽度复核：⇧(1) + z x c v b n m(7) + ⌫(1.5) = 9.5 键 + 8×4px 间隙 ≈ 95%，不溢出。 */
.vw-kbd-chars > .vw-kbd-del { width: calc(var(--vw-kbd-kw) * 1.5); }
/* 上档键：键面是符号 ⇧ / ⇪，用与其它功能键一致的字号；高亮走 .vw-on（JS 加类） */
.vw-kbd-chars > .vw-kbd-shift { font-size: 18px; }
.vw-kbd-fnrow > .vw-kbd-key { flex: 1 1 0; width: auto; }
.vw-kbd-fnrow > .vw-kbd-space { flex: 2.2 1 0; }

.vw-kbd-key {
    height: 48px; padding: 0; border: 0; border-radius: 9px;
    background: var(--vw-card); color: var(--vw-text);
    font-family: inherit; font-size: 21px; line-height: 1;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 1px 0 rgba(0, 0, 0, .14);
    cursor: pointer;
    /* 关掉双击缩放与老内核的 300ms 点击延迟：延迟会让人以为"没点上"而再点一次，
       结果是双字母 —— 这是最典型的"误触"场景。 */
    touch-action: manipulation;
}
.vw-kbd-key.vw-kbd-fn { font-size: 18px; background: #E4E4E9; }
.vw-kbd-key.vw-kbd-space { font-size: 14px; color: var(--vw-text-3); }
.vw-kbd-key.vw-on { background: var(--vw-blue); color: #fff; }
/* :active 必须写在最后 —— 类选择器与伪类的优先级相同，靠顺序才能保证
   按下时一定有反馈（写在前面会被 .vw-kbd-fn 的 background 盖掉）。
   这个反馈在防误触上很关键：手指按下去就看到哪个键被选中了。 */
.vw-kbd-key:active { background: #D8D8DD; }
.vw-kbd-key.vw-on:active { background: #0062CC; }

/* 小屏（iPhone SE 这类）：键高也不低于 44px（iOS HIG 的最小热区），
   靠把输入框压矮一点把高度腾出来。 */
@media (max-width: 340px) {
    .vw-kbd-key { height: 46px; font-size: 19px; }
    .vw-spell-kbd { min-height: 52px; padding: 12px 14px; }
}

/* 拼写题的「上报问题」：在键盘下面，做成一行小字链接而不是大按钮。
   两个原因：① 键盘高度是精算过的（375px 屏「确定 + 整个键盘」刚好进屏），
   加一个大按钮就会把键盘顶出屏幕；② 它是低频、破坏性的出口，
   "好找但别顺手点到"才是对的 —— 大按钮反而会被误点成「不会，跳过」。 */
.vw-report-row { margin-top: 10px; text-align: center; }
.vw-report-link {
    background: none; border: 0; padding: 6px 12px;
    font: inherit; font-size: 13px; color: var(--vw-text-3);
    text-decoration: underline; text-underline-offset: 3px;
    border-radius: 8px; cursor: pointer;
}
.vw-report-link:active { background: rgba(0, 0, 0, .06); }

/* 结果页 */
.vw-result-hero { text-align: center; padding: 18px 0 6px; }
.vw-result-score { font-size: 56px; font-weight: 700; letter-spacing: -1.5px; line-height: 1; }
.vw-result-label { color: var(--vw-text-3); font-size: 14px; margin-top: 6px; }

.vw-wrong-item { padding: 12px 0; border-bottom: .5px solid var(--vw-line); }
.vw-wrong-item:last-child { border-bottom: 0; }
.vw-wrong-word { font-size: 17px; font-weight: 600; }
.vw-wrong-phonetic { font-size: 13px; color: var(--vw-text-3); font-family: "Times New Roman", serif; }
.vw-wrong-meaning { font-size: 14px; color: var(--vw-text-2); margin-top: 4px; }
.vw-wrong-meta { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }

/* ---------------- 图表（纯 CSS/SVG，不引第三方库） ---------------- */
.vw-chart { width: 100%; height: 160px; display: block; }
.vw-chart-bar { fill: var(--vw-blue); opacity: .9; }
.vw-chart-bar.vw-empty { fill: #E5E5EA; }
.vw-chart-line { fill: none; stroke: var(--vw-green); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.vw-chart-dot { fill: #fff; stroke: var(--vw-green); stroke-width: 2; }
.vw-chart-axis { stroke: var(--vw-line); stroke-width: 1; }
.vw-legend { display: flex; gap: 14px; font-size: 12px; color: var(--vw-text-3); margin-top: 8px; }
.vw-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 5px; vertical-align: middle; }

/* ---------------- 空态 / 加载 ---------------- */
.vw-empty { text-align: center; padding: 46px 24px; color: var(--vw-text-3); }
.vw-empty-emoji { font-size: 40px; display: block; margin-bottom: 12px; opacity: .85; }
.vw-empty-title { font-size: 16px; color: var(--vw-text-2); margin-bottom: 6px; }
.vw-empty-desc { font-size: 13.5px; line-height: 1.6; }

.vw-loading { display: flex; align-items: center; justify-content: center; padding: 60px 0; }
.vw-spinner {
    width: 22px; height: 22px; border-radius: 50%;
    border: 2.5px solid rgba(0, 122, 255, .2); border-top-color: var(--vw-blue);
    animation: vw-spin .8s linear infinite; display: inline-block;
}
@keyframes vw-spin { to { transform: rotate(360deg); } }

.vw-inline-spin { width: 15px; height: 15px; border-width: 2px; vertical-align: -2px; }

/* 内容进入动画：柔和，不做花哨位移 */
.vw-fade { animation: vw-fade-in .28s ease both; }
@keyframes vw-fade-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------------- 底部 tab ---------------- */
.vw-tabbar {
    flex: none;
    height: calc(var(--vw-tab-h) + var(--vw-safe-b));
    padding-bottom: var(--vw-safe-b);
    display: flex;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-top: .5px solid var(--vw-line);
    z-index: 30;
}
.vw-tabbar[hidden] { display: none; }
.vw-tab {
    flex: 1; position: relative;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    color: var(--vw-text-4); text-decoration: none; font-size: 10.5px;
    transition: color .18s ease;
}
.vw-tab.vw-active { color: var(--vw-blue); }
.vw-tab-icon { display: block; line-height: 0; }
.vw-tab-text { font-weight: 500; }

/* ---------------- 浮层 ---------------- */
.vw-toast {
    position: fixed; left: 50%; bottom: calc(84px + var(--vw-safe-b));
    transform: translateX(-50%) translateY(8px);
    max-width: 84vw; padding: 11px 18px;
    background: rgba(28, 28, 30, .92); color: #fff;
    border-radius: 14px; font-size: 14.5px; line-height: 1.4;
    z-index: 90; opacity: 0; transition: opacity .22s ease, transform .22s ease;
    text-align: center; pointer-events: none;
}
.vw-toast.vw-show { opacity: 1; transform: translateX(-50%); }

.vw-mask { position: fixed; inset: 0; background: rgba(0, 0, 0, .32); z-index: 60; opacity: 0; transition: opacity .22s ease; }
.vw-mask.vw-show { opacity: 1; }

.vw-sheet {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
    background: var(--vw-bg); border-radius: 20px 20px 0 0;
    padding: 8px 12px calc(12px + var(--vw-safe-b));
    transform: translateY(100%); transition: transform .3s cubic-bezier(.22, .61, .36, 1);
    max-height: 86vh; overflow-y: auto;
}
.vw-sheet.vw-show { transform: none; }
.vw-sheet-title { text-align: center; font-size: 13px; color: var(--vw-text-3); padding: 10px 0 12px; }
.vw-sheet-item {
    background: var(--vw-card); border-radius: 14px;
    padding: 15px 16px; margin-bottom: 8px;
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    font-size: 16.5px; cursor: pointer;
}
.vw-sheet-item:active { background: #F7F7FA; }
.vw-sheet-cancel {
    background: var(--vw-card); border-radius: 14px; margin-top: 6px;
    text-align: center; padding: 15px; font-size: 16.5px; font-weight: 600;
    color: var(--vw-blue); cursor: pointer;
}

.vw-dialog {
    position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(.94);
    width: 78vw; max-width: 340px; z-index: 80;
    background: #fff; border-radius: 20px; padding: 22px 20px 16px;
    text-align: center; opacity: 0; transition: opacity .2s ease, transform .2s ease;
}
.vw-dialog.vw-show { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.vw-dialog-title { font-size: 17px; font-weight: 600; margin-bottom: 8px; }
.vw-dialog-text { font-size: 14px; color: var(--vw-text-3); line-height: 1.5; margin-bottom: 18px; }
.vw-dialog-actions { display: flex; gap: 10px; }

/* ---------------- 表单 ---------------- */
.vw-field { margin-bottom: 14px; }
.vw-label { font-size: 13px; color: var(--vw-text-3); margin: 0 4px 7px; font-weight: 500; }
.vw-input, .vw-select, .vw-textarea {
    width: 100%; height: 48px; padding: 0 14px;
    border-radius: 13px; border: 1.5px solid transparent;
    background: var(--vw-card); color: var(--vw-text);
    font-size: 16px; font-family: inherit; outline: none;
    transition: border-color .2s ease;
    box-shadow: var(--vw-shadow);
}
.vw-textarea { height: auto; min-height: 116px; padding: 12px 14px; line-height: 1.5; font-size: 15px; resize: vertical; }
.vw-input:focus, .vw-select:focus, .vw-textarea:focus { border-color: var(--vw-blue); }
.vw-input::placeholder, .vw-textarea::placeholder { color: var(--vw-text-4); }

.vw-select-wrap { position: relative; }
.vw-select { appearance: none; -webkit-appearance: none; padding-right: 38px; }
.vw-select-wrap::after {
    content: "›"; position: absolute; right: 16px; top: 50%;
    transform: translateY(-50%) rotate(90deg);
    color: var(--vw-text-4); font-size: 20px; pointer-events: none;
}

/* 分段控件（iOS segmented control） */
.vw-seg { display: flex; background: #E9E9EE; border-radius: 11px; padding: 2.5px; gap: 2px; }
.vw-seg > button {
    flex: 1; border: 0; background: transparent; color: var(--vw-text-2);
    height: 34px; border-radius: 9px; font-size: 14.5px; font-weight: 500;
    font-family: inherit; cursor: pointer; transition: background .2s ease, box-shadow .2s ease;
    padding: 0 4px; white-space: nowrap;
}
.vw-seg > button.vw-on { background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .12); font-weight: 600; }

/* 步进器（球数选择） */
.vw-stepper { display: flex; align-items: center; gap: 12px; }
.vw-stepper > button {
    width: 38px; height: 38px; border-radius: 11px; border: 0;
    background: var(--vw-blue-dim); color: var(--vw-blue);
    font-size: 20px; font-weight: 600; font-family: inherit; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.vw-stepper > button:active { opacity: .6; }
.vw-stepper-value { flex: 1; text-align: center; font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* 开关 */
.vw-switch { position: relative; width: 51px; height: 31px; flex: none; }
.vw-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.vw-switch i {
    position: absolute; inset: 0; border-radius: 999px; background: #E9E9EE;
    transition: background .22s ease; pointer-events: none;
}
.vw-switch i::after {
    content: ""; position: absolute; top: 2px; left: 2px;
    width: 27px; height: 27px; border-radius: 50%; background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .2); transition: transform .22s ease;
}
.vw-switch input:checked + i { background: var(--vw-green); }
.vw-switch input:checked + i::after { transform: translateX(20px); }

/* 打卡提醒的时间框。
   这里必须保留原生 input[type=time]（H5 里只有它能唤起系统时间选择器），
   所以不做自绘控件，只把浏览器默认外观换成 iOS 风格的胶囊。
   默认外观的问题很具体：2px 灰色实线边框 + 直角 + 纯白底 + 只有 26px 高
   —— 高度不到 iOS 的 44px 热区，白底坐在白卡片上也看不出是个能点的东西。 */
.vw-time {
    -webkit-appearance: none;
    appearance: none;
    border: none;
    background: var(--vw-bg);
    color: var(--vw-blue);
    font: inherit;
    font-size: 17px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;  /* 数字等宽：改时间时不会左右抽动 */
    padding: 10px 14px;
    min-width: 104px;
    min-height: 44px;                    /* iOS 热区下限 */
    box-sizing: border-box;
    border-radius: 10px;
    text-align: center;
    /* 让系统渲染的时间文字与选择器跟随主题。
       不设的话深色模式下仍按浅色主题画，黑底上会出现一块白。 */
    color-scheme: light;
    cursor: pointer;
}
.vw-time:active { opacity: .55; }
/* 时钟图标（部分浏览器会画）压低对比度，别抢时间数字的视觉重量 */
.vw-time::-webkit-calendar-picker-indicator { opacity: .45; cursor: pointer; }

@media (prefers-color-scheme: dark) {
    .vw-time {
        background: #2C2C2E;   /* 与 .vw-seg / .vw-opt-key 的次级底色一致 */
        color: #0A84FF;        /* 深色下 --vw-blue 偏暗，提亮一档 */
        color-scheme: dark;
    }
}

/* 复选框（线下默写勾选） */
.vw-check {
    width: 24px; height: 24px; border-radius: 50%; flex: none;
    border: 1.5px solid var(--vw-text-4);
    display: flex; align-items: center; justify-content: center;
    transition: background .18s ease, border-color .18s ease;
}
.vw-check.vw-on { background: var(--vw-orange); border-color: var(--vw-orange); }
.vw-check.vw-on::after { content: "✓"; color: #fff; font-size: 14px; font-weight: 700; }

/* 绑定码展示 */
.vw-code {
    font-size: 30px; font-weight: 700; letter-spacing: 6px;
    text-align: center; color: var(--vw-blue); font-variant-numeric: tabular-nums;
    padding: 16px 0 6px;
}

/* 连续打卡火焰 */
.vw-streak { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--vw-orange); font-weight: 600; }

/* 小屏适配 */
@media (max-width: 340px) {
    .vw-word { font-size: 32px; }
    .vw-stat-num { font-size: 19px; }
    .vw-large { font-size: 26px; }
}

/* 横屏/平板：内容居中限宽，避免一行拉太长 */
@media (min-width: 700px) {
    .vw-main { max-width: 620px; margin: 0 auto; width: 100%; }
    .vw-nav-bar, .vw-tabbar { max-width: 620px; margin: 0 auto; width: 100%; }
    .vw-tabbar { border-radius: 0; }
}

/* 深色模式：跟随系统（iOS 夜间护眼） */
@media (prefers-color-scheme: dark) {
    :root {
        --vw-bg: #000000;
        --vw-card: #1C1C1E;
        --vw-text: #FFFFFF;
        --vw-text-2: #EBEBF0;
        --vw-text-3: rgba(235, 235, 245, .6);
        --vw-text-4: rgba(235, 235, 245, .3);
        --vw-line: rgba(84, 84, 88, .5);
        --vw-shadow: none;
    }
    .vw-nav, .vw-tabbar { background: rgba(28, 28, 30, .86); }
    .vw-item { background: var(--vw-card); }
    .vw-item:active { background: #2C2C2E; }
    .vw-seg { background: #2C2C2E; }
    .vw-seg > button.vw-on { background: #48484A; }
    .vw-progress, .vw-ring-bg { stroke: #2C2C2E; }
    .vw-progress { background: #2C2C2E; }
    .vw-tag { background: #2C2C2E; }
    /* 考试标签在深色下要提亮：浅色用的 #C25E00 在黑底上几乎看不清 */
    .vw-tag.vw-exam { background: rgba(255, 149, 0, .22); color: #FFB340; }
    .vw-opt-key { background: #2C2C2E; }
    .vw-dialog { background: #1C1C1E; }
    .vw-btn.vw-plain { background: #2C2C2E; }
    .vw-kbd-key { background: #2C2C2E; box-shadow: 0 1px 0 #000; }
    .vw-kbd-key.vw-kbd-fn { background: #3A3A3C; }
    /* 同上：:active 写在最后 */
    .vw-kbd-key:active { background: #48484A; }
    .vw-sheet-item:active { background: #2C2C2E; }
}
/* ==========================================================================
   学习身份条（孩子用家长手机学习时，提醒这台手机现在以谁的身份在学）
   暖色、常驻，避免孩子学完把记录记错人。
   ========================================================================== */
.vw-learner {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 12px;
    padding: 10px 14px;
    border-radius: 12px;
    background: #FFF7E6;
    border: 1px solid #FFE0A3;
    color: #8A5A00;
    font-size: 13.5px;
    line-height: 1.4;
}

.vw-learner-text { flex: 1; min-width: 0; }

.vw-learner-switch {
    flex: none;
    border: none;
    background: #FF9F0A;
    color: #fff;
    border-radius: 999px;
    padding: 5px 12px;
    font-size: 13px;
}

@media (prefers-color-scheme: dark) {
    .vw-learner { background: #3A2E14; border-color: #5A4620; color: #F0C674; }
}

/* ==========================================================================
   线下默写单：导出 Word / 打印
   默写单本体（表格、标题）用的是内联样式 —— 同一份 HTML 既要给浏览器打印、
   又要给 Word 打开，而 Word 对内联样式最稳（<style> 在部分版本里会被丢掉）。
   这里只负责：屏幕上藏起来、打印时只输出它。
   ========================================================================== */
#vw-print-root { display: none; }

@media print {
    /* 只打印默写单：body 下其它节点（页面壳、底部导航、浮层）全部隐藏 */
    body > *:not(#vw-print-root) { display: none !important; }
    body { background: #fff !important; }
    #vw-print-root { display: block !important; }
}

/* ==========================================================================
   任务分组清单（core.js 的 VW.groupList）
   一个任务切了好几组时，学生要一眼看出哪些做完了、自己在哪一组。
   三种状态必须能分辨：已完成（绿✓）/ 进行中（橙，题型没测全）/ 未开始（灰）
   ========================================================================== */
.vw-groups { display: flex; flex-direction: column; gap: 8px; }
.vw-groups-head {
    display: flex; align-items: baseline; justify-content: space-between;
    margin: 4px 2px 10px; font-size: 13px; color: var(--vw-text-3);
}
.vw-groups-head b { color: var(--vw-text); font-size: 15px; font-variant-numeric: tabular-nums; }
.vw-group {
    display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
    background: var(--vw-card); border: .5px solid var(--vw-line);
    border-radius: 14px; padding: 12px 14px; cursor: pointer; font-family: inherit;
    transition: opacity .15s ease;
}
.vw-group:active { opacity: .65; }
/* 只展示、不可点（例如结果页上回顾进度）*/
.vw-group.vw-g-static { cursor: default; }
.vw-group.vw-g-static:active { opacity: 1; }
.vw-g-no {
    flex: none; width: 26px; height: 26px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 13.5px; font-weight: 600; font-variant-numeric: tabular-nums;
    background: #E9E9EE; color: var(--vw-text-3);
}
.vw-g-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.vw-g-title {
    font-size: 15.5px; font-weight: 600; color: var(--vw-text);
    display: flex; align-items: center; gap: 6px;
}
.vw-g-here {
    font-style: normal; font-size: 11px; font-weight: 600; color: var(--vw-blue);
    background: var(--vw-blue-dim); border-radius: 5px; padding: 1px 6px;
}
.vw-g-desc { font-size: 12.5px; color: var(--vw-text-3); }
.vw-g-state { flex: none; font-size: 12.5px; font-weight: 600; color: var(--vw-text-4); }

.vw-group.vw-g-done .vw-g-no { background: var(--vw-green); color: #fff; }
.vw-group.vw-g-done .vw-g-state { color: var(--vw-green); }
.vw-group.vw-g-doing .vw-g-no { background: var(--vw-orange); color: #fff; }
.vw-group.vw-g-doing .vw-g-state { color: var(--vw-orange); }
.vw-group.vw-g-cur { border-color: var(--vw-blue); box-shadow: 0 0 0 2px var(--vw-blue-dim); }
/* 已通过的组连标题也变绿：扫一眼就够，不用去读右侧那行小字 */
.vw-group.vw-g-done .vw-g-title { color: var(--vw-green); }

/* 恭喜今日任务全部完成（core.js 的 ui.congrats）*/
.vw-congrats { text-align: center; padding: 6px 4px 2px; }
.vw-congrats-emoji { font-size: 46px; line-height: 1.1; }
.vw-congrats-main { margin-top: 10px; font-size: 17px; font-weight: 600; color: var(--vw-text); }
.vw-congrats-sub { margin-top: 6px; font-size: 13.5px; color: var(--vw-text-3); }
.vw-congrats-sub b { color: var(--vw-orange); font-size: 15px; }
.vw-congrats-meta { margin-top: 10px; font-size: 12.5px; color: var(--vw-text-4); }

@media (prefers-reduced-motion: no-preference) {
    .vw-congrats-emoji { animation: vw-pop .45s cubic-bezier(.2, 1.4, .5, 1) both; }
}
@keyframes vw-pop {
    from { transform: scale(.4); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

/* ==========================================================================
   阅读理解 / 阅词复盘（reading.js / readreview.js）
   ========================================================================== */

/* 阅读页的两栏容器：手机上就是一列（正文，生词表在下面），
   PC 上（见文件末尾的宽屏段）变成「正文 + 右侧生词表」。 */
.vw-read-wrap { display: block; }
.vw-read-side { margin-top: 4px; }

/* 文章正文：逐句渲染，点词弹卡 */
.vw-read-body { padding: 4px 2px 8px; }
.vw-read-sent { margin: 0 0 14px; line-height: 1.9; font-size: 17px; color: var(--vw-text); }
/* 每句下面的操作行（查看翻译 / 朗读） */
.vw-read-tools { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 6px; }
/* 可点的词：只加一条淡淡的下划线，别做成按钮 —— 一屏几十个词，按钮会把正文变成键盘 */
.vw-rw { color: var(--vw-blue); border-bottom: 1px dashed rgba(0,122,255,.45); cursor: pointer; }
.vw-rw:active { background: var(--vw-blue-dim); }
/* 已经在阅读单词表里的词：实线下划线，一眼看出"这个我收过了" */
.vw-rw.vw-rw-in { color: var(--vw-text); border-bottom-style: solid; border-bottom-color: var(--vw-line); }
.vw-read-zh { margin-top: 6px; font-size: 15px; line-height: 1.8; color: var(--vw-text-3); }
.vw-read-toggle {
    margin-top: 2px; background: none; border: 0; padding: 0;
    color: var(--vw-blue); font-size: 13px; font-family: inherit; cursor: pointer;
}
.vw-read-speak {
    background: none; border: 0; padding: 0;
    color: var(--vw-text-3); font-size: 13px; font-family: inherit; cursor: pointer;
}
.vw-read-speak:active { color: var(--vw-blue); }

/* 单词卡（点词 / 答错后弹的那张） */
.vw-wordcard { text-align: left; }
.vw-wc-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.vw-wc-word { font-size: 24px; font-weight: 600; letter-spacing: .2px; }
.vw-wc-phonetic { color: var(--vw-text-3); font-size: 14px; }
.vw-wc-pos { color: var(--vw-text-4); font-size: 13px; }
.vw-wc-meaning { margin-top: 10px; font-size: 16px; line-height: 1.7; }
.vw-wc-note { margin-top: 8px; font-size: 13px; color: var(--vw-text-3); line-height: 1.6; }
.vw-wc-foot { margin-top: 14px; display: flex; gap: 10px; align-items: center; }
.vw-wc-src { font-size: 12px; color: var(--vw-text-4); }

/* 复盘选择题 */
.vw-opt {
    display: block; width: 100%; text-align: left; margin-top: 10px;
    padding: 14px 16px; border-radius: 12px; border: 1px solid var(--vw-line);
    background: var(--vw-card); color: var(--vw-text); font-size: 16px;
    font-family: inherit; line-height: 1.5; cursor: pointer;
}
.vw-opt:active { background: var(--vw-blue-dim); }
.vw-opt.vw-opt-right { border-color: var(--vw-green); background: rgba(52,199,89,.10); }
.vw-opt.vw-opt-wrong { border-color: var(--vw-red); background: rgba(255,59,48,.10); }
.vw-opt-key { display: inline-block; width: 22px; color: var(--vw-text-4); font-weight: 600; }
.vw-stem { text-align: center; padding: 16px 8px 6px; }
.vw-stem-word { font-size: 32px; font-weight: 600; letter-spacing: .3px; }
.vw-stem-phonetic { margin-top: 6px; color: var(--vw-text-3); font-size: 14px; }
.vw-stem-audio { margin-top: 12px; }

/* 复盘进度条（今日 x/y 组） */
.vw-progress { height: 6px; border-radius: 3px; background: #EFEFF4; overflow: hidden; margin-top: 8px; }
.vw-progress > i { display: block; height: 100%; background: var(--vw-blue); border-radius: 3px; }

/* 15 天报告：每天一行三列比例 */
.vw-rep-row { padding: 12px 2px; border-bottom: 1px solid var(--vw-line); }
.vw-rep-row:last-child { border-bottom: 0; }
.vw-rep-day { display: flex; align-items: center; justify-content: space-between; font-size: 14px; }
.vw-rep-day .vw-rep-check { color: var(--vw-green); font-size: 13px; }
.vw-rep-metric { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 12.5px; color: var(--vw-text-3); }
.vw-rep-label { width: 62px; flex: none; }
.vw-rep-bar { flex: 1; height: 6px; border-radius: 3px; background: #EFEFF4; overflow: hidden; }
.vw-rep-bar > i { display: block; height: 100%; background: var(--vw-green); border-radius: 3px; }
.vw-rep-bar.vw-rep-b2 > i { background: var(--vw-orange); }
.vw-rep-bar.vw-rep-b3 > i { background: var(--vw-blue); }
.vw-rep-num { width: 74px; text-align: right; flex: none; font-variant-numeric: tabular-nums; }
.vw-rep-none { color: var(--vw-text-4); }
/* 15 天报告：每天那行下面的时间线（学习时长 · 开始–结束 · 跳出次数，task25）
   单行、小字、数字用等宽数字，不抢三根主进度条的视线 */
.vw-rep-line { margin-top: 6px; font-size: 12px; color: var(--vw-text-4);
               font-variant-numeric: tabular-nums; }

/* ==========================================================================
   宽屏 / PC 模式（需求 2026-10-01：阅读在 PC 上打开还是手机模式，要一个 PC 版）

   别的页面在 PC 上仍然是 620px 居中的"手机宽度" —— 那是刻意的：一列长文本
   超过 70 个字符就开始难读。只有阅读页需要更宽的版面（正文 + 侧栏生词表），
   所以由路由声明 wide:true（core.js 会加 .vw-wide），且只在 ≥1000px 生效。

   为什么用 CSS 而不是 JS 判断设备：窗口拉宽拉窄只是改样式，不用重渲染，
   也不会出现"在 iPad 上横竖屏切换后还按手机排"的问题。
   ========================================================================== */
@media (min-width: 1000px) {
    .vw-main.vw-wide { max-width: 1080px; }
    .vw-app-wide .vw-nav-bar { max-width: 1080px; }
    .vw-read-wrap {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 320px;
        gap: 22px;
        align-items: start;
    }
    /* 侧栏跟着滚（正文很长时它一直是"手边那张表"） */
    .vw-read-side { margin-top: 0; position: sticky; top: 8px; }
    /* PC 上字大一号、行距更开：屏幕远、字号小最费眼 */
    .vw-read-sent { font-size: 18px; line-height: 2.05; margin-bottom: 18px; }
    .vw-read-zh { font-size: 15.5px; }
    /* 词卡在 PC 上给宽一点，释义不用折成很多行 */
    .vw-dialog { max-width: 460px; }
}

/* ==========================================================================
   词组测试（phrase.js，需求 C 2026-10-05）
   手机：单列（右栏排到下面）；PC ≥1000px：两栏（题干在左、错题本/管理在右）。
   ========================================================================== */
.vw-phrase-stemtext { font-size: 24px; font-weight: 600; line-height: 1.6; word-break: break-word; }
.vw-phrase-fill .vw-phrase-stemtext { letter-spacing: 1px; }

/* ---- 词组学习卡（task27：mac 风格三行卡）----
   第一行英文 / 第二行中文＋「遮挡隐藏」/ 第三行发音按钮。
   尺寸与配色刻意跟单词卡的 .vw-word-card 一套（同一张卡的两副面孔）
   —— 学生从背单词切到学词组时，不该觉得换了个 App。 */
.vw-phrase-card {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 26px 20px; margin-top: 12px; text-align: center;
    background: var(--vw-card); border-radius: var(--vw-radius-lg); box-shadow: var(--vw-shadow);
}
.vw-phrase-en {
    font-size: 30px; font-weight: 700; letter-spacing: -.4px; line-height: 1.25;
    word-break: break-word; max-width: 100%;
}
.vw-phrase-en.vw-long { font-size: 24px; }
/* 词性跟在英文后面：小、灰，是补充而不是主角 */
.vw-phrase-pos {
    margin-left: 8px; font-size: 12.5px; font-weight: 500; letter-spacing: 0;
    color: var(--vw-text-3); vertical-align: 6px;
}
/* 中文 ＋「遮挡隐藏」按钮同排（按钮紧跟中文后面） */
.vw-phrase-cn-row {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
    gap: 8px; margin-top: 14px; max-width: 100%;
}
.vw-phrase-cn {
    font-size: 20px; font-weight: 500; line-height: 1.5; word-break: break-word;
    transition: filter .18s ease, opacity .18s ease;
}
/* 遮挡 = 模糊，而不是留白：留白会让人以为"这条没有释义" */
.vw-phrase-cn.vw-hidden { filter: blur(9px); opacity: .55; user-select: none; }
.vw-phrase-hide { flex: none; padding: 5px 12px; border-radius: 999px; font-size: 12.5px; }
/* 发音按钮那一行（.vw-audio 自带 margin-top:22px，这里只负责居中） */
.vw-phrase-tools { display: flex; justify-content: center; max-width: 100%; }
.vw-phrase-note { margin-top: 14px; font-size: 12.5px; color: var(--vw-text-4); line-height: 1.7; }

.vw-phrase-opts { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.vw-phrase-opt {
    display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
    padding: 14px 16px; border-radius: 12px; cursor: pointer; font: inherit;
    background: var(--vw-card); color: var(--vw-text);
    border: 1px solid #E5E5EA; box-shadow: 0 1px 0 rgba(0, 0, 0, .06);
}
.vw-phrase-opt:active { background: #D8D8DD; }
.vw-phrase-opt-key { color: var(--vw-text-3); font-weight: 600; flex: none; }
.vw-phrase-opt.vw-picked { border-color: var(--vw-blue); }
.vw-phrase-opt.vw-right { border-color: var(--vw-green); background: rgba(52, 199, 89, .10); }
.vw-phrase-opt.vw-wrong { border-color: var(--vw-red); background: rgba(255, 59, 48, .10); }
.vw-phrase-opt[disabled] { cursor: default; }

/* ---- 答错后的「正确答案」块（task28）----
   填空题专用：那一题的选项只有挖空的那个词（"off"），只标红的话学生看到的
   仍旧只是 "look ______ to" 加一堆介词 —— 知道该选 off，却不知道这句话什么意思。
   所以把完整词组和中文一起贴出来，配色沿用"答对"的绿（它是正解，不是错误提示）。 */
.vw-phrase-wrongbox { margin-top: 12px; }
.vw-phrase-answer {
    margin-top: 10px; padding: 14px 16px; text-align: center;
    background: rgba(52, 199, 89, .10); border: 1px solid rgba(52, 199, 89, .35);
    border-radius: 12px;
}
.vw-phrase-answer-lb { display: block; font-size: 12px; color: #248A3D; margin-bottom: 6px; }
.vw-phrase-answer-en { display: block; font-size: 19px; font-weight: 600; line-height: 1.4; word-break: break-word; }
.vw-phrase-answer-cn { display: block; font-size: 14px; color: var(--vw-text-2); margin-top: 4px; }

.vw-phrase-side { margin-top: 18px; }

@media (min-width: 1000px) {
    .vw-phrase-wrap {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 320px;
        gap: 22px;
        align-items: start;
    }
    .vw-phrase-side { margin-top: 0; position: sticky; top: 8px; }
}