:root {
  color-scheme: light;
  --bg:#f4f6f8; --surface:#ffffff; --surface-2:#f7f9fb; --line:#e6eaee; --line-strong:#d4dae0;
  --ink:#17202b; --muted:#63707f; --faint:#93a3b0;
  --accent:#e8912a; --accent-ink:#231403; --accent-dim:#fbe8cc; --accent-tint:#fdf3e3;
  --unit-bg:#e6f1fb; --unit-line:#cfe2f5; --unit-ink:#0c447c;
  --ok:#0f6e56; --ok-bg:#e1f5ee; --danger:#c0392b; --danger-bg:#fdeceb;
  --radius:12px;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Roboto Mono",monospace;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
* { box-sizing:border-box; }
html,body { margin:0; }
body { background:var(--bg); color:var(--ink); font:16px/1.5 var(--sans);
  -webkit-tap-highlight-color:transparent; }
a { color:var(--accent); }

.topbar { position:sticky; top:0; z-index:5; display:flex; align-items:center;
  justify-content:space-between; gap:12px; padding:13px 16px;
  background:var(--surface); border-bottom:1px solid var(--line);
  padding-top:calc(13px + env(safe-area-inset-top)); }
.topbar .brand { display:flex; align-items:center; gap:9px; font-weight:700; letter-spacing:.2px; }
.topbar .brand .mark { width:10px; height:18px; border-radius:2px; background:var(--accent);
  box-shadow:3px 0 0 var(--accent-dim); }
.topbar .who { font-size:.78rem; color:var(--muted); }
.iconbtn { background:var(--surface-2); color:var(--ink); border:1px solid var(--line);
  border-radius:9px; padding:8px 12px; font-size:.82rem; cursor:pointer; }
.iconbtn:active { transform:translateY(1px); }

.wrap { max-width:720px; margin:0 auto; padding:16px 16px 40px; }

.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px;
  width:100%; min-height:52px; border:0; border-radius:var(--radius); cursor:pointer;
  font-size:1rem; font-weight:700; font-family:var(--sans); }
.btn.primary { background:var(--accent); color:var(--accent-ink); }
.btn.primary:disabled { background:var(--accent-dim); color:var(--faint); cursor:default; }
.btn.ghost { background:var(--surface-2); color:var(--ink); border:1px solid var(--line); font-weight:600; }
.btn:active:not(:disabled) { transform:translateY(1px); }

.card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:16px; margin-bottom:12px; }
.card h2 { margin:0 0 4px; font-size:.95rem; }
.muted { color:var(--muted); font-size:.88rem; }
.faint { color:var(--faint); }

label { display:block; font-size:.76rem; letter-spacing:.3px; text-transform:uppercase;
  color:var(--muted); margin:15px 0 6px; }
input, select { width:100%; min-height:48px; padding:11px 12px; border-radius:10px;
  border:1px solid var(--line); background:#ffffff; color:var(--ink); font-size:1rem;
  font-family:var(--sans); }
input.code { font-family:var(--mono); letter-spacing:.5px; }
select { appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),
  linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 18px) 20px,calc(100% - 13px) 20px;
  background-size:5px 5px,5px 5px; background-repeat:no-repeat; }
.row { display:flex; gap:10px; }
.row > * { flex:1; }
.check { display:flex; align-items:center; gap:10px; margin-top:14px; }
.check input { width:20px; min-height:20px; height:20px; flex:0 0 auto; accent-color:var(--accent); }
.check label { margin:0; text-transform:none; letter-spacing:0; font-size:.95rem; color:var(--ink); }

.eyebrow { font-size:.72rem; text-transform:uppercase; letter-spacing:1.5px; color:var(--faint);
  margin:0 0 10px; }

/* asset list */
.asset { display:flex; gap:12px; align-items:center; padding:12px; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--radius); margin-bottom:10px; cursor:pointer; }
.asset:active { border-color:var(--accent-dim); }
.thumb { width:56px; height:56px; flex:0 0 auto; border-radius:9px; object-fit:cover;
  background:var(--surface-2); border:1px solid var(--line); }
.thumb.ph { display:grid; place-items:center; color:var(--faint); font-size:1.3rem; }
.asset .meta { min-width:0; }
.asset .meta .b { font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.asset .meta .m { font-family:var(--mono); font-size:.8rem; color:var(--muted);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.asset .meta .loc { font-size:.78rem; color:var(--faint); }

.pill { display:inline-block; background:var(--surface-2); border:1px solid var(--line);
  border-radius:999px; padding:3px 10px; font-size:.75rem; color:var(--muted); }

.kv { display:grid; grid-template-columns:auto 1fr; gap:8px 16px; margin:12px 0; }
.kv .k { color:var(--muted); font-size:.85rem; }
.kv .v { font-family:var(--mono); word-break:break-all; }

.spin { width:18px; height:18px; border:2px solid var(--accent-ink); border-top-color:transparent;
  border-radius:50%; animation:spin .7s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce){ .spin{ animation:none; } }

.note { border-left:3px solid var(--accent); background:var(--accent-tint); color:#8a5606;
  padding:10px 12px; border-radius:0 8px 8px 0; font-size:.85rem; margin:14px 0; }
.err { color:var(--danger); font-size:.85rem; min-height:1.1em; }
.hero-photo { width:100%; border-radius:var(--radius); border:1px solid var(--line);
  background:var(--surface-2); }
.empty { text-align:center; color:var(--faint); padding:40px 16px; }

/* bottom nav */
body { padding-bottom:72px; }
.tabbar { position:fixed; left:0; right:0; bottom:0; z-index:6; display:flex;
  background:var(--surface); border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom); }
.tabbar button { flex:1; background:none; border:0; color:var(--muted); cursor:pointer;
  padding:10px 4px 12px; font-size:.72rem; font-family:var(--sans); display:flex;
  flex-direction:column; align-items:center; gap:3px; }
.tabbar button .ic { font-size:1.25rem; line-height:1; }
.tabbar button.active { color:var(--accent); }
.tabbar button.scan .ic { color:var(--accent); }
.tabbar button.scan.active .ic { color:var(--accent); }

/* materials */
.mat { display:flex; gap:12px; align-items:center; padding:13px; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--radius); margin-bottom:10px; cursor:pointer; }
.mat:active { border-color:var(--accent-dim); }
.mat .qty { flex:0 0 auto; text-align:center; min-width:48px; }
.mat .qty b { display:block; font-size:1.15rem; }
.mat .qty span { font-size:.62rem; text-transform:uppercase; letter-spacing:.5px; color:var(--faint); }
.mat .meta { min-width:0; flex:1; }
.mat .meta .b { font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mat .meta .v { font-size:.8rem; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mat .meta .v .pn { font-family:var(--mono); }

.barcode-label { background:#fff; border-radius:10px; padding:14px; text-align:center; }
.barcode-label img { max-width:100%; }

.usage-row { display:flex; justify-content:space-between; gap:12px; padding:10px 0;
  border-bottom:1px solid var(--line); font-size:.88rem; }
.usage-row .q { font-family:var(--mono); color:var(--accent); flex:0 0 auto; }
.usage-row .where { color:var(--muted); }

/* scanner */
#reader { width:100%; border-radius:var(--radius); overflow:hidden; border:1px solid var(--line);
  background:#000; min-height:240px; }
#reader video { width:100% !important; }
.scan-result { margin-top:16px; }
.scan-status { text-align:center; color:var(--muted); padding:14px; }

/* property map */
.map-groups { display:flex; flex-wrap:wrap; gap:14px; }
.bldg { background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:10px; }
.bldg .bldg-label { font-size:.72rem; color:var(--faint); text-transform:uppercase; letter-spacing:.5px; margin-bottom:6px; text-align:center; }
.bldg.apt .units { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.bldg.town .units { display:flex; flex-wrap:wrap; gap:6px; }
.ubox { min-width:52px; min-height:46px; border-radius:8px; border:1px solid var(--line);
  background:var(--surface-2); color:var(--muted); display:flex; flex-direction:column;
  align-items:center; justify-content:center; cursor:pointer; padding:4px 6px; font-size:.8rem; line-height:1.1; }
.ubox .u-code { font-weight:600; color:var(--ink); font-family:var(--mono); font-size:.82rem; }
.ubox .u-dot { font-size:.62rem; margin-top:2px; }
.ubox.has-eq { border-color:var(--accent-dim); background:var(--accent-tint); }
.ubox.has-eq .u-code { color:var(--accent); }
.ubox.has-wo { border-color:var(--danger); box-shadow:inset 0 0 0 1px rgba(192,57,43,.25); }
.ubox:active { transform:translateY(1px); }
.map-legend { display:flex; gap:16px; flex-wrap:wrap; font-size:.78rem; color:var(--muted); margin:10px 0 16px; }
.map-legend .swatch { display:inline-block; width:12px; height:12px; border-radius:3px; border:1px solid var(--line); vertical-align:-1px; margin-right:5px; }

.btn.danger { background:var(--danger-bg); color:#a32d2d; border:1px solid #f2c4c1; font-weight:600; }
.btn.danger:active { transform:translateY(1px); }
.pending-row { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid var(--line); font-size:.88rem; }
.pending-row .days { font-size:.75rem; color:var(--danger); }

.group-head { font-size:.74rem; text-transform:uppercase; letter-spacing:.6px; color:var(--faint);
  margin:18px 0 8px; padding-bottom:5px; border-bottom:1px solid var(--line); }
.group-head:first-child { margin-top:4px; }

/* F — outdoor field mode: bigger, higher contrast for sunlight + gloves */
body.outdoor { font-size:18px; --muted:#3b4654; --faint:#57646f; }
body.outdoor input, body.outdoor select, body.outdoor textarea { min-height:56px; font-size:1.05rem; }
body.outdoor .btn { min-height:62px; font-size:1.12rem; }
body.outdoor .iconbtn { padding:12px 16px; font-size:.95rem; }
body.outdoor .asset, body.outdoor .mat { padding:16px; }
body.outdoor .asset .b, body.outdoor .mat .b { font-size:1.06rem; font-weight:700; }
body.outdoor .tabbar button { font-size:.72rem; }
/* H — warranty / age flags */
.flag { display:flex; align-items:center; gap:8px; padding:10px 12px; border-radius:10px; font-size:.9rem; margin:2px 0 8px; }
.flag.ok { background:var(--ok-bg); color:var(--ok); border:1px solid #bfe6d8; }
.flag.warn { background:var(--accent-dim); color:#8a5606; border:1px solid #f0d199; }

/* L — interactive image map */
.imgmap { position:relative; width:100%; }
.imgmap > img { width:100%; display:block; border-radius:10px; }
.zone { position:absolute; transform:translate(-50%,-50%); min-width:26px; padding:2px 5px; font-size:11px;
  font-weight:700; border-radius:6px; border:1.5px solid var(--line-strong); background:rgba(255,255,255,.94);
  color:var(--ink); cursor:pointer; text-align:center; white-space:nowrap; box-shadow:0 1px 2px rgba(23,32,43,.12); }
.zone.eq { background:rgba(225,245,238,.96); border-color:#2f6b45; color:var(--ok); }
.zone.wo { background:rgba(253,236,235,.96); border-color:var(--danger); color:#a32d2d; }
.zone.edit { cursor:grab; }

/* #3 — multi-photo review strip */
.strip { display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }
.strip .ph-item { position:relative; width:74px; height:74px; border-radius:8px; overflow:hidden; border:1px solid var(--line); }
.strip .ph-item img { width:100%; height:100%; object-fit:cover; display:block; }
.strip .ph-item button { position:absolute; top:2px; right:2px; background:rgba(0,0,0,.6); color:#fff; border:none; border-radius:50%; width:22px; height:22px; font-size:13px; line-height:1; cursor:pointer; padding:0; }

/* slate-blue bold unit-code tag */
.utag { display:inline-block; font-family:var(--mono); font-weight:700; font-size:.82rem;
  letter-spacing:.3px; color:var(--unit-ink); background:var(--unit-bg); border:1px solid var(--unit-line);
  border-radius:6px; padding:3px 9px; }
body.outdoor .utag { font-size:.95rem; padding:5px 11px; }