*{margin:0;padding:0;box-sizing:border-box;font-family:'Microsoft YaHei',sans-serif}
body{background:#f0f7ff;min-height:100vh;padding:20px;padding-bottom:20px;display:flex;justify-content:center;align-items:center;-webkit-text-size-adjust:100%!important;text-size-adjust:100%!important;-moz-text-size-adjust:100%!important}
.test-wrap{max-width:550px;width:100%;background:#fff;border-radius:20px;padding:30px 25px;box-shadow:0 10px 30px rgba(173,216,230,0.15);position:relative;transform:translateY(-20px)}
.test-header{text-align:center;margin-bottom:30px}
.test-header h2{color:#2196f3;font-size:24px;margin-bottom:10px}
.test-header p{color:#6a8ca9;font-size:16px}
.progress-bar{height:8px;background:#e3f2fd;border-radius:4px;margin-bottom:20px;overflow:hidden}
.progress-fill{height:100%;background:#2196f3;width:0%;transition:width .3s}
.content-area{min-height:300px;display:flex;flex-direction:column;justify-content:center}
.question-container{display:block}
.question-container.hide{display:none}
.question-item{text-align:center}
.question-item .q-num{font-size:18px;margin-bottom:8px}
.question-item .q-content{font-size:17px;margin-bottom:18px}
.option-list{display:flex;flex-direction:column;gap:12px;margin:0 auto 30px;max-width:350px}
.option-btn{padding:14px 18px;background:#f8fbfd;border:2px solid #ddd;border-radius:12px;text-align:center;cursor:pointer;transition:all .25s}
.option-btn:hover{background:#f0f7ff;border-color:#999}
.option-btn.selected{background:#4CAF50;border-color:#388e3c;color:#fff;font-weight:500}
.next-btn,.submit-btn{width:100%;padding:16px;border:none;border-radius:12px;font-size:16px;font-weight:500;cursor:pointer;transition:opacity .3s}
.next-btn{background:#90caf9;color:#fff;cursor:not-allowed;opacity:.6}
.next-btn.active{background:linear-gradient(120deg,#2196f3,#1976d2);cursor:pointer;opacity:1}
.submit-btn{background:#90caf9;color:#fff;cursor:not-allowed;opacity:.6}
.submit-btn.active{background:linear-gradient(120deg,#2196f3,#1976d2);cursor:pointer;opacity:1}
.loading-wrap{display:none;min-height:300px;flex-direction:column;justify-content:center;align-items:center}
.loading-spinner{width:40px;height:40px;border:4px solid #e3f2fd;border-top:4px solid #2196f3;border-radius:50%;animation:spin 1s linear infinite;margin-bottom:15px}
.loading-text{font-size:20px}
@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}
#result-card{display:none;min-height:300px;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:0 20px}
.result-title{font-size:20px;margin-bottom:20px}
.result-text{color:red;font-size:28px;font-weight:bold;margin-bottom:30px}
.restart-btn{padding:14px 30px;background:linear-gradient(120deg,#4caf50,#388e3c);color:#fff;border:none;border-radius:12px;font-size:15px;font-weight:500;cursor:pointer;transition:opacity .3s}
.restart-btn:hover{opacity:.9}