:root{color-scheme:dark;--accent:#2bff88;--bg:#061b13;--surface:#0b261a;--line:#244c36;--text:#def5e5;--muted:#93b6a2}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:15px system-ui}header{padding:22px 28px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:14px}.eye{position:relative;width:40px;height:40px;border:1px solid #2bff8870;border-radius:50%;background:#082318;box-shadow:0 0 20px #2bff8820}.eye:before{content:'';position:absolute;inset:12px 5px;border:1px solid var(--accent);border-radius:60% 35% 60% 35%}.eye:after{content:'';position:absolute;inset:14px;border:1px solid #8cffb7;border-radius:50%;background:radial-gradient(circle,#020e08 0 3px,#2bff88 4px)}h1{font-size:21px;margin:0;letter-spacing:2px}h1 span,a{color:var(--accent)}header small{color:var(--muted);margin-left:auto}.layout{display:grid;grid-template-columns:minmax(280px,36%) minmax(0,1fr);min-height:calc(100svh - 86px)}.catalog{padding:24px;border-right:1px solid var(--line)}.filters{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0}input,select,button{font:inherit;color:var(--text);background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:10px}input{width:100%}select{min-width:100px;flex:1}button{cursor:pointer}button:hover,button.selected{border-color:var(--accent);background:#164129}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:3px}.camera{width:100%;display:block;text-align:left;margin:8px 0;padding:14px}.camera b{display:block;font-size:14px}.camera small{display:block;color:var(--muted);margin-top:6px}.player{padding:28px;min-width:0}.video-shell{background:#020d07;border:1px solid var(--line);border-radius:12px;overflow:hidden}video{display:block;width:100%;aspect-ratio:16/9;background:#020d07}.player h2{margin-top:0;font-size:24px}.hint,p{line-height:1.6;color:var(--muted)}.error{color:#ffac9b}dl{display:grid;grid-template-columns:130px 1fr;gap:12px;border-top:1px solid var(--line);padding-top:20px}dt{color:var(--muted)}dd{margin:0;overflow-wrap:anywhere}.actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:20px}a{overflow-wrap:anywhere}.paging{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px}.status{font-size:12px}details{margin-top:20px;color:var(--muted);font-size:13px}#warnings{max-height:240px;overflow:auto}.connection{padding:10px;border:1px solid var(--line);border-radius:8px;margin:12px 0;color:var(--muted)}@media(max-width:800px){.layout{grid-template-columns:1fr}.catalog{border:0;order:2}.player{padding:20px;order:1}header{padding:18px}header small{display:none}dl{grid-template-columns:100px 1fr}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}
/* T-058: let content shrink inside columns; scroll only bounded data regions. */
header { flex-wrap: wrap; padding: 18px max(16px, env(safe-area-inset-right)) 18px max(16px, env(safe-area-inset-left)); }
header h1 { min-width: 0; overflow-wrap: anywhere; flex: 1; }
.eye { flex: none; }
.surface-nav { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px max(16px, env(safe-area-inset-left)); border-bottom: 1px solid var(--line); }
.surface-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; text-decoration: none; }
.surface-nav a[aria-current] { border-color: var(--accent); }
.layout { grid-template-columns: minmax(0, 36%) minmax(0, 1fr); }
.catalog, .player, .filters, .filters > *, dl > *, .paging > * { min-width: 0; }
.catalog, .player { overflow-wrap: anywhere; }
.filters select { max-width: 100%; flex-basis: 150px; }
.camera, input, select, button { min-height: 44px; max-width: 100%; }
.camera b, .camera small, #title, #connection, #playback, #count, #warnings { overflow-wrap: anywhere; }
dl { grid-template-columns: minmax(0, 130px) minmax(0, 1fr); }
.paging { flex-wrap: wrap; }
.actions > * { min-width: 0; max-width: 100%; }
.catalog { padding-bottom: max(24px, env(safe-area-inset-bottom)); }
#list { max-height: 70vh; max-height: 70dvh; overflow-y: auto; overscroll-behavior-y: contain; }
#warnings { overscroll-behavior-y: contain; }
@media (max-width: 800px) {
  .layout { grid-template-columns: minmax(0, 1fr); }
  .catalog, .player { padding: 16px max(16px, env(safe-area-inset-right)) 20px max(16px, env(safe-area-inset-left)); }
  dl { grid-template-columns: minmax(0, 100px) minmax(0, 1fr); }
  header small { display: block; flex-basis: 100%; margin-left: 0; }
}

/* T-066: availability filters and evidence without claiming camera liveness. */
.health-toggle { display:flex; align-items:center; gap:10px; min-height:44px; cursor:pointer; color:var(--text); }
.health-toggle input { appearance:none; flex:none; width:40px; min-height:24px; height:24px; padding:0; margin:0; border-radius:20px; position:relative; transition:background .15s; }
.health-toggle input:before { content:''; position:absolute; width:16px; height:16px; left:3px; top:3px; border-radius:50%; background:var(--muted); }
.health-toggle input:checked { background:#145b34; border-color:var(--accent); }
.health-toggle input:checked:before { left:19px; background:var(--accent); }
.health-note { font-size:12px; line-height:1.6; }
.camera.problem small { color:#ffb39d; }
.camera.playing small { color:var(--accent); }

.camera-preview { display:block; position:relative; aspect-ratio:16/9; min-height:100px; margin-top:10px; background:radial-gradient(ellipse at center,#123f29,#031109); border:1px solid var(--line); border-radius:8px; overflow:hidden; }
.camera-preview img { display:block; width:100%; height:100%; object-fit:cover; aspect-ratio:16/9; }
.camera-preview img[hidden] { display:none; }
.preview-caption { display:flex; align-items:center; justify-content:center; position:absolute; inset:0; padding:12px; color:var(--muted); font-size:12px; line-height:1.5; overflow-wrap:anywhere; text-align:center; }
.has-preview .preview-caption { inset:auto 0 0; justify-content:flex-start; background:linear-gradient(transparent,#020c08e6); color:#def5e5; padding-top:22px; }
.preview-unavailable { border-style:dashed; }
.preview-decoder { position:fixed; left:-10px; bottom:0; width:1px; height:1px; min-width:0; opacity:0; pointer-events:none; }