/* ===== 阿拉伯语学习平台样式 ===== */
/* RTL support for Arabic */

/* 移动端 WebView/触屏：去除点击时系统默认的蓝色高亮蒙层（不做其他着色） */
* {
    -webkit-tap-highlight-color: transparent;
}

:root {
    --primary: #1a6b4f;
    --primary-light: #2d9d6f;
    --primary-dark: #0f4a35;
    --secondary: #c8a45a;
    --secondary-light: #e0c078;
    --accent: #d4432a;
    --bg-primary: #e9efe6;
    --bg-secondary: rgba(244, 241, 232, 0.72);
    --bg-card: rgba(255, 255, 255, 0.55);
    --text-primary: #1a1a2e;
    --text-secondary: #4a4a6a;
    --text-muted: #8a8aa0;
    --border: rgba(224, 216, 200, 0.6);
    --shadow: 0 2px 16px rgba(26, 107, 79, 0.08);
    --shadow-lg: 0 8px 32px rgba(26, 107, 79, 0.12);
    --radius: 12px;
    --radius-sm: 8px;
    --radius-lg: 20px;
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    /* 阿语：Noto Naskh Arabic 已自托管（css/fonts.css），后面是系统回退 */
    --arabic-font: 'Noto Naskh Arabic', 'Traditional Arabic', 'Amiri', 'Segoe UI', serif;
    /* 中文：不再自托管 CJK 字形（体积原因），改走系统黑体栈；
       注意 css/fonts.css 里仍保留了 Noto Sans SC 的拉丁字形分片，英/西语正文仍用它的 latin 字形 */
    --cn-font: 'Noto Sans SC', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei',
               'Noto Sans CJK SC', 'Source Han Sans SC', sans-serif;
    /* 毛玻璃参数 */
    --glass-blur: blur(18px) saturate(150%);
    --glass-edge: rgba(255, 255, 255, 0.65);
    --glass-shadow: 0 8px 32px rgba(31, 58, 47, 0.10);
    /* 阅读页类纸配色 */
    --paper-bg: #f6f2e7;
    --paper-card: #fffdf6;
    --paper-border: #e6ddc6;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    /* 毛玻璃底：柔和的浅绿米色渐变，让磨砂卡片有内容可透 */
    background: linear-gradient(165deg, #d9e8dc 0%, #edf1e2 45%, #e4ebe3 100%) fixed;
}

body {
    font-family: var(--cn-font);
    background: transparent;
    color: var(--text-primary);
    min-height: 100vh;
    line-height: 1.7;
    direction: ltr;
    position: relative;
}

/* 背景装饰光斑：玻璃质感的颜色来源（不响应鼠标，位于最底层） */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(440px 440px at 12% 16%, rgba(45, 157, 111, 0.22), transparent 70%),
        radial-gradient(520px 520px at 88% 10%, rgba(200, 164, 90, 0.20), transparent 70%),
        radial-gradient(480px 480px at 80% 86%, rgba(26, 107, 79, 0.16), transparent 70%),
        radial-gradient(380px 380px at 20% 90%, rgba(151, 191, 163, 0.26), transparent 70%);
}

/* Arabic text */
.arabic {
    font-family: var(--arabic-font);
    direction: rtl;
    unicode-bidi: embed;
}

/* ===== 顶部悬浮导航 ===== */
.main-header {
    position: fixed;
    top: 16px;
    left: 0;
    right: 0;
    z-index: 1000;
    display: flex;
    justify-content: center;
    padding: 0 16px;
    pointer-events: none;
}

.main-nav {
    pointer-events: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 8px 12px;
    /* v4.3（b9）：宽屏显示全部菜单项；窄屏 / 手机布局恒一行 + 固定保留 3 项 + ▾ 抽屉
       （见下方「顶部菜单：固定保留 3 项 + ▾ 抽屉」区块，那里是窄屏分支的 nowrap 覆盖）。
       宽屏允许折行：769~900px 的单行装不下 10 项，折行远好过被 overflow 裁掉（裁掉＝点不到）。
       折行以改用时 .main-nav 被压到容器宽，justify-content:center 让第二行居中更好看。 */
    flex-wrap: wrap;
    overflow: hidden;
    background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 50%, var(--primary-light) 100%);
    color: white;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.18);
    box-shadow: var(--shadow-lg);
    backdrop-filter: blur(8px);
}

.nav-link {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 999px;
    color: rgba(255,255,255,0.85);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    transition: var(--transition);
}

.nav-link:hover {
    background: rgba(255,255,255,0.15);
    color: white;
}

.nav-link.active {
    background: white;
    color: var(--primary);
    font-weight: 600;
}

/* 导航徽标（错题集待掌握数量）：红色小药丸，数字变化时轻微放大 */
.nav-badge {
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: #e5484d;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}

.nav-badge.pop {
    animation: navBadgePop 0.32s ease;
}

@keyframes navBadgePop {
    0% { transform: scale(1); }
    45% { transform: scale(1.35); }
    100% { transform: scale(1); }
}

/* ===== 顶部菜单：固定保留 3 项 + ▾ 抽屉（逻辑见 js/nav-overflow.js）=====
   窄屏不再做「溢出检测」：固定保留 首页/背单词/设置 三项，其余 7 项整批进 ▾ 抽屉；
   宽屏显示全部、不显示 ▾。
   ⚠ 保留名单（下面两处 :not([data-page="..."]) 与 body.device-phone 那两处）
     必须与 js/nav-overflow.js 顶部的 KEEP 数组保持一致，改名单要两处同改。
   可见性全部由 CSS 决定（无首帧闪烁、无 resize 重算）。 */
.nav-more {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    padding: 0;
    display: none; /* 宽屏隐藏；窄屏 / 手机布局下由下面两条规则显示 */
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    font-size: 15px;
    cursor: pointer;
    transition: transform 0.18s ease, background 0.3s ease;
}
.nav-more.open { transform: rotate(180deg); background: rgba(255, 255, 255, 0.3); }
.nav-more:hover { background: rgba(255, 255, 255, 0.3); }

/* 抽屉浮层：.main-nav 的兄弟节点（nav 有 overflow:hidden 不能做父容器），
   锚定 fixed 的 .main-header → 滚动/缩放自动跟随；实色深绿，保证任何背景上可读。
   收起态用 opacity + visibility + pointer-events（不用 display:none，否则无法过渡）；
   pointer-events 必须显式写 auto —— .main-header 是 pointer-events:none，
   该属性会被子元素继承，不覆盖的话抽屉整体不参与命中测试，点了没反应。 */
.nav-drop {
    position: absolute;
    top: calc(100% + 6px);
    right: 16px;
    min-width: 168px;
    max-height: calc(100vh - 90px); /* 横屏 / 小屏可滚动，不顶出视口 */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
    padding: 6px;
    background: linear-gradient(135deg, #0f4a35 0%, #14523c 60%, #1a6b4f 100%);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 14px;
    box-shadow: 0 14px 40px rgba(15, 74, 53, 0.35);
    z-index: 1001;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transform-origin: top;
    transition: transform 200ms cubic-bezier(0.2, 0, 0, 1), opacity 150ms, visibility 0s linear 200ms;
}
.nav-drop.open {
    pointer-events: auto;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: transform 200ms cubic-bezier(0.2, 0, 0, 1), opacity 150ms, visibility 0s;
}
/* 下拉条目复用 .nav-link（navigateTo 的全局 active 同步直接生效），仅去药丸底/加过渡 */
.nav-drop .nav-link {
    width: 100%;
    padding: 9px 12px;
    border-radius: 9px;
    font-size: 14px;
    justify-content: flex-start;
    transform: none;
}
.nav-drop .nav-link:hover { transform: none; }

/* 窄屏（≤768px，沿用项目既有断点）：只留 3 个固定位，其余 7 项全进抽屉 */
@media (max-width: 768px) {
    .main-nav > .nav-link:not([data-page="home"]):not([data-page="vocablearn"]):not([data-page="settings"]) {
        display: none;
    }
    .nav-more { display: flex; }
}

/* 设置里选「手机布局」时同样是窄屏菜单（宽屏浏览器模拟手机也生效） */
body.device-phone .main-nav > .nav-link:not([data-page="home"]):not([data-page="vocablearn"]):not([data-page="settings"]) {
    display: none;
}
body.device-phone .nav-more { display: flex; }

/* 宽屏安全网：非手机布局且宽度 ≥769px 时，▾ 与抽屉一律不出现在渲染树里
   （窄屏开着抽屉时把窗口拉宽，不会残留浮层）。
   这里的 display:none 只用于该断点下的兜底，不参与开合动画路径。 */
@media (min-width: 769px) {
    body:not(.device-phone) .nav-more,
    body:not(.device-phone) .nav-drop { display: none; }
}

/* 极窄屏兜底：<380px 时隐藏 .nav-icon，见 README 待办 */

@media (prefers-reduced-motion: reduce) {
    /* 只关过渡，开合终态（transform / opacity / visibility）照常切换 */
    .nav-drop,
    .nav-drop.open { transition: none; }
    .nav-more { transition: none; }
}

/* ===== 主内容区 ===== */
.main-content {
    max-width: 1400px;
    margin: 0 auto;
    padding: 110px 24px 32px;
    min-height: calc(100vh - 60px);
}

.page-section {
    display: none;
    animation: fadeIn 0.4s ease;
}

.page-section.active {
    display: block;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.page-header {
    text-align: center;
    margin-bottom: 32px;
}

.page-header h2 {
    font-size: 32px;
    color: var(--primary);
    margin-bottom: 8px;
}

.page-header p {
    color: var(--text-muted);
    font-size: 15px;
}

/* ===== 首页 Hero ===== */
.hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    padding: 60px 0;
    position: relative;
}

/* 首页简洁版：居中单栏，无装饰图案 */
.hero-simple {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 72px 0 40px;
    gap: 0;
}

.hero-simple .hero-badge {
    margin-bottom: 16px;
    background: transparent;
    border: 1px solid var(--primary-light);
    color: var(--primary);
    padding: 4px 14px;
    font-size: 12px;
    letter-spacing: 2px;
}

.hero-simple .hero-title-ar {
    font-size: 44px;
}

.hero-simple .hero-title-cn {
    font-size: 17px;
    font-weight: 500;
    margin: 12px 0 28px;
}

/* 首页标题下一句名言（AI 生成，内置库兜底） */
.hero-quote {
    margin: 18px 0 6px;
    max-width: 640px;
    padding: 0 16px;
}
.hero-quote .hero-quote-text {
    font-size: 15px;
    color: var(--text-secondary, #666);
    line-height: 1.7;
    margin: 0;
}
.hero-quote .hero-quote-source {
    display: block;
    font-size: 12px;
    color: var(--text-muted, #999);
    margin-top: 4px;
}

.hero-simple .hero-stats {
    gap: 48px;
    margin-bottom: 32px;
}

.hero-simple .stat-num {
    font-size: 28px;
}

.hero-simple .hero-actions {
    justify-content: center;
}

.hero-pattern {
    position: absolute;
    top: -40px;
    right: -40px;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(26,107,79,0.08) 0%, transparent 70%);
    border-radius: 50%;
    z-index: -1;
}

.hero-badge {
    display: inline-block;
    background: linear-gradient(135deg, var(--secondary), var(--secondary-light));
    color: var(--primary-dark);
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 20px;
}

.hero-title-ar {
    font-family: var(--arabic-font);
    font-size: 56px;
    font-weight: 700;
    color: var(--primary);
    line-height: 1.3;
    direction: rtl;
}

.hero-title-cn {
    font-size: 24px;
    color: var(--text-secondary);
    margin-top: 8px;
    margin-bottom: 20px;
}

.hero-desc {
    font-size: 16px;
    color: var(--text-muted);
    margin-bottom: 32px;
}

.hero-stats {
    display: flex;
    gap: 40px;
    margin-bottom: 32px;
}

.stat-item {
    text-align: center;
}

.stat-num {
    display: block;
    font-size: 32px;
    font-weight: 700;
    color: var(--primary);
}

.stat-label {
    font-size: 13px;
    color: var(--text-muted);
}

.hero-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    border-radius: var(--radius);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    border: none;
    transition: var(--transition);
}

.btn-primary {
    background: linear-gradient(135deg, var(--primary), var(--primary-light));
    color: white;
    box-shadow: 0 4px 16px rgba(26,107,79,0.3);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(26,107,79,0.4);
}

.btn-secondary {
    background: var(--bg-card);
    color: var(--primary);
    border: 2px solid var(--primary);
}

.btn-secondary:hover {
    background: var(--primary);
    color: white;
}

.btn-tertiary {
    background: linear-gradient(135deg, var(--secondary), var(--secondary-light));
    color: var(--primary-dark);
}

.btn-tertiary:hover {
    transform: translateY(-2px);
}

.btn-outline {
    background: transparent;
    color: var(--primary);
    border: 2px solid var(--border);
}

.btn-outline:hover {
    border-color: var(--primary);
    background: rgba(26,107,79,0.05);
}

.btn-danger {
    background: var(--accent);
    color: white;
}

.hero-visual {
    display: flex;
    justify-content: center;
    align-items: center;
}

.arabic-calligraphy {
    display: flex;
    flex-direction: column;
    gap: 16px;
    text-align: center;
}

.calli-item {
    font-family: var(--arabic-font);
    font-size: 42px;
    font-weight: 700;
    color: var(--primary);
    opacity: 0.15;
    direction: rtl;
    padding: 12px 24px;
    border: 2px solid var(--primary);
    border-radius: var(--radius-lg);
    transition: var(--transition);
}

.calli-item:hover {
    opacity: 0.6;
    transform: scale(1.05);
}

/* ===== 功能卡片 ===== */
.features-section {
    padding: 0 0 40px;
}

.section-title {
    text-align: center;
    font-size: 20px;
    color: var(--text-primary);
    margin-bottom: 24px;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);   /* 主页 2×2 排版 */
    gap: 16px;
    max-width: 900px;
    margin: 0 auto;
}

/* 生词词组板块：生词 / 词组 页签 */
.vocabbook-tabs {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.vocabbook-tab {
    padding: 10px 26px;
    border-radius: var(--radius);
    border: 2px solid var(--border);
    background: var(--bg-card);
    color: var(--text-secondary);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.vocabbook-tab:hover {
    border-color: var(--primary-light);
    color: var(--primary);
}

.vocabbook-tab.active {
    background: linear-gradient(135deg, var(--primary), var(--primary-light));
    border-color: var(--primary);
    color: #fff;
    box-shadow: 0 4px 14px rgba(26, 107, 79, 0.25);
}

.vb-count {
    background: rgba(0, 0, 0, 0.12);
    border-radius: 10px;
    font-size: 12px;
    font-weight: 600;
    padding: 1px 8px;
}

.vocabbook-tab:not(.active) .vb-count {
    background: var(--bg-secondary);
    color: var(--text-muted);
}

.feature-card {
    background: var(--bg-card);
    border-radius: var(--radius);
    padding: 20px 16px;
    text-align: center;
    cursor: pointer;
    transition: var(--transition);
    border: 1px solid var(--border);
}

.feature-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
    border-color: var(--primary-light);
}

.feature-icon {
    font-size: 32px;
    margin-bottom: 10px;
}

.feature-card h4 {
    font-size: 16px;
    color: var(--primary);
    margin-bottom: 4px;
}

.feature-card p {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.5;
}

/* ===== 词汇学习页 ===== */
.vocab-tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 24px;
}

.vocab-tab {
    padding: 8px 20px;
    border-radius: 20px;
    border: 2px solid var(--border);
    background: var(--bg-card);
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition);
}

.vocab-tab:hover {
    border-color: var(--primary-light);
    color: var(--primary);
}

.vocab-tab.active {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
}

.vocab-controls {
    display: flex;
    gap: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.search-box {
    position: relative;
    flex: 1;
    min-width: 200px;
}

.search-box input {
    width: 100%;
    padding: 10px 40px 10px 16px;
    border: 2px solid var(--border);
    border-radius: var(--radius);
    font-size: 14px;
    background: var(--bg-card);
    transition: var(--transition);
}

.search-box input:focus {
    outline: none;
    border-color: var(--primary);
}

.search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
}

.vocab-filters {
    display: flex;
    gap: 8px;
}

.vocab-filters select {
    padding: 10px 16px;
    border: 2px solid var(--border);
    border-radius: var(--radius);
    font-size: 14px;
    background: var(--bg-card);
    cursor: pointer;
    transition: var(--transition);
}

.vocab-filters select:focus {
    outline: none;
    border-color: var(--primary);
}

.vocab-container {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    overflow: hidden;
}

.vocab-stats-bar {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 24px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border);
    font-size: 13px;
    color: var(--text-muted);
}

.progress-mini {
    flex: 1;
    height: 6px;
    background: var(--border);
    border-radius: 3px;
    overflow: hidden;
}

.progress-mini-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--primary), var(--primary-light));
    border-radius: 3px;
    transition: width 0.5s ease;
}

.vocab-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
    padding: 20px;
    max-height: 600px;
    overflow-y: auto;
}

.vocab-list::-webkit-scrollbar {
    width: 6px;
}

.vocab-list::-webkit-scrollbar-track {
    background: var(--bg-secondary);
}

.vocab-list::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 3px;
}

.vocab-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--bg-primary);
    border-radius: var(--radius);
    border: 1px solid transparent;
    cursor: pointer;
    transition: var(--transition);
}

.vocab-item:hover {
    border-color: var(--primary-light);
    background: white;
}

.vocab-item.status-known {
    border-right: 3px solid var(--primary);
}

.vocab-item.status-learning {
    border-right: 3px solid var(--secondary);
}

/* 词汇列表朗读按钮：与点按标记状态互不干扰 */
.vocab-speak-btn {
    margin-inline-start: auto;
    margin-left: auto;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 17px;
    line-height: 1;
    opacity: 0.75;
    transition: opacity 0.2s, transform 0.2s;
    flex-shrink: 0;
}

.vocab-speak-btn:hover {
    opacity: 1;
    transform: scale(1.15);
}

.flashcard-speak {
    margin: 10px auto 0;
    display: block;
    font-size: 22px;
    background: transparent;
    border: none;
    cursor: pointer;
}

/* 课文朗读按钮行 */
.passage-speak-row {
    text-align: left;
}

.vocab-item.status-unknown {
    border-right: 3px solid var(--text-muted);
}

.vocab-arabic {
    font-family: var(--arabic-font);
    font-size: 22px;
    font-weight: 700;
    color: var(--primary);
    direction: rtl;
    min-width: 100px;
}

.vocab-translit {
    font-size: 12px;
    color: var(--text-muted);
}

.vocab-meaning {
    flex: 1;
    font-size: 14px;
    color: var(--text-secondary);
}

.vocab-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* 学习模式切换 */
.study-modes {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 24px;
}

.study-mode-btn {
    padding: 10px 24px;
    border-radius: var(--radius);
    border: 2px solid var(--border);
    background: var(--bg-card);
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition);
}

.study-mode-btn.active {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
}

/* 卡片模式 */
.flashcard-container {
    max-width: 600px;
    margin: 32px auto;
    text-align: center;
}

.flashcard {
    width: 100%;
    height: 320px;
    perspective: 1000px;
    cursor: pointer;
    margin-bottom: 24px;
}

.flashcard-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.6s;
    transform-style: preserve-3d;
}

.flashcard.flipped .flashcard-inner {
    transform: rotateY(180deg);
}

.flashcard-front, .flashcard-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px;
    border: 2px solid var(--border);
}

.flashcard-front {
    background: linear-gradient(135deg, var(--bg-card), var(--bg-secondary));
}

.flashcard-back {
    background: linear-gradient(135deg, var(--primary), var(--primary-light));
    color: white;
    transform: rotateY(180deg);
}

.flashcard-arabic {
    font-family: var(--arabic-font);
    font-size: 56px;
    font-weight: 700;
    color: var(--primary);
    direction: rtl;
}

.flashcard-translit {
    font-size: 18px;
    color: var(--text-muted);
    margin-top: 12px;
}

.flashcard-meaning {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 16px;
}

.flashcard-example {
    font-family: var(--arabic-font);
    font-size: 20px;
    direction: rtl;
    opacity: 0.9;
}

.flashcard-example-cn {
    font-size: 14px;
    opacity: 0.7;
    margin-top: 8px;
}

.flashcard-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-bottom: 20px;
}

.fc-btn {
    padding: 10px 20px;
    border-radius: var(--radius);
    border: 2px solid var(--border);
    background: var(--bg-card);
    color: var(--text-secondary);
    cursor: pointer;
    transition: var(--transition);
}

.fc-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.fc-counter {
    font-size: 16px;
    color: var(--text-muted);
}

.flashcard-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
}

.fc-action-btn {
    padding: 10px 24px;
    border-radius: var(--radius);
    border: none;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
}

.fc-action-btn.forget {
    background: #fee2e2;
    color: #dc2626;
}

.fc-action-btn.learning {
    background: #fef3c7;
    color: #d97706;
}

.fc-action-btn.master {
    background: #d1fae5;
    color: #059669;
}

/* 测验模式 */
.quiz-container {
    max-width: 700px;
    margin: 32px auto;
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    padding: 32px;
    border: 1px solid var(--border);
}

.quiz-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.quiz-progress {
    flex: 1;
    margin-left: 20px;
}

.quiz-progress-bar {
    height: 8px;
    background: var(--bg-secondary);
    border-radius: 4px;
    overflow: hidden;
}

.quiz-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary), var(--primary-light));
    transition: width 0.3s ease;
}

.quiz-score {
    font-size: 18px;
    font-weight: 700;
    color: var(--primary);
}

.quiz-question {
    text-align: center;
    padding: 32px;
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    margin-bottom: 24px;
}

.quiz-arabic {
    font-family: var(--arabic-font);
    font-size: 48px;
    font-weight: 700;
    color: var(--primary);
    direction: rtl;
    margin-bottom: 8px;
}

.quiz-prompt {
    font-size: 14px;
    color: var(--text-muted);
}

.quiz-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.quiz-option {
    padding: 16px;
    border: 2px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-card);
    cursor: pointer;
    font-size: 15px;
    transition: var(--transition);
    text-align: center;
}

.quiz-option:hover {
    border-color: var(--primary-light);
    background: rgba(26,107,79,0.05);
}

.quiz-option.selected {
    border-color: var(--primary);
    background: rgba(26,107,79,0.1);
}

.quiz-option.correct {
    border-color: #059669;
    background: #d1fae5;
}

.quiz-option.wrong {
    border-color: #dc2626;
    background: #fee2e2;
}

.quiz-feedback {
    margin-top: 16px;
    padding: 16px;
    border-radius: var(--radius);
    text-align: center;
    font-weight: 600;
    display: none;
}

.quiz-feedback.correct {
    display: block;
    background: #d1fae5;
    color: #059669;
}

.quiz-feedback.wrong {
    display: block;
    background: #fee2e2;
    color: #dc2626;
}

.quiz-next-btn {
    display: block;
    margin: 20px auto 0;
    padding: 12px 32px;
    background: var(--primary);
    color: white;
    border: none;
    border-radius: var(--radius);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
}

.quiz-next-btn:hover {
    background: var(--primary-dark);
}

/* ===== 阅读练习页 ===== */
/* 真题板块：题型分类 tab */
.exam-type-tabs {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.exam-type-tab {
    padding: 10px 26px;
    border-radius: var(--radius);
    border: 2px solid var(--border);
    background: var(--bg-card);
    color: var(--text-secondary);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
}

.exam-type-tab:hover {
    border-color: var(--primary-light);
    color: var(--primary);
}

.exam-type-tab.active {
    background: linear-gradient(135deg, var(--primary), var(--primary-light));
    border-color: var(--primary);
    color: #fff;
    box-shadow: 0 4px 14px rgba(26, 107, 79, 0.25);
}

.exam-tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 20px;
}

.exam-tab {
    padding: 8px 20px;
    border-radius: 20px;
    border: 2px solid var(--border);
    background: var(--bg-card);
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition);
}

.exam-tab:hover {
    border-color: var(--secondary);
    color: var(--secondary);
}

.exam-tab.active {
    background: var(--secondary);
    border-color: var(--secondary);
    color: white;
}

.question-types {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 24px;
}

.qtype-btn {
    padding: 6px 16px;
    border-radius: 16px;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text-muted);
    font-size: 13px;
    cursor: pointer;
    transition: var(--transition);
}

.qtype-btn:hover, .qtype-btn.active {
    border-color: var(--primary);
    color: var(--primary);
}

.qtype-btn.active {
    background: rgba(26,107,79,0.1);
}

.exam-list {
    display: grid;
    gap: 12px;
}

.exam-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: var(--bg-card);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    cursor: pointer;
    transition: var(--transition);
}

.exam-item:hover {
    border-color: var(--primary-light);
    box-shadow: var(--shadow);
}

/* 行尾操作区（如泛读行的「语法解析 / 删除」按钮组） */
.exam-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.exam-info h4 {
    font-size: 16px;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.exam-meta {
    font-size: 13px;
    color: var(--text-muted);
}

.exam-badge {
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
}

.badge-tem4 {
    background: #dbeafe;
    color: #1d4ed8;
}

.badge-tem8 {
    background: #fce7f3;
    color: #be185d;
}

/* 答题面板 */
/* ===== 独立阅读界面 ===== */
.reading-view {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bg-primary);
    z-index: 2000;
    display: none;
    flex-direction: column;
}

.reading-view.show {
    display: flex;
}

.rv-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 20px;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.rv-back {
    background: none;
    border: none;
    font-size: 15px;
    cursor: pointer;
    color: var(--primary);
    font-weight: 600;
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    white-space: nowrap;
}

.rv-back:hover {
    background: var(--bg-secondary);
}

.rv-title {
    font-size: 18px;
    color: var(--primary);
    text-align: center;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rv-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.rv-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 24px 16px;
}

.rv-body {
    max-width: 820px;
    margin: 0 auto;
}

.rv-passage {
    margin-bottom: 24px;
}

.rv-passage .passage {
    margin-bottom: 0;
}

.rv-questions {
    margin-bottom: 8px;
}

/* ===== 题目区工具条（悬浮窗入口）===== */
.rv-questions-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 14px;
    margin-bottom: 12px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.rvq-label {
    font-size: 14px;
    font-weight: 700;
    color: var(--primary);
}

.rvq-hint {
    display: none;
    font-size: 12px;
    color: var(--text-muted);
}

.rv-questions.float-mode .rvq-hint {
    display: inline;
}

.rv-questions.float-mode .qf-toggle-btn {
    display: none;
}

.qf-toggle-btn {
    padding: 7px 14px;
    border: 1px solid var(--primary);
    border-radius: var(--radius-sm);
    background: rgba(26,107,79,0.08);
    color: var(--primary);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: var(--transition);
}

.qf-toggle-btn:hover {
    background: var(--primary);
    color: white;
}

/* ===== 题目悬浮窗（一页一题；可拖动/可缩放；固定定位，滚动页面不消失，仅叉号可关闭）===== */
.question-float {
    position: fixed;
    right: 24px;
    bottom: 24px;
    width: 520px;
    max-width: calc(100vw - 24px);
    max-height: 90vh;
    min-width: 320px;
    min-height: 200px;
    display: none;
    flex-direction: column;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 16px 48px rgba(0,0,0,0.22);
    z-index: 2500;
    overflow: hidden;
    resize: both; /* 右下角拖拽缩放，题目区随窗口自适应滚动 */
}

.qf-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 100%);
    color: white;
    flex-shrink: 0;
    cursor: move;
    user-select: none;
    touch-action: none; /* 触屏拖动时不被页面滚动干扰 */
}

.qf-title {
    flex: 1;
    font-size: 14px;
    font-weight: 700;
}

.qf-counter {
    font-size: 13px;
    opacity: 0.92;
    font-variant-numeric: tabular-nums;
}

.qf-close {
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 50%;
    background: rgba(255,255,255,0.18);
    color: white;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    transition: var(--transition);
}

.qf-close:hover {
    background: rgba(220,60,60,0.9);
}

/* 拖动悬浮窗期间：全局禁用文本选择，避免拖出一片选蓝 */
body.qf-dragging,
body.qf-dragging * {
    user-select: none !important;
}

.qf-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
}

.qf-body .question-item {
    margin: 0;
}

.qf-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 16px;
    background: var(--bg-secondary);
    border-top: 1px solid var(--border);
    flex-shrink: 0;
}

.qf-nav-btn {
    padding: 8px 18px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-card);
    color: var(--primary);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
}

.qf-nav-btn:hover:not(:disabled) {
    border-color: var(--primary);
    background: rgba(26,107,79,0.08);
}

.qf-nav-btn:disabled {
    opacity: 0.4;
    cursor: default;
}

.qf-progress {
    display: flex;
    gap: 5px;
}

.qf-progress i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--border);
    transition: var(--transition);
}

.qf-progress i.cur {
    background: var(--primary);
    transform: scale(1.2);
}

@media (max-width: 768px) {
    .question-float {
        right: 12px;
        left: 12px;
        bottom: 12px;
        width: auto;
        max-height: 66vh;
    }
}

.rv-translation {
    margin-top: 8px;
    padding: 20px;
    background: var(--bg-card);
    border-radius: var(--radius);
    border: 1px solid var(--border);
}

/* 全文翻译展开按钮 */
.trans-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--bg-secondary);
    color: var(--primary);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
}

.trans-toggle-btn:hover {
    border-color: var(--primary);
    background: rgba(26,107,79,0.08);
}

.full-translation {
    margin-top: 12px;
}

.rv-footer {
    display: flex;
    justify-content: center;
    gap: 12px;
    padding: 14px 20px;
    background: var(--bg-card);
    border-top: 1px solid var(--border);
    flex-shrink: 0;
}

/* 阅读页主体：左侧正文滚动 + 右侧临时生词本 */
.rv-main {
    flex: 1;
    display: flex;
    min-height: 0;
    position: relative;
}

/* ===== 阅读进度条（v4.6.2）=====
   通栏 3px，宽度按滚动完成度增长；无进度时整条隐藏（class "hide" 由 js/reading-progress.js 控制）。
   它放在 #readingView 与 .rv-main 之间（#readingView 是纵向 flex 容器），故必须 flex-shrink: 0，
   否则会被压成 0 高、整条看不见。 */
.rv-progress {
    height: 3px;
    flex-shrink: 0;
    background: transparent;
}

.rv-progress > i {
    display: block;
    height: 100%;
    width: 0;
    background: var(--primary);
    transition: width .25s ease;
}

.rv-progress.hide {
    display: none;
}

body.dark .rv-progress > i {
    background: var(--primary-light);
}

/* ===== 临时生词本侧栏（阅读页右侧）===== */
.temp-vocab-panel {
    width: 280px;
    flex-shrink: 0;
    background: var(--bg-card);
    border-left: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.temp-vocab-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border);
    font-size: 14px;
    font-weight: 600;
    color: var(--primary);
    flex-shrink: 0;
}

.temp-vocab-count {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 500;
}

.temp-vocab-empty {
    padding: 20px 16px;
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.6;
    display: none;
}

.temp-vocab-list {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
    min-height: 0;
}

.temp-vocab-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    margin-bottom: 6px;
    background: var(--bg-primary);
    transition: var(--transition);
}

.temp-vocab-item:hover {
    border-color: var(--primary-light);
}

.temp-vocab-info {
    flex: 1;
    min-width: 0;
    cursor: pointer;
}

.temp-vocab-ar {
    font-family: var(--arabic-font);
    font-size: 18px;
    font-weight: 700;
    color: var(--primary);
    direction: rtl;
    text-align: right;
    line-height: 1.3;
}

.temp-vocab-cn {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.temp-vocab-remove {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 13px;
    padding: 4px;
    border-radius: 4px;
    flex-shrink: 0;
}

.temp-vocab-remove:hover {
    background: var(--bg-secondary);
    color: #dc2626;
}

.temp-vocab-commit {
    margin: 8px;
    padding: 10px;
    background: linear-gradient(135deg, var(--primary), var(--primary-light));
    color: white;
    border: none;
    border-radius: var(--radius);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    flex-shrink: 0;
}

.temp-vocab-commit:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow);
}

/* 窄屏时临时生词本改为底部抽屉 */
@media (max-width: 860px) {
    .rv-main {
        flex-direction: column;
    }
    .temp-vocab-panel {
        width: 100%;
        border-left: none;
        border-top: 1px solid var(--border);
        max-height: 40%;
        flex: 0 0 auto;
    }
    .temp-vocab-list {
        max-height: 140px;
    }
}

/* ===== 划选词组弹窗 ===== */
.phrase-popover {
    position: fixed;
    z-index: 3000;
    width: 360px;
    max-width: calc(100vw - 24px);
    /* 注意：不可用 var(--bg-card)（55% 半透明）。弹窗悬浮在密集阿语正文上，
       半透明底会让正文透出来；下方液态玻璃与阅读页规则会提供磨砂/近实底覆盖 */
    background: rgba(255, 255, 255, 0.96);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    box-shadow: 0 8px 32px rgba(0,0,0,0.18);
    padding: 12px 14px;
    font-size: 14px;
    color: var(--text-secondary);
}

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

.pp-text {
    font-family: var(--arabic-font);
    font-size: 18px;
    font-weight: 700;
    color: var(--primary);
    direction: rtl;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pp-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 10px;
}

.pp-tab {
    flex: 1;
    padding: 7px 8px;
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-primary);
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition);
    text-align: center;
    white-space: nowrap;
}

.pp-tab:hover {
    border-color: var(--primary-light);
}

.pp-tab.active {
    border-color: var(--primary);
    background: var(--primary);
    color: #fff;
}

.pp-body {
    max-height: 260px;
    overflow-y: auto;
}

.pp-hint {
    color: var(--text-muted);
    font-size: 13px;
    text-align: center;
    padding: 8px 0;
}

.pp-line {
    font-size: 13px;
    line-height: 1.8;
    color: var(--text-primary);
    padding: 2px 0;
    word-break: break-word;
}

.pp-note {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed var(--border);
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.6;
}

/* 处理中已等待秒数 */
.pp-elapsed {
    margin-top: 6px;
    text-align: center;
    font-size: 12px;
    color: var(--text-muted);
}

.pp-add-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--border);
    font-size: 13px;
    color: var(--text-secondary);
}

.pp-add-row .wp-add {
    width: 26px;
    height: 26px;
    font-size: 16px;
}

/* ===== 右侧栏：临时生词本 + 临时词组本 上下布局 ===== */
.temp-panel-divider {
    height: 1px;
    background: var(--border);
    margin: 4px 0;
    flex-shrink: 0;
}

.temp-phrase-list {
    flex: 1 1 45%;
    min-height: 80px;
}

/* 侧栏分节（生词 / 词组）：桌面端生词节占弹性高度，手机端可折叠 */
.temp-section {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 0 0 auto;
}

#tempSectionVocab {
    flex: 1 1 55%;
    min-height: 100px;
}

.temp-section .temp-vocab-list {
    flex: 1;
    min-height: 0;
}

/* ===== 正文可点击单词 ===== */
.ar-word {
    cursor: pointer;
    border-bottom: 1px dashed rgba(26,107,79,0.45);
    border-radius: 3px;
    transition: background 0.15s;
    padding: 0 1px;
}

.ar-word:hover {
    background: rgba(26,107,79,0.12);
    border-bottom-color: var(--primary);
}

/* ===== 单词释义悬浮窗（AI）===== */
.word-popover {
    position: absolute;
    z-index: 3000;
    width: 300px;
    max-width: calc(100vw - 24px);
    background: var(--bg-card);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    box-shadow: 0 8px 32px rgba(0,0,0,0.18);
    padding: 12px 14px;
    font-size: 14px;
    color: var(--text-secondary);
    /* v5.8：内容长时在弹窗内部滚动（不再撑破屏幕）；页面本身保持可滚（只锁大浮层） */
    max-height: min(72vh, 560px);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.wp-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.wp-header-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}

.wp-add {
    width: 28px;
    height: 28px;
    border: 2px solid var(--primary);
    border-radius: 50%;
    background: var(--bg-card);
    color: var(--primary);
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
    padding: 0 0 2px 0;
}

.wp-add:hover {
    background: var(--primary);
    color: white;
}

.wp-add.added {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

.wp-word {
    font-family: var(--arabic-font);
    font-size: 20px;
    font-weight: 700;
    color: var(--primary);
    direction: rtl;
    text-align: right;
}

.wp-close {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    font-size: 16px;
    padding: 2px 6px;
    border-radius: 4px;
}

.wp-close:hover {
    background: var(--bg-secondary);
}

.wp-loading {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-muted);
    padding: 6px 0;
}

.wp-error {
    color: #dc2626;
    font-size: 13px;
    padding: 4px 0;
}

.wp-row {
    display: flex;
    gap: 8px;
    margin-bottom: 6px;
    line-height: 1.5;
}

.wp-label {
    color: var(--text-muted);
    flex-shrink: 0;
    min-width: 42px;
    font-size: 13px;
}

.wp-value {
    color: var(--text-primary);
    font-size: 14px;
}

.wp-example {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed var(--border);
}

.wp-example-ar {
    font-family: var(--arabic-font);
    font-size: 15px;
    line-height: 1.8;
    color: var(--primary-dark);
    direction: rtl;
    text-align: right;
}

.wp-example-cn {
    font-size: 13px;
    color: var(--text-muted);
    margin-top: 4px;
    line-height: 1.5;
}

/* ===== 生词卡片 · 解析内容展开（v5.4）=====
 * 解析回来的长内容（用法/常用义/常见变形/衍生词）直接跟在短字段后面显示，
 * 小一号字、行高放宽、自动换行不截断；阿语块右对齐并保留完整发音符号。 */
.wp-sub {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed var(--border);
}

.wp-sub-label {
    color: var(--text-muted);
    font-size: 12px;
    margin-bottom: 3px;
}

.wp-sub-text {
    color: var(--text-primary);
    font-size: 13px;
    line-height: 1.7;
    white-space: pre-wrap;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.wp-sub-text[dir="rtl"] {
    font-family: var(--arabic-font);
    font-size: 14px;
    line-height: 1.9;
    text-align: right;
}

.wp-hint {
    margin-top: 8px;
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.5;
}

/* ===== 生词列表里的小字注记（v5.5）=====
 * 列表与侧栏只显示一个主词形（单数 / 过去式三单阳性），词条自带的多形、现在式、词根、
 * 遇到的形式与用法统一走这行小字；字号略小但行高放宽，保证小而不糊。 */
.temp-vocab-forms,
/* v5.6：列表行的小字可能有多段标签（阴性/复数/双数/又作/现在式/搭配），
   这里最多留两行并用省略号收尾（完整内容点开生词卡片看），避免整份列表被拉长。 */
.saved-vocab-forms {
    margin-top: 2px;
    font-size: 11.5px;
    line-height: 1.6;
    color: var(--text-muted);
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.saved-vocab-forms {
    font-size: 12px;
}

.wp-card-actions {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--border);
}

/* 生词详情 →「🔍 详细解析」按钮 */
.wp-detail-btn {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--primary);
    border-radius: 8px;
    background: transparent;
    color: var(--primary);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
}
.wp-detail-btn:hover {
    background: var(--primary);
    color: #fff;
}

/* 详细解析弹窗（study-overlay 内） */
.wd-block {
    background: var(--bg-secondary);
    border-radius: var(--radius);
    padding: 12px 14px;
    margin-bottom: 14px;
}
.wd-row {
    display: flex;
    gap: 8px;
    margin-bottom: 6px;
    line-height: 1.6;
}
.wd-label {
    color: var(--text-muted);
    flex-shrink: 0;
    min-width: 44px;
    font-size: 13px;
}
.wd-value {
    color: var(--text-primary);
    font-size: 14px;
    word-break: break-word;
}
.wd-group-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--primary);
    margin: 14px 0 8px;
}
.wd-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
.wd-table th,
.wd-table td {
    padding: 8px 10px;
    text-align: left;
    border: 1px solid var(--border);
    vertical-align: middle;
}
.wd-table thead th {
    background: var(--bg-secondary);
    color: var(--text-muted);
    font-weight: 600;
    font-size: 13px;
}
.wd-t-name {
    color: var(--text-secondary);
    white-space: nowrap;
}
.wd-t-ar {
    font-family: var(--arabic-font);
    font-size: 16px;
    color: var(--primary-dark);
    direction: rtl;
    text-align: right;
}
.wd-table tr:nth-child(even) td {
    background: var(--bg-card);
}

/* 词语衍生（词族/特殊形态） */
.wd-deriv-block {
    background: var(--bg-secondary);
}
.wd-deriv-table th:first-child,
.wd-deriv-table td:first-child {
    width: 38%;
}
.wd-deriv-cn {
    color: var(--text-primary);
    font-size: 13px;
    word-break: break-word;
}
.wd-deriv-table .wd-t-ar {
    font-size: 15px;
}
html[dir="ltr"] .wd-deriv-table .wd-t-ar {
    direction: ltr;
    text-align: left;
}
body.dark .wd-deriv-block {
    background: var(--bg-secondary);
}

/* 动词标准变位表（详细解析） */
.wd-cj-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 4px;
}
.wd-cj-table {
    width: 100%;
    min-width: 420px;
    border-collapse: collapse;
    font-size: 13px;
}
.wd-cj-table th,
.wd-cj-table td {
    padding: 7px 8px;
    border: 1px solid var(--border);
    text-align: center;
    vertical-align: middle;
}
.wd-cj-table thead th {
    background: var(--bg-secondary);
    color: var(--text-muted);
    font-weight: 600;
    font-size: 12px;
    white-space: nowrap;
}
.wd-cj-head1 th {
    border-bottom: none;
}
.wd-cj-head2 th {
    border-top: none;
    font-size: 11px;
}
.wd-cj-corner {
    background: var(--bg-secondary);
    color: var(--text-muted);
    font-weight: 600;
    font-size: 11px;
    white-space: nowrap;
    min-width: 62px;
}
.wd-cj-1p {
    color: var(--text-muted);
    font-weight: 400;
}
.wd-cj-num {
    background: var(--bg-secondary);
    color: var(--text-muted);
    font-size: 12px;
    white-space: nowrap;
    width: 62px;
}
.wd-cj-cell {
    font-family: var(--arabic-font);
    font-size: 15px;
    line-height: 1.5;
    color: var(--primary-dark);
    direction: rtl;
    min-width: 58px;
}
.wd-cj-dim {
    color: var(--text-muted);
    font-family: var(--cn-font);
    font-size: 12px;
}
.wd-cj-table tbody tr:nth-child(even) td {
    background: var(--bg-card);
}

/* 题目样式 */
.passage {
    background: var(--bg-secondary);
    border-radius: var(--radius);
    padding: 24px;
    margin-bottom: 24px;
    font-family: var(--arabic-font);
    font-size: 18px;
    line-height: 2;
    direction: rtl;
    text-align: justify;
}

/* AI 生成正文的自然段：段首缩进"空两格"（RTL 下 text-indent 自动作用于右侧起始边） */
.passage-para {
    text-indent: 2em;
    margin: 0 0 0.9em;
}

.passage-para:last-child {
    margin-bottom: 0;
}

.passage-translation {
    font-family: var(--cn-font);
    font-size: 14px;
    color: var(--text-muted);
    line-height: 1.8;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px dashed var(--border);
    direction: ltr;
    text-align: left;
}

.question-item {
    margin-bottom: 24px;
}

.question-text {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 12px;
    color: var(--text-primary);
}

.question-options {
    display: grid;
    gap: 8px;
}

.question-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border: 2px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
    transition: var(--transition);
}

.question-option:hover {
    border-color: var(--primary-light);
}

.question-option.selected {
    border-color: var(--primary);
    background: rgba(26,107,79,0.05);
}

.question-option.correct {
    border-color: #059669;
    background: #d1fae5;
}

.question-option.wrong {
    border-color: #dc2626;
    background: #fee2e2;
}

.option-marker {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
    flex-shrink: 0;
}

.question-option.selected .option-marker {
    border-color: var(--primary);
    background: var(--primary);
    color: white;
}

/* 每题旁边的「提交答案」「AI 解析」按钮 */
.question-actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}

.q-action-btn {
    padding: 6px 14px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition);
}

.q-action-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: rgba(26,107,79,0.05);
}

.explanation {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: var(--radius);
    padding: 16px;
    margin-top: 12px;
    font-size: 14px;
    display: none;
}

.explanation.show {
    display: block;
}

/* ===== AI 写作页 ===== */
.ai-layout {
    display: grid;
    grid-template-columns: 380px 1fr;
    gap: 24px;
    align-items: start;
}

.ai-config {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    padding: 24px;
    border: 1px solid var(--border);
    position: sticky;
    top: 90px;
}

.ai-config h3 {
    font-size: 18px;
    color: var(--primary);
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--bg-secondary);
}

.config-group {
    margin-bottom: 20px;
}

.config-group label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

/* 主题标签行：标签 + 🎲 随机按钮 */
.topic-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}
.topic-label-row label {
    margin-bottom: 0;
}
.topic-random-btn {
    padding: 3px 10px;
    border: 2px solid var(--border);
    border-radius: 999px;
    background: var(--bg-primary);
    color: var(--text-secondary);
    font-size: 12px;
    font-family: var(--cn-font);
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap;
}
.topic-random-btn:hover {
    border-color: var(--primary-light);
    color: var(--primary);
}

.config-group input[type="text"],
.config-group textarea,
.config-group select {
    width: 100%;
    padding: 10px 14px;
    border: 2px solid var(--border);
    border-radius: var(--radius);
    font-size: 14px;
    font-family: var(--cn-font);
    background: var(--bg-primary);
    transition: var(--transition);
}

.config-group input:focus,
.config-group textarea:focus,
.config-group select:focus {
    outline: none;
    border-color: var(--primary);
}

.difficulty-selector {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* AI 助手：模式切换标签 */
.ai-mode-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}

.ai-mode-tab {
    flex: 1;
    padding: 10px 12px;
    border: 2px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-primary);
    color: var(--text-secondary);
    font-size: 14px;
    cursor: pointer;
    transition: var(--transition);
    text-align: center;
}

.ai-mode-tab.active {
    border-color: var(--primary);
    background: var(--primary);
    color: #fff;
}

/* AI 生成卷标识 */
.ai-badge {
    background: #7c3aed;
    color: #fff;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    vertical-align: middle;
    white-space: nowrap;
}

/* AI 内容类型选择（阅读/完形/翻译/作文） */
.ai-type-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.ai-type-tab {
    padding: 10px 12px;
    border: 2px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-primary);
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition);
    text-align: center;
    white-space: nowrap;
}

.ai-type-tab:hover {
    border-color: var(--primary-light);
}

.ai-type-tab.active {
    border-color: var(--primary);
    background: var(--primary);
    color: #fff;
    font-weight: 600;
}

/* ===== 文章记录板块 ===== */
.article-record-list {
    display: grid;
    gap: 12px;
}

.article-record-empty {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-muted);
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    border: 1px dashed var(--border);
}

.article-record-empty .empty-icon {
    font-size: 48px;
    margin-bottom: 12px;
}

.article-record-empty p {
    font-size: 15px;
}

.article-record-empty .empty-hint {
    font-size: 13px;
    margin-top: 8px;
    line-height: 1.7;
}

.article-record-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px;
    background: var(--bg-card);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    transition: var(--transition);
}

.article-record-item:hover {
    border-color: var(--primary-light);
    box-shadow: var(--shadow);
}

.article-record-main {
    flex: 1;
    min-width: 0;
    cursor: pointer;
}

.article-record-main h4 {
    font-size: 16px;
    color: var(--text-primary);
    margin-bottom: 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.article-record-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    color: var(--text-muted);
    flex-wrap: wrap;
}

.article-type-badge {
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    background: #ede9fe;
    color: #6d28d9;
}

.article-record-actions {
    flex-shrink: 0;
}

.diff-btn {
    padding: 10px 16px;
    border: 2px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-primary);
    color: var(--text-secondary);
    font-size: 14px;
    cursor: pointer;
    transition: var(--transition);
    text-align: right;
}

.diff-btn:hover {
    border-color: var(--primary-light);
}

.diff-btn.active {
    border-color: var(--primary);
    background: rgba(26,107,79,0.1);
    color: var(--primary);
    font-weight: 600;
}

.config-group input[type="range"] {
    width: 100%;
    margin-bottom: 4px;
}

/* 完形填空固定题数选择（15/20） */
.cloze-count-selector {
    display: flex;
    gap: 8px;
}

.cloze-count-btn {
    flex: 1;
    padding: 10px 16px;
    border: 2px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-primary);
    color: var(--text-secondary);
    font-size: 14px;
    cursor: pointer;
    transition: var(--transition);
}

.cloze-count-btn:hover {
    border-color: var(--primary-light);
}

.cloze-count-btn.active {
    border-color: var(--primary);
    background: rgba(26,107,79,0.1);
    color: var(--primary);
    font-weight: 600;
}

#wordCountDisplay {
    font-size: 13px;
    color: var(--text-muted);
}

.btn-generate {
    width: 100%;
    padding: 14px;
    font-size: 16px;
    margin-top: 8px;
}

.api-status {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    font-size: 13px;
    color: var(--text-muted);
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #9ca3af;
}

.status-dot.connected {
    background: #059669;
}

/* AI 输出 */
.ai-output {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    overflow: hidden;
}

.output-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-secondary);
}

.output-header h3 {
    font-size: 16px;
    color: var(--text-primary);
}

.output-actions {
    display: flex;
    gap: 8px;
}

.action-btn {
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text-secondary);
    font-size: 13px;
    cursor: pointer;
    transition: var(--transition);
}

.action-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}
.action-btn:disabled:hover {
    border-color: var(--border);
    color: var(--text-secondary);
}

.action-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.output-content {
    min-height: 400px;
    padding: 32px;
}

.output-placeholder {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-muted);
}

.placeholder-icon {
    font-size: 64px;
    margin-bottom: 16px;
}

.placeholder-hint {
    font-size: 14px;
    margin-top: 8px;
}

.generated-article {
    font-family: var(--arabic-font);
    font-size: 20px;
    line-height: 2.2;
    direction: rtl;
    text-align: justify;
    color: var(--text-primary);
}

.generated-article .title {
    font-size: 24px;
    font-weight: 700;
    color: var(--primary);
    text-align: center;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 2px solid var(--bg-secondary);
}

.output-meta {
    padding: 16px 24px;
    border-top: 1px solid var(--border);
    font-size: 13px;
    color: var(--text-muted);
    display: flex;
    gap: 20px;
}

/* ===== 设置页 ===== */
.settings-layout {
    display: grid;
    /* min(360px, 100%)：窄屏（手机）下允许列宽收缩到容器宽度，防止横向溢出 */
    grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr));
    gap: 24px;
}

/* 网格子项允许收缩：长密钥/长地址在手机上换行显示而不是撑破布局 */
.settings-card,
.settings-card .setting-item,
.settings-card .api-key-input,
.settings-card .ai-record-main,
.settings-card .ai-record-model,
.settings-card .ai-record-meta {
    min-width: 0;
}

.settings-card .ai-record-model,
.settings-card .ai-record-meta {
    overflow-wrap: anywhere;
    white-space: normal;
}

.settings-card {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    padding: 24px;
    border: 1px solid var(--border);
}

.settings-card h3 {
    font-size: 18px;
    color: var(--primary);
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--bg-secondary);
}

.setting-item {
    margin-bottom: 20px;
}

.setting-item label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.api-key-input {
    display: flex;
    gap: 8px;
}

.api-key-input input {
    flex: 1;
    padding: 10px 14px;
    border: 2px solid var(--border);
    border-radius: var(--radius);
    font-size: 14px;
    font-family: monospace;
}

.api-key-input input:focus {
    outline: none;
    border-color: var(--primary);
}

.toggle-btn {
    padding: 10px 14px;
    border: 2px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-primary);
    cursor: pointer;
    font-size: 16px;
}

.setting-hint {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 6px;
}

.setting-status {
    margin-top: 12px;
    font-size: 14px;
    padding: 10px;
    border-radius: var(--radius);
}

.setting-status.success {
    background: #d1fae5;
    color: #059669;
}

.setting-status.error {
    background: #fee2e2;
    color: #dc2626;
}

/* ===== AI 配置记录 ===== */
.ai-config-records {
    display: grid;
    gap: 8px;
}

.ai-record-empty {
    font-size: 13px;
    color: var(--text-muted);
    background: var(--bg-primary);
    border: 1px dashed var(--border);
    border-radius: var(--radius);
    padding: 16px;
    line-height: 1.7;
    text-align: center;
}

.ai-record-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    transition: var(--transition);
}

.ai-record-item:hover {
    border-color: var(--primary-light);
}

.ai-record-item.current {
    border-color: var(--primary);
    background: rgba(26, 107, 79, 0.06);
}

.ai-record-main {
    flex: 1;
    min-width: 0;
    cursor: pointer;
}

.ai-record-model {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 6px;
}

.ai-record-badge {
    background: var(--primary);
    color: #fff;
    font-size: 11px;
    font-weight: 500;
    padding: 1px 8px;
    border-radius: 10px;
    white-space: nowrap;
}

.ai-record-meta {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ai-record-actions {
    flex-shrink: 0;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 20px;
}

.stat-box {
    background: var(--bg-secondary);
    border-radius: var(--radius);
    padding: 20px;
    text-align: center;
}

.stat-box .stat-num {
    font-size: 28px;
}

.about-content {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.8;
}

.about-content p {
    margin-bottom: 12px;
}

.version {
    font-size: 12px;
    color: var(--text-muted) !important;
}

/* ===== 生词板块（总生词本）===== */
.saved-vocab-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.bar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    /* v4.3.2 修复 ≤330px 极窄屏横向溢出：本行是 .saved-vocab-bar（flex-wrap:wrap）的 flex 子项，
       min-width 默认 auto 且自身原本不换行 → 一行按钮的 min-content（实测 330px）压不下去，
       会把文档撑宽（320px 视口下溢出 26px）。允许自身换行后 min-content 变成单个最宽按钮，随容器收缩。
       宽度足够时（≥360px）仍是一行，不改变现有观感。 */
    flex-wrap: wrap;
}

/* 导出下拉菜单（生词/词组） */
.export-dropdown {
    position: relative;
}

.export-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 150px;
    padding: 6px;
    display: none;
    flex-direction: column;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    z-index: 50;
}

.export-menu.open {
    display: flex;
}

.export-menu button {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    background: none;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    color: var(--text-primary);
    cursor: pointer;
    text-align: left;
    white-space: nowrap;
    transition: var(--transition);
}

.export-menu button:hover {
    background: rgba(26,107,79,0.08);
    color: var(--primary);
}

.saved-vocab-count {
    font-size: 14px;
    color: var(--text-muted);
}

.saved-vocab-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
}

.saved-vocab-empty {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-muted);
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    border: 1px dashed var(--border);
    grid-column: 1 / -1;
}

.saved-vocab-empty .empty-icon {
    font-size: 48px;
    margin-bottom: 12px;
}

.saved-vocab-empty p {
    font-size: 15px;
}

.saved-vocab-empty .empty-hint {
    font-size: 13px;
    margin-top: 8px;
    line-height: 1.7;
}

.saved-vocab-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    background: var(--bg-card);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    transition: var(--transition);
}

.saved-vocab-item:hover {
    border-color: var(--primary-light);
    box-shadow: var(--shadow);
}

/* 生词条目勾选框（用于选择生词让 AI 生成文章） */
.vocab-pick-chk {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    accent-color: var(--primary);
    cursor: pointer;
}

.saved-vocab-main {
    flex: 1;
    min-width: 0;
    cursor: pointer;
}

.saved-vocab-ar {
    font-family: var(--arabic-font);
    font-size: 22px;
    font-weight: 700;
    color: var(--primary);
    direction: rtl;
    text-align: right;
    line-height: 1.3;
}

.saved-vocab-cn {
    font-size: 13px;
    color: var(--text-secondary);
    margin-top: 3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.saved-vocab-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

.saved-vocab-speak,
.saved-vocab-del {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 15px;
    padding: 6px;
    border-radius: 6px;
    transition: var(--transition);
    opacity: 0.75;
}

.saved-vocab-speak:hover {
    opacity: 1;
    transform: scale(1.1);
    background: var(--bg-secondary);
}

.saved-vocab-del:hover {
    opacity: 1;
    background: #fee2e2;
}

/* ===== Toast 通知 ===== */
.toast-container {
    position: fixed;
    bottom: 24px;
    left: 24px;
    z-index: 3000;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.toast {
    padding: 12px 20px;
    border-radius: var(--radius);
    font-size: 14px;
    font-weight: 500;
    box-shadow: var(--shadow-lg);
    animation: toastIn 0.3s ease, toastOut 0.3s ease 2.7s forwards;
    display: flex;
    align-items: center;
    gap: 8px;
}

.toast.success {
    background: #059669;
    color: white;
}

.toast.error {
    background: #dc2626;
    color: white;
}

.toast.info {
    background: var(--primary);
    color: white;
}

@keyframes toastIn {
    from { opacity: 0; transform: translateX(-20px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes toastOut {
    from { opacity: 1; }
    to { opacity: 0; transform: translateY(10px); }
}

/* ===== 加载动画 ===== */
.loading-spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid rgba(255,255,255,0.3);
    border-radius: 50%;
    border-top-color: white;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ===== 响应式 ===== */
@media (max-width: 1024px) {
    .ai-layout {
        grid-template-columns: 1fr;
    }
    
    .ai-config {
        position: static;
    }
    
    .hero {
        grid-template-columns: 1fr;
        text-align: center;
    }
    
    .hero-stats {
        justify-content: center;
    }
    
    .hero-actions {
        justify-content: center;
    }
    
    .hero-visual {
        display: none;
    }
}

@media (max-width: 768px) {
    .main-header {
        top: 10px;
    }

    .main-nav {
        /* v4.3（b9）：窄屏恒一行——只留 首页/背单词/设置 3 项，其余 7 项进 ▾ 抽屉
           （哪 3 项保留由上面「固定保留 3 项 + ▾ 抽屉」区块的 :not([data-page]) 名单决定） */
        flex-wrap: nowrap;
        overflow: hidden;
        justify-content: flex-start;
        max-width: 100%;
        border-radius: 20px;
    }

    .nav-link {
        padding: 6px 12px;
        font-size: 13px;
    }

    .main-content {
        padding-top: 90px;
    }
    
    .hero-title-ar {
        font-size: 36px;
    }
    
    .quiz-options {
        grid-template-columns: 1fr;
    }
    
    .vocab-list {
        grid-template-columns: 1fr;
    }
    
    .settings-layout {
        grid-template-columns: 1fr;
    }
}

/* ===== 滚动条美化 ===== */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-secondary);
}

::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

/* ===== 毛玻璃 UI 主题 ===== */
/* 让主要卡片表面获得磨砂质感：半透明白 + 背景模糊 + 玻璃高光描边 */
.feature-card,
.exam-item,
.ai-config,
.ai-output,
.settings-card,
.saved-vocab-item,
.article-record-item,
.word-popover,
.phrase-popover,
.question-float,
.export-menu {
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-color: var(--glass-edge);
    box-shadow: var(--glass-shadow);
}

/* 顶部导航胶囊：深绿磨砂玻璃 */
.main-nav {
    background: linear-gradient(135deg, rgba(15, 74, 53, 0.68) 0%, rgba(26, 107, 79, 0.62) 50%, rgba(45, 157, 111, 0.56) 100%);
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    border: 1px solid rgba(255, 255, 255, 0.30);
    box-shadow: 0 8px 28px rgba(15, 74, 53, 0.28);
}

/* 输入类控件保持较高不透明度，保证可读性 */
.config-group input[type="text"],
.config-group textarea,
.config-group select,
.setting-item input,
.setting-item textarea,
.setting-item select,
.vocab-filters select {
    background: rgba(255, 255, 255, 0.8);
}

/* 设置页输入框补齐样式（原先为浏览器默认外观） */
.setting-item input,
.setting-item textarea,
.setting-item select {
    width: 100%;
    padding: 10px 14px;
    border: 2px solid var(--border);
    border-radius: var(--radius);
    font-size: 14px;
    font-family: var(--cn-font);
    color: var(--text-primary);
    transition: var(--transition);
}

.setting-item input:focus,
.setting-item textarea:focus,
.setting-item select:focus {
    outline: none;
    border-color: var(--primary-light);
}

/* ===== 阅读页：类纸模式（退出毛玻璃，护眼阅读）===== */
.reading-view {
    background: linear-gradient(180deg, #f2ecdc 0%, var(--paper-bg) 26%, #f8f4ea 100%);
}

.reading-view .rv-header {
    background: rgba(250, 247, 238, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--paper-border);
}

/* 正文纸面 */
.reading-view .passage {
    background: var(--paper-card);
    border: 1px solid var(--paper-border);
    box-shadow: 0 2px 12px rgba(90, 74, 40, 0.06);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.reading-view .rv-translation {
    background: var(--paper-card);
    border: 1px solid var(--paper-border);
    box-shadow: 0 2px 12px rgba(90, 74, 40, 0.06);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.reading-view .rv-questions-bar {
    background: var(--paper-card);
    border: 1px solid var(--paper-border);
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.reading-view .rv-footer {
    background: rgba(245, 240, 228, 0.94);
    border-top: 1px solid var(--paper-border);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* 右侧临时生词/词组栏：纸面侧栏 */
.reading-view .temp-vocab-panel {
    background: #f1ebdc;
    border-left: 1px solid var(--paper-border);
}

.reading-view .temp-vocab-header {
    background: rgba(233, 224, 202, 0.85);
    border-bottom: 1px solid var(--paper-border);
}

.reading-view .temp-vocab-item {
    background: var(--paper-card);
    border: 1px solid var(--paper-border);
}

/* 阅读页内选项与按钮：实底纸面 */
.reading-view .question-option {
    background: #fffef9;
}

.reading-view .q-action-btn,
.reading-view .trans-toggle-btn {
    background: #fffef9;
}

/* 阅读页内的悬浮窗与查词窗：磨砂纸玻璃 */
.reading-view .question-float {
    background: rgba(255, 253, 246, 0.88);
    border: 1px solid var(--paper-border);
    box-shadow: 0 16px 48px rgba(90, 74, 40, 0.18);
}

.reading-view .qf-footer {
    background: rgba(238, 231, 214, 0.92);
    border-top: 1px solid var(--paper-border);
}

.reading-view .qf-nav-btn {
    background: var(--paper-card);
}

.reading-view .word-popover {
    background: rgba(255, 253, 246, 0.94);
    border: 1px solid var(--paper-border);
    box-shadow: 0 8px 32px rgba(90, 74, 40, 0.16);
}

/* ===== 液态玻璃质感（Liquid Glass）===== */
/* 高透磨砂 + 顶部高光内描边 + 对角光泽渐变 + 柔和落影；文字与图标保持原样 */

/* 白色液态玻璃卡片 */
.feature-card,
.exam-item,
.ai-config,
.ai-output,
.settings-card,
.saved-vocab-item,
.article-record-item,
.word-popover,
.phrase-popover,
.question-float,
.export-menu {
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.60) 0%,
        rgba(255, 255, 255, 0.28) 45%,
        rgba(255, 255, 255, 0.45) 100%);
    backdrop-filter: blur(26px) saturate(180%);
    -webkit-backdrop-filter: blur(26px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.72);
    box-shadow:
        0 14px 40px rgba(31, 58, 47, 0.13),
        inset 0 1px 0 rgba(255, 255, 255, 0.95),
        inset 1px 0 0 rgba(255, 255, 255, 0.55),
        inset -1px 0 0 rgba(255, 255, 255, 0.55),
        inset 0 -1px 0 rgba(255, 255, 255, 0.30);
}

/* 导航胶囊：深绿液态玻璃 */
.main-nav {
    background: linear-gradient(135deg,
        rgba(15, 74, 53, 0.62) 0%,
        rgba(26, 107, 79, 0.50) 55%,
        rgba(45, 157, 111, 0.42) 100%);
    backdrop-filter: blur(26px) saturate(180%);
    -webkit-backdrop-filter: blur(26px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.38);
    box-shadow:
        0 14px 40px rgba(15, 74, 53, 0.30),
        inset 0 1px 1px rgba(255, 255, 255, 0.45),
        inset 0 -1px 1px rgba(255, 255, 255, 0.14),
        inset 1px 0 1px rgba(255, 255, 255, 0.16),
        inset -1px 0 1px rgba(255, 255, 255, 0.16);
}

/* 主按钮：绿色液态玻璃 */
.btn-primary {
    background: linear-gradient(135deg, rgba(26, 107, 79, 0.78) 0%, rgba(45, 157, 111, 0.58) 100%);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, 0.45);
    box-shadow:
        0 10px 26px rgba(15, 74, 53, 0.28),
        inset 0 1px 1px rgba(255, 255, 255, 0.50),
        inset 0 -1px 1px rgba(255, 255, 255, 0.16);
}

.btn-primary:hover {
    box-shadow:
        0 14px 32px rgba(15, 74, 53, 0.36),
        inset 0 1px 1px rgba(255, 255, 255, 0.55),
        inset 0 -1px 1px rgba(255, 255, 255, 0.20);
}

/* 次按钮：白色液态玻璃 */
.btn-secondary {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.72) 0%, rgba(255, 255, 255, 0.42) 100%);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, 0.78);
    box-shadow:
        0 8px 22px rgba(31, 58, 47, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.95),
        inset 0 -1px 0 rgba(255, 255, 255, 0.35);
}

.btn-secondary:hover {
    background: linear-gradient(135deg, rgba(26, 107, 79, 0.82) 0%, rgba(45, 157, 111, 0.66) 100%);
    border-color: rgba(255, 255, 255, 0.50);
}

/* 小型页签与按钮：轻液态磨砂 */
.vocabbook-tab,
.exam-tab,
.ai-type-tab,
.diff-btn,
.cloze-count-btn,
.qf-toggle-btn,
.action-btn {
    backdrop-filter: blur(14px) saturate(150%);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
}

/* 阅读页内保持类纸磨砂（不随液态玻璃主题变化） */
.reading-view .question-float {
    background: rgba(255, 253, 246, 0.88);
    border: 1px solid var(--paper-border);
    box-shadow: 0 16px 48px rgba(90, 74, 40, 0.18);
    backdrop-filter: blur(18px) saturate(130%);
    -webkit-backdrop-filter: blur(18px) saturate(130%);
}

.reading-view .word-popover {
    background: rgba(255, 253, 246, 0.94);
    border: 1px solid var(--paper-border);
    box-shadow: 0 8px 32px rgba(90, 74, 40, 0.16);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* 划选词组弹窗与单词弹窗同待遇：阅读页内用纸面近实底，杜绝正文透出 */
.reading-view .phrase-popover {
    background: rgba(255, 253, 246, 0.96);
    border: 1px solid var(--paper-border);
    box-shadow: 0 8px 32px rgba(90, 74, 40, 0.16);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* ===== 按钮互动特效 ===== */
/* 悬停轻微上浮（与首页大卡片一致），点击有小幅蹦跳 */
button,
.btn,
.nav-link,
.feature-card {
    transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

button:hover,
.btn:hover,
.nav-link:hover {
    transform: translateY(-2px);
}

/* 点击蹦跳动画（由 JS 挂 .boing 类触发） */
@keyframes btnBoing {
    0%   { transform: translateY(0) scale(1); }
    35%  { transform: translateY(-4px) scale(1.04); }
    65%  { transform: translateY(1px) scale(0.97); }
    100% { transform: translateY(0) scale(1); }
}

.boing {
    animation: btnBoing 0.38s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ===== 设备适配（设置页选择 手机/平板/电脑）===== */
.device-selector {
    display: flex;
    gap: 8px;
}

.device-btn {
    flex: 1;
    padding: 10px 12px;
    border: 2px solid var(--border);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.8);
    color: var(--text-secondary);
    font-size: 14px;
    cursor: pointer;
    transition: var(--transition);
}

.device-btn:hover {
    border-color: var(--primary-light);
    transform: translateY(-2px);
}

.device-btn.active {
    border-color: var(--primary);
    background: rgba(26, 107, 79, 0.1);
    color: var(--primary);
    font-weight: 600;
}

/* 手机布局：窄幅单列 */
body.device-phone .main-content {
    max-width: 480px;
    padding: 90px 16px 24px;
}

body.device-phone .main-nav {
    /* v4.3（b9）：手机布局同样恒一行 + 固定保留 3 项 + ▾ 抽屉（宽屏浏览器模拟手机也生效） */
    flex-wrap: nowrap;
    overflow: hidden;
    justify-content: flex-start;
    border-radius: 20px;
}

body.device-phone .nav-link {
    padding: 6px 12px;
    font-size: 13px;
}

body.device-phone .hero-title-ar {
    font-size: 34px;
}

body.device-phone .features-grid {
    grid-template-columns: 1fr;
}

body.device-phone .ai-layout,
body.device-phone .settings-layout {
    grid-template-columns: 1fr;
}

body.device-phone .ai-config {
    position: static;
}

body.device-phone .saved-vocab-list {
    /* v4.3.2 修复横向溢出：这里原来写的是裸 1fr（等价 minmax(auto, 1fr)），
       轨道最小值取网格项的 min-content；而 .saved-vocab-cn 是 white-space: nowrap
       （style.css 里 .saved-vocab-cn 那条），最长的中文释义会把单列轨道从容器宽
       撑到 609px（实测 390px 视口下溢出 236px），整站因此出现横向滚动、必须缩放才能看全。
       minmax(0, 1fr) 把轨道下限钉成 0，释义超出部分由 .saved-vocab-cn 自己的
       overflow:hidden + text-overflow:ellipsis 截断——与桌面模式同一表现。
       桌面/平板模式走的是 base 的 repeat(auto-fill, minmax(280px, 1fr))，280px 是固定下限，本就不受影响。 */
    grid-template-columns: minmax(0, 1fr);
}

/* 网格项防御：网格项的 min-width 默认是 auto，老 WebView 上仍可能按内容最小宽度撑破轨道 */
body.device-phone .saved-vocab-item {
    min-width: 0;
}

/* 手机布局：阅读页上下排布，生词栏到底部 */
body.device-phone .rv-main {
    flex-direction: column;
}

body.device-phone .temp-vocab-panel {
    width: 100%;
    border-left: none;
    border-top: 1px solid var(--paper-border);
    max-height: 42vh;
}

body.device-phone .question-float {
    left: 12px;
    right: 12px;
    width: auto;
}

/* 平板布局：中幅，双栏面板改单列 */
body.device-tablet .main-content {
    max-width: 920px;
    padding: 90px 20px 28px;
}

body.device-tablet .ai-layout,
body.device-tablet .settings-layout {
    grid-template-columns: 1fr;
}

body.device-tablet .ai-config {
    position: static;
}

/* 手机布局：临时生词/词组分节默认折叠，点标题展开，避免挤占正文与题目空间 */
body.device-phone .temp-section .temp-vocab-header {
    cursor: pointer;
    justify-content: flex-start;
}

body.device-phone .temp-section .temp-vocab-header .temp-vocab-count {
    margin-left: auto;
}

body.device-phone .temp-section .temp-vocab-header::after {
    content: '▾';
    font-size: 12px;
    margin-left: 6px;
}

body.device-phone .temp-section.collapsed .temp-vocab-header::after {
    content: '▸';
}

body.device-phone .temp-section.collapsed .temp-vocab-list,
body.device-phone .temp-section.collapsed .temp-vocab-empty,
body.device-phone .temp-section.collapsed .temp-vocab-commit {
    /* 空状态提示由 JS 写入内联 display，需 !important 才能收起 */
    display: none !important;
}

body.device-phone .temp-section .temp-vocab-list {
    max-height: 200px;
}

body.device-phone .temp-vocab-panel {
    flex: 0 0 auto;
    max-height: none;
}

/* ===== 真题页工具行 ===== */
.exams-tools {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

/* ===== 主题切换按钮（导航内） ===== */
.theme-toggle {
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 50%;
    width: 34px;
    height: 34px;
    font-size: 15px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
    flex-shrink: 0;
}

.theme-toggle:hover {
    background: rgba(255,255,255,0.3);
    transform: translateY(-1px);
}

/* ===== 阅读页字号按钮 ===== */
.fs-btn {
    font-weight: 700;
    font-size: 13px;
    min-width: 44px;
}

body.rfont-s .passage { font-size: 16px; }
body.rfont-m .passage { font-size: 18px; }
body.rfont-l .passage { font-size: 21px; }

/* ===== 主题词签（词汇表/泛读/对话情景共用） ===== */
.lib-theme-chips {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.lib-chip {
    padding: 7px 14px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--bg-card);
    color: var(--text-secondary);
    font-size: 13px;
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap;
}

.lib-chip:hover {
    border-color: var(--primary-light);
    color: var(--primary);
}

.lib-chip.active {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
    font-weight: 600;
}

/* ===== 词汇表条目 ===== */
.vocab-lib-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.vocab-lib-main {
    flex: 1;
    min-width: 0;
}

.vocab-lib-ar {
    font-family: var(--arabic-font);
    font-size: 18px;
    font-weight: 700;
    color: var(--primary);
    text-align: right;
}

.vocab-lib-zh {
    font-size: 13px;
    color: var(--text-secondary);
    margin-top: 2px;
}

.vocab-lib-type {
    font-size: 11px;
    color: var(--text-muted);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 1px 6px;
    margin-left: 6px;
}

/* ===== 语法专题 ===== */
.grammar-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

.grammar-card {
    cursor: pointer;
    position: relative;
    padding: 24px;
    text-align: center;
}

.grammar-icon {
    font-size: 34px;
    margin-bottom: 10px;
}

.grammar-level {
    position: absolute;
    top: 12px;
    right: 12px;
    font-size: 11px;
    color: var(--primary);
    background: rgba(26, 107, 79, 0.1);
    border-radius: 8px;
    padding: 2px 8px;
}

/* AI 生成并保存的语法卡片：AI 标记 + 左上角删除按钮 */
.grammar-card-ai {
    border: 1px dashed rgba(26, 107, 79, 0.35);
}

.grammar-level-ai {
    background: rgba(26, 107, 79, 0.16);
    font-weight: 600;
}

.grammar-del {
    position: absolute;
    top: 10px;
    left: 10px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    padding: 4px 6px;
    border-radius: 6px;
    opacity: 0.4;
    transition: var(--transition);
}

.grammar-del:hover {
    opacity: 1;
    background: rgba(220, 38, 38, 0.12);
}

/* AI 生成结果区的保存入口（语法讲解等） */
.ai-save-row {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px dashed var(--border);
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.ai-save-hint {
    font-size: 12px;
    color: var(--text-muted);
}

/* ===== 文章语法解析视图 ===== */
.ga-loading {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-secondary);
}

.ga-intro-bar {
    background: rgba(26, 107, 79, 0.08);
    border: 1px solid rgba(26, 107, 79, 0.2);
    border-radius: var(--radius);
    padding: 10px 14px;
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 16px;
}

.ga-point-card {
    margin-bottom: 18px;
}

.ga-point-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.ga-point-title {
    margin: 0;
    font-size: 17px;
    color: var(--primary);
}

.ga-pick {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--text-secondary);
    cursor: pointer;
    white-space: nowrap;
    background: rgba(26, 107, 79, 0.08);
    border-radius: 8px;
    padding: 4px 10px;
}

.ga-pick input {
    accent-color: var(--primary);
    width: 15px;
    height: 15px;
    cursor: pointer;
}

.ga-level-badge {
    position: static;
    margin-left: 6px;
}

.ga-save-bar {
    margin-top: 20px;
    padding: 14px;
    border: 1px dashed var(--primary-light, var(--border));
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    background: var(--bg-card);
}

.ga-save-result {
    margin-top: 12px;
    font-size: 13px;
    line-height: 1.8;
    color: var(--text-secondary);
}

.grammar-article .title {
    font-size: 20px;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 16px;
}

.grammar-intro {
    padding: 16px 20px;
    background: var(--bg-secondary);
    border-radius: var(--radius);
    font-size: 14px;
    line-height: 1.9;
    color: var(--text-secondary);
    margin-bottom: 18px;
}

.grammar-sub {
    font-size: 16px;
    color: var(--primary);
    margin: 20px 0 12px;
}

/* 语法小测验操作条：换一批 / 重做本讲（与卡片同风格，浅色随主题变量） */
.grammar-quiz-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 14px;
    padding: 9px 12px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.grammar-quiz-src {
    font-size: 13px;
    color: var(--text-secondary);
}
.grammar-quiz-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.grammar-quiz-btns .q-action-btn:disabled {
    opacity: .55;
    cursor: not-allowed;
}

.grammar-point {
    padding: 14px 16px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 10px;
}

.grammar-rule {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 8px;
}

.grammar-example {
    font-family: var(--arabic-font);
    font-size: 19px;
    font-weight: 700;
    color: var(--primary);
    text-align: right;
    line-height: 1.8;
}

/* 语法例句整句可点：点单词查词义（.ar-word），点句子其余部分/「句译」标签弹整句翻译 */
.grammar-example-tap {
    cursor: pointer;
    border-radius: 8px;
    padding: 2px 6px;
    margin: -2px -6px;
    transition: background 0.15s;
}

.grammar-example-tap:hover {
    background: rgba(26, 107, 79, 0.08);
}

.grammar-sent-tap {
    font-family: inherit;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 1px 8px;
    margin: 0 10px;
    white-space: nowrap;
    vertical-align: 2px;
}

.grammar-zh {
    font-size: 13px;
    color: var(--text-muted);
    margin-top: 4px;
}

/* ===== 学习浮层（闪卡/自测/错题本/成绩单共用） ===== */
.study-overlay {
    position: fixed;
    inset: 0;
    background: rgba(20, 30, 24, 0.5);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 4000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    /* v5.8：浮层自身到边界不再把滚动传给背景（滚动链），配合 html.page-locked 用 */
    overscroll-behavior: contain;
}

/* ===== v5.8 大浮层打开时锁定页面滚动：只有悬浮卡片能上下拖动 =====
   html.page-locked 由 js/scroll-lock.js 在「任一 .study-overlay 可见」时加上；
   点词小弹窗（#wordPopover / #phrasePopover）不在 .study-overlay 里，页面保持可滚。 */
html.page-locked,
html.page-locked body {
    overflow: hidden !important;
    overscroll-behavior: none;
}

/* 阅读页 / 真题页的内层滚动区也要停住，否则背景仍能被拖动 */
html.page-locked .rv-scroll {
    overflow: hidden !important;
}

.study-box {
    width: 560px;
    max-width: 100%;
    max-height: 86vh;
    overflow-y: auto;
    /* v5.8：卡片内部自由滚动；滚到边界不带动背后页面 */
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    background: var(--bg-card);
    backdrop-filter: blur(24px) saturate(170%);
    -webkit-backdrop-filter: blur(24px) saturate(170%);
    border: 1px solid var(--glass-edge);
    border-radius: var(--radius-lg);
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.28);
    padding: 20px 22px;
}

.study-box-wide {
    width: 760px;
}

.study-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 16px;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 16px;
}

.study-close {
    background: none;
    border: none;
    font-size: 16px;
    cursor: pointer;
    color: var(--text-muted);
    padding: 4px 8px;
    border-radius: 8px;
}

.study-close:hover {
    background: var(--bg-secondary);
    color: var(--accent);
}

.study-empty {
    text-align: center;
    padding: 40px 10px;
    font-size: 15px;
    color: var(--text-secondary);
    line-height: 2;
}

.study-hint {
    text-align: center;
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 12px;
}

/* 闪卡 */
.flashcard {
    min-height: 240px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--glass-edge);
    background: linear-gradient(145deg, rgba(255,255,255,0.75), rgba(255,255,255,0.5));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 10px 30px rgba(31,58,47,0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 24px;
    text-align: center;
}

.flashcard-front,
.flashcard-back {
    width: 100%;
}

.fc-word {
    font-family: var(--arabic-font);
    font-size: 42px;
    font-weight: 700;
    color: var(--primary);
    direction: rtl;
    line-height: 1.5;
}

.fc-tip {
    margin-top: 18px;
    font-size: 12px;
    color: var(--text-muted);
}

.fc-meaning {
    font-size: 24px;
    font-weight: 700;
}

.fc-meta {
    margin-top: 8px;
    font-size: 13px;
    color: var(--text-muted);
}

.fc-example {
    margin-top: 16px;
    font-family: var(--arabic-font);
    font-size: 18px;
    color: var(--primary);
    direction: rtl;
    line-height: 1.8;
}

.fc-example-zh {
    font-size: 13px;
    color: var(--text-muted);
    margin-top: 4px;
}

.fc-actions {
    display: flex;
    gap: 12px;
    margin-top: 16px;
}

.fc-actions .btn {
    flex: 1;
}

/* 生词自测 */
.quiz-word {
    font-family: var(--arabic-font);
    font-size: 34px;
    font-weight: 700;
    color: var(--primary);
    text-align: center;
    direction: rtl;
    padding: 18px 0 22px;
    cursor: pointer;
}

.quiz-options {
    display: grid;
    gap: 10px;
}

.quiz-opt {
    padding: 12px 16px;
    border: 2px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-card);
    color: var(--text-primary);
    font-size: 15px;
    text-align: left;
    cursor: pointer;
    transition: var(--transition);
}

.quiz-opt:hover {
    border-color: var(--primary-light);
}

.quiz-opt.correct {
    border-color: #059669;
    background: rgba(5, 150, 105, 0.12);
    color: #059669;
    font-weight: 600;
}

.quiz-opt.wrong {
    border-color: #dc2626;
    background: rgba(220, 38, 38, 0.1);
    color: #dc2626;
}

/* ===== 错题集 ===== */

/* 统计卡：总错题 / 待掌握 / 已掌握 / 近 7 天新增 */
.wb-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 18px;
}

.wb-stat {
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-card);
    text-align: center;
}

.wb-stat-num {
    font-size: 26px;
    font-weight: 800;
    line-height: 1.2;
    color: var(--primary);
}

.wb-stat.warn .wb-stat-num { color: #d97706; }
.wb-stat.ok .wb-stat-num { color: #059669; }

.wb-stat-label {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 2px;
}

/* 筛选条 */
.wb-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

.wb-filter select,
.wb-filter input {
    height: 38px;
    padding: 0 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-card);
    color: var(--text-primary);
    font-size: 13px;
}

.wb-filter input {
    flex: 1 1 160px;
    min-width: 140px;
}

.wb-filter .wb-start-btn { margin-left: auto; }
.wb-filter .wb-start-btn:disabled { opacity: 0.6; cursor: default; }

/* 列表项 */
.wrong-item {
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 12px;
    background: var(--bg-card);
    transition: var(--transition);
}

.wrong-item:hover { border-color: var(--primary-light); }
.wrong-item.mastered { opacity: 0.72; }

.wb-item-top {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 12px;
    color: var(--text-muted);
}

/* 来源标签：不同来源不同配色，扫一眼就能分清真题 / 语法 / AI 卷 */
.wb-source-tag {
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    background: rgba(100, 116, 139, 0.16);
    color: #475569;
}

.wb-source-tag[data-src="grammar"] { background: rgba(37, 99, 235, 0.12); color: #2563eb; }
.wb-source-tag[data-src="exam"] { background: rgba(217, 119, 6, 0.14); color: #b45309; }
.wb-source-tag[data-src="ai-exam"] { background: rgba(124, 58, 237, 0.14); color: #7c3aed; }

.wb-source-title {
    max-width: 320px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wb-count { color: #dc2626; font-weight: 600; }
.wb-mastered-tag { color: #059669; font-weight: 600; }
.wb-date { margin-left: auto; }

.wrong-text {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 8px;
}

.wrong-ans {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    font-size: 13px;
    margin-bottom: 10px;
}

.wrong-your b { color: #dc2626; }
.wrong-right b { color: #059669; }

.wrong-redo {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--border);
}

.wrong-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.wb-empty-hint {
    font-size: 12px;
    color: var(--text-muted);
}

/* 专项练习浮层 */
.wb-quiz-bar {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.wb-quiz-src {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 10px;
}

/* 窄屏：统计卡两列，主按钮占满整行 */
@media (max-width: 768px) {
    .wb-stats { grid-template-columns: repeat(2, 1fr); }
    .wb-filter .wb-start-btn { margin-left: 0; width: 100%; }
    .wb-source-title { max-width: 100%; }
    .wb-date { margin-left: 0; }
}

/* ===== 模拟考试 ===== */
.mock-chip {
    position: fixed;
    bottom: 24px;
    left: 24px;
    z-index: 3500;
    display: none;
    align-items: center;
    gap: 14px;
    padding: 10px 16px;
    background: linear-gradient(135deg, rgba(15, 74, 53, 0.92), rgba(26, 107, 79, 0.85));
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 999px;
    box-shadow: 0 12px 32px rgba(15, 74, 53, 0.35);
    color: white;
}

.mock-time {
    font-size: 20px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: 1px;
}

.mock-submit-btn {
    padding: 7px 18px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
    color: white;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.mock-submit-btn:hover {
    background: white;
    color: var(--primary);
}

.mock-paper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-card);
    margin-bottom: 10px;
    cursor: pointer;
    transition: var(--transition);
}

.mock-paper:hover {
    border-color: var(--primary);
}

.mock-paper-meta {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 4px;
}

.mock-score {
    text-align: center;
    font-size: 56px;
    font-weight: 800;
    color: var(--primary);
    line-height: 1.2;
}

.mock-score span {
    font-size: 18px;
    font-weight: 600;
    margin-left: 4px;
}

.mock-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin: 16px 0;
}

.mock-stats > div {
    text-align: center;
    padding: 10px 6px;
    background: var(--bg-secondary);
    border-radius: var(--radius);
}

.mock-stats b {
    display: block;
    font-size: 18px;
    color: var(--primary);
}

.mock-stats span {
    font-size: 12px;
    color: var(--text-muted);
}

.mock-details {
    max-height: 240px;
    overflow-y: auto;
    border-top: 1px dashed var(--border);
    padding-top: 10px;
}

.mock-detail {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: 13px;
    padding: 6px 4px;
}

.mock-detail.bad { color: #dc2626; }
.mock-detail.ok { color: var(--text-secondary); }
.mock-detail em { color: var(--text-muted); font-style: normal; }
/* ===== AI 情景对话 ===== */
.chat-scenarios {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    padding: 14px 20px 4px;
}

.chat-messages {
    height: 420px;
    overflow-y: auto;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.chat-empty {
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
    padding: 40px 0;
}

.chat-bubble {
    max-width: 85%;
    padding: 10px 14px;
    border-radius: var(--radius);
    font-size: 14px;
    line-height: 1.8;
}

.chat-bubble.user {
    align-self: flex-end;
    background: var(--primary);
    color: white;
}

.chat-bubble.ai {
    align-self: flex-start;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
}

.chat-bubble.error {
    align-self: center;
    background: rgba(220, 38, 38, 0.12);
    color: #dc2626;
    font-size: 13px;
}

.chat-bubble.loading {
    color: var(--text-muted);
    font-size: 13px;
}

.chat-ar {
    font-family: var(--arabic-font);
    font-size: 17px;
    font-weight: 600;
    text-align: right;
}

.chat-trans {
    font-size: 13px;
    color: var(--text-secondary);
    margin-top: 6px;
    border-top: 1px dashed var(--border);
    padding-top: 6px;
}

.chat-fix {
    font-size: 13px;
    color: var(--secondary);
    margin-top: 6px;
}

.chat-input-row {
    display: flex;
    gap: 10px;
    padding: 14px 20px;
    border-top: 1px solid var(--border);
}

.chat-input-row input,
.chat-input-row textarea {
    flex: 1;
    padding: 10px 14px;
    border: 2px solid var(--border);
    border-radius: var(--radius);
    font-size: 14px;
    background: rgba(255, 255, 255, 0.8);
    color: var(--text-primary);
    font-family: inherit;
    resize: vertical;
    min-height: 42px;
    max-height: 150px;
}

.chat-input-row input:focus,
.chat-input-row textarea:focus {
    outline: none;
    border-color: var(--primary-light);
}

/* ===== 对话面板：思考折叠区 + 正文 + 操作按钮 ===== */
.chat-bubble .chat-body {
    margin-top: 4px;
}
.chat-bubble .chat-body > div {
    line-height: 1.8;
    margin: 2px 0;
}
.thinking-block {
    margin-bottom: 10px;
    border: 1px dashed var(--border);
    border-radius: var(--radius);
    background: rgba(120, 120, 120, 0.07);
    overflow: hidden;
}
.thinking-toggle {
    padding: 8px 12px;
    font-size: 12px;
    color: var(--text-secondary);
    cursor: pointer;
    user-select: none;
}
.thinking-toggle:hover {
    color: var(--primary);
}
.thinking-body {
    display: none;
    padding: 4px 12px 12px;
    border-top: 1px dashed var(--border);
}
.thinking-block.open .thinking-body {
    display: block;
}
.thinking-body pre {
    margin: 0;
    white-space: pre-wrap;
    word-break: break-word;
    font-family: var(--arabic-font), monospace;
    font-size: 12.5px;
    color: var(--text-secondary);
    line-height: 1.7;
    max-height: 260px;
    overflow-y: auto;
}
.chat-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid var(--border);
}
.chat-actions .action-btn {
    padding: 5px 12px;
    font-size: 12.5px;
}
.chat-bubble.questions {
    max-width: 100%;
}
.chat-q-title {
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 6px;
}
.chat-truncated {
    margin-top: 8px;
    padding: 6px 10px;
    font-size: 12px;
    color: #b45309;
    background: rgba(245, 158, 11, 0.12);
    border: 1px solid rgba(245, 158, 11, 0.35);
    border-radius: 6px;
    line-height: 1.5;
}
body.dark .chat-truncated {
    color: #fbbf24;
    background: rgba(245, 158, 11, 0.1);
    border-color: rgba(245, 158, 11, 0.4);
}

/* ===== 作文批改报告 ===== */
.grade-summary {
    text-align: center;
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 16px;
    line-height: 1.9;
}

.grade-sub {
    font-size: 15px;
    color: var(--primary);
    margin: 18px 0 10px;
}

.grade-fix {
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 10px;
    background: var(--bg-card);
}

.grade-orig {
    font-family: var(--arabic-font);
    font-size: 16px;
    color: #dc2626;
    text-align: right;
}

.grade-corr {
    font-family: var(--arabic-font);
    font-size: 16px;
    color: #059669;
    text-align: right;
    margin-top: 4px;
}

.grade-note {
    font-size: 13px;
    color: var(--text-secondary);
    margin-top: 6px;
    border-top: 1px dashed var(--border);
    padding-top: 6px;
}

.grade-improved {
    font-family: var(--arabic-font);
    font-size: 17px;
    line-height: 2;
    text-align: right;
    padding: 16px;
    background: var(--bg-secondary);
    border-radius: var(--radius);
}

.grade-words {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.grade-word {
    font-size: 13px;
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(26, 107, 79, 0.1);
    color: var(--primary);
}
/* ============================================================
   深色模式（夜读）
   ============================================================ */
body.dark {
    --bg-primary: #161a17;
    --bg-secondary: rgba(40, 46, 41, 0.72);
    --bg-card: rgba(32, 38, 33, 0.55);
    --text-primary: #e6ebe6;
    --text-secondary: #b5bfb7;
    --text-muted: #7d877f;
    --border: rgba(255, 255, 255, 0.12);
    --glass-edge: rgba(255, 255, 255, 0.14);
    --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
    --shadow: 0 2px 16px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.4);
    --paper-bg: #20261f;
    --paper-card: #293028;
    --paper-border: #3b453b;
    background: linear-gradient(165deg, #121612 0%, #181d18 45%, #141a15 100%) fixed;
}

body.dark::before {
    background:
        radial-gradient(440px 440px at 12% 16%, rgba(45, 157, 111, 0.12), transparent 70%),
        radial-gradient(520px 520px at 88% 10%, rgba(200, 164, 90, 0.08), transparent 70%),
        radial-gradient(480px 480px at 80% 86%, rgba(26, 107, 79, 0.1), transparent 70%),
        radial-gradient(380px 380px at 20% 90%, rgba(90, 130, 100, 0.12), transparent 70%);
}

body.dark .feature-card,
body.dark .exam-item,
body.dark .ai-config,
body.dark .ai-output,
body.dark .settings-card,
body.dark .saved-vocab-item,
body.dark .article-record-item,
body.dark .word-popover,
body.dark .phrase-popover,
body.dark .question-float,
body.dark .export-menu {
    background: linear-gradient(135deg,
        rgba(44, 52, 46, 0.62) 0%,
        rgba(30, 36, 31, 0.45) 45%,
        rgba(38, 45, 39, 0.52) 100%);
    border-color: rgba(255, 255, 255, 0.12);
}

body.dark .main-nav {
    background: linear-gradient(135deg,
        rgba(10, 32, 23, 0.78) 0%,
        rgba(14, 46, 33, 0.66) 55%,
        rgba(22, 66, 47, 0.58) 100%);
    border-color: rgba(255, 255, 255, 0.16);
}

body.dark .btn-primary {
    background: linear-gradient(135deg, rgba(16, 66, 48, 0.92) 0%, rgba(32, 116, 82, 0.72) 100%);
    border-color: rgba(255, 255, 255, 0.22);
}

body.dark .btn-secondary {
    background: linear-gradient(135deg, rgba(50, 58, 52, 0.8) 0%, rgba(34, 40, 35, 0.62) 100%);
    border-color: rgba(255, 255, 255, 0.2);
    color: var(--primary-light);
}

body.dark .btn-secondary:hover {
    background: linear-gradient(135deg, rgba(16, 66, 48, 0.92) 0%, rgba(32, 116, 82, 0.72) 100%);
    color: white;
}

body.dark .config-group input[type="text"],
body.dark .config-group textarea,
body.dark .config-group select,
body.dark .setting-item input,
body.dark .setting-item textarea,
body.dark .setting-item select,
body.dark .vocab-filters select,
body.dark .chat-input-row input,
body.dark .chat-input-row textarea {
    background: rgba(20, 25, 21, 0.85);
    color: var(--text-primary);
}

/* 暗色：思考折叠区 */
body.dark .thinking-block {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.16);
}
body.dark .thinking-body {
    border-top-color: rgba(255, 255, 255, 0.16);
}
body.dark .thinking-body pre {
    color: rgba(230, 235, 231, 0.72);
}
body.dark .chat-actions {
    border-top-color: rgba(255, 255, 255, 0.12);
}

body.dark .diff-btn,
body.dark .cloze-count-btn,
body.dark .device-btn,
body.dark .vocabbook-tab,
body.dark .exam-tab,
body.dark .ai-type-tab,
body.dark .quiz-opt,
body.dark .lib-chip,
body.dark .theme-toggle,
body.dark .topic-random-btn {
    background: rgba(30, 36, 31, 0.7);
    color: var(--text-secondary);
}

body.dark .hero-badge {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.18);
    color: var(--text-secondary);
}

body.dark .reading-view {
    background: linear-gradient(180deg, #1b211b 0%, var(--paper-bg) 26%, #232a22 100%);
}

body.dark .reading-view .rv-header {
    background: rgba(32, 38, 32, 0.92);
    border-bottom-color: var(--paper-border);
}

body.dark .reading-view .question-option,
body.dark .reading-view .q-action-btn,
body.dark .reading-view .trans-toggle-btn {
    background: var(--paper-card);
}

body.dark .reading-view .temp-vocab-panel {
    background: #232a22;
    border-left-color: var(--paper-border);
}

body.dark .reading-view .temp-vocab-header {
    background: rgba(44, 52, 44, 0.85);
    border-bottom-color: var(--paper-border);
}

body.dark .reading-view .temp-vocab-item {
    background: var(--paper-card);
    border-color: var(--paper-border);
}

body.dark .reading-view .question-float {
    background: rgba(40, 47, 40, 0.9);
    border-color: var(--paper-border);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
}

body.dark .reading-view .qf-footer {
    background: rgba(44, 52, 44, 0.92);
    border-top-color: var(--paper-border);
}

body.dark .reading-view .qf-nav-btn {
    background: var(--paper-card);
}

body.dark .reading-view .word-popover {
    background: rgba(40, 47, 40, 0.96);
    border-color: var(--paper-border);
}

body.dark .reading-view .phrase-popover {
    background: rgba(40, 47, 40, 0.96);
    border-color: var(--paper-border);
}

body.dark .reading-view .rv-questions-bar,
body.dark .reading-view .rv-translation,
body.dark .reading-view .rv-footer {
    background: var(--paper-card);
    border-color: var(--paper-border);
}

body.dark .flashcard {
    background: linear-gradient(145deg, rgba(50, 58, 50, 0.7), rgba(34, 40, 34, 0.5));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 10px 30px rgba(0, 0, 0, 0.3);
}

/* 暗色模式：详细解析弹窗 */
body.dark .wd-block {
    background: rgba(44, 52, 46, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.08);
}
body.dark .wd-table th {
    background: rgba(44, 52, 46, 0.6);
    color: var(--text-muted);
}
body.dark .wd-table td {
    border-color: rgba(255, 255, 255, 0.12);
}
body.dark .wd-table tr:nth-child(even) td {
    background: rgba(255, 255, 255, 0.03);
}
body.dark .wd-t-ar {
    color: #7fd4a2;
}
body.dark .wp-detail-btn {
    border-color: rgba(255, 255, 255, 0.25);
    color: var(--accent);
}
body.dark .wp-detail-btn:hover {
    background: var(--primary);
    color: #fff;
}

/* 暗色模式：动词标准变位表 */
body.dark .wd-cj-table th,
body.dark .wd-cj-table td {
    border-color: rgba(255, 255, 255, 0.12);
}
body.dark .wd-cj-table thead th,
body.dark .wd-cj-corner,
body.dark .wd-cj-num {
    background: rgba(44, 52, 46, 0.6);
}
body.dark .wd-cj-cell {
    color: #7fd4a2;
}
body.dark .wd-cj-table tbody tr:nth-child(even) td {
    background: rgba(255, 255, 255, 0.03);
}
body.dark .wd-cj-dim {
    color: rgba(255, 255, 255, 0.4);
}

/* 「重新解析 / 重新翻译」按钮 */
.wp-reparse-row {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px dashed var(--border);
    text-align: right;
    /* 批次1（问题 1）：底部可能同时有「重新解析 / 手动释义」两个按钮，用 flex 排列 */
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
/* ===== AI 查不到时的降级块（批次1 · 问题 1）：查词浮层内 =====
   用「说明 + 重试 + 手动输入释义」替代原来直接展示的「未查到该词，请检查拼写」。 */
.wp-degrade {
    margin-top: 10px;
    padding: 8px 10px;
    border-top: 1px dashed var(--border);
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.wp-degrade-tip {
    font-size: 12px;
    line-height: 1.5;
    color: var(--text-muted);
}
.wp-degrade-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.pp-reparse-row {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px dashed var(--border);
    text-align: right;
}
.wp-reparse-btn {
    border: 1px solid var(--primary);
    background: transparent;
    color: var(--primary);
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 12px;
    cursor: pointer;
    transition: var(--transition);
}
.wp-reparse-btn:hover {
    background: var(--primary);
    color: #fff;
}
.wp-reparse-inline {
    margin-left: 8px;
    padding: 2px 8px;
    font-size: 11px;
    vertical-align: middle;
}

/* ===== 词汇库查询 ===== */
.lib-ai-toggle {
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-card);
    color: var(--text-secondary);
    font-size: 13px;
    transition: var(--transition);
}
.lib-ai-toggle.ai-on {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
    font-weight: 600;
}
.lib-search-wrap {
    position: relative;
    margin-bottom: 14px;
}
.lib-search-input {
    width: 100%;
    padding: 12px 44px 12px 14px;
    border: 2px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-card);
    color: var(--text-primary);
    font-size: 15px;
    outline: none;
    transition: var(--transition);
}
.lib-search-input:focus {
    border-color: var(--primary);
}
.lib-search-clear {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--border);
    color: var(--text-secondary);
    font-size: 15px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition);
}
/* 悬停只做轻微放大：不能继承全局 button:hover 的 translateY(-2px)——
   那会覆盖本按钮用于垂直居中的 translateY(-50%)，导致 × 悬停时跳出输入框 */
.lib-search-clear:hover {
    transform: translateY(-50%) scale(1.08);
    background: var(--text-muted);
    color: #fff;
}
.lib-detail { margin-bottom: 14px; }
.lib-detail-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px 18px;
}
.lib-detail-head {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
}
.lib-detail-ar {
    font-family: var(--arabic-font);
    font-size: 30px;
    font-weight: 700;
    color: var(--primary);
    direction: rtl;
    cursor: pointer;
}
.lib-detail-translit {
    color: var(--text-muted);
    font-size: 13px;
    font-style: italic;
}
.lib-detail-cn {
    margin-top: 6px;
    font-size: 15px;
    color: var(--text-primary);
    line-height: 1.7;
}
.lib-detail-meta {
    margin-top: 8px;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.lib-tag {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 2px 10px;
    font-size: 12px;
    color: var(--text-muted);
}
.lib-detail-actions {
    margin-top: 12px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
/* ===== AI 查不到时的降级块（批次1 · 问题 1）：词汇库 AI 段 =====
   替代原先直接展示的「未查到该词，请检查拼写」，给「重试 + 手动输入释义」两条出路。 */
.lib-ai-degrade {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(255, 193, 7, 0.10);
    border: 1px solid rgba(255, 193, 7, 0.32);
}
.lib-ai-degrade-tip {
    font-size: 13px;
    line-height: 1.5;
    color: var(--text, #333);
}
.lib-ai-degrade .lib-detail-actions { margin-top: 0; }
.lib-list-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 10px;
}
.lib-add-all-btn {
    padding: 4px 12px;
    font-size: 12px;
    background: var(--primary);
    border: 1px solid var(--primary);
    color: #fff;
    border-radius: 8px;
    cursor: pointer;
}
.lib-add-all-btn:hover { opacity: 0.88; }
.lib-empty {
    padding: 36px 16px;
    text-align: center;
    color: var(--text-muted);
    font-size: 14px;
    line-height: 2;
    background: var(--bg-card);
    border: 1px dashed var(--border);
    border-radius: var(--radius);
}
.lib-ai-error { color: #c0392b; }
.lib-list-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 8px;
}
.lib-list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px 12px;
    cursor: pointer;
    transition: var(--transition);
}
.lib-list-item:hover {
    border-color: var(--primary);
    transform: translateY(-1px);
}
.lib-list-item.ai-item {
    background: rgba(37, 99, 235, 0.06);
    border: 1px dashed rgba(37, 99, 235, 0.45);
}
.lib-list-item.ai-item.added {
    opacity: 0.62;
    border-style: solid;
    border-color: var(--border);
}
.lib-tag-ai {
    color: var(--primary);
    border-color: rgba(37, 99, 235, 0.45);
}
.lib-list-ar {
    font-family: var(--arabic-font);
    font-size: 16px;
    color: var(--primary-dark);
    direction: rtl;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.lib-list-cn {
    font-size: 12px;
    color: var(--text-muted);
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ===== 详情卡两段式（b11）：上段 📚 词汇库结果 / 下段 🤖 AI 补充释义 ===== */
.lib-section-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-muted);
    letter-spacing: .04em;
    margin-bottom: 8px;
}
/* 下段：虚线边框 + 不同底色，与上段明确区分（配色全部走主题变量，深色模式自动跟随） */
.lib-ai-card {
    margin-top: 10px;
    padding: 14px 16px;
    background: var(--bg-card);
    border: 1px dashed var(--primary);
    border-radius: var(--radius);
}
.lib-ai-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}
.lib-ai-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--primary);
}
.lib-ai-badge {
    font-size: 11px;
    color: var(--text-muted);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 1px 8px;
    white-space: nowrap;
}
.lib-ai-body {
    font-size: 14px;
    line-height: 1.7;
    color: var(--text-primary);
}
.lib-ai-row {
    display: flex;
    gap: 8px;
    margin-top: 4px;
}
.lib-ai-label {
    flex: none;
    width: 52px;
    font-size: 13px;
    color: var(--text-muted);
}
.lib-ai-value {
    flex: 1;
    min-width: 0;
    color: var(--text-primary);
    word-break: break-word;
}
.lib-ai-ar {
    font-family: var(--arabic-font);
    direction: rtl;
    text-align: right;
}
.lib-ai-example {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed var(--border);
}
.lib-ai-example-ar {
    font-size: 17px;
    color: var(--text-primary);
    line-height: 1.9;
}
.lib-ai-example-cn {
    margin-top: 2px;
    font-size: 13px;
    color: var(--text-muted);
}
.lib-ai-loading {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-muted);
}

/* ===== 详情卡内联「选本」菜单（b11）：复用 .bp-* 的行样式 ===== */
.lib-book-menu {
    margin-top: 10px;
    padding: 12px 14px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    /* 兜底：父级若被设成 pointer-events:none，菜单自身仍要可点 */
    pointer-events: auto;
}
.lib-book-menu-head {
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
}
/* 内联菜单里的列表压一压高度与底部间距，避免比详情卡还长 */
.lib-book-menu .bp-list {
    max-height: 32vh;
    margin-bottom: 10px;
}
.lib-book-menu .bp-create-row {
    margin-bottom: 0;
}
/* 「加入生词本」按钮：已加入后给出即时反馈（仍可继续点到别的本子） */
.lib-add-arrow {
    margin-left: 4px;
    font-size: 11px;
    opacity: .75;
}
.action-btn.added {
    border-color: var(--primary);
    color: var(--primary);
}

/* =====================================================================
   多语言适配（英/西 LTR）：
   1) 目标语言展示区的 RTL 排版改为跟随 <html dir>（阿语 RTL，英/西 LTR）；
   2) 语言切换器（主页 hero 内三分段控件）；
   3) 新增考试级别徽标：四级 / 六级 / 雅思。
   ===================================================================== */

/* ---- 1) LTR 模式下覆盖原 RTL 排版 ---- */
html[dir="ltr"] .arabic,
html[dir="ltr"] .hero-title-ar,
html[dir="ltr"] .calli-item,
html[dir="ltr"] .vocab-arabic,
html[dir="ltr"] .flashcard-arabic,
html[dir="ltr"] .flashcard-example,
html[dir="ltr"] .quiz-arabic,
html[dir="ltr"] .temp-vocab-ar,
html[dir="ltr"] .pp-text,
html[dir="ltr"] .wp-word,
html[dir="ltr"] .wp-example-ar,
html[dir="ltr"] .wd-t-ar,
html[dir="ltr"] .wd-cj-cell,
html[dir="ltr"] .passage,
html[dir="ltr"] .generated-article,
html[dir="ltr"] .saved-vocab-ar,
html[dir="ltr"] .fc-word,
html[dir="ltr"] .fc-example,
html[dir="ltr"] .quiz-word,
html[dir="ltr"] .chat-ar,
html[dir="ltr"] .lib-detail-ar,
html[dir="ltr"] .lib-list-ar {
    direction: ltr;
    text-align: left;
    font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans SC', sans-serif);
}

html[dir="ltr"] .passage-para {
    text-indent: 2em;
}

/* ---- 2) 语言切换器 ---- */
.lang-switcher {
    display: inline-flex;
    gap: 6px;
    padding: 6px;
    background: rgba(255, 255, 255, 0.65);
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 999px;
    margin-bottom: 18px;
    backdrop-filter: blur(6px);
}

.lang-btn {
    border: none;
    background: transparent;
    padding: 7px 16px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary, #6b7280);
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
}

.lang-btn:hover {
    color: var(--primary, #2563eb);
    background: rgba(37, 99, 235, 0.08);
}

.lang-btn.active {
    background: var(--primary, #2563eb);
    color: #fff;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.35);
}

body.dark .lang-switcher {
    background: rgba(17, 24, 39, 0.6);
    border-color: var(--border, #374151);
}

body.dark .lang-btn {
    color: var(--text-secondary, #9ca3af);
}

body.dark .lang-btn.active {
    color: #fff;
}

/* ---- 3) 新增考试级别徽标 ---- */
.badge-cet4 {
    background: #dcfce7;
    color: #15803d;
}

.badge-cet6 {
    background: #ffedd5;
    color: #c2410c;
}

.badge-ielts {
    background: #ede9fe;
    color: #6d28d9;
}

body.dark .badge-cet4 {
    background: rgba(21, 128, 61, 0.25);
    color: #4ade80;
}

body.dark .badge-cet6 {
    background: rgba(194, 65, 12, 0.25);
    color: #fb923c;
}

body.dark .badge-ielts {
    background: rgba(109, 40, 217, 0.3);
    color: #c4b5fd;
}

/* ===== 多语言真题扩展：听力标注徽标 + 多选项双列布局 ===== */

.exam-tag {
    background: #0ea5e9;
    color: #fff;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    margin-left: 6px;
    white-space: nowrap;
}

body.dark .exam-tag {
    background: rgba(14, 165, 233, 0.35);
    color: #7dd3fc;
}

/* 选词填空/信息匹配等 7 个以上选项的题目：双列网格，避免列表过长 */
.question-options.many-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 12px;
}

.question-options.many-options .question-option {
    margin-bottom: 0;
}

@media (max-width: 640px) {
    .question-options.many-options {
        grid-template-columns: 1fr;
    }
}

/* ===== 背单词模式（参考"不背单词"） ===== */

.learn-stats-card {
    display: flex;
    gap: 12px;
    margin-bottom: 18px;
}
.learn-stat {
    flex: 1;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 16px 12px;
    text-align: center;
}
.learn-stat-num {
    font-size: 26px;
    font-weight: 700;
    color: var(--primary);
}
.learn-stat-unit {
    font-size: 13px;
    color: var(--text-muted);
    margin-left: 2px;
}
.learn-stat-label {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 4px;
}

.learn-setup {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 16px;
    margin-bottom: 18px;
}
.learn-setup-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
    gap: 12px;
}
.learn-setup-row + .learn-setup-row {
    border-top: 1px dashed var(--border);
}
.learn-setup-label {
    font-size: 14px;
    color: var(--text-secondary);
    white-space: nowrap;
}
.learn-source-tabs {
    display: flex;
    gap: 8px;
}
.learn-source-tab {
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font-size: 13px;
    cursor: pointer;
    transition: var(--transition);
}
.learn-source-tab.active {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}
.learn-cat-select {
    max-width: 60%;
    padding: 6px 10px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text-secondary);
    font-size: 13px;
}
.learn-goal-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
}
.learn-goal-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--bg-secondary);
    color: var(--primary);
    font-size: 18px;
    cursor: pointer;
    transition: var(--transition);
}
.learn-goal-btn:hover {
    border-color: var(--primary);
}
.learn-goal-num {
    font-size: 20px;
    font-weight: 700;
    color: var(--primary);
    min-width: 24px;
    text-align: center;
}
.learn-goal-tip {
    font-size: 12px;
    color: var(--text-muted);
}

.learn-actions {
    display: flex;
    gap: 12px;
    margin-bottom: 10px;
}
.learn-hint {
    font-size: 12px;
    color: var(--text-muted);
    text-align: center;
}

/* 学习弹层：进度条 */
.learn-progress {
    height: 6px;
    background: var(--bg-secondary);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 16px;
}
.learn-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary), var(--primary-light));
    transition: width 0.3s ease;
}

/* 学习各阶段 */
.learn-stage {
    text-align: center;
    padding: 24px 16px;
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    margin-bottom: 18px;
}
.learn-word {
    font-family: var(--arabic-font);
    font-size: 44px;
    font-weight: 700;
    color: var(--primary);
    direction: rtl;
    cursor: pointer;
}
.learn-translit {
    font-size: 16px;
    color: var(--text-muted);
    margin-top: 6px;
}
.learn-cn {
    font-size: 22px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-top: 14px;
}
.learn-cn-big {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-secondary);
    margin: 8px 0 18px;
}
.learn-type {
    display: inline-block;
    margin-top: 8px;
    padding: 2px 10px;
    border-radius: 10px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    font-size: 12px;
    color: var(--text-muted);
}
.learn-example {
    font-family: var(--arabic-font);
    font-size: 19px;
    direction: rtl;
    color: var(--text-secondary);
    margin-top: 14px;
    line-height: 1.6;
}
.learn-example-cn {
    font-size: 13px;
    color: var(--text-muted);
    margin-top: 8px;
}
.learn-tip {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 14px;
}

/* 语境选义选项（复用 quiz-opt 样式，加间距） */
.learn-ctx-options {
    margin-top: 4px;
}
.quiz-opt.correct {
    background: #d1fae5 !important;
    color: #059669 !important;
    border-color: #059669 !important;
}
.quiz-opt.wrong {
    background: #fee2e2 !important;
    color: #dc2626 !important;
    border-color: #dc2626 !important;
}

/* 拼写输入 */
.learn-spell-input {
    width: 100%;
    max-width: 320px;
    margin: 12px auto 0;
    padding: 12px 16px;
    font-size: 20px;
    text-align: center;
    border: 2px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-card);
    color: var(--text-secondary);
    outline: none;
    transition: var(--transition);
    display: block;
    direction: ltr;
}
.learn-spell-input:focus {
    border-color: var(--primary);
}

/* 评级按钮 */
.learn-grade-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
}
.learn-grade-btn {
    flex: 1;
    padding: 14px 8px;
    border-radius: var(--radius);
    border: none;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition);
}
.learn-grade-btn.forget { background: #fee2e2; color: #dc2626; }
.learn-grade-btn.fuzzy  { background: #fef3c7; color: #d97706; }
.learn-grade-btn.known  { background: #d1fae5; color: #059669; }
.learn-grade-btn:hover { filter: brightness(0.94); }

/* ===== 背单词独立页面（参考"不背单词"） ===== */
.vl-stats {
    display: flex;
    gap: 12px;
    margin-bottom: 18px;
}
.vl-stat {
    flex: 1;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 14px 10px;
    text-align: center;
}
.vl-stat b {
    display: block;
    font-size: 26px;
    color: var(--primary);
}
.vl-stat span {
    font-size: 12px;
    color: var(--text-muted);
}

.vl-setup {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 14px 16px;
    margin-bottom: 18px;
}
.vl-setup-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
}
.vl-setup-row + .vl-setup-row {
    border-top: 1px dashed var(--border);
}
.vl-setup-row > span {
    font-size: 14px;
    color: var(--text-secondary);
    white-space: nowrap;
}
.vl-src-tabs {
    display: flex;
    gap: 8px;
}
.vl-src-tab {
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font-size: 13px;
    cursor: pointer;
    transition: var(--transition);
}
.vl-src-tab.active {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}
.vl-setup-row select {
    max-width: 60%;
    padding: 6px 10px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text-secondary);
    font-size: 13px;
}
.vl-goal {
    display: flex;
    align-items: center;
    gap: 10px;
}
.vl-goal button {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--bg-secondary);
    color: var(--primary);
    font-size: 18px;
    cursor: pointer;
}
.vl-goal b {
    font-size: 20px;
    color: var(--primary);
    min-width: 24px;
    text-align: center;
}
.vl-goal span {
    font-size: 12px;
    color: var(--text-muted);
}
.vl-actions {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
    /* v4.3.2 修复 ≤330px 极窄屏横向溢出：两个 .btn 各带 flex:1 但 min-width 默认 auto，
       压不到内容宽度以下，320px 视口下整行比容器宽 34px（桌面模式 42px），把文档撑宽。
       允许换行后窄屏自动排成两行（每个按钮 flex:1 占满一行），≥360px 仍是一行。 */
    flex-wrap: wrap;
}
.vl-actions .btn {
    flex: 1;
}
/* 批次4/5：额外复习入口行（今日学习单词复习 / 复习选中词书）——
   虚线边框与常规学习按钮区分，暗示「这只是额外巩固，不计入进度。」 */
.vl-actions-extra .btn {
    flex: 1;
    border-style: dashed;
}
/* 批次5（功能 B）：复习词书下拉行 */
.vl-review-book { margin-bottom: 20px; }
.vl-review-book .vl-setup-row { margin-bottom: 10px; }
/* 批次5：词组版式 —— 多词条目字号下调，否则长词组会顶出卡片 */
.vls-word.phrase { font-size: 34px; }
.vls-word.sm.phrase { font-size: 26px; }

/* 学习主区 */
.vl-study-area {
    max-width: 720px;
    margin: 0 auto;
}
.vl-placeholder {
    text-align: center;
    color: var(--text-muted);
    padding: 60px 20px;
    border: 2px dashed var(--border);
    border-radius: var(--radius-lg);
    font-size: 15px;
}
.vl-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 32px 24px;
    text-align: center;
    margin-bottom: 18px;
}
.vl-progress {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 24px;
}
.vl-progress-fill {
    flex: 1;
    height: 6px;
    background: var(--bg-secondary);
    border-radius: 3px;
    overflow: hidden;
    position: relative;
}
.vl-progress-fill::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: inherit;
    background: linear-gradient(90deg, var(--primary), var(--primary-light));
}
.vl-progress span {
    font-size: 13px;
    color: var(--text-muted);
    white-space: nowrap;
}
.vl-word {
    font-family: var(--arabic-font);
    font-size: 52px;
    font-weight: 700;
    color: var(--primary);
    direction: rtl;
    cursor: pointer;
    margin: 8px 0 4px;
}
.vl-translit {
    font-size: 17px;
    color: var(--text-muted);
    margin-bottom: 8px;
}
.vl-tip {
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 22px;
}
.vl-grade-btns {
    display: flex;
    gap: 10px;
    justify-content: center;
}
.vl-grade {
    flex: 1;
    max-width: 180px;
    padding: 14px 10px;
    border-radius: var(--radius);
    border: none;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition);
}
.vl-grade.forget { background: #fee2e2; color: #dc2626; }
.vl-grade.fuzzy  { background: #fef3c7; color: #d97706; }
.vl-grade.known  { background: #d1fae5; color: #059669; }
.vl-grade:hover { filter: brightness(0.94); }

/* 详情区 */
.vl-detail-loading {
    text-align: center;
    color: var(--text-muted);
    padding: 40px;
    font-size: 15px;
}
.vl-detail-local {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 24px;
    text-align: center;
    margin-bottom: 12px;
}
.vl-detail-local-word {
    font-family: var(--arabic-font);
    font-size: 34px;
    font-weight: 700;
    color: var(--primary);
    direction: rtl;
}
.vl-detail-local-translit { font-size: 15px; color: var(--text-muted); margin-top: 4px; }
.vl-detail-local-cn { font-size: 20px; font-weight: 600; color: var(--text-secondary); margin-top: 12px; }
.vl-detail-local-type { display: inline-block; margin-top: 10px; padding: 2px 10px; border-radius: 10px; background: var(--bg-secondary); font-size: 12px; color: var(--text-muted); }
.vl-detail-local-ex { font-family: var(--arabic-font); font-size: 18px; direction: rtl; color: var(--text-secondary); margin-top: 14px; line-height: 1.6; }
.vl-detail-local-excn { font-size: 13px; color: var(--text-muted); margin-top: 6px; }
.vl-detail-hint { font-size: 12px; color: var(--text-muted); margin-top: 12px; }

.vl-grade-feedback {
    text-align: center;
    font-size: 14px;
    color: var(--text-muted);
    margin: 6px 0 14px;
}
.vl-grade-feedback b { font-size: 15px; }
.vl-detail-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-bottom: 16px;
}
.vl-detail-actions .btn { min-width: 140px; }

/* 可选拼写 */
.vl-spell-box {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 22px;
    text-align: center;
}
.vl-spell-cn { font-size: 22px; font-weight: 700; color: var(--text-secondary); margin-bottom: 14px; }
.vl-spell-input {
    width: 100%;
    max-width: 320px;
    padding: 12px 16px;
    font-size: 20px;
    text-align: center;
    border: 2px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-card);
    color: var(--text-secondary);
    outline: none;
    display: block;
    margin: 0 auto 14px;
    direction: ltr;
}
.vl-spell-input:focus { border-color: var(--primary); }

/* 小结 */
.vl-summary {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 36px 24px;
    text-align: center;
}
.vl-summary-score {
    font-size: 56px;
    font-weight: 800;
    color: var(--primary);
}
.vl-summary-score span { font-size: 22px; font-weight: 600; margin-left: 2px; }
.vl-summary-text {
    color: var(--text-secondary);
    font-size: 15px;
    margin: 10px 0 22px;
    line-height: 1.7;
}

/* ===== 背单词：选词书页新增（今日计划 + 离线发音包） ===== */
.vl-plan-row {
    display: flex;
    gap: 12px;
    padding: 10px 0 2px;
}
.vl-plan-card {
    flex: 1;
    text-align: center;
    padding: 10px 8px;
    border-radius: var(--radius);
    background: var(--bg-secondary);
}
.vl-plan-card b {
    display: block;
    font-size: 22px;
    color: var(--primary);
}
.vl-plan-card.due b { color: #d97706; }
.vl-plan-card span {
    font-size: 12px;
    color: var(--text-muted);
}
.vl-pack-row {
    margin-top: 14px;
    text-align: center;
}
.vl-pack-btn {
    padding: 8px 16px;
    border-radius: 999px;
    border: 1px dashed var(--border);
    background: var(--bg-card);
    color: var(--text-secondary);
    font-size: 13px;
    cursor: pointer;
    transition: var(--transition);
}
.vl-pack-btn:hover { color: var(--primary); border-color: var(--primary); }
.vl-pack-btn:disabled { opacity: 0.55; cursor: default; }
.vl-pack-hint {
    display: block;
    margin-top: 8px;
    font-size: 12px;
    color: var(--text-muted);
}
.vl-pack-progress {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    font-size: 12px;
    color: var(--text-secondary);
}
.vl-pack-bar {
    flex: 1;
    height: 6px;
    border-radius: 3px;
    background: var(--bg-secondary);
    overflow: hidden;
}
.vl-pack-fill {
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, var(--primary), var(--primary-light));
    transition: width 0.3s ease;
}
.vl-pack-cancel {
    border: none;
    background: none;
    color: var(--primary);
    cursor: pointer;
    font-size: 12px;
}

/* ===== 背单词：全屏学习会话视图（参照"不背单词"APP） ===== */
.vls-view {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, #dbe7f5 0%, #e8eff9 45%, #d6e4f3 100%);
    overflow-y: auto;
}
body.dark .vls-view {
    background: linear-gradient(180deg, #16222f 0%, #1b2836 45%, #141e29 100%);
}

.vls-topbar {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px 6px;
    max-width: 720px;
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
}
.vls-back {
    width: 38px;
    height: 38px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.55);
    color: var(--text-primary);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    transition: var(--transition);
    flex: none;
}
.vls-back:hover { background: rgba(255, 255, 255, 0.85); }
body.dark .vls-back { background: rgba(255, 255, 255, 0.08); color: var(--text-primary); }
.vls-progress {
    flex: 1;
    height: 6px;
    border-radius: 3px;
    background: rgba(120, 140, 165, 0.25);
    overflow: hidden;
}
.vls-progress-fill {
    height: 100%;
    width: 0;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--primary), var(--primary-light));
    transition: width 0.3s ease;
}
.vls-count {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    white-space: nowrap;
}
/* ← 上一词（v4.6 需求 6）：会话顶栏的次级操作，弱化配色不抢主操作焦点 */
.vls-prev {
    flex: none;
    padding: 5px 10px;
    border: 1px solid rgba(120, 140, 165, 0.32);
    border-radius: 999px;
    background: transparent;
    color: var(--text-secondary);
    font-size: 12px;
    cursor: pointer;
    white-space: nowrap;
    transition: var(--transition);
}
.vls-prev:hover:not(:disabled) { background: rgba(120, 140, 165, 0.16); color: var(--text-primary); }
.vls-prev:disabled { opacity: 0.4; cursor: not-allowed; }
body.dark .vls-prev { border-color: rgba(255, 255, 255, 0.16); }
body.dark .vls-prev:hover:not(:disabled) { background: rgba(255, 255, 255, 0.08); }

/* ===== 学习页「上次未完成，是否继续」（v4.6 需求 5） ===== */
.vl-resume {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
    padding: 12px 16px;
    border: 1px solid rgba(37, 99, 235, 0.28);
    border-left: 4px solid var(--primary);
    border-radius: var(--radius);
    background: rgba(37, 99, 235, 0.07);
}
.vl-resume-text {
    flex: 1 1 240px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--text-primary);
}
.vl-resume-actions { display: flex; gap: 8px; flex: none; }
.vl-resume-actions .btn { padding: 7px 16px; font-size: 13px; }
body.dark .vl-resume { background: rgba(96, 165, 250, 0.12); border-color: rgba(96, 165, 250, 0.35); }

.vls-body {
    flex: 1;
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    padding: 12px 18px 40px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

/* 词卡 */
.vls-card {
    position: relative;
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.65);
    border-radius: 22px;
    box-shadow: 0 14px 40px rgba(90, 120, 160, 0.18);
    padding: 34px 26px 26px;
    text-align: center;
    animation: vlsCardIn 0.28s ease;
}
body.dark .vls-card {
    background: rgba(30, 42, 56, 0.8);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.35);
}
@keyframes vlsCardIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: none; }
}
.vls-word {
    font-family: var(--arabic-font);
    font-size: 54px;
    font-weight: 700;
    color: var(--text-primary);
    cursor: pointer;
    line-height: 1.25;
    word-break: break-word;
}
.vls-word.sm { font-size: 40px; }
.vls-translit {
    display: inline-block;
    margin: 10px auto 4px;
    padding: 3px 12px;
    border-radius: 999px;
    background: rgba(120, 140, 165, 0.14);
    color: var(--text-secondary);
    font-size: 15px;
    direction: ltr;
}
/* ===== 形态信息小字区（批次2 · 问题 4）=====
   复数 / 现在式 / 过去式 / 词根等注记（= w.cnNote，由 js/cn-note.js 从中文释义里拆出）。
   第 1/2/3 轮与复习两轮共用这一处、同一个位置（单词下方），不再"只在第 1 轮能看到"。
   注记里中阿文混排，靠浏览器 bidi 处理，不强制 direction（否则中文注记会整体翻到左边）。 */
/* v5.6：注记改由「阴性：…／复数：…／又作：…／搭配：…」多段组成，会比原来长，
   圆角下调 + 行高放宽，折行后仍是一块清晰的注记而不是一个巨大胶囊。 */
.vls-formnote {
    display: inline-block;
    margin: 6px auto 2px;
    padding: 4px 12px;
    border-radius: 14px;
    background: rgba(120, 140, 165, 0.10);
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.7;
    max-width: 560px;
    word-break: break-word;
    overflow-wrap: anywhere;
}
.vls-audio {
    position: absolute;
    top: 22px;
    right: 22px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: none;
    background: rgba(120, 140, 165, 0.14);
    font-size: 18px;
    cursor: pointer;
    transition: var(--transition);
}
.vls-audio:hover { transform: scale(1.08); background: rgba(120, 140, 165, 0.24); }
.vls-tip {
    margin: 26px 0 20px;
    font-size: 13px;
    color: var(--text-muted);
}
.vls-main-btn {
    display: block;
    width: 100%;
    max-width: 320px;
    margin: 26px auto 0;
    padding: 13px 0;
    border: none;
    border-radius: 999px;
    background: var(--primary);
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.25);
}
.vls-main-btn:hover { filter: brightness(1.06); transform: translateY(-1px); }

/* 释义 / 例句 */
.vls-meaning {
    margin: 18px auto 0;
    max-width: 520px;
    text-align: left;
}
.vls-meaning-line {
    font-size: 17px;
    line-height: 1.7;
    color: var(--text-primary);
}
.vls-pos {
    display: inline-block;
    margin-right: 8px;
    padding: 1px 8px;
    border-radius: 6px;
    background: rgba(37, 99, 235, 0.1);
    color: var(--primary);
    font-size: 13px;
    font-style: normal;
}
.vls-example {
    position: relative;
    margin: 18px auto 0;
    max-width: 520px;
    padding: 14px 16px;
    border-radius: 14px;
    background: rgba(120, 140, 165, 0.1);
    text-align: left;
}
.vls-example.empty {
    color: var(--text-muted);
    font-size: 13px;
    text-align: center;
    padding: 12px;
}
.vls-ex-ar {
    font-family: var(--arabic-font);
    font-size: 19px;
    line-height: 1.8;
    color: var(--text-primary);
    padding-right: 34px;
}
.vls-ex-cn {
    margin-top: 6px;
    font-size: 14px;
    color: var(--text-secondary);
}
.vls-ex-audio {
    position: absolute;
    right: 10px;
    bottom: 10px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: none;
    background: rgba(120, 140, 165, 0.18);
    font-size: 13px;
    cursor: pointer;
}
.vls-ex-audio:hover { background: rgba(120, 140, 165, 0.3); }

/* 复习评级 */
.vls-grade-btns {
    display: flex;
    gap: 12px;
    margin-top: 28px;
}
.vls-grade {
    flex: 1;
    padding: 13px 6px;
    border: none;
    border-radius: 14px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition);
}
.vls-grade.forget { background: #fee2e2; color: #dc2626; }
.vls-grade.fuzzy  { background: #fef3c7; color: #d97706; }
.vls-grade.know   { background: #d1fae5; color: #059669; }
.vls-grade:hover { filter: brightness(0.94); transform: translateY(-1px); }
body.dark .vls-grade.forget { background: rgba(220, 38, 38, 0.25); color: #fca5a5; }
body.dark .vls-grade.fuzzy  { background: rgba(217, 119, 6, 0.25); color: #fcd34d; }
body.dark .vls-grade.know   { background: rgba(5, 150, 105, 0.25); color: #6ee7b7; }

/* 自测选项 */
.vls-quiz-tip {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 14px;
}
.vls-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 22px;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}
.vls-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 14px;
    border: 1.5px solid rgba(120, 140, 165, 0.28);
    background: rgba(255, 255, 255, 0.6);
    color: var(--text-primary);
    font-size: 16px;
    text-align: left;
    cursor: pointer;
    transition: var(--transition);
}
body.dark .vls-option { background: rgba(255, 255, 255, 0.05); }
.vls-option:hover:not(:disabled) { border-color: var(--primary); transform: translateY(-1px); }
.vls-option:disabled { cursor: default; opacity: 0.75; }
.vls-opt-mark {
    flex: none;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(120, 140, 165, 0.16);
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}
.vls-option.correct {
    border-color: #059669;
    background: rgba(5, 150, 105, 0.12);
    opacity: 1;
}
.vls-option.correct .vls-opt-mark { background: #059669; color: #fff; }
.vls-option.wrong {
    border-color: #dc2626;
    background: rgba(220, 38, 38, 0.1);
    opacity: 1;
}
.vls-option.wrong .vls-opt-mark { background: #dc2626; color: #fff; }
/* 批次3（问题 5）：已判定的选项明确「不可再点」的观感（配合 disabled） */
.vls-option.answered { cursor: default; }
.vls-option.answered:not(.correct):not(.wrong) { opacity: 0.55; }
/* 误选项下方的一行注释：「← 这是「另一个单词」的意思」，其中单词可点开查词卡。
   必须是选项按钮的**兄弟节点**（disabled 控件内部的点击事件不会派发），所以单独占一行。 */
.vls-opt-note {
    margin: -6px 0 0 14px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--text-secondary);
}
.vls-opt-note-word {
    font-family: var(--arabic-font);
    color: var(--primary);
    border-bottom: 1px dashed var(--primary);
    cursor: pointer;
    padding: 0 2px;
}
.vls-opt-note-word:hover { opacity: 0.82; }
/* 批次3（问题 5）：复习评级后停留，显示「已记录 + 下一个」 */
.vls-graded { margin-top: 18px; text-align: center; }
.vls-graded-tip { font-size: 14px; color: var(--text-secondary); margin-bottom: 10px; }
/* 批次2（问题 3）第 3 轮「看中文想阿语」：选项是阿语词条，需要 RTL + 阿语字体 */
.vls-option.ar {
    font-family: var(--arabic-font);
    direction: rtl;
    font-size: 22px;
    line-height: 1.5;
    text-align: right;
    justify-content: flex-start;
}
.vls-option.ar .vls-opt-mark { direction: ltr; font-family: inherit; }
/* 第 3 轮题干：中文释义做主视觉（比选项更醒目，用户先看中文再想阿语） */
.vls-cn-prompt {
    font-size: 26px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.45;
    margin: 6px 0 2px;
    word-break: break-word;
}
/* 第 3 轮反馈里的阿语正确答案 */
.vls-ans-ar { font-family: var(--arabic-font); font-size: 20px; }
.vls-fb {
    margin: 20px auto 0;
    max-width: 480px;
    font-size: 15px;
}
.vls-fb.ok { color: #059669; }
.vls-fb.bad { color: #dc2626; }
.vls-fb .vls-main-btn { margin-top: 14px; }

/* 结算页 */
.vls-summary {
    margin: auto;
    text-align: center;
    padding: 40px 0;
}
.vls-sum-score {
    font-size: 64px;
    font-weight: 800;
    color: var(--primary);
}
.vls-sum-score span { font-size: 24px; font-weight: 600; margin-left: 2px; }
.vls-sum-text {
    color: var(--text-secondary);
    font-size: 15px;
    line-height: 1.9;
    margin: 12px 0 26px;
}
.vls-sum-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
}

/* 窄屏适配 */
@media (max-width: 560px) {
    .vls-word { font-size: 40px; }
    .vls-word.sm { font-size: 32px; }
    .vls-card { padding: 26px 18px 22px; border-radius: 18px; }
    .vls-body { padding: 10px 12px 32px; }
    .vls-grade { font-size: 14px; padding: 12px 4px; }
}

/* 三轮自测：轮次指示 + 例句题 */
.vls-stage {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin-bottom: 16px;
}
.vls-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(120, 140, 165, 0.3);
}
.vls-dot.on { background: var(--primary); }
.vls-stage b {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-left: 6px;
}
.vls-stage-tip {
    margin-top: 16px;
    font-size: 12px;
    color: var(--text-muted);
}
.vls-ex-quiz {
    font-family: var(--arabic-font);
    font-size: 24px;
    line-height: 1.9;
    color: var(--text-primary);
    margin-top: 12px;
    padding-right: 40px;
    text-align: start;
    word-break: break-word;
}
.vls-ex-mark {
    background: rgba(37, 99, 235, 0.14);
    color: var(--primary);
    border-radius: 4px;
    padding: 0 5px;
    font-weight: 700;
}
.vls-ex-cn.dim {
    opacity: 0.55;
    font-size: 13px;
}

/* ===== 例句内全词可点查词（v4.6 需求 1）：仅在「显示答案后」的版式生效 ===== */
/* 沿用阅读页 .ar-word 的交互样式，但把虚线下划线压淡，避免整句都是下划线显得嘈杂 */
.vls-ex-ar.linkable .vls-ex-word {
    border-bottom-color: rgba(26, 107, 79, 0.22);
    padding: 0;
}
.vls-ex-ar.linkable .vls-ex-word:hover {
    background: rgba(26, 107, 79, 0.1);
    border-bottom-color: var(--primary);
}
/* 目标词既有 <mark> 高亮、又可点击：hover 只加深一层，不改变高亮配色 */
.vls-ex-ar.linkable .vls-ex-word .vls-ex-mark { border-radius: 4px; }

/* ===== 批量 AI 预取按钮的运行态（v4.6 需求 2）：与普通操作按钮区分开 ===== */
.action-btn.is-running {
    border-color: var(--primary);
    color: var(--primary);
    background: rgba(37, 99, 235, 0.08);
    cursor: pointer;
}
body.dark .action-btn.is-running { background: rgba(96, 165, 250, 0.16); }

/* ===== 复习轮次提示（v4.6 需求 4）：两轮主观回忆，让用户知道当前第几轮/靠什么回忆 ===== */
.vls-round-tip {
    display: inline-block;
    margin: 0 auto 14px;
    padding: 3px 12px;
    border-radius: 999px;
    background: rgba(37, 99, 235, 0.1);
    color: var(--primary);
    font-size: 12px;
    font-weight: 600;
}
body.dark .vls-round-tip { background: rgba(96, 165, 250, 0.16); }

/* ===== 详细解析折叠区（v4.6 需求 3）：只在「显示答案后」渲染 ===== */
.vls-detail {
    margin: 16px auto 0;
    max-width: 520px;
    text-align: left;
}
.vls-detail-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 14px;
    border: 1px solid rgba(120, 140, 165, 0.28);
    border-radius: 12px;
    background: rgba(120, 140, 165, 0.08);
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
}
.vls-detail-toggle:hover { background: rgba(120, 140, 165, 0.16); }
.vls-detail-caret { color: var(--text-muted); font-size: 11px; }
.vls-detail-body {
    margin-top: 8px;
    padding: 12px 14px;
    border-radius: 12px;
    background: rgba(120, 140, 165, 0.07);
}
.vls-detail-row {
    display: flex;
    gap: 10px;
    padding: 5px 0;
    font-size: 13px;
    line-height: 1.7;
}
.vls-detail-row + .vls-detail-row { border-top: 1px solid rgba(120, 140, 165, 0.14); }
.vls-detail-label {
    flex: 0 0 68px;
    color: var(--text-muted);
    white-space: nowrap;
}
.vls-detail-value { flex: 1 1 auto; color: var(--text-primary); word-break: break-word; }
.vls-detail-chip {
    display: inline-block;
    margin: 2px 6px 2px 0;
    padding: 1px 8px;
    border-radius: 999px;
    background: rgba(37, 99, 235, 0.1);
    color: var(--primary);
    font-family: var(--arabic-font);
    font-size: 14px;
}
.vls-detail-chip-cn { margin-right: 10px; color: var(--text-secondary); }
.vls-detail-empty {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: var(--text-muted);
    font-size: 13px;
}

/* ===== AI 查不到时的降级块（批次1 · 问题 1/2）=====
   把「查询不到，请检查拼写」换成「说明原因 + 重试 + 手动输入」两条出路。
   与 .vls-detail-empty 同风格：浅底、圆角、不抢主操作视觉。 */
.vls-degrade {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 12px;
    margin: 6px 0;
    border-radius: 10px;
    background: rgba(255, 193, 7, 0.10);
    border: 1px solid rgba(255, 193, 7, 0.32);
}
.vls-degrade-tip {
    font-size: 13px;
    line-height: 1.5;
    color: var(--text, #333);
}
.vls-degrade-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
body.dark .vls-degrade { background: rgba(255, 193, 7, 0.10); border-color: rgba(255, 193, 7, 0.28); }

/* 手动输入的释义单独成行（「我的」标签）：与词库释义明确区分 */
.vls-meaning-line.vls-meaning-mine { margin-top: 4px; }
.vls-meaning-line.vls-meaning-mine .vls-pos {
    background: rgba(255, 193, 7, 0.22);
    color: var(--text, #333);
    border-radius: 4px;
    padding: 0 4px;
}
body.dark .vls-detail-toggle { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.12); }
body.dark .vls-detail-toggle:hover { background: rgba(255, 255, 255, 0.09); }
body.dark .vls-detail-body { background: rgba(255, 255, 255, 0.04); }
body.dark .vls-detail-row + .vls-detail-row { border-top-color: rgba(255, 255, 255, 0.08); }
body.dark .vls-detail-chip { background: rgba(96, 165, 250, 0.16); }

/* ===== 动词变位表（v4.6）：解析区底部的第二层折叠，只对动词出现 ===== */
.vls-conj {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(120, 140, 165, 0.18);
}
.vls-conj-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 12px;
    border: 1px dashed rgba(120, 140, 165, 0.32);
    border-radius: 10px;
    background: transparent;
    color: var(--text-secondary);
    font-size: 13px;
    cursor: pointer;
    transition: var(--transition);
}
.vls-conj-toggle:hover { background: rgba(120, 140, 165, 0.1); }
.vls-conj-caret { color: var(--text-muted); font-size: 11px; }
.vls-conj-body { margin-top: 8px; }
/* 变位表复用 .wd-cj-* 既有样式，这里只收一下首表的上边距，避免解析区内出现大块空白 */
.vls-conj-body .wd-group-title:first-child { margin-top: 4px; }
body.dark .vls-conj { border-top-color: rgba(255, 255, 255, 0.1); }
body.dark .vls-conj-toggle { border-color: rgba(255, 255, 255, 0.16); }
body.dark .vls-conj-toggle:hover { background: rgba(255, 255, 255, 0.07); }

/* 卡片顶部操作：＋ 生词本 / 熟悉 */
.vls-word-actions {
    position: absolute;
    top: 22px;
    left: 22px;
    display: flex;
    gap: 8px;
    z-index: 2;
}
.vls-mini-btn {
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid rgba(120, 140, 165, 0.3);
    background: rgba(255, 255, 255, 0.65);
    color: var(--text-secondary);
    font-size: 12px;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    transition: var(--transition);
}
.vls-mini-btn:hover:not(:disabled) {
    border-color: var(--primary);
    color: var(--primary);
    transform: translateY(-1px);
}
.vls-mini-btn.ok {
    background: rgba(5, 150, 105, 0.1);
    border-color: rgba(5, 150, 105, 0.3);
    color: #059669;
}
.vls-mini-btn.ok:hover:not(:disabled) {
    border-color: #059669;
    color: #059669;
    filter: brightness(0.97);
}
.vls-mini-btn:disabled {
    opacity: 0.6;
    cursor: default;
    background: rgba(5, 150, 105, 0.1);
    border-color: rgba(5, 150, 105, 0.25);
    color: #059669;
}
body.dark .vls-mini-btn {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-secondary, #9ca3af);
}
body.dark .vls-mini-btn.ok,
body.dark .vls-mini-btn:disabled {
    background: rgba(5, 150, 105, 0.18);
    color: #6ee7b7;
}
@media (max-width: 560px) {
    .vls-word-actions { top: 14px; left: 14px; }
    .vls-mini-btn { padding: 5px 10px; font-size: 11px; }
}

/* ===== 背单词：学习记录查看浮层（今日已学 / 打卡日历 / 累计学习 / 待复习 / 今日新词） ===== */
.vl-stat.clickable,
.vl-plan-card.clickable {
    cursor: pointer;
    transition: var(--transition);
}
.vl-stat.clickable:hover,
.vl-plan-card.clickable:hover {
    border-color: var(--primary);
    transform: translateY(-1px);
}

.vli-sub {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 12px;
    line-height: 1.6;
}
.vli-sub.dim {
    color: var(--text-muted);
    font-size: 12px;
    margin-top: 10px;
}
.vli-list {
    max-height: 52vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.vli-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius, 10px);
}
.vli-main { flex: 1; min-width: 0; }
.vli-word {
    font-family: var(--arabic-font);
    font-size: 19px;
    font-weight: 700;
    color: var(--text-primary);
    cursor: pointer;
    line-height: 1.4;
}
.vli-word:hover { color: var(--primary); }
.vli-cn {
    font-size: 13px;
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.vli-extra {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: none;
}
.vli-time {
    font-size: 12px;
    color: var(--text-muted);
    white-space: nowrap;
}
.vli-tag {
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}
.vli-tag.new { background: rgba(37, 99, 235, 0.12); color: var(--primary); }
.vli-tag.rev { background: rgba(217, 119, 6, 0.12); color: #d97706; }
.vli-tag.done { background: rgba(5, 150, 105, 0.12); color: #059669; }
.vli-tag.lvl { background: rgba(120, 140, 165, 0.16); color: var(--text-secondary); }
.vli-empty {
    text-align: center;
    color: var(--text-muted);
    font-size: 14px;
    padding: 36px 12px;
}

/* 打卡日历 */
.vli-cards {
    display: flex;
    gap: 10px;
    margin-bottom: 12px;
}
.vli-card-item {
    flex: 1;
    text-align: center;
    padding: 10px 6px;
    background: var(--bg-secondary);
    border-radius: var(--radius, 10px);
}
.vli-card-item b {
    display: block;
    font-size: 22px;
    color: var(--primary);
}
.vli-card-item span {
    font-size: 11px;
    color: var(--text-muted);
}
.vli-cal-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}
.vli-cal {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}
.vli-cal-head {
    text-align: center;
    font-size: 12px;
    color: var(--text-muted);
    padding: 4px 0;
}
.vli-cal-cell {
    text-align: center;
    font-size: 13px;
    padding: 7px 0;
    border-radius: 8px;
    color: var(--text-secondary);
}
.vli-cal-cell.blank { visibility: hidden; }
.vli-cal-cell.hit {
    background: rgba(5, 150, 105, 0.15);
    color: #059669;
    font-weight: 700;
}
.vli-cal-cell.today {
    box-shadow: inset 0 0 0 1.5px var(--primary);
}


/* ===== 自定义生词本 / 词组本：本子切换栏 + 本子选择浮层 ===== */

/* 顶部本子切换栏（生词页 / 词组页第一行） */
.book-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.book-bar-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    white-space: nowrap;
}

.book-select {
    flex: 1 1 180px;
    max-width: 320px;
    padding: 7px 12px;
    font-size: 14px;
    font-family: inherit;
    color: var(--text-primary);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius, 10px);
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.book-select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.book-btn {
    padding: 7px 12px;
    font-size: 13px;
    font-family: inherit;
    color: var(--primary);
    background: rgba(37, 99, 235, 0.08);
    border: 1px solid rgba(37, 99, 235, 0.25);
    border-radius: var(--radius, 10px);
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s ease;
}

.book-btn:hover {
    background: rgba(37, 99, 235, 0.16);
    transform: translateY(-1px);
}

.book-btn.danger {
    color: #dc2626;
    background: rgba(220, 38, 38, 0.07);
    border-color: rgba(220, 38, 38, 0.28);
}

.book-btn.danger:hover {
    background: rgba(220, 38, 38, 0.15);
}

/* 本子选择浮层（阅读页「加入总生词本 / 总词组本」时弹出） */
.book-picker-box {
    width: 420px;
}

.bp-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 42vh;
    overflow-y: auto;
    margin-bottom: 14px;
}

.bp-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    background: var(--bg-primary);
    border: 1.5px solid var(--border);
    border-radius: var(--radius, 10px);
    cursor: pointer;
    transition: all 0.18s ease;
}

.bp-row:hover {
    border-color: var(--primary);
}

.bp-row.active {
    border-color: var(--primary);
    background: rgba(37, 99, 235, 0.07);
    box-shadow: 0 2px 10px rgba(37, 99, 235, 0.12);
}

.bp-radio {
    font-size: 13px;
    line-height: 1;
}

.bp-name {
    flex: 1;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bp-tag {
    display: inline-block;
    margin-left: 8px;
    padding: 1px 8px;
    font-size: 11px;
    font-weight: 600;
    color: var(--primary);
    background: rgba(37, 99, 235, 0.12);
    border-radius: 999px;
    vertical-align: 1px;
}

.bp-count {
    font-size: 12px;
    color: var(--text-muted, var(--text-secondary));
    white-space: nowrap;
}

.bp-create-row {
    display: flex;
    gap: 8px;
    margin-bottom: 14px;
}

.bp-input {
    flex: 1;
    padding: 9px 12px;
    font-size: 14px;
    font-family: inherit;
    color: var(--text-primary);
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: var(--radius, 10px);
}

.bp-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.bp-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

/* 暗色模式适配 */
body.dark .book-select,
body.dark .bp-input {
    background: rgba(17, 24, 39, 0.6);
    color: var(--text-primary, #e5e7eb);
}

body.dark .bp-row {
    background: rgba(17, 24, 39, 0.55);
}

body.dark .book-btn {
    background: rgba(96, 165, 250, 0.12);
    color: #93c5fd;
    border-color: rgba(96, 165, 250, 0.3);
}

body.dark .book-btn.danger {
    color: #fca5a5;
    background: rgba(239, 68, 68, 0.14);
    border-color: rgba(239, 68, 68, 0.3);
}

body.dark .bp-row.active {
    background: rgba(96, 165, 250, 0.1);
}

body.dark .bp-tag {
    color: #93c5fd;
    background: rgba(96, 165, 250, 0.16);
}


/* ===== AI 技能（联网搜索 / 流式加速） ===== */

/* 对话面板标题栏的技能胶囊：未开启时压低存在感，开启时用主色描边 */
.action-btn.ai-skill-toggle {
    opacity: 0.55;
}

.action-btn.ai-skill-toggle:hover {
    opacity: 1;
}


/* ===== 卷（v4.8）：本子的二级容器 ===== */
/* 颜色/圆角/过渡一律引用上面的 CSS 变量，不写死新色值；触摸目标不小于 44px（平板） */

.volume-panel {
    margin: -4px 0 12px;
}

/* 老版 book-store.js 无卷能力时面板 innerHTML 为空 → 整块不占位 */
.volume-panel:empty {
    display: none;
}

/* 折叠头：整行可点，右侧箭头指示展开态 */
.volume-head {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 8px 12px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius, 10px);
    cursor: pointer;
    transition: var(--transition, all 0.2s ease);
}

.volume-head:hover {
    border-color: var(--primary-light, var(--primary));
}

.volume-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--primary);
    white-space: nowrap;
}

.volume-sub {
    flex: 1;
    font-size: 12px;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.volume-arrow {
    font-size: 12px;
    color: var(--text-muted);
}

/* 展开体：左侧一条竖线 + 缩进，视觉上表明「卷从属于本」 */
.volume-body {
    margin: 6px 0 0 12px;
    padding: 8px 0 0 14px;
    border-left: 2px solid var(--border);
}

.volume-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 8px 10px;
    border-radius: var(--radius-sm, 8px);
    transition: var(--transition, all 0.2s ease);
}

.volume-row:hover {
    background: var(--bg-secondary);
}

/* 「未分卷」是虚拟卷：没有重命名/删除按钮，整体弱化 */
.volume-row.none {
    opacity: 0.7;
}

.volume-name {
    flex: 1;
    font-size: 14px;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.volume-count {
    font-size: 12px;
    color: var(--text-muted);
    white-space: nowrap;
}

.volume-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    font-size: 14px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm, 8px);
    cursor: pointer;
    transition: var(--transition, all 0.2s ease);
}

.volume-btn:hover {
    border-color: var(--primary);
}

.volume-btn.danger:hover {
    border-color: var(--accent);
}

.volume-actions {
    padding: 6px 10px 2px;
}

/* 词条卡片上的卷标签：未分卷不渲染，所以只在真实归属时出现 */
.saved-vocab-vol {
    margin-top: 2px;
    font-size: 11px;
    color: var(--secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 暗色模式适配（与既有 body.dark .book-* / .bp-* 同款处理） */
body.dark .volume-head,
body.dark .volume-btn {
    background: rgba(17, 24, 39, 0.55);
}

body.dark .volume-row:hover {
    background: rgba(17, 24, 39, 0.45);
}

/* 选词页「选词范围」摘要（未做多选时显示「内置词库 · 全部 · N 词」） */
.vl-range-sum {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.6;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ===== ✏️ 手动编辑浮层（v5.10，生词 / 词组 / 词汇库扩充共用）=====
   顶部键盘总开关 + 字段区 + 小字实时预览 + 底部保存/取消。 */

.ve-box {
    padding: 18px 18px 16px;
}

.ve-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.ve-title {
    font-size: 16px;
    font-weight: 700;
}

.ve-kbseg {
    display: inline-flex;
    gap: 4px;
    padding: 3px;
    border-radius: 999px;
    background: var(--bg-primary);
    border: 1px solid var(--border);
}

.ve-kbbtn {
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.8;
    padding: 2px 10px;
    border-radius: 999px;
    cursor: pointer;
    transition: var(--transition);
}

.ve-kbbtn.active {
    background: var(--primary);
    color: #fff;
}

.ve-hint {
    margin: 8px 0 4px;
    font-size: 12px;
    color: var(--text-muted);
}

.ve-body {
    display: grid;
    gap: 8px;
    margin: 10px 0 12px;
}

.ve-field {
    display: grid;
    grid-template-columns: 92px 1fr;
    align-items: center;
    gap: 8px;
}

.ve-label {
    font-size: 12.5px;
    color: var(--text-muted);
    text-align: right;
}

.ve-input {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg-primary);
    color: inherit;
    font-size: 14px;
    line-height: 1.7;
}

.ve-input.ve-term {
    /* 阿语 / 西语 / 英语词形：按内容自动方向，长串不溢出 */
    font-family: inherit;
    overflow-wrap: anywhere;
}

.ve-input.ve-cn {
    font-size: 13.5px;
}

.ve-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(26, 107, 79, .14);
}

.ve-preview {
    border: 1px dashed var(--border);
    border-radius: 10px;
    padding: 8px 10px;
    background: rgba(120, 140, 165, 0.07);
    margin-bottom: 4px;
}

.ve-preview-title {
    font-size: 11.5px;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.ve-preview-body {
    font-size: 12.5px;
    line-height: 1.8;
    color: var(--text-secondary);
    overflow-wrap: anywhere;
    unicode-bidi: plaintext;
    min-height: 1.4em;
}

.ve-preview-empty {
    color: var(--text-muted);
}

.ve-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 12px;
}

body.dark .ve-input,
body.dark .ve-kbseg {
    background: rgba(17, 24, 39, 0.55);
}

/* 生词本列表行的「✏️ 编辑」按钮（与 🔊 / 🗑️ 同款） */
.saved-vocab-edit {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 15px;
    line-height: 1;
    padding: 4px 2px;
    opacity: .75;
    transition: var(--transition);
}

.saved-vocab-edit:hover {
    opacity: 1;
}

/* ===== 设置页「☁️ 云端上传（全部数据）」（v5.10）=====
   分类状态总览：每类一行「名称 + 本地条数·体积 + 状态徽标」，下面两个手动上传按钮。 */

#cloudUploadStats {
    display: grid;
    gap: 4px;
    margin: 10px 0 12px;
    max-height: 260px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

#cloudUploadStats .cu-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 8px;
    border-radius: 8px;
    background: var(--bg-primary);
    font-size: 12.5px;
    line-height: 1.6;
}

#cloudUploadStats .cu-name {
    flex: 1;
    min-width: 0;
    color: var(--text-primary, #1F2937);
    overflow-wrap: anywhere;
}

#cloudUploadStats .cu-tag {
    display: inline-block;
    margin-left: 6px;
    padding: 0 5px;
    border-radius: 999px;
    font-size: 10.5px;
    color: var(--text-muted);
    border: 1px solid var(--border);
}

#cloudUploadStats .cu-meta {
    flex: none;
    font-size: 11.5px;
    color: var(--text-muted);
    white-space: nowrap;
}

#cloudUploadStats .cu-badge {
    flex: none;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 11px;
    white-space: nowrap;
}

#cloudUploadStats .cu-badge-ok {
    background: rgba(22, 163, 74, .12);
    color: #16a34a;
}

#cloudUploadStats .cu-badge-pending {
    background: rgba(217, 119, 6, .14);
    color: #d97706;
}

#cloudUploadStats .cu-badge-off {
    background: rgba(107, 114, 128, .14);
    color: var(--text-muted);
}

#cloudUploadStats .cu-foot {
    font-size: 11.5px;
    color: var(--text-muted);
    padding: 2px 8px;
}

.cu-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.cu-actions .btn:disabled {
    cursor: not-allowed;
}

.cu-progress {
    margin-top: 10px;
    font-size: 12.5px;
    line-height: 1.7;
    color: var(--text-secondary);
    min-height: 1.2em;
    overflow-wrap: anywhere;
    unicode-bidi: plaintext;
}

.cu-progress-run { color: var(--primary); }
.cu-progress-ok { color: #16a34a; }
.cu-progress-bad { color: #dc2626; }

body.dark #cloudUploadStats .cu-row {
    background: rgba(17, 24, 39, 0.55);
}

/* ===== 词汇库「🌱 持续录入新词」（v5.9）=====
   面板内容由 js/vocab-feed.js 动态渲染：三语链接 + 专用模型 + 参数 + 进度日志 + 拒收复核。
   要点：链接框可多行粘贴；阿语/西语长文本不截断；日志与拒收列表各自可滚动，不把设置页拉太长。 */

#vocabFeedPanel .ff-params {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 18px;
    align-items: flex-end;
    margin: 10px 0 6px;
}

#vocabFeedPanel .ff-param {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

#vocabFeedPanel .ff-param label {
    font-size: 12px;
    color: var(--text-muted);
}

#vocabFeedPanel .ff-param input {
    width: 110px;
    padding: 6px 8px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-primary);
    color: inherit;
    font-size: 13px;
}

#vocabFeedPanel .ff-check {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--text-secondary);
    cursor: pointer;
    user-select: none;
}

#vocabFeedPanel .ff-scope {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    margin: 8px 0 12px;
    font-size: 13px;
    color: var(--text-secondary);
}

#vocabFeedPanel .ff-langs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 10px;
}

#vocabFeedPanel .ff-lang {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 10px 10px 8px;
    background: var(--bg-primary);
}

#vocabFeedPanel .ff-lang.is-current {
    border-color: var(--primary);
    box-shadow: 0 0 0 1px rgba(26, 107, 79, .12);
}

#vocabFeedPanel .ff-lang-head {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 6px;
}

#vocabFeedPanel .ff-cur {
    font-size: 11px;
    font-weight: 400;
    color: var(--primary);
    border: 1px solid var(--primary);
    border-radius: 999px;
    padding: 0 6px;
    line-height: 1.6;
}

#vocabFeedPanel .ff-urls {
    width: 100%;
    box-sizing: border-box;
    min-height: 62px;
    resize: vertical;
    padding: 8px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-secondary, #fff);
    color: inherit;
    font-size: 12px;
    line-height: 1.6;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    direction: ltr;
    text-align: left;
    /* 链接里可能带长路径：允许在任意处断行，不撑破面板 */
    overflow-wrap: anywhere;
}

#vocabFeedPanel .ff-model-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
}

#vocabFeedPanel .ff-model-row label {
    font-size: 12px;
    color: var(--text-muted);
    flex: none;
}

#vocabFeedPanel .ff-model-row select {
    flex: 1;
    min-width: 0;
    padding: 6px 8px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-secondary, #fff);
    color: inherit;
    font-size: 12px;
}

#vocabFeedPanel .ff-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 12px 0 8px;
}

#vocabFeedPanel .ff-status {
    font-size: 13px;
    line-height: 1.7;
    color: var(--text-secondary);
    margin-bottom: 6px;
}

#vocabFeedPanel .ff-log-title {
    font-size: 12px;
    color: var(--text-muted);
    margin: 8px 0 4px;
}

#vocabFeedPanel .ff-logs,
#vocabFeedPanel .ff-rejects {
    max-height: 168px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

#vocabFeedPanel .ff-log {
    font-size: 12px;
    line-height: 1.7;
    color: var(--text-secondary);
    padding: 2px 0;
    border-bottom: 1px dashed var(--border);
    /* 阿语 + 中文混排的日志行：按内容自动决定方向，长串断行不溢出 */
    unicode-bidi: plaintext;
    overflow-wrap: anywhere;
}

#vocabFeedPanel .ff-reject {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    border-bottom: 1px dashed var(--border);
}

#vocabFeedPanel .ff-reject-term {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    /* 阿语/西语词形：右对齐显示，保留原词不截断 */
    unicode-bidi: plaintext;
    overflow-wrap: anywhere;
}

#vocabFeedPanel .ff-reject-why {
    flex: none;
    font-size: 11.5px;
    color: var(--text-muted);
}

/* v5.12：拒绝行上的 AI 复核结论（接受但未收录 / 维持拒收 / 复核失败） */
#vocabFeedPanel .ff-reject-note {
    flex: 1 1 100%;
    font-size: 11.5px;
    line-height: 1.6;
    color: var(--text-muted);
    unicode-bidi: plaintext;
    overflow-wrap: anywhere;
}

#vocabFeedPanel .ff-reject-btn {
    flex: none;
    padding: 3px 8px;
    font-size: 12px;
}

/* 暗色模式（与既有 body.dark 同款处理） */
body.dark #vocabFeedPanel .ff-lang,
body.dark #vocabFeedPanel .ff-param input,
body.dark #vocabFeedPanel .ff-model-row select {
    background: rgba(17, 24, 39, 0.55);
}

body.dark #vocabFeedPanel .ff-urls {
    background: rgba(17, 24, 39, 0.55);
}

/* ===== 设置页小条化（v5.11）=====
   设置主页只留导航小条（图标 + 标题 + 箭头，纯标题不读当前值），点整行进二级页；
   二级页顶部为「← 设置」细返回条，下方沿用原 settings-layout/settings-card。 */

#page-settings .settings-nav-row {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 16px 18px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 15px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease, transform .06s ease;
}

#page-settings .settings-nav-row:hover {
    border-color: var(--primary);
    box-shadow: 0 2px 10px rgba(26, 107, 79, 0.10);
}

#page-settings .settings-nav-row:active {
    transform: scale(0.995);
}

#page-settings .snr-icon {
    flex: none;
    font-size: 20px;
    line-height: 1;
}

#page-settings .snr-title {
    flex: 1;
    min-width: 0;
}

#page-settings .snr-arrow {
    flex: none;
    font-size: 18px;
    color: var(--text-muted);
    line-height: 1;
}

/* 二级页顶部返回条 */
.settings-sub-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.settings-sub-header h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
}

.settings-sub-header .sub-back {
    padding: 6px 12px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--bg-primary);
    color: var(--text-secondary);
    font-size: 13px;
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease;
}

.settings-sub-header .sub-back:hover {
    border-color: var(--primary);
    color: var(--primary);
}

body.dark #page-settings .settings-nav-row,
body.dark .settings-sub-header .sub-back {
    background: rgba(17, 24, 39, 0.55);
}

/* ===== 选词范围浮层（v4.8：本 × 卷 树形多选） ===== */

.rrange-box {
    width: 520px;
    max-width: calc(100vw - 32px);
}

.rrange-hint {
    margin-bottom: 10px;
    font-size: 12px;
    line-height: 1.7;
    color: var(--text-muted);
}

.rrange-list {
    max-height: 52vh;
    overflow-y: auto;
    margin-bottom: 12px;
}

/* 分组标题：没有点击行为，只做视觉分段 */
.rrange-sec {
    padding: 10px 4px 6px;
    font-size: 12px;
    font-weight: 700;
    color: var(--primary);
    border-bottom: 1px dashed var(--border);
}

.rrange-row {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;          /* 平板触摸目标 */
    padding: 6px 8px;
    border-radius: var(--radius-sm, 8px);
    transition: var(--transition, all 0.2s ease);
}

.rrange-row:hover {
    background: var(--bg-secondary);
}

/* 二级缩进：卷 / 未分卷 / 词库分类 */
.rrange-row.d1 {
    padding-left: 24px;
}

.rrange-arrow {
    flex: 0 0 20px;
    width: 20px;
    text-align: center;
    font-size: 11px;
    color: var(--text-muted);
    cursor: pointer;
}

.rrange-arrow.blank {
    cursor: default;
}

.rrange-hit {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
    cursor: pointer;
}

.rrange-chk {
    flex: 0 0 auto;
    font-size: 13px;
    line-height: 1;
}

.rrange-name {
    flex: 1;
    min-width: 0;
    font-size: 14px;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rrange-count {
    flex: 0 0 auto;
    font-size: 12px;
    color: var(--text-muted);
    white-space: nowrap;
}

.rrange-foot {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.rrange-foot .btn {
    padding: 7px 14px;
    font-size: 13px;
}

.rrange-sum {
    flex: 1;
    min-width: 140px;
    font-size: 12px;
    line-height: 1.6;
    color: var(--text-secondary);
}

body.dark .rrange-row:hover {
    background: rgba(17, 24, 39, 0.45);
}


/* =====================================================================
   默写板块（v4.8）
   沿用既有设计语言：颜色/圆角/过渡一律引用 CSS 变量，触摸目标 ≥ 44px，
   结果卡用 主色绿 / 辅色金 / 强调红 三色区分 正确 / 部分正确 / 错误。
   ===================================================================== */

/* ---- 背单词页的默写入口 ---- */
.vl-dict-entry {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px dashed var(--border);
}

.dict-explain-chk {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--text-secondary);
    cursor: pointer;
}

.dict-explain-chk input {
    width: 18px;
    height: 18px;
    accent-color: var(--primary);
    cursor: pointer;
}

.dict-avail {
    margin: 4px 0 6px;
    font-size: 12px;
    line-height: 1.7;
    color: var(--primary);
}

.dict-avail.off {
    color: var(--text-muted);
}

/* ---- 默写卡 ---- */
.dict-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.dict-prompt {
    text-align: center;
    padding: 6px 4px 2px;
}

.dict-cn {
    font-size: 30px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--text-primary);
}

.dict-type {
    margin-top: 6px;
    font-size: 12px;
    color: var(--text-muted);
}

.dict-note {
    margin-top: 4px;
    font-size: 12px;
    color: var(--text-secondary);
}

.dict-hint {
    margin-top: 10px;
    font-size: 12px;
    color: var(--text-muted);
}

/* ---- 输入通道切换 ---- */
.dict-tabs {
    display: flex;
    gap: 8px;
    justify-content: center;
}

.dict-tab {
    min-height: 44px;
    padding: 8px 18px;
    font-size: 14px;
    font-family: inherit;
    color: var(--text-secondary);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 999px;
    cursor: pointer;
    transition: var(--transition, all 0.2s ease);
}

.dict-tab:hover {
    border-color: var(--primary);
}

.dict-tab.active {
    color: #fff;
    background: var(--primary);
    border-color: var(--primary);
}

.dict-degrade {
    padding: 8px 12px;
    font-size: 12px;
    line-height: 1.7;
    color: var(--text-secondary);
    background: var(--bg-secondary);
    border: 1px dashed var(--border);
    border-radius: var(--radius, 10px);
}

/* ---- 手写画布 ----
   touch-action:none 是硬要求：不写的话滚动与双击缩放会打断笔画。
   （js/dictation-ink.js 的 create() 还会再写一遍内联样式兜底） */
.dict-ink {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#dictInkCanvas {
    display: block;
    width: 100%;
    height: 33vh;
    min-height: 180px;
    touch-action: none;
    background: #fff;
    border: 1px dashed var(--border);
    border-radius: var(--radius, 10px);
    cursor: crosshair;
}

.dict-ink-tools {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.dict-ink-tools button {
    min-height: 40px;
    padding: 6px 14px;
    font-size: 13px;
    font-family: inherit;
    color: var(--text-secondary);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm, 8px);
    cursor: pointer;
    transition: var(--transition, all 0.2s ease);
}

.dict-ink-tools button:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.dict-penonly {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-muted);
    cursor: pointer;
}

.dict-penonly input {
    width: 18px;
    height: 18px;
    accent-color: var(--primary);
    cursor: pointer;
}

/* ---- 键盘通道 ---- */
.dict-input {
    width: 100%;
    min-height: 48px;
    padding: 10px 14px;
    font-size: 22px;
    font-family: inherit;
    color: var(--text-primary);
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius, 10px);
    box-sizing: border-box;
}

.dict-input:focus {
    outline: none;
    border-color: var(--primary);
}

/* ---- 结果卡（三色语义） ---- */
.dict-res-slot {
    display: none;
}

.dict-res {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px 16px;
    border-radius: var(--radius, 10px);
    border: 1px solid var(--border);
    background: var(--bg-card);
}

.dict-res.pending {
    color: var(--text-secondary);
}

.dict-res.correct {
    border-color: var(--primary);
    background: rgba(45, 157, 111, 0.10);
}

.dict-res.partial {
    border-color: var(--secondary);
    background: rgba(200, 164, 90, 0.14);
}

.dict-res.wrong {
    border-color: var(--accent);
    background: rgba(212, 67, 42, 0.10);
}

.dict-res.unknown {
    border-style: dashed;
}

.dict-res-head {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
}

.dict-res-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* ===== 全卷模考（v5.7）：一页串联多个题型卷，每卷一个带题型的区块头 ===== */
.full-paper-section {
    margin-bottom: 22px;
    padding-bottom: 6px;
    border-bottom: 1px dashed var(--border);
}

.full-paper-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.full-paper-sec-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 6px 0 10px;
    padding: 8px 12px;
    border-radius: 10px;
    background: rgba(120, 140, 165, 0.10);
    font-size: 13px;
    color: var(--text-secondary);
}

.full-paper-sec-head .fps-idx {
    font-weight: 700;
    color: var(--primary);
}

.full-paper-sec-head .fps-type {
    padding: 1px 8px;
    border-radius: 999px;
    background: rgba(120, 140, 165, 0.16);
}

.full-paper-sec-head .fps-title {
    flex: 1 1 160px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.full-paper-sec-head .fps-count {
    font-variant-numeric: tabular-nums;
}

.fps-report-title {
    margin: 10px 0 4px;
    font-size: 12px;
    color: var(--text-muted);
}

/* v5.7 手动校对对照区：你写的 / 正确写法 并排给出，自己核对 */
.dict-res-compare {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px 0 2px;
}

.dict-res-compare .dict-res-row {
    align-items: baseline;
}

.dict-res-speak {
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 15px;
    padding: 0 2px;
    line-height: 1;
}

.dict-res-label {
    font-size: 12px;
    color: var(--text-muted);
    white-space: nowrap;
}

.dict-res-ar {
    font-family: var(--arabic-font);
    font-size: 24px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--text-primary);
    word-break: break-word;
}

.dict-res-ar.correct {
    color: var(--primary);
}

.dict-res-tip {
    font-size: 12px;
    line-height: 1.8;
    color: var(--text-secondary);
}

.dict-res-tip b {
    font-family: var(--arabic-font);
    font-size: 16px;
    color: var(--text-primary);
}

.dict-res-ai {
    padding-top: 6px;
    border-top: 1px dashed var(--border);
    font-size: 12px;
    line-height: 1.8;
    color: var(--text-secondary);
}

.dict-res-actions {
    display: flex;
    gap: 10px;
    margin-top: 4px;
}

.dict-res-actions .vls-main-btn {
    flex: 1;
}

.vls-main-btn.ghost {
    color: var(--text-secondary);
    background: transparent;
    border: 1px solid var(--border);
}

.dict-footnote {
    font-size: 11px;
    line-height: 1.7;
    text-align: center;
    color: var(--text-muted);
}

/* 暗色模式适配 */
body.dark #dictInkCanvas,
body.dark .dict-input {
    background: #f7f7f7;   /* 手写/输入区保持浅底：深色下也要保证笔迹对比度 */
    color: #1a1a2e;
}




.action-btn.ai-skill-toggle.on {
    opacity: 1;
    color: var(--primary);
    border-color: var(--primary);
    background: rgba(26, 107, 79, 0.08);
}

/* 流式草稿区：按原样保留换行与空格，逐字追加时不会被折叠成一行 */
.chat-body.streaming {
    white-space: pre-wrap;
    word-break: break-word;
    text-align: start;
}

/* 检索状态行：搜索中 / 完成 / 失败三态 */
.ai-skill-status {
    font-size: 12px;
    line-height: 1.6;
    margin-bottom: 8px;
    padding: 6px 10px;
    border: 1px dashed var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-primary);
    color: var(--text-secondary);
}

.ai-skill-status.searching {
    border-style: solid;
    color: var(--primary);
}

.ai-skill-status.error {
    color: var(--accent);
    border-color: var(--accent);
}

/* 参考来源列表 */
.ai-sources {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--border);
    font-size: 12px;
    line-height: 1.7;
}

.ai-sources-title {
    margin-bottom: 6px;
    color: var(--text-muted);
}

.ai-sources-list {
    margin: 0;
    padding-left: 20px;
}

.ai-sources-list li {
    margin-bottom: 4px;
    color: var(--text-secondary);
}

.ai-source-link {
    color: var(--primary);
    text-decoration: none;
    word-break: break-word;
}

.ai-source-link:hover {
    text-decoration: underline;
}

.ai-source-host {
    font-size: 11px;
    color: var(--text-muted);
}

/* 设置页：复选框式技能开关（默认 label 是 block，这里改成一行） */
.skill-switch {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    margin-bottom: 0;
}

.skill-switch input[type="checkbox"] {
    width: auto;
    margin: 0;
    padding: 0;
    flex: none;
}

/* 窄屏下技能胶囊换行显示，避免挤掉「新对话」 */
@media (max-width: 640px) {
    .output-actions .ai-skill-toggle {
        font-size: 12px;
        padding: 5px 9px;
    }
}

body.dark .ai-skill-status {
    background: rgba(255, 255, 255, 0.04);
}

body.dark .action-btn.ai-skill-toggle.on {
    background: rgba(45, 157, 111, 0.18);
}

/* 等待期进度（出题/解析等无法边流边显示的流程） */
.gen-progress-line {
    margin-top: 10px;
    font-size: 13px;
    color: var(--text-muted);
    min-height: 18px;
}

/* ===== cn/cnNote 注记小字（v3.9 数据层拆分：注记只在学习/查询场景展示，测试选项不含） ===== */
.cnnote {
    margin-left: 6px;
    font-size: 0.82em;
    color: var(--text-muted, #8a93a6);
    word-break: break-word;
}

/* ==================================================================
   三语专用键盘（v4.2）：阿语(RTL+音符) / EN / ES —— 见 js/keyboard.js
   固定底部容器；颜色全部走主题变量，深色模式自动跟随。
   注意：全局文档是 dir="rtl"，容器必须强制 direction:ltr，否则键序被反转。
   ================================================================== */
/* 专用实色配色（v4.2.2 真机修复）：主题的 --bg-secondary/--bg-card/--border
   是毛玻璃设计的半透明色，键盘必须完全不透明、不依赖主题透明度继承。
   变量定义在 #kbRoot 上，body.dark #kbRoot 覆盖，不污染全局 :root。 */
#kbRoot {
    --kb-bg: #f4f1e8;           /* 容器实色（浅色 --bg-secondary 的不透明底） */
    --kb-key-bg: #ffffff;       /* 普通键实色 */
    --kb-key-soft: #eae6da;     /* special 键 / 按下底色 */
    --kb-border: #d8d0c0;       /* 实色边框 */
    --kb-shadow: 0 -6px 24px rgba(31, 58, 47, 0.16), 0 -1px 0 rgba(31, 58, 47, 0.10);
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 4200; /* v5.11：高于所有弹窗浮层（最高 4000，如改词/文本输入的 .study-overlay）——
                      曾是 1500「低于浮层」，结果浮层里（改词浮层）点输入框键盘弹了但被整个盖住，看起来像没反应 */
    max-width: 760px;
    margin: 0 auto;
    direction: ltr;
    unicode-bidi: isolate;
    background: var(--kb-bg);
    border-top: 1px solid var(--kb-border);
    box-shadow: var(--kb-shadow);
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    overscroll-behavior: contain;
}
body.dark #kbRoot {
    --kb-bg: #282e29;
    --kb-key-bg: #202621;
    --kb-key-soft: #1b201c;
    --kb-border: #3a423b;
    --kb-shadow: 0 -6px 24px rgba(0, 0, 0, 0.45), 0 -1px 0 rgba(0, 0, 0, 0.5);
}
#kbRoot.kb-open { display: block; }
#kbRoot.kb-system .kb-panel { display: none; } /* 系统键盘模式：只显示联想条 + 返回按钮 */
#kbRoot.kb-h-compact  { --kb-key-h: 40px; }
#kbRoot.kb-h-standard { --kb-key-h: 48px; }

/* 键盘打开时页面底部让位（高度由 keyboard.js 按容器实际高度动态写入） */
body.kb-open { padding-bottom: var(--kb-space, 0px); transition: padding-bottom 0.12s ease; }

/* 专用键盘接管期间隐藏原生光标与选区（自绘假光标代替） */
.kb-active { caret-color: transparent; }

/* ===== 假光标 ===== */
#kbCaret {
    display: none;
    position: fixed;
    width: 2px;
    background: var(--primary);
    border-radius: 1px;
    z-index: 4201; /* v5.11：跟随 #kbRoot（4200）提到浮层之上——假光标画在输入框位置，浮层里也要可见 */
    pointer-events: none;
    box-shadow: 0 0 4px rgba(26, 107, 79, 0.45);
}
#kbCaret.kb-caret-show { display: block; animation: kbCaretBlink 1.06s steps(1) infinite; }
@keyframes kbCaretBlink { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0; } }

/* ===== 查词结果区（键盘上方 ≤3 行）===== */
.kb-results {
    border-bottom: 1px solid var(--kb-border);
    background: var(--kb-key-bg);
    overflow: hidden;
}
.kb-result {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 12px;
    min-height: 34px;
    cursor: pointer;
}
.kb-result + .kb-result { border-top: 1px dashed var(--kb-border); }
.kb-result:active { background: var(--kb-key-soft); }
.kb-result-src {
    flex: none;
    font-size: 11px;
    line-height: 1.5;
    color: #fff;
    background: var(--primary);
    border-radius: 4px;
    padding: 1px 6px;
    opacity: 0.85;
}
.kb-result-ar {
    flex: 1 1 auto;
    /* v4.2.2：阿语结果词走自托管 Naskh 字体栈（原继承中文栈，真机发虚/缺字形） */
    font-family: var(--arabic-font), 'Droid Arabic Naskh', 'Geeza Pro', 'Arial', sans-serif;
    font-size: 16px;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.kb-result-cn {
    flex: 0 1 auto;
    max-width: 55%;
    font-size: 13px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ===== 系统键盘模式悬浮条上的"返回专用键盘"入口 ===== */
.kb-backbar {
    display: none;
    justify-content: flex-end;
    padding: 5px 8px;
    background: var(--kb-bg);
    border-bottom: 1px solid var(--kb-border);
}

/* ===== 工具条 ===== */
.kb-toolbar {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 3px 8px;
    box-sizing: border-box;
    border-bottom: 1px solid var(--kb-border);
}
.kb-tbtn {
    height: 28px;
    padding: 0 10px;
    border: 1px solid var(--kb-border);
    border-radius: 6px;
    background: var(--kb-key-bg);
    color: var(--text-primary);
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
}
.kb-tbtn:active { background: var(--kb-key-soft); }
.kb-tspacer { flex: 1; }
.kb-langseg {
    display: flex;
    border: 1px solid var(--kb-border);
    border-radius: 6px;
    overflow: hidden;
}
.kb-langseg button {
    height: 28px;
    padding: 0 12px;
    border: none;
    background: var(--kb-key-bg);
    color: var(--text-secondary);
    font-size: 13px;
    cursor: pointer;
}
.kb-langseg button + button { border-left: 1px solid var(--kb-border); }
.kb-langseg button.active {
    background: var(--primary);
    color: #fff;
    font-weight: 600;
}

/* ===== 键盘行与键 ===== */
.kb-rows {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 6px 4px 0;
}
.kb-row {
    display: flex;
    gap: 6px;
}
.kb-key {
    flex: 1;
    min-width: 0;
    height: var(--kb-key-h, 48px);
    display: flex;
    align-items: center;
    justify-content: center;
    /* v4.2.2 真机修复：键面统一走自托管 Noto Naskh 字体栈。
       原继承 body 的中文黑体栈，◌/孤立音符/阿-印度数字都不在栈内，
       Android 系统兜底导致音符键空白或极小。
       分片覆盖：音符+字母+٠-٩+؟، ∈ arabic 片；⌫⇧▼◌ ∈ symbols 片；EN/ES 字母 ∈ latin 片。 */
    font-family: var(--arabic-font), 'Droid Arabic Naskh', 'Geeza Pro', 'Arial', sans-serif;
    background: var(--kb-key-bg);
    border: 1px solid var(--kb-border);
    border-radius: 8px;
    font-size: 20px;
    color: var(--text-primary);
    cursor: pointer;
    box-sizing: border-box;
    line-height: 1;
}
.kb-key--special {
    flex: 1.4;
    font-size: 15px;
    background: var(--kb-key-soft);
}
.kb-key--back { flex: 1.6; }
.kb-key--enter { flex: 1.6; color: var(--primary); font-weight: 600; }
.kb-key--space { flex: 4; font-size: 13px; color: var(--text-secondary); }
.kb-key--page { flex: 1.4; font-size: 15px; }
.kb-row--haraka .kb-key,
.kb-row:first-child .kb-key--haraka { flex: 0 1 64px; }
.kb-row--haraka { justify-content: center; }
.kb-row--haraka .kb-key { flex: 0 1 64px; }
.kb-key--haraka { font-size: 20px; line-height: 1.5; color: var(--primary); }
.kb-key--shift { position: relative; flex: 1.4; }
.kb-key--shift.kb-on { background: var(--kb-key-soft); }
.kb-key--shift.kb-led::after {
    content: '';
    position: absolute;
    top: 4px;
    right: 4px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--primary);
}
.kb-key--press, .kb-key:active {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
    transform: scale(0.96);
}
.kb-key--press.kb-key--haraka, .kb-key--haraka:active { color: #fff; }

/* 底行（标点 + 空格 + 回车），预留手势条安全区 */
.kb-row--bottom { padding-bottom: calc(0px + env(safe-area-inset-bottom)); }
.kb-row--bottom .kb-key { margin-bottom: calc(6px + env(safe-area-inset-bottom)); }

/* ===== 生词本搜索无结果空态（v4.2 新增 #vbSavedSearch）===== */
.saved-vocab-nomatch {
    text-align: center;
    padding: 44px 16px;
    color: var(--text-secondary);
}
.saved-vocab-nomatch .empty-icon { font-size: 34px; margin-bottom: 8px; }
.saved-vocab-nomatch p { margin: 4px 0; }
.saved-vocab-nomatch .empty-hint { font-size: 12px; opacity: 0.75; }

/* ===== 窄屏适配 ===== */
@media (max-width: 420px) {
    .kb-key { font-size: 18px; border-radius: 6px; }
    .kb-tbtn { padding: 0 7px; font-size: 12px; }
    .kb-langseg button { padding: 0 9px; font-size: 12px; }
    .kb-result-ar { font-size: 15px; }
}