:root{
  --bg:#070b16;
  --ink:#e8eefc;
  --muted:#93a0bf;
  --blue:#2563eb;
  --blue2:#3b82f6;
  --gold:#f59e0b;
  --gold2:#fbbf24;
  --card:rgba(15,23,42,.78);
  --line:rgba(148,163,184,.18);
  --ok:#34d399;
  --warn:#fbbf24;
  --risk:#f87171;
  --radius:22px;
  --shadow:0 24px 60px rgba(0,0,0,.45);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Noto Sans SC","Microsoft YaHei",sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{min-height:100%}
body{
  background:var(--bg);
  color:var(--ink);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
.bg-orbs{
  position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(900px 500px at 10% -10%, rgba(37,99,235,.35), transparent 60%),
    radial-gradient(700px 420px at 100% 0%, rgba(245,158,11,.18), transparent 55%),
    radial-gradient(600px 400px at 50% 110%, rgba(37,99,235,.16), transparent 50%);
}
.app{position:relative;z-index:1;max-width:480px;margin:0 auto;padding:18px 16px 40px}
.screen{display:none}
.screen.active{display:block;animation:rise .35s ease}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.topbar{text-align:center;margin-bottom:14px}
.brand-pill{
  display:inline-block;padding:7px 14px;border-radius:999px;
  background:linear-gradient(90deg,rgba(37,99,235,.25),rgba(245,158,11,.18));
  border:1px solid rgba(245,158,11,.35);color:var(--gold2);
  font-size:12px;font-weight:700;letter-spacing:.04em;
}
.brand-sub{margin-top:8px;color:var(--muted);font-size:12px}
.hero-card,.quiz-card,.result-card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  backdrop-filter:blur(14px);
  padding:22px 18px 24px;
  text-align:center;
}
.mascot{width:210px;height:210px;object-fit:cover;border-radius:28px;margin:4px auto 12px;display:block;box-shadow:0 12px 40px rgba(37,99,235,.35);border:2px solid rgba(245,158,11,.35)}
.mascot-sm{width:52px;height:52px;border-radius:14px;object-fit:cover;border:1px solid rgba(245,158,11,.4)}
.mascot-md{width:110px;height:110px;border-radius:22px;object-fit:cover;margin:0 auto 10px;display:block;border:2px solid rgba(245,158,11,.35)}
.badge-row{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-bottom:12px}
.badge{font-size:11px;padding:5px 10px;border-radius:999px;background:rgba(37,99,235,.18);border:1px solid rgba(37,99,235,.35);color:#bfdbfe}
.badge.gold{background:rgba(245,158,11,.14);border-color:rgba(245,158,11,.4);color:var(--gold2)}
h1{font-size:30px;line-height:1.2;letter-spacing:-.02em;margin-bottom:12px}
.gold-text{background:linear-gradient(90deg,var(--gold2),#fff3c4,var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{color:#dbe4ff;font-size:14.5px;margin-bottom:10px}
.lead strong{color:var(--gold2)}
.lead-soft{color:var(--muted);font-size:13.5px;margin-bottom:16px}
.dims-mini{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-bottom:18px}
.dims-mini span{
  font-size:11px;padding:4px 9px;border-radius:8px;
  background:rgba(255,255,255,.04);border:1px solid var(--line);color:#c7d2fe
}
.btn{
  appearance:none;border:0;cursor:pointer;width:100%;
  border-radius:14px;padding:14px 16px;font-size:15px;font-weight:700;
  transition:transform .15s ease, opacity .15s ease, box-shadow .15s ease;
}
.btn:active{transform:scale(.98)}
.btn.primary{
  background:linear-gradient(135deg,var(--blue),#1d4ed8 55%,#1e40af);
  color:#fff;box-shadow:0 10px 28px rgba(37,99,235,.45);
}
.btn.ghost{
  background:transparent;color:var(--ink);
  border:1px solid rgba(148,163,184,.35);margin-top:10px
}
.btn.gold-outline{
  display:block;text-decoration:none;text-align:center;margin-top:10px;
  background:rgba(245,158,11,.08);color:var(--gold2);
  border:1px solid rgba(245,158,11,.45);
}
.fine{margin-top:14px;color:#64748b;font-size:11px}
.quiz-head{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.progress-wrap{flex:1}
.progress-meta{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);margin-bottom:6px}
.bar{height:8px;background:rgba(255,255,255,.08);border-radius:999px;overflow:hidden}
.bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--blue),var(--gold));border-radius:inherit;transition:width .3s ease}
.q-kicker{color:var(--gold2);font-size:12px;font-weight:700;letter-spacing:.06em;margin-bottom:8px}
#q-text{font-size:18px;line-height:1.45;text-align:left;margin-bottom:16px}
.options{display:grid;gap:10px}
.opt{
  text-align:left;width:100%;padding:14px 14px;
  border-radius:14px;border:1px solid var(--line);
  background:rgba(255,255,255,.03);color:var(--ink);
  font-size:14px;line-height:1.45;cursor:pointer;
  transition:border-color .15s, background .15s, transform .12s;
}
.opt:hover{border-color:rgba(37,99,235,.55);background:rgba(37,99,235,.12)}
.opt:active{transform:scale(.99)}
.opt b{display:block;color:var(--gold2);font-size:11px;margin-bottom:4px;letter-spacing:.04em}
.leo-tip{margin-top:12px;text-align:center;color:#94a3b8;font-size:12px}
.level-pill{
  display:inline-block;margin:4px auto 10px;padding:6px 14px;border-radius:999px;
  background:linear-gradient(90deg,rgba(37,99,235,.3),rgba(245,158,11,.22));
  border:1px solid rgba(245,158,11,.4);color:var(--gold2);font-weight:800;font-size:13px
}
#level-title{font-size:22px;margin-bottom:8px}
.level-desc{color:var(--muted);font-size:14px;margin-bottom:14px}
.score-row{
  display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px
}
.score-row div{
  background:rgba(255,255,255,.04);border:1px solid var(--line);
  border-radius:14px;padding:12px
}
.score-row b{display:block;font-size:26px;color:#fff;line-height:1.1}
.score-row span{font-size:11px;color:var(--muted)}
.radar-box{display:flex;justify-content:center;margin:8px 0 6px}
.dim-list{display:grid;gap:8px;text-align:left;margin:8px 0 16px}
.dim-item{
  display:grid;grid-template-columns:1fr auto;gap:6px 10px;align-items:center;
  padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.035);border:1px solid var(--line)
}
.dim-item .name{font-size:13px;font-weight:700}
.dim-item .val{font-size:13px;color:var(--gold2);font-weight:800}
.dim-item .track{grid-column:1/-1;height:6px;background:rgba(255,255,255,.08);border-radius:99px;overflow:hidden}
.dim-item .track i{display:block;height:100%;background:linear-gradient(90deg,var(--blue),var(--gold));border-radius:inherit}
.cta-block{
  text-align:left;padding:14px;border-radius:16px;
  background:linear-gradient(180deg,rgba(37,99,235,.16),rgba(245,158,11,.08));
  border:1px solid rgba(37,99,235,.28);margin-bottom:12px
}
.cta-block h3{font-size:15px;margin-bottom:6px}
.cta-block p{font-size:13px;color:#cbd5e1;margin-bottom:12px}
.cta-btns{display:grid;gap:0}
.share-box{margin-top:8px;text-align:left}
.share-label{font-size:12px;color:var(--muted);margin-bottom:6px}
#share-text{
  width:100%;border-radius:12px;border:1px solid var(--line);
  background:rgba(0,0,0,.35);color:#e2e8f0;padding:12px;font-size:13px;
  line-height:1.55;resize:vertical;min-height:160px;margin-bottom:10px
}
.result-org{color:#93c5fd;font-size:12px;margin-bottom:4px;font-weight:600}
@media (min-width:520px){
  .app{padding-top:28px}
  h1{font-size:34px}
}