/* ==================================================================================
   AI单词速记 (#/flash) · AI单词红绿灯 (#/traffic) · AI抗遗忘复习 (#/review)
   专用样式 —— 1:1 照搬主站 www.yingyumofa.cn 对应模块的视觉。
   · 全部规则以 `.vqc-page` 前缀提权，只在本模块的 <section class="vqc-page"> 内生效，
     不会污染站点既有的 .vm-* / .bc-* 等基础类。
   · 主站设计 token（--primary-color 等）在 .vqc-page 上映射到本站配色。
   ================================================================================== */

/* --- 设计 token 映射（把主站变量落到 huojiaocai 的暖纸色系） --- */
.vqc-page{
  --primary-color: #1e5a96;
  --primary-color-light: #e8f0fa;
  --danger-color: #e5484d;
  --success-color: #16a34a;
  --warning-color: #e6a23c;
  --text-primary: #1f2a44;
  --text-regular: #5b667e;
  --text-secondary: #8a93a8;
  --border-color: #eae3d8;
  --border-light: #f1ece2;
  --bg-page: #f5f1ea;
  --bg-white: #ffffff;
  --vqc-pink: #e97591;
  min-height: 60vh;
}

/* --- 基础组件（补齐站点缺失的 .card / .page-header / btn 变体） --- */
.vqc-page .card{ background:var(--bg-white); border:1px solid var(--border-color); border-radius:16px;
  box-shadow:0 2px 14px rgba(31,42,68,.05); margin-bottom:16px; overflow:hidden; }
.vqc-page .card-header{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  padding:15px 20px; border-bottom:1px solid var(--border-light); background:linear-gradient(180deg,#fff,#fdfbf7); }
.vqc-page .card-header h3{ margin:0; font-size:16.5px; font-weight:800; color:var(--text-primary); }
.vqc-page .card-body{ padding:20px; }
.vqc-page .page-header{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap; margin:4px 0 18px; }
.vqc-page .page-header-left h1{ margin:0 0 4px; font-size:24px; font-weight:900; color:var(--text-primary); letter-spacing:.5px; }
.vqc-page .page-header-left p{ margin:0; font-size:13.5px; color:var(--text-regular); }
.vqc-page .page-header-right{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.vqc-page .btn{ display:inline-flex; align-items:center; justify-content:center; gap:6px;
  border:1px solid var(--border-color); background:#fff; color:var(--text-primary); border-radius:9px;
  padding:8px 16px; font-size:13.5px; font-weight:700; cursor:pointer; transition:.18s; font-family:inherit; line-height:1.2; }
.vqc-page .btn:hover{ border-color:var(--primary-color); color:var(--primary-color); }
.vqc-page .btn-primary{ background:linear-gradient(135deg,#1e5a96,#2f6bff); border-color:transparent; color:#fff; }
.vqc-page .btn-primary:hover{ opacity:.9; color:#fff; }
.vqc-page .btn-default{ background:#fff; }
.vqc-page .btn-sm{ padding:6px 12px; font-size:12.5px; border-radius:8px; }
.vqc-page .empty-tip{ text-align:center; color:var(--text-regular); padding:36px 0; font-size:13.5px; }
.vqc-page .vqc-sub{ font-size:12.5px; color:var(--text-regular); font-weight:400; }
.vqc-page .vqc-verblock{ margin-bottom:20px; }
.vqc-page .vqc-verhead{ font-size:14px; font-weight:800; color:var(--text-primary); margin:0 0 12px;
  padding-left:10px; border-left:4px solid var(--vqc-pink); }
.vqc-page .vqc-verhead span{ font-size:12px; font-weight:600; color:var(--text-regular); margin-left:6px; }

/* ===== 以下：照搬主站模块样式（全部以 .vqc-page 提权） ===== */
.vqc-page .filter-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.vqc-page .filter-item {
    display: flex;
    align-items: center;
    gap: 8px;
}
.vqc-page .filter-item label {
    font-size: 13px;
    color: var(--text-regular);
    white-space: nowrap;
}
.vqc-page .filter-item input, .vqc-page .filter-item select {
    height: 36px;
    padding: 0 12px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 13px;
    outline: none;
    transition: border-color 0.3s;
    font-family: inherit;
    background: white;
}
.vqc-page .filter-item input:focus, .vqc-page .filter-item select:focus {
    border-color: var(--primary-color);
}
.vqc-page .filter-item input {
    min-width: 180px;
}
.vqc-page .filter-item select {
    min-width: 140px;
    cursor: pointer;
    padding-right: 28px;
}
.vqc-page .bc-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    height: 56px;
    background: white;
    border-bottom: 1px solid var(--border-color);
    margin: -20px -24px 20px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}
.vqc-page .bc-topbar-left {
    display: flex;
    align-items: center;
    gap: 12px;
}
.vqc-page .bc-topbar-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: white;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    color: var(--text-regular);
    transition: all 0.3s;
}
.vqc-page .bc-topbar-btn:hover {
    color: var(--primary-color);
    border-color: var(--primary-color);
}
.vqc-page .bc-timer {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 18px;
    font-weight: bold;
    color: var(--primary-color);
}
.vqc-page .bc-timer-icon {
    font-size: 20px;
}
.vqc-page .bc-end-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 16px;
    background: var(--danger-color);
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    transition: all 0.3s;
}
.vqc-page .bc-end-btn:hover {
    background: #e04040;
}
.vqc-page .bc-card-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 12px;
    margin-top: 20px;
}
.vqc-page .bc-card-option {
    padding: 12px 16px;
    border: 2px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    color: var(--text-regular);
    transition: all 0.2s;
    text-align: center;
}
.vqc-page .bc-card-option:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}
.vqc-page .bc-card-option.correct {
    border-color: var(--success-color);
    background: #f0f9eb;
    color: var(--success-color);
}
.vqc-page .bc-card-option.wrong {
    border-color: var(--danger-color);
    background: #fef0f0;
    color: var(--danger-color);
}
.vqc-page .bc-feedback {
    font-size: 14px;
    padding: 10px 12px;
    border-radius: 8px;
    animation: fadeIn 0.3s;
}
.vqc-page .bc-feedback.correct {
    color: var(--success-color);
    background: #f0f9eb;
}
.vqc-page .bc-feedback.wrong {
    color: var(--danger-color);
    background: #fef0f0;
}
.vqc-page .bc-linear-title {
    margin-left: 16px;
    display: flex;
    align-items: baseline;
    gap: 10px;
}
.vqc-page .bc-linear-name {
    font-size: 18px;
    font-weight: 700;
    color: #443a56;
}
.vqc-page .bc-linear-progress {
    font-size: 15px;
    color: #e97591;
    font-weight: 600;
}
.vqc-page .bc-linear-tools {
    margin-left: auto;
    display: flex;
    gap: 8px;
}
.vqc-page .bc-linear-toolbtn {
    padding: 6px 12px;
    border-radius: 6px;
    border: 1px solid;
    cursor: pointer;
    font-size: 13px;
    background: #fff;
    transition: all .2s;
}
.vqc-page .bc-linear-toolbtn.annotate { color: #e97591; border-color: #ffe4ea; background: #fff6f9; }
.vqc-page .bc-linear-toolbtn.note { color: #6f6680; border-color: #ece5f3; background: #f7f4fb; }
.vqc-page .bc-linear-toolbtn.autospeak { color: #6f6680; border-color: #ece5f3; background: #f7f4fb; }
.vqc-page .bc-linear-toolbtn.autospeak.active { color: #fff; border-color: #e97591; background: linear-gradient(135deg, #e97591, #ffb3c1); box-shadow: 0 2px 8px rgba(233,117,145,.35); }
.vqc-page .bc-linear-toolbtn:hover { opacity: .85; }
.vqc-page .bc-linear-page {
    max-width: 100%;
    margin: 0;
    padding: 24px;
    min-height: calc(100vh - 130px);
    background: linear-gradient(135deg, #e6f7f1 0%, #e0f0f5 100%);
    border-radius: 12px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.vqc-page .bc-linear-page * { box-sizing: border-box; }
.vqc-page .bc-linear-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 8px;
}
.vqc-page .bc-linear-head h2 { font-size: 22px; color: #443a56; margin: 0; }
.vqc-page .bc-linear-prestatus { font-size: 14px; color: #6f6680; display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; }
.vqc-page .bc-linear-prestatus b { color: #e97591; }
.vqc-page .bc-linear-tip { color: #f56c6c; margin-left: 8px; }
.vqc-page .bc-linear-ok { color: #67c23a; margin-left: 8px; }
.vqc-page .bc-linear-hint {
    text-align: center;
    color: #6f6680;
    font-size: 14px;
    margin-bottom: 16px;
    line-height: 1.6;
}
.vqc-page .bc-linear-wordlist { display: flex; flex-direction: column; gap: 10px; }
.vqc-page .bc-linear-preitem {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: #fff;
    border-radius: 10px;
    border: 2px solid transparent;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    transition: all .2s;
    flex-wrap: wrap;
}
.vqc-page .bc-linear-preitem.known { border-color: #b3e19d; background: #f6fff0; }
.vqc-page .bc-linear-preitem.unknown { border-color: #fab6b6; background: #fff5f5; }
.vqc-page .bc-linear-preitem.focus {
    border-color: #e97591;
    background: #fff8f0;
    box-shadow: 0 4px 16px rgba(233,117,145,0.25);
    animation: bcPreFocusPulse 1.2s ease-in-out infinite;
}
.vqc-page .bc-linear-preidx {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: #f2eef7; color: #6f6680;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 600; flex-shrink: 0;
}
.vqc-page .bc-linear-preword {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column; justify-content: center;
    gap: 4px;
    cursor: pointer;
    padding: 4px 10px;
    border-radius: 8px;
    transition: background .15s;
}
.vqc-page .bc-linear-preword:hover { background: rgba(233,117,145,0.06); }
.vqc-page .bc-linear-preword.revealed { background: rgba(233,117,145,0.10); }
.vqc-page .bc-linear-preword-main { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.vqc-page .bc-linear-preword .w {
    font-size: 18px; font-weight: 600; color: #443a56;
    overflow: hidden;
}
.vqc-page .bc-linear-preword .p { font-size: 13px; color: #6f6680; flex-shrink: 0; }
.vqc-page .bc-linear-premeaning {
    font-size: 14px; color: #e97591; font-weight: 500;
    line-height: 1.4; word-break: break-word; overflow-wrap: anywhere;
}
.vqc-page .bc-linear-premeaning-hint { color: #a99fb8; font-size: 12px; font-weight: 400; }
.vqc-page .bc-linear-mem { padding: 2px 8px; border-radius: 10px; font-size: 12px; white-space: nowrap; }
.vqc-page .bc-linear-prebtns { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.vqc-page .bc-linear-anno {
    margin-top: 8px;
    padding: 6px 10px;
    background: #fff7e6;
    border-left: 3px solid #e97591;
    border-radius: 4px;
    font-size: 13px;
    color: #b25e00;
}
.vqc-page .bc-linear-verdict {
    padding: 8px 16px;
    border-radius: 8px;
    border: 1px solid;
    cursor: pointer;
    font-size: 14px;
    background: #fff;
    transition: all .2s;
}
.vqc-page .bc-linear-verdict.known { color: #67c23a; border-color: #b3e19d; }
.vqc-page .bc-linear-verdict.unknown { color: #f56c6c; border-color: #fab6b6; }
.vqc-page .bc-linear-verdict.known.active { background: #67c23a; color: #fff; border-color: #67c23a; }
.vqc-page .bc-linear-verdict.unknown.active { background: #f56c6c; color: #fff; border-color: #f56c6c; }
.vqc-page .bc-linear-verdict:hover { opacity: .85; }
.vqc-page .bc-linear-foot { text-align: center; margin-top: 28px; }
.vqc-page .bc-linear-submit {
    padding: 10px 36px;
    border-radius: 8px;
    border: none;
    background: #c04a6c;
    color: #fff;
    font-size: 15px;
    cursor: pointer;
    transition: all .2s;
    box-shadow: 0 3px 10px rgba(233,117,145,0.25);
}
.vqc-page .bc-linear-submit:hover { background: #e55f00; }
.vqc-page .bc-linear-submit.disabled { background: #a99fb8; cursor: not-allowed; box-shadow: none; }
.vqc-page .bc-linear-submit.secondary {
    background: #fff;
    color: #e97591;
    border: 1px solid #e97591;
    margin-left: 12px;
    box-shadow: none;
}
.vqc-page .bc-linear-cards { display: flex; flex-direction: column; gap: 14px; }
.vqc-page .bc-linear-card {
    background: #fff;
    border-radius: 12px;
    padding: 16px 20px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
.vqc-page .bc-linear-card.center {
    max-width: 560px;
    margin: 16px auto;
    text-align: center;
    padding: 32px 24px;
}
.vqc-page .bc-linear-card-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}
.vqc-page .bc-linear-card-word { font-size: 24px; font-weight: 700; color: #443a56; }
.vqc-page .bc-linear-card-body { padding-top: 6px; }
.vqc-page .bc-linear-card-meta { font-size: 13px; color: #6f6680; margin-bottom: 6px; }
.vqc-page .bc-linear-card-pos { font-size: 16px; color: #6f6680; margin-bottom: 10px; line-height: 1.5; }
.vqc-page .bc-linear-card-detail {
    margin-top: 10px;
    padding: 10px 12px;
    background: #f7f9fc;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.7;
}
.vqc-page .bc-linear-card-detail .en { color: #443a56; margin-bottom: 4px; }
.vqc-page .bc-linear-card-detail .cn { color: #6f6680; }
.vqc-page .bc-linear-detailbtn {
    background: none;
    border: none;
    color: #8b9eea;
    cursor: pointer;
    font-size: 13px;
    padding: 4px 0;
}
.vqc-page .bc-linear-detailbtn:hover { color: #a9b8f2; }
.vqc-page .bc-linear-bookbtn {
    margin-left: auto;
    padding: 4px 12px;
    border: 1px solid #ffe4ea;
    background: #fff6f9;
    color: #e97591;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
}
.vqc-page .bc-linear-bookbtn.active { background: #c04a6c; color: #fff; border-color: #c04a6c; }
.vqc-page .bc-linear-listen { width: 100%; max-width: 900px; margin: 0 auto; text-align: center; padding: 24px; }
.vqc-page .bc-linear-listen-title { font-size: 18px; color: #6f6680; margin-bottom: 20px; }
.vqc-page .bc-linear-replay {
    width: 64px; height: 64px;
    border-radius: 50%;
    border: 2px solid #e97591;
    background: #fff6f9;
    color: #e97591;
    font-size: 24px;
    cursor: pointer;
    margin: 8px auto;
    display: flex;
    align-items: center;
    justify-content: center;
}
.vqc-page .bc-linear-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
    margin-top: 24px;
}
.vqc-page .bc-linear-option {
    background: #fff;
    border: 2px solid #ece5f3;
    border-radius: 10px;
    padding: 20px 16px;
    cursor: pointer;
    transition: all .2s;
    text-align: center;
}
.vqc-page .bc-linear-option:hover { border-color: #e97591; background: #fff6f9; }
.vqc-page .bc-linear-option.correct { border-color: #67c23a; background: #f0fbf0; pointer-events: none; }
.vqc-page .bc-linear-option.wrong { border-color: #f56c6c; background: #fef0f0; pointer-events: none; }
.vqc-page .bc-linear-option-word { font-size: 22px; font-weight: 600; color: #443a56; }
.vqc-page .bc-linear-option-meta { font-size: 12px; color: #6f6680; margin-top: 6px; }
.vqc-page .bc-linear-flip-wrap {
    perspective: 1500px;
    flex: 1;
    min-height: 0;
    display: flex;
    width: 100%;
    max-width: 900px;
    align-self: center;
}
.vqc-page .bc-linear-tl-row {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 16px;
    flex: 1;
    min-height: 0;
    width: 100%;
    padding: 0 12px;
    box-sizing: border-box;
}
.vqc-page .bc-linear-tl-row .side-arrow {
    align-self: center;
    flex-shrink: 0;
}
.vqc-page .bc-linear-tl-row .bc-linear-flip-wrap {
    flex: 0 1 auto;
    min-width: 320px;
    max-width: 760px;
    align-self: stretch;
    min-height: 360px;
}
.vqc-page .bc-linear-flip-card {
    position: relative;
    width: 100%;
    flex: 1;
    min-height: 360px;
    cursor: pointer;
    transform-style: preserve-3d;
    transition: transform .6s;
}
.vqc-page .bc-linear-flip-card.flipped { transform: rotateY(180deg); }
.vqc-page .bc-linear-flip-front, .vqc-page .bc-linear-flip-back {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    background: linear-gradient(135deg, rgba(230,245,255,0.78), rgba(234,245,239,0.82)), #eaf5ef;
    border-radius: 20px;
    padding: 48px 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 28px rgba(0,0,0,0.10);
    text-align: center;
    overflow: hidden;
}
.vqc-page .bc-linear-flip-back { transform: rotateY(180deg); }
.vqc-page .bc-linear-flip-hint { color: #a99fb8; font-size: 16px; margin-top: 32px; }
.vqc-page .bc-linear-flip-art {
    width: 180px;
    height: 180px;
    object-fit: contain;
    border-radius: 20px;
    margin-bottom: 20px;
    box-shadow: 0 4px 16px rgba(155,123,190,0.18);
    border: 3px solid rgba(255,255,255,0.7);
    background: #fff;
    flex-shrink: 0;
}
.vqc-page .bc-linear-flip-front .bc-linear-card-word {
    font-size: clamp(40px, 7vw, 96px);
    line-height: 1.2;
    margin-bottom: 10px;
    word-break: break-word;
    max-width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}
.vqc-page .bc-linear-flip-back .bc-linear-card-word {
    font-size: clamp(40px, 7vw, 96px);
    line-height: 1.2;
    margin-bottom: 16px;
    word-break: break-word;
    max-width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}
.vqc-page .bc-linear-flip-front .bc-linear-card-meta {
    font-size: 20px;
    color: #6f6680;
    margin-bottom: 24px;
}
.vqc-page .bc-linear-flip-back .bc-linear-card-pos {
    font-size: 18px;
    color: #6f6680;
    margin-bottom: 16px;
    line-height: 1.5;
}
.vqc-page .bc-linear-flip-back .bc-linear-card-detail {
    margin-top: 16px;
    border-top: 1px solid rgba(255,255,255,0.4);
    background: rgba(255,255,255,0.35);
    border-radius: 10px;
    padding: 16px 20px;
    width: 100%;
    max-width: 520px;
    font-size: 16px;
    line-height: 1.7;
}
.vqc-page .bc-linear-flip-back .bc-linear-card-detail .en { font-size: 16px; color: #443a56; margin-bottom: 6px; }
.vqc-page .bc-linear-flip-back .bc-linear-card-detail .cn { font-size: 14px; color: #6f6680; }
.vqc-page .bc-linear-flip-tag {
    display: inline-block;
    margin-top: 8px;
    padding: 3px 12px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 600;
}
.vqc-page .bc-linear-flip-tag-done { background: #e1f3d8; color: #67c23a; }
.vqc-page .bc-linear-flip-tag-todo { background: #fef0f0; color: #f56c6c; }
.vqc-page .bc-linear-judge {
    display: flex;
    gap: 16px;
    justify-content: center;
    margin-top: 16px;
}
.vqc-page .bc-linear-tl-judge {
    display: flex;
    gap: 20px;
    justify-content: center;
    margin-top: 20px;
}
.vqc-page .bc-linear-judge-btn {
    padding: 14px 40px;
    border-radius: 14px;
    border: none;
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    transition: all .2s;
    min-width: 140px;
    text-align: center;
}
.vqc-page .bc-linear-judge-btn.known { background: #52c41a; box-shadow: 0 4px 12px rgba(82,196,26,0.35); }
.vqc-page .bc-linear-judge-btn.unknown { background: #f5222d; box-shadow: 0 4px 12px rgba(245,34,45,0.35); }
.vqc-page .bc-linear-judge-btn:hover { filter: brightness(1.1); transform: translateY(-1px); }
.vqc-page .bc-linear-judge-btn:disabled { opacity: .5; cursor: not-allowed; filter: none; transform: none; }
.vqc-page .bc-linear-paperbox {
    position: fixed;
    right: 32px;
    bottom: 32px;
    min-width: 64px;
    height: 56px;
    padding: 0 12px;
    border-radius: 14px;
    background: #304156;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 600;
    box-shadow: 0 4px 14px rgba(0,0,0,0.25);
    z-index: 50;
}
.vqc-page .bc-linear-tl-layout {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: stretch;
    flex: 1;
    min-height: 0;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
}
.vqc-page .bc-linear-tl-main {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    width: 100%;
}
.vqc-page .bc-linear-tl-stats {
    display: flex;
    flex-direction: row;
    gap: 16px;
    justify-content: center;
    flex-shrink: 0;
}
.vqc-page .bc-linear-tl-stat { flex: 1; max-width: 200px; text-align: center; padding: 10px 0; border-radius: 8px; }
.vqc-page .bc-linear-tl-stat.red { background: #fef0f0; border: 2px solid #fab6b6; }
.vqc-page .bc-linear-tl-stat.green { background: #f0fbf0; border: 2px solid #b3e19d; }
.vqc-page .bc-linear-tl-stat .num { font-size: 24px; font-weight: 700; display: inline; }
.vqc-page .bc-linear-tl-stat.red .num { color: #f56c6c; }
.vqc-page .bc-linear-tl-stat.green .num { color: #67c23a; }
.vqc-page .bc-linear-tl-stat .lbl { font-size: 13px; color: #6f6680; display: inline; margin-left: 4px; }
.vqc-page .bc-linear-choices {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 20px;
    max-width: 760px;
    margin: 0 auto;
}
.vqc-page .bc-linear-choice {
    background: #fff;
    border-radius: 14px;
    padding: 32px 20px;
    text-align: center;
    cursor: pointer;
    transition: all .2s;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    border: 2px solid transparent;
}
.vqc-page .bc-linear-choice:hover {
    border-color: #e97591;
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(233,117,145,0.15);
}
.vqc-page .bc-linear-choice-icon { font-size: 44px; margin-bottom: 12px; }
.vqc-page .bc-linear-choice-name { font-size: 18px; font-weight: 600; color: #443a56; margin-bottom: 6px; }
.vqc-page .bc-linear-choice-desc { font-size: 13px; color: #6f6680; line-height: 1.6; }
.vqc-page .bc-linear-result {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
    background: #fff;
    border-radius: 16px;
    padding: 40px 32px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
}
.vqc-page .bc-linear-result-icon { font-size: 64px; margin-bottom: 12px; }
.vqc-page .bc-linear-result h2 { font-size: 26px; color: #443a56; margin-bottom: 24px; }
.vqc-page .bc-linear-result-stats { display: flex; justify-content: center; gap: 32px; margin-bottom: 28px; flex-wrap: wrap; }
.vqc-page .bc-linear-result-item .num { font-size: 32px; font-weight: 700; color: #443a56; }
.vqc-page .bc-linear-result-item .lbl { font-size: 13px; color: #6f6680; margin-top: 4px; }
.vqc-page .bc-linear-review-info {
    background: linear-gradient(135deg, #fff8e1, #fff3cd);
    border: 1px solid #ffe082;
    border-left: 4px solid #e97591;
    color: #8a6d3b;
    padding: 12px 18px;
    border-radius: 8px;
    font-size: 13px;
    margin: 0 auto 20px;
    max-width: 560px;
    text-align: center;
}
.vqc-page .bc-linear-result-list { text-align: left; margin: 20px 0; }
.vqc-page .bc-linear-result-word {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 14px;
    border-bottom: 1px solid #f2eef7;
    font-size: 14px;
    flex-wrap: wrap;
}
.vqc-page .bc-linear-result-word .w { font-weight: 600; color: #443a56; min-width: 110px; }
.vqc-page .bc-linear-result-word .m { flex: 1; color: #6f6680; min-width: 200px; }
.vqc-page .bc-linear-result-word .b { color: #6f6680; font-size: 13px; min-width: 80px; }
.vqc-page .vm-bank-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
    gap: 12px;
}
.vqc-page .vm-bank-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    min-width: 0;
    background: linear-gradient(135deg, #fff 0%, #fff6f9 100%);
    border: 1px solid #ffe4ea;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}
.vqc-page .vm-bank-card:hover {
    border-color: #e97591;
    box-shadow: 0 4px 14px rgba(233,117,145,0.15);
    transform: translateY(-2px);
    position: relative;
    z-index: 5;
}
.vqc-page .vm-bank-icon {
    width: 48px; height: 48px;
    border-radius: 12px;
    background: linear-gradient(135deg, #e97591, #ffb3c1);
    color: #fff;
    font-size: 24px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}
.vqc-page .vm-bank-info { flex: 1; min-width: 0; }
/* 词库卡片封面：单册取课本封面页；合并大词库取前 3 册封面叠层 */
/* 封面页为 A4 竖版（≈0.707），缩略图按同比例 + contain，保证整张封面完整不被裁切 */
.vqc-page .vm-bank-cover {
    width: 48px; height: 68px;
    flex-shrink: 0; position: relative;
    display: block;
}
.vqc-page .vm-bank-cover img {
    width: 100%; height: 100%;
    object-fit: contain; object-position: center;
    border-radius: 6px;
    border: 1px solid #f0dfe6;
    box-shadow: 0 2px 7px rgba(190,120,145,.24);
    background: #fff;
    display: block;
}
.vqc-page .vm-cover-stack { width: 74px; }
.vqc-page .vm-cover-stack img {
    position: absolute; top: 0; width: 48px; height: 68px;
    left: calc(var(--i,0) * 12px);
    transform: rotate(calc((var(--i,0) - 1) * 5deg));
    z-index: calc(3 - var(--i,0));
}
.vqc-page .vm-bank-badge {
    font-style: normal; font-size: 10px; font-weight: 700;
    color: #b8567a; background: #ffe8f0;
    border: 1px solid #ffcddd; border-radius: 6px;
    padding: 1px 5px; margin-left: 6px;
    vertical-align: middle;
}
.vqc-page .vm-bank-card.vm-bank-merged {
    background: linear-gradient(135deg, #fffdf6 0%, #fff4ea 100%);
    border-color: #ffe6cf;
}
.vqc-page .vm-bank-name {
    font-size: 16px; font-weight: 600; color: #443a56;
    margin-bottom: 6px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vqc-page .vm-bank-meta {
    font-size: 12px; color: #6f6680;
    display: flex; gap: 6px; flex-wrap: wrap;
}
.vqc-page .vm-bank-ro {
    display: inline-block;
    padding: 0 6px;
    border-radius: 8px;
    background: #f4f4f5;
    color: #a8abb2;
    font-size: 11px;
    line-height: 17px;
    flex-shrink: 0;
}
.vqc-page .vm-bank-arrow { color: #a99fb8; font-size: 20px; }
.vqc-page .vm-bank-card.selected {
    border-color: #e97591;
    border-width: 2px;
    padding: 15px;
    background: linear-gradient(135deg, #fff 0%, #fff6f9 100%);
    box-shadow: 0 4px 14px rgba(233,117,145, 0.2);
}
.vqc-page .vm-learn-topbar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 20px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    margin-bottom: 12px;
    gap: 12px;
}
.vqc-page .vm-learn-left { display: flex; align-items: center; gap: 12px; }
.vqc-page .vm-learn-bank { font-size: 14px; font-weight: 600; color: #443a56; }
.vqc-page .vm-learn-stats { display: flex; gap: 18px; font-size: 13px; color: #6f6680; }
.vqc-page .vm-learn-timer {
    display: flex; align-items: center; gap: 6px;
    padding: 6px 12px;
    background: #f0f7ff; border-radius: 6px;
    color: #8b9eea; font-weight: 600;
}
.vqc-page .vm-learn-bar {
    height: 6px; background: #ece5f3; border-radius: 3px;
    margin-bottom: 16px; overflow: hidden;
}
.vqc-page .vm-learn-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #e97591, #ffb3c1);
    transition: width 0.3s ease;
    border-radius: 3px;
}
.vqc-page .vm-result {
    text-align: center;
    padding: 40px 20px;
    max-width: 720px;
    margin: 0 auto;
}
.vqc-page .vm-result-icon { font-size: 64px; margin-bottom: 12px; }
.vqc-page .vm-result-sub { color: #6f6680; font-size: 14px; margin-bottom: 24px; }
.vqc-page .vm-result-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
    margin: 24px 0;
}
.vqc-page .vm-result-stat {
    background: #fff;
    padding: 20px 12px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.vqc-page .vm-result-stat .number {
    font-size: 28px; font-weight: 700; color: #443a56;
}
.vqc-page .vm-result-stat .label { font-size: 13px; color: #6f6680; margin-top: 4px; }
.vqc-page .vm-result-wrong {
    text-align: left;
    background: #fff6f9;
    border-radius: 12px;
    padding: 16px 20px;
    margin: 16px 0;
}
.vqc-page .vm-result-wrong h3 { font-size: 14px; color: #f56c6c; margin-bottom: 10px; }
.vqc-page .vm-result-wrong-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 8px;
    max-height: 280px;
    overflow-y: auto;
}
.vqc-page .vm-result-actions {
    display: flex; gap: 12px; justify-content: center;
    margin-top: 20px;
}
.vqc-page .rv-stat-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
}
.vqc-page .rv-stat-card {
    padding: 18px 16px;
    border-radius: 12px;
    text-align: center;
    color: #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.vqc-page .rv-stat-card.orange { background: linear-gradient(135deg, #e97591, #ffb3c1); }
.vqc-page .rv-stat-card.red { background: linear-gradient(135deg, #f56c6c, #f89898); }
.vqc-page .rv-stat-card.yellow { background: linear-gradient(135deg, #c99a45, #f3c34e); }
.vqc-page .rv-stat-card.blue { background: linear-gradient(135deg, #8b9eea, #a9b8f2); }
.vqc-page .rv-stat-card.green { background: linear-gradient(135deg, #67c23a, #95d475); }
.vqc-page .rv-stat-num { font-size: 28px; font-weight: 700; }
.vqc-page .rv-stat-label { font-size: 13px; opacity: 0.95; margin-top: 4px; }
.vqc-page .rv-filter-bar {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    margin: 12px 0 0;
    padding: 12px 16px;
    background: #fff;
    border: 1px solid #ece5f3;
    border-radius: 12px;
}
.vqc-page .rv-filter-label { font-size: 13px; color: #6f6680; font-weight: 600; margin-right: 4px; }
.vqc-page .rv-filter-tab {
    padding: 6px 14px;
    border: 1px solid #ece5f3;
    background: #fff;
    color: #6f6680;
    border-radius: 20px;
    font-size: 13px;
    cursor: pointer;
    transition: all .15s;
}
.vqc-page .rv-filter-tab:hover { border-color: #e97591; color: #e97591; }
.vqc-page .rv-filter-tab.active {
    background: linear-gradient(135deg, #e97591, #ffb3c1);
    border-color: transparent;
    color: #fff;
}
.vqc-page .rv-sub-stats {
    display: flex; flex-wrap: wrap; gap: 8px;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px dashed #ece5f3;
}
.vqc-page .rv-sub-stat {
    font-size: 12px;
    padding: 3px 10px;
    border-radius: 12px;
    background: #f7f4fb;
    color: #6f6680;
}
.vqc-page .rv-sub-stat.red { background: #fef0f0; color: #f56c6c; }
.vqc-page .rv-sub-stat.yellow { background: #fdf6ec; color: #c99a45; }
.vqc-page .rv-sub-stat.blue { background: #ecf5ff; color: #8b9eea; }
.vqc-page .rv-sub-stat.green { background: #f0f9eb; color: #67c23a; }
.vqc-page .rv-empty {
    text-align: center;
    padding: 40px 20px;
}
.vqc-page .rv-empty-icon { font-size: 56px; margin-bottom: 12px; }
.vqc-page .rv-empty-title { font-size: 16px; font-weight: 600; color: #443a56; margin-bottom: 6px; }
.vqc-page .rv-empty-sub { font-size: 13px; color: #6f6680; }
.vqc-page .rv-today-list {
    display: flex; flex-direction: column;
    gap: 6px;
}
.vqc-page .rv-today-item {
    display: grid;
    grid-template-columns: 40px minmax(0,1.2fr) minmax(0,2fr) minmax(0,1.2fr) 80px;
    gap: 10px;
    padding: 10px 12px;
    background: #fff;
    border: 1px solid #ece5f3;
    border-radius: 8px;
    font-size: 13px;
    align-items: center;
}
.vqc-page .rv-today-item.overdue {
    border-color: #fbc4c4;
    background: #fff5f5;
}
.vqc-page .rv-today-idx {
    width: 24px; height: 24px;
    background: #f0f7ff; color: #8b9eea;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 600;
}
.vqc-page .rv-today-item.overdue .rv-today-idx { background: #fef0f0; color: #f56c6c; }
.vqc-page .rv-today-word { font-weight: 600; color: #443a56; }
.vqc-page .rv-today-meaning { color: #6f6680; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vqc-page .rv-today-bank { color: #6f6680; font-size: 12px; }
.vqc-page .rv-today-stage { text-align: right; color: #e97591; font-size: 12px; }
.vqc-page .rv-more { text-align: center; padding: 12px; color: #6f6680; font-size: 12px; }
.vqc-page .rv-interval-table { display: flex; flex-direction: column; gap: 6px; }
.vqc-page .rv-interval-row {
    display: grid;
    grid-template-columns: 32px 80px minmax(0,1fr);
    gap: 10px;
    padding: 10px 12px;
    background: #f8f5fc;
    border-radius: 6px;
    font-size: 13px;
    align-items: center;
}
.vqc-page .rv-interval-idx {
    width: 24px; height: 24px;
    background: #c04a6c; color: #fff;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 600;
}
.vqc-page .rv-interval-label { font-weight: 600; color: #e97591; }
.vqc-page .rv-interval-desc { color: #6f6680; font-size: 12px; }
.vqc-page .rv-next-tip {
    margin: 16px 0;
    padding: 12px 16px;
    background: #f0f9eb;
    border-left: 3px solid #67c23a;
    border-radius: 6px;
    color: #6f6680; font-size: 13px; line-height: 1.6;
    text-align: left;
}
.vqc-page .rv-view-tabs {
    display: flex;
    gap: 6px;
    margin: 0;
}
.vqc-page .rv-view-tab {
    padding: 7px 16px;
    border: 1px solid #ece5f3;
    background: #fff;
    color: #6f6680;
    border-radius: 20px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.15s;
}
.vqc-page .rv-view-tab:hover { border-color: #e97591; color: #e97591; }
.vqc-page .rv-view-tab.active {
    background: linear-gradient(135deg, #e97591, #ffb3c1);
    border-color: transparent;
    color: #fff;
}
.vqc-page .rv-cal-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
    padding: 0 4px;
}
.vqc-page .rv-cal-month {
    font-size: 16px;
    font-weight: 700;
    color: #443a56;
}
.vqc-page .rv-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0,1fr));
    gap: 3px;
}
.vqc-page .rv-cal-weekday {
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    color: #6f6680;
    padding: 4px 0 2px;
}
.vqc-page .rv-cal-day {
    position: relative;
    min-height: 44px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s;
    border: 1.5px solid transparent;
    background: #faf8fd;
    padding: 3px;
}
.vqc-page .rv-cal-day:hover { border-color: #e97591; background: #fff5f0; }
.vqc-page .rv-cal-day.empty { background: transparent; cursor: default; }
.vqc-page .rv-cal-day.empty:hover { border-color: transparent; background: transparent; }
.vqc-page .rv-cal-day.today {
    border-color: #e97591;
    background: #fff8f2;
}
.vqc-page .rv-cal-day.selected {
    border-color: #e97591;
    background: #fff5f0;
    box-shadow: 0 0 0 2px rgba(233,117,145,0.2);
}
.vqc-page .rv-cal-day.blank { opacity: 0.4; }
.vqc-page .rv-cal-num {
    font-size: 13px;
    font-weight: 600;
    color: #443a56;
    line-height: 1.1;
}
.vqc-page .rv-cal-dots {
    display: flex;
    gap: 2px;
    margin-top: 2px;
    height: 5px;
    align-items: center;
}
.vqc-page .rv-cal-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    flex-shrink: 0;
}
.vqc-page .rv-cal-count {
    position: absolute;
    top: 2px;
    right: 2px;
    font-size: 9px;
    font-weight: 700;
    color: #fff;
    background: #c04a6c;
    border-radius: 7px;
    padding: 0 4px;
    line-height: 14px;
    min-width: 14px;
    text-align: center;
}
.vqc-page .rv-cal-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid #ece5f3;
    font-size: 12px;
    color: #6f6680;
}
.vqc-page .rv-cal-legend span {
    display: flex;
    align-items: center;
    gap: 4px;
}
.vqc-page .rv-toolbar {
    display: flex;
    justify-content: center;
    gap: 16px;
    padding: 8px 0;
    flex-wrap: wrap;
}
.vqc-page .vm-back-btn {
    background: #fff;
    border: 1px solid #ece5f3;
    color: #6f6680;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
}
.vqc-page .vm-back-btn:hover { color: #e97591; border-color: #e97591; }
.vqc-page .vm-overview {
    display: flex;
    gap: 40px;
    padding: 8px 4px 24px;
    align-items: center;
    flex: 1;
}
.vqc-page .vm-overview-left {
    flex: 0 0 450px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.vqc-page .vm-overview-right {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 640px;
}
.vqc-page .vm-overview-title h2 { font-size: 28px; color: #443a56; margin: 0 0 8px; }
.vqc-page .vm-overview-title p { font-size: 16px; color: #6f6680; margin: 0; }
.vqc-page .vm-overview-bank {
    display: flex;
    align-items: center;
    gap: 15px;
    background: linear-gradient(135deg, #fff6f9, #ffe0b2);
    border-left: 4px solid #e97591;
    padding: 15px 20px;
    border-radius: 10px;
}
.vqc-page .vm-overview-bank-icon { font-size: 30px; }
.vqc-page .vm-overview-bank-name { font-size: 19px; font-weight: 600; color: #443a56; }
.vqc-page .vm-overview-bank-meta { font-size: 15px; color: #6f6680; margin-top: 3px; }
.vqc-page .vm-overview-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 15px;
}
.vqc-page .vm-start-learn-btn {
    background: linear-gradient(135deg, #e97591, #ffb3c1);
    color: #fff;
    border: none;
    padding: 17px 25px;
    border-radius: 10px;
    font-size: 19px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(233,117,145,0.35);
    transition: transform 0.2s, box-shadow 0.2s;
}
.vqc-page .vm-start-learn-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(233,117,145,0.45);
}
.vqc-page .vm-start-learn-btn.disabled {
    background: #a99fb8;
    cursor: not-allowed;
    box-shadow: none;
}
.vqc-page .vm-start-learn-btn.disabled:hover { transform: none; box-shadow: none; }
.vqc-page .vm-step-tag {
    display: inline-block;
    font-size: 13px;
    font-weight: 700;
    background: rgba(255,255,255,0.28);
    border-radius: 999px;
    padding: 2px 10px;
    margin-right: 8px;
    line-height: 1.4;
    vertical-align: middle;
}
.vqc-page .vm-ring {
    position: relative;
    width: 620px;
    height: 620px;
}
.vqc-page .vm-ring-center {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 180px;
    height: 180px;
    margin: -90px 0 0 -90px;
    border-radius: 50%;
    background: linear-gradient(135deg, #e97591, #ffb3c1);
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 8px 32px rgba(233,117,145,0.5);
    transition: transform 0.2s;
    z-index: 2;
}
.vqc-page .vm-ring-center:hover { transform: scale(1.05); }
.vqc-page .vm-ring-label { font-size: 16px; opacity: 0.9; }
.vqc-page .vm-ring-text { font-size: 30px; font-weight: 700; margin-top: 6px; }
.vqc-page .vm-ring-sub { font-size: 14px; opacity: 0.85; margin-top: 6px; }
.vqc-page .vm-ring-node {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 130px;
    height: 130px;
    margin: -65px 0 0 -65px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #ffd54f;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-shadow: 0 2px 10px rgba(0,0,0,0.06);
    transition: transform 0.2s;
    cursor: pointer;
    /* 【修复 2026-09-22 审计 P2】环上 8 节点的角度定位改由 CSS 变量驱动。
       原先此处没有 transform，位移全写在元素内联 style 上——内联优先级高于本文件所有规则，
       于是下面 :hover 的放大被整体压制，鼠标悬停节点无任何反馈。现统一收到这里。 */
    transform: translate(var(--tx, 0), var(--ty, 0));
}
.vqc-page .vm-ring-node:hover { transform: translate(var(--tx, 0), var(--ty, 0)) scale(1.06); }
.vqc-page .vm-node-num { font-size: 28px; font-weight: 700; color: #e97591; line-height: 1; }
.vqc-page .vm-node-lbl { font-size: 14px; color: #6f6680; margin-top: 6px; line-height: 1.2; }
.vqc-page .vm-ring-node.forgotten { background: #fff1f0; border-color: #ffa39e; }
.vqc-page .vm-ring-node.forgotten .vm-node-num { color: #f5222d; }
.vqc-page .vm-ring-node.review-1 { background: #fff8e1; border-color: #ffd54f; }
.vqc-page .vm-ring-node.review-1 .vm-node-num { color: #f57c00; }
.vqc-page .vm-ring-node.review-2 { background: #fff6f9; border-color: #ffcc80; }
.vqc-page .vm-ring-node.review-2 .vm-node-num { color: #ef6c00; }
.vqc-page .vm-ring-node.review-3 { background: #f1f8e9; border-color: #c5e1a5; }
.vqc-page .vm-ring-node.review-3 .vm-node-num { color: #558b2f; }
.vqc-page .vm-ring-node.review-4 { background: #e8f5e9; border-color: #a5d6a7; }
.vqc-page .vm-ring-node.review-4 .vm-node-num { color: #388e3c; }
.vqc-page .vm-ring-node.review-5 { background: #e3f2fd; border-color: #90caf9; }
.vqc-page .vm-ring-node.review-5 .vm-node-num { color: #1976d2; }
.vqc-page .vm-ring-node.review-6 { background: #ede7f6; border-color: #c9bce0; }
.vqc-page .vm-ring-node.review-6 .vm-node-num { color: #6a4f8f; }
.vqc-page .vm-ring-node.mastered {
    background: linear-gradient(135deg, #c8e6c9, #a5d6a7);
    border-color: #66bb6a;
}
.vqc-page .vm-ring-node.mastered .vm-node-num { color: #2e7d32; }
.vqc-page .vm-ring-node.mastered .vm-node-lbl { color: #2e7d32; }
.vqc-page .vm-ring::before {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 560px; height: 560px;
    margin: -280px 0 0 -280px;
    border: 2px dashed #ffe4ea;
    border-radius: 50%;
    pointer-events: none;
}
.vqc-page .side-arrow {
    display:flex;align-items:center;justify-content:center;
    cursor:pointer;
    background:linear-gradient(180deg,#fff6e8 0%,#ffe4ea 100%);
    border:2px solid #ffd09a;
    border-radius:50%;
    width:84px;height:84px;
    box-shadow:0 6px 18px rgba(255,179,193,.18);
    transition:all .25s ease;
    align-self:center;
    position:relative;
    user-select:none;
}
.vqc-page .side-arrow:hover:not(.disabled) {
    transform:translateY(-2px) scale(1.05);
    background:linear-gradient(180deg,#ffe9c8 0%,#ffd29a 100%);
    border-color:#ffb3c1;
    box-shadow:0 10px 26px rgba(255,179,193,.32);
}
.vqc-page .side-arrow:active:not(.disabled) {
    transform:translateY(0) scale(.98);
}
.vqc-page .side-arrow.disabled {
    opacity:.4;cursor:not-allowed;
    background:#f7f4fb;border-color:#ece5f3;box-shadow:none;
}
.vqc-page .side-arrow svg {width:46px;height:46px;color:#e97591;display:block}
.vqc-page .side-arrow.disabled svg {color:#a99fb8}
.vqc-page .side-arrow-label {
    position:absolute;bottom:-26px;left:50%;transform:translateX(-50%);
    font-size:12px;color:#6f6680;white-space:nowrap;font-weight:600;letter-spacing:.5px;
}
.vqc-page .tl-card-row {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 16px;
    width: 100%;
    flex: 1;
    min-height: 0;
    padding: 0 24px;
    box-sizing: border-box;
}
.vqc-page .tl-card-row .side-arrow {
    align-self: center;
    flex-shrink: 0;
}
.vqc-page .tl-card-row .tl-card-wrap {
    flex: 0 1 auto;
    min-width: 320px;
    max-width: 760px;
    /* 关键：覆盖 .tl-card-wrap 原本的 align-self: center，
       否则 wrap 不拉伸到 row 全高，卡片被挤在 row 中间偏小 */
    align-self: stretch;
    /* 保底高度：单词+图片+拼音+意思+灯语 内容总高 ≈ 500-540；460 留余量防被截 */
    min-height: 460px;
}
.vqc-page .tl-card-row .tl-card {
    min-height: 460px;
}
.vqc-page .tl-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 16px;
    background: #f7f4fb;
    border-radius: 10px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}
.vqc-page .tl-toolbar-left {
    display: flex;
    align-items: center;
    gap: 10px;
}
.vqc-page .tl-toolbar-mid {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.vqc-page .tl-tool-btn {
    padding: 6px 14px;
    border: 1px solid #ece5f3;
    background: #fff;
    color: #6f6680;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    transition: all .2s;
    white-space: nowrap;
}
.vqc-page .tl-tool-btn:hover { border-color: #9b7bbe; color: #9b7bbe; }
.vqc-page .tl-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    color: #6f6680;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}
.vqc-page .tl-check-box {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid #a99fb8;
    border-radius: 4px;
    background: #fff;
    position: relative;
    transition: all .2s;
    flex-shrink: 0;
}
.vqc-page .tl-checkbox.checked { color: #9b7bbe; font-weight: 600; }
.vqc-page .tl-checkbox.checked .tl-check-box {
    background: #9b7bbe;
    border-color: #9b7bbe;
}
.vqc-page .tl-checkbox.checked .tl-check-box::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}
.vqc-page .tl-accent-btn {
    padding: 6px 12px;
    border: 1px solid #ece5f3;
    background: #fff;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    white-space: nowrap;
    transition: all .2s;
}
.vqc-page .tl-accent-btn:hover { border-color: #e97591; color: #e97591; }
.vqc-page .tl-card-wrap {
    perspective: 1500px;
    flex: 1;
    display: flex;
    min-height: 0;
    margin-bottom: 8px;
    width: 100%;
    max-width: 900px;
    align-self: center;
}
.vqc-page .tl-card {
    position: relative;
    width: 100%;
    flex: 1;
    cursor: pointer;
    transform-style: preserve-3d;
    transition: transform .6s;
}
.vqc-page .tl-card.flipped { transform: rotateY(180deg); }
.vqc-page .tl-card-face {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    background: linear-gradient(135deg, rgba(230,245,255,0.78), rgba(234,245,239,0.82)), #eaf5ef;
    border-radius: 20px;
    padding: 48px 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 28px rgba(0,0,0,0.10);
    text-align: center;
    overflow: hidden;
}
.vqc-page .tl-card-back { transform: rotateY(180deg); justify-content: flex-start; padding: 28px 36px; }
.vqc-page .tl-card-word-sm { flex-shrink: 0; }
.vqc-page .tl-card-pos { margin-bottom: 12px; }
.vqc-page .tl-card-detail { flex-shrink: 0; margin-top: 0; padding-top: 12px; }
.vqc-page .tl-card-art {
    width: 220px;
    height: 220px;
    object-fit: contain;
    border-radius: 20px;
    margin-bottom: 12px;
    box-shadow: 0 4px 16px rgba(155,123,190,0.18);
    border: 3px solid rgba(255,255,255,0.7);
    background: #fff;
    flex-shrink: 0;
    transform: translateY(-12px);
}
.vqc-page .tl-card-word {
    font-size: clamp(36px, 8.5vw, 120px);
    font-weight: 700;
    color: #443a56;
    line-height: 1.15;
    margin-bottom: 10px;
    max-width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    word-break: break-word;
}
.vqc-page .tl-card-meta {
    font-size: 20px;
    color: #6f6680;
    margin-bottom: 24px;
}
.vqc-page .tl-flip-hint {
    color: #a99fb8;
    font-size: 16px;
    margin-top: 32px;
}
.vqc-page .tl-card-word-sm {
    font-size: clamp(32px, 9.1vw, 116px);
    font-weight: 700;
    color: #443a56;
    margin-bottom: 16px;
    line-height: 1.15;
    max-width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    word-break: break-word;
}
.vqc-page .tl-card-pos {
    font-size: 11px;
    color: #6f6680;
    margin-bottom: 16px;
    line-height: 1.5;
}
.vqc-page .tl-card-detail {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #f2eef7;
    width: 100%;
    max-width: 520px;
}
.vqc-page .tl-card-detail .en { font-size: 16px; color: #443a56; margin-bottom: 6px; }
.vqc-page .tl-card-detail .cn { font-size: 7px; color: #6f6680; }
.vqc-page .tl-card-body {
    width: 100%;
    max-width: 720px;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 4px 8px 0 8px;
    scrollbar-width: thin;
    scrollbar-color: rgba(0,0,0,0.18) transparent;
}
.vqc-page .tl-card-body::-webkit-scrollbar { width: 6px; }
.vqc-page .tl-card-body::-webkit-scrollbar-track { background: transparent; }
.vqc-page .tl-card-body::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.18);
    border-radius: 3px;
}
.vqc-page .tl-card-body::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.32); }
.vqc-page .rv-study-page {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}
.vqc-page .rv-study-page .tl-card-wrap {
    max-width: 900px;
    margin-bottom: 16px;
}
.vqc-page .rv-study-page .tl-card {
    min-height: 0;
}
.vqc-page .rv-review-bg {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 16px 20px 20px;
    background: linear-gradient(135deg, rgba(247,240,220,0.78), rgba(232,244,248,0.72)), #f7f0dc;
    border-radius: 12px;
}
.vqc-page .rv-review-bg .vm-learn-topbar {
    background: rgba(255,255,255,0.82);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.vqc-page .rv-review-bg .vm-learn-bar {
    background: rgba(236,229,243,0.55);
}
.vqc-page .rv-review-bg .tl-toolbar {
    background: rgba(247,244,251,0.72);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.vqc-page .rv-study-page .tl-card-face {
    background: linear-gradient(135deg, rgba(247,240,220,0.82), rgba(232,244,248,0.78)), #f7f0dc;
}
.vqc-page .rv-study-page .tl-card-pos {
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 14px;
    color: #443a56;
}
.vqc-page .rv-card-actions { flex-shrink: 0; margin-top: 16px; }
.vqc-page .rv-study-page .tl-card-back { padding: 24px 32px; }
.vqc-page .rv-card-actions {
    display: flex;
    gap: 20px;
    justify-content: center;
    margin-top: 28px;
}
.vqc-page .rv-verdict {
    padding: 14px 48px;
    border: none;
    border-radius: 14px;
    font-size: 18px;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    transition: all .2s;
    box-shadow: 0 4px 14px rgba(0,0,0,0.12);
}
.vqc-page .rv-verdict.known { background: #67c23a; }
.vqc-page .rv-verdict.unknown { background: #f56c6c; }
.vqc-page .rv-verdict:hover { filter: brightness(1.08); transform: translateY(-1px); }
.vqc-page .rv-card-source {
    font-size: 13px;
    color: #6f6680;
    margin-top: 12px;
}
.vqc-page .rv-study-page .tl-card-row .tl-card-wrap {
    max-width: 760px;
    margin-bottom: 0;
}
.vqc-page .rv-study-page .tl-card-row .tl-card {
    min-height: 460px;
}
.vqc-page .rv-view-tabs { display: inline-flex; gap: 8px; background: #ece5f3; border-radius: 8px; padding: 4px; }
.vqc-page .rv-view-tab { border: none; background: transparent; padding: 7px 16px; border-radius: 6px; cursor: pointer; font-size: 13px; color: #6f6680; transition: all .15s; }
.vqc-page .rv-view-tab.active { background: #fff; color: #e97591; box-shadow: 0 1px 3px rgba(0,0,0,.08); font-weight: 600; }
.vqc-page .rv-cal-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.vqc-page .rv-cal-month { font-weight: 600; font-size: 16px; }
.vqc-page .rv-cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0,1fr)); gap: 3px; }
.vqc-page .rv-cal-weekday { text-align: center; color: #6f6680; font-size: 11px; padding: 4px 0 2px; }
.vqc-page .rv-cal-day { min-height: 44px; border: 1px solid #ece5f3; border-radius: 6px; padding: 3px; cursor: pointer; transition: all .15s; position: relative; background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.vqc-page .rv-cal-day:hover { border-color: #e97591; box-shadow: 0 1px 4px rgba(233,117,145,.1); }
.vqc-page .rv-cal-day.empty { background: transparent; border-color: transparent; cursor: default; pointer-events: none; }
.vqc-page .rv-cal-day.blank { background: #faf8fd; }
.vqc-page .rv-cal-day.today { border-color: #e97591; background: #fff8f2; }
.vqc-page .rv-cal-day.selected { box-shadow: 0 0 0 2px #e97591; }
.vqc-page .rv-cal-num { font-size: 12px; font-weight: 600; color: #443a56; }
.vqc-page .rv-cal-day.today .rv-cal-num { color: #e97591; }
.vqc-page .rv-cal-dots { display: flex; flex-wrap: wrap; gap: 2px; margin-top: 2px; }
.vqc-page .rv-cal-dot { width: 5px; height: 5px; border-radius: 50%; }
.vqc-page .rv-cal-count { position: absolute; right: 3px; bottom: 3px; font-size: 9px; font-weight: 700; color: #fff; background: #c04a6c; padding: 0 4px; border-radius: 7px; line-height: 14px; min-width: 14px; text-align: center; }
.vqc-page .rv-cal-legend { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; font-size: 11px; color: #6f6680; }
.vqc-page .rv-cal-legend span { display: inline-flex; align-items: center; gap: 3px; }
.vqc-page .rv-cal-overdue-note { margin-top: 8px; padding: 6px 10px; background: #fef0f0; border: 1px solid #fbc4c4; border-radius: 6px; font-size: 11px; color: #f56c6c; }
.vqc-page .rv-cal-overdue-note b { color: #f56c6c; }

/* --- 响应式（主站文件未含媒体查询，这里补齐窄屏适配） --- */
.vqc-page{ padding:18px 16px 40px; }
@media (max-width:900px){
  .vqc-page .vm-overview{ flex-direction:column; align-items:stretch; }
  .vqc-page .vm-overview-right{ justify-content:center; }
}
/* 环形九宫格是固定 620×620（节点用 ±240px 绝对定位，无法靠改宽高收缩）。
   窄屏策略：给外层一个「已经缩过」的方盒 + overflow:hidden 消掉布局溢出，
   内层用 transform:scale 从左上角等比缩小 —— 视觉刚好填满，且不再产生横向滚动。
   （不能用 zoom：实测 zoom 不减少布局盒宽，反而更宽。） */
@media (max-width:680px){
  .vqc-page .vm-overview{ --ring-scale:.56; }
  .vqc-page .vm-overview-right{ width:calc(620px * var(--ring-scale)); height:calc(620px * var(--ring-scale));
    min-width:0; max-width:100%; margin:8px auto 0; overflow:hidden; position:relative; flex:0 0 auto; }
  .vqc-page .vm-ring{ position:absolute; top:0; left:0; transform:scale(var(--ring-scale)); transform-origin:top left; margin:0; }
  .vqc-page .vm-overview-title h2{ font-size:22px; }
  .vqc-page .rv-cal-grid{ gap:2px; }
  .vqc-page .rv-cal-day{ min-height:44px; }
  .vqc-page .rv-stat-cards{ grid-template-columns:repeat(2,1fr); }
  .vqc-page .bc-topbar{ flex-wrap:wrap; row-gap:8px; }
  .vqc-page .bc-linear-tools{ flex-wrap:wrap; }
  .vqc-page .tl-toolbar{ flex-wrap:wrap; }
  .vqc-page .side-arrow{ width:56px; height:56px; }
  .vqc-page .side-arrow-label{ display:none; }
  .vqc-page .bc-linear-tl-layout{ flex-direction:column; }
  .vqc-page .bc-linear-choices{ flex-direction:column; }
  /* 筛选栏：竖排 + 控件占满，避免 select 的 inline min-width:260px 撑破窄屏 */
  .vqc-page .filter-bar{ flex-direction:column; align-items:stretch; gap:10px; }
  .vqc-page .filter-item{ width:100%; flex-wrap:wrap; }
  .vqc-page .filter-item select, .vqc-page .filter-item input{ flex:1 1 auto; min-width:0 !important; width:100%; }
}
@media (max-width:440px){
  .vqc-page .vm-overview{ --ring-scale:.5; }
  .vqc-page .rv-stat-cards{ grid-template-columns:1fr 1fr; }
  .vqc-page .bc-topbar-btn{ font-size:12px; padding:6px 9px; }
}

/* ===== 选择词库页：两层筛选（版本 + 学段，参照首页 .gal-filters） ===== */
.vqc-page .vqc-filters{ display: flex; flex-direction: column; gap: 10px; margin: 0 0 18px; }
.vqc-page .vqc-filters .gal-row{ align-items: center; }
/* 版本切换条（复用 #/wb 的 .wb-seg 组件） */
.vqc-page .vqc-vers{
  display: flex; justify-content: flex-start; min-width: 0; flex: 1;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  padding-bottom: 4px; scrollbar-width: none;
}
.vqc-page .vqc-vers::-webkit-scrollbar{ display: none; }
.vqc-page .vqc-vers .wb-seg{ flex-wrap: nowrap; }
/* 学段条（chips，与首页 .gal-tabs 同视觉） */
.vqc-page .vqc-filters .gal-tabs .gt{ font-size: 12.5px; padding: 6px 14px; }

/* ===== 选择词库页：课本封面悬停放大 ===== */
.vqc-coverzoom{
  position: fixed; left: 0; top: 0; z-index: 9999;
  pointer-events: none;
  opacity: 0; transform: translateY(8px) scale(.96);
  transition: opacity .16s ease, transform .16s cubic-bezier(.2,.9,.3,1.2);
  background: rgba(255,255,255,.985);
  border: 1px solid #ffd9e4;
  border-radius: 16px;
  padding: 14px 14px 12px;
  max-width: min(94vw, 480px);
  box-shadow: 0 20px 52px rgba(160,90,120,.28), 0 2px 8px rgba(60,30,45,.08);
}
.vqc-coverzoom.on{ opacity: 1; transform: translateY(0) scale(1); }
.vqc-coverzoom .vqz-imgs{
  display: flex; align-items: center; justify-content: center; gap: 12px;
}
.vqc-coverzoom .vqz-imgs img{
  width: 146px; height: 206px;
  object-fit: contain; background: #fff;
  border-radius: 8px; border: 1px solid #f0dfe6;
  box-shadow: 0 6px 18px rgba(190,120,145,.26);
  display: block;
}
.vqc-coverzoom .vqz-imgs img:only-of-type{ width: 178px; height: 250px; }
.vqc-coverzoom .vqz-cap{
  margin-top: 11px; text-align: center;
  font-size: 13px; font-weight: 700; color: #443a56;
  max-width: 340px; margin-left: auto; margin-right: auto;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
@media (max-width: 560px){
  .vqc-coverzoom .vqz-imgs img{ width: 104px; height: 147px; }
  .vqc-coverzoom .vqz-imgs img:only-of-type{ width: 128px; height: 180px; }
}