:root {
  --deep-treads: #1E262A;
  --led-blue: #00AACD;
  --vivid-blue: #006496;
  --graphite: #676464;
  --calm-gray: #E5E5E5;
  --forever-green: #99CA3B;

  --bg: #F4F4F4;
  --card: #FFFFFF;
  --ink: var(--deep-treads);
  --muted: var(--graphite);
  --line: #CFCFCF;
  --brand: var(--deep-treads);
  --primary: var(--led-blue);
  --primary-ink: var(--deep-treads);
  --secondary: var(--vivid-blue);
  --pass: var(--forever-green);
  --pass-ink: var(--deep-treads);
  --pass-bg: #EEF6DF;
  --pass-line: #6E9A1F;
  --issue: #B91C1C;          /* danger: ISSUE / Taken out of service – 6.5:1 on white */
  --issue-bg: #FDECEC;
  --na: var(--graphite);
  --na-bg: var(--calm-gray);
  --amber: #B45309;          /* warning: Follow-up required – 5:1 on white, distinct from green */
  --amber-bg: #FDF1E3;
  --focus: #00AACD;
  --radius: 12px;
  --topbar-h: 52px;
  --topbar-total: calc(var(--topbar-h) + env(safe-area-inset-top));
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 17px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  overflow-x: hidden;
  padding-top: var(--topbar-total);
  padding-bottom: env(safe-area-inset-bottom);
}
main { max-width: 640px; margin: 0 auto; padding: 12px max(14px, env(safe-area-inset-right)) 120px max(14px, env(safe-area-inset-left)); outline: none; }
h1, h2, h3 { line-height: 1.2; margin: 0 0 10px; }
h1 { font-size: 1.6rem; letter-spacing: .02em; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.05rem; }
p { margin: 0 0 10px; }
.muted { color: var(--muted); }
.small { font-size: .88rem; }
.pad { padding: 16px; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .02em; word-break: break-all; }
[hidden] { display: none !important; }

.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  height: var(--topbar-total);
  display: flex; align-items: center; gap: 10px; flex-wrap: nowrap; overflow: hidden;
  background: var(--brand); color: #fff;
  padding: env(safe-area-inset-top) max(14px, env(safe-area-inset-right)) 0 max(14px, env(safe-area-inset-left));
  font-weight: 700; font-size: .85rem; letter-spacing: .08em;
}
.topbar-logo { flex: none; height: 20px; width: 123px; display: block; }
.topbar-title { flex: 1 1 auto; min-width: 0; font-weight: 600; letter-spacing: .04em; font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar > span:not(.topbar-title) { flex: none; white-space: nowrap; }
@media (max-width: 400px) {
  .topbar { gap: 8px; }
  .topbar-title { font-size: .82rem; letter-spacing: .02em; }
  .topbar .saved { font-size: 0; }
  .topbar .saved::after { content: attr(data-short); font-size: .95rem; }
}
@media (max-width: 360px) {
  .topbar { gap: 6px; padding-left: max(10px, env(safe-area-inset-left)); padding-right: max(10px, env(safe-area-inset-right)); }
  .topbar .demo, .topbar .net { padding: 2px 7px; font-size: .66rem; }
}
@media (max-width: 340px) {
  .topbar-title { display: none; }
}
.demo { background: var(--amber); color: #fff; border-radius: 99px; padding: 2px 10px; font-weight: 800; letter-spacing: .02em; font-size: .72rem; }
.net { background: var(--amber); color: #fff; border-radius: 99px; padding: 2px 10px; font-weight: 600; letter-spacing: 0; font-size: .78rem; }
.saved { font-weight: 500; letter-spacing: 0; opacity: .8; font-size: .78rem; }

.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; margin: 0 0 12px; }
.card.warn { border-color: var(--amber); background: var(--amber-bg); }
.card.danger { border-color: var(--issue); background: var(--issue-bg); }
.card.ok { border-color: var(--pass-line); background: var(--pass-bg); }

.btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; min-height: 56px; padding: 12px 16px; margin: 0 0 10px;
  border: 2px solid var(--line); border-radius: var(--radius);
  background: var(--card); color: var(--ink);
  font: inherit; font-weight: 700; letter-spacing: .02em; text-align: center;
  cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: scale(.99); }
.btn:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.btn.primary { background: var(--primary); border-color: var(--primary); color: var(--primary-ink); font-weight: 800; }
.btn.secondary { border-color: var(--secondary); color: var(--secondary); }
.btn.huge { min-height: 84px; font-size: 1.3rem; }
.btn.danger { border-color: var(--issue); color: var(--issue); }
.btn.link { border: 0; background: none; min-height: 44px; color: var(--secondary); text-decoration: underline; font-weight: 600; }
.btn[disabled] { opacity: .5; }
.row { display: flex; gap: 10px; }
.row > * { flex: 1; min-width: 0; }

label.field { display: block; margin: 0 0 12px; font-weight: 600; }
label.field > span { display: block; margin-bottom: 4px; }
input[type=text], input[type=date], input[type=search], input:not([type]), select, textarea {
  width: 100%; min-height: 52px; padding: 12px; font: inherit; color: var(--ink);
  background: var(--card); border: 2px solid var(--line); border-radius: 10px;
}
textarea { min-height: 88px; resize: vertical; }
.serial-input { font-size: 1.5rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.field-error { color: var(--issue); font-weight: 600; font-size: .9rem; margin-top: 4px; }
.invalid { border-color: var(--issue) !important; }

.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 0 0 12px; }
@media (min-width: 420px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stat { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 10px; }
.stat b { display: block; font-size: 1.7rem; line-height: 1.1; }
.stat span { font-size: .78rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.stat { border-left: 5px solid var(--calm-gray); }
.stat.red { border-left-color: var(--issue); }
.stat.red b { color: var(--issue); }
.stat.amber { border-left-color: var(--amber); }
.stat.amber b { color: var(--amber); }
.stat.green { border-left-color: var(--pass); }
.stat.blue { border-left-color: var(--led-blue); }

.list { list-style: none; margin: 0 0 12px; padding: 0; }
.list li { margin: 0 0 8px; }
.list-item {
  display: block; width: 100%; text-align: left; font: inherit; color: var(--ink);
  background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  padding: 10px 12px; min-height: 56px; cursor: pointer;
}
.list-item .mono { font-weight: 700; }
.chip { display: inline-block; padding: 2px 9px; border-radius: 99px; font-size: .78rem; font-weight: 800; letter-spacing: .03em; }
.chip.in_service, .chip.pass { background: var(--pass); color: var(--pass-ink); }
.chip.follow_up { background: var(--amber); color: #fff; }
.chip.out_of_service, .chip.issue { background: var(--issue); color: #fff; }
.chip.na, .chip.neutral { background: var(--na-bg); color: var(--na); }

.machine-head {
  position: sticky; top: var(--topbar-total); z-index: 10;
  background: var(--card); border: 1px solid var(--line); border-radius: 0 0 var(--radius) var(--radius);
  margin: -12px -14px 12px; padding: 10px 14px;
}
.machine-head .model { font-size: 1.1rem; font-weight: 800; }
.machine-head .serial { font-size: 1.05rem; }
.progress { height: 8px; border-radius: 99px; background: var(--na-bg); overflow: hidden; margin-top: 8px; }
.progress > i { display: block; height: 100%; background: var(--pass); }

.item { background: var(--card); border: 2px solid var(--line); border-radius: var(--radius); padding: 12px; margin: 0 0 10px; scroll-margin-top: 140px; }
.item.s-pass { border-color: var(--pass-line); }
.item.s-issue { border-color: var(--issue); }
.item.s-na { border-color: var(--na); }
.item.err { box-shadow: 0 0 0 3px var(--issue); }
.item-text { font-weight: 600; margin-bottom: 10px; }
.item-num { color: var(--muted); font-weight: 800; margin-right: 6px; }
.seg { display: flex; gap: 8px; }
.seg .btn { margin: 0; min-height: 60px; flex: 1; }
.seg .btn.on-pass { background: var(--pass); border-color: var(--pass-line); color: var(--pass-ink); }
.seg .btn.on-issue { background: var(--issue); border-color: var(--issue); color: #fff; }
.seg .btn.on-na { background: var(--na); border-color: var(--na); color: #fff; }
.issue-box { margin-top: 10px; }

.outcomes { display: grid; gap: 8px; margin-bottom: 12px; }
.outcomes .btn { margin: 0; min-height: 64px; }
.outcomes .btn.on-in_service { background: var(--pass); border-color: var(--pass-line); color: var(--pass-ink); }
.outcomes .btn.on-follow_up { background: var(--amber); border-color: var(--amber); color: #fff; }
.outcomes .btn.on-out_of_service { background: var(--issue); border-color: var(--issue); color: #fff; }

.photos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 8px 0; }
.photo { border: 1px solid var(--line); border-radius: 10px; padding: 6px; background: var(--bg); }
.photo img { display: block; width: 100%; height: 120px; object-fit: cover; border-radius: 6px; }
.photo input { min-height: 44px; padding: 8px; margin: 6px 0; font-size: .9rem; }
.photo .btn { min-height: 44px; margin: 0; font-size: .85rem; }

.cats { display: grid; grid-template-columns: 1fr; gap: 8px; }
@media (min-width: 420px) { .cats { grid-template-columns: 1fr 1fr; } }
.cats .btn { margin: 0; justify-content: flex-start; text-align: left; min-height: 60px; font-weight: 600; }
.cats .btn.sel { border-color: var(--secondary); box-shadow: 0 0 0 2px var(--secondary) inset; }
.cats .btn b { color: var(--muted); min-width: 2ch; }

.sticky-bottom {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 15;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  border-top: 1px solid var(--line);
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
}
.sticky-bottom > div { max-width: 640px; margin: 0 auto; }
.sticky-bottom .btn { margin: 0; }

.errors { border: 2px solid var(--issue); background: var(--issue-bg); border-radius: var(--radius); padding: 12px; margin: 0 0 12px; }
.errors ul { margin: 6px 0 0; padding-left: 20px; }
.check { display: flex; gap: 12px; align-items: flex-start; font-weight: 600; padding: 12px; border: 2px solid var(--line); border-radius: var(--radius); background: var(--card); margin-bottom: 12px; }
.check input { width: 32px; height: 32px; flex: none; margin: 0; accent-color: var(--secondary); }

.scanner { position: fixed; top: var(--topbar-total); left: 0; right: 0; bottom: 0; z-index: 50; background: #000; display: flex; flex-direction: column; }
.scanner video { flex: 1; width: 100%; min-height: 0; object-fit: cover; }
.scanner .aim { position: absolute; left: 7%; right: 7%; top: 32%; height: 22%; border: 3px solid #fbbf24; border-radius: 12px; box-shadow: 0 0 0 9999px rgba(0,0,0,.35); pointer-events: none; }
.scanner .bar { padding: 12px 14px calc(12px + env(safe-area-inset-bottom)); background: #000; color: #fff; }
.scanner .bar p { text-align: center; font-weight: 700; }
.scanner .btn { background: #1f2937; color: #fff; border-color: #374151; }
.scanner .btn.primary { background: var(--primary); color: var(--primary-ink); border-color: var(--primary); }

.toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(96px + env(safe-area-inset-bottom)); z-index: 60; background: var(--deep-treads); color: #fff; padding: 12px 18px; border-radius: 99px; font-weight: 700; max-width: 92vw; text-align: center; box-shadow: 0 6px 20px rgba(0,0,0,.3); }
.preview-row { border-bottom: 1px solid var(--line); padding: 6px 0; font-size: .92rem; word-break: break-word; }
.kv { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; margin-bottom: 8px; }
.kv div span { display: block; font-size: .75rem; font-weight: 800; color: var(--muted); text-transform: uppercase; }
.kv div b { word-break: break-word; }
.instruction { font-size: .9rem; color: var(--muted); border-left: 4px solid var(--line); padding-left: 10px; margin-bottom: 12px; }

body.landing { background: var(--deep-treads); color: #fff; }
body.landing .topbar-title, body.landing .saved { visibility: hidden; }
.landing-wrap { position: relative; min-height: calc(100vh - var(--topbar-total) - 12px); min-height: calc(100dvh - var(--topbar-total) - 12px); display: flex; flex-direction: column; padding-top: 28px; overflow: hidden; }
.landing-wrap > :not(.landing-ramps) { position: relative; z-index: 1; }
.landing-ramps { z-index: 0; position: absolute; right: 0; bottom: 120px; width: 220px; height: auto; opacity: .07; pointer-events: none; }
.product { font-size: 2.3rem; font-weight: 800; letter-spacing: .06em; line-height: 1; margin: 0; }
.workflow { font-size: 1.35rem; font-weight: 500; color: var(--led-blue); margin: 6px 0 12px; }
.tagline { color: #C9CDCF; margin: 0 0 32px; }
.landing .card { background: #283237; border-color: #3B474D; color: #fff; }
.landing .card .muted, .landing .muted { color: #C9CDCF; }
.landing .card.warn { border-color: var(--amber); background: #322A22; }
.landing .card.old { border-color: #F59E0B; }
.landing .btn { background: transparent; color: #fff; border-color: #56646B; }
.landing .btn.primary { background: var(--led-blue); border-color: var(--led-blue); color: var(--deep-treads); }
.landing .btn.danger-link { border: 0; color: #FCA5A5; text-decoration: underline; min-height: 44px; font-weight: 600; }
.landing .privacy { margin-top: auto; padding-top: 24px; font-size: .85rem; color: #AEB5B9; position: relative; }
.landing .about { margin: 10px 0 0; font-size: .75rem; color: #8F999E; position: relative; }
.age { font-weight: 700; }
.age.old { color: #FCD34D; }

.confirm-panel { border: 3px solid var(--amber); background: var(--amber-bg); border-radius: var(--radius); padding: 14px; margin: 0 0 12px; }
.confirm-panel h3 { color: var(--amber); }

.recog { border-left: 6px solid var(--led-blue); }
.recog-title { font-size: 1.45rem; font-weight: 800; letter-spacing: .02em; line-height: 1.2; word-break: break-word; }
.recog-family { font-size: 1.05rem; color: var(--muted); font-weight: 600; margin-top: 2px; }
.recog-note { font-weight: 700; color: var(--amber); margin: 8px 0 2px; }
.recog-insp { font-size: 1.25rem; font-weight: 800; }