.vjs-airplay-button .vjs-icon-placeholder{background:url('data:image/svg+xml,<svg fill="%23FFFFFF" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">%0A    <defs>%0A        <path d="M0 0h24v24H0V0z" id="a"/>%0A    </defs>%0A    <defs>%0A        <path d="M0 0h24v24H0V0z" id="c"/>%0A    </defs>%0A    <clipPath id="b">%0A        <use overflow="visible" xlink:href="%23a"/>%0A    </clipPath>%0A    <clipPath clip-path="url(%23b)" id="d">%0A        <use overflow="visible" xlink:href="%23c"/>%0A    </clipPath>%0A    <path clip-path="url(%23d)" d="M6 22h12l-6-6zM21 3H3c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h4v-2H3V5h18v12h-4v2h4c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"/>%0A</svg>%0A') center center no-repeat;background-size:contain;display:inline-block;width:22px;height:22px}.vjs-airplay-button:hover{cursor:pointer}.vjs-airplay-button:hover .vjs-icon-placeholder{background-image:url('data:image/svg+xml,<svg fill="%23FFFFFF" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">%0A    <defs>%0A        <path d="M0 0h24v24H0V0z" id="a"/>%0A    </defs>%0A    <defs>%0A        <path d="M0 0h24v24H0V0z" id="c"/>%0A    </defs>%0A    <clipPath id="b">%0A        <use overflow="visible" xlink:href="%23a"/>%0A    </clipPath>%0A    <clipPath clip-path="url(%23b)" id="d">%0A        <use overflow="visible" xlink:href="%23c"/>%0A    </clipPath>%0A    <path clip-path="url(%23d)" d="M6 22h12l-6-6zM21 3H3c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h4v-2H3V5h18v12h-4v2h4c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"/>%0A</svg>%0A')}.vjs-airplay-button.vjs-airplay-button-lg:not(.vjs-hidden){display:flex;align-items:center;width:auto;padding:0 4px}.vjs-airplay-button.vjs-airplay-button-lg:not(.vjs-hidden) .vjs-airplay-button-label{flex-grow:1;margin-left:4px}.vjs-airplay-button.vjs-airplay-button-lg:not(.vjs-hidden) .vjs-icon-placeholder{flex-grow:1}.vjs-chromecast-button .vjs-icon-placeholder{background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAAXNSR0IArs4c6QAAAvJJREFUaAXtmTtoFFEUhrMhpRZipQELBQsbwUoEQYPaWFhpYSloJ1bai502tqnVRojYWPlA1CKCjWUKLYRsGmOKdKKs3xnmzpz57+xjdMaZhTnw79zzuOdx79zH7i4s9NSPQD8C/Qh0ZgRGo9EyeAKGoGu0SUKW27IfsEFgUsVn+P1B1tHnNnkdHwwGm5bfokvyAe2uJ2/pWo73rWHkZ2AIfyCRdv9jixk4aGn6AkY+bwwynZe31bYF6WOH/Pwr5PVz0+4LaHuq+hloewaWQgJhVQd+Xp79K9T2TM39DGRrgINul9G060TAV9ovwEfWR+EURNY9sqN6DG0hXwXn2sxac4tyUYMx/DvkJ6PO/0Gg+UQh1WAKv4b+cOSkQYHmE0JlN04M9iK067RdUw+B8+Ai2AfKaAfhFdbHqzJl3TIrwPuc6dyizxJYAc9AGf1CeNM7bqqtwSvHwcEp8EEdpfzDyg4rdtC4Fbvn5ji6BWzklRqdCQ2WZ5S2MNgFG+ANuAtOREa57QX0O8CTFdXYVusDWTvKTQ1S3gq6HBkjQH4MaBE/kDWyO+G3QFFOBW3MrCOKEkNmM6Gv01rkvAaBphS5VIMS/juyM9oRma0JpdoPOw2gedgrsQccBVfBU/ATKJmsrAjdnd5HAf5RoIlMdUeHI6Bs/7eZKLxO8LbFKtW6oNX51AKCAR1vg9/iYD3owxO9FrsadHU8JX68C00KQmcrQqmwO6E8KwZ2i82uKpP8z6IT33EBGNg5YLvNDRAFRqYjvOEDo7drh22jnmpbzN6ptX3spC0Gr+ELv5PC25rQhV047NA/Ap7uRYH+UuCdWju4WQwNea7AP8Yumwluf1+QPRe7S8K/FL6w2E2niczKi1/71pjQuAJMaUVcT6zyDy3gdK5KWt+ET35BFlkd7NvgZFIBZnMtGKbPT8IX/i1Bl41MatdEAdv4viN5jJ1a+6KfEdNth52nSnpz5DtXbA+xj/5iypLrG/0I9CPQj0ArI/AHixCE2UoSwqgAAAAASUVORK5CYII=) center center no-repeat;background-size:contain;display:inline-block;width:22px;height:22px}.vjs-chromecast-button:hover{cursor:pointer}.vjs-chromecast-button:hover .vjs-icon-placeholder{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAAXNSR0IArs4c6QAAAvJJREFUaAXtmTtoFFEUhrMhpRZipQELBQsbwUoEQYPaWFhpYSloJ1bai502tqnVRojYWPlA1CKCjWUKLYRsGmOKdKKs3xnmzpz57+xjdMaZhTnw79zzuOdx79zH7i4s9NSPQD8C/Qh0ZgRGo9EyeAKGoGu0SUKW27IfsEFgUsVn+P1B1tHnNnkdHwwGm5bfokvyAe2uJ2/pWo73rWHkZ2AIfyCRdv9jixk4aGn6AkY+bwwynZe31bYF6WOH/Pwr5PVz0+4LaHuq+hloewaWQgJhVQd+Xp79K9T2TM39DGRrgINul9G060TAV9ovwEfWR+EURNY9sqN6DG0hXwXn2sxac4tyUYMx/DvkJ6PO/0Gg+UQh1WAKv4b+cOSkQYHmE0JlN04M9iK067RdUw+B8+Ai2AfKaAfhFdbHqzJl3TIrwPuc6dyizxJYAc9AGf1CeNM7bqqtwSvHwcEp8EEdpfzDyg4rdtC4Fbvn5ji6BWzklRqdCQ2WZ5S2MNgFG+ANuAtOREa57QX0O8CTFdXYVusDWTvKTQ1S3gq6HBkjQH4MaBE/kDWyO+G3QFFOBW3MrCOKEkNmM6Gv01rkvAaBphS5VIMS/juyM9oRma0JpdoPOw2gedgrsQccBVfBU/ATKJmsrAjdnd5HAf5RoIlMdUeHI6Bs/7eZKLxO8LbFKtW6oNX51AKCAR1vg9/iYD3owxO9FrsadHU8JX68C00KQmcrQqmwO6E8KwZ2i82uKpP8z6IT33EBGNg5YLvNDRAFRqYjvOEDo7drh22jnmpbzN6ptX3spC0Gr+ELv5PC25rQhV047NA/Ap7uRYH+UuCdWju4WQwNea7AP8Yumwluf1+QPRe7S8K/FL6w2E2niczKi1/71pjQuAJMaUVcT6zyDy3gdK5KWt+ET35BFlkd7NvgZFIBZnMtGKbPT8IX/i1Bl41MatdEAdv4viN5jJ1a+6KfEdNth52nSnpz5DtXbA+xj/5iypLrG/0I9CPQj0ArI/AHixCE2UoSwqgAAAAASUVORK5CYII=)}.vjs-chromecast-button.vjs-chromecast-casting-state .vjs-icon-placeholder{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAAXNSR0IArs4c6QAAA49JREFUaAXtmTtoFFEUhrMhVtFCBEEDFgoWNqIgaCAQg9pYWGlhKWgnNkaxDHba2KZWGyFiI0J8ohZRbOwMqIWQpDGmSCfK+p1x7+y5/8zuzmQ3yQbmwL9z3vfc59zdHRioqBqBagSqEeibEajX6yPgIVgE/UYLFGS1jfgBqwWhYfiMvCvo+vS5TF2Ha7XagtU36Iq8C9/vxVu5VuMdY4z8DCwi70m0/f+xxAzstTJ9B+q+bhxSm9dvFm8b0rcd6vNLyNu3DF91YLOnaqhoAboGi8at1S+s8U7xW34JpTNQtMedRmSj7WVmYJLi5je6wJ63x14YA89sT6wnaeHaltpLyyQ8CT5q4l7JWpDmDfb0bYvDKkq7TgR8h38KPrA/orcguoSIsSV4E0yBbYmyRx+6J60DPrXaB8yhBS2hnwanfALPYzsCvoKekc9vvCZWe8ZBAxryW57HM8H/G9iNrWdLStvQetRetAMhzwzMfk2CbhjMBqdunjm5o3TB7vfADpR2nbZr6j5wGpwFO0EeraC8wFp84Y20Moz8Ghzz+rK8rnGr3udQu7elPDFDYAI8Bnn0B+XVNKDBoLPl1NWeyMkZta/2jjLRo+B9lKUp3NMEmGxj/266lONy8kUJ1F5YJss1YCOvlDcTt9SpqKwFaZzabROvgnnwCkyBoxmnhgLbGbACPFmnoqMWeRCs6WTStn1Dxqu91SlkHTqfcUaB/hDQTvxCF51OyPbGLk3apiZQe6sOhLg5mKgwS4DOZkKX04wmx6f03SknB2mapPZOHbDIn2BcA9HZnlA64f0w2gWwFPl44zVY7eawHRwEF8EjkHeCmG5cg9Hp6fQux+cLfoUpJz6KVXtGxvsAyDv/bSai5YQ8CpR0Q19Xh3ayFqS+am8pEzgJ/kqCOQ3Arp2dVp9uZGk/ewq1S06wdUIpOp0w6mljt9j0qtIufxGbNp6JwcHeA3baXAGZhtHpCEdfL7HbtcOOUU+5N9dM4wUUPqnxmRBxeIlsF7uUkG1P6MaOXnbY7wNPt9MEXTI+qfEh3WBg5DmB/AC/dCa4/X1D90T8zon8XORos5tNCykqS1771phQqw6Y0TpxOfFqfmgHxpqmhPshcvILsuh6Ib4JSdp1wHwuBcfG85PI0b8l2NKRafitRweWyX1D6mg5tfZFPyWm2152nkrZLZEPLskv4p/5iyktrmKqEahGoBqBTRmBfwb8WzXqcsYyAAAAAElFTkSuQmCC)}.vjs-chromecast-button.vjs-chromecast-casting-state:hover .vjs-icon-placeholder{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAAXNSR0IArs4c6QAAA49JREFUaAXtmTtoFFEUhrMhVtFCBEEDFgoWNqIgaCAQg9pYWGlhKWgnNkaxDHba2KZWGyFiI0J8ohZRbOwMqIWQpDGmSCfK+p1x7+y5/8zuzmQ3yQbmwL9z3vfc59zdHRioqBqBagSqEeibEajX6yPgIVgE/UYLFGS1jfgBqwWhYfiMvCvo+vS5TF2Ha7XagtU36Iq8C9/vxVu5VuMdY4z8DCwi70m0/f+xxAzstTJ9B+q+bhxSm9dvFm8b0rcd6vNLyNu3DF91YLOnaqhoAboGi8at1S+s8U7xW34JpTNQtMedRmSj7WVmYJLi5je6wJ63x14YA89sT6wnaeHaltpLyyQ8CT5q4l7JWpDmDfb0bYvDKkq7TgR8h38KPrA/orcguoSIsSV4E0yBbYmyRx+6J60DPrXaB8yhBS2hnwanfALPYzsCvoKekc9vvCZWe8ZBAxryW57HM8H/G9iNrWdLStvQetRetAMhzwzMfk2CbhjMBqdunjm5o3TB7vfADpR2nbZr6j5wGpwFO0EeraC8wFp84Y20Moz8Ghzz+rK8rnGr3udQu7elPDFDYAI8Bnn0B+XVNKDBoLPl1NWeyMkZta/2jjLRo+B9lKUp3NMEmGxj/266lONy8kUJ1F5YJss1YCOvlDcTt9SpqKwFaZzabROvgnnwCkyBoxmnhgLbGbACPFmnoqMWeRCs6WTStn1Dxqu91SlkHTqfcUaB/hDQTvxCF51OyPbGLk3apiZQe6sOhLg5mKgwS4DOZkKX04wmx6f03SknB2mapPZOHbDIn2BcA9HZnlA64f0w2gWwFPl44zVY7eawHRwEF8EjkHeCmG5cg9Hp6fQux+cLfoUpJz6KVXtGxvsAyDv/bSai5YQ8CpR0Q19Xh3ayFqS+am8pEzgJ/kqCOQ3Arp2dVp9uZGk/ewq1S06wdUIpOp0w6mljt9j0qtIufxGbNp6JwcHeA3baXAGZhtHpCEdfL7HbtcOOUU+5N9dM4wUUPqnxmRBxeIlsF7uUkG1P6MaOXnbY7wNPt9MEXTI+qfEh3WBg5DmB/AC/dCa4/X1D90T8zon8XORos5tNCykqS1771phQqw6Y0TpxOfFqfmgHxpqmhPshcvILsuh6Ib4JSdp1wHwuBcfG85PI0b8l2NKRafitRweWyX1D6mg5tfZFPyWm2152nkrZLZEPLskv4p/5iyktrmKqEahGoBqBTRmBfwb8WzXqcsYyAAAAAElFTkSuQmCC)}.vjs-chromecast-button.vjs-chromecast-button-lg:not(.vjs-hidden){display:flex;align-items:center;width:auto;padding:0 4px}.vjs-chromecast-button.vjs-chromecast-button-lg:not(.vjs-hidden) .vjs-chromecast-button-label{flex-grow:1;margin-left:4px}.vjs-chromecast-button.vjs-chromecast-button-lg:not(.vjs-hidden) .vjs-icon-placeholder{flex-grow:1}.vjs-tech-chromecast{display:flex;flex-direction:column;justify-content:center;align-items:center;overflow:hidden}.vjs-tech-chromecast .vjs-tech-chromecast-poster:after{content:" ";display:block;height:2px;width:100px;background-color:#ccc;position:absolute;left:calc(50% - 50px)}.vjs-tech-chromecast .vjs-tech-chromecast-poster-img{max-height:180px;width:auto;border:2px solid #cccccc}.vjs-tech-chromecast .vjs-tech-chromecast-poster-img.vjs-tech-chromecast-poster-img-empty{width:160px;height:90px}.vjs-tech-chromecast .vjs-tech-chromecast-title-container{position:absolute;bottom:50%;margin-bottom:100px;color:#ccc;text-align:center}.vjs-tech-chromecast .vjs-tech-chromecast-title{font-size:22px}.vjs-tech-chromecast .vjs-tech-chromecast-title.vjs-tech-chromecast-title-empty{display:none}.vjs-tech-chromecast .vjs-tech-chromecast-subtitle{font-size:18px;padding-top:.5em}.vjs-tech-chromecast .vjs-tech-chromecast-subtitle.vjs-tech-chromecast-subtitle-empty{display:none}.video-js .vjs-control-bar .vjs-airplay-button,.video-js .vjs-control-bar .vjs-chromecast-button{width:47px}.video-js .vjs-control-bar .vjs-airplay-button .vjs-icon-placeholder,.video-js .vjs-control-bar .vjs-chromecast-button .vjs-icon-placeholder{display:inline-block}
#json-categories-as-text {
  border: 1px solid #c6c6c6;
  color: var(--textareaForegroundColor);
  padding: 5px 15px;
  background-color: var(--markdownTextareaBackgroundColor);
  font-family: monospace;
  font-size: 13px;
  border-bottom: 0;
  border-radius: 3px 3px unset unset;
  width: 100%;
}

#json-categories-as-text.error {
  border-color: red;
  color: red;
  border-bottom: 1px solid;
}

#categories-table th {
  border-color: currentcolor;
  border-bottom: none;
  border: var(--submenuBackgroundColor);
  border-bottom: 1px solid var(--submenuBackgroundColor);
  padding: 5px;
  font-weight: 600;
  color: var(--mainForegroundColor);
}

#categories-table tr {
  outline: 0;
  background-color: var(--mainBackgroundColor);
}

#categories-table tbody tr:nth-child(odd) {
  background-color: var(--submenuBackgroundColor);
}

#categories-table td {
  padding: 5px;
}

#categories-table .category__deleted {
  text-decoration: line-through;
  color: red;
}

#categories-table .category__added {
  color: green;
}
.subtitle-cues {
  width: 100%;
}

.subtitle-cues input {
  width: 100%;
}

.subtitle-cue-highlight {
  font-weight: bold;
}

.subtitle-cues > tbody > tr > td:first-child {
  color: var(--fg);
  font-weight: bold;
}

.subtitle-cues > tbody > tr > td:nth-child(1) {
  width: 40px;
}

.subtitle-cues > tbody > tr > td:nth-child(2) {
  width: 110px;
}

.subtitle-cues > tbody > tr > td:nth-child(3) {
  width: 110px;
}

.subtitle-cues > tbody > tr > td:nth-child(4) {
  cursor: pointer;
}

.subtitle-cues > tbody > tr:nth-child(2n+1) {
  background-color: var(--bg-secondary-450);
}

.subtitle-cues > tbody > tr > td, .subtitle-cues > thead > tr > th {
  padding-left: 6px;
  padding-right: 6px;
}

.subtitle-editor {
  position: sticky;
  top: 50px;
  padding-top: 26px;
}

.subtitle-editor-overflow {
  overflow-y: scroll;
  height: 100vh;
  padding-bottom: 320px;
}

#subtitle-video-viewer {
  position: relative;
  height: 0;
  width: 100%;
  padding-top: 56.25%;
}

#subtitle-video-viewer iframe {
  position: absolute;
  inset: 0px;
}

#subtitle-preview {
  background-color: #000000;
  color: #ffffff;
  text-align: center;
  min-height: 50px;
  white-space: pre-line;
}

#subtitle-cue-input {
  padding-bottom: 1em;
}

.action-bubble {
  float: left;
  background: #cecece;
  padding: 4px;
  border-radius: 8px;
  margin-right: 8px;
}

.subtitle-head {
  padding-top: 1em;
}

.subtitle-main {
  padding-bottom: 220px;
}

#bottom-controls {
  position: sticky;
  bottom: 0px;
  min-height: 220px;
  background-color: var(--bg);
  width: 100%;
  box-shadow: 0 0px 16px #000;
  padding-top: 0.5em;
}

.subtitle-cue-italic {
  font-style: italic;
}

.subtitle-cue-bold {
  font-weight: bold;
}

.subtitle-cue-underline {
  text-decoration: underline;
}
/**
 * PeerTube Plugin SponsorBlock
 * Custom styles
 */

/* Segment markers on progress bar */
.sponsorblock-marker {
  position: absolute;
  top: 0;
  bottom: 0;
  background-color: rgba(0, 255, 0, 0.6);
  pointer-events: none;
  z-index: 30;
  transition: background-color 0.2s ease;
}

.sponsorblock-marker:hover {
  background-color: rgba(0, 255, 0, 0.8);
}

/* Sponsor category colors */
.sponsorblock-marker[data-category="sponsor"] {
  background-color: rgba(0, 255, 0, 0.6);
}

.sponsorblock-marker[data-category="selfpromo"] {
  background-color: rgba(255, 255, 0, 0.6);
}

.sponsorblock-marker[data-category="interaction"] {
  background-color: rgba(0, 191, 255, 0.6);
}

.sponsorblock-marker[data-category="intro"] {
  background-color: rgba(0, 255, 255, 0.6);
}

.sponsorblock-marker[data-category="outro"] {
  background-color: rgba(0, 32, 255, 0.6);
}

.sponsorblock-marker[data-category="preview"] {
  background-color: rgba(255, 128, 0, 0.6);
}

.sponsorblock-marker[data-category="music_offtopic"] {
  background-color: rgba(255, 0, 255, 0.6);
}

.sponsorblock-marker[data-category="filler"] {
  background-color: rgba(127, 0, 255, 0.6);
}

/* Skip notification styling */
.sponsorblock-notification {
  position: fixed;
  bottom: 80px;
  right: 20px;
  background-color: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
  font-size: 14px;
  z-index: 9999;
  animation: fadeInOut 3s ease-in-out;
}

@keyframes fadeInOut {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  10% {
    opacity: 1;
    transform: translateY(0);
  }
  90% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-10px);
  }
}

/* SponsorBlock mapping widget */
.sponsorblock-widget {
  margin-top: 10px;
  font-size: 13px;
}

.sponsorblock-widget-toggle {
  cursor: pointer;
  color: var(--fg-500);
  user-select: none;
  display: inline-block;
  font-weight: 600;
}

.sponsorblock-widget-toggle:hover {
  color: var(--fg);
}

.sponsorblock-widget-form {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}

.sponsorblock-widget-input {
  font-family: monospace;
  font-size: 13px;
  padding: 4px 8px;
  border: 1px solid var(--input-border-color);
  border-radius: 4px;
  background: var(--input-bg);
  color: var(--input-fg);
  width: 280px;
}

.sponsorblock-widget-input:focus {
  outline: none;
  border-color: var(--primary);
}

.sponsorblock-widget-status {
  margin-top: 4px;
  font-size: 12px;
}

.sponsorblock-widget-status.success {
  color: var(--green);
}

.sponsorblock-widget-status.error {
  color: var(--red);
}

.sponsorblock-widget-current {
  margin-top: 6px;
  color: var(--fg-500);
  font-size: 12px;
}

.sponsorblock-widget-current code {
  background: var(--bg-secondary-600);
  padding: 1px 5px;
  border-radius: 3px;
  font-family: monospace;
  color: var(--fg);
}

/* ==========================================
   Admin Dashboard
   ========================================== */

.sponsorblock-admin-root {
  padding: 20px 0;
  font-size: 14px;
  color: var(--fg);
}

/* Stats row */
.sponsorblock-admin-stats {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

.sponsorblock-admin-stat {
  background: var(--bg-secondary-600);
  border: 1px solid var(--bg-secondary-400);
  border-radius: 8px;
  padding: 16px 20px;
  min-width: 160px;
  flex: 1;
}

.sponsorblock-admin-stat-value {
  font-size: 28px;
  font-weight: 700;
  color: var(--primary);
  line-height: 1.2;
}

.sponsorblock-admin-stat-label {
  font-size: 12px;
  color: var(--fg-500);
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Info note */
.sponsorblock-admin-note {
  margin-bottom: 16px;
  padding: 10px 14px;
  border-radius: 4px;
  font-size: 13px;
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  color: color-mix(in srgb, var(--primary) 70%, var(--fg));
  border: 1px solid color-mix(in srgb, var(--primary) 25%, transparent);
}

/* Action buttons bar */
.sponsorblock-admin-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

/* Status message */
.sponsorblock-admin-message {
  margin-bottom: 16px;
  padding: 10px 14px;
  border-radius: 4px;
  font-size: 13px;
}

.sponsorblock-admin-message--success {
  background: color-mix(in srgb, var(--green) 15%, transparent);
  color: var(--green);
  border: 1px solid color-mix(in srgb, var(--green) 30%, transparent);
}

.sponsorblock-admin-message--error {
  background: color-mix(in srgb, var(--red) 15%, transparent);
  color: var(--red);
  border: 1px solid color-mix(in srgb, var(--red) 30%, transparent);
}

/* Mappings table */
.sponsorblock-admin-table-wrap {
  overflow-x: auto;
}

.sponsorblock-admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.sponsorblock-admin-table th {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 2px solid var(--bg-secondary-400);
  color: var(--fg-500);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

.sponsorblock-admin-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--bg-secondary-400);
  vertical-align: middle;
}

.sponsorblock-admin-table tr:hover td {
  background: rgba(255, 255, 255, 0.03);
}

.sponsorblock-admin-table code {
  background: var(--bg-secondary-600);
  padding: 2px 6px;
  border-radius: 3px;
  font-family: monospace;
  font-size: 12px;
  color: var(--fg);
}

/* Row action buttons */
.sponsorblock-admin-row-actions {
  display: flex;
  gap: 6px;
}

/* Queue status badges */
.sponsorblock-admin-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
}

.sponsorblock-admin-badge--pending {
  background: rgba(255, 193, 7, 0.2);
  color: #ffc107;
}

.sponsorblock-admin-badge--processing {
  background: color-mix(in srgb, var(--primary) 20%, transparent);
  color: var(--primary);
}

.sponsorblock-admin-badge--done {
  background: color-mix(in srgb, var(--green) 20%, transparent);
  color: var(--green);
}

.sponsorblock-admin-badge--error {
  background: color-mix(in srgb, var(--red) 20%, transparent);
  color: var(--red);
}

/* Empty state */
.sponsorblock-admin-empty {
  text-align: center;
  color: var(--fg-500);
  padding: 40px 20px;
  font-size: 14px;
}
.attribute-ffprobe {
  font-size: 13px;
  margin-bottom: 12px;
}

.attribute-label-ffprobe {
  min-width: 142px;
  padding-right: 5px;
  display: inline-block;
  color: var(--greyForegroundColor);
  font-weight: 700;
}
.top-menu .panel-block .custom-link {
    display: flex;
    align-items: center;
    padding-left: 26px;
    color: var(--menuForegroundColor);
    cursor: pointer;
    min-height: 40px;
    font-size: 16px;
    transition: background-color .1s ease-in-out;
    white-space: normal;
    word-break: break-word;
    padding-right: 20px;
}
.orion-content {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding-top: 40px;
    margin-bottom: 40px;
}/* .video-js .vjs-big-vr-play-button, */

.video-js.vjs-xr .vjs-big-play-button {
    width: 100px !important;
    height: 100px !important;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='360' viewBox='0 0 360 360'%3E%3Cpath fill='%23FFF' d='M334.883 275.78l-6.374-36.198-6.375-36.2-28.16 23.62-28.164 23.62 25.837 9.41C266.247 296.544 224 320.5 176.25 320.5c-77.47 0-140.5-63.03-140.5-140.5 0-77.472 63.03-140.5 140.5-140.5 53.428 0 99.98 29.978 123.733 73.993l13.304-6.923C287.025 57.76 235.45 24.5 176.25 24.5c-85.743 0-155.5 69.757-155.5 155.5 0 85.742 69.757 155.5 155.5 155.5 54.253 0 102.09-27.94 129.922-70.177l28.71 10.457z'/%3E%3Cpath fill='%23FFF' d='M314.492 175.167c-12.98 0-23.54-10.56-23.54-23.54s10.56-23.54 23.54-23.54c12.98 0 23.54 10.56 23.54 23.54s-10.56 23.54-23.54 23.54zm0-38.08c-8.018 0-14.54 6.522-14.54 14.54s6.522 14.54 14.54 14.54c8.017 0 14.54-6.522 14.54-14.54s-6.523-14.54-14.54-14.54z'/%3E%3Cg fill='%23FFF'%3E%3Cpath d='M88.76 173.102h9.395c4.74-.042 8.495-1.27 11.268-3.682 2.77-2.412 4.157-5.903 4.157-10.474 0-4.4-1.153-7.817-3.46-10.25-2.307-2.434-5.83-3.65-10.568-3.65-4.147 0-7.554 1.195-10.22 3.585-2.666 2.392-4 5.514-4 9.364H69.908c0-4.74 1.26-9.055 3.776-12.95 2.518-3.892 6.03-6.928 10.537-9.108 4.508-2.18 9.554-3.27 15.14-3.27 9.225 0 16.472 2.318 21.74 6.952 5.27 4.634 7.903 11.077 7.903 19.33 0 4.147-1.323 8.05-3.967 11.71-2.646 3.66-6.062 6.422-10.252 8.284 5.078 1.736 8.94 4.465 11.584 8.19s3.968 8.166 3.968 13.33c0 8.294-2.847 14.895-8.538 19.804s-13.17 7.363-22.438 7.363c-8.887 0-16.166-2.37-21.836-7.11-5.67-4.74-8.506-11.045-8.506-18.916h15.425c0 4.062 1.365 7.363 4.094 9.902 2.73 2.54 6.4 3.81 11.014 3.81 4.782 0 8.55-1.27 11.3-3.81s4.126-6.22 4.126-11.045c0-4.865-1.44-8.61-4.316-11.235-2.878-2.623-7.152-3.936-12.822-3.936H88.76V173.1zM187.598 133.493v12.76h-1.904c-8.633.126-15.53 2.497-20.693 7.108-5.162 4.614-8.23 11.152-9.203 19.615 4.95-5.205 11.277-7.808 18.98-7.808 8.166 0 14.608 2.878 19.328 8.633 4.718 5.755 7.077 13.182 7.077 22.28 0 9.395-2.76 17.002-8.284 22.82-5.52 5.818-12.77 8.73-21.74 8.73-9.226 0-16.705-3.407-22.44-10.222-5.733-6.812-8.6-15.742-8.6-26.787v-5.267c0-16.208 3.945-28.903 11.84-38.086 7.89-9.182 19.242-13.774 34.054-13.774h1.586zM171.03 177.61c-3.386 0-6.485.95-9.3 2.855-2.814 1.904-4.877 4.443-6.188 7.617v4.697c0 6.854 1.438 12.304 4.316 16.345 2.877 4.04 6.602 6.062 11.172 6.062s8.188-1.715 10.854-5.143 4-7.934 4-13.52-1.355-10.135-4.063-13.648c-2.708-3.51-6.304-5.267-10.79-5.267zM271.136 187.447c0 13.29-2.486 23.307-7.46 30.057s-12.535 10.125-22.69 10.125c-9.988 0-17.51-3.292-22.566-9.872-5.058-6.58-7.65-16.323-7.776-29.23V172.53c0-13.287 2.485-23.252 7.458-29.896 4.973-6.643 12.558-9.966 22.757-9.966 10.112 0 17.655 3.237 22.63 9.712 4.97 6.475 7.52 16.166 7.647 29.072v15.995zm-15.425-17.265c0-8.674-1.185-15.033-3.554-19.075-2.37-4.04-6.137-6.062-11.3-6.062-5.035 0-8.738 1.915-11.107 5.745-2.37 3.83-3.62 9.807-3.746 17.932v20.948c0 8.633 1.206 15.064 3.618 19.297s6.2 6.348 11.362 6.348c4.95 0 8.61-1.957 10.98-5.87 2.37-3.915 3.62-10.04 3.746-18.378v-20.885z'/%3E%3C/g%3E%3C/svg%3E");
    background-size: contain;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    left: 50% !important;
    top: 50% !important;
    margin-left: -50px;
    margin-top: -50px;
}

.vjs-playing.vjs-has-started.video-js.vjs-xr .vjs-big-play-button {
    display: none;
}

.video-js.vjs-xr .vjs-big-play-button .vjs-icon-placeholder::before {
    display: none;
}

.video-js.vjs-xr .vjs-big-vr-play-button .vjs-icon-placeholder {
    display: none
}

:hover.video-js .vjs-big-vr-play-button {
    -webkit-transition: border-color 0.4s, outline 0.4s, background-color 0.4s;
    -moz-transition: border-color 0.4s, outline 0.4s, background-color 0.4s;
    -ms-transition: border-color 0.4s, outline 0.4s, background-color 0.4s;
    -o-transition: border-color 0.4s, outline 0.4s, background-color 0.4s;
    transition: border-color 0.4s, outline 0.4s, background-color 0.4s
}

.video-js .vjs-big-play-button::before,
.video-js .vjs-big-vr-play-button::before {
    content: ''
}

.video-js canvas {
    cursor: move
}

.video-js .vjs-button-vr .vjs-icon-placeholder {
    height: 30px;
    width: 30px;
    display: inline-block;
    background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNHB4IiBoZWlnaHQ9IjI0cHgiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0iI0ZGRkZGRiI+CiAgICA8cGF0aCBkPSJNMjAuNzQgNkgzLjIxQzIuNTUgNiAyIDYuNTcgMiA3LjI4djEwLjQ0YzAgLjcuNTUgMS4yOCAxLjIzIDEuMjhoNC43OWMuNTIgMCAuOTYtLjMzIDEuMTQtLjc5bDEuNC0zLjQ4Yy4yMy0uNTkuNzktMS4wMSAxLjQ0LTEuMDFzMS4yMS40MiAxLjQ1IDEuMDFsMS4zOSAzLjQ4Yy4xOS40Ni42My43OSAxLjExLjc5aDQuNzljLjcxIDAgMS4yNi0uNTcgMS4yNi0xLjI4VjcuMjhjMC0uNy0uNTUtMS4yOC0xLjI2LTEuMjh6TTcuNSAxNC42MmMtMS4xNyAwLTIuMTMtLjk1LTIuMTMtMi4xMiAwLTEuMTcuOTYtMi4xMyAyLjEzLTIuMTMgMS4xOCAwIDIuMTIuOTYgMi4xMiAyLjEzcy0uOTUgMi4xMi0yLjEyIDIuMTJ6bTkgMGMtMS4xNyAwLTIuMTMtLjk1LTIuMTMtMi4xMiAwLTEuMTcuOTYtMi4xMyAyLjEzLTIuMTNzMi4xMi45NiAyLjEyIDIuMTMtLjk1IDIuMTItMi4xMiAyLjEyeiIvPgogICAgPHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgyNHYyNEgwVjB6Ii8+Cjwvc3ZnPgo=) no-repeat left center
}
.video-js.vjs-has-started .vjs-control-bar {
    display: flex;
    visibility: visible;
    opacity: 1;
    transition: visibility .1s,opacity .1s;
}
/* .video-js .vjs-control-bar {
    display: none;
    visibility: hidden;
} */
/* 
.video-js.vjs-xr .vjs-control-bar .vjs-peertube {
    display: none;
}

.video-js .vjs-xr .vjs-control-bar {
    display: flex !important;
    z-index: 99999;
    visibility: visible;
}

.video-js .vjs-xr .vjs-control-bar {
    opacity: 0;
}

.vjs-playing.vjs-has-started .vjs-xr .vjs-big-play-button {
    display: none;
    opacity: 0;
}

.vjs-paused.vjs-has-started .vjs-xr .vjs-big-play-button {
    display: block;
    opacity: 1;
}

.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-xr .vjs-control-bar {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transition: none;
} *//* Hide comments */
my-video-comments.border-top {
  display: none !important;
}

.peertube-container .top-left-block .peertube-title span.instance-name {
  display: none;
}

/* hide login buttons block */

.login-buttons-block {
  display: none;
}

.peertube-container .header-right a.publish-button {
  display: none;
}

.user-logged-in .header-right a.publish-button {
  display: flex;
}

.on-instance .block-title {
  margin-top: 34px;
  font-size: 15px;
}

.action-button-like,
.action-button-dislike {
  display: none !important;
}

span.c-hand[role="button"] {
  font-size: 17px !important;
  font-weight: 500 !important;
}

/* remove default themes */

option[value=default],option[value=instance-default] {
  display: none;
}

/* hide subscripbe button */
.btn-group-subscribe{
  visibility: hidden;
}
/* hide liked link */
a[routerlink="/videos/most-liked"] {
  display: none !important;
}/* Hide comments */
my-video-comments.border-top {
  display: none !important;
}

.peertube-container .top-left-block .peertube-title span.instance-name {
  display: none;
}

/* hide login buttons block */

.login-buttons-block {
  display: none;
}

.peertube-container .header-right a.publish-button {
  display: none;
}

.user-logged-in .header-right a.publish-button {
  display: flex;
}

.on-instance .block-title {
  margin-top: 34px;
  font-size: 15px;
}

.action-button-like,
.action-button-dislike {
  display: none !important;
}

span.c-hand[role="button"] {
  font-size: 17px !important;
  font-weight: 500 !important;
}

/* hide trending buto */
.btn-group.btn-group-toggle.ng-untouched.ng-pristine.ng-valid {
  display: none;
}

/* remove default themes */

option[value="default"],
option[value="instance-default"] {
  display: none;
}
.peertube-container .top-left-block .peertube-title span.instance-name {
  display: none;
}
#typeahead-container input#search-video.focus-visible {
  padding-left: 10px;
  padding-right: 40px;
  z-index: 70;
}
.custom-links-header {
  display: block;
  position: fixed;
  height: 50px;
  top: 0px;
  left: 240px;
  right: 390px;
  overflow: hidden;
  z-index: 50;
}
.header .header-right {
  display: block !important;
  position: absolute;
  top: 10px;
  right: 0px;
  left: 505px;
}

.custom-links-header p a {
  position: relative;
  float: left;
  top: 0px;
  bottom: 0px;
  display: block;
  height: 50px;
  padding: 8px 35px;
  text-decoration: none;
  font-size: 24px;
  font-weight: 500;
  transition: color 0.3s;
  text-align: center;
}

#typeahead-container input#search-video {
  display: block;
  position: absolute;
  border: unset;
  background-color: unset;
  right: 0px;
  width: 250px;
}
#typeahead-help, #typeahead-instructions{
  margin-top:34px;
}

.header-right my-search-typeahead {
  margin-right: 5px;
}

#typeahead-container {
  width: 100%;
}

#typeahead-container:focus input,
#typeahead-container:focus-within input {
  width: 100% !important;
}
.header-right a.publish-button {
  margin-right: 15px;
}
@media (max-width: 1100px) {
  .user-logged-in .custom-links-header {
    right: 390px;
  }
  .custom-links-header {
    right: 260px;
  }
}
@media screen and (max-width: 900px) {
  .user-logged-in .custom-links-header {
    right: 190px;
  }

  .custom-links-header {
    right: 60px;
  }
  .header .header-right {
    left: 230px;
  }
  .custom-links-header p a {
    width: 50%;
  }
  #typeahead-container input#search-video {
    width: 44px;
    padding-left: 0px;
    padding-right: 0px;
  }
}
@media screen and (max-width: 715px) {
  .user-logged-in .custom-links-header {
    right: 190px;
  }
  .custom-links-header {
    left: 40px;
    right: 60px;
  }
  .custom-links-header p a {
    width: 50%;
  }
  .header .header-right {
    left: 51px;
  }
}
@media screen and (max-width: 600px) {
  .user-logged-in .custom-links-header {
    right: 120px;
  }
  .custom-links-header {
    right: 60px;
  }
}
._spinner_12uqf_1 span{color:transparent;width:15px;height:19px;vertical-align:middle;display:inline-block;position:relative}._spinner_12uqf_1 span:before{content:" ";position:absolute;display:block;width:15px;height:15px;margin:1px;border-radius:50%;border:2px solid #fff;border-color:#fff transparent #fff transparent;animation:_spinnerAnimation_12uqf_1 1.2s linear infinite}@keyframes _spinnerAnimation_12uqf_1{0%{transform:rotate(0)}to{transform:rotate(360deg)}}
.ncd-content {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding-top: 40px;
    margin-bottom: 40px;
}

.text-center {
    text-align: center;
}.other-videos .image-zone-tag-container {
    max-width: 201px;
}


.orion-content {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding-top: 40px;
    margin-bottom: 40px;
}



table.table-orion {
    border: 1px solid #ccc;
    border-collapse: collapse;
    margin: 0;
    padding: 0;
    width: 100%;
    table-layout: fixed;
}

table.table-orion caption {
    font-size: 1.5em;
    margin: 0.5em 0 0.75em;
}

table.table-orion tr {
    background-color: #f8f8f8;
    border: 1px solid #ddd;
    padding: 0.35em;
}

table.table-orion th,
table.table-orion td {
    padding: 0.625em;
    text-align: center;
}

table.table-orion th {
    font-size: 0.85em;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

@media screen and (max-width: 600px) {
    table.table-orion {
        border: 0;
    }

    table.table-orion caption {
        font-size: 1.3em;
    }

    table.table-orion thead {
        border: none;
        clip: rect(0 0 0 0);
        height: 1px;
        margin: -1px;
        overflow: hidden;
        padding: 0;
        position: absolute;
        width: 1px;
    }

    table.table-orion tr {
        border-bottom: 3px solid #ddd;
        display: block;
        margin-bottom: 0.625em;
    }

    table.table-orion td {
        border-bottom: 1px solid #ddd;
        display: block;
        font-size: 0.8em;
        text-align: right;
    }

    table.table-orion td::before {
        /*
      * aria-label has no advantage, it won't be read inside a table
      content: attr(aria-label);
      */
        content: attr(data-label);
        float: left;
        font-weight: bold;
        text-transform: uppercase;
    }

    table.table-orion td:last-child {
        border-bottom: 0;
    }
}
.plugin-premium-users > .row {
  padding-bottom: 20px;
}
.plugin-premium-users h2 {
  text-transform: uppercase;
  color: var(--mainColor);
  font-weight: 700;
  font-size: 1rem;
  margin-bottom: 10px;
}
.plugin-premium-users .button-md {
  padding: 10px 25px;
  font-size: 18px;
}
.plugin-premium-users .original-price {
  text-decoration-line: line-through;
  opacity: 0.7;
  text-decoration-style: solid;
  text-decoration-thickness: 1px;
}
.plugin-premium-users.my-account .grey-button.peertube-button-link {
  margin-right: 10px;
}
.plugin-premium-users.become-premium {
  max-width: 800px;
}
.plugin-premium-users.become-premium img {
  max-width: 100%;
  margin-bottom: 2rem;
}
.plugin-premium-users.become-premium .prices-alternatives,
.plugin-premium-users.become-premium .action-buttons {
  max-width: 500px;
}
.plugin-premium-users.become-premium .row {
  padding-bottom: 0;
}
/* ============================================================
   PeerTube Plugin: Random Video Carousel
   Palette: deep navy bg, electric teal accent, off-white type
   ============================================================ */

#random-video-carousel-wrapper {
  --rvc-bg: #0d1117;
  --rvc-surface: #161b22;
  --rvc-surface-hover: #1c2330;
  --rvc-border: #21262d;
  --rvc-accent: #00d4aa;
  --rvc-accent-dim: rgba(0, 212, 170, 0.15);
  --rvc-text-primary: #e6edf3;
  --rvc-text-secondary: #8b949e;
  --rvc-text-muted: #484f58;
  --rvc-radius: 8px;
  --rvc-card-width: 240px;
  --rvc-card-thumb-height: 135px;
  --rvc-transition: 0.2s ease;

  width: 100%;
  background: var(--rvc-bg);
  border-bottom: 1px solid var(--rvc-border);
  padding: 28px 0 32px;
  margin-bottom: 8px;
  font-family: inherit;
}

/* ---- Section header ---- */
.rvc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 48px;
  margin-bottom: 20px;
}

.rvc-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--rvc-text-primary);
  text-transform: none;
}

.rvc-title-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: var(--rvc-accent);
  color: #000;
  border-radius: 4px;
  font-size: 0.65rem;
  flex-shrink: 0;
}

/* ---- Shuffle button ---- */
.rvc-refresh-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: transparent;
  border: 1px solid var(--rvc-border);
  border-radius: 20px;
  color: var(--rvc-text-secondary);
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--rvc-transition);
  outline: none;
}

.rvc-refresh-btn svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  transition: transform 0.5s ease;
}

.rvc-refresh-btn:hover {
  border-color: var(--rvc-accent);
  color: var(--rvc-accent);
  background: var(--rvc-accent-dim);
}

.rvc-refresh-btn:focus-visible {
  outline: 2px solid var(--rvc-accent);
  outline-offset: 2px;
}

.rvc-refresh-btn--spinning svg {
  animation: rvc-spin 0.6s linear infinite;
}

@keyframes rvc-spin {
  to { transform: rotate(360deg); }
}

/* ---- Track container ---- */
.rvc-track-container {
  position: relative;
  display: flex;
  align-items: center;
}

/* ---- Nav buttons ---- */
.rvc-nav {
  position: absolute;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: var(--rvc-surface);
  border: 1px solid var(--rvc-border);
  border-radius: 50%;
  color: var(--rvc-text-primary);
  cursor: pointer;
  transition: all var(--rvc-transition);
  flex-shrink: 0;
  outline: none;
}

.rvc-nav svg {
  width: 16px;
  height: 16px;
}

.rvc-nav--prev {
  left: 8px;
}

.rvc-nav--next {
  right: 8px;
}

.rvc-nav:hover:not(:disabled) {
  background: var(--rvc-accent);
  border-color: var(--rvc-accent);
  color: #000;
  transform: scale(1.08);
}

.rvc-nav:focus-visible {
  outline: 2px solid var(--rvc-accent);
  outline-offset: 2px;
}

.rvc-nav:disabled {
  opacity: 0.25;
  cursor: default;
}

/* ---- Scrollable track ---- */
.rvc-track {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  padding: 4px 48px 12px;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.rvc-track::-webkit-scrollbar {
  display: none;
}

/* ---- Card ---- */
.rvc-card {
  flex: 0 0 var(--rvc-card-width);
  width: var(--rvc-card-width);
  scroll-snap-align: start;
  background: var(--rvc-surface);
  border: 1px solid var(--rvc-border);
  border-radius: var(--rvc-radius);
  overflow: hidden;
  transition: transform var(--rvc-transition), border-color var(--rvc-transition), box-shadow var(--rvc-transition);
  outline: none;
  cursor: pointer;
}

.rvc-card:hover,
.rvc-card:focus-within {
  transform: translateY(-3px);
  border-color: var(--rvc-accent);
  box-shadow: 0 8px 24px rgba(0, 212, 170, 0.12);
  background: var(--rvc-surface-hover);
}

.rvc-card:focus-visible {
  outline: 2px solid var(--rvc-accent);
  outline-offset: 2px;
}

/* ---- Thumbnail ---- */
.rvc-card-thumb-link {
  display: block;
  text-decoration: none;
}

.rvc-card-thumb {
  position: relative;
  width: 100%;
  height: var(--rvc-card-thumb-height);
  background: #0a0e13;
  overflow: hidden;
}

.rvc-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}

.rvc-card:hover .rvc-card-thumb img {
  transform: scale(1.04);
}

/* Duration badge */
.rvc-duration {
  position: absolute;
  bottom: 6px;
  right: 6px;
  background: rgba(0, 0, 0, 0.82);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 2px 5px;
  border-radius: 3px;
  letter-spacing: 0.03em;
  pointer-events: none;
}

/* Play overlay */
.rvc-play-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.35);
  opacity: 0;
  transition: opacity var(--rvc-transition);
}

.rvc-play-overlay svg {
  width: 42px;
  height: 42px;
  color: #fff;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.5));
}

.rvc-card:hover .rvc-play-overlay {
  opacity: 1;
}

/* ---- Card info ---- */
.rvc-card-info {
  padding: 10px 12px 12px;
}

.rvc-card-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--rvc-text-primary);
  text-decoration: none;
  margin-bottom: 6px;
  transition: color var(--rvc-transition);
}

.rvc-card-title:hover {
  color: var(--rvc-accent);
}

.rvc-card-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.rvc-channel {
  font-size: 0.73rem;
  color: var(--rvc-text-secondary);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color var(--rvc-transition);
}

.rvc-channel:hover {
  color: var(--rvc-accent);
  text-decoration: underline;
}

.rvc-views {
  font-size: 0.7rem;
  color: var(--rvc-text-muted);
}

/* ---- Responsive ---- */
@media (max-width: 768px) {
  .rvc-header {
    padding: 0 20px;
  }

  .rvc-track {
    padding: 4px 20px 12px;
    gap: 12px;
  }

  .rvc-nav--prev {
    left: 2px;
  }

  .rvc-nav--next {
    right: 2px;
  }

  #random-video-carousel-wrapper {
    --rvc-card-width: 200px;
    --rvc-card-thumb-height: 112px;
  }
}

@media (max-width: 480px) {
  #random-video-carousel-wrapper {
    --rvc-card-width: 170px;
    --rvc-card-thumb-height: 96px;
  }

  .rvc-title {
    font-size: 1rem;
  }

  .rvc-refresh-btn span {
    display: none;
  }
}

/* ---- Respect reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .rvc-card,
  .rvc-card-thumb img,
  .rvc-play-overlay,
  .rvc-nav,
  .rvc-refresh-btn svg {
    transition: none !important;
    animation: none !important;
  }

  .rvc-track {
    scroll-behavior: auto;
  }
}
/* Static Files Plugin Styles - Scoped to Plugin Elements Only */

/* Ограничиваем стили только элементами плагина */
.static-files-container,
.static-files-footer-section,
.static-files-fixed-footer,
.static-files-menu-section {
  /* Наследуем цвета от темы PeerTube */
  color: inherit;
  background: inherit;
}

/* Upload Drop Zone - только для плагина */
.upload-drop-zone {
  border: 2px dashed #ddd;
  border-radius: 0.75rem;
  padding: 2rem;
  text-align: center;
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: all 0.3s ease;
}

.upload-drop-zone:hover,
.upload-drop-zone.dragging {
  border-color: #007bff;
  background: rgba(0, 123, 255, 0.05);
  transform: scale(1.01);
}

/* File Items - только для плагина */
.file-item {
  background: transparent;
  border: 1px solid rgba(0, 0, 0, 0.125);
  border-radius: 0.5rem;
  padding: 1rem;
  margin-bottom: 0.75rem;
  color: inherit;
  transition: all 0.2s ease;
}

.file-item:hover {
  background: rgba(0, 0, 0, 0.05);
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  transform: translateY(-1px);
}

/* File Metadata Text */
.file-metadata {
  color: #6c757d;
  font-size: 0.875rem;
  margin-top: 0.5rem;
}

.file-metadata div {
  margin-bottom: 0.25rem;
}

/* Status Badges */
.file-status {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-weight: 500;
  margin-left: 0.5rem;
}

.status-with-metadata {
  background-color: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}

.status-without-metadata {
  background-color: #fff3cd;
  color: #856404;
  border: 1px solid #ffeaa7;
}

/* Buttons - только outline стили для совместимости */
.file-actions .btn {
  transition: all 0.2s ease;
}

.btn-outline-primary:hover {
  transform: translateY(-1px);
}

.btn-outline-secondary:hover {
  transform: translateY(-1px);
}

.btn-outline-danger:hover {
  transform: translateY(-1px);
}

.btn-outline-info:hover {
  transform: translateY(-1px);
}

/* Progress Bar */
.progress-container {
  background: #e9ecef;
  border: 1px solid #dee2e6;
  height: 8px;
  border-radius: 4px;
  overflow: hidden;
  margin: 10px 0;
}

.progress-bar {
  background: #007bff;
  height: 100%;
  transition: width 0.3s ease;
  border-radius: 3px;
}

/* Toast Notifications */
.toast-notification {
  position: fixed;
  top: 20px;
  right: 20px;
  padding: 15px 20px;
  border-radius: 6px;
  font-weight: 600;
  z-index: 10000;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  animation: slideIn 0.3s ease-out;
  border: 1px solid transparent;
}

.toast-notification.success {
  background: #28a745;
  color: white;
  border-color: #1e7e34;
}

.toast-notification.error {
  background: #dc3545;
  color: white;
  border-color: #bd2130;
}

/* File Icons */
.file-icon {
  font-size: 1.2rem;
  margin-right: 8px;
  color: #6c757d;
}

/* Loading Spinner */
.loading-spinner, .spinner-border {
  color: #007bff;
}

/* Stats Numbers */
.stats-number {
  font-size: 2rem;
  font-weight: bold;
  margin: 0;
  color: inherit;
}

/* Footer Section - ограниченные стили */
.static-files-footer-section {
  background: linear-gradient(135deg, #007bff 0%, #6f42c1 100%);
  color: white;
  padding: 20px 0;
  text-align: center;
  margin: 40px 0 20px 0;
  box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
  position: relative;
  z-index: 100;
}

.static-files-footer-section h4 {
  margin: 0;
  color: white !important;
  font-weight: 600;
  font-size: 1.1rem;
}

.static-files-footer-section p {
  margin: 5px 0 0 0;
  color: rgba(255,255,255,0.9);
  font-size: 0.9rem;
}

.static-files-footer-link {
  display: inline-flex;
  align-items: center;
  padding: 12px 20px;
  background: rgba(255,255,255,0.15);
  color: white !important;
  text-decoration: none;
  border-radius: 25px;
  border: 2px solid rgba(255,255,255,0.3);
  transition: all 0.3s ease;
  font-weight: 500;
  backdrop-filter: blur(10px);
}

.static-files-footer-link:hover {
  background: rgba(255,255,255,0.25);
  border-color: rgba(255,255,255,0.5);
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 8px 20px rgba(0,0,0,0.2);
  color: white !important;
  text-decoration: none;
}

/* Fixed Footer */
.static-files-fixed-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(135deg, #007bff 0%, #6f42c1 100%);
  color: white;
  padding: 15px 20px;
  text-align: center;
  box-shadow: 0 -2px 15px rgba(0,0,0,0.2);
  z-index: 10000;
  backdrop-filter: blur(10px);
}

.static-files-fixed-footer a {
  color: white !important;
  text-decoration: none;
  font-weight: 500;
  margin: 0 15px;
}

.static-files-fixed-footer a:hover {
  color: rgba(255,255,255,0.8) !important;
  text-decoration: underline;
}

/* Menu Section */
.static-files-menu-section {
  margin: 1rem 0;
  border-top: 1px solid rgba(0, 0, 0, 0.125);
  padding-top: 1rem;
}

.static-files-menu-section .menu-block-title {
  font-size: 0.75rem;
  font-weight: 600;
  color: #6c757d;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
  padding: 0 1rem;
  letter-spacing: 0.05em;
}

.static-files-menu-section .menu-link {
  display: flex;
  align-items: center;
  padding: 0.75rem 1rem;
  color: inherit;
  text-decoration: none;
  transition: all 0.2s ease;
  border-radius: 0.25rem;
  margin: 0.25rem 0.5rem;
}

.static-files-menu-section .menu-link:hover {
  background: rgba(0, 123, 255, 0.1);
  color: #007bff;
  text-decoration: none;
  transform: translateX(4px);
}

.static-files-menu-section .menu-icon {
  margin-right: 0.75rem;
  font-size: 1rem;
  width: 1.25rem;
  text-align: center;
}

.static-files-menu-section .menu-label {
  font-size: 0.875rem;
  font-weight: 500;
}

/* Responsive Design */
@media (max-width: 768px) {
  .file-item {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .file-actions {
    margin-top: 10px;
    width: 100%;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  
  .upload-drop-zone {
    padding: 1.5rem !important;
  }
  
  .stats-number {
    font-size: 1.5rem;
  }
  
  .static-files-footer-section {
    padding: 15px 0 !important;
  }
  
  .static-files-footer-section h4 {
    font-size: 1rem !important;
  }
  
  .static-files-footer-link {
    padding: 10px 16px !important;
    font-size: 0.9rem !important;
    margin: 5px !important;
  }
  
  .static-files-fixed-footer {
    padding: 10px 15px !important;
    font-size: 0.9rem !important;
  }
}

@media (max-width: 480px) {
  .static-files-footer-section div[style*="display: flex"] {
    flex-direction: column !important;
    gap: 10px !important;
  }
  
  .static-files-footer-link {
    width: 100%;
    max-width: 280px;
    justify-content: center !important;
  }
  
  .static-files-menu-section .menu-link {
    padding: 1rem;
    margin: 0.25rem 0;
  }
}

/* Animations */
@keyframes slideIn {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideInUp {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.static-files-footer-section {
  animation: slideInUp 0.5s ease-out;
}

.static-files-fixed-footer {
  animation: slideInUp 0.3s ease-out;
}

/* Focus States for Accessibility */
.btn:focus,
.upload-drop-zone:focus {
  outline: 2px solid #007bff;
  outline-offset: 2px;
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
  .file-item {
    border-width: 2px;
  }
  
  .status-with-metadata,
  .status-without-metadata {
    border-width: 2px;
    font-weight: bold;
  }
  
  .btn {
    border-width: 2px;
    font-weight: 600;
  }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
  .file-item,
  .btn,
  .upload-drop-zone,
  .toast-notification,
  .static-files-footer-section,
  .static-files-fixed-footer {
    transition: none;
    animation: none;
  }
  
  .file-item:hover,
  .btn:hover,
  .static-files-footer-link:hover {
    transform: none;
  }
}

/* Темная тема - только для элементов плагина */
@media (prefers-color-scheme: dark) {
  .upload-drop-zone {
    border-color: #6c757d;
  }
  
  .upload-drop-zone:hover {
    border-color: #0d6efd;
    background: rgba(13, 110, 253, 0.1);
  }
  
  .file-item {
    border-color: #495057;
  }
  
  .file-item:hover {
    background: rgba(255, 255, 255, 0.05);
  }
  
  .file-metadata {
    color: #adb5bd;
  }
  
  .static-files-menu-section .menu-block-title {
    color: #adb5bd;
  }
  
  .static-files-menu-section .menu-link:hover {
    background: rgba(13, 110, 253, 0.1);
    color: #0d6efd;
  }
}

.stats-card {
  transition: transform 0.2s;
}

.stats-card:hover {
  transform: translateY(-2px);
}

.stats-number {
  font-size: 2rem;
  font-weight: bold;
}

.chart-container {
  height: 300px;
  padding: 20px;
}

.metric-card {
  border-left: 4px solid #007bff;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}

.video-stats-table {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}/* Modern Stats Dashboard Styles */

.stats-dashboard {
  background: #0f0f0f;
  min-height: 100vh;
  padding: 2rem 0;
  margin: 0;
  width: 100vw;
  margin-left: calc(-50vw + 50%);
}

.stats-dashboard-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 2rem;
}

/* Header Section */
.stats-header {
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.stats-header h1 {
  color: #ffffff;
  font-size: 2rem;
  font-weight: 600;
  margin: 0 0 0.5rem 0;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.stats-header p {
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
  font-size: 0.95rem;
}

/* Metric Cards */
.metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
  margin-bottom: 2.5rem;
}

.metric-card {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 1.75rem;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.metric-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--accent-color);
  opacity: 0;
  transition: opacity 0.3s;
}

.metric-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
  border-color: rgba(255, 255, 255, 0.2);
}

.metric-card:hover::before {
  opacity: 1;
}

/* Accent Colors */
.metric-card.blue { --accent-color: #3b82f6; }
.metric-card.green { --accent-color: #10b981; }
.metric-card.cyan { --accent-color: #06b6d4; }
.metric-card.orange { --accent-color: #f59e0b; }
.metric-card.purple { --accent-color: #8b5cf6; }
.metric-card.pink { --accent-color: #ec4899; }



.metric-label {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.metric-value {
  color: #ffffff;
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 0.5rem;
}

.metric-unit {
  color: rgba(255, 255, 255, 0.5);
  font-size: 1.25rem;
  font-weight: 400;
  margin-left: 0.25rem;
}

.metric-subtitle {
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.8rem;
  margin-top: 0.5rem;
}

/* Stats Section */
.stats-section {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 1.75rem;
  margin-bottom: 1.5rem;
}

.stats-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.stats-section-title {
  color: #ffffff;
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Data Grid for smaller cards */
.data-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}

.data-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 1.25rem;
  transition: all 0.2s;
}

.data-card:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.15);
}

.data-card-header {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.8rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.75rem;
}

.data-card-content {
  color: #ffffff;
  font-size: 0.9rem;
}

/* Tables */
.stats-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.stats-table thead th {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.75rem 1rem;
  text-align: left;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.stats-table tbody tr {
  transition: background 0.2s;
}

.stats-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.03);
}

.stats-table tbody td {
  color: rgba(255, 255, 255, 0.9);
  padding: 0.875rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.stats-table tbody td:last-child {
  text-align: right;
  font-weight: 600;
}

.stats-table a {
  color: #3b82f6;
  text-decoration: none;
  transition: color 0.2s;
}

.stats-table a:hover {
  color: #60a5fa;
  text-decoration: underline;
}

/* Chart Container */
.chart-container {
  background: rgba(255, 255, 255, 0.02);
  border-radius: 12px;
  padding: 1.5rem;
  min-height: 300px;
}

/* Controls */
.stats-controls {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  align-items: flex-end;
}

.control-group {
  flex: 1;
  min-width: 150px;
}

.control-label {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: 0.5rem;
  display: block;
}

.control-input,
.control-select {
  width: 100%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  padding: 0.625rem 0.875rem;
  color: #ffffff;
  font-size: 0.9rem;
  transition: all 0.2s;
}

.control-input:hover,
.control-select:hover {
  border-color: rgba(255, 255, 255, 0.25);
}

.control-input:focus,
.control-select:focus {
  outline: none;
  border-color: #3b82f6;
  background: rgba(255, 255, 255, 0.08);
}

.control-button {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  border: none;
  border-radius: 8px;
  padding: 0.625rem 1.5rem;
  color: #ffffff;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}

.control-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(59, 130, 246, 0.3);
}

.control-button:active {
  transform: translateY(0);
}

/* Loading State */
.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem;
  color: rgba(255, 255, 255, 0.6);
}

.loading-spinner {
  width: 48px;
  height: 48px;
  border: 4px solid rgba(255, 255, 255, 0.1);
  border-top-color: #3b82f6;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin-bottom: 1rem;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Responsive Design */
@media (max-width: 768px) {
  .stats-dashboard-container {
    padding: 0 1rem;
  }
  
  .metrics-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  .metric-card {
    padding: 1.25rem;
  }
  
  .metric-value {
    font-size: 2rem;
  }
  
  .stats-section {
    padding: 1.25rem;
  }
  
  .stats-controls {
    flex-direction: column;
  }
  
  .control-group {
    width: 100%;
  }
  
  .data-grid {
    grid-template-columns: 1fr;
  }
}

/* Utility Classes */
.text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }
.mb-4 { margin-bottom: 2rem; }

.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mt-4 { margin-top: 2rem; }