/* ==========================================================================
   设计 Token：沿用 v1 科技蓝；一屏布局（上浅下深）
   换品牌色只需改 --p-blue / --p-blue-soft
   ========================================================================== */
:root {
  --p-blue: #1F5BFF;
  --p-blue-soft: #EAF1FF;
  --p-navy: #0A1A3A;
  --p-ink: #14213D;
  --p-muted: #5A6785;
  --p-line: #E3E8F2;
  --p-tint: #F5F8FF;
  --p-width: 480px;

  --van-base-font: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB",
                   "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --van-primary-color: var(--p-blue);
  --van-text-color: var(--p-ink);
  --van-text-color-2: var(--p-muted);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; color-scheme: light; }
body {
  margin: 0;
  background: #E9EEF8;
  color: var(--p-ink);
  font-family: var(--van-base-font);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
[v-cloak] { display: none !important; }
h1, h2, p, ul { margin: 0; padding: 0; }
:focus-visible { outline: 2px solid var(--p-blue); outline-offset: 2px; }

/* 一屏：上部信息区自适应高度，下部深蓝区填满剩余空间 */
.page {
  display: flex;
  flex-direction: column;
  max-width: var(--p-width);
  margin: 0 auto;
  min-height: 100vh;
  min-height: 100dvh;
  background: linear-gradient(180deg, var(--p-tint) 0%, #fff 100%);
}

.boot { max-width: var(--p-width); margin: 0 auto; min-height: 100vh; padding: 120px 24px; background: #fff; color: var(--p-muted); text-align: center; }
.boot__spinner { width: 28px; height: 28px; margin: 0 auto 16px; border: 3px solid var(--p-line); border-top-color: var(--p-blue); border-radius: 50%; animation: spin .9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ==========================================================================
   上部：品牌 + 标题 + 三条要点
   ========================================================================== */
.intro { padding: calc(18px + env(safe-area-inset-top)) 24px 24px; }

.brand { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; letter-spacing: 1px; }
.brand__mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 8px;
  background: var(--p-blue); color: #fff;
  font-size: 12px; font-weight: 700; letter-spacing: 0; line-height: 1;
}
.brand__logo { height: 28px; width: auto; display: block; }
.brand .badge {
  margin-left: auto;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--p-blue);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .5px;
  line-height: 18px;
}

.title {
  margin-top: 28px;
  font-size: 32px;
  line-height: 1.22;
  font-weight: 800;
  letter-spacing: -.8px;
  color: var(--p-navy);
}
.title span { display: block; }
.sub { margin-top: 12px; font-size: 15px; line-height: 1.7; color: var(--p-muted); }

.points { margin-top: 18px; list-style: none; }
.points li { display: flex; align-items: center; gap: 10px; font-size: 15px; line-height: 1.5; }
.points li + li { margin-top: 10px; }
.points .van-icon {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 8px;
  background: var(--p-blue-soft); color: var(--p-blue);
  font-size: 16px;
}

/* ==========================================================================
   下部：深蓝二维码区（填满剩余高度，内容居中）
   ========================================================================== */
.scan {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 24px calc(16px + env(safe-area-inset-bottom));
  border-radius: 28px 28px 0 0;
  background: radial-gradient(120% 80% at 50% 0%, #1D3F8F 0%, var(--p-navy) 65%);
  color: #fff;
  text-align: center;
}
.scan__title { font-size: 20px; line-height: 1.4; font-weight: 700; }
.qr {
  width: min(200px, 52vw);
  margin-top: 14px;
  padding: 12px;
  border-radius: 18px;
  background: #fff;
}
/* 二维码：真实 img，无遮挡，保证长按识别 */
.qr img { display: block; width: 100%; height: auto; }
.scan__tip { margin-top: 12px; font-size: 14px; color: rgba(255, 255, 255, .9); }
.scan__meta {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 16px;
  margin-top: 16px;
  font-size: 12px;
  color: rgba(255, 255, 255, .6);
}

/* 矮屏（如 iPhone SE / 微信底部工具栏展开）压缩间距，保证一屏放下 */
@media (max-height: 700px) {
  .intro { padding-bottom: 18px; }
  .title { margin-top: 20px; font-size: 28px; }
  .sub { margin-top: 8px; }
  .points { margin-top: 14px; }
  .points li + li { margin-top: 8px; }
  .qr { width: min(168px, 46vw); }
}
@media (max-height: 640px) {
  .intro { padding-top: calc(14px + env(safe-area-inset-top)); padding-bottom: 14px; }
  .title { margin-top: 16px; font-size: 26px; }
  .sub { font-size: 14px; }
  .points { margin-top: 12px; }
  .points li { font-size: 14px; }
  .points li + li { margin-top: 6px; }
  .points .van-icon { width: 24px; height: 24px; font-size: 14px; }
  .scan { padding-top: 16px; }
  .scan__title { font-size: 18px; }
  .qr { width: 140px; margin-top: 10px; padding: 10px; }
  .scan__tip { margin-top: 10px; }
  .scan__meta { margin-top: 10px; }
}
/* 极矮屏：去掉副标题，要点已经覆盖同样的信息 */
@media (max-height: 580px) {
  .sub { display: none; }
}

.fail { padding-top: 96px; }