/* ════════════════════════════════════════════════════════════
   烂笔头 H5 · 真机界面（高保真 App UI）
   复用自官网 v2，token 与产品 App 同源
   ════════════════════════════════════════════════════════════ */
.phone-scaler{
  --pw:320px;--phh:660px;--ph-scale:1;
  width:calc(var(--pw) * var(--ph-scale));
  height:calc(var(--phh) * var(--ph-scale));
  flex-shrink:0;
}
.phone-scaler .phone{transform:scale(var(--ph-scale));transform-origin:top left}
.phone{
  width:var(--pw,320px);border-radius:46px;padding:11px;
  background:linear-gradient(160deg,#1a1813,#0a0908);
  border:.5px solid var(--gold-hint);
  box-shadow:inset 0 1px 0 rgba(201,169,97,0.10),0 40px 90px rgba(0,0,0,0.6),0 0 0 1px rgba(0,0,0,0.5);
  position:relative;
}
.phone::before{content:'';position:absolute;top:18px;left:50%;transform:translateX(-50%);
  width:96px;height:5px;border-radius:3px;background:rgba(245,242,234,0.12);z-index:6}
.phone-screen{
  position:relative;border-radius:36px;overflow:hidden;
  background:#0c0b09;height:638px;font-family:var(--serif-cjk);
}
.phone-scrollmask{
  position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;padding-top:34px;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.phone-scrollmask::-webkit-scrollbar{display:none}

.ap{padding:0 18px 92px}
.ap-backbar{display:flex;align-items:center;justify-content:space-between;padding:8px 4px 16px}
.ap-backbar .t{font-family:var(--serif-cjk);font-size:13px;color:var(--stone);letter-spacing:.18em}
.ap-backbar .ic{color:var(--stone);font-size:18px}
.ap-identity{display:flex;align-items:center;gap:14px;padding:4px 4px 18px}
.ap-avatar{
  width:54px;height:54px;border-radius:50%;background:var(--surf-3);border:.5px solid var(--gold-hint);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--serif-cjk);font-size:22px;color:var(--champagne);font-weight:400;flex-shrink:0;
}
.ap-identity .nm{font-family:var(--serif-cjk);font-size:22px;color:var(--ivory);font-weight:400;letter-spacing:.06em}
.ap-identity .sub{font-family:var(--mono);font-size:11px;color:var(--burnished);margin-top:5px;letter-spacing:.04em}
.ap-badge{
  font-family:var(--serif-cjk);font-size:10px;color:var(--champagne);
  border:.5px solid var(--gold-hint);padding:2px 8px;border-radius:999px;
  background:var(--gold-mist);letter-spacing:.1em;margin-left:6px;vertical-align:middle;
}
.ap-aicard{
  background:var(--surf-2);border:.5px solid var(--gold-hint);
  border-radius:14px;padding:18px 18px 14px;margin:0 0 16px;
  box-shadow:inset 0 1px 0 rgba(201,169,97,0.10),0 14px 36px rgba(0,0,0,0.4);
}
.ap-aicard .hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.ap-aicard .hd .t{font-family:var(--serif-cjk);font-size:14px;color:var(--ivory);letter-spacing:.08em}
.ap-aicard .hd .ai{font-family:var(--mono);font-size:9px;color:var(--champagne);letter-spacing:.18em;
  border:.5px solid var(--gold-hint);padding:2px 6px;border-radius:4px}
.ap-aicard .goldline{height:.5px;background:var(--champagne);opacity:.5;margin-bottom:12px}
.ap-aicard p{
  margin:0;font-family:var(--serif-cjk);font-weight:300;font-size:12.5px;line-height:2;
  color:var(--bone);letter-spacing:.01em;
}
.ap-aicard p .n{font-family:var(--mono);font-weight:500;color:var(--champagne);font-size:12px}
.ap-aicard .ft{display:flex;align-items:center;justify-content:space-between;margin-top:14px;font-size:11px}
.ap-aicard .ft .fix{color:var(--champagne);font-family:var(--serif-cjk);letter-spacing:.06em}
.ap-aicard .ft .upd{font-family:var(--mono);font-size:9.5px;color:var(--burnished);letter-spacing:.04em}
.ap-portrait{margin-bottom:16px}
.ap-portrait .ph{font-family:var(--serif-cjk);font-size:11px;color:var(--ash);letter-spacing:.16em;margin-bottom:10px}
.ap-chips{display:flex;flex-wrap:wrap;gap:7px}
.ap-chip{
  font-family:var(--serif-cjk);font-size:11px;color:var(--stone);
  border:.5px solid var(--line-strong);background:rgba(245,242,234,0.03);
  padding:5px 11px;border-radius:999px;letter-spacing:.04em;white-space:nowrap;
}
.ap-chip.gold{color:var(--champagne);border-color:var(--gold-hint);background:var(--gold-mist)}
.ap-chip.red{color:#D88A8A;border-color:var(--crimson-soft);background:var(--crimson-mist)}
.ap-timeline{position:relative;padding-left:24px;margin-top:6px}
.ap-spine{position:absolute;left:5px;top:8px;bottom:0;width:1px;background:var(--gold-hint)}
.ap-node{position:relative;margin-bottom:18px}
.ap-node .dot{position:absolute;left:-23.5px;top:6px;width:9px;height:9px;border-radius:50%;
  border:1px solid var(--champagne);background:var(--ink)}
.ap-gap{font-family:var(--mono);font-size:9.5px;color:var(--burnished);letter-spacing:.08em;margin:-8px 0 12px;display:block}
.ap-gap.red{color:#C97A7A}
.ap-rec{
  background:var(--surf-1);border:.5px solid var(--line);border-radius:12px;
  padding:14px;box-shadow:inset 0 1px 0 var(--line-inset);
}
.ap-rec .top{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:10px}
.ap-rec .top .dt{font-family:var(--mono);font-size:11px;color:var(--stone);letter-spacing:.02em;white-space:nowrap;flex-shrink:0}
.ap-rec .top .pr{font-family:var(--mono);font-size:13px;color:var(--champagne);font-weight:500}
.ap-rec .svc{font-family:var(--serif-cjk);font-size:14px;color:var(--ivory);margin-bottom:12px;letter-spacing:.04em}
.ap-formula{
  display:grid;grid-template-columns:1fr 1fr;gap:1px;
  background:var(--line);border:.5px solid var(--line);border-radius:8px;overflow:hidden;
}
.ap-formula .f{background:var(--surf-1-hi);padding:9px 11px}
.ap-formula .f .k{font-family:var(--serif-cjk);font-size:9.5px;color:var(--ash);letter-spacing:.1em;margin-bottom:3px}
.ap-formula .f .v{font-family:var(--mono);font-size:12px;color:var(--bone);font-weight:500}
.ap-formula .f .v .g{color:var(--champagne)}
.ap-rec .quote{
  margin-top:11px;font-family:var(--serif-cjk);font-style:italic;font-weight:300;
  font-size:12px;line-height:1.7;color:var(--stone);letter-spacing:.01em;
}
.ap-photos{display:flex;gap:6px;margin-top:11px}
.ap-photos .p{flex:1;aspect-ratio:3/4;border-radius:6px;border:.5px solid var(--line);
  background:repeating-linear-gradient(135deg,rgba(245,242,234,0.03) 0 6px,transparent 6px 12px),var(--surf-1-hi);
  display:flex;align-items:flex-end;padding:5px}
.ap-photos .p span{font-family:var(--mono);font-size:7px;color:var(--ash);letter-spacing:.06em}
.ap-wak-hd{padding:6px 4px 14px}
.ap-wak-hd .day{font-family:var(--mono);font-size:11px;color:var(--burnished);letter-spacing:.16em;margin-bottom:8px}
.ap-wak-hd .ttl{font-family:var(--serif-cjk);font-size:26px;color:var(--ivory);font-weight:400;letter-spacing:.04em;line-height:1.3}
.ap-wak-hd .ttl .n{font-family:var(--mono);color:var(--champagne);font-size:24px}
.ap-wlist{display:flex;flex-direction:column;gap:10px}
.ap-wrow{
  display:flex;align-items:center;gap:13px;
  background:var(--surf-1);border:.5px solid var(--line);border-radius:12px;
  padding:13px 14px;box-shadow:inset 0 1px 0 var(--line-inset);
}
.ap-wrow .av{
  width:40px;height:40px;border-radius:50%;flex-shrink:0;
  background:var(--surf-3);border:.5px solid var(--gold-hint);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--serif-cjk);font-size:16px;color:var(--champagne);
}
.ap-wrow.red .av{border-color:var(--crimson-soft);color:#D88A8A}
.ap-wrow .info{flex:1;min-width:0}
.ap-wrow .info .nm{font-family:var(--serif-cjk);font-size:15px;color:var(--ivory);letter-spacing:.04em}
.ap-wrow .info .rs{font-family:var(--serif-cjk);font-size:11.5px;color:var(--champagne);margin-top:3px;letter-spacing:.02em}
.ap-wrow.red .info .rs{color:#D88A8A}
.ap-wrow .info .lt{font-family:var(--mono);font-size:9.5px;color:var(--ash);margin-top:4px;letter-spacing:.02em}
.ap-wrow .go{font-family:var(--serif-cjk);font-size:18px;color:var(--burnished)}
.ap-wak-line{margin:16px 0;padding:14px 15px;border-radius:12px;background:var(--gold-mist);border:.5px solid var(--gold-hint)}
.ap-wak-line .lbl{font-family:var(--serif-cjk);font-size:10px;color:var(--champagne);letter-spacing:.16em;margin-bottom:8px}
.ap-wak-line .msg{font-family:var(--serif-cjk);font-style:italic;font-weight:300;font-size:12.5px;line-height:1.8;color:var(--bone)}
.ap-rec-hd{padding:6px 4px 18px}
.ap-rec-hd .for{font-family:var(--serif-cjk);font-size:12px;color:var(--ash);letter-spacing:.1em}
.ap-rec-hd .for b{color:var(--champagne);font-weight:400}
.ap-voice{
  background:var(--surf-1);border:.5px solid var(--gold-hint);border-radius:14px;
  padding:18px;margin-bottom:14px;box-shadow:inset 0 1px 0 var(--line-inset);
}
.ap-voice .row{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.ap-voice .mic{width:34px;height:34px;border-radius:50%;border:.5px solid var(--gold-hint);
  background:var(--gold-mist);display:flex;align-items:center;justify-content:center;color:var(--champagne);font-size:15px}
.ap-voice .wave{flex:1;display:flex;align-items:center;gap:3px;height:30px}
.ap-voice .wave i{flex:1;background:var(--gold-hint);border-radius:2px;align-self:center;transition:height .18s ease}
.ap-voice .dur{font-family:var(--mono);font-size:11px;color:var(--champagne)}
.ap-voice .tx{font-family:var(--serif-cjk);font-style:italic;font-weight:300;font-size:13px;line-height:1.85;color:var(--bone);
  border-top:.5px solid var(--line);padding-top:13px;letter-spacing:.01em}
.ap-frag{display:flex;flex-direction:column;gap:9px;margin-bottom:14px}
.ap-frag .f{display:flex;align-items:center;gap:10px;font-family:var(--serif-cjk);font-size:12.5px;color:var(--stone);
  background:var(--surf-1);border:.5px solid var(--line);border-radius:10px;padding:11px 13px}
.ap-frag .f .ic{color:var(--burnished);font-family:var(--mono);font-size:10px;letter-spacing:.08em;flex-shrink:0}
.ap-rec-cta{
  position:absolute;left:18px;right:18px;bottom:20px;text-align:center;
  font-family:var(--serif-cjk);font-size:14px;letter-spacing:.14em;
  color:var(--ink);background:var(--champagne);padding:14px;border-radius:12px;z-index:5;
}
.fade-bot{position:absolute;left:0;right:0;bottom:0;height:64px;pointer-events:none;z-index:4;
  background:linear-gradient(transparent,#0c0b09)}
.fade-top{position:absolute;left:0;right:0;top:0;height:40px;pointer-events:none;z-index:4;
  background:linear-gradient(#0c0b09,transparent)}