/* 车辆 PDI：手机优先。字号不小于 16px（iPhone 输入框小于 16px 会自动放大页面），点按区域不小于 44px。 */
:root { --bg:#f3f5f8; --card:#fff; --text:#1d2433; --muted:#667085; --line:#e3e7ee; --accent:#1f5bd8;
        --ok:#1a7f37; --okbg:#e7f6ea; --bad:#c62828; --badbg:#fdecea; --warn:#a15c00; --warnbg:#fff4e0;
        --bar:#16213a; }
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; font:16px/1.55 -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif; background:var(--bg); color:var(--text); }
a { color:var(--accent); }
main { max-width:960px; margin:0 auto; padding:12px 12px 120px; }
h1 { font-size:20px; margin:4px 0 12px; }
h2 { font-size:17px; margin:20px 0 8px; }
.muted { color:var(--muted); } .small { font-size:13px; }
.ok { color:var(--ok); } .bad { color:var(--bad); } .warn { color:var(--warn); }
.mono { font-family:ui-monospace, Menlo, Consolas, monospace; letter-spacing:.02em; }
.hide { display:none !important; }

/* 顶栏 */
header.top { background:var(--bar); color:#dfe6f5; position:sticky; top:0; z-index:20; }
header.top .in { max-width:960px; margin:0 auto; display:flex; align-items:center; gap:8px; padding:0 8px; min-height:48px; }
header.top .brand { color:#fff; font-weight:600; white-space:nowrap; padding:0 4px; text-decoration:none; }
header.top nav { display:flex; gap:2px; overflow-x:auto; flex:1; scrollbar-width:none; }
header.top nav::-webkit-scrollbar { display:none; }
header.top nav a { color:#cfd8ea; text-decoration:none; padding:12px 10px; white-space:nowrap; font-size:15px; }
header.top nav a.on { color:#fff; box-shadow:inset 0 -3px 0 #7aa2ff; }
header.top .me { font-size:13px; white-space:nowrap; }
header.top .me a { color:#cfd8ea; }

/* 卡片、提示 */
.card { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:14px; margin-bottom:12px; }
.alert { padding:10px 12px; border-radius:8px; margin-bottom:12px; }
.alert.bad { background:var(--badbg); color:var(--bad); }
.alert.ok { background:var(--okbg); color:var(--ok); }
.alert.info { background:#eaf1fd; color:#21407a; }
.alert.warn { background:var(--warnbg); color:var(--warn); }
.badge { display:inline-block; border-radius:999px; padding:0 10px; font-size:13px; line-height:24px; white-space:nowrap; }
.badge.pass { background:var(--okbg); color:var(--ok); }
.badge.fail { background:var(--badbg); color:var(--bad); }
.badge.draft { background:var(--warnbg); color:var(--warn); }
.badge.void { background:#eceff3; color:var(--muted); }

/* 表单控件 */
label.f { display:block; margin:10px 0 4px; font-weight:600; }
input[type=text], input[type=password], input[type=date], input[type=datetime-local], select, textarea {
  width:100%; font:inherit; font-size:16px; padding:10px 12px; border:1px solid #c9ced8; border-radius:8px; background:#fff; color:var(--text); }
textarea { min-height:64px; resize:vertical; }
input.vin { font-family:ui-monospace, Menlo, Consolas, monospace; font-size:20px; letter-spacing:.08em; text-transform:uppercase; }
button, .btn { font:inherit; font-size:16px; border:0; border-radius:8px; padding:10px 18px; min-height:44px; cursor:pointer;
               background:var(--accent); color:#fff; text-decoration:none; display:inline-flex; align-items:center; justify-content:center; gap:6px; }
button.secondary, .btn.secondary { background:#fff; color:var(--accent); border:1px solid var(--accent); }
button.danger, .btn.danger { background:var(--bad); }
button.plain { background:none; color:var(--accent); padding:6px 8px; min-height:0; }
button.block, .btn.block { width:100%; }
button[disabled] { opacity:.5; }
.row { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.row > * { flex:0 0 auto; }
.grow { flex:1 1 auto !important; }
form.inline { display:inline; }

/* 首页数字 */
.stats { display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; }
.stat { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:10px; text-align:center; }
.stat .n { font-size:24px; font-weight:600; }
.stat .l { color:var(--muted); font-size:13px; }

/* 检测单列表（手机上一行一张卡片） */
.list { display:grid; gap:8px; }
.item { display:block; background:var(--card); border:1px solid var(--line); border-radius:10px; padding:10px 12px; color:inherit; text-decoration:none; }
.item .l1 { display:flex; justify-content:space-between; gap:8px; align-items:center; }
.item .vin { font-family:ui-monospace, Menlo, Consolas, monospace; font-weight:600; font-size:16px; overflow-wrap:anywhere; }
.item .l2 { color:var(--muted); font-size:13px; margin-top:2px; }
.filters { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.filters .full { grid-column:1 / -1; }
.filters label { font-size:13px; color:var(--muted); display:block; margin-bottom:2px; }
.pager { display:flex; gap:12px; align-items:center; justify-content:center; margin:12px 0; }

/* 填写页 */
.fillhead { position:sticky; top:48px; z-index:10; background:var(--bg); padding:8px 0 6px; }
.fillhead .t { display:flex; justify-content:space-between; align-items:baseline; gap:8px; }
.fillhead .pt { font-size:18px; font-weight:600; }
.progress { height:6px; background:#dde3ec; border-radius:3px; overflow:hidden; margin-top:6px; }
.progress > i { display:block; height:100%; background:var(--accent); }
details.toc { margin:6px 0 0; }
details.toc summary { cursor:pointer; color:var(--accent); font-size:14px; padding:4px 0; }
.tocgrid { display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-top:6px; }
.tocgrid button { background:#fff; color:var(--text); border:1px solid var(--line); justify-content:space-between; font-size:14px; padding:8px 10px; }
.tocgrid button.cur { border-color:var(--accent); color:var(--accent); }
.tocgrid .miss { color:var(--bad); font-size:12px; }
.tocgrid .done { color:var(--ok); font-size:12px; }

.q { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:12px; margin-bottom:10px; scroll-margin-top:140px; }
.q.missing { border-color:#f0b4b4; }
.q .ql { font-weight:600; margin-bottom:8px; }
.q .qn { display:inline-block; min-width:26px; color:var(--muted); font-weight:normal; }
.q .prev { display:block; font-weight:normal; font-size:13px; color:var(--warn); margin-top:2px; }
.q .hint { font-weight:normal; font-size:13px; color:var(--muted); }
.opts { display:grid; grid-template-columns:repeat(auto-fit, minmax(96px, 1fr)); gap:8px; }
.opt { position:relative; display:flex; }
.opt input { position:absolute; opacity:0; width:1px; height:1px; }
.opt span { flex:1; display:flex; align-items:center; justify-content:center; text-align:center; min-height:48px; padding:6px 8px;
            border:1.5px solid #c9ced8; border-radius:8px; background:#fff; user-select:none; }
.opt input:focus-visible + span { outline:3px solid #9bb8f5; }
.opt input:checked + span { border-color:var(--ok); background:var(--okbg); color:var(--ok); font-weight:600; }
.opt.bad input:checked + span { border-color:var(--bad); background:var(--badbg); color:var(--bad); }
.opt.multi input:checked + span { border-color:var(--accent); background:#eaf1fd; color:var(--accent); }
.extra { margin-top:10px; }
.q[data-photo="on_bad"] .extra, .q[data-note="on_bad"] .extra { display:none; }
.q.isbad .extra { display:block !important; }
.q[data-photo="on_bad"]:has(.opt.bad input:checked) .extra { display:block; }
.q[data-note="on_bad"]:has(.opt.bad input:checked) .extra { display:block; }
.extra .pl { font-size:14px; color:var(--muted); margin-bottom:6px; }
.extra textarea { margin-top:8px; }

/* 照片 */
.photos .thumbs { display:grid; grid-template-columns:repeat(auto-fill, minmax(84px, 1fr)); gap:6px; margin-bottom:8px; }
.th { position:relative; aspect-ratio:1; border-radius:8px; overflow:hidden; background:#e9edf3; }
.th img { width:100%; height:100%; object-fit:cover; display:block; }
.th .del { position:absolute; top:2px; right:2px; min-height:0; width:30px; height:30px; padding:0; border-radius:50%; background:rgba(0,0,0,.55); font-size:18px; }
.th .st { position:absolute; left:0; right:0; bottom:0; font-size:12px; color:#fff; background:rgba(0,0,0,.55); text-align:center; padding:2px; }
.th.err .st { background:rgba(198,40,40,.85); }
.photos .btns { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.photos .btns button { background:#fff; color:var(--accent); border:1px dashed var(--accent); }
.photos input[type=file] { display:none; }
.photos .need { font-size:13px; color:var(--bad); margin-top:4px; }

/* 底部操作条（避开 iPhone 底部横条） */
.bottombar { position:fixed; left:0; right:0; bottom:0; z-index:30; background:rgba(255,255,255,.97); border-top:1px solid var(--line);
             padding:8px 12px calc(8px + env(safe-area-inset-bottom)); }
.bottombar .in { max-width:960px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr 1.4fr; gap:8px; }
.bottombar .info { max-width:960px; margin:0 auto 6px; font-size:13px; color:var(--muted); display:flex; justify-content:space-between; }
#netbar { position:fixed; left:12px; right:12px; bottom:calc(76px + env(safe-area-inset-bottom)); z-index:40; }

/* 详情 */
dl.kv { display:grid; grid-template-columns:auto 1fr; gap:4px 12px; margin:0; }
dl.kv dt { color:var(--muted); }
dl.kv dd { margin:0; overflow-wrap:anywhere; }
.ans { display:flex; justify-content:space-between; gap:8px; padding:8px 0; border-bottom:1px solid var(--line); }
.ans:last-child { border-bottom:0; }
.ans .lab { flex:1; }
.ans .val { white-space:nowrap; font-weight:600; }
.ans .val.badv { color:var(--bad); }
.ans .note { font-size:13px; color:var(--warn); }
details.pg { background:var(--card); border:1px solid var(--line); border-radius:10px; margin-bottom:8px; }
details.pg > summary { padding:12px 14px; cursor:pointer; font-weight:600; display:flex; justify-content:space-between; gap:8px; }
details.pg > div { padding:0 14px 8px; }
.rounds { width:100%; border-collapse:collapse; font-size:14px; }
.rounds th, .rounds td { text-align:left; padding:6px 4px; border-bottom:1px solid var(--line); }
.tablewrap { overflow-x:auto; }
table.plain { border-collapse:collapse; width:100%; background:var(--card); font-size:14px; }
table.plain th, table.plain td { border-bottom:1px solid var(--line); padding:8px 6px; text-align:left; vertical-align:top; }
table.plain th { background:#eef1f5; white-space:nowrap; }

/* 平板、电脑 */
@media (min-width:768px) {
  main { padding:16px 20px 120px; }
  .list { grid-template-columns:1fr 1fr; }
  .filters { grid-template-columns:repeat(4, 1fr); }
  .stats { grid-template-columns:repeat(6, 1fr); }
  .tocgrid { grid-template-columns:repeat(4, 1fr); }
  .split { display:grid; grid-template-columns:1fr 1fr; gap:12px; align-items:start; }
}

/* 打印：详情页直接打印或存成 PDF */
@media print {
  header.top, .noprint, .bottombar, #netbar { display:none !important; }
  body { background:#fff; font-size:12px; }
  main { max-width:none; padding:0; }
  .card, details.pg { border:1px solid #bbb; break-inside:avoid; }
  .th { width:120px; height:120px; display:inline-block; }
  .photos .thumbs { display:block; }
}