:root { --bg:#0f1720; --card:#18232f; --line:#2a3a4a; --txt:#e6edf3; --dim:#8ea0b2; --acc:#2f81f7;
  --sun:#ffc23d; --ok:#5fd38d; --warn:#ffb347; --bad:#ff6b6b; }
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html, body { margin:0; background:var(--bg); color:var(--txt); font:16px/1.4 -apple-system,system-ui,"Segoe UI",Roboto,sans-serif; }
body { padding:0 0 calc(24px + env(safe-area-inset-bottom)); }
.view { padding:0 12px; max-width:720px; margin:0 auto; }
.top { display:flex; align-items:center; gap:8px; padding:calc(10px + env(safe-area-inset-top)) 0 6px; position:sticky; top:0; background:var(--bg); z-index:5; }
.top h1 { font-size:20px; margin:0; flex:1; }
.ver { color:var(--dim); font-size:11px; }
.back { background:none; border:0; color:var(--acc); font-size:32px; line-height:1; padding:0 8px 4px 0; width:auto; }
.card { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:12px; margin:10px 0; }
.card h3 { margin:0 0 8px; font-size:15px; }
.sect { font-size:13px; text-transform:uppercase; letter-spacing:.06em; color:var(--dim); margin:18px 0 4px; }
.opt { color:var(--dim); font-weight:400; font-size:12px; }
button { background:var(--acc); color:#fff; border:0; border-radius:10px; padding:12px 14px; font-size:16px; font-weight:600; font-family:inherit; }
button:disabled { opacity:.5; }
button.sec { background:#2a3a4a; font-size:14px; padding:10px 12px; }
button.wide, .big-btn { width:100%; margin:8px 0; }
.big-btn { padding:16px; font-size:18px; }
#startBtn { width:100%; }
label { display:block; font-size:13px; color:var(--dim); margin:8px 0; }
label input, label select { margin-top:4px; }
input, select { background:#0b121a; color:var(--txt); border:1px solid var(--line); border-radius:8px; padding:10px; font-size:16px; width:100%; font-family:inherit; }
label.chk { display:flex; gap:8px; align-items:center; color:var(--txt); font-size:15px; }
label.chk input { width:22px; height:22px; margin:0; }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:0 10px; align-items:end; }
.grid3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:0 10px; }
.row { display:flex; gap:10px; flex-wrap:wrap; }
.lbl { color:var(--dim); font-size:12px; }
.val { font-size:19px; font-weight:600; font-variant-numeric:tabular-nums; }
.bignum { font-size:34px; font-weight:700; font-variant-numeric:tabular-nums; }
.hint { color:var(--dim); font-size:13px; margin-top:6px; }
.hint.pad { margin:4px 0 8px; }
.msg { color:var(--warn); font-size:13px; margin-top:6px; }
.seg { display:flex; background:#0b121a; border-radius:10px; padding:3px; margin:8px 0; }
.seg button { flex:1; background:none; color:var(--dim); font-size:14px; padding:10px 6px; }
.seg button.on { background:var(--acc); color:#fff; }
.months { display:grid; grid-template-columns:repeat(6,1fr); gap:4px; margin-top:4px; }
.months button { background:#0b121a; color:var(--dim); padding:8px 0; font-size:13px; border:1px solid var(--line); }
.months button.on { background:#1d3b5a; color:#fff; border-color:var(--acc); }
details summary { color:var(--dim); font-size:13px; cursor:pointer; margin:6px 0; }
.help ol { padding-left:20px; margin:8px 0; font-size:14px; }
pre { font-size:11px; color:var(--dim); white-space:pre-wrap; }
.pill { display:inline-block; padding:2px 9px; border-radius:20px; font-size:12px; font-weight:700; }
.ok { background:#1d3b2a; color:var(--ok); } .warn { background:#3b2f1d; color:var(--warn); } .bad { background:#3b1d1d; color:var(--bad); }
.legend { margin:6px 0; } .legend span { display:inline-block; margin-right:10px; font-size:12px; color:var(--dim); }
.legend i { display:inline-block; width:14px; height:3px; vertical-align:middle; margin-right:4px; }
canvas.chart { width:100%; height:280px; display:block; background:#0b121a; border-radius:8px; }
#needle { width:110px; height:110px; flex:0 0 110px; }
.toolbar { display:flex; gap:6px; flex-wrap:wrap; margin:6px 0; }
.toolbar button.on { background:var(--acc); }
.site-item { display:flex; align-items:center; gap:10px; background:var(--card); border:1px solid var(--line); border-radius:12px; padding:12px; margin:8px 0; }
.site-item .nm { font-weight:600; } .site-item .meta { color:var(--dim); font-size:12px; }
.site-item .grow { flex:1; min-width:0; }
.site-item .del { background:none; color:var(--dim); font-size:20px; padding:4px 8px; }
table { width:100%; border-collapse:collapse; font-size:13px; font-variant-numeric:tabular-nums; }
th, td { padding:5px 4px; text-align:right; border-bottom:1px solid var(--line); }
th:first-child, td:first-child { text-align:left; }
th { color:var(--dim); font-weight:600; }
.rec { display:flex; gap:14px; align-items:center; }
.rec svg { flex:0 0 96px; width:96px; height:96px; }
.rec .big { font-size:26px; font-weight:800; }
.verdict { font-size:22px; font-weight:800; }
.sugg li { margin:4px 0; font-size:14px; }
#toast { position:fixed; left:50%; bottom:calc(30px + env(safe-area-inset-bottom)); transform:translateX(-50%); background:#000c; color:#fff; padding:10px 16px; border-radius:20px; font-size:14px; z-index:50; max-width:90vw; text-align:center; }

/* skyline */
.pano-wrap { overflow-x:auto; overflow-y:hidden; border-radius:8px; background:#0b121a; -webkit-overflow-scrolling:touch; }
.pano-wrap.editing { touch-action:none; }
#pano { display:block; height:56vh; max-height:460px; }

/* camera */
.view.cam { position:fixed; inset:0; padding:0; max-width:none; background:#000; z-index:20; }
.cam video, .cam #overlay { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }
.cam-top { position:absolute; top:0; left:0; right:0; padding:calc(10px + env(safe-area-inset-top)) 12px 10px; background:linear-gradient(#000b, #0000); text-align:center; pointer-events:none; }
.instr { font-size:24px; font-weight:800; text-shadow:0 1px 4px #000; }
.sub2 { font-size:14px; color:#ddd; text-shadow:0 1px 3px #000; min-height:18px; }
.dots { display:flex; gap:4px; justify-content:center; margin-bottom:6px; flex-wrap:wrap; }
.dots i { width:10px; height:10px; border-radius:50%; background:#fff4; display:inline-block; }
.dots i.done { background:var(--ok); } .dots i.next { background:var(--sun); }
.cam-bottom { position:absolute; left:0; right:0; bottom:0; display:flex; gap:6px; justify-content:space-between; padding:10px 10px calc(14px + env(safe-area-inset-bottom)); background:linear-gradient(#0000, #000b); }
.cam-bottom button { padding:12px 10px; font-size:14px; }
#flash { position:absolute; inset:0; background:#fff; opacity:0; pointer-events:none; transition:opacity .25s; }
.cam-panel { position:absolute; left:12px; right:12px; bottom:calc(80px + env(safe-area-inset-bottom)); background:#000d; border-radius:12px; padding:12px; font-size:14px; }
.cam-panel button { margin-top:8px; margin-right:6px; }

/* report */
.report { background:#fff; color:#111; border-radius:8px; padding:16px; font-size:13px; }
.report h1 { font-size:20px; margin:0 0 4px; } .report h2 { font-size:15px; margin:16px 0 6px; border-bottom:2px solid #f0a500; padding-bottom:2px; }
.report table th, .report table td { border-bottom:1px solid #ddd; } .report th { color:#555; }
.report img { max-width:100%; display:block; }
.report .kv { display:grid; grid-template-columns:auto 1fr; gap:2px 12px; }
.report .kv div:nth-child(odd) { color:#555; }
.report .photos { display:grid; grid-template-columns:repeat(4,1fr); gap:4px; }
.report .pass { color:#0a7d3c; font-weight:800; } .report .fail { color:#c62828; font-weight:800; }
.report .small { color:#666; font-size:11px; }

@media print {
  body { background:#fff; padding:0; }
  .view { max-width:none; padding:0; }
  .noprint, .view:not(#v-report), #toast { display:none !important; }
  .report { border-radius:0; padding:0; }
  .report h2 { break-after:avoid; } .report img, .report table { break-inside:avoid; }
}

#measure video { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }
.mcross { position:absolute; left:50%; top:50%; width:60px; height:60px; margin:-30px 0 0 -30px; pointer-events:none;
  background:linear-gradient(#fff,#fff) center/2px 100% no-repeat, linear-gradient(#fff,#fff) center/100% 2px no-repeat; filter:drop-shadow(0 0 2px #000); }

.verdict-box .vtitle { font-size:22px; font-weight:800; }
.okb { border-color:#2f7a4f; background:#15291f; } .warnb { border-color:#8a6a2a; background:#2a2316; } .badb { border-color:#8a2f2f; background:#2a1616; }
.verdict-box button.wide { margin-top:10px; }