:root {
  --bg:#f3f6f8; --card:#fff; --text:#17272f; --muted:#687982;
  --border:#d7e0e4; --accent:#087f78; --accent-dark:#06655f;
  --soft:#e7f4f2; --danger:#aa3333; --warning:#9a6100;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
}
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--text); }
.shell { width:min(100%,650px); margin:0 auto; padding:20px 14px 44px; }
.card { background:var(--card); border-radius:20px; padding:22px; box-shadow:0 10px 30px rgba(23,39,47,.10); }
.logo { display:block; width:min(72%,250px); height:auto; margin:0 auto 18px; border-radius:8px; }
h1 { margin:0; font-size:1.55rem; }
#start-screen h1, #summary-screen h1 { text-align:center; }
.intro { color:var(--muted); text-align:center; line-height:1.45; margin:8px auto 22px; }
.field { margin-bottom:17px; position:relative; }
label { display:block; font-weight:750; margin-bottom:7px; }
input, select {
  width:100%; min-height:49px; border:1px solid var(--border); border-radius:12px;
  padding:12px 13px; font-size:16px; background:#fff; color:var(--text);
}
input:focus, select:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(8,127,120,.13); }
.qr-row { display:grid; grid-template-columns:1fr auto; gap:9px; }
.two-column { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
button { border:0; border-radius:12px; font-weight:800; font-size:.98rem; cursor:pointer; }
button:disabled { cursor:not-allowed; opacity:.55; }
.secondary { padding:0 16px; min-height:49px; color:var(--accent-dark); background:var(--soft); }
.primary { width:100%; min-height:54px; color:#fff; background:var(--accent); }
.full-width { width:100%; margin-top:9px; }
.stop-scan { width:100%; min-height:44px; margin-top:8px; color:var(--accent-dark); background:var(--soft); }
.text-button { padding:8px 10px; background:transparent; color:var(--accent-dark); }
.hint { margin:6px 0 0; color:var(--muted); font-size:.82rem; line-height:1.35; }
.reader { margin-top:10px; overflow:hidden; border-radius:12px; }
.results {
  position:absolute; z-index:20; left:0; right:0; top:78px; max-height:280px; overflow:auto;
  background:#fff; border:1px solid var(--border); border-radius:12px; box-shadow:0 12px 24px rgba(23,39,47,.15);
}
.result-button { display:block; width:100%; padding:12px 13px; text-align:left; border-radius:0; background:#fff; color:var(--text); border-bottom:1px solid #edf1f3; font-weight:600; }
.result-button:hover, .result-button:focus { background:var(--soft); outline:none; }
.result-button small { display:block; color:var(--muted); margin-top:3px; font-weight:500; }
.status { min-height:24px; margin-top:14px; text-align:center; font-weight:750; line-height:1.35; }
.status.ok { color:var(--accent-dark); }
.status.error { color:var(--danger); }
.status.warning { color:var(--warning); }
.site-preview { margin:0 0 17px; padding:14px; border:1px solid var(--border); border-radius:12px; background:var(--soft); line-height:1.4; }
.site-preview strong { display:block; }
.site-preview span { color:var(--muted); font-size:.9rem; }
.visit-header { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; padding-bottom:14px; border-bottom:1px solid var(--border); }
.eyebrow { margin:0 0 4px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); font-weight:800; font-size:.72rem; }
.site-address, .ukpn { margin:5px 0 0; color:var(--muted); line-height:1.35; }
.ukpn { font-weight:700; color:var(--accent-dark); }
.counter-bar { display:flex; justify-content:space-between; gap:8px; margin:14px 0 20px; padding:11px 12px; border-radius:12px; background:#f4f8f9; color:var(--muted); font-size:.85rem; }
.counter-bar strong { color:var(--text); }
.summary-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:20px 0; }
.summary-grid div { padding:17px 12px; border-radius:12px; background:#f4f8f9; text-align:center; }
.summary-grid strong { display:block; font-size:1.5rem; color:var(--accent-dark); }
.summary-grid span { display:block; margin-top:4px; color:var(--muted); font-size:.85rem; }
[hidden] { display:none !important; }
@media (max-width:430px) {
  .card { padding:18px; border-radius:16px; }
  .qr-row, .two-column { grid-template-columns:1fr; }
  .counter-bar { font-size:.78rem; }
}