/* Палитра и тон — как в console/simple.dc.html (тёмная стендовая эстетика). */
:root{
  --bg:#0A0C0B; --panel:#0D100F; --card:#121615;
  --line:#1A211E; --line2:#232A27;
  --text:#E6EDE9; --muted:#5C6662; --muted2:#8B958F;
  --green:#34C97B; --red:#F2544C; --amber:#EAA23E;
  --sans:-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --mono:'SF Mono',ui-monospace,'Cascadia Mono',Menlo,monospace;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);min-height:100%}
body{font-family:var(--sans);color:var(--text);font-size:13px;-webkit-font-smoothing:antialiased}
.app{display:flex;flex-direction:column;min-height:100vh}
.hdr{height:52px;display:flex;align-items:center;gap:11px;padding:0 14px;background:var(--panel);border-bottom:1px solid var(--line)}
.logo{width:30px;height:30px;border-radius:9px;background:linear-gradient(145deg,#1E9E5C,#136B3C);display:flex;align-items:center;justify-content:center;color:#EAFBF1;font-size:13px}
.ttl{font:700 13px var(--sans)}
.sub{font-size:9.5px;color:var(--muted);letter-spacing:.04em}
.spacer{flex:1}
.pill{display:flex;align-items:center;gap:8px;padding:6px 12px;border-radius:9px;background:var(--card);border:1px solid var(--line2)}
.pill .dot{width:8px;height:8px;border-radius:50%;background:var(--muted)}
.pill .dot.ok{background:var(--green);box-shadow:0 0 8px rgba(52,201,123,.6)}
.pill .dot.err{background:var(--red)}
.pill .txt{font:600 10.5px var(--mono);color:#C7D0CA;white-space:nowrap}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:14px;padding:14px;max-width:1200px;width:100%;margin:0 auto}
.cam{border:1px solid var(--line2);border-radius:14px;background:var(--panel);overflow:hidden;display:flex;flex-direction:column}
.cam .shot{position:relative;aspect-ratio:4/3;background:#070908}
.cam .shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block}
.cam .shot .noframe{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:600 11px var(--mono);color:var(--muted);letter-spacing:.06em}
.cam .shot .badge{position:absolute;top:9px;left:10px;display:flex;align-items:center;gap:6px;padding:4px 10px;border-radius:7px;background:rgba(10,12,11,.75);backdrop-filter:blur(6px);border:1px solid var(--line);font:700 9.5px var(--mono);letter-spacing:.08em}
.cam .shot .badge .d{width:7px;height:7px;border-radius:50%}
.cam.online .badge{color:var(--green)}.cam.online .badge .d{background:var(--green)}
.cam.offline .badge{color:var(--muted2)}.cam.offline .badge .d{background:var(--muted)}
.cam.offline .shot img{filter:grayscale(.8) brightness(.55)}
.cam .body{padding:11px 13px 13px}
.cam .name{font:700 13px var(--sans);margin-bottom:2px}
.cam .age{font:600 10.5px var(--mono);color:var(--muted2);margin-bottom:9px}
.cam.online .age{color:var(--green)}
.meta{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px}
.kv{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:6px 8px}
.kv .k{font:600 8.5px var(--mono);color:var(--muted);letter-spacing:.07em;text-transform:uppercase}
.kv .v{font:600 11px var(--mono);color:#C7D0CA;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}