:root { color-scheme: dark; font-family: "Avenir Next", Avenir, Arial, sans-serif; background: #000; color: #f1f4f7; }
* { box-sizing: border-box; }
body { margin: 0; }
#monitor { width: 100%; height: 100dvh; min-height: 260px; display: flex; flex-direction: column; background: #000; }
.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: #0b1420; padding: max(10px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 10px max(16px, env(safe-area-inset-left)); }
.brand { display: flex; align-items: center; gap: 12px; }
.brand-mark { display: block; width: 48px; height: 48px; border-radius: 10px; }
h1 { font-size: 1.45rem; font-weight: 650; margin: 0; letter-spacing: -.03em; color: #d4aa53; }
.brand-detail { margin: 2px 0 0; font-size: .8rem; color: #a7b7c9; }
.view-only { font-size: .8rem; color: #a7b7c9; }
.cameras { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; flex: 1; min-height: 0; background: #142232; padding-bottom: env(safe-area-inset-bottom); }
.camera { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: #000; }
.camera-heading { display: flex; align-items: center; gap: 12px; padding: 8px 12px; background: #0b1420; }
h2 { margin: 0; font-size: .95rem; font-weight: 500; }
.status { margin-left: auto; color: #a7b7c9; font-size: .8rem; white-space: nowrap; }
.camera.live .status { color: #d4aa53; }
.picture { flex: 1; min-height: 0; position: relative; overflow: hidden; }
video { position: absolute; top: 50%; left: 50%; visibility: hidden; object-fit: contain; pointer-events: none; }
.camera.live video { visibility: visible; }
.message { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 24px; color: #a7b7c9; font-size: .95rem; }
.camera.live .message { display: none; }
@media (max-width: 600px) and (orientation: portrait) {
  .cameras { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; }
  .toolbar { padding-left: 12px; padding-right: 12px; }
  .camera-heading { padding: 5px 10px; gap: 8px; }
  h2 { font-size: .88rem; }
}
@media (max-height: 450px) { .toolbar { padding-top: 5px; padding-bottom: 5px; } .camera-heading { padding: 4px 10px; } }