/* ===== 感情星座测试 · 全局样式 ===== */
:root{
  --bg-1:#1b1035;
  --bg-2:#3a1d6e;
  --bg-3:#7b2ff7;
  --accent:#ff6ec7;
  --accent-2:#ffd166;
  --ink:#1c1530;
  --paper:#fffdf9;
  --muted:#8b86a8;
  --line:#ece6f5;
  --ok:#23c483;
  --radius:18px;
  --shadow:0 18px 50px rgba(40,10,80,.18);
  --maxw:680px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  color:var(--ink);
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(255,110,199,.25), transparent 60%),
    radial-gradient(1000px 500px at 110% 10%, rgba(123,47,247,.35), transparent 55%),
    linear-gradient(160deg,var(--bg-1),var(--bg-2) 55%,var(--bg-3));
  background-attachment:fixed;
  min-height:100vh;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:var(--maxw);margin:0 auto;padding:18px 16px 40px}
/* 顶部 */
.brand{display:flex;align-items:center;gap:10px;color:#fff;opacity:.92;font-size:13px;letter-spacing:.5px}
.brand .dot{width:9px;height:9px;border-radius:50%;background:var(--accent);box-shadow:0 0 12px var(--accent)}
.card{
  background:var(--paper);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:26px 22px;
  margin-top:18px;
}
h1{font-size:26px;line-height:1.3;margin:6px 0 10px}
h2{font-size:20px;margin:0 0 12px}
.lead{color:#5a5472;font-size:15px;margin:0 0 18px}
.tag{display:inline-block;font-size:12px;color:var(--bg-3);background:rgba(123,47,247,.1);border:1px solid rgba(123,47,247,.2);padding:3px 10px;border-radius:999px;margin:2px 4px 2px 0}
/* 按钮 */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  width:100%;border:none;cursor:pointer;font-size:16px;font-weight:700;
  padding:15px 18px;border-radius:14px;color:#fff;
  background:linear-gradient(135deg,var(--accent),var(--bg-3));
  box-shadow:0 10px 24px rgba(123,47,247,.35);
  transition:transform .12s ease, box-shadow .12s ease;
}
.btn:active{transform:translateY(2px) scale(.99);box-shadow:0 6px 14px rgba(123,47,247,.3)}
.btn.ghost{background:#fff;color:var(--bg-3);border:1.5px solid var(--line);box-shadow:none}
.btn.sm{font-size:14px;padding:11px 14px;width:auto}
/* 星座选择 */
.zodiac-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:14px 0 4px}
.zodiac{
  border:1.5px solid var(--line);background:#fff;border-radius:14px;padding:12px 6px;text-align:center;
  cursor:pointer;transition:.15s;font-size:13px;color:#4a4560;
}
.zodiac .emo{font-size:22px;display:block;margin-bottom:3px}
.zodiac.on{border-color:var(--accent);background:linear-gradient(135deg,#fff0fa,#f3e9ff);color:var(--bg-3);font-weight:700;transform:translateY(-2px)}
/* 进度 */
.progress{height:8px;border-radius:999px;background:var(--line);overflow:hidden;margin:6px 0 18px}
.progress > i{display:block;height:100%;width:0;border-radius:999px;background:linear-gradient(90deg,var(--accent),var(--bg-3));transition:width .35s ease}
.q-meta{display:flex;justify-content:space-between;color:var(--muted);font-size:13px;margin-bottom:6px}
/* 选项 */
.options{display:flex;flex-direction:column;gap:12px}
.opt{
  display:flex;align-items:flex-start;gap:12px;width:100%;text-align:left;
  border:1.5px solid var(--line);background:#fff;border-radius:14px;padding:14px 16px;cursor:pointer;
  font-size:15px;color:var(--ink);transition:.15s;
}
.opt:hover{border-color:var(--accent)}
.opt .k{flex:0 0 26px;height:26px;border-radius:8px;background:#f3eefe;color:var(--bg-3);font-weight:700;display:flex;align-items:center;justify-content:center;font-size:14px}
.opt.sel{border-color:var(--accent);background:linear-gradient(135deg,#fff0fa,#f6eeff)}
.opt.sel .k{background:var(--accent);color:#fff}
/* 结果 */
.result-hero{text-align:center;padding:6px 0 4px}
.result-badge{
  width:104px;height:104px;margin:0 auto 12px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:48px;
  background:radial-gradient(circle at 30% 30%,#fff,#ffe9f7 60%,#e9dbff);
  box-shadow:0 0 0 6px rgba(255,110,199,.18),0 14px 30px rgba(123,47,247,.25);
}
.score-num{font-size:46px;font-weight:800;color:var(--bg-3);line-height:1}
.score-sub{color:var(--muted);font-size:14px;margin-top:2px}
.tier-name{font-size:24px;font-weight:800;margin:12px 0 4px;background:linear-gradient(135deg,var(--accent),var(--bg-3));-webkit-background-clip:text;background-clip:text;color:transparent}
.tier-desc{color:#4a4560;font-size:15px}
.divider{height:1px;background:var(--line);margin:18px 0}
.share-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.share-row .btn{flex:1;min-width:140px}
/* 底部 CTA / 广告 / 备案 */
.cta-love{
  margin-top:18px;display:flex;align-items:center;gap:12px;justify-content:center;
  background:linear-gradient(135deg,#fff4d6,#ffe3f3);border:1.5px dashed var(--accent);
  color:#7a2b5e;font-weight:700;border-radius:14px;padding:14px 16px;text-decoration:none;font-size:15px;
}
.cta-love .em{font-size:22px}
.ad-slot{
  margin-top:16px;min-height:90px;border:1px dashed var(--line);border-radius:14px;
  background:repeating-linear-gradient(45deg,#faf8ff,#faf8ff 10px,#f3effb 10px,#f3effb 20px);
  display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:13px;text-align:center;padding:10px;
}
.footer-meta{margin-top:18px;text-align:center;color:var(--muted);font-size:12px;line-height:1.9}
.footer-meta a{color:#7a6fae;text-decoration:none;border-bottom:1px dotted #b9aee0}
.footer-meta .beian{display:inline-flex;gap:6px;align-items:center;margin:0 6px}
.disclaimer{margin-top:10px;color:#a59fc0;font-size:11px}
/* 动画 */
@keyframes pop{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.fade{animation:pop .35s ease both}
/* 响应式微调 */
@media (max-width:380px){
  .zodiac-grid{grid-template-columns:repeat(3,1fr)}
  h1{font-size:23px}
}
@media (min-width:760px){
  .wrap{padding-top:30px}
  .card{padding:34px 32px}
}
/* 桌面端：双栏引导 */
@media (min-width:900px){
  .hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:22px;align-items:center}
}