:root{--bg: #fff8fc;--panel: #ffffff;--text: #4d3d71;--muted: #7d6a9e;--pink: #ff7fb3;--pink-dark: #ef5f98;--yellow: #ffd768;--purple: #b794ff;--blue: #8cd8ff;--green: #8be0b4;--danger: #ef667f;--ok: #34b56f;--shadow: 0 12px 30px rgba(176, 130, 196, .18);--radius: 18px}*{box-sizing:border-box}body{margin:0;font-family:PingFang SC,Microsoft YaHei,sans-serif;background:radial-gradient(circle at top left,#ffe4f2 0,transparent 28%),radial-gradient(circle at top right,#e9deff 0,transparent 30%),linear-gradient(180deg,#fff8fc,#fffaf0);color:var(--text)}#app,.app-viewport{min-height:100dvh}button,input,select{font:inherit}.app{max-width:1380px;margin:0 auto;padding:18px 20px 24px}.hero{text-align:center;margin-bottom:14px}.hero h1{margin:0;font-size:40px;line-height:1.1}.hero p{margin:10px 0 0;color:var(--muted);font-size:16px}.layout{display:grid;grid-template-columns:minmax(0,1.28fr) minmax(320px,.72fr);gap:16px;align-items:start}.panel{background:var(--panel);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px}.section-title{margin:0 0 14px;font-size:22px}.controls{display:grid;gap:14px}.row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}.select,.input{border:2px solid #eddfff;border-radius:14px;padding:10px 14px;font-size:16px;color:var(--text);background:#fbf8ff}.chips{display:flex;gap:10px;flex-wrap:wrap}.chip{border:0;border-radius:14px;padding:10px 16px;background:#f5efff;color:var(--text);font-size:15px;font-weight:700;cursor:pointer;min-width:88px}.chip.active{background:#dcc5ff}.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.stat{border-radius:16px;padding:12px 14px;min-height:78px}.stat small{display:block;color:#6a578d;font-size:13px;margin-bottom:8px;font-weight:700}.stat strong{display:block;font-size:22px;line-height:1.2}.s1{background:#fff2c6}.s2{background:#ffe2ee}.s3{background:#def5ff}.s4{background:#e6f8ee}.question-box{margin-top:14px;min-height:0;display:flex;flex-direction:column;justify-content:space-between;gap:16px}.question{text-align:center;font-size:46px;font-weight:800;line-height:1.2;padding:22px 12px 8px;min-height:104px}.feedback{min-height:32px;text-align:center;font-size:20px;font-weight:800}.feedback.ok{color:var(--ok)}.feedback.bad{color:var(--danger)}.feedback.warn{color:#d48a00}.answers{display:grid;gap:12px;max-width:560px;width:100%;margin:0 auto}.answers.choice-layout{grid-template-columns:repeat(3,minmax(0,1fr));max-width:760px}.answer-btn,.primary-btn,.secondary-btn{border:0;cursor:pointer;font-weight:800;border-radius:16px;transition:transform .15s ease,box-shadow .15s ease,background .15s ease}.answer-btn:hover,.primary-btn:hover,.secondary-btn:hover,.chip:hover{transform:translateY(-1px)}.answer-btn{padding:16px;background:#f4efff;color:var(--text);font-size:23px;min-height:70px}.blank-wrap{display:none;justify-content:center;gap:12px;align-items:center;flex-wrap:wrap}.blank-wrap.show{display:flex}.blank-input{width:130px;text-align:center;font-size:28px;font-weight:800;padding:12px 16px;border-radius:18px;border:2px solid #f3dd72;background:#fff8d8;color:var(--text)}.primary-btn{background:var(--pink);color:#fff;padding:14px 20px;font-size:18px;box-shadow:0 8px 20px #ff7fb347}.secondary-btn{background:#ede5ff;color:var(--text);padding:14px 20px;font-size:18px}.button-row{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}.tips{border-radius:16px;background:#fff8e8;padding:13px 15px;color:#7a659d;font-size:14px;line-height:1.65}.reward-stage{--reward-card-rest-top: 30px;--reward-card-bounce-mid-top: 34px;--reward-card-bounce-high-top: 26px;position:relative;height:178px;overflow:hidden;background:linear-gradient(180deg,#fff9fd,#fff4fb);border-radius:18px;border:2px dashed #f3cfe1}.reward-hint{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;color:#cb9fbe;font-size:18px;font-weight:800;text-align:center;padding:20px}.drop-card{position:absolute;left:50%;top:-140px;transform:translate(-50%);width:246px;height:112px;border-radius:20px;color:#fff;text-align:left;padding:12px;font-weight:800;box-shadow:0 18px 28px #5031773d;animation:dropBounce 1.25s ease forwards;display:flex;align-items:center;justify-content:center}.drop-card.preview{animation:none;top:50%;transform:translate(-50%,-50%)}.drop-card.preview-enter{animation:previewDropBounce 1.05s ease forwards}.drop-card.confirmed{animation:none;top:50%;transform:translate(-50%,-50%)}.drop-card-content{width:100%;height:100%;display:flex;flex-direction:row;justify-content:center;align-items:center;gap:10px}.drop-card-figure{width:84px;min-width:84px;height:84px;padding:5px;border-radius:18px;display:flex;align-items:center;justify-content:center}.drop-card-image{width:100%;height:100%;object-fit:contain;display:block;margin:0 auto;filter:drop-shadow(0 6px 12px rgba(62,39,95,.16))}.drop-card-copy{min-width:0;flex:1;display:flex;flex-direction:column;justify-content:center}.sparkle{position:absolute;width:14px;height:14px;border-radius:50%;animation:sparkle 1s ease forwards;opacity:0}@keyframes dropBounce{0%{top:-180px;transform:translate(-50%) rotate(-10deg) scale(.85)}60%{top:var(--reward-card-bounce-mid-top);transform:translate(-50%) rotate(4deg) scale(1.04)}78%{top:var(--reward-card-bounce-high-top);transform:translate(-50%) rotate(-3deg) scale(.98)}to{top:var(--reward-card-rest-top);transform:translate(-50%) rotate(0) scale(1)}}@keyframes previewDropBounce{0%{top:-180px;transform:translate(-50%) rotate(-10deg) scale(.85)}60%{top:calc(50% + 4px);transform:translate(-50%,-50%) rotate(4deg) scale(1.04)}78%{top:calc(50% - 4px);transform:translate(-50%,-50%) rotate(-3deg) scale(.98)}to{top:50%;transform:translate(-50%,-50%) rotate(0) scale(1)}}@keyframes sparkle{0%{transform:translateY(20px) scale(.2);opacity:0}30%{opacity:1}to{transform:translateY(-36px) scale(1.15);opacity:0}}.collection-header{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:14px 0 10px}.collection{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.mini-card{border-radius:14px;padding:8px;color:#fff;min-height:148px;display:flex;flex-direction:column;justify-content:flex-start;box-shadow:0 12px 20px #63438c2e;cursor:pointer}.mini-card-figure{width:100%;padding:4px;border-radius:12px;margin-bottom:4px;flex:0 0 auto}.mini-card-image{width:100%;height:64px;object-fit:contain;display:block;margin:0 auto 6px;filter:drop-shadow(0 5px 10px rgba(62,39,95,.16))}.mini-card-copy{display:flex;flex-direction:column;gap:4px;min-height:0}.mini-card-name{font-size:15px;font-weight:800;line-height:1.15;word-break:break-word}.mini-card-tag{font-size:11px;line-height:1.2;opacity:.96}.mini-card-count{font-size:14px;font-weight:800;line-height:1.15}.empty{padding:20px 0;color:#c09abc;font-weight:700}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#573a7b59;display:none;align-items:center;justify-content:center;padding:20px}.overlay.show{display:flex}.celebration-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:radial-gradient(circle at top,#fff2bdf5,#ffd7f2f0 45%,#9e7bffe6);display:none;align-items:center;justify-content:center;padding:20px;overflow:hidden;z-index:20}.celebration-overlay.show{display:flex}.celebration-card{position:relative;width:min(720px,100%);padding:36px 28px;border-radius:28px;background:#ffffffe6;box-shadow:0 26px 60px #5a3d8747;text-align:center;z-index:2;animation:celebrationPop .5s ease}.celebration-badge{display:inline-block;padding:10px 18px;border-radius:999px;background:#ffe890;color:#7b5397;font-weight:800;font-size:16px}.celebration-title{margin:18px 0 10px;font-size:56px;line-height:1.05;color:#ff5e94;text-shadow:0 4px 0 rgba(255,255,255,.75)}.celebration-subtitle{margin:0;font-size:24px;color:#5f4a86;font-weight:800}.celebration-meta{margin-top:16px;color:#7c699d;font-size:18px;font-weight:700;line-height:1.6}.confetti{position:absolute;top:-12vh;width:18px;height:28px;border-radius:6px;opacity:.95;animation:confettiFall linear forwards;z-index:1}@keyframes celebrationPop{0%{transform:scale(.75) translateY(24px);opacity:0}to{transform:scale(1) translateY(0);opacity:1}}@keyframes confettiFall{0%{transform:translateY(-10vh) rotate(0)}to{transform:translateY(120vh) rotate(540deg)}}.modal{width:min(520px,100%);max-height:min(82vh,760px);overflow:hidden;background:#fff;border-radius:20px;padding:20px;box-shadow:0 24px 40px #492e7338}.modal h3{margin:0 0 10px;font-size:24px}.remove-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:16px;max-height:min(56vh,520px);overflow:auto;padding-right:4px}.remove-option{border:0;border-radius:16px;padding:12px;color:#fff;font-size:17px;font-weight:800;cursor:pointer;text-align:left;display:grid;grid-template-columns:64px minmax(0,1fr);gap:10px;align-items:center}.remove-option-image{width:64px;height:64px;object-fit:contain;display:block;filter:drop-shadow(0 5px 10px rgba(62,39,95,.18))}.remove-option-figure{width:64px;height:64px;padding:5px;border-radius:16px;display:flex;align-items:center;justify-content:center}.gallery-modal{width:min(780px,100%);max-height:min(86vh,920px);overflow:auto;background:#fff;border-radius:24px;padding:22px;box-shadow:0 24px 40px #492e7338}.gallery-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:16px}.gallery-card{border-radius:18px;padding:12px;color:#fff;min-height:220px;box-shadow:0 12px 20px #63438c2e}.gallery-card-figure{width:100%;padding:8px;border-radius:16px;margin-bottom:10px}.gallery-card img{width:100%;height:140px;object-fit:contain;display:block;filter:drop-shadow(0 5px 10px rgba(62,39,95,.16))}.footer-note{margin-top:18px;text-align:center;color:#8c79ac;font-size:14px}@media (min-width: 981px){.rewards-panel{display:flex;flex-direction:column;min-height:0;max-height:calc(100dvh - 56px);overflow:hidden}.rewards-panel .collection{flex:1;min-height:0;overflow:auto;align-content:start;padding-right:4px}}@media (min-width: 700px) and (max-width: 1180px){.app-viewport{min-height:100dvh}.app{max-width:1180px;width:auto;padding:10px 12px 14px;transform:none}.layout{grid-template-columns:minmax(0,1fr) 372px;gap:12px;min-height:0;max-height:none}.panel{padding:14px;height:100%}.hero h1{font-size:30px}.hero p{margin-top:6px;font-size:13px}.stats{grid-template-columns:repeat(2,minmax(0,1fr))}.stat{min-height:68px;padding:10px 12px}.stat strong{font-size:20px}.practice-panel{display:flex;flex-direction:column}.rewards-panel{display:block;overflow:visible;width:372px;min-width:372px;max-width:372px}.question{font-size:34px;min-height:76px;padding:14px 8px 4px}.answer-btn{font-size:20px;min-height:58px;padding:13px}.answers.choice-layout{max-width:920px;gap:10px}.feedback{min-height:24px;font-size:18px}.button-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}.primary-btn,.secondary-btn{padding:12px 14px;font-size:16px}.tips{margin-top:12px;padding:10px 12px;font-size:12px;line-height:1.5}.reward-stage{--reward-card-rest-top: 30px;--reward-card-bounce-mid-top: 34px;--reward-card-bounce-high-top: 26px;height:220px;min-height:220px;width:100%}.drop-card{width:246px;height:112px}.drop-card-figure{width:84px;min-width:84px;height:84px}.collection{grid-template-columns:repeat(4,minmax(0,1fr));align-content:start}.mini-card{min-height:148px;padding:8px}.mini-card-image{height:64px}.mini-card-copy{gap:4px}.mini-card-name{font-size:15px}.mini-card-tag{font-size:11px}.mini-card-count{font-size:14px}.collection-header{margin:14px 0 10px}.footer-note{margin-top:18px;font-size:14px}.question-box{flex:1;gap:12px}.rewards-panel .collection{min-height:0;max-height:420px;overflow:auto;padding-right:4px}}@media (max-width: 699px){.layout{grid-template-columns:1fr}.stats{grid-template-columns:repeat(2,minmax(0,1fr))}.question{font-size:38px}.collection{grid-template-columns:repeat(4,minmax(0,1fr))}.remove-list{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (max-width: 640px){.app{padding:14px}.hero h1{font-size:32px}.question{font-size:32px;min-height:96px}.answer-btn{font-size:22px}.answers.choice-layout{grid-template-columns:1fr;max-width:560px}.collection{grid-template-columns:repeat(2,minmax(0,1fr))}.mini-card{min-height:144px}.stats{grid-template-columns:1fr 1fr}.celebration-title{font-size:40px}.celebration-subtitle{font-size:20px}.gallery-grid{grid-template-columns:1fr 1fr}.collection-header{align-items:flex-start;flex-direction:column}.remove-list{grid-template-columns:1fr;max-height:min(58vh,460px)}}
