:root {
  --accent: #0A84FF;
  --bg: #F9FAFB;
  --panel: #FFFFFF;
  --text: #0F172A;
  --muted: #64748B;
  --border: #E5E7EB;
  --shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
  --swift-player-bg: rgba(15,23,42,0.55);
  --overlay-bg: rgba(15,23,42,0.55);
  --overlay-panel-bg: rgba(255,255,255,0.98);
  --badge-bg: #EEF2FF;
  --badge-text: #3730A3;
  --badge-border: #E0E7FF;
  --timeline-rail: #E5E7EB;
  --timeline-progress: #0A84FF;
  --timeline-thumb: #0A84FF;
  --drawer-bg: #FFFFFF;
  --drawer-border: #E5E7EB;
  --drawer-text: #111827;
  --button-colour: white;
  --button-hover: lightgrey;
  --love-metrics-colour: white;
  --scrollbar-track-colour: transparent;
  --scrollbar-thumb-colour: auto;
  --context-menu-bg: white;
  --context-menu-text: #0F172A;
  --context-menu-border: #E5E7EB;
  --overlay-panel-header-colour: black;
  --overlay-panel-subtitle-colour: black;
  --overlay-panel-list-item-bg: white;
  --overlay-panel-list-item-border: #E5E7EB;
  --overlay-panel-button-border: #E5E7EB;
  --overlay-panel-button-svg: lightgrey;
  --overlay-panel-button-svg-hover: white;
  --overlay-panel-button-svg-play: white;
  --overlay-panel-button-svg-play-hover: lightgrey;
  --overlay-bar-top-title-colour: white;
  --overlay-bar-top-badge-entry-label-colour: white;
  --overlay-bar-top-badge-source-label-bg: transparent;
  --overlay-bar-top-badge-source-label-colour: white;
  --overlay-bar-top-badge-source-label-border: white;
}

* { box-sizing: border-box; }

.swift-player,
.swift-player * {
  user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  -webkit-touch-callout: none;
}

html {
  scrollbar-color: var(--scrollbar-thumb-colour) var(--scrollbar-track-colour);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
}

::-webkit-scrollbar-track {
  background: var(--scrollbar-track-colour);
}

::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-thumb-colour);
}

#app {
  padding: 24px;
}

.swift-player {
  display: block;
  position: relative;
  margin: 0 auto;
  background: var(--panel);
  box-shadow: var(--shadow);
  overflow: hidden;
}

/* SwiftUI-like buttons with icons */
.button {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--button-colour);
  padding: 8px;
  border-radius: 12px;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, transform 0.08s ease, color 0.2s ease;
}
.button:hover {
  /*
  background: rgba(10,132,255,0.10);
  */
  background: var(--button-hover);
}
.button:active {
  transform: scale(0.95);
}
.button--accent {
  /*
  background: var(--accent);
  color: #fff;
  */
}
.button--ghost {
  background: transparent;
}
.button svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
  display: block;
}
.button--label {
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid var(--overlay-panel-button-border);
  background: #fff;
  color: var(--overlay-panel-button-svg); /* var(--text) */
}
.button--label svg {
  fill: var(--overlay-panel-button-svg);
  stroke: var(--overlay-panel-button-svg);
}

.button--label svg path {
  stroke: var(--overlay-panel-button-svg);
}

.button svg[data-icon="close"] line {
  stroke: var(--overlay-panel-button-svg);
}


.button--label svg[data-icon="play"] path {
  fill: var(--overlay-panel-button-svg-play);
}

.button--label:hover {
  border: var(--overlay-panel-button-svg-hover) !important;
  color: var(--overlay-panel-button-svg-hover) !important;
}

.button--label:hover svg path {
  stroke: var(--overlay-panel-button-svg-hover);
  fill: var(--overlay-panel-button-svg-hover);
}

.button:hover svg[data-icon="close"] line {
  stroke: var(--overlay-panel-button-svg-hover);
}

.button--label:hover svg[data-icon="play"] path {
  fill: var(--overlay-panel-button-svg-play-hover);
}

.button--label:hover svg[data-icon="home"] {
  stroke: var(--overlay-panel-button-svg-hover);
}

.button--label:hover svg[data-icon="home"] path {
  color: var(--overlay-panel-button-svg-hover);
  fill: var(--button-hover);
}

.button--label:hover svg[data-icon="entriesSwitch"] path {
  fill: var(--overlay-panel-button-svg-hover);
}

.swift-player__title {
  font-weight: 600;
  font-size: 16px;
}

.swift-player__buttons {
  display: flex;
  gap: 8px;
}

.button--love {
  background: transparent;
  box-shadow: none;
  border: none;
  min-width: 28px;
  min-height: 28px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Slight hover/active feedback for accessibility */
  transition: background 0.15s, transform 0.09s;
  gap: 6px;
  margin-bottom: 5px;
}
.button--love .love-icon svg {
  vertical-align: middle;
  display: inline-block;
  width: 22px;
  height: 22px;
  stroke: #e53935;
  fill: none;
}
.button--love.loved .love-icon svg {
  fill: #e53935;
  stroke: #b71c1c;
}
.button--love:active {
  transform: scale(0.95);
  background: #f7e0e1;
}
.love-metrics {
  margin-right: 3px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
  font-size: 13px;
  color: var(--love-metrics-colour);
  min-width: 36px;
}
.swift-player__right-block {
  position: absolute;
  bottom: 1em;
  right: 1em;
  z-index: 2; /* 10 */
  display: flex;
  align-items: center;
  gap: 10px;
  background: none;
  justify-content: space-between;
  /* Space for love/like and metrics next to ownership if present */
}

.swift-player__right-block.right-block-live {
    bottom: 3em !important;
    right: 2em !important;
}

.swift-player__right-block.right-block-vod {
    bottom: 5em !important;
    right: 2em !important;
}

.swift-player__video-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--swift-player-bg);
  margin: auto;
  overflow: hidden;
  min-height: 420px;
}

/* fullscreen wrapper fills screen */
.swift-player__video-wrap:fullscreen,
.swift-player__video-wrap:-webkit-full-screen {
  width: 100%;
  height: 100%;
  margin: 0;
  border-radius: 0;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.swift-player__video:-webkit-full-screen {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  background: #000;
}

.swift-player__video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
  transform-origin: center center;
  cursor: none;
  touch-action: none; /* disable default double-tap zoom and pinch zoom */
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  position: relative;
}
 
 /* poster layer sits above video, below overlay */
 .swift-player__poster {
   position: absolute;
   inset: 0;
   display: none; /* hidden unless a poster is active */
   background: #000;
   z-index: 1; /* video is implicit 0, overlay sits above this */
   pointer-events: none; /* clicks go to overlay/video, not poster */
 }
 .swift-player__poster img {
   width: 100%;
   height: 100%;
   display: block;
   object-fit: cover; /* default; overridden by JS if needed */
   filter: none;
 }
 
 /* optional: subtle fade for poster changes */
 .swift-player__poster.fade-in {
   animation: poster-fade 180ms ease-out;
 }
 @keyframes poster-fade {
   from { opacity: 0; }
   to   { opacity: 1; }
 }

/* overlay fills video area */
.swift-player__overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: opacity 240ms ease;
  /* z-index: 2; */
}
.swift-player__overlay.overlay--active { pointer-events: auto; }
.swift-player__overlay.overlay--hidden {
  opacity: 0;
  pointer-events: none;
  cursor: none;
}

.swift-player__ownership-logo {
    width: 40px;
    height: 40px;
    border-radius: 2em;
    overflow: hidden;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 7px;
}

.controls__group {
  display: flex;
  align-items: center;
  gap: 10px;
}

.slider { width: 160px; }

input[type="range"] {
  width: 100%;
  -webkit-appearance: none;
  background: transparent;
  writing-mode: vertical-lr;
  transform: rotate(180deg);
  transform-origin: center;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 4px;
  background: #E5E7EB;
  border-radius: 999px;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  background: var(--accent);
  border-radius: 999px;
  margin-top: -5px;
  box-shadow: 0 2px 8px rgba(10, 132, 255, 0.4);
}
input[type="range"]::-moz-range-track {
  height: 4px;
  background: #E5E7EB;
  border-radius: 999px;
}
input[type="range"]::-moz-range-thumb {
  width: 14px;
  height: 14px;
  background: var(--accent);
  border: none;
  border-radius: 999px;
}

.label { font-size: 12px; color: var(--muted); }

/* timeline overlay bottom */
.timeline-overlay {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 12px;
  background: linear-gradient(to top, var(--overlay-bg), transparent);
  pointer-events: auto;
}
.timeline-bar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border-radius: 8px;
  /*
  background: rgba(255,255,255,0.9);
  */
  background: transparent;
  /* z-index: 1; */
}
.timeline-bar__rail {
  position: relative;
  flex: 1;
  height: 8px;
  /*
  background: #E5E7EB;
  */
  background: var(--timeline-rail);
  border-radius: 999px;
  cursor: pointer;
  touch-action: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.timeline-bar__progress {
  position: absolute;
  left: 0; top: 0;
  height: 8px;
  border-radius: 999px;
  /*
  background: var(--accent);
  */
  background: var(--timeline-progress);
  width: 0%;
}
.timeline-bar__thumb {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 14px; height: 14px;
  border-radius: 50%;
  /*
  background: var(--accent);
  */
  background: var(--timeline-thumb);
  box-shadow: 0 2px 8px rgba(10, 132, 255, 0.4);
  left: 0%;
}
.timeline-bar__time {
  font-size: 12px;
  font-weight: 600;
  /*
  color: #111827;
  */
  color: white;
  min-width: 110px;
  text-align: right;
}
.timeline-controls-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.timeline-left, .timeline-centre, .timeline-right {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* hover drawers for sliders */
.drawer { position: relative; }
.drawer__handle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  /*
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
  */
  background: transparent;
  box-shadow: var(--shadow);
  cursor: default;
}
.drawer__handle svg {
  width: 18px;
  height: 18px;
  /*
  fill: currentColor;
  fill: white;
  */
  fill: var(--button-colour);
}
.drawer__panel {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  padding: 10px;
  background: var(--drawer-bg);
  border: 1px solid var(--drawer-border);
  color: var(--drawer-text);
  border-radius: 12px;
  box-shadow: var(--shadow);
  display: none;
  z-index: 10;
}
.drawer:hover .drawer__panel, .drawer__panel:hover { display: block; }
.drawer__title {
  font-size: 12px;
  font-weight: 600;
  color: var(--drawer-text); /* #111827 */
  margin-bottom: 6px;
  text-align: center;
}
.drawer__slider {
  writing-mode: bt-lr;
  -webkit-appearance: slider-vertical;
  appearance: slider-vertical;
  width: 24px; height: 180px;
  padding: 0;
  background: transparent;
}
.drawer__slider::-webkit-slider-runnable-track {
  width: 6px; height: 100%;
  background: #E5E7EB;
  border-radius: 999px;
}
.drawer__slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px; height: 16px;
  background: var(--accent);
  border-radius: 50%;
  margin-left: -5px;
  box-shadow: 0 2px 8px rgba(10,132,255,0.4);
}
.drawer__slider::-moz-range-track {
  width: 6px; height: 100%;
  background: #E5E7EB;
  border-radius: 999px;
}
.drawer__slider::-moz-range-thumb {
  width: 16px; height: 16px;
  background: var(--accent);
  border: none;
  border-radius: 50%;
}
.drawer__value {
  margin-top: 6px;
  font-size: 12px;
  color: var(--drawer-text); /* #111827 */
  text-align: center;
}

/* right vertical controls rail */
.controls-rail {
  position: absolute;
  top: 64px; right: 8px; bottom: 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 8px;
  pointer-events: auto;
}
.rail-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255,255,255,0.9);
  box-shadow: var(--shadow);
  min-width: 52px;
  align-items: center;
}
.rail-card__title {
  font-size: 12px;
  font-weight: 600;
  color: #111827;
}
.rail-slider {
  writing-mode: bt-lr;
  -webkit-appearance: slider-vertical;
  appearance: slider-vertical;
  width: 24px;
  height: 160px;
  padding: 0;
  background: transparent;
}
.rail-slider::-webkit-slider-runnable-track {
  width: 6px; height: 100%;
  background: #E5E7EB;
  border-radius: 999px;
}
.rail-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px; height: 16px;
  background: var(--accent);
  border-radius: 50%;
  margin-left: -5px;
  box-shadow: 0 2px 8px rgba(10,132,255,0.4);
}
.rail-slider::-moz-range-track {
  width: 6px; height: 100%;
  background: #E5E7EB;
  border-radius: 999px;
}
.rail-slider::-moz-range-thumb {
  width: 16px; height: 16px;
  background: var(--accent);
  border: none;
  border-radius: 50%;
}

/* bottom center panel (unused in current layout) */
.timeline-controls {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255,255,255,0.95);
  box-shadow: var(--shadow);
  pointer-events: auto;
}

.button[hidden] { display: none; }
.timeline-bar[hidden] { display: none; }
.timeline-scrubber { width: 360px; }
.scrub-time {
  font-size: 12px;
  color: #111827;
  min-width: 80px;
  text-align: right;
}

.list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 320px; /* make long lists scrollable */
  overflow-y: auto;
  padding-right: 4px; /* room for scrollbar */
}
.list::-webkit-scrollbar {
  width: 6px;
}
.list::-webkit-scrollbar-thumb {
  border-radius: 999px;
}
.list::-webkit-scrollbar-track {
  background: var(--scrollbar-track-colour);
}

.list--entries {
  max-height: 320px;
}

.list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--overlay-panel-list-item-border);
  border-radius: 10px;
  background: var(--overlay-panel-list-item-bg);
}
.list-item__left {
  display: flex;
  align-items: center;
  gap: 10px;
}
.list-item__icon {
  width: 22px;
  height: 22px;
  display: block;
  align-items: center;
  justify-content: center;
  fill: var(--text);
}
.list-item__thumb {
  width: 56px;
  height: 36px;
  border-radius: 6px;
  object-fit: cover;
  background: #E5E7EB;
}

.list-item__label { font-size: 13px; }
.list-item__buttons { display: flex; gap: 6px; }
.list-item__meta {
  font-size: 12px;
  color: var(--muted);
}
.list-item__text, .list-item__meta {
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  max-width: 14ch;
  width: 30vw;
}
.badge {
  display: inline-block;
  padding: 2px 8px;
  font-size: 12px;
  border-radius: 999px;
  background: var(--badge-bg);
  color: var(--badge-text);
  border: 1px solid var(--badge-border);
  margin-left: 10px;
}

.badge[data-role="entry-label"] {
    font-size: 10px;
    color: var(--overlay-bar-top-badge-entry-label-colour) !important;
    background-color: transparent !important;
    border: 0px !important;
}

.badge[data-role="source-label"] {
    color: var(--overlay-bar-top-badge-source-label-colour) !important;
    background-color: var(--overlay-bar-top-badge-source-label-bg) !important;
}

/* analytics grid */
.metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 10px;
}
.metric {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--overlay-panel-list-item-bg);
  font-size: 12px;
}
.metric__label { color: var(--muted); }
.metric__value { font-weight: 600; }

/* event timeline list */
.timeline {
  display: grid;
  gap: 6px;
  max-height: 180px;
  overflow: auto;
}
.timeline__item {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 8px;
  font-size: 12px;
}
.timeline__time { color: var(--muted); }

/* zoom hint bubble */
.zoom-hint, .time-hint {
  position: absolute;
  font-size: 12px;
  border-radius: 8px;
  /*
  background: rgba(15,23,42,0.7);
  */
  color: #fff;
  max-width: 30ch;
  text-align: center;
}
.zoom-hint p {
  font-size: 12px;
  border-radius: 8px;
  background: grey;
  color: #fff;
  max-width: 30ch;
  padding: 1em;
}

/* Floating play/pause button shown when zoom-hint is hidden */
.zoom-playpause {
  position: absolute;
  display: block; /* hidden by default */
  background: transparent;
  color: white;
  border-radius: 50%;
  box-shadow: var(--shadow);
  cursor: pointer;
  z-index: 1;
}
.zoom-playpause svg {
  width: 6em;
  height: 6em;
  fill: white;
}

.zoom-playpause svg[data-icon="spinner"], button[data-action="playPause"] svg[data-icon="spinner"] {
  animation: spinner-rotate 0.9s linear infinite;
  transform-origin: 50% 50%;
}
@keyframes spinner-rotate {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Custom context menu */
.swift-context-menu {
  position: absolute;
  z-index: 9999;
  min-width: 180px;
  max-width: 260px;
  padding: 6px;
  background: var(--context-menu-bg);
  color: var(---context-menu-text);
  border: 1px solid var(---context-menu-border);
  border-radius: 10px;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.18);
  display: none;
  backdrop-filter: saturate(1.1) blur(6px);
}
.swift-context-menu__item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
}
.swift-context-menu__item:hover {
  background: #F3F4F6;
}
.swift-context-menu__icon {
  width: 18px;
  height: 18px;
  color: var(--text);
}

/* overlay bars and panels */
.overlay-bar {
  position: absolute;
  left: 0; right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  background: linear-gradient(to bottom, var(--overlay-bg), transparent);
  color: #fff;
  pointer-events: auto;
}
.overlay-bar--top { top: 0; }
.overlay-bar--bottom {
  bottom: 0;
  background: linear-gradient(to top, var(--overlay-bg), transparent);
  flex-wrap: wrap;
}
.overlay-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 14px;
  text-align: center;
  color: var(--overlay-bar-top-title-colour);
}
.overlay-title .labels{
  justify-content: space-between;
  flex-direction: column;
}
.live-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--overlay-bar-top-badge-source-label-colour) !important;
  background-color: var(--overlay-bar-top-badge-source-label-bg) !important;
}
.controls__toggles { display: flex; gap: 6px; }
.overlay-bar .button {
  /* 
  background: rgba(255,255,255,0.90);
  color: #111827;
  */
}
.overlay-bar .button:hover {
  /*
  background: rgba(255,255,255,0.95);
  color: #111827;
  */
}
.overlay-bar .button--accent { /* background: var(--accent); */ }

/* AirPlay button icon sizing */
.button[data-action="airplay"] svg {
  width: 18px;
  height: 18px;
}

/* Chromecast button icon sizing */
.button[data-action="chromecast"] svg {
  width: 18px;
  height: 18px;
}

/* Ensure hidden controls collapse layout */
[hidden] {
  display: none !important;
}

.overlay-bar .label { color: #E5E7EB; }
.overlay-bar .badge {
  background: rgba(255,255,255,0.9);
  color: #111827;
  border-color: var(--overlay-bar-top-badge-source-label-border);
}
.overlay-bar input[type="range"]::-webkit-slider-runnable-track { background: rgba(255,255,255,0.6); }
.overlay-bar input[type="range"]::-moz-range-track { background: rgba(255,255,255,0.6); }

.overlay-panel {
  position: absolute;
  top: 56px; right: 12px;
  width: 360px;
  max-width: calc(100% - 24px);
  max-height: calc(100% - 120px);
  overflow: auto;
  background: var(--overlay-panel-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow);
  padding: 12px;
  pointer-events: auto;
  z-index: 2;
}
.overlay-panel--list { width: 360px; }
.overlay-panel--analytics { width: 420px; }
.overlay-panel--entries { width: 420px; }
.overlay-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--overlay-panel-header-colour);
}

.overlay-panel--message,
.overlay-panel--shortcuts {
  background: var(--overlay-panel-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow);
  padding: 16px 24px;
  font-family: inherit;
  color: var(--text);
  max-width: min(92%, 480px);
  max-height: 80%;
  overflow: auto;
}

.overlay-panel--message .overlay-panel__header,
.overlay-panel--shortcuts .overlay-panel__header {
  font-size: 16px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border);
  padding-bottom: 7px;
  margin-bottom: 14px;
}

.overlay-panel--shortcuts table {
  border-collapse: collapse;
  width: 100%;
  background: transparent;
  color: var(--text);
}

.overlay-panel--shortcuts td {
  padding: 4px 8px 4px 0;
  font-size: 14px;
  color: var(--muted);
}

.shortcuts-list {
  display: grid;
  gap: 6px;
  max-height: 180px;
  overflow: auto;

}

.overlay-subtitle {
  margin: 10px 0 8px 0;
  font-size: 13px;
  color: var(--overlay-panel-subtitle-colour);
}

/* center panels within overlay */
.swift-player__overlay .panel {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  max-width: min(92%, 720px);
  max-height: 80%;
  overflow: auto;
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
  border-radius: 12px;
}
.swift-player__overlay [data-panel] {
  /*
  background: rgba(20, 20, 20, 0.92);
  color: #fff;
  */
  backdrop-filter: saturate(1.1) blur(6px);
}

/* fullscreen panel layout */
.swift-player__video-wrap:fullscreen .swift-player__overlay .panel,
.swift-player__video-wrap:-webkit-full-screen .swift-player__overlay .panel {
  max-width: min(92%, 960px);
  max-height: 86%;
}

/* transitions in fullscreen */
.swift-player__video-wrap:fullscreen .swift-player__overlay,
.swift-player__video-wrap:-webkit-full-screen .swift-player__overlay {
  transition: opacity 240ms ease;
}

/* accessibility focus */
.button:focus, input[type="range"]:focus {
  outline: 2px solid rgba(10, 132, 255, 0.4);
  outline-offset: 2px;
}

/* responsive tweaks */
@media (max-width: 860px) {
  .metrics { grid-template-columns: 1fr; }
}

@media screen and (max-width: 730px) {
    .timeline-centre {
        display: none;
    }
}

@media screen and (max-width: 390px) {
    button[data-toggle="analytics"], div[data-role="volume-drawer"], button[data-action="asMain"] {
        display: none;
    }
}

@media screen and (max-width: 345px) {
    button[data-action="playPause"], button[data-action="report"], button[data-action="preview"] {
        display: none;
    }
}

@media screen and (max-width: 340px) {
    button[data-action="chromecast"] {
        display: none;
    }
    
    .overlay-bar, .overlay-title {
        flex-direction: column;
    }
    
    .badge {
        margin-left: 0px;
    }
}

@media screen and (max-width: 230px) {
    button[data-action="download"], .list-item__text {
        display: none;
    }
}

@media screen and (max-width: 260px), (max-height: 270px) {
    .swift-player__right-block {
        display: none;
    }
}

@media screen and (max-width: 320px) {
    button[data-toggle="playback"], button[data-toggle="timelapse"], button[data-action="fullscreen"] {
        display: none;
    }
}

@media screen and (max-width: 175px) { /* 140px */
    .timeline-left, button[data-action="airplay"] {
        display: none;
    }

    .timeline-right, .timeline-centre {
        margin: auto;
    }
}

@media screen and (max-height: 420px) {
    .swift-player__video-wrap {
        min-height: auto;
    }
}

@media screen and (max-height: 345px) {
    .overlay-title .main {
        display: none;
    }
}

@media screen and (max-height: 315px) {
    button[data-action="snapshot"] {
        display: none;
    }

    button[data-action="download"] {
        display: none;
    }
}

@media screen and (max-height: 222px) {
    .live-badge {
        display: none !important;
    }
}

@media screen and (max-height: 222px), (max-width: 140px) {
    button[data-action="download"], .timeline-left {
        display: none;
    }

    span[data-role="entry-label"] {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

@media screen and (max-height: 100px), (max-width: 100px) {
    .timeline-right, .timeline-left, .overlay-bar--top {
        display: none !important;
    }
}