:root{
  --primary:#2563eb; --primary-hover:#1d4ed8; --primary-soft:#eff6ff; --primary-border:#bfdbfe;
  --secondary:#64748b; --secondary-soft:#f1f5f9;
  --text:#1e293b; --text-sub:#475569; --text-muted:#94a3b8;
  --bg:#f8fafc; --card:#fff; --border:#e2e8f0; --border-strong:#cbd5e1;
  --success:#16a34a; --success-soft:#f0fdf4; --warning:#d97706; --warning-soft:#fffbeb; --danger:#dc2626; --danger-soft:#fef2f2;
  --r-sm:6px; --r-md:10px; --r-lg:14px; --r-pill:999px;
  --font:"Alimama ShuHeiTi","PingFang SC","Microsoft YaHei","HarmonyOS Sans SC","Source Han Sans SC","Noto Sans SC",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{
  margin:0;font-family:var(--font);font-size:14px;line-height:1.6;color:var(--text);
  background:var(--bg);-webkit-font-smoothing:antialiased;
}
a{color:inherit}
strong,b{font-weight:700}

/* ---------------- 屏幕工具条（打印隐藏） ---------------- */
.screenbar{
  display:flex;align-items:center;gap:12px;padding:11px 20px;background:var(--primary-soft);
  /* ⚠️ guide.css 是独立样式表（guide.html 不加载 app.css）→ 只能直接用 env()，
     引 var(--sat) 会取不到值。 */
  padding-top:calc(11px + env(safe-area-inset-top, 0px));
  padding-left:calc(20px + env(safe-area-inset-left, 0px));
  padding-right:calc(20px + env(safe-area-inset-right, 0px));
  border-bottom:1px solid var(--primary-border);color:#1e40af;font-size:13.5px;
  position: -webkit-sticky;
  position:sticky;top:0;z-index:10;
}
.screenbar b{font-weight:700}
.screenbar .grow{flex:1 1 auto}
.screenbar .kbd{font-family:Consolas,Menlo,monospace;font-size:12.5px;background:#fff;border:1px solid var(--primary-border);border-bottom-width:2px;border-radius:5px;padding:1px 7px}
.screenbar a{font-weight:600;color:var(--primary);text-decoration:none}

/* ---------------- 纸面 ---------------- */
.page{padding:24px 16px 60px}
.paper{
  width:210mm;max-width:100%;margin:0 auto;background:var(--card);
  border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:0 10px 40px rgba(15,23,42,.10);
  padding:11mm 12mm 10mm;
}

/* 纸头 */
.head{display:flex;align-items:center;gap:12px;padding-bottom:10px;border-bottom:2px solid var(--text)}
.mark{width:34px;height:34px;border-radius:9px;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.mark svg{width:19px;height:19px}
.head-t{min-width:0}
.head-t h1{margin:0;font-size:19px;font-weight:800;letter-spacing:.3px}
.head-t p{margin:2px 0 0;font-size:11.5px;color:var(--text-muted)}
.head-meta{margin-left:auto;text-align:right;font-size:11px;color:var(--text-muted);line-height:1.5;flex:0 0 auto}

/* 定位条 */
.pitch{
  margin:11px 0 14px;padding:10px 14px;border-radius:var(--r-md);
  background:var(--secondary-soft);border-left:3px solid var(--primary);
  font-size:12.5px;line-height:1.7;color:var(--text-sub);
}
.pitch b{color:var(--text)}

/* 四步 */
.steps{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.step{border:1px solid var(--border);border-radius:var(--r-md);padding:12px 13px 11px;background:#fff}
.step-h{display:flex;align-items:center;gap:9px;margin-bottom:7px}
.n{width:24px;height:24px;border-radius:7px;background:var(--primary);color:#fff;font-size:12.5px;font-weight:800;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.step-h h2{margin:0;font-size:13.5px;font-weight:800}
.step ul{margin:0;padding-left:0;list-style:none}
.step li{position:relative;padding-left:14px;font-size:11.8px;line-height:1.72;color:var(--text-sub)}
.step li::before{content:"";position:absolute;left:2px;top:.62em;width:4px;height:4px;border-radius:50%;background:var(--secondary)}
.step li b{color:var(--text)}
.tip{
  margin-top:8px;padding:6px 9px;border-radius:var(--r-sm);font-size:11px;line-height:1.6;
  background:var(--warning-soft);color:#92400e;border:1px solid #fde68a;
}
.tip b{color:#78350f}

/* 提示条（红线） */
.redlines{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:12px}
.redline{display:flex;gap:8px;padding:9px 11px;border-radius:var(--r-md);background:var(--danger-soft);border:1px solid #fecaca;font-size:11px;line-height:1.6;color:#991b1b}
.redline .ico{flex:0 0 auto;font-size:13px;line-height:1.3}
.redline b{color:#7f1d1d}

/* 常见问题 */
.faq{margin-top:14px}
.faq-h{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:800;letter-spacing:1px;color:var(--text-sub);margin-bottom:9px}
.faq-h::after{content:"";flex:1 1 auto;height:1px;background:var(--border)}
.qa{display:grid;grid-template-columns:1fr 1fr;gap:8px 14px}
.qa-item{font-size:11.5px;line-height:1.65}
.qa-item q{display:block;font-weight:700;color:var(--text);quotes:none}
.qa-item q::before{content:"Q  ";color:var(--primary);font-weight:800}
.qa-item p{margin:2px 0 0;color:var(--text-sub)}
.qa-item p::before{content:"A  ";color:var(--success);font-weight:800}

/* 联系条 */
.contact{
  margin-top:14px;display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  padding:11px 14px;border-radius:var(--r-md);background:var(--primary-soft);border:1px solid var(--primary-border);
}
.contact .ct-t{font-size:12.5px;font-weight:800;color:#1e40af}
.contact .ct-i{font-size:11.5px;color:#1e40af;line-height:1.6}
.contact .ct-i b{font-weight:700}
.contact .ct-i span{color:#3b5bdb;opacity:.85}
.contact .grow{flex:1 1 auto}
.qr{
  width:56px;height:56px;border-radius:var(--r-sm);border:1px dashed var(--primary-border);flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;font-size:9px;color:#6b8bd6;text-align:center;background:#fff;
}

/* 页脚小字 */
.legal{margin-top:11px;font-size:10px;line-height:1.6;color:var(--text-muted);text-align:center}

/* ---------------- 打印 ---------------- */
@page{size:A4;margin:12mm}
@media print{
  :root{--bg:#fff}
  body{background:#fff;font-size:12px}
  .screenbar{display:none !important}
  .page{padding:0}
  .paper{
    width:auto;max-width:none;margin:0;border:none;border-radius:0;box-shadow:none;
    padding:0;background:#fff;
  }
  .step,.redline,.contact,.qr{break-inside:avoid}
  a{text-decoration:none}
}

/* ---------------- 窄屏 ---------------- */
@media (max-width:760px){
  .paper{padding:18px 15px 22px;border-radius:var(--r-md)}
  .steps,.redlines,.qa{grid-template-columns:1fr}
  .head-meta{margin-left:0;text-align:left;width:100%}
  .head{flex-wrap:wrap}
  .screenbar{font-size:12.5px}
}