.external-player{position:relative;aspect-ratio:16/9;background:#000;border-radius:16px;overflow:hidden}
.external-player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.external-player>video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000}
.external-player>.big-play{position:absolute;z-index:2;left:50%;top:50%;transform:translate(-50%,-50%)}
.external-player.playing>.big-play{opacity:.28}

/* Mobile navigation: keep the full category list reachable on small screens. */
.drawer{
  height:100vh;
  height:100dvh;
  overflow-y:auto;
  overflow-x:hidden;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  padding-bottom:calc(32px + env(safe-area-inset-bottom));
}
.drawer nav{padding-bottom:40px}
.drawer-close{position:sticky;top:0;z-index:2;background:#101113;border-radius:50%}
body:has(.drawer.open){overflow:hidden}

/* Dense, responsive video catalogue inspired by established tube layouts. */
html,body{max-width:100%;overflow-x:hidden}
.video-grid{width:100%;min-width:0}
.video-card{min-width:0;max-width:100%;overflow:hidden}
.video-card>a{display:block;min-width:0}
.video-card h3{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;overflow-wrap:anywhere;line-height:1.25;min-height:2.5em}
.video-card .tags{max-width:100%;overflow:hidden;text-overflow:ellipsis}
.thumb{display:block;width:100%;max-width:100%;min-width:0}
.watch{width:100%;min-width:0;max-width:1100px;overflow:hidden}
.watch h1{font-size:clamp(1.15rem,4vw,2rem);overflow-wrap:anywhere;line-height:1.2}
.external-player{display:block;width:100%;max-width:100%;min-width:0;aspect-ratio:16/9}
.external-player iframe{display:block;width:100%!important;max-width:100%!important;height:100%!important}
.player:fullscreen,.player.is-fullscreen{width:100vw!important;height:100vh!important;max-width:none!important;border-radius:0!important;background:#000}
.player:fullscreen>video,.player.is-fullscreen>video{width:100%!important;height:100%!important;object-fit:contain!important}
.player:-webkit-full-screen{width:100vw!important;height:100vh!important;background:#000}
.player:-webkit-full-screen>video{width:100%!important;height:100%!important;object-fit:contain!important}
.pagination{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px;margin:34px auto 8px;padding:0 8px}
.pagination a,.pagination span{display:grid;place-items:center;min-width:42px;height:42px;padding:0 12px;border:1px solid #34363a;border-radius:9px;color:#f5f5f5;background:#151618;text-decoration:none;font-weight:700}
.pagination a:hover{border-color:#ff861f;color:#ff861f}
.pagination a.active{border-color:#ff861f;background:linear-gradient(135deg,#ff9d2f,#ff6517);color:#080808;pointer-events:none}
.pagination span{min-width:auto;border:0;background:transparent;color:#8f9298;padding:0 3px}
.pagination .page-arrow{font-size:1.6rem;line-height:1}
.seo-intro{margin:0 0 22px;padding:22px;border:1px solid #27292d;border-radius:14px;background:linear-gradient(135deg,#17120e,#111214)}
.seo-intro h1{margin:0 0 8px;font-size:clamp(1.35rem,3vw,2rem)}
.seo-intro p{margin:0;max-width:850px;color:#b8bbc1;line-height:1.6}
.breadcrumbs{margin:0 0 18px;color:#92959b;font-size:.9rem}.breadcrumbs a{color:#ff861f;text-decoration:none}.breadcrumbs span{color:#d7d8db}
.empty-state{max-width:720px;margin:34px auto;padding:42px 24px;text-align:center;border:1px solid #292b2f;border-radius:18px;background:linear-gradient(145deg,#17181b,#0e0f11);box-shadow:0 18px 55px rgba(0,0,0,.28)}
.empty-state>span{display:grid;place-items:center;width:62px;height:62px;margin:0 auto 18px;border-radius:50%;background:linear-gradient(135deg,#ff9d2f,#ff6517);color:#090909;font-size:1.4rem}
.empty-state h2{margin:0 0 10px;font-size:clamp(1.25rem,4vw,1.8rem)}
.empty-state p{max-width:560px;margin:0 auto 22px;color:#b8bbc1;line-height:1.6}
.upload-progress{margin:18px 0;padding:16px;border:1px solid #303238;border-radius:12px;background:#101114}
.upload-progress>div{display:flex;justify-content:space-between;gap:12px;margin-bottom:10px;color:#f2f2f2}
.upload-progress progress{display:block;width:100%;height:13px;border:0;border-radius:999px;overflow:hidden;background:#292b2f}
.upload-progress progress::-webkit-progress-bar{background:#292b2f;border-radius:999px}
.upload-progress progress::-webkit-progress-value{background:linear-gradient(90deg,#ff9d2f,#ff6517);border-radius:999px;transition:width .2s ease}
.upload-progress progress::-moz-progress-bar{background:linear-gradient(90deg,#ff9d2f,#ff6517);border-radius:999px}
.upload-progress small{display:block;margin-top:8px;color:#999da4}
[data-upload-button]:disabled{opacity:.55;cursor:wait}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}

@media(max-width:520px){
  .video-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 8px}
  .video-card h3{font-size:.82rem;margin-top:7px}
  .video-card .tags{font-size:.68rem;padding:2px 6px}
  .thumb{border-radius:7px}
  .watch{max-width:100%}
  .external-player{border-radius:8px}
  .actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .actions>*{width:100%;min-width:0}
  .pagination{gap:5px;margin-top:26px;padding:0}
  .pagination a,.pagination span{min-width:36px;height:36px;padding:0 9px;border-radius:7px;font-size:.86rem}
}