/*
Theme Name: malaynew
Theme URI: https://malaypornnew.com/
Author: Codex
Description: Batsa-inspired compact video portal theme.
Version: 1.0.116
Text Domain: malaynew
*/

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap');

:root {
  --bg: #edeff1;
  --band: #dee2e7;
  --header: rgba(57, 38, 34, .95);
  --text: #000;
  --muted: #768394;
  --soft: #838d98;
  --accent: #ff5454;
  --white: #fff;
}

* { box-sizing: border-box; margin: 0; padding: 0; border: 0; }
html { font-size: 16px; scroll-behavior: smooth; scrollbar-width: thin; scrollbar-color: var(--accent) var(--bg); }
body {
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: Manrope, Arial, Helvetica, sans-serif;
  font-size: 13px;
  line-height: 1.5;
}
a { color: var(--text); text-decoration: none; cursor: pointer; }
a:hover { color: var(--accent); }
img { display: block; max-width: 100%; height: auto; }
.wrap { width: 100%; max-width: 1366px; margin: 0 auto; padding: 0 10px; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  height: 66px;
  padding: 5px 0;
  background: var(--header);
  backdrop-filter: blur(5px);
}
.topbar { min-height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.site-logo { margin: 0; min-width: 210px; line-height: 1; }
.brand {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: 0;
  padding: 10px 10px 0;
  color: #fff;
  font-size: 29px;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1;
  white-space: nowrap;
  filter: drop-shadow(0 1px 0 rgba(255,255,255,.92)) drop-shadow(0 2px 8px rgba(0,0,0,.55));
}
.brand-x {
  display: inline-block;
  font-size: 1.56em;
  font-weight: 950;
  line-height: .72;
  margin-right: 4px;
  transform: translateY(6px);
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: currentColor;
  color: #00b5e2;
  animation: xhb-x-solid-color-cycle 2.1s steps(1, end) infinite;
  text-shadow: none;
}
.brand-word {
  color: rgba(255,255,255,.96);
  text-shadow: 0 0 1px #fff, 0 2px 9px rgba(0,0,0,.75);
}
.brand::after {
  content: '';
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: -7px;
  height: 3px;
  border-radius: 99px;
  background: linear-gradient(90deg, #00b5e2 0 33.333%, #ef3340 33.333% 66.666%, #509e2f 66.666% 100%);
  transform-origin: left center;
  animation: xhb-logo-underline 2.8s ease-in-out infinite;
}
@keyframes xhb-flag-wave {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
@keyframes xhb-logo-underline {
  0%, 100% { transform: scaleX(.72); opacity: .65; }
  50% { transform: scaleX(1); opacity: 1; }
}
.main-nav { flex: 1; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0; line-height: 1.3; }
.main-nav li { list-style: none; display: flex; align-items: center; }
.main-nav a { display: flex; align-items: center; padding: 15px 15px 12px; color: #fff; font-size: 15px; font-weight: 500; }
.main-nav a:hover { color: var(--accent); }
.search-form { position: relative; width: min(300px, 24vw); display: flex; align-items: center; }
.search-form input { width: 100%; height: 38px; border: 1px solid #c7d4e2; border-radius: 5px; background: #fff; color: #000; padding: 0 46px 0 12px; font-size: 13px; }
.search-form button { position: absolute; right: 3px; top: 3px; height: 32px; min-width: 38px; border-radius: 4px; background: transparent; color: #000; font-weight: 700; cursor: pointer; }
.search-form button:hover { color: var(--accent); }
.desktop-auth { flex: 0 0 auto; min-width: 36px; display: flex; align-items: center; justify-content: center; gap: 8px; position: relative; }
.desktop-auth.is-member { flex-basis: 36px; width: 36px; min-width: 36px; gap: 0; }
.desktop-auth.is-guest { min-width: 170px; justify-content: flex-end; }
.auth-link { min-height: 32px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 4px; background: transparent; color: rgba(255,255,255,.82); padding: 0 10px; font-size: 13px; font-weight: 700; cursor: pointer; text-decoration: none; white-space: nowrap; }
.auth-link:hover { color: #fff; }
.auth-link-signup { background: #050505; color: #fff; padding: 0 15px; }
.auth-link-signup:hover { background: #ff5454; color: #fff; }
.auth-profile-menu { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex: 0 0 28px; }
.auth-profile-link { width: 28px; height: 28px; flex: 0 0 28px; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; border: 1px solid rgba(255,255,255,.45); border-radius: 50%; background: rgba(255,255,255,.10); box-shadow: 0 3px 10px rgba(0,0,0,.16); cursor: pointer; padding: 0; }
.auth-profile-link img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.auth-profile-link:hover { border-color: #fff; transform: translateY(-1px); }
.auth-profile-dropdown { display: none; position: absolute; right: 0; top: calc(100% + 10px); width: 178px; padding: 7px; border-radius: 7px; background: #111820; box-shadow: 0 14px 34px rgba(0,0,0,.28); opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .16s ease, transform .16s ease, visibility .16s ease; z-index: 1010; }
.auth-profile-menu:hover .auth-profile-dropdown,
.auth-profile-menu:focus-within .auth-profile-dropdown { display: block; opacity: 1; visibility: visible; transform: translateY(0); }
.auth-profile-dropdown::before { content: ''; position: absolute; right: 9px; top: -5px; width: 10px; height: 10px; background: #111820; transform: rotate(45deg); }
.auth-profile-dropdown a { position: relative; display: block; padding: 10px 11px; border-radius: 5px; color: #fff; font-size: 13px; font-weight: 800; white-space: nowrap; }
.auth-profile-dropdown a:hover { background: rgba(255,255,255,.08); color: var(--accent); }

.category-strip { background: var(--band); padding: 18px 0; }
.cat-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 15px; }
.cat-tile { min-height: 72px; overflow: hidden; border-radius: 5px; background: #fff; padding: 12px; display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; transition: background-color .2s ease, transform .2s ease; }
.cat-tile:hover { background: transparent; transform: translateY(-1px); }
.cat-tile strong { color: #000; font-size: 13px; font-weight: 700; line-height: 1.25; }
.cat-tile em { color: #838d98; font-size: 12px; font-style: normal; font-weight: 600; }

main.wrap { padding-top: 0; }
.spotlight { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin: 18px 0 0; }
.spot-card { position: relative; display: block; overflow: hidden; border-radius: 7px; background: #fff; aspect-ratio: 16 / 9; }
.spot-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.spot-card:hover img { transform: scale(1.03); }
.spot-card .spot-body { position: absolute; inset: auto 0 0; padding: 34px 10px 10px; color: #fff; background: linear-gradient(transparent, rgba(0,0,0,.72)); }
.spot-label { position: absolute; left: 5px; top: 5px; border-radius: 3px; background: rgba(0,0,0,.6); padding: 1px 6px; color: #fff; font-size: 13px; font-weight: 400; }
.spot-title { display: block; color: #fff; font-size: 14px; font-weight: 700; line-height: 1.25; }

.section-head { margin: 28px 0 8px; padding-top: 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; border: 0; }
h1, .archive-title { margin: 0 auto 0 0; padding: 0; color: #000; font-size: 30px; font-weight: 700; line-height: 1.2; }
.tabs { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.filter-tabs { position: relative; z-index: 5; }
.filter-button { height: 38px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; border-radius: 5px; background: var(--band); color: #222a32; padding: 12px 16px; font-size: 14px; font-weight: 600; cursor: pointer; }
button.filter-button { border: 0; font-family: inherit; }
.filter-button.active, .filter-dropdown.active > .filter-button, .filter-dropdown.is-open > .filter-button, .filter-button:hover { background: var(--accent); color: #fff; }
.filter-dropdown { position: relative; }
.chevron { width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); margin-top: -3px; }
.filter-menu { position: absolute; left: 0; top: calc(100% + 6px); width: 136px; padding: 8px 0; border-radius: 5px; background: rgba(222,226,231,.62); backdrop-filter: blur(10px); box-shadow: 0 10px 24px rgba(0,0,0,.12); opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .18s ease, transform .18s ease, visibility .18s ease; }
.filter-dropdown.is-open .filter-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.filter-menu a { display: block; padding: 11px 16px; color: #222; font-size: 13px; font-weight: 500; }
.filter-menu a:hover { background: rgba(255,255,255,.36); color: #000; }
.xhb-layout-toggle {
  width: 42px;
  padding: 0 !important;
  flex: 0 0 42px;
  background: var(--band) !important;
  color: #222a32 !important;
}
.xhb-layout-icon {
  position: relative;
  width: 24px;
  height: 24px;
  display: block;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='2.2' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='6.5' height='6.5' rx='1'/%3E%3Crect x='13.5' y='4' width='6.5' height='6.5' rx='1'/%3E%3Crect x='4' y='13.5' width='6.5' height='6.5' rx='1'/%3E%3Crect x='13.5' y='13.5' width='6.5' height='6.5' rx='1'/%3E%3C/g%3E%3C/svg%3E") center / 22px 22px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='2.2' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='6.5' height='6.5' rx='1'/%3E%3Crect x='13.5' y='4' width='6.5' height='6.5' rx='1'/%3E%3Crect x='4' y='13.5' width='6.5' height='6.5' rx='1'/%3E%3Crect x='13.5' y='13.5' width='6.5' height='6.5' rx='1'/%3E%3C/g%3E%3C/svg%3E") center / 22px 22px no-repeat;
}
.xhb-layout-toggle.is-single .xhb-layout-icon {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='2.2' stroke-linejoin='round'%3E%3Crect x='4' y='5' width='16' height='5' rx='1'/%3E%3Crect x='4' y='14' width='16' height='5' rx='1'/%3E%3C/g%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='2.2' stroke-linejoin='round'%3E%3Crect x='4' y='5' width='16' height='5' rx='1'/%3E%3Crect x='4' y='14' width='16' height='5' rx='1'/%3E%3C/g%3E%3C/svg%3E");
}
.xhb-layout-toggle:hover {
  background: #cfd6dd !important;
  color: #111820 !important;
}

.video-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 15px; margin: 0 auto 36px; }
.video-card { position: relative; min-width: 0; background: transparent; transition: transform .3s ease; }
.thumb { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 7px; background: transparent; margin-bottom: 3px; }
.thumb img, .thumb-preview { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease, opacity .3s ease; }
.thumb img { opacity: 1; visibility: visible; background: transparent; }
.thumb-preview { opacity: 0; z-index: 1; background: #000; }
.video-card:not(.preview-ready):not(.preview-active) .thumb-preview { opacity: 0 !important; visibility: hidden !important; }
.video-card:not(.preview-ready):not(.preview-active) .thumb img { opacity: 1 !important; visibility: visible !important; }
.video-card.preview-ready.preview-active .thumb-preview { opacity: 1; transform: scale(1.03); }
.video-card:hover .thumb img { transform: scale(1.03); }
.video-card.preview-ready.preview-active .thumb img { opacity: 0; }
.preview-sound { position: absolute; top: 7px; right: 7px; z-index: 4; width: 30px; height: 30px; border: 1px solid rgba(255,255,255,.28); border-radius: 6px; background: rgba(0,0,0,.68); color: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transform: translateY(-2px); transition: opacity .16s ease, transform .16s ease, visibility .16s ease, background .16s ease, border-color .16s ease; box-shadow: 0 2px 8px rgba(0,0,0,.24); }
.video-card.preview-ready.preview-active .preview-sound, .video-card:hover .preview-sound { opacity: 1; visibility: visible; transform: translateY(0); }
.preview-sound:hover, .preview-sound:focus-visible { background: rgba(255,84,84,.92); border-color: rgba(255,255,255,.62); outline: 0; }
.preview-sound.is-on { background: rgba(255,84,84,.92); border-color: rgba(255,255,255,.62); }
.preview-sound span { width: 18px; height: 18px; display: block; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9v6h4l5 4V5L8 9H4Z'/%3E%3Cpath d='M18 9l4 4m0-4-4 4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: contain; }
.preview-sound.is-on span { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9v6h4l5 4V5L8 9H4Z'/%3E%3Cpath d='M17 9.5a4 4 0 0 1 0 5'/%3E%3Cpath d='M20 7a8 8 0 0 1 0 10'/%3E%3C/svg%3E"); }
@media (max-width: 768px) {
  body.xhb-video-list-double .video-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  body.xhb-video-list-single .video-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .xhb-layout-toggle { display: inline-flex !important; }
  .preview-sound { width: 34px; height: 34px; top: 8px; right: 8px; border-radius: 7px; }
  .preview-sound span { width: 20px; height: 20px; }
}
@media (min-width: 769px) {
  .xhb-layout-toggle { display: none !important; }
}
.badge-row { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.badge { position: absolute; border-radius: 3px; background: rgba(0,0,0,.64); color: #fff; padding: 2px 6px; min-height: 20px; font-size: 11px; font-weight: 700; line-height: 1; display: inline-flex; align-items: center; gap: 4px; box-shadow: 0 1px 2px rgba(0,0,0,.18); }
.badge::before { content: ''; display: inline-block; width: 13px; height: 13px; flex: 0 0 13px; background-color: currentColor; background-repeat: no-repeat; background-position: center; background-size: contain; }
.badge.duration { top: 5px; left: 5px; }
.badge.duration::before { background-color: transparent; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='8' r='6'/%3E%3Cpath d='M8 4.8v3.6l2.5 1.4'/%3E%3C/svg%3E"); }
.badge.views { bottom: 5px; left: 5px; }
.badge.views::before { width: 14px; background-color: transparent; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 14' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.5 7s2.7-4.5 7.5-4.5S16.5 7 16.5 7 13.8 11.5 9 11.5 1.5 7 1.5 7Z'/%3E%3Ccircle cx='9' cy='7' r='2'/%3E%3C/svg%3E"); }
.badge.rating { bottom: 5px; right: 5px; color: #a2ff00; }
.badge.rating::before { background-color: transparent; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23a2ff00' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.2 7.1 7.4 2.5c.3-.6 1.2-.4 1.2.3v3h3.3c.9 0 1.5.8 1.3 1.7l-.9 4.2c-.2.8-.8 1.3-1.6 1.3H5.2V7.1Z'/%3E%3Cpath d='M2.5 7.2h2.7v5.8H2.5z'/%3E%3C/svg%3E"); }
.video-card:hover .badge { opacity: 0; transition: opacity .3s ease; }
.video-title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; min-height: 2.4em; max-height: 2.4em; margin-top: 5px; padding: 3px 7px; color: #000; font-size: 13px; font-weight: 500; line-height: 1.2; word-wrap: break-word; }
.video-title:hover { color: var(--accent); }
.meta { display: none; }

.pagination { margin: 20px 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.pagination .page-numbers { min-width: 50px; min-height: 50px; padding: 10px; display: inline-flex; align-items: center; justify-content: center; border-radius: 5px; background: var(--band); color: #000; font-size: 17px; font-weight: 700; }
.pagination .current, .pagination a:hover { background: var(--accent); color: #fff; }

.xhb-profile-page { max-width: 920px; margin: 28px auto 46px; }
.xhb-profile-head { display: flex; align-items: center; gap: 18px; margin-bottom: 14px; padding: 18px; border-radius: 7px; background: #fff; box-shadow: 0 10px 28px rgba(0,0,0,.06); }
.xhb-profile-photo { width: 84px; height: 84px; flex: 0 0 84px; border-radius: 50%; object-fit: cover; background: #dfe4ea; }
.xhb-profile-head h1 { margin: 0 0 4px; font-size: 28px; line-height: 1.15; }
.xhb-profile-head p { color: var(--muted); font-size: 13px; font-weight: 700; }
.xhb-profile-logout { min-height: 38px; display: inline-flex; align-items: center; justify-content: center; margin-left: auto; padding: 0 16px; border-radius: 5px; background: #111820; color: #fff; font-weight: 800; }
.xhb-profile-logout:hover { background: var(--accent); color: #fff; }
.xhb-profile-message { margin: 0 0 14px; padding: 12px 14px; border-radius: 6px; background: #dcefe5; color: #145534; font-weight: 800; }
.xhb-profile-message.is-error { background: #ffe4e4; color: #8e1010; }
.xhb-profile-form { padding: 18px; border-radius: 7px; background: #fff; box-shadow: 0 10px 28px rgba(0,0,0,.06); }
.xhb-profile-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.xhb-profile-field { display: grid; gap: 7px; color: #242b33; font-weight: 850; }
.xhb-profile-field span { font-size: 13px; }
.xhb-profile-field input,
.xhb-profile-field select,
.xhb-profile-field textarea { width: 100%; min-height: 44px; border: 1px solid #cbd5df; border-radius: 5px; background: #f8fafc; color: #111820; padding: 0 12px; font: inherit; font-weight: 700; outline: none; }
.xhb-profile-field textarea { min-height: 116px; padding: 11px 12px; resize: vertical; }
.xhb-profile-field input:focus,
.xhb-profile-field select:focus,
.xhb-profile-field textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(255,84,84,.15); background: #fff; }
.xhb-profile-avatar-field { margin-bottom: 14px; }
.xhb-profile-avatar-field input { padding: 10px 12px; }
.xhb-profile-submit { min-height: 44px; margin-top: 16px; padding: 0 22px; border-radius: 5px; background: var(--accent); color: #fff; font: inherit; font-weight: 900; cursor: pointer; }
.xhb-profile-submit:hover { background: #e43d3d; }
.xhb-empty-state { padding: 20px; border-radius: 7px; background: #fff; color: #242b33; font-weight: 850; box-shadow: 0 10px 28px rgba(0,0,0,.06); }
.xhb-account-list-page { width: 100%; max-width: 1366px; margin: 28px auto 46px; }
.xhb-account-list-page .xhb-profile-head { box-shadow: none; padding: 0 0 10px; border-bottom: 1px solid #cbd3dc; background: transparent; }
.xhb-account-video-grid.video-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.xhb-account-tabs { display: flex; align-items: center; gap: 8px; margin: 0 0 16px; }
.xhb-account-tabs a { min-height: 38px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 0 14px; border: 1px solid #c8d3df; border-radius: 6px; background: #fff; color: #596677; box-shadow: 0 8px 18px rgba(33,45,61,.08); font-size: 13px; font-weight: 850; }
.xhb-account-tabs a span { width: 17px; height: 17px; display: inline-block; background: currentColor; mask-repeat: no-repeat; mask-position: center; mask-size: contain; }
.xhb-account-tab-like span,
.xhb-account-tab-dislike span { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3v11Zm2 0V10.5L13.5 2c.9.1 1.8.7 2.2 1.5.3.7.3 1.5.1 2.2L15 9h4.8c1.3 0 2.3 1.1 2.1 2.4l-1.2 7.4A3.8 3.8 0 0 1 17 22H9Z'/%3E%3C/svg%3E"); }
.xhb-account-tab-dislike span { transform: rotate(180deg); }
.xhb-account-tab-like:hover,
.xhb-account-tab-like.is-active { border-color: rgba(111,191,0,.55); background: #f2ffe8; color: #3e9000; }
.xhb-account-tab-dislike:hover,
.xhb-account-tab-dislike.is-active { border-color: rgba(255,84,84,.55); background: #fff0f0; color: #d33f3f; }
.xhb-card-remove-favorite { position: absolute; left: 7px; top: 7px; z-index: 6; margin: 0; }
.xhb-card-remove-favorite button { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,.42); border-radius: 6px; background: rgba(17,24,32,.82); color: #fff; cursor: pointer; box-shadow: 0 6px 16px rgba(0,0,0,.2); }
.xhb-card-remove-favorite button::before,
.xhb-card-remove-favorite button::after { content: ''; position: absolute; width: 14px; height: 2px; border-radius: 99px; background: currentColor; }
.xhb-card-remove-favorite button::before { transform: rotate(45deg); }
.xhb-card-remove-favorite button::after { transform: rotate(-45deg); }
.xhb-card-remove-favorite button:hover { background: var(--accent); border-color: var(--accent); }

.single-layout { display: grid; grid-template-columns: minmax(0, 1fr) 25%; gap: 20px; padding-top: 30px; }
.player-box { overflow: hidden; border-radius: 7px; background: #000; }
.entry-content { margin-top: 10px; padding: 14px 0; color: #000; font-size: 14px; }
.sidebar-title { margin: 0 0 10px; padding-bottom: 5px; color: #000; font-size: 22px; font-weight: 700; }
.side-list { display: grid; gap: 12px; }
.side-item { display: grid; grid-template-columns: 120px 1fr; gap: 9px; color: #000; font-size: 13px; font-weight: 500; }
.side-item .thumb { aspect-ratio: 16 / 9; }

.site-footer { margin-top: 0; padding: 60px 0 20px; background: var(--band); color: #838d98; text-align: center; font-size: 11px; font-weight: 600; }
.site-footer a { color: var(--accent); }

@media (max-width: 1024px) {
  .video-grid { grid-template-columns: repeat(3, 1fr); }
  .xhb-account-video-grid.video-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cat-grid { grid-template-columns: repeat(4, 1fr); }
  .search-form { width: min(240px, 28vw); }
}
@media (max-width: 768px) {
  body { font-size: 14px; }
  .site-header { position: sticky; height: auto; }
  .topbar { min-height: 56px; flex-wrap: wrap; padding-bottom: 8px; }
  .site-logo { min-width: auto; }
  .brand { font-size: 24px; }
  .main-nav { order: 3; width: 100%; justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; }
  .main-nav a { white-space: nowrap; padding: 10px 12px; }
  .search-form { flex: 1; width: auto; }
  h1, .archive-title { font-size: 26px; }
  .spotlight { grid-template-columns: 1fr; }
  .video-grid { grid-template-columns: repeat(2, 1fr); }
  .xhb-account-video-grid.video-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cat-grid { grid-template-columns: repeat(2, 1fr); }
  .single-layout { grid-template-columns: 1fr; }
  .pagination { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; }
  .xhb-profile-page { margin: 16px auto 34px; }
  .xhb-profile-head { align-items: flex-start; gap: 12px; padding: 14px; }
  .xhb-profile-photo { width: 64px; height: 64px; flex-basis: 64px; }
  .xhb-profile-head h1 { font-size: 23px; }
  .xhb-profile-logout { min-height: 34px; padding: 0 12px; }
  .xhb-profile-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .wrap { padding: 0 8px; }
  .video-grid { gap: 12px 8px; }
  .xhb-account-list-page { margin-top: 16px; }
  .cat-grid { gap: 10px; }
  .tabs a { padding: 10px 12px; font-size: 13px; }
}


.mobile-icon, .mobile-actions, .mobile-search-panel, .mobile-menu-panel, .mobile-auth-panel { display: none; }

@media (max-width: 768px) {
  .site-header { height: 82px; padding: 0; background: var(--header); }
  .topbar { position: relative; min-height: 82px; display: grid; grid-template-columns: 54px minmax(0, 1fr) 96px; align-items: center; gap: 0; padding: 0; }
  .site-logo { min-width: 0; justify-self: center; }
  .brand { font-size: clamp(23px, 6.4vw, 34px); padding: 0; }
  .brand::before { inset: 0; }
  .brand::after { left: 0; right: 0; bottom: -8px; height: 3px; }
  .main-nav, .search-form, .desktop-auth { display: none; }
  .mobile-actions { display: flex; align-items: center; justify-content: flex-end; justify-self: end; width: 96px; }
  .mobile-icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 54px; border: 0; background: transparent; color: #fff; cursor: pointer; justify-self: center; }
  .mobile-icon span { position: relative; display: block; width: 28px; height: 24px; }
  .mobile-menu-toggle span, .mobile-menu-toggle span::before, .mobile-menu-toggle span::after { height: 4px; border-radius: 99px; background: #fff; }
  .mobile-menu-toggle span { top: 10px; }
  .mobile-menu-toggle span::before, .mobile-menu-toggle span::after { content: ''; position: absolute; left: 0; width: 28px; }
  .mobile-menu-toggle span::before { top: -10px; }
  .mobile-menu-toggle span::after { top: 10px; }
  .mobile-menu-open .mobile-menu-toggle span { background: transparent; top: 0; }
  .mobile-menu-open .mobile-menu-toggle span::before { top: 10px; transform: rotate(45deg); }
  .mobile-menu-open .mobile-menu-toggle span::after { top: 10px; transform: rotate(-45deg); }
  .mobile-search-toggle span,
  .mobile-auth-toggle span { width: 26px; height: 26px; background: #fff; border: 0; border-radius: 0; }
  .mobile-search-toggle span { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9.8 3a6.8 6.8 0 0 1 5.38 10.95l5.44 5.43-1.7 1.7-5.43-5.44A6.8 6.8 0 1 1 9.8 3Zm0 2.4a4.4 4.4 0 1 0 0 8.8 4.4 4.4 0 0 0 0-8.8Z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9.8 3a6.8 6.8 0 0 1 5.38 10.95l5.44 5.43-1.7 1.7-5.43-5.44A6.8 6.8 0 1 1 9.8 3Zm0 2.4a4.4 4.4 0 1 0 0 8.8 4.4 4.4 0 0 0 0-8.8Z'/%3E%3C/svg%3E") center / contain no-repeat; }
  .mobile-auth-toggle span { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 12a5 5 0 1 1 0-10 5 5 0 0 1 0 10Zm0-2.2a2.8 2.8 0 1 0 0-5.6 2.8 2.8 0 0 0 0 5.6ZM3.5 22a8.5 8.5 0 0 1 17 0h-2.4a6.1 6.1 0 0 0-12.2 0H3.5Z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 12a5 5 0 1 1 0-10 5 5 0 0 1 0 10Zm0-2.2a2.8 2.8 0 1 0 0-5.6 2.8 2.8 0 0 0 0 5.6ZM3.5 22a8.5 8.5 0 0 1 17 0h-2.4a6.1 6.1 0 0 0-12.2 0H3.5Z'/%3E%3C/svg%3E") center / contain no-repeat; }
  .mobile-search-open .mobile-search-toggle span { width: 28px; height: 28px; -webkit-mask: none; mask: none; background: transparent; }
  .mobile-search-open .mobile-search-toggle span::before, .mobile-search-open .mobile-search-toggle span::after { content: ''; position: absolute; left: 2px; top: 13px; width: 28px; height: 4px; border-radius: 99px; background: #fff; }
  .mobile-search-open .mobile-search-toggle span::before { transform: rotate(45deg); }
  .mobile-search-open .mobile-search-toggle span::after { right: auto; bottom: auto; transform: rotate(-45deg); }
  .mobile-auth-panel { position: absolute; right: 50px; top: calc(100% - 4px); z-index: 1002; width: 132px; background: #0a0a0a; box-shadow: 0 12px 24px rgba(0,0,0,.28); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .16s ease, transform .16s ease, visibility .16s ease; }
  .mobile-auth-open .mobile-auth-panel { display: block; opacity: 1; visibility: visible; transform: translateY(0); }
  .mobile-auth-panel .auth-link { width: 100%; min-height: 36px; border-radius: 0; color: #fff; background: #111; font-size: 13px; }
  .mobile-auth-panel .auth-link-signup { background: #ff5454; }
  .mobile-auth-panel .auth-profile-link { width: 34px; height: 34px; flex-basis: 34px; margin: 10px auto 8px; display: flex; }
  .mobile-auth-panel .auth-profile-menu { width: 100%; height: auto; }
  .mobile-auth-panel .auth-profile-dropdown { position: static; display: block; width: 100%; margin-top: 4px; padding: 0; background: transparent; box-shadow: none; opacity: 1; visibility: visible; transform: none; }
  .mobile-auth-panel .auth-profile-dropdown::before { display: none; }
  .mobile-auth-panel .auth-profile-dropdown a { text-align: center; border-radius: 0; }

  .mobile-search-panel { display: block; position: absolute; left: 0; right: 0; top: 100%; z-index: 1001; padding: 24px 14px; background: var(--bg); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .18s ease, transform .18s ease, visibility .18s ease; }
  .mobile-search-open .mobile-search-panel { opacity: 1; visibility: visible; transform: translateY(0); }
  .mobile-search-form { position: relative; display: block; }
  .mobile-search-form input { width: 100%; height: 62px; border: 2px solid #cbd7df; border-radius: 7px; background: #fff; color: #111; padding: 0 68px 0 20px; font-size: 21px; font-weight: 400; box-shadow: 0 12px 24px rgba(0,0,0,.13); }
  .mobile-search-form input::placeholder { color: #a9a9a9; }
  .mobile-search-form button { position: absolute; right: 17px; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; border: 0; background: transparent; }
  .mobile-search-form button span { position: absolute; left: 9px; top: 8px; width: 29px; height: 29px; border: 5px solid #000; border-radius: 50%; }
  .mobile-search-form button span::after { content: ''; position: absolute; width: 18px; height: 5px; right: -13px; bottom: -6px; border-radius: 99px; background: #000; transform: rotate(45deg); }

  .mobile-menu-panel { display: block; position: fixed; left: 0; right: 0; top: 82px; bottom: 0; z-index: 999; background: rgba(57,38,34,.88); backdrop-filter: blur(14px); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .18s ease, transform .18s ease, visibility .18s ease; overflow-y: auto; }
  .mobile-menu-open .mobile-menu-panel { opacity: 1; visibility: visible; transform: translateY(0); }
  .mobile-menu-list { display: grid; gap: 30px; padding: 28px 24px 52px; }
  .mobile-menu-list li { list-style: none; }
  .mobile-menu-list a { display: flex; align-items: center; gap: 18px; color: #fff; font-size: 22px; font-weight: 700; line-height: 1; }
  .mobile-menu-list a:hover { color: #fff; }
  .mi { position: relative; width: 30px; height: 30px; flex: 0 0 30px; color: var(--accent); }
  .mi::before, .mi::after { content: ''; position: absolute; box-sizing: border-box; }
  .mi-home::before { left: 5px; top: 13px; width: 26px; height: 20px; border: 3px solid currentColor; border-top: 0; border-radius: 3px; }
  .mi-home::after { left: 6px; top: 4px; width: 24px; height: 24px; border-left: 3px solid currentColor; border-top: 3px solid currentColor; transform: rotate(45deg); border-radius: 3px 0 0 0; }
  .mi-tv::before { left: 3px; top: 9px; width: 30px; height: 22px; border: 3px solid currentColor; border-radius: 5px; }
  .mi-tv::after { left: 12px; top: 2px; width: 12px; height: 10px; border-top: 3px solid currentColor; transform: rotate(35deg); }
  .mi-star::before { inset: 2px; background: currentColor; clip-path: polygon(50% 0,61% 35%,98% 35%,68% 56%,79% 91%,50% 69%,21% 91%,32% 56%,2% 35%,39% 35%); }
  .mi-star::after { inset: 8px; background: rgba(57,38,34,.88); clip-path: polygon(50% 0,61% 35%,98% 35%,68% 56%,79% 91%,50% 69%,21% 91%,32% 56%,2% 35%,39% 35%); }
  .mi-tag::before { left: 4px; top: 7px; width: 27px; height: 22px; border: 3px solid currentColor; border-radius: 5px; transform: rotate(45deg); }
  .mi-tag::after { left: 10px; top: 12px; width: 6px; height: 6px; border: 2px solid currentColor; border-radius: 50%; }
  .mi-folder::before { left: 2px; top: 11px; width: 32px; height: 22px; border: 3px solid currentColor; border-radius: 4px; }
  .mi-folder::after { left: 5px; top: 6px; width: 14px; height: 9px; border: 3px solid currentColor; border-bottom: 0; border-radius: 4px 4px 0 0; }
}

@media (max-width: 420px) {
  .site-header { height: 76px; }
  .topbar { min-height: 76px; grid-template-columns: 48px minmax(0, 1fr) 88px; }
  .mobile-actions { width: 88px; }
  .mobile-icon { width: 44px; height: 48px; }
  .brand { font-size: clamp(22px, 6.8vw, 30px); }
  .mobile-menu-panel { top: 76px; }
  .mobile-menu-list a { font-size: 21px; }
  .mobile-search-form input { height: 58px; font-size: 20px; }
}

/* Mobile header final sizing override */
@media (max-width: 900px) {
  .site-header { height: 76px !important; padding: 0 !important; }
  .topbar { min-height: 76px !important; grid-template-columns: 50px minmax(0, 1fr) 92px !important; padding: 0 !important; }
  .site-logo { min-width: 0 !important; justify-self: center !important; }
  .brand { font-size: clamp(22px, 5.8vw, 30px) !important; padding: 0 !important; line-height: 1 !important; }
  .brand::before { inset: 0 !important; }
  .brand::after { bottom: -7px !important; height: 3px !important; }
  .main-nav, .search-form, .desktop-auth { display: none !important; }
  .mobile-actions { display: flex !important; align-items: center !important; justify-content: flex-end !important; width: 92px !important; }
  .mobile-icon { width: 46px !important; height: 50px !important; }
  .mobile-icon span { width: 27px !important; height: 23px !important; }
  .mobile-menu-toggle span,
  .mobile-menu-toggle span::before,
  .mobile-menu-toggle span::after { height: 4px !important; width: 27px !important; }
  .mobile-menu-toggle span { top: 9px !important; }
  .mobile-menu-toggle span::before { top: -9px !important; }
  .mobile-menu-toggle span::after { top: 9px !important; }
  .mobile-menu-open .mobile-menu-toggle span::before,
  .mobile-menu-open .mobile-menu-toggle span::after { top: 9px !important; }
  .mobile-search-toggle span,
  .mobile-auth-toggle span { width: 25px !important; height: 25px !important; }
  .mobile-search-open .mobile-search-toggle span { width: 30px !important; height: 30px !important; }
  .mobile-search-open .mobile-search-toggle span::before,
  .mobile-search-open .mobile-search-toggle span::after { left: 2px !important; top: 14px !important; width: 28px !important; height: 4px !important; }
  .mobile-menu-panel { top: 76px !important; }
  .mobile-menu-list { gap: 24px !important; padding: 24px 22px 48px !important; }
  .mobile-menu-list a { gap: 16px !important; font-size: 20px !important; }
  .mi { width: 28px !important; height: 28px !important; flex-basis: 28px !important; }
  .mobile-search-panel { padding: 18px 12px !important; }
  .mobile-search-form input { height: 58px !important; font-size: 20px !important; padding-left: 18px !important; padding-right: 62px !important; }
}

@media (max-width: 420px) {
  .site-header { height: 70px !important; }
  .topbar { min-height: 70px !important; grid-template-columns: 46px minmax(0, 1fr) 84px !important; }
  .mobile-actions { width: 84px !important; }
  .mobile-icon { width: 42px !important; height: 46px !important; }
  .brand { font-size: clamp(20px, 6vw, 27px) !important; }
  .mobile-menu-panel { top: 70px !important; }
  .mobile-menu-list a { font-size: 19px !important; }
}

/* Footer legal links */
.site-footer { background: #120018; color: rgba(255,255,255,.58); }
.footer-inner { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.footer-copy { color: rgba(255,255,255,.62); }
.footer-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px 26px; font-size: 13px; font-weight: 700; }
.footer-nav a { color: rgba(255,255,255,.58); }
.footer-nav a:hover { color: #ff5454; }
.page .entry-content h1 { margin: 0 0 16px; color: #000; font-size: 30px; }
.page .entry-content h2 { margin: 22px 0 10px; color: #000; font-size: 20px; }
.page .entry-content p, .page .entry-content li { color: #222; font-size: 15px; line-height: 1.7; }
.page .entry-content ul { margin: 10px 0 10px 22px; }
@media (max-width: 768px) {
  .footer-nav { gap: 12px 18px; font-size: 12px; }
}

/* Legal pages */
.legal-page { max-width: 920px; margin: 32px auto 48px; padding: 28px; background: #fff; border-radius: 7px; box-shadow: 0 8px 22px rgba(0,0,0,.06); }
.legal-head h1 { margin: 0 0 18px; color: #000; font-size: 30px; line-height: 1.2; }
.legal-content h1 { display: none; }
.legal-content h2 { margin: 24px 0 10px; color: #000; font-size: 20px; }
.legal-content p, .legal-content li { color: #222; font-size: 15px; line-height: 1.75; }
.legal-content ul { margin: 10px 0 10px 22px; }
@media (max-width: 768px) {
  .legal-page { margin: 22px auto 36px; padding: 18px; }
  .legal-head h1 { font-size: 24px; }
}

/* Contact form plugin styling */
.legal-content form { display: grid; gap: 14px; margin-top: 20px; }
.legal-content label { display: grid; gap: 7px; color: #111; font-size: 14px; font-weight: 700; }
.legal-content input[type="text"],
.legal-content input[type="email"],
.legal-content input[type="number"],
.legal-content textarea { width: 100%; border: 1px solid #cbd7df; border-radius: 6px; background: #fff; color: #111; padding: 12px 13px; font: inherit; font-size: 15px; }
.legal-content textarea { min-height: 150px; resize: vertical; }
.legal-content input:focus,
.legal-content textarea:focus { outline: 2px solid rgba(255,84,84,.28); border-color: #ff5454; }
.legal-content button,
.legal-content input[type="submit"] { justify-self: start; min-height: 42px; border: 0; border-radius: 5px; background: #ff5454; color: #fff; padding: 0 18px; font-weight: 800; cursor: pointer; }
.legal-content button:hover,
.legal-content input[type="submit"]:hover { filter: brightness(.96); }
.legal-content .xhcf-flash,
.legal-content .contact-form-message { padding: 12px 14px; border-radius: 6px; background: #eef7ee; color: #1a5f25; }
@media (max-width: 768px) {
  .legal-content button,
  .legal-content input[type="submit"] { width: 100%; }
}

/* Contact form plugin override */
.legal-content .xh-contact-form-wrap { max-width: 100% !important; margin: 22px 0 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
.legal-content .xh-contact-form { display: grid !important; gap: 14px !important; }
.legal-content .xh-contact-form p { margin: 0 !important; }
.legal-content .xh-contact-form label { display: inline-block !important; margin: 0 0 7px !important; color: #111 !important; font-size: 14px !important; font-weight: 800 !important; }
.legal-content .xh-contact-form input[type="text"],
.legal-content .xh-contact-form input[type="email"],
.legal-content .xh-contact-form input[type="number"],
.legal-content .xh-contact-form textarea { width: 100% !important; max-width: none !important; background: #fff !important; color: #111 !important; border: 1px solid #cbd7df !important; border-radius: 6px !important; padding: 12px 13px !important; font: inherit !important; font-size: 15px !important; box-shadow: none !important; }
.legal-content .xh-contact-form input[type="number"] { max-width: 180px !important; }
.legal-content .xh-contact-form textarea { min-height: 150px !important; resize: vertical !important; }
.legal-content .xh-contact-form input:focus,
.legal-content .xh-contact-form textarea:focus { outline: 2px solid rgba(255,84,84,.28) !important; border-color: #ff5454 !important; }
.legal-content .xh-contact-form button[type="submit"] { min-height: 42px !important; border: 0 !important; border-radius: 5px !important; background: #ff5454 !important; color: #fff !important; padding: 0 18px !important; font-size: 15px !important; font-weight: 800 !important; box-shadow: none !important; }
.legal-content .xh-contact-form button[type="submit"]:hover { transform: none !important; box-shadow: none !important; filter: brightness(.96) !important; }


/* Home SEO text */
.home-seo-text { margin: 34px auto 0; padding: 24px 10px 28px; }
.home-seo-text h2 { margin: 0 0 10px; color: #000; font-size: 24px; line-height: 1.25; font-weight: 800; }
.home-seo-text p { max-width: 980px; margin: 0; color: #3b4148; font-size: 15px; line-height: 1.75; }
@media (max-width: 768px) {
  .home-seo-text { margin-top: 24px; padding-bottom: 22px; }
  .home-seo-text h2 { font-size: 21px; }
  .home-seo-text p { font-size: 14px; line-height: 1.65; }
}

/* 404 page */
.not-found-page { max-width: 760px; margin: 42px auto 30px; padding: 34px 24px; text-align: center; background: #fff; border-radius: 7px; box-shadow: 0 8px 22px rgba(0,0,0,.06); }
.not-found-code { display: inline-flex; align-items: center; justify-content: center; min-width: 104px; height: 56px; margin-bottom: 14px; border-radius: 7px; background: var(--header); color: #ff5454; font-size: 34px; line-height: 1; font-weight: 900; letter-spacing: 0; }
.not-found-page h1 { margin: 0 0 10px; color: #000; font-size: 30px; font-weight: 800; line-height: 1.2; }
.not-found-page p { max-width: 560px; margin: 0 auto 20px; color: #3b4148; font-size: 15px; line-height: 1.7; }
.not-found-search { position: relative; display: flex; width: min(100%, 520px); margin: 0 auto 16px; }
.not-found-search input { width: 100%; height: 46px; border: 1px solid #cbd7df; border-radius: 6px 0 0 6px; background: #fff; color: #111; padding: 0 13px; font-size: 15px; }
.not-found-search button { min-width: 104px; height: 46px; border: 0; border-radius: 0 6px 6px 0; background: #ff5454; color: #fff; font-weight: 800; cursor: pointer; }
.not-found-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.not-found-latest { margin-top: 28px; }
.not-found-latest h2 { margin: 0 auto 0 0; color: #000; font-size: 24px; font-weight: 800; }
@media (max-width: 768px) {
  .not-found-page { margin: 26px auto 22px; padding: 24px 16px; }
  .not-found-page h1 { font-size: 25px; }
  .not-found-search { display: grid; gap: 8px; }
  .not-found-search input, .not-found-search button { width: 100%; border-radius: 6px; }
}


/* Media Chrome video player */
.xhb-player-box { overflow: hidden; border-radius: 8px; background: #060404; border: 1px solid rgba(255,255,255,.06); box-shadow: 0 10px 30px rgba(0,0,0,.22); }
.xhb-media-player { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; background: #000; color: #fff; --media-primary-color: #ff5454; --media-secondary-color: #ffffff; --media-accent-color: #ff5454; --media-control-background: transparent; --media-control-hover-background: rgba(255,84,84,.18); --media-range-track-background: rgba(255,255,255,.28); --media-range-bar-color: #ff5454; --media-range-thumb-background: #ff5454; }
.xhb-media-player video { width: 100%; height: 100%; object-fit: contain; background: #000; }
.xhb-player-gradient { pointer-events: none; position: absolute; inset: auto 0 0; height: 38%; background: linear-gradient(transparent, rgba(0,0,0,.72)); z-index: 1; }
.xhb-center-play {
  --size: 104px;
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 3;
  width: var(--size);
  height: var(--size);
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 8px 16px rgba(0,0,0,.42));
  transition: transform .16s ease, opacity .16s ease;
}
.xhb-center-play[hidden] { display: none !important; }
.xhb-center-play::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: conic-gradient(from var(--xhb-play-spin, 0deg), #d90012, #0033a0, #f2a800, #d90012);
  animation: xhb-play-spin 2.4s linear infinite;
}
.xhb-center-play::after {
  content: "";
  position: absolute;
  inset: 9px;
  border-radius: inherit;
  background: linear-gradient(145deg, rgba(59,41,37,.94), rgba(18,0,24,.96));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}
.xhb-center-play-x {
  position: absolute;
  z-index: 2;
  left: 20px;
  top: 17px;
  color: #d90012;
  font-size: 76px;
  font-weight: 950;
  line-height: .9;
  text-shadow: 0 2px 0 rgba(255,255,255,.9), 0 4px 12px rgba(0,0,0,.5);
  animation: xhb-x-solid-color-cycle 2.1s steps(1, end) infinite;
}
.xhb-center-play-triangle {
  position: relative;
  z-index: 3;
  margin-left: 6px;
  transform: translateY(2px);
  width: 0;
  height: 0;
  border-top: 17px solid transparent;
  border-bottom: 17px solid transparent;
  border-left: 25px solid #fff;
  filter: drop-shadow(0 2px 5px rgba(0,0,0,.65));
}
.xhb-center-play:hover {
  transform: translate(-50%, -50%) scale(1.04);
}
@keyframes xhb-play-spin {
  to { --xhb-play-spin: 360deg; }
}
@property --xhb-play-spin {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
.xhb-control-bar { position: relative; z-index: 2; width: calc(100% - 20px); margin: 0 10px 10px; min-height: 46px; padding: 4px 7px; border-radius: 7px; background: rgba(18,0,24,.72); backdrop-filter: blur(10px); box-shadow: 0 6px 18px rgba(0,0,0,.24); }
.xhb-control-bar media-play-button,
.xhb-control-bar media-seek-backward-button,
.xhb-control-bar media-seek-forward-button,
.xhb-control-bar media-mute-button,
.xhb-control-bar media-playback-rate-button,
.xhb-control-bar media-pip-button,
.xhb-control-bar media-fullscreen-button { width: 36px; height: 36px; border-radius: 5px; color: #fff; }
.xhb-control-bar media-volume-range { max-width: 88px; }
.xhb-control-bar media-time-display { min-width: 78px; padding: 0 6px; color: rgba(255,255,255,.82); font-size: 12px; font-weight: 700; }
.xhb-control-bar media-time-range { flex: 1; min-width: 80px; }
.xhb-loading { --media-loading-indicator-icon-color: #ff5454; }
@media (max-width: 768px) {
  .xhb-player-box { border-radius: 7px; }
  .xhb-center-play { --size: 86px; }
  .xhb-center-play-x { left: 17px; top: 15px; font-size: 62px; }
  .xhb-center-play-triangle { margin-left: 5px; border-top-width: 14px; border-bottom-width: 14px; border-left-width: 21px; }
  .xhb-control-bar { width: calc(100% - 12px); margin: 0 6px 6px; min-height: 42px; padding: 3px 4px; }
  .xhb-control-bar media-seek-backward-button,
  .xhb-control-bar media-seek-forward-button,
  .xhb-control-bar media-pip-button,
  .xhb-control-bar media-volume-range { display: none; }
  .xhb-control-bar media-play-button,
  .xhb-control-bar media-mute-button,
  .xhb-control-bar media-playback-rate-button,
  .xhb-control-bar media-fullscreen-button { width: 34px; height: 34px; }
  .xhb-control-bar media-time-display { min-width: 64px; font-size: 11px; }
}


/* Player VTT thumbnail preview */
.xhb-control-bar media-time-range { --media-preview-thumbnail-max-width: 190px; --media-preview-thumbnail-max-height: 108px; --media-preview-thumbnail-border-radius: 6px; }
@media (max-width: 768px) {
  .xhb-control-bar media-time-range { --media-preview-thumbnail-max-width: 150px; --media-preview-thumbnail-max-height: 86px; }
}


/* VTT thumbnail sizing by orientation */
.xhb-media-player.vtt-landscape media-time-range { --media-preview-thumbnail-max-width: 260px; --media-preview-thumbnail-max-height: 146px; --media-preview-thumbnail-object-fit: contain; }
.xhb-media-player.vtt-portrait media-time-range { --media-preview-thumbnail-max-width: 150px; --media-preview-thumbnail-max-height: 268px; --media-preview-thumbnail-object-fit: contain; }
@media (max-width: 768px) {
  .xhb-media-player.vtt-landscape media-time-range { --media-preview-thumbnail-max-width: 210px; --media-preview-thumbnail-max-height: 118px; }
  .xhb-media-player.vtt-portrait media-time-range { --media-preview-thumbnail-max-width: 124px; --media-preview-thumbnail-max-height: 220px; }
}

/* Compact footer links */
.footer-nav { gap: 12px 18px; font-size: 12px; }
.footer-nav a { white-space: nowrap; }
@media (max-width: 768px) {
  .footer-nav { gap: 8px 12px; font-size: 11px; line-height: 1.4; }
}


/* Video detail page */
.video-detail-layout { grid-template-columns: minmax(0, 1fr) 320px; gap: 14px; align-items: start; }
.video-detail-main { min-width: 0; }
.video-detail-title { margin: 12px 0 8px; color: #000; font-size: 25px; font-weight: 900; line-height: 1.18; }
.video-detail-meta-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin: 8px 0 14px; color: #5f6b78; font-size: 13px; font-weight: 700; }
.vote-box { display: inline-flex; align-items: center; gap: 10px; }
.vote-form { display: inline-flex; align-items: center; gap: 8px; }
.vote-btn { display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent; color: #667485; font-weight: 800; cursor: pointer; padding: 0; }
.vote-btn span { width: 18px; height: 18px; background-color: currentColor; mask-repeat: no-repeat; mask-position: center; mask-size: contain; }
.vote-btn.like span { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3v11Zm2 0V10.5L13.5 2c.9.1 1.8.7 2.2 1.5.3.7.3 1.5.1 2.2L15 9h4.8c1.3 0 2.3 1.1 2.1 2.4l-1.2 7.4A3.8 3.8 0 0 1 17 22H9Z'/%3E%3C/svg%3E"); }
.vote-btn.dislike span { transform: rotate(180deg); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3v11Zm2 0V10.5L13.5 2c.9.1 1.8.7 2.2 1.5.3.7.3 1.5.1 2.2L15 9h4.8c1.3 0 2.3 1.1 2.1 2.4l-1.2 7.4A3.8 3.8 0 0 1 17 22H9Z'/%3E%3C/svg%3E"); }
.vote-btn.like:hover { color: #6fbf00; }
.vote-btn.dislike:hover { color: #ff5454; }
.vote-percent { color: #6fbf00; font-weight: 900; }
.video-stats { display: inline-flex; align-items: center; justify-content: center; gap: 18px; flex: 1; }
.stat { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.stat::before { content: ''; width: 14px; height: 14px; background: #8b99aa; mask-repeat: no-repeat; mask-position: center; mask-size: contain; }
.stat.duration::before { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm1 5h-2v6l5 3 1-1.7-4-2.3V7Z'/%3E%3C/svg%3E"); }
.stat.date::before { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 2h2v3h6V2h2v3h3v17H4V5h3V2Zm13 8H4v10h16V10Z'/%3E%3C/svg%3E"); }
.stat.views::before { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5c5 0 9 4.5 10 7-1 2.5-5 7-10 7S3 14.5 2 12c1-2.5 5-7 10-7Zm0 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8Z'/%3E%3C/svg%3E"); }
.video-actions { display: inline-flex; gap: 8px; }
.detail-action { min-height: 36px; display: inline-flex; align-items: center; border: 1px solid #c8d3df; border-radius: 5px; background: #fff; color: #5f6b78; padding: 0 14px; font-weight: 800; }
.detail-action:hover { border-color: #ff5454; color: #ff5454; }
.video-description { color: #2f363d; font-size: 14px; line-height: 1.7; margin: 12px 0 14px; }
.video-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 18px; }
.video-tags a { border: 1px solid #c8d3df; border-radius: 5px; background: #fff; color: #596677; padding: 7px 11px; font-size: 12px; font-weight: 800; }
.video-tags a:hover { border-color: #ff5454; color: #ff5454; }
.detail-comments { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; background: #fff; border-radius: 7px; padding: 22px; margin-top: 16px; }
.detail-comments h2 { color: #1d232a; font-size: 15px; font-weight: 900; margin: 0 0 14px; }
.detail-comments input, .detail-comments textarea { width: 100%; border: 1px solid #c8d3df; border-radius: 5px; background: #fff; padding: 11px 12px; font: inherit; font-size: 14px; margin-bottom: 10px; }
.detail-comments textarea { resize: vertical; min-height: 92px; }
.detail-comments .submit { border: 0; border-radius: 5px; background: #ff5454; color: #fff; padding: 11px 20px; font-weight: 900; cursor: pointer; }
.comments-list-box { border-left: 0; }
.comments-list-box h2 { border-bottom: 2px solid #b9c6d5; padding-bottom: 12px; }
.comments-list-box p { color: #667485; }
.related-rich-list { gap: 12px; }
.related-rich-list .video-grid { display: contents; }
.related-rich-list .video-card { margin-bottom: 10px; }
.video-detail-sidebar .video-title { font-size: 13px; padding-left: 0; }
.video-detail-sidebar .thumb { border-radius: 6px; }
.studio-title { margin-top: 22px; }
.studio-card a { display: block; overflow: hidden; border-radius: 7px; background: #fff; color: #000; }
.studio-card img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.studio-card strong { display: block; padding: 8px 8px 2px; font-size: 13px; }
.studio-card span { display: block; padding: 0 8px 9px; color: #778391; font-size: 12px; }
.detail-more-head h2 { color: #000; font-size: 24px; font-weight: 900; }
@media (max-width: 980px) {
  .video-detail-layout { grid-template-columns: 1fr; }
  .video-detail-sidebar { display: none; }
}
@media (max-width: 768px) {
  .video-detail-title { font-size: 21px; }
  .video-detail-meta-row { align-items: flex-start; }
  .video-stats { justify-content: flex-start; flex-wrap: wrap; gap: 10px 14px; flex-basis: 100%; }
  .video-actions { flex-basis: 100%; }
  .detail-comments { grid-template-columns: 1fr; padding: 16px; gap: 18px; }
}

/* Detail page layout hard fix */
.single-post main.wrap { max-width: 1366px; padding-left: 10px; padding-right: 10px; }
.single-post .site-header .wrap { max-width: 1366px; }
.video-detail-layout { width: min(100%, 1180px); margin: 24px auto 0; display: grid !important; grid-template-columns: minmax(0, 820px) 320px !important; gap: 18px !important; align-items: start; }
.video-detail-main { width: 100%; min-width: 0; }
.video-detail-sidebar { width: 320px; min-width: 0; }
.video-detail-main .xhb-player-box { width: 100%; }
.video-detail-main .xhb-media-player { width: 100%; aspect-ratio: 16 / 9; }
.video-detail-sidebar .related-rich-list { display: grid; gap: 12px; }
.video-detail-sidebar .related-rich-list .video-card { width: 100%; margin: 0; }
.video-detail-sidebar .related-rich-list .thumb { aspect-ratio: 16 / 9; }
.video-detail-sidebar .related-rich-list .video-title { min-height: auto; max-height: none; -webkit-line-clamp: 2; padding: 4px 0 0; font-size: 13px; line-height: 1.25; }
.video-detail-sidebar .sidebar-title { font-size: 24px; margin: 0 0 10px; }
.video-detail-title { border-bottom: 1px solid #cbd3dc; padding-bottom: 8px; }
.detail-comments { width: 100%; }
.detail-more-head, .detail-more-grid { width: min(100%, 1180px); margin-left: auto; margin-right: auto; }
@media (max-width: 1180px) {
  .video-detail-layout { grid-template-columns: minmax(0, 1fr) !important; width: min(100%, 860px); }
  .video-detail-sidebar { width: 100%; display: block !important; }
  .video-detail-sidebar .related-rich-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .studio-card { display: none; }
}
@media (max-width: 760px) {
  .single-post main.wrap { padding-left: 8px; padding-right: 8px; }
  .video-detail-layout { margin-top: 14px; width: 100%; }
  .video-detail-sidebar .related-rich-list { grid-template-columns: 1fr; }
  .video-detail-meta-row { display: grid; gap: 10px; }
  .single-post .video-detail-meta-row { flex-wrap: wrap !important; }
  .video-actions, .video-stats { width: 100%; }
  .single-post .video-stats { flex-wrap: wrap !important; }
  .video-actions { flex-wrap: nowrap !important; }
  .detail-action { flex: 1; justify-content: center; }
  .detail-comments { grid-template-columns: 1fr; }
}

/* Detail page hard reset: prevent narrow two-column squeeze */
.single-post .site-main,
.single-post .content-area {
  width: 100% !important;
  max-width: none !important;
}
.single-post .single-layout.video-detail-layout,
.single-post .video-detail-layout {
  box-sizing: border-box !important;
  width: min(100% - 32px, 900px) !important;
  max-width: 900px !important;
  margin: 22px auto 0 !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  align-items: start !important;
  gap: 22px !important;
}
.single-post .video-detail-main,
.single-post .video-detail-sidebar {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  float: none !important;
  clear: none !important;
}
.single-post .video-detail-sidebar {
  display: block !important;
}
.single-post .video-detail-sidebar .related-rich-list,
.single-post .video-detail-sidebar .side-list {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 14px !important;
}
.single-post .video-detail-sidebar .video-card {
  width: 100% !important;
  min-width: 0 !important;
}
.single-post .studio-card {
  display: none !important;
}
.single-post .detail-more-head,
.single-post .detail-more-grid {
  box-sizing: border-box !important;
  width: min(100% - 32px, 900px) !important;
  max-width: 900px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

@media (min-width: 1320px) {
  .single-post .single-layout.video-detail-layout,
  .single-post .video-detail-layout {
    width: min(100% - 32px, 1180px) !important;
    max-width: 1180px !important;
    grid-template-columns: minmax(0, 820px) 320px !important;
    gap: 18px !important;
  }
  .single-post .video-detail-sidebar {
    width: 320px !important;
  }
  .single-post .video-detail-sidebar .related-rich-list,
  .single-post .video-detail-sidebar .side-list {
    grid-template-columns: 1fr !important;
  }
  .single-post .studio-card {
    display: block !important;
  }
  .single-post .detail-more-head,
  .single-post .detail-more-grid {
    width: min(100% - 32px, 1180px) !important;
    max-width: 1180px !important;
  }
}

/* Final responsive detail meta layout */
body.single-post .video-detail-meta-row {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex-wrap: wrap !important;
  gap: 10px 12px !important;
  overflow: visible !important;
}
body.single-post .video-detail-meta-row .vote-box,
body.single-post .video-detail-meta-row .video-stats,
body.single-post .video-detail-meta-row .video-actions {
  flex: 0 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
}
body.single-post .video-detail-meta-row .video-stats {
  display: inline-flex !important;
  flex-wrap: nowrap !important;
  justify-content: flex-start !important;
  gap: 12px !important;
}
body.single-post .video-detail-meta-row .video-actions {
  display: inline-flex !important;
  flex-wrap: nowrap !important;
  justify-content: flex-start !important;
  gap: 8px !important;
}

@media (max-width: 1180px) {
  body.single-post .video-detail-meta-row .video-actions {
    flex-basis: 100% !important;
  }
}

@media (max-width: 520px) {
  body.single-post .video-detail-meta-row .video-stats {
    flex-basis: 100% !important;
    flex-wrap: wrap !important;
  }
  body.single-post .video-detail-meta-row .video-actions {
    display: grid !important;
    grid-template-columns: 40px minmax(0, 1fr) minmax(0, 1fr) !important;
    width: 100% !important;
  }
}

/* Detail meta final alignment */
body .video-detail-meta-row {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex-wrap: wrap !important;
  gap: 10px 12px !important;
}
body .video-detail-meta-row .vote-box,
body .video-detail-meta-row .video-stats,
body .video-detail-meta-row .video-actions {
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: none !important;
}
body .video-detail-meta-row .video-stats {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 12px !important;
}
body .video-detail-meta-row .video-actions {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex-wrap: nowrap !important;
  gap: 8px !important;
}

@media (max-width: 760px) {
  body .video-detail-meta-row .video-actions {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 40px minmax(0, 1fr) minmax(0, 1fr) !important;
  }
}

@media (max-width: 640px) {
  .single-post .single-layout.video-detail-layout,
  .single-post .video-detail-layout {
    width: calc(100% - 20px) !important;
    margin-top: 14px !important;
    gap: 16px !important;
  }
  .single-post .video-detail-sidebar .related-rich-list,
  .single-post .video-detail-sidebar .side-list {
    grid-template-columns: 1fr !important;
  }
  .single-post .video-detail-title {
    font-size: 20px !important;
    line-height: 1.18 !important;
  }
}

/* Detail page emergency lock for tablet and narrow desktop */
@media (max-width: 1319px) {
  .single-post .single-layout.video-detail-layout,
  .single-post .video-detail-layout {
    display: block !important;
    width: min(100% - 24px, 860px) !important;
    max-width: 860px !important;
    margin: 18px auto 0 !important;
  }
  .single-post .video-detail-main {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .single-post .video-detail-sidebar {
    display: none !important;
  }
  .single-post .detail-more-head,
  .single-post .detail-more-grid {
    width: min(100% - 24px, 860px) !important;
    max-width: 860px !important;
  }
}

/* Detail single column final: sidebar removed from template */
.single-layout,
.video-detail-layout,
.single-post .single-layout.video-detail-layout,
.single-post .video-detail-layout {
  display: block !important;
  grid-template-columns: 1fr !important;
  width: min(100% - 28px, 860px) !important;
  max-width: 860px !important;
  margin: 18px auto 0 !important;
  padding-top: 0 !important;
}
.video-detail-main,
.single-post .video-detail-main {
  width: 100% !important;
  max-width: 100% !important;
}
.video-detail-sidebar,
.single-post .video-detail-sidebar {
  display: none !important;
}
.detail-more-head,
.detail-more-grid,
.single-post .detail-more-head,
.single-post .detail-more-grid {
  width: min(100% - 28px, 860px) !important;
  max-width: 860px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
@media (max-width: 640px) {
  .single-layout,
  .video-detail-layout,
  .single-post .single-layout.video-detail-layout,
  .single-post .video-detail-layout,
  .detail-more-head,
  .detail-more-grid,
  .single-post .detail-more-head,
  .single-post .detail-more-grid {
    width: calc(100% - 20px) !important;
    max-width: none !important;
  }
}

/* Header/nav overflow and detail icon polish */
.topbar {
  overflow: visible !important;
  min-width: 0 !important;
}
.main-nav {
  min-width: 0 !important;
  flex-wrap: nowrap !important;
  overflow: hidden !important;
  height: 56px !important;
}
.main-nav a {
  white-space: nowrap !important;
  flex: 0 0 auto !important;
}
.search-form {
  flex: 0 0 auto !important;
}
.vote-btn span,
.stat::before {
  -webkit-mask-repeat: no-repeat !important;
  -webkit-mask-position: center !important;
  -webkit-mask-size: contain !important;
}
.vote-btn.like span {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3v11Zm2 0V10.5L13.5 2c.9.1 1.8.7 2.2 1.5.3.7.3 1.5.1 2.2L15 9h4.8c1.3 0 2.3 1.1 2.1 2.4l-1.2 7.4A3.8 3.8 0 0 1 17 22H9Z'/%3E%3C/svg%3E") !important;
}
.vote-btn.dislike span {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3v11Zm2 0V10.5L13.5 2c.9.1 1.8.7 2.2 1.5.3.7.3 1.5.1 2.2L15 9h4.8c1.3 0 2.3 1.1 2.1 2.4l-1.2 7.4A3.8 3.8 0 0 1 17 22H9Z'/%3E%3C/svg%3E") !important;
}
.stat.duration::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm1 5h-2v6l5 3 1-1.7-4-2.3V7Z'/%3E%3C/svg%3E") !important;
}
.stat.date::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 2h2v3h6V2h2v3h3v17H4V5h3V2Zm13 8H4v10h16V10Z'/%3E%3C/svg%3E") !important;
}
.stat.views::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5c5 0 9 4.5 10 7-1 2.5-5 7-10 7S3 14.5 2 12c1-2.5 5-7 10-7Zm0 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8Z'/%3E%3C/svg%3E") !important;
}

/* Clear voting CTA */
.single-post .vote-box {
  width: 100%;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}
.single-post .vote-form {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}
.single-post .vote-btn {
  min-height: 38px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  border: 1px solid rgba(111, 191, 0, .34) !important;
  border-radius: 6px !important;
  background: linear-gradient(180deg, #f8fff0 0%, #eef9df 100%) !important;
  color: #2f6f00 !important;
  padding: 0 11px !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.85) inset, 0 2px 8px rgba(75, 120, 0, .12) !important;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease !important;
}
.single-post .vote-btn.dislike {
  border-color: rgba(255, 84, 84, .28) !important;
  background: linear-gradient(180deg, #fff8f8 0%, #fff0f0 100%) !important;
  color: #a84040 !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.85) inset, 0 2px 8px rgba(160, 45, 45, .08) !important;
}
.single-post .vote-btn:hover,
.single-post .vote-btn:focus-visible {
  transform: translateY(-1px) !important;
  border-color: #6fbf00 !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 4px 13px rgba(75, 120, 0, .22) !important;
  outline: none !important;
}
.single-post .vote-btn.dislike:hover,
.single-post .vote-btn.dislike:focus-visible {
  border-color: #ff5454 !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 4px 13px rgba(160, 45, 45, .18) !important;
}
.single-post .vote-btn:active {
  transform: translateY(0) scale(.98) !important;
}
.single-post .vote-btn .vote-icon {
  width: 17px !important;
  height: 17px !important;
  flex: 0 0 17px !important;
  background-color: currentColor !important;
  -webkit-mask-repeat: no-repeat !important;
  -webkit-mask-position: center !important;
  -webkit-mask-size: contain !important;
  mask-repeat: no-repeat !important;
  mask-position: center !important;
  mask-size: contain !important;
}
.single-post .vote-btn span:not(.vote-icon) {
  -webkit-mask: none !important;
  mask: none !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  -webkit-mask-size: auto !important;
  mask-size: auto !important;
  background-color: transparent !important;
}
.single-post .vote-btn.like .vote-icon {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3v11Zm2 0V10.5L13.5 2c.9.1 1.8.7 2.2 1.5.3.7.3 1.5.1 2.2L15 9h4.8c1.3 0 2.3 1.1 2.1 2.4l-1.2 7.4A3.8 3.8 0 0 1 17 22H9Z'/%3E%3C/svg%3E") !important;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3v11Zm2 0V10.5L13.5 2c.9.1 1.8.7 2.2 1.5.3.7.3 1.5.1 2.2L15 9h4.8c1.3 0 2.3 1.1 2.1 2.4l-1.2 7.4A3.8 3.8 0 0 1 17 22H9Z'/%3E%3C/svg%3E") !important;
}
.single-post .vote-btn.dislike .vote-icon {
  transform: rotate(180deg) !important;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3v11Zm2 0V10.5L13.5 2c.9.1 1.8.7 2.2 1.5.3.7.3 1.5.1 2.2L15 9h4.8c1.3 0 2.3 1.1 2.1 2.4l-1.2 7.4A3.8 3.8 0 0 1 17 22H9Z'/%3E%3C/svg%3E") !important;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3v11Zm2 0V10.5L13.5 2c.9.1 1.8.7 2.2 1.5.3.7.3 1.5.1 2.2L15 9h4.8c1.3 0 2.3 1.1 2.1 2.4l-1.2 7.4A3.8 3.8 0 0 1 17 22H9Z'/%3E%3C/svg%3E") !important;
}
.single-post .vote-label {
  width: auto !important;
  height: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  color: currentColor !important;
  background: transparent !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  white-space: nowrap !important;
  line-height: 1 !important;
}
.single-post .vote-count {
  min-width: 20px !important;
  width: auto !important;
  min-height: 20px !important;
  height: 20px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.92) !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  color: inherit !important;
  padding: 0 6px !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}
.single-post .vote-percent {
  min-height: 32px !important;
  display: inline-flex !important;
  align-items: center !important;
  border-radius: 999px !important;
  background: #eef6e6 !important;
  color: #54a600 !important;
  padding: 0 10px !important;
  font-size: 13px !important;
  font-weight: 950 !important;
}

@media (max-width: 520px) {
  .single-post .vote-box,
  .single-post .vote-form {
    gap: 7px !important;
  }
  .single-post .vote-btn {
    min-height: 40px !important;
    padding: 0 10px !important;
    font-size: 12px !important;
  }
  .single-post .vote-percent {
    min-height: 30px !important;
    font-size: 12px !important;
  }
}

@media (max-width: 980px) {
  .site-header {
    height: 76px !important;
    padding: 0 !important;
  }
  .topbar {
    min-height: 76px !important;
    display: grid !important;
    grid-template-columns: 54px minmax(0, 1fr) 54px !important;
    gap: 10px !important;
    align-items: center !important;
  }
  .main-nav,
  .search-form {
    display: none !important;
  }
  .mobile-icon {
    display: inline-flex !important;
  }
  .mobile-menu-panel {
    top: 76px !important;
  }
}

@media (min-width: 981px) and (max-width: 1120px) {
  .site-logo { min-width: 185px !important; }
  .brand { font-size: 25px !important; }
  .main-nav a { padding-left: 10px !important; padding-right: 10px !important; font-size: 14px !important; }
  .search-form { width: 220px !important; }
  .desktop-auth.is-guest { min-width: 158px !important; }
  .desktop-auth.is-guest .auth-link { padding-left: 8px !important; padding-right: 8px !important; }
  .desktop-auth.is-guest .auth-link-signup { padding-left: 12px !important; padding-right: 12px !important; }
}

@media (min-width: 1121px) {
  .desktop-auth.is-guest + .mobile-actions,
  .desktop-auth.is-member + .mobile-actions {
    display: none;
  }
}

/* Detail page wide canvas */
.single-post main.wrap {
  max-width: 1180px !important;
  width: 100% !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
}
.single-post .single-layout.video-detail-layout,
.single-post .video-detail-layout {
  width: 100% !important;
  max-width: 1040px !important;
  margin: 22px auto 0 !important;
}
.single-post .player-box,
.single-post .xhb-player-box,
.single-post .xhb-media-player {
  width: 100% !important;
}
.single-post .detail-more-head,
.single-post .detail-more-grid {
  width: 100% !important;
  max-width: 1040px !important;
}

@media (min-width: 1200px) {
  .single-post main.wrap {
    max-width: 1240px !important;
  }
  .single-post .single-layout.video-detail-layout,
  .single-post .video-detail-layout,
  .single-post .detail-more-head,
  .single-post .detail-more-grid {
    max-width: 1120px !important;
  }
}

@media (max-width: 640px) {
  .single-post main.wrap {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  .single-post .single-layout.video-detail-layout,
  .single-post .video-detail-layout,
  .single-post .detail-more-head,
  .single-post .detail-more-grid {
    max-width: none !important;
  }
}

/* Detail page match homepage width */
body.single-post {
  background: var(--bg) !important;
}
body.single-post .site-header {
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  max-width: none !important;
}
body.single-post .site-header .wrap,
body.single-post main.wrap {
  width: 100% !important;
  max-width: 1366px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 30px !important;
  padding-right: 30px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
body.single-post .single-layout.video-detail-layout,
body.single-post .video-detail-layout {
  width: 100% !important;
  max-width: 1366px !important;
  margin: 24px auto 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
body.single-post .video-detail-main {
  width: 100% !important;
  max-width: 100% !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
body.single-post .xhb-player-box {
  width: 100% !important;
  max-width: 100% !important;
}
body.single-post .detail-more-head,
body.single-post .detail-more-grid {
  width: 100% !important;
  max-width: 1366px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
body.single-post .detail-more-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

@media (max-width: 980px) {
  body.single-post .site-header .wrap,
  body.single-post main.wrap {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
  body.single-post .detail-more-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 560px) {
  body.single-post .site-header .wrap,
  body.single-post main.wrap {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  body.single-post .detail-more-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Compact filter labels on small screens */
@media (max-width: 560px) {
  .filter-button {
    height: 34px !important;
    padding: 8px 10px !important;
    font-size: 12px !important;
    gap: 5px !important;
  }
  .tabs {
    gap: 4px !important;
  }
  .filter-menu {
    width: 116px !important;
  }
}
/* Footer SEO text and legal links polish */
.site-footer {
  margin-top: 34px !important;
  padding: 26px 0 20px !important;
  background: #120018 !important;
  color: rgba(255,255,255,.66) !important;
}
.site-footer .home-seo-text {
  margin: 0 auto 22px !important;
  padding: 0 30px 22px !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
  text-align: left !important;
}
.site-footer .home-seo-text h2 {
  max-width: 1040px !important;
  margin: 0 auto 8px !important;
  color: #fff !important;
  font-size: 20px !important;
  line-height: 1.25 !important;
  font-weight: 850 !important;
}
.site-footer .home-seo-text p {
  max-width: 1040px !important;
  margin: 0 auto !important;
  color: rgba(255,255,255,.68) !important;
  font-size: 13px !important;
  line-height: 1.65 !important;
}
.site-footer .footer-nav,
.site-footer nav.footer-nav {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 10px 18px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}
.site-footer .footer-nav a,
.site-footer nav.footer-nav a {
  display: inline !important;
  width: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: rgba(255,255,255,.62) !important;
  font-size: 12px !important;
  font-weight: 750 !important;
  line-height: 1.4 !important;
  white-space: nowrap !important;
  text-decoration: none !important;
}
.site-footer .footer-nav a:hover,
.site-footer nav.footer-nav a:hover {
  color: #ff5454 !important;
}
.site-footer .footer-copy {
  color: rgba(255,255,255,.46) !important;
  font-size: 11px !important;
}
@media (max-width: 640px) {
  .site-footer {
    margin-top: 24px !important;
    padding-top: 20px !important;
  }
  .site-footer .home-seo-text {
    padding: 0 14px 18px !important;
    text-align: left !important;
  }
  .site-footer .home-seo-text h2 {
    font-size: 17px !important;
  }
  .site-footer .home-seo-text p {
    font-size: 12px !important;
    line-height: 1.55 !important;
  }
  .site-footer .footer-nav,
  .site-footer nav.footer-nav {
    gap: 8px 12px !important;
  }
  .site-footer .footer-nav a,
  .site-footer nav.footer-nav a {
    font-size: 11px !important;
  }
}
/* Center pagination on mobile */
.pagination {
  justify-content: center !important;
  text-align: center !important;
}
@media (max-width: 760px) {
  .pagination {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    overflow-x: visible !important;
    gap: 6px !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
  .pagination .page-numbers {
    flex: 0 0 auto !important;
  }
}


@keyframes xhb-x-solid-color-cycle {
  0%, 32% { color: #00b5e2; }
  33%, 65% { color: #ef3340; }
  66%, 100% { color: #509e2f; }
}


/* x-logo-desktop-underline-restore-20260728 */
@media (min-width: 769px) {
  .brand::after {
    content: '';
    display: block;
    left: 10px;
    right: 10px;
    bottom: -8px;
    height: 3px;
    background: linear-gradient(90deg, #00b5e2 0 33.333%, #ef3340 33.333% 66.666%, #509e2f 66.666% 100%);
    animation: xhb-logo-underline 2.8s ease-in-out infinite;
  }
}


/* x-logo-spacing-underline-polish-20260728 */
.site-logo,
.topbar,
.brand {
  overflow: visible !important;
}
.brand {
  gap: 0 !important;
  padding-left: 8px !important;
  padding-right: 8px !important;
}
.brand-x {
  margin-right: -1px !important;
  transform: translateY(6px) !important;
}
.brand::after {
  left: 9px !important;
  right: 8px !important;
  bottom: -5px !important;
  height: 3px !important;
  z-index: 2 !important;
}
@media (min-width: 769px) {
  .brand::after {
    left: 9px !important;
    right: 8px !important;
    bottom: -5px !important;
    height: 3px !important;
  }
}
@media (max-width: 768px) {
  .brand-x {
    margin-right: 0 !important;
  }
  .brand::after {
    bottom: -7px !important;
  }
}

/* mobile-logo-true-center-20260801 */
@media (max-width: 768px) {
  .site-header .topbar {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    min-height: 76px !important;
    padding: 0 58px !important;
  }
  .site-header .brand {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    font-size: clamp(24px, 7vw, 31px) !important;
    padding: 0 !important;
    z-index: 2 !important;
  }
  .site-header .brand-x {
    transform: translateY(6px) !important;
  }
  .site-header .mobile-menu-toggle {
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 1005 !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
  }
  .site-header .mobile-actions {
    position: absolute !important;
    right: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: auto !important;
    z-index: 3 !important;
  }
  .mobile-menu-panel {
    z-index: 1004 !important;
    pointer-events: auto !important;
  }
  body.mobile-menu-open .mobile-menu-panel {
    display: block !important;
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    top: 76px !important;
    bottom: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    z-index: 1004 !important;
    background: rgba(57,38,34,.92) !important;
  }
  .site-header .mobile-auth-toggle {
    position: relative !important;
  }
  body:not(.logged-in).xhb-show-auth-badge:not(.xhb-auth-badge-seen) .mobile-auth-toggle::after {
    content: '1';
    position: absolute;
    right: -2px;
    top: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    padding: 0;
    border-radius: 999px;
    background: #ff4f55;
    color: #fff;
    border: 1px solid rgba(255,255,255,.92);
    font-size: 9px;
    font-weight: 900;
    line-height: 1;
    box-shadow: 0 2px 7px rgba(0,0,0,.45);
    pointer-events: none;
  }
}


/* category-visible-description-20260728 */
.section-title-block {
  flex: 1 1 520px;
  min-width: 0;
}
.section-title-block h1 {
  margin-bottom: 4px;
}
.category-page-description {
  max-width: 760px;
  margin: 0;
  color: #56616d;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.45;
}

@media (max-width: 420px) {
  body.mobile-menu-open .mobile-menu-panel {
    top: 70px !important;
  }
}
@media (max-width: 760px) {
  .section-title-block {
    flex-basis: 100%;
  }
  .category-page-description {
    max-width: none;
    font-size: 13px;
    line-height: 1.4;
  }
}

/* Detail action buttons and registration download gate */
.single-post .video-detail-meta-row {
  justify-content: flex-start !important;
  align-items: center !important;
  gap: 12px 14px !important;
  flex-wrap: nowrap !important;
}
.single-post .vote-box {
  flex: 0 0 auto !important;
}
.single-post .video-stats {
  flex: 0 0 auto !important;
  justify-content: flex-start !important;
  gap: 14px !important;
}
.video-actions {
  display: inline-flex !important;
  align-items: center !important;
  gap: 9px !important;
  flex: 0 0 auto !important;
  flex-wrap: nowrap !important;
}
.detail-action {
  min-height: 38px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  border: 1px solid rgba(151, 166, 184, .44) !important;
  border-radius: 6px !important;
  padding: 8px 14px !important;
  color: #334155 !important;
  background: #fff !important;
  box-shadow: 0 8px 18px rgba(33, 45, 61, .08) !important;
  font-size: 13px !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease, color .16s ease !important;
}
button.detail-action {
  font-family: inherit !important;
}
.favorite-form {
  margin: 0 !important;
  display: inline-flex !important;
}
.detail-action:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 12px 24px rgba(33, 45, 61, .13) !important;
}
.detail-action-icon {
  width: 18px !important;
  height: 18px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 18px !important;
}
.detail-action-icon svg {
  width: 18px !important;
  height: 18px !important;
  display: block !important;
  fill: currentColor !important;
}
.detail-action-favorite {
  width: 40px !important;
  min-width: 40px !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.detail-action-download {
  border-color: rgba(255, 84, 84, .72) !important;
  color: #fff !important;
  background: linear-gradient(135deg, #ff5454 0%, #ec2f45 52%, #d90012 100%) !important;
  box-shadow: 0 10px 22px rgba(255, 84, 84, .27) !important;
}
.detail-action-download:hover {
  color: #fff !important;
  box-shadow: 0 14px 28px rgba(255, 84, 84, .35) !important;
}
.detail-action-report {
  color: #5f6b78 !important;
}
.detail-action-report:hover {
  border-color: rgba(255, 84, 84, .55) !important;
  color: #ff5454 !important;
  background: #fff7f7 !important;
}
.detail-action-favorite {
  color: #5f6b78 !important;
  background: #fff !important;
}
.detail-action-favorite:hover,
.detail-action-favorite.is-active {
  border-color: rgba(255, 84, 84, .55) !important;
  color: #ff5454 !important;
  background: #fff7f7 !important;
}
body.xhb-modal-open {
  overflow: hidden !important;
}
.xhb-register-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
}
.xhb-register-modal.is-open {
  display: flex;
}
.xhb-register-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(18, 0, 24, .68);
  backdrop-filter: blur(8px);
}
.xhb-register-dialog {
  position: relative;
  z-index: 1;
  width: min(920px, 100%);
  height: min(620px, calc(100vh - 36px));
  max-height: min(620px, calc(100vh - 36px));
  display: grid;
  grid-template-columns: minmax(250px, .75fr) minmax(320px, 1.25fr);
  overflow: hidden;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .34);
}
.xhb-register-copy {
  padding: 28px;
  background: linear-gradient(145deg, #3a2521 0%, #241316 100%);
  color: #fff;
}
.xhb-register-copy h2 {
  margin: 0 0 10px;
  color: #fff;
  font-size: 23px;
  line-height: 1.18;
}
.xhb-register-copy p {
  margin: 0 0 18px;
  color: rgba(255, 255, 255, .72);
  font-size: 14px;
  line-height: 1.55;
}
.xhb-register-links {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.xhb-register-primary,
.xhb-register-secondary {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  padding: 9px 14px;
  font-size: 13px;
  font-weight: 850;
  text-decoration: none;
}
.xhb-register-primary {
  background: #ff5454;
  color: #fff;
  border: 1px solid rgba(255,84,84,.95);
  box-shadow: 0 10px 22px rgba(255,84,84,.22);
}
.xhb-register-secondary {
  border: 1px solid rgba(255,255,255,.44);
  background: rgba(18, 0, 24, .62);
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}
.xhb-register-secondary:hover,
.xhb-register-secondary:focus {
  border-color: rgba(255,84,84,.86);
  background: rgba(255,84,84,.16);
  color: #fff;
}
.xhb-register-frame {
  width: 100%;
  height: 100%;
  min-height: 0;
  border: 0;
  background: #f6f7f7;
}
.xhb-register-close {
  position: absolute;
  right: 12px;
  top: 12px;
  z-index: 2;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: rgba(18, 0, 24, .78);
  cursor: pointer;
}
.xhb-register-close::before,
.xhb-register-close::after {
  content: '';
  position: absolute;
  left: 9px;
  top: 16px;
  width: 16px;
  height: 2px;
  border-radius: 99px;
  background: #fff;
}
.xhb-register-close::before {
  transform: rotate(45deg);
}
.xhb-register-close::after {
  transform: rotate(-45deg);
}
@media (max-width: 760px) {
  .video-actions {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
  }
  .detail-action {
    width: 100% !important;
    min-height: 42px !important;
    padding: 9px 10px !important;
  }
  .xhb-register-dialog {
    width: calc(100vw - 16px);
    grid-template-columns: 1fr;
    height: auto;
    max-height: min(760px, calc(100vh - 18px));
    max-height: min(760px, calc(100dvh - 18px));
    overflow-y: auto;
    background: linear-gradient(145deg, #3a2521 0%, #120018 100%);
  }
  .xhb-register-copy {
    padding: 16px 18px 12px;
  }
  .xhb-register-copy h2 {
    padding-right: 36px;
    font-size: 19px;
  }
  .xhb-register-copy p {
    margin-bottom: 10px;
  }
  .xhb-register-frame {
    display: block;
    height: min(470px, calc(100vh - 182px));
    height: min(470px, calc(100dvh - 182px));
    min-height: 390px;
    flex: 1 1 auto;
    background: transparent;
  }
}
@media (max-width: 420px) {
  .xhb-register-modal {
    padding: 8px;
  }
  .xhb-register-copy {
    padding: 14px 14px 10px;
  }
  .xhb-register-copy h2 {
    font-size: 17px;
    margin-bottom: 6px;
  }
  .xhb-register-copy p {
    font-size: 12px;
    line-height: 1.36;
    margin-bottom: 10px;
  }
  .xhb-register-links {
    gap: 8px;
  }
  .xhb-register-primary,
  .xhb-register-secondary {
    min-height: 34px;
    padding: 7px 11px;
    font-size: 12px;
  }
  .xhb-register-frame {
    height: min(452px, calc(100vh - 166px));
    height: min(452px, calc(100dvh - 166px));
    min-height: 380px;
  }
}

/* MalayPornnew wordmark */
:root { --header: #111923; }
.site-header { background: #111923; border-bottom-color: #293746; }
.site-footer { background: #111923 !important; }
.site-footer .footer-brand { display: block; width: 260px; max-width: 80%; line-height: 0; }
.site-footer .footer-brand img { display: block; width: 100%; height: auto; filter: brightness(0) invert(.68); }
.site-footer .footer-brand:focus-visible { outline: 2px solid #5099f1; outline-offset: 6px; border-radius: 4px; }
.site-footer .footer-nav a:hover { color: #78b4ff !important; }
.site-header .brand { display:inline-flex; flex:0 1 auto; align-items:center; padding:0 !important; line-height:1 !important; }
.site-header .brand::before,.site-header .brand::after { display:none !important; }
.site-header .brand-logo-image { display:block; width:280px; max-width:100%; line-height:0; }
.site-header .brand-logo-image img { display:block; width:100%; height:auto; max-width:100%; object-fit:contain; }
@media(max-width:760px) { .site-header .brand-logo-image { width:clamp(170px,52vw,240px); } }