:root {
  --color-bg-primary: #0a0acc;
  --color-bg-secondary: #0808a8;
  --color-bg-header: #0606c0;
  --color-bg-nav: #0505b0;
  --color-bg-footer: #050570;
  --color-bg-card: #0c0cd8;
  --color-bg-card-hover: #1010e8;
  --color-bg-dark: #030340;
  --color-text-primary: #fff;
  --color-text-muted: #aae;
  --color-text-dim: #b8b8e8;
  --color-accent: #00cfff;
  --color-accent-yellow: gold;
  --color-border: hsla(0, 0%, 100%, 0.12);
  --color-overlay: rgba(0, 0, 0, 0.55);
  --color-search-bg: hsla(0, 0%, 100%, 0.13);
  --color-search-bg-focus: hsla(0, 0%, 100%, 0.2);
  --color-search-border: hsla(0, 0%, 100%, 0.28);
  --color-search-placeholder: hsla(0, 0%, 100%, 0.5);
  --color-suggest-bg: #03038a;
  --color-suggest-border: hsla(0, 0%, 100%, 0.16);
  --radius-card: 4px;
  --radius-btn: 3px;
  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.5);
  --font-size-xs: 11px;
  --font-size-sm: 12px;
  --font-size-base: 13px;
  --font-size-lg: 15px;
  --font-size-xl: 18px;
  --font-logo: "Arial Black", "Impact", sans-serif;
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 12px;
  --spacing-lg: 16px;
  --spacing-xl: 24px;
  --nav-height: 38px;
  --header-height: 56px;
}
*,
:after,
:before {
  box-sizing: border-box;
}
html {
  min-height: 100%;
}
body,
html {
  background-color: var(--color-bg-primary);
}
body {
  color: var(--color-text-primary);
  display: flex;
  flex-direction: column;
  font-family: Arial, Helvetica, sans-serif;
  font-size: var(--font-size-base);
  margin: 0;
  min-height: 100dvh;
  overflow-x: hidden;
}
a {
  color: inherit;
  text-decoration: none;
}
a:hover {
  color: var(--color-accent);
  text-decoration: none;
}
img {
  display: block;
}
.sr-only {
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  clip: rect(0, 0, 0, 0);
  border: 0;
  white-space: nowrap;
}
body.dark-mode {
  --color-bg-primary: #060620;
  --color-bg-secondary: #080830;
  --color-bg-header: #030318;
  --color-bg-nav: #040425;
  --color-bg-footer: #020212;
  --color-bg-card: #0a0a35;
  --color-bg-card-hover: #0e0e50;
  --color-bg-dark: #010110;
  --color-search-bg: hsla(0, 0%, 100%, 0.07);
  --color-search-bg-focus: hsla(0, 0%, 100%, 0.12);
  --color-search-border: hsla(0, 0%, 100%, 0.14);
  --color-search-placeholder: hsla(0, 0%, 100%, 0.38);
  --color-suggest-bg: #08082a;
  --color-suggest-border: hsla(0, 0%, 100%, 0.1);
}
::-webkit-scrollbar {
  height: 6px;
  width: 6px;
}
::-webkit-scrollbar-track {
  background: var(--color-bg-dark);
}
::-webkit-scrollbar-thumb {
  background: var(--color-accent);
  border-radius: 3px;
}
.site-header {
  background: var(--color-bg-header);
  border-bottom: 2px solid var(--color-accent);
  position: sticky;
  top: 0;
  z-index: 1000;
}
.header-inner {
  align-items: center;
  display: grid;
  gap: var(--spacing-sm);
  grid-template-columns: auto 1fr auto;
  height: var(--header-height);
  padding: 0 var(--spacing-md);
}
.header-left {
  align-items: center;
  display: flex;
  gap: 6px;
  min-width: 0;
}
.hdr-btn {
  align-items: center;
  background: hsla(0, 0%, 100%, 0.08);
  border: 1px solid hsla(0, 0%, 100%, 0.18);
  border-radius: var(--radius-btn);
  color: var(--color-text-primary);
  cursor: pointer;
  display: inline-flex;
  flex-shrink: 0;
  font-size: 17px;
  height: 34px;
  justify-content: center;
  padding: 0;
  transition:
    border-color 0.15s,
    color 0.15s,
    background 0.15s;
  width: 34px;
}
.hdr-btn:hover {
  background: hsla(0, 0%, 100%, 0.16);
  border-color: var(--color-accent);
  color: var(--color-accent);
}
.site-logo {
  align-items: center;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  line-height: 1;
  text-decoration: none;
}
.site-logo .logo-text {
  background: linear-gradient(180deg, #7ecfff, #fff 45%, #5ab8ff);
  -webkit-background-clip: text;
  font-family: var(--font-logo);
  font-size: 26px;
  font-weight: 900;
  letter-spacing: 1px;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 1px 3px rgba(0, 150, 255, 0.8));
}
.site-logo .logo-sub {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  font-weight: 400;
  letter-spacing: 0.5px;
  margin-top: 4px;
}
.header-search-desktop {
  align-items: center;
  background: var(--color-search-bg);
  border: 1px solid var(--color-search-border);
  border-radius: 100px;
  display: flex;
  margin: 0 auto;
  max-width: 540px;
  overflow: hidden;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
  width: 100%;
}
.header-search-desktop:focus-within {
  background: var(--color-search-bg-focus);
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px hsla(195, 100%, 50%, 0.18);
}
.header-search-desktop input {
  background: transparent;
  border: none;
  caret-color: var(--color-accent);
  color: var(--color-text-primary);
  flex: 1;
  font-size: 14px;
  height: 36px;
  min-width: 0;
  outline: none;
  padding: 0 6px 0 16px;
  touch-action: manipulation;
}
.header-search-desktop input::placeholder {
  color: var(--color-search-placeholder);
}
.header-search-desktop button {
  align-items: center;
  background: var(--color-accent);
  border: none;
  border-radius: 100px;
  color: #000;
  cursor: pointer;
  display: flex;
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 700;
  gap: 5px;
  height: 28px;
  justify-content: center;
  margin-right: 4px;
  padding: 0 14px;
  transition: background 0.15s, transform 0.1s;
}
.header-search-desktop button:hover {
  background: #0ad;
  transform: scale(1.04);
}
.header-search-desktop button:active {
  transform: scale(0.97);
}
.header-right {
  align-items: center;
  display: flex;
  gap: 4px;
  justify-content: flex-end;
}
.offcanvas-nav i {
  flex-shrink: 0;
  font-size: 14px;
  text-align: center;
  width: 18px;
}
.uk-dropdown-nav i {
  font-size: 11px;
  margin-right: 5px;
  vertical-align: middle;
}
.msearch-panel {
  background: var(--color-bg-header);
  border-top: 1px solid var(--color-border);
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
@media (min-width: 960px) {
  .msearch-panel {
    display: none !important;
  }
}
.msearch-panel.open {
  max-height: 72vh;
}
.msearch-input-row {
  align-items: center;
  border-bottom: 1px solid var(--color-border);
  display: flex;
  gap: var(--spacing-sm);
  padding: 10px var(--spacing-md);
}
.msearch-icon {
  color: var(--color-text-dim);
  flex-shrink: 0;
  font-size: 15px;
}
.msearch-form {
  flex: 1;
  min-width: 0;
}
#msearch-input,
.msearch-form input {
  background: transparent;
  border: none;
  caret-color: var(--color-accent);
  color: var(--color-text-primary);
  font-size: 16px;
  height: 36px;
  outline: none;
  touch-action: manipulation;
  width: 100%;
}
#msearch-input::placeholder {
  color: var(--color-text-dim);
}
.msearch-close-btn {
  background: none;
  border: none;
  color: var(--color-text-dim);
  cursor: pointer;
  flex-shrink: 0;
  font-size: 16px;
  line-height: 1;
  padding: 4px;
}
.msearch-close-btn:hover {
  color: var(--color-text-primary);
}
.msearch-body {
  max-height: calc(72vh - 58px);
  overflow-y: auto;
  padding: var(--spacing-md);
  scrollbar-color: var(--color-accent) transparent;
  scrollbar-width: thin;
}
.msearch-section-label {
  align-items: center;
  color: var(--color-text-dim);
  display: flex;
  font-size: var(--font-size-xs);
  font-weight: 700;
  gap: 5px;
  letter-spacing: 0.6px;
  margin-bottom: var(--spacing-sm);
  text-transform: uppercase;
}
.msearch-section-label i {
  color: var(--color-accent);
}
.msearch-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.msearch-tag {
  align-items: center;
  background: hsla(0, 0%, 100%, 0.08);
  border: 1px solid hsla(0, 0%, 100%, 0.14);
  border-radius: 20px;
  color: var(--color-text-primary);
  display: inline-flex;
  font-size: var(--font-size-xs);
  font-weight: 600;
  gap: 5px;
  padding: 5px 11px;
  transition:
    background 0.15s,
    border-color 0.15s,
    color 0.15s;
  white-space: nowrap;
}
.msearch-tag i {
  font-size: 10px;
  opacity: 0.8;
}
.msearch-tag:hover {
  background: rgba(0, 207, 255, 0.15);
  border-color: var(--color-accent);
  color: var(--color-accent);
}
.msearch-divider {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: var(--spacing-sm) 0 var(--spacing-md);
}
.msearch-results-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.msearch-status {
  color: var(--color-text-dim);
  font-size: var(--font-size-sm);
  padding: var(--spacing-md) 0;
  text-align: center;
}
.msearch-status i {
  display: block;
  font-size: 28px;
  margin-bottom: 8px;
}
.settings-panel {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: 0 0 8px 8px;
  border-top: 2px solid var(--color-accent);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
  max-width: 100vw;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 100%;
  transform: translateY(-6px);
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
  width: 300px;
  z-index: 999;
}
.settings-panel.open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.settings-overlay {
  display: none;
  inset: 0;
  position: fixed;
  z-index: 998;
}
.settings-overlay.visible {
  display: block;
}
.sp-header {
  border-bottom: 1px solid var(--color-border);
  justify-content: space-between;
  padding: 10px 14px 8px;
}
.sp-header,
.sp-title {
  align-items: center;
  display: flex;
}
.sp-title {
  color: var(--color-text-primary);
  font-size: 13px;
  font-weight: 700;
  gap: 7px;
}
.sp-title .fa-gear {
  color: var(--color-accent);
  font-size: 13px;
}
.sp-close {
  background: transparent;
  border: none;
  border-radius: 4px;
  color: var(--color-text-dim);
  cursor: pointer;
  font-size: 13px;
  padding: 4px 6px;
  transition:
    color 0.15s,
    background 0.15s;
}
.sp-close:hover {
  background: hsla(0, 0%, 100%, 0.08);
  color: var(--color-text-primary);
}
.sp-body {
  gap: 16px;
  padding: 12px 14px;
}
.sp-body,
.sp-section {
  display: flex;
  flex-direction: column;
}
.sp-section {
  gap: 8px;
}
.sp-label {
  align-items: center;
  color: var(--color-text-dim);
  display: flex;
  font-size: 11px;
  font-weight: 700;
  gap: 6px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}
.sp-label em {
  font-style: normal;
  font-weight: 400;
  opacity: 0.7;
  text-transform: none;
}
.sp-section--mobile-only {
  display: flex;
}
.sp-section--desktop-only {
  display: none;
}
@media (min-width: 768px) {
  .sp-section--mobile-only {
    display: none;
  }
  .sp-section--desktop-only {
    display: flex;
  }
}
.sp-cols-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.sp-col-btn {
  background: hsla(0, 0%, 100%, 0.06);
  border: 1px solid var(--color-border);
  border-radius: 5px;
  color: var(--color-text-muted);
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  height: 30px;
  line-height: 1;
  min-width: 30px;
  padding: 0 6px;
  transition:
    background 0.15s,
    border-color 0.15s,
    color 0.15s;
}
.sp-col-btn:hover {
  background: hsla(0, 0%, 100%, 0.12);
  color: var(--color-text-primary);
}
.sp-col-btn.active {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #000;
}
.sp-theme-row {
  display: flex;
  gap: 8px;
}
.sp-theme-btn {
  align-items: center;
  background: hsla(0, 0%, 100%, 0.06);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  color: var(--color-text-muted);
  cursor: pointer;
  display: flex;
  flex: 1;
  font-size: 12px;
  font-weight: 600;
  gap: 6px;
  justify-content: center;
  padding: 7px 10px;
  transition:
    background 0.15s,
    border-color 0.15s,
    color 0.15s;
}
.sp-theme-btn:hover {
  background: hsla(0, 0%, 100%, 0.12);
  color: var(--color-text-primary);
}
.sp-theme-btn.active {
  background: rgba(var(--color-accent), 0.15);
  border-color: var(--color-accent);
  box-shadow: 0 0 0 1px var(--color-accent) inset;
  color: var(--color-accent);
}
.sp-theme-btn .fa-moon {
  color: #a78bfa;
}
.sp-theme-btn.active .fa-moon {
  color: inherit;
}

/* ── Content-category setting row ───────────────────────── */
.sp-sexcat-row {
  display: flex;
  gap: 6px;
}
.sp-sexcat-btn {
  align-items: center;
  background: hsla(0, 0%, 100%, 0.06);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  color: var(--color-text-muted);
  cursor: pointer;
  display: flex;
  flex: 1;
  font-size: 12px;
  font-weight: 600;
  gap: 6px;
  justify-content: center;
  padding: 7px 10px;
  transition:
    background 0.15s,
    border-color 0.15s,
    color 0.15s;
}
.sp-sexcat-btn:hover {
  background: hsla(0, 0%, 100%, 0.12);
  color: var(--color-text-primary);
}
.sp-sexcat-btn--active {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #000;
  font-weight: 700;
}
.sp-sexcat-btn--active:hover {
  background: var(--color-accent);
  color: #000;
}
.sp-sexcat-btn .fa-venus        { color: #ff85b3; }
.sp-sexcat-btn .fa-mars-double  { color: #5bc0ff; }
.sp-sexcat-btn .fa-transgender  { color: #c47fff; }
.sp-sexcat-btn--active .fa-venus,
.sp-sexcat-btn--active .fa-mars-double,
.sp-sexcat-btn--active .fa-transgender { color: #000; }

/* ── Font-size setting row ────────────────────────────────── */
.sp-font-row {
  align-items: center;
  display: flex;
  gap: 8px;
}
.sp-font-btn {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  color: var(--color-text);
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 700;
  min-width: 34px;
  padding: 4px 8px;
  transition: background 0.15s, border-color 0.15s;
}
.sp-font-btn:hover {
  background: rgba(var(--color-accent), 0.1);
  border-color: var(--color-accent);
  color: var(--color-accent);
}
.sp-font-track {
  background: var(--color-border);
  border-radius: 4px;
  flex: 1;
  height: 6px;
  overflow: hidden;
}
.sp-font-bar {
  background: var(--color-accent);
  border-radius: 4px;
  height: 100%;
  transition: width 0.2s;
  width: 40%;
}
.sp-font-val {
  color: var(--color-text-muted);
  font-size: 0.75rem;
  min-width: 36px;
  text-align: right;
}


.secondary-nav {
  background: var(--color-bg-nav);
  border-bottom: 1px solid var(--color-border);
  overflow-x: auto;
  position: sticky;
  scrollbar-width: none;
  top: var(--header-height);
  transition:
    transform 0.28s ease,
    opacity 0.28s ease;
  white-space: nowrap;
  will-change: transform;
  z-index: 999;
}
.secondary-nav.nav-hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-100%);
}
.secondary-nav::-webkit-scrollbar {
  display: none;
}
.secondary-nav-inner {
  align-items: center;
  display: flex;
  min-width: 100%;
}
.nav-item {
  align-items: center;
  display: inline-flex;
  padding: 0 var(--spacing-md);
}
.nav-item {
  border-right: 1px solid var(--color-border);
  color: var(--color-text-primary);
  cursor: pointer;
  font-size: var(--font-size-sm);
  font-weight: 700;
  gap: 5px;
  height: var(--nav-height);
  letter-spacing: 0.3px;
  text-decoration: none;
  text-transform: uppercase;
  transition:
    background 0.15s,
    color 0.15s;
}
.nav-item.active,
.nav-item:hover {
  background: hsla(0, 0%, 100%, 0.12);
  color: var(--color-accent);
}
.nav-item--special {
  background: rgba(251, 191, 36, 0.08);
  border-right: 1px solid rgba(251, 191, 36, 0.2);
  color: #fbbf24;
}
.nav-item--special .nav-icon {
  opacity: 1;
}
.nav-item--special.active,
.nav-item--special:hover {
  background: rgba(251, 191, 36, 0.18);
  color: #fde68a;
}
.nav-icon {
  align-items: center;
  color: #ff266d;
  display: inline-flex;
  font-size: 13px;
  opacity: 0.85;
  vertical-align: middle;
}
.offcanvas-nav-link i {
  color: #ff266d;
  flex-shrink: 0;
}
.main-content {
  background: var(--color-bg-primary);
  flex: 1 1 auto;
  padding: var(--spacing-md) 0 var(--spacing-xl);
}
.main-content .uk-container,
.main-content .uk-container-expand {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
/* ─── Nav Ticker (backup/mirror domains) ────────────────────────────────── */
@keyframes nav-ticker-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.nav-ticker {
  position: relative;
}
.nav-ticker-scroll {
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  position: relative;
}
/* vintage fade on both ends — scoped to scroll area so label stays clean */
.nav-ticker-scroll::before,
.nav-ticker-scroll::after {
  content: "";
  pointer-events: none;
  position: absolute;
  top: 0;
  bottom: 0;
  width: 40px;
  z-index: 2;
}
.nav-ticker-scroll::before {
  left: 0;
  background: linear-gradient(to right, var(--color-bg-nav) 30%, transparent);
}
.nav-ticker-scroll::after {
  right: 0;
  background: linear-gradient(to left, var(--color-bg-nav) 30%, transparent);
}
.nav-ticker-label {
  flex-shrink: 0;
  color: rgba(212, 168, 71, 0.55);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.8px;
  padding: 0 10px 0 12px;
  text-transform: uppercase;
  white-space: nowrap;
  border-right: 1px solid rgba(212, 168, 71, 0.2);
  margin-right: 4px;
  z-index: 3;
  position: relative;
}
.nav-ticker-track {
  display: flex;
  white-space: nowrap;
  animation: nav-ticker-scroll 22s linear infinite;
}
.nav-ticker-track:hover {
  animation-play-state: paused;
}
.nav-ticker-content {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.nav-ticker-link {
  color: #d4a847;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-decoration: none;
  text-transform: uppercase;
  text-shadow: 0 0 8px rgba(212, 168, 71, 0.35);
  transition: color 0.15s, text-shadow 0.15s;
  padding: 0 4px;
}
.nav-ticker-link:hover {
  color: #f5c842;
  text-shadow: 0 0 12px rgba(245, 200, 66, 0.6);
}
.nav-ticker-sep {
  color: rgba(212, 168, 71, 0.35);
  font-size: 9px;
  padding: 0 6px;
}
/* Desktop ticker — sits at far right inside secondary-nav-inner */
.nav-ticker--desk {
  margin-left: auto;
  max-width: 500px;
  min-width: 300px;
  height: var(--nav-height);
  align-items: center;
  display: flex;
  border-left: 1px solid var(--color-border);
}
/* Mobile ticker — full-width strip below the nav */
.nav-ticker--mobile {
  display: none;
  background: var(--color-bg-nav);
  border-top: 1px solid var(--color-border);
  height: 30px;
  align-items: center;
}
@media (max-width: 768px) {
  .nav-ticker--desk   { display: none; }
  .nav-ticker--mobile { display: flex; width: 100%; }
}
/* ─────────────────────────────────────────────────────────────────────────── */
.section-heading {
  align-items: baseline;
  border-left: 3px solid var(--color-accent);
  display: flex;
  flex-wrap: wrap;
  gap: 0 10px;
  margin-bottom: var(--spacing-md);
  padding: var(--spacing-sm) var(--spacing-md) var(--spacing-sm);
}
.section-title {
  color: var(--color-text-primary);
  font-size: var(--font-size-xl);
  font-weight: 400;
  line-height: 1.3;
  margin: 0;
  text-align: left;
}
.section-title strong {
  color: #fff;
  font-weight: 800;
}
.section-heading .ch-filter-count {
  align-self: baseline;
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  font-weight: 500;
  letter-spacing: 0.2px;
  margin: 0;
  white-space: nowrap;
}
.filter-bar {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 var(--spacing-md) var(--spacing-md);
}
.filter-wrap {
  flex-shrink: 0;
  position: relative;
}
.filter-btn {
  align-items: center;
  background: hsla(0, 0%, 100%, 0.07);
  border: 1px solid hsla(0, 0%, 100%, 0.16);
  border-radius: 6px;
  color: var(--color-text-primary);
  cursor: pointer;
  display: inline-flex;
  font-size: var(--font-size-sm);
  font-weight: 600;
  gap: 7px;
  height: 34px;
  letter-spacing: 0.2px;
  padding: 0 13px;
  transition:
    background 0.15s,
    border-color 0.15s,
    color 0.15s;
  white-space: nowrap;
}
.filter-btn:hover,
.filter-btn[aria-expanded="true"] {
  background: hsla(0, 0%, 100%, 0.14);
  border-color: var(--color-accent);
  color: var(--color-accent);
}
.filter-btn i {
  font-size: 12px;
}
.filter-chev {
  font-size: 9px !important;
  opacity: 0.7;
  transition: transform 0.2s;
}
.filter-btn[aria-expanded="true"] .filter-chev {
  transform: rotate(180deg);
}
.filter-btn-label em {
  color: var(--color-text-muted);
  font-style: italic;
  font-weight: 400;
}
.filter-btn:hover .filter-btn-label em,
.filter-btn[aria-expanded="true"] .filter-btn-label em {
  color: inherit;
}
.filter-wrap.is-active .filter-btn {
  background: rgba(0, 207, 255, 0.12);
  border-color: var(--color-accent);
  color: var(--color-accent);
}
.filter-wrap.is-active .filter-btn-label em {
  color: var(--color-accent);
}
.filter-mobile-trigger {
  display: none;
}
.filter-active-count {
  align-items: center;
  background: var(--color-accent);
  border-radius: 10px;
  color: #000;
  display: inline-flex;
  font-size: 10px;
  font-weight: 700;
  height: 18px;
  justify-content: center;
  line-height: 1;
  min-width: 18px;
  padding: 0 5px;
}
.filter-dropdown {
  background: #0d0d2a;
  border: 1px solid hsla(0, 0%, 100%, 0.14);
  border-radius: 6px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.6);
  left: 0;
  min-width: 160px;
  opacity: 0;
  padding: 5px 0;
  pointer-events: none;
  position: absolute;
  top: calc(100% + 5px);
  transform: translateY(-6px);
  transition:
    opacity 0.18s,
    visibility 0.18s,
    transform 0.18s;
  visibility: hidden;
  z-index: 1200;
}
.filter-wrap.open .filter-dropdown {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
  visibility: visible;
}
.filter-opt {
  color: var(--color-text-primary);
  cursor: pointer;
  display: block;
  font-size: var(--font-size-sm);
  padding: 8px 16px;
  text-decoration: none;
  transition:
    background 0.12s,
    color 0.12s;
  white-space: nowrap;
}
.filter-opt:hover {
  background: hsla(0, 0%, 100%, 0.08);
  color: var(--color-accent);
}
.filter-opt.active {
  color: var(--color-accent);
  font-weight: 700;
}
.filter-opt.active:before {
  content: "✓ ";
  font-size: 10px;
  margin-right: 2px;
}
:root {
  --grid-cols-mobile: 1;
  --grid-cols-desktop: 4;
}
.skeleton-grid,
.video-grid {
  display: grid;
  gap: 15px;
  grid-template-columns: repeat(var(--grid-cols-mobile), 1fr);
  padding: 0 5px;
}
@media (min-width: 768px) {
  .skeleton-grid,
  .video-grid {
    grid-template-columns: repeat(var(--grid-cols-desktop), 1fr);
  }
}
.tags-page {
  padding: 12px 25px 40px;
}
.tags-search-bar {
  align-items: center;
  display: flex;
  gap: 12px;
  margin-bottom: 18px;
}
.tags-search-wrap {
  flex: 1 1 auto;
  max-width: 460px;
  position: relative;
}
.tags-search-icon {
  color: var(--color-text-dim);
  font-size: 13px;
  left: 12px;
  pointer-events: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.tags-search-input {
  background: hsla(0, 0%, 100%, 0.05);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  color: var(--color-text-primary);
  font-size: 14px;
  height: 40px;
  outline: none;
  padding: 0 36px;
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
  width: 100%;
}
.tags-search-input::placeholder {
  color: var(--color-text-dim);
}
.tags-search-input:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 2px rgba(0, 207, 255, 0.15);
}
.tags-search-clear {
  background: none;
  border: none;
  color: var(--color-text-dim);
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
  padding: 5px;
  position: absolute;
  right: 9px;
  top: 50%;
  transform: translateY(-50%);
}
.tags-search-clear:hover {
  color: var(--color-text-primary);
}
.tags-search-count {
  color: var(--color-text-dim);
  flex-shrink: 0;
  font-size: 12px;
  white-space: nowrap;
}
.tags-no-result {
  color: var(--color-text-dim);
  font-size: 14px;
  gap: 8px;
  justify-content: center;
  padding: 48px 0;
  text-align: center;
  width: 100%;
}
.tags-no-result,
.taz-nav {
  align-items: center;
  display: flex;
}
.taz-nav {
  backdrop-filter: blur(8px);
  background: hsla(0, 0%, 100%, 0.04);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 24px;
  padding: 10px 14px;
  position: sticky;
  top: calc(var(--header-height, 56px) + var(--nav-height, 36px) + 4px);
  z-index: 90;
}
.taz-letter {
  align-items: center;
  background: none;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--color-text-muted);
  cursor: pointer;
  display: inline-flex;
  font-size: 13px;
  font-weight: 700;
  height: 30px;
  justify-content: center;
  letter-spacing: 0.5px;
  min-width: 32px;
  padding: 0 6px;
  text-decoration: none;
  transition:
    background 0.14s,
    color 0.14s,
    border-color 0.14s;
  white-space: nowrap;
}
button.taz-letter:hover {
  background: rgba(0, 207, 255, 0.12);
  border-color: rgba(0, 207, 255, 0.3);
  color: var(--color-accent);
}
.taz-letter--active {
  background: var(--color-accent) !important;
  border-color: var(--color-accent) !important;
  color: #000 !important;
}
.taz-letter--empty {
  cursor: default;
  opacity: 0.22;
  pointer-events: none;
}
.taz-letter--num {
  background: rgba(255, 215, 0, 0.06);
  border-color: rgba(255, 215, 0, 0.2);
  color: var(--color-accent-yellow, gold);
  font-size: 11px;
  min-width: auto;
  padding: 0 10px;
}
button.taz-letter--num:hover {
  background: rgba(255, 215, 0, 0.15);
  border-color: rgba(255, 215, 0, 0.4);
  color: gold;
}
.taz-groups {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.taz-group {
  scroll-margin-top: calc(
    var(--header-height, 56px) + var(--nav-height, 36px) + 56px
  );
}
.taz-group-header {
  align-items: baseline;
  border-bottom: 2px solid rgba(0, 207, 255, 0.18);
  display: flex;
  gap: 10px;
  margin-bottom: 12px;
  padding-bottom: 8px;
}
.taz-group-letter {
  color: var(--color-accent);
  font-size: 28px;
  font-weight: 900;
  line-height: 1;
  min-width: 28px;
  text-shadow: 0 0 20px rgba(0, 207, 255, 0.25);
}
.taz-group-count {
  background: hsla(0, 0%, 100%, 0.06);
  border: 1px solid var(--color-border);
  border-radius: 99px;
  color: var(--color-text-dim);
  font-size: 12px;
  font-weight: 500;
  padding: 2px 8px;
}
.tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.tags-flat-results {
  padding-top: 4px;
}
.tag-pill {
  align-items: center;
  background: hsla(0, 0%, 100%, 0.05);
  border: 1px solid hsla(0, 0%, 100%, 0.1);
  border-radius: 999px;
  color: var(--color-text-muted);
  display: inline-flex;
  font-size: 13px;
  font-weight: 500;
  gap: 5px;
  padding: 5px 13px;
  text-decoration: none;
  transition:
    background 0.13s,
    border-color 0.13s,
    color 0.13s,
    transform 0.12s;
  white-space: nowrap;
}
.tag-pill:hover {
  background: rgba(0, 207, 255, 0.12);
  border-color: rgba(0, 207, 255, 0.35);
  color: var(--color-accent);
  transform: translateY(-1px);
}
.tag-pill-name {
  line-height: 1;
}
.tag-pill-count {
  background: hsla(0, 0%, 100%, 0.08);
  border-radius: 99px;
  font-size: 10px;
  font-weight: 500;
  opacity: 0.5;
  padding: 1px 5px;
}
.tag-pill:hover .tag-pill-count {
  background: rgba(0, 207, 255, 0.15);
  opacity: 0.8;
}
.skeleton-card {
  background: var(--color-bg-card);
  border-radius: var(--radius-card);
  overflow: hidden;
}
.skeleton-thumb {
  background: var(--color-bg-secondary);
  overflow: hidden;
  padding-top: 56.25%;
  position: relative;
}
.skeleton-body {
  padding: var(--spacing-sm) var(--spacing-sm) var(--spacing-md);
}
.skeleton-line {
  background: var(--color-bg-secondary);
  border-radius: 3px;
  margin-bottom: 7px;
  overflow: hidden;
  position: relative;
}
.skeleton-channel {
  height: 9px;
  width: 38%;
}
.skeleton-title {
  height: 12px;
  width: 92%;
}
.skeleton-meta {
  height: 9px;
  margin-bottom: 0;
  width: 52%;
}
.skeleton-line:after,
.skeleton-thumb:after {
  animation: skeleton-shimmer 1.6s ease-in-out infinite;
  background: linear-gradient(
    90deg,
    transparent,
    hsla(0, 0%, 100%, 0.07) 50%,
    transparent
  );
  content: "";
  inset: 0;
  position: absolute;
}
.video-card {
  background: var(--color-bg-card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  position: relative;
  transition:
    transform 0.15s,
    box-shadow 0.15s;
  user-select: none;
}
.video-card:hover {
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5);
  transform: translateY(-2px);
}
.video-thumb-wrap {
  aspect-ratio: 16/9;
  background: var(--color-bg-dark);
  cursor: pointer;
  overflow: hidden;
  position: relative;
  width: 100%;
}
.video-thumb-img {
  display: block;
  height: 100%;
  object-fit: cover;
  transition:
    transform 0.28s ease,
    opacity 0.3s;
  width: 100%;
}
.video-card:not([data-previewing]) .video-thumb-wrap:hover .video-thumb-img {
  transform: scale(1.05);
}
.video-thumb-img[data-lazy] {
  opacity: 0;
}
.video-thumb-img:not([data-lazy]) {
  opacity: 1;
}
.video-preview-video {
  background: #000;
  height: 100%;
  inset: 0;
  object-fit: cover;
  position: absolute;
  width: 100%;
  z-index: 3;
}
.video-tap-hint {
  align-items: center;
  background: rgba(0, 0, 0, 0.28);
  display: flex;
  flex-direction: column;
  gap: 6px;
  inset: 0;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  transition: opacity 0.18s;
  z-index: 4;
}
.video-card:not([data-previewing]) .video-thumb-wrap:hover .video-tap-hint {
  opacity: 1;
}
.video-card[data-previewing="1"] .video-tap-hint {
  display: none;
}
.video-card[data-previewing="1"] .video-duration {
  background: rgba(0, 0, 0, 0.88);
  z-index: 5;
}
.video-card[data-previewing="1"] .video-thumb-wrap {
  cursor: pointer;
}
.video-tap-icon {
  align-items: center;
  background: hsla(0, 0%, 100%, 0.92);
  border-radius: 50%;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
  color: #111;
  display: flex;
  font-size: 17px;
  height: 48px;
  justify-content: center;
  transform: scale(0.88);
  transition:
    transform 0.18s,
    background 0.18s,
    color 0.18s;
  width: 48px;
}
.video-thumb-wrap:hover .video-tap-icon {
  transform: scale(1);
}
.video-tap-icon .fa-play {
  margin-left: 3px;
}
.video-quality-badge {
  background: rgba(0, 0, 0, 0.72);
  border-radius: 2px;
  color: #ccc;
  font-size: 9px;
  font-weight: 800;
  left: 5px;
  letter-spacing: 0.5px;
  padding: 1px 5px;
  pointer-events: none;
  position: absolute;
  text-transform: uppercase;
  top: 5px;
  z-index: 2;
}
.video-quality-badge:is([data-hd], .hd) {
  background: var(--color-accent, #e00);
  color: #fff;
}
.video-duration {
  background: rgba(0, 0, 0, 0.8);
  font-size: var(--font-size-xs);
  font-weight: 700;
  left: 4px;
  letter-spacing: 0.5px;
  padding: 1px 5px;
}
.video-duration,
.video-views {
  border-radius: 2px;
  bottom: 4px;
  color: #fff;
  pointer-events: none;
  position: absolute;
  z-index: 2;
}
.video-views {
  align-items: center;
  background: rgba(0, 0, 0, 0.72);
  display: inline-flex;
  font-size: 10px;
  font-weight: 600;
  gap: 4px;
  letter-spacing: 0.3px;
  padding: 1px 5px 1px 4px;
  right: 4px;
}
.video-views i {
  font-size: 9px;
  opacity: 0.85;
}
.video-info {
  padding: 6px 7px 7px;
}
.video-channel {
  align-items: center;
  background: hsla(0, 0%, 100%, 0.06);
  border: 1px solid hsla(0, 0%, 100%, 0.1);
  border-radius: 3px;
  color: var(--color-text-dim);
  display: inline-flex;
  font-size: 11px;
  font-weight: 500;
  gap: 4px;
  max-width: 100%;
  overflow: hidden;
  padding: 2px 6px;
  text-decoration: none;
  text-overflow: ellipsis;
  transition:
    background 0.15s,
    color 0.15s,
    border-color 0.15s;
  white-space: nowrap;
}
.video-channel:hover {
  background: hsla(0, 0%, 100%, 0.1);
  border-color: hsla(0, 0%, 100%, 0.18);
  color: var(--color-accent, #e00);
  text-decoration: none;
}
.video-channel-empty {
  opacity: 0.4;
}
.video-title {
  color: var(--color-text-primary);
  display: -webkit-box;
  font-size: var(--font-size-sm);
  font-weight: 700;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.35;
  margin: -10px 0 0 5px;
  overflow: hidden;
}
.video-title a {
  color: inherit;
  text-decoration: none;
}
.video-title a:hover {
  color: var(--color-accent, #e00);
}
.pgn-bar {
  padding: var(--spacing-sm) var(--spacing-md);
}
#pgn-top {
  margin-bottom: 15px;
}
#pgn-bot {
  margin-top: 20px;
}
.pgn {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.pgn,
.pgn-btn {
  align-items: center;
  justify-content: center;
}
.pgn-btn {
  background: hsla(0, 0%, 100%, 0.06);
  border: 1px solid hsla(0, 0%, 100%, 0.13);
  border-radius: 5px;
  color: var(--color-text-primary);
  cursor: pointer;
  display: inline-flex;
  font-size: var(--font-size-sm);
  font-weight: 600;
  height: 36px;
  min-width: 36px;
  padding: 0 10px;
  transition:
    background 0.14s,
    border-color 0.14s,
    color 0.14s;
  text-decoration: none;
  user-select: none;
}
.pgn-btn:hover:not(:disabled):not(.pgn-active) {
  background: hsla(0, 0%, 100%, 0.14);
  border-color: var(--color-accent);
  color: var(--color-accent);
}
.pgn-btn:disabled {
  cursor: default;
  opacity: 0.3;
}
.pgn-btn.pgn-active {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #000;
  cursor: default;
  font-weight: 700;
}
.pgn-arrow {
  padding: 0 11px;
}
.pgn-arrow i {
  font-size: 11px;
}
.pgn-ellipsis {
  align-items: center;
  color: var(--color-text-dim);
  display: inline-flex;
  font-size: var(--font-size-sm);
  letter-spacing: 1px;
  padding: 0 4px;
  user-select: none;
}
.pgn-fast {
  padding: 0 9px;
}
.pgn-fast i {
  font-size: 11px;
}
.pgn-jump-input {
  -moz-appearance: textfield;
  background: var(--color-surface);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  flex-shrink: 0;
  font-size: var(--font-size-sm);
  font-weight: 600;
  height: 34px;
  outline: none;
  padding: 0 4px;
  text-align: center;
  width: 48px;
}
.pgn-jump-input::-webkit-inner-spin-button,
.pgn-jump-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.pgn-jump-input:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 2px rgba(var(--color-accent-rgb, 255, 0, 0), 0.22);
}
@media (max-width: 479px) {
  .pgn-btn {
    font-size: 11px;
    height: 30px;
    min-width: 28px;
    padding: 0 6px;
  }
  .pgn-arrow {
    padding: 0 8px;
  }
  .pgn-fast {
    padding: 0 7px;
  }
  .pgn {
    gap: 2px;
  }
  .pgn-jump-input {
    font-size: 11px;
    height: 30px;
    width: 40px;
  }
}
@keyframes skeleton-shimmer {
  0% {
    background-position: -400px 0;
  }
  to {
    background-position: 400px 0;
  }
}
.skeleton {
  animation: skeleton-shimmer 1.4s infinite;
  background: linear-gradient(90deg, #0c0ccc 25%, #1515dd 50%, #0c0ccc 75%);
  background-size: 800px 100%;
  border-radius: 2px;
}
.skeleton-thumb {
  aspect-ratio: 16/9;
  width: 100%;
}
.skeleton-line {
  height: 10px;
  margin: 5px 6px 3px;
}
.skeleton-line.short {
  width: 60%;
}
.empty-state {
  padding: var(--spacing-xl) var(--spacing-md);
  text-align: center;
}
.empty-state h2 {
  color: var(--color-text-primary);
  font-size: var(--font-size-xl);
  font-weight: 700;
  margin: 0 0 var(--spacing-sm);
}
.empty-state p {
  color: var(--color-text-dim);
  font-size: var(--font-size-base);
  margin: 0;
}
.filter-kw-strip {
  align-items: center;
  display: flex;
  flex: 1;
  gap: 4px;
  min-width: 0;
}
.filter-kw-fade-wrap {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  position: relative;
}
.filter-kw-fade-wrap:after {
  background: linear-gradient(to right, transparent, var(--color-bg-primary));
  content: "";
  height: 100%;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
  width: 64px;
}
.filter-kw-arrow {
  align-items: center;
  background: hsla(0, 0%, 100%, 0.05);
  border: 1px solid hsla(0, 0%, 100%, 0.14);
  border-radius: 50%;
  color: var(--color-text-muted);
  cursor: pointer;
  display: inline-flex;
  flex-shrink: 0;
  font-size: 11px;
  height: 26px;
  justify-content: center;
  transition:
    background 0.15s,
    border-color 0.15s,
    color 0.15s;
  width: 26px;
}
.filter-kw-arrow:hover {
  background: hsla(0, 0%, 100%, 0.12);
  border-color: var(--color-accent);
  color: var(--color-accent);
}
.filter-kw-track {
  display: flex;
  flex: 1;
  gap: 6px;
  overflow-x: auto;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.filter-kw-track::-webkit-scrollbar {
  display: none;
}
.page-kw-tag {
  align-items: center;
  background: hsla(0, 0%, 100%, 0.06);
  border: 1px solid hsla(0, 0%, 100%, 0.1);
  border-radius: 20px;
  color: var(--color-text-muted);
  display: inline-flex;
  flex-shrink: 0;
  font-size: var(--font-size-xs);
  padding: 4px 12px;
  text-decoration: none;
  transition:
    background 0.14s,
    color 0.14s,
    border-color 0.14s;
  white-space: nowrap;
}
.page-kw-tag:hover {
  background: rgba(0, 207, 255, 0.12);
  border-color: var(--color-accent);
  color: var(--color-accent);
}
[data-role="edit-tags"],
button[aria-label*="edit" i][aria-label*="tag" i] {
  display: none !important;
}
.load-more-wrap {
  padding: var(--spacing-lg) 0;
  text-align: center;
}
.load-more-btn {
  background: var(--color-bg-nav);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-btn);
  color: var(--color-text-primary);
  cursor: pointer;
  font-size: var(--font-size-sm);
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 8px 32px;
  text-transform: uppercase;
  transition:
    background 0.15s,
    border-color 0.15s;
}
.load-more-btn:hover {
  background: hsla(0, 0%, 100%, 0.12);
  border-color: var(--color-accent);
  color: var(--color-accent);
}
.load-more-btn:disabled {
  cursor: default;
  opacity: 0.5;
}
#mobile-menu .uk-offcanvas-bar {
  background: var(--color-bg-dark) !important;
  padding: 0;
}
.offcanvas-header {
  align-items: center;
  background: var(--color-bg-header);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  font-size: var(--font-size-lg);
  font-weight: 700;
  justify-content: space-between;
  padding: var(--spacing-md);
}
.offcanvas-nav {
  list-style: none;
  margin: 0;
  padding: var(--spacing-sm) 0 0;
}
.offcanvas-nav li a {
  align-items: center;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-primary);
  display: flex;
  font-size: var(--font-size-base);
  gap: var(--spacing-sm);
  padding: var(--spacing-md);
  transition: background 0.15s;
}
.offcanvas-nav li a:hover {
  background: hsla(0, 0%, 100%, 0.08);
  color: var(--color-accent);
}
.offcanvas-nav-link.active,
.offcanvas-nav-link:hover {
  background: hsla(0, 0%, 100%, 0.08);
  color: var(--color-accent);
}
.offcanvas-nav-link--special {
  color: var(--color-hot);
}
.offcanvas-nav-link--special.active,
.offcanvas-nav-link--special:hover {
  color: var(--color-hot);
}
.offcanvas-section {
  border-top: 1px solid var(--color-border);
}
.offcanvas-section-toggle {
  align-items: center;
  background: none;
  border: none;
  color: var(--color-text-primary);
  cursor: pointer;
  display: flex;
  font-size: var(--font-size-base);
  gap: var(--spacing-sm);
  padding: 11px var(--spacing-md);
  text-align: left;
  transition:
    background 0.15s,
    color 0.15s;
  width: 100%;
}
.offcanvas-section-toggle:hover {
  background: hsla(0, 0%, 100%, 0.07);
  color: var(--color-accent);
}
.offcanvas-section-icon {
  flex-shrink: 0;
  font-size: 17px;
  text-align: center;
  width: 22px;
}
.offcanvas-section-label {
  flex: 1;
}
.offcanvas-section-chev {
  font-size: 10px;
  margin-left: auto;
  opacity: 0.45;
  transition: transform 0.2s;
}
.offcanvas-section-body {
  overflow: hidden;
}
.offcanvas-inline-list {
  list-style: none;
  margin: 0;
  padding: 0 0 var(--spacing-sm);
}
.offcanvas-inline-list li a {
  align-items: center;
  color: var(--color-text-muted);
  display: flex;
  font-size: var(--font-size-sm);
  gap: var(--spacing-sm);
  padding: 7px var(--spacing-md) 7px 36px;
  text-decoration: none;
  transition:
    color 0.15s,
    background 0.15s;
}
.offcanvas-inline-list li a:hover {
  background: hsla(0, 0%, 100%, 0.05);
  color: var(--color-accent);
}
.offcanvas-inline-list li a .lang-check {
  flex-shrink: 0;
  font-size: 10px;
  width: 12px;
}
.offcanvas-inline-list li a .fa-check {
  color: var(--color-accent);
}

/* ── Language card grid ─────────────────────────────────────────────────────── */
.lang-grid {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(2, 1fr);
  padding: 6px 12px 14px;
}
.lang-card {
  align-items: center;
  border: 1.5px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  flex-direction: row;
  gap: 8px;
  padding: 6px 8px;
  text-decoration: none;
  background: hsla(0, 0%, 100%, 0.04);
  transition:
    background 0.15s,
    border-color 0.15s,
    transform 0.12s;
}
.lang-card:hover {
  background: hsla(0, 0%, 100%, 0.1);
  border-color: var(--color-accent);
  transform: translateY(-1px);
}
.lang-card.active {
  background: hsla(0, 0%, 100%, 0.08);
  border-color: var(--color-accent);
}
.lang-card-flag {
  --fi-scale: 1;
  border-radius: 3px;
  box-shadow: 0 1px 3px hsla(0,0%,0%,.35);
  display: inline-block !important;
  flex-shrink: 0;
  height: 20px !important;
  overflow: hidden;
  width: 30px !important;
}
.lang-card-name {
  color: var(--color-text-muted);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lang-card.active .lang-card-name {
  color: var(--color-accent);
  font-weight: 700;
}
.lang-toggle-flag {
  --fi-scale: 0.6;
  border-radius: 2px;
  box-shadow: 0 1px 2px hsla(0,0%,0%,.3);
  display: inline-block !important;
  flex-shrink: 0;
  height: 12px !important;
  overflow: hidden;
  vertical-align: middle;
  width: 18px !important;
}
.sp-lang-flag-icon {
  --fi-scale: 0.6;
  border-radius: 2px;
  box-shadow: 0 1px 2px hsla(0,0%,0%,.3);
  display: inline-block !important;
  flex-shrink: 0;
  height: 12px !important;
  overflow: hidden;
  width: 18px !important;
}
.sp-lang-grid {
  gap: 6px;
  padding: 2px 0 0;
}
.sp-lang-grid .lang-card {
  padding: 5px 7px;
}
.sp-lang-grid .lang-card-name {
  font-size: 10px;
}

/* Country card grid — 3 per row, styled like lang-card */
.country-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
  max-height: 260px;
  overflow-y: auto;
  padding: 4px 10px 12px;
  scrollbar-width: thin;
  scrollbar-color: var(--color-border) transparent;
}
.country-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 6px 4px 5px;
  border-radius: 7px;
  border: 1.5px solid transparent;
  background: hsla(0,0%,100%,.04);
  text-decoration: none;
  color: var(--color-text-muted);
  font-size: 10px;
  font-weight: 500;
  text-align: center;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: background .15s, border-color .15s, color .15s, transform .12s;
}
.country-card:hover {
  background: hsla(0,0%,100%,.1);
  border-color: var(--color-accent);
  color: var(--color-accent);
  transform: translateY(-1px);
}
.country-card.is-active {
  background: hsla(0,0%,100%,.08);
  border-color: var(--color-accent);
  color: var(--color-accent);
  font-weight: 700;
}
.country-card-emoji {
  font-size: 18px;
  line-height: 1;
  display: block;
}
.country-card-name {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
  font-size: 9.5px;
}
.site-footer {
  background: var(--color-bg-footer);
  border-top: 2px solid var(--color-accent-yellow);
  margin-top: var(--spacing-xl);
}
.footer-inner {
  margin: 0 auto;
  max-width: 960px;
  padding: var(--spacing-xl) var(--spacing-lg) var(--spacing-md);
}
.footer-desc {
  color: var(--color-text-dim);
  font-size: var(--font-size-xs);
  font-style: italic;
  line-height: 1.75;
  text-align: center;
}
.footer-desc p {
  margin: 0 0 var(--spacing-sm);
}
.footer-desc-subtitle {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  font-style: normal;
  font-weight: 600;
  margin-bottom: var(--spacing-md) !important;
}
.footer-hl {
  color: var(--color-accent-yellow);
  font-style: normal;
  font-weight: 700;
  text-decoration: none;
}
a.footer-hl:hover {
  color: #fff;
  text-decoration: underline;
}
.footer-consent {
  color: var(--color-text-dim);
  font-size: var(--font-size-xs);
  line-height: 1.7;
  margin: var(--spacing-md) 0 var(--spacing-sm);
  text-align: center;
}
.footer-legal {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  font-size: var(--font-size-xs);
  gap: var(--spacing-sm);
  justify-content: center;
  margin-bottom: var(--spacing-lg);
}
.footer-sep {
  color: var(--color-text-dim);
}
.footer-divider {
  border: none;
  border-top: 1px solid hsla(0, 0%, 100%, 0.08);
  margin: 0 0 var(--spacing-md);
}
.footer-bottom {
  align-items: center;
  display: grid;
  gap: var(--spacing-md);
  grid-template-columns: 1fr auto 1fr;
  margin-bottom: var(--spacing-md);
}
.footer-bottom-address {
  color: var(--color-text-dim);
  font-size: var(--font-size-xs);
  line-height: 1.6;
}
.footer-bottom-tagline {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
}
.footer-bottom-rta {
  display: flex;
  justify-content: flex-end;
}
.footer-rta-link {
  display: inline-flex;
  opacity: 0.7;
  transition: opacity 0.2s;
}
.footer-rta-link:hover {
  opacity: 1;
}
.footer-copyright {
  color: hsla(0, 0%, 100%, 0.25);
  font-size: var(--font-size-xs);
  padding-bottom: var(--spacing-md);
  text-align: center;
}
@media (max-width: 640px) {
  .footer-bottom {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .footer-bottom-rta {
    justify-content: center;
  }
}
.cpanel {
  background: var(--color-bg-dark);
  bottom: 0;
  left: 0;
  opacity: 0;
  overflow-y: auto;
  position: fixed;
  right: 0;
  scrollbar-color: var(--color-accent) transparent;
  scrollbar-width: thin;
  transform: translateY(-8px);
  transition:
    opacity 0.22s ease,
    visibility 0.22s ease,
    transform 0.22s ease;
  visibility: hidden;
  z-index: 998;
}
.cpanel.open {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
}
.cpanel-inner {
  margin: 0 auto;
  max-width: 1400px;
  padding: 20px var(--spacing-md) var(--spacing-xl);
}
.cpanel-search-row {
  align-items: center;
  background: #fff;
  border-radius: 4px;
  display: flex;
  gap: var(--spacing-sm);
  height: 40px;
  margin: 45px auto var(--spacing-xl);
  max-width: 520px;
  padding: 0 12px;
}
.cpanel-search-icon {
  color: #aaa;
  flex-shrink: 0;
  font-size: 14px;
}
.cpanel-search-input {
  background: transparent;
  border: none;
  color: #222;
  flex: 1;
  font-size: var(--font-size-base);
  outline: none;
}
.cpanel-search-input::placeholder {
  color: #bbb;
}
.cpanel-close {
  background: none;
  border: none;
  color: #888;
  cursor: pointer;
  flex-shrink: 0;
  font-size: 16px;
  line-height: 1;
  padding: 4px;
}
.cpanel-close:hover {
  color: #333;
}
.cpanel-grid {
  display: grid;
  gap: 2px 0;
  grid-template-columns: repeat(6, 1fr);
  padding-bottom: var(--spacing-lg);
}
.cpanel-item {
  align-items: center;
  border-radius: 4px;
  color: var(--color-text-primary);
  display: flex;
  font-size: var(--font-size-sm);
  gap: 7px;
  line-height: 1.4;
  overflow: hidden;
  padding: 7px 10px;
  text-decoration: none;
  text-overflow: ellipsis;
  transition: background 0.12s;
  white-space: nowrap;
}
.cpanel-item.active,
.cpanel-item:hover {
  background: hsla(0, 0%, 100%, 0.1);
  color: var(--color-accent);
}
.cpanel-item:first-letter {
  font-size: 16px;
}
.cpanel-empty {
  align-items: center;
  color: var(--color-text-dim);
  display: flex;
  font-size: var(--font-size-sm);
  gap: var(--spacing-sm);
  justify-content: center;
  padding: var(--spacing-xl) 0;
}
.cpanel-empty i {
  font-size: 18px;
}
.cpanel-footer {
  border-top: 1px solid var(--color-border);
  padding: var(--spacing-lg) 0 var(--spacing-md);
  text-align: center;
}
.cpanel-see-all {
  background: var(--color-accent);
  border-radius: 4px;
  color: #000;
  display: inline-block;
  font-size: var(--font-size-sm);
  font-weight: 700;
  padding: 8px 28px;
  text-decoration: none;
  transition: background 0.15s;
}
.cpanel-see-all:hover {
  background: #0ad;
  color: #000;
}
.cpanel-item[data-active="true"] {
  background: rgba(0, 207, 255, 0.18);
  color: var(--color-accent);
  font-weight: 600;
}
@media (max-width: 1199px) {
  .cpanel-grid {
    grid-template-columns: repeat(5, 1fr);
  }
}
@media (max-width: 959px) {
  .cpanel-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 639px) {
  .cpanel-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 399px) {
  .cpanel-grid {
    grid-template-columns: 1fr;
  }
}
.cpanel {
  top: calc(var(--header-height) + 1px);
}
#back-to-top {
  align-items: center;
  background: #fffbfb96;
  border: none;
  border-radius: 20px;
  bottom: 24px;
  box-shadow: 0 1px 15px rgba(0, 0, 0, 0.64);
  color: #003e7f;
  cursor: pointer;
  display: flex;
  font-size: 16px;
  height: 40px;
  justify-content: center;
  opacity: 0;
  position: fixed;
  right: 20px;
  transform: translateY(10px);
  transition: opacity 0.25s, visibility 0.25s, transform 0.25s, background 0.15s;
  visibility: hidden;
  width: 40px;
  z-index: 9000;
}
#back-to-top.visible {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
}
#back-to-top:hover {
  background: #0ad;
}
@media (max-width: 959px) {
  .header-inner {
    grid-template-columns: 1fr 1fr;
    position: relative;
  }
  .header-search-desktop,
  .header-search-wrap {
    display: none;
  }
  .site-logo {
    left: 50%;
    pointer-events: auto;
    position: absolute;
    text-align: center;
    top: 50%;
    transform: translate(-50%, -50%);
  }
  .site-logo .logo-text {
    font-size: 20px;
  }
  .site-logo .logo-sub {
    display: block;
    font-size: 9px;
  }
  .header-left {
    gap: 4px;
  }
}
@media (min-width: 960px) {
  #mobile-search-toggle {
    display: none;
  }
  .site-logo {
    margin-left: 15px;
  }
  .filter-mobile-trigger,
  .filter-panel,
  .filter-panel-overlay {
    display: none !important;
  }
}
@media (max-width: 959px) {
  .filter-wrap {
    display: none;
  }
  .filter-mobile-trigger {
    align-items: center;
    background: hsla(0, 0%, 100%, 0.07);
    border: 1px solid hsla(0, 0%, 100%, 0.18);
    border-radius: 6px;
    color: var(--color-text-primary);
    cursor: pointer;
    display: inline-flex;
    font-size: var(--font-size-sm);
    font-weight: 700;
    gap: 7px;
    height: 34px;
    letter-spacing: 0.3px;
    padding: 0 16px;
    transition:
      background 0.15s,
      border-color 0.15s,
      color 0.15s;
  }
  .filter-mobile-trigger.has-active,
  .filter-mobile-trigger:hover {
    background: rgba(0, 207, 255, 0.12);
    border-color: var(--color-accent);
    color: var(--color-accent);
  }
  .filter-mobile-trigger i {
    font-size: 13px;
  }
  .filter-panel-overlay {
    background: rgba(0, 0, 0, 0.55);
    inset: 0;
    opacity: 0;
    position: fixed;
    transition:
      opacity 0.26s,
      visibility 0.26s;
    visibility: hidden;
    z-index: 1300;
  }
  .filter-panel-overlay.open {
    opacity: 1;
    visibility: visible;
  }
  .filter-panel {
    background: #0a0a22;
    border-right: 1px solid hsla(0, 0%, 100%, 0.1);
    bottom: 0;
    display: flex;
    flex-direction: column;
    left: 0;
    position: fixed;
    top: 0;
    transform: translateX(-100%);
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    width: min(300px, 88vw);
    will-change: transform;
    z-index: 1400;
  }
  .filter-panel.open {
    transform: translateX(0);
  }
  .filter-panel-header {
    align-items: center;
    border-bottom: 1px solid hsla(0, 0%, 100%, 0.1);
    display: flex;
    flex-shrink: 0;
    justify-content: space-between;
    padding: 14px var(--spacing-md);
  }
  .filter-panel-title {
    align-items: center;
    color: var(--color-text-primary);
    display: flex;
    font-size: var(--font-size-lg);
    font-weight: 700;
    gap: 8px;
  }
  .filter-panel-title i {
    color: var(--color-accent);
  }
  .filter-panel-close {
    background: none;
    border: none;
    border-radius: 4px;
    color: var(--color-text-dim);
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    padding: 4px;
    transition:
      color 0.15s,
      background 0.15s;
  }
  .filter-panel-close:hover {
    background: hsla(0, 0%, 100%, 0.08);
    color: var(--color-text-primary);
  }
  .filter-panel-body {
    flex: 1;
    overflow-y: auto;
    padding: var(--spacing-sm) 0 var(--spacing-md);
    scrollbar-color: var(--color-accent) transparent;
    scrollbar-width: thin;
  }
  .filter-panel-group {
    border-bottom: 1px solid hsla(0, 0%, 100%, 0.07);
    padding: var(--spacing-sm) 0;
  }
  .filter-panel-group:last-child {
    border-bottom: none;
  }
  .filter-panel-group-label {
    color: var(--color-text-dim);
    font-size: var(--font-size-xs);
    font-weight: 800;
    letter-spacing: 0.7px;
    padding: 0 var(--spacing-md) 6px;
    text-transform: uppercase;
  }
  .filter-panel-opt {
    align-items: center;
    color: var(--color-text-primary);
    cursor: pointer;
    display: flex;
    font-size: var(--font-size-base);
    gap: 10px;
    padding: 10px var(--spacing-md);
    text-decoration: none;
    transition: background 0.12s;
  }
  .filter-panel-opt:before {
    border: 2px solid hsla(0, 0%, 100%, 0.25);
    border-radius: 50%;
    content: "";
    flex-shrink: 0;
    height: 16px;
    transition:
      border-color 0.15s,
      background 0.15s;
    width: 16px;
  }
  .filter-panel-opt:hover {
    background: hsla(0, 0%, 100%, 0.06);
  }
  .filter-panel-opt:hover:before {
    border-color: var(--color-accent);
  }
  .filter-panel-opt.active {
    color: var(--color-accent);
    font-weight: 600;
  }
  .filter-panel-opt.active:before {
    background: var(--color-accent);
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(0, 207, 255, 0.2);
  }
  .filter-panel-footer {
    border-top: 1px solid hsla(0, 0%, 100%, 0.1);
    display: flex;
    flex-shrink: 0;
    gap: 10px;
    padding: var(--spacing-md);
  }
  .filter-panel-reset {
    align-items: center;
    background: transparent;
    border: 1px solid hsla(0, 0%, 100%, 0.2);
    border-radius: 6px;
    color: var(--color-text-muted);
    cursor: pointer;
    display: flex;
    flex: 1;
    font-size: var(--font-size-sm);
    font-weight: 600;
    gap: 6px;
    height: 40px;
    justify-content: center;
    transition:
      border-color 0.15s,
      color 0.15s;
  }
  .filter-panel-reset:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
  }
  .filter-panel-apply {
    align-items: center;
    background: var(--color-accent);
    border: none;
    border-radius: 6px;
    color: #000;
    cursor: pointer;
    display: flex;
    flex: 2;
    font-size: var(--font-size-sm);
    font-weight: 700;
    gap: 6px;
    height: 40px;
    justify-content: center;
    transition: background 0.15s;
  }
  .filter-panel-apply:hover {
    background: #0ad;
  }
}
.header-search-wrap {
  margin: 0 auto;
  max-width: 560px;
  position: relative;
  width: 100%;
}
.header-search-wrap .header-search-desktop {
  margin: 0;
  max-width: none;
}
.desk-suggest {
  background: var(--color-suggest-bg);
  border: 1px solid var(--color-suggest-border);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.55);
  left: 0;
  max-height: 72vh;
  overflow-y: auto;
  position: absolute;
  right: 0;
  scrollbar-color: var(--color-accent) transparent;
  scrollbar-width: thin;
  top: calc(100% + 6px);
  z-index: 1100;
}
.desk-suggest-list {
  padding: var(--spacing-sm) var(--spacing-sm) var(--spacing-md);
}
.msuggest-section-label {
  align-items: center;
  color: var(--color-text-dim);
  display: flex;
  font-size: var(--font-size-xs);
  font-weight: 700;
  gap: 5px;
  letter-spacing: 0.6px;
  margin: var(--spacing-sm) 0 5px;
  text-transform: uppercase;
}
.msuggest-section-label:first-child {
  margin-top: 0;
}
.msuggest-section-label i {
  color: var(--color-accent);
}
.msuggest-kw-item {
  align-items: center;
  border-radius: var(--radius-card);
  color: var(--color-text-primary);
  display: flex;
  gap: var(--spacing-sm);
  padding: 7px var(--spacing-xs);
  text-decoration: none;
  transition: background 0.15s;
}
.msuggest-kw-item:hover {
  background: hsla(0, 0%, 100%, 0.08);
}
.msuggest-kw-icon {
  color: var(--color-text-dim);
  flex-shrink: 0;
  font-size: 11px;
  text-align: center;
  width: 14px;
}
.msuggest-kw-text {
  flex: 1;
  font-size: var(--font-size-sm);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.msuggest-kw-count {
  background: hsla(0, 0%, 100%, 0.06);
  border-radius: 10px;
  color: var(--color-text-dim);
  flex-shrink: 0;
  font-size: var(--font-size-xs);
  padding: 1px 6px;
}
.msuggest-avatars {
  display: flex;
  gap: var(--spacing-sm);
  overflow-x: auto;
  padding: 4px 0 6px;
  scrollbar-width: none;
}
.msuggest-avatars::-webkit-scrollbar {
  display: none;
}
.msuggest-avatar-item {
  align-items: center;
  color: var(--color-text-primary);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  gap: 3px;
  max-width: 64px;
  min-width: 64px;
  text-align: center;
  text-decoration: none;
  transition: opacity 0.15s;
}
.msuggest-avatar-item:hover {
  opacity: 0.8;
}
.msuggest-avatar-img-wrap {
  background: var(--color-bg-dark);
  border: 2px solid hsla(0, 0%, 100%, 0.12);
  border-radius: 50%;
  flex-shrink: 0;
  height: 52px;
  overflow: hidden;
  width: 52px;
}
.msuggest-avatar-img-wrap img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}
.msuggest-avatar-mv {
  color: var(--color-text-dim);
  font-size: 9px;
  text-align: center;
}
.msuggest-avatar-mv,
.msuggest-avatar-name {
  line-height: 1.2;
  max-width: 64px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.msuggest-avatar-name {
  color: var(--color-text-muted);
  font-size: 10px;
}
.vw-page {
  min-height: calc(100vh - var(--header-height, 56px));
  padding-bottom: 60px;
  padding-top: 14px;
}
.vw-breadcrumb {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 12px;
}
.vw-bc-path {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  font-size: 11px;
  gap: 6px;
  line-height: 1.4;
}
.vw-bc-path,
.vw-bc-path a {
  color: var(--color-text-dim);
}
/* Chip styling moved to the bottom-of-file player layout block (.vw-bc-chip).
   This section intentionally left without chip-specific rules so the new
   .vw-bc-chip selectors (no id-specificity) win cleanly. */
.vw-bc-badge {
  align-items: center;
  background: hsla(0, 0%, 100%, 0.07);
  border: 1px solid hsla(0, 0%, 100%, 0.1);
  border-radius: 4px;
  color: var(--color-text-dim);
  display: inline-flex;
  font-size: 10px;
  font-weight: 600;
  gap: 3px;
  padding: 2px 7px;
  white-space: nowrap;
}
.vw-bc-badge--hd {
  background: rgba(255, 165, 0, 0.08);
  border-color: rgba(255, 165, 0, 0.25);
  color: var(--color-accent);
}
.vw-layout {
  align-items: start;
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(0, 1fr) clamp(240px, 22%, 320px);
  margin: 0 auto;
  max-width: 1640px;
}
.vw-main {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.vw-people-bar--top {
  order: 1;
  margin-bottom: 2px;
}
.vw-player-center {
  order: 2;
}
.vw-info-bottom {
  order: 3;
}
.vw-info-top {
  /* placed inside vw-info-bottom in new layout */
}
.vw-player-wrap {
  aspect-ratio: 16/9;
  background: #000;
  border-radius: 6px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
  overflow: hidden;
  position: relative;
  width: 100%;
}

.vw-player-center {
  --player-width: 100%; /* fill column so player sits flush with related sidebar */
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: stretch;
  width: 100%;
}
.vw-player-center > .vw-player-wrap,
.vw-player-center > .vw-player-actions-row,
.vw-player-center > .vw-rating-name-row,
.vw-player-center > .vw-player-description,
.vw-player-center > .vw-tags-row,
.vw-player-center > .vw-comments-panel {
  width: var(--player-width);
  max-width: 100%;
}

/* Player actions row */
.vw-player-actions-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}
.vw-player-meta-left { display: flex; gap: 8px; align-items: center; }
.vw-player-meta-right { display: flex; gap: 8px; align-items: center; }

/* Rating + video name row */
.vw-rating-name-row {
  display: flex;
  gap: 12px;
  align-items: center;
}
.vw-rating-controls { display: flex; gap: 8px; }
.vw-video-name { font-weight: 700; color: var(--color-text-primary); font-size: 14px; }

.vw-player-description {
  color: var(--color-text-dim);
  font-size: 13px;
  line-height: 1.45;
  padding-top: 6px;
}

/* Comments area */
.vw-comments-panel { border-top: 1px solid hsla(0,0%,100%,0.05); padding-top: 10px; }
.vw-comments-tabs { display:flex; gap:8px; margin-bottom:8px; }
.vw-comments-body textarea { width: 100%; background: transparent; border: 1px solid hsla(0,0%,100%,0.08); color: var(--color-text-primary); padding:8px; border-radius:6px; }

/* Make player full width on smaller screens */
@media (max-width: 860px) {
  .vw-player-center { --player-width: 100%; }
  .vw-player-center > .vw-player-wrap { width: 100%; margin-left: calc(var(--spacing-md,12px) * -1); margin-right: calc(var(--spacing-md,12px) * -1); }
}
.vw-player-error,
.vw-player-loader {
  align-items: center;
  background: #0a0a0a;
  color: hsla(0, 0%, 100%, 0.65);
  display: flex;
  flex-direction: column;
  font-size: 13px;
  gap: 12px;
  inset: 0;
  justify-content: center;
  position: absolute;
  z-index: 2;
}
.vw-player-loader i {
  color: var(--color-accent);
  font-size: 30px;
}
.vw-player-error i {
  color: #e55;
  font-size: 34px;
}
.vw-video {
  background: #000;
  height: 100%;
  inset: 0;
  position: absolute;
  width: 100%;
  z-index: 1;
}
.vw-ql-wrap {
  bottom: 54px;
  position: absolute;
  right: 12px;
  z-index: 20;
}
.vw-ql-btn {
  align-items: center;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  background: rgba(0, 0, 0, 0.65);
  border: 1px solid hsla(0, 0%, 100%, 0.18);
  border-radius: 30px;
  color: #fff;
  cursor: pointer;
  display: flex;
  font-size: 12px;
  font-weight: 600;
  gap: 6px;
  padding: 6px 12px 6px 10px;
  transition:
    background 0.18s,
    border-color 0.18s,
    box-shadow 0.18s;
  user-select: none;
  white-space: nowrap;
}
.vw-ql-btn:hover {
  background: rgba(0, 0, 0, 0.85);
  border-color: hsla(0, 0%, 100%, 0.35);
  box-shadow: 0 0 0 2px rgba(0, 207, 255, 0.18);
}
.vw-ql-btn--open {
  background: rgba(0, 0, 0, 0.9);
  border-color: var(--color-accent);
  box-shadow: 0 0 0 2px rgba(0, 207, 255, 0.25);
}
.vw-ql-icon {
  color: var(--color-accent);
  flex-shrink: 0;
  font-size: 11px;
}
.vw-ql-badge-pill {
  border-radius: 20px;
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.5px;
  line-height: 1.2;
  padding: 2px 6px;
}
.vw-ql-caret {
  flex-shrink: 0;
  font-size: 8px;
  opacity: 0.6;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.vw-ql-btn--open .vw-ql-caret {
  opacity: 0.9;
  transform: rotate(180deg);
}
.vw-ql-label-text {
  font-size: 11px;
  font-weight: 500;
  opacity: 0.85;
}
.vw-ql-wrap--hidden {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.vw-ql-wrap:not(.vw-ql-wrap--hidden) {
  opacity: 1;
  transition: opacity 0.15s ease;
}
.vw-ql-menu {
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  background: rgba(8, 8, 16, 0.97);
  border: 1px solid hsla(0, 0%, 100%, 0.12);
  border-radius: 12px;
  bottom: calc(100% + 8px);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.8),
    0 0 0 1px rgba(0, 207, 255, 0.08);
  min-width: 180px;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  position: absolute;
  right: 0;
  transform: translateY(6px) scale(0.97);
  transform-origin: bottom right;
  transition:
    opacity 0.18s ease,
    transform 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}
.vw-ql-menu--open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}
.vw-ql-menu:before {
  border-bottom: 1px solid hsla(0, 0%, 100%, 0.06);
  color: hsla(0, 0%, 100%, 0.3);
  content: "Video Quality";
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 10px 14px 6px;
  text-transform: uppercase;
}
.vw-ql-item {
  align-items: center;
  background: none;
  border: none;
  border-left: 3px solid transparent;
  color: hsla(0, 0%, 100%, 0.65);
  cursor: pointer;
  display: flex;
  gap: 10px;
  padding: 9px 14px;
  text-align: left;
  transition:
    background 0.12s,
    color 0.12s,
    border-color 0.12s;
  width: 100%;
}
.vw-ql-item:last-child {
  border-bottom-left-radius: 11px;
  border-bottom-right-radius: 11px;
}
.vw-ql-item:hover {
  background: hsla(0, 0%, 100%, 0.06);
  color: #fff;
}
.vw-ql-item--active {
  background: rgba(0, 207, 255, 0.07);
  border-color: var(--color-accent);
  color: #fff;
}
.vw-ql-item-badge {
  border-radius: 20px;
  flex-shrink: 0;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.6px;
  min-width: 44px;
  padding: 3px 7px;
  text-align: center;
}
.vw-ql-item-info {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.vw-ql-item-name {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
}
.vw-ql-item-sub {
  font-size: 10px;
  font-weight: 400;
  opacity: 0.45;
}
.vw-ql-check {
  color: var(--color-accent);
  flex-shrink: 0;
  font-size: 10px;
  opacity: 0;
  transition: opacity 0.15s;
}
.vw-ql-item--active .vw-ql-check {
  opacity: 1;
}
.ql-auto {
  background: rgba(0, 207, 255, 0.15);
  color: var(--color-accent);
}
.ql-4k {
  background: rgba(255, 215, 0, 0.15);
  color: gold;
}
.ql-fhd {
  background: rgba(0, 207, 255, 0.15);
  color: #00cfff;
}
.ql-hd {
  background: rgba(130, 100, 255, 0.18);
  color: #a080ff;
}
.ql-sd {
  background: rgba(255, 165, 0, 0.15);
  color: #ffa040;
}
.ql-lo {
  background: hsla(0, 0%, 100%, 0.08);
  color: hsla(0, 0%, 100%, 0.45);
}
.vw-title {
  color: var(--color-text-primary);
  font-size: clamp(15px, 2vw, 20px);
  font-weight: 700;
  line-height: 1.35;
  margin: 0;
  padding-bottom: 5px;
}
.vw-title-badges {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.vw-badge {
  align-items: center;
  background: hsla(0, 0%, 100%, 0.07);
  border: 1px solid hsla(0, 0%, 100%, 0.13);
  border-radius: 4px;
  color: var(--color-text-muted);
  display: inline-flex;
  font-size: 11px;
  font-weight: 600;
  gap: 3px;
  padding: 2px 9px;
  white-space: nowrap;
}
.vw-badge--len {
  background: rgba(52, 211, 153, 0.1);
  border-color: rgba(52, 211, 153, 0.3);
  color: #34d399;
}
.vw-badge--q {
  font-weight: 700;
  letter-spacing: 0.4px;
}
.vw-badge--sd {
  background: rgba(148, 163, 184, 0.1);
  border-color: rgba(148, 163, 184, 0.25);
  color: #94a3b8;
}
.vw-badge--hd {
  background: rgba(0, 207, 255, 0.08);
  border-color: rgba(0, 207, 255, 0.25);
  color: #00cfff;
}
.vw-badge--fhd {
  background: rgba(167, 139, 250, 0.1);
  border-color: rgba(167, 139, 250, 0.3);
  color: #a78bfa;
}
.vw-badge--4k {
  background: rgba(251, 191, 36, 0.1);
  border-color: rgba(251, 191, 36, 0.3);
  color: #fbbf24;
}
.vw-people-bar {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.vw-uploader-pill {
  align-items: center;
  background: rgba(255, 85, 45, 0.1);
  border: 1px solid rgba(255, 85, 45, 0.3);
  border-radius: 4px;
  color: #ff7050;
  display: inline-flex;
  font-size: 12px;
  font-weight: 600;
  gap: 5px;
  padding: 4px 11px;
  text-decoration: none;
  transition: background 0.14s;
  white-space: nowrap;
  margin-top: 10px;
}
.vw-uploader-pill:hover {
  background: rgba(255, 85, 45, 0.2);
  color: #ff8060;
}
.vw-uploader-pill i {
  font-size: 10px;
}
.watch-info-model {
  align-items: center;
  background: rgba(244, 114, 182, 0.08);
  border: 1px solid rgba(244, 114, 182, 0.28);
  border-radius: 4px;
  color: #f472b6;
  display: inline-flex;
  font-size: 12px;
  font-weight: 600;
  gap: 4px;
  padding: 4px 10px;
  text-decoration: none;
  transition:
    background 0.14s,
    color 0.14s;
  white-space: nowrap;
  margin-right: 5px;
  margin-top: 10px;
}
.watch-info-model:hover {
  background: rgba(244, 114, 182, 0.16);
  color: #f9a8d4;
}
.watch-info-model i {
  font-size: 10px;
  opacity: 0.85;
}
.watch-info-count {
  font-size: 10px;
  font-weight: 500;
  margin-left: 2px;
  opacity: 0.6;
}
.vw-info-bottom {
  background: hsla(0, 0%, 100%, 0.03);
  border: 1px solid hsla(0, 0%, 100%, 0.07);
  border-radius: 6px;
  margin-top: 3px;
  padding: 12px 14px;
}
.vw-dl-bar {
  align-items: center;
  border-bottom: 1px solid hsla(0, 0%, 100%, 0.07);
  border-top: 1px solid hsla(0, 0%, 100%, 0.07);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: space-between;
  margin-top: 20px;
  margin-bottom: 10px;
  padding: 10px 5px;
}
.vw-dl-left { display:flex; align-items:center; gap:8px; flex:1; }
.vw-dl-btns {
  flex: 1;
}
.vw-dl-bar .vw-actions {
  flex-shrink: 0;
  margin-left: auto;
}
.vw-dl-btns {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.vw-dl-btn {
  align-items: center;
  background: hsla(0, 0%, 100%, 0.04);
  border: 1px solid hsla(0, 0%, 100%, 0.13);
  border-radius: 20px;
  color: var(--color-text-muted);
  display: inline-flex;
  font-size: 11px;
  font-weight: 500;
  gap: 5px;
  padding: 5px 14px;
  text-decoration: none;
  transition:
    background 0.13s,
    color 0.13s,
    border-color 0.13s;
  white-space: nowrap;
}
.vw-dl-btn:hover {
  background: hsla(0, 0%, 100%, 0.1);
  border-color: hsla(0, 0%, 100%, 0.25);
  color: #fff;
}
.vw-dl-btn--hq {
  background: rgba(0, 207, 255, 0.06);
  border-color: rgba(0, 207, 255, 0.3);
  color: var(--color-accent);
}
.vw-dl-btn--hq:hover {
  background: rgba(0, 207, 255, 0.13);
  border-color: rgba(0, 207, 255, 0.5);
}
.vw-dl-btn i {
  font-size: 10px;
}
.vw-dl-na,
.vw-dl-placeholder {
  color: var(--color-text-dim);
  font-size: 11px;
}
.vw-dl-na {
  font-style: italic;
}
.vw-meta-row {
  align-items: flex-start;
  border-bottom: 1px solid hsla(0, 0%, 100%, 0.07);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: space-between;
  margin-bottom: 10px;
  padding-bottom: 10px;
}
.vw-meta-left {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}
.vw-title-bold {
  color: var(--color-text-primary);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
}
.vw-stats {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.vw-stat {
  align-items: center;
  color: var(--color-text-dim);
  display: inline-flex;
  font-size: 12px;
  gap: 5px;
}
.vw-stat i {
  font-size: 11px;
}
.vw-stat--rating {
  color: #4cc88c;
}
.vw-stat-sep {
  color: hsla(0, 0%, 100%, 0.2);
  font-size: 13px;
  user-select: none;
}
.vw-actions {
  align-items: center;
  display: flex;
  flex-shrink: 0;
  gap: 7px;
}
.vw-btn {
  align-items: center;
  background: hsla(0, 0%, 100%, 0.05);
  border: 1px solid hsla(0, 0%, 100%, 0.12);
  border-radius: 20px;
  color: var(--color-text-primary);
  cursor: pointer;
  display: inline-flex;
  font-size: 12px;
  font-weight: 500;
  gap: 5px;
  padding: 6px 13px;
  transition:
    background 0.15s,
    border-color 0.15s,
    color 0.15s;
  white-space: nowrap;
}
.vw-btn:hover {
  background: hsla(0, 0%, 100%, 0.1);
  border-color: hsla(0, 0%, 100%, 0.22);
}
.vw-btn--liked {
  background: rgba(255, 68, 68, 0.08);
  border-color: rgba(255, 68, 68, 0.4);
  color: #f55;
}
.vw-btn--liked:hover {
  background: rgba(255, 68, 68, 0.15);
}
.vw-btn i {
  font-size: 12px;
}
.vw-share-wrap {
  position: relative;
}
.vw-share-dropdown {
  background: var(--color-bg-secondary);
  border: 1px solid hsla(0, 0%, 100%, 0.13);
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.7);
  min-width: 270px;
  opacity: 0;
  overflow: hidden;
  padding: 14px;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  transform: translateY(-8px);
  transition:
    opacity 0.15s ease,
    transform 0.15s ease;
  z-index: 200;
}
.vw-share-dropdown--open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
/* Title */
.vw-share-label {
  color: var(--color-text-dim);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .05em;
  margin: 0 0 10px;
  text-transform: uppercase;
}
/* Copy-URL row */
.vw-share-url-row {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
}
.vw-share-url-input {
  background: hsla(0, 0%, 100%, 0.06);
  border: 1px solid hsla(0, 0%, 100%, 0.1);
  border-radius: 6px;
  color: var(--color-text-dim);
  flex: 1;
  font-size: 11px;
  min-width: 0;
  outline: none;
  overflow: hidden;
  padding: 7px 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vw-share-copy-btn {
  align-items: center;
  background: var(--color-accent);
  border: none;
  border-radius: 6px;
  color: #fff;
  cursor: pointer;
  display: flex;
  flex-shrink: 0;
  font-size: 13px;
  justify-content: center;
  padding: 0 14px;
  transition: opacity 0.15s, background 0.15s;
}
.vw-share-copy-btn:hover {
  opacity: 0.85;
}
.vw-share-copy-btn--copied {
  background: #3bb07a;
}
/* Social icons grid: 4 columns */
.vw-share-socials {
  display: grid;
  gap: 7px;
  grid-template-columns: repeat(4, 1fr);
}
.vw-share-soc {
  align-items: center;
  background: hsla(0, 0%, 100%, 0.05);
  border: 1px solid hsla(0, 0%, 100%, 0.09);
  border-radius: 9px;
  color: var(--color-text-muted);
  display: flex;
  flex-direction: column;
  font-size: 10px;
  font-weight: 500;
  gap: 5px;
  padding: 11px 4px 9px;
  text-decoration: none;
  transition:
    background 0.12s,
    border-color 0.12s,
    color 0.12s;
}
.vw-share-soc i {
  font-size: 20px;
}
.vw-share-soc:hover {
  background: hsla(0, 0%, 100%, 0.1);
  border-color: hsla(0, 0%, 100%, 0.2);
  color: #fff;
}
/* Platform accent colours on hover */
.vw-share-soc--tw:hover { background: rgba(29,  161, 242, 0.14); border-color: rgba(29,  161, 242, 0.4); color: #1da1f2; }
.vw-share-soc--rd:hover { background: rgba(255,  69,   0, 0.12); border-color: rgba(255,  69,   0, 0.4); color: #ff4500; }
.vw-share-soc--tg:hover { background: rgba(  0, 136, 204, 0.12); border-color: rgba(  0, 136, 204, 0.4); color: #0088cc; }
.vw-share-soc--wa:hover { background: rgba( 37, 211, 102, 0.10); border-color: rgba( 37, 211, 102, 0.3); color: #25d366; }
.vw-tags-row {
  display: flex;
  flex-wrap: wrap;
  padding-top: 2px;
}
.watch-info-tag {
  align-items: center;
  background: hsla(0, 0%, 100%, 0.04);
  border: 1px solid hsla(0, 0%, 100%, 0.15);
  border-radius: 20px;
  color: var(--color-text-muted);
  display: inline-flex;
  font-size: 12px;
  margin-bottom: 8px;
  margin-right: 12px;
  padding: 4px 11px;
  text-decoration: none;
  transition:
    border-color 0.13s,
    color 0.13s,
    background 0.13s;
  white-space: nowrap;
}
.watch-info-tag:hover {
  background: hsla(0, 0%, 100%, 0.08);
  border-color: hsla(0, 0%, 100%, 0.35);
  color: var(--color-text-primary);
}
.vw-sidebar {
  align-self: start;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  scrollbar-color: hsla(0, 0%, 100%, 0.12) transparent;
  scrollbar-width: thin;
}
.vw-sidebar > .vw-tabs {
  flex-shrink: 0;
  margin-bottom: 0;
}
.vw-sidebar > .vw-tab-panel {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 8px;
  scrollbar-color: hsla(0, 0%, 100%, 0.18) transparent;
  scrollbar-width: thin;
}
.vw-sidebar > .vw-tab-panel::-webkit-scrollbar { width: 6px; }
.vw-sidebar > .vw-tab-panel::-webkit-scrollbar-thumb {
  background: hsla(0, 0%, 100%, 0.18);
  border-radius: 3px;
}
@media (max-width: 860px) {
  .vw-sidebar {
    height: auto !important;
    max-height: none !important;
    overflow: visible;
  }
  .vw-sidebar > .vw-tab-panel {
    overflow-y: visible;
  }
}
/* Card-style related sidebar (tabs joined to body, matching vw-comments) */
.vw-sidebar--card {
  align-self: start;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.vw-sidebar--card .vw-tabs {
  flex-shrink: 0;
  margin-bottom: 0;
}
.vw-sidebar-body {
  background: hsla(0, 0%, 100%, 0.03);
  border: 1px solid #050570;
  border-radius: 0 0 6px 6px;
  border-top: none;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 12px;
  scrollbar-color: hsla(0, 0%, 100%, 0.18) transparent;
  scrollbar-width: thin;
}
.vw-sidebar-body::-webkit-scrollbar { width: 6px; }
.vw-sidebar-body::-webkit-scrollbar-thumb {
  background: hsla(0, 0%, 100%, 0.18);
  border-radius: 3px;
}
.vw-sidebar::-webkit-scrollbar {
  width: 4px;
}
.vw-sidebar::-webkit-scrollbar-thumb {
  background: hsla(0, 0%, 100%, 0.12);
  border-radius: 4px;
}
.vw-rel-card:hover {
  background: hsla(0, 0%, 100%, 0.05);
  box-shadow: none;
  transform: none;
}
/* .vw-rel-thumb base defined later in 3-col section; keep shared properties here */
.vw-rel-thumb {
  background: #111;
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}
.vw-rel-thumb img {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}
.vw-rel-thumb .video-tap-hint {
  background: rgba(0, 0, 0, 0.45);
  opacity: 0;
  transition: opacity 0.15s;
}
.vw-rel-card:hover .video-tap-hint,
.vw-rel-card[data-previewing="1"] .video-tap-hint {
  opacity: 1;
}
.vw-rel-card[data-previewing="1"] .video-duration {
  background: rgba(0, 0, 0, 0.88);
  z-index: 5;
}
.vw-rel-thumb .video-tap-icon {
  font-size: 12px;
  height: 30px;
  width: 30px;
}
.vw-rel-dur {
  background: rgba(0, 0, 0, 0.8);
  border-radius: 2px;
  bottom: 3px;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  line-height: 1.4;
  padding: 1px 4px;
  position: absolute;
  right: 3px;
}
.vw-rel-body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
  padding: 2px 0;
}
.vw-rel-title {
  color: var(--color-text-primary);
  display: -webkit-box;
  font-size: 12px;
  font-weight: 500;
  -webkit-line-clamp: 3;
  line-height: 1.4;
  -webkit-box-orient: vertical;
  flex: 1;
  overflow: hidden;
}
.vw-rel-title a {
  color: inherit;
  text-decoration: none;
}
.vw-rel-title a:hover {
  color: var(--color-accent);
  text-decoration: none;
}
.vw-rel-foot {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 5px;
}
.vw-rel-channel {
  color: var(--color-accent);
  display: block;
  font-size: 11px;
  font-weight: 500;
  opacity: 0.85;
  overflow: hidden;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vw-rel-channel i {
  font-size: 9px;
  margin-right: 2px;
}
.vw-rel-channel:hover {
  opacity: 1;
  text-decoration: underline;
}
.vw-rel-meta {
  align-items: center;
  color: var(--color-text-dim);
  display: flex;
  flex-wrap: wrap;
  font-size: 10px;
  gap: 5px;
}
.vw-rel-hd {
  border: 1px solid rgba(0, 207, 255, 0.35);
  border-radius: 2px;
  color: var(--color-accent);
  font-size: 9px;
  font-weight: 700;
  line-height: 1.5;
  padding: 0 3px;
}
.vw-rel-skeleton {
  display: grid;
  gap: 9px;
  grid-template-columns: 148px 1fr;
  padding: 4px;
}
.vw-rel-sk-thumb {
  animation: sk-pulse 1.4s ease-in-out infinite;
  aspect-ratio: 16/9;
  background: hsla(0, 0%, 100%, 0.07);
  border-radius: 4px;
  width: 148px;
}
.vw-rel-sk-body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 4px 0;
}
.vw-rel-sk-line {
  animation: sk-pulse 1.4s ease-in-out infinite;
  background: hsla(0, 0%, 100%, 0.07);
  border-radius: 3px;
  height: 9px;
}
.vw-rel-sk-line.w80 {
  width: 80%;
}
.vw-rel-sk-line.w55 {
  width: 55%;
}
@keyframes sk-pulse {
  0%,
  to {
    opacity: 0.5;
  }
  50% {
    opacity: 0.9;
  }
}
.vw-loadmore-wrap {
  display: flex;
  justify-content: center;
  margin: 28px 0 8px;
}
.vw-loadmore-btn {
  align-items: center;
  background: hsla(0, 0%, 100%, 0.06);
  border: 1px solid hsla(0, 0%, 100%, 0.18);
  border-radius: 999px;
  color: var(--color-text-primary);
  cursor: pointer;
  display: inline-flex;
  font-size: 14px;
  font-weight: 600;
  gap: 8px;
  padding: 11px 32px;
  transition:
    background 0.18s,
    border-color 0.18s,
    transform 0.12s;
}
.vw-loadmore-btn i {
  color: var(--color-accent);
  font-size: 13px;
}
.vw-loadmore-btn:hover:not(:disabled) {
  background: hsla(0, 0%, 100%, 0.12);
  border-color: var(--color-accent);
  transform: translateY(-1px);
}
.vw-loadmore-btn:disabled {
  cursor: default;
  opacity: 0.6;
}
.vw-more-section {
  border-top: 1px solid hsla(0, 0%, 100%, 0.08);
  margin-top: 20px;
  padding-top: 20px;
}
.vw-more-tag-label {
  color: var(--color-accent);
}
.vw-show-all-wrap {
  display: flex;
  justify-content: center;
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid hsla(0,0%,100%,.07);
}
.vw-show-all-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 28px;
  border: 1px solid var(--color-accent);
  border-radius: 6px;
  color: var(--color-accent);
  font-size: .9rem;
  font-weight: 600;
  text-decoration: none;
  transition: background .18s, color .18s;
}
.vw-show-all-btn:hover {
  background: var(--color-accent);
  color: #fff;
}
.vw-more-skeleton-row {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}
@media (max-width: 1100px) {
  .vw-layout {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  }
}
@media (max-width: 860px) {
  .vw-layout {
    grid-template-columns: 1fr;
  }
  .vw-info-top {
    order: 1;
    padding-top: 0;
  }
  .vw-player-wrap {
    order: 2;
  }
  .vw-info-bottom {
    order: 3;
  }
  .vw-player-wrap {
    aspect-ratio: unset;
    border-radius: 0;
    height: 350px;
    margin-left: calc(var(--spacing-md, 12px) * -1);
    margin-right: calc(var(--spacing-md, 12px) * -1);
    width: calc(100% + var(--spacing-md, 12px) * 2);
  }
  .vw-sidebar {
    max-height: none;
    overflow-y: visible;
    position: static;
  }
  .vw-rel-sk-thumb,
  .vw-rel-thumb {
    aspect-ratio: 16/9;
    width: 100%;
  }
}
@media (max-width: 540px) {
  .vw-btn span {
    display: none;
  }
  .vw-btn {
    padding: 6px 10px;
  }
  .vw-title {
    font-size: 14px;
  }
  /* On very small screens anchor to the right edge */
  .vw-share-dropdown {
    left: auto;
    min-width: 230px;
    right: 0;
    transform: translateY(-8px);
  }
  .vw-share-dropdown--open {
    transform: translateY(0);
  }
  .vw-share-socials {
    grid-template-columns: repeat(2, 1fr);
  }
  .vw-more-skeleton-row {
    grid-template-columns: repeat(2, 1fr);
  }
}
.card-love-btn {
  align-items: center;
  background: none;
  border: none;
  color: var(--color-text-dim);
  cursor: pointer;
  display: flex;
  flex-shrink: 0;
  font-size: 15px;
  justify-content: center;
  line-height: 1;
  margin-left: auto;
  min-height: 44px;
  min-width: 44px;
  padding: 0;
  transition:
    color 0.18s,
    transform 0.18s;
}
.card-love-btn:hover {
  color: #ff4d6d;
  transform: scale(1.2);
}
.card-love-btn.loved {
  color: #ff4d6d;
}
.card-love-btn.loved i {
  animation: heart-pop 0.25s ease;
}
@keyframes heart-pop {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.35);
  }
  to {
    transform: scale(1);
  }
}
.video-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.video-meta-row .video-channel {
  flex: 0 1 auto;
  min-width: 0;
}
.history-tabs {
  border-bottom: 1px solid var(--color-border);
  grid-column: 1/-1;
  margin-bottom: var(--spacing-md);
  padding: 0 0 var(--spacing-md);
}
.history-tab,
.history-tabs {
  align-items: center;
  display: flex;
  gap: 6px;
}
.history-tab {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-btn);
  color: var(--color-text-muted);
  cursor: pointer;
  font-size: var(--font-size-sm);
  padding: 6px 14px;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.history-tab:hover {
  border-color: var(--color-accent);
  color: var(--color-text-primary);
}
.history-tab.active {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #000;
  font-weight: 700;
}
.history-tab-count {
  background: rgba(0, 0, 0, 0.25);
  border-radius: 20px;
  font-size: 10px;
  padding: 1px 6px;
}
.history-tab.active .history-tab-count {
  background: rgba(0, 0, 0, 0.2);
}
.history-clear-btn {
  align-items: center;
  background: none;
  border: 1px solid rgba(255, 80, 80, 0.4);
  border-radius: var(--radius-btn);
  color: rgba(255, 100, 100, 0.8);
  cursor: pointer;
  display: flex;
  font-size: var(--font-size-xs);
  gap: 5px;
  margin-left: auto;
  padding: 5px 10px;
  transition: background 0.15s, color 0.15s;
}
.history-clear-btn:hover {
  background: rgba(255, 80, 80, 0.15);
  color: #ff6060;
}
.cat-filter-wrap {
  display: inline-flex;
  flex-shrink: 0;
  position: relative;
}
.cat-filter-btn {
  gap: 3px;
  padding: 0 8px;
  width: auto;
}

.cat-filter-icon {
  font-size: 17px;
}
.cat-filter-btn .fa-venus,
.cat-opt .fa-venus {
  color: #d92176;
}
.cat-filter-btn .fa-mars-double,
.cat-opt .fa-mars-double {
  color: #23a7f8;
}
.cat-filter-btn .fa-transgender,
.cat-opt .fa-transgender {
  color: #a644fc;
}

.cat-dropdown {
  background: var(--color-bg-dark);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.65);
  left: 0;
  min-width: 152px;
  overflow: hidden;
  padding: 4px 0;
  position: absolute;
  top: calc(100% + 6px);
  z-index: 1201;
}
.cat-opt {
  align-items: center;
  background: none;
  border: none;
  border-left: 3px solid transparent;
  color: var(--color-text-primary);
  cursor: pointer;
  display: flex;
  font-size: 13px;
  font-weight: 500;
  gap: 9px;
  padding: 10px 14px;
  text-align: left;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
  width: 100%;
}
.cat-opt:hover {
  background: hsla(0, 0%, 100%, 0.08);
  color: var(--color-text-primary);
}
.cat-opt.active,
.cat-opt[aria-selected="true"] {
  font-weight: 700;
}

.hdr-btn i {
  transition:
    opacity 0.14s ease,
    transform 0.14s ease;
}
.fa-venus {
  color: #ff266d;
}
.card-src-label {
  align-items: center;
  background: hsla(0, 0%, 100%, 0.06);
  border-radius: 3px;
  color: var(--color-text-dim);
  display: inline-flex;
  font-size: 11px;
  font-weight: 500;
  gap: 4px;
  overflow: hidden;
  padding: 2px 6px;
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
  letter-spacing: 0.5px;
  margin-top: -20px;
}
.card-src-label[data-src="xv"] {
  background: linear-gradient(135deg, #e1351f 50%, #111 50%);
  border-color: transparent;
  color: #fff;
}
.card-src-label[data-src="xn"] {
  background: #67a2fe;
  border-color: transparent;
  color: #fff;
}
.card-src-label[data-src="sb"] {
  background: #e43f5a;
  border-color: transparent;
  color: #fff;
}
.video-meta-row {
  align-items: center;
  display: flex;
  gap: 4px;
  min-width: 0;
  margin-top: -5px;
}

/* ─── Channel Grid ─────────────────────────────────────────────────────────── */
.channel-grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-cols-mobile, 2), 1fr);
  gap: var(--spacing-md);
  padding: var(--spacing-md) 0;
}
@media (min-width: 640px) {
  .channel-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (min-width: 960px) {
  .channel-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (min-width: 1280px) {
  .channel-grid {
    grid-template-columns: repeat(var(--grid-cols-desktop, 5), 1fr);
  }
}

/* ─── Channel Card ─────────────────────────────────────────────────────────── */
.channel-card {
  background: var(--color-bg-card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition:
    transform 0.2s,
    box-shadow 0.2s;
}
.channel-card:hover {
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.7);
  transform: translateY(-3px);
}
.channel-card-link {
  color: inherit;
  display: block;
  text-decoration: none;
}
.channel-card-link:hover {
  color: inherit;
}

/* ─── Thumb Wrap ───────────────────────────────────────────────────────────── */
.channel-thumb-wrap {
  overflow: hidden;
  padding-top: 56.25%;
  position: relative;
  width: 100%;
}
.channel-thumb-img {
  height: 100%;
  left: 0;
  object-fit: cover;
  position: absolute;
  top: 0;
  transition: opacity 0.25s;
  width: 100%;
}

/* ─── Hover: reveal 4-image preview grid ──────────────────────────────────── */
.channel-preview-grid {
  display: grid;
  gap: 2px;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  height: 100%;
  inset: 0;
  opacity: 0;
  position: absolute;
  transition: opacity 0.25s;
  z-index: 1;
}
.channel-card:hover .channel-preview-grid {
  opacity: 1;
}
.channel-card:hover .channel-thumb-img {
  opacity: 0;
}
.channel-preview-grid img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

/* ─── Overlay (name on top of image) ──────────────────────────────────────── */
.channel-overlay {
  align-items: flex-end;
  background: linear-gradient(transparent 40%, rgba(0, 0, 0, 0.78));
  bottom: 0;
  display: flex;
  left: 0;
  padding: var(--spacing-sm) var(--spacing-sm) var(--spacing-xs);
  position: absolute;
  right: 0;
  top: 0;
  z-index: 2;
}
.channel-overlay-name {
  color: #fff;
  font-size: var(--font-size-sm);
  font-weight: 700;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
  white-space: nowrap;
  width: 100%;
}

/* ─── Source badge ─────────────────────────────────────────────────────────── */
.channel-src-badge {
  background: var(--color-bg-dark);
  border-radius: 2px;
  color: var(--color-text-dim);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 2px 5px;
  position: absolute;
  right: var(--spacing-xs);
  text-transform: uppercase;
  top: var(--spacing-xs);
  z-index: 3;
}
.channel-src-xvs {
  color: #00cfff;
}
.channel-src-xnx {
  color: #ffcc00;
}
.channel-src-epr {
  color: #ff6644;
}

/* ─── Meta bar below thumb ─────────────────────────────────────────────────── */
.channel-meta {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--spacing-xs) var(--spacing-sm) var(--spacing-sm);
}
.channel-meta-name {
  color: var(--color-text-primary);
  display: block;
  font-size: var(--font-size-sm);
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}
.channel-meta-name i {
  color: var(--color-accent);
  margin-right: 4px;
}
.channel-meta-stats {
  align-items: center;
  display: flex;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
}
.channel-stat {
  align-items: center;
  color: var(--color-text-muted);
  display: inline-flex;
  font-size: var(--font-size-xs);
  gap: 4px;
}
.channel-stat i {
  color: var(--color-accent);
  opacity: 0.7;
}
.channel-stat--sub i {
  color: #f0a;
}

/* ─── Channel filter bar ──────────────────────────────────────────────────── */
.ch-filters {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: var(--spacing-md);
  padding: 10px 0;
}

.ch-filter-group {
  position: relative;
}

.ch-filter-toggle {
  align-items: center;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-btn);
  color: var(--color-text-primary);
  cursor: pointer;
  display: flex;
  font-size: var(--font-size-sm);
  font-weight: 600;
  gap: 6px;
  padding: 6px 12px;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  white-space: nowrap;
}

.ch-filter-toggle:hover,
.ch-filter-toggle[aria-expanded="true"] {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #000;
}

.ch-filter-toggle[aria-expanded="true"] .ch-filter-chev {
  transform: rotate(180deg);
}

.ch-filter-chev {
  font-size: 11px;
  transition: transform 0.15s;
}

.ch-filter-dropdown {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 24px rgba(0,0,0,0.45);
  left: 0;
  list-style: none;
  margin: 4px 0 0;
  max-height: 260px;
  min-width: 180px;
  overflow-y: auto;
  padding: 4px 0;
  position: absolute;
  top: 100%;
  z-index: 40;
}

.ch-filter-opt {
  color: var(--color-text-primary);
  display: block;
  font-size: var(--font-size-sm);
  padding: 7px 16px;
  transition: background 0.1s;
  white-space: nowrap;
}

.ch-filter-opt:hover {
  background: var(--color-bg-hover);
  color: var(--color-accent);
}

.ch-filter-opt--active {
  color: var(--color-accent);
  font-weight: 700;
}

.chd-back-link {
  align-items: center;
  color: var(--color-text-dim);
  display: inline-flex;
  font-size: var(--font-size-sm);
  font-weight: 600;
  gap: 5px;
  margin-left: auto;
  text-decoration: none;
  transition: color 0.15s;
}
.chd-back-link:hover {
  color: var(--color-accent);
}
.chd-video-grid {
  display: grid;
  grid-template-columns: repeat(var(--cols-desktop, 4), 1fr);
  gap: var(--spacing-md) var(--spacing-sm);
}
@media (max-width: 960px) {
  .chd-video-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
  .chd-video-grid { grid-template-columns: repeat(var(--cols-mobile, 2), 1fr); }
}
.chd-rating {
  align-items: center;
  color: var(--color-text-dim);
  display: flex;
  font-size: 11px;
  font-weight: 600;
  gap: 4px;
  margin-top: 3px;
}
.chd-rating i {
  color: #4ade80;
  font-size: 10px;
}
/* ─── Channels pagination bar ─────────────────────────────────────────────── */
.channels-pgn {
  align-items: center;
  display: flex;
  gap: var(--spacing-sm);
  justify-content: center;
  margin: var(--spacing-xl) 0 var(--spacing-md);
  padding-bottom: var(--spacing-xl);
}
.channels-pgn-btn {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-btn);
  color: var(--color-text-primary);
  cursor: pointer;
  font-size: var(--font-size-sm);
  font-weight: 700;
  padding: 6px 14px;
  transition: background 0.15s, border-color 0.15s;
}
.channels-pgn-btn:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #000;
}
.channels-pgn-info {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.channels-pgn-pages {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.channels-pgn-page {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-btn);
  color: var(--color-text-primary);
  font-size: var(--font-size-sm);
  min-width: 32px;
  padding: 5px 8px;
  text-align: center;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.channels-pgn-page:hover {
  background: var(--color-bg-hover);
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.channels-pgn-page.active {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #000;
  font-weight: 700;
  pointer-events: none;
}

.channels-pgn-ellipsis {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  padding: 0 2px;
}

/* ─── Channel skeleton cards ─────────────────────────────────────────────── */
.channel-card--skeleton .channel-thumb-wrap,
.channel-sk-img {
  animation: sk-pulse 1.4s ease-in-out infinite;
  aspect-ratio: 16/9;
  background: var(--color-border);
  border-radius: var(--radius-card);
  width: 100%;
}
.channel-sk-line {
  animation: sk-pulse 1.4s ease-in-out infinite;
  background: var(--color-border);
  border-radius: 4px;
  height: 10px;
  margin-top: 6px;
}
.channel-sk-line--name { width: 70%; }
.channel-sk-line--stat { width: 45%; }
@keyframes sk-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.45; }
}

/* ─── Video-page sidebar tabs ────────────────────────────────────────────── */
.vw-tabs {
  background: #050570;
  border-bottom: 1px solid var(--color-border);
  border-radius: 6px 6px 0 0;
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
  padding: 0 4px;
  position: static;
  top: auto;
  z-index: auto;
}
.vw-tab-btn {
  align-items: center;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: hsla(0, 0%, 100%, 0.65);
  cursor: pointer;
  display: flex;
  font-size: 14px;
  font-weight: 700;
  gap: 6px;
  margin-bottom: -1px;
  padding: 10px 14px;
  transition: color 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.vw-tab-btn i { font-size: 14px; }
.vw-tab-btn:hover { color: #fff; }
.vw-tab-btn--active {
  border-bottom-color: var(--color-accent);
  color: var(--color-accent);
}
.vw-tab-badge {
  background: #e53;
  border-radius: 10px;
  color: #fff;
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  min-width: 18px;
  padding: 2px 5px;
  text-align: center;
}
.vw-tab-panel { display: block; }
.vw-tab-panel[hidden] { display: none !important; }

.vw-related-list {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(2, 1fr); /* max 2 videos per row on desktop */
}
.vw-rel-card {
  border-radius: 5px;
  color: var(--color-text-primary);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 5px;
  overflow: hidden;
  padding: 4px;
  transition: background 0.15s;
}
.vw-rel-thumb {
  aspect-ratio: 16/9;
  background: #111;
  border-radius: 4px;
  flex-shrink: 0;
  overflow: hidden;
  position: relative;
  width: 100%;
}
.vw-rel-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  padding: 0 2px 2px;
}
.vw-rel-title {
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  display: -webkit-box;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.35;
  overflow: hidden;
}
.vw-rel-foot {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 2px;
}
.vw-rel-meta {
  align-items: center;
  color: var(--color-text-muted);
  display: flex;
  font-size: 10px;
  gap: 5px;
}
/* Mobile sidebar: 2 cols */
@media (max-width: 860px) {
  .vw-related-list {
    grid-template-columns: repeat(2, 1fr);
  }
  .vw-rel-card { padding: 3px; }
}

/* Desktop page side padding: keep layout centered with 200px side gutters */
@media (min-width: 1024px) {
  .vw-page .uk-container {
    padding-left: 300px;
    padding-right: 300px;
  }
}

/* ─── Related Playlist cards ─────────────────────────────────────────────── */
.vw-pl-list {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(3, 1fr);
}
.vw-pl-card {
  border-radius: 7px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  text-decoration: none;
  transition: transform 0.15s, box-shadow 0.15s;
}
.vw-pl-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.35);
  transform: translateY(-2px);
}
/* Thumbnail wrap (holds mosaic + overlays) */
.vw-pl-thumb {
  aspect-ratio: 16/9;
  border-radius: 7px;
  overflow: hidden;
  position: relative;
  width: 100%;
}
/* 2×2 mosaic fills the thumb */
.vw-pl-mosaic {
  display: grid;
  gap: 2px;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  height: 100%;
  width: 100%;
}
.vw-pl-mosaic img {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}
/* Single-image fallback */
.vw-pl-mosaic--single {
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
}
/* Video count — top-right overlay */
.vw-pl-count {
  background: rgba(0,0,0,0.72);
  border-radius: 0 0 0 4px;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  padding: 5px 12px;
  position: absolute;
  right: 0;
  top: 0;
}
.vw-pl-count i { font-size: 9px; margin-right: 2px; }
/* Creator name — bottom-left overlay */
.vw-pl-creator {
  background: linear-gradient(transparent, rgba(0,0,0,0.7));
  border-bottom-left-radius: 7px;
  border-bottom-right-radius: 7px;
  bottom: 0;
  color: rgba(255,255,255,0.9);
  font-size: 10px;
  left: 0;
  overflow: hidden;
  padding: 12px 8px 5px;
  position: absolute;
  right: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vw-pl-creator i { font-size: 9px; margin-right: 3px; opacity: 0.8; }
/* Playlist name — below image, centered */
.vw-pl-name {
  color: var(--color-text-primary);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
  margin-top: 8px;
  overflow: hidden;
  padding: 0 2px 4px;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Loading / empty states */
.vw-pl-loading {
  align-items: center;
  color: var(--color-text-muted);
  display: flex;
  font-size: 12px;
  gap: 8px;
  grid-column: 1 / -1;
  padding: 20px 0;
}
.vw-pl-empty {
  color: var(--color-text-muted);
  font-size: 12px;
  grid-column: 1 / -1;
  padding: 20px 0;
  text-align: center;
}
@media (max-width: 860px) {
  .vw-pl-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ── Channel / Model Profile Cards ─────────────────────────────────────────── */
.video-card--channel,
.video-card--model {
  position: relative;
  background: linear-gradient(135deg, #0c0cd8 60%, #1a1aff 100%);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  overflow: hidden;
  transition: transform .18s, box-shadow .18s, border-color .18s;
  cursor: pointer;
}
.video-card--channel:hover,
.video-card--model:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,.6);
  border-color: var(--color-accent);
}
.video-card--channel { border-top: 3px solid var(--color-accent); }
.video-card--model   { border-top: 3px solid #ff6ec7; }

/* Profile link wrapper fills entire card */
.vc-profile-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: var(--color-text-primary);
  padding: 24px 12px 16px;
  gap: 10px;
  min-height: 140px;
  text-align: center;
}
.vc-profile-link:hover { color: var(--color-accent); text-decoration: none; }
.video-card--model .vc-profile-link:hover { color: #ff6ec7; }

/* Avatar circle */
.vc-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(0,0,0,.35);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  flex-shrink: 0;
  border: 2px solid rgba(255,255,255,.15);
}
.video-card--channel .vc-avatar { color: var(--color-accent); border-color: rgba(0,207,255,.3); }
.video-card--model   .vc-avatar { color: #ff6ec7;             border-color: rgba(255,110,199,.3); }

/* Name */
.vc-name {
  font-size: var(--font-size-base);
  font-weight: 700;
  line-height: 1.3;
  max-height: 2.6em;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* Type badge (top-left corner) */
.vc-type-badge {
  position: absolute;
  top: 6px;
  left: 6px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  border-radius: 3px;
  font-size: var(--font-size-xs);
  font-weight: 600;
  letter-spacing: .02em;
  line-height: 1.6;
  pointer-events: none;
  z-index: 2;
}
.vc-type-badge--channel {
  background: rgba(0,207,255,.18);
  color: var(--color-accent);
  border: 1px solid rgba(0,207,255,.35);
}
.vc-type-badge--model {
  background: rgba(255,110,199,.18);
  color: #ff6ec7;
  border: 1px solid rgba(255,110,199,.35);
}

/* ── Related sidebar: channel/model profile cards ───────────────────────────── */
.vw-rel-card--profile {
  background: linear-gradient(135deg, #0c0cd8 60%, #1a1aff 100%);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  transition: border-color .18s;
}
.vw-rel-card--profile:hover { border-color: var(--color-accent); }
.video-card--model.vw-rel-card--profile:hover { border-color: #ff6ec7; }

.vw-rel-profile-link {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  text-decoration: none;
  color: var(--color-text-primary);
}
.vw-rel-profile-link:hover { color: var(--color-accent); text-decoration: none; }
.vw-rel-profile-link .vw-rel-title {
  font-size: var(--font-size-base);
  font-weight: 600;
  line-height: 1.3;
}

/* ── Section subtitle ───────────────────────────────────────────────────────── */
.section-subtitle {
  margin: 4px 0 0;
  font-size: var(--font-size-sm, 13px);
  color: var(--color-text-dim);
  line-height: 1.5;
  font-weight: 400;
  letter-spacing: .01em;
}

/* ── Category page grid ─────────────────────────────────────────────────────── */
.cat-page {
  padding-bottom: 48px;
}

.cat-section {
  margin-bottom: 40px;
}

.cat-sec-head {
  margin-bottom: 16px;
}

.cat-sec-title {
  font-size: clamp(15px, 2vw, 18px);
  font-weight: 700;
  color: var(--color-text-primary);
  margin: 0 0 5px;
  letter-spacing: .01em;
  display: flex;
  align-items: center;
  gap: 9px;
}

.cat-sec-title::before {
  content: '';
  display: inline-block;
  width: 3px;
  height: 17px;
  background: var(--color-accent);
  border-radius: 2px;
  flex-shrink: 0;
}

.cat-sec-sub {
  font-size: var(--font-size-sm, 13px);
  color: var(--color-text-dim);
  margin: 0;
  line-height: 1.5;
  padding-left: 12px;
}

/* Grid layout — 6 columns desktop, configurable */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
}

/* Category card */
.cat-thumb {
  display: block;
  text-decoration: none;
  border-radius: var(--radius-card, 8px);
  overflow: hidden;
  transition: transform .18s;
}
.cat-thumb:hover {
  transform: translateY(-2px);
  text-decoration: none;
}

.cat-thumb-img-wrap {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius-card, 8px);
  border: 1px solid var(--color-border);
  background: var(--color-surface-3, #0e0e1c);
  transition: border-color .2s, box-shadow .2s;
}
.cat-thumb:hover .cat-thumb-img-wrap {
  border-color: var(--color-accent);
  box-shadow: 0 4px 18px rgba(0, 207, 255, .18);
}

.cat-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .28s ease;
}
.cat-thumb:hover .cat-thumb-img {
  transform: scale(1.07);
}

/* Name overlay — gradient at bottom */
.cat-thumb-name {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 28px 8px 8px;
  background: linear-gradient(to top, rgba(0,0,0,.80) 0%, rgba(0,0,0,.30) 60%, transparent 100%);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: .02em;
  transition: color .2s;
}
.cat-thumb:hover .cat-thumb-name {
  color: var(--color-accent);
}

/* Video count badge — top-right */
.cat-thumb-count {
  position: absolute;
  top: 5px;
  right: 5px;
  background: rgba(0,0,0,.60);
  backdrop-filter: blur(2px);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  line-height: 1.5;
  pointer-events: none;
}

/* Fallback when image is missing */
.cat-thumb-no-img {
  background: linear-gradient(135deg, #0e0e1c 0%, #1a1a2e 100%);
}
.cat-thumb-no-img::after {
  content: '\f03e';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: var(--color-text-dim);
}

/* ── Responsive ── */
@media (max-width: 1024px) {
  .cat-grid { grid-template-columns: repeat(5, 1fr); gap: 9px; }
}
@media (max-width: 768px) {
  .cat-grid { grid-template-columns: repeat(4, 1fr); gap: 8px; }
}
@media (max-width: 480px) {
  .cat-grid { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .cat-thumb-name { font-size: 11px; padding: 22px 5px 6px; }
}

/* ── Settings: playback toggle switches ────────────────────────────────────── */
.sp-toggle-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 2px 0 0;
}

.sp-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 4px;
  border-radius: 8px;
  cursor: pointer;
  transition: background .15s;
}
.sp-toggle-row:hover {
  background: hsla(0,0%,100%,.05);
}

.sp-toggle-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.sp-toggle-title {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--color-text-primary);
  line-height: 1.3;
}

.sp-toggle-desc {
  font-size: 11px;
  color: var(--color-text-dim);
  line-height: 1.3;
}

/* Toggle switch pill */
.sp-toggle-switch {
  flex-shrink: 0;
  width: 40px;
  height: 22px;
  border-radius: 11px;
  background: var(--color-border);
  position: relative;
  cursor: pointer;
  transition: background .2s;
  outline: none;
}
.sp-toggle-switch:focus-visible {
  box-shadow: 0 0 0 2px var(--color-accent);
}
.sp-toggle-switch[aria-checked="true"] {
  background: var(--color-accent);
}

.sp-toggle-knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.3);
  transition: transform .2s;
  pointer-events: none;
}
.sp-toggle-switch[aria-checked="true"] .sp-toggle-knob {
  transform: translateX(18px);
}

/* ════════════════════════════════════════════════════════════════════════════
   VIDEO PLAYER PAGE — locked-in layout
   See memory/project_video_player_layout.md
   ════════════════════════════════════════════════════════════════════════════ */

/* ─── Shell: centered, wide (desktop) ──────────────────────────────────── */
.vw-shell {
  margin: 0 auto;
  max-width: 1640px;
  padding: 0 12px;
  width: 100%;
}
@media (max-width: 1180px) {
  .vw-shell { padding: 0 10px; }
}
@media (max-width: 860px) {
  .vw-shell { padding: 0 8px; }
}
@media (max-width: 540px) {
  .vw-shell { padding: 0 6px; }
}

/* ─── Breadcrumb: chip pills with embedded ❯ markers, 5px gap ─────────── */
.vw-breadcrumb {
  display: flex;
  margin: 4px 0 10px;
}
.vw-bc-path {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  min-width: 0;
}
/* Each direct chip in the breadcrumb (link or span) */
.vw-bc-chip {
  align-items: center;
  background: hsla(0, 0%, 100%, 0.05);
  border: 1px solid hsla(0, 0%, 100%, 0.07);
  border-radius: 4px;
  color: var(--color-text-dim);
  display: inline-flex;
  font-size: 11px;
  font-weight: 600;
  gap: 6px;
  letter-spacing: 0.3px;
  line-height: 1.2;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  padding: 5px 10px;
  text-decoration: none;
  text-overflow: ellipsis;
  text-transform: uppercase;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  white-space: nowrap;
}
.vw-bc-chip > span {
  overflow: hidden;
  text-overflow: ellipsis;
}
.vw-bc-chip > i.fa-house {
  font-size: 10px;
  opacity: 0.85;
}
/* Trailing ❯ on every chip */
.vw-bc-chip::after {
  color: hsla(0, 0%, 100%, 0.45);
  content: "\276F"; /* ❯ */
  font-size: 10px;
  margin-left: 2px;
}
/* Leading ❯ on every chip except the first */
.vw-bc-chip:not(.vw-bc-chip--first)::before {
  color: hsla(0, 0%, 100%, 0.45);
  content: "\276F"; /* ❯ */
  font-size: 10px;
  margin-right: 2px;
}
a.vw-bc-chip:hover {
  background: hsla(0, 0%, 100%, 0.12);
  border-color: var(--color-accent);
  color: var(--color-accent);
}
.vw-bc-chip--title {
  background: rgba(0, 207, 255, 0.08);
  border-color: rgba(0, 207, 255, 0.3);
  color: var(--color-accent);
  max-width: 50ch;
  text-transform: none;
}
/* JS injects <a> + chevron into the uploader span: render the anchor inline,
   hide the inner chevron (we use ::after/::before for arrows). */
.vw-bc-chip--uploader:empty { display: none; }
.vw-bc-chip--uploader > a {
  color: inherit;
  text-decoration: none;
}
.vw-bc-chip--uploader > a:hover {
  color: var(--color-accent);
}
.vw-bc-chip--uploader > .fa-chevron-right { display: none; }

/* ─── Title (H1) above the player ─────────────────────────────────────── */
.vw-shell > .vw-title {
  color: var(--color-text-primary);
  font-size: clamp(16px, 1.8vw, 22px);
  font-weight: 700;
  letter-spacing: 0.2px;
  line-height: 1.3;
  margin: 0 0 8px;
}

/* ─── People-bar (Uploader | Models) above the player ─────────────────── */
.vw-shell > .vw-people-bar {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 10px;
}
.vw-people-sep {
  color: hsla(0, 0%, 100%, 0.3);
  font-size: 14px;
  user-select: none;
}

/* ─── Main grid: middle (player + info + tabs + tab body) | right rail ── */
.vw-grid {
  align-items: start;
  column-gap: 14px;
  display: grid;
  /* Main column wide; right rail compact so the player gets more room. */
  grid-template-columns: minmax(0, 1fr) clamp(260px, 22%, 340px);
  position: relative;
  row-gap: 4px; /* tight: info-card sits close to player */
}
.vw-grid > .vw-player-wrap       { grid-column: 1; grid-row: 1; }
.vw-grid > .vw-info-card         { grid-column: 1; grid-row: 2; margin-top: -2px; }
.vw-grid > .vw-tabs--main        { grid-column: 1; grid-row: 3; margin-top: 10px; }
.vw-grid > .vw-tab-body--main    { grid-column: 1; grid-row: 4; }
.vw-grid > .vw-side              { grid-column: 2; grid-row: 1 / span 3; align-self: start; min-width: 0; }
.vw-grid > .vw-upload-more-wrap  { grid-column: 1 / -1; grid-row: 5; margin-top: 18px; }
/* Expanded view (clicked load-more): right rail hidden, more grid fills */
.vw-grid--expanded > .vw-side    { display: none; }
.vw-grid--expanded > .vw-player-wrap,
.vw-grid--expanded > .vw-info-card,
.vw-grid--expanded > .vw-tabs--main,
.vw-grid--expanded > .vw-tab-body--main { grid-column: 1 / -1; }

/* ─── Player wrap (existing) ─────────────────────────────────────────── */
.vw-grid > .vw-player-wrap {
  aspect-ratio: 16/9;
  background: #000;
  border-radius: 6px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.55);
  overflow: hidden;
  position: relative;
  width: 100%;
}

/* ─── Info card under the player: 2 info rows + desc + hr + tags ─────── */
.vw-info-card {
  background: hsla(0, 0%, 100%, 0.03);
  border: 1px solid hsla(0, 0%, 100%, 0.07);
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 14px;
}
.vw-info-row {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: space-between;
}
.vw-info-row-left {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.vw-info-row-right {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-left: auto;
}
.vw-info-row-right--models {
  color: var(--color-text-dim);
  font-size: 12px;
}
.vw-models-label {
  color: var(--color-text-muted);
  font-weight: 600;
}
.vw-models-value {
  color: var(--color-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 40ch;
}

/* Length / Quality badges left side — uses existing .vw-badge styles via watch-title-badges */
.vw-info-row-left .vw-title-badges {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* Stat chips */
.vw-stat--chip {
  align-items: center;
  background: hsla(0, 0%, 100%, 0.05);
  border: 1px solid hsla(0, 0%, 100%, 0.07);
  border-radius: 20px;
  color: var(--color-text-dim);
  display: inline-flex;
  font-size: 11px;
  font-weight: 600;
  gap: 5px;
  padding: 5px 11px;
}
.vw-stat--chip em {
  color: var(--color-text-muted);
  font-style: normal;
  font-weight: 500;
  opacity: 0.85;
}
.vw-stat--chip.vw-stat--rating {
  background: rgba(76, 200, 140, 0.08);
  border-color: rgba(76, 200, 140, 0.28);
  color: #4cc88c;
}

/* Action button — Rate up / down accents */
.vw-btn--rate-up {
  background: rgba(76, 200, 140, 0.08);
  border-color: rgba(76, 200, 140, 0.28);
  color: #4cc88c;
}
.vw-btn--rate-up:hover { background: rgba(76, 200, 140, 0.18); border-color: rgba(76, 200, 140, 0.5); }
.vw-btn--rate-down {
  background: rgba(229, 51, 51, 0.08);
  border-color: rgba(229, 51, 51, 0.28);
  color: #ff5a5a;
}
.vw-btn--rate-down:hover { background: rgba(229, 51, 51, 0.18); border-color: rgba(229, 51, 51, 0.5); }
.vw-btn--report {
  background: hsla(0, 0%, 100%, 0.05);
  border-color: hsla(0, 0%, 100%, 0.07);
  color: var(--color-text-muted);
}
.vw-btn--report:hover {
  background: rgba(229, 51, 51, 0.12);
  border-color: rgba(229, 51, 51, 0.4);
  color: #ff5a5a;
}

/* Download dropdown trigger + menu */
.vw-dl-wrap { position: relative; }
.vw-btn--dl-toggle .vw-dl-caret { font-size: 9px; opacity: 0.7; transition: transform 0.18s; }
.vw-btn--open .vw-dl-caret { transform: rotate(180deg); }
.vw-dl-menu {
  background: var(--color-bg-secondary);
  border: 1px solid hsla(0, 0%, 100%, 0.07);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55);
  min-width: 200px;
  padding: 8px;
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 120;
}
.vw-dl-menu .vw-dl-btns { display: flex; flex-direction: column; gap: 4px; }
.vw-dl-menu .vw-dl-btn { border-radius: 6px; justify-content: flex-start; padding: 8px 12px; width: 100%; }
.vw-dl-menu .vw-dl-placeholder { color: var(--color-text-dim); font-size: 11px; padding: 6px 8px; }
.vw-dl-menu .vw-dl-na { color: var(--color-text-muted); font-size: 11px; padding: 8px 12px; }

/* Description text in info card */
.vw-info-card .vw-desc {
  color: var(--color-text-dim);
  font-size: 13px;
  line-height: 1.55;
  margin: 4px 0 0;
  white-space: pre-line;
}
.vw-info-card .vw-desc:empty { display: none; }

/* ─── Standalone .vw-desc (works under .vw-meta-left, etc.) ───────────── */
.vw-desc {
  color: var(--color-text-dim);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.55;
  margin: 4px 0 0;
  text-transform: none;
  white-space: pre-line;
}
.vw-desc:empty { display: none; }

/* ─── vw-stats now also holds Rate Good / Bad buttons after rating ───── */
.vw-stats {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.vw-stats .vw-btn--rate-up,
.vw-stats .vw-btn--rate-down {
  margin-left: 2px;
}

/* ─── vw-title-bold (subtitle inside vw-meta-left) ─────────────────────── */
.vw-meta-left .vw-title-bold {
  color: var(--color-text-primary);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.2px;
  line-height: 1.35;
}
.vw-meta-left .vw-title-bold:empty { display: none; }
.vw-meta-left {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

/* Divider above tag scroller */
.vw-info-card .vw-divider {
  border: none;
  border-top: 1px solid hsla(0, 0%, 100%, 0.07);
  margin: 8px 0 4px;
}

/* ─── Tag scroller ────────────────────────────────────────────────────── */
.vw-tags-scroll {
  align-items: center;
  display: flex;
  gap: 6px;
  min-width: 0;
}
.vw-tags-arrow {
  align-items: center;
  background: hsla(0, 0%, 100%, 0.05);
  border: 1px solid hsla(0, 0%, 100%, 0.07);
  border-radius: 4px;
  color: var(--color-text-muted);
  cursor: pointer;
  display: inline-flex;
  flex-shrink: 0;
  font-size: 11px;
  height: 30px;
  justify-content: center;
  padding: 0;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  width: 30px;
}
.vw-tags-arrow:hover:not(:disabled) {
  background: hsla(0, 0%, 100%, 0.12);
  border-color: var(--color-accent);
  color: var(--color-accent);
}
.vw-tags-arrow:disabled { cursor: default; opacity: 0.35; }
.vw-tags-fade {
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  position: relative;
}
.vw-tags-row--scroll {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  overflow-x: auto;
  padding: 2px 4px;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.vw-tags-row--scroll::-webkit-scrollbar { display: none; }
.vw-tags-row--scroll > span {
  display: inline-flex;
  flex-wrap: nowrap;
  gap: 8px;
}
.vw-tags-row--scroll .watch-info-tag {
  flex-shrink: 0;
  margin: 0;
}

/* ─── Tabs (main 3-tab strip + side rail tabs share visual) ──────────── */
.vw-tabs {
  background: #050570;
  border: 1px solid hsla(0, 0%, 100%, 0.07);
  border-radius: 6px 6px 0 0;
  display: flex;
  margin-bottom: 0;
  padding: 0;
  position: static;
  top: auto;
  z-index: auto;
}
.vw-tabs--main {
  margin-top: 4px;
  width: 100%;
}
.vw-tabs--side {
  width: 100%;
}
.vw-tab-btn {
  align-items: center;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: hsla(0, 0%, 100%, 0.7);
  cursor: pointer;
  display: inline-flex;
  flex: 1 1 0;
  font-size: 13px;
  font-weight: 700;
  gap: 6px;
  justify-content: center;
  padding: 10px 14px;
  text-align: center;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.vw-tab-btn i { font-size: 13px; }
.vw-tab-btn:hover { background: hsla(0, 0%, 100%, 0.06); color: #fff; }
.vw-tab-btn--active {
  background: hsla(0, 0%, 100%, 0.08);
  border-bottom-color: var(--color-accent);
  color: var(--color-accent);
}

/* Body attached to the tab strip */
.vw-tab-body {
  background: hsla(0, 0%, 100%, 0.03);
  border: 1px solid hsla(0, 0%, 100%, 0.07);
  border-radius: 0 0 6px 6px;
  border-top: none;
  padding: 14px;
}
.vw-tab-panel { display: block; }
.vw-tab-panel[hidden] { display: none !important; }

/* ─── Right rail (Related | Playlist) — fixed height, scrolls vertically */
.vw-side {
  --side-height: 720px;
  align-self: start;
  display: flex;
  flex-direction: column;
  height: var(--side-height);
  max-height: calc(100vh - 96px);
  min-width: 0;
  position: sticky;
  top: calc(var(--header-height, 56px) + 12px);
}
.vw-side > .vw-tabs--side { flex-shrink: 0; }
.vw-side > .vw-tab-body--side {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  scrollbar-color: hsla(0, 0%, 100%, 0.18) transparent;
  scrollbar-width: thin;
  padding: 10px;
}
.vw-side > .vw-tab-body--side::-webkit-scrollbar { width: 6px; }
.vw-side > .vw-tab-body--side::-webkit-scrollbar-thumb { background: hsla(0, 0%, 100%, 0.18); border-radius: 3px; }
@media (max-height: 800px) {
  .vw-side { --side-height: 640px; }
}
@media (max-height: 700px) {
  .vw-side { --side-height: 540px; }
}

/* Related list — 2 items per row inside the rail */
.vw-related-list--2col {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.vw-pl-list--2col {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* ─── Video Information panel: key/value metadata list ─────────────────── */
.vw-meta-list {
  display: grid;
  gap: 10px 16px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
}
.vw-meta-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.vw-meta-item--wide { grid-column: 1 / -1; }
.vw-meta-item dt {
  align-items: center;
  color: var(--color-text-muted);
  display: inline-flex;
  font-size: 11px;
  font-weight: 700;
  gap: 5px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}
.vw-meta-item dt i { color: var(--color-accent); font-size: 11px; }
.vw-meta-item dd {
  color: var(--color-text-primary);
  font-size: 13px;
  line-height: 1.4;
  margin: 0;
  word-break: break-word;
}

/* ─── Comments tab content ────────────────────────────────────────────── */
.vw-ct-list { min-height: 80px; }
.vw-ct-empty {
  align-items: center;
  color: var(--color-text-muted);
  display: flex;
  flex-direction: column;
  font-size: 12.5px;
  gap: 6px;
  margin: 0;
  padding: 18px 0;
  text-align: center;
}
.vw-ct-empty i { font-size: 22px; opacity: 0.5; }

.vw-ct-item {
  background: hsla(0, 0%, 100%, 0.04);
  border: 1px solid hsla(0, 0%, 100%, 0.07);
  border-radius: 6px;
  margin-bottom: 8px;
  padding: 10px 12px;
}
.vw-ct-item-head {
  align-items: baseline;
  display: flex;
  gap: 10px;
  margin-bottom: 4px;
}
.vw-ct-item-name { color: var(--color-accent); font-size: 12px; font-weight: 700; }
.vw-ct-item-time { color: var(--color-text-muted); font-size: 10px; }
.vw-ct-item-body {
  color: var(--color-text-primary);
  font-size: 13px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}

/* Add Comments form */
.vw-ct-form { display: flex; flex-direction: column; gap: 10px; }
.vw-ct-field { display: flex; flex-direction: column; gap: 4px; }
.vw-ct-field label {
  color: var(--color-text-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}
.vw-ct-field input,
.vw-ct-field textarea {
  background: hsla(0, 0%, 100%, 0.05);
  border: 1px solid hsla(0, 0%, 100%, 0.07);
  border-radius: 4px;
  color: var(--color-text-primary);
  font-family: inherit;
  font-size: 13px;
  outline: none;
  padding: 8px 10px;
  resize: vertical;
  transition: border-color 0.15s, background 0.15s;
}
.vw-ct-field input:focus,
.vw-ct-field textarea:focus {
  background: hsla(0, 0%, 100%, 0.08);
  border-color: var(--color-accent);
}
.vw-ct-form-foot { display: flex; justify-content: flex-end; }
.vw-btn--submit {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #001220;
  font-weight: 700;
}
.vw-btn--submit:hover { background: #5fdaff; border-color: #5fdaff; color: #001220; }

/* ─── "More videos from this uploader" button ─────────────────────────── */
.vw-upload-more-wrap {
  display: flex;
  justify-content: center;
  margin: 18px 0 6px;
  position: relative;
}
.vw-upload-more-wrap::before {
  background: hsla(0, 0%, 100%, 0.07);
  content: "";
  height: 1px;
  left: 0;
  position: absolute;
  right: 0;
  top: 50%;
}
.vw-upload-more-btn {
  align-items: center;
  background: var(--color-bg-secondary);
  border: 1px solid hsla(0, 0%, 100%, 0.18);
  border-radius: 999px;
  color: var(--color-text-primary);
  cursor: pointer;
  display: inline-flex;
  font-size: 13px;
  font-weight: 700;
  gap: 8px;
  letter-spacing: 0.2px;
  padding: 9px 22px;
  position: relative;
  transition: background 0.18s, border-color 0.18s, color 0.18s, transform 0.12s;
  z-index: 1;
}
.vw-upload-more-btn:hover {
  background: hsla(0, 0%, 100%, 0.08);
  border-color: var(--color-accent);
  color: var(--color-accent);
  transform: translateY(-1px);
}
.vw-upload-more-btn i { font-size: 11px; opacity: 0.75; }

/* ─── Mobile (≤ 860px) ─────────────────────────────────────────────────── */
@media (max-width: 860px) {
  /* Hard width clamp on the shell so nothing leaks past the viewport */
  .vw-shell {
    max-width: 100vw;
    overflow-x: hidden;
  }

  /* Single column. Mobile order:
     Player → Info-card → Tabs strip → Tab body → Related (2/row) → Upload-more */
  .vw-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
    grid-template-columns: 1fr;
    max-width: 100%;
    min-width: 0;
  }
  .vw-grid > *                   { max-width: 100%; min-width: 0; }
  .vw-grid > .vw-player-wrap     { grid-column: auto; grid-row: auto; order: 1; margin: 0; }
  .vw-grid > .vw-info-card       { grid-column: auto; grid-row: auto; order: 2; margin-top: 0; }
  .vw-grid > .vw-tabs--main      { grid-column: auto; grid-row: auto; order: 3; margin-top: 6px; }
  .vw-grid > .vw-tab-body--main  { grid-column: auto; grid-row: auto; order: 4; }
  .vw-grid > .vw-side            { grid-column: auto; grid-row: auto; order: 5; margin-top: 4px; }
  .vw-grid > .vw-upload-more-wrap{ grid-column: auto; grid-row: auto; order: 6; margin-top: 14px; }

  /* Player: fit the screen exactly (no full-bleed, no overflow). */
  .vw-grid > .vw-player-wrap {
    aspect-ratio: 16/9;
    border-radius: 6px;
    height: auto;
    margin: 0;
    max-width: 100%;
    width: 100%;
  }
  .vw-grid > .vw-player-wrap > .vw-video {
    height: 100%;
    width: 100%;
  }

  /* Side rail on mobile: no fixed height, no sticky, no internal scroll */
  .vw-side {
    height: auto;
    max-height: none;
    max-width: 100%;
    min-width: 0;
    position: static;
    top: auto;
    width: 100%;
  }
  .vw-side > .vw-tab-body--side {
    overflow-y: visible;
    padding: 8px;
  }

  /* Title smaller on mobile, no overflow */
  .vw-shell > .vw-title {
    font-size: clamp(15px, 4.5vw, 18px);
    line-height: 1.3;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  /* People-bar: allow wrap so pills don't overflow */
  .vw-shell > .vw-people-bar {
    gap: 6px;
  }
  .vw-shell > .vw-people-bar > * {
    max-width: 100%;
  }

  /* Breadcrumb: chips wrap, no horizontal overflow */
  .vw-bc-path { gap: 4px; }
  .vw-bc-chip {
    font-size: 10px;
    max-width: 100%;
    padding: 4px 8px;
  }
  .vw-bc-chip--title { max-width: 100%; }

  /* Info card: tight padding, icon-only buttons, never overflow */
  .vw-info-card {
    gap: 8px;
    max-width: 100%;
    overflow: hidden;
    padding: 10px;
  }
  .vw-info-row { gap: 6px; }
  .vw-info-row-right { gap: 4px; justify-content: flex-end; }
  .vw-info-row-right .vw-btn--icon-mobile span { display: none; }
  .vw-info-row-right .vw-btn {
    flex-shrink: 0;
    padding: 7px 9px;
  }
  .vw-info-row-right--models { gap: 6px; }

  /* Stats chips slightly smaller */
  .vw-stat--chip { font-size: 11px; padding: 4px 9px; }

  /* Tags scroller fits row */
  .vw-tags-scroll { min-width: 0; max-width: 100%; }
  .vw-tags-fade   { min-width: 0; }

  /* Tabs strip: never wider than viewport, labels truncate gracefully */
  .vw-tabs--main, .vw-tabs--side { max-width: 100%; }
  .vw-tab-btn {
    flex: 1 1 0;
    font-size: 12px;
    gap: 4px;
    min-width: 0;
    overflow: hidden;
    padding: 9px 6px;
  }
  .vw-tab-btn span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Tab body: fit width, word-break long content (comments, desc, etc.) */
  .vw-tab-body {
    max-width: 100%;
    overflow: hidden;
    padding: 10px;
  }
  .vw-tab-body, .vw-tab-body * {
    word-break: break-word;
    overflow-wrap: anywhere;
  }

  /* Comment items wrap and never overflow */
  .vw-ct-item { padding: 9px 11px; }
  .vw-ct-form input, .vw-ct-form textarea {
    max-width: 100%;
    width: 100%;
  }

  /* Meta grid: single column on mobile */
  .vw-meta-list { grid-template-columns: 1fr; }
  .vw-meta-item dd { word-break: break-word; overflow-wrap: anywhere; }

  /* Related grid: 2 videos per row on mobile */
  .vw-related-list--2col,
  .vw-pl-list--2col {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Upload-more button: smaller, fits its row */
  .vw-upload-more-wrap { max-width: 100%; overflow: hidden; }
  .vw-upload-more-btn  { font-size: 12px; max-width: 100%; padding: 8px 16px; }

  /* Models value can wrap */
  .vw-models-value {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

@media (max-width: 540px) {
  /* Action row stacks: left chips on top, action buttons below */
  .vw-info-row { flex-direction: column; align-items: stretch; }
  .vw-info-row-left { justify-content: flex-start; }
  .vw-info-row-right { width: 100%; justify-content: flex-start; flex-wrap: wrap; }
  .vw-info-row-right--models { justify-content: flex-start; }
  .vw-models-value { max-width: 100%; white-space: normal; }

  /* Keep 2 videos per row on small phones too (per latest spec) */
  .vw-related-list--2col,
  .vw-pl-list--2col {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   WATCH-DL-BAR — new layout (row(a) + action row + title + desc + tags + cmts)
   ════════════════════════════════════════════════════════════════════════════ */

/* ─── Row (a): meta chips on the left, Report button on the right ──────── */
.vw-meta-row--a {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: space-between;
  margin-top: 10px;
  padding: 0;
}
.vw-meta-chips {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}
.vw-meta-chip {
  align-items: center;
  background: hsla(0, 0%, 100%, 0.05);
  border: 1px solid hsla(0, 0%, 100%, 0.07);
  border-radius: 4px;
  color: var(--color-text-dim);
  display: inline-flex;
  font-size: 11px;
  font-weight: 600;
  gap: 5px;
  letter-spacing: 0.3px;
  padding: 4px 10px;
  white-space: nowrap;
}
.vw-meta-chip i { font-size: 10px; opacity: 0.85; }
.vw-meta-chip--len { background: rgba(52, 211, 153, 0.08); border-color: rgba(52, 211, 153, 0.28); color: #34d399; }
.vw-meta-chip--q   { background: rgba(0, 207, 255, 0.06); border-color: rgba(0, 207, 255, 0.28); color: var(--color-accent); }
.vw-meta-chip--rating { background: rgba(76, 200, 140, 0.08); border-color: rgba(76, 200, 140, 0.28); color: #4cc88c; }
.vw-meta-chip--date { background: hsla(0, 0%, 100%, 0.04); }
.vw-meta-sep {
  color: hsla(0, 0%, 100%, 0.25);
  font-size: 12px;
  font-weight: 400;
  padding: 0 2px;
  user-select: none;
}
.vw-meta-right {
  display: inline-flex;
  margin-left: auto;
}

/* ─── Action row centered (Good Bad Download Save CopyLink Embed) ──────── */
.vw-action-row {
  align-items: center;
  border-bottom: 1px solid hsla(0, 0%, 100%, 0.07);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin: 12px 0;
  padding: 10px 0;
}
.vw-rate-count {
  font-weight: 700;
  letter-spacing: 0.3px;
  min-width: 14px;
  text-align: center;
}

/* ─── Title + desc (now inside vw-info-bottom, after action row) ───────── */
.vw-info-bottom > .vw-title {
  color: var(--color-text-primary);
  font-size: clamp(16px, 1.8vw, 22px);
  font-weight: 700;
  letter-spacing: 0.2px;
  line-height: 1.3;
  margin: 6px 0 4px;
}
.vw-info-bottom > .vw-title-bold {
  color: var(--color-text-muted);
  font-size: 13px;
  font-weight: 600;
  margin: 0 0 4px;
}
.vw-info-bottom > .vw-title-bold:empty { display: none; }
.vw-info-bottom > .vw-desc {
  color: var(--color-text-dim);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.55;
  margin: 4px 0 10px;
  text-transform: none;
  white-space: pre-line;
}
.vw-info-bottom > .vw-desc:empty { display: none; }

/* ─── Tag pills with icon prefix ───────────────────────────────────────── */
.vw-tags-row--icons {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 4px 0 12px;
}
.vw-tags-row--icons .watch-info-tag {
  margin: 3px;
}
.vw-tags-row--icons .watch-info-tag::before {
  color: var(--color-accent);
  content: "\f02b"; /* fa-tag unicode */
  font-family: "Font Awesome 6 Free";
  font-size: 9px;
  font-weight: 900;
  margin-right: 5px;
  opacity: 0.85;
}

/* ─── Comments section ─────────────────────────────────────────────────── */
.vw-comments {
  background: hsla(0, 0%, 100%, 0.02);
  border: 1px solid hsla(0, 0%, 100%, 0.07);
  border-radius: 6px;
  margin-top: 14px;
  padding: 12px 14px;
}
.vw-comments-head {
  border-bottom: 1px solid hsla(0, 0%, 100%, 0.07);
  margin-bottom: 12px;
  padding-bottom: 8px;
}
.vw-comments-head h3 {
  align-items: center;
  color: var(--color-text-primary);
  display: inline-flex;
  font-size: 15px;
  font-weight: 700;
  gap: 8px;
  margin: 0;
}
.vw-comments-head h3 i { color: var(--color-accent); font-size: 14px; }
.vw-comments-count {
  color: var(--color-text-muted);
  font-size: 12px;
  font-weight: 500;
}
.vw-comments-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 60px;
}
.vw-comments-loading,
.vw-comments-empty {
  color: var(--color-text-muted);
  font-size: 12.5px;
  margin: 0;
  padding: 14px 0;
  text-align: center;
}
.vw-cmt {
  background: hsla(0, 0%, 100%, 0.03);
  border: 1px solid hsla(0, 0%, 100%, 0.06);
  border-radius: 6px;
  padding: 9px 12px;
}
.vw-cmt-head {
  align-items: baseline;
  color: var(--color-text-dim);
  display: flex;
  flex-wrap: wrap;
  font-size: 11px;
  gap: 6px;
  margin-bottom: 4px;
}
.vw-cmt-name { color: var(--color-accent); font-size: 12px; font-weight: 700; }
.vw-cmt-country { color: var(--color-text-muted); }
.vw-cmt-time { color: var(--color-text-muted); margin-left: auto; }
.vw-cmt-body {
  color: var(--color-text-primary);
  font-size: 13px;
  line-height: 1.5;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  word-break: break-word;
}
.vw-cmt-foot {
  align-items: center;
  color: var(--color-text-muted);
  display: flex;
  font-size: 11px;
  gap: 12px;
  margin-top: 6px;
}
.vw-cmt-vote { align-items: center; display: inline-flex; gap: 4px; }
.vw-cmt-vote i { font-size: 10px; }

/* ─── Mobile (≤ 860px): row(a) responsive, icon-only action buttons ───── */
@media (max-width: 860px) {
  .vw-meta-row--a {
    align-items: flex-start;
    gap: 8px;
  }
  .vw-meta-chips {
    flex: 1 1 0;
    min-width: 0;
  }
  .vw-meta-chip {
    font-size: 10.5px;
    padding: 3px 8px;
  }
  .vw-meta-right .vw-btn--report span { display: none; }
  .vw-meta-right .vw-btn--report { padding: 6px 9px; }

  .vw-action-row {
    gap: 6px;
    padding: 8px 0;
  }
  .vw-action-row .vw-btn--icon-mobile span { display: none; }
  .vw-action-row .vw-btn--rate-up .vw-rate-count,
  .vw-action-row .vw-btn--rate-down .vw-rate-count { display: inline; }
  .vw-action-row .vw-btn { padding: 7px 10px; }

  /* Title smaller, no overflow */
  .vw-info-bottom > .vw-title {
    font-size: clamp(15px, 4.5vw, 18px);
    word-break: break-word;
  }

  /* Player fits screen, no overflow */
  .vw-info-bottom > .vw-player-wrap {
    border-radius: 6px;
    margin: 0;
    max-width: 100%;
    width: 100%;
  }

  /* Comments: tighter padding */
  .vw-comments { padding: 10px 12px; }
  .vw-cmt { padding: 8px 10px; }
}

@media (max-width: 540px) {
  /* Keep Report on the SAME row as the meta chips (incl. rating) */
  .vw-meta-row--a {
    align-items: center;
    flex-direction: row;
    flex-wrap: nowrap;
  }
  .vw-meta-chips {
    flex: 1 1 0;
    flex-wrap: wrap;
    min-width: 0;
  }
  .vw-meta-right {
    flex-shrink: 0;
    justify-content: flex-end;
    margin-left: auto;
  }
  .vw-meta-right .vw-btn--report span { display: none; }
  .vw-tags-row--icons { gap: 5px; }
  .vw-tags-row--icons .watch-info-tag { font-size: 13px; padding: 3px 9px; }
}

/* Override the existing .vw-stat hidden-default visibility for chip variants */
.vw-meta-chip[hidden] { display: none !important; }

/* ─── Headings inside watch page: H1 (title), H2 (desc), H3 (tags) ────── */
.vw-info-top > .vw-title {
  color: var(--color-text-primary);
  font-size: clamp(18px, 2vw, 24px);
  font-weight: 700;
  letter-spacing: 0.2px;
  line-height: 1.3;
  margin: 6px 0 8px;
}
/* If the moved-below-action-row H1 styling is still applied, clear it. */
.vw-info-bottom > h1.vw-title { display: none; } /* belt-and-braces */

/* H2 — desc element (regular text styling — overrides default h2 size) */
h2.vw-desc {
  color: var(--color-text-dim);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.55;
  margin: 4px 0 10px;
  text-transform: none;
  white-space: pre-line;
}
h2.vw-desc:empty { display: none; }

/* H3 — tags row (keeps pill layout — override default h3 size + spacing) */
h3.vw-tags-row {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  font-size: 12px;
  font-weight: 400;
  gap: 6px;
  letter-spacing: 0;
  line-height: 1.4;
  margin: 4px 0 12px;
  text-transform: none;
}

/* ─── Row (b): Total Views, Total Rating + Good / Bad ────────────────── */
.vw-meta-row--b {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}
.vw-meta-row--b .vw-meta-chips {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}
.vw-meta-row--b .vw-btn--rate-up,
.vw-meta-row--b .vw-btn--rate-down {
  margin-left: 2px;
}
.vw-meta-suffix {
  color: var(--color-text-muted);
  font-style: normal;
  font-weight: 500;
  margin-left: 3px;
  opacity: 0.85;
}

@media (max-width: 540px) {
  .vw-meta-row--b { gap: 6px; }
  .vw-meta-row--b .vw-meta-chips { gap: 6px; }
}

/* ─── Good / Bad — explicit green/red emphasis ────────────────────────── */
.vw-btn--rate-up {
  background: rgba(46, 204, 113, 0.12) !important;
  border-color: rgba(46, 204, 113, 0.45) !important;
  color: #2ecc71 !important;
}
.vw-btn--rate-up:hover {
  background: rgba(46, 204, 113, 0.22) !important;
  border-color: rgba(46, 204, 113, 0.7)  !important;
  color: #2ecc71 !important;
}
.vw-btn--rate-up.is-active {
  background: rgba(46, 204, 113, 0.28) !important;
  border-color: #2ecc71 !important;
  color: #2ecc71 !important;
}
.vw-btn--rate-up .vw-rate-count { color: #2ecc71; }

.vw-btn--rate-down {
  background: rgba(231, 76, 60, 0.12) !important;
  border-color: rgba(231, 76, 60, 0.45) !important;
  color: #e74c3c !important;
}
.vw-btn--rate-down:hover {
  background: rgba(231, 76, 60, 0.22) !important;
  border-color: rgba(231, 76, 60, 0.7)  !important;
  color: #e74c3c !important;
}
.vw-btn--rate-down.is-active {
  background: rgba(231, 76, 60, 0.28) !important;
  border-color: #e74c3c !important;
  color: #e74c3c !important;
}
.vw-btn--rate-down .vw-rate-count { color: #e74c3c; }

/* Make sure the count number is always visible */
.vw-rate-count {
  display: inline-block !important;
  font-weight: 700;
  letter-spacing: 0.3px;
  min-width: 14px;
  text-align: center;
}

/* ════════════════════════════════════════════════════════════════════════════
   CUSTOM PLAYER CONTROLS (overlay bar)
   ════════════════════════════════════════════════════════════════════════════ */
.vw-player-wrap { user-select: none; }
.vw-video { cursor: pointer; }

/* Big center play button */
.vw-pl-bigplay {
  align-items: center;
  background: rgba(0, 0, 0, 0.55);
  border: 2px solid rgba(255, 255, 255, 0.85);
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  display: flex;
  font-size: 28px;
  height: 84px;
  justify-content: center;
  left: 50%;
  padding: 0 0 0 6px; /* shift play icon slightly right */
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: background 0.18s, transform 0.18s, opacity 0.18s;
  width: 84px;
  z-index: 15;
}
.vw-pl-bigplay:hover { background: rgba(0, 0, 0, 0.75); transform: translate(-50%, -50%) scale(1.05); }
.vw-pl-bigplay[hidden] { display: none; }

/* Bar wrapper at the bottom of the player */
.vw-pl-bar {
  background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.55) 60%, transparent 100%);
  bottom: 0;
  left: 0;
  opacity: 0;
  padding: 24px 12px 8px;
  pointer-events: none;
  position: absolute;
  right: 0;
  transition: opacity 0.22s ease;
  z-index: 18;
}
.vw-player-wrap:hover .vw-pl-bar,
.vw-player-wrap:focus-within .vw-pl-bar,
.vw-player-wrap.vw-pl--show-bar .vw-pl-bar,
.vw-player-wrap:not(.vw-pl--playing) .vw-pl-bar {
  opacity: 1;
  pointer-events: auto;
}
.vw-player-wrap.vw-pl--fs .vw-pl-bar { padding-bottom: 14px; }

/* Progress bar */
.vw-pl-progress {
  cursor: pointer;
  height: 16px;
  margin: 0 4px 4px;
  outline: none;
  padding: 6px 0;
  position: relative;
}
.vw-pl-progress-track {
  background: rgba(255, 255, 255, 0.22);
  border-radius: 2px;
  height: 4px;
  overflow: visible;
  position: relative;
  transition: height 0.15s;
  width: 100%;
}
.vw-pl-progress:hover .vw-pl-progress-track { height: 6px; }
.vw-pl-progress-buffer,
.vw-pl-progress-fill {
  border-radius: 2px;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
}
.vw-pl-progress-buffer { background: rgba(255, 255, 255, 0.35); }
.vw-pl-progress-fill   { background: var(--color-accent); }
.vw-pl-progress-thumb {
  background: var(--color-accent);
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(0, 207, 255, 0.18);
  height: 12px;
  left: 0;
  opacity: 0;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%) scale(0.6);
  transition: opacity 0.15s, transform 0.15s;
  width: 12px;
}
.vw-pl-progress:hover .vw-pl-progress-thumb { opacity: 1; transform: translate(-50%, -50%) scale(1); }

/* Controls row */
.vw-pl-controls {
  align-items: center;
  color: #fff;
  display: flex;
  gap: 4px;
  justify-content: space-between;
  padding: 0 4px;
}
.vw-pl-side { align-items: center; display: flex; gap: 2px; }

/* Buttons */
.vw-pl-btn {
  align-items: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  font-size: 14px;
  font-weight: 600;
  gap: 4px;
  height: 34px;
  justify-content: center;
  min-width: 34px;
  padding: 0 8px;
  text-decoration: none;
  transition: background 0.15s, color 0.15s, transform 0.1s;
}
.vw-pl-btn:hover { background: rgba(255, 255, 255, 0.14); }
.vw-pl-btn:active { transform: scale(0.96); }
.vw-pl-btn[hidden] { display: none; }
.vw-pl-btn--play i { font-size: 16px; }
.vw-pl-btn--skip { position: relative; }
.vw-pl-btn--skip i { font-size: 16px; }
.vw-pl-btn--skip .vw-pl-skip {
  font-size: 9px;
  font-weight: 700;
  left: 50%;
  position: absolute;
  top: 56%;
  transform: translate(-50%, -50%);
}
.vw-pl-time {
  color: rgba(255, 255, 255, 0.92);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  padding: 0 8px;
  white-space: nowrap;
}
.vw-pl-time-sep { opacity: 0.55; padding: 0 2px; }

/* Volume */
.vw-pl-volwrap {
  align-items: center;
  display: flex;
  max-width: 0;
  overflow: hidden;
  transition: max-width 0.22s ease;
}
.vw-pl-btn--vol:hover + .vw-pl-volwrap,
.vw-pl-volwrap:hover { max-width: 90px; }
.vw-pl-vol {
  cursor: pointer;
  height: 22px;
  padding: 8px 0;
  position: relative;
  width: 80px;
}
.vw-pl-vol-track {
  background: rgba(255, 255, 255, 0.25);
  border-radius: 2px;
  height: 4px;
  position: relative;
  width: 100%;
}
.vw-pl-vol-fill {
  background: #fff;
  border-radius: 2px;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 0;
}
.vw-pl-vol-thumb {
  background: #fff;
  border-radius: 50%;
  height: 10px;
  left: 0;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
}

/* Right side icons */
.vw-pl-menuwrap { position: relative; }
.vw-pl-menu {
  background: rgba(20, 20, 30, 0.97);
  border: 1px solid hsla(0, 0%, 100%, 0.14);
  border-radius: 8px;
  bottom: calc(100% + 8px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
  min-width: 160px;
  padding: 6px;
  position: absolute;
  right: 0;
  z-index: 30;
}
.vw-pl-menu[hidden] { display: none; }
.vw-pl-menu-item {
  align-items: center;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  display: flex;
  font-size: 12px;
  font-weight: 600;
  gap: 8px;
  padding: 8px 10px;
  text-align: left;
  transition: background 0.12s, color 0.12s;
  width: 100%;
}
.vw-pl-menu-item:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
.vw-pl-menu-item.is-active { background: rgba(0, 207, 255, 0.12); color: var(--color-accent); }
.vw-pl-q-badge {
  background: hsla(0, 0%, 100%, 0.08);
  border-radius: 12px;
  flex-shrink: 0;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.5px;
  min-width: 44px;
  padding: 2px 6px;
  text-align: center;
}
.vw-pl-q-badge.ql-auto { background: rgba(0, 207, 255, 0.18); color: var(--color-accent); }
.vw-pl-q-badge.ql-4k   { background: rgba(255, 215,   0, 0.18); color: gold; }
.vw-pl-q-badge.ql-fhd  { background: rgba(167, 139, 250, 0.20); color: #a78bfa; }
.vw-pl-q-badge.ql-hd   { background: rgba(  0, 207, 255, 0.18); color: var(--color-accent); }
.vw-pl-q-badge.ql-sd   { background: rgba(255, 165,   0, 0.18); color: #ffa040; }
.vw-pl-q-badge.ql-lo   { background: hsla(0, 0%, 100%, 0.10);   color: hsla(0, 0%, 100%, 0.7); }
.vw-pl-q-label {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.5px;
  padding: 3px 8px;
}

/* Theater mode: collapse the right rail and let the player fill the row */
.vw-grid--theater > .vw-side,
.vw-layout.vw-grid--theater > .vw-sidebar { display: none !important; }
.vw-layout.vw-grid--theater {
  grid-template-columns: minmax(0, 1fr) !important;
}

/* Native browser fullscreen */
.vw-player-wrap:fullscreen,
.vw-player-wrap.vw-pl--fs {
  background: #000;
  border-radius: 0;
  height: 100vh;
  max-width: 100vw;
  width: 100vw;
}
.vw-player-wrap:fullscreen .vw-video,
.vw-player-wrap.vw-pl--fs .vw-video { height: 100%; width: 100%; }

/* Mobile tweaks */
@media (max-width: 540px) {
  .vw-pl-bar { padding: 18px 8px 6px; }
  .vw-pl-btn { height: 30px; min-width: 30px; padding: 0 6px; font-size: 13px; }
  .vw-pl-time { font-size: 11px; padding: 0 4px; }
  .vw-pl-volwrap, .vw-pl-volwrap:hover { max-width: 0; }
  .vw-pl-btn--skip .vw-pl-skip { font-size: 8px; }
  .vw-pl-bigplay { height: 64px; width: 64px; font-size: 22px; }
}

/* ─── Volume overlay (top-right of the player) ─────────────────────────── */
.vw-pl-vol-overlay {
  align-items: center;
  display: flex;
  gap: 4px;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  right: 12px;
  top: 10px;
  transition: opacity 0.22s ease;
  z-index: 19;
}
.vw-player-wrap:hover .vw-pl-vol-overlay,
.vw-player-wrap:focus-within .vw-pl-vol-overlay,
.vw-player-wrap.vw-pl--show-bar .vw-pl-vol-overlay,
.vw-player-wrap:not(.vw-pl--playing) .vw-pl-vol-overlay {
  opacity: 1;
  pointer-events: auto;
}
.vw-pl-vol-overlay .vw-pl-btn {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.18);
}
.vw-pl-vol-overlay .vw-pl-btn:hover {
  background: rgba(0, 0, 0, 0.78);
  border-color: rgba(255, 255, 255, 0.35);
}
.vw-pl-vol-overlay .vw-pl-volwrap {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 18px;
  max-width: 0;
  overflow: hidden;
  padding: 0;
  transition: max-width 0.22s ease, padding 0.22s ease;
}
.vw-pl-vol-overlay:hover .vw-pl-volwrap,
.vw-pl-vol-overlay .vw-pl-btn:focus + .vw-pl-volwrap,
.vw-pl-vol-overlay.vw-pl--vol-active .vw-pl-volwrap {
  max-width: 110px;
  padding: 0 12px;
}

/* Hide Theater button (#4) on mobile per user spec */
@media (max-width: 860px) {
  #vw-pl-theater { display: none !important; }
}

/* Hide volume overlay completely on very narrow screens to avoid clutter */
@media (max-width: 540px) {
  .vw-pl-vol-overlay {
    right: 8px;
    top: 6px;
  }
  .vw-pl-vol-overlay:hover .vw-pl-volwrap,
  .vw-pl-vol-overlay .vw-pl-btn:focus + .vw-pl-volwrap {
    max-width: 0;
    padding: 0;
  }
}

/* Action-row buttons that always show their text label, even on mobile */
.vw-btn--text span { display: inline-block !important; }
.vw-action-row {
  flex-wrap: wrap;
  row-gap: 8px;
}

@media (max-width: 540px) {
  .vw-action-row .vw-btn--text {
    flex: 1 1 calc(50% - 6px);
    justify-content: center;
    min-width: 0;
  }
  .vw-action-row .vw-btn--text span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* Disabled rate buttons (after user has voted) */
.vw-btn--rate-up.is-disabled,
.vw-btn--rate-down.is-disabled,
.vw-btn--rate-up:disabled,
.vw-btn--rate-down:disabled {
  cursor: default;
  opacity: 0.72;
}
.vw-btn--rate-up.is-disabled:hover,
.vw-btn--rate-down.is-disabled:hover,
.vw-btn--rate-up:disabled:hover,
.vw-btn--rate-down:disabled:hover {
  /* Cancel the hover lift */
  filter: none;
}
/* Solid emphasis on the voted side */
.vw-btn--rate-up.is-active {
  background: rgba(46, 204, 113, 0.30) !important;
  border-color: #2ecc71 !important;
  color: #2ecc71 !important;
}
.vw-btn--rate-up.is-active i { font-weight: 900; }
.vw-btn--rate-down.is-active {
  background: rgba(231, 76, 60, 0.30) !important;
  border-color: #e74c3c !important;
  color: #e74c3c !important;
}
.vw-btn--rate-down.is-active i { font-weight: 900; }

/* Row (b) — actions inline on the right (desktop) ↔ new line on mobile */
.vw-meta-row--b {
  justify-content: space-between;
}
.vw-action-row--inline {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-left: auto;
}
.vw-action-row--inline .vw-btn--text {
  padding: 6px 12px;
}

@media (max-width: 860px) {
  .vw-meta-row--b {
    flex-wrap: wrap;
  }
  .vw-action-row--inline {
    flex: 1 1 100%;
    justify-content: center;
    margin-left: 0;
    margin-top: 6px;
  }
}
@media (max-width: 540px) {
  .vw-action-row--inline {
    gap: 6px;
  }
  .vw-action-row--inline .vw-btn--text {
    flex: 1 1 calc(50% - 6px);
    justify-content: center;
    min-width: 0;
  }
}

/* ─── Volume back in the bottom bar (right side, before Download) ──────── */
.vw-pl-vol-overlay { display: none !important; }   /* legacy top-right overlay disabled */

.vw-pl-volgroup {
  align-items: center;
  display: inline-flex;
  gap: 0;
}
.vw-pl-volgroup .vw-pl-volwrap {
  align-items: center;
  display: flex;
  max-width: 0;
  overflow: hidden;
  transition: max-width 0.22s ease, padding 0.22s ease;
  padding: 0;
}
.vw-pl-volgroup:hover .vw-pl-volwrap,
.vw-pl-volgroup.vw-pl--vol-active .vw-pl-volwrap,
.vw-pl-volgroup .vw-pl-btn:focus + .vw-pl-volwrap {
  max-width: 90px;
  padding: 0 8px 0 4px;
}

/* ─── Theater mode: player overlays the entire browser viewport ────────── */
body.vw-pl-theater-on { overflow: hidden; }
.vw-player-wrap.vw-pl--theater {
  background: #000;
  border-radius: 0;
  bottom: 0;
  height: 100vh;
  height: 100dvh;
  left: 0;
  margin: 0;
  max-width: 100vw;
  position: fixed;
  right: 0;
  top: 0;
  width: 100vw;
  z-index: 9999;
}
.vw-player-wrap.vw-pl--theater .vw-video {
  height: 100%;
  inset: 0;
  position: absolute;
  width: 100%;
  object-fit: contain;
}
.vw-player-wrap.vw-pl--theater .vw-pl-bar { padding-bottom: 16px; }