/**
 * Project: VR360 Tour Manager
 * Version: 1.0
 * Release: Final
 * Owner: Martín Lico Lorente
 * Contact: contacto@m2l.info
 * Created: 2026-05-01
 * Last reviewed: 2026-06-15
 *
 * Purpose:
 * Visita virtual 360º.
 *
 * License:
 * Distribución con autorización.
 *
 * Notes:
 *
 * Third-party:
 * Uses Marzipano v0.10.2 as the 360º viewer engine.
 */
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;font-family:var(--vr-font-family,Arial,Helvetica,sans-serif);background:#111;color:#222}body.viewer-page{overflow:hidden}.pano{position:fixed;inset:0;background:#000}.topbar{display:none;position:fixed;left:18px;top:18px;z-index:20;background:rgba(0,0,0,.68);color:#fff;padding:12px 16px;border-radius:12px;box-shadow:0 8px 30px rgba(0,0,0,.35);max-width:360px}.topbar.has-group-title{display:table}.topbar[hidden]{display:none!important}.topbar h1{margin:0;font-size:13px;font-weight:700;line-height:1.2}.topbar p{margin:4px 0 0;font-size:13px;opacity:.85}.scene-menu{position:fixed;left:18px;bottom:18px;z-index:20;display:flex;gap:8px;flex-wrap:wrap}.scene-menu button,.btn{border:0;border-radius:10px;padding:9px 12px;background:#222;color:#fff;cursor:pointer;font-size:13px}.scene-menu button.active,.btn.primary{background:#2563eb}.hotspot-img{width:auto;height:auto;display:block;object-fit:contain;cursor:pointer;user-select:none;transform:translateZ(0);will-change:transform}.modal{position:fixed;inset:0;z-index:1000;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.72);padding:28px}.modal.active{display:flex}.modal-card{position:relative;width:min(980px,94vw);max-height:88vh;background:#fff;border-radius:16px;box-shadow:0 20px 80px rgba(0,0,0,.55);overflow:hidden}.modal-close{position:absolute;right:12px;top:12px;z-index:5;width:38px;height:38px;border:0;border-radius:50%;background:rgba(0,0,0,.75);color:#fff;font-size:26px;line-height:38px;cursor:pointer}.modal-body{max-height:88vh;overflow:auto}.modal-text{padding:34px}.modal-text h2{margin:0 0 12px;font-size:24px}.modal-text p{font-size:16px;line-height:1.6}.modal-img{width:100%;max-height:78vh;object-fit:contain;display:block;background:#111}.modal-iframe{display:block;width:100%;height:min(560px,75vh);border:0;background:#111}.error-box{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:999;background:#fff;color:#111;padding:22px;border-radius:12px;max-width:520px;box-shadow:0 20px 60px rgba(0,0,0,.45)}
.fullscreen-btn{position:fixed;right:18px;top:18px;z-index:30;display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:25px;width:46px;height:46px;padding:0;background:rgba(0,0,0,.68);color:#fff;box-shadow:0 8px 30px rgba(0,0,0,.35);cursor:pointer;font-size:13px;font-weight:bold;line-height:1;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.fullscreen-btn:not(.active),.fullscreen-btn.touch-reset,.fullscreen-btn[data-fullscreen-state="inactive"]{background:rgba(0,0,0,.5)!important}.fullscreen-btn.active,.fullscreen-btn[data-fullscreen-state="active"],body.is-fullscreen .fullscreen-btn{background:#2563eb!important}@media(hover:hover) and (pointer:fine){.fullscreen-btn:hover{background:#2563eb}}@media(hover:none),(pointer:coarse){.fullscreen-btn:hover,.fullscreen-btn:focus,.fullscreen-btn:active{background:rgba(0,0,0,.68)!important}.fullscreen-btn.active,.fullscreen-btn[data-fullscreen-state="active"],body.is-fullscreen .fullscreen-btn{background:#2563eb!important}.fullscreen-btn.touch-reset,.fullscreen-btn[data-fullscreen-state="inactive"]{background:rgba(0,0,0,.68)!important}}.fullscreen-icon{font-size:20px;line-height:1}@media(max-width:640px){.fullscreen-btn{right:12px;top:12px;width:44px;height:44px;padding:0}.topbar{left:12px;right:66px;top:12px;max-width:none}.scene-menu{left:12px;right:12px;bottom:12px}}
/* Admin */
body.admin-page{height:100vh;overflow:hidden;background:#f3f4f6}.admin-layout{display:grid;grid-template-columns:minmax(0,1fr) 430px;height:100vh}.admin-view{position:relative;background:#000}.admin-view .pano{position:absolute;inset:0}.admin-panel{background:#fff;border-left:1px solid #d7d7d7;overflow:auto;padding:18px;box-shadow:-8px 0 26px rgba(0,0,0,.12);z-index:50}.admin-panel h1{font-size:20px;margin:0 0 12px}.admin-panel h2{font-size:15px;margin:22px 0 10px;padding-top:14px;border-top:1px solid #e4e4e4}.field{margin:9px 0}.field label{display:block;font-size:12px;font-weight:bold;margin:0 0 4px;color:#555}.field input,.field textarea,.field select{width:100%;border:1px solid #cfcfcf;border-radius:8px;padding:9px;font-size:13px;background:#fff;color:#111}.field textarea{min-height:70px;resize:vertical}.row{display:grid;grid-template-columns:1fr 1fr;gap:8px}.actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}.btn.secondary{background:#555}.btn.danger{background:#b33636}.btn.warning{background:#d18800}.note{font-size:12px;line-height:1.45;background:#f2f7ef;border-left:4px solid #2563eb;padding:10px;border-radius:8px;margin:12px 0}.hotspot-list{display:flex;flex-direction:column;gap:8px}.hotspot-item{border:1px solid #ddd;border-radius:10px;padding:10px;background:#fafafa}.hotspot-item strong{font-size:13px}.hotspot-item small{display:block;color:#666;margin-top:3px}.admin-status{font-size:12px;margin-top:8px;color:#27751b}.placing-banner{position:absolute;left:18px;top:18px;z-index:30;background:#2563eb;color:#fff;padding:12px 16px;border-radius:12px;font-weight:bold;display:none}.placing-banner.active{display:block}.coord-box{font-size:12px;background:#f7f7f7;border:1px solid #ddd;padding:8px;border-radius:8px}.admin-scene-title{position:absolute;left:18px;bottom:18px;z-index:25;background:rgba(0,0,0,.7);color:#fff;padding:10px 14px;border-radius:10px}.admin-hotspot-selected{filter:drop-shadow(0 0 8px #2563eb)}
.admin-top-actions{margin:-6px 0 10px}.admin-top-actions a{font-size:12px;color:#27751b;text-decoration:none;font-weight:bold}.admin-top-actions a:hover{text-decoration:underline}
.upload-field small{display:block;margin-top:5px;font-size:11px;color:#666;line-height:1.35}.upload-field input[type=file]{padding:7px;background:#f9fafb}.upload-field strong{color:#222}


.mobile-loader{position:fixed;inset:0;z-index:45;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.28);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .16s ease,visibility 0s linear .16s;backdrop-filter:blur(1px);-webkit-backdrop-filter:blur(1px)}body.tour-loading .mobile-loader{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .16s ease}.mobile-loader-card{width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.58);box-shadow:0 8px 24px rgba(0,0,0,.24)}.mobile-loader-spinner{width:34px;height:34px;border:3px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:mobileLoaderSpin .8s linear infinite}@keyframes mobileLoaderSpin{to{transform:rotate(360deg)}}

/* Admin reorganizado */
.admin-header{position:sticky;top:0;background:#fff;z-index:60;margin:-18px -18px 0;padding:18px 18px 12px;border-bottom:1px solid #e5e7eb}.admin-header h1{margin-bottom:4px}.admin-toolbar{position:sticky;top:78px;z-index:55;display:flex;gap:8px;flex-wrap:wrap;background:#fff;margin:0 -18px 14px;padding:12px 18px;border-bottom:1px solid #e5e7eb;box-shadow:0 8px 18px rgba(0,0,0,.05)}.admin-help{margin-top:0}.admin-section{border:1px solid #e5e7eb;border-radius:14px;background:#fff;margin:12px 0;overflow:hidden}.admin-section summary{list-style:none;cursor:pointer;padding:14px 16px;background:#f9fafb;display:flex;align-items:flex-start;justify-content:space-between;gap:12px;border-bottom:1px solid transparent}.admin-section summary::-webkit-details-marker{display:none}.admin-section[open] summary{border-bottom-color:#e5e7eb}.admin-section summary span{display:block;font-size:15px;font-weight:800;color:#111827}.admin-section summary small{display:block;font-size:11px;line-height:1.3;color:#6b7280;text-align:right;max-width:210px}.section-body{padding:14px 16px 16px}.admin-section summary:after{content:'+';font-weight:900;color:#2563eb;margin-left:4px}.admin-section[open] summary:after{content:'−'}.library-grid{display:grid;grid-template-columns:1fr;gap:12px}.library-card{border:1px solid #e5e7eb;border-radius:12px;padding:12px;background:#fcfcfd}.library-card h3{margin:0 0 8px;font-size:13px;color:#111827}.media-paths{background:#f9fafb;border:1px solid #e5e7eb;border-radius:12px;padding:10px}.compact-actions{margin-top:7px}.compact-actions .btn{font-size:12px;padding:8px 10px}.sticky-actions{padding-top:2px}.admin-tip{font-size:11px;line-height:1.45;color:#6b7280;background:#f9fafb;border-radius:10px;padding:9px 10px;margin:10px 0 0}.admin-tip code{background:#eef2f7;border-radius:4px;padding:1px 4px;color:#111827}.admin-panel .btn{border-radius:9px}.admin-status{min-height:16px;line-height:1.35}.admin-toolbar + #importFile + .admin-help{margin-top:0}
@media (min-width:1200px){.admin-layout{grid-template-columns:minmax(0,1fr) 500px}.library-grid{grid-template-columns:1fr 1fr}.admin-section summary small{max-width:240px}}
@media (max-width:900px){body.admin-page{height:auto;overflow:auto}.admin-layout{display:block;height:auto}.admin-view{height:58vh}.admin-panel{border-left:0;box-shadow:none}.admin-toolbar{top:72px}.admin-section summary{align-items:flex-start}.admin-section summary small{text-align:left}.row{grid-template-columns:1fr}}

/* Admin visual fix */
body.admin-page{background:#f4f6f8;color:#111827}.admin-layout{grid-template-columns:minmax(0,1fr) 470px}.admin-panel{padding:0;background:#f4f6f8;border-left:1px solid #dde3ea;box-shadow:-10px 0 30px rgba(15,23,42,.10)}.admin-header{position:sticky;top:0;z-index:80;margin:0;padding:18px 18px 14px;background:#fff;border-bottom:1px solid #e5e7eb;box-shadow:0 4px 14px rgba(15,23,42,.05)}.admin-header h1{font-size:20px;line-height:1.2;margin:0 0 5px;color:#111827}.admin-top-actions{margin:0;color:#6b7280;font-size:12px}.admin-status{margin-top:10px;min-height:18px;color:#2b7a1f;font-weight:700}.admin-toolbar{position:sticky;top:82px;z-index:70;display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0;padding:12px 18px;background:rgba(255,255,255,.96);border-bottom:1px solid #e5e7eb;box-shadow:0 8px 18px rgba(15,23,42,.06);backdrop-filter:blur(6px)}.admin-toolbar .btn:first-child{grid-column:1/-1}.admin-section{margin:14px 18px;border:1px solid #dfe5ec;border-radius:16px;background:#fff;overflow:hidden;box-shadow:0 8px 20px rgba(15,23,42,.045)}.admin-section summary{position:relative;display:flex;align-items:center;min-height:62px;padding:14px 48px 14px 16px;background:#fff;cursor:pointer;list-style:none;border-bottom:0;outline:none}.admin-section summary::-webkit-details-marker{display:none}.admin-section summary::marker{content:""}.admin-section summary:after{content:'+';position:absolute;right:16px;top:50%;transform:translateY(-50%);width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#edf8ea;color:#2563eb;font-size:18px;font-weight:900;line-height:1;margin:0}.admin-section[open] summary{border-bottom:1px solid #e5e7eb;background:#fbfcfd}.admin-section[open] summary:after{content:'−'}.summary-title{display:block;width:100%;min-width:0}.summary-title span{display:block;margin:0 0 3px;font-size:15px;font-weight:800;line-height:1.25;color:#111827}.summary-title small{display:block;max-width:none;text-align:left;font-size:12px;line-height:1.35;color:#6b7280;font-weight:500}.section-body{padding:16px}.field{margin:0 0 12px}.field label{font-size:12px;margin-bottom:6px;color:#374151;font-weight:800}.field input,.field textarea,.field select{border:1px solid #d1d5db;border-radius:10px;padding:10px 11px;font-size:13px;background:#fff;transition:border-color .15s,box-shadow .15s}.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:#2563eb;box-shadow:0 0 0 3px rgba(37,99,235,.14)}.row{gap:10px}.media-paths{margin-top:4px;padding:12px;border:1px solid #e5e7eb;border-radius:14px;background:#f9fafb}.actions{gap:8px;margin-top:12px}.btn{border-radius:10px;padding:10px 13px;font-weight:500}.btn.primary{background:#2563eb}.btn.secondary{background:#4b5563}.btn.danger{background:#b83b3b}.btn.warning{background:#d18800}.sticky-actions{position:sticky;bottom:0;z-index:20;margin:12px -16px -16px;padding:12px 16px;background:linear-gradient(180deg,rgba(255,255,255,.92),#fff);border-top:1px solid #e5e7eb}.library-grid{display:grid;grid-template-columns:1fr;gap:14px}.library-card{padding:14px;border:1px solid #e5e7eb;border-radius:14px;background:#fbfcfd}.library-card h3{margin:0 0 12px;font-size:14px;color:#111827}.compact-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.compact-actions .btn{width:100%;font-size:12px;padding:9px 10px}.note{border-left:4px solid #2563eb;background:#f5f9f3;color:#374151}.coord-box{border-radius:10px;background:#f9fafb;border-color:#e5e7eb;color:#4b5563}.upload-field input[type=file]{border-style:dashed;background:#fff}.upload-field small{font-size:11px;color:#6b7280}.admin-tip{display:none!important}@media (min-width:1200px){.admin-layout{grid-template-columns:minmax(0,1fr) 520px}.library-grid{grid-template-columns:1fr 1fr}}@media (max-width:900px){.admin-layout{display:block}.admin-panel{padding:0}.admin-toolbar{top:79px}.admin-section{margin:12px}.admin-section summary{padding-right:46px}.row{grid-template-columns:1fr}.compact-actions{grid-template-columns:1fr}.admin-view{height:55vh}}

/* Admin UX upgrade: dashboard, scene cards and visual 360 library */
.admin-dashboard{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:14px 18px 0}.dashboard-card{background:#fff;border:1px solid #dfe5ec;border-radius:14px;padding:12px 10px;box-shadow:0 6px 16px rgba(15,23,42,.04)}.dashboard-card strong{display:block;font-size:24px;line-height:1;color:#111827}.dashboard-card span{display:block;margin-top:5px;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:#6b7280}.scene-card-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}.scene-card-btn{appearance:none;text-align:left;border:1px solid #e5e7eb;background:#fbfcfd;border-radius:14px;padding:12px;cursor:pointer;transition:border-color .15s,box-shadow .15s,transform .15s}.scene-card-btn:hover{border-color:#2563eb;box-shadow:0 8px 18px rgba(37,99,235,.10);transform:translateY(-1px)}.scene-card-btn.active{border-color:#2563eb;background:#f5fbf3;box-shadow:0 0 0 3px rgba(37,99,235,.12)}.scene-card-name{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;font-weight:900;color:#111827}.scene-card-meta{display:block;margin-top:5px;font-size:11px;color:#6b7280;font-weight:700}.scene-editor-card{border:1px solid #e5e7eb;border-radius:16px;background:#fff;padding:14px}.editor-title-row,.media-library-header{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 12px}.editor-title-row h3,.media-library-header h3{margin:0;font-size:14px;color:#111827}.badge{display:inline-flex;align-items:center;border-radius:999px;padding:5px 9px;background:#eef2f7;color:#4b5563;font-size:11px;font-weight:900}.hidden-field{display:none!important}.upload-grid{margin-bottom:16px}.small-btn{padding:7px 10px;font-size:12px}.media-library{display:grid;grid-template-columns:1fr;gap:12px}.media-card{display:grid;grid-template-columns:110px minmax(0,1fr);gap:12px;border:1px solid #e5e7eb;border-radius:15px;background:#fff;padding:10px;box-shadow:0 5px 14px rgba(15,23,42,.035)}.media-thumb{height:72px;border-radius:11px;background:#111;overflow:hidden}.media-thumb img{width:100%;height:100%;object-fit:cover;display:block}.media-info{min-width:0}.media-info strong{display:block;font-size:12px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#111827}.media-info small{display:block;margin-top:5px;font-size:10px;line-height:1.25;color:#6b7280;max-height:38px;overflow:auto}.usage{display:inline-flex;margin-top:6px;border-radius:999px;padding:4px 7px;background:#f3f4f6;color:#6b7280;font-size:10px;font-weight:900}.usage.in-use{background:#eaf7e7;color:#2f7d22}.media-actions{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr 1fr;gap:7px}.media-actions .btn{width:100%;padding:8px 8px;font-size:11px}.empty-library{border:1px dashed #d1d5db;border-radius:14px;padding:18px;text-align:center;color:#6b7280;background:#fbfcfd;font-size:13px}.library-card .upload-field{margin-bottom:0}.library-card .upload-field .btn{width:100%;margin-top:8px}@media (min-width:1200px){.scene-card-grid{grid-template-columns:1fr 1fr 1fr}.media-library{grid-template-columns:1fr 1fr}.media-card{grid-template-columns:96px minmax(0,1fr)}.media-actions{grid-template-columns:1fr}.media-actions .btn{text-align:center}}@media (max-width:900px){.admin-dashboard{margin:12px;grid-template-columns:repeat(3,1fr)}.scene-card-grid{grid-template-columns:1fr}.media-card{grid-template-columns:88px minmax(0,1fr)}.media-actions{grid-template-columns:1fr}.dashboard-card strong{font-size:20px}}

/* UX upgrade: drag & drop, direct links and hotspot image library */
.draggable-card{cursor:grab;position:relative}.draggable-card:active{cursor:grabbing}.drag-handle{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:7px;background:#eef2f7;color:#6b7280;font-size:13px;font-weight:900;margin-right:8px}.draggable-card.dragging{opacity:.45}.draggable-card.drag-over{outline:2px dashed #2563eb;outline-offset:3px}.scene-card-btn{display:grid!important;grid-template-columns:auto 1fr;align-items:start;text-align:left}.scene-card-btn .scene-card-name,.scene-card-btn .scene-card-meta{grid-column:2}.input-action-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center}.direct-link-field input{font-size:12px;color:#374151;background:#f9fafb}.hotspot-order-panel{margin:16px 0 12px;padding:14px;border:1px solid #e5e7eb;border-radius:14px;background:#fbfcfd}.hotspot-order-panel h3{margin:0 0 10px;font-size:14px;color:#111827}.hotspot-order-list{display:grid;gap:8px}.hotspot-order-item{width:100%;border:1px solid #e5e7eb;border-radius:12px;background:#fff;padding:10px 12px;display:grid;grid-template-columns:auto 1fr;gap:2px 8px;text-align:left;align-items:center}.hotspot-order-item strong{grid-column:2;color:#111827;font-size:13px}.hotspot-order-item small{grid-column:2;color:#6b7280;font-size:11px}.hotspot-order-item.active{border-color:#2563eb;box-shadow:0 0 0 3px rgba(37,99,235,.12)}.hotspot-image-tools{padding:12px;border:1px solid #e5e7eb;border-radius:12px;background:#fbfcfd}.hotspot-image-tools .btn{margin-top:8px}.hotspot-img-library{max-height:440px;overflow:auto;padding-right:4px}.hotspot-media-card .media-actions{grid-template-columns:1fr 1fr}.hotspot-media-actions .btn{font-size:11px}.field-image .media-library-header{margin-top:0}@media(max-width:700px){.input-action-row{grid-template-columns:1fr}.hotspot-media-card .media-actions{grid-template-columns:1fr}}

/* Visual hotspot positioning in admin */
.admin-scene-loader{position:absolute;inset:0;z-index:44;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.24);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .14s ease,visibility 0s linear .14s}.admin-scene-loader.active{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .14s ease}.admin-scene-loader .mobile-loader-card{background:rgba(0,0,0,.58)}
.admin-page .hotspot-img{cursor:grab;touch-action:none}
.admin-page .hotspot-img:active,.admin-page .hotspot-img.dragging-hotspot{cursor:grabbing}
.admin-page .hotspot-img.selected-hotspot{filter:drop-shadow(0 0 6px #2563eb) drop-shadow(0 0 14px rgba(37,99,235,.85))}
.admin-page .field small{display:block;margin-top:5px;font-size:11px;line-height:1.35;color:#6b7280}

/* Hotspot visual positioning fix: block Marzipano scene drag while dragging a hotspot in admin */
.admin-page .hotspot-img{
  touch-action:none;
  user-select:none;
  -webkit-user-select:none;
  -webkit-user-drag:none;
  pointer-events:auto;
}
.admin-page .pano.hotspot-drag-active,
.admin-page .pano.hotspot-drag-active *{
  cursor:grabbing!important;
}

/* Admin hotspot visual editor: independent overlay above Marzipano */
.admin-view{position:relative}
.admin-hotspot-layer{position:absolute;inset:0;z-index:38;pointer-events:none;overflow:hidden}
.admin-hotspot-marker{position:absolute;left:0;top:0;width:44px;height:44px;padding:0;border:2px solid rgba(255,255,255,.9);border-radius:999px;background:rgba(0,0,0,.38);box-shadow:0 8px 24px rgba(0,0,0,.35);transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;cursor:grab;pointer-events:auto;touch-action:none;-webkit-user-select:none;user-select:none;z-index:2}
.admin-hotspot-marker img{display:block;max-width:30px;max-height:30px;pointer-events:none;-webkit-user-drag:none;user-select:none}
.admin-hotspot-marker:hover,.admin-hotspot-marker.selected,.admin-hotspot-marker.selected-hotspot{border-color:#2563eb;background:rgba(37,99,235,.92);box-shadow:0 0 0 5px rgba(37,99,235,.20),0 10px 28px rgba(0,0,0,.38)}
.admin-hotspot-marker.dragging{cursor:grabbing;z-index:5;transform:translate(-50%,-50%) scale(1.08);border-color:#2563eb;background:#2563eb;box-shadow:0 0 0 7px rgba(37,99,235,.24),0 14px 34px rgba(0,0,0,.45)}
.admin-hotspot-layer.dragging-active{pointer-events:none}
.admin-page #pano .hotspot-img{opacity:0!important;pointer-events:none!important}
.admin-page .placing-banner{z-index:48}
.admin-page .admin-scene-title{z-index:45}

/* Multilingual admin fields */
.translation-panel{margin:12px 0;padding:12px;border:1px solid #e5e7eb;border-radius:14px;background:#fbfcfd}
.translation-header{display:flex;justify-content:space-between;gap:10px;align-items:flex-start;margin:0 0 10px}
.translation-header h4{margin:0;font-size:13px;color:#111827;font-weight:900}
.translation-header small{display:block;max-width:230px;text-align:right;font-size:11px;line-height:1.35;color:#6b7280;font-weight:600}
.translation-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.translation-field{margin:0!important}
.translation-field label{display:flex!important;align-items:center;justify-content:space-between;gap:8px}
.translation-field label:after{content:attr(for);display:none}
.text-translation-grid textarea{min-height:92px}
.direct-link-lang-field{margin:8px 0 0!important}
.direct-link-lang-field select{background:#fff}
@media (min-width:1200px){.translation-grid{grid-template-columns:1fr 1fr}.text-translation-grid{grid-template-columns:1fr}}
@media (max-width:900px){.translation-grid{grid-template-columns:1fr}.translation-header{display:block}.translation-header small{text-align:left;max-width:none;margin-top:4px}}

.language-manager{display:grid;gap:14px}
.language-list{display:grid;gap:9px}
.language-row{display:grid;grid-template-columns:minmax(0,1fr) 112px auto;gap:8px;align-items:end;border:1px solid #e5e7eb;border-radius:14px;background:#fbfcfd;padding:10px}
.language-row .field{margin:0}
.language-row .btn{height:39px;white-space:nowrap}
.language-row .btn:disabled{opacity:.45;cursor:not-allowed;filter:grayscale(1)}
.language-code-field input{font-weight:900;text-transform:lowercase;color:#111827;background:#f3f4f6}
.language-add-card{border:1px dashed #cfd8e3;border-radius:14px;background:#fff;padding:12px}
.language-add-card .row{align-items:start}
@media (max-width:900px){.admin-dashboard{grid-template-columns:repeat(2,1fr)}.language-row{grid-template-columns:1fr}.language-row .btn{width:100%}}
.admin-dashboard{grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){.admin-dashboard{grid-template-columns:repeat(2,1fr)}}

/* Hotspot icon library by type */
.hotspot-icon-manager{display:grid;gap:16px}
.hotspot-icon-config-grid{display:grid;grid-template-columns:1fr;gap:10px}
.hotspot-type-icon-card{display:grid;grid-template-columns:54px minmax(0,1fr) auto;gap:10px;align-items:center;border:1px solid #e5e7eb;border-radius:14px;background:#fbfcfd;padding:10px}
.hotspot-type-icon-preview{width:54px;height:54px;border-radius:14px;background:#111;display:flex;align-items:center;justify-content:center;overflow:hidden}
.hotspot-type-icon-preview img{max-width:34px;max-height:34px;display:block;object-fit:contain}
.hotspot-type-icon-info{min-width:0}
.hotspot-type-icon-info strong{display:block;font-size:13px;color:#111827;margin-bottom:5px}
.hotspot-type-icon-info input{width:100%;border:1px solid #d1d5db;border-radius:9px;background:#fff;color:#4b5563;font-size:11px;padding:8px}
.hotspot-icon-upload-card{margin-top:2px}
.hotspot-icon-library{max-height:520px;overflow:auto;padding-right:4px}
.icon-thumb{background:#f3f4f6;display:flex;align-items:center;justify-content:center}
.icon-thumb img{width:auto;height:auto;max-width:72%;max-height:72%;object-fit:contain}
.hotspot-icon-media-card .media-actions{grid-template-columns:1fr 1fr}
.hotspot-icon-actions .btn{font-size:10px;padding:8px 7px}
@media (min-width:1200px){.hotspot-icon-config-grid{grid-template-columns:1fr 1fr}.hotspot-icon-media-card .media-actions{grid-template-columns:1fr 1fr}.hotspot-type-icon-card{grid-template-columns:48px minmax(0,1fr)}.hotspot-type-icon-card .btn{grid-column:1/-1}.hotspot-type-icon-preview{width:48px;height:48px}}
@media (max-width:700px){.hotspot-type-icon-card{grid-template-columns:48px minmax(0,1fr)}.hotspot-type-icon-card .btn{grid-column:1/-1}.hotspot-icon-media-card .media-actions{grid-template-columns:1fr}}


/* Admin credential visibility controls */
.password-input{position:relative;display:block}
.password-input input{padding-right:46px!important}
.password-visibility-btn{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:34px;height:34px;margin:0;padding:0;border:0;border-radius:8px;background:transparent;color:#6b7280;font-size:16px;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer}
.password-visibility-btn:hover,.password-visibility-btn.is-visible{background:#edf8ea;color:#2f7d22}


/* Public visual style variables */
:root{
  --vr-accent:#2563eb;
  --vr-viewer-bg:#000000;
  --vr-panel-bg:rgba(0,0,0,.68);
  --vr-panel-text:#ffffff;
  --vr-panel-radius:12px;
  --vr-panel-shadow:0 8px 30px rgba(0,0,0,.35);
  --vr-button-bg:#222222;
  --vr-button-text:#ffffff;
  --vr-button-hover-bg:#2563eb;
  --vr-button-hover-text:#ffffff;
  --vr-button-active-bg:#2563eb;
  --vr-button-active-text:#ffffff;
  --vr-button-radius:10px;
  --vr-button-border-color:rgba(0,0,0,0);
  --vr-button-border-width:0px;
  --vr-button-padding-y:9px;
  --vr-button-padding-x:12px;
  --vr-button-font-size:13px;
  --vr-button-shadow:none;
  --vr-fullscreen-bg:rgba(0,0,0,.68);
  --vr-fullscreen-text:#ffffff;
  --vr-fullscreen-hover-bg:#2563eb;
  --vr-fullscreen-active-bg:#2563eb;
  --vr-fullscreen-radius:25px;
  --vr-fullscreen-size:46px;
  --vr-fullscreen-shadow:0 8px 30px rgba(0,0,0,.35);
  --vr-hotspot-size:auto;
  --vr-hotspot-shadow:drop-shadow(0 4px 12px rgba(0,0,0,.45));
  --vr-hotspot-hover-scale:1.08;
  --vr-modal-overlay-bg:rgba(0,0,0,.72);
  --vr-modal-card-bg:#ffffff;
  --vr-modal-card-text:#222222;
  --vr-modal-card-radius:16px;
  --vr-modal-close-bg:rgba(0,0,0,.75);
  --vr-modal-close-text:#ffffff;
  --vr-modal-close-hover-bg:#2563eb;
  --vr-loader-color:#ffffff;
  --vr-admin-bg:#f4f6f8;
  --vr-admin-panel-bg:#f4f6f8;
  --vr-admin-header-bg:#ffffff;
  --vr-admin-header-text:#111827;
  --vr-admin-toolbar-bg:rgba(255,255,255,.96);
  --vr-admin-card-bg:#ffffff;
  --vr-admin-card-text:#111827;
  --vr-admin-muted-text:#6b7280;
  --vr-admin-border:#e5e7eb;
  --vr-admin-section-header-bg:#ffffff;
  --vr-admin-section-open-header-bg:#fbfcfd;
  --vr-admin-field-bg:#ffffff;
  --vr-admin-field-text:#111827;
  --vr-admin-field-border:#d1d5db;
  --vr-admin-focus:#2563eb;
  --vr-admin-primary-bg:#2563eb;
  --vr-admin-primary-text:#ffffff;
  --vr-admin-secondary-bg:#4b5563;
  --vr-admin-secondary-text:#ffffff;
  --vr-admin-danger-bg:#b83b3b;
  --vr-admin-danger-text:#ffffff;
  --vr-admin-warning-bg:#d18800;
  --vr-admin-warning-text:#ffffff;
  --vr-admin-button-radius:10px;
  --vr-admin-card-radius:16px;
  --vr-admin-input-radius:10px;
  --vr-admin-card-shadow:0 8px 20px rgba(15,23,42,.045);
}
.viewer-page .pano{background:var(--vr-viewer-bg)!important}
.viewer-page .topbar{background:var(--vr-panel-bg)!important;color:var(--vr-panel-text)!important;border-radius:var(--vr-panel-radius)!important;box-shadow:var(--vr-panel-shadow)!important}
.viewer-page .topbar h1{font-size:var(--vr-button-font-size)!important;font-weight:700!important;line-height:1.2!important}
.viewer-page .scene-menu button{background:var(--vr-button-bg)!important;color:var(--vr-button-text)!important;border-radius:var(--vr-button-radius)!important;border:var(--vr-button-border-width) solid var(--vr-button-border-color)!important;padding:var(--vr-button-padding-y) var(--vr-button-padding-x)!important;font-size:var(--vr-button-font-size)!important;box-shadow:var(--vr-button-shadow)!important;transition:background .18s,color .18s,border-color .18s,transform .18s,box-shadow .18s}
@media(hover:hover) and (pointer:fine){.viewer-page .scene-menu button:hover{background:var(--vr-button-hover-bg)!important;color:var(--vr-button-hover-text)!important;transform:translateY(-1px)}}
.viewer-page .scene-menu button.active{background:var(--vr-button-active-bg)!important;color:var(--vr-button-active-text)!important}
.viewer-page .fullscreen-btn{width:var(--vr-fullscreen-size)!important;height:var(--vr-fullscreen-size)!important;border-radius:var(--vr-fullscreen-radius)!important;background:var(--vr-fullscreen-bg)!important;color:var(--vr-fullscreen-text)!important;box-shadow:var(--vr-fullscreen-shadow)!important}
.viewer-page .fullscreen-btn:not(.active),.viewer-page .fullscreen-btn.touch-reset,.viewer-page .fullscreen-btn[data-fullscreen-state="inactive"]{background:var(--vr-fullscreen-bg)!important;color:var(--vr-fullscreen-text)!important}
.viewer-page .fullscreen-btn.active,.viewer-page .fullscreen-btn[data-fullscreen-state="active"],body.viewer-page.is-fullscreen .fullscreen-btn{background:var(--vr-fullscreen-active-bg)!important;color:var(--vr-fullscreen-text)!important}
@media(hover:hover) and (pointer:fine){.viewer-page .fullscreen-btn:hover{background:var(--vr-fullscreen-hover-bg)!important;color:var(--vr-fullscreen-text)!important}}
.viewer-page .hotspot-img{width:var(--vr-hotspot-size)!important;height:var(--vr-hotspot-size)!important;filter:var(--vr-hotspot-shadow)!important;object-fit:contain!important;transition:filter .18s,transform .18s}
@media(hover:hover) and (pointer:fine){.viewer-page .hotspot-img:hover{transform:translateZ(0) scale(var(--vr-hotspot-hover-scale))}}
.viewer-page .modal{background:var(--vr-modal-overlay-bg)!important}
.viewer-page .modal-card{background:var(--vr-modal-card-bg)!important;color:var(--vr-modal-card-text)!important;border-radius:var(--vr-modal-card-radius)!important}
.viewer-page .modal-close{background:var(--vr-modal-close-bg)!important;color:var(--vr-modal-close-text)!important}
@media(hover:hover) and (pointer:fine){.viewer-page .modal-close:hover{background:var(--vr-modal-close-hover-bg)!important}}
.viewer-page .mobile-loader-spinner{border-top-color:var(--vr-loader-color)!important}
.viewer-page .mobile-loader-spinner{border-left-color:color-mix(in srgb,var(--vr-loader-color) 30%,transparent);border-right-color:color-mix(in srgb,var(--vr-loader-color) 30%,transparent);border-bottom-color:color-mix(in srgb,var(--vr-loader-color) 30%,transparent)}


/* Admin visual style variables */
.admin-page{background:var(--vr-admin-bg)!important;color:var(--vr-admin-card-text)!important}
.admin-page .admin-panel{background:var(--vr-admin-panel-bg)!important;border-left-color:var(--vr-admin-border)!important}
.admin-page .admin-header{background:var(--vr-admin-header-bg)!important;border-bottom-color:var(--vr-admin-border)!important;color:var(--vr-admin-header-text)!important}
.admin-page .admin-header h1,.admin-page .admin-header strong{color:var(--vr-admin-header-text)!important}
.admin-page .admin-top-actions,.admin-page .admin-top-actions a{color:var(--vr-admin-muted-text)!important}
.admin-page .admin-toolbar{background:var(--vr-admin-toolbar-bg)!important;border-bottom-color:var(--vr-admin-border)!important}
.admin-page .admin-section,.admin-page .scene-editor-card,.admin-page .hotspot-editor-card,.admin-page .library-card,.admin-page .style-group,.admin-page .style-preview-card,.admin-page .style-preview-admin-card,.admin-page .media-card,.admin-page .translation-panel,.admin-page .language-row,.admin-page .language-add-card,.admin-page .hotspot-type-icon-card,.admin-page .hotspot-image-tools,.admin-page .hotspot-order-panel,.admin-page .media-paths,.admin-page .dashboard-card{background:var(--vr-admin-card-bg)!important;color:var(--vr-admin-card-text)!important;border-color:var(--vr-admin-border)!important;border-radius:var(--vr-admin-card-radius)!important;box-shadow:var(--vr-admin-card-shadow)!important}
.admin-page .admin-section summary{background:var(--vr-admin-section-header-bg)!important;color:var(--vr-admin-card-text)!important}
.admin-page .admin-section[open] summary{background:var(--vr-admin-section-open-header-bg)!important;border-bottom-color:var(--vr-admin-border)!important}
.admin-page .admin-section summary span,.admin-page .summary-title span,.admin-page h2,.admin-page h3,.admin-page h4,.admin-page .editor-title-row h3,.admin-page .media-library-header h3,.admin-page .media-info strong,.admin-page .hotspot-type-icon-info strong,.admin-page .translation-header h4{color:var(--vr-admin-card-text)!important}
.admin-page .admin-section summary small,.admin-page .summary-title small,.admin-page .field small,.admin-page .translation-header small,.admin-page .media-info small,.admin-page .dashboard-card span,.admin-page .style-preview-card small,.admin-page .style-preview-admin-card small,.admin-page .usage,.admin-page .badge{color:var(--vr-admin-muted-text)!important}
.admin-page .field label{color:var(--vr-admin-card-text)!important}
.admin-page .field input,.admin-page .field textarea,.admin-page .field select,.admin-page .hotspot-type-icon-info input,.admin-page .style-preview-admin-card input{background:var(--vr-admin-field-bg)!important;color:var(--vr-admin-field-text)!important;border-color:var(--vr-admin-field-border)!important;border-radius:var(--vr-admin-input-radius)!important}
.admin-page .field input:focus,.admin-page .field textarea:focus,.admin-page .field select:focus{border-color:var(--vr-admin-focus)!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--vr-admin-focus) 20%,transparent)!important}
.admin-page .btn{border-radius:var(--vr-admin-button-radius)!important;color:var(--vr-admin-primary-text)!important}
.admin-page .btn.primary{background:var(--vr-admin-primary-bg)!important;color:var(--vr-admin-primary-text)!important}
.admin-page .btn.secondary{background:var(--vr-admin-secondary-bg)!important;color:var(--vr-admin-secondary-text)!important}
.admin-page .btn.danger{background:var(--vr-admin-danger-bg)!important;color:var(--vr-admin-danger-text)!important}
.admin-page .btn.warning{background:var(--vr-admin-warning-bg)!important;color:var(--vr-admin-warning-text)!important}
.admin-page .admin-status,.admin-page .admin-section summary:after,.admin-page .admin-hotspot-marker.selected,.admin-page .admin-hotspot-marker.dragging{color:var(--vr-admin-focus)!important}
.admin-page .admin-section summary:after{background:color-mix(in srgb,var(--vr-admin-focus) 15%,white)!important}
.admin-page .note{border-left-color:var(--vr-admin-focus)!important;background:color-mix(in srgb,var(--vr-admin-focus) 8%,white)!important;color:var(--vr-admin-card-text)!important}
.admin-page .usage.in-use,.admin-page .password-visibility-btn:hover,.admin-page .password-visibility-btn.is-visible{background:color-mix(in srgb,var(--vr-admin-focus) 13%,white)!important;color:var(--vr-admin-focus)!important}
.admin-page .admin-hotspot-marker:hover,.admin-page .admin-hotspot-marker.selected,.admin-page .admin-hotspot-marker.selected-hotspot,.admin-page .admin-hotspot-marker.dragging{border-color:var(--vr-admin-focus)!important;background:var(--vr-admin-focus)!important}
.admin-page .placing-banner{background:var(--vr-admin-primary-bg)!important;color:var(--vr-admin-primary-text)!important;border-radius:var(--vr-admin-card-radius)!important}

/* Admin style editor */
.style-manager{display:grid;gap:14px}.style-group,.style-preview-card{border:1px solid #e5e7eb;border-radius:14px;background:#fff;padding:12px}.style-group h3,.style-preview-card h3{margin:0 0 10px;font-size:13px;color:#111827}.style-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.style-grid .wide-field{grid-column:1/-1}.style-color-control{display:grid;grid-template-columns:minmax(72px,96px) 1fr;gap:8px;align-items:center}.style-color-input{width:100%;min-height:40px;padding:4px;cursor:pointer}.style-alpha-control{display:flex!important;align-items:center;gap:7px;margin:0!important;font-size:11px!important;color:var(--vr-admin-muted-text,#6b7280)!important;font-weight:800!important}.style-alpha-input{width:74px!important;min-height:40px;padding:8px!important;font-size:12px!important}.style-color-value{display:block;margin-top:5px;font-family:monospace;font-size:11px;color:var(--vr-admin-muted-text,#6b7280)}.style-preview-panel{display:flex;gap:8px;align-items:center;flex-wrap:wrap;min-height:86px;padding:14px;margin-bottom:10px}.style-preview-button{border:0;cursor:pointer}.style-preview-fullscreen{display:inline-flex;align-items:center;justify-content:center;border:0;font-size:20px;line-height:1;cursor:pointer}.style-preview-card small{display:block;color:#6b7280;font-size:11px;line-height:1.35}.style-preview-admin-card{display:grid;gap:8px;border:1px solid #e5e7eb;border-radius:14px;background:#fff;padding:12px;margin:10px 0}.style-preview-admin-card strong{font-size:13px}.style-preview-admin-card input{width:100%;border:1px solid #d1d5db;border-radius:10px;padding:9px;font-size:13px}.style-preview-admin-card .btn{width:auto}.admin-view .pano{background:var(--vr-viewer-bg)!important}@media(max-width:700px){.style-grid{grid-template-columns:1fr}}

/* Simplified visual style editor */
.simplified-style-manager .style-helper{margin:0 0 14px}.style-preset-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.style-preset-btn{appearance:none;border:1px solid var(--vr-admin-border,#e5e7eb);border-radius:var(--vr-admin-button-radius,10px);background:var(--vr-admin-field-bg,#fff);color:var(--vr-admin-card-text,#111827);padding:10px 8px;font-size:12px;font-weight:900;cursor:pointer;transition:background .15s,border-color .15s,color .15s,transform .15s}.style-preset-btn:hover{border-color:var(--vr-admin-focus,#2563eb);color:var(--vr-admin-focus,#2563eb);transform:translateY(-1px)}.style-small-help{display:block;margin-top:8px;font-size:11px;line-height:1.35;color:var(--vr-admin-muted-text,#6b7280)}.style-preview-admin-buttons{display:grid;grid-template-columns:1fr 1fr;gap:8px}.style-preview-admin-buttons .btn{width:100%}.simplified-style-manager .style-group h3{display:flex;align-items:center;gap:7px}.simplified-style-manager .style-group h3:before{content:"";width:8px;height:8px;border-radius:999px;background:var(--vr-admin-focus,#2563eb);display:inline-block}.simplified-style-manager .field select{cursor:pointer}.admin-page .btn{background:var(--vr-admin-primary-bg,#2563eb)!important;color:var(--vr-admin-primary-text,#fff)!important;border:0!important;border-radius:var(--vr-admin-button-radius,10px)!important;transition:background .15s,color .15s,filter .15s,transform .15s,box-shadow .15s}.admin-page .btn.primary{background:var(--vr-admin-primary-bg,#2563eb)!important;color:var(--vr-admin-primary-text,#fff)!important}.admin-page .btn.secondary{background:var(--vr-admin-secondary-bg,#4b5563)!important;color:var(--vr-admin-secondary-text,#fff)!important}.admin-page .btn.danger{background:var(--vr-admin-danger-bg,#b83b3b)!important;color:var(--vr-admin-danger-text,#fff)!important}.admin-page .btn.warning{background:var(--vr-admin-warning-bg,#d18800)!important;color:var(--vr-admin-warning-text,#fff)!important}@media(hover:hover) and (pointer:fine){.admin-page .btn:hover{filter:brightness(.94);transform:translateY(-1px)}}@media(max-width:700px){.style-preset-grid{grid-template-columns:1fr 1fr}.style-preview-admin-buttons{grid-template-columns:1fr}}


/* Final style fixes: admin variables, hotspot sizing and visual editor performance */
body.admin-page{background:var(--vr-admin-bg,#f4f6f8)!important;color:var(--vr-admin-card-text,#111827)!important}
.admin-page .admin-panel{background:var(--vr-admin-panel-bg,#f4f6f8)!important;border-left-color:var(--vr-admin-border,#e5e7eb)!important}
.admin-page .admin-header{background:var(--vr-admin-header-bg,#fff)!important;color:var(--vr-admin-header-text,#111827)!important;border-bottom-color:var(--vr-admin-border,#e5e7eb)!important}
.admin-page .admin-header h1,.admin-page .admin-top-actions{color:var(--vr-admin-header-text,#111827)!important}
.admin-page .admin-toolbar{background:var(--vr-admin-toolbar-bg,var(--vr-admin-header-bg,#fff))!important;border-bottom-color:var(--vr-admin-border,#e5e7eb)!important}
.admin-page .btn,
.admin-page button.btn,
.admin-page a.btn{border:0!important;border-radius:var(--vr-admin-button-radius,10px)!important;box-shadow:none!important}
.admin-page .btn.primary,
.admin-page button.btn.primary,
.admin-page .admin-toolbar .btn.primary{background:var(--vr-admin-primary-bg,#2563eb)!important;color:var(--vr-admin-primary-text,#fff)!important}
.admin-page .btn.secondary,
.admin-page button.btn.secondary,
.admin-page .admin-toolbar .btn.secondary{background:var(--vr-admin-secondary-bg,#4b5563)!important;color:var(--vr-admin-secondary-text,#fff)!important}
.admin-page .btn.danger,
.admin-page button.btn.danger{background:var(--vr-admin-danger-bg,#b83b3b)!important;color:var(--vr-admin-danger-text,#fff)!important}
.admin-page .btn.warning,
.admin-page button.btn.warning{background:var(--vr-admin-warning-bg,#d18800)!important;color:var(--vr-admin-warning-text,#fff)!important}
.viewer-page .hotspot-img,
.admin-page #pano .hotspot-img.native-admin-hotspot{width:var(--vr-hotspot-size,auto)!important;height:var(--vr-hotspot-size,auto)!important;filter:var(--vr-hotspot-shadow,none)!important;object-fit:contain!important}
.admin-page #pano .hotspot-img.native-admin-hotspot{opacity:1!important;pointer-events:auto!important}
.admin-hotspot-marker{left:0!important;top:0!important;width:44px!important;height:44px!important;background:transparent!important;border:2px solid transparent!important;box-shadow:none!important;opacity:1;transform:translate3d(var(--admin-marker-x,0),var(--admin-marker-y,0),0) translate(-50%,-50%) scale(var(--admin-marker-scale,1))!important;will-change:transform;contain:layout paint;}
.admin-hotspot-marker img{display:none!important}
.admin-hotspot-marker:hover,.admin-hotspot-marker.selected,.admin-hotspot-marker.selected-hotspot{border-color:var(--vr-admin-focus,#2563eb)!important;background:color-mix(in srgb,var(--vr-admin-focus,#2563eb) 16%,transparent)!important;box-shadow:0 0 0 5px color-mix(in srgb,var(--vr-admin-focus,#2563eb) 18%,transparent)!important}
.admin-hotspot-marker.dragging{--admin-marker-scale:1.08;background:color-mix(in srgb,var(--vr-admin-focus,#2563eb) 36%,transparent)!important;border-color:var(--vr-admin-focus,#2563eb)!important;box-shadow:0 0 0 7px color-mix(in srgb,var(--vr-admin-focus,#2563eb) 22%,transparent)!important}
.admin-hotspot-layer.navigation-active .admin-hotspot-marker{opacity:0;pointer-events:none}


/* Public hotspot performance fix
   Do not animate transform/filter on public hotspots while Marzipano is updating their position.
   CSS transitions on transform make the marker visually chase the scene and create lag. */
.viewer-page .hotspot-img{
  filter:none!important;
  box-shadow:var(--vr-hotspot-box-shadow, none)!important;
  transition:opacity .12s ease, box-shadow .12s ease!important;
  will-change:auto!important;
  transform:translateZ(0);
  backface-visibility:hidden;
}
@media(hover:hover) and (pointer:fine){
  .viewer-page .hotspot-img:hover{
    filter:none!important;
  }
}

/* Admin manual hotspot positioning visual fix
   The admin editor uses its own overlay to drag hotspots. Hide the native
   Marzipano admin hotspot to avoid duplicated icons, and make the overlay
   marker show the real icon instead of a large coloured circle. */
.admin-page #pano .hotspot-img.native-admin-hotspot{
  opacity:0!important;
  pointer-events:none!important;
}
.admin-page .admin-hotspot-marker{
  width:auto!important;
  height:auto!important;
  min-width:28px!important;
  min-height:28px!important;
  padding:0!important;
  border:0!important;
  border-radius:999px!important;
  background:transparent!important;
  box-shadow:none!important;
  opacity:1!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  transform:translate3d(var(--admin-marker-x,0),var(--admin-marker-y,0),0) translate(-50%,-50%) scale(var(--admin-marker-scale,1))!important;
  will-change:transform;
  contain:layout paint;
}
.admin-page .admin-hotspot-marker img{
  display:block!important;
  width:var(--admin-hotspot-size,var(--vr-hotspot-size,auto))!important;
  height:var(--admin-hotspot-size,var(--vr-hotspot-size,auto))!important;
  max-width:none!important;
  max-height:none!important;
  object-fit:contain!important;
  pointer-events:none!important;
  -webkit-user-drag:none!important;
  user-select:none!important;
  filter:none!important;
  box-shadow:none!important;
}
.admin-page .admin-hotspot-marker:hover,
.admin-page .admin-hotspot-marker.selected,
.admin-page .admin-hotspot-marker.selected-hotspot{
  background:transparent!important;
  border:0!important;
  outline:2px solid var(--vr-admin-focus,#2563eb)!important;
  outline-offset:4px!important;
  box-shadow:none!important;
}
.admin-page .admin-hotspot-marker.dragging{
  --admin-marker-scale:1.06;
  background:transparent!important;
  border:0!important;
  outline:2px solid var(--vr-admin-focus,#2563eb)!important;
  outline-offset:5px!important;
  box-shadow:none!important;
}
.admin-hotspot-layer.navigation-active .admin-hotspot-marker{
  opacity:1!important;
  pointer-events:auto!important;
}


/* Font handling: apply selected system/Google font to every UI control.
   Buttons and form controls do not reliably inherit font-family in all browsers. */
html,
body,
button,
input,
select,
textarea,
.btn,
.scene-menu button,
.fullscreen-btn,
.modal,
.admin-page,
.admin-page * {
  font-family: var(--vr-font-family, Arial, Helvetica, sans-serif);
}

body.admin-page,
body.viewer-page {
  font-family: var(--vr-font-family, Arial, Helvetica, sans-serif) !important;
}

.admin-page button,
.admin-page input,
.admin-page select,
.admin-page textarea,
.viewer-page button {
  font-family: var(--vr-font-family, Arial, Helvetica, sans-serif) !important;
}


/* Admin hotspot first-position fix
   Keep admin overlay markers hidden until their first valid screen coordinates are calculated.
   This prevents hotspots from flashing in the top-left corner while Marzipano initializes. */
.admin-page #pano .hotspot-img{
  opacity:0!important;
  pointer-events:none!important;
}
.admin-page .admin-hotspot-marker:not(.is-positioned){
  opacity:0!important;
  pointer-events:none!important;
}
.admin-page .admin-hotspot-marker.is-positioned{
  opacity:1!important;
  pointer-events:auto!important;
}
.admin-page .admin-hotspot-layer.dragging-active .admin-hotspot-marker.is-positioned{
  pointer-events:auto!important;
}

/* Scene initial view editor */
.scene-start-view-card{border:1px solid #e5e7eb;border-radius:14px;background:#fbfcfd;padding:12px;margin:12px 0}.scene-start-view-card h4{margin:0;font-size:13px;color:#111827}.scene-start-view-card .small-muted{margin:0 0 10px;font-size:11px;line-height:1.45;color:#6b7280}.technical-view-row{grid-template-columns:1fr 1fr 1fr}.technical-view-row .field{margin-bottom:6px}.technical-view-row input{font-family:monospace;font-size:12px}.admin-page .scene-start-view-card{background:var(--vr-admin-card-bg)!important;color:var(--vr-admin-card-text)!important;border-color:var(--vr-admin-border)!important;border-radius:var(--vr-admin-card-radius)!important;box-shadow:var(--vr-admin-card-shadow)!important}.admin-page .scene-start-view-card h4{color:var(--vr-admin-card-text)!important}.admin-page .scene-start-view-card .small-muted{color:var(--vr-admin-muted-text)!important}@media(max-width:900px){.technical-view-row{grid-template-columns:1fr}}

/* Optional hotspot perspective simulation
   Default hotspots remain flat/floating. These rules only affect hotspots explicitly configured with perspective. */
.viewer-page .hotspot-img.hotspot-perspective-host{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:var(--vr-hotspot-size,auto)!important;
  height:var(--vr-hotspot-size,auto)!important;
  background:transparent!important;
  border:0!important;
  padding:0!important;
  transform-style:preserve-3d;
  contain:layout paint;
}
.viewer-page .hotspot-img.hotspot-perspective-host .hotspot-perspective-icon{
  display:block!important;
  width:var(--vr-hotspot-size,auto)!important;
  height:var(--vr-hotspot-size,auto)!important;
  max-width:none!important;
  max-height:none!important;
  object-fit:contain!important;
  pointer-events:none!important;
  user-select:none!important;
  -webkit-user-drag:none!important;
  transform:var(--vr-hotspot-perspective-transform,translateZ(0));
  transform-origin:center center;
  transform-style:preserve-3d;
  backface-visibility:hidden;
  will-change:auto;
}
.admin-page .hotspot-perspective-settings small{display:block;margin-top:5px;font-size:11px;line-height:1.35;color:var(--vr-admin-muted-text,#6b7280)}

/* Public hotspot positioning guard
   Prevents hotspots from flashing at the top-left corner before Marzipano reports a valid position. */
.viewer-page .hotspot-img.public-hotspot-position-pending{
  opacity:0!important;
  pointer-events:none!important;
}
.viewer-page .hotspot-img.public-hotspot-position-ready{
  opacity:1!important;
}

.security-card{border:1px solid var(--vr-admin-border,#e5e7eb);background:var(--vr-admin-card-bg,#fff);border-radius:var(--vr-admin-card-radius,16px);padding:14px;margin:0 0 14px;box-shadow:var(--vr-admin-card-shadow,0 8px 20px rgba(15,23,42,.06));}
.security-card h3{margin:0 0 4px;font-size:15px;color:var(--vr-admin-card-text,#111827);}
.security-card small{display:block;margin:0 0 10px;color:var(--vr-admin-muted-text,#6b7280);line-height:1.4;}
.security-2fa-block{margin-top:12px;padding-top:12px;border-top:1px solid var(--vr-admin-border,#e5e7eb);}
.check-row{display:flex;gap:8px;align-items:center;margin:6px 0 12px;font-size:13px;font-weight:800;color:var(--vr-admin-card-text,#111827);}
.check-row input{width:auto;min-width:16px;}
.superadmin-only-card{border-style:dashed;}

/* Admin hotspot perspective preview
   Mirrors the public optional perspective transform in the admin overlay without affecting marker positioning. */
.admin-page .admin-hotspot-marker{
  transform-style:preserve-3d!important;
}
.admin-page .admin-hotspot-marker .admin-hotspot-icon{
  transform:var(--admin-hotspot-perspective-transform,translateZ(0))!important;
  transform-origin:center center!important;
  transform-style:preserve-3d!important;
  backface-visibility:hidden!important;
  will-change:auto!important;
}
.admin-page .admin-hotspot-marker.admin-hotspot-has-perspective .admin-hotspot-icon{
  pointer-events:none!important;
}


/* Stable public hotspot overlay
   Public hotspots are rendered in a dedicated layer above Marzipano. Marzipano
   only provides the view/projection; CSS never overrides Marzipano transforms. */
.viewer-page .public-hotspot-layer{
  position:absolute!important;
  inset:0!important;
  z-index:16!important;
  pointer-events:none!important;
  overflow:hidden!important;
  contain:layout paint!important;
}
.viewer-page .public-hotspot-marker{
  position:absolute!important;
  left:0!important;
  top:0!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:auto!important;
  height:auto!important;
  min-width:1px!important;
  min-height:1px!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:999px!important;
  background:transparent!important;
  box-shadow:none!important;
  cursor:pointer!important;
  pointer-events:auto!important;
  touch-action:manipulation!important;
  user-select:none!important;
  -webkit-user-select:none!important;
  transform:translate3d(-9999px,-9999px,0) translate(-50%,-50%);
  transform-origin:center center!important;
  will-change:transform!important;
  contain:layout paint!important;
}
.viewer-page .public-hotspot-icon{
  display:block!important;
  width:var(--public-hotspot-size,var(--vr-hotspot-size,auto))!important;
  height:var(--public-hotspot-size,var(--vr-hotspot-size,auto))!important;
  max-width:none!important;
  max-height:none!important;
  object-fit:contain!important;
  pointer-events:none!important;
  user-select:none!important;
  -webkit-user-drag:none!important;
  filter:none!important;
  box-shadow:var(--vr-hotspot-box-shadow,none)!important;
  opacity:1!important;
  transition:none!important;
  transform:var(--public-hotspot-perspective-transform,translateZ(0))!important;
  transform-origin:center center!important;
  transform-style:preserve-3d!important;
  backface-visibility:hidden!important;
}
.viewer-page .public-hotspot-marker[data-custom-icon="1"] .public-hotspot-icon{
  width:var(--public-hotspot-size,auto)!important;
  height:var(--public-hotspot-size,auto)!important;
}
.viewer-page .public-hotspot-marker.public-hotspot-transparent{
  width:var(--public-hotspot-size,96px)!important;
  height:var(--public-hotspot-size,96px)!important;
}
.viewer-page .public-hotspot-marker.public-hotspot-transparent .public-hotspot-icon{
  width:100%!important;
  height:100%!important;
  opacity:0!important;
  box-shadow:none!important;
}
.viewer-page .hotspot-img.public-hotspot-position-pending,
.viewer-page .hotspot-img.public-hotspot-position-ready{
  opacity:1!important;
  pointer-events:auto!important;
}
.viewer-page .hotspot-img{
  transition:none!important;
}
@media(hover:hover) and (pointer:fine){
  .viewer-page .hotspot-img:hover{
    transform:translateZ(0)!important;
  }
}

/* Custom/transparent hotspot preview in admin overlay */
.admin-page .admin-hotspot-marker.admin-hotspot-custom img.admin-hotspot-icon{
  width:var(--admin-hotspot-size,var(--vr-hotspot-size,auto))!important;
  height:var(--admin-hotspot-size,var(--vr-hotspot-size,auto))!important;
  max-width:none!important;
  max-height:none!important;
  object-fit:contain!important;
}
.admin-page .admin-hotspot-marker.admin-hotspot-transparent{
  width:var(--admin-hotspot-size,96px)!important;
  height:var(--admin-hotspot-size,96px)!important;
  border:2px dashed var(--vr-admin-focus,#2563eb)!important;
  border-radius:12px!important;
  background:color-mix(in srgb,var(--vr-admin-focus,#2563eb) 10%,transparent)!important;
}
.admin-page .admin-hotspot-marker.admin-hotspot-transparent img.admin-hotspot-icon{
  opacity:0!important;
  width:100%!important;
  height:100%!important;
}
.hotspot-custom-icon-card{
  margin:12px 0;
  padding:12px;
  border:1px solid var(--vr-admin-border,#e5e7eb);
  border-radius:var(--vr-admin-card-radius,16px);
  background:var(--vr-admin-card-bg,#fff);
}
.hotspot-icon-actions{
  grid-template-columns:1fr 1fr!important;
}


/* Feature toggles, self-hosted video and HTML text hotspots */
.modal-video{display:block;width:100%;max-height:78vh;background:#111;object-fit:contain}
.hotspot-html .hotspot-text-content{font-size:16px;line-height:1.6;overflow-wrap:anywhere}
.hotspot-html .hotspot-text-content p:first-child{margin-top:0}
.hotspot-html .hotspot-text-content p:last-child{margin-bottom:0}
.hotspot-html .hotspot-text-content a{color:var(--vr-accent,#2563eb);font-weight:700;text-decoration:underline}
.hotspot-html .hotspot-text-content img{max-width:100%;height:auto;border-radius:10px}
.hotspot-html .hotspot-text-content ul,.hotspot-html .hotspot-text-content ol{padding-left:22px}
.hotspot-html .hotspot-text-content table{width:100%;border-collapse:collapse;margin:12px 0}
.hotspot-html .hotspot-text-content th,.hotspot-html .hotspot-text-content td{border:1px solid #e5e7eb;padding:8px;text-align:left;vertical-align:top}
.hotspot-html .hotspot-text-content blockquote{margin:12px 0;padding:10px 14px;border-left:4px solid var(--vr-accent,#2563eb);background:rgba(0,0,0,.04)}
.hotspot-html .hotspot-text-content .hotspot-text-iframe{display:block;margin:12px 0;width:100%;height:min(560px,70vh);border:0;background:#111;border-radius:10px}
.hotspot-feature-grid{display:grid;grid-template-columns:1fr;gap:10px}
.hotspot-feature-row{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:flex-start;border:1px solid var(--vr-admin-border,#e5e7eb);border-radius:var(--vr-admin-card-radius,16px);background:var(--vr-admin-card-bg,#fff);padding:12px;cursor:pointer}
.hotspot-feature-row input{margin-top:3px;width:auto!important;min-width:16px}
.hotspot-feature-row strong{display:block;font-size:13px;color:var(--vr-admin-card-text,#111827)}
.hotspot-feature-row small{display:block;margin-top:4px;font-size:11px;line-height:1.35;color:var(--vr-admin-muted-text,#6b7280)}
.video-thumb{background:#111;color:#fff;display:flex;align-items:center;justify-content:center;font-size:26px;font-weight:900}
.video-thumb span{display:block;line-height:1}
.hotspot-video-media-card .media-actions{grid-template-columns:1fr 1fr}
.field-video-selfhosted .input-action-row{align-items:start}


/* Scene menu dropdown: desktop + mobile */
.viewer-page .scene-menu{display:flex;flex-direction:column;align-items:flex-start;gap:8px;flex-wrap:nowrap;max-width:min(520px,calc(100vw - 36px))}
.viewer-page .scene-menu[hidden],.viewer-page .scene-menu.is-hidden{display:none!important}
.viewer-page .scene-menu-toggle{display:inline-flex;align-items:center;justify-content:space-between;gap:14px;min-width:128px;font-weight:700;white-space:nowrap}
.viewer-page .scene-menu-caret{display:inline-block;width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:6px solid currentColor;transition:transform .18s ease;transform-origin:50% 45%}
.viewer-page .scene-menu.is-open .scene-menu-caret{transform:rotate(180deg)}
.viewer-page .scene-menu-dropdown{order:-1;display:grid;grid-template-columns:repeat(auto-fit,minmax(145px,1fr));gap:6px;width:min(520px,calc(100vw - 36px));min-width:180px;max-width:none;max-height:none;overflow:visible;padding:8px;background:var(--vr-panel-bg);color:var(--vr-panel-text);border-radius:var(--vr-panel-radius);box-shadow:var(--vr-panel-shadow)}
.viewer-page .scene-menu-dropdown[hidden]{display:none!important}
.viewer-page .scene-menu-dropdown .scene-menu-item{display:block;width:100%;min-width:0;text-align:left;white-space:normal;overflow-wrap:anywhere}
@media(max-width:640px){
  .viewer-page .scene-menu{left:12px;right:12px;bottom:12px;max-width:none;align-items:stretch}
  .viewer-page .scene-menu-toggle{width:25%;min-width:0}
  .viewer-page .scene-menu-dropdown{width:100%;min-width:0;max-width:none;max-height:none;overflow:visible;grid-template-columns:repeat(2,minmax(0,1fr));padding:6px}
  .viewer-page .scene-menu-dropdown .scene-menu-item{font-size:12px!important;padding-left:10px!important;padding-right:10px!important}
}

/* Mobile zoom for image hotspots */
.viewer-page .modal-body.modal-image-mode{overflow:hidden;background:#111}
.viewer-page .modal-image-zoom{position:relative;width:100%;height:min(82vh,calc(100dvh - 56px));min-height:220px;display:flex;align-items:center;justify-content:center;overflow:hidden;background:#111;overscroll-behavior:contain}
.viewer-page .modal-image-zoom .modal-img-zoomable{display:block;width:auto!important;height:auto!important;max-width:100%!important;max-height:100%!important;object-fit:contain!important;background:#111;transform-origin:center center;will-change:transform;user-select:none;-webkit-user-select:none;-webkit-user-drag:none}
@media(hover:none),(pointer:coarse){
  .viewer-page .modal-image-zoom.is-touch-zoom{touch-action:none;-webkit-tap-highlight-color:transparent}
  .viewer-page .modal-image-zoom.is-touch-zoom .modal-img-zoomable{touch-action:none}
}
@media(max-width:640px){
  .viewer-page .modal{padding:12px}
  .viewer-page .modal-card{width:100%;max-height:calc(100dvh - 24px)}
  .viewer-page .modal-body.modal-image-mode{max-height:calc(100dvh - 24px)}
  .viewer-page .modal-image-zoom{height:calc(100dvh - 24px);min-height:0}
}

/* Image hotspot modal: image fills the container edge-to-edge, with rounded corners */
.viewer-page .modal.modal-image-active{padding:20px}
.viewer-page .modal.modal-image-active .modal-card{
  width:fit-content;
  max-width:calc(100vw - 40px);
  max-height:calc(100dvh - 40px);
  padding:0;
  margin:0;
  border:0;
  outline:0;
  border-radius:20px!important;
  background:transparent!important;
  box-shadow:none;
  overflow:hidden;
}
.viewer-page .modal.modal-image-active .modal-body.modal-image-mode{
  width:fit-content;
  max-width:calc(100vw - 40px);
  max-height:calc(100dvh - 40px);
  padding:0;
  margin:0;
  border:0;
  border-radius:20px;
  overflow:hidden;
  background:transparent!important;
  line-height:0;
}
.viewer-page .modal.modal-image-active .modal-image-zoom{
  width:fit-content;
  height:fit-content;
  min-width:0;
  min-height:0;
  max-width:calc(100vw - 40px);
  max-height:calc(100dvh - 40px);
  padding:0;
  margin:0;
  border:0;
  border-radius:20px;
  overflow:hidden;
  background:transparent!important;
}
.viewer-page .modal.modal-image-active .modal-image-zoom .modal-img-zoomable{
  display:block;
  width:auto!important;
  height:auto!important;
  max-width:calc(100vw - 40px)!important;
  max-height:calc(100dvh - 40px)!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:20px;
  background:transparent!important;
}
.viewer-page .modal.modal-image-active .modal-close{
  right:12px;
  top:12px;
}
@media(max-width:640px){
  .viewer-page .modal.modal-image-active{padding:8px}
  .viewer-page .modal.modal-image-active .modal-card,
  .viewer-page .modal.modal-image-active .modal-body.modal-image-mode,
  .viewer-page .modal.modal-image-active .modal-image-zoom{
    width:fit-content;
    height:fit-content;
    max-width:calc(100vw - 16px);
    max-height:calc(100dvh - 16px);
    padding:0;
    margin:0;
    border-radius:20px;
  }
  .viewer-page .modal.modal-image-active .modal-image-zoom .modal-img-zoomable{
    max-width:calc(100vw - 16px)!important;
    max-height:calc(100dvh - 16px)!important;
    border-radius:20px;
  }
}