/* ===================== 千词 · mobile web ===================== */
:root{
  --bg:#F7F5F0; --surface:#FFFFFF; --surface2:#F0EDE6;
  --ink:#232830; --muted:#6C7280; --line:#E4E0D6;
  --accent:#3A5C94; --accent-ink:#FFFFFF; --accent-soft:#E8EDF6;
  --know:#2E7D5B; --know-soft:#E4F0EA;
  --no:#B94A3B; --no-soft:#F6E7E3;
  --easy:#96742A; --easy-soft:#F4EDDC;
  --shadow:0 1px 2px rgba(35,40,48,.06),0 6px 20px rgba(35,40,48,.07);
  --shadow-lg:0 2px 6px rgba(35,40,48,.08),0 14px 40px rgba(35,40,48,.12);
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#14171D; --surface:#1D222B; --surface2:#232936;
    --ink:#E9E7E0; --muted:#98A0AE; --line:#313847;
    --accent:#7FA3DB; --accent-ink:#131722; --accent-soft:#26324A;
    --know:#5CB48D; --know-soft:#1F3A30;
    --no:#D97B6C; --no-soft:#40261F;
    --easy:#C9A75B; --easy-soft:#3A321F;
    --shadow:0 1px 2px rgba(0,0,0,.35),0 8px 24px rgba(0,0,0,.35);
    --shadow-lg:0 2px 8px rgba(0,0,0,.4),0 16px 44px rgba(0,0,0,.45);
  }
}
:root[data-theme="light"]{
  --bg:#F7F5F0; --surface:#FFFFFF; --surface2:#F0EDE6;
  --ink:#232830; --muted:#6C7280; --line:#E4E0D6;
  --accent:#3A5C94; --accent-ink:#FFFFFF; --accent-soft:#E8EDF6;
  --know:#2E7D5B; --know-soft:#E4F0EA;
  --no:#B94A3B; --no-soft:#F6E7E3;
  --easy:#96742A; --easy-soft:#F4EDDC;
  --shadow:0 1px 2px rgba(35,40,48,.06),0 6px 20px rgba(35,40,48,.07);
  --shadow-lg:0 2px 6px rgba(35,40,48,.08),0 14px 40px rgba(35,40,48,.12);
}
:root[data-theme="dark"]{
  --bg:#14171D; --surface:#1D222B; --surface2:#232936;
  --ink:#E9E7E0; --muted:#98A0AE; --line:#313847;
  --accent:#7FA3DB; --accent-ink:#131722; --accent-soft:#26324A;
  --know:#5CB48D; --know-soft:#1F3A30;
  --no:#D97B6C; --no-soft:#40261F;
  --easy:#C9A75B; --easy-soft:#3A321F;
  --shadow:0 1px 2px rgba(0,0,0,.35),0 8px 24px rgba(0,0,0,.35);
  --shadow-lg:0 2px 8px rgba(0,0,0,.4),0 16px 44px rgba(0,0,0,.45);
}

*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;height:100%}
body{
  background:var(--bg); color:var(--ink);
  font-family:"Hiragino Sans","PingFang SC",-apple-system,"Segoe UI",sans-serif;
  font-size:15px; line-height:1.6; -webkit-font-smoothing:antialiased;
  overscroll-behavior-y:none;
}
.jp{font-family:"Hiragino Mincho ProN","Yu Mincho","Songti SC","Songti TC",serif}
button{font:inherit; cursor:pointer; border:none; background:none; color:inherit; margin:0}
input,select{font:inherit; color:inherit}
button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:6px}
@media (prefers-reduced-motion: reduce){ *{animation:none!important; transition:none!important} }
ruby rt{font-size:.5em; color:var(--muted); font-weight:400}

/* ===================== app shell ===================== */
.app{
  display:flex; flex-direction:column;
  height:100vh; height:100dvh; max-width:520px; margin:0 auto;
  position:relative; background:var(--bg);
}
.topbar{
  flex:none; padding:calc(env(safe-area-inset-top) + 12px) 18px 10px;
  display:flex; align-items:center; gap:12px;
  background:var(--bg);
  position:sticky; top:0; z-index:20;
}
.topbar .ttl{font-size:19px; font-weight:700; letter-spacing:.01em}
.topbar .brandmark{display:flex; align-items:center; gap:8px}
.topbar .brandmark svg{color:var(--accent); flex:none}
.topbar .spacer{flex:1}

/* direction segmented toggle */
.dirtog{display:flex; background:var(--surface2); border-radius:10px; padding:3px; gap:2px}
.dirtog button{padding:6px 13px; border-radius:8px; font-size:13px; color:var(--muted); font-weight:600; white-space:nowrap; transition:background .15s,color .15s}
.dirtog button.on{background:var(--accent); color:var(--accent-ink)}

.screens{flex:1; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch}
.screen{display:none; padding:6px 18px 24px}
.screen.on{display:block; animation:fade .22s ease}
@keyframes fade{from{opacity:0; transform:translateY(5px)} to{opacity:1; transform:none}}

.subhint{font-size:12.5px; color:var(--muted); margin:2px 0 14px; line-height:1.6}
.subhint b{color:var(--ink); font-weight:600}

/* ===================== bottom tab bar ===================== */
.tabbar{
  flex:none; display:flex;
  background:var(--surface); border-top:1px solid var(--line);
  padding:6px 6px calc(env(safe-area-inset-bottom) + 6px);
  z-index:30;
}
.tabbar button{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:6px 0 4px; color:var(--muted); font-size:11px; font-weight:600;
  position:relative; transition:color .15s;
}
.tabbar button svg{width:23px; height:23px}
.tabbar button.on{color:var(--accent)}
.tabbar button .badge{
  position:absolute; top:2px; left:calc(50% + 7px);
  min-width:16px; height:16px; padding:0 4px; border-radius:99px;
  background:var(--no); color:#fff; font-size:10px; font-weight:700;
  display:flex; align-items:center; justify-content:center; line-height:1;
}

/* ===================== stats strip ===================== */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin:6px 0 16px}
.stat{background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:10px 8px; text-align:center}
.stat.hl{border-color:transparent; background:var(--accent-soft)}
.stat .v{font-size:19px; font-weight:700; font-variant-numeric:tabular-nums; line-height:1.1}
.stat.hl .v{color:var(--accent)}
.stat .k{font-size:10.5px; color:var(--muted); margin-top:3px; letter-spacing:.02em}

/* ===================== card deck ===================== */
.deckwrap{display:flex; flex-direction:column; min-height:calc(100dvh - 210px)}
.progress{display:flex; align-items:center; gap:10px; margin-bottom:12px; font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums}
.bar{flex:1; height:5px; border-radius:3px; background:var(--surface2); overflow:hidden}
.bar i{display:block; height:100%; background:var(--accent); border-radius:3px; transition:width .3s ease}

.card{
  background:var(--surface); border:1px solid var(--line); border-radius:18px;
  box-shadow:var(--shadow); padding:26px 22px 22px;
  display:flex; flex-direction:column; flex:1; position:relative;
}
.card.flip{animation:flip .28s ease}
.card > .etym-toggle{
  position:absolute; top:12px; right:12px; width:34px; height:34px; border-radius:10px;
  color:var(--muted); font-size:17px; opacity:.55;
  display:inline-flex; align-items:center; justify-content:center;
  transition:background .12s, color .12s, opacity .12s;
}
.card > .etym-toggle:active{background:var(--surface2)}
.card > .etym-toggle.on{color:var(--easy); opacity:1}
@keyframes flip{from{opacity:0; transform:translateY(8px) scale(.99)} to{opacity:1; transform:none}}
.stage-tag{
  align-self:flex-start; font-size:11.5px; padding:3px 11px; border-radius:99px;
  background:var(--accent-soft); color:var(--accent); font-weight:600; margin-bottom:4px;
}
.word-main{font-size:min(13vw,52px); line-height:1.3; margin:auto 0; text-align:center; text-wrap:balance; padding:14px 0}
.word-main.small{font-size:min(9vw,34px)}
.word-main.tap{cursor:pointer; -webkit-tap-highlight-color:transparent; transition:opacity .12s, transform .06s}
.word-main.tap:active{opacity:.6; transform:scale(.99)}
.tap-hint b{color:var(--accent); font-weight:600}
.card .freq{font-size:12px; color:var(--muted); text-align:center; letter-spacing:.04em; font-variant-numeric:tabular-nums}
.enhint{font-size:14px; color:var(--muted); text-align:center; margin-top:6px}

.btnrow{display:flex; gap:9px; margin-top:20px}
.abtn{flex:1; padding:15px 0; border-radius:13px; font-size:15.5px; font-weight:600; text-align:center; transition:filter .12s, transform .05s}
.abtn:active{transform:scale(.97)}
.abtn.know{background:var(--know-soft); color:var(--know)}
.abtn.no{background:var(--no-soft); color:var(--no)}
.abtn.easy{background:var(--easy-soft); color:var(--easy)}
.abtn.primary{background:var(--accent); color:var(--accent-ink)}
.abtn.ghost{background:var(--surface2); color:var(--muted)}

.tap-hint{text-align:center; font-size:12px; color:var(--muted); margin-top:12px}

/* card back */
.result-flag{font-size:13px; font-weight:600; margin-bottom:8px}
.result-flag.ok{color:var(--know)} .result-flag.ng{color:var(--no)} .result-flag.muted{color:var(--muted)}
.back-word{font-size:34px; margin:2px 0; text-align:center; line-height:1.35}
.meaning{display:flex; flex-direction:column; gap:5px; margin:8px 0 14px; align-items:center}
.meaning .row{display:flex; gap:8px; align-items:baseline; flex-wrap:wrap; justify-content:center}
.meaning .pos{font-size:11.5px; color:var(--muted); border:1px solid var(--line); border-radius:6px; padding:1px 7px}
.meaning .en{color:var(--muted); font-size:13.5px}
.meaning .cn{font-size:19px; font-weight:600; text-align:center}
.exbox{background:var(--surface2); border-radius:13px; padding:14px 15px; margin-top:auto}
.exbox .exlabel{font-size:10.5px; color:var(--muted); letter-spacing:.1em; margin-bottom:5px}
.exbox .ex{font-size:19px; line-height:2}
.exbox .excn{font-size:13px; color:var(--muted); margin-top:5px}
.gp-chip{display:inline-block; margin-top:10px; font-size:11.5px; padding:3px 10px; border-radius:99px; background:var(--accent-soft); color:var(--accent); font-weight:600}

/* done state */
.done{text-align:center; padding:56px 10px; display:flex; flex-direction:column; align-items:center; justify-content:center; flex:1}
.done .big{font-size:46px}
.done h2{margin:12px 0 4px; font-size:19px}
.done p{color:var(--muted); font-size:13.5px; margin:0 0 22px}
.done .abtn{flex:none; padding:13px 30px; max-width:240px}

/* empty deck */
.emptydeck{text-align:center; padding:60px 16px; color:var(--muted); flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center}
.emptydeck .big{font-size:40px; margin-bottom:12px}
.emptydeck h2{color:var(--ink); font-size:17px; margin:0 0 6px}
.emptydeck p{font-size:13.5px; margin:0 0 18px; max-width:280px}
.emptydeck .abtn{flex:none; padding:12px 24px}

/* review node chips */
.qchips{display:flex; gap:7px; overflow-x:auto; margin:2px 0 16px; padding-bottom:4px; scrollbar-width:none}
.qchips::-webkit-scrollbar{display:none}
.qchip{flex:none; font-size:12px; padding:6px 12px; border-radius:99px; background:var(--surface); border:1px solid var(--line); color:var(--muted); font-variant-numeric:tabular-nums; white-space:nowrap}
.qchip b{color:var(--ink); font-weight:700}
.qchip.due{background:var(--no-soft); border-color:transparent; color:var(--no)}
.qchip.due b{color:var(--no)}

/* ===================== word bank ===================== */
.filterstack{position:sticky; top:0; z-index:10; background:var(--bg); padding-top:4px}
.chiprow{display:flex; gap:7px; overflow-x:auto; padding:2px 0 8px; scrollbar-width:none}
.chiprow::-webkit-scrollbar{display:none}
.chip-f{
  flex:none; padding:7px 14px; border-radius:99px; font-size:13px; font-weight:600;
  background:var(--surface); border:1px solid var(--line); color:var(--muted);
  white-space:nowrap; transition:background .12s,color .12s,border-color .12s;
}
.chip-f.on{background:var(--accent); border-color:transparent; color:var(--accent-ink)}
.bankctrl{display:flex; gap:8px; margin:2px 0 10px}
.search{
  flex:1; background:var(--surface); border:1px solid var(--line);
  border-radius:10px; padding:9px 13px; font-size:14px; color:var(--ink); min-width:0;
}
.search::placeholder{color:var(--muted)}
.subsel{
  flex:none; background:var(--surface); border:1px solid var(--line); border-radius:10px;
  padding:9px 12px; font-size:13px; color:var(--ink); max-width:44%;
  -webkit-appearance:none; appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2 4l4 4 4-4' fill='none' stroke='%236C7280' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat; background-position:right 10px center; padding-right:28px;
}
.subsel[hidden]{display:none}

.banklist{display:flex; flex-direction:column; gap:9px; padding-bottom:8px}
.wcard{
  position:relative; border-radius:13px; overflow:hidden; background:var(--surface);
  border:1px solid var(--line); transition:border-color .12s, background .12s;
}
.wcard-inner{
  position:relative; z-index:2; background:var(--surface);
  display:flex; align-items:center; gap:12px; padding:12px 14px;
  transition:transform .22s cubic-bezier(.2,.7,.3,1), background .12s;
  touch-action:pan-y;
}
.wcard.seled{border-color:var(--accent)}
.wcard.seled .wcard-inner{background:var(--accent-soft)}
.wcard .selmark{
  flex:none; width:22px; height:22px; border-radius:50%; border:2px solid var(--line);
  display:flex; align-items:center; justify-content:center; color:#fff; font-size:13px;
  transition:background .12s,border-color .12s;
}
.wcard.seled .selmark{background:var(--accent); border-color:var(--accent); color:var(--accent-ink)}
.wbody{flex:1; min-width:0}
.wtop{display:flex; align-items:baseline; gap:8px}
.wtop .wjp{font-size:19px; font-weight:600}
.wtop .wkana{font-size:12.5px; color:var(--muted)}
.wtop .wrank{margin-left:auto; font-size:11px; color:var(--muted); font-variant-numeric:tabular-nums; flex:none}
.wmid{font-size:13px; color:var(--muted); margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.wmid .wcn{color:var(--ink)}
.wbot{display:flex; align-items:center; gap:8px; margin-top:5px}
.wpos{font-size:11px; color:var(--muted); border:1px solid var(--line); border-radius:5px; padding:0 6px}
.wpos i{font-style:normal; color:var(--accent)}
.chip{font-size:10.5px; padding:2px 9px; border-radius:99px; font-weight:600; white-space:nowrap}
.chip.learn{background:var(--accent-soft); color:var(--accent)}
.chip.new{background:var(--surface2); color:var(--muted)}
.chip.master{background:var(--know-soft); color:var(--know)}
.chip.trash{background:var(--no-soft); color:var(--no)}
.wcard-inner .etym-toggle{
  flex:none; width:32px; height:32px; border-radius:9px; color:var(--muted); font-size:15px; opacity:.45;
  display:flex; align-items:center; justify-content:center; transition:background .12s, color .12s, opacity .12s;
}
.wcard-inner .etym-toggle:active{background:var(--surface2)}
.wcard-inner .etym-toggle.on{color:var(--easy); opacity:1}
/* swipe reveal action behind the card */
.wcard .swipeaction{
  position:absolute; top:0; right:0; bottom:0; width:88px; z-index:1;
  display:flex; align-items:center; justify-content:center; gap:5px;
  background:var(--no); color:#fff; font-size:13px; font-weight:600;
}
.wcard.trashrow .swipeaction{background:var(--know)}
.wcard.removing{opacity:0; transform:translateX(30px); height:0!important; margin:0; border:0; transition:opacity .2s, transform .2s}

.sentinel{height:1px}
.loadmore{text-align:center; color:var(--muted); font-size:12.5px; padding:10px 0 4px}
.empty{padding:48px 20px; text-align:center; color:var(--muted); font-size:14px}

/* batch floating bar */
.batchbar{
  position:absolute; left:14px; right:14px; bottom:calc(env(safe-area-inset-bottom) + 74px);
  z-index:40; display:flex; align-items:center; gap:9px;
  background:var(--accent); color:var(--accent-ink); border-radius:14px;
  padding:12px 16px; box-shadow:var(--shadow-lg);
  transform:translateY(140%); transition:transform .25s cubic-bezier(.2,.8,.3,1); opacity:.98;
}
.batchbar.on{transform:translateY(0)}
.batchbar b{font-variant-numeric:tabular-nums; font-weight:700}
.batchbar .spacer{flex:1}
.batchbar button{font-weight:700; font-size:13.5px; padding:6px 4px; white-space:nowrap}
.batchbar .ok{background:rgba(255,255,255,.2); color:#fff; border-radius:8px; padding:6px 10px}
.batchbar .ok[hidden]{display:none}
.batchbar .del{color:#fff}
.batchbar .clear{opacity:.85}

/* ===================== profile ===================== */
.section{background:var(--surface); border:1px solid var(--line); border-radius:14px; margin:0 0 14px; overflow:hidden}
.section .sechead{font-size:12px; color:var(--muted); letter-spacing:.06em; padding:14px 16px 6px; font-weight:600}
.setrow{display:flex; align-items:center; gap:12px; padding:13px 16px; border-top:1px solid var(--line)}
.setrow:first-child{border-top:none}
.setrow .lbl{flex:1}
.setrow .lbl small{display:block; font-size:12px; color:var(--muted); font-weight:400; margin-top:2px}
.setrow .val{font-variant-numeric:tabular-nums; font-weight:600; color:var(--accent)}

.seg{display:flex; background:var(--surface2); border-radius:9px; padding:3px; gap:2px}
.seg button{padding:6px 12px; border-radius:7px; font-size:13px; color:var(--muted); font-weight:600}
.seg button.on{background:var(--accent); color:var(--accent-ink)}

.stepper{display:flex; align-items:center; gap:2px; background:var(--surface2); border-radius:9px; padding:3px}
.stepper button{width:30px; height:30px; border-radius:7px; font-size:18px; font-weight:700; color:var(--accent); display:flex; align-items:center; justify-content:center}
.stepper .num{min-width:34px; text-align:center; font-weight:700; font-variant-numeric:tabular-nums}
.goalctl{display:flex; align-items:center; gap:8px}
.goalctl select,.goalctl input{font:inherit; font-size:14px; color:var(--ink); background:var(--surface2);
  border:1px solid var(--line); border-radius:9px; padding:7px 10px; -webkit-appearance:none; appearance:none}
.goalctl select{cursor:pointer; padding-right:14px}
.goalctl input{width:64px; text-align:center; font-variant-numeric:tabular-nums}

.bigstat{display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin:0 0 14px}
.bigstat .b{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:16px}
.bigstat .b.hl{background:var(--accent-soft); border-color:transparent}
.bigstat .b .bv{font-size:28px; font-weight:800; font-variant-numeric:tabular-nums; line-height:1}
.bigstat .b.hl .bv{color:var(--accent)}
.bigstat .b .bk{font-size:12px; color:var(--muted); margin-top:6px}

.linkbtn{color:var(--accent); font-weight:600}
.dangerbtn{color:var(--no); font-weight:600}
.pilltag{display:inline-block; font-size:11px; padding:2px 9px; border-radius:99px; background:var(--surface2); color:var(--muted); font-weight:600}

.installcard{background:var(--accent-soft); border:1px solid transparent; border-radius:14px; padding:14px 16px; margin-bottom:14px; font-size:13px; color:var(--ink); line-height:1.7}
.installcard b{color:var(--accent)}
.installcard .ibtn{margin-top:10px; display:inline-block; background:var(--accent); color:var(--accent-ink); padding:9px 18px; border-radius:10px; font-weight:700; font-size:14px}

/* ===================== toast ===================== */
#toast{
  position:fixed; left:50%; bottom:calc(env(safe-area-inset-bottom) + 80px);
  transform:translateX(-50%) translateY(20px);
  background:var(--ink); color:var(--bg); font-size:13.5px; padding:10px 20px;
  border-radius:99px; opacity:0; pointer-events:none; transition:opacity .2s,transform .2s;
  z-index:60; box-shadow:var(--shadow-lg); max-width:88%; text-align:center;
}
#toast.on{opacity:1; transform:translateX(-50%) translateY(0)}

/* boot loader */
#boot{position:fixed; inset:0; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:14px; background:var(--bg); z-index:100; color:var(--muted); font-size:13px}
#boot .logo{color:var(--accent)}
#boot.hide{opacity:0; pointer-events:none; transition:opacity .3s}

/* ===================== iPad / 宽屏（不重排布局，只是不再挤成一条手机宽度）===================== */
@media (min-width: 768px){
  .app{max-width:760px}
  .topbar{padding-left:28px; padding-right:28px}
  .screen{padding-left:28px; padding-right:28px}
  .deckwrap{max-width:560px; margin:0 auto}
  .bigstat{grid-template-columns:repeat(4,1fr)}
  .card{padding:32px 30px 26px}
  .batchbar{left:50%; right:auto; width:min(680px, calc(100% - 56px)); transform:translate(-50%, 140%)}
  .batchbar.on{transform:translate(-50%, 0)}
}