/* 雷达图 + 打字机 + 暗色主题 + 移动端优化 */

/* ===== 雷达图 ===== */
.rd-svg { display: block; margin: 0 auto; }
.rd-bars { max-width: 520px; margin: 18px auto 0; }
.rd-bar { display: flex; align-items: center; gap: 10px; margin: 7px 0; font-size: 13px; }
.rd-bar-name { flex: 0 0 48px; color: #4b5563; }
.rd-bar-track { flex: 1; height: 8px; background: #eef0f2; border-radius: 5px; overflow: hidden; }
.rd-bar-track i { display: block; height: 100%; background: linear-gradient(90deg,#4c8bf5,#2563eb); transition: width .4s; }
.rd-bar-num { flex: 0 0 32px; text-align: right; font-weight: 600; color: #2563eb; }
.rd-tip { max-width: 520px; margin: 16px auto 0; font-size: 13px; color: #6b7280; text-align: center; line-height: 1.6; }

/* ===== 打字机 ===== */
.ty-meaning { text-align: center; font-size: 18px; color: #1f2937; line-height: 1.5; margin: 16px 0 6px; }
.ty-phonetic { text-align: center; font-size: 14px; color: #6b7280; }
.ty-wordlen { text-align: center; font-size: 12px; color: #9ca3af; margin: 6px 0 18px; }
.ty-row { display: flex; gap: 8px; max-width: 480px; margin: 0 auto; }
.ty-input { flex: 1; padding: 12px 14px; font-size: 17px; letter-spacing: 1px; border: 2px solid #d7dbe0; border-radius: 10px; outline: none; box-sizing: border-box; }
.ty-input:focus { border-color: #4c8bf5; }
.ty-input.ok { border-color: #16a34a; background: #f0fdf4; }
.ty-input.bad { border-color: #dc2626; background: #fef2f2; }

/* ===== 顶栏主题按钮 ===== */
.theme-btn { margin-left: auto; padding: 6px 12px; font-size: 16px; background: rgba(255,255,255,.18); color: #fff; border: none; border-radius: 8px; cursor: pointer; transition: background .15s; }
.theme-btn:hover { background: rgba(255,255,255,.32); }

/* ===== 暗色主题 ===== */
[data-theme="dark"] { --radar-grid: #374151; --radar-text: #cbd5e1; }
[data-theme="dark"] body { background: #0f172a; color: #e2e8f0; }
[data-theme="dark"] .app,
[data-theme="dark"] .topbar { background: #1e293b; }
[data-theme="dark"] .view { background: #0f172a; }
[data-theme="dark"] .view-head h2,
[data-theme="dark"] .ex-h,
[data-theme="dark"] .tv-group-title,
[data-theme="dark"] .sp-h,
[data-theme="dark"] .wu-h,
[data-theme="dark"] .tv-desc { color: #e2e8f0; }
[data-theme="dark"] .hint,
[data-theme="dark"] .rd-tip,
[data-theme="dark"] .plan-today { color: #94a3b8; }
[data-theme="dark"] .flip-face,
[data-theme="dark"] .tr-panel,
[data-theme="dark"] .ex-panel,
[data-theme="dark"] .vq-panel,
[data-theme="dark"] .nb-panel,
[data-theme="dark"] .wb-list li,
[data-theme="dark"] .grammar-item,
[data-theme="dark"] .phrase-item,
[data-theme="dark"] .progress-card,
[data-theme="dark"] .goal-card,
[data-theme="dark"] .tv-card,
[data-theme="dark"] .wu-frame,
[data-theme="dark"] .wu-t2-card,
[data-theme="dark"] .wu-band,
[data-theme="dark"] .sp-card,
[data-theme="dark"] .sp-chain,
[data-theme="dark"] .sp-pron-card,
[data-theme="dark"] .rd-q,
[data-theme="dark"] .plan-item,
[data-theme="dark"] .mb-item,
[data-theme="dark"] .star-item,
[data-theme="dark"] .diag-item { background: #1e293b; border-color: #334155; color: #e2e8f0; }
[data-theme="dark"] .rd-passage,
[data-theme="dark"] .lx-note,
[data-theme="dark"] .wo-prompt,
[data-theme="dark"] .wu-lib { background: #0f172a; border-color: #334155; color: #cbd5e1; }
[data-theme="dark"] .word,
[data-theme="dark"] .tv-word,
[data-theme="dark"] .sp-card-topic,
[data-theme="dark"] .rd-q-text,
[data-theme="dark"] .ty-meaning,
[data-theme="dark"] .mb-q,
[data-theme="dark"] .plan-text,
[data-theme="dark"] .rec-cue { color: #e2e8f0; }
[data-theme="dark"] .meaning,
[data-theme="dark"] .tv-cn,
[data-theme="dark"] .rd-ex,
[data-theme="dark"] .sp-points li { color: #cbd5e1; }
[data-theme="dark"] .rd-opt,
[data-theme="dark"] .syn-option,
[data-theme="dark"] .vq-option,
[data-theme="dark"] .quiz-option,
[data-theme="dark"] .rd-opt.disabled { background: #1e293b; border-color: #334155; color: #e2e8f0; }
[data-theme="dark"] .wo-input,
[data-theme="dark"] .lx-blank,
[data-theme="dark"] .ty-input,
[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea { background: #0f172a; border-color: #334155; color: #e2e8f0; }
[data-theme="dark"] .tab { color: #cbd5e1; }
[data-theme="dark"] .tab.active { color: #fff; }
[data-theme="dark"] .goal-track,
[data-theme="dark"] .rd-bar-track,
[data-theme="dark"] .plan-track { background: #334155; }
[data-theme="dark"] .chip { background: #1e293b; color: #cbd5e1; border-color: #334155; }
[data-theme="dark"] .chip.active { background: #4c8bf5; color: #fff; }

/* ===== 移动端优化 ===== */
@media (max-width: 640px) {
  .tabs { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
  .tab { flex: 0 0 auto; font-size: 13px; padding: 8px 12px; }
  .view { padding: 14px 12px 60px; }
  .ex-panel, .tr-panel, .vq-panel, .nb-panel { padding: 14px; border-radius: 12px; }
  .rd-passage { max-height: 260px; font-size: 14px; }
  .score-main { flex-direction: column; align-items: stretch; }
  .rec-timer { font-size: 36px; }
  .wo-input { min-height: 200px; }
  .tv-grid, .sp-cards, .sp-chains, .sp-pron, .wu-frames, .wu-t2, .wu-bands { grid-template-columns: 1fr; }
  .syn-options, .tr-options { grid-template-columns: 1fr; }
  .brand { font-size: 15px; }
}

/* ========== root-affix module ========== */
.ra-toolbar { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:16px; }
.ra-tabs { display:flex; gap:6px; }
.ra-tab { padding:7px 18px; font-size:14px; border:1.5px solid #d7dbe0; background:#fff; border-radius:9px; cursor:pointer; color:#475569; transition:all .15s; }
.ra-tab:hover { border-color:#4c8bf5; }
.ra-tab.active { background:#2563eb; border-color:#2563eb; color:#fff; font-weight:600; }
.ra-modes { display:flex; gap:8px; }
.ra-group { padding:16px 18px; background:#fff; border:1px solid #e6e8eb; border-radius:14px; margin-bottom:14px; }
.ra-head { display:flex; align-items:baseline; gap:12px; margin-bottom:12px; padding-bottom:10px; border-bottom:1px solid #f0f2f5; }
.ra-affix { font-size:18px; font-weight:800; color:#2563eb; font-family:ui-monospace,Consolas,monospace; }
.ra-meaning { font-size:13.5px; color:#6b7280; }
.ra-words { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:10px; }
@media (max-width:640px){ .ra-words { grid-template-columns:1fr; } }
.ra-word { min-width:0; padding:10px 12px; background:#fbfcfd; border:1px solid #eef0f2; border-radius:10px; cursor:pointer; transition:all .15s; }
.ra-word:hover { border-color:#93c5fd; background:#f0f9ff; }
.ra-word-top { display:flex; align-items:baseline; justify-content:space-between; gap:8px; margin-bottom:4px; min-width:0; }
.ra-word-top b { font-size:15px; color:#1f2937; min-width:0; overflow-wrap:anywhere; }
.ra-pos { font-size:12px; color:#6b7280; }
.ra-ex { font-size:12.5px; color:#9ca3af; line-height:1.5; overflow-wrap:anywhere; word-break:break-word; }
.ra-q { padding:18px; background:#fbfcfd; border-radius:12px; }
.ra-q-title { font-size:15px; color:#1f2937; margin-bottom:14px; line-height:1.6; }
.ra-q-title b { color:#2563eb; font-family:ui-monospace,Consolas,monospace; font-size:17px; }
.ra-opts { display:flex; flex-direction:column; gap:9px; }
.ra-opt { text-align:left; padding:11px 16px; font-size:14px; border:1.5px solid #d7dbe0; background:#fff; border-radius:9px; cursor:pointer; transition:all .15s; color:#374151; }
.ra-opt:hover:not(:disabled) { border-color:#4c8bf5; }
.ra-opt.ok { border-color:#16a34a; background:#f0fdf4; color:#166534; font-weight:600; }
.ra-opt.bad { border-color:#dc2626; background:#fef2f2; color:#b91c1c; }
.ra-fb { margin-top:12px; font-size:13.5px; min-height:20px; }
[data-theme="dark"] .ra-group { background:#1e293b; border-color:#334155; }
[data-theme="dark"] .ra-word { background:#0f172a; border-color:#334155; }
[data-theme="dark"] .ra-word-top b { color:#e2e8f0; }
[data-theme="dark"] .ra-head { border-bottom-color:#334155; }
[data-theme="dark"] .ra-q { background:#0f172a; }
[data-theme="dark"] .ra-q-title { color:#e2e8f0; }
[data-theme="dark"] .ra-opt { background:#1e293b; border-color:#334155; color:#cbd5e1; }
[data-theme="dark"] .ra-tab { background:#1e293b; border-color:#334155; color:#cbd5e1; }