* { box-sizing: border-box; }

html, body {
    /* Safety net against horizontal scroll on narrow screens -- something
       a few pixels wider than the viewport (a long unbroken string, a
       fixed-size element, etc.) should just get clipped rather than
       force the whole page sideways and leave a persistent horizontal
       scrollbar/gutter. */
    overflow-x: hidden;
    max-width: 100%;
}

:root {
    --bg: #171b18;
    --panel: #1f2420;
    --panel-raised: #262c25;
    --edge: #383f36;
    --edge-soft: #2a3028;
    --ink: #ece8dd;
    --ink-dim: #9aa295;
    --ink-faint: #656c60;
    --amber: #d68c29;
    --amber-soft: rgba(214, 140, 41, .16);
    --moss: #82a35d;
    --moss-soft: rgba(130, 163, 93, .16);
    --rust: #c1543a;
    --rust-soft: rgba(193, 84, 58, .16);
}

html {
    scrollbar-width: thin;
    scrollbar-color: var(--edge) var(--bg);
}
html::-webkit-scrollbar { width: 9px; height: 9px; }
html::-webkit-scrollbar-track { background: var(--bg); }
html::-webkit-scrollbar-thumb {
    background: var(--edge);
    border-radius: 5px;
    border: 2px solid var(--bg);
}
html::-webkit-scrollbar-thumb:hover { background: var(--amber); }

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: 'Inter', Arial, Helvetica, sans-serif;
}

h1, .panel-title, .camera-name, .cam-tab, .manual-record-btn,
.refresh, .play, .file-name {
    font-family: 'Oswald', 'Inter', Arial, sans-serif;
}

.page {
    max-width: 1490px;
    margin: 0 auto;
    padding: 24px;
}

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.brand { display: flex; align-items: center; gap: 14px; }
.brand-text { position: relative; top: -3px; }
.header-right { display: flex; align-items: center; gap: 16px; }
.header-actions { display: flex; align-items: center; gap: 16px; }
.logout-form { margin: 0; }
.logout-btn {
    border: 1px solid var(--edge);
    background: var(--panel-raised);
    color: var(--ink-dim);
    border-radius: 3px;
    padding: 7px 13px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .3px;
    cursor: pointer;
    font-family: 'Oswald', 'Inter', Arial, sans-serif;
}
.logout-btn:hover { border-color: var(--rust); color: var(--rust); }
.settings-btn {
    border: 1px solid var(--edge);
    background: var(--panel-raised);
    color: var(--ink-dim);
    border-radius: 3px;
    width: 32px;
    height: 32px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.settings-btn svg { width: 17px; height: 17px; }
.settings-btn:hover { border-color: var(--amber); color: var(--amber); }

.settings-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1100;
    background: rgba(6, 8, 6, .92);
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.settings-overlay.open { display: flex; }
.settings-panel {
    width: 100%;
    max-width: 560px;
    max-height: 85vh;
    background: var(--panel);
    border: 1px solid var(--edge);
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.settings-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    color: var(--ink);
    font-family: 'Oswald', 'Inter', Arial, sans-serif;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: .3px;
    border-bottom: 1px solid var(--edge);
    flex-shrink: 0;
}
.settings-body {
    overflow-y: auto;
    padding: 16px 20px 22px;
    scrollbar-width: thin;
    scrollbar-color: var(--edge) var(--bg);
}
.settings-body::-webkit-scrollbar { width: 9px; }
.settings-body::-webkit-scrollbar-track { background: var(--bg); }
.settings-body::-webkit-scrollbar-thumb {
    background: var(--edge);
    border-radius: 5px;
    border: 2px solid var(--bg);
}
.settings-body::-webkit-scrollbar-thumb:hover { background: var(--amber); }
.settings-loading { color: var(--ink-faint); font-size: 13px; padding: 10px 0; }
.settings-section { margin-bottom: 20px; }
.settings-section:last-child { margin-bottom: 0; }
.settings-section-title {
    font-family: 'Oswald', 'Inter', Arial, sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--amber);
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--edge-soft);
}
.settings-row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 5px 0;
    font-size: 12px;
}
.settings-row-label { color: var(--ink-faint); flex-shrink: 0; }
.settings-row-value {
    color: var(--ink-dim);
    text-align: right;
    min-width: 0;
    word-break: normal;
    overflow-wrap: anywhere;
    font-family: 'Consolas', monospace;
}
.settings-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 4px 0 6px;
    font-size: 12px;
}
.settings-empty { color: var(--ink-faint); font-size: 12px; padding: 4px 0; }
.settings-badge {
    display: inline-block;
    background: var(--rust-soft);
    color: var(--rust);
    border: 1px solid var(--rust);
    border-radius: 3px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .3px;
    padding: 1px 5px;
    margin-left: 6px;
    vertical-align: middle;
}
.settings-restart-btn {
    border: 1px solid var(--rust);
    background: var(--rust-soft);
    color: var(--rust);
    border-radius: 4px;
    padding: 9px 16px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .3px;
    cursor: pointer;
    font-family: 'Oswald', 'Inter', Arial, sans-serif;
}
.settings-restart-btn:hover { background: var(--rust); color: var(--bg); }
.settings-restart-btn:disabled { opacity: .6; cursor: default; }
.settings-restart-note {
    margin-top: 8px;
    font-size: 11px;
    color: var(--ink-faint);
    line-height: 1.5;
}
.logo {
    width: 46px; height: 46px; border-radius: 6px;
    object-fit: cover;
    background: #fff; border: 1px solid var(--edge);
}
h1 {
    margin: 0; font-size: 26px; font-weight: 600;
    letter-spacing: .3px; text-transform: uppercase;
}
.brand p { margin: 1px 0 0; color: var(--ink-faint); font-size: 13px; }

.header-status {
    font-size: 11px; font-weight: 600; color: var(--moss);
    letter-spacing: 1px; text-transform: uppercase;
    display: flex; align-items: center;
}
.header-status.offline-text { color: var(--rust); }
.dot {
    display: inline-block; width: 7px; height: 7px;
    background: var(--moss); border-radius: 1px; margin-right: 8px;
    box-shadow: 0 0 6px var(--moss-soft);
}
.dot.offline {
    background: var(--rust);
    box-shadow: 0 0 6px var(--rust-soft);
}

main {
    display: grid;
    grid-template-columns: 484px minmax(0, 1fr);
    gap: 18px;
    /* Each column keeps its own natural height rather than both being
       stretched to whichever is taller. The right column's height is
       then set explicitly to match the left (see syncColumnHeights in
       index.html) -- without this, the recordings list growing would
       stretch the row, which stretched the left column, which made the
       list taller again. */
    align-items: start;
}

.left, .right { display: flex; flex-direction: column; gap: 18px; min-width: 0; }

.panel {
    background: var(--panel);
    border: 1px solid var(--edge);
    border-radius: 5px;
    box-shadow: 0 4px 14px rgba(0,0,0,.25);
    overflow: hidden;
}

.panel-title {
    min-height: 44px;
    padding: 12px 17px;
    border-bottom: 1px solid var(--edge);
    color: var(--ink-dim);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .4px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.camera-name { color: var(--amber); font-weight: 600; letter-spacing: .3px; }

.preview {
    height: 360px;
    background: #0c0f0b;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.preview.maximized {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    z-index: 1000;
    cursor: zoom-out;
}

.video-player-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1100;
    background: rgba(6, 8, 6, .92);
    flex-direction: column;
}
.video-player-overlay.open { display: flex; }
.video-player-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    color: var(--ink);
    font-family: 'Oswald', 'Inter', Arial, sans-serif;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: .3px;
}
.video-player-title-group { display: flex; align-items: center; gap: 10px; min-width: 0; }
#videoPlayerTitle { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
#videoPlayerFilename { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; color: var(--ink-dim); }
.video-player-trigger {
    display: none;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    background: var(--amber-soft);
    color: var(--amber);
    border: 1px solid var(--amber);
    border-radius: 3px;
    padding: 2px 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .3px;
    text-transform: uppercase;
}
.video-player-trigger .trigger-icon { width: 12px; height: 12px; }
.video-player-actions { display: flex; gap: 10px; }
.video-player-close, .video-mask-toggle {
    border: 1px solid var(--edge);
    background: var(--panel-raised);
    color: var(--ink-dim);
    border-radius: 3px;
    padding: 8px 14px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .3px;
    cursor: pointer;
    font-family: 'Oswald', 'Inter', Arial, sans-serif;
}
.video-player-close:hover { border-color: var(--rust); color: var(--rust); }
.video-mask-toggle:hover { border-color: var(--amber); color: var(--amber); }
.video-mask-toggle.on { border-color: var(--rust); color: var(--rust); background: rgba(193, 84, 58, .12); }
.video-stage {
    position: relative;
    flex: 1;
    min-height: 0;
    width: 100%;
    background: #000;
}
#videoPlayerEl {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #000;
}
.video-mask-overlay {
    position: absolute;
    display: none;
    pointer-events: none; /* view-only -- clicks pass through to the video/controls underneath */
}
.video-mask-overlay.visible { display: block; }
.mask-overlay-cell {
    position: absolute;
    box-sizing: border-box;
    background: rgba(193, 84, 58, .38);
    border: 1px solid var(--rust);
}
.preview img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    cursor: zoom-in;
}
.preview.camera-off img { display: none; }
.preview-off-label {
    display: none;
    position: absolute;
    inset: 0;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .3px;
    color: var(--ink-dim);
}
.preview.camera-off .preview-off-label { display: flex; }

.record-status {
    display: flex; align-items: center; gap: 14px;
    padding: 16px 17px;
}
.status-dot {
    width: 14px; height: 10px; border-radius: 2px;
    background: var(--ink-faint);
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.3);
}
.status-dot.on {
    background: var(--amber);
    box-shadow: 0 0 8px var(--amber-soft), inset 0 0 0 1px rgba(0,0,0,.2);
}
.status-dot.off {
    background: var(--rust);
    box-shadow: 0 0 8px var(--rust-soft), inset 0 0 0 1px rgba(0,0,0,.2);
}
.status-dot.standby {
    background: var(--moss);
    box-shadow: 0 0 8px var(--moss-soft), inset 0 0 0 1px rgba(0,0,0,.2);
}
.recording-state { font-size: 18px; font-weight: 600; letter-spacing: .2px; }
.recording { color: var(--amber); }
.standby { color: var(--moss); }
.off { color: var(--rust); }
.current-file {
    margin-top: 5px; color: var(--ink-faint);
    font-size: 12px; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
    max-width: 400px;
}

.browser-panel {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}
.refresh {
    border: 1px solid var(--edge);
    background: var(--panel-raised);
    color: var(--ink-dim);
    border-radius: 3px;
    padding: 7px 12px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .3px;
    cursor: pointer;
}
.refresh:hover { border-color: var(--amber); color: var(--amber); }
.recordings {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--edge) var(--bg);
}
.recordings::-webkit-scrollbar { width: 9px; }
.recordings::-webkit-scrollbar-track { background: var(--bg); }
.recordings::-webkit-scrollbar-thumb {
    background: var(--edge);
    border-radius: 5px;
    border: 2px solid var(--bg);
}
.recordings::-webkit-scrollbar-thumb:hover { background: var(--amber); }
.recordings:has(> .empty) { overflow-y: hidden; }
.recordings > .empty { padding: 18px; }
.recording-row {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--edge-soft);
}
.recording-row.played { background: var(--moss-soft); }
.file-icon {
    width: 72px; height: auto; min-height: 0; aspect-ratio: 16 / 9; align-self: center; border-radius: 3px;
    position: relative;
    overflow: hidden;
    display: grid; place-items: center;
    background: var(--panel-raised); color: var(--amber);
    border: 1px solid var(--edge);
    font-size: 12px;
    flex-shrink: 0;
}
.file-thumb {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    pointer-events: none; /* clicks must land on the parent .file-icon.play, not this image */
}
.file-thumb-play {
    position: relative; /* stacks above .file-thumb, which is position:absolute */
    pointer-events: none; /* same reason as .file-thumb above */
    text-shadow: 0 1px 3px rgba(0, 0, 0, .7); /* readable over a bright thumbnail */
}
.file-icon.play {
    cursor: pointer;
    line-height: 1;
}
.file-icon.play:hover { border-color: var(--amber); background: var(--amber); color: var(--panel-raised); }
.file-icon.play:hover .file-thumb { filter: brightness(.6); }
.file-info { min-width: 0; flex: 1; }
.file-name {
    color: var(--ink); font-size: 13px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.file-meta {
    margin-top: 4px; color: var(--ink-faint); font-size: 11px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.delete-recording {
    border: none;
    background: transparent;
    color: var(--ink-faint);
    width: 34px;
    height: 34px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.delete-recording svg { width: 21px; height: 21px; pointer-events: none; }
.delete-recording:hover { border-color: var(--rust); color: var(--rust); }
.empty { padding: 28px 18px; color: var(--ink-faint); text-align: center; }

.log-panel { min-height: 220px; flex-shrink: 0; }
.log {
    padding: 8px 15px 15px;
    font-family: 'Consolas', monospace;
    font-size: 11px;
    line-height: 1.9;
    color: var(--ink-dim);
    max-height: 220px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--edge) var(--bg);
}
.log::-webkit-scrollbar { width: 9px; }
.log::-webkit-scrollbar-track { background: var(--bg); }
.log::-webkit-scrollbar-thumb {
    background: var(--edge);
    border-radius: 5px;
    border: 2px solid var(--bg);
}
.log::-webkit-scrollbar-thumb:hover { background: var(--amber); }
.time { color: var(--ink-faint); margin-right: 8px; }
.info, .warn, .error {
    display: inline-block; min-width: 43px;
    font-size: 9px; font-weight: bold;
}
.info { color: var(--moss); }
.warn { color: var(--amber); }
.error { color: var(--rust); }

@media (max-width: 950px) {
    main { grid-template-columns: minmax(0, 1fr); }
}

/* --- multi-camera additions --- */

.record-status { padding: 14px 17px; border-top: 1px solid var(--edge); }
.status-dot-el { margin-right: 4px; }

.cam-controls {
    padding: 14px 17px 17px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cam-config {
    padding: 14px 17px 17px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.subtabs {
    display: flex;
    gap: 2px;
    padding: 6px 6px 0;
    border-top: 1px solid var(--edge);
    background: var(--bg);
}
.subtab {
    position: relative;
    background: transparent;
    color: var(--ink-dim);
    border: none;
    border-bottom: 1px solid var(--edge);
    border-radius: 3px 3px 0 0;
    padding: 10px 16px 9px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .3px;
    cursor: pointer;
    font-family: 'Oswald', 'Inter', Arial, sans-serif;
}
.subtab:hover { color: var(--ink); }
.subtab::after {
    content: "";
    position: absolute;
    left: 10px; right: 10px; bottom: 0;
    height: 2px;
    background: transparent;
}
.subtab.active {
    background: var(--panel);
    border-bottom: 1px solid var(--panel);
    color: var(--ink);
}
.subtab.active::after { background: var(--moss); }

.subtab-panel { display: none; }
.subtab-panel.active { display: block; }

.motion-mask-preview {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.mask-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #0c0f0b;
    border: 1px solid var(--edge);
    border-radius: 4px;
    overflow: hidden;
}
.mask-snapshot {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
.mask-frame.camera-off .mask-snapshot { display: none; }
.mask-frame-off-label {
    display: none;
    position: absolute;
    inset: 0;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .3px;
    color: var(--ink-dim);
}
.mask-frame.camera-off .mask-frame-off-label { display: flex; }
.mask-grid {
    position: absolute;
    inset: 0;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
}
.grid-cell {
    position: absolute;
    box-sizing: border-box;
    border: 1px solid rgba(255, 255, 255, 0.04);
}
.grid-cell:hover { background: rgba(255, 255, 255, 0.10); }
.grid-cell.selected {
    background: rgba(193, 84, 58, .38);
    border-color: var(--rust);
}
.mask-controls { display: flex; gap: 8px; }
.mask-save-btn, .mask-clear-btn {
    border: 1px solid var(--edge);
    background: var(--panel-raised);
    color: var(--ink-dim);
    border-radius: 3px;
    padding: 8px 14px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .3px;
    cursor: pointer;
    font-family: 'Oswald', 'Inter', Arial, sans-serif;
}
.mask-save-btn:hover { border-color: var(--moss); color: var(--moss); }
.mask-clear-btn:hover { border-color: var(--rust); color: var(--rust); }
.mask-caption {
    font-size: 11px;
    color: var(--ink-faint);
}
.manual-record-btn {
    border: 1px solid var(--edge);
    background: var(--panel-raised);
    color: var(--ink-dim);
    border-radius: 3px;
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .3px;
    cursor: pointer;
    font-family: 'Oswald', 'Inter', Arial, sans-serif;
}
.manual-record-btn:hover { border-color: var(--amber); color: var(--amber); }
.manual-record-btn.active {
    border-color: var(--rust);
    background: var(--rust-soft);
    color: var(--rust);
}
.manual-record-btn:disabled { opacity: .55; cursor: default; }

.motion-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2px 0;
}
.motion-toggle-label {
    font-size: 13px;
    color: var(--ink-dim);
    font-family: 'Oswald', 'Inter', Arial, sans-serif;
    letter-spacing: .3px;
}
.toggle-switch {
    position: relative;
    width: 44px;
    height: 24px;
    border: 1px solid var(--edge);
    background: var(--panel-raised);
    border-radius: 12px;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
}
.toggle-switch:hover { border-color: var(--ink-faint); }
.toggle-knob {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--ink-faint);
    transition: left .15s ease, background .15s ease;
}
.toggle-switch.on {
    background: var(--moss-soft);
    border-color: var(--moss);
}
.toggle-switch.on .toggle-knob {
    left: 22px;
    background: var(--moss);
}
.toggle-switch:disabled { opacity: .6; cursor: default; }

.ptz-pad {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    max-width: 250px;
    margin: 0 auto;
}
.ptz-btn {
    aspect-ratio: 1;
    border: 1px solid var(--edge);
    background: var(--panel-raised);
    color: var(--ink-dim);
    border-radius: 3px;
    font-size: 22px;
    cursor: pointer;
}
.ptz-btn:hover { border-color: var(--amber); color: var(--amber); }
.ptz-btn:active { background: var(--amber-soft); }
.ptz-center { color: var(--moss); border-color: var(--moss); }

.recordings-controls { display: flex; align-items: center; gap: 10px; }
.recordings-cam-name {
    color: var(--amber);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .3px;
}
.recordings-count { color: var(--ink-faint); font-weight: 400; }

.recordings-filter {
    display: flex;
    gap: 6px;
    padding: 10px 17px;
    border-bottom: 1px solid var(--edge);
}
.recordings-filter-btn {
    border: 1px solid var(--edge);
    background: var(--panel-raised);
    color: var(--ink-faint);
    border-radius: 3px;
    padding: 4px 11px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .2px;
    cursor: pointer;
    font-family: 'Oswald', 'Inter', Arial, sans-serif;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.recordings-filter-btn .trigger-icon { width: 12px; height: 12px; flex-shrink: 0; }
.recordings-filter-btn:hover { border-color: var(--ink-dim); color: var(--ink-dim); }
.recordings-filter-btn.active {
    border-color: var(--amber);
    background: var(--amber-soft);
    color: var(--amber);
}

.recording-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    border-radius: 3px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .3px;
    text-transform: uppercase;
    padding: 1px 5px;
    margin-right: 7px;
    vertical-align: middle;
    position: relative;
    top: -1px;
}
.recording-badge .trigger-icon { width: 8px; height: 8px; flex-shrink: 0; }
.recording-badge-motion { background: var(--amber-soft); color: var(--amber); border: 1px solid var(--amber); }
.recording-badge-manual { background: var(--moss-soft); color: var(--moss); border: 1px solid var(--moss); }

.camera-specs {
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    background: var(--panel-raised);
    border: 1px solid var(--edge);
    border-radius: 4px;
}
.camera-model {
    font-size: 11px;
    color: var(--ink-dim);
    font-weight: 600;
    letter-spacing: .3px;
}
.specs-list {
    font-size: 10px;
    color: var(--ink-faint);
}
.camera-ip {
    font-family: 'Consolas', monospace;
    font-size: 10px;
    color: var(--ink-faint);
}

.storage-indicator {
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    background: var(--panel-raised);
    border: 1px solid var(--edge);
    border-radius: 4px;
    margin-bottom: 8px;
}
.storage-indicator:last-child { margin-bottom: 0; }
.storage-indicator-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .3px;
    color: var(--ink-dim);
}
.storage-indicator-text { font-weight: 400; color: var(--ink-faint); }
.storage-bar {
    height: 6px;
    border-radius: 3px;
    background: var(--bg);
    border: 1px solid var(--edge);
    overflow: hidden;
}
.storage-bar-fill {
    height: 100%;
    width: 0;
    background: var(--moss);
    border-radius: 2px;
    transition: width .3s ease;
}
.storage-bar-fill.warn { background: var(--amber); }
.storage-bar-fill.over { background: var(--rust); }

/* --- camera tabs, unified into one panel-like container --- */

.camera-tabgroup {
    background: var(--panel);
    border: 1px solid var(--edge);
    border-radius: 5px;
    box-shadow: 0 4px 14px rgba(0,0,0,.25);
    overflow: hidden;
}

.cam-tabs {
    display: flex;
    gap: 2px;
    padding: 6px 6px 0;
    background: var(--bg);
    flex-wrap: wrap;
}
.cam-tab {
    position: relative;
    background: transparent;
    color: var(--ink-dim);
    border: none;
    border-bottom: 1px solid var(--edge);
    border-radius: 3px 3px 0 0;
    padding: 10px 16px 9px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .3px;
    cursor: pointer;
}
.cam-tab:hover { color: var(--ink); }
.cam-tab::after {
    content: "";
    position: absolute;
    left: 10px; right: 10px; bottom: 0;
    height: 2px;
    background: transparent;
}
.cam-tab.offline { color: var(--rust); }
.cam-tab.active {
    background: var(--panel);
    /* matches the panel's own background -- the seam into the content below disappears */
    border-bottom: 1px solid var(--panel);
    color: var(--ink);
}
.cam-tab.active::after { background: var(--moss); }
.cam-tab.active.offline { color: var(--rust); }
.cam-tab.active.offline::after { background: var(--rust); }

.tab-panel { display: none; }
.tab-panel.active { display: block; }

.overview-panel { display: none; }
.overview-panel.active { display: block; }
.overview-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding: 17px;
}
.overview-tile {
    border: 1px solid var(--edge);
    border-radius: 4px;
    overflow: hidden;
    background: #0c0f0b;
    cursor: pointer;
}
.overview-tile:hover { border-color: var(--amber); }
.overview-tile-img-wrap {
    aspect-ratio: 16 / 9;
    background: #0c0f0b;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.overview-tile-img { width: 100%; height: 100%; object-fit: contain; display: block; }
.overview-tile.camera-off .overview-tile-img { display: none; }
.overview-tile-off-label {
    display: none;
    position: absolute;
    inset: 0;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .3px;
    color: var(--ink-dim);
    background: rgba(12, 15, 11, .35);
}
.overview-tile.camera-off .overview-tile-off-label { display: flex; }
.overview-tile-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 7px 10px;
    background: var(--panel-raised);
    border-top: 1px solid var(--edge);
}
.overview-tile-name { font-size: 12px; font-weight: 600; color: var(--ink-dim); letter-spacing: .2px; }
.overview-tile-dot { width: 10px; height: 8px; }
@media (max-width: 600px) {
    .overview-grid { grid-template-columns: minmax(0, 1fr); }

    .page { padding: 14px; }
    header {
        flex-wrap: wrap;
        row-gap: 10px;
        margin-bottom: 14px;
    }
    .brand { gap: 10px; }
    .logo { width: 36px; height: 36px; }
    h1 { font-size: 19px; }
    .brand p { font-size: 11px; }
    /* Not enough room on one line for the logo/title plus the status
       badge, gear icon, and Log out button all together -- once header
       wraps, give header-right the full second row to itself, with the
       status text on the left and the gear icon + Log out button (kept
       adjacent to each other, not split apart) on the right of that
       same line. */
    .header-right { width: 100%; justify-content: space-between; }
    .header-actions { gap: 8px; }

    /* Same padding/font as the desktop tabs makes for pretty wide
       buttons at phone widths -- "Backyard (Pi)" etc. eat a lot of
       horizontal room each, so few fit per row before wrapping and the
       whole row reads as oversized next to the rest of the compacted
       mobile UI. Trim both down here so more tabs fit per line. */
    /* Wrapping into multiple rows still let the row as a whole (or a
       single long camera name) end up wider than the screen. Switch to
       a single-row, horizontally-scrollable strip instead: each tab
       keeps a compact, readable size and never gets squeezed, and if
       they don't all fit, the strip scrolls sideways on its own rather
       than the tabs -- or the page -- getting wider than the viewport. */
    .cam-tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .cam-tab { padding: 8px 10px 7px; font-size: 12px; flex-shrink: 0; }
    .video-player-header { align-items: flex-start; padding: 12px 14px; gap: 10px; }
    .video-player-title-group { flex-direction: column; align-items: flex-start; gap: 3px; flex: 1; }
    #videoPlayerTitle, #videoPlayerFilename { width: 100%; }
    .recordings-filter-btn span { display: none; }
    .recordings-filter-btn { padding: 5px 8px; }

    /* The recording line ("Monday 4:59:55 PM 21-09-2026 • 2.3 MB •
       24 sec") is too long to fit one line at phone widths -- ellipsis
       there just hides the size/duration. Let it wrap onto as many
       lines as it needs instead of truncating. */
    .file-name { white-space: normal; overflow: visible; text-overflow: clip; }
}