/* ============================================================
 * VPano Panorama-UI Glass Skin — V2 Layout
 * ------------------------------------------------------------
 * Visueller Anstrich nach `logo design/design_handoff_panorama_ui/
 *   VPano Panorama UI v2.html`. Wird AUSSCHLIESSLICH ueber CSS auf
 * die bestehende Legacy-DOM gelegt. KEINE DOM-/JS-/Funktions-
 * Aenderungen. Farben aus viewer-tokens.css (--vp-* / --vp-hs-*).
 *
 * Single source of truth fuer Editor (globals.css @import) und
 * Public/Export-Viewer (link rel="stylesheet").
 *
 * MUSS identisch sein mit:
 *   backend/src/templates/export-viewer/assets/panorama-ui-glass.css
 * Pruefen: `node scripts/check-viewer-tokens.mjs`
 * ============================================================ */

/* Handoff-Typografie (Onest / Manrope / JetBrains Mono) — inline @font-face mit
   ABSOLUTEM Pfad /export-viewer/fonts/, damit alte Touren (vor dem Redesign
   exportiert) die Fonts auch ohne neuen per-tour-Bundle laden koennen. */
@font-face {
    font-family: "Onest";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("/export-viewer/fonts/onest-cyrillic-wght-normal.woff2") format("woff2-variations");
    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
    font-family: "Onest";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("/export-viewer/fonts/onest-latin-wght-normal.woff2") format("woff2-variations");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Manrope";
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url("/export-viewer/fonts/manrope-cyrillic-wght-normal.woff2") format("woff2-variations");
    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
    font-family: "Manrope";
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url("/export-viewer/fonts/manrope-latin-wght-normal.woff2") format("woff2-variations");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "JetBrains Mono";
    font-style: normal;
    font-weight: 100 800;
    font-display: swap;
    src: url("/export-viewer/fonts/jetbrains-mono-cyrillic-wght-normal.woff2") format("woff2-variations");
    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
    font-family: "JetBrains Mono";
    font-style: normal;
    font-weight: 100 800;
    font-display: swap;
    src: url("/export-viewer/fonts/jetbrains-mono-latin-wght-normal.woff2") format("woff2-variations");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ─────────────────────────────────────────────────────────────
 * TOP BAR — V2: oben links Logo-Pille + Scene-Pille nebeneinander
 *           oben rechts Utility-Cluster (.toprail)
 * Wir nutzen #topBar's bestehenden Flex-Container, brechen aber
 * .top-center aus seiner absolute-Positionierung aus und stellen
 * .top-right rechtsbuendig per margin-left:auto.
 * ───────────────────────────────────────────────────────────── */

#topBar {
    top: 22px !important;
    left: 24px !important;
    right: 24px !important;
    gap: 12px;
    justify-content: flex-start !important;
    align-items: center !important;
}

/* TOP-LEFT = Client-Logo-Pille (Handoff: .clientlogo).
   Existierender Container .top-left wrappt #projectLogo (img).
   Wird nur gerendert wenn logoUrl gesetzt ist (viewer.js Logik). */
#topBar .top-left {
    height: var(--hit, 48px);
    padding: 0 18px !important;
    gap: 13px !important;
    border-radius: 16px !important;
    display: flex !important;
    align-items: center !important;
    background: var(--vp-hs-glass) !important;
    border: 1px solid var(--vp-hs-glass-line) !important;
    box-shadow: var(--vp-hs-sh) !important;
    backdrop-filter: var(--vp-hs-blur) !important;
    -webkit-backdrop-filter: var(--vp-hs-blur) !important;
    flex: 0 0 auto;
}
/* Wenn die Logo-Pille komplett leer ist (kein Kind) -> ausblenden. */
#topBar .top-left:empty {
    display: none !important;
}
/* Wenn das #projectLogo versteckt ist (no logoUrl), die ganze Pille ausblenden.
   Der .topbar-map-btn ist desktop UND mobile permanent display:none — also
   kein Grund die leere Glass-Pille stehen zu lassen. */
#topBar .top-left:has(img[style*="display: none"]),
#topBar .top-left:has(img[style*="display:none"]),
#topBar .top-left:has(img:not([src])),
#topBar .top-left:has(img[src=""]) {
    display: none !important;
}
#projectLogo {
    max-height: 28px !important;
    max-width: 160px !important;
    height: auto !important;
    width: auto !important;
    object-fit: contain !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}
/* TopBar Map-Button (mobile only — bleibt versteckt auf Desktop via legacy CSS) */
#topBar .top-left .icon-button {
    width: 38px;
    height: 38px;
    border-radius: 11px;
}

/* TOP-CENTER = Scene-Pille (Handoff: .scene).
   Im legacy ist .top-center `position: absolute; left:50%`. Wir brechen
   das auf und setzen es als statisches Flex-Item neben .top-left. */
#topBar .top-center {
    position: static !important;
    left: auto !important;
    transform: none !important;
    top: auto !important;
    max-width: none !important;
    height: var(--hit, 48px);
    padding: 0 18px 0 12px !important;
    gap: 13px !important;
    border-radius: 16px !important;
    display: flex !important;
    align-items: center !important;
    background: var(--vp-hs-glass) !important;
    border: 1px solid var(--vp-hs-glass-line) !important;
    box-shadow: var(--vp-hs-sh) !important;
    backdrop-filter: var(--vp-hs-blur) !important;
    -webkit-backdrop-filter: var(--vp-hs-blur) !important;
    flex: 0 0 auto;
}

/* Pin-Tile als ::before auf .top-center (links in der Scene-Pille).
   Default = DARK-Theme-SVG (white stroke). Light-Theme-Override unten swappt
   die SVG-URL auf dark stroke, sodass das Pin-Icon auf hellem BG lesbar ist. */
#topBar .top-center::before {
    content: "";
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M12 21s-7-5.2-7-11a7 7 0 1 1 14 0c0 5.8-7 11-7 11z'/><circle cx='12' cy='10' r='2.4'/></svg>") center / 17px 17px no-repeat,
        rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.22);
}
/* Light-Theme: dark-stroke SVG + leicht dunklerer Tile-Tint + dunklere Border.
   Greift fuer Editor (.vp-light) UND Public-Viewer ([data-ui-theme="light"]). */
.vp-light #topBar .top-center::before,
html[data-ui-theme="light"] #topBar .top-center::before,
[data-hotspot-theme="light"] #topBar .top-center::before {
    background:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2311151c' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M12 21s-7-5.2-7-11a7 7 0 1 1 14 0c0 5.8-7 11-7 11z'/><circle cx='12' cy='10' r='2.4'/></svg>") center / 17px 17px no-repeat,
        rgba(15, 20, 28, 0.06);
    border-color: rgba(15, 20, 28, 0.14);
}

/* Scene-Meta in der Pille */
#sceneMeta {
    display: flex !important;
    flex-direction: column;
    align-items: flex-start !important;
    gap: 0 !important;
    line-height: 1.12;
    min-width: 0;
    text-align: left !important;
}

/* Eyebrow „Локация" ueber dem Title via ::before auf #title */
#title::before {
    content: "Локация";
    display: block;
    font-family: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 9px;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--vp-hs-ink-dim);
    line-height: 1;
    margin-bottom: 2px;
    text-align: left !important;
}
#title {
    text-align: left !important;
}

/* Scene-Chip Counter (Handoff: .scene .cnt) — "03 / 12".
   viewer.js (Public) und EditorViewport (React) setzen data-scene-index +
   data-scene-total auf .top-center selbst. Der Counter rendert als
   ::after Flex-Item INNERHALB der Pille, rechts der Title-Spalte. */
#topBar .top-center #sceneMeta {
    align-items: flex-start !important;
}
#topBar .top-center[data-scene-total]:not([data-scene-total=""])::after {
    content: attr(data-scene-index) " / " attr(data-scene-total);
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    margin-left: 6px;
    padding-left: 13px;
    border-left: 1px solid var(--vp-hs-glass-line-soft);
    font-family: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 11px;
    font-weight: 400;
    line-height: 1;
    color: var(--vp-hs-ink-dim);
    white-space: nowrap;
    align-self: center;
}

#title {
    font-family: "Onest", "Inter", "Geist", system-ui, -apple-system, sans-serif !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    line-height: 1.12 !important;
    letter-spacing: -.01em !important;
    color: var(--vp-hs-ink) !important;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 280px;
}

/* Description ausblenden — Handoff hat keine */
#description {
    display: none !important;
}

/* EDITOR-SONDERFALL: der Title sitzt in einem inneren <button> (EDIT-Mode mit
   ScenePropertiesPopover) ODER in einem inneren <div> (PREVIEW-Mode) mit
   pillCls. Beide haben eigene Glass-Pille -> neutralisieren, damit
   .top-center die einzige sichtbare Pille bleibt. */
#topBar .top-center > button,
#topBar .top-center > div,
#topBar .top-center > div > button {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-radius: 0 !important;
    gap: 0 !important;
    transform: none !important;
}

/* TOP-RIGHT = Utility-Cluster `.toprail` rechtsbuendig (Handoff Layout). */
#topBar .top-right {
    margin-left: auto !important;
    padding: 5px !important;
    gap: 6px !important;
    border-radius: 16px !important;
    align-items: center !important;
    background: var(--vp-hs-glass) !important;
    border: 1px solid var(--vp-hs-glass-line) !important;
    box-shadow: var(--vp-hs-sh) !important;
    backdrop-filter: var(--vp-hs-blur) !important;
    -webkit-backdrop-filter: var(--vp-hs-blur) !important;
    flex: 0 0 auto;
}
#topBar .top-right .tool-buttons {
    gap: 6px !important;
}

/* Static Export hat sceneMeta (title+desc) IN .top-right.
   Wenn vorhanden: ausblenden — gehoert in den Scene-Chip. */
#topBar .top-right #sceneMeta {
    display: none !important;
}

/* Glass-Buttons im Handoff-Stil (.gbtn) — 42x42, transparent. */
#topBar .top-right .icon-button {
    width: 42px !important;
    height: 42px !important;
    border-radius: 14px !important;
    background: transparent !important;
    border: 0 !important;
    color: var(--vp-hs-ink) !important;
    transition: background .18s, color .18s, transform .12s !important;
    box-shadow: none !important;
}
#topBar .top-right .icon-button:hover {
    background: rgba(255, 255, 255, 0.10) !important;
    color: var(--vp-hs-ink) !important;
    transform: none !important;
}
#topBar .top-right .icon-button:active {
    transform: scale(.93) !important;
}
#topBar .top-right .icon-button svg {
    width: 21px !important;
    height: 21px !important;
    stroke-width: 1.7;
}

/* Info-Button war ghost-pill — auf gbtn-Stil mit Info-Icon via ::before. */
#projectInfoBtn.ghost-button {
    width: 42px !important;
    height: 42px !important;
    padding: 0 !important;
    border-radius: 14px !important;
    background: transparent !important;
    border: 0 !important;
    color: var(--vp-hs-ink) !important;
    font-size: 0 !important;
    text-indent: -9999px;
    overflow: hidden;
    text-transform: none !important;
    letter-spacing: 0 !important;
    transition: background .18s, color .18s, transform .12s !important;
    box-shadow: none !important;
    position: relative;
}
#projectInfoBtn.ghost-button:hover {
    background: rgba(255, 255, 255, 0.10) !important;
    color: var(--vp-hs-ink) !important;
    box-shadow: none !important;
}
#projectInfoBtn.ghost-button::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f3f6fb' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M12 11v5'/><circle cx='12' cy='7.6' r='.7' fill='%23f3f6fb'/></svg>") center / 21px 21px no-repeat;
    pointer-events: none;
}

/* TitleOverlay (Pille wenn Strip eingeklappt) — matches Scene-Pille. */
#titleOverlay {
    top: 22px;
    padding: 8px 18px;
    border-radius: 16px;
    background: var(--vp-hs-glass);
    border: 1px solid var(--vp-hs-glass-line);
    box-shadow: var(--vp-hs-sh);
    backdrop-filter: var(--vp-hs-blur);
    -webkit-backdrop-filter: var(--vp-hs-blur);
    font-family: "Onest", var(--vp-font-family);
    font-weight: 600;
    font-size: 15px;
    color: var(--vp-hs-ink);
    letter-spacing: -.01em;
}

/* ─────────────────────────────────────────────────────────────
 * RIGHT RAIL — Handoff `.rail`
 * Vertikal mittig rechts (top:50%, translateY(-50%)) — Glass-Pille
 * mit gbtn-Buttons 48×48 (Zoom, Auto-Rotate, FS, VR, Map).
 * Im V1 sitzt der filled Tour-CTA OBEN drauf, im V2 nicht (Tour wandert in den Dock).
 * ───────────────────────────────────────────────────────────── */
#controlsToolbar {
    position: absolute !important;
    right: 24px !important;
    top: 50% !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;
    z-index: 20 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 4px !important;
    /* Handoff `.rail`: padding:6px (Glass-Pill umschliesst Buttons mit 6px Inset). */
    padding: 6px !important;
    background: var(--vp-hs-glass) !important;
    border: 1px solid var(--vp-hs-glass-line) !important;
    box-shadow: var(--vp-hs-sh) !important;
    backdrop-filter: var(--vp-hs-blur) !important;
    -webkit-backdrop-filter: var(--vp-hs-blur) !important;
    border-radius: 18px !important;
    width: auto !important;
    height: auto !important;
}

/* Leere Wrapper aus dem PREVIEW-Modus ausblenden — wenn EditorOverlayVisibility
   `null` zurueckgibt, ist der React-Slot leer, aber der `EditorOverlayVisibility`
   selbst rendert keinen Wrapper-Div im PREVIEW (return null). Hier rein
   defensiv: jede leere `.group/visibility`-Huelle und jeder direkte leere
   Wrapper-Div im Rail wird ausgeblendet. */
#controlsToolbar > div:empty,
#controlsToolbar > div > div:empty {
    display: none !important;
}
/* Zwischenraum-Hygiene: wenn ein direkter Child-Wrapper ueberhaupt keinen
   sichtbaren Button enthaelt (z.B. weil children durch interne Bedingungen
   weggefallen sind), nicht layoutwirksam. */
#controlsToolbar > div:not(:has(button)):not(:has(.relative)):not(:has(svg)) {
    display: none !important;
}

/* Glass-Button (Handoff `.gbtn`): 48×48, transparent, hover-bg, kein Border.
   Public-Viewer hat .icon-button direkt im #controlsToolbar.
   Editor hat <div>{EditorOverlayVisibility-Wrapper} > <button> als Grandchild. */
#controlsToolbar .icon-button:not(.vp-sticker),
#controlsToolbar > div > button:not(.vp-sticker),
#controlsToolbar > button:not(.vp-sticker) {
    width: var(--hit, 48px) !important;
    height: var(--hit, 48px) !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--vp-hs-ink) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer;
    position: relative;
    border-radius: 14px !important;
    transition: background .18s, color .18s, transform .12s !important;
    box-shadow: none !important;
}
#controlsToolbar .icon-button:not(.vp-sticker):hover,
#controlsToolbar > div > button:not(.vp-sticker):hover,
#controlsToolbar > button:not(.vp-sticker):hover {
    background: rgba(255, 255, 255, .10) !important;
    color: var(--vp-hs-ink) !important;
    transform: none !important;
}
#controlsToolbar .icon-button:not(.vp-sticker):active,
#controlsToolbar > div > button:not(.vp-sticker):active,
#controlsToolbar > button:not(.vp-sticker):active {
    transform: scale(.93) !important;
}
#controlsToolbar .icon-button.is-active,
#controlsToolbar .icon-button.tour-active {
    background: rgba(255, 255, 255, .16) !important;
    color: var(--vp-hs-ink) !important;
}
/* Stroke/Style fuer alle Nicht-Sticker-SVGs in der Rail (Editor inline-SVGs
   + Public-Viewer .icon-button + Lucide-Icons im Editor). */
#controlsToolbar :where(button:not(.vp-sticker)) svg,
#controlsToolbar .vp-rail-svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7 !important;
    stroke-linecap: round;
    stroke-linejoin: round;
}
/* Main-Button-SVGs (NICHT die Sticker-SVGs) IMMER 21x21 — egal wie tief
   verschachtelt im EditorOverlayVisibility-Wrapper. Inline width=/height=-
   Attribute sind im JSX entfernt; hier reicht CSS mit hoher Spezifitaet. */
#controlsToolbar :where(button:not(.vp-sticker)) > svg,
#controlsToolbar :where(button:not(.vp-sticker)) svg.vp-rail-svg,
#controlsToolbar .vp-rail-svg {
    width: 21px !important;
    height: 21px !important;
    min-width: 21px !important;
    min-height: 21px !important;
}

/* Editor-Sondersache: Minimap-Toggle ist in <div className="relative"> verschachtelt
   und enthaelt einen weiteren <button> als Sticker-Geschwister. Die Sticker bleiben
   absolut positioniert (oben rechts mit -top-3 -right-3) und werden nicht ueber
   den `> div > button`-Selector gefangen, weil sie tiefer liegen. */
#controlsToolbar > div > .relative > button:not(.vp-sticker) {
    width: var(--hit, 48px) !important;
    height: var(--hit, 48px) !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--vp-hs-ink) !important;
    border-radius: 14px !important;
}
#controlsToolbar > div > .relative > button:not(.vp-sticker):hover {
    background: rgba(255, 255, 255, .10) !important;
    color: var(--vp-hs-ink) !important;
}
#controlsToolbar > div > .relative > button:not(.vp-sticker) svg {
    width: 21px !important;
    height: 21px !important;
}

/* EDITOR-Stickers (Eye / EyeOff / Pencil) — innerhalb des Toolbar-Backgrounds
   bleiben, damit sie die Pille visuell nicht aufblaehen. Im Right-Rail
   ruecken wir sie ueber den Eltern-Container nach oben/rechts in den
   Toolbar-Innenbereich (positive Offsets). */
/* ─────────────────────────────────────────────────────────────
 * EDITOR-Sticker (.vp-sticker) — globale Klasse fuer alle Eye / EyeOff /
 * Pencil-Buttons im Editor. Im JSX gesetzt in:
 *   EditorOverlayVisibility, LogoSettingsButton, BusinessCardSettingsPopover,
 *   SceneListSettingsButton, AudioSettingsPopover und die Inline-Eye/Pencil
 *   in EditorViewport (Visitenkarte, Minimap, Scene-Strip).
 *
 * Erscheint ueberall identisch — Background, Border, Icon-Farbe einheitlich.
 * On/Off-State wird ueber das Icon (Eye vs EyeOff) selbst gezeigt, nicht
 * ueber Background-Variation. Tailwind-bg/text-Klassen werden ueberschrieben. */
.vp-sticker {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    min-height: 18px !important;
    flex: 0 0 18px !important;
    background: rgba(15, 18, 24, 0.78) !important;
    border: 1px solid rgba(255, 255, 255, 0.28) !important;
    border-radius: 9999px !important;
    color: rgba(255, 255, 255, 0.92) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .35) !important;
    filter: none !important;
}
.vp-sticker:hover {
    background: rgba(20, 24, 32, 0.88) !important;
    border-color: rgba(255, 255, 255, 0.40) !important;
    color: var(--vp-hs-ink) !important;
}
.vp-sticker svg {
    width: 11px !important;
    height: 11px !important;
    color: rgba(255, 255, 255, 0.92) !important;
    opacity: 1 !important;
}

/* Position-Override pro Container, damit die Sticker an der oberen rechten
   Ecke der Buttons sitzen. */
#controlsToolbar [class~="-top-3"][class~="-right-3"],
#topBar [class~="-top-3"][class~="-right-3"] {
    top: -4px !important;
    right: -8px !important;
    z-index: 36;
}


/* ─────────────────────────────────────────────────────────────
 * V1 — DOCK (unified glass pill bottom-center, sceneListMode "strip")
 * ------------------------------------------------------------
 * Handoff `.dock`: EINE Glass-Pille bottom-center mit:
 *   .track   — collapsible Card-Strip (Locations)
 *   .dockbar — always visible:
 *     .pbgroup       — Tour-Btn + .pdiv + Audio-Btn
 *     .dockright     — .navs (Prev/Next) + .loctoggle (collapse)
 *
 * DOM-IDs (Editor + Public-Viewer + Static-Export):
 *   #bottomStrip.dock           (Dock-Root)
 *     #sceneList.track          (Cards)
 *     .dockbar
 *       .pbgroup
 *         #dockTourSlot         — tour-panorama.js injiziert #tourPlayBtn hier
 *         .pdiv
 *         #dockAudioSlot        — #audioPlayer wird hier reingemovet
 *       .dockright
 *         #dockNavs.navs        — #dockPrev / #dockNext
 *         #dockLocToggle.loctoggle
 *
 * Greift NUR wenn html.strip-mode aktiv ist.
 * ───────────────────────────────────────────────────────────── */

/* Reset Editor's PreviewSceneStrip-Wrapper (.relative > #stripToggle) — wird im
   V1 nicht angezeigt, da #dockLocToggle in .dockbar die Collapse-Funktion uebernimmt. */
html.strip-mode #bottomStrip > .relative,
html.strip-mode #bottomStrip > .strip-scenes-outer,
html.strip-mode #bottomStrip .dock-legacy-toggle,
html.strip-mode #bottomStrip .dock-legacy-arrow {
    display: none !important;
}

/* Dock-Root: Glass-Pille bottom-center, width min(1180px, 100%-48px), padding 8. */
html.strip-mode #bottomStrip.dock {
    position: absolute !important;
    left: 50% !important;
    bottom: 22px !important;
    transform: translateX(-50%) !important;
    z-index: 20 !important;
    width: min(1180px, calc(100% - 48px)) !important;
    max-width: none !important;
    background: var(--vp-hs-glass) !important;
    border: 1px solid var(--vp-hs-glass-line) !important;
    box-shadow: var(--vp-hs-sh) !important;
    backdrop-filter: var(--vp-hs-blur) !important;
    -webkit-backdrop-filter: var(--vp-hs-blur) !important;
    border-radius: 20px !important;
    padding: 8px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    counter-reset: scene 0;
    font-family: "Onest", "Inter", "Geist", system-ui, -apple-system, sans-serif !important;
}
/* Breiten-Override: max 5 Karten (5 × 150 + 4 × 10 Gap + 2 × 8 Padding = ~806px).
   Mehr Szenen scrollen im .track horizontal. */
html.strip-mode #bottomStrip.dock {
    width: min(820px, calc(100% - 32px)) !important;
}

/* ─── TRACK (.track / #sceneList) ───
   WICHTIG: display:flex OHNE !important — damit React's style={{display:none}}
   und vanilla-JS track.style.display = "none" funktionieren (LocToggle Collapse).

   max-height: none ueberschreibt Legacy-style.css `.strip-scenes{max-height:120px}`,
   das sonst den 2-Zeilen-Title abschneidet. */
html.strip-mode #bottomStrip .track,
html.strip-mode #bottomStrip #sceneList,
html.strip-mode #bottomStrip .strip-scenes {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    padding: 2px !important;
    margin: 0 0 4px 0 !important;
    display: flex;
    align-items: stretch !important;
    gap: 10px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-behavior: smooth;
    scrollbar-width: none;
    border-radius: 0 !important;
    width: 100%;
    max-height: none !important;
    max-width: none !important;
}
html.strip-mode #bottomStrip .track::-webkit-scrollbar,
html.strip-mode #bottomStrip #sceneList::-webkit-scrollbar { display: none; }

/* ─── CARD (.card / .scene-card) — 150x88 img + cap ─── */
html.strip-mode #bottomStrip .scene-card,
html.strip-mode #bottomStrip .card {
    flex: 0 0 150px !important;
    width: 150px !important;
    cursor: pointer;
    border-radius: 12px !important;
    overflow: hidden;
    position: relative;
    border: 1px solid var(--vp-hs-glass-line-soft) !important;
    background: transparent !important;
    transition: transform .16s, border-color .16s !important;
    box-shadow: none !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    counter-increment: scene;
    /* min-height fix gegen externe Flex-Stretch / Track-Constraints. User-Vorgabe 125px. */
    min-height: 125px !important;
}
html.strip-mode #bottomStrip .scene-card:hover,
html.strip-mode #bottomStrip .card:hover {
    transform: translateY(-3px) !important;
    border-color: rgba(255, 255, 255, .3) !important;
}
html.strip-mode #bottomStrip .scene-card .scene-thumb,
html.strip-mode #bottomStrip .scene-card > img,
html.strip-mode #bottomStrip .card .img {
    width: 100% !important;
    height: 88px !important;
    background-size: cover;
    background-position: center;
    object-fit: cover;
    display: block;
    flex: 0 0 88px;
}
html.strip-mode #bottomStrip .scene-thumb-empty {
    background: rgba(255, 255, 255, .05);
    color: rgba(255, 255, 255, .35);
    font-size: 10px;
    display: flex !important;
    align-items: center;
    justify-content: center;
}
/* Caption (.scene-title / .cap): Eyebrow OBEN + Title (Manrope) UNTEN — Handoff `.cap`.

   WICHTIG: Public-Viewer laedt zusaetzlich style.css mit Legacy-Rule
   `.scene-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis }`.
   Wir muessen white-space + overflow + text-overflow auf dem Parent explizit
   zuruecksetzen, sonst klemmt's via Inheritance den 2-Zeilen-Wrap im <b>. */
html.strip-mode #bottomStrip .scene-card .scene-title,
html.strip-mode #bottomStrip .card .cap {
    padding: 6px 9px !important;
    background: rgba(8, 11, 18, .5) !important;
    color: var(--vp-hs-ink) !important;
    font-family: "Manrope", "Inter", "Geist", system-ui, sans-serif !important;
    font-weight: 600 !important;
    font-size: 11px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 1px !important;
    line-height: 1.2;
    text-align: left !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
}
/* Title <b> — Manrope 11px, 2-zeilig mit Line-Clamp Ellipsis am Ende.
   User-Vorgabe: Single-Line ellipsis hat zu wenig vom Titel gezeigt
   ("halb abgeschnitten"). 2 Zeilen mit -webkit-line-clamp zeigen den Titel
   besser, dann clamp-Ellipsis "..." bei Ueberlauf. */
html.strip-mode #bottomStrip .scene-card .scene-title b,
html.strip-mode #bottomStrip .card .cap b {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    color: #fff !important;
    font-family: "Manrope", "Inter", "Geist", system-ui, sans-serif !important;
    font-weight: 600 !important;
    font-size: 11px !important;
    letter-spacing: -.01em !important;
    white-space: normal !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1.25 !important;
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    overflow-wrap: anywhere;
}
/* Eyebrow <span> / <.se> — JetBrains Mono 8.5px, UPPERCASE, dim */
html.strip-mode #bottomStrip .scene-card .scene-title .se,
html.strip-mode #bottomStrip .scene-card .scene-title > span,
html.strip-mode #bottomStrip .card .cap span {
    display: block !important;
    font-family: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace !important;
    font-weight: 500 !important;
    font-size: 8.5px !important;
    letter-spacing: .1em !important;
    text-transform: uppercase !important;
    color: rgba(255, 255, 255, .55) !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
}
/* Active/Current Card */
html.strip-mode #bottomStrip .scene-card.cur,
html.strip-mode #bottomStrip .scene-card.active,
html.strip-mode #bottomStrip .card.cur {
    border-color: #fff !important;
    box-shadow: none !important;
    transform: none !important;
}
html.strip-mode #bottomStrip .scene-card.cur::after,
html.strip-mode #bottomStrip .scene-card.active::after,
html.strip-mode #bottomStrip .card.cur::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 2px solid #fff;
    border-radius: 12px;
    pointer-events: none;
}
html.strip-mode #bottomStrip .scene-card.cur .scene-title,
html.strip-mode #bottomStrip .scene-card.active .scene-title,
html.strip-mode #bottomStrip .card.cur .cap {
    background: rgba(241, 244, 249, .92) !important;
    color: #11151c !important;
}
html.strip-mode #bottomStrip .scene-card.cur .scene-title .se,
html.strip-mode #bottomStrip .scene-card.cur .scene-title > span,
html.strip-mode #bottomStrip .scene-card.active .scene-title .se,
html.strip-mode #bottomStrip .scene-card.active .scene-title > span,
html.strip-mode #bottomStrip .card.cur .cap span {
    color: rgba(17, 21, 28, .6) !important;
}
html.strip-mode #bottomStrip .scene-card.cur .scene-title b,
html.strip-mode #bottomStrip .scene-card.active .scene-title b,
html.strip-mode #bottomStrip .card.cur .cap b {
    color: #11151c !important;
}

/* ─── DOCKBAR (.dockbar) ─── */
#bottomStrip.dock .dockbar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 14px !important;
    padding: 0 2px !important;
    width: 100%;
}

/* Playback group (links): Tour + Separator + Audio */
#bottomStrip.dock .pbgroup {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    flex: 0 1 auto;
    min-width: 0;
}

/* Separator (.pdiv) */
#bottomStrip.dock .pdiv {
    width: 1px !important;
    height: 24px !important;
    background: var(--vp-hs-glass-line-soft) !important;
    margin: 0 3px !important;
    flex: 0 0 1px;
}

/* Dock-Slot wrappers (Tour + Audio) — schlanke Flex-Container fuer Slot-Content. */
#bottomStrip.dock .dock-slot {
    display: flex;
    align-items: center;
}
#bottomStrip.dock .dock-slot:empty {
    display: none;
}
/* Wenn beide Slots leer sind, .pdiv mit ausblenden. */
#bottomStrip.dock .pbgroup:not(:has(.dock-slot-tour > *)):not(:has(.dock-slot-audio > *)) {
    display: none;
}
#bottomStrip.dock .pbgroup:not(:has(.dock-slot-tour > *)) .pdiv,
#bottomStrip.dock .pbgroup:not(:has(.dock-slot-audio > *)) .pdiv {
    display: none;
}

/* ─── TOUR SEGMENT (.seg.tour, im #dockTourSlot) ─── */
#bottomStrip.dock .seg,
#bottomStrip.dock #dockTourSlot > button {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    height: 44px !important;
    padding: 0 16px 0 7px !important;
    border: 0 !important;
    cursor: pointer !important;
    border-radius: 999px !important;
    background: transparent !important;
    color: var(--vp-hs-ink) !important;
    transition: background .18s !important;
    font-family: "Onest", "Inter", "Geist", system-ui, sans-serif !important;
    font-weight: 600 !important;
    font-size: 13.5px !important;
    letter-spacing: -.01em !important;
    box-shadow: none !important;
    width: auto !important;
}
#bottomStrip.dock .seg:hover,
#bottomStrip.dock #dockTourSlot > button:hover {
    background: rgba(255, 255, 255, .08) !important;
}
#bottomStrip.dock .seg.on {
    background: rgba(255, 255, 255, .13) !important;
}
/* Icon-Circle (.seg .ico) — 32x32 semi-transparent */
#bottomStrip.dock .seg .ico {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 32px !important;
    background: rgba(255, 255, 255, .12) !important;
    border: 1px solid rgba(255, 255, 255, .20) !important;
    color: var(--vp-hs-ink) !important;
    transition: .18s !important;
}
#bottomStrip.dock .seg .ico svg {
    width: 16px !important;
    height: 16px !important;
}
/* On-State: Icon-Circle filled (white grad) mit dunklem Glyph */
#bottomStrip.dock .seg.on .ico {
    background: var(--vp-hs-fill) !important;
    border-color: transparent !important;
    color: var(--vp-hs-on-fill) !important;
}
/* Tour-Segment Glyph: filled (no stroke) */
#bottomStrip.dock .seg.tour .ico svg {
    fill: currentColor !important;
    stroke: none !important;
}
/* Play/Pause-Toggle via .on-Class (Handoff V1) */
#bottomStrip.dock .seg.tour .t-pause { display: none !important; }
#bottomStrip.dock .seg.tour.on .t-play { display: none !important; }
#bottomStrip.dock .seg.tour.on .t-pause { display: block !important; }

/* Progress-Ring um den Icon-Circle (loest .tstat-Counter ab — verhindert Layout-Shift
   beim Tour-Start). Conic-Gradient fuettert die Progress-Fuellung; radial-mask
   schneidet die innere Flaeche aus → Ring 3px aussen. Steuerung per CSS-Var
   --tour-progress (0..100), gesetzt vom tour-panorama.js updateUI(). */
#bottomStrip.dock .seg.tour .ico { position: relative; }
#bottomStrip.dock .seg.tour.on .ico::after {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    background: conic-gradient(
        from -90deg,
        #fff 0,
        #fff calc(var(--tour-progress, 0) * 1%),
        rgba(255, 255, 255, .22) 0
    );
    /* Ring-Dicke 0.6px (80% duenner als vorher 3px) — User-Vorgabe.
       Mask schneidet die innere Flaeche aus, nur ein duenner Outer-Ring bleibt. */
    -webkit-mask: radial-gradient(circle, transparent calc(50% - 0.6px), #000 calc(50% - 0.6px));
            mask: radial-gradient(circle, transparent calc(50% - 0.6px), #000 calc(50% - 0.6px));
    pointer-events: none;
    z-index: 1;
}

/* .tstat-Counter wird durch den Ring abgeloest — global ausblenden. */
#bottomStrip.dock .seg.tour .tstat { display: none !important; }
/* Label (.lbl) */
#bottomStrip.dock .seg .lbl {
    color: var(--vp-hs-ink);
    font-weight: 600;
    letter-spacing: -.01em;
    white-space: nowrap;
}
/* Tour Status (.tstat) — abgeloest durch den Progress-Ring um den Play-Circle.
   Bleibt im DOM (tour-panorama.js schreibt weiterhin Werte rein), aber wird
   nicht mehr angezeigt → kein Layout-Shift beim Tour-Start. */

/* Legacy Tour-CTA Fallback: wenn tour-panorama.js noch in #controlsToolbar
   injiziert hat (alte Exporte ohne #dockTourSlot), zumindest sicher hidden lassen
   bis Dock-Slot vorhanden ist. Wir resetten die alten fixed/absolute-Hacks
   hier, weil Dock-Slot der neue Standard-Pfad ist. */
#controlsToolbar #tourPlayBtn:not(.seg),
#controlsToolbar #tourStopBtn:not(.seg) {
    position: static !important;
    bottom: auto !important;
    left: auto !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* ─── AUDIO SEGMENT (#audioPlayer in #dockAudioSlot) ───
   Wir flachklopfen die Editor-Wrapper (`.relative` + innere flex-div) via
   display:contents, sodass audioPlayPause, audioVolume, audioMute DIREKTE
   Kinder von #audioPlayer werden. Damit funktioniert flex-order korrekt. */
#bottomStrip.dock #dockAudioSlot {
    display: flex;
    align-items: center;
}
#bottomStrip.dock #audioPlayer.audio-player {
    position: static !important;
    left: auto !important;
    bottom: auto !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;
    z-index: auto !important;
    height: 44px !important;
    width: auto !important;
    padding: 0 16px 0 7px !important;
    border-radius: 999px !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    color: var(--vp-hs-ink) !important;
    font-family: "Onest", "Inter", "Geist", system-ui, sans-serif !important;
    transition: background .18s !important;
}
#bottomStrip.dock #audioPlayer.audio-player:hover {
    background: rgba(255, 255, 255, .08) !important;
}
/* Editor-Wrappers flachklopfen — audioPP, audioVolume, audioMute werden direkte Kinder. */
#bottomStrip.dock #audioPlayer.audio-player > .relative {
    display: contents !important;
}
#bottomStrip.dock #audioPlayer.audio-player > .relative > div:not(.absolute) {
    display: contents !important;
}

/* Audio Play/Pause als 32x32 Icon-Circle (.seg .ico-Look). */
#bottomStrip.dock #audioPlayer #audioPlayPause.audio-pp {
    flex: 0 0 32px !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, .12) !important;
    border: 1px solid rgba(255, 255, 255, .20) !important;
    color: var(--vp-hs-ink) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    transition: background .18s, border-color .18s !important;
}
#bottomStrip.dock #audioPlayer #audioPlayPause.audio-pp:hover {
    background: rgba(255, 255, 255, .18) !important;
    border-color: rgba(255, 255, 255, .30) !important;
}
#bottomStrip.dock #audioPlayer #audioPlayPause.audio-pp svg {
    width: 14px !important;
    height: 14px !important;
    fill: currentColor !important;
    stroke: none !important;
}

/* "Аудио"-Label vor dem Volume-Slider */
#bottomStrip.dock #audioPlayer.audio-player::before {
    content: "Аудио";
    color: var(--vp-hs-ink);
    font-weight: 600;
    font-size: 13.5px;
    letter-spacing: -.01em;
    white-space: nowrap;
    margin-right: 2px;
    order: 2;
}
#bottomStrip.dock #audioPlayer #audioPlayPause.audio-pp { order: 1; }
#bottomStrip.dock #audioPlayer #audioVolume.audio-vol { order: 3; }
#bottomStrip.dock #audioPlayer #audioMute.audio-mute { order: 4; }

/* Music-Icon in Editor's AmbientAudioPill ausblenden — Label "Аудио" ersetzt es. */
#bottomStrip.dock #audioPlayer.audio-player .lucide-music,
#bottomStrip.dock #audioPlayer.audio-player svg.lucide-music {
    display: none !important;
}

/* Volume-Slider — 84x4 white-Gradient, thumb 13x13 round white */
#bottomStrip.dock #audioPlayer #audioVolume.audio-vol {
    -webkit-appearance: none;
    appearance: none;
    width: 84px !important;
    height: 4px !important;
    border-radius: 999px;
    background: linear-gradient(to right, rgba(255, 255, 255, .85) 0%, rgba(255, 255, 255, .85) var(--vp-vol, 50%), rgba(255, 255, 255, .22) var(--vp-vol, 50%), rgba(255, 255, 255, .22) 100%);
    accent-color: #fff !important;
    cursor: pointer;
    margin: 0 12px 0 4px !important;
    outline: none;
}
#bottomStrip.dock #audioPlayer #audioVolume.audio-vol::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #fff;
    border: 0;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .4);
    cursor: pointer;
}
#bottomStrip.dock #audioPlayer #audioVolume.audio-vol::-moz-range-thumb {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #fff;
    border: 0;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .4);
    cursor: pointer;
}

/* Audio Mute-Button (kleines transparentes Glyph) */
#bottomStrip.dock #audioPlayer #audioMute.audio-mute {
    width: 24px !important;
    height: 24px !important;
    border-radius: 50% !important;
    background: transparent !important;
    border: 0 !important;
    color: var(--vp-hs-ink-dim) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    transition: color .18s !important;
}
#bottomStrip.dock #audioPlayer #audioMute.audio-mute:hover {
    color: var(--vp-hs-ink) !important;
}
#bottomStrip.dock #audioPlayer #audioMute.audio-mute svg {
    width: 14px !important;
    height: 14px !important;
}

/* "Hidden"-State (viewer.js classList.add("hidden")) — Public-Viewer */
#bottomStrip.dock #audioPlayer.audio-player.hidden {
    display: none !important;
}

/* Empty-State "Без звука" Pille (Editor, kein audioUrl) — sieht wie .seg aus */
#bottomStrip.dock #audioPlayer.audio-player > .relative > button {
    height: 44px !important;
    padding: 0 16px 0 7px !important;
    border-radius: 999px !important;
    background: transparent !important;
    border: 0 !important;
    color: var(--vp-hs-ink-dim) !important;
    font-family: "Onest", "Inter", "Geist", system-ui, sans-serif !important;
    font-weight: 600 !important;
    font-size: 13.5px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}
#bottomStrip.dock #audioPlayer.audio-player > .relative > button:hover {
    background: rgba(255, 255, 255, .08) !important;
    color: var(--vp-hs-ink) !important;
}

/* Editor-Sticker (Pencil/Eye) am Audio bleiben sichtbar oben rechts.
   Wrapper "-top-3 -right-3" -> wir positionieren ihn ueber das Audio-Segment
   im Dock. */
#bottomStrip.dock #dockAudioSlot .absolute.-top-3.-right-3,
#bottomStrip.dock #dockAudioSlot [class~="-top-3"][class~="-right-3"] {
    top: -28px !important;
    right: -4px !important;
    z-index: 36;
}

/* ─── DOCKRIGHT — Navs (Prev/Next) + LocToggle ─── */
#bottomStrip.dock .dockright {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex: 0 0 auto;
}
#bottomStrip.dock .navs {
    display: flex;
    gap: 6px !important;
}
#bottomStrip.dock .navs button {
    width: 32px !important;
    height: 32px !important;
    border-radius: 9px !important;
    border: 1px solid var(--vp-hs-glass-line) !important;
    background: rgba(255, 255, 255, .04) !important;
    color: var(--vp-hs-ink) !important;
    cursor: pointer;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: .16s;
    padding: 0 !important;
}
#bottomStrip.dock .navs button:hover {
    background: rgba(255, 255, 255, .12) !important;
    color: var(--vp-hs-ink) !important;
}
#bottomStrip.dock .navs svg {
    width: 16px !important;
    height: 16px !important;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* LocToggle */
#bottomStrip.dock .loctoggle {
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
    height: 40px !important;
    padding: 0 14px !important;
    border: 1px solid var(--vp-hs-glass-line) !important;
    background: rgba(255, 255, 255, .04) !important;
    cursor: pointer !important;
    border-radius: 12px !important;
    color: var(--vp-hs-ink) !important;
    font-family: "Onest", "Inter", "Geist", system-ui, sans-serif !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    transition: .16s !important;
    white-space: nowrap;
}
#bottomStrip.dock .loctoggle:hover {
    background: rgba(255, 255, 255, .1) !important;
}
#bottomStrip.dock .loctoggle .ti {
    width: 16px !important;
    height: 16px !important;
    fill: none;
    stroke: var(--vp-hs-ink-dim);
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}
#bottomStrip.dock .loctoggle .loctoggle-label {
    color: var(--vp-hs-ink);
}
#bottomStrip.dock .loctoggle .lc {
    font-family: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace !important;
    font-size: 11px !important;
    color: var(--vp-hs-ink-dim) !important;
    font-weight: 400 !important;
}
#bottomStrip.dock .loctoggle .lc b {
    color: var(--vp-hs-ink) !important;
    font-weight: 600 !important;
}
#bottomStrip.dock .loctoggle .chev {
    width: 16px !important;
    height: 16px !important;
    fill: none;
    stroke: var(--vp-hs-ink);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Share-Button im Dockbar (rechts neben LocToggle) — Icon-Square, matches .navs */
#bottomStrip.dock .dock-share-btn {
    width: 40px !important;
    height: 40px !important;
    border-radius: 12px !important;
    border: 1px solid var(--vp-hs-glass-line) !important;
    background: rgba(255, 255, 255, .04) !important;
    color: var(--vp-hs-ink) !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    transition: background .16s, color .16s !important;
    flex: 0 0 40px !important;
}
#bottomStrip.dock .dock-share-btn:hover {
    background: rgba(255, 255, 255, .12) !important;
}
#bottomStrip.dock .dock-share-btn svg {
    width: 16px !important;
    height: 16px !important;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ─── Editor-Sticker (.dock-edit-sticker) am Dock — Pencil + Eye fuer Strip-Sichtbarkeit. */
html.strip-mode #bottomStrip .dock-edit-sticker {
    position: absolute !important;
    top: -12px !important;
    right: 12px !important;
    z-index: 36 !important;
}

/* Im strip-mode den Popup-Selector (Кнопка) ausblenden */
html.strip-mode #sceneSelector {
    display: none !important;
}

/* Safety-Net: Legacy #sceneSelector (Floating-Button + Popup) ist im neuen
   Dock-Design IMMER ersetzt — auch bevor viewer.js die Mode-Klasse setzt
   (Race zwischen SSR-HTML und JS-Init). Bleibt nur sichtbar wenn explizit
   ein Mode-loser Fallback-Pfad das Legacy-Markup forced. */
html:not(.strip-mode):not(.popup-mode) #sceneSelector {
    display: none !important;
}

/* Safety-Net: Scenepanel (V2) ist Default-`is-open` im SSR-Markup, damit
   viewer.js sie nicht erst per JS oeffnen muss. Ohne popup-mode-Klasse
   wuerde sie sonst als Default-Block mittig auf dem Panorama erscheinen. */
html:not(.popup-mode) #scenePanel,
html:not(.popup-mode) #bottomStrip .scenepanel {
    display: none !important;
}

/* ─────────────────────────────────────────────────────────────────
 * V2 — POPUP-DOCK (sceneListMode "popup")
 *
 * Markup folgt 1:1 dem Handoff `VPano Panorama UI v2.html`:
 *   #bottomStrip.dock           (gleiche unified Glass-Pille wie V1)
 *     #scenePanel.scenepanel    — vertikales Panel ueber LocToggle
 *       .sphead                 — Header (Folder-Icon + Label + Counter)
 *       #splist.splist          — Liste mit .srow-Buttons
 *     .dockbar                  — gleiche Bottom-Bar wie V1
 *       .pbgroup                — Tour-Slot + .pdiv + Audio-Slot (unveraendert)
 *       .dockright              — NUR LocToggle (KEIN Prev/Next in V2)
 *
 * Greift NUR wenn html.popup-mode aktiv ist. Track (#sceneList) und Navs
 * (#dockNavs) werden ausgeblendet. Audio-/Tour-/LocToggle-Styles werden
 * von der strip-mode-Sektion uebernommen, indem die Selektoren hier
 * dupliziert werden (gleiche Specs, anderer Mode-Prefix).
 * ───────────────────────────────────────────────────────────────── */

/* Im popup-mode auch alle Legacy-Wrapper im Dock verstecken. */
html.popup-mode #bottomStrip > .relative,
html.popup-mode #bottomStrip > .strip-scenes-outer,
html.popup-mode #bottomStrip .dock-legacy-toggle,
html.popup-mode #bottomStrip .dock-legacy-arrow {
    display: none !important;
}

/* Dock-Pille (identisch zu strip-mode, leicht andere Width-Constraint:
   Im V2 ist der Dock thinner, weil keine Cards drin sind). */
html.popup-mode #bottomStrip.dock {
    position: absolute !important;
    left: 50% !important;
    bottom: 22px !important;
    transform: translateX(-50%) !important;
    z-index: 30 !important;
    width: min(720px, calc(100% - 48px)) !important;
    background: var(--vp-hs-glass) !important;
    backdrop-filter: var(--vp-hs-blur, saturate(1.4) blur(20px)) !important;
    -webkit-backdrop-filter: var(--vp-hs-blur, saturate(1.4) blur(20px)) !important;
    border: 1px solid var(--vp-hs-glass-line) !important;
    border-radius: 20px !important;
    box-shadow: var(--vp-hs-shadow) !important;
    padding: 12px !important;
    overflow: visible !important;
}

/* Im popup-mode IMMER Track ausblenden (auch wenn populiert). */
html.popup-mode #bottomStrip .track,
html.popup-mode #bottomStrip #sceneList,
html.popup-mode #bottomStrip .strip-scenes {
    display: none !important;
}

/* Auch dockNavs (Prev/Next) im V2 NICHT — Handoff hat NUR LocToggle rechts. */
html.popup-mode #bottomStrip .navs,
html.popup-mode #bottomStrip #dockNavs {
    display: none !important;
}

/* ─── Scenepanel (vertikales Popup ueber LocToggle) ─── */
html.popup-mode #bottomStrip .scenepanel,
html.popup-mode #bottomStrip #scenePanel {
    position: absolute !important;
    right: 12px !important;
    bottom: calc(100% + 12px) !important;
    z-index: 25 !important;
    width: 300px !important;
    max-height: 60vh !important;
    flex-direction: column !important;
    background: var(--vp-hs-glass-strong, rgba(13, 17, 28, .74)) !important;
    backdrop-filter: var(--vp-hs-blur, saturate(1.4) blur(20px)) !important;
    -webkit-backdrop-filter: var(--vp-hs-blur, saturate(1.4) blur(20px)) !important;
    border: 1px solid var(--vp-hs-glass-line) !important;
    border-radius: 18px !important;
    box-shadow: var(--vp-hs-shadow) !important;
    overflow: hidden !important;
}

/* Scenepanel-Sichtbarkeit per Class:
   .scenepanel.is-open => display:flex (gezeigt)
   .scenepanel:not(.is-open) => display:none (versteckt)
   Default: open (analog Handoff JS-Default). */
html.popup-mode #bottomStrip .scenepanel.is-open,
html.popup-mode #bottomStrip #scenePanel.is-open {
    display: flex !important;
}
html.popup-mode #bottomStrip .scenepanel:not(.is-open),
html.popup-mode #bottomStrip #scenePanel:not(.is-open) {
    display: none !important;
}

/* Header der Scenepanel (Folder-Icon + Label + Counter) */
html.popup-mode #bottomStrip .scenepanel .sphead {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 15px 18px 12px;
    font-family: "Onest", "Inter", "Geist", system-ui, sans-serif;
    font-weight: 600;
    font-size: 13px;
    color: var(--vp-hs-ink);
    flex: 0 0 auto;
}
html.popup-mode #bottomStrip .scenepanel .sphead svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: var(--vp-hs-ink-dim);
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex: 0 0 auto;
}
html.popup-mode #bottomStrip .scenepanel .sphead .cnt {
    margin-left: auto;
    font-family: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 11px;
    color: var(--vp-hs-ink-dim);
    font-weight: 400;
}
html.popup-mode #bottomStrip .scenepanel .sphead .cnt b {
    color: var(--vp-hs-ink);
    font-weight: 600;
}

/* Splist — Scroll-Container fuer .srow-Buttons */
html.popup-mode #bottomStrip .splist,
html.popup-mode #bottomStrip #splist {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 0 12px 14px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, .2) transparent;
    flex: 1 1 auto;
}
html.popup-mode #bottomStrip .splist::-webkit-scrollbar,
html.popup-mode #bottomStrip #splist::-webkit-scrollbar {
    width: 6px;
}
html.popup-mode #bottomStrip .splist::-webkit-scrollbar-thumb,
html.popup-mode #bottomStrip #splist::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .18);
    border-radius: 999px;
}

/* SRow — einzelne Szenen-Zeile */
html.popup-mode #bottomStrip .srow {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 7px;
    border: 1px solid transparent;
    border-radius: 12px;
    cursor: pointer;
    background: transparent;
    color: var(--vp-hs-ink);
    transition: background .16s, border-color .16s;
    width: 100%;
    text-align: left;
    font-family: inherit;
}
html.popup-mode #bottomStrip .srow:hover {
    background: rgba(255, 255, 255, .07);
}
html.popup-mode #bottomStrip .srow.cur {
    border-color: rgba(255, 255, 255, .6);
    background: rgba(255, 255, 255, .10);
}

/* Thumbnail mit Index-Badge */
html.popup-mode #bottomStrip .srow .sthumb {
    width: 62px;
    height: 42px;
    border-radius: 8px;
    flex: 0 0 62px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: rgba(255, 255, 255, .06);
    position: relative;
    border: 1px solid var(--vp-hs-glass-line-soft, rgba(255, 255, 255, .08));
    overflow: hidden;
}
html.popup-mode #bottomStrip .srow .sthumb i {
    position: absolute;
    left: 4px;
    bottom: 4px;
    font-style: normal;
    font-family: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 8px;
    color: var(--vp-hs-ink);
    background: rgba(8, 11, 18, .72);
    padding: 1px 4px;
    border-radius: 4px;
    line-height: 1;
    font-weight: 500;
}

/* Name-Block: kleines Eyebrow + Title */
html.popup-mode #bottomStrip .srow .sname {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.2;
    flex: 1 1 auto;
}
html.popup-mode #bottomStrip .srow .sname span {
    font-family: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 8px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--vp-hs-ink-dim);
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
html.popup-mode #bottomStrip .srow .sname b {
    font-family: "Onest", "Inter", "Geist", system-ui, sans-serif;
    font-weight: 600;
    font-size: 13px;
    color: var(--vp-hs-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: -.01em;
}

/* Im popup-mode den Floating-SceneSelector (Legacy) auch ausblenden —
   der Dock uebernimmt die Scene-Liste. */
html.popup-mode #sceneSelector {
    display: none !important;
}

/* Audio + Tour + LocToggle im V2 ueberblenden die strip-mode-Regeln nicht;
   sie greifen weiterhin via html.strip-mode-Selektoren. Wir spiegeln hier
   die wichtigsten Bottom-Bar-Regeln auch fuer popup-mode (gleiche Specs). */
html.popup-mode #bottomStrip .dockbar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 14px !important;
    padding: 0 2px !important;
}
html.popup-mode #bottomStrip .pbgroup {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    flex: 1 1 auto;
    min-width: 0;
}
html.popup-mode #bottomStrip .pdiv {
    width: 1px !important;
    height: 24px !important;
    background: var(--vp-hs-glass-line-soft, rgba(255, 255, 255, .08)) !important;
    margin: 0 3px !important;
    flex: 0 0 auto;
}
html.popup-mode #bottomStrip .dock-slot {
    display: flex;
    align-items: center;
}
html.popup-mode #bottomStrip .dock-slot:empty {
    display: none !important;
}
html.popup-mode #bottomStrip .pbgroup:not(:has(.dock-slot-tour > *)):not(:has(.dock-slot-audio > *)) {
    display: none !important;
}
html.popup-mode #bottomStrip .pbgroup:not(:has(.dock-slot-tour > *)) .pdiv,
html.popup-mode #bottomStrip .pbgroup:not(:has(.dock-slot-audio > *)) .pdiv {
    display: none !important;
}
html.popup-mode #bottomStrip .dockright {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex: 0 0 auto;
    position: relative; /* scenepanel haengt sich an .dock, aber dockright ist auch akzeptabel. */
}
html.popup-mode #bottomStrip .loctoggle {
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
    height: 40px !important;
    padding: 0 14px !important;
    border: 1px solid var(--vp-hs-glass-line) !important;
    background: rgba(255, 255, 255, .04) !important;
    cursor: pointer !important;
    border-radius: 12px !important;
    color: var(--vp-hs-ink) !important;
    font-family: "Onest", "Inter", "Geist", system-ui, sans-serif !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    transition: .16s !important;
    white-space: nowrap;
}
html.popup-mode #bottomStrip .loctoggle:hover {
    background: rgba(255, 255, 255, .1) !important;
}
html.popup-mode #bottomStrip .loctoggle.on {
    background: rgba(255, 255, 255, .12) !important;
}
html.popup-mode #bottomStrip .loctoggle .ti {
    width: 16px !important;
    height: 16px !important;
    fill: none;
    stroke: var(--vp-hs-ink-dim);
    stroke-width: 1.7;
}
html.popup-mode #bottomStrip .loctoggle .loctoggle-label {
    color: var(--vp-hs-ink);
}
html.popup-mode #bottomStrip .loctoggle .lc {
    font-family: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace !important;
    font-size: 11px !important;
    color: var(--vp-hs-ink-dim) !important;
    font-weight: 400 !important;
}
html.popup-mode #bottomStrip .loctoggle .lc b {
    color: var(--vp-hs-ink) !important;
    font-weight: 600 !important;
}
html.popup-mode #bottomStrip .loctoggle .chev {
    width: 16px !important;
    height: 16px !important;
    fill: none;
    stroke: var(--vp-hs-ink);
    stroke-width: 2;
}

/* Editor-Sticker (Pencil + Eye) am Dock auch im popup-mode oben rechts. */
html.popup-mode #bottomStrip .dock-edit-sticker {
    position: absolute !important;
    top: -12px !important;
    right: 12px !important;
    z-index: 36 !important;
}

/* ─────────────────────────────────────────────────────────────
 * MOBILE (≤ 640px) — 1:1 nach Handoff
 *   `logo design/design_handoff_panorama_ui/VPano Panorama UI - Mobile.html`
 *
 * Strategie (Option C — pragmatisch, CSS-only):
 *   - TopBar: .top-left/.top-center/.top-right werden auf Handoff-Maße
 *     getrimmt; der Pin (.top-center::before) wird auf Mobile entfernt
 *     (Handoff hat keinen Pin in .scene).
 *   - Right Rail: 14px Inset, Buttons 42x42, Radius 11/16 — Auto-Rotate/
 *     Gyro/VR/Map bleiben sichtbar (User-Vorgabe "Funktionen bleiben").
 *   - Bottom Dock: Cards 124x72 (Handoff-Werte), Audio-Volume-Slider
 *     versteckt (Mute reicht auf Touch), "Локации тура"-Label im
 *     LocToggle versteckt. Tour-CTA + Audio-Pille bleiben in der
 *     dockbar (kein Strip-Header-Reflow — bewusster Funktion-Erhalt).
 *   - NavArrow existiert nicht in unserem DOM — skip.
 * ───────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    /* ─── TOPBAR — Handoff `.top` (top:60px, left/right:14, gap:10) ─── */
    #topBar {
        top: 14px !important;
        left: 14px !important;
        right: 14px !important;
        gap: 10px !important;
        flex-wrap: nowrap;
        align-items: center !important;
    }

    /* Logo-Pille (.clientlogo) — 46h, padding 0 14, radius 14 */
    #topBar .top-left {
        height: 46px !important;
        padding: 0 14px !important;
        gap: 10px !important;
        border-radius: 14px !important;
        flex: 0 0 auto !important;
    }
    #projectLogo {
        max-height: 24px !important;
        max-width: 120px !important;
    }
    /* Optionaler Map-Btn (mobile-only legacy) — auf 38x38 lassen, Inset in der Pille */
    #topBar .top-left .icon-button {
        width: 38px !important;
        height: 38px !important;
        border-radius: 11px !important;
    }

    /* Scene-Pille (.scene) — 46h, padding 0 14, radius 14, KEIN Pin */
    #topBar .top-center {
        height: 46px !important;
        padding: 0 14px !important;
        gap: 10px !important;
        border-radius: 14px !important;
        min-width: 0;
        flex: 1 1 auto !important;
    }
    /* Pin auf Mobile entfernen — Handoff `.scene` hat keinen Pin */
    #topBar .top-center::before {
        display: none !important;
    }
    /* Eyebrow "Локация" — Handoff 8px tracking .16em */
    #title::before {
        font-size: 8px !important;
        letter-spacing: .16em !important;
        margin-bottom: 1px !important;
    }
    /* Title — Handoff 13px Onest 600 */
    #title {
        font-size: 13px !important;
        max-width: 100%;
    }
    /* Counter im Scene-Chip — Handoff 10px */
    #topBar .top-center[data-scene-total]:not([data-scene-total=""])::after {
        font-size: 10px !important;
        margin-left: 4px !important;
        padding-left: 9px !important;
    }

    /* Top-Right Cluster — Handoff hat dort einen STANDALONE 46x46 Info-Btn
       (.ubtn). Wir behalten den Toprail-Cluster (Funktionen Info+Share+BC),
       trimmen ihn aber auf Handoff-naehere Werte:
        - 46h, padding 4 (passt fuer 38px-Buttons), radius 13. */
    #topBar .top-right {
        height: 46px !important;
        padding: 4px !important;
        gap: 4px !important;
        border-radius: 13px !important;
    }
    #topBar .top-right .tool-buttons {
        gap: 4px !important;
    }
    #topBar .top-right .icon-button,
    #projectInfoBtn.ghost-button {
        width: 38px !important;
        height: 38px !important;
        border-radius: 11px !important;
    }
    #topBar .top-right .icon-button svg {
        width: 19px !important;
        height: 19px !important;
    }
    #projectInfoBtn.ghost-button::before {
        background-size: 19px 19px;
    }

    /* TitleOverlay (fallback Pille) folgt Scene-Pille */
    #titleOverlay {
        top: 14px;
        padding: 6px 14px;
        font-size: 13px;
        border-radius: 14px;
    }

    /* ─── RIGHT MINI-RAIL — Handoff `.rail` ─────────────────────────
       right:14, padding:5, gap:4, radius:16
       Buttons 42x42, radius 11
       SVG 19px
       Auto-Rotate/Gyro/VR/Map bleiben sichtbar (User: keine Funktion entfernen) */
    #controlsToolbar {
        right: 14px !important;
        padding: 5px !important;
        gap: 4px !important;
        border-radius: 16px !important;
    }
    #controlsToolbar .icon-button:not(.vp-sticker),
    #controlsToolbar > div > button:not(.vp-sticker),
    #controlsToolbar > button:not(.vp-sticker) {
        width: 42px !important;
        height: 42px !important;
        border-radius: 11px !important;
    }
    #controlsToolbar .icon-button svg,
    #controlsToolbar > div > button svg,
    #controlsToolbar > button svg {
        width: 19px !important;
        height: 19px !important;
        stroke-width: 1.7 !important;
    }
    /* Falls Tour-Btn als Legacy noch in der Rail liegt (alte Exporte): klein halten */
    #controlsToolbar #tourPlayBtn,
    #controlsToolbar #tourStopBtn {
        margin-bottom: 4px;
    }
    #controlsToolbar #tourPlayBtn svg,
    #controlsToolbar #tourStopBtn svg {
        width: 18px !important;
        height: 18px !important;
    }

    /* ─── V1 BOTTOM DOCK — Handoff `.dock` (left/right:14, bottom:22) ───
       Dock-Pille selbst nutzt `.strip`-Werte (padding 11/11/12, radius 18).
       Cards: 124x72, cap padding 6/9. Audio-Vol-Slider verbergen (Mute reicht).
       LocToggle: "Локации тура"-Label verstecken. */
    html.strip-mode #bottomStrip.dock {
        left: 14px !important;
        right: 14px !important;
        bottom: 14px !important;
        width: auto !important;
        transform: none !important;
        padding: 8px 8px 8px !important;
        border-radius: 18px !important;
        gap: 9px !important;
    }

    /* Track gap 9px (Handoff) */
    html.strip-mode #bottomStrip .track,
    html.strip-mode #bottomStrip #sceneList {
        gap: 9px !important;
        padding: 1px !important;
    }

    /* Cards 124x72 (Handoff `.card`) */
    html.strip-mode #bottomStrip .scene-card,
    html.strip-mode #bottomStrip .card {
        flex: 0 0 124px !important;
        width: 124px !important;
        border-radius: 11px !important;
    }
    html.strip-mode #bottomStrip .scene-card .scene-thumb,
    html.strip-mode #bottomStrip .scene-card > img,
    html.strip-mode #bottomStrip .card .img {
        height: 72px !important;
        flex: 0 0 72px !important;
    }
    /* Caption — padding 6/9, title 11px (Handoff `.cap b` Manrope 11), span 8px */
    html.strip-mode #bottomStrip .scene-card .scene-title,
    html.strip-mode #bottomStrip .card .cap {
        padding: 6px 9px !important;
    }
    html.strip-mode #bottomStrip .scene-card .scene-title b,
    html.strip-mode #bottomStrip .card .cap b {
        font-size: 11px !important;
    }
    html.strip-mode #bottomStrip .scene-card .scene-title .se,
    html.strip-mode #bottomStrip .scene-card .scene-title > span,
    html.strip-mode #bottomStrip .card .cap span {
        font-size: 8px !important;
        letter-spacing: .1em !important;
    }
    html.strip-mode #bottomStrip .card.cur::after {
        border-radius: 11px !important;
    }

    /* Dockbar kompakter — Tour-Seg + Audio-Seg bleiben gemeinsam in einer Reihe */
    #bottomStrip.dock .dockbar {
        gap: 8px !important;
    }
    #bottomStrip.dock .pbgroup {
        gap: 8px !important;
    }
    #bottomStrip.dock .seg,
    #bottomStrip.dock #dockTourSlot > button {
        height: 38px !important;
        padding: 0 12px 0 5px !important;
        font-size: 12px !important;
    }
    #bottomStrip.dock .seg .ico {
        width: 28px !important;
        height: 28px !important;
        flex: 0 0 28px !important;
    }
    #bottomStrip.dock .seg .ico svg {
        width: 14px !important;
        height: 14px !important;
    }

    /* Tour-Slot Mobile: Label "Автотур" wandert KLEIN UEBER das Icon (statt
       rechts daneben). Gleicher Stil wie der Scene-Card-Eyebrow `.se`:
       JetBrains Mono 8px, UPPERCASE, letter-spacing .1em, dim color.

       WICHTIG: height fix auf 50px (statt min-height + auto), damit Tour-Pille
       und Audio-Pille pixel-exakt gleich hoch sind — sonst sind die Icons im
       Dockbar nicht auf der gleichen Linie. */
    #bottomStrip.dock .seg.tour {
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 4px !important;
        height: 50px !important;
        min-height: 50px !important;
        min-width: 64px !important;
        padding: 4px 10px !important;
        box-sizing: border-box !important;
    }
    #bottomStrip.dock .seg.tour .lbl {
        order: -1 !important;
        font-family: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace !important;
        font-weight: 500 !important;
        font-size: 8px !important;
        letter-spacing: .1em !important;
        text-transform: uppercase !important;
        color: var(--vp-hs-ink-dim) !important;
        line-height: 1 !important;
    }
    /* .tstat-Counter ist global hidden — Progress laeuft als Ring um den Play-Circle. */

    /* ─── Audio-Segment Mobile ───
       Pille wird kompakt, Eyebrow-Label "Аудио" UEBER dem Icon (mirror Tour).
       Slider + Mute leben in einem Vertikal-Popup, das per JS-Class `.vol-open`
       oberhalb der Pille eingeblendet wird.
       height + min-height 50px exakt wie Tour — damit Icons auf gleicher Linie. */
    #bottomStrip.dock #audioPlayer.audio-player {
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 4px !important;
        height: 50px !important;
        min-height: 50px !important;
        min-width: 64px !important;
        padding: 4px 10px !important;
        position: relative !important;
        cursor: pointer;
        box-sizing: border-box !important;
    }
    /* "АУДИО"-Eyebrow ueber dem Icon — gleicher Stil wie .scene-title .se */
    #bottomStrip.dock #audioPlayer.audio-player::before {
        content: "Аудио" !important;
        order: -1 !important;
        font-family: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace !important;
        font-weight: 500 !important;
        font-size: 8px !important;
        letter-spacing: .1em !important;
        text-transform: uppercase !important;
        color: var(--vp-hs-ink-dim) !important;
        line-height: 1 !important;
        margin: 0 !important;
        white-space: nowrap;
    }
    #bottomStrip.dock #audioPlayer #audioPlayPause.audio-pp {
        width: 28px !important;
        height: 28px !important;
        flex: 0 0 28px !important;
    }
    #bottomStrip.dock #audioPlayer #audioPlayPause.audio-pp svg {
        width: 12px !important;
        height: 12px !important;
    }

    /* Default: Slider + Mute inline AUSBLENDEN (sie wandern in den Popup) */
    #bottomStrip.dock #audioPlayer #audioVolume.audio-vol,
    #bottomStrip.dock #audioPlayer #audioMute.audio-mute {
        display: none !important;
    }

    /* ─── Vertikal-Popup (`.audio-player.vol-open`) ───
       Glass-Tube oberhalb der Pille, enthaelt rotated Slider + Mute.
       ::after ist der Tube-Background, Slider/Mute werden absolut platziert. */
    #bottomStrip.dock #audioPlayer.audio-player.vol-open::after {
        content: "";
        position: absolute;
        bottom: calc(100% + 8px);
        left: 50%;
        transform: translateX(-50%);
        width: 56px;
        height: 220px;
        background: var(--vp-hs-glass-strong, rgba(13, 17, 28, .82));
        border: 1px solid var(--vp-hs-glass-line);
        border-radius: 18px;
        box-shadow: var(--vp-hs-shadow);
        backdrop-filter: var(--vp-hs-blur);
        -webkit-backdrop-filter: var(--vp-hs-blur);
        z-index: 30;
        pointer-events: none;
    }
    /* Slider (rotated -90deg) — vertikal, oben = laut */
    #bottomStrip.dock #audioPlayer.audio-player.vol-open #audioVolume.audio-vol {
        display: block !important;
        position: absolute !important;
        bottom: calc(100% + 50px) !important;
        left: 50% !important;
        width: 160px !important;
        height: 30px !important;
        margin: 0 !important;
        padding: 0 !important;
        transform: translate(-50%, 0) rotate(-90deg) !important;
        transform-origin: center !important;
        background: transparent !important;
        z-index: 31;
        accent-color: #fff !important;
        touch-action: none;
    }
    #bottomStrip.dock #audioPlayer.audio-player.vol-open #audioVolume.audio-vol::-webkit-slider-runnable-track {
        height: 4px !important;
        border-radius: 999px !important;
        background: linear-gradient(to right, rgba(255, 255, 255, .85) 0%, rgba(255, 255, 255, .85) var(--vp-vol, 50%), rgba(255, 255, 255, .22) var(--vp-vol, 50%), rgba(255, 255, 255, .22) 100%) !important;
    }
    #bottomStrip.dock #audioPlayer.audio-player.vol-open #audioVolume.audio-vol::-moz-range-track {
        height: 4px !important;
        border-radius: 999px !important;
        background: linear-gradient(to right, rgba(255, 255, 255, .85) 0%, rgba(255, 255, 255, .85) var(--vp-vol, 50%), rgba(255, 255, 255, .22) var(--vp-vol, 50%), rgba(255, 255, 255, .22) 100%) !important;
    }
    #bottomStrip.dock #audioPlayer.audio-player.vol-open #audioVolume.audio-vol::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 22px !important;
        height: 22px !important;
        border-radius: 50% !important;
        background: #fff !important;
        border: 0 !important;
        box-shadow: 0 2px 6px rgba(0, 0, 0, .55) !important;
        margin-top: -9px !important;
        cursor: pointer;
    }
    #bottomStrip.dock #audioPlayer.audio-player.vol-open #audioVolume.audio-vol::-moz-range-thumb {
        width: 22px !important;
        height: 22px !important;
        border-radius: 50% !important;
        background: #fff !important;
        border: 0 !important;
        box-shadow: 0 2px 6px rgba(0, 0, 0, .55) !important;
        cursor: pointer;
    }
    /* Mute unten im Popup */
    #bottomStrip.dock #audioPlayer.audio-player.vol-open #audioMute.audio-mute {
        display: flex !important;
        position: absolute !important;
        bottom: calc(100% + 18px) !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: 34px !important;
        height: 34px !important;
        border-radius: 50% !important;
        background: rgba(255, 255, 255, .08) !important;
        border: 1px solid rgba(255, 255, 255, .20) !important;
        color: var(--vp-hs-ink) !important;
        z-index: 31;
    }
    #bottomStrip.dock #audioPlayer.audio-player.vol-open #audioMute.audio-mute svg {
        width: 16px !important;
        height: 16px !important;
    }
    /* Empty-State "Без звука" Pille (Editor) — Höhe angleichen */
    #bottomStrip.dock #audioPlayer.audio-player > .relative > button {
        height: 38px !important;
        padding: 0 12px 0 5px !important;
        font-size: 12px !important;
    }
    #bottomStrip.dock #audioPlayer.audio-player > .relative > div:not(.absolute),
    #bottomStrip.dock #audioPlayer.audio-player.glass,
    #bottomStrip.dock #audioPlayer.audio-player:not(:has(> .relative)) {
        height: 38px !important;
        padding: 0 10px 0 5px !important;
    }

    /* LocToggle — kompakter, Label verstecken (Handoff hat nur Icon+Counter) */
    #bottomStrip.dock .loctoggle .loctoggle-label {
        display: none !important;
    }
    #bottomStrip.dock .loctoggle {
        height: 38px !important;
        padding: 0 10px !important;
        gap: 6px !important;
        font-size: 12px !important;
        border-radius: 11px !important;
    }
    /* Navs (Prev/Next) — auf Mobile komplett ausblenden (Handoff-Vorgabe,
       User-Bestaetigung): nur Touch-Scroll + LocToggle. Greift in beiden Modi. */
    #bottomStrip.dock .navs,
    #bottomStrip.dock #dockNavs {
        display: none !important;
    }
    /* Dockright kompakter zusammen */
    #bottomStrip.dock .dockright {
        gap: 6px !important;
    }

    /* ─── V2 POPUP-DOCK MOBILE ───
       Dock-Pille auf 14/14/22-Inset, Scenepanel auf 86vw begrenzen,
       "Локации тура"-Label im Toggle verstecken, Audio-Vol-Slider weg
       (greift via Selektoren oben). */
    html.popup-mode #bottomStrip.dock {
        left: 14px !important;
        right: 14px !important;
        bottom: 22px !important;
        width: auto !important;
        transform: none !important;
        padding: 11px !important;
        border-radius: 18px !important;
    }
    html.popup-mode #bottomStrip .scenepanel,
    html.popup-mode #bottomStrip #scenePanel {
        width: min(300px, calc(100vw - 56px)) !important;
        right: 0 !important;
        max-height: 60vh !important;
    }
    html.popup-mode #bottomStrip .scenepanel .sphead {
        padding: 12px 14px 10px !important;
        font-size: 12.5px !important;
    }
    html.popup-mode #bottomStrip .splist,
    html.popup-mode #bottomStrip #splist {
        padding: 0 10px 12px !important;
    }
    html.popup-mode #bottomStrip .loctoggle .loctoggle-label {
        display: none !important;
    }
    html.popup-mode #bottomStrip .loctoggle {
        height: 38px !important;
        padding: 0 10px !important;
        font-size: 12px !important;
        border-radius: 11px !important;
    }
}