body{margin:0;padding:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:#0a0a0a;overflow-x:hidden}.container{max-width:100vw;min-height:100vh;position:relative;background:linear-gradient(135deg,#1a1a2e,#16213e,#0f3460,#533483,#7209b7);padding-bottom:100px;background-size:400% 400%;animation:gradientShift 15s ease infinite}.top-tips{position:absolute;top:0;width:100%;padding:5px 0;background:#00000080;color:#fff;font-size:15px;overflow:hidden;white-space:nowrap}.top-tips:before{content:"测试结果/报告需付费查看";display:inline-block;animation:marquee 8s linear infinite;padding-left:100%}.container:before{content:"";position:fixed;top:0;left:0;width:100%;height:100%;background-image:radial-gradient(2px 2px at 20px 30px,#eee,transparent),radial-gradient(2px 2px at 40px 70px,rgba(255,255,255,.8),transparent),radial-gradient(1px 1px at 90px 40px,#fff,transparent),radial-gradient(1px 1px at 130px 80px,rgba(255,255,255,.6),transparent),radial-gradient(2px 2px at 160px 30px,#ddd,transparent);background-repeat:repeat;background-size:200px 100px;animation:sparkle 20s linear infinite;pointer-events:none;z-index:0}.container:after{content:"✦ ◆ ✧ ❋ ✦ ◇ ✧ ❈ ✦ ◆ ✧ ❋";position:fixed;top:0;left:0;width:100%;height:100%;font-size:24px;color:#ffffff0d;display:flex;flex-wrap:wrap;justify-content:space-around;align-items:center;animation:float 25s ease-in-out infinite;pointer-events:none;z-index:0}.moon-decoration{position:fixed;top:10%;right:10%;width:80px;height:80px;border-radius:50%;background:linear-gradient(135deg,gold,#ffed4e);box-shadow:0 0 20px #ffd7004d,inset -10px -10px #ffffff1a;animation:moonGlow 8s ease-in-out infinite;z-index:1}.moon-decoration:before{content:"";position:absolute;top:15%;left:20%;width:12px;height:12px;border-radius:50%;background:#ffffff4d;box-shadow:20px 10px 0 -2px #fff3,-5px 25px 0 -3px #ffffff26}.container>*{position:relative;z-index:2}.header{text-align:center;padding:20px 15px;background:#ffffff14;backdrop-filter:blur(20px);border-bottom:1px solid rgba(255,255,255,.1)}.title{font-size:20px;font-weight:700;color:#fff;margin-bottom:15px;text-shadow:0 0 10px rgba(255,215,0,.5),0 0 20px rgba(255,215,0,.3),0 2px 4px rgba(0,0,0,.3);animation:titleGlow 3s ease-in-out infinite alternate}.cover-image{width:100%;max-width:350px;height:auto;border-radius:15px;box-shadow:0 8px 32px #0000004d;transition:transform .3s ease}.cover-image:hover{transform:scale(1.02)}.content-section{padding:20px 15px}.content-html{text-align:center;margin-bottom:30px}.content-html img{width:100%;max-width:350px;height:auto;border-radius:10px;transition:opacity .3s ease}.selection-title{font-size:16px;font-weight:700;color:#333;text-align:center;margin-bottom:20px;line-height:1.5}.cards-container{display:flex;justify-content:space-around;align-items:center;margin:30px 0;padding:20px 0;background:linear-gradient(135deg,#8b5cf6,#ec4899,#f59e0b);border-radius:15px;position:relative;overflow:hidden}.cards-container:before{content:"";position:absolute;inset:0;background:linear-gradient(45deg,transparent 30%,rgba(255,255,255,.1) 50%,transparent 70%);animation:shimmer 3s infinite}@keyframes shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}.card-item{display:flex;flex-direction:column;align-items:center;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);padding:10px;border-radius:10px;position:relative;z-index:1}.card-item:hover{transform:translateY(-5px) scale(1.05);background:#fff3}.card-item.selected{transform:translateY(-10px) scale(1.1);background:#ffffff4d}.card-item.unselected{transform:translateY(0) scale(.9);opacity:.6}.card-icon{width:60px;height:60px;margin-bottom:10px;filter:drop-shadow(0 4px 8px rgba(0,0,0,.3));transition:all .3s ease}.card-number{font-size:24px;font-weight:700;color:#fff;text-shadow:0 2px 4px rgba(0,0,0,.5)}.group-labels{display:flex;justify-content:space-around;margin-top:15px;padding:0 10px}.group-label{font-size:14px;color:#666;font-weight:500}.result-section{background:#ffffff1f;border:1px solid rgba(255,255,255,.2);border-radius:20px;padding:25px;margin:20px 10px;box-shadow:0 8px 32px #0000004d,0 0 0 1px #ffffff1a;backdrop-filter:blur(20px);opacity:0;transform:translateY(30px);transition:all .5s cubic-bezier(.4,0,.2,1)}.result-section.show{opacity:1;transform:translateY(0)}.result-title{font-size:20px;font-weight:700;color:#fff;margin-bottom:15px;text-align:center;text-shadow:0 0 10px rgba(255,215,0,.3)}.result-content{font-size:15px;line-height:1.6;color:#ffffffe6}.unlock-button{background:linear-gradient(135deg,#d4af37,#b8860b,gold);color:#1a1a2e;border:none;padding:18px 30px;border-radius:30px;font-size:16px;font-weight:700;cursor:pointer;width:100%;margin-top:25px;box-shadow:0 8px 25px #d4af3766,0 0 0 1px #ffd7004d;transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden;text-shadow:0 1px 2px rgba(0,0,0,.2)}.unlock-button:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transition:left .5s}.unlock-button:hover:before{left:100%}.unlock-button:hover{transform:translateY(-3px);box-shadow:0 12px 35px #d4af3799,0 0 0 1px #ffd70080,0 0 30px #ffd7004d}.unlock-button:active{transform:translateY(0)}.loading{text-align:center;padding:50px 20px;color:#fff;font-size:16px}.error{text-align:center;padding:50px 20px;color:#ff6b6b;background:#ffffffe6;margin:20px 10px;border-radius:15px;backdrop-filter:blur(10px)}@media (max-width: 375px){.card-icon{width:50px;height:50px}.card-number{font-size:20px}.selection-title{font-size:14px}.title{font-size:16px}}@media (max-width: 320px){.cards-container{padding:15px 5px}.card-item{padding:5px}}.card-item,.unlock-button,.cover-image{will-change:transform}.image-placeholder{background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0,#f0f0f0 75%);background-size:200% 100%;animation:loading 1.5s infinite}@keyframes loading{0%{background-position:200% 0}to{background-position:-200% 0}}@keyframes gradientShift{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}@keyframes sparkle{0%{transform:translateY(0);opacity:1}50%{transform:translateY(-10px);opacity:.8}to{transform:translateY(0);opacity:1}}@keyframes float{0%,to{transform:translateY(0) rotate(0);opacity:.05}25%{transform:translateY(-10px) rotate(90deg);opacity:.08}50%{transform:translateY(-5px) rotate(180deg);opacity:.06}75%{transform:translateY(-15px) rotate(270deg);opacity:.09}}@keyframes moonGlow{0%,to{box-shadow:0 0 20px #ffd7004d,inset -10px -10px #ffffff1a}50%{box-shadow:0 0 40px #ffd70099,inset -10px -10px #fff3}}@keyframes titleGlow{0%{text-shadow:0 0 10px rgba(255,215,0,.5),0 0 20px rgba(255,215,0,.3),0 2px 4px rgba(0,0,0,.3)}to{text-shadow:0 0 20px rgba(255,215,0,.8),0 0 30px rgba(255,215,0,.5),0 2px 4px rgba(0,0,0,.3)}}.footer{position:absolute;z-index:2;margin-top:40px;width:100%;bottom:0;padding:30px 20px}.footer-text{text-align:center;max-width:600px;margin:0 auto;padding:20px;overflow:hidden}.footer-text p{font-size:13px;line-height:1.6;color:#ffffffb3;margin:8px 0;z-index:1}.footer-text p:first-child{font-weight:600;color:#ffd700cc;text-shadow:0 0 8px rgba(255,215,0,.3),0 1px 2px rgba(0,0,0,.5);margin-bottom:12px}.footer-text p:hover{color:#ffffffe6}.footer-text:after{content:"✦";position:absolute;top:-8px;left:50%;transform:translate(-50%);font-size:16px;color:#ffd70099;text-shadow:0 0 10px rgba(255,215,0,.3);animation:symbolFloat 4s ease-in-out infinite}@keyframes footerShimmer{0%{left:-100%}50%{left:-100%}to{left:100%}}@keyframes symbolFloat{0%,to{transform:translate(-50%) translateY(0) rotate(0);opacity:.6}50%{transform:translate(-50%) translateY(-3px) rotate(180deg);opacity:.8}}@keyframes marquee{0%{transform:translate(0)}to{transform:translate(-100%)}}@media (max-width: 768px){.footer{margin-top:30px;padding:25px 15px}.footer-text{padding:15px}.footer-text p{font-size:12px;margin:6px 0}}@media (max-width: 375px){.footer{padding:20px 10px}.footer-text{padding:12px;border-radius:12px}.footer-text p{font-size:11px;line-height:1.5}}