* { box-sizing: border-box; }
html, body { width:100%; height:100%; margin:0; overflow:hidden; font-family:Arial,Helvetica,sans-serif; background:#080b10; }
#panorama { width:100%; height:100vh; background:#080b10; }

.tour-topbar { position:fixed; z-index:30; top:0; left:0; right:0; height:64px; display:flex; align-items:center; justify-content:flex-end; padding:0 18px; color:#fff; background:linear-gradient(to bottom,rgba(0,0,0,.72),rgba(0,0,0,0)); pointer-events:none; }
.tour-brand,.top-actions { pointer-events:auto; }
.tour-brand { display:flex; align-items:center; gap:9px; font-size:14px; font-weight:600; letter-spacing:.2px; text-shadow:0 1px 5px rgba(0,0,0,.7); }
.brand-dot { width:10px; height:10px; border-radius:50%; background:#fff; box-shadow:0 0 0 4px rgba(255,255,255,.18); }
.top-actions { display:flex; gap:8px; }
.tour-btn { width:38px; height:38px; border:1px solid rgba(255,255,255,.22); border-radius:50%; background:rgba(0,0,0,.42); color:#fff; cursor:pointer; font-size:18px; backdrop-filter:blur(8px); transition:.2s ease; }
.tour-btn:hover { background:rgba(255,255,255,.18); transform:scale(1.04); }

/* Full-width bottom Klapty-style scene rail */
.scene-strip-wrap { position:fixed; z-index:25; left:0; right:0; bottom:0; width:100%; display:flex; align-items:center; gap:0; padding:10px 42px 12px; background:linear-gradient(to top,rgba(0,0,0,.82),rgba(0,0,0,.34),transparent); }
.scene-strip { display:flex; gap:10px; width:100%; overflow-x:auto; padding:5px 4px 7px; scrollbar-width:none; scroll-behavior:smooth; justify-content: flex-start; }
.scene-strip::-webkit-scrollbar { display:none; }
.scene-strip { cursor: grab; }
.scene-strip.dragging { cursor: grabbing; user-select: none; }
.scene-card { position:relative; flex:0 0 132px; padding:0; border:2px solid transparent; border-radius:9px; overflow:hidden; background:rgba(12,15,20,.78); color:#fff; cursor:pointer; box-shadow:0 7px 22px rgba(0,0,0,.34); backdrop-filter:blur(8px); transition:.2s ease; }
.scene-card:hover { transform:translateY(-3px); }
.scene-card.active { border-color:#fff; transform:translateY(-4px); }
.scene-thumb { display:block; width:100%; height:72px; background:#1b2028; }
.scene-thumb img { display:block; width:100%; height:100%; object-fit:cover; }
.scene-title { display:block; height:31px; padding:7px 5px 5px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:10px; font-weight:600; text-align:center; }
.strip-arrow { position:absolute; z-index:2; flex:0 0 36px; width:36px; height:46px; border:1px solid rgba(255,255,255,.22); border-radius:9px; background:rgba(0,0,0,.55); color:#fff; cursor:pointer; font-size:27px; line-height:1; backdrop-filter:blur(8px); }
#scenePrev { left:8px; }
#sceneNext { right:8px; }
.strip-arrow:hover { background:rgba(255,255,255,.17); }

/* Large left/right scene navigation arrows */
.scene-side-arrow { position:fixed; z-index:22; top:50%; transform:translateY(-50%); width:52px; height:74px; border:1px solid rgba(255,255,255,.24); border-radius:14px; background:rgba(0,0,0,.38); color:#fff; cursor:pointer; font-size:48px; line-height:1; font-family:Arial,sans-serif; display:flex; align-items:center; justify-content:center; padding:0 0 5px; backdrop-filter:blur(8px); box-shadow:0 8px 28px rgba(0,0,0,.25); transition:.2s ease; }
.scene-side-arrow:hover { background:rgba(0,0,0,.62); transform:translateY(-50%) scale(1.04); }
.scene-side-prev { left:18px; }
.scene-side-next { right:18px; }

.info-panel { position:fixed; z-index:40; top:78px; right:18px; width:min(330px,calc(100vw - 36px)); padding:22px 20px; border:1px solid rgba(255,255,255,.16); border-radius:14px; background:rgba(10,13,18,.90); color:#fff; box-shadow:0 20px 55px rgba(0,0,0,.45); backdrop-filter:blur(14px); opacity:0; transform:translateY(-10px); pointer-events:none; transition:.22s ease; }
.info-panel.show { opacity:1; transform:translateY(0); pointer-events:auto; }
.info-panel h3 { margin:0 0 8px; font-size:17px; }
.info-panel p { margin:0; color:rgba(255,255,255,.78); font-size:13px; line-height:1.6; }
.close-info { position:absolute; right:10px; top:8px; border:0; background:transparent; color:#fff; font-size:25px; cursor:pointer; }

.tour-loader { position:fixed; z-index:100; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; background:#080b10; color:#fff; transition:opacity .45s ease,visibility .45s ease; }
.tour-loader.hidden { opacity:0; visibility:hidden; pointer-events:none; }
.loader-ring { width:38px; height:38px; border:3px solid rgba(255,255,255,.18); border-top-color:#fff; border-radius:50%; animation:spin .8s linear infinite; }
.loader-text { font-size:12px; opacity:.75; }
@keyframes spin { to { transform:rotate(360deg); } }
.tour-hint { position:fixed; z-index:10; left:50%; top:50%; transform:translate(-50%,-50%); padding:9px 14px; border-radius:999px; color:#fff; background:rgba(0,0,0,.5); backdrop-filter:blur(7px); font-size:12px; opacity:.9; transition:opacity 1s ease; pointer-events:none; }
.tour-hint.fade { opacity:0; }
.hint-icon { margin-right:5px; }
.pnlm-controls-container { filter:drop-shadow(0 3px 8px rgba(0,0,0,.35)); display:none;}
.pnlm-controls { border-radius:9px; overflow:hidden; opacity:.92; }

@media (max-width:900px) {
  .scene-strip { justify-content:flex-start; }
  .scene-card { flex-basis:116px; }
  .scene-thumb { height:64px; }
}
@media (max-width:700px) {
  .tour-topbar { height:55px; padding:0 11px; }
  .tour-brand { font-size:12px; }
  .tour-btn { width:34px; height:34px; font-size:16px; }
  .scene-strip-wrap { padding:8px 36px 9px; }
  .scene-card { flex-basis:92px; }
  .scene-thumb { height:52px; }
  .scene-title { height:27px; padding-top:6px; font-size:9px; }
  .strip-arrow { width:30px; height:40px; font-size:23px; }
  .scene-side-arrow { width:42px; height:58px; font-size:38px; border-radius:11px; }
  .scene-side-prev { left:8px; }
  .scene-side-next { right:8px; }
  .tour-hint { font-size:11px; }
}


/* ---------- Share modal ---------- */
body.share-open { overflow:hidden; }
.share-modal { position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; padding:20px; opacity:0; visibility:hidden; pointer-events:none; transition:.22s ease; }
.share-modal.show { opacity:1; visibility:visible; pointer-events:auto; }
.share-backdrop { position:absolute; inset:0; background:rgba(0,0,0,.7); backdrop-filter:blur(6px); }
.share-dialog { position:relative; z-index:1; width:min(540px,100%); max-height:calc(100vh - 40px); overflow:auto; padding:28px; border:1px solid rgba(255,255,255,.13); border-radius:20px; background:#10141b; color:#fff; box-shadow:0 28px 90px rgba(0,0,0,.55); transform:translateY(12px) scale(.98); transition:.22s ease; }
.share-modal.show .share-dialog { transform:none; }
.share-close { position:absolute; top:12px; right:14px; width:36px; height:36px; border:0; border-radius:50%; background:rgba(255,255,255,.08); color:#fff; font-size:25px; cursor:pointer; }
.share-heading { display:flex; align-items:center; gap:13px; padding-right:35px; }
.share-heading-icon { width:44px; height:44px; display:grid; place-items:center; border-radius:13px; background:rgba(255,255,255,.1); font-size:21px; }
.share-heading h3 { margin:0 0 3px; font-size:20px; }
.share-heading p { margin:0; color:rgba(255,255,255,.58); font-size:12px; }
.social-share-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:9px; margin:25px 0 18px; }
.social-share { min-height:76px; border:1px solid rgba(255,255,255,.09); border-radius:13px; background:rgba(255,255,255,.055); color:#fff; cursor:pointer; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px; transition:.18s ease; }
.social-share:hover { transform:translateY(-2px); background:rgba(255,255,255,.11); }
.social-share span { width:31px; height:31px; display:grid; place-items:center; border-radius:50%; background:rgba(255,255,255,.12); font-size:15px; font-weight:700; }
.social-share small { font-size:10px; color:rgba(255,255,255,.68); }
.share-link-row { display:flex; gap:8px; }
.share-link-row input { min-width:0; flex:1; height:43px; padding:0 12px; border:1px solid rgba(255,255,255,.12); border-radius:9px; outline:none; background:rgba(255,255,255,.06); color:rgba(255,255,255,.78); font-size:11px; }
.copy-link-btn,.download-qr-btn { height:43px; border:0; border-radius:9px; background:#fff; color:#111; padding:0 15px; font-size:11px; font-weight:700; cursor:pointer; white-space:nowrap; }
.copy-status { min-height:18px; padding-top:7px; color:rgba(255,255,255,.68); font-size:11px; text-align:right; }
.qr-section { display:flex; align-items:center; gap:18px; margin-top:8px; padding:18px; border:1px solid rgba(255,255,255,.1); border-radius:14px; background:rgba(255,255,255,.035); }
.qr-code { width:150px; height:150px; flex:0 0 150px; display:grid; place-items:center; background:#fff; padding:0; }
.qr-code img,.qr-code canvas { display:block; width:150px !important; height:150px !important; }
.qr-copy strong { display:block; margin-bottom:6px; font-size:13px; }
.qr-copy p { margin:0 0 13px; color:rgba(255,255,255,.58); font-size:11px; line-height:1.5; }
@media (max-width:620px) { .share-dialog { padding:22px 16px; border-radius:17px; } .social-share-grid { grid-template-columns:repeat(3,1fr); } .qr-section { align-items:flex-start; } }
@media (max-width:430px) { .qr-section { flex-direction:column; } .qr-code { align-self:center; } .share-link-row { flex-direction:column; } }