/* ==========================================================================
   留白 · 服务维护中
   --------------------------------------------------------------------------
   设计语言与「留白 · 小调查」完全一致，不是另做一套：
     · 品牌蓝 #1A78FF       —— 图标中心实测色
     · 深藏青 #202035       —— 组合 13 里的深色块
     · 底色渐变             —— 主页.png 逐行取样：白 → #ECF3FF → #DBECFF → #C3D9FF
     · 「大量留白、蓝色只做点缀」
   分隔靠 1px 发丝线，重点靠留白和字号；整页就是 App 首页那条渐变。
   ========================================================================== */
:root{
  --brand:#1A78FF; --brand-deep:#0E70FF;
  --ink:#0D1117; --ink-2:#5A6472; --ink-3:#98A2B2;
  --hair:rgba(13,17,23,.10); --hair-2:rgba(13,17,23,.055);
  --app-bg:linear-gradient(180deg,#FFFFFF 0%,#FFFFFF 38%,#FBFDFF 52%,#F4F9FF 64%,#ECF3FF 76%,#E2EDFF 87%,#D5E5FF 95%,#C3D9FF 100%);
  --font:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",system-ui,sans-serif;
  --ease:cubic-bezier(.22,.72,.24,1);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%}
body{margin:0;color:var(--ink);font-family:var(--font);font-size:16px;line-height:1.7;-webkit-font-smoothing:antialiased;background:#fff}
img{max-width:100%;display:block}
a{color:var(--brand);text-decoration:none}
.wrap{width:min(600px,90vw);margin:0 auto}

/* ---------- 与填写端同一套骨架 ---------- */
.fill{min-height:100dvh;display:flex;flex-direction:column;background:var(--app-bg);background-attachment:fixed;
  padding-bottom:calc(env(safe-area-inset-bottom,0px) + 26px)}
.fill__top{padding:22px 0 0}
.fill__brand{display:flex;align-items:center;gap:10px}
.fill__brand img{width:auto;height:19px;display:block}
.fill__brand span{font-size:15px;font-weight:600;letter-spacing:.04em}
.fill__state{margin-left:auto;font-style:normal;font-size:13px;font-weight:600;letter-spacing:.06em;color:var(--brand)}
.fill__rule{height:1px;border:0;background:var(--hair);margin:16px 0 0}
.fill__main{flex:1 1 auto;display:flex;align-items:center;padding:6vh 0 3vh}

/* ---------- 主体 ---------- */
.hero{text-align:center;width:100%;opacity:0;transform:translateY(14px);animation:rise .6s var(--ease) forwards}
@keyframes rise{to{opacity:1;transform:none}}
.hero__mark{width:84px;height:84px;margin:0 auto 28px}
.hero h1{margin:0;font-size:clamp(26px,7vw,32px);line-height:1.42;font-weight:600;letter-spacing:-.015em;text-wrap:balance}
.hero h1 em{font-style:normal;color:var(--brand)}
.hero__lede{margin:18px auto 0;max-width:23em;font-size:15.5px;color:var(--ink-2);text-wrap:pretty}

/* 状态两行：发丝线分隔，不用卡片 */
.notes{margin:34px auto 0;max-width:23em;text-align:left;border-top:1px solid var(--hair)}
.notes__row{display:flex;gap:18px;padding:15px 2px;border-bottom:1px solid var(--hair-2);font-size:14.5px}
.notes__row dt{flex:0 0 auto;width:4.4em;margin:0;color:var(--ink-3)}
.notes__row dd{margin:0;color:var(--ink-2)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:54px;padding:0 30px;border-radius:999px;
  font-size:16px;font-weight:600;letter-spacing:.01em;
  transition:background .25s var(--ease),box-shadow .25s var(--ease),transform .2s var(--ease)}
.btn--primary{background:var(--brand);color:#fff}
.btn--primary:hover{background:var(--brand-deep)}
.btn--primary:active{transform:scale(.99)}
.cta{margin:32px auto 0;text-align:center}
.cta .btn{min-width:210px}
.cta p{margin:14px 0 0;font-size:13.5px;color:var(--ink-3)}

/* ---------- 页脚：与顶栏那条线呼应 ---------- */
.fill__foot-in{padding-top:22px;border-top:1px solid var(--hair);display:flex;align-items:baseline;gap:10px;
  font-size:13px;color:var(--ink-3)}
.fill__foot-in b{margin-left:auto;font-weight:500;font-variant-numeric:tabular-nums}

/* 只有真正窄的机器才竖排；390px 一行放得下，不要误判 */
@media (max-width:344px){
  .notes__row{flex-direction:column;gap:3px}
  .notes__row dt{width:auto}
}