:root{
  --green:#0f9d58;
  --green-d:#0b7c45;
  --green-l:#e8f6ee;
  --ink:#16211c;
  --ink-2:#5a6b62;
  --ink-3:#8c9a92;
  --line:#e4eae6;
  --bg:#f4f7f5;
  --card:#ffffff;
  --red:#e5484d;
  --amber:#e8a33d;
  --radius:18px;
  --shadow:0 6px 24px rgba(16,45,32,.08);
  --safe-b:env(safe-area-inset-bottom, 0px);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;}
body{
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
  background:var(--bg);
  color:var(--ink);
  font-size:15px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overscroll-behavior-y:none;
}
button{font-family:inherit;font-size:inherit;cursor:pointer;border:none;background:none;color:inherit;}
input,select{font-family:inherit;font-size:16px;color:inherit;}
a{color:var(--green);}

#root{max-width:560px;margin:0 auto;min-height:100vh;min-height:100dvh;
  background:var(--bg);position:relative;}

/* ---------- 加载 ---------- */
.boot-screen{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;color:var(--ink-3);font-size:14px;}
.boot-logo{width:64px;height:64px;border-radius:20px;background:linear-gradient(135deg,var(--green),#37c07a);
  color:#fff;font-weight:800;font-size:20px;letter-spacing:1px;display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 26px rgba(15,157,88,.28);animation:pulse 1.6s ease-in-out infinite;}
@keyframes pulse{0%,100%{transform:translateY(0) scale(1);}50%{transform:translateY(-4px) scale(1.04);}}

/* ---------- 登录 / 注册 ---------- */
.auth-wrap{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;padding:28px 20px calc(28px + var(--safe-b));}
.auth-hero{text-align:center;margin:18px 0 22px;}
.auth-hero .logo{width:66px;height:66px;border-radius:22px;margin:0 auto 14px;
  background:linear-gradient(135deg,var(--green),#3fc97f);color:#fff;font-weight:800;font-size:21px;
  display:flex;align-items:center;justify-content:center;box-shadow:0 12px 30px rgba(15,157,88,.3);}
.auth-hero h1{font-size:21px;margin:0 0 6px;letter-spacing:.5px;}
.auth-hero p{margin:0;color:var(--ink-3);font-size:13px;}
.auth-card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:6px 18px 22px;}
.auth-tabs{display:flex;gap:6px;background:#eef3f0;border-radius:12px;padding:4px;margin:14px 0 18px;}
.auth-tabs button{flex:1;padding:9px 0;border-radius:9px;font-size:14px;color:var(--ink-2);font-weight:500;transition:.18s;}
.auth-tabs button.on{background:#fff;color:var(--green-d);font-weight:700;box-shadow:0 1px 4px rgba(0,0,0,.07);}
.field{margin-bottom:14px;}
.field label{display:block;font-size:12.5px;color:var(--ink-2);margin-bottom:6px;font-weight:500;}
.field input,.field select{width:100%;padding:12px 13px;border:1px solid var(--line);border-radius:12px;
  background:#fbfcfb;outline:none;transition:.18s;-webkit-appearance:none;appearance:none;}
.field select{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%238c9a92'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;background-size:22px;padding-right:34px;}
.field input:focus,.field select:focus{border-color:var(--green);background:#fff;box-shadow:0 0 0 3px rgba(15,157,88,.1);}
.hint{font-size:12px;color:var(--ink-3);margin-top:-6px;margin-bottom:12px;line-height:1.5;}
.btn-primary{width:100%;padding:14px;border-radius:14px;color:#fff;font-weight:700;font-size:16px;
  background:linear-gradient(135deg,var(--green),#2bb673);box-shadow:0 8px 20px rgba(15,157,88,.26);transition:.15s;}
.btn-primary:active{transform:scale(.985);}
.btn-primary[disabled]{opacity:.6;box-shadow:none;}
.form-msg{font-size:13px;margin:12px 0 0;text-align:center;min-height:18px;}
.form-msg.err{color:var(--red);}
.form-msg.ok{color:var(--green-d);}
.auth-note{margin-top:18px;font-size:11.5px;color:var(--ink-3);text-align:center;line-height:1.7;}

/* ---------- 应用外壳 ---------- */
.app{display:flex;flex-direction:column;min-height:100vh;min-height:100dvh;}
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;
  padding:14px 18px 10px;background:rgba(244,247,245,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);}
.topbar h1{margin:0;font-size:17px;letter-spacing:.5px;display:flex;align-items:center;gap:8px;}
.topbar h1 .dot{width:7px;height:7px;border-radius:50%;background:var(--green);display:inline-block;}
.topbar .who{font-size:12px;color:var(--ink-3);}
.main{flex:1;padding:4px 16px calc(84px + var(--safe-b));}
.main.study{display:flex;flex-direction:column;}
.main.study .stage{flex:1;display:flex;flex-direction:column;justify-content:flex-start;min-height:0;padding-bottom:6px;}

/* 今日进度条 */
.goalbar{background:var(--card);border-radius:var(--radius);padding:14px 16px;box-shadow:var(--shadow);margin-bottom:14px;}
.goalbar .row{display:flex;justify-content:space-between;align-items:baseline;font-size:12.5px;color:var(--ink-2);}
.goalbar .row b{font-size:15px;color:var(--ink);font-variant-numeric:tabular-nums;}
.bar{height:8px;border-radius:99px;background:#eef2ef;margin-top:10px;overflow:hidden;}
.bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--green),#4ecf8b);
  transition:width .45s cubic-bezier(.2,.8,.2,1);}
.goalbar .sub{display:flex;gap:14px;margin-top:9px;font-size:11.5px;color:var(--ink-3);}
.goalbar .sub span{display:flex;align-items:center;gap:4px;}

/* 模式切换 */
.modebar{display:flex;align-items:center;gap:8px;margin:0 0 12px;}
.seg{display:flex;background:#e9efeb;border-radius:11px;padding:3px;gap:2px;}
.seg button{padding:6px 14px;border-radius:8px;font-size:12.5px;color:var(--ink-2);transition:.16s;}
.seg button.on{background:#fff;color:var(--green-d);font-weight:700;box-shadow:0 1px 3px rgba(0,0,0,.08);}
.modebar .spacer{flex:1;}
.modebar .ghost{font-size:12px;color:var(--ink-3);padding:6px 10px;border-radius:9px;border:1px solid var(--line);background:#fff;}

/* 题型阶段条 */
.phasebar{margin:0 0 10px;}
.ptags{display:flex;gap:5px;margin-bottom:6px;}
.pt{font-size:10.5px;letter-spacing:.3px;padding:3px 10px;border-radius:99px;background:#e9efeb;color:#a6b2aa;}
.pt.on{background:var(--green-l);color:var(--green-d);font-weight:700;}
.pt.dim{opacity:.5;}
.ptip{font-size:11px;color:var(--ink-3);line-height:1.45;}

/* 学习-题目卡 */
.stage{padding-top:2px;}
.qcard{position:relative;background:var(--card);border-radius:22px;box-shadow:var(--shadow);
  padding:26px 20px 22px;min-height:158px;display:flex;flex-direction:column;align-items:center;
  justify-content:center;overflow:hidden;}
.qcard::after{content:'';position:absolute;inset:0;pointer-events:none;border-radius:22px;
  box-shadow:inset 0 0 0 1px rgba(15,157,88,.06);}
.qcard .kind{position:absolute;top:13px;left:16px;font-size:10.5px;letter-spacing:.5px;
  color:var(--green-d);background:var(--green-l);padding:3px 9px;border-radius:99px;}
.qcard .kind.review{color:#b26a00;background:#fdf2e0;}
.qcard .kind.weak{color:#6b5bd2;background:#efecfd;}
.qcard .seqno{position:absolute;top:13px;right:16px;font-size:11px;color:var(--ink-3);font-variant-numeric:tabular-nums;}
.qask{font-size:11.5px;color:var(--ink-3);letter-spacing:.3px;margin-bottom:8px;}
.qtext{font-size:38px;font-weight:700;letter-spacing:.5px;line-height:1.2;text-align:center;
  word-break:break-word;font-family:"SF Pro Display",-apple-system,"Segoe UI",Arial,sans-serif;}
.qtext.small{font-size:28px;}
.qtext.cn{font-size:25px;font-weight:600;line-height:1.35;padding:0 2px;font-family:inherit;letter-spacing:0;}
.speak{position:absolute;right:14px;bottom:14px;width:36px;height:36px;border-radius:50%;background:#f0f5f2;
  display:flex;align-items:center;justify-content:center;color:var(--green-d);opacity:.9;}
.speak svg{width:18px;height:18px;}
.speak:active{background:var(--green-l);transform:scale(.94);}

/* 选项 */
.opts{display:flex;flex-direction:column;gap:9px;margin-top:13px;}
.opt{display:flex;align-items:center;gap:11px;width:100%;text-align:left;background:var(--card);
  border:1.5px solid transparent;border-radius:15px;padding:13px 14px;
  box-shadow:0 2px 10px rgba(16,45,32,.05);transition:transform .13s,background .16s,border-color .16s;}
.opt i{flex:0 0 auto;width:23px;height:23px;border-radius:8px;background:#eef3f0;color:var(--ink-3);
  font-style:normal;font-size:11.5px;font-weight:700;display:flex;align-items:center;justify-content:center;}
.opt span{flex:1;font-size:15px;line-height:1.4;word-break:break-word;}
.opt:active{transform:scale(.99);}
.opt.ok{border-color:#8fd3ae;background:var(--green-l);}
.opt.ok i{background:var(--green);color:#fff;}
.opt.no{border-color:#f2b9ba;background:#fdeeed;}
.opt.no i{background:var(--red);color:#fff;}
.opt.locked{pointer-events:none;}
.opt.locked:not(.ok):not(.no){opacity:.55;}

/* 答题反馈 */
.fb{margin-top:12px;border-radius:15px;padding:10px 14px;text-align:center;animation:fadeUp .18s ease;}
.fb.ok{background:var(--green-l);}
.fb.no{background:#fdeeed;}
.fbt{font-size:13.5px;font-weight:700;}
.fb.ok .fbt{color:var(--green-d);}
.fb.no .fbt{color:#c0393e;}
.fbw{margin-top:2px;font-size:13px;color:var(--ink-2);word-break:break-word;}
.skip{display:block;margin:14px auto 0;font-size:12.5px;color:var(--ink-3);padding:8px 18px;
  border-radius:99px;border:1px solid var(--line);background:#fff;}

.done-card{background:var(--card);border-radius:22px;box-shadow:var(--shadow);padding:34px 22px;text-align:center;}
.done-card .emoji{font-size:42px;}
.done-card h3{margin:10px 0 6px;font-size:18px;}
.done-card p{margin:0 0 18px;color:var(--ink-2);font-size:13.5px;}
.done-card .btn-primary{max-width:220px;margin:0 auto;}
@keyframes fadeUp{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}

/* ---------- 词库 ---------- */
.searchbox{display:flex;align-items:center;gap:8px;background:var(--card);border-radius:14px;
  padding:10px 14px;box-shadow:var(--shadow);margin-bottom:12px;}
.searchbox svg{width:17px;height:17px;color:var(--ink-3);flex:0 0 auto;}
.searchbox input{border:none;outline:none;background:none;flex:1;font-size:15px;padding:2px 0;}
.chips{display:flex;gap:8px;overflow-x:auto;padding-bottom:10px;margin-bottom:4px;scrollbar-width:none;}
.chips::-webkit-scrollbar{display:none;}
.chips button{flex:0 0 auto;padding:7px 14px;border-radius:99px;background:#fff;border:1px solid var(--line);
  font-size:12.5px;color:var(--ink-2);white-space:nowrap;}
.chips button.on{background:var(--green);border-color:var(--green);color:#fff;font-weight:600;}
.wlist{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;}
.witem{display:flex;align-items:center;gap:12px;padding:13px 16px;border-bottom:1px solid #f1f5f2;}
.witem:last-child{border-bottom:none;}
.witem .txt{flex:1;min-width:0;}
.witem .w{font-size:15.5px;font-weight:600;letter-spacing:.2px;}
.witem .m{font-size:12.5px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.witem .badge{font-size:10.5px;padding:2px 8px;border-radius:99px;flex:0 0 auto;}
.badge.b0{background:#f1f4f2;color:#9aa8a0;}
.badge.b1{background:#fdeceb;color:#c93c41;}
.badge.b2,.badge.b3,.badge.b4{background:#fdf5e3;color:#b07309;}
.badge.b5{background:var(--green-l);color:var(--green-d);}
.dots{display:flex;gap:3px;flex:0 0 auto;}
.dots i{width:5px;height:5px;border-radius:50%;background:#e2e9e4;}
.dots i.f{background:var(--green);}
.loadmore{width:100%;padding:13px;margin-top:12px;border-radius:14px;background:#fff;color:var(--ink-2);
  font-size:13.5px;box-shadow:var(--shadow);}
.empty{padding:40px 20px;text-align:center;color:var(--ink-3);font-size:13.5px;}

/* ---------- 我的 ---------- */
.profile{display:flex;align-items:center;gap:14px;background:var(--card);border-radius:var(--radius);
  padding:18px 18px;box-shadow:var(--shadow);margin-bottom:14px;}
.avatar{width:54px;height:54px;border-radius:50%;background:linear-gradient(135deg,var(--green),#43cf8d);
  color:#fff;font-size:21px;font-weight:700;display:flex;align-items:center;justify-content:center;flex:0 0 auto;}
.profile .info h3{margin:0 0 3px;font-size:16px;}
.profile .info p{margin:0;font-size:12px;color:var(--ink-3);}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:14px;}
.stat{background:var(--card);border-radius:16px;padding:15px 14px;box-shadow:var(--shadow);}
.stat .n{font-size:22px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.2;}
.stat .n small{font-size:12px;font-weight:500;color:var(--ink-3);margin-left:2px;}
.stat .l{font-size:12px;color:var(--ink-3);margin-top:3px;}
.ring-wrap{background:var(--card);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow);margin-bottom:14px;
  display:flex;align-items:center;gap:18px;}
.ring{width:88px;height:88px;flex:0 0 auto;position:relative;}
.ring svg{transform:rotate(-90deg);}
.ring .pct{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;}
.ring .pct b{font-size:19px;line-height:1;}
.ring .pct span{font-size:10px;color:var(--ink-3);margin-top:2px;}
.ring-info h4{margin:0 0 4px;font-size:14px;}
.ring-info p{margin:0;font-size:12px;color:var(--ink-3);line-height:1.6;}
.section-title{font-size:12.5px;color:var(--ink-3);margin:20px 4px 8px;letter-spacing:.5px;}
.setting{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;}
.srow{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 16px;border-bottom:1px solid #f1f5f2;}
.srow:last-child{border-bottom:none;}
.srow .lab{font-size:14px;}
.srow .desc{font-size:11.5px;color:var(--ink-3);margin-top:2px;}
.stepper{display:flex;align-items:center;gap:2px;background:#f2f6f3;border-radius:10px;padding:3px;}
.stepper button{width:30px;height:30px;border-radius:8px;background:#fff;color:var(--ink);font-size:16px;
  display:flex;align-items:center;justify-content:center;box-shadow:0 1px 2px rgba(0,0,0,.06);}
.stepper span{min-width:38px;text-align:center;font-size:13.5px;font-weight:600;font-variant-numeric:tabular-nums;}
.srow .danger{color:var(--red);font-size:13.5px;padding:6px 10px;border-radius:9px;background:#fdeceb;}
.srow .linkbtn{color:var(--green-d);font-size:13.5px;}
.foot-note{text-align:center;font-size:11px;color:#a9b5ae;margin:22px 0 6px;line-height:1.7;}

/* ---------- 底部导航 ---------- */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:30;max-width:560px;margin:0 auto;
  display:flex;background:rgba(255,255,255,.94);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-top:1px solid var(--line);padding:8px 6px calc(8px + var(--safe-b));}
.tabbar button{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:4px 0;
  font-size:11px;color:var(--ink-3);transition:.16s;}
.tabbar button svg{width:22px;height:22px;}
.tabbar button.on{color:var(--green-d);font-weight:600;}
.tabbar button.on svg{transform:translateY(-1px);}

/* ---------- 提示 ---------- */
.toast{position:fixed;left:50%;bottom:calc(96px + var(--safe-b));transform:translateX(-50%) translateY(8px);
  background:rgba(22,33,28,.92);color:#fff;font-size:13px;padding:10px 18px;border-radius:99px;
  opacity:0;pointer-events:none;transition:.22s;z-index:60;white-space:nowrap;max-width:90%;}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
.flash{position:fixed;inset:0;pointer-events:none;opacity:0;transition:opacity .18s;z-index:50;}
.flash.ok{background:radial-gradient(circle at 50% 60%,rgba(15,157,88,.12),transparent 62%);opacity:1;}
.flash.no{background:radial-gradient(circle at 50% 60%,rgba(229,72,77,.12),transparent 62%);opacity:1;}

@media (max-height:700px){
  .main{padding:0 12px calc(72px + var(--safe-b));}
  .goalbar{padding:8px 13px;margin-bottom:8px;}
  .goalbar .sub{margin-top:5px;font-size:11px;}
  .bar{margin-top:7px;height:7px;}
  .phasebar{margin-bottom:4px;}
  .ptags{margin-bottom:2px;}
  .ptip{font-size:10.5px;line-height:1.3;}
  .modebar{margin-bottom:4px;}
  .qcard{min-height:auto;padding:14px 12px 12px;}
  .qask{margin-bottom:4px;font-size:11px;}
  .qtext{font-size:27px;}
  .qtext.small{font-size:23px;}
  .qtext.cn{font-size:20px;}
  .opts{gap:5px;margin-top:9px;}
  .opt{padding:9px 12px;border-radius:13px;}
  .opt span{font-size:14.5px;}
  .skip{margin-top:6px;padding:4px 14px;font-size:12px;}
  .fb{margin-top:8px;padding:7px 12px;}
  .fbw{font-size:12.5px;}
}
@media (max-width:380px){
  .qcard .seqno{display:none;}
}
@media (min-width:561px){
  body{background:#e9efec;}
  #root{box-shadow:0 0 60px rgba(0,0,0,.06);}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important;}
}