/* ============================================================
   css/chat/chat-vocab-bar.css — 聊天页顶部背词条（cvb-）+ 聊天里的单词卡（wc-）
   第 5 窗口第四/五批（2028-09）。
   为什么住 css/chat/ 而不是外文那一份：单词卡是**聊天里的普通消息**，
   它必须和别的卡片一样随聊天样式一起加载（外文面板的样式只在进外文时才有）。
   ============================================================ */

/* ============================================================
   聊天页顶部背词条（cvb-）+ 聊天里的单词卡（wc-）· 第 5 窗口第四/五批
   ------------------------------------------------------------
   背词条铁律（甲方原话）：**在聊天页顶部占一条，不盖聊天** ——
   所以它是消息区上面的一条 flex 兄弟（不是浮层、不是 absolute 盖上去的），
   它出现/消失只会把消息区往下/往上推，绝不遮挡任何消息。
   ============================================================ */
.cvb {
    flex-shrink: 0;                    /* 顶条绝不许被消息区压扁（长期规则 #77） */
    background: var(--surface-solid, #fff);
    border-bottom: 1px solid rgba(201, 168, 168, 0.22);
    padding: 8px 12px 9px;
    position: relative;
    z-index: 3;
}
.cvb-row { display: flex; align-items: center; gap: 10px; }
.cvb-exit {
    width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid rgba(201, 168, 168, 0.3); background: transparent;
    color: var(--text-secondary); cursor: pointer;
    -webkit-tap-highlight-color: transparent; touch-action: manipulation;
    transition: background .16s ease, transform .1s ease;
}
.cvb-exit:hover { background: var(--rose-light, rgba(201,168,168,.12)); color: var(--rose); }
.cvb-exit:active { transform: scale(0.9); }
.cvb-mid { flex: 1; min-width: 0; cursor: pointer; }
.cvb-word {
    font-family: var(--font-display); font-size: 16px; font-weight: 600;
    color: var(--text-primary); line-height: 1.25;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cvb-sub {
    font-family: var(--font-body); font-size: 10.5px; color: var(--text-muted);
    margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cvb-acts { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.cvb-icon {
    width: 30px; height: 30px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid rgba(201, 168, 168, 0.28); background: transparent;
    color: var(--rose); cursor: pointer;
    -webkit-tap-highlight-color: transparent; touch-action: manipulation;
    transition: background .16s ease, transform .1s ease;
}
.cvb-icon:hover { background: var(--rose-light, rgba(201,168,168,.12)); }
.cvb-icon:active { transform: scale(0.92); }
.cvb-next {
    padding: 8px 13px; border-radius: 11px; flex-shrink: 0;
    border: 1px solid var(--rose); background: var(--rose); color: #fff;
    font-family: var(--font-body); font-size: 12px; cursor: pointer;
    -webkit-tap-highlight-color: transparent; touch-action: manipulation;
    transition: background .16s ease, transform .1s ease;
}
.cvb-next:hover { background: var(--rose-hover); border-color: var(--rose-hover); }
.cvb-next:active { transform: scale(0.96); }
.cvb-decks { display: flex; gap: 6px; margin-top: 7px; }
.cvb-deck {
    flex: 1; padding: 6px 8px; border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, 0.06); background: transparent;
    color: var(--text-secondary); font-family: var(--font-body); font-size: 11px;
    cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
    transition: background .16s ease, color .16s ease, border-color .16s ease;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cvb-deck:hover { border-color: rgba(201, 168, 168, 0.4); }
.cvb-deck.on { background: rgba(201, 168, 168, 0.14); border-color: rgba(201, 168, 168, 0.42); color: var(--rose); }
.cvb-sheet {
    margin-top: 9px; padding: 14px 14px 12px;
    background: var(--bg-chat, #FCFAF6);
    border: 1px solid rgba(201, 168, 168, 0.24);
    border-radius: 14px;
    animation: vocabFadeIn .18s ease;
}
.cvb-sheet-word { font-family: var(--font-display); font-size: 20px; font-weight: 700; color: var(--text-primary); word-break: break-word; }
.cvb-sheet-ph { font-family: var(--font-body); font-size: 11.5px; color: var(--text-muted); margin-top: 3px; }
.cvb-sheet-speak {
    display: inline-flex; align-items: center; gap: 5px; margin-top: 8px;
    padding: 6px 12px; border-radius: 10px;
    border: 1px solid rgba(201, 168, 168, 0.4); background: transparent;
    color: var(--rose); font-family: var(--font-body); font-size: 12px;
    cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background .16s ease;
}
.cvb-sheet-speak:hover { background: var(--rose-light, rgba(201,168,168,.12)); }
.cvb-sheet-zh { font-family: var(--font-body); font-size: 13.5px; color: var(--text-primary); margin-top: 8px; line-height: 1.7; }
.cvb-sheet-hint { font-family: var(--font-body); font-size: 11px; color: var(--text-muted); margin-top: 6px; }
.cvb-sheet-answer { display: flex; gap: 8px; margin-top: 12px; }
.cvb-rate {
    flex: 1; padding: 9px 6px; border-radius: 11px;
    border: 1px solid rgba(201, 168, 168, 0.34); background: transparent;
    color: var(--text-primary); font-family: var(--font-body); font-size: 12.5px;
    cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
    transition: background .16s ease, transform .1s ease, border-color .16s ease;
}
.cvb-rate:hover { background: var(--rose-light, rgba(201,168,168,.12)); border-color: var(--rose); }
.cvb-rate:active { transform: scale(0.96); }

/* ---- 聊天里的单词卡 ---- */
.word-card-bubble {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
    max-width: min(280px, 78vw);
}
.wc-card {
    position: relative;
    background: var(--surface-solid, #fff);
    border: 1px solid rgba(201, 168, 168, 0.26);
    border-radius: 16px;
    padding: 13px 14px 10px;
    box-shadow: var(--shadow-sm, 0 2px 8px rgba(0,0,0,.05));
    overflow: hidden;
    transition: transform .12s ease, box-shadow .2s ease;
}
.wc-card::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
    background: linear-gradient(to bottom, var(--rose), rgba(201,168,168,0.15));
}
.wc-card.mine { border-color: rgba(168, 184, 160, 0.34); }
.wc-card.mine::before { background: linear-gradient(to bottom, var(--sage, #A8B8A0), rgba(168,184,160,0.15)); }
.wc-card:active { transform: scale(0.99); }
.wc-top { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.wc-word {
    font-family: var(--font-display); font-size: 19px; font-weight: 700;
    color: var(--text-primary); line-height: 1.2; word-break: break-word;
}
.wc-ph { font-family: var(--font-body); font-size: 10.5px; color: var(--text-muted); }
.wc-zh { font-family: var(--font-body); font-size: 13px; color: var(--text-primary); margin-top: 6px; line-height: 1.6; }
.wc-def { font-family: var(--font-reading, var(--font-body)); font-size: 12px; color: var(--text-secondary); margin-top: 4px; line-height: 1.6; }
.wc-meta { font-family: var(--font-body); font-size: 10.5px; color: var(--text-muted); margin-top: 6px; display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.wc-dot { opacity: 0.5; }
.wc-diff { padding: 1px 6px; border-radius: 7px; background: rgba(196, 168, 106, 0.16); color: var(--gold-dark, #A89050); }
.wc-acts { display: flex; align-items: center; gap: 4px; margin-top: 10px; padding-top: 8px; border-top: 1px solid rgba(0, 0, 0, 0.055); }
.wc-act {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 5px 8px; border-radius: 9px; border: none; background: transparent;
    color: var(--rose); font-family: var(--font-body); font-size: 11px;
    cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
    transition: background .16s ease, transform .1s ease;
}
.wc-act:hover { background: var(--rose-light, rgba(201,168,168,.12)); }
.wc-act:active { transform: scale(0.94); }
/* 详情页「发到聊天」那一行（单词卡的另一端：这边发、聊天那边收，样式就近放一起） */
.vd-share-row { display: flex; align-items: center; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.vd-share-row .vd-btn { display: inline-flex; align-items: center; gap: 6px; }
[data-theme-mode="dark"] .cvb { background: var(--surface-solid); border-bottom-color: rgba(255,255,255,0.06); }
[data-theme-mode="dark"] .cvb-sheet { background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.07); }
[data-theme-mode="dark"] .cvb-deck { border-color: rgba(255,255,255,0.08); }
[data-theme-mode="dark"] .wc-card { background: var(--surface-solid); border-color: rgba(255,255,255,0.06); }
[data-theme-mode="dark"] .wc-acts { border-top-color: rgba(255,255,255,0.06); }
@media (max-width: 369px) {
    .cvb { padding: 7px 10px 8px; }
    .cvb-word { font-size: 15px; }
    .cvb-icon { width: 28px; height: 28px; }
    .cvb-next { padding: 7px 10px; font-size: 11.5px; }
    .cvb-deck { font-size: 10.5px; padding: 5px 6px; }
    .wc-word { font-size: 17px; }
    .wc-act { font-size: 10.5px; padding: 5px 6px; }
}
@media (prefers-reduced-motion: reduce) {
    .cvb-sheet { animation: none; }
    .cvb-exit, .cvb-icon, .cvb-next, .cvb-deck, .cvb-rate, .wc-act, .wc-card { transition: none; }
}

/* ============================================================
   单词详情（加厚版）· 第 5 窗口第三批
   前缀 vd-*；与整理页同一套弹层口径：fixed 铺满视口 + 内容限宽居中（禁 absolute 挂可滚动面板）
   ============================================================ */
/* ★ W5（甲方 2028-09-28 第 6 条）：这一层现在挂在 `#app` 里（见 `ecMountOverlay`）——
   为什么必须这么做：外文面板是 `.nest-sub-panel.fullscreen`，它带着 transform，
   于是里面任何 `position:fixed` 都拿**那个面板的内容盒**当包含块（跑偏、被裁）。
   挂到 `#app`（`position:fixed` 且没有 transform）以后这里才是真的「铺满屏幕」。
   两处跟着改：①自己限宽居中（`#app` 是限宽容器，弹层铺满它即可，桌面上仍然只占 480）；
             ②z-index 65 → 1700（全屏面板是 1500，65 会钻到面板底下去）。 */
.vd-overlay {
    position: fixed; inset: 0; z-index: 1700;
    max-width: 480px; margin: 0 auto;
    display: flex; align-items: flex-end; justify-content: center;
    background: rgba(30, 28, 26, 0.34);
    opacity: 0; transition: opacity .2s ease;
    overscroll-behavior: contain;                 /* 详情页开着时，滚到头也不把滑动传给底下 */
}
.vd-overlay.show { opacity: 1; }
.vd-card {
    width: 100%; max-width: 448px;
    max-height: calc(100vh - 40px); max-height: calc(100dvh - 40px);
    display: flex; flex-direction: column;
    background: var(--bg-primary, #F8F4EF);
    border-radius: 22px 22px 0 0;
    box-shadow: 0 -10px 34px rgba(0, 0, 0, 0.16);
    transform: translateY(16px); transition: transform .26s cubic-bezier(.22,.61,.36,1);
}
.vd-overlay.show .vd-card { transform: translateY(0); }
.vd-head {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 14px; border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    flex-shrink: 0;
}
.vd-close {
    width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid rgba(201, 168, 168, 0.3); background: transparent;
    color: var(--rose); cursor: pointer; -webkit-tap-highlight-color: transparent;
    transition: background .16s ease, transform .1s ease;
}
.vd-close:hover { background: var(--rose-light, rgba(201,168,168,.12)); }
.vd-close:active { transform: scale(0.92); }
.vd-head-title {
    font-family: var(--font-display); font-style: italic; font-size: 13px; color: var(--text-secondary);
}
.vd-body {
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    /* ★ 2026-09-27：滚动条槽常驻 —— 这一页内容长短差别很大（有的词只有一条例句、
       有的带搭配/同义词/补充例句），系统滚动条一会儿出现一会儿消失会让**整页宽度变一下**
       （那正是甲方原文第 4 条说的「右边有一个系统滑动栏，导致页面被压缩一下」）。
       把槽一直留着：有没有滚动条都不改宽度。 */
    scrollbar-gutter: stable;
    padding: 16px 18px calc(24px + var(--safe-bottom, 0px));
}
.vd-loading, .vd-empty {
    font-family: var(--font-body); font-size: 13px; color: var(--text-secondary);
    text-align: center; padding: 28px 10px; line-height: 1.8;
}
.vd-word-row { display: flex; align-items: flex-end; gap: 12px; }
/* 词性（★ 原文第 9 条：这一页从前根本没有词性那一块）。
   做成紧跟在音标下面的一个小签：数据本来就有（每本内置词书 pos 字段都在），
   只是从来没画出来 —— 于是她看到的是「有的词有、有的词没有」。 */
.vd-pos {
    display: inline-block; margin-top: 8px; padding: 1px 8px;
    border: 1px solid rgba(201,168,168,0.42); border-radius: 999px;
    font-family: var(--font-display); font-style: italic;
    font-size: 11.5px; line-height: 1.8; color: var(--rose);
}
.vd-word {
    font-family: var(--font-display); font-size: 30px; font-weight: 700;
    color: var(--text-primary); line-height: 1.15; word-break: break-word;
}
.vd-speak-row { display: flex; gap: 8px; flex-shrink: 0; padding-bottom: 4px; }
.vd-speak {
    display: flex; align-items: center; gap: 6px;
    padding: 8px 12px; border-radius: 12px;
    border: 1px solid rgba(201, 168, 168, 0.4); background: transparent;
    color: var(--rose); font-family: var(--font-body); font-size: 12px;
    cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
    transition: background .16s ease, transform .1s ease;
}
.vd-speak:hover { background: var(--rose-light, rgba(201,168,168,.12)); }
.vd-speak:active { transform: scale(0.95); }
.vd-speak.his { border-color: rgba(184, 168, 196, 0.5); color: #8E7CA0; }
.vd-speak.his:hover { background: rgba(184, 168, 196, 0.12); }
.vd-phonetic {
    font-family: var(--font-body); font-size: 13px; color: var(--text-muted);
    margin-top: 6px; letter-spacing: 0.2px;
}
.vd-meta { font-family: var(--font-body); font-size: 11.5px; color: var(--text-muted); margin-top: 4px; }
.vd-diff {
    padding: 1px 7px; border-radius: 8px; background: rgba(196, 168, 106, 0.16);
    color: var(--gold-dark, #A89050); font-size: 11px;
}
.vd-sec {
    margin-top: 18px; padding-top: 14px;
    border-top: 1px solid rgba(0, 0, 0, 0.055);
}
/* 厚字段那一块单独标一下：补全之后只重画它（界面按这个类名找它） */
.vd-enrich { scroll-margin-top: 8px; }
.vd-sec-title {
    display: flex; align-items: baseline; gap: 8px;
    font-family: var(--font-body); font-size: 12.5px; font-weight: 600;
    color: var(--rose); letter-spacing: 0.4px; margin-bottom: 8px;
}
.vd-sec-note {
    font-family: var(--font-body); font-weight: 400; font-size: 11px; color: var(--text-muted);
}
.vd-sec-body, .vd-def, .vd-scene {
    font-family: var(--font-body); font-size: 13.5px; line-height: 1.85; color: var(--text-primary);
}
.vd-def { font-family: var(--font-reading, var(--font-body)); font-size: 14px; color: var(--text-primary); }
.vd-scene { font-size: 12.5px; color: var(--text-secondary); margin-top: 6px; }
/* ★ 甲方第 3 条：「常用处」与「短语常见搭配」从前混在同一段里（搭配只顶着一行小字
   「搭配」，看着像释义的附庸）。现在各自成块，块标题比这一节的大标题轻一档。 */
.vd-block { margin-top: 12px; }
.vd-block:first-child { margin-top: 0; }
.vd-block-title {
    font-family: var(--font-body); font-size: 11.5px; font-weight: 600;
    color: var(--text-secondary); letter-spacing: 0.3px; margin-bottom: 6px;
}
.vd-none {
    font-family: var(--font-body); font-size: 12.5px; color: var(--text-muted); line-height: 1.8;
}
.vd-chip-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.vd-chip-label {
    font-family: var(--font-body); font-size: 11px; color: var(--text-muted); margin-right: 2px;
}
.vd-chip {
    padding: 4px 10px; border-radius: 10px;
    background: rgba(201, 168, 168, 0.14); color: var(--text-primary);
    font-family: var(--font-body); font-size: 12px;
}
.vd-chip.sage { background: rgba(168, 184, 160, 0.18); }
.vd-chip.lav { background: rgba(184, 168, 196, 0.16); }
/* ★ W5（甲方 2028-09-28 第 10 条）：搭配改成一条一行（原因是它本来就带着例句，
   塞进小签里摆不下、也没法读）。一条一条像目录那样列出来，与全站「层级靠字号字重颜色」同一套语言。 */
.vd-collocs { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; }
.vd-colloc {
    padding: 8px 0 9px; border-bottom: 1px solid rgba(0, 0, 0, 0.045);
}
.vd-colloc:last-child { border-bottom: 0; }
.vd-colloc-t {
    font-family: var(--font-reading, var(--font-body)); font-size: 13.5px; font-weight: 600;
    color: var(--text-primary); line-height: 1.7; word-break: break-word;
}
.vd-colloc-ex {
    font-family: var(--font-reading, var(--font-body)); font-size: 12.5px;
    color: var(--text-secondary); line-height: 1.75; margin-top: 3px;
}
.vd-colloc-ex-zh { font-family: var(--font-body); font-size: 11.5px; color: var(--text-muted); margin-top: 2px; }
.vd-ex {
    position: relative; padding: 8px 34px 8px 0; margin-bottom: 4px;
}
.vd-ex-en { font-family: var(--font-reading, var(--font-body)); font-size: 13.5px; color: var(--text-primary); line-height: 1.7; }
.vd-ex-zh { font-family: var(--font-body); font-size: 12px; color: var(--text-muted); margin-top: 3px; }
.vd-ex-play {
    position: absolute; right: 0; top: 8px; width: 26px; height: 26px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid rgba(201, 168, 168, 0.34); background: transparent; color: var(--rose);
    cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background .16s ease, transform .1s ease;
}
.vd-ex-play:hover { background: var(--rose-light, rgba(201,168,168,.12)); }
.vd-ex-play:active { transform: scale(0.92); }
.vd-notes {
    width: 100%; box-sizing: border-box; min-height: 84px; resize: vertical;
    padding: 12px 14px; border-radius: 14px;
    border: 1px solid rgba(201, 168, 168, 0.3); background: var(--bg-chat, #FCFAF6);
    color: var(--text-primary); font-family: var(--font-body); font-size: 14px; line-height: 1.7;
    outline: none; transition: border-color .18s ease, box-shadow .18s ease;
}
.vd-notes::placeholder { color: var(--text-muted); }
.vd-notes:focus { border-color: var(--rose); box-shadow: 0 0 0 3px rgba(201, 168, 168, 0.14); }
.vd-notes-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 10px; }
.vd-notes-hint { font-family: var(--font-body); font-size: 11px; color: var(--text-muted); line-height: 1.6; flex: 1; min-width: 140px; }
.vd-btn {
    padding: 10px 16px; border-radius: 13px;
    border: 1px solid rgba(201, 168, 168, 0.4); background: transparent;
    color: var(--rose); font-family: var(--font-body); font-size: 13px;
    cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
    transition: background .16s ease, transform .1s ease;
}
.vd-btn:hover { background: var(--rose-light, rgba(201,168,168,.12)); }
.vd-btn:active { transform: scale(0.97); }
.vd-btn.primary { background: var(--rose); border-color: var(--rose); color: #fff; }
.vd-btn.primary:hover { background: var(--rose-hover); border-color: var(--rose-hover); }
.vd-btn[disabled] { opacity: 0.6; cursor: default; }
.vd-twins { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-family: var(--font-body); font-size: 12.5px; color: var(--text-secondary); line-height: 1.9; }
.vd-twin {
    padding: 4px 10px; border-radius: 10px; border: 1px solid rgba(201, 168, 168, 0.36);
    background: transparent; color: var(--rose); font-family: var(--font-body); font-size: 12px;
    cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background .16s ease;
}
.vd-twin:hover { background: var(--rose-light, rgba(201,168,168,.12)); }
.vd-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.vd-stat {
    background: var(--surface-solid, #fff); border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 12px; padding: 10px 6px; text-align: center;
}
.vd-stat b { display: block; font-family: var(--font-display); font-size: 16px; color: var(--text-primary); }
.vd-stat span { display: block; font-family: var(--font-body); font-size: 10.5px; color: var(--text-muted); margin-top: 3px; }
.vd-next { font-family: var(--font-body); font-size: 11.5px; color: var(--text-muted); margin-top: 8px; }

/* ============================================================
   找词 + 老错的词 · 第 5 窗口第三批（前缀 vsea-*）
   ============================================================ */
.vsea { padding: 12px 16px calc(28px + var(--safe-bottom, 0px)); }
.vsea-bar {
    display: flex; align-items: center; gap: 9px;
    padding: 11px 14px; border-radius: 15px;
    background: var(--surface-solid, #fff); border: 1px solid rgba(201, 168, 168, 0.26);
    transition: border-color .18s ease, box-shadow .18s ease;
}
.vsea-bar:focus-within { border-color: var(--rose); box-shadow: 0 0 0 3px rgba(201, 168, 168, 0.13); }
.vsea-ico { color: var(--text-muted); flex-shrink: 0; }
.vsea-input {
    flex: 1; min-width: 0; border: none; background: transparent; outline: none;
    color: var(--text-primary); font-family: var(--font-body); font-size: 15px;
}
.vsea-input::placeholder { color: var(--text-muted); }
.vsea-input::-webkit-search-cancel-button { display: none; -webkit-appearance: none; }
.vsea-clear {
    width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    border: none; background: rgba(0, 0, 0, 0.06); color: var(--text-secondary);
    cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.vsea-clear:active { transform: scale(0.9); }
.vsea-chips { display: flex; align-items: center; gap: 10px; margin: 12px 2px 4px; }
.vsea-chip {
    padding: 7px 14px; border-radius: 12px;
    border: 1px solid rgba(201, 168, 168, 0.4); background: transparent;
    color: var(--rose); font-family: var(--font-body); font-size: 12.5px;
    cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
    transition: background .16s ease, color .16s ease, transform .1s ease;
}
.vsea-chip:hover { background: var(--rose-light, rgba(201,168,168,.12)); }
.vsea-chip:active { transform: scale(0.96); }
.vsea-chip.on { background: var(--rose); border-color: var(--rose); color: #fff; }
.vsea-hint { font-family: var(--font-body); font-size: 11px; color: var(--text-muted); }
.vsea-list { margin-top: 10px; }
.vsea-count { font-family: var(--font-body); font-size: 11.5px; color: var(--text-muted); padding: 6px 2px 10px; }
.vsea-loading, .vsea-empty {
    font-family: var(--font-body); font-size: 13px; color: var(--text-secondary);
    line-height: 1.9; padding: 22px 4px; text-align: left;
}
.vsea-empty b { color: var(--text-primary); font-weight: 600; display: block; margin-bottom: 4px; }
.vsea-rows { display: flex; flex-direction: column; gap: 8px; }
.vsea-row {
    display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
    padding: 12px 14px; border-radius: 14px;
    background: var(--surface-solid, #fff); border: 1px solid rgba(0, 0, 0, 0.05);
    cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
    transition: border-color .18s ease, transform .1s ease, box-shadow .18s ease;
}
.vsea-row:hover { border-color: rgba(201, 168, 168, 0.36); box-shadow: var(--shadow-xs, 0 1px 3px rgba(0,0,0,.04)); }
.vsea-row:active { transform: scale(0.985); }
.vsea-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.vsea-row-word { font-family: var(--font-display); font-size: 15.5px; font-weight: 600; color: var(--text-primary); }
.vsea-row-ph { font-family: var(--font-body); font-size: 10.5px; color: var(--text-muted); }
.vsea-row-zh { font-family: var(--font-body); font-size: 12.5px; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vsea-row-def { font-family: var(--font-reading, var(--font-body)); font-size: 11.5px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vsea-row-note { font-family: var(--font-body); font-size: 11.5px; color: var(--rose); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vsea-row-side { display: flex; align-items: center; gap: 7px; flex-shrink: 0; color: var(--text-muted); }
.vsea-tier { font-family: var(--font-body); font-size: 10.5px; color: var(--text-secondary); }
.vsea-wrong {
    font-family: var(--font-body); font-size: 10.5px; color: #A8544C;
    background: rgba(168, 84, 76, 0.1); padding: 2px 7px; border-radius: 8px;
}

/* 暗色模式 */
[data-theme-mode="dark"] .vd-card { background: var(--bg-primary); }
[data-theme-mode="dark"] .vd-stat,
[data-theme-mode="dark"] .vsea-bar,
[data-theme-mode="dark"] .vsea-row { background: var(--surface-solid); border-color: rgba(255,255,255,0.05); }
[data-theme-mode="dark"] .vd-notes { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.08); }
[data-theme-mode="dark"] .vd-sec { border-top-color: rgba(255,255,255,0.06); }
[data-theme-mode="dark"] .vd-head { border-bottom-color: rgba(255,255,255,0.06); }

/* 窄屏（<370px） */
@media (max-width: 369px) {
    .vd-body { padding: 14px 14px calc(20px + var(--safe-bottom, 0px)); }
    .vd-word { font-size: 26px; }
    .vd-stats { grid-template-columns: repeat(2, 1fr); }
    .vd-speak { padding: 7px 10px; font-size: 11.5px; }
    .vsea { padding: 10px 12px calc(24px + var(--safe-bottom, 0px)); }
    .vsea-input { font-size: 14px; }
    .vsea-row-word { font-size: 14.5px; }
}
/* 减少动态效果 */
@media (prefers-reduced-motion: reduce) {
    .vd-overlay, .vd-card { transition: opacity .12s linear; transform: none; }
    .vd-overlay.show .vd-card { transform: none; }
}