/* MyProject Universal Player v2.2.0
   Build: SHARED-R2-v14-20260717
   Shared R2 stylesheet; derived from production v2.1.1 without visual changes. */

:root {
  --mp-loader-bg: #090909;
  --mp-loader-gold: #c9a86b;
  --mp-loader-gold-soft: rgba(201, 168, 107, 0.34);
  --mp-progress: 0;
}

html.mp-loader-active,
body.mp-loader-active {
  overflow: hidden !important;
}

.mp-loader,
.mp-loader * {
  box-sizing: border-box;
}

.mp-loader {
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--mp-loader-bg);
  isolation: isolate;
  opacity: 1;
  visibility: visible;
  transition: opacity 620ms cubic-bezier(.5, 0, .2, 1), visibility 620ms;
}

.mp-loader::before {
  content: "";
  position: absolute;
  inset: -28%;
  pointer-events: none;
  opacity: .16;
  background-image:
    linear-gradient(rgba(201, 168, 107, .022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201, 168, 107, .022) 1px, transparent 1px);
  background-size: 48px 48px;
  transform: perspective(650px) rotateX(62deg) translateY(30%);
  transform-origin: center bottom;
  -webkit-mask-image: linear-gradient(to top, #000, transparent 74%);
  mask-image: linear-gradient(to top, #000, transparent 74%);
}

.mp-loader[hidden],
.mp-loader.is-hidden {
  display: none;
}

.mp-loader.is-exiting {
  opacity: 0;
  visibility: hidden;
}

.mp-loader__center {
  position: relative;
  width: min(78vw, 760px);
  display: grid;
  justify-items: center;
  gap: clamp(25px, 4vw, 42px);
  transform: translateY(-1.5vh);
}

.mp-loader__logo-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 489.87 / 90.18;
  display: grid;
  place-items: center;
}

.mp-loader__foundation {
  position: absolute;
  left: 2%;
  right: 2%;
  top: 50%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--mp-loader-gold) 15%, var(--mp-loader-gold) 85%, transparent);
  box-shadow: 0 0 12px var(--mp-loader-gold-soft);
  transform: scaleX(0);
  opacity: 0;
  animation: mp-foundation 900ms 80ms cubic-bezier(.75,0,.15,1) both;
}

.mp-loader__logo {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: auto;
  overflow: hidden;
  animation: mp-logo-settle 720ms 1580ms cubic-bezier(.16,1,.3,1) both;
}

.mp-loader__logo .mp-piece {
  --in-x: 0px;
  --in-y: 0px;
  --out-x: 0px;
  --out-y: 0px;
  --rot: 0deg;
  fill: var(--mp-loader-gold);
  fill-opacity: 0;
  stroke: var(--mp-loader-gold);
  stroke-width: 1.05;
  stroke-linejoin: miter;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  vector-effect: non-scaling-stroke;
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
  filter: blur(7px);
  animation:
    mp-piece-build 780ms cubic-bezier(.2,.9,.25,1) both,
    mp-piece-trace 690ms cubic-bezier(.4,0,.15,1) both;
  animation-delay: var(--delay), var(--delay);
}

.mp-piece:nth-child(1)  { --delay: 260ms;  --in-x: -46px; --in-y: -26px; --out-x: -54px; --out-y: -32px; --rot: -3deg; }
.mp-piece:nth-child(2)  { --delay: 390ms;  --in-x: 0px;   --in-y: -56px; --out-x: 0px;   --out-y: -62px; --rot: 2deg; }
.mp-piece:nth-child(3)  { --delay: 500ms;  --in-x: -58px; --in-y: 22px;  --out-x: -68px; --out-y: 30px;  --rot: 2deg; }
.mp-piece:nth-child(4)  { --delay: 610ms;  --in-x: -26px; --in-y: 54px;  --out-x: -32px; --out-y: 62px;  --rot: -2deg; }
.mp-piece:nth-child(5)  { --delay: 700ms;  --in-x: 0px;   --in-y: -58px; --out-x: 0px;   --out-y: -66px; --rot: 1deg; }
.mp-piece:nth-child(6)  { --delay: 790ms;  --in-x: 0px;   --in-y: 58px;  --out-x: 0px;   --out-y: 66px;  --rot: -1deg; }
.mp-piece:nth-child(7)  { --delay: 900ms;  --in-x: 26px;  --in-y: 55px;  --out-x: 32px;  --out-y: 64px;  --rot: 2deg; }
.mp-piece:nth-child(8)  { --delay: 990ms;  --in-x: 44px;  --in-y: -38px; --out-x: 52px;  --out-y: -44px; --rot: -2deg; }
.mp-piece:nth-child(9)  { --delay: 1040ms; --in-x: 44px;  --in-y: -38px; --out-x: 52px;  --out-y: -44px; --rot: 2deg; }
.mp-piece:nth-child(10) { --delay: 1110ms; --in-x: 56px;  --in-y: 0px;   --out-x: 66px;  --out-y: 0px;   --rot: -2deg; }
.mp-piece:nth-child(11) { --delay: 1180ms; --in-x: 44px;  --in-y: 38px;  --out-x: 52px;  --out-y: 44px;  --rot: 2deg; }
.mp-piece:nth-child(12) { --delay: 1260ms; --in-x: 62px;  --in-y: -22px; --out-x: 72px;  --out-y: -28px; --rot: 3deg; }
.mp-piece:nth-child(13) { --delay: 1340ms; --in-x: 70px;  --in-y: 20px;  --out-x: 82px;  --out-y: 26px;  --rot: -3deg; }

.mp-logo-reflection {
  pointer-events: none;
  opacity: 1;
}

.mp-logo-reflection__band {
  opacity: 0;
  transform-box: view-box;
  transform-origin: center;
  animation: mp-logo-reflection 960ms 2200ms cubic-bezier(.2,.7,.3,1) both;
}

.mp-loader__status {
  width: min(47%, 330px);
  display: grid;
  gap: 12px;
}

.mp-loader__progress-track {
  position: relative;
  height: 1px;
  overflow: visible;
  background: rgba(201, 168, 107, .14);
}

.mp-loader__progress-track::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(201,168,107,.38), var(--mp-loader-gold));
  box-shadow: 0 0 9px rgba(201,168,107,.38);
  transform-origin: left center;
  transform: scaleX(var(--mp-progress));
  transition: transform 280ms cubic-bezier(.2,.8,.2,1);
}

.mp-loader__label {
  color: rgba(201,168,107,.58);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .22em;
  text-align: center;
  white-space: nowrap;
  opacity: 0;
  animation: mp-label-in 600ms 1050ms ease-out both;
}

.mp-loader.is-complete .mp-loader__logo {
  animation: mp-logo-complete 600ms cubic-bezier(.16,1,.3,1) both;
}

.mp-loader.is-complete .mp-loader__progress-track::before {
  box-shadow: 0 0 16px 1px rgba(201,168,107,.62);
}

.mp-loader.is-unbuilding .mp-loader__foundation,
.mp-loader.is-unbuilding .mp-loader__status {
  animation: mp-interface-out 420ms ease-in both;
}

.mp-loader.is-unbuilding .mp-loader__logo .mp-piece {
  animation: mp-piece-unbuild 600ms cubic-bezier(.55,0,.8,.25) both;
  animation-delay: calc((13 - var(--piece-index)) * 22ms);
}

.mp-loader.is-unbuilding .mp-logo-reflection {
  display: none;
}

@keyframes mp-foundation {
  0% { transform: scaleX(0); opacity: 0; }
  25% { opacity: .8; }
  70% { transform: scaleX(1); opacity: .78; }
  100% { transform: scaleX(1); opacity: .12; }
}

@keyframes mp-piece-build {
  0% {
    opacity: 0;
    filter: blur(7px);
    transform: translate3d(var(--in-x), var(--in-y), 0) rotate(var(--rot)) scale(.86);
  }
  58% { opacity: 1; filter: blur(1.4px); }
  82% { transform: translate3d(0,0,0) rotate(0) scale(1.018); }
  100% {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0,0,0) rotate(0) scale(1);
  }
}

@keyframes mp-piece-trace {
  0% { stroke-dashoffset: 1; fill-opacity: 0; }
  62% { stroke-dashoffset: 0; fill-opacity: 0; }
  100% { stroke-dashoffset: 0; fill-opacity: 1; }
}

@keyframes mp-logo-settle {
  0% { opacity: .94; }
  55% { opacity: 1; }
  100% { opacity: 1; }
}

@keyframes mp-logo-reflection {
  0% {
    opacity: 0;
    transform: translateX(0) skewX(-18deg);
  }
  15% { opacity: .92; }
  78% { opacity: .74; }
  100% {
    opacity: 0;
    transform: translateX(780px) skewX(-18deg);
  }
}

@keyframes mp-label-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes mp-logo-complete {
  0% { transform: scale(1); filter: brightness(1); }
  44% { transform: scale(1.016); filter: brightness(1.28); }
  100% { transform: scale(1); filter: brightness(1); }
}

@keyframes mp-interface-out {
  to { opacity: 0; transform: translateY(7px) scaleX(.92); }
}

@keyframes mp-piece-unbuild {
  0% {
    opacity: 1;
    fill-opacity: 1;
    stroke-dashoffset: 0;
    filter: blur(0);
    transform: translate3d(0,0,0) scale(1);
  }
  100% {
    opacity: 0;
    fill-opacity: 0;
    stroke-dashoffset: 1;
    filter: blur(5px);
    transform: translate3d(var(--out-x), var(--out-y), 0) rotate(var(--rot)) scale(.91);
  }
}

@media (max-width: 640px) {
  .mp-loader__center {
    width: min(84vw, 560px);
    gap: 28px;
  }

  .mp-loader__status {
    width: min(62%, 260px);
  }

  .mp-loader__label {
    font-size: 8px;
    letter-spacing: .17em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mp-loader__foundation,
  .mp-loader__logo,
  .mp-loader__logo .mp-piece,
  .mp-logo-reflection__band,
  .mp-loader__label {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
  }

  .mp-loader__logo .mp-piece {
    opacity: 1;
    fill-opacity: 1;
    stroke-dashoffset: 0;
    filter: none;
    transform: none;
  }
}

/* ===== Player styles ===== */
:root {
      --bg: #262626;
      --glass-bg: rgba(18, 18, 18, 0.32);
      --glass-border: rgba(165, 129, 65, 0.28);
      --gold: #A58141;
      --gap: 24px;
    }

    html,
    body {
      position: relative !important;
      margin: 0 !important;
      padding: 0 !important;
      width: 100% !important;
      height: 100% !important;
      height: 100dvh !important;
      min-height: 100dvh !important;
      overflow: hidden !important;
      background: var(--bg) !important;
      touch-action: manipulation !important;
      overscroll-behavior: none !important;
    }

    * {
      box-sizing: border-box !important;
      -webkit-tap-highlight-color: transparent !important;
    }

    #playerViewport {
      position: absolute !important;
      inset: 0 !important;
      width: 100% !important;
      height: 100% !important;
      height: 100dvh !important;
      min-height: 100dvh !important;
      overflow: hidden !important;
      background: var(--bg) !important;
    }

    #presentationScaler {
      position: absolute !important;
      left: 0 !important;
      top: 0 !important;
      width: 1996px !important;
      height: 1123px !important;
      transform-origin: left top !important;
      background: var(--bg) !important;
      overflow: hidden !important;
      opacity: 0 !important;
    }

    body.presentation-visible #presentationScaler {
      opacity: 0.95 !important;
    }

    #presentationFrame {
      width: 1996px !important;
      height: 1123px !important;
      border: 0 !important;
      outline: 0 !important;
      display: block !important;
      background: var(--bg) !important;
    }

    #startOverlay {
      position: absolute !important;
      inset: 0 !important;
      z-index: 80 !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      background: var(--bg) !important;
      pointer-events: auto !important;
    }

    body.presentation-visible #startOverlay {
      display: none !important;
    }

    #startBox {
      position: relative !important;
      display: inline-flex !important;
      flex-direction: column !important;
      align-items: center !important;
      justify-content: center !important;
      gap: clamp(56px, 9vh, 118px) !important;
      max-width: calc(100% - 32px) !important;
      max-height: calc(100% - 32px) !important;
      transform: translateY(-2vh) !important;
    }

    #loadingText {
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
      justify-content: center !important;
      gap: 7px !important;
      text-align: center !important;
      color: var(--gold) !important;
      letter-spacing: 0.06em !important;
    }

    .loading-tr {
      display: block !important;
      font: 700 15px/1.1 Arial, sans-serif !important;
    }

    .loading-en {
      display: block !important;
      font: 500 11px/1.1 Arial, sans-serif !important;
      letter-spacing: 0.09em !important;
      opacity: 0.72 !important;
    }

    #startLogo {
      position: static !important;
      display: block !important;
      width: min(240px, 38vw) !important;
      max-width: 240px !important;
      height: auto !important;
      margin: 0 !important;
      object-fit: contain !important;
      transform: none !important;
      pointer-events: none !important;
      user-select: none !important;
      flex: 0 0 auto !important;
    }

    @media (max-width: 768px) {
      #startBox {
        gap: clamp(48px, 8vh, 88px) !important;
        max-height: calc(100% - 28px) !important;
        transform: translateY(-1vh) !important;
      }

      #startLogo {
        width: min(190px, 52vw) !important;
        max-width: 190px !important;
        margin: 0 !important;
        transform: none !important;
      }
    }

    #startButton {
      width: 82px !important;
      height: 82px !important;
      min-width: 82px !important;
      min-height: 82px !important;
      aspect-ratio: 1 / 1 !important;
      flex: 0 0 auto !important;
      border: 1px solid var(--glass-border) !important;
      border-radius: 50% !important;
      background:
        linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02)),
        var(--glass-bg) !important;
      color: var(--gold) !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      cursor: pointer !important;
      box-shadow: 0 6px 16px rgba(0,0,0,0.24) !important;
      padding: 0 !important;
    }

    #startButton svg {
      width: 38px !important;
      height: 38px !important;
      fill: currentColor !important;
      display: block !important;
      margin: 0 !important;
    }

    #loadingText {
      display: none !important;
      color: var(--gold) !important;
      font: 500 13px/1.4 Arial, sans-serif !important;
      opacity: 0.85 !important;
    }

    body.loading-presentation #loadingText {
      display: block !important;
    }

    #controlBar {
      position: absolute !important;
      left: 50% !important;
      top: calc(56.25vw + var(--gap)) !important;
      bottom: auto !important;
      transform: translateX(-50%) !important;
      z-index: 50 !important;
      max-width: calc(100% - 24px) !important;
      display: flex !important;
      align-items: center !important;
      gap: 7px !important;
      padding: 2px 8px !important;
      border-radius: 999px !important;
      background:
        linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02)),
        var(--glass-bg) !important;
      border: 1px solid var(--glass-border) !important;
      box-shadow: 0 6px 16px rgba(0,0,0,0.24) !important;
      backdrop-filter: blur(8px) !important;
      -webkit-backdrop-filter: blur(8px) !important;
      opacity: 0 !important;
      pointer-events: none !important;
      user-select: none !important;
      -webkit-user-select: none !important;
    }

    body.player-activated #controlBar {
      opacity: 1 !important;
      pointer-events: auto !important;
    }

    #presentationProgress {
      position: absolute !important;
      left: var(--progress-left, 0px) !important;
      top: var(--progress-top, 0px) !important;
      width: var(--progress-width, 0px) !important;
      height: 5px !important;
      z-index: 49 !important;
      overflow: visible !important;
      border-radius: 999px !important;
      background: rgba(165, 129, 65, 0.38) !important;
      opacity: 0 !important;
      pointer-events: auto !important;
      cursor: pointer !important;
      touch-action: none !important;
      --progress-hover-pct: 0%;
      box-shadow:
        0 1px 4px rgba(0,0,0,0.24),
        inset 0 1px 0 rgba(255,255,255,0.10) !important;
    }

    body.player-activated #presentationProgress {
      opacity: 1 !important;
    }

    #presentationProgressFill {
      width: 0%;
      min-width: 10px !important;
      height: 100% !important;
      border-radius: inherit !important;
      background: var(--gold) !important;
      transform-origin: left center !important;
      transition: width 180ms ease !important;
      box-shadow: 0 0 12px rgba(165, 129, 65, 0.55) !important;
    }

    #presentationProgressThumb {
      position: absolute !important;
      left: var(--progress-hover-pct, 0%) !important;
      top: 50% !important;
      width: 12px !important;
      height: 12px !important;
      border-radius: 50% !important;
      background: var(--gold) !important;
      border: 2px solid var(--bg) !important;
      box-shadow: 0 2px 8px rgba(0,0,0,0.34) !important;
      transform: translate(-50%, -50%) scale(0.72) !important;
      opacity: 0 !important;
      pointer-events: none !important;
      transition: opacity 120ms ease, transform 120ms ease !important;
      z-index: 3 !important;
    }

    #presentationProgressPreview {
      position: absolute !important;
      left: var(--progress-hover-pct, 0%) !important;
      bottom: calc(100% + 12px) !important;
      width: 128px !important;
      padding: 6px !important;
      border-radius: 8px !important;
      background:
        linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.018)),
        rgba(18,18,18,0.88) !important;
      border: 1px solid rgba(165,129,65,0.32) !important;
      box-shadow: 0 10px 24px rgba(0,0,0,0.28) !important;
      color: var(--gold) !important;
      font: 600 11px/1 Arial, sans-serif !important;
      text-align: center !important;
      transform: translateX(-50%) translateY(4px) !important;
      opacity: 0 !important;
      pointer-events: none !important;
      transition: opacity 120ms ease, transform 120ms ease !important;
      z-index: 4 !important;
      backdrop-filter: blur(8px) !important;
      -webkit-backdrop-filter: blur(8px) !important;
    }

    #presentationProgressPreview img {
      width: 116px !important;
      aspect-ratio: 16 / 9 !important;
      height: auto !important;
      display: none !important;
      object-fit: cover !important;
      border-radius: 5px !important;
      margin: 0 0 5px !important;
      background: rgba(0,0,0,0.24) !important;
    }

    #presentationProgressPreview img.loaded {
      display: block !important;
    }

    #presentationProgressPreview span {
      display: block !important;
      white-space: nowrap !important;
    }

    #presentationProgress.is-hovering #presentationProgressThumb,
    #presentationProgress.is-dragging #presentationProgressThumb,
    #presentationProgress.is-hovering #presentationProgressPreview,
    #presentationProgress.is-dragging #presentationProgressPreview {
      opacity: 1 !important;
    }

    #presentationProgress.is-hovering #presentationProgressThumb,
    #presentationProgress.is-dragging #presentationProgressThumb {
      transform: translate(-50%, -50%) scale(1) !important;
    }

    #presentationProgress.is-hovering #presentationProgressPreview,
    #presentationProgress.is-dragging #presentationProgressPreview {
      transform: translateX(-50%) translateY(0) !important;
    }

    body.fullscreen-active #presentationProgress {
      position: absolute !important;
      top: var(--progress-top, 0px) !important;
      bottom: auto !important;
      z-index: 999997 !important;
      opacity: 1 !important;
      transition: none !important;
    }

    body.fullscreen-active.controls-visible #presentationProgress {
      opacity: 1 !important;
    }

.slide-number {
      min-width: 58px !important;
      text-align: center !important;
      color: var(--gold) !important;
      font: 500 13px/1 Arial, sans-serif !important;
      white-space: nowrap !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      gap: 0 !important;
    }

    .slide-current-button {
      appearance: none !important;
      -webkit-appearance: none !important;
      border: 1px solid rgba(165, 129, 65, 0.30) !important;
      outline: 0 !important;
      margin: 0 1px 0 0 !important;
      padding: 3px 7px !important;
      border-radius: 999px !important;
      background:
        linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.015)),
        rgba(165, 129, 65, 0.10) !important;
      color: inherit !important;
      font: inherit !important;
      line-height: 1 !important;
      cursor: default !important;
      min-width: 24px !important;
      text-align: center !important;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.08) !important;
      pointer-events: none !important;
      user-select: none !important;
      -webkit-user-select: none !important;
    }

    .slide-current-button:hover {
      border-color: rgba(165, 129, 65, 0.58) !important;
      background:
        linear-gradient(180deg, rgba(255,255,255,0.09), rgba(255,255,255,0.025)),
        rgba(165, 129, 65, 0.18) !important;
    }

    .slide-total {
      display: inline-flex !important;
      align-items: center !important;
      line-height: 1 !important;
    }

    .slide-slash {
      display: inline-block !important;
      margin: 0 6px 0 8px !important;
      font-weight: 800 !important;
      font-size: 15px !important;
      line-height: 1 !important;
      color: var(--gold) !important;
    }

    .slide-total-value {
      display: inline-block !important;
      font-weight: 500 !important;
      line-height: 1 !important;
      opacity: 0.86 !important;
    }

    #slideNumber.is-last:not(.editing) .slide-total-value {
      font-weight: 500 !important;
      opacity: 0.86 !important;
    }

    .slide-jump-input {
      display: none !important;
      width: 38px !important;
      height: 24px !important;
      min-width: 38px !important;
      margin: 0 !important;
      padding: 0 2px !important;
      border: 1px solid rgba(165, 129, 65, 0.58) !important;
      border-radius: 999px !important;
      outline: 0 !important;
      background: rgba(0, 0, 0, 0.34) !important;
      color: var(--gold) !important;
      font: 500 13px/1 Arial, sans-serif !important;
      text-align: center !important;
    }

    .slide-jump-input::-webkit-outer-spin-button,
    .slide-jump-input::-webkit-inner-spin-button {
      -webkit-appearance: none !important;
      margin: 0 !important;
    }

    .slide-jump-input[type=number] {
      -moz-appearance: textfield !important;
    }

    #slideNumber.editing .slide-current-button {
      display: inline-flex !important;
    }

    #slideNumber.editing .slide-jump-input {
      display: none !important;
    }

    #thumbPanelBackdrop {
      display: none !important;
    }

    #thumbPanel {
      position: absolute !important;
      left: var(--thumb-panel-left, 0px) !important;
      top: var(--thumb-panel-top, 0px) !important;
      bottom: auto !important;
      height: var(--thumb-panel-height, 100%) !important;
      max-height: 100% !important;
      width: var(--thumb-panel-width, min(340px, 86vw)) !important;
      z-index: 1000000 !important;
      display: flex !important;
      flex-direction: column !important;
      background:
        linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.015)),
        rgba(18,18,18,0.78) !important;
      border-right: 1px solid rgba(165,129,65,0.30) !important;
      box-shadow: none !important;
      backdrop-filter: blur(8px) !important;
      -webkit-backdrop-filter: blur(8px) !important;
      border-radius: var(--thumb-panel-radius, 0px) !important;
      overflow: hidden !important;
      transform: translateX(var(--thumb-panel-closed-x, calc(-100% - 24px))) !important;
      transition: transform 220ms ease !important;
      color: var(--gold) !important;
      pointer-events: auto !important;
    }

    body.fullscreen-active #thumbPanel {
      position: fixed !important;
      left: var(--thumb-panel-left, 0px) !important;
      top: var(--thumb-panel-top, 0px) !important;
      bottom: auto !important;
      height: var(--thumb-panel-height, 100%) !important;
      max-height: 100% !important;
      width: var(--thumb-panel-width, min(310px, 88vw)) !important;
      border-radius: var(--thumb-panel-radius, 0px) !important;
      transform: translateX(var(--thumb-panel-closed-x, calc(-100% - 24px))) !important;
    }

    body.thumbs-open #thumbPanel {
      transform: translateX(0) !important;
    }

    #thumbPanelHeader {
      flex: 0 0 auto !important;
      height: 58px !important;
      display: flex !important;
      align-items: center !important;
      justify-content: space-between !important;
      padding: 0 14px 0 16px !important;
      border-bottom: 1px solid rgba(165,129,65,0.24) !important;
      background: rgba(0,0,0,0.16) !important;
    }

    #thumbPanelTitle {
      font: 600 14px/1 Arial, sans-serif !important;
      letter-spacing: 0.02em !important;
    }

    #btnCloseThumbs {
      width: 36px !important;
      height: 36px !important;
      border: 0 !important;
      border-radius: 50% !important;
      background: transparent !important;
      color: var(--gold) !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      padding: 0 !important;
      cursor: pointer !important;
    }

    #btnCloseThumbs svg {
      width: 18px !important;
      height: 18px !important;
      fill: currentColor !important;
      display: block !important;
    }

    #thumbList {
      flex: 1 1 auto !important;
      overflow-y: auto !important;
      overscroll-behavior: contain !important;
      padding: 10px 10px 16px 6px !important;
      scrollbar-width: thin !important;
      scrollbar-color: rgba(165,129,65,0.48) rgba(0,0,0,0.18) !important;
      --thumb-preview-width: 92px;
      --thumb-number-gap: 12px;
      --thumb-number-inset: 18px;
      --thumb-item-pad-y: 6px;
      --thumb-item-pad-left: 6px;
    }

    .thumb-item {
      width: 100% !important;
      border: 1px solid rgba(165,129,65,0.20) !important;
      border-radius: 13px !important;
      background: rgba(255,255,255,0.025) !important;
      padding:
        var(--thumb-item-pad-y, 6px)
        var(--thumb-number-inset, 18px)
        var(--thumb-item-pad-y, 6px)
        var(--thumb-item-pad-left, 6px) !important;
      margin: 0 0 9px !important;
      display: grid !important;
      grid-template-columns: var(--thumb-preview-width, 92px) minmax(0, 1fr) !important;
      column-gap: var(--thumb-number-gap, 12px) !important;
      row-gap: 0 !important;
      align-items: center !important;
      color: var(--gold) !important;
      cursor: pointer !important;
      text-align: left !important;
    }

    .thumb-item:hover,
    .thumb-item.current {
      border-color: rgba(165,129,65,0.58) !important;
      background: rgba(165,129,65,0.10) !important;
    }

    .thumb-preview {
      position: relative !important;
      width: var(--thumb-preview-width, 92px) !important;
      aspect-ratio: 16 / 9 !important;
      border-radius: 8px !important;
      overflow: hidden !important;
      background: rgba(0,0,0,0.32) !important;
      border: 1px solid rgba(165,129,65,0.16) !important;
    }

    .thumb-preview img {
      width: 100% !important;
      height: 100% !important;
      object-fit: cover !important;
      display: block !important;
      opacity: 0 !important;
      transition: opacity 180ms ease !important;
    }

    .thumb-preview img.loaded {
      opacity: 1 !important;
    }

    .thumb-placeholder {
      position: absolute !important;
      inset: 0 !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      color: transparent !important;
      font: 600 18px/1 Arial, sans-serif !important;
      letter-spacing: 0.02em !important;
      background:
        radial-gradient(circle at 35% 20%, rgba(165,129,65,0.18), transparent 42%),
        rgba(0,0,0,0.26) !important;
    }

    .thumb-meta {
      width: 100% !important;
      min-width: 0 !important;
      display: flex !important;
      flex-direction: column !important;
      align-items: stretch !important;
      justify-content: center !important;
      gap: 5px !important;
      text-align: right !important;
      justify-self: stretch !important;
    }

    .thumb-number {
      width: 100% !important;
      min-width: 0 !important;
      font: 600 13px/1.1 Arial, sans-serif !important;
      color: var(--gold) !important;
      text-align: right !important;
      justify-self: stretch !important;
      white-space: nowrap !important;
    }

    .thumb-hint {
      font: 500 11px/1.25 Arial, sans-serif !important;
      color: rgba(165,129,65,0.56) !important;
    }

    @media (max-width: 768px) {
      #thumbPanel {
        left: 0 !important;
        top: 0 !important;
        height: 100% !important;
        width: min(230px, 62vw) !important;
        border-radius: 0 !important;
        transform: translateX(var(--thumb-panel-closed-x, -104%)) !important;
      }

      #thumbList {
        --thumb-preview-width: 86px;
        --thumb-number-gap: 6px;
        --thumb-number-inset: 12px;
        --thumb-item-pad-left: 6px;
      }

      .thumb-item {
        grid-template-columns: var(--thumb-preview-width, 86px) minmax(0, 1fr) !important;
        column-gap: var(--thumb-number-gap, 8px) !important;
        padding-right: var(--thumb-number-inset, 14px) !important;
      }

      .thumb-number {
        width: 100% !important;
        min-width: 0 !important;
        text-align: right !important;
        justify-self: stretch !important;
        white-space: nowrap !important;
      }

      .thumb-preview {
        width: var(--thumb-preview-width, 86px) !important;
      }
    }
.ctrl-btn {
      width: 36px !important;
      height: 36px !important;
      min-width: 36px !important;
      border: 0 !important;
      border-radius: 50% !important;
      background: transparent !important;
      color: var(--gold) !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      cursor: pointer !important;
      padding: 0 !important;
      touch-action: manipulation !important;
    }

    .ctrl-btn:disabled {
      opacity: 0.32 !important;
      cursor: default !important;
    }

    .ctrl-btn svg {
      width: 22px !important;
      height: 22px !important;
      fill: currentColor !important;
      display: block !important;
    }

    #iconFullscreenEnter,
    #iconFullscreenEnter path {
      fill: none !important;
      stroke: currentColor !important;
      stroke-width: 2.8 !important;
      stroke-linecap: round !important;
      stroke-linejoin: round !important;
    }

    #btnThumbs svg,
    #btnThumbs svg * {
      stroke: currentColor !important;
    }

    #btnPrev svg rect,
    #btnNext svg rect {
      fill: currentColor !important;
      stroke: none !important;
    }

    #btnPrev svg path,
    #btnNext svg path {
      fill: none !important;
      stroke: var(--bg) !important;
    }

    .player-icon-hidden,
    .ctrl-btn svg.player-icon-hidden {
      display: none !important;
    }

    #slideNumber {
      min-width: 58px !important;
      text-align: center !important;
      color: var(--gold) !important;
      font: 500 13px/1 Arial, sans-serif !important;
      white-space: nowrap !important;
    }

    #btnPrev {
      margin-right: -4px !important;
    }

    #slideNumber {
      margin-left: -4px !important;
      margin-right: -4px !important;
    }

    #btnNext {
      margin-left: -4px !important;
    }

    #btnReset svg {
      transform: scaleX(-1) !important;
      transform-origin: center center !important;
    }

    .separator {
      width: 1px !important;
      height: 20px !important;
      background: rgba(165, 129, 65, 0.30) !important;
      flex: 0 0 auto !important;
    }

    #volumeWrap {
      position: relative !important;
      display: inline-flex !important;
      flex-direction: column !important;
      align-items: center !important;
      justify-content: flex-start !important;
      gap: 8px !important;
      width: 36px !important;
      min-width: 36px !important;
      height: 138px !important;
      min-height: 138px !important;
      overflow: visible !important;
      padding: 4px 0 0 !important;
      transition: none !important;
    }

    #volumePanel {
      width: 36px !important;
      min-width: 36px !important;
      height: 74px !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      opacity: 1 !important;
      transform: none !important;
      pointer-events: auto !important;
      transition: none !important;
      order: 1 !important;
    }

    #volumeSlider {
      width: 74px !important;
      height: 18px !important;
      margin: 0 !important;
      transform: rotate(-90deg) !important;
      transform-origin: center center !important;
      accent-color: var(--gold) !important;
      pointer-events: auto !important;
    }

    #volumeWrap > .ctrl-btn {
      order: 2 !important;
      margin-top: 6px !important;
      flex: 0 0 auto !important;
    }

    #volumeWrap #volumePanel {
      order: 1 !important;
      flex: 0 0 auto !important;
    }

    /*
      Fullscreen mode also uses the same grid layout:
      slide area above, control bar in its own bottom row.
    */
    body.fullscreen-active #controlBar {
      z-index: 999999 !important;
      opacity: 1 !important;
      pointer-events: auto !important;
      transition: none !important;
    }

#fullscreenHotspot {
      display: none !important;
      pointer-events: none !important;
    }

    /* v2.0.5: fullscreen right-edge reveal corridor */
    @media (hover: hover) and (pointer: fine) {
      body.fullscreen-active.side-controls-ui.side-controls-overlay #fullscreenHotspot {
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 132px !important;
        height: 100dvh !important;
        display: block !important;
        pointer-events: auto !important;
        background: transparent !important;
        z-index: 999996 !important;
      }
    }

    @media (max-width: 768px) {
      :root {
        --gap: 22px;
      }

      #controlBar {
        gap: 5px !important;
        padding: 6px 7px !important;
        max-width: calc(100% - 14px) !important;
      }

      .ctrl-btn {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
      }

      .ctrl-btn svg {
        width: 20px !important;
        height: 20px !important;
      }

      #slideNumber {
        min-width: 50px !important;
        font-size: 12px !important;
      }

      .slide-current-button {
        pointer-events: none !important;
        cursor: default !important;
        text-decoration: none !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        padding: 0 !important;
        margin: 0 !important;
        min-width: 14px !important;
      }

      #slideNumber.editing .slide-current-button {
        display: inline-block !important;
      }

      #slideNumber.editing .slide-jump-input {
        display: none !important;
      }

      .separator {
        height: 22px !important;
      }

      #startButton {
        width: 72px !important;
        height: 72px !important;
        min-width: 72px !important;
        min-height: 72px !important;
        aspect-ratio: 1 / 1 !important;
      }

      #startButton svg {
        width: 34px !important;
        height: 34px !important;
      }
    }

    @media (max-width: 420px) {
      #controlBar {
        gap: 3px !important;
        padding: 5px 6px !important;
      }

      .ctrl-btn {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
      }

      .ctrl-btn svg {
        width: 22px !important;
        height: 22px !important;
      }

      #slideNumber {
        min-width: 44px !important;
      }
    }

    @media (hover: none), (pointer: coarse), (max-width: 768px) {
      #presentationProgress {
        pointer-events: none !important;
        cursor: default !important;
        touch-action: auto !important;
      }

      #presentationProgressThumb,
      #presentationProgressPreview {
        display: none !important;
      }

      #btnFullscreen,
      #fullscreenSeparator {
        display: none !important;
      }

      #volumeWrap {
        width: 36px !important;
        min-width: 36px !important;
        overflow: hidden !important;
      }

      #volumePanel,
      #volumeSlider {
        display: none !important;
        opacity: 0 !important;
        pointer-events: none !important;
      }
    }

    @media (orientation: landscape) and (max-height: 560px) and (hover: none),
           (orientation: landscape) and (max-height: 560px) and (pointer: coarse) {
      #startOverlay {
        align-items: center !important;
        justify-content: center !important;
        padding: 10px 14px !important;
      }

      #startBox {
        gap: clamp(24px, 7vh, 44px) !important;
        max-width: calc(100% - 28px) !important;
        max-height: calc(100% - 20px) !important;
        transform: none !important;
      }

      #startLogo {
        width: min(168px, 30vw, 38vh) !important;
        max-width: 168px !important;
        height: auto !important;
        flex: 0 0 auto !important;
      }

      #startButton {
        width: clamp(54px, 14vh, 68px) !important;
        height: clamp(54px, 14vh, 68px) !important;
        min-width: clamp(54px, 14vh, 68px) !important;
        min-height: clamp(54px, 14vh, 68px) !important;
        aspect-ratio: 1 / 1 !important;
        flex: 0 0 auto !important;
        border-radius: 50% !important;
      }

      #startButton svg {
        width: clamp(26px, 7vh, 34px) !important;
        height: clamp(26px, 7vh, 34px) !important;
        flex: 0 0 auto !important;
      }
    }

    /* v87: v86 baseline + consistent right padding/alignment for slide-list numbers across all layouts. */
    body.mobile-landscape-ui #controlBar {
      flex-direction: column !important;
      align-items: center !important;
      justify-content: space-evenly !important;
      gap: 2px !important;
      padding: 5px 4px !important;
      max-width: none !important;
      width: var(--side-controls-width, 48px) !important;
      height: var(--side-controls-height, auto) !important;
      min-height: var(--side-controls-height, auto) !important;
      border-radius: 999px !important;
      overflow: visible !important;
    }

    body.mobile-landscape-ui .ctrl-btn {
      width: 38px !important;
      height: 38px !important;
      min-width: 38px !important;
    }

    body.mobile-landscape-ui .ctrl-btn svg {
      width: 22px !important;
      height: 22px !important;
    }

    body.mobile-landscape-ui #slideNumber {
      position: static !important;
      left: auto !important;
      top: auto !important;
      transform: none !important;
      width: 44px !important;
      min-width: 44px !important;
      max-width: 44px !important;
      height: 18px !important;
      display: inline-flex !important;
      flex-direction: row !important;
      align-items: center !important;
      justify-content: center !important;
      gap: 0 !important;
      margin: -1px 0 !important;
      padding: 0 !important;
      border: 0 !important;
      border-radius: 0 !important;
      background: transparent !important;
      color: var(--gold) !important;
      font-size: 10px !important;
      line-height: 1 !important;
      letter-spacing: -0.03em !important;
      white-space: nowrap !important;
      overflow: visible !important;
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
    }

    body.mobile-landscape-ui .slide-current-button {
      min-width: 12px !important;
      max-width: 18px !important;
      padding: 0 !important;
      margin: 0 !important;
      pointer-events: none !important;
      border: 0 !important;
      background: transparent !important;
      box-shadow: none !important;
      line-height: 1 !important;
      font-size: 10px !important;
      letter-spacing: -0.03em !important;
      overflow: visible !important;
    }

    body.mobile-landscape-ui .slide-slash {
      margin: 0 2px !important;
      font-size: 10px !important;
      line-height: 1 !important;
      letter-spacing: -0.04em !important;
    }

    body.mobile-landscape-ui .slide-total {
      display: inline-flex !important;
      line-height: 1 !important;
      flex: 0 0 auto !important;
    }

    body.mobile-landscape-ui .slide-total-value {
      font-size: 10px !important;
      letter-spacing: -0.03em !important;
    }

    body.mobile-landscape-ui .separator {
      width: 24px !important;
      height: 1px !important;
      margin: 1px 0 !important;
    }

    body.mobile-landscape-ui #volumeWrap {
      width: 36px !important;
      min-width: 36px !important;
      height: 36px !important;
    }

    body.mobile-landscape-ui #presentationProgress {
      width: 4px !important;
      height: var(--progress-height, 0px) !important;
      border-radius: 999px !important;
    }

    body.mobile-landscape-ui #presentationProgressFill {
      width: 100% !important;
      min-width: 0 !important;
      height: var(--progress-percent, 0%) !important;
      min-height: 10px !important;
      border-radius: inherit !important;
      transition: height 180ms ease !important;
    }

    body.mobile-landscape-ui #presentationProgress {
      pointer-events: none !important;
      cursor: default !important;
      touch-action: auto !important;
    }

    body.mobile-landscape-ui #presentationProgressThumb,
    body.mobile-landscape-ui #presentationProgressPreview {
      display: none !important;
    }

    body.mobile-landscape-ui #thumbPanel {
      left: var(--thumb-panel-left, 0px) !important;
      top: var(--thumb-panel-top, 0px) !important;
      height: var(--thumb-panel-height, 100%) !important;
      max-height: var(--thumb-panel-height, 100%) !important;
      width: var(--thumb-panel-width, 152px) !important;
      max-width: var(--thumb-panel-width, 152px) !important;
      border-radius: var(--thumb-panel-radius, 8px) !important;
      border-right: 1px solid rgba(165,129,65,0.30) !important;
      box-shadow: 8px 0 24px rgba(0,0,0,0.22) !important;
    }

    body.mobile-landscape-ui #thumbPanelHeader {
      height: 42px !important;
      padding: 0 8px 0 8px !important;
    }

    body.mobile-landscape-ui #thumbPanelTitle {
      font-size: 12px !important;
    }

    body.mobile-landscape-ui #btnCloseThumbs {
      width: 30px !important;
      height: 30px !important;
      min-width: 30px !important;
    }

    body.mobile-landscape-ui #thumbList {
      padding: 6px 6px 10px !important;
      --thumb-preview-width: 92px;
      --thumb-number-gap: 0;
      --thumb-number-inset: 8px;
      --thumb-item-pad-y: 4px;
      --thumb-item-pad-left: 4px;
    }

    body.mobile-landscape-ui .thumb-item {
      grid-template-columns: var(--thumb-preview-width, 92px) minmax(0, 1fr) !important;
      column-gap: var(--thumb-number-gap, 6px) !important;
      padding: 4px var(--thumb-number-inset, 8px) 4px 4px !important;
      margin: 0 0 6px !important;
    }

    body.mobile-landscape-ui .thumb-preview {
      width: var(--thumb-preview-width, 92px) !important;
    }

    body.mobile-landscape-ui .thumb-number {
      width: 100% !important;
      min-width: 0 !important;
      font-size: 12px !important;
      text-align: right !important;
      justify-self: stretch !important;
      white-space: nowrap !important;
    }



    /* v91 sync + thumbnail alignment fixes */
    #slideNumber.slide-number {
      min-width: 64px !important;
      height: 25px !important;
      padding: 3px 9px !important;
      border: 1px solid rgba(165, 129, 65, 0.30) !important;
      border-radius: 999px !important;
      background:
        linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.015)),
        rgba(165, 129, 65, 0.10) !important;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.08) !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      gap: 0 !important;
      color: var(--gold) !important;
      white-space: nowrap !important;
      overflow: visible !important;
    }

    #slideNumber .slide-current-button {
      appearance: none !important;
      -webkit-appearance: none !important;
      border: 0 !important;
      outline: 0 !important;
      margin: 0 !important;
      padding: 0 !important;
      min-width: auto !important;
      border-radius: 0 !important;
      background: transparent !important;
      box-shadow: none !important;
      color: inherit !important;
      font: inherit !important;
      line-height: 1 !important;
      pointer-events: none !important;
      cursor: default !important;
    }

    #slideNumber .slide-current-button:hover {
      border: 0 !important;
      background: transparent !important;
      box-shadow: none !important;
    }

    #slideNumber .slide-slash {
      margin: 0 5px !important;
    }

    #slideNumber .slide-total-value {
      min-width: 16px !important;
      text-align: left !important;
    }

    .thumb-item {
      grid-template-columns: var(--thumb-preview-width, 92px) max-content !important;
      justify-content: space-between !important;
    }

    .thumb-meta {
      align-items: flex-end !important;
      justify-self: end !important;
      text-align: right !important;
      min-width: 20px !important;
      width: auto !important;
    }

    .thumb-number {
      width: auto !important;
      min-width: 18px !important;
      text-align: right !important;
      justify-self: end !important;
      padding-right: 0 !important;
    }

    @media (max-width: 1180px), (hover: none), (pointer: coarse) {
      #thumbList {
        --thumb-preview-width: 92px;
        --thumb-number-gap: 5px;
        --thumb-number-inset: 10px;
        --thumb-item-pad-left: 5px;
      }

      .thumb-item {
        column-gap: var(--thumb-number-gap, 5px) !important;
        padding:
          var(--thumb-item-pad-y, 6px)
          var(--thumb-number-inset, 10px)
          var(--thumb-item-pad-y, 6px)
          var(--thumb-item-pad-left, 5px) !important;
      }
    }

    @media (max-width: 768px) {
      #thumbPanel {
        width: var(--thumb-panel-width, min(168px, 58vw)) !important;
      }

      #thumbList {
        --thumb-preview-width: 92px;
        --thumb-number-gap: 0;
        --thumb-number-inset: 9px;
        --thumb-item-pad-left: 5px;
      }

      .thumb-preview {
        width: var(--thumb-preview-width, 92px) !important;
      }

      #slideNumber.slide-number {
        min-width: 58px !important;
        height: 24px !important;
        padding: 2px 7px !important;
        font-size: 11px !important;
      }
    }

    body.mobile-landscape-ui #thumbPanel {
      width: var(--thumb-panel-width, 152px) !important;
      max-width: var(--thumb-panel-width, 152px) !important;
    }

    body.mobile-landscape-ui #thumbList {
      --thumb-preview-width: 92px;
      --thumb-number-gap: 0;
      --thumb-number-inset: 8px;
      --thumb-item-pad-left: 4px;
    }

    body.mobile-landscape-ui #slideNumber.slide-number {
      width: 52px !important;
      min-width: 52px !important;
      max-width: 52px !important;
      height: 22px !important;
      padding: 2px 5px !important;
      border: 1px solid rgba(165, 129, 65, 0.30) !important;
      border-radius: 999px !important;
      background:
        linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.015)),
        rgba(165, 129, 65, 0.10) !important;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.08) !important;
      font-size: 10px !important;
      letter-spacing: -0.04em !important;
    }



    /* Native HTML hotspots for links that iSpring mobile export does not activate reliably. */
    #presentationScaler .slide-hotspot {
      position: absolute !important;
      display: none !important;
      z-index: 20 !important;
      pointer-events: auto !important;
      background: rgba(255, 255, 255, 0) !important;
      border: 0 !important;
      outline: 0 !important;
      text-decoration: none !important;
      cursor: pointer !important;
      -webkit-tap-highlight-color: rgba(165, 129, 65, 0.18) !important;
      touch-action: manipulation !important;
    }

    #presentationScaler .slide-hotspot.is-active {
      display: block !important;
    }


    /* FINAL APPROVED PLAYER — compact side controls and refined slide list. */
    body.side-controls-ui #controlBar {
      width: var(--side-controls-width, 36px) !important;
      padding: 5px 0 !important;
      gap: 2px !important;
      overflow: visible !important;
    }

    /* Icons retain their approved dimensions while only the glass panel becomes narrower. */
    body.side-controls-ui .ctrl-btn {
      width: 38px !important;
      height: 38px !important;
      min-width: 38px !important;
    }

    body.side-controls-ui .ctrl-btn svg {
      width: 22px !important;
      height: 22px !important;
    }

    /* Compact diagonal fraction: current at upper-left, total at lower-right. */
    body.side-controls-ui #slideNumber {
      position: relative !important;
      width: 36px !important;
      min-width: 36px !important;
      max-width: 36px !important;
      height: 43px !important;
      margin: -2px 0 !important;
      padding: 0 !important;
      display: block !important;
      overflow: visible !important;
      font-size: 11px !important;
      line-height: 1 !important;
    }

    body.side-controls-ui .slide-current-button {
      position: absolute !important;
      left: 1px !important;
      top: 2px !important;
      min-width: 0 !important;
      width: auto !important;
      max-width: 22px !important;
      padding: 0 !important;
      margin: 0 !important;
      border: 0 !important;
      background: transparent !important;
      box-shadow: none !important;
      font-size: 11px !important;
      line-height: 1 !important;
      pointer-events: none !important;
    }

    body.side-controls-ui .slide-slash {
      position: absolute !important;
      left: 50% !important;
      top: 50% !important;
      margin: 0 !important;
      transform: translate(-50%, -50%) scaleX(0.78) !important;
      transform-origin: center !important;
      font-size: 39px !important;
      font-weight: 300 !important;
      line-height: 0.8 !important;
    }

    body.side-controls-ui .slide-total {
      position: absolute !important;
      right: 1px !important;
      bottom: 2px !important;
      display: inline-flex !important;
      line-height: 1 !important;
    }

    body.side-controls-ui .slide-total-value {
      font-size: 11px !important;
      line-height: 1 !important;
      letter-spacing: -0.02em !important;
    }

    /* Hover-capable devices: the vertical progress rail is hidden until the cursor enters its 28px proximity zone. */
    @media (hover: hover) and (pointer: fine) {
      body.side-controls-ui #presentationProgress {
        opacity: 0 !important;
        transition: opacity 160ms ease !important;
      }

      body.side-controls-ui #presentationProgress::before {
        content: "" !important;
        position: absolute !important;
        left: -12px !important;
        right: -12px !important;
        top: 0 !important;
        bottom: 0 !important;
        background: transparent !important;
      }

      body.side-controls-ui #presentationProgress:hover,
      body.side-controls-ui #presentationProgress.is-hovering,
      body.side-controls-ui #presentationProgress.is-dragging,
      body.side-controls-ui #presentationProgress:focus-within {
        opacity: 1 !important;
      }
    }

    /* Touch landscape has no mouse hover, so the progress rail remains visible and usable as before. */
    @media (hover: none), (pointer: coarse) {
      body.side-controls-ui #presentationProgress {
        opacity: 1 !important;
      }
    }

    /* Thumbnails are 80% of the approved V2 size. */
    #thumbList {
      --thumb-preview-width: 74px !important;
      --thumb-number-gap: 0 !important;
    }

    .thumb-item {
      grid-template-columns: 74px 34px !important;
      column-gap: 0 !important;
    }

    .thumb-preview {
      width: 74px !important;
    }

    .thumb-meta,
    .thumb-number {
      width: 100% !important;
      min-width: 34px !important;
      text-align: right !important;
      justify-self: stretch !important;
    }

    /* Exact 15px separation from the thumbnail, with every number sharing the same right edge. */
    .thumb-number {
      padding: 0 !important;
      margin: 0 !important;
      white-space: nowrap !important;
    }

    body.mobile-landscape-ui #thumbList {
      --thumb-preview-width: 74px !important;
      --thumb-number-gap: 0 !important;
    }

    body.mobile-landscape-ui .thumb-item {
      grid-template-columns: 74px 30px !important;
      column-gap: 0 !important;
    }

    body.mobile-landscape-ui .thumb-preview { width: 74px !important; }

    @media (max-width: 768px) {
      #thumbList {
        --thumb-preview-width: 69px !important;
        --thumb-number-gap: 0 !important;
      }
      .thumb-item {
        grid-template-columns: 69px 30px !important;
        column-gap: 0 !important;
      }
      .thumb-preview { width: 69px !important; }
    }



    /* Core V2 side-layout rules shared by desktop and every landscape touch viewport. */
    body.side-controls-ui #controlBar {
      flex-direction: column !important;
      align-items: center !important;
      justify-content: space-evenly !important;
      height: var(--side-controls-height, auto) !important;
      min-height: var(--side-controls-height, auto) !important;
      max-width: none !important;
      border-radius: 999px !important;
    }

    body.side-controls-ui .separator {
      width: 22px !important;
      height: 1px !important;
      margin: 1px 0 !important;
    }

    body.side-controls-ui #volumeWrap {
      width: 36px !important;
      min-width: 36px !important;
      height: 36px !important;
    }

    body.side-controls-ui #volumePanel,
    body.side-controls-ui #volumeSlider {
      display: none !important;
      opacity: 0 !important;
      pointer-events: none !important;
    }

    body.side-controls-ui #presentationProgress {
      width: 4px !important;
      height: var(--progress-height, 0px) !important;
      border-radius: 999px !important;
    }

    body.side-controls-ui #presentationProgressFill {
      width: 100% !important;
      min-width: 0 !important;
      height: var(--progress-percent, 0%) !important;
      min-height: 10px !important;
      border-radius: inherit !important;
      transition: height 180ms ease !important;
    }

    body.side-controls-ui #presentationProgressThumb,
    body.side-controls-ui #presentationProgressPreview {
      display: none !important;
    }


    /* FINAL REVISION — stacked fraction and enlarged previous/next controls. */
    body.side-controls-ui #slideNumber {
      position: relative !important;
      width: 36px !important;
      min-width: 36px !important;
      max-width: 36px !important;
      height: 48px !important;
      margin: -1px 0 !important;
      padding: 0 !important;
      display: block !important;
      overflow: visible !important;
      font-size: 11px !important;
      line-height: 1 !important;
    }

    /* Keep the slide-number layout at 36px, but inset only its glass background by 3px on both sides. */
    body.side-controls-ui #slideNumber {
      border-color: transparent !important;
      background: transparent !important;
      box-shadow: none !important;
      isolation: isolate !important;
    }

    body.side-controls-ui #slideNumber::before {
      content: "" !important;
      position: absolute !important;
      left: 3px !important;
      right: 3px !important;
      top: 0 !important;
      bottom: 0 !important;
      z-index: -1 !important;
      border: 1px solid rgba(165, 129, 65, 0.30) !important;
      border-radius: 999px !important;
      background:
        linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.015)),
        rgba(165, 129, 65, 0.10) !important;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.08) !important;
      pointer-events: none !important;
    }

    /* Numerator: current slide. */
    body.side-controls-ui #slideNumber .slide-current-button {
      position: absolute !important;
      left: 0 !important;
      right: 0 !important;
      top: 3px !important;
      width: 100% !important;
      min-width: 0 !important;
      max-width: none !important;
      height: 16px !important;
      margin: 0 !important;
      padding: 0 !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      border: 0 !important;
      border-radius: 0 !important;
      background: transparent !important;
      box-shadow: none !important;
      color: var(--gold) !important;
      font-size: 11px !important;
      line-height: 1 !important;
      text-align: center !important;
      pointer-events: none !important;
    }

    /* Let the slash and denominator use #slideNumber as their positioning box. */
    body.side-controls-ui #slideNumber .slide-total {
      position: static !important;
      display: contents !important;
    }

    /* Horizontal fraction bar, matching the previous slash color and visual weight. */
    body.side-controls-ui #slideNumber .slide-slash {
      position: absolute !important;
      left: 7px !important;
      right: 7px !important;
      top: 50% !important;
      width: auto !important;
      height: 1px !important;
      margin: 0 !important;
      padding: 0 !important;
      border: 0 !important;
      border-radius: 999px !important;
      background: var(--gold) !important;
      color: transparent !important;
      font-size: 0 !important;
      line-height: 0 !important;
      transform: translateY(-50%) !important;
      opacity: 1 !important;
    }

    /* Denominator: total number of slides. */
    body.side-controls-ui #slideNumber .slide-total-value {
      position: absolute !important;
      left: 0 !important;
      right: 0 !important;
      bottom: 3px !important;
      width: 100% !important;
      min-width: 0 !important;
      height: 16px !important;
      margin: 0 !important;
      padding: 0 !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      color: var(--gold) !important;
      font-size: 11px !important;
      line-height: 1 !important;
      letter-spacing: 0 !important;
      text-align: center !important;
      opacity: 0.86 !important;
    }

    /* Previous and next are visually about 1.5× larger; all other controls stay unchanged. */
    body.side-controls-ui #btnPrev,
    body.side-controls-ui #btnNext {
      position: relative !important;
      z-index: 2 !important;
      transform: scale(1.48) !important;
      transform-origin: center center !important;
    }

    body.side-controls-ui #btnPrev svg,
    body.side-controls-ui #btnNext svg {
      width: 22px !important;
      height: 22px !important;
    }

    /* FINAL THUMB NUMBER GEOMETRY — 4px gap, 13px right-aligned number column, 4px right inset. */
    .thumb-item {
      width: max-content !important;
      max-width: 100% !important;
      grid-template-columns: 74px 13px !important;
      column-gap: 4px !important;
      justify-content: start !important;
      padding-right: 4px !important;
    }

    .thumb-meta,
    .thumb-number {
      width: 13px !important;
      min-width: 13px !important;
      max-width: 13px !important;
      justify-self: start !important;
      text-align: right !important;
      font-variant-numeric: tabular-nums !important;
    }

    body.mobile-landscape-ui .thumb-item {
      width: max-content !important;
      max-width: 100% !important;
      grid-template-columns: 74px 13px !important;
      column-gap: 4px !important;
      justify-content: start !important;
      padding-right: 4px !important;
    }

    @media (max-width: 768px) {
      .thumb-item {
        width: max-content !important;
        max-width: 100% !important;
        grid-template-columns: 69px 13px !important;
        column-gap: 4px !important;
        justify-content: start !important;
        padding-right: 4px !important;
      }
    }
    /* END FINAL THUMB NUMBER GEOMETRY */


    /* EXACT SIDE THUMB PANEL GEOMETRY
       6 + 1 + 4 + 74 + 4 + 18 + 6 + 1 + 0 + 6 + 1 = 121px
       list-left + card-left-border + card-left-padding + thumbnail + gap +
       number-column + card-right-padding + card-right-border + free-space +
       list-right-padding + panel-right-border
    */
    body.side-controls-ui #thumbPanel {
      width: 121px !important;
      max-width: 121px !important;
    }

    body.side-controls-ui #thumbList {
      padding-left: 6px !important;
      padding-right: 6px !important;
      --thumb-preview-width: 74px !important;
      --thumb-number-gap: 4px !important;
      --thumb-item-pad-left: 4px !important;
      --thumb-number-inset: 6px !important;
    }

    body.side-controls-ui .thumb-item {
      width: max-content !important;
      max-width: 100% !important;
      grid-template-columns: 74px 18px !important;
      column-gap: 4px !important;
      justify-content: start !important;
      padding-left: 4px !important;
      padding-right: 6px !important;
    }

    body.side-controls-ui .thumb-preview {
      width: 74px !important;
    }

    body.side-controls-ui .thumb-meta,
    body.side-controls-ui .thumb-number {
      width: 18px !important;
      min-width: 18px !important;
      max-width: 18px !important;
      justify-self: start !important;
      text-align: right !important;
      padding: 0 !important;
      margin: 0 !important;
      font-variant-numeric: tabular-nums !important;
    }

    /* ZOOM/DPI LOCK — preserve the approved 121px panel geometry on every display.
       The card outer width is exactly:
       1 + 4 + 74 + 4 + 18 + 6 + 1 = 108px.
       Hiding only the scrollbar track prevents OS/browser scrollbar width from
       stealing horizontal space and pushing the number column outside the card. */
    body.side-controls-ui #thumbList {
      width: 100% !important;
      min-width: 0 !important;
      max-width: 100% !important;
      overflow-x: hidden !important;
      scrollbar-width: none !important;
      -ms-overflow-style: none !important;
    }

    body.side-controls-ui #thumbList::-webkit-scrollbar {
      width: 0 !important;
      height: 0 !important;
      display: none !important;
    }

    body.side-controls-ui .thumb-item {
      box-sizing: border-box !important;
      width: 108px !important;
      min-width: 108px !important;
      max-width: 108px !important;
      grid-template-columns: 74px 18px !important;
      column-gap: 4px !important;
      justify-content: start !important;
      padding-left: 4px !important;
      padding-right: 6px !important;
      overflow: hidden !important;
    }

    body.side-controls-ui .thumb-preview {
      width: 74px !important;
      min-width: 74px !important;
      max-width: 74px !important;
    }

    body.side-controls-ui .thumb-meta,
    body.side-controls-ui .thumb-number {
      box-sizing: border-box !important;
      width: 18px !important;
      min-width: 18px !important;
      max-width: 18px !important;
      justify-self: stretch !important;
      overflow: hidden !important;
      text-align: right !important;
      white-space: nowrap !important;
    }



    /* MOBILE LANDSCAPE FRACTION LOCK
       Keep the approved stacked fraction at its exact size; never let the
       vertical flex control bar compress it on short or zoomed viewports. */
    body.mobile-landscape-ui.side-controls-ui #slideNumber {
      flex: 0 0 48px !important;
      width: 36px !important;
      min-width: 36px !important;
      max-width: 36px !important;
      height: 48px !important;
      min-height: 48px !important;
      max-height: 48px !important;
      align-self: center !important;
      margin: -1px 0 !important;
      transform: none !important;
    }

    body.mobile-landscape-ui.side-controls-ui #slideNumber::before {
      left: 3px !important;
      right: 3px !important;
      top: 0 !important;
      bottom: 0 !important;
    }

    body.mobile-landscape-ui.side-controls-ui #slideNumber .slide-current-button {
      top: 3px !important;
      height: 16px !important;
    }

    body.mobile-landscape-ui.side-controls-ui #slideNumber .slide-slash {
      top: 24px !important;
      transform: translateY(-50%) !important;
    }

    body.mobile-landscape-ui.side-controls-ui #slideNumber .slide-total-value {
      bottom: 3px !important;
      height: 16px !important;
    }


    /* FINAL FIX — fixed vertical volume slider above the speaker icon. */
    body.side-controls-ui #volumeWrap {
      display: inline-flex !important;
      flex-direction: column !important;
      align-items: center !important;
      justify-content: flex-start !important;
      gap: 4px !important;
      width: 36px !important;
      min-width: 36px !important;
      max-width: 36px !important;
      height: 120px !important;
      min-height: 120px !important;
      max-height: 120px !important;
      flex: 0 0 120px !important;
      padding: 0 !important;
      overflow: visible !important;
      transition: none !important;
    }

    body.side-controls-ui #volumePanel {
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      order: 1 !important;
      width: 36px !important;
      min-width: 36px !important;
      max-width: 36px !important;
      height: 74px !important;
      min-height: 74px !important;
      max-height: 74px !important;
      flex: 0 0 74px !important;
      opacity: 1 !important;
      visibility: visible !important;
      transform: none !important;
      pointer-events: auto !important;
      overflow: visible !important;
      transition: none !important;
    }

    body.side-controls-ui #volumeSlider {
      display: block !important;
      width: 74px !important;
      min-width: 74px !important;
      max-width: 74px !important;
      height: 18px !important;
      margin: 0 !important;
      padding: 0 !important;
      opacity: 1 !important;
      visibility: visible !important;
      pointer-events: auto !important;
      accent-color: var(--gold) !important;
      transform: rotate(-90deg) !important;
      transform-origin: center center !important;
      touch-action: none !important;
    }

    body.side-controls-ui #volumeWrap > #btnMute {
      order: 2 !important;
      flex: 0 0 38px !important;
      margin: 4px 0 0 !important;
    }

    @media (hover: none), (pointer: coarse), (max-width: 768px) {
      body.side-controls-ui #volumeWrap {
        display: inline-flex !important;
        overflow: visible !important;
      }

      body.side-controls-ui #volumePanel,
      body.side-controls-ui #volumeSlider {
        display: flex !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
      }

      body.side-controls-ui #volumeSlider {
        display: block !important;
      }
    }



    /* ================================================================
       RIGHT-EDGE AUTO-HIDE OVERLAY CONTROLS — DESKTOP FINE POINTER
       - The slide uses the full viewport; no width is reserved for controls.
       - Controls live above the slide near its right edge.
       - Moving near the right edge reveals the cluster; moving away hides it.
       - Touch/mobile behavior remains unchanged.
       ================================================================ */
    @media (hover: hover) and (pointer: fine) {
      body.side-controls-ui.side-controls-overlay #controlBar,
      body.fullscreen-active.side-controls-ui.side-controls-overlay #controlBar {
        opacity: 0 !important;
        pointer-events: none !important;
        transform: translateX(calc(-50% + 26px)) !important;
        transition: opacity 180ms ease, transform 220ms cubic-bezier(.2,.7,.2,1) !important;
        will-change: opacity, transform !important;
      }

      body.side-controls-ui.side-controls-overlay #presentationProgress,
      body.fullscreen-active.side-controls-ui.side-controls-overlay #presentationProgress {
        opacity: 0 !important;
        pointer-events: none !important;
        transform: translateX(18px) scaleX(.86) !important;
        transform-origin: right center !important;
        transition: opacity 180ms ease, transform 220ms cubic-bezier(.2,.7,.2,1) !important;
        will-change: opacity, transform !important;
      }

      body.player-activated.side-controls-ui.side-controls-overlay.side-controls-revealed #controlBar,
      body.fullscreen-active.player-activated.side-controls-ui.side-controls-overlay.side-controls-revealed #controlBar {
        opacity: 1 !important;
        pointer-events: auto !important;
        transform: translateX(-50%) !important;
      }

      body.player-activated.side-controls-ui.side-controls-overlay.side-controls-revealed #presentationProgress,
      body.fullscreen-active.player-activated.side-controls-ui.side-controls-overlay.side-controls-revealed #presentationProgress {
        opacity: 1 !important;
        pointer-events: auto !important;
        transform: translateX(0) scaleX(1) !important;
      }

      body.side-controls-ui.side-controls-overlay #controlBar:focus-within,
      body.side-controls-ui.side-controls-overlay #controlBar:hover {
        opacity: 1 !important;
        pointer-events: auto !important;
        transform: translateX(-50%) !important;
      }
    }


    /* ================================================================
       DESKTOP OVERLAY CONTROLS — NO SHARED PANEL BACKGROUND
       The long glass capsule is removed. Each control keeps a compact
       YouTube-like translucent button so icons remain visible on any slide.
       ================================================================ */
    @media (hover: hover) and (pointer: fine) {
      body.side-controls-ui.side-controls-overlay #controlBar,
      body.fullscreen-active.side-controls-ui.side-controls-overlay #controlBar {
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
      }

      body.side-controls-ui.side-controls-overlay #controlBar .ctrl-btn,
      body.fullscreen-active.side-controls-ui.side-controls-overlay #controlBar .ctrl-btn {
        background: rgba(18, 18, 18, 0.46) !important;
        border: 1px solid rgba(255, 255, 255, 0.14) !important;
        border-radius: 50% !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.38) !important;
        backdrop-filter: blur(3px) !important;
        -webkit-backdrop-filter: blur(3px) !important;
      }

      body.side-controls-ui.side-controls-overlay #controlBar .ctrl-btn:hover,
      body.side-controls-ui.side-controls-overlay #controlBar .ctrl-btn:focus-visible,
      body.fullscreen-active.side-controls-ui.side-controls-overlay #controlBar .ctrl-btn:hover,
      body.fullscreen-active.side-controls-ui.side-controls-overlay #controlBar .ctrl-btn:focus-visible {
        background: rgba(18, 18, 18, 0.68) !important;
        border-color: rgba(255, 255, 255, 0.24) !important;
      }

      body.side-controls-ui.side-controls-overlay #slideNumber,
      body.fullscreen-active.side-controls-ui.side-controls-overlay #slideNumber {
        background: rgba(18, 18, 18, 0.46) !important;
        border: 1px solid rgba(255, 255, 255, 0.14) !important;
        border-radius: 12px !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.38) !important;
        backdrop-filter: blur(3px) !important;
        -webkit-backdrop-filter: blur(3px) !important;
      }

      body.side-controls-ui.side-controls-overlay .separator,
      body.fullscreen-active.side-controls-ui.side-controls-overlay .separator {
        background: rgba(255, 255, 255, 0.34) !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.30) !important;
      }

      body.side-controls-ui.side-controls-overlay .ctrl-btn svg,
      body.fullscreen-active.side-controls-ui.side-controls-overlay .ctrl-btn svg,
      body.side-controls-ui.side-controls-overlay #slideNumber,
      body.fullscreen-active.side-controls-ui.side-controls-overlay #slideNumber {
        filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.62)) !important;
      }
    }


    /* v2.0.7: unified pointer tracking across parent + presentation iframe */
    @media (hover: hover) and (pointer: fine) {
      body.side-controls-ui.side-controls-overlay #controlBar,
      body.fullscreen-active.side-controls-ui.side-controls-overlay #controlBar {
        padding: 0 !important;
        gap: 10px !important;
      }

      body.side-controls-ui.side-controls-overlay #controlBar .ctrl-btn,
      body.fullscreen-active.side-controls-ui.side-controls-overlay #controlBar .ctrl-btn,
      body.side-controls-ui.side-controls-overlay #slideNumber,
      body.fullscreen-active.side-controls-ui.side-controls-overlay #slideNumber {
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
      }

      body.side-controls-ui.side-controls-overlay #slideNumber,
      body.fullscreen-active.side-controls-ui.side-controls-overlay #slideNumber {
        min-width: 0 !important;
        width: auto !important;
        height: auto !important;
        padding: 0 !important;
      }

      body.side-controls-ui.side-controls-overlay #btnPrev svg rect,
      body.side-controls-ui.side-controls-overlay #btnNext svg rect,
      body.fullscreen-active.side-controls-ui.side-controls-overlay #btnPrev svg rect,
      body.fullscreen-active.side-controls-ui.side-controls-overlay #btnNext svg rect {
        fill: none !important;
        stroke: none !important;
      }

      body.side-controls-ui.side-controls-overlay #btnPrev svg path,
      body.side-controls-ui.side-controls-overlay #btnNext svg path,
      body.fullscreen-active.side-controls-ui.side-controls-overlay #btnPrev svg path,
      body.fullscreen-active.side-controls-ui.side-controls-overlay #btnNext svg path {
        stroke: currentColor !important;
      }

      body.side-controls-ui.side-controls-overlay #controlBar .ctrl-btn:hover,
      body.side-controls-ui.side-controls-overlay #controlBar .ctrl-btn:focus-visible,
      body.fullscreen-active.side-controls-ui.side-controls-overlay #controlBar .ctrl-btn:hover,
      body.fullscreen-active.side-controls-ui.side-controls-overlay #controlBar .ctrl-btn:focus-visible {
        background: transparent !important;
        border-color: transparent !important;
      }

      body.side-controls-ui.side-controls-overlay .separator,
      body.fullscreen-active.side-controls-ui.side-controls-overlay .separator {
        opacity: 0.7 !important;
      }
    }


    /* ================================================================
       v2.0.7 — STRICT GROUP VISIBILITY
       Control bar and progress are one visual group. No delay, no timer,
       no independent :hover visibility. Both follow the same body class.
       ================================================================ */
    @media (hover: hover) and (pointer: fine) {
      body.player-activated.side-controls-ui.side-controls-overlay #controlBar,
      body.fullscreen-active.player-activated.side-controls-ui.side-controls-overlay #controlBar,
      body.player-activated.side-controls-ui.side-controls-overlay #presentationProgress,
      body.fullscreen-active.player-activated.side-controls-ui.side-controls-overlay #presentationProgress {
        transition: none !important;
      }

      body.player-activated.side-controls-ui.side-controls-overlay:not(.side-controls-revealed) #controlBar,
      body.fullscreen-active.player-activated.side-controls-ui.side-controls-overlay:not(.side-controls-revealed) #controlBar,
      body.player-activated.side-controls-ui.side-controls-overlay:not(.side-controls-revealed) #controlBar:hover,
      body.player-activated.side-controls-ui.side-controls-overlay:not(.side-controls-revealed) #controlBar:focus-within,
      body.fullscreen-active.player-activated.side-controls-ui.side-controls-overlay:not(.side-controls-revealed) #controlBar:hover,
      body.fullscreen-active.player-activated.side-controls-ui.side-controls-overlay:not(.side-controls-revealed) #controlBar:focus-within {
        opacity: 0 !important;
        pointer-events: none !important;
        transform: translateX(-50%) !important;
      }

      body.player-activated.side-controls-ui.side-controls-overlay:not(.side-controls-revealed) #presentationProgress,
      body.fullscreen-active.player-activated.side-controls-ui.side-controls-overlay:not(.side-controls-revealed) #presentationProgress,
      body.player-activated.side-controls-ui.side-controls-overlay:not(.side-controls-revealed) #presentationProgress:hover,
      body.fullscreen-active.player-activated.side-controls-ui.side-controls-overlay:not(.side-controls-revealed) #presentationProgress:hover {
        opacity: 0 !important;
        pointer-events: none !important;
        transform: none !important;
      }

      body.player-activated.side-controls-ui.side-controls-overlay.side-controls-revealed #controlBar,
      body.fullscreen-active.player-activated.side-controls-ui.side-controls-overlay.side-controls-revealed #controlBar,
      body.player-activated.side-controls-ui.side-controls-overlay.side-controls-revealed #presentationProgress,
      body.fullscreen-active.player-activated.side-controls-ui.side-controls-overlay.side-controls-revealed #presentationProgress {
        opacity: 1 !important;
        pointer-events: auto !important;
      }

      body.player-activated.side-controls-ui.side-controls-overlay.side-controls-revealed #controlBar,
      body.fullscreen-active.player-activated.side-controls-ui.side-controls-overlay.side-controls-revealed #controlBar {
        transform: translateX(-50%) !important;
      }

      body.player-activated.side-controls-ui.side-controls-overlay.side-controls-revealed #presentationProgress,
      body.fullscreen-active.player-activated.side-controls-ui.side-controls-overlay.side-controls-revealed #presentationProgress {
        transform: none !important;
      }
    }


    /* v2.0.9 — compact family group: Geri / slide number / İleri / Reset */
    .nav-control-group {
      display: contents !important;
    }

    body.side-controls-ui .nav-control-group {
      display: flex !important;
      flex: 0 0 auto !important;
      flex-direction: column !important;
      align-items: center !important;
      justify-content: center !important;
      gap: 10px !important;
      width: 38px !important;
      margin: 0 !important;
      padding: 0 !important;
      overflow: visible !important;
    }

    body.side-controls-ui .nav-control-group #btnPrev,
    body.side-controls-ui .nav-control-group #slideNumber,
    body.side-controls-ui .nav-control-group #btnNext,
    body.side-controls-ui .nav-control-group #btnReset {
      flex: 0 0 auto !important;
      margin-top: 0 !important;
      margin-bottom: 0 !important;
    }


    /* v2.0.10 — equal navigation family geometry + reference arrow icons */
    body.side-controls-ui .nav-control-group {
      display: grid !important;
      grid-template-columns: 40px !important;
      grid-template-rows: repeat(4, 48px) !important;
      row-gap: 8px !important;
      align-items: center !important;
      justify-items: center !important;
      justify-content: center !important;
      width: 40px !important;
      height: auto !important;
      margin: 0 !important;
      padding: 0 !important;
      overflow: visible !important;
    }

    body.side-controls-ui .nav-control-group > #btnPrev,
    body.side-controls-ui .nav-control-group > #slideNumber,
    body.side-controls-ui .nav-control-group > #btnNext,
    body.side-controls-ui .nav-control-group > #btnReset {
      grid-column: 1 !important;
      width: 40px !important;
      min-width: 40px !important;
      max-width: 40px !important;
      height: 48px !important;
      min-height: 48px !important;
      max-height: 48px !important;
      margin: 0 !important;
      padding: 0 !important;
      transform: none !important;
      transform-origin: center center !important;
      align-self: center !important;
      justify-self: center !important;
    }

    body.side-controls-ui .nav-control-group > #btnPrev,
    body.side-controls-ui .nav-control-group > #btnNext,
    body.side-controls-ui .nav-control-group > #btnReset {
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
    }

    body.side-controls-ui .nav-control-group > #slideNumber {
      position: relative !important;
      display: block !important;
    }

    body.side-controls-ui .nav-control-group #btnPrev svg,
    body.side-controls-ui .nav-control-group #btnNext svg {
      width: 30px !important;
      height: 30px !important;
      display: block !important;
      overflow: visible !important;
      fill: none !important;
      color: var(--gold) !important;
    }

    body.side-controls-ui .nav-control-group #btnPrev svg path,
    body.side-controls-ui .nav-control-group #btnNext svg path,
    body.fullscreen-active.side-controls-ui .nav-control-group #btnPrev svg path,
    body.fullscreen-active.side-controls-ui .nav-control-group #btnNext svg path {
      fill: none !important;
      stroke: var(--gold) !important;
      stroke-width: 7 !important;
      stroke-linecap: round !important;
      stroke-linejoin: round !important;
    }


    /* FULLSCREEN PARITY — keep slide number identical to normal mode */
    body.side-controls-ui.side-controls-overlay #slideNumber,
    body.fullscreen-active.side-controls-ui.side-controls-overlay #slideNumber {
      position: relative !important;
      width: 40px !important;
      min-width: 40px !important;
      max-width: 40px !important;
      height: 48px !important;
      min-height: 48px !important;
      max-height: 48px !important;
      margin: 0 !important;
      padding: 0 !important;
      display: block !important;
      overflow: visible !important;
      background: transparent !important;
      border: 0 !important;
      border-radius: 0 !important;
      box-shadow: none !important;
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
      filter: none !important;
      isolation: isolate !important;
    }

    body.side-controls-ui.side-controls-overlay #slideNumber::before,
    body.fullscreen-active.side-controls-ui.side-controls-overlay #slideNumber::before {
      content: "" !important;
      position: absolute !important;
      left: 3px !important;
      right: 3px !important;
      top: 0 !important;
      bottom: 0 !important;
      z-index: 0 !important;
      display: block !important;
      visibility: visible !important;
      opacity: 1 !important;
      border: 1px solid rgba(165, 129, 65, 0.30) !important;
      border-radius: 999px !important;
      background:
        linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.015)),
        rgba(165, 129, 65, 0.10) !important;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.08) !important;
      pointer-events: none !important;
    }

    body.side-controls-ui.side-controls-overlay #slideNumber .slide-current-button,
    body.fullscreen-active.side-controls-ui.side-controls-overlay #slideNumber .slide-current-button {
      position: absolute !important;
      left: 0 !important;
      right: 0 !important;
      top: 3px !important;
      z-index: 2 !important;
      width: 100% !important;
      height: 16px !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      margin: 0 !important;
      padding: 0 !important;
      border: 0 !important;
      background: transparent !important;
      color: var(--gold) !important;
      font-size: 11px !important;
      line-height: 1 !important;
      opacity: 1 !important;
      visibility: visible !important;
    }

    body.side-controls-ui.side-controls-overlay #slideNumber .slide-total,
    body.fullscreen-active.side-controls-ui.side-controls-overlay #slideNumber .slide-total {
      position: static !important;
      display: contents !important;
    }

    body.side-controls-ui.side-controls-overlay #slideNumber .slide-slash,
    body.fullscreen-active.side-controls-ui.side-controls-overlay #slideNumber .slide-slash {
      position: absolute !important;
      left: 7px !important;
      right: 7px !important;
      top: 50% !important;
      z-index: 2 !important;
      display: block !important;
      width: auto !important;
      height: 1px !important;
      margin: 0 !important;
      padding: 0 !important;
      border: 0 !important;
      border-radius: 999px !important;
      background: var(--gold) !important;
      color: transparent !important;
      font-size: 0 !important;
      line-height: 0 !important;
      transform: translateY(-50%) !important;
      opacity: 1 !important;
      visibility: visible !important;
    }

    body.side-controls-ui.side-controls-overlay #slideNumber .slide-total-value,
    body.fullscreen-active.side-controls-ui.side-controls-overlay #slideNumber .slide-total-value {
      position: absolute !important;
      left: 0 !important;
      right: 0 !important;
      bottom: 3px !important;
      z-index: 2 !important;
      width: 100% !important;
      height: 16px !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      margin: 0 !important;
      padding: 0 !important;
      color: var(--gold) !important;
      font-size: 11px !important;
      line-height: 1 !important;
      letter-spacing: 0 !important;
      text-align: center !important;
      opacity: 0.86 !important;
      visibility: visible !important;
    }


    /* ALWAYS VISIBLE CONTROLS — control bar + progress remain fixed */
    @media (hover: hover) and (pointer: fine) {
      body.player-activated #controlBar,
      body.fullscreen-active.player-activated #controlBar,
      body.player-activated #presentationProgress,
      body.fullscreen-active.player-activated #presentationProgress {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transition: none !important;
        animation: none !important;
      }

      body.player-activated.side-controls-ui.side-controls-overlay #controlBar,
      body.fullscreen-active.player-activated.side-controls-ui.side-controls-overlay #controlBar {
        transform: translateX(-50%) !important;
      }

      body.player-activated.side-controls-ui.side-controls-overlay #presentationProgress,
      body.fullscreen-active.player-activated.side-controls-ui.side-controls-overlay #presentationProgress {
        transform: none !important;
      }
    }


    /* PERMANENT VISIBLE CONTROLS — final override */
    body.player-activated #controlBar,
    body.player-activated #presentationProgress,
    body.fullscreen-active.player-activated #controlBar,
    body.fullscreen-active.player-activated #presentationProgress,
    body.player-activated.side-controls-ui.side-controls-overlay #controlBar,
    body.player-activated.side-controls-ui.side-controls-overlay #presentationProgress,
    body.fullscreen-active.player-activated.side-controls-ui.side-controls-overlay #controlBar,
    body.fullscreen-active.player-activated.side-controls-ui.side-controls-overlay #presentationProgress,
    body.player-activated.side-controls-ui.side-controls-overlay:not(.side-controls-revealed) #controlBar,
    body.player-activated.side-controls-ui.side-controls-overlay:not(.side-controls-revealed) #presentationProgress,
    body.fullscreen-active.player-activated.side-controls-ui.side-controls-overlay:not(.side-controls-revealed) #controlBar,
    body.fullscreen-active.player-activated.side-controls-ui.side-controls-overlay:not(.side-controls-revealed) #presentationProgress {
      opacity: 1 !important;
      visibility: visible !important;
      pointer-events: auto !important;
      transition: none !important;
      animation: none !important;
    }


    /* Current slide numerator: illuminated and visually distinct from denominator */
    #slideCurrentButton,
    body.side-controls-ui #slideCurrentButton,
    body.fullscreen-active #slideCurrentButton,
    body.fullscreen-active.side-controls-ui #slideCurrentButton {
      color: #f3cf7a !important;
      font-weight: 800 !important;
      opacity: 1 !important;
      text-shadow:
        0 0 3px rgba(255, 232, 168, 0.95),
        0 0 7px rgba(165, 129, 65, 0.95),
        0 0 13px rgba(165, 129, 65, 0.72) !important;
      filter: drop-shadow(0 0 4px rgba(165, 129, 65, 0.82)) !important;
    }

    #slideNumber .slide-total-value,
    body.side-controls-ui #slideNumber .slide-total-value,
    body.fullscreen-active #slideNumber .slide-total-value,
    body.fullscreen-active.side-controls-ui #slideNumber .slide-total-value {
      color: var(--gold) !important;
      font-weight: 500 !important;
      opacity: 0.48 !important;
      text-shadow: none !important;
      filter: none !important;
    }

    #slideNumber .slide-slash,
    body.side-controls-ui #slideNumber .slide-slash,
    body.fullscreen-active #slideNumber .slide-slash,
    body.fullscreen-active.side-controls-ui #slideNumber .slide-slash {
      color: var(--gold) !important;
      opacity: 0.72 !important;
      text-shadow: none !important;
      filter: none !important;
    }


    /* Current slide numerator: high-contrast illuminated indicator */
    #slideCurrentButton,
    body.side-controls-ui #slideCurrentButton,
    body.fullscreen-active #slideCurrentButton,
    body.fullscreen-active.side-controls-ui #slideCurrentButton {
      color: #171717 !important;
      background:
        linear-gradient(180deg, #f0d38b 0%, #c99d43 100%) !important;
      border: 1px solid rgba(255, 232, 168, 0.92) !important;
      font-weight: 900 !important;
      opacity: 1 !important;
      text-shadow: 0 1px 0 rgba(255, 255, 255, 0.36) !important;
      filter: none !important;
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.58),
        0 0 0 1px rgba(165, 129, 65, 0.36),
        0 0 7px rgba(232, 190, 92, 0.88),
        0 0 14px rgba(165, 129, 65, 0.55) !important;
    }


    /* ================================================================
       DESKTOP UNIFIED UI — identical on monitors and touchscreen laptops
       Custom vertical volume rail avoids browser-native horizontal variants.
       ================================================================ */
    body.desktop-unified-ui #volumeWrap,
    body.fullscreen-active.desktop-unified-ui #volumeWrap {
      position: relative !important;
      display: inline-flex !important;
      flex-direction: column !important;
      align-items: center !important;
      justify-content: flex-start !important;
      width: 36px !important;
      min-width: 36px !important;
      max-width: 36px !important;
      height: 120px !important;
      min-height: 120px !important;
      max-height: 120px !important;
      flex: 0 0 120px !important;
      gap: 4px !important;
      padding: 0 !important;
      overflow: visible !important;
    }

    body.desktop-unified-ui #volumePanel,
    body.fullscreen-active.desktop-unified-ui #volumePanel {
      --volume-pct: 100%;
      position: relative !important;
      display: block !important;
      order: 1 !important;
      width: 36px !important;
      min-width: 36px !important;
      max-width: 36px !important;
      height: 74px !important;
      min-height: 74px !important;
      max-height: 74px !important;
      flex: 0 0 74px !important;
      opacity: 1 !important;
      visibility: visible !important;
      pointer-events: auto !important;
      cursor: pointer !important;
      touch-action: none !important;
      overflow: visible !important;
    }

    body.desktop-unified-ui #volumePanel::before,
    body.fullscreen-active.desktop-unified-ui #volumePanel::before {
      content: "" !important;
      position: absolute !important;
      left: 50% !important;
      bottom: 0 !important;
      width: 4px !important;
      height: 74px !important;
      transform: translateX(-50%) !important;
      border-radius: 999px !important;
      background: linear-gradient(
        to top,
        var(--gold) 0,
        var(--gold) var(--volume-pct),
        rgba(165, 129, 65, 0.32) var(--volume-pct),
        rgba(165, 129, 65, 0.32) 100%
      ) !important;
      box-shadow: 0 1px 4px rgba(0,0,0,0.28) !important;
      pointer-events: none !important;
    }

    body.desktop-unified-ui #volumePanel::after,
    body.fullscreen-active.desktop-unified-ui #volumePanel::after {
      content: "" !important;
      position: absolute !important;
      left: 50% !important;
      bottom: clamp(-6px, calc(var(--volume-pct) - 6px), 68px) !important;
      width: 12px !important;
      height: 12px !important;
      transform: translateX(-50%) !important;
      border-radius: 50% !important;
      background: var(--gold) !important;
      border: 2px solid var(--bg) !important;
      box-shadow: 0 2px 7px rgba(0,0,0,0.38) !important;
      pointer-events: none !important;
    }

    body.desktop-unified-ui #volumeSlider,
    body.fullscreen-active.desktop-unified-ui #volumeSlider {
      position: absolute !important;
      inset: 0 !important;
      display: block !important;
      width: 36px !important;
      min-width: 36px !important;
      max-width: 36px !important;
      height: 74px !important;
      min-height: 74px !important;
      max-height: 74px !important;
      margin: 0 !important;
      padding: 0 !important;
      transform: none !important;
      appearance: none !important;
      -webkit-appearance: none !important;
      opacity: 0 !important;
      visibility: visible !important;
      pointer-events: auto !important;
      cursor: pointer !important;
      touch-action: none !important;
      z-index: 3 !important;
    }

    body.desktop-unified-ui #volumeWrap > #btnMute,
    body.fullscreen-active.desktop-unified-ui #volumeWrap > #btnMute {
      order: 2 !important;
      flex: 0 0 38px !important;
      margin: 4px 0 0 !important;
    }


    /* MOBILE LANDSCAPE — desktop layout, without volume slider and progress rail */
    body.mobile-landscape-ui.side-controls-ui #presentationProgress,
    body.mobile-landscape-ui.side-controls-ui #presentationProgressFill,
    body.mobile-landscape-ui.side-controls-ui #presentationProgressThumb,
    body.mobile-landscape-ui.side-controls-ui #presentationProgressPreview {
      display: none !important;
      opacity: 0 !important;
      visibility: hidden !important;
      pointer-events: none !important;
    }

    body.mobile-landscape-ui.side-controls-ui #controlBar {
      width: var(--side-controls-width, 36px) !important;
      padding: 5px 0 !important;
      gap: 2px !important;
      max-width: none !important;
      overflow: visible !important;
    }

    body.mobile-landscape-ui.side-controls-ui #volumeWrap {
      display: inline-flex !important;
      flex-direction: column !important;
      align-items: center !important;
      justify-content: center !important;
      width: 36px !important;
      min-width: 36px !important;
      max-width: 36px !important;
      height: 38px !important;
      min-height: 38px !important;
      max-height: 38px !important;
      flex: 0 0 38px !important;
      padding: 0 !important;
      margin: 0 !important;
      overflow: visible !important;
    }

    body.mobile-landscape-ui.side-controls-ui #volumePanel,
    body.mobile-landscape-ui.side-controls-ui #volumeSlider {
      display: none !important;
      opacity: 0 !important;
      visibility: hidden !important;
      pointer-events: none !important;
    }

    body.mobile-landscape-ui.side-controls-ui #volumeWrap > #btnMute {
      order: 1 !important;
      margin: 0 !important;
      flex: 0 0 38px !important;
    }


    /* Fullscreen desktop: keep current slide number compact and readable */
    body.fullscreen-active.desktop-unified-ui.side-controls-ui #slideNumber .slide-current-button,
    body.fullscreen-active.desktop-unified-ui.side-controls-ui.side-controls-overlay #slideNumber .slide-current-button {
      left: 6px !important;
      right: auto !important;
      top: 3px !important;
      width: 28px !important;
      min-width: 28px !important;
      max-width: 28px !important;
      height: 16px !important;
      min-height: 16px !important;
      max-height: 16px !important;
      padding: 0 !important;
      border-radius: 999px !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      font-size: 10px !important;
      line-height: 16px !important;
      letter-spacing: 0 !important;
      overflow: hidden !important;
      white-space: nowrap !important;
      color: #171717 !important;
      background: linear-gradient(180deg, #f0d38b 0%, #c99d43 100%) !important;
      border: 1px solid rgba(255, 232, 168, 0.90) !important;
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.50),
        0 0 5px rgba(232, 190, 92, 0.70) !important;
      text-shadow: none !important;
      filter: none !important;
    }


    /* Mobile landscape: use exactly the same Geri / İleri icon styling as desktop */
    body.mobile-landscape-ui.side-controls-ui #btnPrev,
    body.mobile-landscape-ui.side-controls-ui #btnNext {
      color: var(--gold) !important;
    }

    body.mobile-landscape-ui.side-controls-ui #btnPrev svg,
    body.mobile-landscape-ui.side-controls-ui #btnNext svg {
      width: 30px !important;
      height: 30px !important;
      display: block !important;
      overflow: visible !important;
      fill: none !important;
      color: var(--gold) !important;
    }

    body.mobile-landscape-ui.side-controls-ui #btnPrev svg rect,
    body.mobile-landscape-ui.side-controls-ui #btnNext svg rect {
      fill: none !important;
      stroke: currentColor !important;
      stroke-width: 4 !important;
    }

    body.mobile-landscape-ui.side-controls-ui #btnPrev svg path,
    body.mobile-landscape-ui.side-controls-ui #btnNext svg path {
      fill: none !important;
      stroke: currentColor !important;
      stroke-width: 7 !important;
      stroke-linecap: round !important;
      stroke-linejoin: round !important;
    }


    /* MOBILE PORTRAIT — desktop/landscape tools in one horizontal row below slide */
    body.mobile-portrait-ui #presentationProgress,
    body.fullscreen-active.mobile-portrait-ui #presentationProgress {
      display: none !important;
      opacity: 0 !important;
      visibility: hidden !important;
      pointer-events: none !important;
    }

    body.mobile-portrait-ui #controlBar,
    body.fullscreen-active.mobile-portrait-ui #controlBar {
      display: flex !important;
      flex-direction: row !important;
      align-items: center !important;
      justify-content: center !important;
      width: min(356px, calc(100vw - 8px)) !important;
      min-width: 0 !important;
      max-width: calc(100vw - 8px) !important;
      height: 48px !important;
      min-height: 48px !important;
      max-height: 48px !important;
      gap: 3px !important;
      padding: 0 3px !important;
      margin: 0 !important;
      border: 0 !important;
      border-radius: 0 !important;
      background: transparent !important;
      box-shadow: none !important;
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
      overflow: visible !important;
    }

    body.mobile-portrait-ui #controlBar .ctrl-btn,
    body.fullscreen-active.mobile-portrait-ui #controlBar .ctrl-btn {
      width: 36px !important;
      min-width: 36px !important;
      max-width: 36px !important;
      height: 36px !important;
      min-height: 36px !important;
      max-height: 36px !important;
      margin: 0 !important;
      padding: 0 !important;
      flex: 0 0 36px !important;
      background: transparent !important;
      border: 0 !important;
      box-shadow: none !important;
    }

    body.mobile-portrait-ui #controlBar .ctrl-btn svg,
    body.fullscreen-active.mobile-portrait-ui #controlBar .ctrl-btn svg {
      width: 22px !important;
      height: 22px !important;
    }

    body.mobile-portrait-ui .nav-control-group,
    body.fullscreen-active.mobile-portrait-ui .nav-control-group {
      display: grid !important;
      grid-template-columns: repeat(4, 38px) !important;
      grid-template-rows: 40px !important;
      column-gap: 2px !important;
      align-items: center !important;
      justify-items: center !important;
      width: 158px !important;
      height: 40px !important;
      margin: 0 !important;
      padding: 0 !important;
      flex: 0 0 158px !important;
      overflow: visible !important;
    }

    body.mobile-portrait-ui .nav-control-group > #btnPrev,
    body.mobile-portrait-ui .nav-control-group > #slideNumber,
    body.mobile-portrait-ui .nav-control-group > #btnNext,
    body.mobile-portrait-ui .nav-control-group > #btnReset,
    body.fullscreen-active.mobile-portrait-ui .nav-control-group > #btnPrev,
    body.fullscreen-active.mobile-portrait-ui .nav-control-group > #slideNumber,
    body.fullscreen-active.mobile-portrait-ui .nav-control-group > #btnNext,
    body.fullscreen-active.mobile-portrait-ui .nav-control-group > #btnReset {
      position: relative !important;
      width: 38px !important;
      min-width: 38px !important;
      max-width: 38px !important;
      height: 40px !important;
      min-height: 40px !important;
      max-height: 40px !important;
      margin: 0 !important;
      padding: 0 !important;
      transform: none !important;
      align-self: center !important;
      justify-self: center !important;
    }

    body.mobile-portrait-ui .nav-control-group > #btnPrev,
    body.mobile-portrait-ui .nav-control-group > #btnNext,
    body.mobile-portrait-ui .nav-control-group > #btnReset,
    body.fullscreen-active.mobile-portrait-ui .nav-control-group > #btnPrev,
    body.fullscreen-active.mobile-portrait-ui .nav-control-group > #btnNext,
    body.fullscreen-active.mobile-portrait-ui .nav-control-group > #btnReset {
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
    }

    body.mobile-portrait-ui #btnPrev svg,
    body.mobile-portrait-ui #btnNext svg,
    body.fullscreen-active.mobile-portrait-ui #btnPrev svg,
    body.fullscreen-active.mobile-portrait-ui #btnNext svg {
      width: 30px !important;
      height: 30px !important;
      display: block !important;
      overflow: visible !important;
      color: var(--gold) !important;
    }

    body.mobile-portrait-ui #btnPrev svg rect,
    body.mobile-portrait-ui #btnNext svg rect,
    body.fullscreen-active.mobile-portrait-ui #btnPrev svg rect,
    body.fullscreen-active.mobile-portrait-ui #btnNext svg rect {
      fill: none !important;
      stroke: currentColor !important;
      stroke-width: 4 !important;
    }

    body.mobile-portrait-ui #btnPrev svg path,
    body.mobile-portrait-ui #btnNext svg path,
    body.fullscreen-active.mobile-portrait-ui #btnPrev svg path,
    body.fullscreen-active.mobile-portrait-ui #btnNext svg path {
      fill: none !important;
      stroke: currentColor !important;
      stroke-width: 7 !important;
      stroke-linecap: round !important;
      stroke-linejoin: round !important;
    }

    body.mobile-portrait-ui #slideNumber,
    body.fullscreen-active.mobile-portrait-ui #slideNumber {
      position: relative !important;
      display: block !important;
      width: 38px !important;
      min-width: 38px !important;
      max-width: 38px !important;
      height: 40px !important;
      min-height: 40px !important;
      max-height: 40px !important;
      margin: 0 !important;
      padding: 0 !important;
      overflow: visible !important;
      border: 0 !important;
      border-radius: 0 !important;
      background: transparent !important;
      box-shadow: none !important;
    }

    body.mobile-portrait-ui #slideNumber::before,
    body.fullscreen-active.mobile-portrait-ui #slideNumber::before {
      content: "" !important;
      position: absolute !important;
      inset: 0 3px !important;
      border: 1px solid rgba(165, 129, 65, 0.30) !important;
      border-radius: 999px !important;
      background: rgba(165, 129, 65, 0.10) !important;
      pointer-events: none !important;
      z-index: 0 !important;
    }

    body.mobile-portrait-ui #slideCurrentButton,
    body.fullscreen-active.mobile-portrait-ui #slideCurrentButton {
      position: absolute !important;
      left: 5px !important;
      right: 5px !important;
      top: 3px !important;
      width: auto !important;
      min-width: 0 !important;
      height: 14px !important;
      padding: 0 !important;
      margin: 0 !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      font-size: 10px !important;
      line-height: 1 !important;
      z-index: 2 !important;
    }

    body.mobile-portrait-ui #slideNumber .slide-total,
    body.fullscreen-active.mobile-portrait-ui #slideNumber .slide-total {
      display: contents !important;
    }

    body.mobile-portrait-ui #slideNumber .slide-slash,
    body.fullscreen-active.mobile-portrait-ui #slideNumber .slide-slash {
      position: absolute !important;
      left: 7px !important;
      right: 7px !important;
      top: 50% !important;
      width: auto !important;
      height: 1px !important;
      margin: 0 !important;
      padding: 0 !important;
      color: transparent !important;
      font-size: 0 !important;
      line-height: 0 !important;
      background: var(--gold) !important;
      transform: translateY(-50%) !important;
      opacity: 0.72 !important;
      z-index: 2 !important;
    }

    body.mobile-portrait-ui #slideNumber .slide-total-value,
    body.fullscreen-active.mobile-portrait-ui #slideNumber .slide-total-value {
      position: absolute !important;
      left: 0 !important;
      right: 0 !important;
      bottom: 3px !important;
      width: 100% !important;
      height: 14px !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      margin: 0 !important;
      padding: 0 !important;
      font-size: 10px !important;
      line-height: 1 !important;
      opacity: 0.55 !important;
      z-index: 2 !important;
    }

    body.mobile-portrait-ui #volumeWrap,
    body.fullscreen-active.mobile-portrait-ui #volumeWrap {
      width: 36px !important;
      min-width: 36px !important;
      max-width: 36px !important;
      height: 36px !important;
      min-height: 36px !important;
      max-height: 36px !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      flex: 0 0 36px !important;
      overflow: visible !important;
    }

    body.mobile-portrait-ui #volumePanel,
    body.mobile-portrait-ui #volumeSlider,
    body.fullscreen-active.mobile-portrait-ui #volumePanel,
    body.fullscreen-active.mobile-portrait-ui #volumeSlider {
      display: none !important;
      opacity: 0 !important;
      visibility: hidden !important;
      pointer-events: none !important;
    }

    body.mobile-portrait-ui .separator,
    body.fullscreen-active.mobile-portrait-ui .separator {
      width: 1px !important;
      height: 20px !important;
      margin: 0 1px !important;
      flex: 0 0 1px !important;
    }


    /* ================================================================
       UNIFIED NAV ICONS — use mobile-landscape design in every mode
       ================================================================ */
    html body #controlBar #btnPrev,
    html body #controlBar #btnNext {
      color: var(--gold) !important;
    }

    html body #controlBar #btnPrev svg,
    html body #controlBar #btnNext svg {
      width: 30px !important;
      height: 30px !important;
      display: block !important;
      overflow: visible !important;
      fill: none !important;
      color: var(--gold) !important;
      filter: none !important;
    }

    html body #controlBar #btnPrev svg rect,
    html body #controlBar #btnNext svg rect {
      fill: none !important;
      stroke: currentColor !important;
      stroke-width: 4 !important;
    }

    html body #controlBar #btnPrev svg path,
    html body #controlBar #btnNext svg path {
      fill: none !important;
      stroke: currentColor !important;
      stroke-width: 7 !important;
      stroke-linecap: round !important;
      stroke-linejoin: round !important;
    }

    /* ================================================================
       MOBILE PORTRAIT — horizontal slide fraction: 1 / 15
       ================================================================ */
    body.mobile-portrait-ui .nav-control-group,
    body.fullscreen-active.mobile-portrait-ui .nav-control-group {
      grid-template-columns: 38px 58px 38px 38px !important;
      width: 178px !important;
      flex-basis: 178px !important;
    }

    body.mobile-portrait-ui .nav-control-group > #slideNumber,
    body.fullscreen-active.mobile-portrait-ui .nav-control-group > #slideNumber {
      width: 58px !important;
      min-width: 58px !important;
      max-width: 58px !important;
      height: 40px !important;
      min-height: 40px !important;
      max-height: 40px !important;
      display: flex !important;
      flex-direction: row !important;
      align-items: center !important;
      justify-content: center !important;
      gap: 4px !important;
      padding: 0 5px !important;
      overflow: visible !important;
    }

    body.mobile-portrait-ui #slideNumber::before,
    body.fullscreen-active.mobile-portrait-ui #slideNumber::before {
      inset: 3px 0 !important;
      border-radius: 999px !important;
    }

    body.mobile-portrait-ui #slideCurrentButton,
    body.fullscreen-active.mobile-portrait-ui #slideCurrentButton {
      position: relative !important;
      left: auto !important;
      right: auto !important;
      top: auto !important;
      bottom: auto !important;
      width: auto !important;
      min-width: 12px !important;
      height: 22px !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      padding: 0 !important;
      margin: 0 !important;
      font-size: 11px !important;
      line-height: 1 !important;
      z-index: 2 !important;
    }

    body.mobile-portrait-ui #slideNumber .slide-total,
    body.fullscreen-active.mobile-portrait-ui #slideNumber .slide-total {
      position: relative !important;
      display: inline-flex !important;
      flex-direction: row !important;
      align-items: center !important;
      justify-content: center !important;
      gap: 4px !important;
      width: auto !important;
      height: 22px !important;
      margin: 0 !important;
      padding: 0 !important;
      z-index: 2 !important;
    }

    body.mobile-portrait-ui #slideNumber .slide-slash,
    body.fullscreen-active.mobile-portrait-ui #slideNumber .slide-slash {
      position: relative !important;
      left: auto !important;
      right: auto !important;
      top: auto !important;
      bottom: auto !important;
      width: auto !important;
      height: auto !important;
      display: inline !important;
      margin: 0 !important;
      padding: 0 !important;
      color: var(--gold) !important;
      background: transparent !important;
      font-size: 11px !important;
      line-height: 1 !important;
      transform: none !important;
      opacity: 0.72 !important;
    }

    body.mobile-portrait-ui #slideNumber .slide-total-value,
    body.fullscreen-active.mobile-portrait-ui #slideNumber .slide-total-value {
      position: relative !important;
      left: auto !important;
      right: auto !important;
      top: auto !important;
      bottom: auto !important;
      width: auto !important;
      min-width: 12px !important;
      height: 22px !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      margin: 0 !important;
      padding: 0 !important;
      font-size: 11px !important;
      line-height: 1 !important;
      opacity: 0.62 !important;
      z-index: 2 !important;
    }


    /* MOBILE — tiny live pinch-zoom percentage inside control panel */
    #mobileZoomIndicator {
      display: none !important;
      color: var(--gold) !important;
      font: 600 8px/1 Arial, sans-serif !important;
      letter-spacing: 0 !important;
      white-space: nowrap !important;
      text-align: center !important;
      user-select: none !important;
      -webkit-user-select: none !important;
      pointer-events: none !important;
      opacity: 0.82 !important;
    }

    body.mobile-landscape-ui #mobileZoomIndicator,
    body.fullscreen-active.mobile-landscape-ui #mobileZoomIndicator {
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      width: 32px !important;
      min-width: 32px !important;
      max-width: 32px !important;
      height: 16px !important;
      min-height: 16px !important;
      max-height: 16px !important;
      flex: 0 0 16px !important;
      margin: 0 !important;
      padding: 0 !important;
    }

    body.mobile-portrait-ui #mobileZoomIndicator,
    body.fullscreen-active.mobile-portrait-ui #mobileZoomIndicator {
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      width: 28px !important;
      min-width: 28px !important;
      max-width: 28px !important;
      height: 18px !important;
      min-height: 18px !important;
      max-height: 18px !important;
      flex: 0 0 28px !important;
      margin: 0 1px !important;
      padding: 0 !important;
    }

  

    /* ================================================================
       MYPROJECT UNIVERSAL PLAYER v2.0.11 — FINAL PRODUCTION OVERRIDES
       Release: 2026-07-13 16:31:34 Europe/Istanbul (UTC+03:00)
       ================================================================ */

    #mobileZoomIndicator { display: none !important; }

    html body #controlBar,
    html body.fullscreen-active #controlBar,
    html body.mobile-landscape-ui #controlBar,
    html body.mobile-portrait-ui #controlBar {
      background: transparent !important;
      background-image: none !important;
      border: 0 !important;
      box-shadow: none !important;
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
    }

    /* Current slide number: bold text only; no gold capsule in any mode. */
    html body #slideCurrentButton,
    html body.side-controls-ui #slideCurrentButton,
    html body.fullscreen-active #slideCurrentButton,
    html body.fullscreen-active.side-controls-ui #slideCurrentButton,
    html body.desktop-unified-ui #slideCurrentButton,
    html body.fullscreen-active.desktop-unified-ui.side-controls-ui #slideCurrentButton,
    html body.fullscreen-active.desktop-unified-ui.side-controls-ui.side-controls-overlay #slideCurrentButton,
    html body.mobile-landscape-ui #slideCurrentButton,
    html body.mobile-portrait-ui #slideCurrentButton,
    html body.fullscreen-active.mobile-landscape-ui #slideCurrentButton,
    html body.fullscreen-active.mobile-portrait-ui #slideCurrentButton {
      color: var(--gold) !important;
      background: transparent !important;
      background-image: none !important;
      border: 0 !important;
      border-radius: 0 !important;
      box-shadow: none !important;
      text-shadow: none !important;
      filter: none !important;
      font-weight: 700 !important;
      opacity: 1 !important;
    }

    /* Approved filled Geri / İleri icons in theme gold. */
    html body #controlBar #btnPrev,
    html body #controlBar #btnNext { color: var(--gold) !important; }

    html body #controlBar #btnPrev svg,
    html body #controlBar #btnNext svg {
      width: 30px !important;
      height: 30px !important;
      display: block !important;
      overflow: visible !important;
      color: var(--gold) !important;
      fill: currentColor !important;
      stroke: none !important;
      filter: none !important;
    }

    html body #controlBar #btnPrev svg path,
    html body #controlBar #btnNext svg path {
      fill: currentColor !important;
      stroke: none !important;
      stroke-width: 0 !important;
    }

    /* Mobile landscape vertical progress rail remains visible. */
    html body.mobile-landscape-ui.side-controls-ui #presentationProgress,
    html body.fullscreen-active.mobile-landscape-ui.side-controls-ui #presentationProgress {
      display: block !important;
      opacity: 1 !important;
      visibility: visible !important;
      pointer-events: none !important;
    }
    html body.mobile-landscape-ui.side-controls-ui #presentationProgressFill,
    html body.fullscreen-active.mobile-landscape-ui.side-controls-ui #presentationProgressFill {
      display: block !important;
      opacity: 1 !important;
      visibility: visible !important;
    }
    html body.mobile-landscape-ui.side-controls-ui #presentationProgressThumb,
    html body.mobile-landscape-ui.side-controls-ui #presentationProgressPreview,
    html body.fullscreen-active.mobile-landscape-ui.side-controls-ui #presentationProgressThumb,
    html body.fullscreen-active.mobile-landscape-ui.side-controls-ui #presentationProgressPreview {
      display: none !important;
      opacity: 0 !important;
      visibility: hidden !important;
      pointer-events: none !important;
    }

    /* Mobile portrait fraction is centered on one horizontal line. */
    html body.mobile-portrait-ui #slideNumber,
    html body.fullscreen-active.mobile-portrait-ui #slideNumber {
      display: flex !important;
      flex-direction: row !important;
      align-items: center !important;
      justify-content: center !important;
      gap: 4px !important;
      padding: 0 5px !important;
    }
    html body.mobile-portrait-ui #slideNumber #slideCurrentButton,
    html body.fullscreen-active.mobile-portrait-ui #slideNumber #slideCurrentButton {
      position: relative !important;
      left: auto !important; right: auto !important; top: auto !important; bottom: auto !important;
      width: auto !important; min-width: 12px !important; max-width: none !important;
      height: 22px !important; min-height: 22px !important; max-height: 22px !important;
      flex: 0 0 auto !important;
      display: inline-flex !important;
      align-items: center !important; justify-content: center !important; align-self: center !important;
      margin: 0 !important; padding: 0 !important;
      font-size: 11px !important; line-height: 22px !important; vertical-align: middle !important;
    }
    html body.mobile-portrait-ui #slideNumber .slide-total,
    html body.fullscreen-active.mobile-portrait-ui #slideNumber .slide-total {
      position: relative !important;
      display: inline-flex !important;
      flex-direction: row !important;
      align-items: center !important; justify-content: center !important; align-self: center !important;
      gap: 4px !important; width: auto !important;
      height: 22px !important; min-height: 22px !important; max-height: 22px !important;
      flex: 0 0 auto !important; margin: 0 !important; padding: 0 !important;
      line-height: 22px !important; vertical-align: middle !important;
    }
    html body.mobile-portrait-ui #slideNumber .slide-slash,
    html body.fullscreen-active.mobile-portrait-ui #slideNumber .slide-slash,
    html body.mobile-portrait-ui #slideNumber .slide-total-value,
    html body.fullscreen-active.mobile-portrait-ui #slideNumber .slide-total-value {
      position: relative !important;
      left: auto !important; right: auto !important; top: auto !important; bottom: auto !important;
      width: auto !important; min-width: 0 !important;
      height: 22px !important; min-height: 22px !important; max-height: 22px !important;
      display: inline-flex !important;
      align-items: center !important; justify-content: center !important; align-self: center !important;
      margin: 0 !important; padding: 0 !important;
      font-size: 11px !important; line-height: 22px !important;
      vertical-align: middle !important; transform: none !important;
    }
    html body.mobile-portrait-ui #slideNumber .slide-slash,
    html body.fullscreen-active.mobile-portrait-ui #slideNumber .slide-slash {
      color: var(--gold) !important;
      background: transparent !important;
      opacity: 0.72 !important;
    }

    /* Mobile portrait thumbnail panel compact exact width. */
    html body.mobile-portrait-ui #thumbPanel,
    html body.fullscreen-active.mobile-portrait-ui #thumbPanel {
      width: 114px !important; min-width: 114px !important; max-width: 114px !important;
    }
    html body.mobile-portrait-ui #thumbList,
    html body.fullscreen-active.mobile-portrait-ui #thumbList {
      box-sizing: border-box !important;
      width: 100% !important; min-width: 0 !important; max-width: 100% !important;
      padding-left: 6px !important; padding-right: 10px !important;
      overflow-x: hidden !important; scrollbar-width: none !important; -ms-overflow-style: none !important;
    }
    html body.mobile-portrait-ui #thumbList::-webkit-scrollbar,
    html body.fullscreen-active.mobile-portrait-ui #thumbList::-webkit-scrollbar {
      width: 0 !important; height: 0 !important; display: none !important;
    }
    html body.mobile-portrait-ui .thumb-item,
    html body.fullscreen-active.mobile-portrait-ui .thumb-item {
      box-sizing: border-box !important;
      width: 97px !important; min-width: 97px !important; max-width: 97px !important;
      grid-template-columns: 69px 13px !important; column-gap: 4px !important;
      justify-content: start !important;
      padding-left: 5px !important; padding-right: 4px !important; overflow: hidden !important;
    }
    html body.mobile-portrait-ui .thumb-preview,
    html body.fullscreen-active.mobile-portrait-ui .thumb-preview {
      width: 69px !important; min-width: 69px !important; max-width: 69px !important;
    }
    html body.mobile-portrait-ui .thumb-meta,
    html body.mobile-portrait-ui .thumb-number,
    html body.fullscreen-active.mobile-portrait-ui .thumb-meta,
    html body.fullscreen-active.mobile-portrait-ui .thumb-number {
      box-sizing: border-box !important;
      width: 13px !important; min-width: 13px !important; max-width: 13px !important;
      justify-self: stretch !important; overflow: hidden !important;
      text-align: right !important; white-space: nowrap !important;
    }

    /* Persistent mobile portrait rotate hint: no card, no scene blur. */
    #rotateDeviceHint {
      position: fixed !important;
      left: 50% !important;
      top: var(--rotate-hint-top, 68%) !important;
      bottom: auto !important;
      z-index: 2147483646 !important;
      width: clamp(76px, 20vw, 94px) !important;
      height: clamp(76px, 20vw, 94px) !important;
      display: none !important;
      align-items: center !important; justify-content: center !important;
      margin: 0 !important; padding: 0 !important;
      transform: translateX(-50%) !important;
      background: transparent !important;
      border: 0 !important; border-radius: 0 !important;
      box-shadow: none !important;
      backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
      pointer-events: none !important;
      color: var(--gold) !important;
      opacity: 1 !important;
    }
    body.show-rotate-device-hint #rotateDeviceHint { display: flex !important; }
    #rotateDeviceHintGlyph {
      width: 100% !important; height: 100% !important;
      display: block !important; overflow: visible !important;
      color: var(--gold) !important; fill: currentColor !important;
      filter: none !important;
      transform-box: fill-box !important; transform-origin: center center !important;
    }
    #rotateDeviceHintGlyph path:not(.rotate-stroke) {
      fill: currentColor !important; stroke: none !important; filter: none !important;
    }
    #rotateDeviceHintGlyph path.rotate-stroke {
      fill: none !important; stroke: currentColor !important;
      stroke-linecap: round !important; stroke-linejoin: round !important;
      stroke-width: 8 !important; filter: none !important;
    }
    body.show-rotate-device-hint #rotateDeviceHintGlyph {
      animation: rotateDeviceHintQuarter 2s ease-in-out infinite !important;
    }
    @keyframes rotateDeviceHintQuarter {
      0%, 14% { transform: rotate(0deg); }
      72%, 100% { transform: rotate(-90deg); }
    }