.cameras-shell { box-sizing: border-box; padding-block: clamp(2rem, 5vw, 4.75rem); }
.cameras-intro { max-width: 52rem; }
.cameras-intro h1 { margin: .35rem 0 1rem; font-size: clamp(2rem, 5vw, 4.5rem); line-height: 1; }
.cameras-intro p { max-width: 46rem; color: var(--text-secondary, #52606d); }
.cameras-checked, .cameras-state { font-size: .92rem; color: var(--text-secondary, #52606d); }
.cameras-filters { display: grid; grid-template-columns: minmax(0, 2fr) repeat(4, minmax(0, 1fr)) auto; gap: .75rem; align-items: end; margin-block: 2rem 1rem; }
.cameras-filters > * { min-width: 0; }
.cameras-filters label { display: grid; gap: .35rem; color: var(--text-secondary, #52606d); font-size: .82rem; font-weight: 650; }
.cameras-filters input, .cameras-filters select, .cameras-reset { box-sizing: border-box; width: 100%; min-height: 2.8rem; border: 1px solid var(--line, #d8dee5); border-radius: .55rem; background: var(--surface, #fff); color: inherit; padding: .55rem .65rem; font: inherit; }
.cameras-reset, .cameras-view-switch button, .camera-card__action, .camera-player__head button { cursor: pointer; }
.cameras-view-switch { display: none; gap: .5rem; margin-block: .75rem; }
.cameras-view-switch button { border: 1px solid var(--line, #d8dee5); background: transparent; border-radius: 99px; padding: .45rem .8rem; font: inherit; }
.cameras-view-switch button[aria-pressed="true"] { background: var(--accent, #0b6e69); color: #fff; border-color: var(--accent, #0b6e69); }
.cameras-workspace { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(19rem, .9fr); gap: 1rem; min-height: 36rem; }
.cameras-map-panel, .cameras-results { border: 1px solid var(--line, #d8dee5); border-radius: 1rem; overflow: hidden; background: var(--surface, #fff); }
#cameras-map { height: 100%; min-height: 36rem; background: #e9f0ec; }
.cameras-results { padding: .75rem; overflow: auto; max-height: 42rem; }
.camera-card { border-bottom: 1px solid var(--line, #d8dee5); padding: 1rem .3rem; display: grid; gap: .55rem; }
.camera-card:last-child { border: 0; }.camera-card h2 { margin: 0; font-size: 1.05rem; }.camera-card p { margin: 0; color: var(--text-secondary, #52606d); font-size: .9rem; }.camera-card__note { font-style: italic; }.camera-card__meta { display: flex; flex-wrap: wrap; gap: .4rem; }.camera-card__chip { border-radius: 99px; background: #edf5f3; padding: .2rem .5rem; font-size: .75rem; }.camera-card__chip--offline { background: #f8e7e5; }.camera-card__actions { display: flex; gap: .5rem; flex-wrap: wrap; }.camera-card__action { display: inline-flex; align-items: center; border: 1px solid var(--accent, #0b6e69); border-radius: .45rem; padding: .45rem .65rem; color: var(--accent, #0b6e69); background: transparent; text-decoration: none; font: inherit; font-size: .88rem; }
dialog#camera-player { width: min(56rem, calc(100vw - 2rem)); border: 0; border-radius: 1rem; padding: 0; box-shadow: 0 1rem 4rem #0005; } dialog#camera-player::backdrop { background: #071b1a99; }.camera-player__head { padding: 1rem 1.25rem; display: flex; justify-content: space-between; gap: 1rem; }.camera-player__head h2, .camera-player__head p { margin: 0; }.camera-player__head p { color: var(--text-secondary, #52606d); font-size: .9rem; }.camera-player__head button { border: 0; background: transparent; font-size: 1.8rem; }.camera-player__frame { aspect-ratio: 16 / 9; width: 100%; border: 0; display: block; }.camera-player__fallback { padding: 1rem 1.25rem 1.5rem; }
@media (max-width: 900px) { .cameras-filters { grid-template-columns: repeat(3, minmax(0, 1fr)); }.cameras-filters label:first-child { grid-column: span 3; }.cameras-workspace { grid-template-columns: 1fr; }.cameras-results { max-height: none; } }
@media (max-width: 640px) { .cameras-shell { padding-inline: 1rem; }.cameras-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }.cameras-filters label:first-child { grid-column: span 2; }.cameras-view-switch { display: flex; }.cameras-workspace[data-view="map"] .cameras-results, .cameras-workspace[data-view="list"] .cameras-map-panel { display: none; }.cameras-workspace { min-height: auto; } #cameras-map { min-height: 55vh; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; } }