/* ── Base font ───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: hidden; }
body { margin: 0; overflow-x: hidden; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; -webkit-font-smoothing: antialiased; }

/* ── vidosnice color palette (dark-only — no light theme) ─── */
:root {
  --ph-bg:       #0a0a0a;
  --ph-bg2:      #161616;
  --ph-bg3:      #202020;
  --ph-border:   #2a2a2a;
  --ph-text:     #ede8e4;
  --ph-text2:    #9a908b;
  --ph-dim2:     #6b615d;
  --ph-orange:   #e87722;
  --ph-orange2:  #fb9448;
  --ph-red:      #e5001a;
  --ph-header:   #000000;
  --ph-display:  'Archivo Black', 'Inter', sans-serif;
}

/* Базовые цвета страницы */
body { background: var(--ph-bg); color: var(--ph-text); }

/* Карточки и блоки */
.ph-card  { background: var(--ph-bg2); border: 1px solid var(--ph-border); border-radius: 4px; }
.ph-card2 { background: var(--ph-bg3); border-radius: 4px; }

/* Акцент */
.ph-orange { color: var(--ph-orange); }
.ph-red    { color: var(--ph-red); }
.bg-ph-orange { background: var(--ph-orange); }
.bg-ph-red    { background: var(--ph-red); }
.border-ph-orange { border-color: var(--ph-orange); }

/* ── Scrollbar ────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #141414; }
::-webkit-scrollbar-thumb { background: #444; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #666; }

.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }

/* ── Typography ──────────────────────────────────────────── */
.line-clamp-1 { overflow:hidden; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; }
.line-clamp-2 { overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.line-clamp-3 { overflow:hidden; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; }

/* ── Skeleton shimmer ────────────────────────────────────── */
@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.skel {
  background: linear-gradient(90deg, #1a1a1a 25%, #252525 50%, #1a1a1a 75%);
  background-size: 200% 100%;
  animation: shimmer 1.6s ease-in-out infinite;
}

/* ── Video cards ─────────────────────────────────────────── */
.vItem { text-decoration: none; border-radius: 10px; outline: none; }
.vItem:focus-visible { box-shadow: 0 0 0 2px var(--ph-bg), 0 0 0 4px var(--ph-orange); }

/* Grid card hover — lift + shadow on the whole thumb, not an image zoom */
.vItem .vThumb { transition: transform 0.22s cubic-bezier(.2,.8,.2,1), box-shadow 0.22s; }
.vItem:hover .vThumb { transform: translateY(-3px); box-shadow: 0 10px 24px -8px rgba(0,0,0,.6); }
.vItem:hover .play-ov { opacity: 1 !important; background: rgba(0,0,0,.4) !important; }

/* Horizontal card (sidebar) */
.vItem-h { display: flex; gap: 8px; padding: 8px; border-radius: 4px; transition: background 0.15s; }
.vItem-h:hover { background: var(--ph-bg3); }
.vItem-h .vThumb-h { width: 120px; min-width: 120px; aspect-ratio: 16/9; overflow: hidden; border-radius: 3px; position: relative; background: #111; }
.vItem-h .vThumb-h img { width: 100%; height: 100%; object-fit: cover; }

/* Quality badge */
.q-badge     { position: absolute; top: 4px; left: 4px; font-size: 9px; font-weight: 900; padding: 1px 4px; border-radius: 2px; line-height: 1.4; letter-spacing: 0.05em; }
.q-4k        { background: #7c3aed; color: #fff; }
.q-1080p     { background: #16a34a; color: #fff; }
.q-hd        { background: #f59e0b; color: #000; }
/* HD badge (legacy alias) */
.hd-badge { position: absolute; top: 4px; left: 4px; background: #f59e0b; color: #000; font-size: 9px; font-weight: 900; padding: 1px 4px; border-radius: 2px; line-height: 1.4; letter-spacing: 0.05em; }
/* New badge */
.new-badge { position: absolute; top: 8px; left: 8px; background: var(--ph-orange); color: #fff; font-size: 10px; font-weight: 800; padding: 3px 8px; border-radius: 5px; line-height: 1.4; letter-spacing: 0.04em; text-transform: uppercase; }

/* Duration badge */
.dur-badge { position: absolute; bottom: 8px; right: 8px; background: rgba(0,0,0,0.8); color: #fff; font-size: 11px; font-weight: 600; padding: 3px 7px; border-radius: 5px; font-variant-numeric: tabular-nums; }
/* Views badge */
.views-badge { position: absolute; bottom: 4px; left: 4px; background: rgba(0,0,0,0.7); color: #ccc; font-size: 10px; padding: 1px 4px; border-radius: 2px; }

/* Like bar */
.like-bar { height: 3px; background: #444; border-radius: 2px; overflow: hidden; }
.like-bar-fill { height: 100%; background: var(--ph-orange); border-radius: 2px; transition: width 0.5s ease; }

/* ── Player ──────────────────────────────────────────────── */
video::-webkit-media-controls { background: rgba(0,0,0,0.5); }

/* ── Categories strip (above player) ────────────────────── */
.cats-strip { display:flex; gap:6px; overflow-x:auto; padding:8px 0 10px; flex-wrap:nowrap; scrollbar-width:none; border-bottom:1px solid var(--ph-border); margin-bottom:12px; width:100%; min-width:0; }
.cats-strip::-webkit-scrollbar { display:none; }
.cat-chip { display:inline-flex; align-items:center; padding:7px 15px; border-radius:20px; font-size:13px; font-weight:600; background:var(--ph-bg2); border:1.5px solid var(--ph-border); color:var(--ph-text2); text-decoration:none; white-space:nowrap; flex-shrink:0; transition:all 0.15s; }
.cat-chip:hover { border-color:var(--ph-orange2); color:var(--ph-text); }
.cat-chip.active { background:var(--ph-orange); border-color:var(--ph-orange); color:#fff; }

/* ── Watch page layout ───────────────────────────────────── */
.watch-container { display:flex; flex-direction:column; gap:12px; }
.watch-left { flex:1; min-width:0; }
.watch-sidebar { display:none; }
.watch-right { display:none; }
.watch-mob-only { display:block; }
.watch-desk-only { display:none !important; }
@media (min-width:1024px) {
  .watch-container { flex-direction:row; align-items:flex-start; gap:20px; }
  #playerBlock { max-width:840px; }
  .watch-right {
    display:block; width:300px; min-width:300px; flex-shrink:0;
    position:sticky; top:72px;
    max-height:calc(100vh - 84px); overflow-y:auto;
    scrollbar-width:thin; scrollbar-color:#333 transparent;
  }
  .watch-right::-webkit-scrollbar { width:4px; }
  .watch-right::-webkit-scrollbar-thumb { background:#333; border-radius:2px; }
  .watch-mob-only { display:none !important; }
  .watch-desk-only { display:flex !important; }
}
.watch-related-item { display:flex; gap:8px; padding:6px 0; border-bottom:1px solid var(--ph-border); text-decoration:none; }
.watch-related-item:last-child { border-bottom:none; }
.watch-related-item:hover .wri-title { color:#fff; }
.wri-thumb { width:130px; min-width:130px; aspect-ratio:16/9; border-radius:3px; overflow:hidden; background:#111; position:relative; flex-shrink:0; }
.wri-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.wri-up-next { position:absolute; top:4px; left:4px; background:var(--ph-orange); color:#fff; font-size:9px; font-weight:800; padding:2px 5px; border-radius:2px; text-transform:uppercase; letter-spacing:.5px; z-index:2; }
.wri-next .wri-title { color:#fff; }
.wri-info { flex:1; min-width:0; padding-top:2px; }
.wri-title { font-size:12px; font-weight:600; color:#ccc; line-height:1.35; margin:0 0 5px; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.wri-cat { font-size:11px; color:var(--ph-orange); font-weight:600; }
.wri-meta { font-size:11px; color:#555; margin-top:2px; }

/* ── Watch info row ──────────────────────────────────────── */
.watch-info-row { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; padding:8px 0; border-bottom:1px solid var(--ph-border); }
.watch-stats { display:flex; align-items:center; gap:14px; font-size:13px; color:#888; }
.watch-stat { display:flex; align-items:center; gap:5px; cursor:pointer; transition:color 0.15s; }
.watch-stat:hover { color:#fff; }
.watch-act-btns { display:flex; align-items:center; gap:4px; }
.watch-act-btn { display:inline-flex; align-items:center; gap:5px; padding:6px 12px; border-radius:4px; font-size:12px; font-weight:600; background:var(--ph-bg2); color:#ccc; border:1px solid var(--ph-border); cursor:pointer; transition:all 0.15s; white-space:nowrap; }
.watch-act-btn:hover { background:var(--ph-bg3); color:#fff; }
.watch-act-btn.danger:hover { color:var(--ph-red); border-color:var(--ph-red); }

/* ── Watch page — more videos grid (6 cols desktop) ─────── */
.more-grid { display:grid; gap:8px; grid-template-columns:repeat(2,1fr); }
@media (min-width:540px)  { .more-grid { grid-template-columns:repeat(3,1fr); gap:10px; } }
@media (min-width:768px)  { .more-grid { grid-template-columns:repeat(4,1fr); } }
@media (min-width:1024px) { .more-grid { grid-template-columns:repeat(6,1fr); gap:8px; } }

/* ── Utility: Tailwind fallbacks ─────────────────────────── */
.flex { display:flex; } .flex-col { flex-direction:column; } .flex-1 { flex:1 1 0%; }
.flex-wrap { flex-wrap:wrap; } .shrink-0 { flex-shrink:0; }
.items-center { align-items:center; } .items-start { align-items:flex-start; }
.justify-center { justify-content:center; } .justify-between { justify-content:space-between; }
.gap-1 { gap:.25rem; } .gap-2 { gap:.5rem; } .gap-3 { gap:.75rem; } .gap-4 { gap:1rem; }
.gap-1\.5 { gap:.375rem; } .gap-x-3 { column-gap:.75rem; } .gap-y-1 { row-gap:.25rem; }
.min-w-0 { min-width:0; } .w-full { width:100%; } .h-full { height:100%; }
.w-3 { width:.75rem; height:.75rem; } .w-4 { width:1rem; height:1rem; }
.w-5 { width:1.25rem; height:1.25rem; } .h-3 { height:.75rem; } .h-4 { height:1rem; } .h-5 { height:1.25rem; }
.relative { position:relative; } .absolute { position:absolute; }
.inset-0 { inset:0; } .top-0 { top:0; } .left-0 { left:0; } .right-0 { right:0; } .bottom-0 { bottom:0; }
.z-30 { z-index:30; } .z-40 { z-index:40; } .overflow-hidden { overflow:hidden; }
.rounded { border-radius:.25rem; } .rounded-lg { border-radius:.5rem; }
.hidden { display:none; } .block { display:block; } .inline-flex { display:inline-flex; }
.select-none { user-select:none; } .cursor-pointer { cursor:pointer; } .ml-auto { margin-left:auto; }
.mt-1 { margin-top:.25rem; } .mt-1\.5 { margin-top:.375rem; } .mt-4 { margin-top:1rem; }
.mt-5 { margin-top:1.25rem; } .mt-6 { margin-top:1.5rem; } .mb-2 { margin-bottom:.5rem; }
.mb-3 { margin-bottom:.75rem; } .mb-4 { margin-bottom:1rem; } .mb-6 { margin-bottom:1.5rem; }
.py-2 { padding:.5rem 0; } .py-3 { padding:.75rem 0; } .py-1\.5 { padding:.375rem 0; }
.px-3 { padding:0 .75rem; } .px-4 { padding:0 1rem; } .px-3 { padding-left:.75rem; padding-right:.75rem; }
.text-lg { font-size:1.125rem; line-height:1.75rem; } .text-sm { font-size:.875rem; }
.text-xs { font-size:.75rem; } .text-2xl { font-size:1.5rem; } .text-5xl { font-size:3rem; }
.font-bold { font-weight:700; } .text-white { color:#fff; } .text-center { text-align:center; }
.uppercase { text-transform:uppercase; } .leading-tight { line-height:1.25; }
.border { border-width:1px; } .border-none { border:none; }
.bg-black { background:#000; } .bg-black\/95 { background:rgba(0,0,0,.95); } .bg-black\/60 { background:rgba(0,0,0,.6); }
.fixed { position:fixed; } .sticky { position:sticky; } .top-0 { top:0; }
.p-8 { padding:2rem; } .max-w-sm { max-width:24rem; } .w-6 { width:1.5rem; height:1.5rem; }

/* ── Mobile tweaks (< 640px) ─────────────────────────────── */
@media (max-width:639px) {
  /* Player edge-to-edge */
  #playerBlock { border-radius:0; margin-left:-12px; margin-right:-12px; }
  .player-pad { padding-left:12px; padding-right:12px; }
  /* Search button — icon only */
  .search-label { display:none !important; }
  .search-wrap button { padding:0 14px; }
  /* Logo smaller */
  .site-logo { font-size:20px !important; }
  /* Header row1 tighter */
  .header-row1 { padding:8px 12px !important; gap:8px !important; }
  /* Grid gap tighter */
  .video-grid { gap:6px; }
  /* Tag pills smaller */
  .tag-pill { font-size:12px; padding:3px 9px; }
  /* Sort tabs compact */
  .sort-tab-link { padding:10px 14px !important; font-size:13px !important; }
}

/* ── Header ──────────────────────────────────────────────── */
.site-header { background: var(--ph-header); border-bottom: 1px solid #222; overflow-x: hidden; width: 100%; }

/* ── Age gate ────────────────────────────────────────────── */
#ageGate { animation: fadeIn 0.25s ease; }
@keyframes fadeIn { from { opacity:0 } to { opacity:1 } }

/* ── Admin ───────────────────────────────────────────────── */
textarea[class*="font-mono"] { tab-size: 2; }
.prose-invert h2 { color: #fff; }
.prose-invert a  { color: #f87171; }
.prose-invert code { background: #27272a; padding: 0.1em 0.3em; border-radius: 3px; font-size: 0.85em; }

/* ── Category hero banner ────────────────────────────────── */
.cat-hero { position: relative; min-height: 140px; border-radius: 6px; overflow: hidden; margin-bottom: 18px; background: var(--ph-bg2) center/cover no-repeat; }
.cat-hero-overlay { position: absolute; inset: 0; background: linear-gradient(to right, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.6) 60%, rgba(0,0,0,0.3) 100%); }
.cat-hero-body { position: relative; padding: 24px 20px; }
@media (min-width: 640px) { .cat-hero { min-height: 160px; } .cat-hero-body { padding: 32px 28px; } }

/* ── Category grid ───────────────────────────────────────── */
.cat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
@media (min-width: 480px) { .cat-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 768px) { .cat-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1024px) { .cat-grid { grid-template-columns: repeat(6, 1fr); } }

.cat-tile { position: relative; overflow: hidden; border-radius: 4px; aspect-ratio: 16/9; display: block; text-decoration: none; background: #111; }
.cat-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; display: block; }
.cat-tile:hover img, .cat-tile:hover .cat-tile-no-img { transform: scale(1.06); }
.cat-tile-no-img { width: 100%; height: 100%; background: linear-gradient(135deg, var(--ph-bg3), #111); transition: transform 0.3s ease; }
.cat-tile-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.15) 55%, transparent 100%); display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding: 7px 6px; text-align: center; }
.cat-tile-name { font-size: 11px; font-weight: 700; color: #fff; line-height: 1.2; text-shadow: 0 1px 3px rgba(0,0,0,0.8); }
.cat-tile-count { font-size: 9px; color: rgba(255,255,255,0.65); margin-top: 2px; }

/* ── Sidebar ─────────────────────────────────────────────── */
.sidebar-section { padding: 12px 0; border-bottom: 1px solid var(--ph-border); }
.sidebar-section:last-child { border-bottom: none; }
.sidebar-title { font-size: 13px; font-weight: 700; color: #fff; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 10px; }

/* ── Tag pills ───────────────────────────────────────────── */
.tag-pill { display:inline-flex; align-items:center; background: var(--ph-bg2); border: 1.5px solid var(--ph-border); color: var(--ph-text2); font-size: 13px; font-weight:600; padding: 6px 14px; border-radius: 20px; transition: all 0.15s; text-decoration: none; white-space:nowrap; flex-shrink:0; }
.tag-pill:hover { background: var(--ph-orange); border-color: var(--ph-orange); color: #fff; }

/* ── Tags strip ──────────────────────────────────────────── */
.tags-strip { display:flex; gap:6px; overflow-x:auto; padding-bottom:4px; flex-wrap:nowrap; width:100%; min-width:0; }
.tags-strip::-webkit-scrollbar { height:3px; }
.tags-strip::-webkit-scrollbar-thumb { background:#333; border-radius:2px; }

/* ── Mobile nav dropdown ─────────────────────────────────── */
.mob-nav { display:none; }
.mob-nav.open { display:flex; flex-direction:column; background:var(--ph-header); padding:8px 12px; gap:2px; border-top:1px solid #222; }
.mob-nav a { padding:9px 4px; font-size:14px; color:#bbb; text-decoration:none; border-bottom:1px solid #1e1e1e; }
.mob-nav a:hover { color:#fff; }

/* ── Hamburger: hide on desktop ──────────────────────────── */
@media (min-width:641px) { .mob-menu-btn { display:none !important; } }

/* ── Search bar ──────────────────────────────────────────── */
.search-form { flex:1; max-width:680px; }
.search-wrap { display:flex; height:36px; border-radius:4px; overflow:hidden; border:1px solid #555; }
.search-wrap input { flex:1; padding:0 12px; font-size:14px; background:#2a2a2a; color:#fff; border:none; outline:none; min-width:0; }
.search-wrap button { padding:0 18px; font-size:13px; font-weight:700; background:var(--ph-orange); color:#fff; border:none; cursor:pointer; display:flex; align-items:center; gap:6px; white-space:nowrap; transition:opacity 0.15s; }
.search-wrap button:hover { opacity:0.88; }

/* ── Section eyebrow (display font, used sparingly — section
   titles / category hero, never on every card) ───────────── */
.eyebrow { font-family: var(--ph-display); font-size: 20px; letter-spacing: .2px; color: var(--ph-text); margin: 0 0 4px; text-wrap: balance; }
.eyebrow .dot { color: var(--ph-orange); }
.eyebrow-sub { font-size: 13px; color: var(--ph-text2); margin: 0; }

/* ── Video card play button (hover overlay) ──────────────── */
.play-btn { width: 42px; height: 42px; border-radius: 50%; background: rgba(255,255,255,.94); display: flex; align-items: center; justify-content: center; transform: scale(.85); transition: transform .18s; }
.vItem:hover .play-btn { transform: scale(1); }
.play-btn svg { width: 16px; height: 16px; color: #161311; margin-left: 2px; }

/* ── Video grid ──────────────────────────────────────────── */
.video-grid { display:grid; gap:12px; grid-template-columns:repeat(var(--mob-cols,2),1fr); }
@media (min-width:640px)  { .video-grid { grid-template-columns:repeat(3,1fr); } }
@media (min-width:1024px) { .video-grid { grid-template-columns:repeat(4,1fr); } }

/* ── Pagination ──────────────────────────────────────────── */
.pagination { display:flex; align-items:center; justify-content:center; gap:4px; margin-top:24px; flex-wrap:wrap; }
.page-btn { display:inline-flex; align-items:center; justify-content:center; min-width:38px; height:38px; padding:0 10px; border-radius:9px; font-size:13px; font-weight:700; text-decoration:none; background:var(--ph-bg2); color:var(--ph-text2); border:1.5px solid var(--ph-border); transition:all 0.15s; font-variant-numeric:tabular-nums; }
.page-btn:hover { color:var(--ph-text); border-color:var(--ph-dim2); }
.page-btn.active { background:var(--ph-orange); color:#fff; border-color:var(--ph-orange); }
.page-btn.disabled { opacity:0.35; pointer-events:none; }

/* ── Comments ────────────────────────────────────────────── */
.comment-avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; background: #333; flex-shrink: 0; }

/* ── Watch page — channel row ────────────────────────────── */
.channel-row { display:flex; align-items:center; gap:12px; padding:12px 0; border-top:1px solid var(--ph-border); border-bottom:1px solid var(--ph-border); }
.channel-avatar { width:48px; height:48px; border-radius:50%; background:var(--ph-orange); display:flex; align-items:center; justify-content:center; font-size:20px; font-weight:900; color:#fff; flex-shrink:0; text-decoration:none; }
.channel-info { flex:1; min-width:0; }
.channel-name { font-size:15px; font-weight:700; color:#fff; text-decoration:none; display:flex; align-items:center; gap:5px; }
.channel-name:hover { color:var(--ph-orange); }
.channel-meta { font-size:12px; color:#777; margin-top:2px; }
.channel-btn { display:inline-flex; align-items:center; gap:6px; padding:8px 18px; border-radius:4px; font-size:13px; font-weight:700; text-decoration:none; white-space:nowrap; flex-shrink:0; transition:opacity 0.15s; cursor:pointer; border:none; }
.channel-btn-primary { background:var(--ph-orange); color:#fff; }
.channel-btn-primary:hover { opacity:0.88; }
.channel-btn-secondary { background:#2c2c2c; color:#ccc; border:1px solid #444 !important; }
.channel-btn-secondary:hover { background:#3a3a3a; }

/* ── Watch page — tabs ───────────────────────────────────── */
.watch-tabs-nav { display:flex; align-items:center; gap:6px; margin:16px 0 12px; flex-wrap:wrap; }
.watch-tab-btn { padding:7px 18px; font-size:13px; font-weight:700; color:#aaa; cursor:pointer; border:none; background:var(--ph-bg2); border-radius:4px; transition:all 0.15s; white-space:nowrap; }
.watch-tab-btn:hover { background:var(--ph-bg3); color:#fff; }
.watch-tab-btn.active { background:var(--ph-orange); color:#fff; }
.watch-tab-pane { display:none; }
.watch-tab-pane.active { display:block; }


/* ── Watch page — below-player banner ───────────────────── */
.below-player-banner { display:flex; justify-content:center; align-items:center; margin:8px 0; min-height:90px; background:transparent; overflow:hidden; }

/* ── Watch actions bar ───────────────────────────────────── */
.watch-actions { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.watch-action-btn { display:inline-flex; align-items:center; gap:5px; padding:7px 13px; border-radius:4px; font-size:13px; font-weight:600; background:#2c2c2c; color:#ccc; border:1px solid #3a3a3a; cursor:pointer; transition:background 0.15s,color 0.15s; white-space:nowrap; }
.watch-action-btn:hover { background:#3a3a3a; color:#fff; }
.watch-action-btn.danger { color:#888; border-color:#2c2c2c; }
.watch-action-btn.danger:hover { color:#e5001a; border-color:#e5001a; background:#2c2c2c; }
.watch-likes { display:inline-flex; align-items:center; }
.watch-like-btn { display:inline-flex; align-items:center; gap:6px; padding:7px 16px; font-size:14px; font-weight:700; cursor:pointer; border:1px solid #555; transition:background 0.15s; }
.watch-like-btn.like { background:#3a3a3a; color:#fff; border-radius:4px 0 0 4px; border-right:none; }
.watch-like-btn.dislike { background:#3a3a3a; color:#999; border-radius:0 4px 4px 0; }
.watch-like-btn.like:hover { background:#444; }
.watch-like-btn.dislike:hover { color:#fff; background:#444; }

/* ── Mobile: hide sidebar, show channel btn row stacked ─── */
@media (max-width:639px) {
  .channel-row { flex-wrap:wrap; }
  .watch-tabs-nav { overflow-x:auto; scrollbar-width:none; }
  .watch-tabs-nav::-webkit-scrollbar { display:none; }
}