/* StreamLive video UI v6 — layout fixed (player first, no collapse) */

.yt-videos-page{padding:12px 0 40px}
.yt-videos-head{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;margin-bottom:12px}
.yt-videos-head h1{margin:0;font-size:22px}
.yt-videos-search{display:flex;gap:6px}
.yt-videos-search input{padding:9px 12px;border-radius:20px;border:1px solid rgba(128,128,128,.25);background:rgba(128,128,128,.1);color:inherit;min-width:140px}

.yt-cat-chips{
  display:flex;flex-wrap:nowrap;gap:8px;overflow-x:auto;-webkit-overflow-scrolling:touch;
  padding:4px 0 14px;margin-bottom:8px;scrollbar-width:none;
}
.yt-cat-chips::-webkit-scrollbar{display:none}
.yt-chip{
  flex:0 0 auto;padding:8px 14px;border-radius:8px;font-size:13px;font-weight:500;
  background:rgba(128,128,128,.15);color:inherit;text-decoration:none;white-space:nowrap;
}
.yt-chip:hover{background:rgba(128,128,128,.28)}
.yt-chip.active{background:#f1f1f1;color:#0f0f0f}

.video-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px 14px}
@media(max-width:520px){
  .video-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 10px}
}
.video-card{display:block;text-decoration:none;color:inherit;min-width:0}
.video-card-thumb{position:relative;width:100%;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:#111}
.video-card-thumb img{width:100%;height:100%;object-fit:cover;display:block;border:0}
.video-card-title{font-size:14px;font-weight:600;line-height:1.35;margin-top:8px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.video-card-meta{font-size:12px;opacity:.7;margin-top:4px}

/* ===== WATCH PAGE — order: cats, player, title, recs ===== */
.yt-watch{
  max-width:1200px;
  margin:0 auto;
  padding:12px;
  display:block;
  width:100%;
  box-sizing:border-box;
}
@media(min-width:901px){
  .yt-watch{
    display:grid;
    grid-template-columns:minmax(0,1fr) 340px;
    grid-template-rows:auto auto;
    gap:16px 24px;
    align-items:start;
  }
  .pl-watch-cats{grid-column:1 / -1;grid-row:1}
  .yt-primary{grid-column:1;grid-row:2;min-width:0}
  .yt-secondary{grid-column:2;grid-row:2;min-width:0}
}

.yt-primary{width:100%;min-width:0}
.yt-secondary{width:100%;min-width:0;margin-top:8px}
@media(min-width:901px){.yt-secondary{margin-top:0}}

.pl-watch-cats{
  display:flex;flex-wrap:nowrap;gap:8px;overflow-x:auto;
  -webkit-overflow-scrolling:touch;padding:4px 0 10px;margin-bottom:4px;
}
.pl-watch-cats a{
  flex:0 0 auto;padding:6px 12px;border-radius:8px;font-size:13px;
  background:rgba(128,128,128,.15);color:inherit;text-decoration:none;white-space:nowrap;
}

/* PLAYER — aspect-ratio, NOT height:0 (height:0 ломал порядок на мобилке) */
.yt-player-box,
.player-wrap{
  position:relative;
  width:100%;
  max-width:100%;
  aspect-ratio:16 / 9;
  background:#000;
  border-radius:12px;
  overflow:hidden;
  margin:0 0 12px;
  display:block;
}
.yt-player-box > iframe,
.yt-player-box > video,
.yt-player-box > .yt-fill,
.player-wrap > iframe,
.player-wrap > video,
.player-wrap > .yt-fill,
.player-wrap > blockquote{
  position:absolute;
  top:0;left:0;right:0;bottom:0;
  width:100%;
  height:100%;
  border:0;
  margin:0;
  object-fit:contain;
  background:#000;
}

.yt-premiere-box{
  position:relative;width:100%;aspect-ratio:16/9;
  border-radius:12px;overflow:hidden;background:#0a0a0a;margin-bottom:12px;
}
.yt-premiere-box img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.45;filter:blur(2px)}
.yt-premiere-box .premiere-overlay{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.35),rgba(0,0,0,.75));
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:20px;color:#fff;
}
.yt-premiere-box .premiere-label{font-size:13px;letter-spacing:.06em;text-transform:uppercase;opacity:.85;margin-bottom:8px}
.yt-premiere-box .premiere-title{font-size:clamp(18px,3vw,26px);font-weight:700;max-width:90%;margin-bottom:16px;line-height:1.25}
.yt-premiere-box .premiere-time{font-size:14px;opacity:.8;margin-bottom:10px}
.yt-premiere-box .premiere-countdown{font-variant-numeric:tabular-nums;font-size:clamp(28px,5vw,48px);font-weight:800}
.yt-premiere-box .premiere-note{margin-top:14px;font-size:13px;opacity:.7}

.yt-title{font-size:clamp(16px,2.5vw,20px);font-weight:700;margin:12px 0 8px;line-height:1.3;word-break:break-word}
.yt-meta-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.yt-channel{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit;min-width:0}
.yt-channel-avatar{width:40px;height:40px;border-radius:50%;object-fit:cover;flex-shrink:0;background:#333}
.yt-channel-name{font-weight:600;font-size:14px}
.yt-channel-sub{font-size:12px;opacity:.7}
.yt-actions{display:flex;flex-wrap:wrap;gap:8px}
.yt-actions .btn,.yt-actions button{font-size:13px;border-radius:20px;padding:8px 14px}
.yt-desc{font-size:14px;line-height:1.55;margin:12px 0;word-break:break-word;overflow-wrap:anywhere;padding:12px;border-radius:12px;background:rgba(128,128,128,.1)}
.yt-desc.collapsed{max-height:4.5em;overflow:hidden}
.yt-desc-toggle{background:none;border:0;color:inherit;opacity:.7;cursor:pointer;padding:4px 0;font-size:13px}

.yt-side-title{font-size:15px;font-weight:700;margin:0 0 12px}
.yt-rec{display:flex;gap:10px;text-decoration:none;color:inherit;margin-bottom:12px;min-width:0}
.yt-rec-thumb{width:160px;max-width:42%;flex-shrink:0;aspect-ratio:16/9;border-radius:10px;object-fit:cover;background:#111}
.yt-rec-info{min-width:0;flex:1}
.yt-rec-title{font-size:13px;font-weight:600;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.yt-rec-meta{font-size:12px;opacity:.65;margin-top:4px}

@media(max-width:900px){
  .yt-watch{padding:0 0 28px}
  .yt-player-box,.player-wrap,.yt-premiere-box{border-radius:0;margin-bottom:0}
  .yt-title,.yt-meta-row,.yt-actions,.yt-desc,.yt-articles,
  .yt-secondary,.yt-side-title,.comments-list,h2#comments{padding-left:12px;padding-right:12px}
  .pl-watch-cats{padding:8px 12px}
  .yt-rec-thumb{width:140px}
}
@media(max-width:480px){
  .yt-rec-thumb{width:120px;max-width:40%}
  .yt-actions .btn{padding:8px 10px;font-size:12px}
}