/* 趣味人物志 · 基础样式（甜趣潮玩）
   设计语言：封面/答题潮玩抓取，完整报告克制（白卡深字）。
   品类色：body.cat-* 上切换 --brand 系，组件全复用。 */

:root{
  --cream:#FFF9EC; --cream-2:#FFF4DF; --card:#FFFFFF;
  --ink:#2C2632; --ink-soft:#6E6678; --ink-faint:#A79FB2;
  --grape:#5B4BE8; --grape-deep:#3D2BC7; --grape-dark:#2E1FA8;
  --coral:#FF5F7E; --coral-deep:#E63E60;
  --butter:#FFD84D; --butter-deep:#F2C21E; --butter-ink:#5C4400;
  --mint:#25C08B;
  --line:rgba(44,38,50,.10); --line-strong:rgba(44,38,50,.17);
  --font:"PingFang SC","HarmonyOS Sans SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --r-lg:20px; --r-md:16px; --r-sm:12px;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  font-family:var(--font);color:var(--ink);line-height:1.7;
  background:linear-gradient(175deg,var(--cream) 0%,var(--cream-2) 100%);
  overflow-x:hidden;
}
body.cat-talent{--brand:#25C08B;--brand-deep:#149C6E;--brand-soft:#E6F8F1;--brand-line:#BFEBD9}
body.cat-cp{--brand:#FF5F7E;--brand-deep:#E63E60;--brand-soft:#FFEDF1;--brand-line:#FFCBD6}
body.cat-career{--brand:#3D7BF0;--brand-deep:#2A5FC8;--brand-soft:#EAF1FE;--brand-line:#CBDEFB}
body.cat-love{--brand:#F0862C;--brand-deep:#D06A12;--brand-soft:#FEF2E4;--brand-line:#FBDDBA}

.screen{display:none;min-height:100vh;position:relative}
.screen.active{display:block}
.shell{max-width:430px;margin:0 auto;padding:0 20px 46px;position:relative}

/* ============ 通用零件 ============ */
.btn-main{
  display:block;width:100%;border:none;border-radius:var(--r-md);padding:17px 0;cursor:pointer;
  background:linear-gradient(135deg,#7B5CFF,#5A3BE8);color:#fff;
  font-size:17px;font-weight:800;letter-spacing:.14em;
  box-shadow:0 6px 0 #3D2BC7, 0 16px 28px -14px rgba(91,75,232,.65);
  transition:transform .12s ease, box-shadow .12s ease;
  font-family:var(--font);
}
.btn-main:active{transform:translateY(3px);box-shadow:0 3px 0 #3D2BC7, 0 8px 16px -10px rgba(91,75,232,.6)}
.btn-main:disabled{opacity:.55;box-shadow:0 4px 0 #3D2BC7}
.btn-coral{
  display:block;width:100%;border:none;border-radius:var(--r-md);padding:16px 0;cursor:pointer;
  background:linear-gradient(135deg,#FF6B87,#F0436A);color:#fff;
  font-size:16.5px;font-weight:800;letter-spacing:.12em;
  box-shadow:0 6px 0 #C92B4C, 0 16px 28px -14px rgba(240,67,106,.6);
  font-family:var(--font);
}
.btn-coral:active{transform:translateY(3px);box-shadow:0 3px 0 #C92B4C}
.btn-ghost{
  display:block;width:100%;border:1.5px solid var(--line-strong);border-radius:var(--r-md);
  padding:14px 0;background:var(--card);color:var(--ink-soft);font-size:14.5px;font-weight:700;cursor:pointer;
  font-family:var(--font);
}
.fine{font-size:10.5px;color:var(--ink-faint);text-align:center;letter-spacing:.06em;line-height:1.9}
.u{text-decoration:underline;text-decoration-color:var(--butter);text-decoration-thickness:7px;text-underline-offset:-2px;font-weight:inherit}

/* 行内提示条 */
.notice{
  margin:14px 0 0;padding:12px 15px;border-radius:var(--r-sm);font-size:12.5px;line-height:1.8;
  background:#FFF7D6;border:1.5px solid #FFE9A3;color:#7A6100;
}
.notice.err{background:#FFEEF2;border-color:#FFCED9;color:#A62E48}

/* ============ ① 首页 ============ */
.hero{padding-top:26px;text-align:center;position:relative}
.chip-row{display:flex;gap:7px;justify-content:center;flex-wrap:wrap}
.chip{font-size:11px;font-weight:700;padding:6px 13px;border-radius:99px;background:var(--card);border:1.5px solid var(--line-strong);color:var(--ink-soft)}
.chip.b1{background:#F3EEFF;border-color:#D9CDFF;color:#5B4BE8}
.chip.b2{background:#FFEEF2;border-color:#FFCED9;color:#E63E60}
.chip.b3{background:#FFF7D6;border-color:#FFE9A3;color:#9A7B00}
.hero h1{font-size:42px;font-weight:800;line-height:1.26;letter-spacing:.01em;color:var(--ink);margin-top:26px}
.hero h1 .hl{position:relative;display:inline-block;z-index:1}
.hero h1 .hl::after{content:"";position:absolute;left:-5px;right:-5px;bottom:3px;height:17px;background:var(--butter);border-radius:7px;z-index:-1;transform:rotate(-1.4deg)}
.hero .sub{font-size:14px;color:var(--ink-soft);margin-top:16px;line-height:2.05}
.hero .sub b{color:var(--grape);font-weight:800}

.spectrum{margin-top:30px;background:var(--card);border:1.5px solid var(--line);border-radius:var(--r-lg);padding:20px 18px 16px;box-shadow:0 12px 30px -22px rgba(44,38,50,.45)}
.spectrum .sp-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:14px}
.spectrum .sp-head .t{font-size:12.5px;font-weight:800;color:var(--ink)}
.spectrum .sp-head .s{font-size:10.5px;color:var(--ink-faint)}
.sp-row{display:flex;align-items:center;gap:9px;margin-bottom:9px}
.sp-row:last-child{margin-bottom:0}
.sp-row .nm{font-size:11px;font-weight:700;color:var(--ink-soft);width:46px;flex:none;text-align:right}
.sp-row .track{flex:1;height:9px;border-radius:99px;background:#F2EDE2;overflow:hidden}
.sp-row .track i{display:block;height:100%;border-radius:99px;opacity:.9}
.sp-row .dot{width:9px;height:9px;border-radius:50%;flex:none}

.stat-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:16px}
.stat-card{background:var(--card);border-radius:var(--r-md);padding:13px 6px 11px;border:1.5px solid var(--line);box-shadow:0 8px 20px -16px rgba(44,38,50,.4)}
.stat-card .n{font-size:21px;font-weight:800;line-height:1;color:var(--grape)}
.stat-card .n small{font-size:11px;margin-left:1px}
.stat-card:nth-child(2) .n{color:var(--coral)}
.stat-card:nth-child(3) .n{color:var(--mint)}
.stat-card .l{font-size:10px;color:var(--ink-faint);margin-top:6px}
.hero .cta{margin-top:26px}
.hero .fine{margin-top:13px}

.cat-switch{margin-top:26px;padding-top:20px;border-top:1.5px dashed var(--line-strong)}
.cat-switch .t{font-size:11px;color:var(--ink-faint);letter-spacing:.14em;margin-bottom:10px;text-align:center}
.cat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.cat-tile{background:var(--card);border:1.5px solid var(--line);border-radius:var(--r-sm);padding:10px 2px;text-align:center;cursor:pointer;transition:.15s}
.cat-tile.on{border-color:var(--brand);background:var(--brand-soft)}
.cat-tile.soon{opacity:.45;cursor:not-allowed}
.cat-tile .e{font-size:16px}
.cat-tile .n{font-size:10px;font-weight:700;color:var(--ink-soft);margin-top:4px}
.cat-tile.on .n{color:var(--brand-deep)}

/* ============ ② 答题 ============ */
.quiz{display:flex;flex-direction:column;min-height:100vh;max-width:430px;margin:0 auto;padding:0 20px 26px}
.q-top{display:flex;align-items:center;justify-content:space-between;padding-top:20px}
.cat-pill{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:800;padding:7px 14px;border-radius:99px;background:var(--card);border:1.5px solid var(--line-strong);color:var(--ink-soft)}
.cat-pill .e{font-size:13px}
.q-count{font-size:13px;font-weight:700;color:var(--ink-soft)}
.q-count b{font-size:25px;color:var(--brand);margin-right:1px}
.prog{margin-top:15px;height:12px;border-radius:99px;background:#F0E9DA;border:1.5px solid var(--line);overflow:hidden;position:relative}
.prog i{
  display:block;height:100%;width:0%;border-radius:99px;
  background:linear-gradient(90deg,var(--brand),var(--brand-deep));
  transition:width .45s cubic-bezier(.22,1,.36,1);position:relative;
}
.prog i::after{content:"";position:absolute;right:3px;top:2.5px;bottom:2.5px;width:5px;border-radius:99px;background:rgba(255,255,255,.85)}
.q-era{margin-top:22px;font-size:11px;font-weight:800;letter-spacing:.16em;color:var(--brand-deep);background:var(--brand-soft);border:1.5px solid var(--brand-line);display:inline-block;padding:6px 14px;border-radius:99px}
.q-dim{margin-top:13px;font-size:12px;font-weight:700;color:var(--ink-faint);display:flex;align-items:center;gap:7px}
.q-dim .e{font-size:12px}
.q-text{margin-top:16px;font-size:25px;font-weight:800;line-height:1.55;letter-spacing:.01em;min-height:118px}
.q-text u{text-decoration:underline;text-decoration-color:var(--butter);text-decoration-thickness:9px;text-underline-offset:-3px;border-radius:3px}
.q-opts{margin-top:20px;display:flex;flex-direction:column;gap:11px}
.opt{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:var(--card);border:2px solid var(--line);border-radius:var(--r-md);
  padding:16px 16px;cursor:pointer;transition:transform .12s ease, border-color .15s ease, background .15s ease;
}
.opt:active{transform:scale(.985)}
.opt .lead{display:flex;align-items:center;gap:12px;min-width:0}
.opt .mk{
  width:27px;height:27px;border-radius:9px;background:#F4F0E6;color:var(--ink-soft);
  display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;flex:none;
}
.opt .lead span{font-size:16px;font-weight:700}
.opt .lv{font-size:10.5px;color:var(--ink-faint);flex:none;letter-spacing:.04em}
.opt.on{border-color:var(--brand);background:var(--brand-soft);box-shadow:0 8px 22px -14px rgba(37,192,139,.55)}
.opt.on .mk{background:var(--brand);color:#fff}
.opt.on .lv{color:var(--brand-deep)}

/* 答题底部回退 */
.q-foot{margin-top:auto;padding-top:22px;display:flex;gap:10px}
.q-back{
  flex:1;border:1.5px solid var(--line-strong);background:var(--card);color:var(--ink-soft);
  border-radius:var(--r-md);padding:13px 0;font-size:14px;font-weight:700;cursor:pointer;font-family:var(--font);
}
.q-back:disabled{opacity:.4;cursor:default}

/* ============ ③ 段落节点 ============ */
.node-wrap{max-width:430px;margin:0 auto;padding:60px 24px 46px;text-align:center;min-height:100vh;display:flex;flex-direction:column;justify-content:center}
.node-era{font-size:46px;line-height:1}
.node-kick{margin-top:18px;font-size:11px;font-weight:800;letter-spacing:.22em;color:var(--brand-deep)}
.node-title{margin-top:10px;font-size:34px;font-weight:800;letter-spacing:.06em}
.node-desc{margin-top:16px;font-size:14px;color:var(--ink-soft);line-height:2}
.node-chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:22px}
.dim-chip{
  display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;
  background:var(--card);border:1.5px solid var(--line);border-radius:99px;padding:7px 13px;color:var(--ink-soft);
}
.dim-chip .cb{width:9px;height:9px;border-radius:3px}
.node-dots{display:flex;gap:8px;justify-content:center;margin-top:24px}
.node-dots i{width:26px;height:6px;border-radius:99px;background:#EDE5D4;display:block}
.node-dots i.on{background:var(--brand)}
.node-count{margin-top:20px;font-size:12.5px;color:var(--ink-faint)}
.node-count b{color:var(--brand-deep)}
.node-wrap .btn-main{margin-top:30px;letter-spacing:.2em}

/* ============ ⑥ 额度锁定 ============ */
.lock-wrap{max-width:430px;margin:0 auto;padding:70px 24px 46px;text-align:center;min-height:100vh;display:flex;flex-direction:column;justify-content:center}
.lock-icon{font-size:52px}
.lock-title{margin-top:20px;font-size:27px;font-weight:800;line-height:1.5}
.lock-title b{color:var(--coral-deep)}
.lock-desc{margin-top:16px;font-size:14px;color:var(--ink-soft);line-height:2.1}
.lock-card{margin-top:26px;background:var(--card);border:1.5px solid var(--line-strong);border-radius:var(--r-lg);padding:20px 18px;text-align:left}
.lock-card .row{display:flex;justify-content:space-between;font-size:13px;padding:8px 0;border-bottom:1px dashed var(--line);color:var(--ink-soft)}
.lock-card .row:last-child{border-bottom:none}
.lock-card .row b{color:var(--ink)}
.lock-steps{margin-top:22px;text-align:left;font-size:13px;color:var(--ink-soft);line-height:2.1}
.lock-steps .st{display:flex;gap:10px;margin-top:8px}
.lock-steps .no{width:22px;height:22px;border-radius:8px;background:var(--brand-soft);color:var(--brand-deep);font-size:11.5px;font-weight:800;display:flex;align-items:center;justify-content:center;flex:none;margin-top:5px}

/* 兑换 */
.claim{margin-top:24px}
.claim-row{display:flex;gap:9px}
.claim input{
  flex:1;border:2px solid var(--line-strong);border-radius:var(--r-md);padding:14px 15px;
  font-size:14.5px;font-family:var(--font);color:var(--ink);background:var(--card);outline:none;min-width:0;
}
.claim input:focus{border-color:var(--brand)}
.claim .go{
  flex:none;border:none;border-radius:var(--r-md);padding:0 22px;cursor:pointer;
  background:var(--ink);color:#fff;font-size:14.5px;font-weight:800;font-family:var(--font);
}

/* 加载态 */
.loading{position:fixed;inset:0;background:rgba(255,249,236,.94);display:none;align-items:center;justify-content:center;flex-direction:column;gap:14px;z-index:60}
.loading.on{display:flex}
.loading .sp{width:34px;height:34px;border-radius:50%;border:3.5px solid var(--brand-line);border-top-color:var(--brand);animation:spin .9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.loading .tx{font-size:13px;color:var(--ink-soft);font-weight:700;letter-spacing:.06em}