.webcam-viewer{--wc-accent:#2d6b64;background:#fff;border:1px solid #d8e1dc;border-radius:8px;overflow:hidden;color:#253b40;clear:both;width:100%;font-family:Arial,sans-serif}.webcam-viewer[hidden],.webcam-viewer [hidden]{display:none!important}.webcam-viewer button{font:inherit;font-size:13px;cursor:pointer;background:#fff;border:1px solid #c7d5cd;border-radius:6px;padding:9px 12px;min-height:44px;color:inherit;touch-action:manipulation}.webcam-viewer button:disabled{opacity:.4;cursor:default}.webcam-viewer button:hover:not(:disabled) {background:#eaf1ed}.webcam-viewer :is(button,a,input):focus-visible {outline:3px solid #b97624;outline-offset:2px}.webcam-viewer a{color:var(--wc-accent)}.webcam-viewer .image-toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 18px}.webcam-viewer .image-toolbar strong,.webcam-viewer [data-wc="mode"],.webcam-viewer .camera-status{display:block}.webcam-viewer [data-wc="mode"],.webcam-viewer .camera-status{font-size:12px;color:#62786e;margin:4px 0}.webcam-viewer .actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:12px}.webcam-viewer .actions a{padding:8px}.webcam-viewer .picture{position:relative;width:100%;background:#dfe7e3;aspect-ratio:16/7;line-height:0}.webcam-viewer .picture>img{display:block;width:100%;height:auto;margin:0}.webcam-viewer [data-wc="pois"]{position:absolute;inset:0;pointer-events:none}.webcam-viewer .pin{position:absolute;transform:translate(-50%,-50%);pointer-events:auto;width:44px;height:44px;border:0;background:transparent;padding:8px;display:grid;place-items:center}.webcam-viewer .pin span{display:grid;place-items:center;background:#fbfaf2;width:26px;height:26px;border:2px solid #fff;border-radius:50%;font-size:12px;font-weight:700;box-shadow:0 1px 8px #142c2970
}.webcam-viewer .pin:hover{background:transparent}.webcam-viewer .pin:hover span,.webcam-viewer .pin[aria-expanded="true"] span{background:var(--wc-accent);color:#fff}.webcam-viewer .loading{position:absolute;bottom:12px;left:12px;background:#142c29dd;color:#fff;padding:10px;font-size:13px;line-height:1.2;border-radius:5px}.webcam-viewer .poi-info{padding:14px 18px;background:#eef4ef;display:flex;justify-content:space-between;gap:12px}.webcam-viewer .poi-info p{margin:6px 0;font-size:14px;line-height:1.5}.webcam-viewer .caption{display:flex;justify-content:space-between;gap:12px;padding:10px 18px;font-size:12px;color:#62786e;border-bottom:1px solid #d8e1dc}.webcam-viewer .caption p{margin:0}.webcam-viewer [data-wc="count"]{white-space:nowrap}.webcam-viewer .archive{padding:20px}.webcam-viewer .archive-head{display:flex;justify-content:space-between;align-items:center;gap:12px}.webcam-viewer h2{font-size:17px;margin:0}.webcam-viewer .days{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin:16px 0 22px}.webcam-viewer .day{text-align:left;padding:10px}.webcam-viewer .day strong,.webcam-viewer .day span{display:block}.webcam-viewer .day span{font-size:12px;margin-top:5px}.webcam-viewer .day[aria-pressed="true"]{background:var(--wc-accent);color:#fff;border-color:var(--wc-accent)}.webcam-viewer .axis-head{display:flex;justify-content:space-between;gap:10px;font-size:12px;color:#63786f;margin-bottom:10px}.webcam-viewer .legend{display:inline-block;width:10px;height:10px;border-radius:2px;background:#559281;vertical-align:middle;margin:0 4px 0 10px}.webcam-viewer .legend.empty{background:#e8ede9}.webcam-viewer .axis-wrap{position:relative;height:30px;background:#e8ede9;border-radius:5px;overflow:hidden}.webcam-viewer [data-wc="axis"]{width:100%;height:30px;display:block}.webcam-viewer [data-wc="axis"] rect{fill:#559281}.webcam-viewer [data-wc="cursor"]{position:absolute;top:0;bottom:0;background:#202f2b;width:2px;pointer-events:none}.webcam-viewer .hours{display:flex;justify-content:space-between;font-size:11px;color:#71847b;margin:8px 0 20px}.webcam-viewer .playback{display:flex;gap:10px;align-items:end}.webcam-viewer .playback>button:first-child,.webcam-viewer .playback>button:nth-child(3) {font-size:20px;min-width:44px}.webcam-viewer .scrubber{flex:1;min-width:0;font-size:12px;display:grid;gap:5px;grid-template-columns:1fr auto}.webcam-viewer .scrubber input{grid-column:1/3;width:100%;margin:0;height:32px;accent-color:var(--wc-accent)}.webcam-viewer .scrubber output{grid-row:1;grid-column:2;font-weight:700}.webcam-viewer .time{font-size:12px;display:grid;gap:5px}.webcam-viewer .time input{height:44px;max-width:130px;border:1px solid #c7d5cd;border-radius:6px;padding:6px;font:inherit}.webcam-viewer .hint{font-size:12px;line-height:1.6;color:#71847b;margin:14px 0 0}.webcam-viewer:fullscreen{background:#fff;overflow:auto;border:0;border-radius:0}.webcam-viewer:fullscreen .picture,.webcam-viewer:fullscreen .archive,.webcam-viewer:fullscreen .image-toolbar{max-width:1500px;margin:auto}@media (max-width:650px){.webcam-viewer .image-toolbar{padding:10px;align-items:start;flex-direction:column}.webcam-viewer .actions{gap:4px}.webcam-viewer .actions button{font-size:12px;padding:7px}.webcam-viewer .actions a{padding:6px}.webcam-viewer .caption{padding:10px;flex-direction:column;gap:5px}.webcam-viewer .archive{padding:14px 10px}.webcam-viewer h2{font-size:15px}.webcam-viewer .archive-head{align-items:start}.webcam-viewer .archive-head button{font-size:12px}.webcam-viewer .days{gap:4px}.webcam-viewer .day{padding:8px 2px;text-align:center;font-size:11px}.webcam-viewer .day span{font-size:10px}.webcam-viewer .axis-head{flex-direction:column}.webcam-viewer .legend:first-child{margin-left:0}.webcam-viewer .playback{display:grid;grid-template-columns:44px minmax(0,1fr) 44px}.webcam-viewer .playback .time{grid-column:1/3;grid-row:2;display:flex;align-items:center;justify-content:space-between}.webcam-viewer .playback [data-wc="go"]{grid-column:3;grid-row:2;padding:4px;font-size:11px}.webcam-viewer .time input{width:130px;max-width:none}.webcam-viewer .poi-info{padding:12px}}.webcam-viewer .archive-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px}.webcam-viewer .scrubber{position:relative}.webcam-viewer .scrub-preview{position:absolute;bottom:calc(100% + 10px);left:50%;transform:translateX(-50%);width:240px;min-height:125px;padding:5px;border:1px solid #c7d5cd;border-radius:7px;background:#fff;box-shadow:0 4px 18px #142c2933;text-align:center;pointer-events:none;z-index:4}.webcam-viewer .scrub-preview img{display:block;width:100%;height:auto;margin:0}.webcam-viewer .scrub-preview span{display:block;margin-top:4px;font-weight:bold}@media (max-width:650px){.webcam-viewer .scrub-preview{width:160px;min-height:90px}.webcam-viewer .archive-head{flex-wrap:wrap}.webcam-viewer .archive-actions{gap:5px}}.webcam-viewer .picture>img.photo-incoming{position:absolute;top:0;left:0;z-index:1;pointer-events:none}.webcam-viewer [data-wc="pois"]{z-index:2}.webcam-viewer .loading{z-index:3}.webcam-viewer .picture{margin-inline:auto;max-width:calc(max(220px, 100svh - 300px) * var(--wc-aspect, 2.285714))}.webcam-viewer:fullscreen .picture{max-width:min(1500px, calc(max(160px, 100svh - 110px) * var(--wc-aspect, 2.285714)))}.webcam-viewer .image-stage{display:contents}.webcam-viewer .mobile-player,.webcam-viewer .mobile-options,.webcam-viewer .mobile-zoom-reset{display:none}.webcam-viewer.mobile-ui .image-toolbar{padding:10px 12px}.webcam-viewer.mobile-ui .image-toolbar .actions,.webcam-viewer.mobile-ui .camera-status,.webcam-viewer.mobile-ui [data-wc="mode"]{display:none}.webcam-viewer.mobile-ui .image-toolbar strong{font-size:14px}.webcam-viewer.mobile-ui .image-stage{display:block;position:relative;overflow:hidden;width:100%;background:#102124;touch-action:none}.webcam-viewer.mobile-ui .image-stage .picture{position:absolute;left:50%;top:50%;max-width:none;margin:0;transform:translate(-50%,-50%);transform-origin:center}.webcam-viewer.mobile-ui .picture img{user-select:none;-webkit-user-drag:none}.webcam-viewer.mobile-ui.image-zoomed .image-stage{cursor:grab}.webcam-viewer.mobile-ui .mobile-player{display:block;padding:6px 12px 8px;background:#17322f;color:#fff}.webcam-viewer .mobile-stamp{display:none;font-size:12px;margin-bottom:4px}.webcam-viewer.mobile-ui .mobile-scrubber .scrubber{display:flex;align-items:center;gap:10px;font-size:0}.webcam-viewer.mobile-ui .mobile-scrubber input{flex:1;width:0;height:30px;min-width:0;accent-color:#a9d3bc}.webcam-viewer.mobile-ui .mobile-scrubber output{font-size:12px;min-width:40px}.webcam-viewer.mobile-ui .mobile-buttons{display:flex;justify-content:center;align-items:center;gap:8px}.webcam-viewer.mobile-ui .mobile-buttons button{background:transparent;color:#fff;border:0;font-size:22px;width:44px;height:44px;padding:0;min-height:44px}.webcam-viewer.mobile-ui .mobile-buttons [data-wc="play"]{background:#ffffff18;border:1px solid #ffffff55;border-radius:50%}.webcam-viewer.mobile-ui .mobile-buttons button:hover{background:#ffffff20}.webcam-viewer.mobile-ui .mobile-zoom-reset{display:block;position:absolute;right:8px;top:8px;z-index:5;background:#102124df;color:#fff;border-color:#ffffff55;min-width:44px;padding:8px}.webcam-viewer.mobile-ui .archive{padding:10px 12px}.webcam-viewer.mobile-ui .archive-head,.webcam-viewer.mobile-ui .axis-head,.webcam-viewer.mobile-ui .hours,.webcam-viewer.mobile-ui .archive .playback,.webcam-viewer.mobile-ui .hint{display:none}.webcam-viewer.mobile-ui .days{margin:0;gap:4px}.webcam-viewer.mobile-ui .day{padding:7px 3px;min-height:48px}.webcam-viewer.mobile-ui .day span{font-size:10px}.webcam-viewer.mobile-ui .axis-wrap{height:6px;margin-top:8px}.webcam-viewer.mobile-ui [data-wc="axis"]{height:6px}.webcam-viewer.mobile-ui .caption{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);border:0}.webcam-viewer.mobile-ui .mobile-options{display:block;padding:10px 12px;border-top:1px solid #d8e1dc;font-size:13px}.webcam-viewer.mobile-ui .mobile-options summary{cursor:pointer;padding:5px 0}.webcam-viewer.mobile-ui [data-wc="mobile-options-content"]{display:flex;flex-wrap:wrap;gap:12px;align-items:center;padding-top:8px}.webcam-viewer.mobile-ui .scrub-preview{color:#253b40}.webcam-viewer.mobile-ui.mobile-fullscreen{display:flex;flex-direction:column;width:100vw;height:100dvh;background:#102124;border:0;border-radius:0;overflow:hidden}.webcam-viewer.mobile-expanded{position:fixed;inset:0;z-index:10000}.webcam-viewer.mobile-fullscreen .image-toolbar,.webcam-viewer.mobile-fullscreen .archive,.webcam-viewer.mobile-fullscreen .mobile-options{display:none}.webcam-viewer.mobile-fullscreen .image-stage{flex:1;min-height:0;height:100%;aspect-ratio:auto!important}.webcam-viewer.mobile-fullscreen .mobile-player{position:absolute;left:0;right:0;bottom:0;z-index:6;background:linear-gradient(transparent,#102124ed 28%);padding-top:20px;padding-bottom:max(8px,env(safe-area-inset-bottom))}.webcam-viewer.mobile-fullscreen .mobile-stamp{display:none}.webcam-viewer.mobile-fullscreen .poi-info{position:absolute;top:8px;left:8px;right:8px;z-index:8}.webcam-viewer.mobile-fullscreen.controls-hidden .mobile-player,.webcam-viewer.mobile-fullscreen.controls-hidden .mobile-zoom-reset{opacity:0;pointer-events:none}.webcam-viewer .mobile-image-status{display:none}.webcam-viewer.mobile-fullscreen .mobile-image-status,.webcam-viewer.mobile-ui.image-zoomed .mobile-image-status{display:flex;align-items:center;gap:8px;position:absolute;left:max(8px,env(safe-area-inset-left));top:max(8px,env(safe-area-inset-top));z-index:5;max-width:calc(100% - 80px);padding:6px 9px;border-radius:5px;background:#102124d9;color:#fff;font-size:12px;line-height:1.4;pointer-events:none;font-variant-numeric:tabular-nums}