:root {
    color-scheme: dark;
    font-family: "Segoe UI", system-ui, sans-serif;
    background: #080709;
    color: #fff5f6;
    --surface: #170f13;
    --accent: #ff6b7e;
    --muted: #c2aeb5;
    --edge: #61323e;
    --raised: 0 20px 46px #0008, inset 0 1px #ffd8e215;
    --inset: inset 0 2px 8px #0007;
}

* { box-sizing: border-box; }
body {
    margin: 0;
    min-height: 100vh;
    padding: clamp(1rem, 4vw, 3rem);
    background: radial-gradient(ellipse at 15% 0%, #51101e 0%, transparent 48%),
                radial-gradient(ellipse at 100% 60%, #250a13 0%, transparent 40%), #080709;
}
main { max-width: 70rem; margin: auto; }
h1, h2, p, dl, dd { margin: 0; }
h1 { color: #fff5f6; letter-spacing: .12em; font-size: clamp(1.4rem, 4vw, 2.2rem); }
h2 { font-size: 1rem; margin-bottom: 1rem; }
button, input, textarea { font: inherit; color: inherit; }
button, input, textarea { border: 1px solid var(--edge); border-radius: .75rem; background: var(--surface); }
button { padding: .65rem .95rem; background: linear-gradient(145deg, #85233b, #541426); color: #fff5f6; cursor: pointer; }
button:hover { background: #8e2941; }
button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid var(--accent); }
input:not([type="hidden"]), textarea { display: block; width: 100%; padding: .75rem; box-shadow: var(--inset); }
form label { display: block; color: var(--muted); font-size: .875rem; margin: .8rem 0 .4rem; }
form input + button, form p + button, form textarea + button { margin-top: 1rem; }
.feedback { color: var(--muted); margin-top: .8rem; }
textarea { resize: vertical; }
.panel {
    min-width: 0;
    border: 1px solid var(--edge);
    border-radius: 1.35rem;
    padding: clamp(1rem, 2vw, 1.5rem);
    background: linear-gradient(145deg, #26131be8, #100c10f5);
    box-shadow: var(--raised);
}
.login { max-width: 23rem; margin: 12vh auto 0; padding: 1.75rem; }
.login button { width: 100%; }
.dashboard-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.7rem; padding-bottom: 1rem; border-bottom: 1px solid var(--edge); gap: 1rem; }
.dashboard-grid { display: grid; grid-template-columns: minmax(0, 2.5fr) minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.camera { grid-row: span 2; border-color: #a04356; }
.camera-frame { display: grid; place-items: center; aspect-ratio: 4 / 3; background: #050406; border: 1px solid #58303a; border-radius: .85rem; overflow: hidden; }
.camera-frame img { width: 100%; height: 100%; object-fit: contain; }
#camera-placeholder { color: var(--muted); padding: 1rem; text-align: center; }
#detection-status { color: var(--muted); font-size: .875rem; font-variant-numeric: tabular-nums; margin-top: .85rem; }
.record-controls { display: flex; align-items: center; flex-wrap: wrap; gap: .75rem; margin-top: 1rem; }
.record-controls span { color: var(--muted); font-size: .875rem; }
.record-controls button:disabled { opacity: .55; cursor: default; }
.sensors h2 span { color: var(--muted); font-size: .75rem; font-weight: 400; margin-left: .3rem; }
.sensors dl { display: grid; gap: 1rem; }
.sensors dl div { padding: .85rem; box-shadow: var(--inset); border-radius: .75rem; }
.sensors dt { color: var(--muted); font-size: .875rem; }
.sensors dd { color: var(--accent); font-size: 1.5rem; margin-top: .25rem; }
.qr-preview { display: block; max-width: min(100%, 12rem); margin: 1rem auto 0; border-radius: .4rem; }
.error { color: #ffabab; margin-top: .8rem; }
@media (max-width: 650px) {
    .dashboard-grid { grid-template-columns: 1fr; }
    .camera { grid-row: auto; }
    .sensors dl { grid-template-columns: 1fr 1fr; }
}