*{box-sizing:border-box}
body{margin:0;background:#eef0f3;color:#111;font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",Arial,sans-serif}
button,input{font:inherit}
button{border:0;cursor:pointer}
svg{display:block}
#app{position:relative;width:100%;max-width:430px;min-height:100vh;margin:0 auto;background:linear-gradient(180deg,#fffdf8 0%,#f6f7f9 100%);overflow:hidden}
.screen{display:none;min-height:100vh;padding-bottom:28px}
#screen-quiz{padding-bottom:96px}
.screen.active{display:block}
.hero{position:relative;padding:48px 18px 16px;overflow:hidden}
.hero::before,.hero::after{display:none}
.hero-top{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between}
.brand-mark{width:72px;height:72px;border-radius:24px;background:#111;color:#fff;display:grid;place-items:center;box-shadow:0 18px 34px rgba(17,17,17,.14)}
.brand-mark svg{width:36px;height:36px;stroke-width:2.6}
.eyebrow{position:relative;z-index:1;margin:28px 0 10px;color:#ff6b16;font-size:14px;font-weight:900;letter-spacing:.055em}
.hero h1{position:relative;z-index:1;margin:0;font-size:38px;line-height:1.12;font-weight:950;color:#111;letter-spacing:0}
.sub{position:relative;z-index:1;margin:18px 0 0;color:#777;font-size:17px;line-height:1.55}
.user-strip{position:relative;z-index:1;margin-top:22px;min-height:74px;padding:15px 20px;background:#fff;border:1px solid #f0f0f0;border-radius:8px;box-shadow:0 12px 32px rgba(17,17,17,.06);display:flex;align-items:center;gap:8px;color:#777}
.user-strip span{display:grid;gap:5px}
.user-strip small{font-size:14px;color:#777}
.user-strip strong{font-size:21px;line-height:1;color:#111;font-weight:950}
.link-btn{margin-left:auto;height:44px;padding:0 18px;border-radius:4px;background:#fff9ec;color:#ff6b16;font-size:18px;font-weight:800;display:flex;align-items:center;gap:7px}
.link-btn::before{content:"";width:18px;height:18px;display:block;background:currentColor;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4Z'/%3E%3C/svg%3E") center/contain no-repeat}
.home-progress{display:none;position:relative;z-index:1;margin-top:16px;padding:14px 16px;background:#fff;border:1px solid #f0f0f0;border-radius:8px;box-shadow:0 12px 28px rgba(17,17,17,.06);grid-template-columns:1fr auto;gap:9px;color:#777}
.home-progress b{color:#ff6900}
.home-progress div{grid-column:1/-1;height:9px;border-radius:99px;background:rgba(255,105,0,.12);overflow:hidden}
.home-progress em{display:block;width:0;height:100%;border-radius:99px;background:linear-gradient(90deg,#ff6900,#ff9b22);transition:width .35s}
.home-actions{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:18px 18px 32px}
.feature-card{position:relative;min-height:136px;padding:22px 20px;border-radius:8px;background:#fff;text-align:left;border:1px solid #e9e9e9;box-shadow:0 5px 14px rgba(17,17,17,.035);display:flex;flex-direction:column;gap:14px;overflow:hidden;transition:transform .15s,box-shadow .15s}
.feature-card:active{transform:scale(.96)}
.feature-card::after{display:none}
.feature-card svg{width:34px;height:34px;color:#ff6b16;stroke-width:2.5}
.feature-card strong{margin-top:auto;font-size:22px;font-weight:950;line-height:1.15;color:#111}
.feature-card span{color:#777;font-size:15px;line-height:1.45}
.feature-card.accent{background:#111;color:#fff;border-color:#111;box-shadow:0 14px 28px rgba(17,17,17,.12)}
.feature-card.accent svg,.feature-card.accent strong{color:#fff}
.feature-card.accent span{color:#a8a8a8}
.feature-card:nth-child(2),.feature-card:nth-child(3),.feature-card:nth-child(4){border-color:#e9e9e9}
.feature-card:nth-child(2) svg,.feature-card:nth-child(3) svg,.feature-card:nth-child(4) svg{color:#ff6b16}
.feature-card.wide{grid-column:1/-1;min-height:112px;display:grid;grid-template-columns:44px 1fr;align-items:center;gap:6px 16px}
.feature-card.wide svg{grid-row:1/3;color:#ff6b16}
.feature-card.wide strong,.feature-card.wide span{grid-column:2}
.feature-card.wide strong{margin-top:0}
.topbar{height:62px;display:flex;align-items:center;gap:12px;padding:0 16px;background:rgba(255,255,255,.72);backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,.9)}
.topbar button{width:38px;height:38px;border-radius:50%;background:#fff;display:grid;place-items:center;box-shadow:0 4px 12px rgba(0,0,0,.05)}
.topbar h2{margin:0;font-size:18px;flex:1;font-weight:900}
.topbar svg{width:20px;height:20px}
.topbar strong{color:#ff6900;font-size:20px}
.progress-card,.quiz-meter{margin:16px;padding:16px;background:rgba(255,255,255,.86);border:1px solid rgba(255,255,255,.9);border-radius:16px;box-shadow:0 10px 24px rgba(86,54,20,.06)}
.progress-card{display:grid;grid-template-columns:1fr auto;gap:10px;color:#7b6758}
.progress-card b{color:#ff6900}
.progress-card div,.quiz-meter div{grid-column:1/-1;height:9px;border-radius:99px;background:rgba(255,105,0,.12);overflow:hidden}
.progress-card em,.quiz-meter em{display:block;height:100%;width:0;background:linear-gradient(90deg,#ff6900,#ff9b22);border-radius:99px;transition:width .35s}
.module-list{padding:0 16px;display:grid;gap:11px}
.module-item{display:flex;gap:13px;align-items:center;padding:14px;background:rgba(255,255,255,.88);border:1px solid rgba(255,255,255,.9);border-radius:16px;box-shadow:0 10px 24px rgba(86,54,20,.06)}
.module-item:disabled{opacity:.58}
.module-icon{width:48px;height:48px;border-radius:50%;color:#fff;display:grid;place-items:center;flex:0 0 auto;box-shadow:0 10px 22px rgba(0,0,0,.12)}
.module-icon svg{width:24px;height:24px}
.module-item h3{margin:0 0 4px;font-size:16px;font-weight:900}
.module-item p{margin:0;color:#927d6d;font-size:12px}
.module-item small{margin-left:auto;color:#ff6900;background:rgba(255,105,0,.08);padding:4px 9px;border-radius:999px;white-space:nowrap;font-size:12px;font-weight:800}
.quiz-meter{display:grid;grid-template-columns:1fr auto;gap:8px;color:#7b6758}
.question-card{margin:16px;padding:19px;background:#fff;border-radius:18px;border:1px solid rgba(255,255,255,.9);box-shadow:0 14px 30px rgba(86,54,20,.08)}
.tag{display:inline-flex;padding:4px 10px;border-radius:20px;background:#fff3e8;color:#ff6900;font-size:12px;font-weight:900}
.question-card h3{font-size:18px;line-height:1.58;margin:14px 0 8px}
.question-card p{color:#d97706;font-size:13px}
.options{display:grid;gap:10px}
.option{display:flex;align-items:center;gap:12px;padding:14px;border-radius:14px;background:#f9fafb;border:2px solid transparent;text-align:left}
.option b{width:29px;height:29px;border-radius:50%;display:grid;place-items:center;background:#ebe7df;color:#6f6257}
.option.selected{border-color:#ff6900;background:#fff7ed}
.option.selected b{background:#ff6900;color:#fff}
.option.correct{border-color:#16a34a;background:#f0fdf4}
.option.correct b{background:#16a34a;color:#fff}
.option.wrong{border-color:#dc2626;background:#fef2f2}
.option.wrong b{background:#dc2626;color:#fff}
.primary{width:calc(100% - 32px);margin:12px 16px;padding:14px;border-radius:14px;background:linear-gradient(135deg,#ff6900,#ff8c00);color:#fff;font-weight:900;box-shadow:0 12px 24px rgba(255,105,0,.2)}
#confirmMulti{position:fixed;left:50%;bottom:calc(14px + env(safe-area-inset-bottom));transform:translateX(-50%);width:min(398px,calc(100% - 32px));margin:0;z-index:30}
#confirmMulti.hidden{display:none!important}
#nextBtn{position:fixed;left:50%;bottom:calc(14px + env(safe-area-inset-bottom));transform:translateX(-50%);width:min(398px,calc(100% - 32px));margin:0;z-index:30}
#nextBtn.hidden{display:none!important}
.hidden{display:none!important}
.feedback{margin:12px 16px;padding:14px;border-radius:14px;line-height:1.65}
.feedback.ok{background:#f0fdf4;color:#166534;border:1px solid #bbf7d0}
.feedback.no{background:#fef2f2;color:#991b1b;border:1px solid #fecaca}
.result-box{min-height:100vh;padding:90px 22px 28px;text-align:center;display:flex;flex-direction:column;align-items:center}
.result-box svg{width:76px;height:76px;color:#ff6900}
.result-box h2{font-size:26px}
.result-box p{color:#7b6758}
.result-stats{width:100%;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:18px 0}
.result-stats span{padding:14px;background:rgba(255,255,255,.82);border:1px solid rgba(255,255,255,.9);border-radius:16px;color:#927d6d;font-size:12px}
.result-stats b{display:block;color:#ff6900;font-size:21px}
.tabs{display:flex;margin:16px;background:#fff;border-radius:14px;overflow:hidden;border:1px solid rgba(255,255,255,.9)}
.tabs button{flex:1;padding:12px;background:#fff;font-weight:900;color:#7b6758}
.tabs button.active{background:linear-gradient(135deg,#ff6900,#ff8c00);color:#fff}
.rank-list,.radar-list,.wrong-list{padding:0 16px;display:grid;gap:10px}
.wrong-list .primary{width:100%;margin:0 0 4px}
.rank-item,.radar-item,.wrong-card{padding:14px;background:rgba(255,255,255,.86);border:1px solid rgba(255,255,255,.9);border-radius:16px;box-shadow:0 10px 24px rgba(86,54,20,.06)}
.rank-item{display:grid;grid-template-columns:38px 1fr auto;align-items:center;gap:10px}
.rank-no{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#ff6900,#ff8c00);color:#fff;font-weight:900}
.rank-item p,.wrong-card p{margin:4px 0 0;color:#927d6d;font-size:13px}
.radar-head{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.radar-head svg{width:20px;height:20px}
.radar-head span{margin-left:auto;color:#ff6900;font-weight:900}
.radar-bar{height:8px;background:rgba(255,105,0,.12);border-radius:10px;overflow:hidden}
.radar-bar em{display:block;height:100%;border-radius:10px}
.wrong-card h3{font-size:15px;line-height:1.5}
.modal{position:fixed;inset:0;background:rgba(43,25,11,.46);backdrop-filter:blur(5px);display:none;align-items:center;justify-content:center;padding:18px;z-index:50}
.modal.show{display:flex}
.modal-card{width:100%;max-width:360px;background:#fff;border-radius:20px;padding:26px 22px;text-align:center;box-shadow:0 28px 80px rgba(43,25,11,.25)}
.modal-card svg{width:46px;height:46px;margin:0 auto;color:#ff6900}
.modal-card h2{margin:12px 0 14px}
.modal-card input{width:100%;padding:13px 14px;border:1px solid #e7ddd2;border-radius:12px;margin:7px 0;outline:none}
.modal-card input:focus{border-color:#ff6900}