/* ============================================================
   ToneCoach — 视觉样式（v1.1）
   主色：学术蓝 #2f6fed；墨蓝 #2b3a55；声调四色：蓝/绿/橙/红
   ============================================================ */
/* 本地打包 ToneOZ Quicksnow（SIL OFL 1.1 开源，可商用），确保所有设备统一显示拼音字体 */
@font-face{
  font-family:"ToneOZ Quicksnow";
  src:url("fonts/ToneOZ-Quicksnow-W400.ttf") format("truetype");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"ToneOZ Quicksnow";
  src:url("fonts/ToneOZ-Quicksnow-W700.ttf") format("truetype");
  font-weight:700; font-style:normal; font-display:swap;
}
*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{ margin:0; padding:0; }
body{
  font-family:"Segoe UI","PingFang SC","Microsoft YaHei",system-ui,-apple-system,sans-serif;
  background:#f3f5f9; color:#1f2937;
  background-image:radial-gradient(1200px 500px at 50% -200px, #e7effc 0%, rgba(231,239,252,0) 60%);
  background-repeat:no-repeat;
}

/* ---------- 顶部 ---------- */
header{
  position:relative; overflow:hidden;
  background:linear-gradient(135deg,#2b3a55 0%,#334e68 55%,#3d5c7f 100%);
  color:#fff; padding:28px 16px 26px; text-align:center;
}
header::after{ content:''; position:absolute; left:-30%; right:-30%; bottom:-60%; height:140%; background:radial-gradient(closest-side, rgba(255,255,255,.16), rgba(255,255,255,0)); border-radius:50%; }
header h1{ position:relative; margin:0; font-size:23px; letter-spacing:.3px; }

main{ max-width:560px; margin:0 auto; padding:16px 14px 110px; }

/* ---------- 卡片 ---------- */
.card{
  background:#fff; border-radius:18px; padding:20px 18px; margin-bottom:14px;
  box-shadow:0 6px 20px rgba(31,45,80,.07); border:1px solid #eef1f6;
}
.card h2{ margin:0 0 14px; font-size:17px; font-weight:700; color:#1f2937; }
.hero-card{ padding:22px 18px; border-top:4px solid transparent; background:linear-gradient(#fff,#fff) padding-box, linear-gradient(135deg,#2f6fed,#5aa2f5) border-box; }
label{ display:block; font-size:13px; color:#6b7280; margin-bottom:9px; font-weight:500; }

/* ---------- 输入与按钮 ---------- */
.input-row{ display:flex; gap:10px; }
input[type=text], input[type=email], input[type=password]{
  width:100%; padding:13px 14px; font-size:16px; border:1.5px solid #e4e8ef; border-radius:12px; background:#fafbfd; color:#1f2937; outline:none; transition:border-color .15s, box-shadow .15s;
}
input[type=text]:focus, input[type=email]:focus, input[type=password]:focus{ border-color:#2f6fed; box-shadow:0 0 0 3px rgba(47,111,237,.15); background:#fff; }
.input-row input[type=text]{ flex:1; min-width:0; }
.primary{
  padding:13px 22px; font-size:16px; border:none; border-radius:12px; cursor:pointer; color:#fff;
  background:linear-gradient(135deg,#2f6fed,#5aa2f5); box-shadow:0 6px 16px rgba(47,111,237,.25);
  font-weight:700; transition:transform .08s, box-shadow .15s;
}
.primary:active{ transform:scale(.97); box-shadow:0 3px 10px rgba(47,111,237,.25); }
.hint{ margin-top:12px; font-size:12.5px; color:#9aa3af; line-height:1.7; }
.hint.warn{ color:#e84c3d; }

/* ---------- 欢迎 / 快捷开始 ---------- */
.welcome-card{ text-align:center; }
.welcome-card h2{ margin-bottom:8px; }
.wc-sub{ font-size:13px; color:#6b7280; margin:0 0 14px; }
.chip-row{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-bottom:16px; }
.chip{ border:1.5px solid #e4e8ef; background:#fff; color:#2f80ed; border-radius:999px; padding:8px 14px; font-size:15px; cursor:pointer; font-weight:600; transition:all .12s; }
.chip:active{ background:#eef4ff; border-color:#2f80ed; transform:scale(.96); }
.steps-row{ display:flex; gap:10px; justify-content:center; }
.step{ flex:1; display:flex; flex-direction:column; align-items:center; gap:5px; padding:12px 8px; background:#f8fafd; border-radius:14px; }
.step-ico{ font-size:24px; }
.step-t{ font-size:12px; color:#4b5563; font-weight:600; }
.meaning{ text-align:center; font-size:15px; color:#6b7280; margin:-4px 0 14px; }

/* ---------- 查询结果卡片 ---------- */
.zh-wrap{ position:relative; }
.zh-big{ font-size:58px; text-align:center; font-weight:800; margin:4px 0 6px; letter-spacing:2px; }
.fav-star{ position:absolute; right:0; top:8px; background:none; border:none; cursor:pointer; font-size:26px; color:#d8dee8; line-height:1; padding:6px; transition:color .15s, transform .1s; }
.fav-star.on{ color:#f2994a; transform:scale(1.08); }
.pinyin{ text-align:center; font-size:27px; margin:6px 0 16px; }
.pinyin .py{ margin:0 7px; font-weight:700; }
.pinyin .py.tone-1{ color:#2f80ed; }
.pinyin .py.tone-2{ color:#27ae60; }
.pinyin .py.tone-3{ color:#f2994a; }
.pinyin .py.tone-4{ color:#e84c3d; }
.pinyin .py.tone-0{ color:#9aa3af; }
.word-actions{ display:flex; gap:10px; margin-top:6px; }
.speaker{ display:block; margin:0 auto; padding:12px 22px; font-size:16px; border:none; border-radius:30px; cursor:pointer; color:#fff; background:linear-gradient(135deg,#2f80ed,#5aa2f5); box-shadow:0 6px 16px rgba(47,128,237,.22); font-weight:600; transition:transform .08s; }
.speaker:active{ transform:scale(.97); }
.speaker.full{ width:100%; margin-top:12px; padding:12px 18px; font-size:15px; border-radius:26px; }
.speaker.small{ margin-top:12px; padding:10px 18px; font-size:14px; border-radius:22px; }
.word-actions .speaker{ flex:1; margin:0; }
.note{ text-align:center; font-size:12px; color:#9aa3af; margin-top:9px; min-height:16px; }

/* ---------- 跟读 / 录音 ---------- */
#practice-target{ text-align:center; margin:6px 0 16px; }
.target-han{ font-size:64px; font-weight:800; line-height:1.1; }
.target-pinyin{ font-size:30px; color:#2f80ed; font-weight:700; margin-top:4px; }
.target-tone-name{ font-size:14px; color:#f2994a; margin-top:8px; font-weight:600; }
.record{ display:block; width:100%; padding:15px; font-size:18px; border:none; border-radius:14px; cursor:pointer; color:#fff; background:linear-gradient(135deg,#27ae60,#4ccb7e); box-shadow:0 6px 16px rgba(39,174,96,.25); font-weight:700; transition:transform .08s; }
.record:active{ transform:scale(.98); }
.record.recording{ background:linear-gradient(135deg,#e84c3d,#f06a4a); box-shadow:0 6px 16px rgba(232,76,61,.28); }
.rec-status{ text-align:center; font-size:14px; color:#e84c3d; margin-top:12px; font-weight:600; }
#live-canvas{ width:100%; height:180px; margin-top:14px; border:1px solid #eef1f6; border-radius:14px; background:#fbfcfe; }

/* ---------- 评分结果 ---------- */
#overall-box{ margin-top:14px; padding:16px; background:#f8fafd; border-radius:14px; }
.ov-score{ text-align:center; font-size:40px; font-weight:800; color:#27ae60; }
.ov-score.bad{ color:#e84c3d; }
.ov-score span{ font-size:14px; color:#9aa3af; font-weight:500; margin-left:2px; }
.ov-label{ text-align:center; font-size:15px; font-weight:600; margin:2px 0 10px; color:#1f2937; }
.ov-per{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin:4px 0 10px; }
.ov-chip{ padding:5px 12px; border-radius:20px; font-size:13px; font-weight:600; }
.ov-chip.good{ background:#e7f7ee; color:#1f9d55; }
.ov-chip.bad{ background:#fdeceb; color:#d94b3d; }
.ov-advice{ text-align:center; font-size:13px; color:#4b5563; line-height:1.7; margin:4px 0 10px; }
.fb-row{ font-size:13px; color:#4b5563; padding:6px 0; border-top:1px dashed #e8edf4; }
.fb-row b{ color:#1f2937; margin-right:4px; }

/* ---------- 列表（词库 / 收藏 / 历史） ---------- */
#dict-search{ width:100%; padding:12px 14px; font-size:15px; border:1.5px solid #e4e8ef; border-radius:12px; margin-bottom:12px; background:#fafbfd; }
.word-list{ margin-top:4px; }
.word-row{ display:flex; align-items:center; justify-content:space-between; padding:13px 4px; border-bottom:1px solid #f0f3f8; }
.wr-main{ flex:1; cursor:pointer; min-width:0; }
.wr-zh{ font-size:19px; font-weight:700; margin-right:8px; }
.wr-py{ font-size:13px; color:#2f80ed; margin-right:8px; font-weight:600; }
.wr-en{ font-size:12px; color:#9aa3af; }
.fav-btn{ border:none; background:none; font-size:22px; color:#d8dee8; cursor:pointer; padding:4px 8px; transition:color .15s, transform .1s; }
.fav-btn.on{ color:#f2994a; transform:scale(1.1); }

.hist-row{ display:flex; align-items:center; justify-content:space-between; padding:13px 4px; border-bottom:1px solid #f0f3f8; }
.hist-main{ flex:1; min-width:0; }
.hist-zh{ font-size:17px; font-weight:700; }
.hist-py{ font-size:12px; color:#2f80ed; margin-left:8px; font-weight:600; }
.hist-meta{ font-size:12px; color:#9aa3af; margin-top:4px; }
.hist-scores{ font-size:12px; color:#6b7280; margin-top:3px; }
.hist-scores b{ color:#2f80ed; }
.hist-play{ border:none; background:linear-gradient(135deg,#2f80ed,#5aa2f5); color:#fff; width:38px; height:38px; border-radius:50%; font-size:16px; cursor:pointer; flex:none; margin-left:10px; }
.hist-play:disabled{ background:#d8dee8; cursor:not-allowed; }

.empty{ text-align:center; color:#9aa3af; font-size:14px; padding:30px 0; line-height:1.9; }

/* ---------- 声调课堂 ---------- */
.lesson-item{ padding:16px 2px; border-bottom:1px solid #f0f3f8; }
.lesson-head{ display:flex; align-items:center; margin-bottom:8px; }
.lesson-sym{ font-size:36px; color:#2b3a55; font-weight:800; margin-right:14px; min-width:44px; text-align:center; background:#eef2f8; border-radius:12px; line-height:1.6; }
.lesson-name{ font-size:16px; font-weight:700; color:#1f2937; }
.lesson-desc{ font-size:13px; color:#6b7280; line-height:1.7; margin-bottom:10px; }
.lesson-sample{ border:1px solid #e3ebf8; background:#f5f9ff; color:#2f80ed; border-radius:20px; padding:7px 13px; margin:0 8px 8px 0; cursor:pointer; font-size:14px; font-weight:600; }
.lesson-sample i{ font-style:normal; color:#8a94a6; font-size:12px; margin-left:2px; }

/* ---------- 统计 ---------- */
.stat-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.stat{ background:linear-gradient(160deg,#f8fafd,#fff); border:1px solid #eef1f6; border-radius:16px; text-align:center; padding:18px 8px; }
.stat-num{ font-size:30px; font-weight:800; color:#2f6fed; }
.stat-label{ font-size:12px; color:#8a94a6; margin-top:5px; font-weight:600; }
#clear-fav{ margin-top:16px; }

/* ---------- 设置 ---------- */
.set-row{ display:flex; align-items:center; justify-content:space-between; padding:13px 0; border-bottom:1px solid #f0f3f8; }
.set-label{ font-size:15px; color:#1f2937; font-weight:600; }
.set-val{ font-size:14px; color:#8a94a6; }
.set-note{ font-size:12px; color:#b7bfca; margin:-2px 0 12px; }
.set-btns{ display:flex; gap:8px; }
.chip{ border:1.5px solid #e4e8ef; background:#fff; color:#6b7280; border-radius:18px; padding:7px 15px; font-size:13px; cursor:pointer; font-weight:600; transition:all .15s; }
.chip.active{ background:#2f80ed; border-color:#2f80ed; color:#fff; }
.set-link{ font-size:14px; color:#2f80ed; text-decoration:none; font-weight:600; }
.lang-select{ font-size:14px; padding:8px 12px; border:1.5px solid #e4e8ef; border-radius:10px; background:#fff; color:#1f2937; outline:none; font-weight:600; }

/* ---------- 按钮（通用） ---------- */
.ghost{ display:block; width:100%; margin:12px auto 0; padding:11px; font-size:14px; border:1.5px solid #e4e8ef; border-radius:12px; background:#fafbfd; color:#4b5563; cursor:pointer; font-weight:600; transition:all .15s; }
.ghost:active{ background:#f0f3f8; }
.ghost.danger{ color:#e84c3d; border-color:#f2c4bf; background:#fff7f6; }
.ghost.small{ display:inline-block; width:auto; margin:0 0 8px; padding:9px 14px; font-size:13px; border-radius:10px; }

/* ---------- 账号 ---------- */
#auth-box input{ width:100%; padding:12px 14px; font-size:15px; border:1.5px solid #e4e8ef; border-radius:12px; margin-bottom:9px; background:#fafbfd; }
.auth-row{ display:flex; gap:10px; }
.auth-row .primary{ flex:1; padding:11px; }
.auth-row .ghost{ flex:1; margin:0; }
.auth-user{ font-size:14px; color:#1f2937; margin-bottom:10px; word-break:break-all; }
#auth-msg{ color:#e84c3d; }
.consent{ display:block; font-size:12px; color:#6b7280; line-height:1.6; margin:4px 0 12px; }
.consent input{ margin-right:6px; }

/* ---------- 额度 / 方案 ---------- */
.quota-box{ margin:6px 0 8px; padding:12px 14px; background:linear-gradient(160deg,#f8fafd,#fff); border:1px solid #eef1f6; border-radius:12px; }
.quota-line{ font-size:13px; color:#4b5563; line-height:2; }
.quota-line b{ color:#2f80ed; }

/* ---------- 弹窗 ---------- */
.modal{ position:fixed; inset:0; background:rgba(20,25,40,.5); backdrop-filter:blur(2px); z-index:100; display:flex; align-items:center; justify-content:center; padding:22px; }
.modal-box{ background:#fff; border-radius:20px; padding:22px 20px; width:100%; max-width:380px; box-shadow:0 24px 60px rgba(0,0,0,.2); }
.modal-box h3{ margin:0 0 8px; font-size:19px; color:#1f2937; }
.modal-sub{ font-size:13px; color:#6b7280; margin:0 0 16px; line-height:1.7; }
.modal-box input{ width:100%; padding:12px 14px; border:1.5px solid #e4e8ef; border-radius:12px; font-size:15px; margin-bottom:11px; background:#fafbfd; }
.modal-box .primary{ width:100%; margin-top:4px; }
.modal-box .ghost{ margin-top:10px; }

.paywall-box{ max-width:420px; }
.plan-cards{ display:flex; flex-direction:column; gap:12px; margin:14px 0 8px; }
.plan-card{ border:1.5px solid #e8ebf0; border-radius:16px; padding:16px; }
.plan-card.premium{ border-color:#e84c3d; background:linear-gradient(160deg,#fff7f5,#fff); box-shadow:0 8px 22px rgba(232,76,61,.10); }
.plan-name{ font-size:16px; font-weight:800; }
.plan-price{ font-size:24px; font-weight:800; color:#e84c3d; margin:5px 0 10px; }
.plan-list{ margin:0; padding:0; list-style:none; }
.plan-list li{ font-size:13px; color:#4b5563; padding:5px 0 5px 22px; position:relative; }
.plan-list li::before{ content:'✓'; position:absolute; left:0; color:#27ae60; font-weight:700; }
.plan-card .primary.full{ display:block; width:100%; padding:12px; font-size:15px; margin-top:14px; }

/* ---------- 新用户引导 ---------- */
.onboard-box{ max-width:400px; text-align:center; position:relative; padding:30px 24px 22px; border-radius:24px; }
.ob-skip{ position:absolute; top:16px; right:18px; border:none; background:none; color:#9aa3af; font-size:14px; cursor:pointer; font-weight:600; }
.ob-slide{ display:none; }
.ob-slide.active{ display:block; animation:obFade .28s ease; }
.ob-ico{ width:92px; height:92px; margin:8px auto 18px; border-radius:26px; display:flex; align-items:center; justify-content:center; font-size:48px; background:linear-gradient(135deg,#2f6fed,#5aa2f5); box-shadow:0 12px 28px rgba(47,111,237,.25); }
.ob-ico span{ filter:drop-shadow(0 2px 3px rgba(0,0,0,.15)); }
.ob-slide h3{ margin:0 0 10px; font-size:21px; color:#1f2937; }
.ob-slide p{ font-size:14.5px; color:#6b7280; line-height:1.75; margin:0; }
.ob-dots{ margin:22px 0 16px; display:flex; justify-content:center; gap:9px; }
.ob-dot{ width:9px; height:9px; border-radius:50%; background:#e2e7ef; transition:all .2s; }
.ob-dot.active{ width:24px; border-radius:10px; background:#2f6fed; }
.ob-actions .primary{ width:100%; padding:13px; font-size:16px; border-radius:14px; }
@keyframes obFade{ from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:none;} }

/* ---------- 底部导航 ---------- */
#bottom-nav{ position:fixed; left:0; right:0; bottom:0; max-width:560px; margin:0 auto; display:flex; background:rgba(255,255,255,.96); border-top:1px solid #eef1f6; padding:8px 8px calc(8px + env(safe-area-inset-bottom)); z-index:50; backdrop-filter:blur(8px); }
.nav-btn{ flex:1; border:none; background:none; padding:8px 0 6px; font-size:12px; color:#9aa3af; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:4px; font-weight:600; }
.nav-ico{ font-size:21px; line-height:1; filter:grayscale(1); opacity:.65; transition:all .2s; }
.nav-btn.active{ color:#2f6fed; }
.nav-btn.active .nav-ico{ filter:none; opacity:1; transform:translateY(-1px); }

/* ---------- 断网提示条 ---------- */
.offline-banner{ background:#f7c948; color:#3b3b1f; padding:9px 12px; font-size:13.5px; text-align:center; font-weight:600; }

.hidden{ display:none !important; }

/* 汉语拼音统一使用 ToneOZ Quicksnow（开源可免费商用），未安装时回退到通用字体 */
.pinyin,
.pinyin .py,
.wr-py,
.hist-py,
.lesson-sym,
.lesson-sample i {
  font-family: "ToneOZ Quicksnow", "Tone OZ Quicksnow", "Quicksand", "Segoe UI", "Microsoft YaHei", Arial, sans-serif;
}