:root{
  --leaf:#7BC96F;
  --leaf-dark:#4CAF50;
  --leaf-deep:#388E3C;
  --sun:#FFD54F;
  --sun-dark:#FFA000;
  --coral:#FF8A65;
  --sky:#64B5F6;
  --ink:#1B3B2A;
  --muted:#7BA67C;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;}
body{
  font-family:'Segoe UI','PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif;
  color:var(--ink);
  background:
    radial-gradient(circle at 88% 8%, rgba(255,255,255,.6), transparent 30%),
    linear-gradient(180deg,#FFF9E8 0%,#E8F5E9 50%,#D7EED5 100%);
  background-attachment:fixed;
  min-height:100vh;
  overflow-x:hidden;
}

/* decorative */
.deco{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:0;}
.deco span{
  position:absolute;font-size:36px;opacity:.16;
  animation:float 14s ease-in-out infinite;
}
.deco .d1{top:12%;left:5%;}
.deco .d2{top:38%;right:6%;animation-delay:-3s;font-size:30px;}
.deco .d3{top:66%;left:8%;animation-delay:-6s;font-size:26px;}
.deco .d4{top:84%;right:10%;animation-delay:-9s;}
.deco .d5{bottom:8%;left:3%;transform:rotate(-20deg);font-size:42px;}
.deco .d6{top:6%;right:14%;transform:rotate(30deg);font-size:34px;}
@keyframes float{
  0%,100%{transform:translateY(0) rotate(-5deg);}
  50%{transform:translateY(-20px) rotate(5deg);}
}

/* hero */
.hero{position:relative;z-index:1;padding:28px 16px 12px;text-align:center;}
.hero-inner{
  max-width:760px;margin:0 auto;
  background:linear-gradient(135deg,rgba(255,255,255,.95),rgba(255,249,232,.92));
  border:4px solid #fff;border-radius:30px;
  padding:22px 24px 20px;
  box-shadow:0 16px 40px rgba(76,175,80,.18), 0 0 0 8px rgba(255,255,255,.3);
}
.hero h1{
  margin:0;font-size:clamp(28px,6vw,48px);letter-spacing:3px;
  background:linear-gradient(90deg,#FF8A65,#FFB300,#7BC96F,#4CAF50);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  font-weight:900;
}

/* tabs */
.tabs{
  position:relative;z-index:1;
  display:flex;gap:10px;overflow-x:auto;
  padding:16px 16px 8px;max-width:1280px;margin:0 auto;
  scrollbar-width:thin;
}
.tabs::-webkit-scrollbar{height:8px;}
.tabs::-webkit-scrollbar-thumb{background:#c8e6c9;border-radius:8px;}
.tab{
  flex:0 0 auto;cursor:pointer;font-family:inherit;
  display:flex;align-items:center;gap:8px;
  background:#fff;border:3px solid #e8f5e9;border-radius:20px;
  padding:9px 16px;font-size:14px;font-weight:700;color:var(--leaf-dark);
  transition:.22s;white-space:nowrap;
  box-shadow:0 4px 0 #dcedc8;
}
.tab .em{font-size:18px;}
.tab:hover{transform:translateY(-3px);border-color:#c8e6c9;}
.tab.active{
  background:linear-gradient(135deg,#FFD54F,#FFB300);
  border-color:#fff;color:#5D4037;
  box-shadow:0 5px 0 #E65100;
  transform:translateY(-3px);
}

/* progress */
.progress-wrap{position:relative;z-index:1;max-width:1280px;margin:6px auto 0;padding:0 16px;}
.progress-card{
  background:rgba(255,255,255,.95);border-radius:20px;border:3px solid #fff;
  padding:12px 16px;display:flex;flex-wrap:wrap;gap:10px;
  align-items:center;justify-content:space-between;
  box-shadow:0 8px 20px rgba(76,175,80,.13);
}
.prog-left{flex:1 1 240px;min-width:200px;}
.prog-label{font-size:12px;font-weight:800;color:var(--muted);letter-spacing:1px;}
.prog-bar{height:14px;background:#e8f5e9;border-radius:10px;overflow:hidden;margin-top:5px;
  border:2px solid #dcedc8;}
.prog-fill{height:100%;width:0%;border-radius:10px;
  background:linear-gradient(90deg,#7BC96F,#FFD54F,#FF8A65);
  transition:width .5s cubic-bezier(.2,.9,.3,1.4);}
.prog-right{display:flex;gap:14px;font-weight:800;font-size:14px;color:var(--leaf-dark);}
#progStars{color:#E6A200;}
.banner{
  display:none;margin-top:10px;text-align:center;font-weight:900;font-size:15px;
  background:linear-gradient(135deg,#7BC96F,#4CAF50);color:#fff;
  padding:12px;border-radius:18px;border:3px solid #fff;
  box-shadow:0 8px 18px rgba(76,175,80,.4);
  animation:pop .5s ease;
}
@keyframes pop{0%{transform:scale(.85);opacity:0;}100%{transform:scale(1);opacity:1;}}

/* panels */
main{position:relative;z-index:1;max-width:1000px;margin:0 auto;padding:18px 16px 60px;}
.panel{display:none;animation:fade .35s ease;}
.panel.active{display:block;}
@keyframes fade{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}

.panel-head{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  background:linear-gradient(135deg,rgba(255,255,255,.95),rgba(240,250,235,.92));
  border:4px solid #fff;border-radius:26px;padding:16px 20px;margin-bottom:20px;
  box-shadow:0 12px 26px rgba(76,175,80,.14);
}
.panel-head .big-em{font-size:38px;}
.panel-head h2{margin:0;font-size:clamp(17px,3.6vw,23px);color:var(--leaf-deep);}
.panel-head .p-py{margin:3px 0 0;font-size:13px;color:var(--muted);letter-spacing:.5px;}
.panel-head .p-en{margin:3px 0 0;font-size:12px;color:#A5BFA6;font-style:italic;}
.reset-btn{
  margin-left:auto;font-family:inherit;cursor:pointer;
  background:#fff;border:3px solid #FFE082;color:#B27500;font-weight:800;
  border-radius:16px;padding:8px 14px;font-size:13px;transition:.2s;
}
.reset-btn:hover{background:#FFF8E1;transform:rotate(-2deg);}

/* cards */
.card{
  background:#fff;border-radius:24px;padding:18px 20px 16px;margin-bottom:18px;
  border:3px solid #ffffff;
  box-shadow:0 8px 0 rgba(220,237,200,.9), 0 14px 26px rgba(76,175,80,.12);
  transition:.3s;position:relative;overflow:hidden;
}
.card::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:7px;
  background:linear-gradient(180deg,#FFD54F,#7BC96F);opacity:.85;
}
.card.done{border-color:#c5e1a5;box-shadow:0 8px 0 rgba(123,201,111,.35),0 14px 26px rgba(123,201,111,.15);}
.card.done::after{
  content:"✅";position:absolute;top:12px;right:14px;font-size:18px;
}
.card-head{display:flex;align-items:center;gap:10px;margin-bottom:10px;}
.num{
  width:34px;height:34px;flex:0 0 auto;border-radius:50%;
  display:grid;place-items:center;font-weight:900;font-size:15px;color:#fff;
  background:linear-gradient(135deg,#FF8A65,#FFB300);
  box-shadow:0 4px 0 #d84315;
}
.type-badge{
  font-size:12px;font-weight:800;padding:4px 12px;border-radius:20px;
  background:#E8F5E9;color:var(--leaf-deep);border:2px solid #C8E6C9;
}
.q-zh{font-size:17px;font-weight:700;line-height:1.55;color:var(--ink);}
.q-py{font-size:13px;color:var(--muted);margin-top:4px;line-height:1.5;letter-spacing:.3px;}

/* opts */
.opts{margin-top:12px;display:flex;flex-direction:column;gap:8px;}
.opt{
  display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  font-family:inherit;cursor:pointer;font-size:15px;color:var(--ink);
  background:#F1F8E9;border:2.5px solid #DCEDC8;border-radius:16px;
  padding:10px 14px;transition:.18s;
}
.opt:hover:not(:disabled){background:#E8F5E9;transform:translateX(4px);border-color:#A5D6A7;}
.opt:disabled{cursor:default;}
.opt .letter{
  width:26px;height:26px;flex:0 0 auto;border-radius:9px;display:grid;place-items:center;
  background:#DCEDC8;color:var(--leaf-deep);font-weight:900;font-size:13px;
}
.opt-body{display:flex;flex-direction:column;gap:1px;}
.opt .py{font-size:12px;color:#A5BFA6;}
.opt.sel{background:#FFF8E1;border-color:#FFD54F;}
.opt.correct{background:#DCEDC8;border-color:#7BC96F;}
.opt.correct .letter{background:#7BC96F;color:#fff;}
.opt.wrong{background:#FFEBEE;border-color:#EF9A9A;}
.opt.wrong .letter{background:#EF9A9A;color:#fff;}

/* buttons */
.btn{
  font-family:inherit;cursor:pointer;font-weight:800;font-size:14px;
  border:none;border-radius:16px;padding:10px 20px;transition:.2s;
  color:#fff;background:linear-gradient(135deg,#7BC96F,#4CAF50);
  box-shadow:0 4px 0 #2E7D32;
}
.btn:hover{transform:translateY(-2px);}
.btn:active{transform:translateY(2px);box-shadow:0 1px 0 #2E7D32;}
.btn.sun{background:linear-gradient(135deg,#FFD54F,#FFA000);box-shadow:0 4px 0 #E65100;color:#5D4037;}
.btn.ghost{background:#fff;color:var(--leaf-deep);border:2.5px solid #C8E6C9;box-shadow:0 4px 0 #DCEDC8;}
.btn-row{margin-top:12px;display:flex;gap:10px;flex-wrap:wrap;}

/* input */
.input-row{margin-top:12px;display:flex;gap:10px;flex-wrap:wrap;}
.fill-input{
  flex:1 1 220px;font-family:inherit;font-size:16px;color:var(--ink);
  padding:11px 15px;border-radius:16px;border:2.5px solid #DCEDC8;
  background:#F1F8E9;outline:none;transition:.2s;
}
.fill-input:focus{border-color:#7BC96F;background:#fff;box-shadow:0 0 0 4px rgba(123,201,111,.18);}

/* match */
.match-wrap{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px;}
.match-col{display:flex;flex-direction:column;gap:9px;}
.tile{
  font-family:inherit;cursor:pointer;text-align:left;
  background:#F1F8E9;border:2.5px solid #DCEDC8;border-radius:15px;
  padding:10px 12px;font-size:15px;color:var(--ink);font-weight:600;
  transition:.18s;display:flex;flex-direction:column;gap:2px;
}
.tile .py{font-size:11.5px;color:#A5BFA6;font-weight:600;}
.tile:hover{border-color:#A5D6A7;background:#E8F5E9;}
.tile.sel{background:#FFF8E1;border-color:#FFD54F;transform:scale(1.03);}
.tile.matched{background:#DCEDC8;border-color:#7BC96F;cursor:default;opacity:.9;}
.tile.matched .py{color:#558B2F;}
.shake{animation:shake .4s;}
@keyframes shake{0%,100%{transform:translateX(0);}25%{transform:translateX(-7px);}75%{transform:translateX(7px);}}

/* order */
.order-zone{margin-top:12px;}
.zone-label{font-size:12px;font-weight:800;color:var(--muted);margin:8px 0 6px;letter-spacing:1px;}
.order-pool,.order-ans{
  display:flex;flex-wrap:wrap;gap:9px;min-height:52px;
  padding:10px;border-radius:16px;border:2.5px dashed #C8E6C9;background:#F1F8E9;
}
.order-ans{border-color:#FFD54F;background:#FFFCF0;border-style:solid;}
.order-pool .tile,.order-ans .tile{flex:0 0 auto;}
.order-ans .tile{background:#fff;border-color:#FFE082;}

/* feedback */
.feedback{
  margin-top:12px;font-size:14px;font-weight:700;line-height:1.6;
  padding:11px 15px;border-radius:15px;display:none;
}
.feedback.show{display:block;animation:pop .3s ease;}
.feedback.ok{background:#E8F5E9;color:#2E7D32;border:2px solid #A5D6A7;}
.feedback.no{background:#FFEBEE;color:#C62828;border:2px solid #FFCDD2;}
.feedback.tip{background:#FFF8E1;color:#B27500;border:2px solid #FFE082;}

.sample-box{
  margin-top:10px;background:#F1F8E9;border-left:6px solid #7BC96F;
  border-radius:12px;padding:11px 14px;font-size:14px;line-height:1.65;
  color:var(--leaf-deep);display:none;
}
.sample-box.show{display:block;animation:pop .3s ease;}
.sample-box b{color:#2E7D32;}

textarea.write{
  width:100%;margin-top:10px;font-family:inherit;font-size:15px;color:var(--ink);
  border:2.5px solid #DCEDC8;border-radius:16px;padding:11px 14px;resize:vertical;
  min-height:62px;background:#F1F8E9;outline:none;
}
textarea.write:focus{border-color:#7BC96F;background:#fff;}

footer{
  position:relative;z-index:1;text-align:center;padding:10px 16px 34px;
  color:var(--muted);font-weight:700;font-size:14px;
}

@media(max-width:520px){
  .match-wrap{grid-template-columns:1fr;}
  .card{padding:15px 15px 13px;}
  .q-zh{font-size:16px;}
}