* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; background: #0e1116; color: #e6edf3; }
header { padding: 14px 20px; border-bottom: 1px solid #222a33; background: #11161d; }
h1 { margin: 0; font-size: 18px; font-weight: 650; }
h1 .sub { color: #8b949e; font-weight: 400; font-size: 13px; }
.status { margin-top: 6px; font-size: 13px; color: #9fb0c0; }
.status.ok { color: #36d399; } .status.err { color: #f87272; }

main { display: grid; grid-template-columns: 320px 1fr; gap: 16px; padding: 16px; }
@media (max-width: 900px) { main { grid-template-columns: 1fr; } }

.panel { background: #11161d; border: 1px solid #222a33; border-radius: 10px; padding: 14px; }
.controls label { display: block; font-size: 13px; color: #c4d0dc; margin-bottom: 4px; }
.controls .row { margin: 12px 0; }
#camera { width: 100%; margin-top: 6px; padding: 8px; background: #0e1116; color: #e6edf3; border: 1px solid #30363d; border-radius: 6px; font-size: 13px; }
input[type=range] { width: 100%; vertical-align: middle; }
button { background: #1f6feb; color: #fff; border: 0; border-radius: 7px; padding: 9px 14px; font-size: 13px; cursor: pointer; margin-right: 8px; }
button:disabled { background: #30363d; color: #6e7681; cursor: not-allowed; }
button:hover:not(:disabled) { background: #388bfd; }
.stats { font-size: 12px; color: #9fb0c0; white-space: pre-line; line-height: 1.5; margin-top: 10px; }

.stage { padding: 8px; position: relative; }
#cam { display: none; }
#overlay { width: 100%; height: auto; background: #000; border-radius: 8px; display: block; }