:root{
  --teal:#2EC4B6; --teal-soft:#E0F7F4;
  --navy:#1B2A4A; --navy-2:#22355C;
  --orange:#FF8C42; --orange-soft:#FFF0E4;
  --bg:#F7F9FB; --ink:#1B2A4A; --ink-2:#5A6B8C;
  --card:#FFFFFF; --line:#E6ECF4;
  --r-lg:24px; --r-md:16px;
  --shadow:0 8px 24px rgba(27,42,74,.08);
  --spring:cubic-bezier(.34,1.56,.64,1);
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{font-size:16px}
body{
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","HarmonyOS Sans SC","Source Han Sans SC","Microsoft YaHei",sans-serif;
  background:var(--bg); color:var(--ink); line-height:1.6;
  min-height:100vh; max-width:520px; margin:0 auto; position:relative; overflow-x:hidden;
}
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(360px 220px at 85% -5%, rgba(46,196,182,.14), transparent 65%),
    radial-gradient(300px 200px at -10% 30%, rgba(255,140,66,.12), transparent 60%),
    radial-gradient(320px 240px at 110% 80%, rgba(27,42,74,.08), transparent 60%);
}
.page{position:relative;z-index:1;padding:24px 20px calc(40px + env(safe-area-inset-bottom))}
.hide{display:none!important}

/* ============ 通用 ============ */
.btn{
  display:block;width:100%;border:none;cursor:pointer;font-family:inherit;
  background:linear-gradient(135deg,var(--orange) 0%,#FFA566 100%);
  color:#fff;font-size:1.05rem;font-weight:800;letter-spacing:.02em;
  padding:16px 20px;border-radius:999px;box-shadow:0 10px 24px rgba(255,140,66,.35);
  transition:transform .25s var(--spring),box-shadow .25s;
}
.btn:active{transform:scale(.96)}
.btn-ghost{
  background:#fff;color:var(--ink-2);border:1.5px solid var(--line);
  box-shadow:none;font-weight:600;font-size:.92rem;padding:12px 20px;
}
.toast{
  position:fixed;left:50%;bottom:calc(36px + env(safe-area-inset-bottom));transform:translateX(-50%) translateY(20px);
  background:var(--navy);color:#fff;font-size:.88rem;padding:10px 22px;border-radius:999px;
  opacity:0;pointer-events:none;transition:all .3s var(--spring);z-index:99;white-space:nowrap;
}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0)}

/* ============ 封面 ============ */
.cover{padding-top:6vh;text-align:center}
.cover .float{font-size:2rem;height:64px;position:relative}
.cover .float span{position:absolute;animation:floaty 3.6s ease-in-out infinite}
.cover .float span:nth-child(1){left:calc(50% - 120px);animation-delay:0s}
.cover .float span:nth-child(2){left:calc(50% - 12px);animation-delay:.6s}
.cover .float span:nth-child(3){left:calc(50% + 96px);animation-delay:1.2s}
@keyframes floaty{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-10px) rotate(4deg)}}
.cover h1{
  font-size:2.15rem;font-weight:900;letter-spacing:.04em;margin:8px 0 4px;line-height:1.25;
}
.cover h1 .hl{color:var(--teal)}
.cover .sub{color:var(--ink-2);font-size:1rem;margin-bottom:26px}
.cover .sub b{color:var(--orange)}
.badge-row{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-bottom:30px}
.badge{
  background:#fff;border:1.5px solid var(--line);border-radius:999px;
  font-size:.8rem;color:var(--ink-2);padding:5px 14px;box-shadow:var(--shadow);
}
.xray-card{
  background:linear-gradient(160deg,var(--navy) 0%,var(--navy-2) 100%);
  border-radius:var(--r-lg);padding:26px 22px;color:#DFF7F3;position:relative;overflow:hidden;
  box-shadow:0 16px 40px rgba(27,42,74,.35);text-align:left;margin-bottom:30px;
}
.xray-card::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(0deg,transparent 0 6px,rgba(46,196,182,.05) 6px 7px);
}
.xray-card::after{
  content:"";position:absolute;top:0;bottom:0;width:70px;
  background:linear-gradient(90deg,transparent,rgba(46,196,182,.18),transparent);
  animation:scan 2.8s linear infinite;
}
@keyframes scan{0%{left:-15%}100%{left:110%}}
.xray-card .tag{font-size:.72rem;letter-spacing:.28em;color:var(--teal);opacity:.9}
.xray-card p{font-size:.95rem;margin-top:8px;color:#C9D8E8}
.xray-card p b{color:#fff}
.cover .meta{color:var(--ink-2);font-size:.82rem;margin-top:14px}
.cover .meta a{color:var(--teal);font-weight:700;text-decoration:none}

/* ============ 答题 ============ */
.topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.qcount{font-size:.85rem;color:var(--ink-2);font-weight:700}
.qcount b{color:var(--teal);font-size:1rem}
.back{border:none;background:none;color:var(--ink-2);font-size:.85rem;cursor:pointer;padding:6px 4px;font-family:inherit}
.back:disabled{opacity:.3}
.pbar{height:10px;background:#fff;border-radius:999px;overflow:hidden;box-shadow:inset 0 0 0 1.5px var(--line)}
.pbar i{
  display:block;height:100%;width:0;border-radius:999px;
  background:linear-gradient(90deg,var(--teal),#5AD6C9 55%,var(--orange));
  transition:width .45s var(--spring);
}
.qcard{animation:qin .45s var(--spring)}
@keyframes qin{0%{opacity:0;transform:translateY(22px) scale(.98)}100%{opacity:1;transform:none}}
.qtext{font-size:1.28rem;font-weight:900;line-height:1.45;margin:26px 0 6px;letter-spacing:.01em}
.qhint{font-size:.8rem;color:var(--ink-2);margin-bottom:20px}
.opts{display:flex;flex-direction:column;gap:12px}
.opt{
  display:flex;align-items:center;gap:14px;text-align:left;width:100%;
  background:#fff;border:2px solid transparent;border-radius:var(--r-md);
  padding:15px 16px;cursor:pointer;font-family:inherit;font-size:.98rem;color:var(--ink);
  box-shadow:var(--shadow);transition:all .22s var(--spring);
}
.opt .chip{
  flex:none;width:34px;height:34px;border-radius:12px;display:grid;place-items:center;
  background:var(--teal-soft);color:var(--teal);font-weight:900;font-size:.95rem;transition:all .22s var(--spring);
}
.opt:active{transform:scale(.97)}
.opt.on{
  border-color:var(--teal);background:linear-gradient(120deg,#fff, #EDFBF9);
  transform:translateY(-2px);box-shadow:0 12px 26px rgba(46,196,182,.25);
}
.opt.on .chip{background:var(--teal);color:#fff;transform:rotate(-8deg) scale(1.08)}

/* ============ 扫描中 ============ */
.scanning{padding-top:32vh;text-align:center;animation:qin .4s var(--spring)}
.scanning .lens{font-size:3.4rem;display:inline-block;animation:pulse 1.1s ease-in-out infinite}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
.scanning p{margin-top:14px;color:var(--ink-2);font-weight:700;letter-spacing:.12em}
.scanning p span{color:var(--teal)}

/* ============ 结果 ============ */
.result{animation:qin .55s var(--spring)}
.report{
  background:linear-gradient(165deg,var(--navy) 0%,#203358 100%);
  border-radius:var(--r-lg);color:#E8F4F1;padding:22px 20px 24px;position:relative;overflow:hidden;
  box-shadow:0 18px 44px rgba(27,42,74,.4);
}
.report::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    repeating-linear-gradient(0deg,transparent 0 7px,rgba(46,196,182,.05) 7px 8px),
    radial-gradient(220px 140px at 80% 0%,rgba(46,196,182,.16),transparent 70%);
}
.report>*{position:relative}
.rp-head{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px dashed rgba(46,196,182,.4);padding-bottom:10px;margin-bottom:16px}
.rp-head .t{font-size:.72rem;letter-spacing:.26em;color:var(--teal);font-weight:800}
.rp-head .no{font-size:.68rem;color:#7E93B5;font-family:ui-monospace,Menlo,monospace}
.rp-user{
  display:flex;align-items:center;gap:10px;margin-bottom:14px;
  background:rgba(46,196,182,.10);border:1px solid rgba(46,196,182,.35);
  border-radius:12px;padding:8px 12px;
}
.rp-avatar{
  flex:none;width:34px;height:34px;border-radius:50%;
  object-fit:cover;border:2px solid var(--teal);background:#fff;
}
.rp-user-meta{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.rp-nick{font-size:.92rem;font-weight:800;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rp-role{font-size:.68rem;color:#9DB2D2}
.rp-main{display:flex;align-items:center;gap:16px}
.rp-emoji{
  flex:none;width:84px;height:84px;border-radius:22px;display:grid;place-items:center;font-size:2.8rem;
  background:rgba(46,196,182,.14);border:1.5px solid rgba(46,196,182,.45);
  box-shadow:0 0 26px rgba(46,196,182,.35);animation:pulse 3s ease-in-out infinite;
}
.rp-main .k{font-size:.78rem;color:#9DB2D2;letter-spacing:.1em}
.rp-main h2{font-size:1.6rem;font-weight:900;color:#fff;letter-spacing:.03em;margin:2px 0}
.rp-code{
  display:inline-block;font-family:ui-monospace,Menlo,monospace;font-size:.72rem;color:var(--teal);
  background:rgba(46,196,182,.12);border:1px solid rgba(46,196,182,.4);border-radius:6px;padding:2px 8px;letter-spacing:.14em;
}
.rp-scene{margin-top:16px;font-size:.92rem;color:#C9D8E8;line-height:1.75}
.meme{
  margin-top:16px;background:rgba(255,255,255,.06);border:1.5px solid rgba(255,255,255,.14);
  border-radius:16px;padding:13px 16px;position:relative;
}
.meme::before{
  content:"💬 招牌自白";position:absolute;top:-10px;left:14px;background:var(--orange);
  color:#fff;font-size:.68rem;font-weight:800;padding:2px 10px;border-radius:999px;letter-spacing:.08em;
}
.meme p{font-size:.98rem;color:#fff;font-weight:700;line-height:1.65;margin-top:2px}
/* 光谱 */
.spectrum{margin-top:22px;display:flex;flex-direction:column;gap:13px}
.spec-row .spec-cap{font-size:.74rem;color:#9DB2D2;display:flex;justify-content:space-between;margin-bottom:5px}
.spec-row .spec-cap b{color:#E8F4F1;font-weight:700}
.spec-bar{height:12px;background:rgba(255,255,255,.1);border-radius:999px;position:relative}
.spec-bar i{
  position:absolute;top:0;bottom:0;left:0;border-radius:999px;width:0;
  background:linear-gradient(90deg,var(--teal),#6FDCCF);transition:width 1s var(--spring);
}
.spec-bar u{
  position:absolute;top:50%;transform:translate(-50%,-50%);width:20px;height:20px;border-radius:50%;
  background:#fff;border:4px solid var(--orange);box-shadow:0 0 12px rgba(255,140,66,.6);transition:left 1s var(--spring);
}
/* 副标签 */
.timeline{
  margin-top:18px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  border-top:1px dashed rgba(46,196,182,.35);padding-top:14px;
}
.timeline .cap{font-size:.74rem;color:#9DB2D2}
.timeline .val{
  font-size:.85rem;font-weight:800;color:#1B2A4A;background:var(--teal);
  border-radius:999px;padding:4px 14px;box-shadow:0 6px 16px rgba(46,196,182,.4);
}
/* 白卡区块 */
.rcard{
  background:#fff;border-radius:var(--r-lg);box-shadow:var(--shadow);
  padding:22px 20px;margin-top:18px;
}
.rcard .cap{font-size:.78rem;font-weight:900;letter-spacing:.18em;color:var(--teal);margin-bottom:10px;display:flex;align-items:center;gap:8px}
.rcard .cap::before{content:"";width:16px;height:3px;border-radius:2px;background:var(--teal)}
.rcard .body{font-size:.95rem;color:#39496B;line-height:1.85}
/* 软植入 */
.plug{
  background:linear-gradient(150deg,#FFF6EE,#FFEEDD);
  border:1.5px solid #FFD9BB;border-radius:var(--r-lg);padding:22px 20px;margin-top:18px;
}
.plug .cap{font-size:.78rem;font-weight:900;letter-spacing:.14em;color:var(--orange);display:flex;gap:8px;align-items:center;margin-bottom:10px}
.plug .cap::before{content:"✨"}
.plug .body{font-size:.95rem;color:#5A4230;line-height:1.85}
.plug .slogan{
  margin-top:12px;text-align:center;font-weight:900;color:var(--orange);font-size:1.02rem;letter-spacing:.06em;
}
.plug .slogan small{display:block;font-size:.72rem;color:#B08366;font-weight:600;letter-spacing:.02em;margin-top:2px}
/* 分享 */
.share-box{
  margin-top:18px;background:#fff;border:2px dashed var(--teal);border-radius:var(--r-md);
  padding:16px 18px;font-size:.92rem;color:var(--ink);line-height:1.7;
}
.share-box b{color:var(--teal)}
.share-tip{font-size:.74rem;color:var(--ink-2);text-align:center;margin-top:8px}
.rbtns{display:flex;flex-direction:column;gap:12px;margin-top:22px}
.foot{margin-top:26px;text-align:center;font-size:.72rem;color:#A5B3CB;line-height:1.8}
/* 图鉴 */
.atlas{position:fixed;inset:0;z-index:50;display:none}
.atlas.on{display:block}
.atlas .mask{position:absolute;inset:0;background:rgba(27,42,74,.55);backdrop-filter:blur(4px)}
.atlas .sheet{
  position:absolute;left:50%;transform:translateX(-50%);bottom:0;top:6%;width:100%;max-width:520px;
  background:var(--bg);border-radius:28px 28px 0 0;padding:22px 20px calc(28px + env(safe-area-inset-bottom));
  overflow-y:auto;animation:sheetup .4s var(--spring);
}
@keyframes sheetup{0%{transform:translate(-50%,60px);opacity:0}100%{transform:translate(-50%,0);opacity:1}}
.atlas .sheet h3{font-size:1.05rem;font-weight:900;display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.atlas .x{border:none;background:var(--teal-soft);color:var(--teal);width:30px;height:30px;border-radius:10px;font-weight:900;cursor:pointer}
.atlas-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.atlas-item{background:#fff;border-radius:var(--r-md);padding:14px 14px;box-shadow:var(--shadow)}
.atlas-item .n{font-weight:900;font-size:.92rem;display:flex;gap:6px;align-items:center}
.atlas-item .d{font-size:.74rem;color:var(--ink-2);margin-top:4px;line-height:1.55}
/* 生成卡片悬浮球 */
.fab{
  position:fixed;right:16px;bottom:calc(30px + env(safe-area-inset-bottom));
  z-index:40;display:none;align-items:center;gap:6px;
  background:linear-gradient(135deg,var(--teal),#5AD6C9);
  color:#fff;border:none;cursor:pointer;font-family:inherit;
  font-size:.92rem;font-weight:800;padding:13px 18px;border-radius:999px;
  box-shadow:0 12px 30px rgba(46,196,182,.45);
  animation:qin .4s var(--spring);
}
.fab.on{display:flex}
.fab span{font-size:1.15rem;line-height:1}
.fab:active{transform:scale(.95)}
/* 生成卡片浮层 */
.cardsheet{position:fixed;inset:0;z-index:60;display:none}
.cardsheet.on{display:block}
.cardsheet .mask{position:absolute;inset:0;background:rgba(27,42,74,.6);backdrop-filter:blur(4px)}
.cardsheet .sheet{
  position:absolute;left:50%;transform:translateX(-50%);bottom:0;top:4%;width:100%;max-width:520px;
  background:var(--bg);border-radius:28px 28px 0 0;padding:22px 20px calc(24px + env(safe-area-inset-bottom));
  overflow-y:auto;animation:sheetup .4s var(--spring);
}
.cardsheet .sheet h3{font-size:1.05rem;font-weight:900;display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.cardsheet .x{border:none;background:var(--teal-soft);color:var(--teal);width:30px;height:30px;border-radius:10px;font-weight:900;cursor:pointer}
.card-imgwrap{width:100%;border-radius:18px;overflow:hidden;box-shadow:0 12px 32px rgba(27,42,74,.18);background:#fff}
.card-imgwrap img{display:block;width:100%;height:auto}
.card-tip{margin-top:12px;font-size:.8rem;color:var(--ink-2);text-align:center}
.card-btns{display:flex;flex-direction:column;gap:10px;margin-top:14px}
@media (max-width:360px){.qtext{font-size:1.14rem}.rp-main h2{font-size:1.4rem}}