:root {
  --ink: #122735;
  --navy: #0a1822;
  --mist: #e7ebea;
  --gold: #c6a45d;
  --glass: rgba(10, 24, 34, .68);
  --marker: rgba(246, 249, 250, .96);
}
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: var(--navy); font-family: Inter, ui-sans-serif, system-ui, sans-serif; }
button, a { font: inherit; }
.client-only { display:none; }
.client-tour .editor-only,.preview-tour .editor-only { display:none !important; }
.client-tour .client-only,.preview-tour .client-only { display:block; }
#tour { position: fixed; inset: 0; background: #07131b; color: #fff; }
#pano { position: absolute; inset: 0; }
#pano canvas { display: block; width: 100%; height: 100%; cursor: grab; }
#pano canvas:active { cursor: grabbing; }
.hotspots { position: absolute; z-index: 6; inset: 0; overflow: hidden; pointer-events: none; }
.hotspot { position: absolute; top: 0; left: 0; width: 132px; height: 90px; padding: 0; border: 0; color: #fff; background: transparent; filter: drop-shadow(0 5px 8px rgba(0,0,0,.78)); cursor: pointer; pointer-events: auto; transform-origin: center; transition: filter .16s; will-change:transform; backface-visibility:hidden; -webkit-backface-visibility:hidden; }
.hotspot::before { content:''; position:absolute; z-index:0; left:50%; top:50%; width:70px; height:70px; border:2px solid var(--marker); border-radius:50%; background:rgba(5,18,26,.2); transform:translate(-50%,-50%); box-shadow:0 0 0 1px rgba(5,18,26,.5),0 4px 14px rgba(0,0,0,.38); backdrop-filter:blur(1.5px); }
.hotspot:hover, .hotspot:focus-visible { filter: drop-shadow(0 7px 11px rgba(0,0,0,.92)) brightness(1.12); outline: none; }
.hotspot-logo { display:block; position:relative; z-index:1; width:100%; height:100%; object-fit:contain; }
.hotspot-label { position: absolute; left: 50%; bottom: 74px; min-width: 128px; padding: 7px 10px; border: 1px solid rgba(255,255,255,.35); border-radius: 7px; text-align: center; white-space: nowrap; background: rgba(8,23,33,.88); opacity: 0; transform: translate(-50%,6px); transition: .16s; pointer-events: none; }
.hotspot:hover .hotspot-label, .hotspot:focus-visible .hotspot-label { opacity: 1; transform: translate(-50%,0); }
.hotspot-label strong { display: block; font-size: 11px; }
.hotspot-label small { display: block; margin-top: 2px; color: var(--gold); font-size: 8px; letter-spacing: .12em; text-transform: uppercase; }
.hotspot-pulse { position: absolute; z-index:0; left: 50%; top: 50%; width: 70px; height: 70px; border: 2px solid var(--marker); border-radius: 50%; animation: hotspot-pulse 2.2s ease-out infinite; pointer-events: none; transform:translate3d(-50%,-50%,0) scale(.72); transform-origin:center; will-change:transform,opacity; contain:layout paint; backface-visibility:hidden; -webkit-backface-visibility:hidden; }
@keyframes hotspot-pulse { 0% { opacity: .8; transform: translate3d(-50%,-50%,0) scale(.72); } 75%, 100% { opacity: 0; transform: translate3d(-50%,-50%,0) scale(1.55); } }
.scrim { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(5,15,22,.62), transparent 22%, transparent 67%, rgba(5,15,22,.82)); }
.topbar { position: absolute; z-index: 5; top: 0; left: 0; right: 0; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 20px; transition: opacity .2s; }
.brand { display: flex; align-items: center; gap: 14px; min-width: 0; }
.brand-lockup { width:auto; height:64px; display:grid; grid-template-columns:54px max-content; align-items:center; gap:8px; padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; filter:drop-shadow(0 3px 7px rgba(0,0,0,.82)); }
.brand-mark { width:54px; height:54px; object-fit:contain; }
.brand-wordmark { min-width:0; color:#c8cacf; font-family:Arial,Helvetica,sans-serif; font-weight:400; line-height:.92; text-transform:uppercase; white-space:nowrap; text-shadow:0 2px 5px rgba(0,0,0,.96); }
.brand-captains { display:block; font-size:20px; letter-spacing:.015em; }
.brand-view-line { display:flex; align-items:baseline; gap:6px; margin-top:3px; }
.brand-view,.brand-360 { font-size:20px; letter-spacing:.015em; }
.brand-360 { color:#fff; font-weight:700; }
.vessel { padding-left: 14px; border-left: 1px solid rgba(255,255,255,.3); text-shadow: 0 2px 8px rgba(0,0,0,.7); }
.vessel strong { display: block; font-family: Georgia, serif; font-size: clamp(16px, 2vw, 23px); font-weight: 500; }
.vessel span { display: block; margin-top: 4px; color: rgba(255,255,255,.7); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; }
.actions { display: flex; gap: 8px; }
.edit-tour-btn { min-height:42px; padding:0 13px; border:1px solid rgba(198,164,93,.8); border-radius:999px; color:#fff; background:rgba(8,23,33,.78); font-size:11px; font-weight:750; cursor:pointer; }
.icon-btn { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.25); border-radius: 999px; color: #fff; background: var(--glass); backdrop-filter: blur(8px); cursor: pointer; }
.icon-btn:hover { border-color: var(--gold); background: rgba(10,24,34,.86); }
.scene-card { position: absolute; z-index: 4; left: 20px; bottom: 154px; display: flex; align-items: center; gap: 10px; padding: 9px 13px 9px 10px; border-radius: 999px; background: var(--glass); border: 1px solid rgba(255,255,255,.2); backdrop-filter: blur(8px); transition: opacity .2s; }
.scene-dot { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--mist); color: var(--ink); font-family: Georgia, serif; font-size: 11px; }
.scene-card strong { display: block; font-size: 12px; }
.scene-card span { display: block; margin-top: 2px; color: rgba(255,255,255,.65); font-size: 9px; letter-spacing: .13em; text-transform: uppercase; }
.transition { position: absolute; z-index: 4; bottom: 156px; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; transition: opacity .2s; }
.transition button { min-width: 118px; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 14px; border: 1px solid rgba(255,255,255,.26); border-radius: 999px; color: #fff; background: var(--glass); backdrop-filter: blur(8px); cursor: pointer; }
.transition button:hover { color: var(--navy); border-color: var(--gold); background: var(--gold); }
.star { width: 22px; height: 22px; display: inline-grid; place-items: center; font-size: 19px; line-height: 1; transform: rotate(45deg); }
.transition button:last-child .star { transform: rotate(-45deg); }
.reel { position: absolute; z-index: 4; left: 0; right: 0; bottom: 0; display: flex; gap: 10px; padding: 12px 18px 16px; overflow-x: auto; background: linear-gradient(180deg, transparent, rgba(5,15,22,.88) 24%); scrollbar-width: thin; transition: transform .25s, opacity .2s; }
.reel button { position: relative; flex: 0 0 170px; height: 96px; padding: 0; overflow: hidden; border: 2px solid transparent; border-radius: 10px; background: #13242f; cursor: pointer; }
.reel button.active { border-color: var(--gold); }
.reel img { width: 100%; height: 100%; object-fit: cover; }
.reel .caption { position: absolute; inset: auto 0 0; padding: 18px 9px 7px; color: #fff; text-align: left; font-size: 10px; font-weight: 650; background: linear-gradient(transparent, rgba(5,15,22,.92)); }
.loading { position: absolute; z-index: 3; inset: 0; display: grid; place-items: center; color: rgba(255,255,255,.7); background: var(--navy); letter-spacing: .15em; text-transform: uppercase; font-size: 11px; transition: opacity .35s; pointer-events: none; }
.loading.ready { opacity: 0; }
.toast { position: absolute; z-index: 10; top: 76px; right: 20px; padding: 10px 14px; border-radius: 8px; color: var(--ink); background: var(--mist); opacity: 0; transform: translateY(-8px); transition: .2s; pointer-events: none; font-size: 12px; }
.toast.show { opacity: 1; transform: translateY(0); }
.pin-editor { position:absolute; z-index:9; top:74px; right:20px; width:min(340px,calc(100vw - 40px)); max-height:calc(100vh - 210px); padding:16px; overflow:auto; border:1px solid rgba(198,164,93,.65); border-radius:12px; color:#fff; background:rgba(5,18,26,.96); box-shadow:0 18px 55px rgba(0,0,0,.48); backdrop-filter:blur(12px); }
.pin-editor[hidden] { display:none; }
.pin-editor-head,.pin-list-head,.editor-pin,.editor-actions { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.pin-editor-head span { display:block; margin-top:3px; color:var(--gold); font-size:10px; text-transform:uppercase; letter-spacing:.08em; }
.pin-editor-head button { border:0; color:#fff; background:transparent; font-size:25px; cursor:pointer; }
.pin-editor p { margin:13px 0; color:#c4d0d6; font-size:11px; line-height:1.5; }
.editor-shortcuts { position:sticky; z-index:2; top:-16px; display:grid; grid-template-columns:1fr 1fr; gap:7px; margin:0 -4px 13px; padding:10px 4px; background:rgba(5,18,26,.98); }
.editor-shortcuts button { padding:9px 7px; border:1px solid rgba(255,255,255,.22); border-radius:7px; color:#fff; background:#102631; font-size:10px; font-weight:750; cursor:pointer; }
.editor-shortcuts button.active,.editor-shortcuts button:hover { border-color:var(--gold); color:#071219; background:var(--gold); }
#navigation-editor-section,.poi-editor { scroll-margin-top:52px; }
.start-view-control { display:flex; align-items:center; justify-content:space-between; gap:8px; margin:0 0 13px; padding:10px; border:1px solid rgba(198,164,93,.35); border-radius:8px; background:rgba(198,164,93,.08); }
.start-view-control strong,.start-view-control span { display:block; font-size:10px; }
.start-view-control span { margin-top:3px; color:#9fb0b8; font-size:9px; }
.start-view-control button { padding:7px 9px; border:1px solid var(--gold); border-radius:6px; color:#071219; background:var(--gold); font-size:9px; font-weight:800; cursor:pointer; }
.pin-editor label { display:grid; gap:6px; color:#b9c7ce; font-size:10px; text-transform:uppercase; letter-spacing:.08em; }
.pin-editor select,.place-pin,.editor-actions button { width:100%; padding:10px; border:1px solid rgba(255,255,255,.2); border-radius:7px; color:#fff; background:#102631; }
.pin-editor input,.pin-editor textarea { width:100%; padding:9px; border:1px solid rgba(255,255,255,.2); border-radius:7px; color:#fff; background:#102631; resize:vertical; }
.poi-editor { margin-top:5px; }
.poi-editor label { margin-top:8px; }
.poi-file-label input { padding:6px; font-size:9px; }
.choose-poi-image { width:100%; margin-top:10px; padding:9px; border:1px solid var(--gold); border-radius:7px; color:#fff; background:#102631; font-size:10px; font-weight:750; cursor:pointer; }
.poi-selected-image { margin-top:6px; color:#9fb0b8; font-size:9px; }
.poi-media-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; max-height:310px; margin-top:8px; padding:7px; overflow:auto; border:1px solid rgba(255,255,255,.12); border-radius:8px; background:#07151d; }
.poi-media-grid[hidden] { display:none; }
.poi-media-tile { position:relative; min-width:0; }
.poi-media-choice { position:relative; width:100%; height:82px; padding:0; overflow:hidden; border:2px solid transparent; border-radius:7px; background:#102631; cursor:pointer; }
.poi-media-choice img { width:100%; height:100%; object-fit:cover; }
.poi-media-choice span { position:absolute; inset:auto 0 0; padding:12px 5px 4px; overflow:hidden; color:#fff; background:linear-gradient(transparent,rgba(3,12,18,.9)); font-size:8px; text-overflow:ellipsis; white-space:nowrap; }
.poi-media-choice.selected { border-color:var(--gold); }
.poi-media-expand { position:absolute; z-index:2; top:5px; right:5px; width:27px; height:27px; padding:0; border:1px solid rgba(255,255,255,.7); border-radius:50%; color:#fff; background:rgba(5,18,26,.88); cursor:zoom-in; }
.poi-media-preview { position:absolute; z-index:20; inset:0; display:grid; place-items:center; padding:28px; background:rgba(2,9,14,.9); backdrop-filter:blur(7px); }
.poi-media-preview[hidden] { display:none; }
.poi-media-preview img { display:block; max-width:min(1100px,94vw); max-height:88vh; object-fit:contain; border:1px solid rgba(255,255,255,.28); border-radius:12px; background:#071219; box-shadow:0 24px 80px rgba(0,0,0,.7); }
.poi-media-preview button { position:absolute; top:22px; right:22px; width:42px; height:42px; border:1px solid rgba(255,255,255,.65); border-radius:50%; color:#fff; background:rgba(5,18,26,.9); font-size:28px; cursor:pointer; }
.hotspot.poi-hotspot { display:grid; place-items:center; width:58px; min-width:58px; max-width:58px; height:58px; min-height:58px; max-height:58px; aspect-ratio:1 / 1; border:2px solid var(--marker); border-radius:50%; color:#fff; background:rgba(5,18,26,.2); box-shadow:0 0 0 1px rgba(5,18,26,.5),0 5px 16px rgba(0,0,0,.58); backdrop-filter:blur(1.5px); }
.hotspot[hidden] { display:block !important; visibility:hidden; pointer-events:none; }
.poi-hotspot::before { display:none; }
.poi-hotspot.poi-photo,.poi-hotspot.poi-info { background:rgba(5,18,26,.2); }
.poi-icon { position:relative; z-index:2; width:27px; height:27px; fill:currentColor; }
.poi-info-glyph { position:relative; z-index:2; font:800 28px/1 Georgia,serif; transform:translateY(-1px); }
.poi-pulse { position:absolute; z-index:0; left:50%; top:50%; width:58px; height:58px; border:2px solid var(--marker); border-radius:50%; color:#fff; animation:hotspot-pulse 2.4s ease-out infinite; pointer-events:none; transform:translate3d(-50%,-50%,0) scale(.72); transform-origin:center; will-change:transform,opacity; contain:layout paint; backface-visibility:hidden; -webkit-backface-visibility:hidden; }
.poi-hotspot:hover,.poi-hotspot:focus-visible { background:rgba(5,18,26,.52); filter:none; transform-origin:center; }
.poi-modal { position:absolute; z-index:14; inset:0; display:grid; place-items:center; padding:12px; background:rgba(3,12,18,.82); backdrop-filter:blur(7px); }
.poi-modal[hidden] { display:none; }
.poi-card { position:relative; width:min(1240px,calc(100vw - 24px)); height:min(900px,calc(100vh - 24px)); height:min(900px,calc(100dvh - 24px)); max-height:calc(100vh - 24px); max-height:calc(100dvh - 24px); display:flex; flex-direction:column; overflow:hidden; border:1px solid rgba(198,164,93,.55); border-radius:14px; color:#fff; background:#0a1d28; box-shadow:0 25px 80px rgba(0,0,0,.72); }
.poi-card.portrait-photo { width:min(760px,calc(100vw - 24px)); }
.poi-gallery { position:relative; flex:1 1 auto; min-height:0; overflow:hidden; background:#050d12; }
.poi-image-stage { position:absolute; inset:0; display:grid; place-items:center; overflow:hidden; touch-action:none; }
.poi-card img { position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:contain; background:#050d12; cursor:zoom-in; user-select:none; -webkit-user-drag:none; transform-origin:center; will-change:transform; }
.poi-card img.is-zoomed { cursor:grab; }
.poi-card img.is-dragging { cursor:grabbing; }
.poi-gallery-nav { position:absolute; z-index:2; top:50%; width:42px; height:42px; border:1px solid rgba(255,255,255,.55); border-radius:50%; color:#fff; background:rgba(5,18,26,.82); transform:translateY(-50%); font-size:30px; line-height:1; cursor:pointer; }
.poi-gallery-nav.previous { left:12px; }
.poi-gallery-nav.next { right:12px; }
.poi-gallery-counter { position:absolute; right:12px; bottom:10px; padding:5px 8px; border-radius:999px; color:#fff; background:rgba(5,18,26,.82); font-size:10px; }
.poi-zoom-controls { position:absolute; z-index:3; left:12px; bottom:10px; display:flex; align-items:center; gap:4px; padding:4px; border:1px solid rgba(255,255,255,.3); border-radius:999px; background:rgba(5,18,26,.84); }
.poi-zoom-controls button { width:34px; height:34px; display:grid; place-items:center; padding:0; border:0; border-radius:50%; color:#fff; background:transparent; font-size:20px; cursor:pointer; }
.poi-zoom-controls button:hover,.poi-zoom-controls button:focus-visible { color:#071219; background:#fff; outline:none; }
.poi-zoom-controls span { width:48px; text-align:center; color:#fff; font-size:10px; font-variant-numeric:tabular-nums; }
.poi-card-copy { flex:0 0 auto; max-height:45%; overflow-y:auto; padding:16px 20px 18px; }
.poi-card h2 { margin:0 0 8px; font:500 27px/1.1 Georgia,serif; }
.poi-card p { margin:0; color:#c7d3d8; font-size:13px; line-height:1.6; white-space:pre-wrap; }
.poi-card-close { position:absolute; z-index:2; top:10px; right:10px; width:34px; height:34px; border:1px solid rgba(255,255,255,.5); border-radius:50%; color:#fff; background:rgba(5,18,26,.85); font-size:22px; cursor:pointer; }
.place-pin { margin-top:9px; border-color:var(--gold); color:#071219; background:var(--gold); font-weight:800; cursor:pointer; }
.place-pin.armed { color:#fff; background:#9a452f; }
.pin-list-head { margin:16px 0 7px; font-size:11px; }
.pin-list-head span { color:var(--gold); }
.editor-pin { padding:8px 0; border-top:1px solid rgba(255,255,255,.1); font-size:11px; }
.editor-pin small { display:block; margin-top:2px; color:#9fb0b8; }
.editor-pin button { padding:5px 8px; border:1px solid rgba(255,120,100,.45); border-radius:5px; color:#ffc5bb; background:transparent; cursor:pointer; }
.scene-order-head { display:flex; align-items:flex-end; justify-content:space-between; gap:8px; margin:18px 0 7px; padding-top:12px; border-top:1px solid rgba(198,164,93,.35); font-size:11px; }
.scene-order-head span { color:#9fb0b8; font-size:9px; }
.scene-order-row { display:grid; grid-template-columns:24px 1fr 28px 28px; align-items:center; gap:5px; padding:5px 0; border-top:1px solid rgba(255,255,255,.08); font-size:10px; }
.scene-order-row.active { color:var(--gold); }
.scene-order-row button { width:28px; height:26px; padding:0; border:1px solid rgba(255,255,255,.18); border-radius:5px; color:#fff; background:#102631; cursor:pointer; }
.scene-order-row button:disabled { opacity:.28; cursor:default; }
.scene-order-row input { min-width:0; padding:6px 7px; border:1px solid transparent; background:transparent; font-size:10px; }
.scene-order-row input:hover,.scene-order-row input:focus { border-color:rgba(198,164,93,.55); background:#102631; outline:none; }
.editor-actions { margin-top:14px; }
.editor-actions button { cursor:pointer; font-size:10px; }
.editor-actions #preview-client { border-color:rgba(198,164,93,.8); background:#3e351f; }
.editor-actions #export-pins { border-color:#6fd3ad; background:#18533e; }
.pin-placement-mode canvas { cursor:crosshair!important; }
.hidden-controls .topbar, .hidden-controls .scene-card, .hidden-controls .transition, .hidden-controls .hotspots { opacity: 0; pointer-events: none; }
.hidden-controls .reel { opacity: 0; transform: translateY(100%); pointer-events: none; }
.embed-tour #edit-tour { display:none; }
/* Inside a listing page the page already shows the vessel name, so the landing keeps only the label and the
   Enter button; the full title pushed the button under the scene controls in a 600px frame. */
.embed-tour .exterior-copy h1, .embed-tour .exterior-copy p { display:none; }
.embed-tour .exterior-copy { top: 42%; }
.embed-tour .exterior-copy .enter-btn { margin-top: 16px; }
/* The scene strip still scrolls sideways inside a listing page, without a visible scrollbar under the frame. */
.embed-tour .reel { scrollbar-width: none; }
.embed-tour .reel::-webkit-scrollbar { display: none; }
.exterior { position: absolute; z-index: 2; inset: 0; display: none; background: #0a1822 center/cover no-repeat; }
.exterior.active { display: block; }
.exterior::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5,15,22,.58), transparent 65%); }
.exterior-copy { position: absolute; z-index: 2; left: clamp(24px, 7vw, 110px); top: 50%; transform: translateY(-50%); width: min(540px, 80vw); }
.exterior-copy small { color: var(--gold); letter-spacing: .17em; text-transform: uppercase; }
.exterior-copy h1 { margin: 12px 0 10px; font: 500 clamp(35px, 6vw, 74px)/.98 Georgia, serif; }
.exterior-copy p { max-width: 440px; color: rgba(255,255,255,.75); line-height: 1.55; }
.enter-btn { margin-top: 16px; padding: 12px 18px; border: 0; border-radius: 999px; color: var(--navy); background: var(--gold); font-weight: 750; cursor: pointer; }
@media (max-width: 760px) {
  .topbar { padding: 12px; }
  .brand-lockup { width:auto; height:52px; grid-template-columns:44px max-content; gap:6px; padding:0; }
  .brand-mark { width:44px; height:44px; }
  .brand-captains,.brand-view,.brand-360 { font-size:16px; }
  .vessel { display: none; }
  .actions .optional { display: none; }
  .scene-card { left: 12px; bottom: 122px; }
  .transition { bottom: 124px; right: 12px; left: auto; transform: none; }
  .transition button { flex:0 0 44px; min-width:44px; width:44px; max-width:44px; height:44px; min-height:44px; max-height:44px; aspect-ratio:1 / 1; padding:0; border-radius:50%; }
  .transition button span:not(.star) { display: none; }
  .reel { padding: 10px 10px 12px; gap: 7px; }
  .reel button { flex-basis: 124px; height: 74px; }
  .hotspot { width: 112px; height: 78px; }
  .hotspot.poi-hotspot { width:58px; min-width:58px; max-width:58px; height:58px; min-height:58px; max-height:58px; }
  .hotspot-label { bottom: 73px; }
  .edit-tour-btn { min-height:38px; padding:0 9px; }
  .pin-editor { top:62px; right:10px; width:calc(100vw - 20px); max-height:calc(100vh - 180px); }
  .poi-modal { padding:max(6px,env(safe-area-inset-top)) 6px max(6px,env(safe-area-inset-bottom)); }
  .poi-card { width:calc(100vw - 12px); height:100%; max-height:100%; border-radius:10px; }
  .poi-card.portrait-photo { width:calc(100vw - 12px); }
  .poi-card-copy { padding:12px 14px 14px; }
  .poi-card h2 { font-size:22px; }
  .poi-gallery-nav { width:38px; height:38px; }
  .poi-zoom-controls { left:8px; bottom:8px; }
  .poi-gallery-counter { right:8px; bottom:8px; }
}
@media (hover:none) and (pointer:coarse) {
  .hotspot { filter:none; }
  .hotspot::before,.hotspot.poi-hotspot { -webkit-backdrop-filter:none; backdrop-filter:none; }
}
@media (prefers-reduced-motion:reduce) {
  .hotspot-pulse,.poi-pulse { animation:none; opacity:.34; transform:translate3d(-50%,-50%,0) scale(1); }
}

.poi-photo-status { position:relative; z-index:1; padding:24px; text-align:center; color:#fff; }
.poi-photo-status[hidden], .poi-zoom-controls[hidden] { display:none; }