:root {
  --brand:#1a3a7a; --accent:#2563eb; --bg:#f2f4f8; --card:#fff; --ink:#1f2430;
  --muted:#6b7280; --line:#e2e6ec; --ok:#15803d; --danger:#c0392b; --warn:#b45309;
}
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body { margin:0; padding:0; }
body { font-family:-apple-system,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  background:var(--bg); color:var(--ink); font-size:16px; line-height:1.5; padding-bottom:64px;
  overflow-x:hidden; }
a { color:var(--accent); text-decoration:none; }
.topbar { position:sticky; top:0; z-index:10; height:52px; background:linear-gradient(180deg,#23478f,#1a3a7a);
  color:#fff; display:flex; align-items:center; justify-content:center; font-weight:600; font-size:17px; }
.topbar .back { position:absolute; left:14px; font-size:15px; font-weight:400; }
.wrap { padding:14px; max-width:640px; margin:0 auto; }
.card { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:16px; margin-bottom:14px; }
h2 { font-size:16px; margin:0 0 12px; }
label { display:block; font-size:13px; color:var(--muted); margin:12px 0 5px; }
input,select,textarea { width:100%; padding:12px; border:1px solid var(--line); border-radius:10px;
  font-size:16px; font-family:inherit; background:#fff; }
input:focus,select:focus { outline:none; border-color:var(--accent); }
.btn { display:block; width:100%; padding:14px; border:0; border-radius:10px; font-size:17px; font-weight:600;
  background:var(--brand); color:#fff; cursor:pointer; margin-top:16px; }
.btn:active { opacity:.85; }
.btn.ghost { background:#eef2fb; color:var(--brand); }
.btn.sm { padding:9px 12px; font-size:14px; width:auto; margin:0; display:inline-block; }
.row { display:flex; gap:10px; }
/* min-width:0 是必须的：flex/grid 子项默认按内容取最小宽度，而 input 的固有宽度约 20 个字符，
   窄屏上会把后面的列顶到屏幕外面去（客户 2026-08-01 反馈「显示越界」）。 */
.row > * { flex:1; min-width:0; }
.muted { color:var(--muted); font-size:13px; }
.msg { padding:10px 12px; border-radius:8px; margin-bottom:12px; font-size:14px; }
.msg.err { background:#fee2e2; color:#991b1b; }
.msg.ok { background:#dcfce7; color:#166534; }
.tabbar { position:fixed; bottom:0; left:0; right:0; height:60px; background:#fff; border-top:1px solid var(--line);
  display:flex; z-index:10; }
.tabbar a { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  color:var(--muted); font-size:11px; gap:2px; }
.tabbar a.active { color:var(--brand); }
.tabbar .ic { font-size:20px; }
.list-item { padding:14px 0; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; }
.list-item:last-child { border-bottom:0; }
.list-item .t { font-weight:600; }
.badge { display:inline-block; padding:2px 8px; border-radius:20px; font-size:12px; background:#eef2ff; color:#3730a3; }
.badge.ok { background:#dcfce7; color:#166534; }
.badge.warn { background:#fef3c7; color:#92400e; }
/* 货物流转状态：一个节点一个颜色，与后台、App 同一套色值——
   同一票货在三个界面上颜色要一致，不然对着看反而更乱。 */
.badge.st0 { background:#eef2f7; color:#475569; }  /* 已录入 */
.badge.st1 { background:#e0f2fe; color:#0369a1; }  /* 已打面单 */
.badge.st2 { background:#ccfbf1; color:#0f766e; }  /* 已收件 */
.badge.st3 { background:#e0e7ff; color:#3730a3; }  /* 已揽收 */
.badge.st4 { background:#ede9fe; color:#5b21b6; }  /* 已装托 */
.badge.st5 { background:#dbeafe; color:#1e40af; }  /* 已发运 */
.badge.st6 { background:#fef3c7; color:#92400e; }  /* 运输中 */
.badge.st7 { background:#dcfce7; color:#166534; }  /* 已签收 */
.badge.st8 { background:#ffedd5; color:#9a3412; }  /* 滞留 */
.badge.st9 { background:#fee2e2; color:#991b1b; }  /* 已取消 */
.center { text-align:center; }
.big { font-size:22px; font-weight:700; color:var(--brand); }
.item-row { display:grid; grid-template-columns:1.6fr 1fr .8fr; gap:8px; margin-bottom:8px; }
.item-row > * { min-width:0; }
/* 集运件不填单价，单价那列 display:none 之后第三列会空着白占一块——两列布局把宽度让给品名。 */
.item-row.no-price { grid-template-columns:1fr auto; }
.pick { border:1px dashed var(--line); border-radius:10px; padding:12px; text-align:center; color:var(--accent); cursor:pointer; }
.hidden { display:none; }

/* 桌面端：内容列居中收窄，底部导航同宽居中，整体像一个居中的手机应用而非拉伸网页 */
@media (min-width: 900px) {
  body { font-size:15px; }
  .wrap { max-width:560px; }
  .topbar { font-size:16px; }
  .topbar .back { left:calc(50% - 280px + 14px); }
  .btn { font-size:16px; padding:12px; }
  .tabbar { max-width:560px; left:50%; transform:translateX(-50%);
    border-left:1px solid var(--line); border-right:1px solid var(--line); }
}