/* 单词循环 · 移动端优先样式 */
:root{
  --primary:#5046E5; --primary-soft:#EEECFC; --primary-deep:#3B33B8;
  --bg:#F6F7FB; --card:#FFFFFF; --border:#E9EAF2;
  --ink:#16181D; --ink-2:#5A6072; --ink-3:#9AA0B0;
  --green:#10B981; --amber:#F59E0B; --red:#EF4444;
  --radius:20px; --tabbar-h:64px;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
[hidden]{display:none !important;} /* 防止 display:flex 覆盖 hidden 属性 */
html,body{height:100%;}
body{
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Noto Sans SC","Microsoft YaHei",sans-serif;
  background:var(--bg); color:var(--ink); font-size:15px; line-height:1.5;
  overscroll-behavior-y:none;
}
button{font-family:inherit;border:none;background:none;cursor:pointer;color:inherit;}
input,textarea,select{font-family:inherit;font-size:15px;}

#views{max-width:520px;margin:0 auto;padding:0 16px calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 16px);}
.view{display:none;min-height:100vh;padding-top:env(safe-area-inset-top);}
.view.active{display:block;}

/* ---------- 底部标签栏 ---------- */
#tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  display:flex;justify-content:space-around;align-items:stretch;
  max-width:520px;margin:0 auto;height:calc(var(--tabbar-h) + env(safe-area-inset-bottom));
  padding-bottom:env(safe-area-inset-bottom);
  background:rgba(255,255,255,.96);backdrop-filter:blur(10px);
  border-top:1px solid var(--border);
}
.tab{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  color:var(--ink-3);font-size:11px;font-weight:500;}
.tab svg{width:23px;height:23px;}
.tab.on{color:var(--primary);font-weight:700;}

/* ---------- 通用组件 ---------- */
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:18px;}
.btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;
  padding:15px;border-radius:16px;font-size:16px;font-weight:700;
  background:var(--primary);color:#fff;transition:opacity .15s;}
.btn:disabled{opacity:.35;}
.btn.ghost{background:var(--card);color:var(--primary);border:1.5px solid var(--primary);}
.btn.subtle{background:var(--primary-soft);color:var(--primary);}
.btn.danger{background:#FDECEC;color:var(--red);}
.btn.half{width:calc(50% - 6px);display:inline-flex;}
.h1{font-size:22px;font-weight:800;margin:22px 0 4px;}
.sub{font-size:13px;color:var(--ink-2);}
.chip{display:inline-flex;align-items:center;padding:7px 14px;border-radius:999px;
  background:var(--card);border:1px solid var(--border);font-size:13px;color:var(--ink-2);
  white-space:nowrap;}
.chip.on{background:var(--primary);border-color:var(--primary);color:#fff;font-weight:600;}
.row{display:flex;gap:8px;overflow-x:auto;padding:2px;scrollbar-width:none;}
.row::-webkit-scrollbar{display:none;}
.vol{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;
  border-radius:12px;background:var(--primary-soft);color:var(--primary);flex:0 0 38px;}
.vol svg{width:19px;height:19px;}
.vol.mini{width:30px;height:30px;flex-basis:30px;border-radius:9px;}
.vol.mini svg{width:15px;height:15px;}

/* ---------- 学习 ---------- */
.streak-pill{display:inline-flex;align-items:center;gap:5px;background:#FFF4E5;color:#C2660A;
  font-weight:700;font-size:13px;padding:6px 12px;border-radius:999px;}
.plan-num{display:flex;text-align:center;margin:14px 0 6px;}
.plan-num>div{flex:1;}
.plan-num b{display:block;font-size:26px;font-weight:800;}
.plan-num span{font-size:12px;color:var(--ink-3);}

.flash{margin-top:16px;background:var(--card);border:1px solid var(--border);
  border-radius:24px;padding:26px 22px;min-height:380px;display:flex;flex-direction:column;}
.flash .mode-tag{align-self:flex-start;font-size:11px;font-weight:700;letter-spacing:1px;
  padding:4px 10px;border-radius:999px;background:var(--primary-soft);color:var(--primary);}
.flash .mode-tag.review{background:#E5F6FB;color:#0284C7;}
.flash .word{font-size:38px;font-weight:800;text-align:center;margin:18px 0 4px;letter-spacing:.5px;}
.flash .ph-line{display:flex;justify-content:center;align-items:center;gap:10px;margin:6px 0 2px;
  font-size:14px;color:var(--ink-2);flex-wrap:wrap;}
.flash .mn{ text-align:center;color:var(--amber);font-weight:600;font-size:14px;margin-top:2px;}
.sense{margin-top:10px;font-size:15px;}
.sense .pos{color:var(--primary);font-weight:700;margin-right:6px;}
.sense .poscn{color:var(--ink-3);font-size:12px;margin-right:8px;}
.example{margin-top:14px;background:var(--bg);border-radius:14px;padding:12px 14px;font-size:13.5px;}
.example .cn{color:var(--ink-2);margin-top:2px;}
.grades{display:flex;gap:8px;margin-top:auto;padding-top:18px;}
.grades .btn{padding:13px;font-size:14.5px;}
.g-forget{background:#FDECEC;color:var(--red);}
.g-fuzzy{background:#FFF4E5;color:#C2660A;}
.g-know{background:#E5F7F0;color:#0B9163;}
.progress-line{height:6px;border-radius:3px;background:var(--border);overflow:hidden;margin-top:14px;}
.progress-line i{display:block;height:100%;background:var(--primary);border-radius:3px;transition:width .2s;}
.session-head{display:flex;justify-content:space-between;align-items:center;margin-top:18px;
  font-size:13px;color:var(--ink-3);font-weight:600;}
.session-head button{color:var(--ink-3);font-size:13px;font-weight:600;}

/* ---------- 词库 ---------- */
.search-box{display:flex;align-items:center;gap:8px;background:var(--card);border:1px solid var(--border);
  border-radius:14px;padding:10px 14px;margin:12px 0 10px;}
.search-box input{flex:1;border:none;outline:none;background:none;}
.word-row{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--border);
  border-radius:16px;padding:13px 14px;margin-top:8px;cursor:pointer;}
.word-row .w{font-size:16.5px;font-weight:700;}
.word-row .m{font-size:12.5px;color:var(--ink-3);margin-top:1px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:210px;}
.word-row .main{flex:1;min-width:0;}
.word-row .star{color:#D5D7E2;padding:4px;}
.word-row .star.on{color:#F5A623;}
.count-note{font-size:12px;color:var(--ink-3);margin:10px 2px 0;}
.fab{position:fixed;right:18px;bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 18px);
  width:52px;height:52px;border-radius:18px;background:var(--primary);color:#fff;
  font-size:28px;font-weight:300;box-shadow:0 10px 24px -6px rgba(80,70,229,.5);z-index:35;}

/* ---------- 详情底部抽屉 ---------- */
#sheet-mask{position:fixed;inset:0;background:rgba(15,18,25,.45);z-index:50;
  display:flex;align-items:flex-end;justify-content:center;}
#sheet{width:100%;max-width:520px;background:var(--card);border-radius:24px 24px 0 0;
  padding:20px 20px calc(24px + env(safe-area-inset-bottom));max-height:86vh;overflow-y:auto;}
.sheet-grip{width:40px;height:4px;border-radius:2px;background:var(--border);margin:0 auto 14px;}
.sheet-word{display:flex;align-items:baseline;gap:10px;}
.sheet-word h2{font-size:30px;font-weight:800;}
.sheet-star{margin-left:auto;font-size:22px;color:#D5D7E2;}
.sheet-star.on{color:#F5A623;}
.ph-row{display:flex;align-items:center;gap:10px;margin:10px 0 2px;font-size:14px;color:var(--ink-2);}
.mn-line{color:var(--amber);font-weight:600;font-size:14px;margin:6px 0;}
.sheet .cats{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;}
.sheet h3{font-size:13px;color:var(--ink-3);font-weight:700;margin:18px 0 6px;letter-spacing:1px;}
.rec-note{margin-top:14px;font-size:12.5px;color:var(--ink-3);}
.rec-note b{color:var(--ink-2);}

/* ---------- 复习 / 我的 ---------- */
.big-num{font-size:34px;font-weight:800;}
.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px;}
.stat-grid .card{padding:16px;}
.stat-grid b{font-size:24px;font-weight:800;display:block;}
.stat-grid span{font-size:12px;color:var(--ink-3);}
.chart{display:flex;align-items:flex-end;gap:6px;height:90px;margin-top:12px;}
.chart .bar{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px;height:100%;justify-content:flex-end;}
.chart i{display:block;width:100%;max-width:22px;background:var(--primary);border-radius:6px 6px 3px 3px;min-height:2px;}
.chart span{font-size:10px;color:var(--ink-3);}
.set-row{display:flex;align-items:center;justify-content:space-between;padding:14px 0;
  border-bottom:1px solid var(--border);font-size:14.5px;}
.set-row:last-child{border-bottom:none;}
.stepper{display:flex;align-items:center;gap:14px;}
.stepper button{width:30px;height:30px;border-radius:10px;background:var(--primary-soft);
  color:var(--primary);font-size:18px;font-weight:700;display:flex;align-items:center;justify-content:center;}
.seg{display:flex;background:var(--bg);border-radius:10px;padding:3px;}
.seg button{padding:6px 14px;border-radius:8px;font-size:13px;color:var(--ink-2);}
.seg button.on{background:var(--card);color:var(--primary);font-weight:700;box-shadow:0 1px 4px rgba(20,20,40,.08);}

/* ---------- 弹窗 / 提示 ---------- */
#modal-mask{position:fixed;inset:0;background:rgba(15,18,25,.45);z-index:60;
  display:flex;align-items:center;justify-content:center;padding:24px;}
#modal{width:100%;max-width:400px;background:var(--card);border-radius:22px;padding:22px;max-height:82vh;overflow-y:auto;}
#modal h2{font-size:18px;font-weight:800;margin-bottom:14px;}
.field{margin-top:12px;}
.field label{display:block;font-size:12.5px;color:var(--ink-3);font-weight:600;margin-bottom:5px;}
.field input,.field textarea{width:100%;border:1px solid var(--border);border-radius:12px;
  padding:11px 13px;outline:none;background:var(--bg);}
.field textarea{min-height:72px;resize:vertical;}
#toast{position:fixed;left:50%;bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 26px);
  transform:translateX(-50%);background:rgba(22,24,29,.92);color:#fff;font-size:13.5px;
  padding:10px 18px;border-radius:999px;z-index:80;max-width:86vw;text-align:center;}
.empty{ text-align:center;color:var(--ink-3);padding:44px 0;font-size:13.5px;}
.empty b{display:block;font-size:15px;color:var(--ink-2);margin-bottom:4px;}

/* ---------- 深色模式（html[data-theme="dark"]，跟随系统或手动） ---------- */
html[data-theme="dark"]{
  --bg:#14161C; --card:#1E2129; --border:#2B2F3A;
  --ink:#E9EBF2; --ink-2:#A9AFC0; --ink-3:#6E7486;
  --primary:#6C63F0; --primary-soft:#2B2860; --primary-deep:#8B84F5;
}
html[data-theme="dark"] body{background:var(--bg);}
html[data-theme="dark"] #tabbar{background:rgba(20,22,28,.96);}
html[data-theme="dark"] .streak-pill{background:#3A2E14;color:#F5B84F;}
html[data-theme="dark"] .g-forget{background:#3A2226;color:#F87171;}
html[data-theme="dark"] .g-fuzzy{background:#3A2E14;color:#F5B84F;}
html[data-theme="dark"] .g-know{background:#16332B;color:#34D399;}
html[data-theme="dark"] .seg{background:var(--bg);}
html[data-theme="dark"] .seg button.on{background:var(--card);}
html[data-theme="dark"] .btn{background:var(--primary);}
html[data-theme="dark"] .btn.ghost{background:var(--card);color:var(--primary-deep);}
html[data-theme="dark"] .btn.subtle{background:var(--primary-soft);color:#B9B3F8;}
html[data-theme="dark"] .word-row .star{color:#3A3E4A;}
html[data-theme="dark"] .sheet-star{color:#3A3E4A;}
html[data-theme="dark"] .sheet-star.on,
html[data-theme="dark"] .word-row .star.on{color:#F5C044;}
html[data-theme="dark"] .fab{box-shadow:0 10px 24px -6px rgba(0,0,0,.6);}
html[data-theme="dark"] #sheet,html[data-theme="dark"] #modal{background:var(--card);}
html[data-theme="dark"] #toast{background:rgba(60,64,75,.95);}
html[data-theme="dark"] .field input,
html[data-theme="dark"] .field textarea{background:var(--bg);border-color:var(--border);color:var(--ink);}
html[data-theme="dark"] #sheet-mask,
html[data-theme="dark"] #modal-mask{background:rgba(0,0,0,.6);}
.switch{position:relative;width:46px;height:26px;border-radius:999px;background:var(--border);transition:background .2s;flex:0 0 46px;}
.switch.on{background:var(--green);}
.switch i{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:left .2s;}
.switch.on i{left:23px;}