:root{
  --cream:#FFF7EC;
  --paper:#FFFFFF;
  --ink:#4B4160;
  --ink-soft:#8A7F9E;
  --sage:#8DC07A;
  --sage-dark:#5E9A57;
  --pink:#FF9EB5;
  --peach:#FFC98A;
  --sky:#9FD3E8;
  --yolo:#FFDE7A;
  --line:#4B4160;
  --shadow:0 6px 0 rgba(75,65,96,.16);
  --r-lg:26px;
  --r-md:18px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,-apple-system,"Segoe UI",sans-serif;
  color:var(--ink);
  background:var(--cream);
  background-image:radial-gradient(rgba(141,192,122,.18) 2px,transparent 2px);
  background-size:26px 26px;
  min-height:100vh;
  -webkit-tap-highlight-color:transparent;
}
.bg-decor{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.cloud{position:absolute;width:120px;height:44px;border-radius:44px;background:rgba(255,255,255,.75)}
.cloud::before,.cloud::after{content:"";position:absolute;border-radius:50%;background:inherit}
.cloud::before{width:52px;height:52px;top:-24px;left:18px}
.cloud::after{width:38px;height:38px;top:-16px;right:20px}
.c1{top:12%;left:-4%;animation:drift 46s linear infinite}
.c2{top:34%;right:-8%;width:96px;animation:drift 62s linear infinite reverse}
@keyframes drift{0%{transform:translateX(0)}50%{transform:translateX(60px)}100%{transform:translateX(0)}}
.star{position:absolute;width:16px;height:16px;background:var(--yolo);
  clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);}
.s1{top:20%;right:16%;animation:twinkle 3.4s ease-in-out infinite}
.s2{bottom:16%;left:8%;width:22px;height:22px;animation:twinkle 4.6s ease-in-out infinite .8s}
.s3{top:58%;right:6%;width:13px;height:13px;animation:twinkle 5.2s ease-in-out infinite 1.6s}
@keyframes twinkle{0%,100%{opacity:.25;transform:scale(.7) rotate(0)}50%{opacity:.95;transform:scale(1.15) rotate(20deg)}}

/* top bar */
.topbar{position:sticky;top:0;z-index:5;display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;
  padding:14px clamp(14px,4vw,34px);background:rgba(255,247,236,.9);backdrop-filter:blur(6px);
  border-bottom:3px dashed rgba(141,192,122,.5)}
.brand{display:flex;align-items:center;gap:12px}
.brand-text{display:flex;flex-direction:column;line-height:1.25}
.brand-text b{font-size:clamp(17px,2.4vw,21px);letter-spacing:.5px}
.brand-text small{font-size:12px;color:var(--ink-soft)}
.mascot{display:block;width:46px;height:46px;flex:0 0 46px;animation:bob 3s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-5px) rotate(3deg)}}
.mascot.cheer{animation:cheer .7s ease}
@keyframes cheer{0%{transform:scale(1)}30%{transform:scale(1.3) rotate(-12deg)}60%{transform:scale(1.1) rotate(10deg)}100%{transform:scale(1)}}

.tabs{display:flex;gap:8px;background:rgba(255,255,255,.8);padding:5px;border-radius:999px;border:2px solid var(--line);box-shadow:var(--shadow)}
.tab{border:0;background:transparent;font:inherit;color:var(--ink-soft);padding:8px 16px;border-radius:999px;cursor:pointer;font-weight:700;transition:.18s}
.tab em{font-style:normal;background:var(--pink);color:#fff;border-radius:999px;padding:1px 7px;font-size:12px;margin-left:4px}
.tab.is-on{background:var(--sage);color:#fff;box-shadow:0 3px 0 var(--sage-dark)}
.tab.is-on em{background:rgba(255,255,255,.35)}
.tab:hover:not(.is-on){color:var(--ink)}

main{position:relative;z-index:1;max-width:820px;margin:0 auto;padding:clamp(16px,3vw,30px) clamp(14px,4vw,24px) 64px}
.view{display:none}
.view.is-on{display:block;animation:pop .3s ease}
@keyframes pop{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.panel{background:var(--paper);border:3px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow);padding:clamp(16px,3.2vw,28px);margin-bottom:18px}
.panel-title{margin:0 0 16px;font-size:clamp(19px,2.6vw,23px)}
.panel-title small{font-size:13px;color:var(--ink-soft);font-weight:400;margin-left:6px}

.note{margin:0 0 16px;padding:12px 16px;background:#FFF1F4;border:2.5px dashed var(--pink);border-radius:var(--r-md);
  font-size:14.5px;font-weight:700;line-height:1.6;color:#B4566F}
.note b{color:#D9607A}
.note.flip{animation:flip .45s ease}
@keyframes flip{from{opacity:0;transform:translateY(-6px) scale(.98)}to{opacity:1;transform:none}}

.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.chip{background:var(--paper);border:2px solid var(--line);border-radius:999px;padding:6px 14px;font-size:13px;box-shadow:0 3px 0 rgba(75,65,96,.12)}
.chip b{color:var(--sage-dark);margin-left:4px;font-variant-numeric:tabular-nums}

.field{margin-bottom:18px}
.field-label{display:block;font-size:13px;font-weight:700;color:var(--ink-soft);margin-bottom:8px;letter-spacing:1px}
.options-row{display:flex;flex-wrap:wrap;gap:10px}
.pill{font:inherit;cursor:pointer;background:#F6F1FF;border:2px solid var(--line);border-radius:999px;padding:9px 16px;font-weight:700;color:var(--ink);transition:.16s;box-shadow:0 3px 0 rgba(75,65,96,.14)}
.pill small{opacity:.6;font-weight:400}
.pill:hover{transform:translateY(-2px)}
.pill.is-on{background:var(--sage);color:#fff;border-color:var(--sage-dark);box-shadow:0 3px 0 var(--sage-dark)}

.big-btn{display:block;width:100%;font:inherit;font-size:18px;font-weight:800;cursor:pointer;color:#fff;
  background:linear-gradient(180deg,var(--sage),var(--sage-dark));border:3px solid var(--line);border-radius:var(--r-md);
  padding:15px;margin-top:6px;box-shadow:0 6px 0 rgba(75,65,96,.22);transition:.14s}
.big-btn:hover{transform:translateY(-2px);box-shadow:0 8px 0 rgba(75,65,96,.22)}
.big-btn:active{transform:translateY(4px);box-shadow:0 2px 0 rgba(75,65,96,.22)}
.big-btn.slim{width:auto;padding:12px 26px;font-size:16px}
.big-btn[disabled]{opacity:.45;cursor:not-allowed;filter:grayscale(.4)}
.dice{display:inline-block;animation:spin 6s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.hint{font-size:12.5px;color:var(--ink-soft);margin:14px 0 0;text-align:center;line-height:1.6}

/* quiz */
.quiz-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.qtype{background:var(--peach);border:2px solid var(--line);border-radius:10px;padding:4px 12px;font-weight:800;font-size:13px}
.qtype[data-t="多"]{background:var(--sky)}
.qtype[data-t="判"]{background:var(--pink)}
.qno{font-weight:800;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.bar{height:12px;background:#F0EAF7;border:2px solid var(--line);border-radius:999px;overflow:hidden;margin-bottom:18px}
.bar i{display:block;height:100%;width:0;background:repeating-linear-gradient(45deg,var(--sage),var(--sage) 8px,#A9D495 8px,#A9D495 16px);transition:width .35s ease}
.qtext{font-size:clamp(17px,2.5vw,20px);line-height:1.65;font-weight:700;margin:0 0 20px;word-break:break-word}

.opts{display:grid;gap:12px}
.opts.two{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.opt{display:flex;align-items:flex-start;gap:12px;font:inherit;text-align:left;cursor:pointer;
  background:#FBF8FF;border:2.5px solid var(--line);border-radius:var(--r-md);padding:13px 15px;color:var(--ink);
  transition:.14s;box-shadow:0 4px 0 rgba(75,65,96,.12);line-height:1.5}
.opt:hover:not(:disabled){transform:translateX(3px);background:#F2FAEE}
.opt .mark{flex:0 0 28px;height:28px;border-radius:50%;background:var(--paper);border:2px solid var(--line);
  display:grid;place-items:center;font-weight:800;font-size:14px}
.opt .txt{flex:1;padding-top:2px}
.opt.is-pick{background:#E8F5FF;border-color:#3F7FA6}
.opt.is-pick .mark{background:var(--sky);color:#fff}
.opt:disabled{cursor:default}
.opt.good{background:#E9F8E4;border-color:var(--sage-dark)}
.opt.good .mark{background:var(--sage-dark);color:#fff}
.opt.bad{background:#FFECEE;border-color:#D96A7F}
.opt.bad .mark{background:#E07A8C;color:#fff}
.opt.miss{border-style:dashed}

.verdict{margin-top:18px;border-radius:var(--r-md);padding:14px 16px;font-size:15px;line-height:1.6;border:2.5px dashed var(--sage-dark);background:#F1FAEC}
.verdict.no{border-color:#E07A8C;background:#FFF0F2}
.verdict b{display:block;font-size:16px;margin-bottom:6px}
.verdict .ans{font-weight:800;color:var(--sage-dark)}
.verdict .tag{display:inline-block;margin-top:8px;background:var(--pink);color:#fff;border-radius:8px;padding:3px 10px;font-size:12.5px;font-weight:700}
.verdict b svg{vertical-align:-7px;margin-left:6px}
.quiz.shake{animation:shake .4s}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-9px)}40%{transform:translateX(9px)}60%{transform:translateX(-6px)}80%{transform:translateX(6px)}}

.quiz-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;margin-top:22px}
.ghost-btn{font:inherit;font-size:14px;font-weight:700;cursor:pointer;background:transparent;color:var(--ink-soft);border:2px solid rgba(75,65,96,.3);border-radius:999px;padding:9px 16px;transition:.14s}
.ghost-btn:hover{color:var(--ink);border-color:var(--line);background:#fff}

/* done */
.done{text-align:center}
.done-emoji{font-size:52px;line-height:1;margin-bottom:10px;animation:bob 2.4s ease-in-out infinite}
.done-line{color:var(--ink-soft);margin:0 0 20px;font-size:15px}
.done-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* wrong book */
.wrong-actions{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.wrong-actions .big-btn.slim{flex:2 1 200px;margin-top:0}
.wrong-actions .ghost-btn{flex:1 1 120px}
.witem{background:#FFFDF7;border:2.5px solid var(--line);border-radius:var(--r-md);padding:14px;margin-bottom:12px;box-shadow:0 4px 0 rgba(75,65,96,.1)}
.witem .wq{font-weight:700;line-height:1.6;margin:0 0 10px}
.wmeta{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:13px;color:var(--ink-soft)}
.wmeta .badge{background:var(--peach);border:2px solid var(--line);border-radius:8px;padding:2px 8px;font-weight:700;font-size:12px;color:var(--ink)}
.wmeta .badge.times{background:var(--pink);color:#fff}
.correct-ans{background:var(--sage);color:#fff;border-radius:8px;padding:2px 9px;font-weight:800}
.wlist-opts{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px;font-size:13px;color:var(--ink-soft)}
.wactions{margin-left:auto;display:flex;gap:8px}
.mini{font:inherit;font-size:12.5px;font-weight:700;cursor:pointer;border:2px solid rgba(75,65,96,.3);background:#fff;color:var(--ink);border-radius:999px;padding:5px 12px}
.mini:hover{border-color:var(--line);background:#F6F1FF}
.empty{color:var(--ink-soft);text-align:center;padding:26px 0;font-size:14.5px}

/* toast */
.toast-wrap{position:fixed;inset:0;display:grid;place-items:center;pointer-events:none;z-index:40}
.toast{background:var(--paper);border:3px solid var(--line);border-radius:var(--r-lg);box-shadow:0 10px 0 rgba(75,65,96,.18);
  padding:22px 34px;text-align:center;animation:toastIn .45s cubic-bezier(.2,1.6,.4,1)}
.toast .face{font-size:34px;line-height:1}
.toast .msg{font-size:21px;font-weight:900;margin-top:8px;letter-spacing:1px}
.toast .sub{font-size:13px;color:var(--ink-soft);margin-top:5px}
.toast.ok .msg{color:var(--sage-dark)}
.toast.no .msg{color:#D9607A}
.toast.out{animation:toastOut .3s ease forwards}
@keyframes toastIn{from{opacity:0;transform:scale(.6) rotate(-6deg)}to{opacity:1;transform:none}}
@keyframes toastOut{to{opacity:0;transform:scale(.85) translateY(-16px)}}

.confetti{position:fixed;inset:0;pointer-events:none;z-index:39;overflow:hidden}
.cf{position:absolute;width:11px;height:14px;border-radius:3px;opacity:0;animation:fall 1.5s ease-out forwards}
@keyframes fall{0%{opacity:1;transform:translate(0,0) rotate(0)}100%{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(var(--rot))}}

@media (max-width:600px){
  .topbar{padding:12px 14px}
  .tabs{width:100%;justify-content:center}
  .quiz-actions{flex-direction:column-reverse;align-items:stretch}
  .big-btn.slim,.ghost-btn{width:100%}
  .wactions{margin-left:0;width:100%}
}