:root{--op-ink:#153731;--op-accent:#087f82;--op-line:#dbe6e3}
.icon{display:inline-block;flex:none;vertical-align:middle} [hidden]{display:none!important}
.obise-player{position:relative;display:flex;flex-direction:column;width:100%;overflow:hidden;background:#fff;border:1px solid #d8e4e2;border-radius:18px;box-shadow:0 12px 42px #183e3110;color:var(--op-ink);font-family:system-ui,-apple-system,'Segoe UI',sans-serif;isolation:isolate}
.video-stage{position:relative;aspect-ratio:var(--video-ratio,16/9);background:#102321;min-width:0;overflow:hidden}
.video-stage video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;background:#102321}
.video-overlays{position:absolute;left:var(--content-left,0px);top:var(--content-top,0px);width:var(--content-width,100%);height:var(--content-height,100%);pointer-events:none;z-index:2}
.op-logo{position:absolute;max-width:21%;max-height:22%;display:flex;pointer-events:none}.op-logo img{max-width:100%;max-height:clamp(36px,10vw,120px);object-fit:contain;filter:drop-shadow(0 2px 5px #0003)}
.op-logo.top-left{top:3%;left:2.5%}.op-logo.top-right{top:3%;right:2.5%}.op-logo.bottom-left{bottom:3%;left:2.5%}.op-logo.bottom-right{bottom:3%;right:2.5%}
.op-status{position:absolute;top:3%;left:2.5%;background:#ffffffed;color:#23483e;box-shadow:0 2px 14px #0002;display:flex;align-items:center;gap:7px;padding:7px 11px;border-radius:6px;font-size:11px;letter-spacing:.06em;max-width:68%}.op-status.on-right{left:auto;right:2.5%}.op-status i{width:7px;height:7px;border-radius:50%;background:#819591}.playback-live .op-status i{background:#dd493e}.playback-live .op-status{color:#92291d}.playback-paused .op-status{color:#45595a}
.op-message{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;background:#f0f7f3ee;color:#254640;padding:18px}.op-message strong{font-size:clamp(15px,2.2vw,22px)}.op-message p{max-width:450px;margin:0;font-size:13px}.op-message-icon{padding:14px;border:1px solid #cbded7;background:white;border-radius:50%;margin-bottom:5px}.op-message-icon .icon{width:28px;height:28px}.op-message button{display:flex;gap:8px;align-items:center;background:white;border:1px solid #bdcec7;color:#1f5043;padding:9px 14px;border-radius:8px;cursor:pointer;margin-top:8px}
.op-banner{position:relative;background:var(--banner-bg,#eef4f1);color:var(--banner-text,#153731);padding:12px 18px;display:flex;align-items:baseline;gap:18px;flex-wrap:wrap;line-height:1.35;flex-shrink:0;font-size:13px}.op-banner strong{font-size:15px}.op-banner span{overflow-wrap:anywhere}
.op-controls{display:flex;align-items:center;gap:5px;min-height:54px;padding:7px 10px;flex-shrink:0;background:#fff;border-top:1px solid #e3ebe7;z-index:3;flex-wrap:wrap}.op-controls button{display:inline-flex;align-items:center;justify-content:center;gap:6px;background:transparent;border:0;border-radius:7px;color:#385750;min-width:36px;min-height:36px;cursor:pointer;font:600 12px system-ui;padding:8px}.op-controls button:hover{background:#edf5f2;color:#075d60}.op-controls button:disabled{opacity:.45;cursor:default}.op-controls .icon{width:19px;height:19px}.op-controls .op-modes{display:flex;gap:3px;padding-left:8px;border-left:1px solid #e0e8e5;margin-left:3px}.op-controls .selected{background:#e8f3f0;color:#076768}.op-controls button:focus-visible,.op-nearby button:focus-visible{outline:3px solid #1c8d9f;outline-offset:2px}.op-control-spacer{flex:1}.mode-dot{width:6px;height:6px;background:#b4c6bf;border-radius:50%}.playback-live .mode-dot{background:#df5546}.op-progress{display:flex;align-items:center;gap:10px;flex:1;min-width:130px}.op-progress input{accent-color:#087f82;width:100%;min-width:60px}.op-progress span{font:11px system-ui;white-space:nowrap}.op-timelapse-note{font-size:12px;color:#49655e;background:#f4f8f6;padding:8px 16px;border-top:1px solid #e3ebe7}
.op-nearby{position:absolute;right:2.5%;bottom:3%;pointer-events:auto;max-width:min(330px,88%)}.op-nearby.on-left{right:auto;left:2.5%}.nearby-toggle{display:flex;align-items:center;gap:7px;background:#fffffff2;border:1px solid #ffffff99;box-shadow:0 3px 20px #0002;color:#173e33;padding:9px 12px;border-radius:8px;cursor:pointer;font:600 12px system-ui}.nearby-toggle .icon{width:16px;height:16px}.nearby-panel{position:absolute;bottom:calc(100% + 8px);right:0;background:#fff;border-radius:12px;box-shadow:0 12px 35px #0003;width:min(330px,76vw);overflow:auto;max-height:230px}.on-left .nearby-panel{right:auto;left:0}.nearby-panel a{display:flex;align-items:center;gap:10px;color:#173e33;text-decoration:none;padding:10px;border-bottom:1px solid #e9efec;transition:background .15s}.nearby-panel a:hover{background:#edf5f0}.nearby-panel img{width:72px;height:48px;object-fit:cover;border-radius:6px}.nearby-panel a>span{flex:1;min-width:0}.nearby-panel strong{font-size:12px;display:block}.nearby-panel small{display:block;font-size:11px;color:#657e75;margin-top:4px}
.obise-player:fullscreen{width:100%;height:100%;border:0;border-radius:0;max-width:none;max-height:none;background:#102321}.obise-player:fullscreen .video-stage{flex:1;aspect-ratio:auto;min-height:0}.obise-player:fullscreen .op-logo img{max-height:18vh}
.local-viewer-page{margin:0;background:#f4f8f6;padding:0}.local-viewer-page .obise-player{border:0;border-radius:0;min-height:100dvh}.local-viewer-page .video-stage{flex:1;min-height:200px}
@media(max-width:600px){.obise-player{border-radius:12px}.op-banner{padding:9px 12px;gap:4px 12px}.op-banner strong{font-size:13px}.op-banner span{font-size:11px}.op-status{padding:5px 7px;font-size:9px}.op-controls{padding:5px;gap:2px;min-height:46px}.op-controls button{min-width:32px;min-height:34px;padding:6px}.op-controls .op-modes{padding-left:4px}.op-progress{order:4;flex-basis:100%;padding:0 8px}.op-message p{display:none}.op-message{gap:6px}.op-message-icon{display:none}.nearby-toggle{padding:7px;font-size:11px}.nearby-toggle>.icon:last-child{display:none}.op-nearby{max-width:85%}.nearby-panel{max-height:160px}.op-logo img{max-height:14vw}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

/* Keep all overlay graphics inside the decoded picture, including very wide panoramas. */
.op-logo{width:21%;height:22%;max-width:none;max-height:none}.op-logo img{width:100%;height:100%;max-height:100%;max-width:100%;object-position:right top}.op-logo.top-left img,.op-logo.bottom-left img{object-position:left center}.op-logo.bottom-right img{object-position:right bottom}.op-banner strong{max-width:100%;overflow-wrap:anywhere;min-width:0}.op-banner{font-family:var(--banner-font,system-ui)}
.obise-player>.nearby-panel{z-index:8;right:12px;bottom:calc(var(--op-controls-height,54px) + 12px);max-height:calc(100% - var(--op-controls-height,54px) - 24px);width:min(340px,calc(100% - 24px));border:1px solid #dbe6e0}.obise-player>.nearby-panel.align-left{left:12px;right:auto}

.nearby-panel-head{position:sticky;top:0;display:flex;align-items:center;justify-content:space-between;gap:8px;background:#f5f9f7;border-bottom:1px solid #dbe6e0;padding:7px 10px;z-index:1}.nearby-panel-head strong{font-size:11px}.nearby-panel-head button{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border:0;border-radius:5px;background:#e6efeb;color:#25483e;cursor:pointer}.nearby-panel-head button:focus-visible{outline:3px solid #087f82}

/* Fixed-camera image anchors follow .video-overlays, hence the actual picture, not black bars. */
.op-hotspots{position:absolute;inset:0;pointer-events:none;visibility:hidden}
.obise-player.playback-live:not(.playback-timelapse) .op-hotspots{visibility:visible}
.op-hotspot{position:absolute;display:flex;flex-direction:column;align-items:center;gap:4px;transform:translate(-50%,-10px);pointer-events:auto;text-decoration:none;color:#fff;text-align:center;min-width:32px;min-height:32px;z-index:2}
.op-hotspot i{display:block;width:20px;height:20px;border:3px solid #fff;border-radius:50%;background:#087f82;box-shadow:0 1px 8px #0009}
.op-hotspot span{max-width:150px;border-radius:5px;padding:3px 7px;background:#143c36df;font-size:11px;line-height:1.3;text-shadow:none;box-shadow:0 1px 8px #0002}
.op-hotspot:hover i,.op-hotspot:focus-visible i{background:#da773d;transform:scale(1.2)}
.op-hotspot:focus-visible{outline:3px solid #fff;outline-offset:4px;border-radius:5px}

.op-hotspot,.op-hotspot i{box-sizing:border-box}


/* v1.6.3 multilingual information banner + weather drawer */
.op-banner{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:18px;padding:10px clamp(14px,2.4vw,28px);min-height:70px}
.op-banner-main{min-width:0;display:grid;gap:4px}.op-banner-title,.op-banner-line{min-width:0;display:flex;align-items:center;gap:8px}.op-banner-title strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:clamp(15px,1.7vw,22px)}.op-banner-line span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:clamp(11px,1.15vw,15px)}.op-banner .icon{flex:0 0 17px;width:17px;height:17px;opacity:.76}.op-banner-datetime{display:flex;align-items:center;gap:9px;white-space:nowrap;padding-left:16px;border-left:1px solid color-mix(in srgb,var(--banner-text) 20%,transparent)}.op-banner-datetime>span{display:grid;text-align:right}.op-banner-datetime strong{font-size:clamp(16px,1.8vw,23px);line-height:1.05}.op-banner-datetime small{font-size:11px;opacity:.72;margin-top:3px}
.op-weather{position:absolute;right:2.5%;bottom:3%;z-index:8;pointer-events:auto;max-width:min(330px,88%)}.op-nearby+.op-weather{bottom:calc(3% + 46px)}
.weather-toggle{display:flex;align-items:center;gap:7px;background:#fffffff2;border:1px solid #ffffff99;box-shadow:0 3px 20px #0002;color:#173e33;padding:9px 12px;border-radius:8px;cursor:pointer;font:600 12px system-ui}.weather-toggle .icon{width:16px;height:16px}.weather-toggle .icon:last-child{width:16px}.weather-toggle:hover{background:#fff}.weather-toggle:focus-visible{outline:3px solid #1c8d9f;outline-offset:2px}
.weather-panel{position:absolute;bottom:calc(100% + 8px);right:0;background:#fff;color:#173e33;border:1px solid #dbe6e0;border-radius:12px;box-shadow:0 12px 35px #0003;width:min(330px,76vw);overflow:auto;max-height:280px}.weather-content{padding:16px}.weather-main{display:flex;align-items:baseline;gap:12px;margin-bottom:12px}.weather-temp{font-size:30px;font-weight:850;letter-spacing:-.04em}.weather-stats{display:grid;grid-template-columns:1fr 1fr;gap:7px;font-size:12px;color:#526b65;margin-bottom:12px}.weather-content small{display:block;color:#7b8f8a;font-size:10px}.weather-content a{color:inherit}.banner-options .check-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 14px}
@media(max-width:680px){.op-banner{grid-template-columns:1fr auto;gap:10px;padding:8px 12px;min-height:62px}.op-banner-line span{font-size:11px}.op-banner-datetime{padding-left:10px}.op-banner-datetime .icon{display:none}.op-weather{right:2.5%;bottom:3%}.op-nearby+.op-weather{bottom:calc(3% + 42px)}.weather-toggle{padding:7px;font-size:11px}.weather-toggle>.icon:last-child{display:none}.weather-stats{grid-template-columns:1fr}.banner-options .check-grid{grid-template-columns:1fr 1fr}}

/* v1.6.5a: keep the picture clean; context actions live in the information banner. */
.op-banner-side{display:flex;align-items:center;justify-content:flex-end;gap:12px;min-width:0}
.op-banner-tools{display:flex;align-items:center;justify-content:flex-end;gap:7px;flex-wrap:wrap}
.op-banner-tool{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:34px;padding:7px 10px;border:1px solid color-mix(in srgb,var(--banner-text) 18%,transparent);border-radius:8px;background:color-mix(in srgb,var(--banner-bg) 78%,#fff 22%);color:var(--banner-text);font:700 11px var(--banner-font,system-ui);cursor:pointer;box-shadow:0 2px 8px #0000000a;white-space:nowrap}
.op-banner-tool:hover{background:color-mix(in srgb,var(--banner-bg) 60%,#fff 40%)}
.op-banner-tool:focus-visible{outline:3px solid #168b96;outline-offset:2px}
.op-banner-tool .icon{width:16px;height:16px;opacity:.9}
.op-banner-tool .icon:last-child{width:14px;height:14px;opacity:.65}
.op-banner.tools-only{min-height:auto;grid-template-columns:1fr auto;padding-block:8px}
.op-flyout-panel{position:absolute!important;right:2.5%!important;left:auto!important;bottom:3%!important;z-index:10!important;pointer-events:auto!important;width:min(340px,88%)!important;max-height:min(320px,88%)!important;border:1px solid #dbe6e0;background:#fff;box-shadow:0 14px 38px #0004}
.weather-content{padding:14px}.weather-main{display:flex;align-items:center;gap:12px;margin-bottom:13px;padding-bottom:12px;border-bottom:1px solid #e7efec}.weather-condition-icon{display:flex;align-items:center;justify-content:center;width:52px;height:52px;flex:0 0 52px;border-radius:14px;background:#eff7f4;color:#087f82}.weather-condition-icon .weather-value-icon{width:30px;height:30px}.weather-current-text{display:grid;gap:1px}.weather-current-text strong{font-size:12px;color:#526b65}.weather-temp{font-size:29px;font-weight:850;letter-spacing:-.04em;color:#173e33}.weather-stats{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px}.weather-stat{display:flex;align-items:center;gap:8px;min-width:0;padding:8px;border:1px solid #e5eeea;border-radius:9px;background:#f8fbfa;color:#24483f}.weather-stat>.weather-value-icon{width:19px;height:19px;flex:0 0 19px;color:#087f82}.weather-stat>span{display:grid;min-width:0}.weather-stat small{font-size:9px;line-height:1.2;color:#70847e}.weather-stat strong{font-size:11px;line-height:1.3;white-space:nowrap}.weather-content>small{margin-top:3px}
@media(max-width:760px){.op-banner{grid-template-columns:minmax(0,1fr);gap:8px}.op-banner-side{justify-content:space-between;align-items:center;gap:8px}.op-banner-datetime{padding-left:0;border-left:0}.op-banner-tools{margin-left:auto}.op-banner-tool{padding:7px 8px}.op-banner-tool>span{display:none}.op-banner-tool .icon:last-child{display:none}.op-banner.tools-only .op-banner-main{display:none}.op-banner.tools-only{grid-template-columns:1fr}.op-banner.tools-only .op-banner-side{justify-content:flex-end}.weather-stats{grid-template-columns:1fr 1fr}.op-flyout-panel{right:10px!important;bottom:10px!important;width:min(330px,calc(100% - 20px))!important;max-height:calc(100% - 20px)!important}}

.op-flyout-panel a,.op-flyout-panel button{pointer-events:auto}

/* OBISE status artwork: original approved set, native localized text. */
.obise-player{--op-ink:#edf3fa;--op-accent:#29b7df;--op-line:#334253;background:#141c28;border-color:#344254;box-shadow:0 16px 50px #0003;color:var(--op-ink);font-family:Inter,'Segoe UI',system-ui,-apple-system,sans-serif}
.video-stage,.video-stage video{background:#0a101a}
.op-message{padding:0;background:#0a101a;color:#f7f9fc;isolation:isolate;gap:0}
.op-state-art{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:fill;z-index:-1;pointer-events:none}
.op-message>strong{position:absolute;top:76%;left:6%;right:6%;font-size:clamp(13px,2.25vw,29px);font-weight:650;line-height:1.2;letter-spacing:.025em;text-transform:uppercase;margin:0;text-wrap:balance}
.op-message>p{position:absolute;top:85%;left:10%;right:10%;max-width:none;font-size:clamp(11px,1.55vw,19px);line-height:1.4;color:#d4dce7;display:block;margin:0;text-wrap:balance}
.op-message button{position:absolute;right:2.5%;bottom:2.5%;background:#172536ef;border:1px solid #5d7b93;color:#f3f8ff;padding:6px 10px;font:600 11px 'Segoe UI',sans-serif;border-radius:7px;margin:0;z-index:1}
.op-message[data-status=loading] button{display:none}
.op-message:not([data-status=loading])>p{left:8%;right:8%;padding-bottom:26px}
.op-message-icon{display:none}
.op-state-brand{position:absolute;top:3%;left:3%;width:28%;height:29%;display:flex;align-items:center;justify-content:center;border-radius:10px;background:#16202df5;padding:10px;z-index:1}
.op-state-brand img{width:100%;height:100%;object-fit:contain}
.op-state-active .op-logo{visibility:hidden}
.op-state-active .op-status{background:#101926de;color:#d9e5f1;border:1px solid #405268;max-width:42%;font-size:clamp(8px,.95vw,11px)}
.op-status-spinner{display:none;position:absolute;left:50%;top:53%;transform:translate(-50%,-50%);width:clamp(44px,6.4vw,84px);height:clamp(44px,6.4vw,84px);align-items:center;justify-content:center}
.op-message[data-status=loading] .op-status-spinner{display:flex}
.op-status-spinner:after{content:'';width:100%;height:100%;box-sizing:border-box;border:clamp(3px,.45vw,6px) solid rgba(205,228,242,.18);border-top-color:#00b8ee;border-right-color:#67daf3;border-bottom-color:rgba(205,228,242,.30);border-left-color:transparent;border-radius:50%;animation:obise-status-spin 1s linear infinite}
@keyframes obise-status-spin{to{transform:rotate(360deg)}}
.op-controls{background:#182331;color:#e8f0f8;border-top-color:#344457}
.op-controls button{color:#d4e2ee}.op-controls button:hover,.op-controls button.selected{background:#28455a;color:#6ed8f5}
.op-progress input{accent-color:#22b6df}.op-modes{border-color:#3c4a5c}
.op-flyout-panel{background:#15202ff5;border-color:#41536a;color:#e5edf7;box-shadow:0 15px 40px #0005}
.nearby-panel-head{border-color:#3b4c60}.nearby-panel-head button{background:#23364a;color:#eaf4ff}
.nearby-panel a,.weather-content{color:#e7eff8}.nearby-panel a:hover{background:#223b50}.nearby-panel small,.weather-content small{color:#a8bdcf}
.weather-main,.weather-stats,.weather-stat{border-color:#3b4c60}.weather-stat,.weather-main strong,.weather-temp{color:#e7f1fb}.weather-condition-icon,.weather-stat svg{color:#48c5e5}
/* Customer-selected banner colors/fonts continue to come from their variables. */
.op-banner{background:var(--banner-bg,#eef4f1);color:var(--banner-text,#153731);font-family:var(--banner-font,system-ui)}
@media(max-width:600px){.op-message>strong{top:75%;font-size:clamp(12px,3.4vw,20px)}.op-message>p{top:84%;font-size:clamp(10px,2.6vw,14px);line-height:1.3;display:block}.op-message button{padding:4px 7px;font-size:9px}.op-state-brand{padding:5px;border-radius:6px}}
@media(prefers-reduced-motion:reduce){.op-status-spinner:after{animation:none}}

.op-custom-status>strong,.op-custom-status>p,.op-custom-status>.op-state-brand{display:none}.op-custom-status>.op-state-art{object-fit:contain}

/* Keep badges and retry away from the artwork's logo and status copy. */
.op-state-active .op-status{left:auto;right:2.5%;max-width:55%}
.op-message button{top:18%;bottom:auto}
@media(max-width:600px){.op-message button{top:28%;width:28px;height:28px;padding:5px}.op-message button span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.op-message button .icon{width:16px;height:16px}.op-message>p{left:7%;right:7%}}