:root{
  --bg:#fff7f2;
  --bg2:#ffeede;
  --card:#ffffff;
  --text:#2b2230;
  --sub:#8b7f8d;
  --line:#f0e3dc;
  --brand:#ff7a59;
  --brand2:#ff9f68;
  --pink:#ff6b9d;
  --ok:#22b07d;
  --ok-bg:#e7f8f0;
  --err:#f4566e;
  --err-bg:#fdeef0;
  --gold:#f6a609;
  --shadow:0 10px 30px rgba(255,122,89,.14);
  --shadow-sm:0 6px 16px rgba(43,34,48,.08);
  --radius:20px;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","HarmonyOS Sans","Microsoft YaHei",sans-serif;
  color:var(--text);
  background:linear-gradient(160deg,var(--bg),var(--bg2));
  min-height:100vh;
  line-height:1.55;
  overflow-x:hidden;
}
.hide{display:none !important}
.muted{color:var(--sub);font-size:13px}

.bg-blobs{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.bg-blobs::before,.bg-blobs::after{
  content:"";position:absolute;border-radius:50%;filter:blur(60px);opacity:.5;
}
.bg-blobs::before{width:320px;height:320px;background:#ffd0b8;top:-120px;left:-90px}
.bg-blobs::after{width:360px;height:360px;background:#ffd7e8;bottom:-140px;right:-120px}

#app{position:relative;z-index:1;max-width:680px;margin:0 auto;padding:0 16px 40px}

/* 顶栏 */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 0 10px}
.brand{display:flex;align-items:center;gap:8px;font-weight:800;font-size:17px;cursor:pointer}
.brand-logo{font-size:22px}
.score-box{display:flex;gap:14px;background:rgba(255,255,255,.75);border:1px solid var(--line);border-radius:16px;padding:8px 14px;box-shadow:var(--shadow-sm)}
.score-item{display:flex;flex-direction:column;align-items:center;min-width:44px}
.score-item b{font-size:16px;color:var(--brand);line-height:1.2}
.score-item span{font-size:11px;color:var(--sub)}
.score-item.level b{font-size:12px;color:var(--gold);white-space:nowrap}

/* 屏幕切换 */
.screen{display:none;animation:fadeUp .32s ease}
.screen.active{display:block}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* 首页 */
.hero{text-align:center;padding:26px 6px 20px}
.hero h1{font-size:23px;line-height:1.4;letter-spacing:.3px}
.hero .sub{color:var(--sub);font-size:14px;margin-top:8px}
.hero-actions{display:flex;gap:10px;justify-content:center;margin-top:18px;flex-wrap:wrap}

.cat-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:8px}
.cat-card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px 14px;text-align:left;cursor:pointer;box-shadow:var(--shadow-sm);
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s;
  position:relative;overflow:hidden;
}
.cat-card:active{transform:scale(.97)}
.cat-card:hover{box-shadow:var(--shadow);border-color:#ffd7c8}
.cat-emoji{font-size:26px}
.cat-name{font-weight:800;font-size:15px;margin-top:6px}
.cat-desc{font-size:12px;color:var(--sub);margin-top:2px;min-height:32px}
.cat-meta{display:flex;align-items:center;justify-content:space-between;margin-top:8px}
.cat-count{font-size:12px;color:var(--brand);font-weight:700;background:#fff1ea;padding:2px 8px;border-radius:999px}
.cat-go{font-size:12px;color:var(--sub)}
.loading{grid-column:1/-1;text-align:center;color:var(--sub);padding:30px 0}

.notice-line{text-align:center;color:var(--sub);font-size:12px;margin-top:22px}
.notice-line .dot{margin:0 6px}

/* 按钮 */
.btn{
  border:none;border-radius:999px;padding:12px 20px;font-size:15px;font-weight:700;
  cursor:pointer;transition:transform .12s ease,filter .2s;font-family:inherit;
}
.btn:active{transform:scale(.96)}
.btn-primary{background:linear-gradient(135deg,var(--brand),var(--brand2));color:#fff;box-shadow:0 8px 20px rgba(255,122,89,.32)}
.btn-brain{background:linear-gradient(135deg,#4f8cff,#7fb0ff);color:#fff;box-shadow:0 8px 20px rgba(79,140,255,.32)}
.btn-primary:disabled{filter:grayscale(.6);opacity:.55;box-shadow:none;cursor:not-allowed}
.btn-ghost{background:#fff;color:var(--text);border:1px solid var(--line)}
.btn-block{display:block;width:100%;margin-top:18px}
.btn-mini{padding:7px 14px;font-size:13px}
.pill{display:inline-block;min-width:20px;background:var(--brand);color:#fff;border-radius:999px;font-size:11px;padding:1px 6px;margin-left:2px}

/* 答题 */
.quiz-head{display:flex;align-items:center;gap:10px;padding:16px 0 10px}
.icon-btn{
  width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:#fff;
  font-size:22px;line-height:1;cursor:pointer;color:var(--text);flex:0 0 auto;
}
.quiz-meta{flex:1;display:flex;justify-content:space-between;align-items:baseline;font-weight:700}
.progress{height:8px;background:#ffe6da;border-radius:999px;overflow:hidden;margin-bottom:16px}
.progress-bar{height:100%;width:0;background:linear-gradient(90deg,var(--brand),var(--pink));border-radius:999px;transition:width .3s ease}

.q-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px 16px;box-shadow:var(--shadow-sm)}
.q-tags{display:flex;gap:8px;margin-bottom:10px}
.tag{font-size:12px;font-weight:700;color:#fff;background:var(--brand);border-radius:999px;padding:2px 10px}
.tag-single{background:#4f8cff}
.tag-double{background:#f59e0b}
.tag-triple{background:#e5484d}
.tag-hint{background:#fff1ea;color:var(--brand)}
.q-text{font-size:18px;line-height:1.5;margin-bottom:16px}

.options{display:flex;flex-direction:column;gap:10px}
.option{
  display:flex;align-items:flex-start;gap:10px;border:1.5px solid var(--line);border-radius:14px;
  padding:12px 14px;background:#fff;cursor:pointer;transition:all .15s ease;font-size:15px;
}
.option:active{transform:scale(.99)}
.option .key{
  flex:0 0 auto;width:24px;height:24px;border-radius:50%;background:#f4efe9;color:var(--sub);
  font-size:13px;font-weight:800;display:flex;align-items:center;justify-content:center;transition:all .15s;
}
.option.selected{border-color:var(--brand);background:#fff6f1}
.option.selected .key{background:var(--brand);color:#fff}
.option.correct{border-color:var(--ok);background:var(--ok-bg)}
.option.correct .key{background:var(--ok);color:#fff}
.option.wrong{border-color:var(--err);background:var(--err-bg)}
.option.wrong .key{background:var(--err);color:#fff}
.option.locked{cursor:default}
.options.multi .option .key{border-radius:7px}
.options.multi .option.selected .key{font-size:0}
.options.multi .option.selected .key::after{content:'✓';font-size:14px}

/* 结算 */
.result-card{background:var(--card);border:1px solid var(--line);border-radius:26px;padding:30px 20px;text-align:center;box-shadow:var(--shadow);margin-top:26px}
.result-emoji{font-size:56px;animation:pop .5s ease}
@keyframes pop{0%{transform:scale(.3);opacity:0}70%{transform:scale(1.15)}100%{transform:scale(1)}}
.result-card h2{margin-top:8px;font-size:22px}
.result-sub{color:var(--sub);font-size:14px;margin-top:6px}
.result-stats{display:flex;justify-content:space-around;margin-top:22px;background:#fff7f2;border-radius:16px;padding:14px 8px}
.result-stats div{display:flex;flex-direction:column;align-items:center}
.result-stats b{font-size:20px;color:var(--brand)}
.result-stats span{font-size:12px;color:var(--sub)}
.result-actions{display:flex;gap:10px;margin-top:22px}
.result-actions .btn{flex:1}

/* 错题本 */
.wrong-list{margin-top:6px;display:flex;flex-direction:column;gap:12px}
.wrong-item{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px;box-shadow:var(--shadow-sm)}
.wrong-item .wq{font-weight:700;margin-bottom:8px;font-size:15px}
.wrong-item .wtag{font-size:11px;color:var(--brand);background:#fff1ea;border-radius:999px;padding:1px 8px;margin-right:6px}
.wrong-item .wans{font-size:14px;color:var(--ok);font-weight:700;margin-top:6px}
.wrong-item .wexp{font-size:13px;color:var(--sub);margin-top:4px}
.empty{text-align:center;color:var(--sub);padding:50px 0}

/* 弹窗 */
.modal-mask{position:fixed;inset:0;background:rgba(43,34,48,.45);backdrop-filter:blur(3px);display:none;align-items:center;justify-content:center;padding:20px;z-index:50}
.modal-mask.show{display:flex;animation:fadeUp .25s ease}
.modal{background:#fff;border-radius:24px;padding:26px 22px;max-width:420px;width:100%;box-shadow:0 20px 50px rgba(43,34,48,.3);text-align:center;max-height:88vh;overflow:auto}
.modal-emoji{font-size:44px}
.modal h2{font-size:20px;margin:6px 0 10px}
.modal-lead{color:var(--brand);font-weight:700;font-size:14px}
.modal-list{text-align:left;margin:14px 0;padding-left:2px;list-style:none}
.modal-list li{position:relative;padding-left:20px;margin:8px 0;font-size:14px;color:#544a58}
.modal-list li::before{content:"•";position:absolute;left:6px;color:var(--brand);font-weight:900}
.modal-foot{font-size:13px;color:var(--sub);margin-top:6px}

/* 情绪反馈 */
.feedback .feedback-emoji{font-size:52px;animation:pop .5s ease}
.feedback h2{font-size:21px;margin:6px 0 8px}
.feedback-text{font-size:15px;color:#544a58}
.feedback-answer{background:#fff7f2;border:1px dashed #ffc9b4;border-radius:16px;padding:14px;margin-top:16px;text-align:left}
.fb-answer-label{font-size:12px;color:var(--sub)}
.fb-answer{font-size:16px;font-weight:800;color:var(--ok);margin-top:4px}
.fb-explain{font-size:13px;color:var(--sub);margin-top:6px}
.feedback-rate{margin-top:12px;font-size:13px;color:var(--sub)}
.feedback-rate b{color:var(--brand)}
.feedback.win{background:linear-gradient(180deg,#fffdf9,#ffffff)}
.feedback.win h2{color:var(--ok)}
.feedback.lose h2{color:var(--err)}

/* toast */
.toast{position:fixed;left:50%;bottom:40px;transform:translateX(-50%) translateY(20px);background:rgba(43,34,48,.92);color:#fff;padding:10px 18px;border-radius:999px;font-size:14px;opacity:0;pointer-events:none;transition:all .25s;z-index:80;max-width:90vw;text-align:center}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

@media(max-width:380px){
  .cat-grid{grid-template-columns:1fr}
  .score-box{gap:10px;padding:6px 10px}
}