:root {
  --bg: #0c1017;
  --card: #171e29;
  --line: #2a3444;
  --accent: #f0a500;
  --teal: #2aa8a0;
  --good: #37b24d;
  --warn: #f0a500;
  --bad: #fa5252;
  --text: #f5f7fa;
  --muted: #94a0b3;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
body {
  margin: 0; min-height: 100vh;
  background: radial-gradient(1200px 500px at 50% -10%, #1b2433 0%, var(--bg) 55%);
  color: var(--text);
  font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.app { max-width: 440px; margin: 0 auto; padding: 18px 16px 48px; }
.top { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; }
.eyebrow { margin:0; color:var(--accent); font-size:11px; font-weight:800; letter-spacing:.12em; }
h1 { margin:4px 0 0; font-size:28px; letter-spacing:-.02em; }
.pill { background:#222b39; color:#d7deea; border-radius:999px; padding:8px 11px; font-size:11px; font-weight:700; }
.sub { color:#c5cedc; line-height:1.45; font-size:14px; margin:12px 0 16px; }
.actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.btn {
  border:0; border-radius:14px; min-height:52px; font-weight:800; font-size:14px;
  display:flex; align-items:center; justify-content:center; cursor:pointer; text-align:center;
}
.btn.primary { background:var(--accent); color:#111; }
.btn.secondary { background:#243041; color:var(--text); }
.btn.ghost { background:#2a3444; color:var(--text); }
.btn.link {
  width:100%; margin-top:10px; background:transparent; color:var(--teal);
  border:1px dashed #335; min-height:44px;
}
.panel { background:var(--card); border:1px solid var(--line); border-radius:16px; padding:14px; margin-top:14px; }
.row { display:flex; justify-content:space-between; color:var(--muted); font-size:13px; }
input[type=range] { width:100%; margin-top:10px; }
.hint { margin:8px 0 0; color:var(--muted); font-size:12px; line-height:1.35; }
.status {
  margin-top:12px; background:#141b26; border:1px solid var(--line); border-radius:12px;
  padding:10px 12px; color:var(--muted); font-size:13px;
}
.status.busy { color:var(--accent); }
.status.err { color:#ff8787; }
.cam-wrap {
  background:#000; border-radius:16px; overflow:hidden; margin-bottom:12px; border:1px solid var(--line);
}
#video { width:100%; display:block; max-height:340px; object-fit:cover; background:#000; }
.cam-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:10px; background:#121820; }
.hidden { display:none !important; }
.overlay {
  position:fixed; inset:0; background:rgba(8,10,14,.72); display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:12px; z-index:40;
}
.spinner {
  width:42px; height:42px; border-radius:50%;
  border:3px solid #334; border-top-color:var(--accent); animation:spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.result { margin-top:14px; }
.condition {
  background:var(--card); border:1px solid var(--line); border-radius:16px; padding:14px 16px;
  border-left:5px solid var(--warn);
}
.condition.good { border-left-color: var(--good); }
.condition.warn { border-left-color: var(--warn); }
.condition.bad { border-left-color: var(--bad); }
.condition h3 { margin:0 0 6px; font-size:18px; }
.condition p { margin:0; color:#d0d8e6; font-size:13px; line-height:1.4; }
#preview { width:100%; border-radius:14px; margin-top:12px; display:block; border:1px solid var(--line); }
.findings-head { display:flex; align-items:center; justify-content:space-between; margin:14px 0 8px; }
.findings-head h2 { margin:0; font-size:16px; }
.count { background:#243041; color:#d7deea; border-radius:999px; padding:4px 10px; font-size:12px; font-weight:700; }
#findings { list-style:none; margin:0; padding:0; display:grid; gap:8px; }
#findings li {
  background:var(--card); border:1px solid var(--line); border-radius:14px; padding:12px 13px;
  display:flex; justify-content:space-between; gap:10px; align-items:flex-start;
}
.finding-name { font-weight:800; font-size:14px; }
.finding-meta { color:var(--muted); font-size:12px; margin-top:3px; line-height:1.35; }
.badge { border-radius:999px; padding:6px 9px; font-size:12px; font-weight:800; white-space:nowrap; }
.badge.High { background:rgba(42,168,160,.18); color:#7ee0d8; }
.badge.Medium { background:rgba(240,165,0,.16); color:#f2c66a; }
.badge.Low { background:rgba(250,82,82,.16); color:#ff9f9f; }
.disclaimer { margin-top:14px; color:var(--muted); font-size:11px; text-align:center; }