.yt-wrap { max-width:1400px; margin:0 auto; padding:16px 24px; }
.yt-layout { display:flex; gap:24px; }
.yt-player { flex:1; min-width:0; }
.yt-playlist { width:380px; flex-shrink:0; border-left:1px solid #e0e0e0; display:flex; flex-direction:column; }
.yt-pl-head { padding:12px 16px; border-bottom:1px solid #e0e0e0; background:#f9f9f9; }
.yt-pl-list { overflow-y:auto; flex:1; max-height:calc(100vh - 220px); }
.yt-pl-item { display:flex; align-items:flex-start; padding:8px 16px; cursor:pointer; border-bottom:1px solid #f0f0f0; position:relative; }
.yt-pl-item:hover { background:#f0f4ff; }
.yt-pl-item.is-active { background:#e8f0fe; }
.yt-pl-item.is-active::before { content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:#f00; }
.yt-idx { width:24px; flex-shrink:0; text-align:center; color:#666; font-size:13px; padding-top:4px; }
.yt-body { flex:1; min-width:0; padding-left:10px; }
.yt-title { font-size:14px; line-height:1.3; color:#0d0d0d; }
.yt-pl-item.is-active .yt-title { font-weight:600; }
.yt-meta { font-size:12px; color:#606060; margin-top:2px; }
.yt-bar { height:3px; background:#e0e0e0; border-radius:2px; margin-top:4px; overflow:hidden; }
.yt-bar-fill { height:100%; border-radius:2px; transition:width 1s ease; }
.yt-pbar { height:6px; background:#e0e0e0; border-radius:3px; overflow:hidden; }
.yt-pbar-fill { height:100%; border-radius:3px; transition:width 1s ease; }
.yt-topbar { background:#fff; border-bottom:1px solid #e0e0e0; padding:10px 24px; }
.yt-nav { display:inline-flex; align-items:center; padding:8px 16px; border-radius:20px; font-size:14px; cursor:pointer; border:none; }
.yt-time-badge { flex-shrink:0; font-size:11px; color:#fff; background:#606060; border-radius:10px; padding:1px 7px; margin-left:6px; align-self:center; white-space:nowrap; }
.yt-pl-item.is-active .yt-time-badge { background:#065fd4; }
.yt-pl-item .yt-time-badge.done { background:#28a745; }
@media(max-width:992px) { .yt-layout { flex-direction:column; } .yt-playlist { width:100%; border-left:none; border-top:1px solid #e0e0e0; } .yt-pl-list { max-height:350px; } }
header.header { background: linear-gradient(to right, #480048, #C04848) !important; border-bottom: 1px solid rgba(255,255,255,0.2) !important; }

/* Intro grid: stack on small screens */
@media(max-width:768px) {
    .yt-intro-grid {
        grid-template-columns: 1fr !important;
    }
}