:root { --ink:#14161a; --muted:#5d646e; --line:#e3e6ea; --bg:#fff; --accent:#1d4ed8; --bad:#b42318; --good:#067647; --warn:#8a5a00; }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font:16px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif; }
.shell { max-width:720px; margin:0 auto; padding:20px 18px 40px; }
h1 { font-size:28px; margin:8px 0 4px; letter-spacing:-.02em; }
h2 { font-size:22px; margin:14px 0 4px; }
h3 { font-size:17px; margin:18px 0 6px; }
.lead { font-size:17px; margin:0 0 2px; }
.muted { color:var(--muted); font-size:14px; }
.zh { color:var(--muted); font-size:14px; }
.warn { color:var(--warn); font-size:14px; }
.row { display:flex; gap:10px; flex-wrap:wrap; margin:14px 0; }
button, .btn { font:inherit; border-radius:10px; padding:11px 16px; border:1px solid var(--line); background:#fff; color:var(--ink); cursor:pointer; min-height:44px; }
button.primary { background:var(--accent); border-color:var(--accent); color:#fff; font-weight:600; }
button.danger { color:var(--bad); border-color:#f2c9c4; }
button.link { border:0; padding:6px 0; color:var(--accent); background:none; }
button[disabled] { opacity:.55; cursor:default; }
.cards { display:grid; gap:10px; margin-top:12px; }
.card { display:flex; flex-direction:column; align-items:flex-start; gap:4px; text-align:left; padding:14px; border:1px solid var(--line); border-radius:12px; background:#fff; width:100%; }
.card.wide { margin:10px 0; }
form { display:grid; gap:10px; max-width:420px; }
input { font:inherit; padding:11px 12px; border:1px solid var(--line); border-radius:10px; min-height:44px; }
.progress { height:8px; background:var(--line); border-radius:99px; overflow:hidden; margin:10px 0 16px; }
.progress .fill { height:100%; background:var(--accent); transition:width .25s; }
.viewfinder { position:relative; border-radius:12px; overflow:hidden; background:#000; aspect-ratio:4/3; }
.viewfinder video { width:100%; height:100%; object-fit:cover; }
.ghost-overlay { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.35; pointer-events:none; }
.pair { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:8px 0; width:100%; }
.pair img { width:100%; border-radius:8px; border:1px solid var(--line); }
.result { width:100%; }
.grid12 { display:grid; grid-template-columns:repeat(12,1fr); gap:2px; margin:8px 0; }
.cell { aspect-ratio:1; background:#f1f3f5; border-radius:2px; }
.cell.hot { background:#f0b429; }
.toast { position:fixed; left:50%; bottom:-100px; transform:translateX(-50%); max-width:92vw; padding:12px 16px; border-radius:10px; background:#14161a; color:#fff; font-size:14px; transition:bottom .25s; z-index:9; }
.toast.show { bottom:18px; }
.toast.good { background:var(--good); } .toast.bad { background:var(--bad); } .toast.info { background:#14161a; }
footer { border-top:1px solid var(--line); margin-top:24px; padding-top:14px; }
a { color:var(--accent); }
@media (prefers-color-scheme: dark) {
  :root { --ink:#eceff3; --muted:#9aa3ae; --line:#2a2f36; --bg:#0f1115; }
  button, .btn, .card, input { background:#161a20; }
  .cell { background:#232830; }
}

/* ── 手机形态：安全区 + 触控（2026-09-10）──
   这一份是【安卓 App 里真正显示的界面】（TWA 打开 /app/?src=app），
   不是营销站。装进 App 后没有浏览器地址栏兜底，安全区必须自己让。 */
body {
  padding-top: env(safe-area-inset-top);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}
.shell { padding-bottom: calc(40px + env(safe-area-inset-bottom)); }
footer a, .shell > footer a {
  display: inline-flex; align-items: center;
  min-height: 44px; padding: 4px 8px; box-sizing: border-box;
}

/* ── 排版：内容别全挤在顶部（2026-09-11）────────────────────────────
   龙哥原话：「命名可以吧这几栏往下 非的在上面那么多 好几个app都是」。
   实测（iPhone 14 Pro 393×852）：空状态内容底部只到 248px = 占屏 29%，
   新建行程那三个输入栏 top=72/131/190、内容底部 325 = 占屏 38%，
   下面 60~70% 全是空白，手指要够到顶上去点。

   🔴 用 `justify-content: safe center` 不用普通 center ——
   内容比屏幕高时，普通 center 会把顶部溢出【裁掉且滚不到】，
   safe 会自动退回顶部对齐。两条都写，老浏览器吃第一条、新的用第二条。 */
body { min-height: 100dvh; display: flex; flex-direction: column; }
#view {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  justify-content: safe center;
}
footer { flex: 0 0 auto; }