/* css/components.css — All UI component styles: cards, modals, flashcards, quiz,
   tools, chat, collection, word detail, browse, study overlay, lobby, etc.
   Load after layout.css. */

.progress-ring{transform:rotate(-90deg)}
.progress-ring circle{fill:none;stroke-width:3;stroke:var(--border);cx:18;cy:18;r:15}
.progress-ring .progress-fill{stroke:var(--green);stroke-linecap:round;transition:stroke-dashoffset 0.6s ease}
.progress-text{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;font-size:calc(11px * var(--fs,1));font-weight:700;color:var(--green)}
.card:active{transform:scale(0.98)}
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px}
.word-card{background:var(--card);border-radius:var(--radius-sm);padding:14px;box-shadow:0 2px 8px rgba(0,0,0,0.06);cursor:pointer;transition:transform 0.2s,box-shadow 0.2s,border-color 0.2s;border:2px solid transparent;text-align:center}
.word-card:hover{border-color:var(--green);box-shadow:0 4px 20px rgba(var(--green-rgb),0.15),0 0 0 1px var(--green);transform:translateY(-2px)}
.word-card:active{transform:scale(0.96)}
.word-card .wc-word{font-size:calc(16px * var(--fs,1));font-weight:700;color:var(--text)}
.word-card .wc-pos{font-size:calc(11px * var(--fs,1));color:var(--text-lighter);margin:2px 0}
.word-card .wc-chinese{font-size:calc(13px * var(--fs,1));color:var(--text-light)}
.wc-row{display:flex;align-items:center;gap:10px;padding:0 14px;background:var(--card);border-bottom:1px solid rgba(0,0,0,0.05);cursor:pointer;transition:background .15s}
.wc-row:hover{background:var(--hover-bg)}
.wc-row:active{background:var(--green-light)}
.wc-row .wc-word{font-family:var(--font-display);font-size:calc(16px * var(--fs,1));font-weight:700;color:var(--text);min-width:96px;flex-shrink:0}
.wc-row .wc-phonetic{font-size:calc(11px * var(--fs,1));color:var(--text-lighter);min-width:72px;flex-shrink:0}
.wc-row .wc-pos{font-size:calc(10px * var(--fs,1));font-weight:700;color:var(--blue-dark);background:rgba(var(--blue-rgb),0.10);padding:2px 8px;border-radius:999px;flex-shrink:0;max-width:64px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wc-row .wc-chinese{font-size:calc(13px * var(--fs,1));color:var(--text-light);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wc-row .wc-known{font-size:calc(10px * var(--fs,1));font-weight:700;color:var(--green-dark);background:rgba(var(--green-rgb),0.12);padding:2px 8px;border-radius:999px;flex-shrink:0;margin-left:4px}
.filter-bar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.filter-chip{padding:8px 14px;border-radius:999px;border:1.5px solid var(--border);background:var(--card);font-size:calc(13px * var(--fs,1));font-weight:600;cursor:pointer;transition:all var(--transition-normal);color:var(--text-light);font-family:var(--font)}
.filter-chip:hover{border-color:rgba(var(--green-rgb),0.4);color:var(--green-dark);transform:translateY(-1px)}
.filter-chip.active{background:var(--green);color:#fff;border-color:var(--green);box-shadow:0 3px 0 var(--green-dark),var(--shadow-green);transform:translateY(-1px)}
.filter-chip:active{transform:translateY(1px) scale(0.97)}
.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:200;background:rgba(0,0,0,0.45);display:flex;align-items:flex-end;justify-content:center;animation:fadeIn 0.2s ease;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.modal-overlay.hidden{display:none}
.modal-sheet{background:var(--card);border-radius:24px 24px 0 0;width:100%;max-width:680px;max-height:85vh;overflow-y:auto;padding:24px 20px 32px;animation:slideUp 0.35s cubic-bezier(0.32,0.72,0,1);box-shadow:0 -8px 40px rgba(0,0,0,0.15)}
.modal-word{font-size:calc(36px * var(--fs,1));font-weight:800;text-align:center}
.modal-phonetic{font-size:calc(16px * var(--fs,1));color:var(--text-light);text-align:center;margin:4px 0 12px}
.modal-pos-chinese{text-align:center;font-size:calc(15px * var(--fs,1));color:var(--text-light);margin-bottom:20px}
.modal-pos-chinese .pos-tag{display:inline-block;background:var(--blue);color:#fff;padding:3px 10px;border-radius:12px;font-size:calc(12px * var(--fs,1));font-weight:600;margin-right:8px}
/* POS circle tags for modal */
.pos-circle{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;font-size:calc(11px * var(--fs,1));font-weight:700;color:#fff;flex-shrink:0;margin-right:8px}
.pos-circle.v{background:#FF6B8A}
.pos-circle.n{background:#4A90D9}
.pos-circle.adj{background:#9B59B6}
.pos-circle.adv{background:#E67E22}
.pos-circle.other{background:#95A5A6}
.pos-meaning-line{display:flex;align-items:center;margin-bottom:8px;font-size:calc(15px * var(--fs,1));line-height:1.6}
.pos-meaning-line .pos-label{font-weight:700;min-width:36px}
.audio-btn{display:inline-flex;align-items:center;gap:6px;padding:10px 18px;border-radius:24px;border:2px solid var(--border);background:var(--card);cursor:pointer;font-size:calc(14px * var(--fs,1));font-weight:600;color:var(--text);transition:all var(--transition-normal);font-family:var(--font);box-shadow:0 1px 4px rgba(0,0,0,0.04)}
.audio-btn:hover{background:var(--hover-bg);border-color:var(--green);box-shadow:0 2px 8px rgba(var(--green-rgb),0.12)}
.audio-btn.playing{background:var(--green);color:#fff;border-color:var(--green);animation:pulse 0.6s infinite;box-shadow:var(--shadow-green)}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
.audio-row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-bottom:20px}
.detail-section{margin-bottom:16px;padding:16px;background:var(--section-bg);border-radius:var(--radius-sm);border:1px solid rgba(0,0,0,0.03);transition:all 0.2s}
.detail-section:hover{border-color:rgba(var(--green-rgb),0.15);box-shadow:0 2px 8px rgba(0,0,0,0.04)}
.detail-section .section-label{font-size:calc(12px * var(--fs,1));font-weight:700;color:var(--text-lighter);text-transform:uppercase;letter-spacing:1px;margin-bottom:8px}
.detail-section .phrase-en{font-size:calc(17px * var(--fs,1));font-weight:600;color:var(--blue)}
.detail-section .phrase-cn{font-size:calc(14px * var(--fs,1));color:var(--text-light);margin-top:2px}
.detail-section .sentence-en{font-size:calc(16px * var(--fs,1));font-weight:500;color:var(--text)}
.detail-section .sentence-cn{font-size:calc(14px * var(--fs,1));color:var(--text-light);margin-top:4px}
.flashcard-container{display:flex;flex-direction:column;align-items:center;gap:20px}
.flashcard{width:100%;max-width:380px;min-height:260px;height:auto;aspect-ratio:4/3;perspective:1000px;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;user-select:none}
.flashcard-inner{position:relative;width:100%;height:100%;transition:transform 0.5s cubic-bezier(0.4,0,0.2,1);transform-style:preserve-3d;-webkit-transform-style:preserve-3d}
.flashcard-inner.flipped{transform:rotateY(180deg)}
.flashcard-front,.flashcard-back{position:absolute;top:0;right:0;bottom:0;left:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:var(--radius);display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 8px 32px rgba(0,0,0,0.12),0 2px 8px rgba(0,0,0,0.06)}
.flashcard-front{position:absolute;top:0;right:0;bottom:0;left:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:linear-gradient(135deg,var(--flashcard-grad-start) 0%,#D4F0C0 40%,var(--flashcard-grad-end) 100%);border:3px solid var(--green);border-radius:var(--radius);display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 8px 32px rgba(var(--green-rgb),0.15),0 2px 8px rgba(0,0,0,0.06)}
.flashcard-front::before{content:'';position:absolute;top:-30%;right:-20%;width:180px;height:180px;background:radial-gradient(circle,rgba(255,255,255,0.4),transparent 70%);border-radius:50%;pointer-events:none}
.flashcard-back{background:var(--card);border:3px solid var(--blue);transform:rotateY(180deg);padding:20px;overflow-y:auto;box-shadow:0 8px 32px rgba(var(--blue-rgb),0.12),0 2px 8px rgba(0,0,0,0.06)}
.flashcard-front .fc-word{font-size:calc(42px * var(--fs,1));font-weight:800;color:var(--text)}
.flashcard-front .fc-hint{font-size:calc(14px * var(--fs,1));color:var(--text-lighter);margin-top:12px}
/* ===== Immersive Learning View ===== */
.immersive-container{display:flex;flex-direction:column;align-items:center;gap:16px;max-width:420px;margin:0 auto;padding:0 4px}
.immersive-header{display:flex;align-items:center;justify-content:space-between;width:100%;padding:0 4px}
.immersive-counter{font-size:calc(14px * var(--fs,1));color:var(--text-light);font-weight:600}
.immersive-stage{font-size:calc(12px * var(--fs,1));color:var(--blue);font-weight:600}
.immersive-card{width:100%;background:var(--card);border-radius:20px;border:2px solid var(--green);box-shadow:0 8px 32px rgba(var(--green-rgb),0.1),0 2px 8px rgba(0,0,0,0.06);overflow:hidden}
.immersive-word-area{padding:28px 24px 20px;text-align:center;background:linear-gradient(135deg,rgba(var(--green-rgb),0.04),rgba(var(--blue-rgb),0.04))}
.immersive-word{font-size:calc(38px * var(--fs,1));font-weight:800;color:var(--text);line-height:1.2;word-break:break-word}
.immersive-phonetic{font-size:calc(14px * var(--fs,1));color:var(--text-light);margin-top:8px}
.immersive-divider{height:1px;background:linear-gradient(90deg,transparent,var(--border),transparent);margin:0 20px}
.immersive-meaning-area{padding:20px 24px}
.immersive-chinese{font-size:calc(20px * var(--fs,1));font-weight:600;color:var(--text);line-height:1.5;margin-bottom:12px}
.immersive-sentence{font-size:calc(13px * var(--fs,1));color:var(--text-light);line-height:1.6;padding:12px 16px;background:rgba(255,255,255,0.03);border-radius:12px;border-left:3px solid var(--blue)}
.immersive-toolbar{display:flex;gap:8px;justify-content:center;padding:0 24px 20px}
.immersive-actions{display:flex;gap:12px;width:100%;padding:0 4px}
.immersive-actions .fc-btn{flex:1;padding:16px 12px;font-size:calc(16px * var(--fs,1));font-weight:700;border-radius:14px;transition:all 0.2s}
.immersive-actions .fc-btn:active{transform:scale(0.97)}
.flashcard-back .fc-detail{text-align:center;font-size:calc(15px * var(--fs,1));line-height:1.8}
.flashcard-back .fc-detail .fc-chinese{font-size:calc(24px * var(--fs,1));font-weight:700;color:var(--text)}
.flashcard-back .fc-detail .fc-pos{color:var(--blue);font-weight:600;margin:4px 0}
.flashcard-back .fc-detail .fc-sentence{color:var(--text-light);font-size:calc(14px * var(--fs,1));margin-top:8px}
.flashcard-actions{display:flex;gap:16px}
.fc-btn{padding:14px 32px;border-radius:28px;border:none;font-size:calc(16px * var(--fs,1));font-weight:700;cursor:pointer;transition:all var(--transition-normal);font-family:var(--font);box-shadow:0 2px 8px rgba(0,0,0,0.1)}
.fc-btn:active{transform:scale(0.94)}
.fc-btn:hover{transform:translateY(-1px);box-shadow:0 4px 16px rgba(0,0,0,0.15)}
.fc-btn.know{background:var(--green);color:#fff;box-shadow:0 2px 8px rgba(var(--green-rgb),0.3)}
.fc-btn.review{background:var(--orange);color:#fff;box-shadow:0 2px 8px rgba(255,150,0,0.3)}
.fc-btn.skip{background:var(--border);color:var(--text-light);box-shadow:none}
.fc-btn.skip:hover{background:#D8D8D8}
.fc-btn.audio-fc{background:var(--blue);color:#fff;padding:10px 20px;font-size:calc(14px * var(--fs,1));box-shadow:0 2px 8px rgba(var(--blue-rgb),0.3)}
.flashcard-counter{font-size:calc(14px * var(--fs,1));color:var(--text-lighter);font-weight:600}
/* ⚠️ .quiz-start-btn 虽叫 quiz，其实是全站复用的「实心主按钮」类：
   签到 / 宝箱 / 头像设置 / 登录注册 / 金币面板都在用（index.html 3 处 + cloud-sync.js + coins.js）。
   测验重做时不能连它一起改 —— 下面保留原样式，测验段内用自己的 #sec-quiz .quiz-start-btn 覆盖。 */
.quiz-start-btn{padding:16px 48px;border-radius:28px;border:none;background:linear-gradient(135deg,var(--green) 0%,var(--green-dark) 100%);color:#fff;font-size:calc(18px * var(--fs,1));font-weight:700;cursor:pointer;font-family:var(--font);transition:all var(--transition-normal);box-shadow:var(--shadow-green)}
.quiz-start-btn:hover{transform:translateY(-2px);box-shadow:0 6px 24px rgba(var(--green-rgb),0.35)}
.quiz-start-btn:active{transform:scale(0.94)}

/* ═══════════════════════════════════════════════════════════════
   测验模块（R45 重做：扁平 / 全令牌 / 单一样式来源）
   规则约定：
   1) 全部选择器带 #sec-quiz 前缀 —— 既做模块隔离，也让权重(1,1,0)高过
      base.css 里 body.theme-dark *{color:inherit}(0,1,1)，暗色下不会被抹平。
   2) 只用 var(--*) 令牌，不再写死颜色 —— 于是 dark-fix.css 不再为测验生成补丁。
   3) 字号一律 calc(Npx * var(--fs,1))，跟随「字体大小」三档。
   ═══════════════════════════════════════════════════════════════ */

/* ── 容器 ── */
#sec-quiz .quiz-container{display:flex;flex-direction:column;align-items:center;gap:16px;width:100%;max-width:100%;min-width:0}
#sec-quiz #quiz-start{width:100%;max-width:520px;min-width:0}
#sec-quiz #quiz-active{min-width:0}
#sec-quiz #quiz-result{width:100%;max-width:520px}

/* ── 顶栏：返回 · 模式 · 题数 · 退出 ── */
#sec-quiz .quiz-top-bar{display:flex;justify-content:space-between;align-items:center;gap:10px;width:100%;margin-bottom:4px}
#sec-quiz .quiz-top-bar .back-progress{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-width:0;font-size:calc(13px * var(--fs,1));font-weight:600;color:var(--text-light)}
#sec-quiz .quiz-top-bar .action-icons{display:flex;align-items:center;gap:8px}
#sec-quiz .quiz-mode-label{font-size:calc(14px * var(--fs,1));font-weight:700;color:var(--green)}
#sec-quiz .quiz-count-label{font-size:calc(13px * var(--fs,1));color:var(--text-light)}
#sec-quiz .quiz-counter{font-size:calc(14px * var(--fs,1));font-weight:700;color:var(--text);font-variant-numeric:tabular-nums}
#sec-quiz .quiz-icon-btn{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;padding:0;border:1px solid var(--border);border-radius:var(--radius-xs);background:var(--card);color:var(--text-light);cursor:pointer;transition:border-color var(--transition-fast),color var(--transition-fast)}
#sec-quiz .quiz-icon-btn:hover{border-color:var(--text-light);color:var(--text)}
#sec-quiz .quiz-icon-btn svg{display:block}

/* ── 进度条 ── */
#sec-quiz .quiz-progress{width:120px;height:5px;flex:0 0 auto;overflow:hidden;background:var(--border);border-radius:3px}
#sec-quiz .quiz-progress-bar{height:100%;width:0;background:var(--green);border-radius:3px;transition:width var(--transition-normal)}

/* ── 昨日复习提示：扁平卡 + 左侧主色条 ── */
#sec-quiz #quiz-review-banner{display:none;width:100%;margin-bottom:4px;padding:12px 14px;background:var(--card);border:1px solid var(--border);border-left:3px solid var(--green);border-radius:var(--radius-sm)}
#sec-quiz .quiz-rv-main{display:flex;align-items:center;gap:12px;justify-content:space-between}
#sec-quiz .quiz-rv-t{font-size:calc(14px * var(--fs,1));font-weight:700;color:var(--text)}
#sec-quiz .quiz-rv-d{margin-top:2px;font-size:calc(12px * var(--fs,1));color:var(--text-light)}
#sec-quiz .quiz-rv-btn{flex:0 0 auto;padding:7px 16px;border:1px solid var(--green);border-radius:var(--radius-xs);background:transparent;color:var(--green);font-family:var(--font);font-size:calc(13px * var(--fs,1));font-weight:700;cursor:pointer}
#sec-quiz .quiz-rv-btn:hover{background:var(--green-light)}

/* ── 设置卡：标签左 / 控件右 ── */
#sec-quiz .quiz-settings-card{width:100%;max-width:480px;min-width:0;padding:4px 16px;background:var(--card);border:1px solid var(--border);border-radius:var(--radius-sm)}
#sec-quiz .quiz-setting-row{display:grid;grid-template-columns:4.4em minmax(0,1fr);align-items:center;gap:10px;padding:12px 0;border-bottom:1px solid var(--border)}
#sec-quiz .quiz-setting-row:last-child{border-bottom:none}
#sec-quiz .quiz-setting-row--wide{grid-template-columns:1fr;gap:8px}
#sec-quiz .quiz-setting-label{font-size:calc(13px * var(--fs,1));font-weight:600;line-height:1.35;color:var(--text-light)}
#sec-quiz .quiz-mode-pill{justify-self:start;display:inline-flex;align-items:center;padding:8px 16px;border:1px solid var(--green);border-radius:var(--radius-xs);background:var(--green-light);color:var(--green-dark);font-family:var(--font);font-size:calc(14px * var(--fs,1));font-weight:700;cursor:pointer}
#sec-quiz .quiz-mode-pill:hover{background:color-mix(in srgb,var(--green) 20%,transparent)}
#sec-quiz .quiz-chip-group{display:flex;flex-wrap:wrap;gap:6px}
#sec-quiz .quiz-diff-chip,#sec-quiz .quiz-count-chip{padding:7px 14px;border:1px solid var(--border);border-radius:var(--radius-xs);background:var(--card);color:var(--text);font-family:var(--font);font-size:calc(13px * var(--fs,1));font-weight:600;cursor:pointer;transition:border-color var(--transition-fast),color var(--transition-fast)}
#sec-quiz .quiz-diff-chip:hover,#sec-quiz .quiz-count-chip:hover{border-color:var(--green);color:var(--green)}
#sec-quiz .quiz-diff-chip.active,#sec-quiz .quiz-count-chip.active{background:var(--green);border-color:var(--green);color:#fff}
#sec-quiz .quiz-drill-slot{margin:0;gap:6px;flex-wrap:wrap}

/* ── 主行动按钮（开始测验 / 提交 / 查看答案 / 继续 / 再来一局）── */
#sec-quiz .quiz-action-btn,#sec-quiz .quiz-start-btn{padding:14px 20px;border:1px solid transparent;border-radius:var(--radius-sm);background:var(--green);color:#fff;font-family:var(--font);font-size:calc(16px * var(--fs,1));font-weight:700;cursor:pointer;transition:opacity var(--transition-fast)}
#sec-quiz .quiz-action-btn{width:100%;margin-top:16px}
#sec-quiz .quiz-action-btn:hover,#sec-quiz .quiz-start-btn:hover{opacity:.9}
#sec-quiz .quiz-action-btn:active,#sec-quiz .quiz-start-btn:active{opacity:.8}
#sec-quiz .quiz-start-action{max-width:480px;margin-top:20px}
#sec-quiz .quiz-submit-btn{margin-top:10px;padding:12px 20px;font-size:calc(14px * var(--fs,1))}
#sec-quiz .quiz-start-summary{margin-top:8px;text-align:center;font-size:calc(12px * var(--fs,1));color:var(--text-light)}
#sec-quiz .quiz-start-btn{padding:14px 32px;box-shadow:none}
#sec-quiz .quiz-start-btn:hover{transform:none;box-shadow:none}
#sec-quiz .quiz-start-btn:active{transform:none}
#sec-quiz .quiz-result-actions{margin-top:20px;text-align:center}

/* ── 答题区：词 + 音标 ── */
#sec-quiz .quiz-word-display{width:100%;margin-bottom:12px}
#sec-quiz .quiz-word-display .word{margin-bottom:8px;font-size:calc(38px * var(--fs,1));font-weight:800;line-height:1.15;color:var(--text);word-break:break-word}
#sec-quiz .quiz-word-display .phonetic-pill{display:inline-flex;align-items:center;gap:8px;max-width:100%;flex-wrap:wrap;padding:5px 12px;background:var(--card);border:1px solid var(--border);border-radius:var(--radius-xs);font-size:calc(13px * var(--fs,1));color:var(--text-light)}
#sec-quiz .quiz-word-display .phonetic-pill .accent{font-size:calc(12px * var(--fs,1));color:var(--text-lighter)}
#sec-quiz .quiz-word-display .phonetic-pill .phonetic{font-family:'Courier New',monospace}
#sec-quiz .quiz-word-display .phonetic-pill .audio-btn{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;border:none;border-radius:var(--radius-xs);background:transparent;color:var(--green);cursor:pointer}
#sec-quiz .quiz-word-display .phonetic-pill .audio-btn:hover{background:var(--hover-bg)}
#sec-quiz .quiz-word-display .phonetic-pill .audio-btn svg{display:block}
#sec-quiz .quiz-instruction{width:100%;margin-bottom:14px;font-size:calc(13px * var(--fs,1));color:var(--text-light)}
#sec-quiz .quiz-question{width:100%;margin-bottom:12px;font-size:calc(24px * var(--fs,1));font-weight:700;line-height:1.4;color:var(--text);text-align:left}

/* ── 选项：A/B/C/D 序号 + 扁平卡 ── */
#sec-quiz .quiz-options{display:flex;flex-direction:column;gap:10px;width:100%;max-width:100%}
#sec-quiz .quiz-option{display:flex;align-items:center;gap:12px;min-height:52px;padding:12px 16px;background:var(--card);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);font-family:var(--font);font-size:calc(15px * var(--fs,1));text-align:left;cursor:pointer;transition:border-color var(--transition-fast),background var(--transition-fast)}
#sec-quiz .quiz-option:hover{border-color:var(--green)}
#sec-quiz .quiz-option:disabled{pointer-events:none}
#sec-quiz .quiz-option .quiz-opt-key{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border:1px solid var(--border);border-radius:var(--radius-xs);font-size:calc(12px * var(--fs,1));font-weight:700;line-height:1;color:var(--text-light)}
#sec-quiz .quiz-option .option-content{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
#sec-quiz .quiz-option .option-pos{font-size:calc(12px * var(--fs,1));font-weight:500;color:var(--text-light)}
#sec-quiz .quiz-option .option-meaning{font-size:calc(15px * var(--fs,1));font-weight:500;color:var(--text);word-break:break-word}
#sec-quiz .quiz-option .option-icon{flex:0 0 auto;margin-left:auto;font-size:calc(16px * var(--fs,1));font-weight:700;color:var(--text-light)}
#sec-quiz .quiz-option.correct{background:var(--correct-bg);border-color:var(--green)}
#sec-quiz .quiz-option.correct .quiz-opt-key{border-color:var(--green);color:var(--green)}
#sec-quiz .quiz-option.correct .option-icon{color:var(--green)}
#sec-quiz .quiz-option.wrong{background:var(--wrong-bg);border-color:var(--red)}
#sec-quiz .quiz-option.wrong .quiz-opt-key{border-color:var(--red);color:var(--red)}
#sec-quiz .quiz-option.wrong .option-icon{color:var(--red)}

/* ── 填空 / 听音 ── */
#sec-quiz #quiz-input-area{width:100%;max-width:400px;margin:0 auto}
#sec-quiz #quiz-fill-display{margin-bottom:10px;font-family:'Courier New',monospace;font-size:calc(24px * var(--fs,1));font-weight:700;letter-spacing:4px;text-align:center;color:var(--text)}
#sec-quiz #quiz-text-input{width:100%;padding:12px 16px;background:var(--card);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);font-family:var(--font);font-size:calc(17px * var(--fs,1));text-align:center;letter-spacing:2px;outline:none;transition:border-color var(--transition-fast)}
#sec-quiz #quiz-text-input:focus{border-color:var(--green)}
#sec-quiz #quiz-listen-area{width:100%;text-align:center}
#sec-quiz .quiz-listen-btn{display:inline-flex;align-items:center;justify-content:center;width:72px;height:72px;padding:0;background:var(--card);border:1px solid var(--border);border-radius:50%;color:var(--green);cursor:pointer;transition:border-color var(--transition-fast)}
#sec-quiz .quiz-listen-btn:hover{border-color:var(--green)}
#sec-quiz .quiz-listen-hint{margin-top:8px;font-size:calc(12px * var(--fs,1));color:var(--text-light)}

/* ── 结果页 ── */
#sec-quiz .quiz-score{padding:22px 16px;background:var(--card);border:1px solid var(--border);border-radius:var(--radius-sm);text-align:center;color:var(--text)}
#sec-quiz .quiz-res-score{font-size:calc(20px * var(--fs,1));font-weight:600;color:var(--text-light);letter-spacing:.5px}
#sec-quiz .quiz-res-score b{font-size:calc(34px * var(--fs,1));font-weight:800;color:var(--green)}
#sec-quiz .quiz-res-line{margin-top:8px;font-size:calc(14px * var(--fs,1));color:var(--text-light)}
#sec-quiz .quiz-res-extra{margin-top:14px;padding:12px 14px;background:var(--section-bg);border-left:3px solid var(--green);border-radius:var(--radius-xs);text-align:left;font-size:calc(13px * var(--fs,1));color:var(--text)}
#sec-quiz .quiz-res-extra b{font-size:calc(16px * var(--fs,1));font-weight:800;color:var(--green)}
#sec-quiz .quiz-res-report{margin-top:14px;padding:10px 20px;background:transparent;border:1px solid var(--green);border-radius:var(--radius-xs);color:var(--green);font-family:var(--font);font-size:calc(14px * var(--fs,1));font-weight:700;cursor:pointer}
#sec-quiz .quiz-res-report:hover{background:var(--green-light)}
#sec-quiz .quiz-res-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:16px}
#sec-quiz .quiz-res-actions .quiz-res-report{margin-top:0;flex:0 1 auto;min-width:132px}
.search-input-wrap{position:relative;margin-bottom:16px}
.search-input{width:100%;padding:14px 18px 14px 46px;border-radius:999px;border:2px solid var(--border);font-size:calc(16px * var(--fs,1));font-family:var(--font);outline:none;transition:all var(--transition-normal);background:var(--card);box-shadow:0 2px 8px rgba(0,0,0,0.04)}
.search-input:focus{border-color:var(--green);box-shadow:0 0 0 3px rgba(var(--green-rgb),0.10)}
.search-icon{position:absolute;left:18px;top:50%;transform:translateY(-50%);font-size:calc(20px * var(--fs,1));color:var(--text-lighter);pointer-events:none;transition:color .2s}
.search-input-wrap:focus-within .search-icon{color:var(--green)}
.search-results{display:flex;flex-direction:column;gap:10px}
.search-result-card{background:var(--card);border-radius:16px;padding:15px 18px;box-shadow:0 2px 8px rgba(0,0,0,0.05);cursor:pointer;display:flex;align-items:center;justify-content:space-between;transition:all var(--transition-normal);border:1px solid rgba(0,0,0,0.03)}
.search-result-card:hover{background:var(--hover-bg);box-shadow:0 4px 16px rgba(var(--green-rgb),0.12);border-color:rgba(var(--green-rgb),0.25);transform:translateX(3px)}
.search-result-card .sr-left{display:flex;flex-direction:column;gap:3px}
.search-result-card .sr-word{font-family:var(--font-display);font-size:calc(18px * var(--fs,1));font-weight:700;color:var(--text)}
.search-result-card .sr-chinese{font-size:calc(13px * var(--fs,1));color:var(--text-light)}
.search-result-card .sr-pos{font-size:calc(10px * var(--fs,1));color:var(--blue-dark);background:rgba(var(--blue-rgb),0.10);padding:2px 8px;border-radius:999px;font-weight:700;align-self:flex-start}
.search-empty{text-align:center;color:var(--text-lighter);padding:40px;font-size:calc(15px * var(--fs,1))}
/* Toast notifications */
.toast-container{position:fixed;top:70px;left:50%;transform:translateX(-50%);z-index:300;display:flex;flex-direction:column;gap:8px;pointer-events:none}
.toast{padding:12px 24px;border-radius:16px;font-size:calc(14px * var(--fs,1));font-weight:700;color:#fff;animation:toastIn 0.35s cubic-bezier(0.34,1.56,0.64,1),toastOut 0.3s ease 1.5s forwards;box-shadow:0 6px 24px rgba(0,0,0,0.15);text-align:center;white-space:nowrap;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.toast.success{background:linear-gradient(135deg,var(--green),var(--green-dark))}
.toast.warning{background:linear-gradient(135deg,var(--orange),var(--orange-dark))}
.toast.info{background:linear-gradient(135deg,var(--blue),var(--blue-dark))}
.toast.gray{background:linear-gradient(135deg,#888,#666)}
.nav-label{font-size:calc(10px * var(--fs,1));font-weight:500;letter-spacing:0.02em}
/* Lobby styles */
.lobby-welcome{position:relative;display:flex;align-items:center;justify-content:space-between;gap:14px;text-align:left;padding:28px 30px;border-radius:32px;color:#fff;margin-bottom:16px;overflow:hidden;transition:all 1s ease;min-height:140px;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);background:rgba(255,255,255,0.12);border:1px solid rgba(255,255,255,0.2);box-shadow:0 20px 50px rgba(0,0,0,0.2)}
/* 6 time periods - DeepSeek weather clock gradients */
.lobby-welcome.period-dawn{background:linear-gradient(145deg,rgba(251,194,160,0.85) 0%,rgba(245,168,138,0.8) 50%,rgba(212,185,160,0.8) 100%);color:#4d2e1b;border-color:rgba(255,200,150,0.5)}
.lobby-welcome.period-am{background:linear-gradient(160deg,rgba(116,185,255,0.85) 0%,rgba(168,216,234,0.8) 50%,rgba(223,230,233,0.8) 100%);color:#1e2a3a;border-color:rgba(255,255,255,0.6)}
.lobby-welcome.period-noon{background:linear-gradient(135deg,rgba(247,151,30,0.85) 0%,rgba(255,210,0,0.8) 100%);color:#3d2b0a;border-color:rgba(255,200,0,0.6)}
.lobby-welcome.period-pm{background:linear-gradient(150deg,rgba(86,204,242,0.85) 0%,rgba(47,128,237,0.85) 100%);color:#fff;border-color:rgba(255,255,255,0.3)}
.lobby-welcome.period-evening{background:linear-gradient(145deg,rgba(233,100,67,0.85) 0%,rgba(144,78,149,0.85) 100%);color:#fff;border-color:rgba(255,150,100,0.4)}
.lobby-welcome.period-night{background:linear-gradient(160deg,rgba(15,12,41,0.92) 0%,rgba(48,43,99,0.88) 50%,rgba(36,36,62,0.88) 100%);color:#fff;border-color:rgba(255,255,255,0.12);padding:24px 26px}
/* Clock display */
.lw-clock{font-size:calc(38px * var(--fs,1));font-weight:300;letter-spacing:2px;font-variant-numeric:tabular-nums;text-shadow:0 2px 12px rgba(0,0,0,0.15);margin-bottom:4px;line-height:1.1}
.lw-desc{margin-top:8px;font-size:calc(12px * var(--fs,1));opacity:0.65;letter-spacing:3px;font-weight:300}
.lobby-welcome
.lobby-welcome::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:radial-gradient(ellipse 120% 80% at 75% 20%,rgba(255,255,255,0.08) 0%,transparent 60%);pointer-events:none}
.lobby-welcome::after{content:'';position:absolute;bottom:-35%;left:-10%;width:150px;height:150px;background:radial-gradient(circle,rgba(255,255,255,0.12),transparent 70%);border-radius:50%;pointer-events:none}
.weather-morning::before{background:radial-gradient(circle,rgba(253,203,110,0.6),rgba(255,255,255,0.1) 60%,transparent 70%);top:-30%;right:-10%;width:140px;height:140px}
.weather-afternoon::before{background:radial-gradient(circle,rgba(255,255,255,0.5),rgba(255,255,255,0.1) 50%,transparent 70%);top:-25%;right:-8%;width:120px;height:120px}
.weather-evening::before{background:radial-gradient(circle,rgba(255,180,100,0.5),rgba(214,48,49,0.2) 50%,transparent 70%);top:-20%;right:-5%;width:160px;height:160px}
.weather-night::before{background:radial-gradient(ellipse 160% 120% at 70% 30%,rgba(255,255,255,0.06) 0%,rgba(100,120,200,0.04) 40%,transparent 70%);width:auto;height:auto;top:0;right:0;bottom:0;left:0}
.weather-night::after{background:none;content:'\2726\00a0\00a0\2727\00a0\2726';font-size:calc(11px * var(--fs,1));color:rgba(255,255,255,0.35);width:auto;height:auto;bottom:12px;left:15px;letter-spacing:6px}
.weather-aurora::before{background:linear-gradient(160deg,rgba(64,145,108,0.4),rgba(45,106,79,0.2),transparent 70%);top:-50%;right:-20%;width:250px;height:200px;border-radius:40%}
.weather-aurora::after{background:linear-gradient(200deg,rgba(116,185,255,0.2),rgba(162,155,254,0.15),transparent 60%);bottom:-40%;left:-15%;width:200px;height:180px;border-radius:40%}
.lobby-welcome .lw-text{position:relative;z-index:1}
.lobby-welcome h2{font-family:var(--font-display);font-size:calc(22px * var(--fs,1));font-weight:600;margin-bottom:2px;text-shadow:0 1px 6px rgba(0,0,0,0.15);letter-spacing:1px}
.lobby-welcome p{font-size:calc(13px * var(--fs,1));opacity:0.85;position:relative;font-weight:500;letter-spacing:0.3px}
.lobby-welcome .lw-mascot{display:none}
@keyframes lw-bob{0%,100%{transform:translateY(0) rotate(-8deg)}50%{transform:translateY(-5px) rotate(8deg)}}
/* ── Animated Weather Scene ── */
.lw-scene{position:absolute;top:0;right:0;bottom:0;width:45%;pointer-events:none;overflow:hidden;z-index:0;-webkit-mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,0.4) 20%,black 50%);mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,0.4) 20%,black 50%)}
/* Sun */
.lw-sun{position:absolute;top:14px;right:26px;width:44px;height:44px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#FFF9C4 0%,#FFE082 25%,#FFD54F 50%,#FFB300 75%,rgba(255,179,0,0) 100%);box-shadow:0 0 20px rgba(255,213,79,0.8),0 0 50px rgba(255,183,77,0.4),0 0 90px rgba(255,152,0,0.2);animation:lw-sun-pulse 5s ease-in-out infinite}
@keyframes lw-sun-pulse{0%,100%{transform:scale(1);box-shadow:0 0 30px rgba(255,217,61,0.6),0 0 60px rgba(255,180,50,0.3)}50%{transform:scale(1.08);box-shadow:0 0 40px rgba(255,217,61,0.8),0 0 80px rgba(255,180,50,0.4)}}
.lw-sun-rays{position:absolute;top:12px;right:22px;width:48px;height:48px;animation:lw-rays-spin 20s linear infinite}
@keyframes lw-rays-spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.lw-sun-rays::before,.lw-sun-rays::after{content:'';position:absolute;top:50%;left:50%;width:64px;height:64px;margin:-32px 0 0 -32px;background:repeating-conic-gradient(rgba(255,220,80,0.35) 0deg 8deg,transparent 8deg 30deg);border-radius:50%}
.lw-sun-rays::after{width:80px;height:80px;margin:-40px 0 0 -40px;background:repeating-conic-gradient(rgba(255,200,50,0.15) 0deg 5deg,transparent 5deg 24deg);animation:lw-rays-spin 30s linear infinite reverse}
/* Clouds */
.lw-cloud{position:absolute;background:rgba(255,255,255,0.9);border-radius:50px;filter:blur(2px);box-shadow:0 2px 8px rgba(255,255,255,0.3)}
.lw-cloud::before,.lw-cloud::after{content:'';position:absolute;background:inherit;border-radius:50%;filter:blur(1px)}
.lw-cloud-1{width:64px;height:22px;top:16px;right:65px;animation:lw-drift-1 14s ease-in-out infinite}
.lw-cloud-1::before{width:34px;height:34px;top:-18px;left:6px}
.lw-cloud-1::after{width:26px;height:26px;top:-13px;left:28px}
.lw-cloud-2{width:48px;height:18px;top:42px;right:30px;opacity:0.65;animation:lw-drift-2 17s ease-in-out infinite}
.lw-cloud-2::before{width:26px;height:26px;top:-14px;left:5px}
.lw-cloud-2::after{width:20px;height:20px;top:-10px;left:22px}
.lw-cloud-3{width:38px;height:14px;top:8px;right:125px;opacity:0.45;animation:lw-drift-3 20s ease-in-out infinite}
.lw-cloud-3::before{width:20px;height:20px;top:-11px;left:4px}
.lw-cloud-3::after{width:16px;height:16px;top:-8px;left:17px}
@keyframes lw-drift-1{0%,100%{transform:translateX(0)}50%{transform:translateX(-14px)}}
/* Night clouds (darker) */
.weather-night .lw-cloud,.weather-aurora .lw-cloud{background:rgba(180,200,255,0.2)}
.weather-evening .lw-cloud{background:rgba(255,200,150,0.6)}
/* Moon */
.lw-moon{position:absolute;top:10px;right:20px;width:44px;height:44px;box-shadow:0 0 20px rgba(255,249,196,0.4),0 0 40px rgba(255,249,196,0.15);border-radius:50%;background:radial-gradient(circle at 65% 35%,#FFF9C4 0%,#FFF176 30%,#E0E0E0 70%,#BDBDBD 100%);box-shadow:0 0 15px rgba(255,249,196,0.6),0 0 40px rgba(255,241,118,0.3),0 0 70px rgba(255,255,255,0.1),inset -6px -4px 0 rgba(0,0,0,0.06);animation:lw-moon-glow 6s ease-in-out infinite}
.lw-moon::after{content:'';position:absolute;top:6px;left:8px;width:30px;height:30px;border-radius:50%;background:radial-gradient(circle at 60% 40%,transparent 55%,rgba(200,180,120,0.15) 70%);box-shadow:inset -4px -2px 0 rgba(200,180,120,0.1)}
.lw-stars{position:absolute;top:0;left:0;right:0;bottom:0}
.lw-star{position:absolute;width:2px;height:2px;border-radius:50%;background:#fff;animation:lw-twinkle 3s ease-in-out infinite;box-shadow:0 0 3px rgba(255,255,255,0.4)}
/* Shooting star */
.lw-shooting{position:absolute;top:15px;right:60px;width:2px;height:2px;background:#fff;border-radius:50%;opacity:0;animation:lw-shoot 6s ease-in-out infinite 2s}
.lw-shooting::after{content:'';position:absolute;top:0;right:0;width:30px;height:1px;background:linear-gradient(90deg,rgba(255,255,255,0.8),transparent);transform:rotate(-35deg);transform-origin:right center}
.lw-sun-set{position:absolute;bottom:-8px;right:30px;width:56px;height:56px;border-radius:50%;background:radial-gradient(circle,#FF8C42 20%,#FF6B35 50%,rgba(255,107,53,0) 72%);box-shadow:0 0 40px rgba(255,107,53,0.5),0 -10px 60px rgba(255,140,66,0.3);animation:lw-sun-set-pulse 5s ease-in-out infinite}
@keyframes lw-sun-set-pulse{0%,100%{transform:translateY(0)}50%{transform:translateY(3px)}}
/* Birds (morning/afternoon) */
.lw-bird{position:absolute;font-size:calc(10px * var(--fs,1));color:rgba(255,255,255,0.7);animation:lw-fly 8s ease-in-out infinite}
.lw-bird-1{top:14px;right:100px;animation-delay:0s}
.lw-bird-2{top:24px;right:130px;font-size:calc(8px * var(--fs,1));animation-delay:1.5s;opacity:0.6}
@keyframes lw-fly{0%,100%{transform:translate(0,0)}25%{transform:translate(-6px,-3px)}50%{transform:translate(-12px,0)}75%{transform:translate(-6px,2px)}}
/* Aurora waves */
.lw-aurora{position:absolute;top:0;left:0;right:0;bottom:0;overflow:hidden}
.lw-aurora-band{position:absolute;width:200%;height:40px;left:-50%;border-radius:50%;filter:blur(8px);animation:lw-aurora-wave 8s ease-in-out infinite}
.lw-aurora-band:nth-child(1){top:5px;background:linear-gradient(90deg,transparent,rgba(64,224,150,0.3),rgba(100,200,255,0.2),transparent);animation-delay:0s}
.lw-aurora-band:nth-child(2){top:18px;background:linear-gradient(90deg,transparent,rgba(100,200,255,0.25),rgba(160,120,255,0.2),transparent);animation-delay:2s}
.lw-aurora-band:nth-child(3){top:32px;background:linear-gradient(90deg,transparent,rgba(160,120,255,0.2),rgba(64,224,150,0.25),transparent);animation-delay:4s}
@keyframes lw-aurora-wave{0%,100%{transform:translateX(-10%) skewX(-5deg)}50%{transform:translateX(10%) skewX(5deg)}}
/* Weather icon badge */
.lw-weather-icon{position:absolute;bottom:10px;right:14px;font-size:calc(22px * var(--fs,1));z-index:2;filter:drop-shadow(0 2px 4px rgba(0,0,0,0.2));animation:lw-icon-float 4s ease-in-out infinite}
@keyframes lw-icon-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
.lobby-feature-card{display:flex;align-items:center;justify-content:space-between;gap:12px;background:linear-gradient(135deg,#6EDC1F 0%,#58CC02 50%,#3DA202 100%);/* 兜底：不支持 color-mix 时维持原样 */background:linear-gradient(135deg,color-mix(in srgb, var(--green) 78%, #fff) 0%,var(--green) 50%,var(--green-dark) 100%);border-radius:20px;padding:18px 20px;margin-bottom:12px;cursor:pointer;color:#fff;box-shadow:0 6px 18px rgba(var(--green-rgb),0.16);transition:all .15s;position:relative;overflow:hidden}
.lobby-feature-card::after{content:'';position:absolute;top:-30px;right:-20px;width:110px;height:110px;border-radius:50%;background:rgba(255,255,255,0.12)}
.lobby-feature-card:hover{transform:translateY(-2px);box-shadow:0 7px 0 var(--green-dark),0 14px 30px rgba(var(--green-rgb),0.32)}
.lobby-feature-card:active{transform:scale(0.98);box-shadow:0 3px 10px rgba(var(--green-rgb),0.12)}
.lfc-left{display:flex;align-items:center;gap:14px;position:relative;z-index:1;min-width:0}
.lfc-icon{font-size:calc(34px * var(--fs,1));filter:drop-shadow(0 2px 4px rgba(0,0,0,0.15))}
.lfc-title{font-family:var(--font-display);font-size:calc(18px * var(--fs,1));font-weight:800;margin-bottom:2px}
.lfc-desc{font-size:calc(12px * var(--fs,1));opacity:0.92}
.lfc-go{position:relative;z-index:1;background:#fff;color:var(--green-dark);font-size:calc(13px * var(--fs,1));font-weight:800;padding:8px 16px;border-radius:999px;box-shadow:0 2px 6px rgba(0,0,0,0.08);white-space:nowrap;flex-shrink:0}
.lobby-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:20px}
.lobby-grid.lobby-grid-3{grid-template-columns:repeat(3,1fr)}
.lobby-card{background:var(--card);border-radius:16px;padding:16px 10px;text-align:center;cursor:pointer;box-shadow:0 2px 10px rgba(0,0,0,0.04);border:1px solid rgba(0,0,0,0.04);transition:all var(--transition-normal);position:relative}
.lobby-card:active{transform:scale(0.96)}
.lobby-card:hover{transform:translateY(-2px);border-color:rgba(var(--green-rgb),0.35);box-shadow:0 4px 0 rgba(26,58,10,0.04),0 10px 22px rgba(var(--green-rgb),0.14)}
.lobby-card .lc-icon{font-size:calc(30px * var(--fs,1));margin-bottom:8px;filter:drop-shadow(0 2px 4px rgba(0,0,0,0.1))}
.lobby-card .lc-title{font-family:var(--font-display);font-size:calc(14px * var(--fs,1));font-weight:800;margin-bottom:3px;color:#1A3A0A}
.lobby-card .lc-desc{font-size:calc(10px * var(--fs,1));color:var(--text-light)}
.lobby-stats{display:flex;gap:10px;margin-bottom:20px}
.lobby-stat-card{flex:1;background:var(--card);border-radius:16px;padding:14px 8px;text-align:center;box-shadow:0 2px 10px rgba(0,0,0,0.04);border:1px solid rgba(0,0,0,0.04);transition:all 0.2s}
.lobby-stat-card:hover{transform:translateY(-2px);box-shadow:0 4px 0 rgba(26,58,10,0.04),0 10px 22px rgba(26,58,10,0.10)}
.lobby-stat-card .lsc-num{font-family:var(--font-display);font-size:calc(26px * var(--fs,1));font-weight:800;color:var(--green)}
.lobby-stat-card .lsc-label{font-size:calc(11px * var(--fs,1));color:var(--text-light);margin-top:2px;font-weight:600}
/* 青柠杯活动页 */
.tn-hero{text-align:center;padding:28px 20px;background:linear-gradient(135deg,#1a1a2e,#16213e 50%,#0f3460);border-radius:20px;color:#fff;margin-bottom:20px;box-shadow:0 6px 24px rgba(15,52,96,0.35);position:relative;overflow:hidden}
.tn-hero::before{content:'';position:absolute;top:-30%;right:-20%;width:200px;height:200px;background:radial-gradient(circle,rgba(var(--green-rgb),0.15),transparent 70%);border-radius:50%}
.tn-hero::after{content:'';position:absolute;bottom:-20%;left:-10%;width:160px;height:160px;background:radial-gradient(circle,rgba(255,215,0,0.12),transparent 70%);border-radius:50%}
.tn-hero-badge{display:inline-block;background:linear-gradient(135deg,#FFD700,#FFA500);color:#1a1a2e;font-size:calc(11px * var(--fs,1));font-weight:800;padding:4px 14px;border-radius:20px;margin-bottom:10px;letter-spacing:1px}
.tn-hero h2{font-size:calc(24px * var(--fs,1));font-weight:800;margin-bottom:4px;position:relative}
.tn-hero .tn-sub{font-size:calc(13px * var(--fs,1));opacity:0.8;position:relative}
.tn-hero .tn-trophy{font-size:calc(48px * var(--fs,1));margin-bottom:8px;display:block;filter:drop-shadow(0 2px 8px rgba(255,215,0,0.4))}
.tn-status-bar{display:flex;gap:8px;margin-bottom:16px}
.tn-status-pill{flex:1;background:var(--card);border-radius:12px;padding:12px 8px;text-align:center;box-shadow:var(--shadow)}
.tn-status-pill .tsp-num{font-size:calc(22px * var(--fs,1));font-weight:800;color:var(--green)}
.tn-status-pill .tsp-label{font-size:calc(10px * var(--fs,1));color:var(--text-light);margin-top:2px}
.tn-status-pill.highlight{background:linear-gradient(135deg,var(--green),var(--blue));color:#fff}
.tn-status-pill.highlight .tsp-num{color:#fff}
.tn-status-pill.highlight .tsp-label{color:rgba(255,255,255,0.85)}
.tn-section-title{font-size:calc(15px * var(--fs,1));font-weight:700;margin:20px 0 12px;display:flex;align-items:center;gap:8px}
.tn-phase-tag{display:inline-block;padding:4px 12px;border-radius:12px;font-size:calc(12px * var(--fs,1));font-weight:700;color:#fff;margin-bottom:16px}
.tn-phase-tag.signup{background:linear-gradient(135deg,var(--green),var(--green-dark))}
.tn-phase-tag.group{background:linear-gradient(135deg,var(--blue),var(--blue-dark))}
.tn-phase-tag.knockout{background:linear-gradient(135deg,var(--orange),var(--orange-dark))}
.tn-phase-tag.finished{background:linear-gradient(135deg,#FFD700,#FFA500);color:#1a1a2e}
.tn-group-card{background:var(--card);border-radius:var(--radius);padding:16px;box-shadow:0 2px 12px rgba(0,0,0,0.06);margin-bottom:12px;border:1px solid rgba(0,0,0,0.03);transition:box-shadow 0.2s}
.tn-group-card:hover{box-shadow:0 4px 20px rgba(0,0,0,0.1)}
.tn-group-card h4{font-size:calc(14px * var(--fs,1));font-weight:700;margin-bottom:10px;color:var(--blue)}
.tn-standings-row{display:flex;align-items:center;padding:8px 10px;border-radius:10px;margin-bottom:4px;font-size:calc(13px * var(--fs,1));transition:background 0.2s}
.tn-standings-row:nth-child(odd){background:var(--section-bg)}
.tn-standings-row .tn-rank{width:24px;font-weight:800;color:var(--text-light)}
.tn-standings-row .tn-rank.gold{color:#FFD700}
.tn-standings-row .tn-rank.silver{color:#C0C0C0}
.tn-standings-row .tn-email{flex:1;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tn-standings-row .tn-email.is-me{color:var(--green)}
.tn-standings-row .tn-pts{font-weight:800;color:var(--green);min-width:36px;text-align:right}
.tn-standings-row .tn-record{font-size:calc(11px * var(--fs,1));color:var(--text-light);min-width:60px;text-align:right}
.tn-match-card{background:var(--card);border-radius:var(--radius-sm);padding:12px 14px;box-shadow:0 2px 10px rgba(0,0,0,0.06);margin-bottom:8px;display:flex;align-items:center;gap:10px;font-size:calc(13px * var(--fs,1));border-left:3px solid var(--border);transition:all 0.2s;border:1px solid rgba(0,0,0,0.03)}
.tn-match-card:hover{box-shadow:0 4px 16px rgba(0,0,0,0.1);transform:translateY(-1px)}
.tn-match-card.pending{border-left-color:var(--orange)}
.tn-match-card.done{border-left-color:var(--green)}
.tn-match-card .tn-mc-color{font-size:calc(18px * var(--fs,1))}
.tn-match-card .tn-mc-info{flex:1}
.tn-match-card .tn-mc-vs{font-weight:700}
.tn-match-card .tn-mc-status{font-size:calc(11px * var(--fs,1));color:var(--text-light);margin-top:2px}
.tn-match-card .tn-mc-result{font-size:calc(12px * var(--fs,1));font-weight:700;padding:4px 10px;border-radius:8px}
.tn-match-card .tn-mc-result.win{background:#E5F8D0;color:#2D8A00}
.tn-match-card .tn-mc-result.lose{background:#FFE5E5;color:#C0392B}
.tn-match-card .tn-mc-result.draw{background:#FFF3CD;color:#856404}
.tn-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:12px 24px;border-radius:14px;border:none;font-family:var(--font);font-size:calc(14px * var(--fs,1));font-weight:700;cursor:pointer;transition:all 0.25s}
.tn-btn:active{transform:scale(0.96)}
.tn-btn-primary{background:linear-gradient(135deg,var(--green),var(--green-dark));color:#fff;box-shadow:0 4px 12px rgba(var(--green-rgb),0.3)}
.tn-btn-primary:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(var(--green-rgb),0.4)}
.tn-btn-gold{background:linear-gradient(135deg,#FFD700,#FFA500);color:#1a1a2e;box-shadow:0 4px 12px rgba(255,165,0,0.3)}
.tn-btn-gold:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(255,165,0,0.4)}
.tn-btn-outline{background:var(--card);color:var(--text);border:2px solid var(--border)}
.tn-btn-outline:hover{border-color:var(--green)}
.tn-btn-sm{padding:8px 16px;font-size:calc(12px * var(--fs,1));border-radius:10px}
.tn-back-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:10px;border:none;background:var(--card);box-shadow:var(--shadow);font-family:var(--font);font-size:calc(13px * var(--fs,1));font-weight:600;cursor:pointer;color:var(--text);margin-bottom:16px;transition:all 0.2s}
.tn-back-btn:hover{color:var(--green)}
.tn-empty{text-align:center;padding:40px 20px;color:var(--text-light);font-size:calc(14px * var(--fs,1))}
.tn-empty .tn-empty-icon{font-size:calc(48px * var(--fs,1));margin-bottom:12px;display:block}
.tn-bracket-wrap{display:flex;gap:12px;overflow-x:auto;padding-bottom:12px;-webkit-overflow-scrolling:touch}
.tn-bracket-round{display:flex;flex-direction:column;gap:8px;min-width:150px;flex-shrink:0}
.tn-bracket-round-title{font-size:calc(12px * var(--fs,1));font-weight:700;color:var(--text-light);text-align:center;margin-bottom:4px}
.tn-bracket-match{background:var(--card);border-radius:10px;padding:8px 10px;box-shadow:0 1px 4px rgba(0,0,0,0.06);font-size:calc(12px * var(--fs,1));border:1px solid rgba(0,0,0,0.03);transition:all 0.2s}
.tn-bracket-match:hover{box-shadow:0 3px 12px rgba(0,0,0,0.1);transform:translateY(-1px)}
.tn-bracket-match .tn-bm-player{display:flex;align-items:center;justify-content:space-between;padding:3px 0}
.tn-bracket-match .tn-bm-player.winner{font-weight:700;color:var(--green)}
.tn-bracket-match .tn-bm-player.tbd{color:var(--text-lighter);font-style:italic}
.tn-countdown{font-size:calc(13px * var(--fs,1));color:var(--text-light);margin-top:8px}
.tn-countdown strong{color:var(--orange);font-weight:700}
.tn-lobby-banner{position:relative;background:linear-gradient(135deg,#1a1a2e,#16213e 50%,#0f3460);border-radius:16px;padding:16px 20px;margin-bottom:16px;cursor:pointer;overflow:hidden;box-shadow:0 4px 16px rgba(15,52,96,0.3);transition:transform 0.25s,box-shadow 0.25s}
.tn-lobby-banner:active{transform:scale(0.98)}
.tn-lobby-banner:hover{box-shadow:0 6px 24px rgba(15,52,96,0.45)}
.tn-lobby-banner::before{content:'';position:absolute;top:-20px;right:-20px;width:120px;height:120px;background:radial-gradient(circle,rgba(255,215,0,0.15),transparent 70%);border-radius:50%}
.tn-lobby-left{display:flex;align-items:center;gap:14px}
.tn-lobby-trophy{font-size:calc(36px * var(--fs,1));filter:drop-shadow(0 2px 6px rgba(255,215,0,0.4))}
.tn-lobby-info h3{font-size:calc(15px * var(--fs,1));font-weight:800;color:#FFD700;margin-bottom:2px}
.tn-lobby-info p{font-size:calc(12px * var(--fs,1));color:rgba(255,255,255,0.8)}
.tn-lobby-right{position:absolute;right:16px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.tn-lobby-badge{display:inline-block;background:linear-gradient(135deg,var(--green),var(--green-dark));color:#fff;font-size:calc(10px * var(--fs,1));font-weight:700;padding:3px 10px;border-radius:10px}
.tn-lobby-badge.hot{background:linear-gradient(135deg,#FF6B7A,#C0392B)}
.tn-lobby-badge.live{background:linear-gradient(135deg,#FF6B7A,#C0392B);animation:pulse 1.5s infinite}
.tn-lobby-count{font-size:calc(11px * var(--fs,1));color:rgba(255,255,255,0.7)}
/* Floating shop button pulse */
#shop-float-btn:active{transform:scale(0.92)}
@keyframes shopPulse{0%,100%{box-shadow:0 4px 14px rgba(255,165,0,0.35)}50%{box-shadow:0 4px 20px rgba(255,165,0,0.55)}}
#shop-float-btn{animation:shopPulse 3s ease infinite}
/* Study sub-tab active/inactive */
.study-sub-tab:not(.active):hover{background:var(--hover-bg) !important}
/* R55-5：两个 tab 后缀的进度 xx/xx（开始学习 3/10 · 复习 2/20） */
.study-sub-n{margin-left:6px;font-size:calc(11px * var(--fs,1));font-weight:700;opacity:.82;letter-spacing:.2px}
/* Collection sub-tabs */
.collection-tabs .filter-chip{flex:1;text-align:center;justify-content:center;transition:all var(--transition-normal)}
.collection-tabs .filter-chip.active{box-shadow:var(--shadow-green);transform:translateY(-1px)}
/* Loading spinner */
.loading-spinner{text-align:center;padding:60px 20px;color:var(--text-lighter)}
.loading-spinner .spinner{display:inline-block;width:40px;height:40px;border:4px solid var(--border);border-top-color:var(--green);border-radius:50%;animation:spin 0.8s linear infinite;box-shadow:0 0 12px rgba(var(--green-rgb),0.15)}
.app-footer{text-align:center;padding:16px;color:var(--text-lighter);font-size:calc(12px * var(--fs,1));border-top:1px solid var(--border);margin-top:24px}
.col-stat-card:hover{transform:translateY(-2px);box-shadow:0 4px 16px rgba(0,0,0,0.1)!important}
.col-stat-card:active{transform:translateY(0)}
.app-footer a{color:var(--blue);text-decoration:none}
/* Collection section cards */
#account-card{border:1px solid rgba(var(--green-rgb),0.08);transition:box-shadow 0.25s}
#account-card:hover{box-shadow:0 4px 20px rgba(0,0,0,0.1)}
#checkin-card{border:1px solid rgba(255,215,0,0.12);background:linear-gradient(180deg,#FFFDF5 0%,var(--card) 100%)}
#checkin-card:hover{box-shadow:0 4px 20px rgba(255,215,0,0.12)}
.clickable-word:hover{color:var(--green)!important;background:var(--hover-bg);border-radius:3px;padding:0 2px}
@media(min-width:600px){.main{padding:24px 20px 32px}.card-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px}.modal-sheet{border-radius:20px;margin-bottom:20px;max-height:80vh}}
/* ═══ Calculator ═══ */
.calc-container{background:var(--card);border-radius:var(--radius);padding:16px;box-shadow:0 4px 20px rgba(0,0,0,0.08);max-width:400px;margin:0 auto;border:1px solid rgba(0,0,0,0.04)}
.calc-display-wrap{background:var(--bg);border-radius:12px;padding:16px;margin-bottom:12px;border:2px solid var(--border);min-height:72px;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-end}
.calc-expr{font-size:calc(14px * var(--fs,1));color:var(--text-light);font-family:monospace;word-break:break-all;text-align:right;width:100%;min-height:20px;overflow:hidden;text-overflow:ellipsis}
.calc-result{font-size:calc(32px * var(--fs,1));font-weight:800;color:var(--text);font-family:monospace;text-align:right;width:100%;overflow:hidden;text-overflow:ellipsis}
.calc-mode-toggle{display:flex;gap:4px;margin-bottom:10px}
.calc-mode-btn{flex:1;padding:6px;border-radius:8px;border:2px solid var(--border);font-size:calc(12px * var(--fs,1));font-weight:600;cursor:pointer;font-family:var(--font);background:transparent;color:var(--text-light);transition:all 0.2s}
.calc-mode-btn.active{background:var(--green);color:#fff;border-color:var(--green)}
.calc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.sci-grid{gap:5px;margin-bottom:12px}
.calc-btn{padding:14px 8px;border-radius:10px;border:2px solid var(--border);font-size:calc(18px * var(--fs,1));font-weight:700;cursor:pointer;transition:all 0.15s;font-family:var(--font);background:var(--card);-webkit-tap-highlight-color:transparent;user-select:none}
.calc-btn.num{background:var(--calc-num-bg);color:var(--text)}
.calc-btn.num.zero{grid-column:span 2}
.calc-btn.op{background:var(--calc-op-bg);color:var(--blue);font-size:calc(20px * var(--fs,1))}
.calc-btn.op.fn{color:var(--red)}
.calc-btn.eq{background:var(--green);color:#fff;border-color:var(--green);font-size:calc(22px * var(--fs,1))}
.calc-btn.sci{font-size:calc(13px * var(--fs,1));padding:10px 4px;background:var(--calc-sci-bg);color:var(--purple)}
.calc-btn:hover{opacity:0.85}
.calc-btn:active{transform:scale(0.93);opacity:0.7}
.calc-history{max-height:300px;overflow-y:auto;display:flex;flex-direction:column;gap:4px}
.calc-hist-item{padding:10px 12px;border-radius:8px;background:var(--bg);border:1px solid var(--border);cursor:pointer;transition:all 0.15s}
.calc-hist-item:hover{border-color:var(--green);background:rgba(var(--green-rgb),0.05)}
.calc-hist-expr{font-size:calc(13px * var(--fs,1));color:var(--text-light);font-family:monospace}
.calc-hist-result{font-size:calc(16px * var(--fs,1));font-weight:700;color:var(--text);font-family:monospace}
/* ═══ Multiplication Table ═══ */
.multiply-container{max-width:480px;margin:0 auto}
.multiply-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:4px}
.multiply-grid{display:grid;grid-template-columns:repeat(10,minmax(36px,1fr));gap:3px;font-family:monospace}
.mul-cell{padding:8px 4px;border-radius:6px;text-align:center;font-size:calc(13px * var(--fs,1));font-weight:600;transition:all 0.15s;cursor:default;-webkit-tap-highlight-color:transparent}
.mul-header{background:var(--green);color:#fff;font-weight:800;font-size:calc(13px * var(--fs,1))}
.mul-num{cursor:pointer;border:1px solid rgba(0,0,0,0.04);box-shadow:0 1px 3px rgba(0,0,0,0.06)}
.mul-num:hover{transform:scale(1.08);box-shadow:0 2px 8px rgba(0,0,0,0.12);z-index:1;position:relative}
.mul-num:active{transform:scale(0.95)}
.multiply-detail{margin-top:12px;padding:12px;background:var(--card);border-radius:10px;box-shadow:var(--shadow);font-size:calc(13px * var(--fs,1))}
.mul-eq{display:inline-block;padding:3px 8px;border-radius:6px;background:var(--bg);color:var(--text-light);font-family:monospace;font-size:calc(12px * var(--fs,1));border:1px solid var(--border)}
.mul-eq-hl{background:var(--green);color:#fff;border-color:var(--green);font-weight:700}
@media(max-width:380px){.rand-num{font-size:calc(48px * var(--fs,1))}.rand-display{min-height:100px}.rand-gen-btn{padding:12px;font-size:calc(14px * var(--fs,1))}.rand-preset{padding:5px 10px;font-size:calc(11px * var(--fs,1))}.dice-face{width:64px;height:64px;padding:8px}.coin-wrap,.coin{width:72px;height:72px;font-size:calc(22px * var(--fs,1))}.calc-result{font-size:calc(26px * var(--fs,1))}.calc-btn{padding:12px 6px;font-size:calc(16px * var(--fs,1))}.calc-btn.op{font-size:calc(18px * var(--fs,1))}.calc-btn.eq{font-size:calc(20px * var(--fs,1))}.multiply-grid{grid-template-columns:repeat(10,minmax(30px,1fr));gap:2px}.mul-cell{padding:6px 2px;font-size:calc(11px * var(--fs,1))}}
.calc-sci-row{display:grid;grid-template-columns:repeat(6,1fr);gap:4px;margin-bottom:6px}
.calc-sci-row .calc-btn{padding:8px 2px;font-size:calc(11px * var(--fs,1))}
.calc-toggle-sci{font-size:calc(11px * var(--fs,1));padding:4px 10px;border-radius:6px;border:1.5px solid var(--border);background:var(--card);cursor:pointer;color:var(--text-light);transition:all 0.15s;margin-bottom:6px;display:inline-block}
.calc-toggle-sci:hover{border-color:var(--purple);color:var(--purple)}
.calc-toggle-sci.active{background:var(--purple);color:#fff;border-color:var(--purple)}
.calc-hist-toggle{font-size:calc(11px * var(--fs,1));padding:4px 10px;border-radius:6px;border:1.5px solid var(--border);background:var(--card);cursor:pointer;color:var(--text-light);transition:all 0.15s;margin-bottom:6px;display:inline-block;margin-left:4px}
.calc-hist-toggle:hover{border-color:var(--green);color:var(--green)}
/* ═══ New Toolbox Features ═══ */
/* Password Generator */
.pwd-container{background:var(--card);border-radius:var(--radius);padding:20px;box-shadow:0 4px 20px rgba(0,0,0,0.08);max-width:420px;margin:0 auto;border:1px solid rgba(0,0,0,0.04)}
.pwd-result{font-family:monospace;font-size:calc(20px * var(--fs,1));font-weight:700;padding:16px;background:var(--bg);border-radius:12px;border:2px solid var(--border);text-align:center;word-break:break-all;min-height:56px;display:flex;align-items:center;justify-content:center;color:var(--text);margin-bottom:12px;letter-spacing:1px;position:relative;cursor:pointer;transition:border-color 0.2s}
.pwd-result:hover{border-color:var(--purple)}
.pwd-result .pwd-copy-hint{position:absolute;right:8px;top:50%;transform:translateY(-50%);font-size:calc(10px * var(--fs,1));color:var(--text-lighter);opacity:0;transition:opacity 0.2s}
.pwd-result:hover .pwd-copy-hint{opacity:1}
.pwd-options{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
.pwd-opt-row{display:flex;align-items:center;gap:8px;font-size:calc(13px * var(--fs,1));color:var(--text)}
.pwd-opt-row label{display:flex;align-items:center;gap:4px;cursor:pointer}
.pwd-opt-row input[type=checkbox]{accent-color:var(--purple)}
.pwd-opt-row input[type=range]{flex:1;accent-color:var(--purple)}
.pwd-opt-row .pwd-len-val{font-weight:700;color:var(--purple);min-width:24px;text-align:center}
.pwd-strength{height:4px;border-radius:2px;background:var(--border);margin-bottom:12px;overflow:hidden}
.pwd-strength-bar{height:100%;border-radius:2px;transition:width 0.3s,background 0.3s}
.pwd-gen-btn{width:100%;padding:12px;border-radius:10px;border:none;background:linear-gradient(135deg,var(--purple),#9b59b6);color:#fff;font-size:calc(15px * var(--fs,1));font-weight:700;cursor:pointer;transition:all 0.2s;font-family:var(--font)}
.pwd-gen-btn:hover{transform:translateY(-1px);box-shadow:0 4px 16px rgba(206,130,255,0.3)}
.pwd-gen-btn:active{transform:scale(0.98)}
/* Countdown Timer */
.cd-container{background:var(--card);border-radius:var(--radius);padding:24px;box-shadow:0 4px 20px rgba(0,0,0,0.08);max-width:420px;margin:0 auto;text-align:center;border:1px solid rgba(0,0,0,0.04)}
.cd-display{font-size:calc(56px * var(--fs,1));font-weight:900;font-family:monospace;color:var(--text);margin-bottom:8px;letter-spacing:2px}
.cd-display.warning{color:var(--orange)}
.cd-display.danger{color:var(--red);animation:pulse 0.5s ease infinite}
.cd-presets{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin-bottom:12px}
.cd-preset{padding:6px 12px;border-radius:16px;border:1.5px solid var(--border);background:var(--card);font-size:calc(12px * var(--fs,1));font-weight:600;cursor:pointer;transition:all 0.2s;font-family:var(--font);color:var(--text)}
.cd-preset:hover{border-color:var(--orange);color:var(--orange)}
.cd-preset:active{transform:scale(0.95)}
.cd-custom{display:flex;gap:6px;justify-content:center;align-items:center;margin-bottom:12px;font-size:calc(13px * var(--fs,1));color:var(--text-light)}
.cd-custom input{width:50px;padding:6px;border-radius:8px;border:2px solid var(--border);text-align:center;font-family:monospace;font-size:calc(14px * var(--fs,1));font-weight:700;color:var(--text);background:var(--bg)}
.cd-btns{display:flex;gap:8px;justify-content:center}
.cd-btn{padding:10px 24px;border-radius:10px;border:none;font-size:calc(14px * var(--fs,1));font-weight:700;cursor:pointer;transition:all 0.2s;font-family:var(--font)}
.cd-btn.start{background:var(--green);color:#fff;box-shadow:0 3px 12px rgba(var(--green-rgb),0.3)}
.cd-btn.pause{background:var(--orange);color:#fff}
.cd-btn.reset{background:var(--bg);color:var(--text);border:2px solid var(--border)}
.cd-btn:hover{transform:translateY(-1px)}
.cd-btn:active{transform:scale(0.96)}
/* Color Converter */
.color-container{background:var(--card);border-radius:var(--radius);padding:20px;box-shadow:0 4px 20px rgba(0,0,0,0.08);max-width:420px;margin:0 auto;border:1px solid rgba(0,0,0,0.04)}
.color-preview{width:100%;height:80px;border-radius:12px;border:2px solid var(--border);margin-bottom:12px;transition:background 0.2s;box-shadow:inset 0 2px 8px rgba(0,0,0,0.1)}
.color-inputs{display:flex;flex-direction:column;gap:8px}
.color-row{display:flex;align-items:center;gap:8px;font-size:calc(13px * var(--fs,1))}
.color-row label{font-weight:700;min-width:40px;color:var(--text-light);font-size:calc(12px * var(--fs,1))}
.color-row input[type=text]{flex:1;padding:8px;border-radius:8px;border:2px solid var(--border);font-family:monospace;font-size:calc(13px * var(--fs,1));color:var(--text);background:var(--bg)}
.color-row input[type=text]:focus{outline:none;border-color:var(--purple)}
.color-row .color-copy{padding:4px 8px;border-radius:6px;border:1.5px solid var(--border);background:var(--card);font-size:calc(11px * var(--fs,1));cursor:pointer;color:var(--text-light);transition:all 0.15s}
.color-row .color-copy:hover{border-color:var(--green);color:var(--green)}
/* Text Counter */
.txt-container{background:var(--card);border-radius:var(--radius);padding:20px;box-shadow:0 4px 20px rgba(0,0,0,0.08);max-width:420px;margin:0 auto;border:1px solid rgba(0,0,0,0.04)}
.txt-area{width:100%;min-height:120px;padding:12px;border-radius:10px;border:2px solid var(--border);font-family:var(--font);font-size:calc(14px * var(--fs,1));color:var(--text);background:var(--bg);resize:vertical;transition:border-color 0.2s}
.txt-area:focus{outline:none;border-color:var(--blue)}
.txt-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}
.txt-stat{background:var(--bg);border-radius:10px;padding:10px;text-align:center;border:1px solid var(--border)}
.txt-stat-num{font-size:calc(24px * var(--fs,1));font-weight:800;color:var(--blue);font-family:monospace}
.txt-stat-label{font-size:calc(10px * var(--fs,1));color:var(--text-light);margin-top:2px;text-transform:uppercase;letter-spacing:0.5px}
/* Decision Wheel */
.wheel-container{background:var(--card);border-radius:var(--radius);padding:20px;box-shadow:0 4px 20px rgba(0,0,0,0.08);max-width:420px;margin:0 auto;border:1px solid rgba(0,0,0,0.04)}
.wheel-wrap{position:relative;width:260px;height:260px;margin:0 auto 16px}
.wheel-canvas{width:260px;height:260px;border-radius:50%;box-shadow:0 4px 20px rgba(0,0,0,0.15);border:4px solid var(--border)}
.wheel-pointer{position:absolute;top:-8px;left:50%;transform:translateX(-50%);font-size:calc(24px * var(--fs,1));z-index:2;filter:drop-shadow(0 2px 4px rgba(0,0,0,0.3))}
.wheel-editor{margin-bottom:12px}
.wheel-items-list{display:flex;flex-direction:column;gap:6px;margin-bottom:8px;max-height:200px;overflow-y:auto}
.wheel-item-row{display:flex;align-items:center;gap:6px;animation:fadeIn 0.2s}
@keyframes fadeIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.wheel-item-color{width:14px;height:14px;border-radius:4px;flex-shrink:0;border:1px solid rgba(0,0,0,0.1)}
.wheel-item-name{flex:1;padding:8px 10px;border-radius:8px;border:1.5px solid var(--border);font-family:var(--font);font-size:calc(13px * var(--fs,1));color:var(--text);background:var(--bg);min-width:0}
.wheel-item-name:focus{outline:none;border-color:var(--orange)}
.wheel-item-weight{width:50px;padding:8px 6px;border-radius:8px;border:1.5px solid var(--border);font-family:var(--font);font-size:calc(13px * var(--fs,1));color:var(--text);background:var(--bg);text-align:center;flex-shrink:0}
.wheel-item-weight:focus{outline:none;border-color:var(--orange)}
.wheel-item-pct{font-size:calc(11px * var(--fs,1));color:var(--text-light);min-width:38px;text-align:right;flex-shrink:0}
.wheel-item-remove{width:26px;height:26px;border-radius:50%;border:none;background:rgba(231,76,60,0.1);color:#e74c3c;font-size:calc(14px * var(--fs,1));cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all 0.15s;line-height:1}
.wheel-item-remove:hover{background:#e74c3c;color:#fff}
.wheel-add-btn{width:100%;padding:8px;border-radius:8px;border:1.5px dashed var(--border);background:transparent;color:var(--text-light);font-size:calc(12px * var(--fs,1));cursor:pointer;transition:all 0.15s;font-family:var(--font)}
.wheel-add-btn:hover{border-color:var(--orange);color:var(--orange);background:rgba(255,150,0,0.05)}
.wheel-probs{font-size:calc(11px * var(--fs,1));color:var(--text-light);text-align:center;margin-bottom:8px;line-height:1.6}
.wheel-spin-btn{padding:12px 32px;border-radius:12px;border:none;background:linear-gradient(135deg,var(--orange),#e67e22);color:#fff;font-size:calc(16px * var(--fs,1));font-weight:800;cursor:pointer;transition:all 0.2s;font-family:var(--font);box-shadow:0 4px 16px rgba(255,150,0,0.3)}
.wheel-spin-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(255,150,0,0.4)}
.wheel-spin-btn:active{transform:translateY(0)}
.wheel-spin-btn:disabled{opacity:0.6;cursor:not-allowed;transform:none}
.wheel-result{margin-top:12px;font-size:calc(20px * var(--fs,1));font-weight:800;color:var(--orange);min-height:30px}
/* ═══ Random Number Generator ═══ */
.rand-container{background:var(--card);border-radius:var(--radius);padding:20px;box-shadow:0 4px 20px rgba(0,0,0,0.08);max-width:420px;margin:0 auto;border:1px solid rgba(0,0,0,0.04)}
.rand-display{position:relative;min-height:120px;display:flex;align-items:center;justify-content:center;background:var(--bg);border-radius:16px;border:2px solid var(--border);margin-bottom:16px;overflow:hidden}
.rand-display.rolling{border-color:var(--purple);box-shadow:0 0 20px rgba(206,130,255,0.15)}
.rand-num{font-size:calc(64px * var(--fs,1));font-weight:900;color:var(--purple);font-family:monospace;transition:transform 0.1s}
.rand-num.pop{animation:randPop 0.4s cubic-bezier(0.34,1.56,0.64,1)}
@keyframes randPop{0%{transform:scale(0.3);opacity:0}60%{transform:scale(1.15)}100%{transform:scale(1);opacity:1}}
/* Dice face with dots */
.dice-face{width:80px;height:80px;background:#fff;border-radius:14px;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);padding:10px;gap:2px;box-shadow:0 6px 24px rgba(0,0,0,0.25),inset 0 -2px 0 rgba(0,0,0,0.08);border:2px solid #e0e0e0;perspective:400px}
.dice-face.rolling-3d{animation:diceRoll3d 0.6s ease-out}
.dice-dot.filled{background:#333;box-shadow:inset 0 1px 2px rgba(0,0,0,0.3)}
/* Coin */
.coin-wrap{perspective:600px;width:90px;height:90px}
.coin{width:90px;height:90px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:calc(28px * var(--fs,1));font-weight:900;color:#fff;position:relative;transform-style:preserve-3d;transition:transform 0.1s}
.coin.flipping{animation:coinFlip3d 0.8s ease-out forwards}
@keyframes coinFlip3d{0%{transform:rotateY(0) scale(0.8)}30%{transform:rotateY(1080deg) scale(1.1)}60%{transform:rotateY(1800deg) scale(1.05)}100%{transform:rotateY(2160deg) scale(1)}}
.coin-heads{background:linear-gradient(135deg,#FFD700 0%,#FFA500 50%,#FFD700 100%);border:3px solid #B8860B;box-shadow:0 4px 20px rgba(255,215,0,0.4),inset 0 2px 4px rgba(255,255,255,0.3)}
.coin-tails{background:linear-gradient(135deg,#aaa 0%,#777 50%,#999 100%);border:3px solid #555;box-shadow:0 4px 20px rgba(0,0,0,0.3),inset 0 2px 4px rgba(255,255,255,0.2)}
.coin-label{font-size:calc(14px * var(--fs,1));font-weight:700;color:var(--text);margin-top:8px}
/* Preset buttons */
.rand-presets{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin-bottom:12px}
.rand-preset{padding:6px 12px;border-radius:20px;border:1.5px solid var(--border);background:var(--card);font-size:calc(12px * var(--fs,1));font-weight:600;cursor:pointer;transition:all 0.2s;font-family:var(--font);color:var(--text)}
.rand-preset:hover{border-color:var(--purple);color:var(--purple);background:rgba(206,130,255,0.06)}
.rand-preset:active{transform:scale(0.95)}
.rand-preset.active{background:var(--purple);color:#fff;border-color:var(--purple)}
/* Range inputs */
.rand-range{display:flex;gap:8px;justify-content:center;align-items:center;margin-bottom:12px;font-size:calc(14px * var(--fs,1));color:var(--text-light);font-weight:600}
.rand-range input{width:72px;padding:8px;border-radius:10px;border:2px solid var(--border);text-align:center;font-size:calc(15px * var(--fs,1));font-weight:700;font-family:monospace;color:var(--text);background:var(--bg);transition:border-color 0.2s}
.rand-range input:focus{outline:none;border-color:var(--purple)}
/* Generate button */
.rand-gen-btn{width:100%;padding:14px;border-radius:12px;border:none;background:linear-gradient(135deg,var(--purple),#9b59b6);color:#fff;font-size:calc(16px * var(--fs,1));font-weight:800;cursor:pointer;transition:all 0.2s;font-family:var(--font);box-shadow:0 4px 16px rgba(206,130,255,0.3);letter-spacing:1px}
.rand-gen-btn:hover{transform:translateY(-1px);box-shadow:0 6px 24px rgba(206,130,255,0.4)}
.rand-gen-btn:active{transform:translateY(0) scale(0.98)}
.rand-gen-btn:disabled{opacity:0.6;cursor:not-allowed;transform:none}
/* Options row */
.rand-options{display:flex;gap:12px;justify-content:center;align-items:center;margin-bottom:12px;font-size:calc(12px * var(--fs,1));color:var(--text-light)}
.rand-options label{display:flex;align-items:center;gap:4px;cursor:pointer}
.rand-options input[type=number]{width:48px;padding:4px;border-radius:6px;border:1.5px solid var(--border);text-align:center;font-size:calc(12px * var(--fs,1));font-family:monospace}
.rand-options input[type=checkbox]{accent-color:var(--purple)}
/* History strip */
.rand-history{margin-top:14px;padding-top:12px;border-top:1px solid var(--border)}
.rand-history-title{font-size:calc(11px * var(--fs,1));color:var(--text-light);font-weight:600;text-transform:uppercase;letter-spacing:1px;margin-bottom:6px}
.rand-history-list{display:flex;gap:6px;flex-wrap:wrap}
.rand-hist-item{padding:4px 10px;border-radius:8px;background:var(--bg);border:1px solid var(--border);font-size:calc(13px * var(--fs,1));font-weight:700;font-family:monospace;color:var(--text);cursor:default;transition:all 0.15s}
.rand-hist-item:hover{border-color:var(--purple);color:var(--purple)}
.rand-hist-item.latest{background:var(--purple);color:#fff;border-color:var(--purple)}
/* Confetti */
.tool-panel{animation:fadeIn 0.25s ease;padding:4px 0}
/* Light theme scrollbar */
.settings-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:300;background:var(--settings-overlay-bg);display:flex;align-items:center;justify-content:center}
.settings-overlay.hidden{display:none}
.settings-panel{background:var(--card);border-radius:var(--radius-lg);padding:24px;width:90%;max-width:420px;max-height:80vh;overflow-y:auto;box-shadow:var(--shadow-xl);animation:settingsPop 0.35s cubic-bezier(0.34,1.56,0.64,1);border:1px solid rgba(0,0,0,0.05)}
.settings-panel h3{font-size:calc(20px * var(--fs,1));margin-bottom:16px;text-align:center}
.settings-group{margin-bottom:16px}
.settings-group label{display:block;font-size:calc(13px * var(--fs,1));font-weight:700;color:var(--text-light);margin-bottom:8px;text-transform:uppercase;letter-spacing:1px}
.settings-group .option-row{display:flex;gap:6px;flex-wrap:wrap}
.settings-group .option-btn{padding:8px 14px;border-radius:16px;border:2px solid var(--border);background:var(--card);cursor:pointer;font-size:calc(13px * var(--fs,1));font-weight:600;transition:all 0.2s;font-family:var(--font)}
.settings-group .option-btn.active{border-color:var(--green);background:var(--green);color:#fff}
.theme-dot{display:inline-block;width:16px;height:16px;border-radius:50%;margin-right:4px;vertical-align:middle}
/* ═══ Chat / Social System ═══ */
.friends-overlay{position:fixed;top:0;left:0;right:0;bottom:0;z-index:1200;background:var(--bg);display:flex;flex-direction:column;animation:profileSlideUp 0.3s ease}
.friends-overlay.hidden{display:none}
.friends-header{display:flex;align-items:center;gap:10px;padding:14px 16px;box-shadow:0 1px 3px rgba(0,0,0,0.06);background:var(--card);position:relative;z-index:2}
.friends-header .friends-back{width:36px;height:36px;border-radius:50%;border:none;background:var(--section-bg);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:calc(18px * var(--fs,1));color:var(--text);transition:background 0.2s;-webkit-tap-highlight-color:transparent}
.friends-header .friends-back:active{background:var(--border)}
.friends-header .friends-title{font-size:calc(18px * var(--fs,1));font-weight:700;color:var(--text);letter-spacing:0.3px}
.friends-body{flex:1;display:flex;flex-direction:column;overflow:hidden}
.friends-body > .chat-wrap{display:flex;flex-direction:column;flex:1;overflow:hidden}
.friends-body > .chat-window{display:flex;flex-direction:column;flex:1;overflow:hidden}
.chat-wrap{display:flex;flex-direction:column;height:100%;overflow:hidden}
/* Friend list */
.chat-friend-list{flex:1;overflow-y:auto;padding:12px 16px}
.chat-search-bar{display:flex;gap:8px;padding:10px 16px;border-bottom:1px solid var(--border)}
.chat-search-bar input{flex:1;padding:10px 16px;border-radius:20px;border:1.5px solid var(--border);font-family:var(--font);font-size:calc(14px * var(--fs,1));background:var(--section-bg);color:var(--text);outline:none;transition:border-color 0.2s,box-shadow 0.2s}
.chat-search-bar input:focus{border-color:var(--green);box-shadow:0 0 0 3px rgba(76,175,80,0.1)}
.chat-search-bar input::placeholder{color:var(--text-light);opacity:0.7}
.chat-search-bar button{padding:8px 18px;border-radius:20px;border:none;background:var(--green);color:#fff;font-family:var(--font);font-size:calc(13px * var(--fs,1));font-weight:600;cursor:pointer;white-space:nowrap;transition:opacity 0.2s;-webkit-tap-highlight-color:transparent}
.chat-search-bar button:active{opacity:0.8}
.chat-friend-item{display:flex;align-items:center;gap:12px;padding:12px 8px;border-radius:0;cursor:pointer;transition:background 0.15s;margin-bottom:0;border-bottom:1px solid var(--border);-webkit-tap-highlight-color:transparent}
.chat-friend-item:hover{background:var(--hover-bg)}
.chat-friend-item:active{background:var(--section-bg)}
.chat-friend-item img{width:48px;height:48px;border-radius:50%;object-fit:cover;flex-shrink:0}
.chat-friend-item .cfi-info{flex:1;min-width:0}
.chat-friend-item .cfi-name{font-weight:600;font-size:calc(15px * var(--fs,1));color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-friend-item .cfi-id{font-size:calc(12px * var(--fs,1));color:var(--text-light)}
.chat-friend-item .cfi-lastmsg{font-size:calc(13px * var(--fs,1));color:var(--text-light);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px;max-width:200px}
.chat-friend-item .cfi-right{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex-shrink:0}
.chat-friend-item .cfi-time{font-size:calc(11px * var(--fs,1));color:var(--text-light)}
.chat-friend-item .cfi-unread{background:#f44336;color:#fff;font-size:calc(11px * var(--fs,1));font-weight:700;min-width:18px;height:18px;border-radius:9px;display:flex;align-items:center;justify-content:center;padding:0 5px}
/* User search result */
.chat-user-result{display:flex;align-items:center;gap:12px;padding:16px;background:var(--card);border-radius:16px;border:1px solid var(--border);margin:12px 16px;box-shadow:0 2px 8px rgba(0,0,0,0.04)}
.chat-user-result img{width:48px;height:48px;border-radius:50%;object-fit:cover}
.chat-user-result .cur-info{flex:1}
.chat-user-result .cur-name{font-weight:700;font-size:calc(16px * var(--fs,1));color:var(--text)}
.chat-user-result .cur-id{font-size:calc(12px * var(--fs,1));color:var(--text-light)}
.chat-user-result .cur-stats{font-size:calc(12px * var(--fs,1));color:var(--text-light);margin-top:2px}
.chat-follow-btn{padding:7px 16px;border-radius:20px;border:1.5px solid var(--green);background:transparent;color:var(--green);font-family:var(--font);font-size:calc(13px * var(--fs,1));font-weight:600;cursor:pointer;transition:all 0.2s;-webkit-tap-highlight-color:transparent}
.chat-follow-btn:active{opacity:0.7}
.chat-follow-btn.following{background:var(--green);color:#fff}
.chat-follow-btn.mutual{background:var(--green);color:#fff;border-color:var(--green)}
/* Chat window */
.chat-window{display:flex;flex-direction:column;height:100%}
.chat-header{display:flex;align-items:center;gap:10px;padding:14px 16px;box-shadow:0 2px 8px rgba(0,0,0,0.06);background:var(--card);position:relative;z-index:2;border-bottom:1px solid rgba(0,0,0,0.03)}
.chat-header .chat-back{width:36px;height:36px;border-radius:50%;border:none;background:var(--section-bg);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:calc(18px * var(--fs,1));color:var(--text);transition:background 0.2s;-webkit-tap-highlight-color:transparent}
.chat-header .chat-back:active{background:var(--border)}
.chat-header .chat-peer{flex:1;min-width:0}
.chat-header .chat-peer-name{font-weight:700;font-size:calc(16px * var(--fs,1));color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-header .chat-peer-id{font-size:calc(11px * var(--fs,1));color:var(--text-light);margin-top:1px}
.chat-messages{flex:1;overflow-y:auto;padding:12px 16px;display:flex;flex-direction:column;gap:6px;background:var(--bg)}
.chat-bubble-wrap{display:flex;gap:8px;max-width:80%;animation:bubbleFadeIn 0.25s ease}
.chat-bubble-wrap.mine{align-self:flex-end;flex-direction:row-reverse}
.chat-bubble-wrap img.chat-avatar{width:36px;height:36px;border-radius:50%;object-fit:cover;flex-shrink:0}
.chat-bubble{padding:10px 14px;border-radius:18px;font-size:calc(14px * var(--fs,1));line-height:1.5;word-break:break-word;position:relative;max-width:100%}
.chat-bubble-wrap:not(.mine) .chat-bubble{background:var(--card);border:1px solid var(--border);border-top-left-radius:4px;color:var(--text);box-shadow:0 1px 4px rgba(0,0,0,0.04)}
.chat-bubble-wrap.mine .chat-bubble{background:linear-gradient(135deg,var(--green),var(--green-dark));color:#fff;border-top-right-radius:4px;box-shadow:0 2px 8px rgba(var(--green-rgb),0.2)}
.chat-bubble img.sticker-img{max-width:160px;max-height:160px;border-radius:8px}
.chat-bubble .msg-time{font-size:calc(10px * var(--fs,1));opacity:0.5;margin-top:4px;text-align:right}
.chat-date-sep{text-align:center;font-size:calc(11px * var(--fs,1));color:var(--text-light);padding:10px 0;align-self:center;opacity:0.7}
@keyframes bubbleFadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
/* Chat input */
.chat-input-bar{display:flex;align-items:flex-end;gap:8px;padding:10px 12px;border-top:1px solid var(--border);background:var(--card);box-shadow:0 -1px 3px rgba(0,0,0,0.03)}
.chat-input-bar .emoji-toggle,.chat-input-bar .sticker-toggle{width:36px;height:36px;border-radius:50%;border:none;background:var(--section-bg);cursor:pointer;font-size:calc(18px * var(--fs,1));display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background 0.2s;-webkit-tap-highlight-color:transparent}
.chat-input-bar .emoji-toggle:hover,.chat-input-bar .sticker-toggle:hover{background:var(--border)}
.chat-input-bar .emoji-toggle:active,.chat-input-bar .sticker-toggle:active{background:var(--border)}
.chat-input-bar textarea{flex:1;padding:10px 16px;border-radius:20px;border:1.5px solid var(--border);font-family:var(--font);font-size:calc(14px * var(--fs,1));background:var(--section-bg);color:var(--text);outline:none;resize:none;max-height:100px;min-height:38px;line-height:1.4;transition:border-color 0.2s,box-shadow 0.2s}
.chat-input-bar textarea:focus{border-color:var(--green);box-shadow:0 0 0 3px rgba(76,175,80,0.1)}
.chat-input-bar .chat-send-btn{width:36px;height:36px;border-radius:50%;border:none;background:var(--green);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:calc(16px * var(--fs,1));transition:all 0.15s;-webkit-tap-highlight-color:transparent;box-shadow:0 2px 8px rgba(var(--green-rgb),0.25)}
.chat-input-bar .chat-send-btn:hover{box-shadow:0 3px 12px rgba(var(--green-rgb),0.35);transform:translateY(-1px)}
.chat-input-bar .chat-send-btn:active{transform:scale(0.9);opacity:0.8}
/* Emoji / Sticker picker panel */
.chat-picker-panel{display:none;max-height:180px;overflow-y:auto;border-top:1px solid var(--border);background:var(--card);padding:8px 12px}
.chat-picker-panel.open{display:block}
.chat-picker-panel .picker-grid{display:flex;flex-wrap:wrap;gap:2px}
.chat-picker-panel .picker-grid button{width:38px;height:38px;border:none;background:none;font-size:calc(24px * var(--fs,1));cursor:pointer;border-radius:10px;transition:background 0.15s;display:flex;align-items:center;justify-content:center;-webkit-tap-highlight-color:transparent}
.chat-picker-panel .picker-grid button:hover{background:var(--section-bg)}
.chat-picker-panel .picker-grid button:active{background:var(--border)}
.chat-picker-panel .sticker-grid{display:flex;flex-wrap:wrap;gap:8px}
.chat-picker-panel .sticker-grid img{width:64px;height:64px;object-fit:contain;border-radius:10px;cursor:pointer;border:1px solid var(--border);transition:transform 0.15s,box-shadow 0.15s}
.chat-picker-panel .sticker-grid img:hover{transform:scale(1.08);box-shadow:0 2px 8px rgba(0,0,0,0.1)}
.chat-picker-panel .sticker-upload-btn{width:64px;height:64px;border-radius:10px;border:2px dashed var(--border);background:none;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:calc(24px * var(--fs,1));color:var(--text-light);transition:border-color 0.2s}
.chat-picker-panel .sticker-upload-btn:hover{border-color:var(--green)}
/* Chat tabs (friends / followers / following) */
.chat-tabs{display:flex;gap:6px;padding:8px 12px;background:var(--card);border-bottom:1px solid var(--border)}
.chat-tabs button{flex:1;padding:8px 4px;border:none;background:none;font-family:var(--font);font-size:calc(13px * var(--fs,1));font-weight:600;color:var(--text-light);cursor:pointer;position:relative;transition:all 0.25s;border-radius:10px;-webkit-tap-highlight-color:transparent}
.chat-tabs button.active{color:var(--green);background:rgba(76,175,80,0.08)}
.chat-tabs button.active::after{content:'';position:absolute;bottom:2px;left:30%;right:30%;height:3px;background:var(--green);border-radius:3px}
.chat-tabs button:active{background:var(--section-bg)}
/* Study Buddy (学习搭子) */
.buddy-container{flex:1;overflow-y:auto;padding:12px 16px}
.buddy-section-title{font-size:calc(13px * var(--fs,1));font-weight:700;color:var(--text-light);margin-bottom:10px;padding-left:4px}
.buddy-pending-area{margin-bottom:16px}
.buddy-request-item{display:flex;align-items:center;gap:10px;padding:12px;background:var(--card);border-radius:14px;border:1px solid rgba(0,0,0,0.04);margin-bottom:8px;box-shadow:0 1px 4px rgba(0,0,0,0.03);transition:all 0.2s}
.buddy-request-item:hover{box-shadow:0 3px 12px rgba(0,0,0,0.07);transform:translateY(-1px)}
.buddy-request-item img{width:42px;height:42px;border-radius:50%;object-fit:cover;flex-shrink:0}
.buddy-request-item .bri-info{flex:1;min-width:0}
.buddy-request-item .bri-name{font-weight:600;font-size:calc(14px * var(--fs,1));color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.buddy-request-item .bri-sub{font-size:calc(11px * var(--fs,1));color:var(--text-light);margin-top:1px}
.buddy-request-item .bri-actions{display:flex;gap:6px;flex-shrink:0}
.buddy-request-item .bri-actions button{padding:6px 14px;border-radius:12px;border:none;font-size:calc(12px * var(--fs,1));font-weight:600;cursor:pointer;font-family:var(--font);transition:opacity 0.15s;-webkit-tap-highlight-color:transparent}
.buddy-request-item .bri-actions button:active{opacity:0.7}
.buddy-accept-btn{background:var(--green);color:#fff}
.buddy-reject-btn{background:var(--section-bg);color:var(--text-light)}
.buddy-card{display:flex;align-items:center;gap:12px;padding:14px;background:var(--card);border-radius:16px;border:1px solid rgba(0,0,0,0.04);margin-bottom:10px;cursor:pointer;transition:all 0.2s;-webkit-tap-highlight-color:transparent;box-shadow:0 1px 4px rgba(0,0,0,0.03)}
.buddy-card:hover{background:var(--hover-bg);box-shadow:0 4px 16px rgba(0,0,0,0.08);transform:translateY(-1px)}
.buddy-card:active{background:var(--section-bg);transform:translateY(0)}
.buddy-card img{width:48px;height:48px;border-radius:50%;object-fit:cover;flex-shrink:0}
.buddy-card .bc-info{flex:1;min-width:0}
.buddy-card .bc-name{font-weight:700;font-size:calc(15px * var(--fs,1));color:var(--text)}
.buddy-card .bc-level{font-size:calc(12px * var(--fs,1));color:var(--text-light);margin-top:2px}
.buddy-card .bc-stats{display:flex;gap:12px;margin-top:4px;font-size:calc(11px * var(--fs,1));color:var(--text-light)}
.buddy-affection-bar{width:100%;height:6px;background:var(--section-bg);border-radius:3px;margin-top:6px;overflow:hidden}
.buddy-affection-bar .bar-fill{height:100%;border-radius:3px;background:linear-gradient(90deg,#a8e063,#56ab2f);transition:width 0.5s ease}
.buddy-card .bc-status{display:flex;align-items:center;gap:6px;font-size:calc(11px * var(--fs,1))}
.buddy-studying-badge{display:inline-flex;align-items:center;gap:3px;padding:2px 8px;border-radius:8px;background:rgba(76,175,80,0.12);color:#4CAF50;font-size:calc(11px * var(--fs,1));font-weight:600}
.buddy-studying-badge .pulse{width:6px;height:6px;border-radius:50%;background:#4CAF50;animation:buddyPulse 1.5s infinite}
@keyframes buddyPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:0.4;transform:scale(0.7)}}
.buddy-idle-badge{font-size:calc(11px * var(--fs,1));color:var(--text-light)}
/* Buddy supervision panel */
.buddy-supervise-panel{position:fixed;top:0;left:0;right:0;bottom:0;z-index:1300;background:var(--bg);display:flex;flex-direction:column;animation:profileSlideUp 0.3s ease}
.buddy-supervise-header{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid rgba(0,0,0,0.04);background:var(--card);box-shadow:0 1px 4px rgba(0,0,0,0.04)}
.buddy-supervise-header .bs-back{width:32px;height:32px;border-radius:50%;border:none;background:var(--section-bg);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:calc(18px * var(--fs,1));color:var(--text);transition:background 0.2s,box-shadow 0.2s}
.buddy-supervise-header .bs-back:hover{box-shadow:0 2px 8px rgba(0,0,0,0.08)}
.buddy-supervise-body{flex:1;overflow-y:auto;padding:16px}
.bs-buddy-card{background:var(--card);border-radius:16px;border:1px solid rgba(0,0,0,0.04);padding:16px;margin-bottom:12px;box-shadow:0 2px 8px rgba(0,0,0,0.04);transition:box-shadow 0.2s}
.bs-buddy-card:hover{box-shadow:0 4px 16px rgba(0,0,0,0.08)}
.bs-buddy-top{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.bs-buddy-top img{width:52px;height:52px;border-radius:50%;object-fit:cover}
.bs-buddy-info{flex:1}
.bs-buddy-info .bs-name{font-weight:700;font-size:calc(16px * var(--fs,1));color:var(--text)}
.bs-buddy-info .bs-level{font-size:calc(12px * var(--fs,1));color:var(--text-light);margin-top:2px}
.bs-stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px}
.bs-stat{background:var(--section-bg);border-radius:12px;padding:10px;text-align:center;border:1px solid rgba(0,0,0,0.03);transition:background 0.2s}
.bs-stat .bs-val{font-size:calc(18px * var(--fs,1));font-weight:700;color:var(--green);text-shadow:0 1px 2px rgba(var(--green-rgb),0.15)}
.bs-stat .bs-label{font-size:calc(11px * var(--fs,1));color:var(--text-light);margin-top:2px}
.bs-affection-section{margin-bottom:12px}
.bs-affection-section .bs-aff-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.bs-affection-section .bs-aff-label{font-size:calc(12px * var(--fs,1));color:var(--text-light)}
.bs-affection-section .bs-aff-val{font-size:calc(13px * var(--fs,1));font-weight:700;color:var(--green)}
.bs-remove-btn{width:100%;padding:10px;border-radius:12px;border:1px solid #FF6B7A;background:none;color:#FF6B7A;font-family:var(--font);font-size:calc(13px * var(--fs,1));font-weight:600;cursor:pointer;margin-top:8px}
.bs-remove-btn:hover{background:rgba(255,107,122,0.08)}
/* Buddy empty state */
.buddy-empty{text-align:center;padding:40px 20px;color:var(--text-light)}
.buddy-empty .be-icon{font-size:calc(40px * var(--fs,1));margin-bottom:10px}
.buddy-empty .be-text{font-size:calc(14px * var(--fs,1));line-height:1.6}
/* ── R57-6 结伴每日任务（双方完成 → 各领 1 个普通宝箱） ── */
.buddy-daily-area{margin-bottom:16px}
.buddy-daily-hint{font-size:calc(12px * var(--fs,1));line-height:1.6;color:var(--text-light);margin:2px 0 10px;padding-left:4px}
.buddy-daily-card{background:var(--card);border:1px solid rgba(0,0,0,0.04);border-radius:14px;padding:12px 14px;margin-bottom:10px;box-shadow:0 1px 4px rgba(0,0,0,0.03)}
.bdc-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.bdc-name{font-size:calc(14px * var(--fs,1));font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bdc-state{font-size:calc(12px * var(--fs,1));color:var(--text-light);flex-shrink:0}
.bdc-steps{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.bdc-step{font-size:calc(12px * var(--fs,1));font-weight:600;padding:4px 10px;border-radius:999px;background:var(--section-bg);color:var(--text-light);transition:background 0.2s,color 0.2s}
.bdc-step.on{background:rgba(var(--green-rgb),0.18);color:var(--green-dark)}
.bdc-claim{width:100%;padding:10px;border:none;border-radius:12px;font-family:var(--font);font-size:calc(13px * var(--fs,1));font-weight:700;background:var(--green);color:#fff;cursor:pointer;transition:opacity 0.15s;-webkit-tap-highlight-color:transparent}
.bdc-claim:active{opacity:0.75}
.bdc-claim:disabled{background:var(--section-bg);color:var(--text-light);cursor:not-allowed}
body.theme-dark .bdc-step.on,body.theme-darkglass .bdc-step.on{background:rgba(var(--green-rgb),0.22);color:var(--green)}
body.theme-dark .buddy-daily-card,body.theme-darkglass .buddy-daily-card{border-color:rgba(255,255,255,0.08);box-shadow:none}
/* ── R57-7 账号绑定中心（微信 / QQ / 邮箱） ── */
.bind-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.45);z-index:9700;display:flex;align-items:center;justify-content:center;padding:16px}
.bind-overlay.hidden{display:none}
.bind-card{width:100%;max-width:440px;max-height:86vh;overflow-y:auto;background:var(--card);border-radius:18px;box-shadow:0 12px 40px rgba(0,0,0,0.2);-webkit-overflow-scrolling:touch}
.bind-header{display:flex;align-items:center;justify-content:space-between;padding:16px 18px 10px;position:sticky;top:0;background:var(--card);z-index:1}
.bind-header h3{margin:0;font-size:calc(16px * var(--fs,1));font-weight:800;color:var(--text)}
.bind-close{background:none;border:none;font-size:calc(18px * var(--fs,1));line-height:1;cursor:pointer;color:var(--text-light);padding:4px 6px;border-radius:8px}
.bind-close:active{background:var(--section-bg)}
.bind-body{padding:0 18px 18px}
.bind-loading{text-align:center;padding:28px 0;color:var(--text-light);font-size:calc(13px * var(--fs,1))}
.bind-account{background:var(--section-bg);border-radius:14px;padding:12px 14px;margin-bottom:12px}
.bind-account-label{font-size:calc(11px * var(--fs,1));color:var(--text-light);margin-bottom:2px}
.bind-account-mail{font-size:calc(15px * var(--fs,1));font-weight:800;color:var(--text);word-break:break-all}
.bind-account-sub{font-size:calc(11px * var(--fs,1));color:var(--text-light);margin-top:4px}
.bind-slot{border:1px solid var(--border);border-radius:14px;padding:12px 14px;margin-bottom:10px;background:var(--card)}
.bind-slot-head{display:flex;align-items:center;gap:8px}
.bind-slot-icon{font-size:calc(16px * var(--fs,1));line-height:1}
.bind-slot-name{font-size:calc(14px * var(--fs,1));font-weight:700;color:var(--text);flex:1}
.bind-slot-desc{font-size:calc(12px * var(--fs,1));line-height:1.6;color:var(--text-light);margin-top:6px;word-break:break-all}
.bind-slot-desc code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:calc(11px * var(--fs,1));background:var(--section-bg);border-radius:5px;padding:1px 5px}
.bind-slot-act{margin-top:10px}
.bind-chip{font-size:calc(11px * var(--fs,1));font-weight:700;padding:3px 9px;border-radius:999px;background:var(--section-bg);color:var(--text-light);flex-shrink:0;white-space:nowrap}
.bind-chip.on{background:rgba(var(--green-rgb),0.18);color:var(--green-dark)}
.bind-btn{width:100%;padding:10px;border:1px solid var(--border);border-radius:12px;background:var(--card);color:var(--text);font-family:var(--font);font-size:calc(13px * var(--fs,1));font-weight:700;cursor:pointer;transition:opacity 0.15s;-webkit-tap-highlight-color:transparent}
.bind-btn:active{opacity:0.75}
.bind-btn.primary{background:var(--green);border-color:transparent;color:#fff}
.bind-btn.danger{background:rgba(255,107,122,0.1);border-color:transparent;color:var(--red)}
.bind-mini{flex-shrink:0;padding:0 12px;border:1px solid var(--border);border-radius:12px;background:var(--section-bg);color:var(--text);font-family:var(--font);font-size:calc(12px * var(--fs,1));font-weight:700;cursor:pointer}
.bind-mini:disabled{opacity:0.5;cursor:not-allowed}
.bind-form{margin-top:12px;border-top:1px dashed var(--border);padding-top:12px}
.bind-field{margin-bottom:10px}
.bind-field label{display:block;font-size:calc(12px * var(--fs,1));color:var(--text-light);margin-bottom:5px}
.bind-field input{width:100%;box-sizing:border-box;padding:10px 12px;border:1.5px solid var(--border);border-radius:12px;background:var(--section-bg);color:var(--text);font-family:var(--font);font-size:calc(13px * var(--fs,1));outline:none}
.bind-field input:focus{border-color:var(--green)}
.bind-field-row{display:flex;gap:8px}
.bind-field-row input{flex:1}
.bind-form-act{display:flex;gap:8px;margin-top:12px}
.bind-warn{font-size:calc(11px * var(--fs,1));line-height:1.6;color:var(--text);background:rgba(255,107,122,0.1);border-radius:10px;padding:8px 10px}
.bind-hint{font-size:calc(11px * var(--fs,1));line-height:1.6;color:var(--text-light)}
.bind-note{font-size:calc(11px * var(--fs,1));line-height:1.6;color:var(--text-light);background:var(--section-bg);border-radius:10px;padding:9px 11px;margin-top:4px}
/* 暗色两档：base.css 的 body.theme-dark *{color:inherit}(0,1,1) 会盖掉 (0,2,0) 以下的浅色，
   .bind-chip.on 这类带主题色的加 body.theme-xx 前缀提到 (0,3,0) */
body.theme-dark .bind-chip.on,body.theme-darkglass .bind-chip.on{background:rgba(var(--green-rgb),0.22);color:var(--green)}
body.theme-dark .bind-slot,body.theme-darkglass .bind-slot{border-color:rgba(255,255,255,0.08)}
body.theme-dark .bind-btn,body.theme-darkglass .bind-btn{border-color:rgba(255,255,255,0.1)}
body.theme-dark .bind-card,body.theme-darkglass .bind-card{box-shadow:0 12px 40px rgba(0,0,0,0.5)}


/* Privacy setting */
.chat-privacy-row{display:flex;align-items:center;gap:8px;padding:10px 16px;font-size:calc(13px * var(--fs,1));color:var(--text-light);border-bottom:1px solid var(--border);background:var(--card)}
.chat-privacy-row select{padding:5px 10px;border-radius:10px;border:1.5px solid var(--border);font-family:var(--font);font-size:calc(13px * var(--fs,1));background:var(--section-bg);color:var(--text);outline:none;transition:border-color 0.2s}
.chat-privacy-row select:focus{border-color:var(--green)}
/* Notification badge on nav */
.nav-badge{position:absolute;top:4px;right:50%;transform:translateX(14px);background:#FF6B7A;color:#fff;font-size:calc(9px * var(--fs,1));font-weight:700;min-width:16px;height:16px;border-radius:8px;display:flex;align-items:center;justify-content:center;padding:0 4px}

/* ── Profile Page ── */
.profile-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.45);z-index:300;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.profile-card{background:var(--bg);border-radius:20px;width:92%;max-width:420px;max-height:88vh;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,0.25),0 0 0 1px rgba(0,0,0,0.04);position:relative;animation:profileSlideUp 0.3s ease;border:1px solid rgba(0,0,0,0.04)}
.profile-header h3{margin:0;font-size:calc(17px * var(--fs,1));font-weight:700}
.profile-close{background:none;border:none;font-size:calc(22px * var(--fs,1));cursor:pointer;color:var(--text-light);padding:4px 8px;line-height:1}
.profile-body{padding:16px 20px 24px}
.profile-avatar-row{display:flex;align-items:center;gap:14px;margin-bottom:20px}
.profile-avatar-img{width:64px;height:64px;border-radius:50%;object-fit:cover;border:3px solid var(--green);flex-shrink:0;box-shadow:0 0 0 3px rgba(var(--green-rgb),0.15)}
.profile-avatar-info{flex:1;min-width:0}
.profile-avatar-name{font-size:calc(18px * var(--fs,1));font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.profile-avatar-id{font-size:calc(12px * var(--fs,1));color:var(--text-light);margin-top:2px}
.profile-stats-row{display:flex;gap:10px;margin-bottom:20px}
.profile-stat-box{flex:1;background:var(--card);border-radius:12px;padding:12px 8px;text-align:center;box-shadow:0 2px 8px rgba(0,0,0,0.06)}
.profile-stat-num{font-size:calc(22px * var(--fs,1));font-weight:800;color:var(--green)}
.profile-stat-label{font-size:calc(11px * var(--fs,1));color:var(--text-light);margin-top:2px}
.profile-field{margin-bottom:14px}
.profile-field label{display:block;font-size:calc(13px * var(--fs,1));font-weight:600;color:var(--text-light);margin-bottom:5px}
.profile-field select,.profile-field input{width:100%;padding:10px 12px;border-radius:10px;border:1px solid var(--border);font-family:var(--font);font-size:calc(14px * var(--fs,1));background:var(--card);color:var(--text);box-sizing:border-box;transition:border-color 0.2s}
.profile-field select:focus,.profile-field input:focus{outline:none;border-color:var(--green)}
.profile-field .zodiac-display{display:inline-flex;align-items:center;gap:4px;padding:6px 12px;background:linear-gradient(135deg,#FFD700,#FFA500);color:#fff;border-radius:16px;font-size:calc(13px * var(--fs,1));font-weight:600}
.profile-field .readonly-val{padding:10px 12px;background:var(--card);border-radius:10px;font-size:calc(14px * var(--fs,1));color:var(--text-light);border:1px solid var(--border)}
.profile-save-btn{width:100%;padding:12px;border:none;border-radius:12px;background:linear-gradient(135deg,var(--green),var(--blue));color:#fff;font-size:calc(15px * var(--fs,1));font-weight:700;cursor:pointer;margin-top:8px;transition:opacity 0.2s}
.profile-save-btn:active{opacity:0.85}
.profile-save-btn:disabled{opacity:0.5;cursor:not-allowed}
.profile-edit-toggle{background:none;border:1px solid var(--green);color:var(--green);padding:6px 16px;border-radius:16px;font-size:calc(13px * var(--fs,1));font-weight:600;cursor:pointer}
/* ═══ Comprehensive Mobile Responsive (≤480px) ═══ */
/* Extra small (≤360px) */
/* ===== Word Detail Page ===== */
#wd-page{position:fixed;top:0;left:0;right:0;bottom:0;z-index:9600;background:var(--bg);display:none;flex-direction:column}#wd-page.active{display:flex}.wd-body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch}
#wd-page .wd-header{position:sticky;top:0;z-index:10;background:rgba(255,255,255,0.96);border-bottom:1px solid rgba(0,0,0,0.05);padding:0 16px;height:48px;display:flex;align-items:center;justify-content:space-between;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
#wd-page .wd-back{width:36px;height:36px;border-radius:50%;background:#fff;border:1px solid rgba(0,0,0,0.06);font-size:calc(17px * var(--fs,1));cursor:pointer;color:var(--text);display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px rgba(0,0,0,0.05);transition:all .15s;padding:0}
#wd-page .wd-back:hover{transform:scale(1.06)}
#wd-page .wd-back:active{transform:scale(0.92)}
#wd-page .wd-back span{display:none}
#wd-page .wd-title{font-size:calc(15px * var(--fs,1));font-weight:700;color:var(--text)}
#wd-page .wd-actions{display:flex;gap:8px;align-items:center}
#wd-page .wd-actions button{background:none;border:none;font-size:calc(20px * var(--fs,1));cursor:pointer;padding:6px;color:var(--text-light)}
/* 顶栏图标按钮（笔记 / 跟读）：与「收藏」同列、排在它左边；图标用 em 跟随字号档位 */
#wd-page .wd-actions .wd-hd-btn{display:flex;align-items:center;justify-content:center;position:relative}
#wd-page .wd-actions .wd-hd-btn svg{width:1.05em;height:1.05em;display:block}
#wd-page .wd-actions .wd-hd-btn:hover{color:var(--text)}
#wd-page .wd-actions .wd-hd-btn .nt-dot{position:absolute;top:3px;right:3px;margin:0}
/* ── R46：「复制 / 掌握」顶栏图标 + 蓝卡片右上角播放 + 模块标题行尾播放 ── */
#wd-page .wd-actions .wd-hd-btn.on{color:var(--green)}
#wd-page .wd-actions .wd-hd-btn.copied{color:var(--green)}/* R47 收藏星号：inline SVG；收藏态 = 金黄色实心（.on + fill:currentColor） */#wd-page .wd-actions #wd-fav-btn{display:flex;align-items:center;justify-content:center}#wd-page .wd-actions #wd-fav-btn svg{width:1.05em;height:1.05em;display:block}#wd-page .wd-actions #wd-fav-btn.on{color:var(--orange)}#wd-page .wd-actions #wd-fav-btn.on svg{fill:currentColor}
/* 顶栏右簇变宽后标题要能收缩省略，否则长单词会把图标顶出屏幕 */
#wd-page .wd-title{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#wd-page .wd-hero-word{padding-right:calc(58px * var(--fs,1))}
#wd-page .wd-hero-play{position:absolute;top:12px;right:12px;z-index:2;width:2.3em;height:2.3em;font-size:calc(19px * var(--fs,1));padding:0;border:none;border-radius:50%;background:var(--hero-btn-bg);color:var(--hero-text);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s}
#wd-page .wd-hero-play:hover{background:var(--hero-btn-hover)}
#wd-page .wd-hero-play svg{width:1.1em;height:1.1em;display:block}
#wd-page .wd-section-title .wd-sec-play{margin-left:auto;flex:0 0 auto;width:2em;height:2em;font-size:calc(13px * var(--fs,1));padding:0;border:none;border-radius:50%;background:var(--section-bg);color:var(--blue);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s,color .2s}
#wd-page .wd-section-title .wd-sec-play:hover{background:var(--hover-bg);color:var(--green)}
#wd-page .wd-section-title .wd-sec-play svg{width:1.05em;height:1.05em;display:block}
.wd-body{padding:20px 16px;max-width:900px;margin:0 auto}
.wd-hero{background:linear-gradient(135deg,var(--hero-grad-start) 0%,var(--hero-grad-end) 100%);border-radius:20px;padding:26px 24px;color:var(--hero-text);margin-bottom:18px;position:relative;overflow:hidden;box-shadow:0 6px 20px rgba(0,0,0,0.10)}
.wd-hero::after{content:'';position:absolute;top:-30px;right:-30px;width:130px;height:130px;border-radius:50%;background:rgba(255,255,255,0.10)}
.wd-hero-word{font-family:var(--font-display);font-size:clamp(calc(30px * var(--fs,1)),calc(8vw * var(--fs,1)),calc(40px * var(--fs,1)));font-weight:800;letter-spacing:0.5px;margin-bottom:6px;line-height:1.1;text-shadow:0 2px 4px rgba(0,0,0,0.12);word-break:break-word}
.wd-hero-phonetic{font-size:calc(14px * var(--fs,1));opacity:0.85;margin-bottom:4px}
.wd-hero-phonetic b{opacity:1;font-weight:600}
.wd-hero-row{display:flex;gap:12px;align-items:center;margin-top:12px}.wd-hero-pos-list{margin-top:14px;display:flex;flex-direction:column;gap:10px}.wd-hero-pos-row{display:flex;gap:12px;align-items:baseline}.wd-hero-pos-row .wd-hero-pos{background:rgba(255,255,255,0.22);padding:4px 14px;border-radius:8px;font-size:calc(13px * var(--fs,1));font-weight:700;flex-shrink:0;min-width:40px;text-align:center;letter-spacing:0.5px}.wd-hero-pos-row .wd-hero-meaning{font-size:calc(16px * var(--fs,1));opacity:0.95;line-height:1.4}
.wd-hero-phrase{margin-top:12px;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.wd-hero-phrase-label{background:rgba(255,255,255,0.22);padding:3px 10px;border-radius:8px;font-size:calc(12px * var(--fs,1));font-weight:700;flex-shrink:0}
.wd-hero-phrase-text{font-size:calc(15px * var(--fs,1));font-weight:600;opacity:0.95}
.wd-hero-phrase-cn{font-size:calc(13px * var(--fs,1));opacity:0.75}
.wd-hero-pos{background:var(--hero-pos-bg);padding:4px 12px;border-radius:20px;font-size:calc(13px * var(--fs,1));font-weight:600}
.wd-hero-meaning{font-size:calc(15px * var(--fs,1));opacity:0.95}
.wd-audio-row{display:flex;gap:10px;margin-top:14px}
.wd-audio-btn{background:var(--hero-btn-bg);border:none;color:var(--hero-text);padding:8px 16px;border-radius:20px;font-size:calc(13px * var(--fs,1));cursor:pointer;display:flex;align-items:center;gap:6px;transition:background 0.2s}
.wd-audio-btn:hover{background:var(--hero-btn-hover)}
.wd-audio-btn svg{width:16px;height:16px}
.wd-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.wd-tag{padding:3px 10px;border-radius:12px;font-size:calc(11px * var(--fs,1));font-weight:600}
.wd-tag-grade{background:var(--hero-pos-bg);color:var(--hero-text)}
.wd-tag-freq{background:rgba(255,200,0,0.3);color:#fff}
.wd-tag-old{background:#fff3e0;color:#e65100;border:1px solid #ffcc80}
.wd-section{background:#fff;border-radius:14px;padding:16px;margin-bottom:12px;box-shadow:0 2px 10px rgba(0,0,0,0.04);border:1px solid rgba(0,0,0,0.04)}
.wd-section-title{font-family:var(--font-display);font-size:calc(15px * var(--fs,1));font-weight:800;color:var(--blue);display:flex;align-items:center;gap:8px;margin-bottom:14px}
.wd-section-title::before{content:'';width:3px;height:16px;background:var(--blue);border-radius:2px}
.wd-pos-item{display:flex;gap:12px;align-items:flex-start;margin-bottom:12px}
.wd-pos-badge{padding:4px 10px;border-radius:8px;font-size:calc(12px * var(--fs,1));font-weight:700;flex-shrink:0;min-width:36px;text-align:center;color:#fff;margin-top:1px}
.wd-pos-badge.pos-v{background:#FF6B8A}
.wd-pos-badge.pos-n{background:#4A90D9}
.wd-pos-badge.pos-adj{background:#9B59B6}
.wd-pos-badge.pos-adv{background:#E67E22}
.wd-pos-badge.pos-prep{background:#27AE60}
.wd-pos-badge.pos-other{background:#95A5A6}
.wd-pos-meaning{font-size:calc(14px * var(--fs,1));color:var(--text);line-height:1.7}
.wd-forms-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.wd-form-item{background:var(--section-bg);border-radius:var(--radius-xs);padding:10px 12px}
.wd-form-label{font-size:calc(11px * var(--fs,1));color:var(--text-lighter);margin-bottom:3px}
.wd-form-value{font-size:calc(14px * var(--fs,1));font-weight:600;color:var(--text)}
.wd-form-value .wd-word-link,.wd-phrase-en .wd-word-link{color:var(--green);cursor:pointer;border-bottom:1px dashed transparent;transition:border-color .2s}
.wd-form-value .wd-word-link:hover,.wd-phrase-en .wd-word-link:hover{border-bottom-color:var(--green)}
.wd-parts-row{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;padding:8px 0}
.wd-part-card{background:linear-gradient(135deg,var(--section-bg),var(--card));border-radius:14px;padding:14px 18px;text-align:center;cursor:pointer;transition:all .2s ease;min-width:80px;border:1.5px solid var(--border);position:relative;overflow:hidden}
.wd-part-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--green),var(--blue));opacity:0;transition:opacity .2s}
.wd-part-card:hover{transform:translateY(-3px);box-shadow:0 6px 16px rgba(0,0,0,.1);border-color:var(--green)}
.wd-part-card:hover::before{opacity:1}
.wd-part-card:active{transform:scale(0.96)}
.wd-part-word{font-size:calc(16px * var(--fs,1));font-weight:800;color:var(--green);margin-bottom:4px;letter-spacing:0.5px}
.wd-part-meaning{font-size:calc(12px * var(--fs,1));color:var(--text-light);line-height:1.4}
.wd-part-plus{font-size:calc(20px * var(--fs,1));font-weight:700;color:var(--text-lighter);user-select:none;margin:0 4px}
.wd-part-eq{font-size:calc(18px * var(--fs,1));font-weight:700;color:var(--text-lighter);user-select:none;margin:0 2px}
.wd-part-result{font-size:calc(15px * var(--fs,1));font-weight:700;color:var(--text);background:linear-gradient(135deg,var(--green-light),var(--section-bg));border-radius:var(--radius-xs);padding:10px 14px;text-align:center}
.wd-phrase-item{padding:10px 0;border-bottom:1px solid var(--border)}
.wd-phrase-item:last-child{border-bottom:none;padding-bottom:0}
.wd-phrase-en{font-size:calc(14px * var(--fs,1));font-weight:600;color:var(--text);margin-bottom:3px}
.wd-phrase-cn{font-size:calc(13px * var(--fs,1));color:var(--text-light)}
.wd-syn-group{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}
.wd-syn-label{font-size:calc(12px * var(--fs,1));font-weight:700;padding:3px 10px;border-radius:6px;flex-shrink:0}
.wd-syn-label.syn{background:var(--blue-light);color:var(--blue-dark)}
.wd-syn-label.ant{background:#FFF3E0;color:var(--orange-dark)}
.wd-syn-word{font-size:calc(13px * var(--fs,1));color:var(--text);padding:3px 10px;background:var(--section-bg);border-radius:6px;cursor:pointer;transition:background 0.2s}
.wd-syn-word:hover{background:var(--hover-bg)}
.wd-action-row{display:flex;gap:10px;margin-bottom:14px}
.wd-action-btn{flex:1;padding:12px;border-radius:var(--radius-sm);border:1.5px solid var(--border);background:#fff;font-size:calc(13px * var(--fs,1));font-weight:600;color:var(--text);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;transition:all 0.2s}
.wd-action-btn:hover{border-color:var(--green);color:var(--green)}
.wd-action-btn.primary{background:var(--green);color:#fff;border-color:var(--green);box-shadow:0 4px 0 var(--green-dark)}
.wd-action-btn.primary:hover{filter:brightness(1.05)}
.wd-action-btn.primary:active{transform:translateY(3px);box-shadow:0 1px 0 var(--green-dark)}
.wd-remember-btn{display:block;width:100%;max-width:320px;margin:0 auto;padding:15px;border:none;border-radius:16px;background:var(--green);color:#fff;font-size:calc(16px * var(--fs,1));font-weight:800;letter-spacing:2px;cursor:pointer;font-family:var(--font);box-shadow:0 5px 0 var(--green-dark),0 10px 24px rgba(var(--green-rgb),0.28);transition:all .12s}
.wd-remember-btn:hover{filter:brightness(1.05)}
.wd-remember-btn:active{transform:translateY(4px);box-shadow:0 1px 0 var(--green-dark),0 3px 8px rgba(var(--green-rgb),0.2)}
.wd-empty{color:var(--text-lighter);font-size:calc(13px * var(--fs,1));text-align:center;padding:12px 0}
.wd-phrase-expand-btn{text-align:center;color:var(--blue);font-size:calc(12px * var(--fs,1));cursor:pointer;padding:10px 0;font-weight:600;transition:color 0.2s}
.wd-phrase-expand-btn:hover{color:var(--blue-dark)}
/* ===== Landing Page ===== */
#landing-page{position:fixed;top:0;left:0;right:0;bottom:0;z-index:10000;display:flex;background:#fff;font-family:var(--font)}
.lp-left{flex:1;position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:center;padding:60px 48px;background:linear-gradient(160deg,#F8FFE8 0%,#E8F8E0 30%,#FFF9E0 70%,#FFFDE8 100%)}
.lp-lemon-bg{position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none;opacity:0.5;transition:opacity 0.3s}
.lp-brand{display:flex;align-items:center;gap:12px;margin-bottom:40px;position:relative;z-index:2}
.lp-logo{width:52px;height:52px;border-radius:12px;object-fit:contain;flex-shrink:0;mix-blend-mode:multiply}
.lp-brand-name{font-size:calc(22px * var(--fs,1));font-weight:800;color:#2D5016;letter-spacing:-0.5px;font-family:'SimSun','Songti SC','Noto Serif SC',serif}
.lp-brand-sub{font-size:calc(13px * var(--fs,1));color:#5A8A3C;font-weight:500;margin-top:2px;font-family:'SimSun','Songti SC','Noto Serif SC',serif}
.lp-hero{position:relative;z-index:2;max-width:440px}
.lp-title{font-size:calc(42px * var(--fs,1));font-weight:900;line-height:1.2;color:#1A3A0A;margin-bottom:20px;letter-spacing:-1px}
.lp-title span{background:linear-gradient(135deg,var(--green),var(--green-dark));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.lp-desc{font-size:calc(16px * var(--fs,1));line-height:1.7;color:#5A7A4A;margin-bottom:32px}
.lp-feature-list{position:relative;z-index:2;display:flex;flex-direction:column;gap:12px}
.lp-feature-item{display:flex;align-items:center;gap:10px;font-size:calc(15px * var(--fs,1));font-weight:500;color:#3D6B28}
.lp-feature-dot{width:6px;height:6px;border-radius:50%;background:var(--green);flex-shrink:0;box-shadow:0 0 6px rgba(var(--green-rgb),0.4)}
.lp-footer{position:absolute;bottom:32px;left:48px;right:48px;display:flex;align-items:center;justify-content:space-between;font-size:calc(12px * var(--fs,1));color:#8AAA7A;z-index:2}
.lp-footer a{color:var(--green);text-decoration:none}
.lp-right{width:420px;flex-shrink:0;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:60px 40px;background:#fff;border-left:1px solid #F0F0F0}
.lp-auth{width:100%;max-width:320px}
.lp-auth-title{font-size:calc(24px * var(--fs,1));font-weight:800;color:#1A3A0A;margin-bottom:6px}
.lp-auth-sub{font-size:calc(14px * var(--fs,1));color:#888;margin-bottom:32px}
.lp-tabs{display:flex;background:#F5F5F5;border-radius:12px;padding:3px;margin-bottom:28px}
.lp-tab{flex:1;padding:10px;border:none;border-radius:10px;font-size:calc(14px * var(--fs,1));font-weight:600;cursor:pointer;background:transparent;color:#888;font-family:inherit;transition:all 0.25s}
.lp-tab.active{background:#fff;color:#1A3A0A;box-shadow:0 2px 8px rgba(0,0,0,0.08)}
.lp-field{margin-bottom:16px}
.lp-field label{display:block;font-size:calc(13px * var(--fs,1));font-weight:600;color:#555;margin-bottom:6px}
.lp-field input{width:100%;padding:12px 16px;border:2px solid #E8E8E8;border-radius:12px;font-size:calc(15px * var(--fs,1));font-family:inherit;outline:none;transition:border-color 0.2s;background:#FAFAFA}
.lp-field input:focus{border-color:var(--green);background:#fff}
.lp-code-row{display:flex;gap:8px}
.lp-code-row input{flex:1}
.lp-code-btn{flex-shrink:0;padding:12px 16px;border:none;border-radius:12px;background:#F5F5F5;font-size:calc(13px * var(--fs,1));font-weight:600;color:var(--green);cursor:pointer;font-family:inherit;white-space:nowrap;transition:all 0.2s}
.lp-code-btn:hover{background:var(--green-light)}
.lp-code-btn:disabled{color:#ccc;cursor:not-allowed}
.lp-submit{width:100%;padding:14px;border:none;border-radius:12px;background:linear-gradient(135deg,var(--green),var(--green-dark));color:#fff;font-size:calc(16px * var(--fs,1));font-weight:700;cursor:pointer;font-family:inherit;box-shadow:0 4px 16px rgba(var(--green-rgb),0.3);transition:all 0.25s;margin-top:8px}
.lp-submit:hover{transform:translateY(-1px);box-shadow:0 6px 24px rgba(var(--green-rgb),0.4)}
.lp-submit:active{transform:translateY(0)}
.lp-submit:disabled{opacity:0.6;cursor:not-allowed;transform:none!important}
.lp-extra{text-align:center;margin-top:20px;font-size:calc(13px * var(--fs,1));color:#aaa}
.lp-extra a{color:var(--green);text-decoration:none;font-weight:600;cursor:pointer}
.lp-extra a:hover{text-decoration:underline}
.lp-skip{position:absolute;top:32px;right:32px;padding:10px 20px;border:1.5px solid #E0E0E0;border-radius:10px;background:rgba(255,255,255,0.8);backdrop-filter:blur(8px);font-size:calc(13px * var(--fs,1));font-weight:600;color:#888;cursor:pointer;font-family:inherit;transition:all 0.2s;z-index:3}
.lp-skip:hover{border-color:var(--green);color:var(--green)}
.lp-error{background:#FFF0F0;border:1px solid #FFD0D0;border-radius:10px;padding:10px 14px;margin-bottom:16px;font-size:calc(13px * var(--fs,1));color:#D44;display:none}
.lp-hero>*{animation:lp-fade-in 0.6s ease both}
.lp-hero>*:nth-child(1){animation-delay:0.1s}
.lp-hero>*:nth-child(2){animation-delay:0.2s}
.lp-hero>*:nth-child(3){animation-delay:0.3s}
.lp-hero>*:nth-child(4){animation-delay:0.4s}
.lp-feature-list{animation:lp-fade-in 0.6s ease both;animation-delay:0.5s}
.lp-lemon-float{animation:lp-float 6s ease-in-out infinite}
.lp-lemon-float:nth-child(2n){animation-delay:-2s;animation-duration:7s}
.lp-lemon-float:nth-child(3n){animation-delay:-4s;animation-duration:8s}
/* Interactive cursor effects */
.lp-cursor-glow{position:absolute;width:280px;height:280px;border-radius:50%;pointer-events:none;z-index:1;background:radial-gradient(circle,rgba(var(--green-rgb),0.12) 0%,rgba(245,214,61,0.06) 40%,transparent 70%);transform:translate(-50%,-50%);transition:opacity 0.3s;opacity:0;will-change:transform}
.lp-left:hover .lp-cursor-glow{opacity:1}
.lp-ripple{position:absolute;border-radius:50%;pointer-events:none;z-index:1;border:2px solid rgba(var(--green-rgb),0.3);animation:lp-ripple-expand 0.8s ease-out forwards;will-change:transform,opacity}
@keyframes lp-ripple-expand{0%{width:0;height:0;opacity:1;transform:translate(-50%,-50%)}100%{width:300px;height:300px;opacity:0;transform:translate(-50%,-50%)}}
.lp-lemon-bg{transition:transform 0.15s ease-out}
.lp-left .lp-lemon-float{transition:transform 0.3s ease-out}
/* ===== Inline Auth Component ===== */
.ia-wrap{max-width:360px;margin:0 auto;font-family:var(--font)}
.ia-head{text-align:center;margin-bottom:20px}
.ia-head-icon{font-size:calc(32px * var(--fs,1));margin-bottom:8px}
.ia-head-title{font-size:calc(17px * var(--fs,1));font-weight:700;color:var(--text);margin-bottom:2px}
.ia-head-sub{font-size:calc(13px * var(--fs,1));color:var(--text-light)}
.ia-tabs{display:flex;background:var(--section-bg);border-radius:10px;padding:3px;margin-bottom:18px}
.ia-tab{flex:1;padding:8px;border:none;border-radius:8px;font-size:calc(13px * var(--fs,1));font-weight:600;cursor:pointer;background:transparent;color:var(--text-lighter);font-family:inherit;transition:all 0.2s}
.ia-tab.active{background:var(--card);color:var(--text);box-shadow:0 1px 4px rgba(0,0,0,0.06)}
.ia-field{margin-bottom:12px}
.ia-field label{display:block;font-size:calc(12px * var(--fs,1));font-weight:600;color:var(--text-light);margin-bottom:4px}
.ia-field input{width:100%;padding:10px 14px;border:2px solid var(--border);border-radius:10px;font-size:calc(14px * var(--fs,1));font-family:inherit;outline:none;transition:border-color 0.2s;background:var(--bg);box-sizing:border-box}
.ia-field input:focus{border-color:var(--green);background:var(--card)}
.ia-code-row{display:flex;gap:6px}
.ia-code-row input{flex:1}
.ia-code-btn{flex-shrink:0;padding:10px 12px;border:none;border-radius:10px;background:var(--section-bg);font-size:calc(12px * var(--fs,1));font-weight:600;color:var(--green);cursor:pointer;font-family:inherit;white-space:nowrap;transition:all 0.2s}
.ia-code-btn:hover{background:var(--green-light)}
.ia-code-btn:disabled{color:var(--text-lighter);cursor:not-allowed}
.ia-submit{width:100%;padding:12px;border:none;border-radius:10px;background:linear-gradient(135deg,var(--green),var(--green-dark));color:#fff;font-size:calc(14px * var(--fs,1));font-weight:700;cursor:pointer;font-family:inherit;box-shadow:0 3px 12px rgba(var(--green-rgb),0.25);transition:all 0.2s;margin-top:4px}
.ia-submit:hover{transform:translateY(-1px);box-shadow:0 5px 16px rgba(var(--green-rgb),0.35)}
.ia-submit:active{transform:translateY(0)}
.ia-submit:disabled{opacity:0.6;cursor:not-allowed;transform:none!important}
.ia-extra{text-align:center;margin-top:14px;font-size:calc(12px * var(--fs,1));color:var(--text-lighter)}
.ia-extra a{color:var(--green);text-decoration:none;font-weight:600;cursor:pointer}
.ia-extra a:hover{text-decoration:underline}
.ia-error{background:#FFF0F0;border:1px solid #FFD0D0;border-radius:8px;padding:8px 12px;margin-bottom:12px;font-size:calc(12px * var(--fs,1));color:#D44;display:none}
@media(max-width:900px){
  .lp-left{display:none}
  .lp-right{width:100%;padding:40px 24px}
  .lp-skip{top:16px;right:16px}
  .lp-mobile-brand{display:flex!important;align-items:center;gap:8px;justify-content:center;margin-bottom:24px}
  .lp-mobile-brand .lp-logo{width:36px;height:36px}
  .lp-mobile-brand .lp-brand-name{font-size:calc(18px * var(--fs,1))}
}
/* Immersive Study Mode */
#study-overlay{position:fixed;top:0;left:0;width:100%;height:100%;z-index:9000;display:none;flex-direction:column;font-family:var(--font);overflow:hidden;background:radial-gradient(1100px 520px at 50% -8%,rgba(var(--green-rgb),0.10),transparent 60%),radial-gradient(800px 480px at 104% 108%,rgba(var(--blue-rgb),0.09),transparent 55%),linear-gradient(180deg,#FBFDF8 0%,#F4FAEE 100%)}
#study-overlay.active{display:flex}#study-overlay.active~.immersive-container,#study-overlay.active~section .immersive-container{visibility:hidden}
.so-top{padding:16px 20px 14px;flex-shrink:0}
.so-top-row{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.so-back{width:38px;height:38px;border-radius:50%;border:1px solid rgba(0,0,0,0.06);background:#fff;font-size:calc(17px * var(--fs,1));cursor:pointer;display:flex;align-items:center;justify-content:center;color:#666;box-shadow:0 2px 6px rgba(0,0,0,0.05);transition:all .15s}
.so-back:hover{color:var(--green);transform:scale(1.05)}
.so-back:active{transform:scale(0.92)}
.so-info{flex:1;text-align:center}
.so-counter{font-size:calc(14px * var(--fs,1));font-weight:800;color:#1A3A0A;letter-spacing:.5px;font-family:var(--font-display)}
.so-daily{font-size:calc(11px * var(--fs,1));color:var(--green);margin-top:2px;font-weight:700}
.so-progress-bar{height:8px;background:rgba(var(--green-rgb),0.12);border-radius:6px;overflow:hidden}
.so-progress-fill{height:100%;background:linear-gradient(90deg,#8FE04F,var(--green) 55%,var(--green-dark));border-radius:6px;transition:width .5s cubic-bezier(.3,1.2,.4,1);width:0;position:relative}
.so-progress-fill::after{content:'';position:absolute;top:1.5px;left:8px;right:8px;height:2px;border-radius:2px;background:rgba(255,255,255,0.45)}
.so-body{flex:1;overflow-y:auto;display:flex;flex-direction:column;align-items:center;padding:24px 20px 12px;-webkit-overflow-scrolling:touch}
.so-word{font-family:var(--font-display);font-size:calc(46px * var(--fs,1));font-weight:800;color:#1A3A0A;text-align:center;margin-bottom:6px;letter-spacing:.5px;word-break:break-word;line-height:1.08;animation:so-word-in .45s cubic-bezier(.3,1.4,.4,1)}
@keyframes so-word-in{from{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}
.so-phonetic{font-size:calc(15px * var(--fs,1));color:#8aa88a;margin-bottom:14px;text-align:center}
.so-audio-btn{border:none;background:#1CB0F6;color:#fff;font-size:calc(14px * var(--fs,1));padding:10px 24px;border-radius:22px;cursor:pointer;font-family:var(--font);font-weight:700;margin-bottom:20px;box-shadow:0 4px 12px rgba(var(--blue-rgb),0.25);transition:all .15s}
.so-audio-btn:hover{filter:brightness(1.06)}
.so-audio-btn:active{transform:scale(0.96);box-shadow:0 2px 6px rgba(var(--blue-rgb),0.2)}
.so-meaning-card{width:100%;max-width:520px;background:#fff;border-radius:18px;padding:20px 18px;box-shadow:0 4px 20px rgba(0,0,0,0.06);border:1px solid rgba(0,0,0,0.04);margin-bottom:14px;opacity:0;transform:translateY(18px) scale(.97);transition:all .45s cubic-bezier(.3,1.5,.5,1)}
.so-meaning-card.visible{opacity:1;transform:translateY(0) scale(1)}
.so-pos-row{display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap}
.so-pos-badge{padding:4px 12px;border-radius:999px;font-size:calc(12px * var(--fs,1));font-weight:700;color:#fff}
.so-pos-badge.pos-v{background:#FF6B8A}
.so-pos-badge.pos-n{background:#4A90D9}
.so-pos-badge.pos-adj{background:#9B59B6}
.so-pos-badge.pos-adv{background:#E67E22}
.so-pos-badge.pos-prep{background:#27AE60}
.so-pos-badge.pos-other{background:#95A5A6}
.so-pos-inline{display:flex;flex-direction:column;gap:8px;margin-bottom:10px}
.so-pos-item{display:flex;align-items:center;gap:10px}
.so-pos-item .so-pos-badge{flex-shrink:0}
.so-pos-item .so-pos-meaning{font-size:calc(17px * var(--fs,1));color:#333;line-height:1.5}
.so-meaning{font-size:calc(18px * var(--fs,1));color:#333;line-height:1.6;margin-bottom:10px}
.so-phrase{font-size:calc(14px * var(--fs,1));color:#666;line-height:1.5;padding:10px 14px;background:#F4FAEE;border-radius:12px;margin-bottom:8px}
.so-phrase-en{color:#1A3A0A;font-weight:700}
.so-phrase-cn{color:#888;font-size:calc(13px * var(--fs,1))}
.so-sentence{font-size:calc(13px * var(--fs,1));color:#777;line-height:1.5;margin-top:10px;padding:12px 14px;background:#FAFCF7;border-radius:12px;border-left:4px solid var(--green)}
.so-sentence-cn{font-size:calc(12px * var(--fs,1));color:#999;margin-top:4px}
.so-reveal-hint{font-size:calc(13px * var(--fs,1));color:#9ab89a;text-align:center;margin-top:18px;font-weight:600;animation:so-pulse 2s ease-in-out infinite}
@keyframes so-pulse{0%,100%{opacity:.45}50%{opacity:1}}
.so-bottom{padding:14px 20px 26px;flex-shrink:0;background:linear-gradient(180deg,transparent,rgba(244,250,238,0.9) 30%)}
.so-actions{display:flex;gap:12px;justify-content:center}
.so-btn{flex:1;padding:16px;border:none;border-radius:16px;font-size:calc(16px * var(--fs,1));font-weight:800;cursor:pointer;font-family:var(--font);transition:all .12s;text-align:center;letter-spacing:2px}
.so-btn-skip{background:rgba(0,0,0,0.05);color:#888;box-shadow:0 4px 0 rgba(0,0,0,0.08)}
.so-btn-skip:hover{background:rgba(0,0,0,0.08)}
.so-btn-review{background:#FF9600;color:#fff;box-shadow:0 4px 0 #E08600}
.so-btn-review:hover{filter:brightness(1.05)}
.so-btn-know{background:var(--green);color:#fff;box-shadow:0 5px 0 var(--green-dark),0 10px 24px rgba(var(--green-rgb),0.28)}
.so-btn-know:hover{filter:brightness(1.05)}
.so-btn-know:active{transform:translateY(4px);box-shadow:0 1px 0 var(--green-dark),0 3px 8px rgba(var(--green-rgb),0.2)}
.so-btn-fav{background:#fff;border:none;font-size:calc(18px * var(--fs,1));cursor:pointer;padding:4px;width:40px;height:40px;border-radius:50%;box-shadow:0 2px 0 rgba(0,0,0,0.06),0 4px 12px rgba(26,58,10,0.08);transition:all .15s;display:flex;align-items:center;justify-content:center}
.so-btn-fav:hover{transform:scale(1.08)}
.so-btn-fav:active{transform:scale(0.9)}
/* R60：学习页收藏星改 inline SVG（文字字形 ☆/★ 在部分安卓 WebView 上缺字，
   表现为「点了就没」）；收藏态 = 金黄色实心。与词详情页 #wd-fav-btn 同一套做法。 */
#study-overlay .so-btn-fav svg{width:1.1em;height:1.1em;display:block}
#study-overlay .so-btn-fav.on{color:var(--orange)}
#study-overlay .so-btn-fav.on svg{fill:currentColor}
.so-complete{display:none;flex-direction:column;align-items:center;justify-content:center;flex:1;text-align:center;padding:40px 20px}
.so-complete.active{display:flex}
.so-complete-icon{font-size:calc(72px * var(--fs,1));margin-bottom:18px;animation:so-bounce .8s cubic-bezier(.3,1.6,.4,1)}
.so-complete-sub{font-size:calc(14px * var(--fs,1));color:#888;margin-bottom:26px;line-height:1.6}
.so-complete-stats{display:flex;gap:14px;margin-bottom:34px;flex-wrap:wrap;justify-content:center}
.so-stat{text-align:center;background:#fff;border-radius:16px;padding:14px 18px;box-shadow:0 2px 0 rgba(26,58,10,0.04),0 8px 20px rgba(26,58,10,0.08);border:1px solid rgba(var(--green-rgb),0.12);min-width:74px}
.so-stat-num{font-family:var(--font-display);font-size:calc(26px * var(--fs,1));font-weight:800;color:var(--green)}
.so-stat-label{font-size:calc(11px * var(--fs,1));color:#aaa;margin-top:2px;font-weight:600}
.so-complete-actions{display:flex;gap:12px}
.so-complete-btn{padding:15px 30px;border:none;border-radius:16px;font-size:calc(15px * var(--fs,1));font-weight:800;cursor:pointer;font-family:var(--font);transition:all .12s;letter-spacing:1px}
.so-complete-btn:active{transform:translateY(3px)}
.so-complete-btn.primary{background:var(--green);color:#fff;box-shadow:0 5px 0 var(--green-dark),0 10px 24px rgba(var(--green-rgb),0.28)}
.so-complete-btn.primary:hover{filter:brightness(1.05)}
.so-complete-btn.secondary{background:#fff;color:#666;box-shadow:0 4px 0 rgba(0,0,0,0.08)}

/* ── Daily Plan Questionnaire ── */
#dp-questionnaire{position:fixed;top:0;left:0;width:100%;height:100%;z-index:9500;background:#fff;display:none;flex-direction:column;overflow:hidden}
#dp-questionnaire.active{display:flex}
.dp-q-top{padding:16px 20px;display:flex;align-items:center;gap:12px;flex-shrink:0}
.dp-q-back{width:36px;height:36px;border-radius:50%;border:none;background:rgba(0,0,0,.05);font-size:calc(18px * var(--fs,1));cursor:pointer;display:flex;align-items:center;justify-content:center}
.dp-q-progress{flex:1;height:4px;background:rgba(0,0,0,.06);border-radius:4px;overflow:hidden}
.dp-q-fill{height:100%;background:linear-gradient(90deg,var(--green),var(--green-dark));border-radius:4px;transition:width .4s}
.dp-q-body{flex:1;padding:24px 20px;overflow-y:auto}
.dp-q-title{font-size:calc(22px * var(--fs,1));font-weight:800;color:#1A3A0A;margin-bottom:8px}
.dp-q-subtitle{font-size:calc(14px * var(--fs,1));color:#888;margin-bottom:24px}
.dp-q-option{display:block;width:100%;padding:16px 20px;margin-bottom:10px;border:2px solid var(--border);border-radius:14px;background:var(--card);font-size:calc(15px * var(--fs,1));font-weight:600;color:#333;cursor:pointer;text-align:left;font-family:var(--font);transition:all .2s}
.dp-q-option:hover{border-color:var(--green);background:rgba(var(--green-rgb),.04)}
.dp-q-option.selected{border-color:var(--green);background:rgba(var(--green-rgb),.08);color:#1A3A0A}
.dp-q-option .dp-q-icon{display:inline-block;width:28px;height:28px;line-height:calc(28px * var(--fs,1));text-align:center;border-radius:50%;background:rgba(0,0,0,.05);margin-right:12px;font-size:calc(14px * var(--fs,1))}
.dp-q-recommend{display:inline-block;padding:2px 8px;border-radius:6px;background:rgba(var(--green-rgb),.1);color:var(--green);font-size:calc(11px * var(--fs,1));font-weight:700;margin-left:8px;vertical-align:middle}
.dp-q-footer{padding:16px 20px 32px;flex-shrink:0}
.dp-q-btn{width:100%;padding:16px;border:none;border-radius:14px;background:linear-gradient(135deg,var(--green),var(--green-dark));color:#fff;font-size:calc(16px * var(--fs,1));font-weight:700;cursor:pointer;font-family:var(--font);box-shadow:0 3px 12px rgba(var(--green-rgb),.25);transition:all .2s}
.dp-q-btn:disabled{opacity:.5;cursor:not-allowed}
.dp-q-btn:active{transform:scale(.97)}
.dp-q-summary{background:var(--card);border-radius:14px;padding:16px 20px;margin-bottom:16px;border:1px solid var(--border)}
.dp-q-summary-row{display:flex;justify-content:space-between;padding:6px 0;font-size:calc(14px * var(--fs,1))}
.dp-q-summary-label{color:#888}
.dp-q-summary-value{font-weight:700;color:#333}
/* ── Daily Plan Card (lobby) ── */
.dp-card{background:linear-gradient(135deg,rgba(var(--green-rgb),0.06),var(--green-light));border-radius:16px;padding:16px 20px;margin-bottom:16px;border:1px solid rgba(var(--green-rgb),.15);position:relative;overflow:hidden}
.dp-card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.dp-card-title{font-size:calc(15px * var(--fs,1));font-weight:700;color:#1A3A0A}
.dp-card-badge{padding:3px 10px;border-radius:8px;font-size:calc(11px * var(--fs,1));font-weight:700;background:rgba(var(--green-rgb),.12);color:var(--green)}
.dp-card-progress{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.dp-card-bar{flex:1;height:8px;background:rgba(var(--green-rgb),.12);border-radius:8px;overflow:hidden}
.dp-card-bar-fill{height:100%;background:linear-gradient(90deg,var(--green),var(--green-dark));border-radius:8px;transition:width .4s}
.dp-card-count{font-size:calc(13px * var(--fs,1));font-weight:700;color:var(--green);white-space:nowrap}
.dp-card-actions{display:flex;gap:8px;flex-wrap:wrap}
.dp-card-btn{padding:10px 16px;border:none;border-radius:10px;font-size:calc(13px * var(--fs,1));font-weight:700;cursor:pointer;font-family:var(--font);transition:all .2s;flex:1;text-align:center;min-width:0}
.dp-card-btn:active{transform:scale(.96)}
.dp-card-btn-primary{background:linear-gradient(135deg,var(--green),var(--green-dark));color:#fff;box-shadow:0 2px 8px rgba(var(--green-rgb),.2)}
.dp-card-btn-listen{background:rgba(74,144,217,.1);color:#4A90D9}
.dp-card-btn-spell{background:rgba(155,89,182,.1);color:#9B59B6}
.dp-card-btn-cal{background:rgba(0,0,0,.05);color:#666}

/* ── Calendar Overlay ── */
/* ── 学习日历（R52-11：整段改用主题令牌。原来写死 #fff / #333 / #aaa，
       夜间模式下就是「白底 + 浅色字」，日历与统计几乎看不见。 ── */
#cal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;z-index:9200;background:var(--bg);display:none;flex-direction:column;overflow-y:auto}
#cal-overlay.active{display:flex}
.cal-header{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 18px;position:sticky;top:0;z-index:3;background:var(--bg);border-bottom:1px solid var(--border)}
.cal-back{width:38px;height:38px;border-radius:50%;border:none;background:var(--section-bg);color:var(--text);font-size:calc(18px * var(--fs,1));cursor:pointer;display:flex;align-items:center;justify-content:center;flex:0 0 auto;transition:background var(--transition-fast),color var(--transition-fast)}
.cal-back:hover{background:var(--hover-bg);color:var(--green)}
.cal-title{font-size:calc(18px * var(--fs,1));font-weight:700;color:var(--text)}
.cal-nav{display:flex;align-items:center;justify-content:center;gap:16px;padding:12px 18px}
.cal-nav-btn{width:34px;height:34px;border-radius:50%;border:none;background:var(--section-bg);color:var(--text);font-size:calc(16px * var(--fs,1));cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background var(--transition-fast),color var(--transition-fast)}
.cal-nav-btn:hover{background:var(--hover-bg);color:var(--green)}
.cal-month-label{font-size:calc(16px * var(--fs,1));font-weight:700;min-width:120px;text-align:center;color:var(--text)}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;padding:0 14px;margin-bottom:8px}
.cal-weekday{text-align:center;font-size:calc(11px * var(--fs,1));color:var(--text-light);font-weight:700;padding:6px 0;letter-spacing:.5px}
.cal-day{aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:12px;font-size:calc(14px * var(--fs,1));cursor:default;position:relative;color:var(--text);background:var(--section-bg);border:1px solid transparent;transition:transform .15s ease,box-shadow .15s ease}
.cal-day.empty{visibility:hidden}
.cal-day.studied{background:color-mix(in srgb,var(--green) 14%,transparent);border-color:color-mix(in srgb,var(--green) 28%,transparent);color:var(--text);font-weight:700}
.cal-day.perfect{background:linear-gradient(135deg,var(--green),var(--green-dark));border-color:transparent;color:#fff;font-weight:700;box-shadow:0 2px 8px rgba(var(--green-rgb),.3)}
.cal-day.today{box-shadow:inset 0 0 0 2px var(--green)}
.cal-day.today.perfect{box-shadow:inset 0 0 0 2px rgba(255,255,255,.72),0 2px 8px rgba(var(--green-rgb),.3)}
.cal-day-count{font-size:calc(9px * var(--fs,1));color:var(--text-light);margin-top:1px;line-height:1}
.cal-day.studied .cal-day-count{color:color-mix(in srgb,var(--green) 70%,var(--text))}
.cal-day.perfect .cal-day-count{color:rgba(255,255,255,.88)}
/* 日期配色图例：颜色原先只靠猜，补一行说明 */
.cal-daylegend{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;padding:0 14px 14px;font-size:calc(11px * var(--fs,1));color:var(--text-light)}
.cal-daylegend span{display:inline-flex;align-items:center;gap:5px}
.cal-daylegend i{width:10px;height:10px;border-radius:3px;background:var(--section-bg);border:1px solid var(--border);display:inline-block}
.cal-daylegend i.studied{background:color-mix(in srgb,var(--green) 14%,transparent);border-color:color-mix(in srgb,var(--green) 28%,transparent)}
.cal-daylegend i.perfect{background:linear-gradient(135deg,var(--green),var(--green-dark));border-color:transparent}
.cal-daylegend i.today{background:transparent;border:1.5px solid var(--green)}
.cal-stats{padding:0 14px 20px}
.cal-stat-row{display:flex;gap:8px;margin-bottom:10px}
.cal-stat-box{flex:1;background:var(--card);border-radius:14px;padding:12px 6px;text-align:center;border:1px solid var(--border);transition:transform .2s}
.cal-stat-box:hover{transform:translateY(-2px)}
.cal-stat-num{font-size:calc(22px * var(--fs,1));font-weight:800;color:var(--green)}
.cal-stat-num.orange{color:var(--orange)}
.cal-stat-num.blue{color:var(--blue)}
.cal-stat-label{font-size:calc(10px * var(--fs,1));color:var(--text-light);margin-top:3px}
.cal-section{background:var(--card);border-radius:14px;padding:16px;border:1px solid var(--border);margin-bottom:12px}
.cal-section-title{font-size:calc(14px * var(--fs,1));font-weight:700;margin-bottom:12px;display:flex;align-items:center;gap:6px;color:var(--text)}
.cal-chart-svg{width:100%;height:140px}
.cal-legend{display:flex;gap:14px;margin-top:10px;justify-content:center;flex-wrap:wrap}
.cal-legend-item{display:flex;align-items:center;gap:4px;font-size:calc(11px * var(--fs,1));color:var(--text-light)}
.cal-legend-dot{width:10px;height:10px;border-radius:3px}
.cal-heatmap{overflow-x:auto;padding-bottom:4px}
.cal-heatmap-grid{display:grid;grid-template-rows:repeat(7,12px);grid-auto-flow:column;grid-auto-columns:12px;gap:2px}
.cal-heatmap-cell{width:12px;height:12px;border-radius:3px;background:var(--section-bg);transition:all .15s}
.cal-heatmap-cell.l1{background:color-mix(in srgb,var(--green) 22%,transparent)}
.cal-heatmap-cell.l2{background:color-mix(in srgb,var(--green) 44%,transparent)}
.cal-heatmap-cell.l3{background:color-mix(in srgb,var(--green) 68%,transparent)}
.cal-heatmap-cell.l4{background:var(--green)}
.cal-heatmap-cell:hover{transform:scale(1.3);box-shadow:0 1px 4px rgba(0,0,0,.2)}
.cal-heatmap-months{display:flex;font-size:calc(10px * var(--fs,1));color:var(--text-light);margin-bottom:4px;padding-left:2px}
.cal-heatmap-months span{flex:1;text-align:left}
.cal-heatmap-legend{display:flex;align-items:center;gap:3px;justify-content:flex-end;margin-top:6px;font-size:calc(10px * var(--fs,1));color:var(--text-light)}
.cal-heatmap-legend .cal-heatmap-cell{width:10px;height:10px;cursor:default}
.cal-heatmap-legend .cal-heatmap-cell:hover{transform:none;box-shadow:none}

/* Lobby Carousel */
.lobby-carousel{position:relative;margin-bottom:16px}
.lobby-carousel-viewport{overflow:hidden;border-radius:16px}
.lobby-carousel-track{display:flex;transition:transform .5s cubic-bezier(.4,0,.2,1)}
.lobby-carousel-slide{min-width:100%;flex-shrink:0}
.lobby-carousel-dots{display:flex;justify-content:center;gap:6px;padding:10px 0 4px}
.lobby-carousel-dot{width:7px;height:7px;border-radius:50%;background:rgba(0,0,0,.15);cursor:pointer;transition:all .3s}
.lobby-carousel-dot.active{background:var(--green);width:20px;border-radius:4px}
.lobby-carousel-track{align-items:stretch}
.lobby-carousel-slide{display:flex;flex-direction:column}
.lobby-carousel-slide .dp-card,.lobby-carousel-slide .tn-lobby-banner{margin:0;border-radius:0;flex:1;display:flex;flex-direction:column;justify-content:center;box-shadow:none;overflow:hidden}
/* ── Training Modes ── */
#train-overlay{position:fixed;top:0;left:0;width:100%;height:100%;z-index:9300;background:#fff;display:none;flex-direction:column}
#train-overlay.active{display:flex}
.tr-top{padding:16px 20px 12px;display:flex;align-items:center;gap:12px;flex-shrink:0}
.tr-back{width:36px;height:36px;border-radius:50%;border:none;background:rgba(0,0,0,.05);font-size:calc(18px * var(--fs,1));cursor:pointer;display:flex;align-items:center;justify-content:center}
.tr-info{flex:1;text-align:center}
.tr-counter{font-size:calc(13px * var(--fs,1));font-weight:600;color:#333}
.tr-type{font-size:calc(11px * var(--fs,1));color:var(--green);margin-top:2px}
.tr-progress{height:4px;background:rgba(0,0,0,.06);border-radius:4px;overflow:hidden;margin-top:8px}
.tr-progress-fill{height:100%;border-radius:4px;transition:width .4s}
.tr-body{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;overflow-y:auto}
.tr-play-btn{width:80px;height:80px;border-radius:50%;border:none;font-size:calc(36px * var(--fs,1));cursor:pointer;display:flex;align-items:center;justify-content:center;margin-bottom:24px;transition:all .2s}
.tr-play-btn:active{transform:scale(.92)}
.tr-play-btn.listen{background:rgba(74,144,217,.1);color:#4A90D9}
.tr-play-btn.spell{background:rgba(155,89,182,.1);color:#9B59B6}
.tr-hint{font-size:calc(16px * var(--fs,1));color:#333;font-weight:600;margin-bottom:8px;text-align:center}
.tr-subhint{font-size:calc(13px * var(--fs,1));color:#aaa;margin-bottom:24px;text-align:center}
.tr-options{width:100%;max-width:400px}
.tr-option{display:block;width:100%;padding:14px 20px;margin-bottom:8px;border:2px solid var(--border);border-radius:12px;background:var(--card);font-size:calc(15px * var(--fs,1));font-weight:600;color:#333;cursor:pointer;text-align:left;font-family:var(--font);transition:all .2s}
.tr-option:hover{border-color:var(--green)}
.tr-option.correct{border-color:var(--green);background:rgba(var(--green-rgb),.08);color:#1A3A0A}
.tr-option.wrong{border-color:#FF6B7A;background:rgba(255,107,122,.08);color:#CC0000}
.tr-input{width:100%;max-width:320px;padding:14px 20px;border:2px solid var(--border);border-radius:12px;font-size:calc(18px * var(--fs,1));font-weight:700;text-align:center;font-family:var(--font);outline:none;transition:border-color .2s;margin-bottom:16px}
.tr-input:focus{border-color:var(--green)}
.tr-input.correct{border-color:var(--green);background:rgba(var(--green-rgb),.04)}
.tr-input.wrong{border-color:#FF6B7A;background:rgba(255,107,122,.04)}
.tr-submit{padding:12px 32px;border:none;border-radius:12px;background:linear-gradient(135deg,var(--green),var(--green-dark));color:#fff;font-size:calc(15px * var(--fs,1));font-weight:700;cursor:pointer;font-family:var(--font)}
.tr-feedback{font-size:calc(14px * var(--fs,1));font-weight:700;margin-top:12px;padding:8px 16px;border-radius:8px;text-align:center}
.tr-feedback.correct{color:#1A3A0A;background:rgba(var(--green-rgb),.1)}
.tr-feedback.wrong{color:#CC0000;background:rgba(255,107,122,.1)}
.tr-complete{display:none;flex-direction:column;align-items:center;justify-content:center;flex:1;text-align:center;padding:40px 20px}
.tr-complete.active{display:flex}
.tr-complete-icon{font-size:calc(64px * var(--fs,1));margin-bottom:16px}
.tr-complete-title{font-size:calc(24px * var(--fs,1));font-weight:800;margin-bottom:8px}
.tr-complete-sub{font-size:calc(14px * var(--fs,1));color:#888;margin-bottom:24px}
.tr-score-ring{width:100px;height:100px;margin-bottom:24px;position:relative}
.tr-score-ring svg{transform:rotate(-90deg)}
.tr-score-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:calc(24px * var(--fs,1));font-weight:800;color:var(--green)}

/* ── Word Decomposition ── */
.wd-decomp{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.wd-decomp-part{padding:10px 14px;border-radius:12px;text-align:center;min-width:60px;transition:transform .2s,box-shadow .2s;cursor:pointer}
.wd-decomp-part:hover{transform:translateY(-3px);box-shadow:0 6px 16px rgba(0,0,0,.15)}
.wd-decomp-part:active{transform:scale(0.96)}
.wd-decomp-morpheme{font-size:calc(16px * var(--fs,1));font-weight:700;margin-bottom:2px}
.wd-decomp-meaning{font-size:calc(11px * var(--fs,1));color:rgba(255,255,255,.85)}
.wd-decomp-prefix{background:linear-gradient(135deg,#4A90D9,#357ABD)}
.wd-decomp-prefix .wd-decomp-morpheme,.wd-decomp-prefix .wd-decomp-meaning{color:#fff}
.wd-decomp-root{background:linear-gradient(135deg,var(--green),var(--green-dark))}
.wd-decomp-root .wd-decomp-morpheme,.wd-decomp-root .wd-decomp-meaning{color:#fff}
.wd-decomp-suffix{background:linear-gradient(135deg,#9B59B6,#7D3C98)}
.wd-decomp-suffix .wd-decomp-morpheme,.wd-decomp-suffix .wd-decomp-meaning{color:#fff}
.wd-decomp-plus{display:flex;align-items:center;font-size:calc(18px * var(--fs,1));font-weight:700;color:#ccc;padding:0 2px}
.wd-decomp-explain{font-size:calc(13px * var(--fs,1));color:#666;line-height:1.6;padding:10px 14px;background:rgba(var(--green-rgb),.04);border-radius:10px;border-left:3px solid var(--green);margin-top:4px}
/* Study Overlay Quiz */
.so-quiz-wrap{width:100%;max-width:440px;padding:8px 4px;animation:so-quiz-in .35s cubic-bezier(.3,1.4,.4,1)}
@keyframes so-quiz-in{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
.so-quiz-badge{display:inline-block;padding:5px 14px;border-radius:999px;font-size:calc(12px * var(--fs,1));font-weight:800;margin-bottom:18px;background:rgba(var(--blue-rgb),0.12);color:var(--blue-dark)}
.so-quiz-prompt{font-size:calc(14px * var(--fs,1));color:#8aa88a;margin-bottom:14px;line-height:1.5;font-weight:600}
.so-quiz-word{font-family:var(--font-display);font-size:calc(40px * var(--fs,1));font-weight:800;color:#1A3A0A;margin-bottom:8px;text-align:center;line-height:1.1}
.so-quiz-meaning{font-size:calc(20px * var(--fs,1));color:#3C3C3C;margin-bottom:22px;text-align:center;line-height:1.5;font-weight:700}
.so-quiz-opts{display:flex;flex-direction:column;gap:12px;counter-reset:quizopt}
.so-quiz-opt{display:flex;align-items:center;gap:14px;padding:15px 16px;border:2px solid rgba(26,58,10,0.10);border-bottom-width:4px;border-radius:16px;font-size:calc(16px * var(--fs,1));font-weight:700;background:#fff;cursor:pointer;text-align:left;transition:all .15s;font-family:var(--font);color:#3C3C3C}
.so-quiz-opt::before{counter-increment:quizopt;content:counter(quizopt,upper-alpha);flex-shrink:0;width:30px;height:30px;border-radius:9px;background:rgba(var(--green-rgb),0.12);color:var(--green-dark);font-size:calc(13px * var(--fs,1));font-weight:800;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);transition:all .15s}
.so-quiz-opt:hover{border-color:rgba(var(--green-rgb),0.4);background:#F7FDF2;transform:translateY(-1px)}
.so-quiz-opt.correct{border-color:var(--green);background:var(--green-light);color:var(--green-dark)}
.so-quiz-opt.correct::before{background:var(--green);color:#fff}
.so-quiz-opt.wrong{border-color:#FF6B7A;background:#FFE5E5;color:#FF6B7A}
.so-quiz-opt.wrong::before{background:#FF6B7A;color:#fff}
.so-quiz-opt.disabled{pointer-events:none}
.so-quiz-opt.disabled:not(.correct):not(.wrong){opacity:.5}
.so-quiz-feedback{text-align:center;padding:16px;border-radius:16px;margin-top:18px;font-size:calc(15px * var(--fs,1));font-weight:800}
.so-quiz-feedback.correct{background:var(--green-light);color:var(--green-dark)}
.so-quiz-feedback.wrong{background:#FFE5E5;color:#FF6B7A}
.so-quiz-next{display:block;margin:18px auto 0;padding:14px 40px;border:none;border-radius:16px;background:var(--green);color:#fff;font-size:calc(15px * var(--fs,1));font-weight:800;cursor:pointer;font-family:var(--font);transition:all .12s;letter-spacing:1px;box-shadow:0 5px 0 var(--green-dark),0 10px 24px rgba(var(--green-rgb),0.28)}
.so-quiz-next:hover{filter:brightness(1.05)}
.so-quiz-next:active{transform:translateY(4px);box-shadow:0 1px 0 var(--green-dark)}
.so-word-link{cursor:pointer;text-decoration:underline;text-decoration-style:dotted;text-underline-offset:4px;transition:color .2s}
.so-word-link:hover{color:var(--blue,#4A90D9)}
/* Collapsible settings */
.study-settings-toggle{width:100%;padding:8px;border:none;border-radius:10px;background:var(--section-bg,rgba(0,0,0,0.03));color:var(--text-light,#888);font-size:calc(12px * var(--fs,1));font-weight:600;cursor:pointer;font-family:var(--font);margin-bottom:8px;transition:all .2s}
body.theme-dark .study-settings-toggle,body.theme-darkglass .study-settings-toggle{background:rgba(255,255,255,0.06)!important;color:#aaa!important}
.study-settings-toggle:hover{background:rgba(0,0,0,0.06)}
.study-settings-body{overflow:hidden;transition:max-height .3s ease,opacity .3s ease;max-height:0;opacity:0}
.study-settings-body.expanded{max-height:1500px;opacity:1}
/* ===== Textbook Bookshelf (教材书架) ===== */
.bk-shelf{margin-bottom:14px}
.bk-shelf .bk-books,.bk-shelf .bk-board{display:none}
.bk-shelf.expanded .bk-books{display:flex}
.bk-shelf.expanded .bk-board{display:block}
.bk-shelf-label{cursor:pointer;user-select:none}
.bk-arrow{font-size:calc(10px * var(--fs,1));color:var(--text-light);transition:transform .2s}
.bk-shelf-count{margin-left:auto;font-size:calc(11px * var(--fs,1));font-weight:400;color:var(--text-light)}
.bk-shelf-label{font-family:var(--font-display);font-size:calc(13px * var(--fs,1));font-weight:700;color:var(--text);margin:0 0 6px 2px;display:flex;align-items:center;gap:7px}
.bk-shelf-label::before{content:'';width:4px;height:14px;border-radius:2px;background:var(--shelf-color,var(--green))}
.bk-books{display:flex;gap:12px;overflow-x:auto;padding:8px 2px 2px;scrollbar-width:thin;scrollbar-color:var(--border) transparent}
.bk-books::-webkit-scrollbar{height:4px}
.bk-books::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}
.bk-book{flex:none;width:78px;cursor:pointer;position:relative;transition:transform .18s ease;-webkit-tap-highlight-color:transparent}
.bk-cover{position:relative;height:110px;border-radius:3px 8px 8px 3px;background:linear-gradient(155deg,var(--c1),var(--c2));box-shadow:0 4px 8px rgba(0,0,0,.18),inset -3px 0 4px rgba(255,255,255,.28),inset 3px 0 5px rgba(0,0,0,.28);display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:9px 5px 7px 11px;overflow:hidden}
.bk-cover::before{content:'';position:absolute;left:0;top:0;bottom:0;width:7px;background:linear-gradient(90deg,rgba(0,0,0,.38),rgba(0,0,0,0))}
.bk-cover::after{content:'';position:absolute;left:11px;right:5px;top:0;height:3px;background:rgba(255,255,255,.22)}
.bk-badge{font-size:calc(8px * var(--fs,1));font-weight:700;letter-spacing:1px;color:rgba(255,255,255,.92);background:rgba(0,0,0,.18);padding:2px 6px;border-radius:7px}
.bk-title{font-family:var(--font-display);font-size:calc(14px * var(--fs,1));font-weight:700;color:#fff;line-height:1.3;text-align:center;text-shadow:0 1px 2px rgba(0,0,0,.28)}
.bk-count{font-size:calc(9px * var(--fs,1));color:#fff;background:rgba(0,0,0,.25);padding:1px 7px;border-radius:8px;min-height:14px}
.bk-board{height:9px;margin:7px -4px 0;background:linear-gradient(180deg,#D7A878,#B58350 55%,#9A6B3F);border-radius:2px 2px 4px 4px;box-shadow:0 4px 6px rgba(0,0,0,.18)}
.bk-book.selected .bk-cover{box-shadow:0 4px 8px rgba(0,0,0,.18),0 0 0 3px #fff,0 0 0 6px var(--green),inset -3px 0 4px rgba(255,255,255,.28),inset 3px 0 5px rgba(0,0,0,.28)}
.bk-book.selected::after{content:'✓';position:absolute;top:-8px;right:-6px;width:22px;height:22px;background:var(--green);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:calc(12px * var(--fs,1));font-weight:700;box-shadow:0 2px 5px rgba(0,0,0,.3);z-index:2;border:2px solid #fff}
.bk-book:active{transform:translateY(1px) scale(.98)}
.bk-chips{display:flex;gap:8px;flex-wrap:wrap;margin:2px 0 14px}
/* ===== Browse Category Selector (R51-3：与主页卡片/chip 同一套 UI 语言) ===== */
.browse-cats{display:flex;gap:4px;overflow-x:auto;padding:4px;scrollbar-width:none;border:none;border-radius:14px;background:var(--section-bg);margin-bottom:10px}
.browse-cats::-webkit-scrollbar{display:none}
.browse-cat{flex:none;padding:8px 15px;font-size:calc(13px * var(--fs,1));font-weight:600;color:var(--text-light);cursor:pointer;position:relative;white-space:nowrap;border:none;background:transparent;border-radius:11px;font-family:var(--font);transition:color .2s,background .2s;-webkit-tap-highlight-color:transparent}
.browse-cat:hover{color:var(--text)}
.browse-cat.active{color:#fff;background:var(--green);font-weight:700;box-shadow:0 2px 8px rgba(var(--green-rgb),.25)}
.browse-cat.active::after{display:none}
.browse-subchips{display:flex;gap:8px;flex-wrap:wrap;padding:12px 2px 4px}
.browse-subchip{padding:6px 14px;font-size:calc(12.5px * var(--fs,1));border-radius:999px;border:1.5px solid var(--border);background:var(--card);color:var(--text-light);cursor:pointer;font-family:var(--font);transition:all .18s;-webkit-tap-highlight-color:transparent}
.browse-subchip:hover{border-color:var(--green);color:var(--green-dark)}
.browse-subchip.active{background:var(--green);color:#fff;border-color:var(--green);font-weight:600;box-shadow:0 2px 8px rgba(var(--green-rgb),.22)}
.browse-booklist{display:flex;flex-direction:column;gap:8px;padding:6px 0 10px;max-height:400px;overflow-y:auto;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.browse-bookcard{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:16px;background:var(--card);border:1.5px solid var(--border);cursor:pointer;transition:all .18s;box-shadow:0 1px 4px rgba(0,0,0,.03);-webkit-tap-highlight-color:transparent}
.browse-bookcard:active{transform:scale(.985)}
.browse-bookcard.selected{border-color:var(--green);background:linear-gradient(135deg,rgba(var(--green-rgb),.08),var(--card));box-shadow:0 2px 10px rgba(var(--green-rgb),.14)}
.browse-bookcard .bbc-cover{flex:none;width:42px;height:56px;border-radius:3px 6px 6px 3px;background:linear-gradient(155deg,var(--c1),var(--c2));display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px rgba(0,0,0,.15),inset -2px 0 3px rgba(255,255,255,.25),inset 2px 0 3px rgba(0,0,0,.2)}
.browse-bookcard .bbc-cover span{font-size:calc(9px * var(--fs,1));font-weight:700;color:#fff;text-align:center;line-height:1.2;padding:2px}
.browse-bookcard .bbc-info{flex:1;min-width:0}
.browse-bookcard .bbc-title{font-size:calc(14px * var(--fs,1));font-weight:600;color:var(--text);margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.browse-bookcard .bbc-count{font-size:calc(11px * var(--fs,1));color:var(--text-lighter)}
.browse-bookcard .bbc-check{flex:none;width:20px;height:20px;border-radius:50%;border:2px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:calc(11px * var(--fs,1));color:transparent;transition:all .18s}
.browse-bookcard.selected .bbc-check{background:var(--green);border-color:var(--green);color:#fff}

/* ===== Mobile Minimal Refinement ===== */
#tool-nav.browse-cats{gap:6px;padding:4px;background:var(--section-bg);border:none;border-radius:14px;margin-bottom:12px}
#tool-nav .browse-cat{flex:0 0 auto;border:none;background:transparent;padding:8px 16px;border-radius:10px;font-size:calc(12.5px * var(--fs,1));font-weight:600;color:var(--text-light);position:relative;transition:all .2s;-webkit-tap-highlight-color:transparent}
#tool-nav .browse-cat:hover{color:var(--text);background:var(--card)}
#tool-nav .browse-cat.active{background:var(--green);color:#fff;font-weight:700;box-shadow:0 2px 8px rgba(var(--green-rgb),0.25)}
#tool-nav .browse-cat.active::after{display:none}
/* ── 更多功能分类条滑动条（R37）：分类条本身可横滚但滚动条被藏，
   这里补一条可见可拖的滑动条，内容不溢出自动隐藏（JS 控制 hidden）── */
#tool-nav-slider{position:relative;height:8px;border-radius:999px;background:rgba(var(--green-rgb),.16);margin:-4px 2px 14px;cursor:pointer;touch-action:none}
#tool-nav-slider[hidden]{display:none}
#tool-nav-slider:focus-visible{outline:2px solid var(--green);outline-offset:3px}
#tool-nav-slider .tool-nav-slider-thumb{position:absolute;left:0;top:0;bottom:0;width:40px;border-radius:999px;background:var(--green);cursor:grab}
#tool-nav-slider.dragging .tool-nav-slider-thumb,#tool-nav-slider .tool-nav-slider-thumb:active{cursor:grabbing}
/* Hamburger */
/* 二级归纳入口行（词典 / 学习进度）*/
.word-detail, .sentence-en, .sentence-cn, .copyable-text,
#modal-content, .pos-meaning-line, .wd-meaning, .fc-chinese, .fc-sentence {
  -webkit-user-select: text; user-select: text;
}
button, .bottom-nav, .bottom-nav-item, .lobby-card, .lobby-stat-card,
.calc-btn, .flashcard, .audio-btn, .option-btn, .quiz-option, .tab-bar,
.header, .sidebar-panel, .bk-shelf-label {
  -webkit-user-select: none; user-select: none;
}

/* ═══ 柯林斯板块（词典详情页） ═══ */
.wd-src-tag{display:inline-block;padding:2px 8px;border-radius:6px;background:var(--blue);color:#fff;font-size:calc(10px * var(--fs,1));font-weight:800;letter-spacing:.3px;font-family:var(--font)}
.wd-src-tag.alt{background:var(--purple)}
.wd-collins{display:flex;flex-direction:column;gap:14px}
.wd-col-sense{padding-left:12px;border-left:3px solid var(--purple-light)}
.wd-col-head{display:flex;align-items:center;gap:8px;margin-bottom:6px;flex-wrap:wrap}
.wd-col-pos{display:inline-block;padding:2px 8px;border-radius:6px;background:var(--purple-light);color:var(--purple);font-size:calc(11px * var(--fs,1));font-weight:800;font-family:var(--font)}
.wd-col-cn{font-size:calc(13.5px * var(--fs,1));color:var(--text);font-weight:600;line-height:1.5}
.wd-col-eg{position:relative;padding:10px 12px 10px 12px;border-radius:10px;background:var(--section-bg);border:1px solid var(--border)}
.wd-col-eg-en{font-size:calc(13.5px * var(--fs,1));line-height:1.75;color:var(--text);padding-right:64px}
.wd-col-eg-cn{font-size:calc(12.5px * var(--fs,1));line-height:1.7;color:var(--text-light);margin-top:4px}
.wd-col-say{position:absolute;top:8px;right:8px;padding:4px 9px;border-radius:8px;border:1px solid var(--border);background:var(--card);color:var(--text-light);font-family:var(--font);font-size:calc(11px * var(--fs,1));font-weight:600;cursor:pointer;transition:all .15s}
.wd-col-say:hover{border-color:var(--green);color:var(--green)}
.wd-col-say:active{transform:scale(.95)}
body.theme-dark .wd-col-say,body.theme-darkglass .wd-col-say{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14)}
body.theme-dark .wd-col-sense,body.theme-darkglass .wd-col-sense{border-left-color:rgba(255,255,255,.2)}

/* ── 短语条目：文字下方加下划虚线，提示可点击进入短语详情页 ── */
.wd-phrase-item{cursor:pointer;border-radius:10px;transition:background .15s}
.wd-phrase-item:hover{background:var(--hover-bg)}
.wd-phrase-en{display:inline-block;border-bottom:1px dashed var(--border);padding-bottom:1px;transition:border-color .15s}
.wd-phrase-item:hover .wd-phrase-en{border-bottom-color:var(--green)}

/* ── 柯林斯例句：当前词高亮 ── */
.wd-eg-hit{background:rgba(var(--green-rgb),.18);border-radius:3px;padding:0 2px;font-weight:700;color:var(--green-dark);border-bottom:none}
body.theme-dark .wd-eg-hit,body.theme-darkglass .wd-eg-hit{background:rgba(var(--green-rgb),.26);color:#B8F06A}

/* ── 短语详情页 ── */
#pd-page{position:fixed;top:0;left:0;right:0;bottom:0;z-index:9610;background:var(--bg);display:none;flex-direction:column}
#pd-page.active{display:flex}
#pd-page .wd-header{position:sticky;top:0;z-index:10;background:rgba(255,255,255,0.96);border-bottom:1px solid rgba(0,0,0,0.05);padding:0 16px;height:48px;display:flex;align-items:center;justify-content:space-between;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
#pd-page .wd-back{width:36px;height:36px;border-radius:50%;background:#fff;border:1px solid rgba(0,0,0,0.06);font-size:calc(17px * var(--fs,1));cursor:pointer;color:var(--text);display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px rgba(0,0,0,0.05);transition:all .15s;padding:0}
#pd-page .wd-back:hover{transform:scale(1.06)}
#pd-page .wd-back:active{transform:scale(.92)}
#pd-page .wd-back span{display:none}
#pd-page .wd-title{font-size:calc(15px * var(--fs,1));font-weight:700;color:var(--text)}
#pd-page .wd-actions{display:flex;gap:8px}
/* ── R46：短语详情页 —— 顶栏「复制 / 掌握 / 跟读」+ 卡片右上角朗读 ── */
#pd-page .wd-actions{align-items:center}
#pd-page .wd-actions button{background:none;border:none;font-size:calc(20px * var(--fs,1));cursor:pointer;padding:6px;color:var(--text-light)}
#pd-page .wd-actions .wd-hd-btn{display:flex;align-items:center;justify-content:center;position:relative}
#pd-page .wd-actions .wd-hd-btn svg{width:1.05em;height:1.05em;display:block}
#pd-page .wd-actions .wd-hd-btn:hover{color:var(--text)}
#pd-page .wd-actions .wd-hd-btn.on,#pd-page .wd-actions .wd-hd-btn.copied{color:var(--green)}
#pd-page .wd-title{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* 卡片右上角要放播放键 → 左右留白对称加大，文字仍保持居中 */
#pd-page .pd-hero{padding-left:calc(42px * var(--fs,1));padding-right:calc(42px * var(--fs,1))}
#pd-page .pd-hero-play{position:absolute;top:12px;right:12px;z-index:2;width:2.3em;height:2.3em;font-size:calc(19px * var(--fs,1));padding:0;border:1px solid var(--border);border-radius:50%;background:var(--section-bg);color:var(--text-light);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
#pd-page .pd-hero-play:hover{color:var(--green);border-color:var(--green)}
#pd-page .pd-hero-play svg{width:1.1em;height:1.1em;display:block}
body.theme-dark #pd-page .wd-header,body.theme-darkglass #pd-page .wd-header{background:rgba(30,32,34,0.96);border-bottom-color:rgba(255,255,255,0.08)}
body.theme-dark #pd-page .wd-back,body.theme-darkglass #pd-page .wd-back{background:var(--card);border-color:var(--border)}

#pd-page .pd-hero{position:relative}
.pd-hero{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:20px 16px;text-align:center;margin-bottom:16px;box-shadow:var(--shadow)}
.pd-phrase{font-size:calc(23px * var(--fs,1));font-weight:800;color:var(--text);line-height:1.35;display:inline-block;border-bottom:2px dashed var(--green-light);padding-bottom:3px}
.pd-tag{display:inline-block;margin-top:9px;font-size:calc(10.5px * var(--fs,1));font-weight:800;color:#fff;background:var(--purple,#CE82FF);padding:2px 9px;border-radius:6px;letter-spacing:.5px}
.pd-cn{font-size:calc(15px * var(--fs,1));color:var(--text);margin-top:10px;line-height:1.7}
.pd-audio-row{margin-top:14px;display:flex;justify-content:center;gap:8px}
.pd-chip-row{display:flex;flex-wrap:wrap;gap:8px}
.pd-chip{display:inline-flex;align-items:baseline;gap:6px;padding:7px 13px;border-radius:10px;background:var(--section-bg);border:1px solid var(--border);font-size:calc(12px * var(--fs,1));color:var(--text-light);cursor:pointer;transition:all .15s}
.pd-chip b{font-size:calc(13.5px * var(--fs,1));color:var(--text);font-weight:700}
.pd-chip:hover{border-color:var(--green)}
.pd-chip.dis{cursor:default;opacity:.75}
.pd-chip.dis b{color:var(--text-light)}

/* ── 测验返回键：统一到左上角（R35）── */
.quiz-back-btn{display:inline-flex;align-items:center;gap:5px;flex:0 0 auto;padding:6px 15px 6px 11px;border:1.5px solid var(--border);border-radius:999px;background:var(--card);color:var(--text);font-family:var(--font);font-size:calc(13px * var(--fs,1));font-weight:700;line-height:1;cursor:pointer;transition:border-color var(--transition-fast),color var(--transition-fast),background var(--transition-fast)}
.quiz-back-btn:hover{border-color:var(--green);color:var(--green)}
.quiz-back-btn:active{transform:scale(.97)}
.quiz-back-btn .qb-a{font-size:calc(15px * var(--fs,1));line-height:1}
.quiz-top-bar .back-progress{flex-wrap:wrap}

/* ── 页面级返回条（R36）：更多功能 / 学习进度 等从首页进入、不在底部导航里的页面 ── */
.page-back-bar{display:flex;align-items:center;gap:8px;margin:4px 2px 12px}
.page-back-bar .rd-back{display:inline-flex;align-items:center;gap:4px;padding:6px 14px 6px 10px;border-radius:999px;border:1.5px solid var(--border);background:var(--card);color:var(--text);font-family:var(--font);font-size:calc(13px * var(--fs,1));font-weight:600;line-height:1;cursor:pointer;transition:border-color var(--transition-fast),color var(--transition-fast),transform var(--transition-fast)}
.page-back-bar .rd-back:hover{border-color:var(--green);color:var(--green)}
.page-back-bar .rd-back:active{transform:scale(.97)}

/* ── 弹窗右上角关闭 ×（R36）── */
.modal-close-x{width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;border:none;border-radius:50%;background:var(--section-bg);color:var(--text-light);font-size:calc(14px * var(--fs,1));line-height:1;cursor:pointer;transition:background var(--transition-fast),color var(--transition-fast),transform var(--transition-fast)}
.modal-close-x:hover{background:var(--border);color:var(--text)}
.modal-close-x:active{transform:scale(.94)}

/* R59-3：错题本子筛选（.wrong-sub-bar / .wrong-sub-btn / .wsb-n）已随错题本一起删除。 */

/* ── 头像设置弹窗（R37 重做）── */
.avp-panel{background:var(--bg);border-radius:var(--radius);max-width:480px;width:95%;max-height:85vh;overflow-y:auto;margin:auto;position:relative;top:50%;transform:translateY(-50%);box-shadow:var(--shadow);padding:26px 22px 26px}
.avp-close{position:absolute;top:12px;right:12px;z-index:2}
.avp-hd{text-align:center;margin-bottom:16px}
.avp-hd-ic{font-size:calc(28px * var(--fs,1));line-height:1}
.avp-hd-t{font-size:calc(20px * var(--fs,1));font-weight:800;color:var(--text);margin-top:6px}
.avp-hd-s{font-size:calc(12.5px * var(--fs,1));color:var(--text-light);margin-top:4px}
.avp-preview{display:flex;flex-direction:column;align-items:center;gap:7px;margin-bottom:16px}
.avp-preview-img{width:74px;height:74px;border-radius:22px;display:block;background:var(--section-bg);padding:4px;box-sizing:border-box;box-shadow:0 0 0 3px var(--avc,var(--green));transition:box-shadow .2s,background .2s}
.avp-preview-n{font-size:calc(13px * var(--fs,1));font-weight:700;color:var(--text);background:var(--section-bg);border-radius:999px;padding:3px 12px}
.avp-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:18px}
.avp-cell{display:flex;flex-direction:column;align-items:center;gap:5px;padding:8px 4px 6px;border-radius:14px;border:2px solid transparent;background:var(--section-bg);cursor:pointer;transition:border-color .18s,background .18s,transform .12s;-webkit-tap-highlight-color:transparent;position:relative}
.avp-cell:active{transform:scale(.96)}
.avp-cell-av{width:52px;height:52px;border-radius:50%;overflow:hidden;display:block;flex:0 0 auto}
.avp-cell-av img{width:52px;height:52px;border-radius:50%;display:block}
.avp-cell-n{font-size:calc(11px * var(--fs,1));font-weight:600;color:var(--text-light);line-height:1}
.avp-cell.on{border-color:var(--avc);background:var(--section-bg);background:color-mix(in srgb,var(--avc) 12%,var(--section-bg))}
.avp-cell.on .avp-cell-n{color:var(--text);font-weight:700}
.avp-cell.on::after{content:"";position:absolute;top:5px;right:5px;width:16px;height:16px;border-radius:50%;background:var(--avc);box-shadow:0 0 0 2px var(--bg);background-image:linear-gradient(45deg,transparent 46%,#fff 46%,#fff 54%,transparent 54%),linear-gradient(-45deg,transparent 46%,#fff 46%,#fff 54%,transparent 54%);background-size:9px 9px,9px 9px;background-position:5px 3px,3px 4px;background-repeat:no-repeat}
.avp-field{margin-bottom:14px}
.avp-label{font-size:calc(13px * var(--fs,1));font-weight:600;color:var(--text-light);display:block;margin-bottom:6px}
.avp-inputwrap{position:relative}
.avp-inputwrap input{width:100%;box-sizing:border-box;padding:12px 52px 12px 16px;border-radius:var(--radius-sm);border:2px solid var(--border);background:var(--bg);font-size:calc(15px * var(--fs,1));font-family:var(--font);color:var(--text);outline:none;transition:border-color .18s}
.avp-inputwrap input:focus{border-color:var(--green)}
.avp-count{position:absolute;right:14px;top:50%;transform:translateY(-50%);font-size:calc(11px * var(--fs,1));color:var(--text-lighter);font-variant-numeric:tabular-nums;pointer-events:none}
.avp-err{color:var(--red);font-size:calc(13px * var(--fs,1));margin-bottom:12px}

/* ── 第 43 轮：「我的」分类列表按学习日折叠分组 ──
   日期标题点开/收起，组内单词竖排、一行一个（不再是两列宫格）。 */
#collection-grid.col-grouped{display:block}
.dcol-group{background:var(--card);border-radius:var(--radius-sm);box-shadow:0 2px 8px rgba(0,0,0,0.06);border:1px solid var(--border);margin-bottom:10px;overflow:hidden}
.dcol-hd{display:flex;align-items:center;gap:8px;padding:12px 14px;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background var(--transition-fast)}
.dcol-hd:hover{background:var(--hover-bg)}
.dcol-caret{display:inline-flex;align-items:center;justify-content:center;width:1.05em;height:1.05em;flex-shrink:0;color:var(--text-lighter);transition:transform .2s}
.dcol-caret svg{width:100%;height:100%;display:block}
.dcol-group.open .dcol-caret{transform:rotate(90deg)}
.dcol-label{font-size:calc(14px * var(--fs,1));font-weight:700;color:var(--text)}
.dcol-n{margin-left:auto;min-width:20px;height:20px;padding:0 7px;border-radius:10px;background:var(--section-bg);color:var(--text-light);font-size:calc(11px * var(--fs,1));font-weight:700;display:inline-flex;align-items:center;justify-content:center}
.dcol-body{display:none}
.dcol-group.open .dcol-body{display:block;border-top:1px solid var(--border)}
.dcol-body .word-card{width:100%;text-align:left;border:0;border-bottom:1px solid var(--border);border-radius:0;box-shadow:none;padding:12px 14px;margin:0;transform:none}
.dcol-body .word-card:last-child{border-bottom:0}
.dcol-body .word-card:hover{background:var(--hover-bg);border-color:transparent;border-bottom-color:var(--border);box-shadow:none;transform:none}
.dcol-body .word-card:active{transform:none}
.dcol-body .word-card>div:last-child{justify-content:flex-start!important}
/* 暗色主题：沿用主题玻璃底，但组内文字必须提亮（暗底压暗字会看不见） */
body.theme-dark .dcol-group,body.theme-darkglass .dcol-group{background:rgba(15,22,40,0.35);border-color:rgba(255,255,255,0.14);box-shadow:none}
body.theme-dark .dcol-label,body.theme-darkglass .dcol-label{color:#e8e8e8}
body.theme-dark .dcol-n,body.theme-darkglass .dcol-n{background:rgba(255,255,255,0.12);color:#c8d0dc}
body.theme-dark .dcol-hd:hover,body.theme-darkglass .dcol-hd:hover{background:rgba(255,255,255,0.06)}
body.theme-dark .dcol-group.open .dcol-body,body.theme-darkglass .dcol-group.open .dcol-body{border-top-color:rgba(255,255,255,0.12)}
body.theme-dark .dcol-body .word-card,body.theme-darkglass .dcol-body .word-card{border-bottom-color:rgba(255,255,255,0.1)}
body.theme-dark .dcol-body .word-card:hover,body.theme-darkglass .dcol-body .word-card:hover{background:rgba(255,255,255,0.06);border-bottom-color:rgba(255,255,255,0.1)}
body.theme-dark .dcol-body .word-card .wc-word,body.theme-darkglass .dcol-body .word-card .wc-word{color:#e8e8e8}
body.theme-dark .dcol-body .word-card .wc-pos,body.theme-darkglass .dcol-body .word-card .wc-pos{color:#8b95a5}
body.theme-dark .dcol-body .word-card .wc-chinese,body.theme-darkglass .dcol-body .word-card .wc-chinese{color:#c8d0dc}

/* ═══════════════════════════════════════════════════════════
   R44 · 词汇量测试（首次进入主页的测试）
   浅色 / 暗色一律走令牌槽位（--bg/--card/--text/--text-light/--border/
   --section-bg/--hover-bg/--green），字号全部挂 --fs 令牌。
   层级 9490：低于 #dp-questionnaire(9500)（测试完接着弹那张问卷），
   高于每日学习页(9300)。
   ═══════════════════════════════════════════════════════════ */
.vt-overlay{position:fixed;inset:0;z-index:9490;background:var(--bg);display:none;flex-direction:column;overflow:hidden}
.vt-overlay.active{display:flex}
.vt-shell{flex:1;display:flex;flex-direction:column;width:100%;max-width:520px;margin:0 auto;padding:30px 20px 24px;overflow-y:auto}
.vt-head{margin-bottom:16px}
.vt-head-t{font-size:calc(22px * var(--fs,1));font-weight:800;color:var(--text);line-height:1.35}
.vt-head-d{font-size:calc(13.5px * var(--fs,1));color:var(--text-light);line-height:1.7;margin-top:8px}
.vt-tips{display:flex;flex-direction:column;gap:10px}
.vt-tip{position:relative;padding:11px 14px 11px 30px;background:var(--card);border:1px solid var(--border);border-radius:var(--radius-sm);font-size:calc(13px * var(--fs,1));line-height:1.7;color:var(--text)}
.vt-tip::before{content:'';position:absolute;left:14px;top:19px;width:5px;height:5px;border-radius:50%;background:var(--green)}
.vt-tip b{font-weight:800;color:var(--text)}
.vt-actions{margin-top:auto;padding-top:24px;display:flex;flex-direction:column;gap:10px}
.vt-btn{display:block;width:100%;padding:14px 18px;border-radius:12px;border:1px solid transparent;font-family:inherit;font-size:calc(15px * var(--fs,1));font-weight:700;cursor:pointer;transition:background .2s ease,border-color .2s ease,color .2s ease}
.vt-btn.primary{background:var(--green);color:#fff;box-shadow:0 4px 14px rgba(var(--green-rgb),0.28)}
.vt-btn.ghost{background:transparent;border-color:var(--border);color:var(--text-light)}
.vt-btn.ghost:hover{background:var(--hover-bg);color:var(--text)}
/* 答题页 */
.vt-top{padding-top:4px}
.vt-bar{height:6px;border-radius:3px;background:var(--border);overflow:hidden}
.vt-bar-fill{height:100%;background:var(--green);border-radius:3px;transition:width .25s ease}
.vt-step{margin-top:9px;font-size:calc(12.5px * var(--fs,1));color:var(--text-light);text-align:center;letter-spacing:.02em}
.vt-card{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px 0 12px}
.vt-word{font-size:calc(38px * var(--fs,1));font-weight:800;color:var(--text);line-height:1.25;word-break:break-word;text-align:center}
.vt-hint{margin-top:12px;font-size:calc(13px * var(--fs,1));color:var(--text-light)}
.vt-choices{display:flex;gap:12px;width:100%;margin-top:34px}
.vt-choice{flex:1;padding:16px 10px;border-radius:12px;border:1px solid var(--border);background:var(--card);color:var(--text);font-family:inherit;font-size:calc(15px * var(--fs,1));font-weight:700;cursor:pointer;transition:background .18s ease,border-color .18s ease,color .18s ease}
.vt-choice.no:hover{background:var(--hover-bg);border-color:var(--text-light)}
.vt-choice.ok:hover{background:var(--hover-bg);border-color:var(--green)}
/* 结果页 */
.vt-res{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:22px 18px;text-align:center}
.vt-res-num{font-size:calc(40px * var(--fs,1));font-weight:800;color:var(--green-dark);line-height:1.1;letter-spacing:-.01em}
.vt-res-unit{font-size:calc(12.5px * var(--fs,1));color:var(--text-light);margin-top:6px}
.vt-res-stage{margin-top:12px;font-size:calc(14px * var(--fs,1));font-weight:700;color:var(--text)}
.vt-note{margin-top:12px;padding:12px 14px;border-radius:var(--radius-sm);background:var(--section-bg);border:1px solid var(--border);font-size:calc(12.5px * var(--fs,1));line-height:1.7;color:var(--text-light)}
.vt-note b{font-weight:800;color:var(--text)}
.vt-reco{margin-top:12px;padding:14px 16px;border-radius:var(--radius-sm);background:var(--section-bg);border:1px solid var(--border);border-left:3px solid var(--green)}
.vt-reco-t{font-size:calc(14.5px * var(--fs,1));font-weight:800;color:var(--text)}
.vt-reco-d{margin-top:7px;font-size:calc(12.5px * var(--fs,1));line-height:1.75;color:var(--text-light)}
/* 暗色主题：实心主色底 + 白字在万圣黑/墨琉璃下只有 1.7:1，
   按 dark-fix §5 的 tonal 写法改成「淡主色底 + 主色字」。 */
body.theme-dark .vt-btn.primary,
body.theme-darkglass .vt-btn.primary{background:color-mix(in srgb,var(--green) 20%,var(--card));color:var(--green);border-color:color-mix(in srgb,var(--green) 45%,var(--border));box-shadow:none}

/* 暗色主题：base.css 的 `body.theme-dark *{color:inherit}`（(0,1,1)）会盖掉新组件的
   `.vt-*{color:...}`（(0,1,0)）→ 数字/小字全变成继承色。这里用 (0,2,1) 的选择器点回来
   （写法与 R43 的 `.dcol-*` 一致，别加 !important）。 */
body.theme-dark .vt-overlay,body.theme-darkglass .vt-overlay,
body.theme-dark .vt-shell,body.theme-darkglass .vt-shell,
body.theme-dark .vt-head-t,body.theme-darkglass .vt-head-t,
body.theme-dark .vt-tip,body.theme-darkglass .vt-tip,
body.theme-dark .vt-tip b,body.theme-darkglass .vt-tip b,
body.theme-dark .vt-choice,body.theme-darkglass .vt-choice,
body.theme-dark .vt-word,body.theme-darkglass .vt-word,
body.theme-dark .vt-res-stage,body.theme-darkglass .vt-res-stage,
body.theme-dark .vt-note b,body.theme-darkglass .vt-note b,
body.theme-dark .vt-reco-t,body.theme-darkglass .vt-reco-t{color:var(--text)}
body.theme-dark .vt-head-d,body.theme-darkglass .vt-head-d,
body.theme-dark .vt-step,body.theme-darkglass .vt-step,
body.theme-dark .vt-hint,body.theme-darkglass .vt-hint,
body.theme-dark .vt-res-unit,body.theme-darkglass .vt-res-unit,
body.theme-dark .vt-note,body.theme-darkglass .vt-note,
body.theme-dark .vt-reco-d,body.theme-darkglass .vt-reco-d,
body.theme-dark .vt-btn.ghost,body.theme-darkglass .vt-btn.ghost{color:var(--text-light)}
body.theme-dark .vt-res-num,body.theme-darkglass .vt-res-num{color:var(--green)}