:root {
  --bg: #f4f6f9; --card: #fff; --text: #14202e; --muted: #5b6878; --line: #dde3ea;
  --brand: #0b5cab; --brand-ink: #fff; --ok: #1a7f4b; --warn: #a15c00; --warn-bg: #fff4e0; --err: #b3261e;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #0f1620; --card: #17212d; --text: #e7edf4; --muted: #9aa8b8; --line: #2a3747;
          --brand: #4c9be8; --brand-ink: #06121f; --ok: #4cc38a; --warn: #f0b456; --warn-bg: #2e2412; --err: #ff8a80; color-scheme: dark; }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.bar { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between;
       padding: calc(10px + env(safe-area-inset-top)) 16px 10px; background: var(--brand); color: var(--brand-ink); }
.brand { display: flex; gap: 10px; align-items: center; font-weight: 650; font-size: 18px; }
.who { background: transparent; color: inherit; border: 1px solid currentColor; border-radius: 999px; padding: 4px 12px; font: inherit; font-size: 14px; }
.offline { background: var(--warn-bg); color: var(--warn); padding: 8px 16px; font-size: 14px; }
main { max-width: 560px; margin: 0 auto; padding: 16px 16px calc(32px + env(safe-area-inset-bottom)); }
h1 { font-size: 24px; margin: 8px 0 4px; }
h2 { font-size: 17px; margin: 28px 0 8px; }
.muted { color: var(--muted); } .small { font-size: 14px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 16px; display: grid; gap: 14px; margin-top: 16px; }
label { display: grid; gap: 6px; font-weight: 600; font-size: 15px; }
input:not([type=checkbox]) { font: inherit; font-size: 18px; padding: 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); color: var(--text); width: 100%; }
input:focus { outline: 2px solid var(--brand); outline-offset: 1px; }
input.unsure { border-color: var(--warn); background: var(--warn-bg); }
label.check { display: flex; align-items: center; gap: 10px; font-weight: 500; }
label.check input { width: 22px; height: 22px; }
button, .big { font: inherit; font-weight: 650; border-radius: 12px; padding: 14px 16px; border: 1px solid var(--line); background: var(--card); color: var(--text); cursor: pointer; }
.primary { background: var(--brand); color: var(--brand-ink); border-color: var(--brand); }
.ghost { background: transparent; }
.actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 18px; }
.big { display: grid; justify-items: center; gap: 8px; padding: 22px 12px; text-align: center; }
.big svg { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.photo { width: 100%; max-height: 46vh; object-fit: contain; background: #000; border-radius: 12px; margin-top: 12px; }
.small-photo { max-height: 30vh; }
.steps { list-style: none; padding: 0; margin: 16px 0 8px; display: grid; gap: 10px; }
.steps li { display: flex; gap: 10px; align-items: center; color: var(--muted); }
.steps li::before { content: ""; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line); flex: none; }
.steps li.active { color: var(--text); font-weight: 600; }
.steps li.active::before { border-color: var(--brand); border-top-color: transparent; animation: spin 0.9s linear infinite; }
.steps li.done { color: var(--text); }
.steps li.done::before { background: var(--ok); border-color: var(--ok); }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .steps li.active::before { animation: none; } }
.hint { font-weight: 500; font-size: 13px; color: var(--warn); }
.meter-info, .usage { font-size: 14px; color: var(--muted); margin-top: -6px; }
.meter-info b, .usage b { color: var(--text); }
.usage.warn, .meter-info.warn { color: var(--warn); }
.error { color: var(--err); margin: 0; }
.list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.list li { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; display: grid; grid-template-columns: 52px 1fr auto; gap: 12px; align-items: center; }
.list img { width: 52px; height: 52px; object-fit: cover; border-radius: 8px; background: #000; }
.list .m { font-weight: 650; } .list .s { font-size: 13px; color: var(--muted); }
.list .v { text-align: right; font-variant-numeric: tabular-nums; }
.badge { display: inline-block; font-size: 12px; padding: 1px 8px; border-radius: 999px; background: var(--warn-bg); color: var(--warn); margin-left: 6px; }
.done-mark { width: 64px; height: 64px; border-radius: 50%; background: var(--ok); color: #fff; display: grid; place-items: center; font-size: 34px; margin: 24px auto 8px; }
#v-saved h1 { text-align: center; }
.summary div { display: flex; justify-content: space-between; gap: 12px; }
.summary span:last-child { font-weight: 650; font-variant-numeric: tabular-nums; text-align: right; }
#v-saved .primary { width: 100%; margin-top: 18px; }
form .primary, form .ghost { width: 100%; }