.camera-note{color:#5c6066;margin:0 0 24px;line-height:1.5}
.camera-tabs{display:flex;gap:8px;margin:0 0 24px;border-bottom:1px solid #e3e4e7;padding-bottom:12px}
.camera-tabs button{min-height:44px;background:#fff;color:#50545a;border:1px solid #d8dadd;border-radius:6px;padding:10px 18px}
.camera-tabs button[aria-pressed=true]{background:#222428;color:#fff;border-color:#222428}
.archive-filters{display:flex;align-items:end;flex-wrap:wrap;gap:16px;margin-bottom:16px}
.archive-filters label{display:grid;gap:8px;flex:1;min-width:150px;font-size:13px;color:#555}
.archive-filters input,.archive-filters select{width:100%;min-width:0;min-height:44px;padding:10px;border:1px solid #d8dadd;border-radius:6px;background:white;color:#222;font:inherit}
.archive-filters button{min-height:44px}
.archive-layout{display:grid;grid-template-columns:minmax(0,2fr) minmax(220px,1fr);gap:24px;align-items:start}
.archive-viewer,.archive-browser{min-width:0}
.archive-viewer .camera-stage{border-radius:6px;overflow:hidden}
#archive-message,#archive-selected,#archive-count{font-size:14px;line-height:1.5;overflow-wrap:anywhere}
#archive-selected{color:#666}
#archive-list{display:grid;gap:6px;max-height:480px;overflow:auto}
#archive-list button{min-height:44px;text-align:left;padding:12px;border:1px solid #e3e4e7;border-radius:6px;background:#fff;color:#333;font:inherit;font-size:14px}
#archive-list button.selected{background:#f6eff0;border-color:#ad252e;color:#8b1821}
#archive-more{width:100%;margin-top:12px;min-height:44px}
@media(max-width:700px){.archive-layout{grid-template-columns:1fr;gap:12px}.archive-filters{gap:10px}.archive-filters label:first-child{flex-basis:100%}#archive-list{max-height:300px}.camera-tabs button{flex:1}}
.camera-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:24px}
.camera-card{border:1px solid #e3e4e7;border-radius:6px;overflow:hidden;min-width:0;background:#fff}
.camera-stage{position:relative;aspect-ratio:16/9;background:#191a1c}
.camera-stage video{width:100%;height:100%;display:block;object-fit:contain}
.camera-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;gap:16px;text-align:center;background:#202124;color:#d9dbe0;pointer-events:none}
.camera-placeholder[hidden]{display:none}
.camera-placeholder svg{width:56px;height:42px;color:#969a9f}
.camera-placeholder strong{font-size:15px;font-weight:500;line-height:1.5;max-width:30ch}
.camera-info{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:20px 20px 12px;flex-wrap:wrap}
.camera-info h2{font-size:18px;margin:0 0 6px;font-weight:600;overflow-wrap:anywhere}
.camera-info p{font-size:13px;color:#5c6066;margin:0;overflow-wrap:anywhere}
.camera-status{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:#5c6066;line-height:20px}
.camera-status.is-live{color:#191a1c}
.camera-status.is-live:before{content:"";width:6px;height:6px;border-radius:50%;background:#ad252e}
.camera-actions{display:flex;gap:8px;flex-wrap:wrap;padding:8px 20px 20px}
.camera-actions button{font-size:14px;min-height:44px;flex:1}
.camera-actions button:disabled{opacity:.45;cursor:default}
@media(max-width:480px){.camera-grid{gap:16px}.camera-info{padding:16px 16px 8px}.camera-actions{padding:8px 16px 16px}.camera-actions button{font-size:13px}}
/* Archive player: shared by desktop and the Telegram mobile webview. */
.archive-layout.archive-layout-player{grid-template-columns:minmax(0,1fr)}
#archive-player{background:#17191c;color:#f7f7f8;border-radius:20px;overflow:hidden;outline-offset:4px}
.layout[data-view] #archive-player .camera-stage{border-radius:0}
#archive-player .camera-stage{border-radius:0}
.archive-controls{padding:12px 16px 16px}
.archive-time{display:flex;justify-content:space-between;gap:8px;font-size:13px;font-variant-numeric:tabular-nums;color:#d7d9dc}
.layout[data-view] #archive-seek,#archive-seek{display:block;width:100%;height:44px;min-height:44px;margin:0;padding:0;border:0;background:transparent;accent-color:#ff606a;cursor:pointer;box-shadow:none}
#archive-seek::-webkit-slider-runnable-track{height:6px;border-radius:4px;background:linear-gradient(to right,#ff606a var(--played,0%),#555961 var(--played,0%))}
#archive-seek::-webkit-slider-thumb{-webkit-appearance:none;margin-top:-5px}
.archive-transport{display:grid;grid-template-columns:1fr 1.5fr 1fr;gap:8px}
.layout[data-view] .archive-controls button,.archive-controls button{min-height:46px;border:1px solid #4d5058;background:#2a2d33;color:#fff;border-radius:12px;padding:10px;font:inherit;font-size:14px;white-space:normal}
.layout[data-view] .archive-controls #archive-play,.archive-controls #archive-play{background:#f1f2f4;color:#181a1e;border-color:#f1f2f4;font-weight:650}
.archive-options{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;margin-top:12px}
.archive-options label{display:flex;align-items:center;gap:8px;font-size:13px;color:#d7d9dc}
.layout[data-view] .archive-options select,.archive-options select{width:76px;min-height:44px;border:1px solid #4d5058;border-radius:10px;background:#2a2d33;color:#fff;padding:8px;font-size:16px;box-shadow:none}
.archive-controls button:disabled,.archive-neighbors button:disabled{opacity:.4;cursor:default}
.archive-controls button:focus-visible,.archive-controls select:focus-visible,#archive-seek:focus-visible,#archive-player:focus-visible{outline:2px solid #ff8a92;outline-offset:3px}
.archive-neighbors{display:flex;gap:8px;margin-top:12px}
.layout[data-view] .archive-neighbors button,.archive-neighbors button{flex:1;min-width:0;min-height:46px;padding:10px;border-radius:12px;border:1px solid #d9dade;background:#fff;color:#303238;font-size:14px}
.archive-layout-player #archive-list{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));max-height:350px}
.archive-layout-player #archive-count{font-weight:600;margin-top:0}
#archive-player:fullscreen{width:100%;height:100%;border-radius:0;display:flex;flex-direction:column;justify-content:center;background:#101114}
#archive-player:fullscreen .camera-stage{flex:1;min-height:0;aspect-ratio:auto}
#archive-player:fullscreen .archive-controls{flex:none;width:100%;max-width:900px;margin:0 auto;box-sizing:border-box}
@media(max-width:480px){.archive-controls{padding:10px 12px 12px}.archive-options{gap:6px}.archive-options label{gap:4px;font-size:12px}.archive-options label select{width:66px}.layout[data-view] .archive-options button,.archive-options button{padding:8px;font-size:12px}.archive-layout-player #archive-list{grid-template-columns:1fr}.archive-time{font-size:12px}}
@media(max-width:360px){.archive-options label{order:3;width:100%;justify-content:space-between}.archive-options>button{flex:1}}
#archive-player{scroll-margin-top:16px}
@media(min-width:1000px){.archive-layout.archive-layout-player{grid-template-columns:minmax(0,1fr) 240px;gap:20px}.archive-layout-player #archive-list{grid-template-columns:1fr;max-height:540px}}