:root {
  --navy:#16283C; --brass:#A07E3B; --ink:#1F2937; --gray:#6B7280;
  --hair:#D6D3CD; --paper:#F5F3EF; --bad:#B42318; --good:#0E7490;
  color-scheme: light;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
body {
  margin:0; font:15px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  color:var(--ink); background:var(--paper);
  padding-bottom: env(safe-area-inset-bottom);
}
header {
  background:var(--navy); color:#fff; padding:12px 16px;
  padding-top: calc(12px + env(safe-area-inset-top));
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  position:sticky; top:0; z-index:10;
}
header h1 { font-size:15px; margin:0; letter-spacing:.06em; text-transform:uppercase; font-weight:600; }
header .sub { font-size:12px; opacity:.75; }
main { padding:16px; max-width:760px; margin:0 auto; }
h2 { font-size:16px; margin:0 0 4px; }
p { margin:0 0 10px; }
.muted { color:var(--gray); font-size:13px; }
.card {
  background:#fff; border:1px solid var(--hair); border-radius:10px;
  padding:14px; margin-bottom:12px;
}
.card h3 { margin:0 0 8px; font-size:15px; }
.label {
  font-size:11px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--brass); font-weight:700; margin-top:10px;
}
button, .btn {
  font:inherit; font-weight:600; border-radius:8px; border:1px solid var(--navy);
  background:var(--navy); color:#fff; padding:12px 16px; cursor:pointer;
  min-height:46px; width:100%; margin-top:8px; display:block; text-align:center;
}
button.secondary { background:#fff; color:var(--navy); }
button.danger { background:#fff; color:var(--bad); border-color:var(--bad); }
button:disabled { opacity:.45; }
input, textarea, select {
  font:inherit; width:100%; padding:11px; border:1px solid var(--hair);
  border-radius:8px; background:#fff; margin-top:6px;
}
.row { display:flex; gap:8px; }
.row > * { flex:1; }
.pill {
  display:inline-block; font-size:11px; font-weight:700; padding:3px 8px;
  border-radius:99px; background:var(--paper); border:1px solid var(--hair);
}
.pill.walked { background:#E6F4F1; border-color:#0E7490; color:#0E7490; }
.pill.proof  { background:#EAF3EA; border-color:#2F7A3D; color:#2F7A3D; }
.pill.attach { background:#FBF1E4; border-color:var(--brass); color:#7A5E22; }
.banner {
  background:var(--navy); color:#fff; border-radius:8px; padding:10px 12px;
  font-size:13px; margin-bottom:12px;
}
.banner.warn { background:#7A2E12; }
.banner.queue { background:var(--brass); }
video, img.shot { width:100%; border-radius:8px; background:#000; display:block; }
.thumbs { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-top:8px; }
.thumbs img { width:100%; aspect-ratio:1; object-fit:cover; border-radius:6px; }
.progress { height:4px; background:var(--hair); border-radius:2px; overflow:hidden; margin-top:8px; }
.progress > div { height:100%; background:var(--brass); }
.hidden { display:none !important; }
footer { padding:16px; text-align:center; }