#sv-root { position: fixed; inset: 0; z-index: 12; pointer-events: none; font-family: 'DM Sans', 'Segoe UI', system-ui, sans-serif; color: #e2e8f0; }
#sv-root[hidden] { display: none; }
.sv-panel { position: absolute; right: 16px; bottom: 16px; width: min(320px, calc(100% - 32px)); padding: 10px 12px; background: rgba(10,18,28,.88); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.15); border-radius: 12px; box-shadow: 0 8px 32px rgba(0,0,0,.4); pointer-events: auto; font-size: .8rem; }
.sv-title { font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: #38bdf8; font-weight: 700; margin-bottom: 6px; }
.sv-modes { display: flex; gap: 6px; }
.sv-mode, .sv-retry { flex: 1; padding: 8px 10px; min-height: 40px; border-radius: 8px; border: 1px solid rgba(255,255,255,.15); background: rgba(15,23,42,.7); color: inherit; font: inherit; font-weight: 600; cursor: pointer; }
.sv-mode[aria-pressed="true"] { border-color: #38bdf8; background: rgba(56,189,248,.18); color: #fff; }
.sv-mode:disabled { opacity: .5; cursor: not-allowed; }
.sv-retry { background: #0284c7; border-color: #0284c7; color: #fff; margin-top: 8px; width: 100%; }
.sv-mode:focus-visible, .sv-retry:focus-visible, .sv-arrow:focus-visible, .sv-report:focus-visible { outline: 2px solid #38bdf8; outline-offset: 2px; }
.sv-note, .sv-meta, .sv-status { margin-top: 8px; color: #94a3b8; line-height: 1.4; }
.sv-status[data-error="true"] { color: #fecaca; }
.sv-meta a { color: #7dd3fc; }
.sv-links { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; }
.sv-walking { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.sv-walking[hidden], .sv-links[hidden] { display:none; }
html[data-screen-play=true] .sv-panel { bottom:calc(var(--screen-toolbar-height, 60px) + 28px); max-height:35dvh; overflow-y:auto; width:min(320px, calc(100% - 32px)); }
html[data-xr-active=true] .sv-walking { display:none; }
.sv-arrow { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 6px 10px; border-radius: 999px; border: 1px solid rgba(56,189,248,.5); background: rgba(2,132,199,.25); color: #fff; font: inherit; font-weight: 600; cursor: pointer; }
.sv-arrow:hover { background: rgba(2,132,199,.5); }
.sv-arrow svg { width: 16px; height: 16px; flex: none; }
.sv-compass { font-size: .7rem; color: #bae6fd; font-weight: 500; }
body.sv-streetview #google-attribution, body.sv-streetview #google-data-sources { display: none !important; }
.sv-title,.sv-compass{color:#d6bb8e}
.sv-panel{background:rgba(11,52,71,.94);border-color:#bb9864}
.sv-panel{pointer-events:none}
.sv-panel button,.sv-panel a{pointer-events:auto}
#photo-credit[hidden]{display:none!important}
.sv-mode[aria-pressed="true"]{border-color:#bb9864;background:rgba(187,152,100,.2)}
.sv-arrow{border-color:#bb9864;background:rgba(187,152,100,.2)}
body:not(.sv-streetview) .sv-panel{bottom:235px}
@media (max-width: 720px) {
  .sv-panel { left: 8px; right: 8px; width: auto; bottom: auto; top: var(--sv-top, 150px); padding: 8px 10px; max-height: calc(100dvh - var(--sv-top, 150px) - 34vh - 20px); overflow-y: auto; overscroll-behavior: contain; }
  .sv-title { margin-bottom: 4px; }
  .sv-mode, .sv-retry, .sv-arrow { min-height: 36px; padding: 5px 8px; }
  .sv-note, .sv-meta, .sv-status, .sv-links { margin-top: 5px; }
  .sv-meta { display: flex; flex-wrap: wrap; gap: 2px 10px; overflow-wrap: anywhere; }
}
@media (prefers-reduced-motion: no-preference) { .sv-arrow, .sv-mode { transition: background .15s, border-color .15s; } }