/* ===== 基础 ===== */
:root {
  --primary: #6366f1;
  --primary-dark: #4f46e5;
  --primary-light: #eef2ff;
  --teal: #0ea5e9;
  --green: #10b981;
  --green-light: #ecfdf5;
  --amber: #f59e0b;
  --amber-light: #fffbeb;
  --rose: #f43f5e;
  --rose-light: #fff1f2;
  --ink: #1e293b;
  --ink-2: #475569;
  --ink-3: #94a3b8;
  --bg: #f5f6fb;
  --card: #ffffff;
  --radius: 18px;
  --shadow: 0 2px 10px rgba(30, 41, 59, 0.06), 0 8px 28px rgba(99, 102, 241, 0.06);
  --shadow-lg: 0 8px 30px rgba(30, 41, 59, 0.12);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  background: var(--bg);
  color: var(--ink);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

#app { max-width: 760px; margin: 0 auto; padding-bottom: 88px; }

/* ===== 顶部 ===== */
.app-header {
  position: sticky; top: 0; z-index: 50;
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 55%, #a855f7 100%);
  color: #fff;
  padding: 16px 20px calc(16px + env(safe-area-inset-top));
  border-radius: 0 0 26px 26px;
  box-shadow: 0 6px 24px rgba(99, 102, 241, 0.35);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand-logo {
  width: 44px; height: 48px; flex: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px;
}
.brand-logo img { width: 100%; height: 100%; object-fit: contain; }
.brand-logo svg, .auth-logo svg { width: 76%; height: 76%; }
.brand-title { font-size: 19px; font-weight: 800; letter-spacing: .5px; }
.brand-sub { font-size: 12px; opacity: .85; margin-top: 2px; }
.icon-btn {
  border: none; cursor: pointer;
  width: 42px; height: 42px; border-radius: 12px;
  background: rgba(255,255,255,.18); color: #fff;
  font-size: 19px; display: flex; align-items: center; justify-content: center;
  transition: transform .15s;
}
.icon-btn:active { transform: scale(.9); }

/* ===== 视图 ===== */
.view { padding: 18px 16px; }

/* ===== A-Z 首字母索引栏（通讯录式，固定在视口右侧）===== */
/* 有字母栏时由 JS 给 .view 加 .has-az，右侧腾出空间，避免字母条压住词卡 */
.view.has-az { padding-right: 48px; }
.az-rail {
  position: fixed; right: 4px; top: 50%; transform: translateY(-50%);
  z-index: 40; display: flex; flex-direction: column; align-items: center;
  padding: 8px 3px; gap: 4px;
  background: rgba(255,255,255,.88); backdrop-filter: blur(8px);
  border: 1px solid #eef0f6; border-radius: 14px;
  box-shadow: 0 2px 10px rgba(15,23,42,.06);
  max-height: calc(100vh - 200px); overflow-y: auto; overscroll-behavior: contain;
}
.az-letters { display: flex; flex-direction: column; align-items: center; }
.az-btn, .az-all {
  border: none; background: transparent; cursor: pointer;
  width: 24px; height: 19px; line-height: 19px; padding: 0;
  border-radius: 6px; color: var(--primary-dark);
  font-size: 12px; font-weight: 700; text-align: center;
  transition: background .12s, color .12s;
}
.az-btn:hover, .az-all:hover { background: var(--primary-light); }
.az-btn.active, .az-all.active { background: var(--primary); color: #fff; }
/* 当前筛选下没有词的字母：置灰且不可点，避免用户点了却空结果 */
.az-btn.empty { color: #cbd5e1; cursor: default; }
.az-btn.empty:hover { background: transparent; }
.az-all {
  height: 22px; line-height: 22px; font-size: 10.5px; margin-bottom: 3px;
  color: var(--ink-3); border-bottom: 1px solid #eef0f6; border-radius: 0;
}
/* 「其他」分组：收纳数字/符号开头的词（3D printer…），用分隔线与 26 字母区隔 */
.az-sep { width: 18px; height: 1px; background: #eef0f6; margin: 4px 0 2px; }
.az-other { font-size: 10.5px; font-weight: 600; color: var(--ink-3); }
.az-other:hover { color: var(--primary-dark); }

/* 结果区「仅看 X ✕」标签：明确当前首字母筛选并可一键取消 */
.az-chip {
  border: 1px solid var(--primary-light); background: var(--primary-light);
  color: var(--primary-dark); border-radius: 99px; cursor: pointer;
  padding: 2px 10px; font-size: 12px; font-weight: 600;
}
@media (max-width: 639px) {
  .view.has-az { padding-right: 32px; }
  .az-rail { right: 1px; padding: 6px 2px; border-radius: 10px; max-height: calc(100vh - 170px); }
  .az-btn, .az-all { width: 20px; height: 17px; line-height: 17px; font-size: 11px; }
  .az-all { height: 20px; line-height: 20px; }
}

/* 通用卡片 */
.card {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px;
  margin-bottom: 16px;
}
.card-title {
  font-size: 15px; font-weight: 700; color: var(--ink);
  display: flex; align-items: center; gap: 8px; margin-bottom: 12px;
}
.card-title .emoji { font-size: 17px; }
.muted { color: var(--ink-3); font-size: 12.5px; }
.mt-12 { margin-top: 12px; }

/* ===== 搜索页 ===== */
.search-box {
  position: relative;
  background: #fff;
  border-radius: 16px;
  box-shadow: var(--shadow);
  display: flex; align-items: center;
  padding: 4px 6px 4px 16px;
  margin-bottom: 14px;
  border: 2px solid transparent;
  transition: border-color .2s;
}
.search-box:focus-within { border-color: var(--primary); }
.search-box input {
  flex: 1; border: none; outline: none;
  font-size: 16px; padding: 10px 4px; background: transparent;
}
.search-box .search-ico { color: var(--ink-3); font-size: 18px; margin-right: 6px; }
.search-box button {
  border: none; cursor: pointer;
  background: linear-gradient(135deg, var(--primary), #8b5cf6);
  color: #fff; font-size: 14px; font-weight: 600;
  padding: 10px 18px; border-radius: 12px;
}

.filters { display: flex; flex-wrap: wrap; gap: 8px 0; margin-bottom: 14px; }
.filter-group { display: flex; align-items: center; gap: 6px; padding-right: 14px; }
.filter-group + .filter-group { border-left: 1px solid #e2e8f0; padding-left: 14px; }
.filter-label { font-size: 12px; color: var(--ink-3); font-weight: 600; white-space: nowrap; }
.filter-group .chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  border: 1.5px solid #e2e8f0; background: #fff; color: var(--ink-2);
  padding: 6px 14px; border-radius: 999px; font-size: 13px; cursor: pointer;
  transition: all .15s; user-select: none;
}
.chip.active {
  background: var(--primary-light); border-color: var(--primary); color: var(--primary-dark);
  font-weight: 600;
}

/* ===== WAP 端折叠筛选器（三个按钮并列一行，点击弹出选择层）===== */
.filters-mobile { display: none; }

@media (max-width: 639px) {
  .filters-desktop { display: none; }
  .filters-mobile { display: flex; gap: 8px; margin-bottom: 14px; }
  .fm-btn {
    flex: 1 1 0; min-width: 0; cursor: pointer; text-align: left;
    display: flex; flex-direction: column; gap: 2px;
    background: #fff; border: 1.5px solid #e2e8f0; border-radius: 12px;
    padding: 7px 9px; transition: all .15s;
  }
  .fm-btn.on { border-color: var(--primary); background: var(--primary-light); }
  .fm-k { font-size: 10.5px; color: var(--ink-3); font-weight: 600; }
  .fm-btn.on .fm-k { color: var(--primary-dark); }
  .fm-v {
    display: flex; align-items: center; gap: 3px; max-width: 100%;
    font-size: 12.5px; font-weight: 700; color: var(--ink-2);
  }
  .fm-v > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .fm-v .caret { font-size: 9px; color: var(--ink-3); flex: none; transition: transform .15s; }
  .fm-btn.on .fm-v { color: var(--primary-dark); }
  .fm-btn.is-open .caret { transform: rotate(180deg); }
}

/* ===== 用户协议 / 版权声明页 ===== */
.terms-wrap { max-width: 720px; margin: 0 auto; }
.terms-body { font-size: 14px; line-height: 1.75; color: var(--ink-2); }
.terms-body h3 { font-size: 15px; font-weight: 800; color: var(--ink); margin: 18px 0 8px; }
.terms-body h3:first-child { margin-top: 0; }
.terms-meta { font-size: 13px; color: var(--ink-2); margin: 0 0 8px; padding-bottom: 8px; border-bottom: 1px dashed var(--line); }
.agree-row { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin: 14px 2px 4px; font-size: 13px; color: var(--ink-2); }
.agree-check { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.agree-check input { width: 16px; height: 16px; flex: 0 0 auto; }
.agree-row.agree-warn { outline: 2px solid #e23b3b; outline-offset: 2px; border-radius: 8px; padding: 4px 6px; }
.terms-body p { margin: 0 0 10px; }
.terms-body ol { margin: 0 0 10px; padding-left: 22px; }
.terms-body li { margin-bottom: 5px; }
.terms-body b { color: var(--ink); }
.terms-key {
  background: var(--primary-light); color: var(--primary-dark);
  border-left: 3px solid var(--primary);
  padding: 10px 12px; border-radius: 8px;
}
.terms-foot { margin-top: 16px; font-size: 12.5px; color: var(--ink-3); text-align: right; }

/* 筛选面板：紧贴按钮行下方展开（视线连续，无需上下挪动）*/
.fm-inline {
  margin: -6px 0 14px;
  padding: 10px 12px;
  background: #fff;
  border: 1.5px solid #e0e7ff;
  border-radius: 14px;
  box-shadow: 0 6px 18px rgba(99, 102, 241, .1);
  animation: fm-drop .18s ease;
}
.fm-inline-body { display: flex; flex-wrap: wrap; gap: 8px; }
.fm-opt {
  border: 1.5px solid #e2e8f0; background: #fff; color: var(--ink-2);
  padding: 8px 15px; border-radius: 999px; font-size: 13.5px; cursor: pointer; transition: all .15s;
}
.fm-opt.active { background: var(--primary-light); border-color: var(--primary); color: var(--primary-dark); font-weight: 700; }
@keyframes fm-drop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* 重置按钮：一键恢复默认（仅在存在生效筛选时出现）*/
.fm-reset {
  flex: none; align-self: stretch; min-width: 44px; padding: 0 7px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  background: #fff; border: 1.5px dashed #cbd5e1; border-radius: 12px;
  color: var(--ink-2); font-size: 10px; font-weight: 600; cursor: pointer; transition: all .15s;
}
.fm-reset .ico { font-size: 13px; line-height: 1; }
.fm-reset:active { background: #f1f5f9; }

.stats-row {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 16px;
}
.stat-box {
  background: #fff; border-radius: 16px; padding: 12px; text-align: center;
  box-shadow: var(--shadow);
}
.stat-box .num { font-size: 22px; font-weight: 800; color: var(--primary-dark); }
.stat-box .lbl { font-size: 11.5px; color: var(--ink-3); margin-top: 2px; }

/* 单词卡片列表 */
.word-list { display: flex; flex-direction: column; gap: 12px; }
.word-card {
  background: #fff; border-radius: 16px; box-shadow: var(--shadow);
  padding: 14px 16px; cursor: pointer;
  display: flex; align-items: center; gap: 14px;
  transition: transform .15s;
  border: 2px solid transparent;
}
.word-card:active { transform: scale(.985); }
.word-card .main { flex: 1; min-width: 0; }
.word-card .w-word { font-size: 19px; font-weight: 800; }
.word-card .w-meta { font-size: 12.5px; color: var(--ink-3); margin-top: 3px; }
.syllable-pill {
  display: inline-block; background: var(--primary-light); color: var(--primary-dark);
  font-size: 12px; font-weight: 700; border-radius: 8px; padding: 3px 8px; margin-right: 6px;
}
.word-card .w-meaning {
  font-size: 14px; color: var(--ink-2); text-align: right; max-width: 42%;
}
.badge {
  display: inline-block; font-size: 11px; font-weight: 600;
  border-radius: 8px; padding: 2px 8px; margin-left: 6px;
}
.badge.stage-小学 { background: var(--amber-light); color: #b45309; }
.badge.stage-初中 { background: var(--green-light); color: #047857; }
.badge.diff { background: var(--rose-light); color: var(--rose); }
.badge.syl-type { background: #ede9fe; color: #6d28d9; }

.list-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.list-head .result-info { font-size: 13px; color: var(--ink-3); }
.pager { display: flex; justify-content: center; align-items: center; gap: 14px; margin-top: 16px; }
.pager button {
  border: none; cursor: pointer; background: #fff; color: var(--primary-dark);
  font-weight: 700; padding: 9px 18px; border-radius: 12px; box-shadow: var(--shadow);
}
.pager button:disabled { opacity: .4; cursor: not-allowed; }
.pager span { font-size: 13px; color: var(--ink-2); }

/* 单词配图 */
.w-thumb {
  width: 52px; height: 52px; border-radius: 14px; object-fit: cover;
  background: var(--primary-light); flex-shrink: 0;
  border: 1px solid #eef2f7;
}
.w-thumb.no-img {
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; color: var(--ink-3); background: #f1f5f9;
}
.word-card.no-thumb .w-thumb { display: none; }

/* 详情页配图 */
.word-image-card { padding: 16px; }
.word-image-card .w-big-img {
  width: 100%; max-height: 260px; object-fit: contain; border-radius: 14px;
  background: #f8fafc; display: block;
}
.w-img-placeholder {
  height: 160px; border-radius: 14px; background: #f1f5f9;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; font-size: 34px; color: var(--ink-3);
}
.word-image-card.img-error .w-big-img { display: none; }
.word-image-card.img-error .w-img-placeholder { display: flex; }
.word-image-card .wd-img-actions { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.img-btn {
  border: 1px solid #e2e8f0; background: #fff; cursor: pointer;
  color: var(--primary-dark); font-weight: 600; font-size: 13px;
  padding: 7px 14px; border-radius: 10px; transition: background .15s;
}
.img-btn:hover { background: var(--primary-light); }
.img-btn.danger { color: var(--rose); }

/* 自动配图进度 */
.img-fetch-bar { display: flex; align-items: center; gap: 14px; margin-top: 10px; flex-wrap: wrap; }
.img-fetch-progress { margin-top: 12px; }
.img-progress-text { font-size: 13px; color: var(--ink-2); margin-bottom: 6px; }
.img-progress-track {
  height: 8px; border-radius: 99px; background: #eef2f7; overflow: hidden;
}
.img-progress-fill {
  height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, var(--primary), #8b5cf6);
  transition: width .3s;
}
.err-text { color: var(--rose); font-size: 13px; }

/* 练习页看图拼写 */
.q-img {
  max-height: 150px; max-width: 100%; border-radius: 12px;
  object-fit: contain; margin-bottom: 12px; background: #f8fafc; display: block;
}

.empty-tip {
  text-align: center; padding: 44px 20px; color: var(--ink-3);
}
.empty-tip .big { font-size: 46px; margin-bottom: 10px; }

/* ===== 单词详情 ===== */
.word-detail-top { text-align: center; padding: 8px 4px 4px; }
.wd-word { font-size: 44px; font-weight: 800; letter-spacing: 1px; }
.wd-phonetic { font-size: 17px; color: var(--primary-dark); margin-top: 6px; }
.wd-tags { margin-top: 10px; display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; }

.wd-audio-row { display: flex; justify-content: center; gap: 10px; margin-top: 16px; }
.audio-btn {
  border: none; cursor: pointer;
  display: flex; align-items: center; gap: 8px;
  background: linear-gradient(135deg, var(--primary), #8b5cf6);
  color: #fff; font-size: 14px; font-weight: 700;
  padding: 12px 22px; border-radius: 999px;
  box-shadow: 0 6px 16px rgba(99,102,241,.35);
  transition: transform .15s;
}
.audio-btn.slow { background: linear-gradient(135deg, #0ea5e9, #06b6d4); box-shadow: 0 6px 16px rgba(14,165,233,.35); }
.audio-btn.syllable { background: linear-gradient(135deg, #f59e0b, #f97316); box-shadow: 0 6px 16px rgba(245,158,11,.35); }
.audio-btn:active { transform: scale(.94); }

.syllable-view { display: flex; justify-content: center; align-items: stretch; gap: 8px; margin: 18px 0 6px; flex-wrap: wrap; }
.syl-block {
  background: var(--primary-light); border-radius: 12px;
  padding: 10px 14px; text-align: center; min-width: 108px; max-width: 210px;
}
/* 音节块内的发音规则（来自规则库）：字母组合 → 音素 + 例词 */
.syl-rule { margin-top: 8px; padding-top: 8px; border-top: 1px dashed rgba(148, 163, 184, .45); }
.syl-rule-line { font-size: 12.5px; font-weight: 700; color: var(--ink); line-height: 1.45; }
.syl-rule-ex { margin-top: 3px; font-size: 11px; color: var(--ink-3); line-height: 1.5; }
.syl-rule-none { font-size: 11px; color: var(--ink-3); line-height: 1.45; }
.syl-block.stressed .syl-rule { border-top-color: rgba(245, 158, 11, .5); }
.syl-tag {
  display: inline-block; margin-left: 4px; padding: 1px 5px; border-radius: 4px;
  background: var(--rose-light); color: #be123c; font-size: 10px; font-weight: 700;
}
/* 卡片底部的音节类型定义 */
.syl-struct-box {
  margin-top: 14px; padding: 10px 12px; border-radius: 10px;
  background: #f8fafc; border: 1px solid #e2e8f0; text-align: left;
}
.syl-struct { font-size: 12.5px; color: var(--ink-2); line-height: 1.7; }
.syl-struct b { color: var(--primary-dark); }
.syl-block .syl-text { font-size: 20px; font-weight: 800; color: var(--primary-dark); }
.syl-block .syl-note { font-size: 11px; color: var(--ink-3); margin-top: 2px; }
/* 重读音节高亮：主重读（琥珀色实底）/ 次重读（浅一档 + 虚线边），让重音位置一眼可见 */
.syl-block.stressed {
  background: var(--amber-light);
  box-shadow: inset 0 0 0 2px var(--amber);
}
.syl-block.stressed .syl-text { color: #b45309; }
.syl-block.stressed .syl-note { color: #b45309; font-weight: 700; }
.syl-block.secondary {
  background: var(--amber-light);
  box-shadow: inset 0 0 0 2px #fcd34d;
}
.syl-block.secondary .syl-text { color: #a16207; }
.syl-block.secondary .syl-note { color: #a16207; font-weight: 600; }
.syl-audio {
  margin-top: 8px; border: none; cursor: pointer;
  background: linear-gradient(135deg, #f59e0b, #f97316);
  color: #fff; font-size: 12px; line-height: 1; padding: 6px 10px; border-radius: 999px;
  box-shadow: 0 3px 8px rgba(245,158,11,.35);
  transition: transform .15s;
}
.syl-audio:active { transform: scale(.92); }

.rule-list { list-style: none; }
.rule-list li {
  display: flex; gap: 10px; padding: 8px 0;
  border-bottom: 1px dashed #e2e8f0; font-size: 14px; line-height: 1.6;
}
.rule-list li:last-child { border-bottom: none; }
.rule-list .bullet { color: var(--amber); flex-shrink: 0; }

.sentence-box {
  background: var(--primary-light); border-radius: 14px; padding: 14px 16px;
  display: flex; flex-direction: column; gap: 14px;
}
.sentence-box .en { font-size: 16px; font-weight: 600; line-height: 1.6; }
.sentence-box .zh { font-size: 13.5px; color: var(--ink-2); margin-top: 6px; }
.sentence-group { display: flex; flex-direction: column; gap: 10px; }
.sentence-group + .sentence-group {
  padding-top: 12px; border-top: 1.5px dashed rgba(99,102,241,.25);
}
.sentence-group-label {
  font-size: 13px; font-weight: 800; color: var(--ink-2);
  letter-spacing: .5px;
}
.sentence-item {
  background: #fff; border-radius: 12px; padding: 10px 14px;
  box-shadow: 0 1px 3px rgba(15,23,42,.06);
}
.sentence-item .en { font-size: 15.5px; }
.sentence-item .zh { font-size: 13px; }
.q-audio-btn.sm {
  margin-top: 8px; padding: 5px 14px; font-size: 12.5px; font-weight: 700;
  background: linear-gradient(135deg, var(--teal), #06b6d4); color: #fff;
}

.wd-actions { display: flex; gap: 10px; margin-top: 4px; }
.btn {
  flex: 1; border: none; cursor: pointer;
  padding: 13px; border-radius: 14px; font-size: 15px; font-weight: 700;
}
.btn-primary { background: linear-gradient(135deg, var(--primary), #8b5cf6); color: #fff; }
.btn-outline { background: #fff; color: var(--primary-dark); border: 2px solid var(--primary); }

.back-bar { margin-bottom: 12px; }
.back-bar button {
  border: none; background: #fff; color: var(--ink-2); cursor: pointer;
  padding: 8px 14px; border-radius: 10px; font-size: 13.5px; font-weight: 600;
  box-shadow: var(--shadow); display: flex; align-items: center; gap: 6px;
}

/* ===== 练习页 ===== */
.practice-setup { text-align: center; padding-top: 6px; }
.mode-cards { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; }
.mode-card {
  background: #fff; border-radius: 16px; box-shadow: var(--shadow);
  padding: 16px; cursor: pointer; display: flex; align-items: center; gap: 14px;
  border: 2px solid transparent; text-align: left; transition: all .15s;
}
.mode-card:hover { border-color: var(--primary); }
.mode-card .m-emoji {
  width: 46px; height: 46px; border-radius: 13px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 22px;
}
.mode-card .m-name { font-size: 16px; font-weight: 700; }
.mode-card .m-desc { font-size: 12.5px; color: var(--ink-3); margin-top: 3px; line-height: 1.5; }

.practice-options { margin-top: 18px; text-align: left; }

.practice-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.practice-top .progress-info { font-size: 13px; color: var(--ink-2); font-weight: 600; }
.practice-top .quit-btn {
  border: none; background: var(--rose-light); color: var(--rose);
  padding: 7px 14px; border-radius: 10px; font-size: 13px; font-weight: 600; cursor: pointer;
}
.progress-bar {
  height: 8px; background: #e2e8f0; border-radius: 99px; overflow: hidden; margin-bottom: 16px;
}
.progress-bar .fill {
  height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, var(--primary), #8b5cf6);
  transition: width .3s ease;
}

.q-card { text-align: center; padding: 26px 18px; }
.q-hint { font-size: 13px; color: var(--ink-3); margin-bottom: 12px; }
.q-display {
  font-size: 34px; font-weight: 800; line-height: 1.3;
  word-break: break-word; margin-bottom: 8px;
}
.q-display.small { font-size: 22px; }
.q-display.q-phonetic { margin-top: 2px; color: var(--ink-2); font-weight: 600; }
.q-sub { font-size: 13px; color: var(--ink-3); }
.q-audio-btn {
  border: none; cursor: pointer; margin-top: 12px;
  background: linear-gradient(135deg, var(--teal), #06b6d4);
  color: #fff; font-size: 14px; font-weight: 700;
  padding: 11px 24px; border-radius: 999px;
  box-shadow: 0 6px 14px rgba(14,165,233,.3);
}
.q-audio-btn:active { transform: scale(.94); }

.answer-box { margin-top: 20px; text-align: left; }
.answer-box label { font-size: 13px; color: var(--ink-2); font-weight: 600; }
.answer-input {
  width: 100%; border: 2px solid #e2e8f0; border-radius: 14px;
  font-size: 20px; font-weight: 700; letter-spacing: 2px; text-align: center;
  padding: 14px; margin-top: 8px; outline: none; transition: border-color .2s;
  text-transform: lowercase;
}
.answer-input:focus { border-color: var(--primary); }
.answer-input.correct { border-color: var(--green); background: var(--green-light); }
.answer-input.wrong { border-color: var(--rose); background: var(--rose-light); }

.submit-row { display: flex; gap: 10px; margin-top: 14px; }
.feedback {
  margin-top: 14px; border-radius: 14px; padding: 14px; font-size: 14px; line-height: 1.6;
}
.feedback.correct { background: var(--green-light); color: #065f46; }
.feedback.wrong { background: var(--rose-light); color: #9f1239; }
.feedback .fb-word { font-size: 22px; font-weight: 800; margin-bottom: 4px; }
.feedback .fb-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.feedback .fb-homo {
  margin-top: 8px;
  padding: 8px 12px;
  border-radius: 10px;
  background: #f1f5f9;
  font-size: 14px;
  line-height: 1.9;
}
.feedback .fb-homo div { display: flex; align-items: baseline; gap: 6px; }
.feedback button {
  border: none; cursor: pointer; font-size: 13px; font-weight: 600;
  padding: 8px 14px; border-radius: 10px;
}
.feedback.correct button { background: var(--green); color: #fff; }
.feedback.wrong button { background: var(--rose); color: #fff; }

/* 练习结果 */
.result-hero { text-align: center; padding: 26px 16px; }
.result-score { font-size: 52px; font-weight: 800; color: var(--primary-dark); }
.result-desc { font-size: 15px; color: var(--ink-2); margin-top: 6px; }
.result-emoji { font-size: 52px; margin-bottom: 6px; }
.error-words { text-align: left; }
.error-word {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 0; border-bottom: 1px dashed #e2e8f0;
}
.error-word .ew-word { font-weight: 700; font-size: 16px; }
.error-word .ew-meta { font-size: 12.5px; color: var(--ink-3); margin-top: 2px; }
.error-word button {
  border: none; background: var(--primary-light); color: var(--primary-dark);
  padding: 7px 12px; border-radius: 9px; font-size: 12.5px; font-weight: 600; cursor: pointer;
}

/* ===== 数据管理 ===== */
.upload-zone {
  border: 2.5px dashed #c7d2fe; border-radius: 16px;
  padding: 34px 20px; text-align: center; cursor: pointer;
  background: #f8faff; transition: all .2s; margin-bottom: 14px;
}
.upload-zone:hover, .upload-zone.dragover { border-color: var(--primary); background: var(--primary-light); }
.upload-zone .u-ico { font-size: 42px; }
.upload-zone .u-text { font-size: 14px; color: var(--ink-2); margin-top: 8px; font-weight: 600; }
.upload-zone .u-sub { font-size: 12px; color: var(--ink-3); margin-top: 4px; }
.upload-zone input[type=file] { display: none; }

.tpl-btn {
  display: block; width: 100%; border: none; cursor: pointer;
  background: #fff; color: var(--primary-dark); font-weight: 700;
  padding: 13px; border-radius: 14px; font-size: 14px;
  box-shadow: var(--shadow); margin-bottom: 14px;
}

.import-result {
  border-radius: 14px; padding: 14px; font-size: 13.5px; line-height: 1.7;
}
.import-result.ok { background: var(--green-light); color: #065f46; }
.import-result.err { background: var(--rose-light); color: #9f1239; }

.stat-list { display: flex; flex-direction: column; gap: 8px; }
.stat-row { display: flex; justify-content: space-between; font-size: 13.5px; padding: 8px 0; border-bottom: 1px dashed #e2e8f0; }
.stat-row:last-child { border-bottom: none; }
.stat-row .k { color: var(--ink-2); }
.stat-row .v { font-weight: 700; }
.stat-bar { display: flex; align-items: center; gap: 10px; }
.stat-bar .b-track { flex: 1; height: 8px; background: #e2e8f0; border-radius: 99px; overflow: hidden; }
.stat-bar .b-fill { height: 100%; background: linear-gradient(90deg, var(--primary), #8b5cf6); border-radius: 99px; }

/* ===== 底部导航 ===== */
.tab-bar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 60;
  background: rgba(255,255,255,.94); backdrop-filter: blur(12px);
  border-top: 1px solid #eef0f6;
  display: flex; justify-content: space-around;
  padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
  max-width: 760px; margin: 0 auto;
}
.tab-btn {
  border: none; background: transparent; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 6px 20px; border-radius: 14px; color: var(--ink-3);
  transition: all .15s;
}
.tab-btn.active { color: var(--primary-dark); background: var(--primary-light); }
.tab-icon { font-size: 20px; }
.tab-label { font-size: 11px; font-weight: 600; }

/* ===== Toast ===== */
.toast {
  position: fixed; left: 50%; bottom: 110px; transform: translateX(-50%) translateY(20px);
  background: rgba(30,41,59,.92); color: #fff;
  padding: 11px 20px; border-radius: 999px; font-size: 13.5px;
  opacity: 0; pointer-events: none; transition: all .3s; z-index: 100;
  max-width: 86vw; text-align: center;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ===== 语音合成中提示 =====
   在线 TTS 单次合成需 1~3 秒（外部接口慢时更久），期间给出持续可见的反馈，
   避免用户以为按钮失灵而反复点击。播放开始即隐藏（此时已有声音反馈）。
   位置高于 toast，两者同时出现也不会重叠。 */
.speech-loading {
  position: fixed;
  left: 50%;
  bottom: calc(155px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 17px;
  border-radius: 999px;
  background: rgba(30, 41, 59, 0.93);
  color: #fff;
  font-size: 13.5px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.3);
  animation: sl-fade-in 0.18s ease-out;
  pointer-events: none;
}
.speech-loading[hidden] { display: none; }
.speech-loading .sl-text { font-weight: 600; white-space: nowrap; }

/* 声波跳动动画 */
.sl-bars { display: inline-flex; align-items: flex-end; gap: 2.5px; height: 14px; }
.sl-bars i {
  display: block;
  width: 3px;
  border-radius: 2px;
  background: #a5b4fc;
  animation: sl-bounce 0.9s ease-in-out infinite;
}
.sl-bars i:nth-child(1) { height: 7px; animation-delay: 0s; }
.sl-bars i:nth-child(2) { height: 14px; animation-delay: 0.15s; }
.sl-bars i:nth-child(3) { height: 9px; animation-delay: 0.3s; }

@keyframes sl-bounce {
  0%, 100% { transform: scaleY(0.45); opacity: 0.55; }
  50% { transform: scaleY(1); opacity: 1; }
}
@keyframes sl-fade-in {
  from { opacity: 0; transform: translateX(-50%) translateY(7px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ===== 桌面适配 ===== */
@media (min-width: 640px) {
  .view { padding: 24px 20px; }
  .word-card:hover { transform: translateY(-2px); }
}

/* ===== 小尺寸手机适配 (≤ 380px) ===== */
@media (max-width: 380px) {
  /* 顶部 header 紧凑化 */
  .app-header { padding: 11px 12px calc(11px + env(safe-area-inset-top)); border-radius: 0 0 20px 20px; }
  .brand { gap: 8px; }
  .brand-logo { width: 34px; height: 38px; }
  .brand-title { font-size: 16px; letter-spacing: 0; }
  .brand-sub { font-size: 10.5px; margin-top: 1px; }
  .header-actions { gap: 6px; }
  .icon-btn { width: 34px; height: 34px; font-size: 16px; border-radius: 10px; }
  .user-chip { font-size: 11.5px; padding: 3px 4px 3px 8px; gap: 4px; }
  .user-chip .u-avatar { font-size: 13px; }
  .user-chip .u-name { max-width: 64px; }
  .user-chip .u-logout { width: 22px; height: 22px; font-size: 11px; }

  /* 视图与卡片紧凑 */
  .view { padding: 12px 10px; }
  .card { padding: 14px; border-radius: 14px; }
  .card-title { font-size: 14px; }

  /* 筛选 chip 缩小 */
  .chip { padding: 4px 10px; font-size: 12px; }
  .filter-group { padding-right: 8px; gap: 4px; }
  .filter-group + .filter-group { padding-left: 8px; }
  .filter-label { font-size: 11px; }

  /* 拼写/造句设置页顶部大卡片压缩 */
  .practice-setup > .card { padding: 18px 14px !important; }
  .practice-setup > .card > div[style*="44px"] { font-size: 36px !important; }
  .practice-setup h2 { font-size: 18px !important; }

  /* 底部 tab 文字单行 */
  .tab-bar { padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); }
  .tab-btn { padding: 4px 6px; gap: 1px; min-width: 0; }
  .tab-icon { font-size: 18px; }
  .tab-label { font-size: 10.5px; white-space: nowrap; }

  /* 主按钮 */
  .btn { font-size: 14px; padding: 9px 14px; }
}

/* 中等小屏 (381–414px) 微调 */
@media (min-width: 381px) and (max-width: 414px) {
  .brand-title { font-size: 17px; }
  .tab-label { font-size: 10.5px; white-space: nowrap; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* 简单入场动画 */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.card, .word-card, .mode-card, .q-card { animation: fadeUp .3s ease; }

/* ===== 头部用户区 ===== */
.header-actions { display: flex; align-items: center; gap: 10px; }
.login-btn {
  border: none; cursor: pointer;
  background: rgba(255,255,255,.18); color: #fff;
  padding: 8px 16px; border-radius: 999px;
  font-size: 13.5px; font-weight: 600;
  transition: background .2s, transform .15s;
}
.login-btn:active { transform: scale(.94); }
.user-chip {
  display: flex; align-items: center; gap: 5px;
  background: rgba(255,255,255,.16); color: #fff;
  padding: 6px 5px 6px 9px; border-radius: 999px;
  font-size: 12.5px; font-weight: 600;
}
.user-chip.vip { background: linear-gradient(135deg, #fbbf24, #f59e0b); color: #78350f; }
.user-chip .u-avatar { font-size: 13px; }
.user-chip .u-name { max-width: 72px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-chip .u-logout {
  border: none; cursor: pointer; width: 22px; height: 22px; border-radius: 50%;
  background: rgba(0,0,0,.12); color: inherit; font-size: 11px;
  transition: transform .15s;
}
.user-chip .u-logout:active { transform: scale(.9); }

/* ===== 登录/注册视图 ===== */
.auth-wrap {
  min-height: calc(100vh - 220px);
  display: flex; align-items: center; justify-content: center;
  padding: 30px 0;
}
.auth-card {
  width: 100%; max-width: 380px;
  background: var(--card);
  border-radius: 22px;
  box-shadow: var(--shadow-lg);
  padding: 30px 26px;
  animation: fadeUp .3s ease;
}
.auth-logo {
  width: 88px; height: 88px; margin: 0 auto;
  display: flex; align-items: center; justify-content: center;
}
/* 登录/重置密码页品牌形象（透明 PNG，带柔和投影） */
.auth-logo img {
  width: 100%; height: 100%; object-fit: contain;
  filter: drop-shadow(0 8px 16px rgba(225, 29, 72, .22));
}
.auth-title { text-align: center; margin-top: 14px; font-size: 20px; font-weight: 800; }
.auth-sub { text-align: center; margin-top: 6px; }
.auth-tabs { display: flex; gap: 8px; justify-content: center; margin: 20px 0 18px; }
.auth-form { display: flex; flex-direction: column; gap: 14px; }
.auth-form label {
  font-size: 13px; color: var(--ink-2); font-weight: 600;
  display: flex; flex-direction: column; gap: 6px;
}
.auth-form input {
  border: 2px solid #e2e8f0; border-radius: 12px;
  padding: 12px 14px; font-size: 15px; outline: none;
  background: #f8fafc; transition: border-color .2s, background .2s;
}
.auth-form input:focus { border-color: var(--primary); background: #fff; }

/* ===== 会员卡片 ===== */
.member-box { display: flex; flex-direction: column; }
.member-status {
  align-self: flex-start; font-weight: 700; font-size: 14px;
  padding: 6px 12px; border-radius: 999px;
}
.member-status.on { background: var(--amber-light); color: #b45309; }
.member-status.off { background: #f1f5f9; color: var(--ink-2); }

/* ===== 造句练习 ===== */
.s-word { margin-top: 14px; text-align: center; }
.s-word-text { font-size: 20px; font-weight: 800; color: var(--primary-dark); }
.s-word-phonetic { font-size: 13px; color: var(--ink-2); margin-left: 8px; }

.s-slots-label { font-size: 13px; color: var(--ink-2); font-weight: 600; margin-bottom: 10px; }
.s-slots {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: center;
  min-height: 56px; padding: 12px; background: var(--primary-light); border-radius: 14px;
}
.s-slot {
  min-width: 64px; height: 44px; padding: 0 14px;
  border: 2px dashed var(--primary); background: #fff; border-radius: 10px;
  font-size: 17px; font-weight: 700; color: var(--primary-dark);
  cursor: pointer; transition: transform .15s ease;
}
.s-slot:active:not(:disabled) { transform: scale(.94); }
.s-slot.empty { border-color: #cbd5e1; background: transparent; cursor: default; }
.s-slot:disabled { opacity: .6; cursor: default; }

.s-pool { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 18px; }
.s-chip {
  min-width: 60px; height: 44px; padding: 0 16px;
  border: none; border-radius: 10px;
  background: var(--primary); color: #fff;
  font-size: 17px; font-weight: 700;
  cursor: pointer; transition: transform .15s ease, opacity .2s ease;
  box-shadow: 0 2px 6px rgba(99, 102, 241, 0.3);
}
.s-chip:active:not(:disabled) { transform: scale(.92); }
.s-chip:disabled { opacity: .35; cursor: not-allowed; }

/* 拼写练习：字母点选（沿用造句练习的交互范式，块尺寸改为方形）*/
/* 分组排布：同一音节为一组（组内紧凑、组间留白）；
   配色与详情页音节块一致 —— 主重读琥珀 / 次重读浅琥珀 / 弱读紫蓝 */
.sp-slots {
  display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: center;
  min-height: 56px; padding: 12px; background: var(--primary-light); border-radius: 14px;
}
.sp-legend {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  margin: 2px 0 10px; font-size: 12px; color: #64748b;
}
.sp-legend-dot {
  width: 10px; height: 10px; border-radius: 50%; display: inline-block;
  margin-right: 4px; vertical-align: middle;
}
.sp-legend-dot.strong { background: var(--amber); }
.sp-legend-dot.weak { background: var(--primary); }
.sp-group { display: flex; gap: 6px; align-items: center; }

.sp-slot {
  width: 44px; height: 44px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border: 2px dashed var(--primary); background: #fff; border-radius: 10px;
  font-size: 20px; font-weight: 800; color: var(--primary-dark);
  cursor: pointer; transition: transform .15s ease;
}
.sp-slot:active:not(:disabled) { transform: scale(.94); }
.sp-slot:disabled { opacity: .7; cursor: default; }
/* 空槽统一用中性灰虚线，不显示重弱读角色：
   重弱读颜色只涂在「实际字母」上（备选池 + 已填槽），避免空槽造成数量误导 */
.sp-slot.fixed {
  width: 20px; border-style: solid; border-color: transparent; background: transparent;
  color: var(--ink-2); font-size: 22px; cursor: default;
}

/* 重读角色着色：只涂在「实际字母」上（备选池 + 已填槽）。
   空槽保持中性灰，避免「橙色凹槽数 ≠ 橙色字母数」的误导。 */
.sp-slot[data-role="strong"] { border-color: var(--amber); color: #b45309; }
.sp-slot[data-role="strong"].filled { background: var(--amber); border-color: var(--amber); border-style: solid; color: #fff; }
.sp-slot[data-role="secondary"] { border-color: #fbbf24; color: #b45309; }
.sp-slot[data-role="secondary"].filled { background: #fbbf24; border-color: #fbbf24; border-style: solid; color: #7c2d12; }
.sp-slot[data-role="weak"] { border-color: var(--primary); color: var(--primary-dark); }
.sp-slot[data-role="weak"].filled { background: var(--primary); border-color: var(--primary); border-style: solid; color: #fff; }

/* 空槽统一用中性灰虚线（放在角色规则之后，确保覆盖空槽边框色） */
.sp-slot.empty { border-color: #cbd5e1; background: transparent; cursor: default; }

/* 元音位置提示：空槽落在元音字母处时写一个「元」字（实测圆点学生看不懂） */
.sp-slot.vowel-hint { background: rgba(245, 158, 11, .07); }
.sp-slot.vowel-hint .vh-text {
  font-size: 15px; font-weight: 700; line-height: 1;
  color: var(--amber); opacity: .8;
}

/* 提交后逐格对错：整格底色 + 右上角 ✓/✗ 角标 */
.sp-slot.marked { position: relative; border-style: solid; cursor: default; }
.sp-slot.marked .mk {
  position: absolute; right: -7px; top: -8px;
  width: 17px; height: 17px; border-radius: 50%;
  font-size: 11px; font-style: normal; font-weight: 700; line-height: 17px; text-align: center;
  color: #fff; box-shadow: 0 1px 3px rgba(15, 23, 42, .2);
}
.sp-slot.hit { background: var(--green-light); border-color: var(--green); color: #047857; }
.sp-slot.hit .mk { background: var(--green); }
.sp-slot.miss { background: var(--rose-light); border-color: var(--rose); color: #be123c; }
.sp-slot.miss .mk { background: var(--rose); }

.sp-pool { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 18px 0 4px; }
.sp-chip {
  width: 44px; height: 44px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border: none; border-radius: 10px; background: var(--primary); color: #fff;
  font-size: 20px; font-weight: 800; cursor: pointer;
  box-shadow: 0 2px 6px rgba(99, 102, 241, 0.3);
  transition: transform .15s ease, opacity .2s ease;
}
/* 字母块按「正确位置所属音节」着色，与槽位颜色呼应 */
.sp-chip[data-role="strong"] { background: var(--amber); box-shadow: 0 2px 6px rgba(245, 158, 11, .35); }
.sp-chip[data-role="secondary"] { background: #fbbf24; color: #7c2d12; box-shadow: 0 2px 6px rgba(251, 191, 36, .35); }
.sp-chip:active:not(:disabled) { transform: scale(.92); }
.sp-chip:disabled { opacity: .35; cursor: not-allowed; }

/* 题卡内「听发音 + 自动朗读开关」一行 */
.q-audio-row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; align-items: center; margin-top: 12px; }
.q-audio-row .q-audio-btn { margin-top: 0; }
.auto-speak {
  cursor: pointer; border: 2px solid #e2e8f0; background: #fff; color: var(--ink-2);
  font-size: 12.5px; font-weight: 700; padding: 9px 15px; border-radius: 999px;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.auto-speak:active { transform: scale(.95); }
.auto-speak.on { border-color: var(--teal); background: #e0f2fe; color: #0369a1; }

.s-full-sentence { font-size: 20px; font-weight: 800; margin-top: 8px; }
.s-full-zh { font-size: 13.5px; color: var(--ink-2); margin-top: 2px; }

/* ===== 验证码登录 ===== */
.code-row { display: flex; gap: 10px; }
.code-row input { flex: 1; }
.code-btn { white-space: nowrap; min-width: 104px; }
.link-btn {
  background: none; border: none; color: var(--primary);
  font-size: 13px; font-weight: 600; cursor: pointer; padding: 0 2px;
  text-decoration: underline;
}
.link-btn:hover { opacity: .8; }

/* ===== 我的（个人中心） ===== */
.profile-head {
  display: flex; align-items: center; gap: 14px;
  padding: 20px 16px; border-radius: 16px;
  background: linear-gradient(135deg, #eef2ff, #faf5ff);
  border: 1px solid #e0e7ff; margin-bottom: 14px;
}
.p-avatar {
  width: 56px; height: 56px; border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), #8b5cf6);
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; color: #fff; flex-shrink: 0;
}
.p-info { flex: 1; min-width: 0; }
.p-name { font-size: 17px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p-phone { font-size: 13px; color: var(--ink-2); margin-top: 2px; }
.p-vip {
  font-size: 12px; font-weight: 700; padding: 5px 10px; border-radius: 999px;
  background: #f1f5f9; color: var(--ink-2); white-space: nowrap;
}
.p-vip.on { background: var(--amber-light); color: #b45309; }

.btn-danger {
  background: #fee2e2; color: #b91c1c; border: 1px solid #fecaca;
  transition: background .2s;
}
.btn-danger:hover { background: #fecaca; }

/* ===== 订单列表 ===== */
.order-list { display: flex; flex-direction: column; gap: 10px; }
.order-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px; border: 1px solid #eef2f7; border-radius: 12px; background: #fbfdff;
}
.o-left { min-width: 0; }
.o-name { font-size: 14px; font-weight: 700; }
.o-meta { font-size: 11.5px; color: var(--ink-2); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.o-right { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
.o-amount { font-size: 15px; font-weight: 800; color: var(--primary-dark); }
.order-status { font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 999px; }
.order-status.st-pending { background: #fef3c7; color: #b45309; }
.order-status.st-paid { background: #dcfce7; color: #15803d; }
.order-status.st-closed { background: #f1f5f9; color: var(--ink-2); }
.order-status.st-refunded { background: #fee2e2; color: #b91c1c; }

/* ===== 会员套餐 ===== */
.plan-list { display: flex; flex-direction: column; gap: 10px; }
.plan-card {
  padding: 14px 16px; border: 2px solid #e2e8f0; border-radius: 14px;
  cursor: pointer; transition: border-color .2s, background .2s;
  display: flex; flex-direction: column; gap: 4px;
}
.plan-card:hover { border-color: #c7d2fe; }
.plan-card.selected { border-color: var(--primary); background: var(--primary-light); }
.plan-top { display: flex; align-items: baseline; justify-content: space-between; }
.plan-name { font-size: 16px; font-weight: 800; }
.plan-price { font-size: 14px; color: var(--primary-dark); font-weight: 700; }
.plan-price b { font-size: 22px; }
.plan-desc { font-size: 12.5px; color: var(--ink-2); }
.plan-check {
  align-self: flex-end; font-size: 12px; font-weight: 700;
  color: var(--primary); margin-top: 4px;
}
.plan-card.selected .plan-check { color: #15803d; }

/* ===== 支付弹窗 ===== */
.modal-mask {
  position: fixed; inset: 0; z-index: 999;
  background: rgba(15, 23, 42, .55);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.modal-card {
  width: 100%; max-width: 340px;
  background: #fff; border-radius: 18px;
  padding: 20px; box-shadow: 0 20px 50px rgba(0,0,0,.25);
  animation: modal-in .2s ease;
}
@keyframes modal-in { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }
.modal-title { font-size: 16px; font-weight: 800; text-align: center; margin-bottom: 14px; }
.modal-body { text-align: center; }
.pay-amount { font-size: 28px; font-weight: 800; color: var(--primary-dark); margin-bottom: 6px; }
.pay-qr { margin: 12px 0; }
.pay-qr img { width: 220px; height: 220px; border: 1px solid #e2e8f0; border-radius: 12px; }
.modal-actions { display: flex; gap: 10px; margin-top: 16px; }
.modal-actions .btn { flex: 1; }

/* ===== 管理后台 ===== */
.admin-subnav {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin: 4px 0 14px;
}
.admin-subnav .chip.active {
  background: var(--primary); color: #fff; border-color: var(--primary);
}

.admin-toolbar {
  display: flex; gap: 8px; align-items: center;
  margin-bottom: 12px;
}
.admin-search-input {
  flex: 1; min-width: 0;
  padding: 9px 12px; border-radius: 10px;
  border: 1.5px solid #e2e8f0; font-size: 14px;
  outline: none; background: #fff;
}
.admin-search-input:focus { border-color: var(--primary); }

.admin-table {
  display: flex; flex-direction: column;
  border: 1px solid #eef2f7; border-radius: 12px; overflow: hidden;
}
.admin-row {
  display: grid;
  grid-template-columns: 1.1fr 1fr 0.7fr 1.2fr 1.6fr;
  gap: 8px; align-items: center;
  padding: 10px 12px;
  border-bottom: 1px solid #f1f5f9;
  font-size: 13px;
}
.admin-row:last-child { border-bottom: none; }
.admin-row.admin-head {
  background: #f8fafc; font-size: 12px; font-weight: 700;
  color: var(--ink-3); text-transform: none;
}
.col-phone, .col-name, .col-status, .col-expire, .col-actions,
.col-time, .col-user, .col-plan, .col-amount {
  min-width: 0; overflow: hidden; text-overflow: ellipsis;
}
.edit-btns { display: flex; gap: 6px; flex-wrap: wrap; }
.admin-edit {
  display: flex; flex-direction: column; gap: 6px;
}
.admin-edit input[type="datetime-local"] {
  padding: 6px 8px; border: 1.5px solid #e2e8f0; border-radius: 8px;
  font-size: 12.5px; outline: none; max-width: 220px;
}
.admin-edit input[type="datetime-local"]:focus { border-color: var(--primary); }
.btn-sm { padding: 5px 10px; font-size: 12px; border-radius: 8px; }

.badge-admin { background: #ede9fe; color: #6d28d9; }
.badge-on { background: #dcfce7; color: #15803d; }
.badge-off { background: #f1f5f9; color: var(--ink-2); }

.finance-sum {
  text-align: center; padding: 18px 12px;
  background: linear-gradient(135deg, var(--primary-light), #f5f3ff);
  border-radius: 14px;
}
.finance-label { font-size: 13px; color: var(--ink-2); }
.finance-total {
  font-size: 34px; font-weight: 800;
  color: var(--primary-dark); margin: 6px 0 2px;
}
.col-time { white-space: nowrap; }
.col-user span { display: block; font-size: 11px; }
.col-amount { font-weight: 800; color: var(--primary-dark); }

/* ===== 管理后台：数据防护页 ===== */
.sec-note { font-size: 12px; font-weight: 400; }
.admin-row.sec-rank { grid-template-columns: 1fr 1fr 0.8fr 1.1fr; }
.admin-row.sec-rank .col-num { font-weight: 700; color: var(--ink); }
.admin-row.sec-rank .col-rate { display: flex; align-items: center; gap: 6px; }
.rate-badge {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  font-size: 12px; font-weight: 700;
}
.rate-badge.ok { background: #dcfce7; color: #166534; }
.rate-badge.warn { background: #fef3c7; color: #92400e; }
.rate-badge.danger { background: #fee2e2; color: #991b1b; }
.rate-hint { font-size: 11.5px; color: var(--ink-3); }
.sec-logs { display: flex; flex-direction: column; gap: 8px; }
.sec-log {
  display: grid; grid-template-columns: auto auto 1fr auto;
  align-items: center; gap: 8px;
  font-size: 12.5px; padding: 7px 10px;
  background: #f8fafc; border-radius: 8px;
}
.sl-time { color: var(--ink-3); white-space: nowrap; }
.sl-reason { padding: 1px 7px; border-radius: 999px; font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.sl-reason.warn { background: #fef3c7; color: #92400e; }
.sl-reason.danger { background: #fee2e2; color: #991b1b; }
.sl-user { font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sl-path { color: var(--ink-3); font-size: 11.5px; white-space: nowrap; }
@media (max-width: 560px) {
  .admin-row.sec-rank { grid-template-columns: 1fr 1fr; }
  .admin-row.sec-rank .col-num,
  .admin-row.sec-rank .col-rate { text-align: left; }
  .sec-log { grid-template-columns: auto auto 1fr; }
  .sl-path { display: none; }
}

/* 详情页：按维度分块的拼读规则（重读 / 弱读 / 辅音） */
.rule-group + .rule-group {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed #e5e7eb;
}
.rule-group-title {
  font-size: 12.5px;
  font-weight: 700;
  color: #6366f1;
  margin-bottom: 4px;
  letter-spacing: 0.02em;
}

/* 详情页：辅音发音规则卡片（结构化自动匹配） */
.con-list { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.con-item {
  padding: 10px 12px; border-radius: 12px;
  background: var(--primary-light); border: 1px solid rgba(99, 102, 241, .12);
}
.con-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.con-pattern {
  font-size: 14px; font-weight: 800; color: var(--primary-dark);
  background: #fff; border: 1px solid rgba(99, 102, 241, .25);
  padding: 1px 8px; border-radius: 7px; font-family: var(--mono, ui-monospace, monospace);
}
.con-sound {
  font-size: 13px; font-weight: 700; color: #be123c;
  font-family: var(--mono, ui-monospace, monospace);
}
.con-flag {
  font-size: 10.5px; font-weight: 700; padding: 1px 6px; border-radius: 5px;
  margin-left: 2px;
}
.con-flag.silent { background: #fef3c7; color: #b45309; }
.con-flag.special { background: #fae8ff; color: #a21caf; }
.con-flag.cond { background: #e0f2fe; color: #0369a1; }
.con-note { font-size: 13px; color: var(--ink-2); line-height: 1.6; margin-top: 6px; }
.con-ex { font-size: 11.5px; color: var(--ink-3); margin-top: 4px; line-height: 1.5; }

/* 管理后台：封禁列表 */
.ban-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 11px; border-radius: 9px;
  background: #fff5f5; border-left: 3px solid #ef4444;
}
.ban-row .br-info { flex: 1; min-width: 0; }
.ban-row .br-phone { font-size: 13px; font-weight: 700; color: var(--ink); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ban-row .br-meta { font-size: 11.5px; color: var(--ink-3); margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 管理后台：访问日志 */
.al-list { display: flex; flex-direction: column; gap: 2px; max-height: 420px; overflow-y: auto; }
.al-row {
  display: grid; grid-template-columns: auto 1fr 1.4fr auto auto;
  align-items: center; gap: 8px;
  font-size: 12px; padding: 5px 8px; border-radius: 6px;
}
.al-row:nth-child(odd) { background: #f8fafc; }
.al-row.err { background: #fef2f2; }
.al-time { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.al-user { font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.al-path { color: var(--ink-2); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.al-status { font-weight: 700; color: #15803d; }
.al-row.err .al-status { color: #b91c1c; }
.al-ms { color: var(--ink-3); font-size: 11px; white-space: nowrap; }
@media (max-width: 560px) {
  .al-row { grid-template-columns: auto 1fr auto; gap: 6px; }
  .al-path, .al-ms { display: none; }
}

/* 移动端：会员表格转卡片式布局 */
@media (max-width: 560px) {
  .admin-row {
    grid-template-columns: 1fr 1fr;
    gap: 4px 10px; padding: 10px;
  }
  .admin-row.admin-head { display: none; }
  .admin-row .col-phone { grid-column: 1; font-weight: 700; }
  .admin-row .col-name { grid-column: 2; text-align: right; }
  .admin-row .col-status { grid-column: 1; }
  .admin-row .col-expire { grid-column: 2; text-align: right; }
  .admin-row .col-actions { grid-column: 1 / -1; margin-top: 4px; }
  .admin-edit { width: 100%; }
  .admin-edit input[type="datetime-local"] { max-width: 100%; }
}

/* ==================== 拍照带读 ==================== */
.rd-upload {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 26px 18px 20px; text-align: center;
}
.rd-upload .rd-icon { font-size: 46px; line-height: 1; }
.rd-upload h3 { font-size: 17px; margin: 0; color: var(--ink); }
.rd-tips {
  width: 100%; margin-top: 4px; text-align: left; font-size: 12px; line-height: 1.9;
  color: var(--ink-3); background: var(--primary-light);
  border-radius: 10px; padding: 12px 14px;
}
.rd-tips b { color: var(--primary-dark); }
.rd-file { display: none; }

.rd-preview-img { width: 100%; border-radius: 12px; border: 1px solid #e5e7eb; display: block; }
.rd-actions { display: flex; gap: 10px; margin-top: 14px; }
.rd-actions .btn { flex: 1; }

.rd-progress { text-align: center; padding: 34px 10px 26px; }
.rd-spin {
  width: 34px; height: 34px; margin: 0 auto 14px;
  border: 3px solid #e5e7eb; border-top-color: var(--primary);
  border-radius: 50%; animation: rd-spin .9s linear infinite;
}
@keyframes rd-spin { to { transform: rotate(360deg); } }

/* 悬浮控制条：滚动时始终吸在页面头部下方，避免单词多时按钮被滚出屏幕 */
.rd-sticky {
  position: sticky;
  z-index: 40;
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: 0 4px 18px rgba(15, 23, 42, .1);
  padding: 12px 14px 10px;
  margin-bottom: 14px;
  backdrop-filter: blur(6px);
}
.rd-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.rd-toolbar .rd-spacer { flex: 1; }
/* 窄屏下按钮不被压缩（否则文字会竖排） */
.rd-toolbar .btn { flex: none; white-space: nowrap; padding-left: 14px; padding-right: 14px; }
.rd-toolbar .btn-sm { padding-left: 10px; padding-right: 10px; }
.rd-speed { display: flex; gap: 4px; align-items: center; }
.rd-speed .chip { padding: 4px 10px; font-size: 12px; }

.rd-list { display: flex; flex-direction: column; }
.rd-item {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 8px; border-radius: 10px; border-bottom: 1px dashed #f0f0f0;
  transition: background .2s;
  /* 预留吸顶控制条与底部 Tab 的高度，保证高亮项滚动后不被遮挡 */
  scroll-margin-top: 180px;
  scroll-margin-bottom: 120px;
}
.rd-item:last-child { border-bottom: none; }
.rd-item.active { background: var(--primary-light); box-shadow: inset 0 0 0 1px rgba(99,102,241,.25); }
.rd-no { width: 20px; font-size: 12px; color: #bbb; text-align: right; flex: none; }
.rd-main { flex: 1; min-width: 0; }
.rd-word { font-size: 18px; font-weight: 800; color: var(--ink); word-break: break-word; }
.rd-meta { font-size: 12px; color: var(--ink-3); margin-top: 3px; line-height: 1.6; }
.rd-meta .rd-ph { color: var(--primary-dark); }
.rd-meta .rd-tag {
  display: inline-block; margin-left: 6px; padding: 1px 6px;
  background: var(--primary-light); color: var(--primary-dark);
  border-radius: 6px; font-size: 11px;
}
.rd-meta .rd-warn { color: #b45309; }
.rd-btns { display: flex; gap: 2px; flex: none; }
.rd-btns button {
  border: none; background: transparent; cursor: pointer;
  font-size: 15px; padding: 6px; border-radius: 8px; line-height: 1;
}
.rd-btns button:active { background: #f3f4f6; }
.rd-btns button[disabled] { opacity: .35; cursor: default; }

.rd-edit { display: flex; gap: 6px; align-items: center; flex: 1; min-width: 0; }
.rd-edit input {
  flex: 1; min-width: 0; padding: 7px 10px; font-size: 16px;
  border: 1px solid var(--primary); border-radius: 8px;
}

.rd-pausebar { height: 4px; background: #e5e7eb; border-radius: 999px; overflow: hidden; margin: 10px 0 5px; }
.rd-pausebar i { display: block; height: 100%; width: 0; background: var(--primary); transition: width .1s linear; }
.rd-status { font-size: 12px; color: var(--ink-3); text-align: center; }
.rd-truncated {
  font-size: 12px; color: #b45309; background: #fffbeb; border: 1px solid #fde68a;
  border-radius: 8px; padding: 8px 10px; margin-bottom: 10px; line-height: 1.6;
}

/* 词库版本号：低调显示在页面底部，用于确认线上跑的是哪一批数据 */
.lexicon-version {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  padding: 4px 8px;
  font-size: 11px;
  line-height: 1.5;
  text-align: center;
  color: #9aa0a6;
  background: rgba(255, 255, 255, 0.82);
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  pointer-events: none;
  user-select: none;
}
.lexicon-version.is-stale { color: #c62828; font-weight: 600; }