/* ============================================================
   每日单词 · 全局样式
   两套皮肤：默认趣味模式 / body.pure 极简纯学模式
   ============================================================ */
* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
:root{
  --green:#22b07d; --green-d:#178a61; --green-l:#e7f8f0;
  --orange:#ff9344; --orange-l:#fff1e6;
  --blue:#4a90e2; --blue-l:#eaf3ff;
  --purple:#9b6dff; --pink:#ff6b9d; --yellow:#ffc93c;
  --red:#ff5b5b; --ink:#26312b; --ink2:#5c6b62; --ink3:#93a09a;
  --bg:#f3f9f5; --card:#ffffff; --line:#e7efe9;
  --radius:18px; --shadow:0 6px 20px rgba(34,176,125,.10);
  --shadow-big:0 14px 40px rgba(30,120,86,.16);
}
html,body{ height:100%; }
body{
  font-family:"PingFang SC","Microsoft YaHei","Segoe UI",system-ui,sans-serif;
  background:var(--bg); color:var(--ink);
  overflow:hidden; font-size:15px;
}
button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
input,select{ font-family:inherit; font-size:15px; }
#app{ max-width:560px; margin:0 auto; height:100%; position:relative; background:var(--bg);
      box-shadow:0 0 60px rgba(0,0,0,.06); display:flex; flex-direction:column; }

/* ---------- 顶栏 ---------- */
#topbar{ display:flex; align-items:center; justify-content:space-between;
  padding:10px 14px; background:linear-gradient(135deg,var(--green),#3cc58f);
  color:#fff; z-index:30; flex:0 0 auto; }
.tb-left{ display:flex; align-items:center; gap:8px; min-width:0; }
.brand{ font-weight:800; font-size:17px; display:flex; align-items:center; gap:6px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.brand-logo{ font-size:20px; }
#pageTitle{ overflow:hidden; text-overflow:ellipsis; }
.tb-right{ display:flex; align-items:center; gap:8px; flex:0 0 auto; }
.icon-btn{ width:34px; height:34px; border-radius:50%; font-size:19px; color:#fff;
  display:flex; align-items:center; justify-content:center; transition:background .15s; }
.icon-btn:active{ background:rgba(255,255,255,.25); }
.chip{ background:rgba(255,255,255,.22); border-radius:20px; padding:4px 10px;
  font-size:13px; display:inline-flex; align-items:center; gap:3px; }
.chip b{ font-weight:800; }
#btnCam{ position:relative; }
body.cam-on #btnCam{ background:rgba(255,255,255,.3); }

/* ---------- 视图区 ---------- */
#view{ flex:1 1 auto; overflow-y:auto; overflow-x:hidden;
  -webkit-overflow-scrolling:touch; padding:14px 14px 84px; }
.page{ animation:pageIn .28s ease; }
@keyframes pageIn{ from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:none;} }

/* ---------- 底部导航 ---------- */
#tabbar{ position:absolute; left:0; right:0; bottom:0; display:flex;
  background:#fff; border-top:1px solid var(--line); z-index:30;
  padding-bottom:env(safe-area-inset-bottom); }
.tab{ flex:1; text-align:center; padding:8px 0 6px; font-size:11px; color:var(--ink3);
  display:flex; flex-direction:column; align-items:center; gap:2px; }
.tab-ico{ font-size:21px; filter:grayscale(.5); transition:transform .15s; }
.tab.active{ color:var(--green); font-weight:700; }
.tab.active .tab-ico{ filter:none; transform:translateY(-2px) scale(1.12); }

/* ---------- 通用组件 ---------- */
.card{ background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow);
  padding:16px; margin-bottom:14px; }
.row{ display:flex; align-items:center; gap:10px; }
.between{ justify-content:space-between; }
.muted{ color:var(--ink2); } .tiny{ font-size:12px; } .big{ font-size:22px; font-weight:800; }
.center{ text-align:center; }
.mt8{margin-top:8px}.mt12{margin-top:12px}.mt16{margin-top:16px}.mt24{margin-top:24px}
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:6px;
  border-radius:14px; padding:13px 18px; font-size:16px; font-weight:700;
  transition:transform .1s, box-shadow .15s; user-select:none; }
.btn:active{ transform:scale(.96); }
.btn-primary{ background:linear-gradient(135deg,var(--green),#35bd86); color:#fff;
  box-shadow:0 6px 16px rgba(34,176,125,.35); }
.btn-orange{ background:linear-gradient(135deg,var(--orange),#ffab6e); color:#fff;
  box-shadow:0 6px 16px rgba(255,147,68,.35); }
.btn-blue{ background:linear-gradient(135deg,var(--blue),#6ea8ee); color:#fff;
  box-shadow:0 6px 16px rgba(74,144,226,.32); }
.btn-ghost{ background:#f1f6f3; color:var(--ink); }
.btn-danger{ background:#ffecec; color:var(--red); }
.btn-block{ display:flex; width:100%; }
.btn[disabled]{ opacity:.5; pointer-events:none; }
.btn-sm{ padding:8px 14px; font-size:13px; border-radius:10px; }
.pill{ display:inline-block; background:var(--green-l); color:var(--green-d);
  border-radius:20px; padding:3px 12px; font-size:12px; font-weight:700; }
.pill-orange{ background:var(--orange-l); color:#d96c22; }
.pill-blue{ background:var(--blue-l); color:#2f6dc4; }
.pill-gray{ background:#eef2ef; color:var(--ink2); }
.section-title{ font-size:15px; font-weight:800; margin:4px 2px 10px;
  display:flex; align-items:center; gap:6px; }

/* ---------- 首页 ---------- */
.hero{ background:linear-gradient(135deg,#2bb67f,#47d29b); color:#fff;
  border-radius:22px; padding:20px 18px; box-shadow:var(--shadow-big); position:relative;
  overflow:hidden; margin-bottom:14px; }
.hero::after{ content:"🦉"; position:absolute; right:10px; bottom:2px; font-size:74px;
  opacity:.25; }
.hero h2{ font-size:19px; margin-bottom:4px; }
.hero p{ opacity:.92; font-size:13px; }
.hero .stat-inline{ display:flex; gap:16px; margin-top:14px; position:relative; z-index:1; }
.hero .stat-inline b{ font-size:20px; display:block; }
.hero .stat-inline span{ font-size:12px; opacity:.9; }
.progress{ height:10px; background:#e8f3ed; border-radius:10px; overflow:hidden; }
.progress i{ display:block; height:100%; border-radius:10px;
  background:linear-gradient(90deg,var(--green),#54d49a); transition:width .5s; }
.ring-wrap{ display:flex; align-items:center; gap:16px; }
.ring{ --p:0; width:92px; height:92px; border-radius:50%; flex:0 0 auto;
  background:conic-gradient(var(--green) calc(var(--p)*1%), #e6f1ea 0);
  display:flex; align-items:center; justify-content:center; }
.ring i{ width:72px; height:72px; background:#fff; border-radius:50%;
  display:flex; align-items:center; justify-content:center; flex-direction:column;
  font-style:normal; }
.ring i b{ font-size:20px; color:var(--green-d); }
.ring i span{ font-size:10px; color:var(--ink3); }
.tile-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.tile{ background:var(--card); border-radius:16px; padding:12px 4px 10px;
  text-align:center; box-shadow:var(--shadow); transition:transform .12s; }
.tile:active{ transform:scale(.93); }
.tile .t-ico{ font-size:27px; display:block; margin-bottom:5px; }
.tile .t-name{ font-size:12px; font-weight:600; }
.tile .t-badge{ position:absolute; }
.tile{ position:relative; }
.t-badge{ position:absolute; top:5px; right:6px; background:var(--red); color:#fff;
  font-size:10px; border-radius:10px; padding:0 5px; min-width:16px; height:16px;
  display:flex; align-items:center; justify-content:center; font-weight:800; }

/* ---------- 单词卡 / 学习 ---------- */
.word-stage{ text-align:center; padding:18px 8px 6px; }
.word-big{ font-size:46px; font-weight:800; letter-spacing:.5px; color:var(--ink);
  line-height:1.15; word-break:break-word; }
.syl-row{ display:flex; justify-content:center; flex-wrap:wrap; gap:8px; margin:14px 0; }
.syl-chip{ font-size:20px; font-weight:800; background:var(--green-l); color:var(--green-d);
  border-radius:12px; padding:7px 13px; animation:pop .3s ease both; }
.syl-chip:nth-child(2){ animation-delay:.08s; } .syl-chip:nth-child(3){ animation-delay:.16s; }
.syl-chip:nth-child(4){ animation-delay:.24s; } .syl-chip:nth-child(5){ animation-delay:.32s; }
@keyframes pop{ from{transform:scale(.5); opacity:0;} to{transform:scale(1); opacity:1;} }
.phonetic{ font-size:17px; color:var(--ink2); margin-top:4px; }
.pos-mean{ font-size:18px; margin-top:8px; font-weight:600; }
.example{ background:#f6faf8; border-radius:12px; padding:11px 14px; margin-top:14px;
  font-size:14px; line-height:1.7; text-align:left; }
.example .zh{ color:var(--ink2); font-size:13px; }
.speak-btn{ width:64px; height:64px; border-radius:50%; margin:10px auto 4px;
  background:linear-gradient(135deg,var(--blue),#6ea8ee); color:#fff; font-size:28px;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 20px rgba(74,144,226,.4); }
.speak-btn.small{ width:42px; height:42px; font-size:18px; box-shadow:none; margin:0; }
.speak-btn.tiny{ width:22px; height:22px; font-size:10px; box-shadow:none; margin:0 1px;
  display:inline-flex; vertical-align:middle; }
.speak-btn.listening{ animation:pulse 1.1s infinite; }
@keyframes pulse{ 0%{box-shadow:0 0 0 0 rgba(74,144,226,.5);} 70%{box-shadow:0 0 0 18px rgba(74,144,226,0);} 100%{box-shadow:0 0 0 0 rgba(74,144,226,0);} }
.steps{ display:flex; justify-content:center; gap:7px; margin-bottom:12px; }
.steps i{ width:9px; height:9px; border-radius:50%; background:#d6e2db; transition:all .25s; }
.steps i.on{ background:var(--green); transform:scale(1.25); }
.steps i.done{ background:var(--green); }
.affix-tags{ display:flex; flex-wrap:wrap; gap:6px; justify-content:center; margin-top:8px; }
.score-stars{ font-size:34px; letter-spacing:6px; margin:6px 0; }
.star-on{ color:var(--yellow); } .star-off{ color:#dde5e0; }
.spell-letter{ display:inline-flex; align-items:center; justify-content:center;
  min-width:38px; height:50px; border-bottom:3px solid var(--green);
  font-size:26px; font-weight:800; margin:0 3px; text-transform:lowercase; }
.letter-pad{ display:grid; grid-template-columns:repeat(7,1fr); gap:6px; margin-top:14px; }
.letter-pad button{ background:#fff; border-radius:9px; padding:11px 0; font-size:17px;
  font-weight:700; box-shadow:0 2px 0 #d8e4dd; }
.letter-pad button:active{ transform:translateY(2px); box-shadow:none; }
.kbd-input{ width:100%; border:2px solid var(--line); border-radius:14px; padding:14px;
  font-size:20px; text-align:center; outline:none; letter-spacing:2px; }
.kbd-input:focus{ border-color:var(--green); }

/* ---------- 练习题 ---------- */
.q-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
.q-prompt{ font-size:19px; font-weight:800; text-align:center; margin:14px 0 6px; }
.q-sub{ text-align:center; color:var(--ink2); font-size:13px; margin-bottom:16px; }
.opts{ display:flex; flex-direction:column; gap:10px; }
.opt{ background:#fff; border:2px solid var(--line); border-radius:14px; padding:14px 16px;
  font-size:16px; text-align:left; display:flex; align-items:center; gap:10px;
  transition:all .15s; font-weight:600; }
.opt .opt-key{ width:26px; height:26px; border-radius:50%; background:#eef3f0;
  display:flex; align-items:center; justify-content:center; font-size:13px; flex:0 0 auto; }
.opt:active{ transform:scale(.98); }
.opt.correct{ border-color:var(--green); background:var(--green-l); color:var(--green-d); }
.opt.wrong{ border-color:var(--red); background:#ffefef; color:var(--red); }
.opt.disabled{ pointer-events:none; opacity:.75; }
.chips-order{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin:16px 0;
  min-height:52px; padding:8px; border:2px dashed var(--line); border-radius:14px; }
.chip-avail{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
.chip-word{ background:var(--blue-l); color:#2f6dc4; border-radius:10px; padding:9px 15px;
  font-weight:800; font-size:17px; }
.chip-word.used{ opacity:.3; pointer-events:none; }
.chip-word.slot{ background:var(--green-l); color:var(--green-d); }
.feedback{ text-align:center; font-size:17px; font-weight:800; margin-top:14px; min-height:26px; }
.feedback.good{ color:var(--green-d); } .feedback.bad{ color:var(--red); }

/* ---------- BOSS 战 ---------- */
.boss-arena{ background:linear-gradient(180deg,#3a2c5e,#6b4e9e); border-radius:22px;
  padding:18px; color:#fff; text-align:center; position:relative; overflow:hidden; }
.boss-emoji{ font-size:72px; margin:8px 0; display:inline-block; }
.boss-emoji.hit{ animation:shake .4s; }
@keyframes shake{ 0%,100%{transform:translateX(0)} 25%{transform:translateX(-10px) rotate(-5deg)}
  75%{transform:translateX(10px) rotate(5deg)} }
.hp-bar{ height:14px; background:rgba(0,0,0,.3); border-radius:10px; overflow:hidden; margin:6px 0; }
.hp-bar i{ display:block; height:100%; transition:width .4s; }
.hp-boss i{ background:linear-gradient(90deg,#ff5b5b,#ff8a8a); }
.hp-me i{ background:linear-gradient(90deg,#4be08a,#88f0b4); }
.float-dmg{ position:absolute; font-weight:900; font-size:22px; color:var(--yellow);
  animation:dmgUp 1s ease forwards; pointer-events:none; }
@keyframes dmgUp{ from{opacity:1; transform:translateY(0);} to{opacity:0; transform:translateY(-60px);} }

/* ---------- 花园 ---------- */
.garden-bg{ background:linear-gradient(180deg,#bfeaff 0%,#dff5e1 55%,#a9dc95 100%);
  border-radius:22px; padding:16px; margin-bottom:14px; }
.plot-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.plot{ background:rgba(255,255,255,.55); border-radius:16px; aspect-ratio:1;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  font-size:40px; position:relative; border:2px dashed rgba(40,120,70,.35); }
.plot.empty{ font-size:22px; color:#3d7a4f; }
.plot .plot-tag{ position:absolute; bottom:5px; font-size:10px; color:#2d5e3c; font-weight:700; }
.plot.ready{ box-shadow:0 0 0 3px var(--yellow); animation:glow 1.4s infinite; }
@keyframes glow{ 50%{ box-shadow:0 0 0 6px rgba(255,201,60,.45);} }

/* ---------- 设置 / 列表 ---------- */
.form-row{ display:flex; align-items:center; justify-content:space-between; padding:13px 2px;
  border-bottom:1px solid var(--line); gap:10px; }
.form-row:last-child{ border-bottom:none; }
.form-row label{ font-weight:600; }
.seg{ display:flex; background:#eef3f0; border-radius:11px; padding:3px; gap:3px; }
.seg button{ border-radius:8px; padding:7px 13px; font-size:13px; font-weight:700; color:var(--ink2); }
.seg button.on{ background:#fff; color:var(--green-d); box-shadow:0 2px 6px rgba(0,0,0,.08); }
select,.sel{ border:1px solid var(--line); border-radius:10px; padding:8px 10px; background:#fff;
  font-weight:600; color:var(--ink); }
.switch{ width:48px; height:27px; border-radius:20px; background:#cfdbd4; position:relative;
  transition:background .2s; flex:0 0 auto; }
.switch::after{ content:""; position:absolute; top:3px; left:3px; width:21px; height:21px;
  border-radius:50%; background:#fff; transition:left .2s; box-shadow:0 1px 4px rgba(0,0,0,.25); }
.switch.on{ background:var(--green); } .switch.on::after{ left:24px; }
.word-list-item{ display:flex; align-items:center; justify-content:space-between;
  background:#fff; border-radius:13px; padding:11px 14px; margin-bottom:8px; box-shadow:var(--shadow); }
.word-list-item .w-en{ font-weight:800; font-size:16px; }
.word-list-item .w-zh{ color:var(--ink2); font-size:13px; }
.dots{ display:flex; gap:4px; }
.dots i{ width:8px; height:8px; border-radius:50%; background:#dfe8e3; }
.dots i.learned{ background:var(--green); } .dots i.due{ background:var(--orange); }
.empty-state{ text-align:center; padding:44px 20px; color:var(--ink3); }
.empty-state .es-ico{ font-size:58px; display:block; margin-bottom:10px; }

/* ---------- 摄像头浮窗 ---------- */
#camPanel{ position:fixed; right:12px; bottom:74px; width:172px; z-index:40;
  border-radius:14px; overflow:hidden; box-shadow:var(--shadow-big); background:#202b26; }
#app ~ #camPanel{ }
#camVideo, #camCanvas{ width:172px; height:129px; object-fit:cover; display:block; }
#camCanvas{ position:absolute; top:0; left:0; }
#camPanel{ position:absolute; bottom:74px; }
#camStatus{ position:absolute; left:0; right:0; bottom:0; padding:5px 8px;
  background:linear-gradient(transparent,rgba(0,0,0,.7)); color:#fff; font-size:11px;
  display:flex; align-items:center; gap:5px; }
.cam-dot{ width:8px; height:8px; border-radius:50%; background:#7fd8a5; flex:0 0 auto; }
#camStatus.warn{ color:#ffd3a8; } #camStatus.warn .cam-dot{ background:var(--orange); }
#camStatus.bad{ color:#ffb0b0; } #camStatus.bad .cam-dot{ background:var(--red); }
#camClose{ position:absolute; top:4px; right:4px; width:22px; height:22px; border-radius:50%;
  background:rgba(0,0,0,.45); color:#fff; font-size:15px; line-height:1; }

/* ---------- 弹层 / Toast ---------- */
#toast{ position:fixed; top:64px; left:50%; transform:translateX(-50%);
  background:rgba(30,42,36,.92); color:#fff; padding:11px 20px; border-radius:24px;
  z-index:100; font-size:14px; animation:toastIn .3s; max-width:88%; text-align:center; }
@keyframes toastIn{ from{opacity:0; transform:translate(-50%,-12px);} to{opacity:1; transform:translate(-50%,0);} }
#modalMask{ position:fixed; inset:0; background:rgba(25,40,32,.45); z-index:90;
  display:flex; align-items:center; justify-content:center; padding:24px; }
#modalMask[hidden]{ display:none; }
#toast[hidden]{ display:none; }
#modalBox{ background:#fff; border-radius:20px; padding:22px; width:100%; max-width:420px;
  max-height:82vh; overflow-y:auto; animation:pop .25s ease; }
#modalBox h3{ font-size:18px; margin-bottom:10px; }
.result-emoji{ font-size:64px; text-align:center; display:block; margin:6px 0; }
.stat-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:14px 0; }
.stat-grid .sg{ background:#f5f9f7; border-radius:13px; padding:12px 6px; text-align:center; }
.stat-grid .sg b{ font-size:21px; display:block; color:var(--green-d); }
.stat-grid .sg span{ font-size:12px; color:var(--ink2); }

/* ---------- 日历/报告 ---------- */
.cal{ display:grid; grid-template-columns:repeat(10,1fr); gap:5px; }
.cal i{ aspect-ratio:1; border-radius:5px; background:#eaf0ec; }
.cal i.l1{ background:#bde8d4; } .cal i.l2{ background:#7ed3ac; }
.cal i.l3{ background:#39bb83; } .cal i.l4{ background:#1d9968; }
.plan-table{ width:100%; border-collapse:collapse; font-size:13px; }
.plan-table th,.plan-table td{ border:1px solid var(--line); padding:8px 6px; text-align:center; }
.plan-table th{ background:var(--green-l); color:var(--green-d); }
.heat-dim{ color:var(--ink3); }
.bar-row{ display:flex; align-items:center; gap:8px; margin:7px 0; font-size:13px; }
.bar-row label{ width:72px; flex:0 0 auto; }
.bar-row .bar{ flex:1; height:12px; background:#eef3f0; border-radius:8px; overflow:hidden; }
.bar-row .bar i{ display:block; height:100%; background:var(--green); }
.bar-row span{ width:38px; text-align:right; flex:0 0 auto; }

/* ---------- PK ---------- */
.pk-arena{ background:linear-gradient(135deg,#ff7e7e,#ffb067); border-radius:22px;
  padding:16px; color:#fff; margin-bottom:14px; }
.pk-fighters{ display:flex; justify-content:space-around; align-items:center; font-size:40px; }
.vs{ font-size:22px; font-weight:900; font-style:italic; }
.pk-progress{ display:flex; gap:3px; margin-top:10px; }
.pk-progress i{ flex:1; height:9px; border-radius:5px; background:rgba(255,255,255,.3); }
.pk-progress i.me{ background:#fff; } .pk-progress i.foe{ background:#5b2a2a; }

/* ---------- 阅读理解/卡牌 ---------- */
.passage{ line-height:1.9; font-size:15px; background:#f7faf8; border-radius:13px;
  padding:14px 16px; }
.card-pattern{ background:linear-gradient(135deg,#fff6e8,#ffeef4); border-radius:14px;
  padding:14px 16px; margin-bottom:10px; }
.card-pattern .pat{ font-size:22px; font-weight:900; color:var(--orange);
  letter-spacing:2px; }
.card-pattern .ex{ font-weight:700; margin-top:4px; }
.audio-bar{ display:flex; align-items:center; gap:12px; justify-content:center;
  background:var(--blue-l); border-radius:16px; padding:14px; margin-bottom:12px; }
.eq{ display:flex; gap:3px; align-items:flex-end; height:26px; }
.eq i{ width:4px; background:var(--blue); border-radius:2px; animation:eq 0.8s infinite ease-in-out; }
.eq i:nth-child(2){animation-delay:.15s}.eq i:nth-child(3){animation-delay:.3s}
.eq i:nth-child(4){animation-delay:.45s}.eq i:nth-child(5){animation-delay:.2s}
@keyframes eq{ 0%,100%{height:6px;} 50%{height:24px;} }

/* ---------- 撒花 ---------- */
.confetti{ position:fixed; top:-12px; z-index:99; border-radius:2px; pointer-events:none;
  animation:fall linear forwards; }
@keyframes fall{ to{ transform:translateY(110vh) rotate(720deg); } }

/* ---------- 极简纯学模式 ---------- */
body.pure{ --bg:#ffffff; --line:#e3e3e3; --shadow:none; }
body.pure #topbar{ background:#222; }
body.pure .hero{ background:#222; box-shadow:none; }
body.pure .hero::after{ display:none; }
body.pure .ring{ background:conic-gradient(#333 calc(var(--p)*1%), #eee 0); }
body.pure .ring i b{ color:#222; }
body.pure .btn-primary{ background:#222; box-shadow:none; }
body.pure .btn-orange,body.pure .btn-blue{ background:#444; box-shadow:none; }
body.pure .card,.tile,.word-list-item{ box-shadow:none; border:1px solid var(--line); }
body.pure .syl-chip{ background:#eee; color:#222; }
body.pure .garden-bg{ display:none; }
body.pure .progress i{ background:#333; }
body.pure .boss-arena{ background:#222; }
body.pure .speak-btn{ background:#333; box-shadow:none; }
body.pure .chip-word.slot{ background:#ddd; color:#222; }
body.pure .chip-word{ background:#eee; color:#333; }

/* ---------- 打印 ---------- */
@media print{
  body{ overflow:visible; background:#fff; }
  #topbar,#tabbar,#camPanel,#toast,#modalMask,.no-print{ display:none !important; }
  #app{ box-shadow:none; max-width:none; }
  #view{ overflow:visible; padding:0; }
  #printArea{ display:block !important; }
  .print-hide{ display:none !important; }
}
#printArea{ display:none; }
@media (max-width:380px){
  .word-big{ font-size:38px; }
  .tile-grid{ gap:7px; }
}

/* ---------- 词典式单词详解 ---------- */
.dict{ margin-top:14px; text-align:left; }
.dict-head{ margin-bottom:10px; }
.dict-word{ font-size:30px; font-weight:900; color:var(--ink); letter-spacing:.5px; }
.dict-ipa{ display:flex; flex-wrap:wrap; gap:10px; margin-top:10px; }
.ipa-pill{ display:inline-flex; align-items:center; gap:7px; border:none; cursor:pointer;
  background:#f2f3f5; border-radius:20px; padding:7px 14px 7px 9px; font-size:15px;
  color:var(--ink); transition:background .15s; }
.ipa-pill:active{ background:#e3e7ec; }
.ipa-flag{ font-size:13px; color:#8a8f99; font-weight:700; }
.ipa-text{ color:#666d78; }
.ipa-spk{ color:#ff5a5f; font-size:13px; }
.dict-block{ margin-top:16px; border-top:1px solid #eef1f4; padding-top:12px; }
.dict-block:first-of-type{ border-top:none; padding-top:4px; }
.dict-block-title{ font-size:15px; font-weight:800; color:var(--ink); margin-bottom:10px; }
.dict-ico{ margin-right:5px; }
.dict-pos-group{ display:flex; gap:10px; margin-bottom:12px; }
.dict-pos{ flex:0 0 auto; width:30px; color:#9aa0aa; font-style:italic;
  font-size:15px; font-weight:700; padding-top:2px; }
.dict-senses{ flex:1; }
.dict-sense{ margin-bottom:10px; }
.dict-cn{ font-size:16px; line-height:1.65; color:var(--ink); font-weight:600; }
.dict-num{ display:inline-block; min-width:16px; color:#9aa0aa; font-style:normal;
  font-size:13px; font-weight:700; margin-right:4px; }

/* ---------- 不规则动词背诵 ---------- */
.irreg-card{ background:linear-gradient(135deg,#fdf6ec,#fff8f0); border-radius:18px;
  padding:18px 20px; border:2px solid #f5e6c8; }
.irreg-row{ display:flex; align-items:center; gap:10px; padding:8px 0; }
.irreg-row.v{ border-bottom:1px dashed #e8d8b8; padding-bottom:12px; }
.irreg-row.pt{ padding-top:12px; }
.irreg-label{ flex:0 0 70px; font-size:12px; color:#b4895c; font-weight:700;
  text-transform:uppercase; letter-spacing:.5px; }
.irreg-val{ font-size:20px; font-weight:800; color:#5a3f1c;
  font-family:'Georgia',serif; }
.irreg-row.pp .irreg-val{ color:#7a3f5c; }
.irreg-row.pt .irreg-val{ color:#3f5c7a; }
.inpt{ width:100%; border:1.5px solid #e0d0b8; border-radius:12px; padding:10px 14px;
  font-size:16px; background:#fff; outline:none; transition:border-color .15s; }
.inpt:focus{ border-color:#d8a86a; }
/* 三列表格 */
.irreg-table{ overflow-x:auto; }
.iv-tbl{ width:100%; border-collapse:separate; border-spacing:0; font-size:13px; }
.iv-tbl thead th{ background:linear-gradient(135deg,#f5e6c8,#ead4a8);
  color:#5a3f1c; font-weight:800; padding:8px 5px; text-align:left;
  position:sticky; top:0; border-bottom:2px solid #d8b888; }
.iv-tbl tbody td{ padding:6px 5px; border-bottom:1px solid #f0e8d8; vertical-align:middle; }
.iv-tbl .speak-cell{ padding-left:2px; padding-right:2px; text-align:center; }
.iv-tbl tbody tr:hover{ background:#fdf6ec; }
.iv-tbl .idx{ color:#b4895c; font-weight:700; text-align:center; }
.iv-tbl .word{ font-weight:700; color:#5a3f1c; font-size:14.5px; }
.iv-tbl .ipa{ color:#8a6f4a; font-size:12px; }
.iv-tbl .cn{ color:#6a5440; }
.iv-tbl .pt{ color:#3f5c7a; font-weight:600; font-family:'Georgia',serif; }
.iv-tbl .pp{ color:#7a3f5c; font-weight:600; font-family:'Georgia',serif; }
.ml2{ margin-left:4px; }
/* 变形+音标合成显示 */
.form-item{ display:inline-block; }
.form-ipa{ color:#8a6f4a; font-size:11.5px; font-family:'Georgia',serif; opacity:0.85; }
.fw700{ font-weight:700; }
.irreg-row .irreg-val{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; }

/* ===== 错题重练横幅 ===== */
.drill-banner{ display:flex; align-items:center; justify-content:space-between; gap:10px;
  background:linear-gradient(135deg,#fff4e0,#ffe8c2); border:1px solid #f0c674; }

/* ===== 错题本 ===== */
.wb-head{ display:flex; align-items:center; justify-content:space-between; }
.wb-stat{ display:flex; align-items:baseline; gap:6px; }
.wb-num{ font-size:32px; font-weight:800; color:var(--red,#e05a5a); }
.wb-tabs{ flex-wrap:wrap; }
.wb-tabs button{ position:relative; }
.wb-badge{ display:inline-block; min-width:18px; padding:0 5px; margin-left:3px;
  background:var(--red,#e05a5a); color:#fff; border-radius:9px; font-size:11px; line-height:17px; }
.wb-item{ align-items:flex-start; }
.wb-main{ flex:1; min-width:0; }
.wb-title-row{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.wb-type{ flex-shrink:0; font-size:11px; }
.wb-title{ font-weight:700; font-size:15.5px; color:var(--ink,#333); word-break:break-word; }
.wb-sub{ margin-top:4px; font-size:13.5px; color:#2f7d4f; font-weight:600; }
.wb-meta{ margin-top:4px; display:flex; flex-wrap:wrap; gap:2px; }
.wb-cnt{ color:var(--red,#e05a5a); font-weight:600; }
.wb-del{ flex-shrink:0; width:28px; height:28px; border:none; background:transparent;
  color:#b6b6b6; font-size:15px; border-radius:50%; cursor:pointer; transition:.15s; }
.wb-del:hover{ background:#fdecec; color:var(--red,#e05a5a); }
.wb-empty{ padding:36px 16px; }
.wb-empty div:first-child{ animation:wbpop .4s ease; }
@keyframes wbpop{ 0%{transform:scale(.5);opacity:0} 70%{transform:scale(1.12)} 100%{transform:scale(1);opacity:1} }
.dict-ex{ margin-top:5px; padding-left:20px; position:relative; }
.dict-ex::before{ content:''; position:absolute; left:4px; top:9px; width:6px; height:6px;
  border-radius:50%; background:#c6ccd4; }
.dict-ex-en{ font-size:14.5px; line-height:1.6; color:#4a5160; cursor:pointer; }
.dict-ex-en:active{ color:var(--blue); }
.dict-ex-spk{ color:#ff5a5f; font-size:12px; margin-left:3px; }
.dict-ex-zh{ font-size:13px; line-height:1.6; color:#9aa0aa; margin-top:1px; }
.dict-sub-list{ display:flex; flex-direction:column; gap:10px; }
.dict-sub{ background:#f7f9fb; border-radius:12px; padding:10px 13px; }
.dict-sub-ph{ background:#f4f9f5; }
.dict-sub-head{ display:flex; flex-wrap:wrap; align-items:baseline; gap:7px; }
.dict-sub-w{ font-size:15.5px; color:var(--blue); cursor:pointer; }
.dict-sub-pos{ font-size:12px; color:#fff; background:#9aa7b8; border-radius:5px;
  padding:1px 7px; font-style:italic; }
.dict-sub-cn{ font-size:14px; color:var(--ink2); }
.dict-sub .dict-ex{ margin-top:6px; padding-left:16px; }
.dict-tip{ font-size:14px; line-height:1.8; color:var(--ink2); }
.dict-note{ margin-top:14px; padding:9px 13px; background:#f7f9fb; border-radius:10px;
  font-size:12.5px; color:#9aa0aa; text-align:center; }

/* ===== 单词 PK：对手状态条 / 结算横幅 ===== */
.pk-foe-think{ margin-top:8px; padding:6px 12px; border-radius:999px;
  background:#fff1e8; color:#c1572a; font-size:13px; font-weight:600;
  display:flex; align-items:center; gap:2px; }
.pk-foe-think[hidden]{ display:none; }
.pk-dots{ display:inline-flex; margin-left:2px; }
.pk-dots i{ font-style:normal; animation:pkdot 1.2s infinite; }
.pk-dots i:nth-child(2){ animation-delay:.2s; }
.pk-dots i:nth-child(3){ animation-delay:.4s; }
@keyframes pkdot{ 0%,60%,100%{opacity:.2} 30%{opacity:1} }
.pk-settle{ margin-top:10px; padding:11px 14px; border-radius:12px;
  text-align:center; font-weight:700; font-size:16px; animation:pkpop .25s ease; }
.pk-win{ background:#e2f7ec; color:#178a61; }
.pk-lose{ background:#ffe9e3; color:#d9532e; }
.pk-miss{ background:#eef2ef; color:#777; }
@keyframes pkpop{ 0%{transform:scale(.85);opacity:0} 70%{transform:scale(1.04)} 100%{transform:scale(1);opacity:1} }

/* ===== 磨耳朵：派生词/词组拓展区 ===== */
.listen-ext{ text-align:left; background:#f7f9fb; border:1px solid #e8edf3;
  border-radius:12px; padding:10px 12px; }
.l-ext-row{ font-size:14px; line-height:1.5; padding:3px 2px; cursor:pointer;
  border-radius:8px; }
.l-ext-row:active{ background:#eaf2ff; }
.l-ext-row b{ color:var(--green-d); }

/* ===== 按单元背诵：单元卡片 ===== */
.unit-card{ transition:box-shadow .2s, transform .2s; }
.unit-card:active{ transform:scale(.995); }
.word-preview{ display:flex; flex-wrap:wrap; gap:6px; }
.word-mini{ display:inline-block; padding:2px 9px; border-radius:10px;
  background:#f0f5ff; color:#3a6ab0; font-size:12.5px; font-weight:600; }
.word-mini-more{ background:#eef2ef; color:var(--ink2,#777); }

/* ===== 套题格子（语法/阅读/派生词） ===== */
.set-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-top:8px; }
.set-card{ background:var(--card); border:2px solid var(--line); border-radius:14px;
  padding:12px 10px; text-align:center; position:relative; transition:all .2s; }
.set-card:active{ transform:scale(.97); border-color:var(--green); }
.set-num{ font-size:16px; font-weight:700; color:var(--ink); }
.set-best{ margin-top:6px; font-size:12px; }
.set-arrow{ position:absolute; right:10px; top:50%; transform:translateY(-50%);
  color:var(--green); font-size:14px; opacity:.5; }

/* ===== 适当形式填空 ===== */
.q-sentence{ background:#f7f9fb; border:1px solid #e8edf3; border-radius:12px;
  padding:10px 14px; margin-top:6px; }
.hint-pill{ font-size:13px; }