/* ============================================================
   NotVot — Micro-interactions & Motion
   Link in header.php after style.css
   ============================================================ */

/* ── Global smooth feel ── */
*, *::before, *::after {
    -webkit-font-smoothing: antialiased;
}

a, button, img {
    transition: opacity .18s ease, transform .18s ease;
}

/* ── Nav ── */
nav {
    transition: box-shadow .2s ease;
}
.nav-left .logo:hover {
    opacity: .85;
    transform: scale(1.03);
}
.nav-right img {
    transition: transform .2s ease, opacity .2s ease;
}
.nav-right img:hover {
    transform: scale(1.12);
    opacity: .8;
}
.menu_icon {
    transition: transform .2s ease;
}
.menu_icon:hover {
    transform: rotate(90deg);
}

/* ── Home feed video cards ── */
.vid_list {
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    transition: transform .25s cubic-bezier(.25,.46,.45,.94),
                box-shadow .25s cubic-bezier(.25,.46,.45,.94);
    will-change: transform;
}
.vid_list:hover {
    transform: translateY(-6px) scale(1.01);
    box-shadow: 0 16px 40px rgba(0,0,0,.13);
}
.vid_list:active {
    transform: translateY(-2px) scale(.99);
}

/* Thumbnail */
.thumbnail-container {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
}
.thumbnail-container img {
    transition: transform .4s cubic-bezier(.25,.46,.45,.94);
    display: block;
    width: 100%;
}
.vid_list:hover .thumbnail-container img {
    transform: scale(1.07);
}

/* Hover overlay */
.thumbnail-container::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0);
    transition: background .25s ease;
    border-radius: 10px;
    pointer-events: none;
}
.vid_list:hover .thumbnail-container::after {
    background: rgba(0,0,0,.12);
}

/* Duration badge — hide on hover */
.video-duration {
    transition: opacity .2s ease, transform .2s ease;
}
.vid_list:hover .video-duration {
    opacity: 0;
    transform: scale(.8);
}

/* Card info */
.vid_list .flex-div {
    padding: 8px 6px 6px;
    align-items: flex-start;
    gap: 8px;
}
.vid_list .flex-div img {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    transition: transform .2s ease;
}
.vid_list:hover .flex-div img {
    transform: scale(1.1);
}
.vid-info a {
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color .15s ease;
}
.vid_list:hover .vid-info a {
    color: #ff0000;
}

/* ── Thumbnail duration badge ── */
.nv-rel-dur {
    transition: opacity .15s;
}
.nv-rel-item:hover .nv-rel-dur {
    opacity: .7;
}

/* ── Related video items ── */
.nv-rel-item {
    border-radius: 8px;
    transition: background .18s ease, transform .18s ease;
    padding: 6px;
    margin: 0 -6px;
}
.nv-rel-item:hover {
    background: #f5f5f5;
    transform: translateX(3px);
}
.nv-rel-thumb img {
    transition: transform .3s ease;
    border-radius: 6px;
}
.nv-rel-item:hover .nv-rel-thumb img {
    transform: scale(1.04);
}

/* ── Search result cards ── */
.nvsr-item {
    border-radius: 10px;
    padding: 10px;
    margin: 0 -10px;
    transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
}
.nvsr-item:hover {
    background: #fafafa;
    transform: translateX(4px);
    box-shadow: 0 2px 12px rgba(0,0,0,.06);
}
.nvsr-thumb img {
    transition: transform .3s ease;
}
.nvsr-item:hover .nvsr-thumb img {
    transform: scale(1.03);
}

/* ── Category cards ── */
.cat-card {
    transition: transform .22s ease, box-shadow .22s ease;
    border-radius: 10px;
    overflow: hidden;
}
.cat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(0,0,0,.12);
}
.cat-card__thumb {
    transition: transform .35s ease;
}
.cat-card:hover .cat-card__thumb {
    transform: scale(1.05);
}

/* ── Sidebar links ── */
.shortcut-links a,
.subcribed-list a {
    border-radius: 8px;
    transition: background .15s ease, transform .15s ease, padding-left .15s ease;
}
.shortcut-links a:hover,
.subcribed-list a:hover {
    transform: translateX(3px);
}

/* ── Like / Dislike / Action buttons ── */
.nv-pill__btn {
    transition: background .15s ease, transform .12s ease, color .15s ease;
}
.nv-pill__btn:active {
    transform: scale(.92);
}
.nv-pill__btn.liked {
    animation: nvPop .25s ease;
}
.nv-pill__btn.disliked {
    animation: nvPop .25s ease;
}
.nv-act-btn {
    transition: background .15s ease, transform .12s ease;
}
.nv-act-btn:active {
    transform: scale(.93);
}

/* ── Save button saved state ── */
.nv-act-btn.saved {
    animation: nvPop .25s ease;
}

/* ── Share button ── */
#btn-share:hover {
    transform: translateY(-1px);
}

/* ── Search box ── */
.nv-search-btn {
    transition: background .15s ease, transform .12s ease;
}
.nv-search-btn:hover {
    transform: scale(1.06);
}
.nv-search-btn:active {
    transform: scale(.94);
}

/* ── Search suggestion dropdown ── */
.nv-sug-kw, .nv-sug-vid {
    transition: background .12s ease, transform .12s ease;
}
.nv-sug-kw:hover {
    transform: translateX(3px);
}
.nv-sug-vid:hover {
    transform: translateX(3px);
}
.nv-sug-vid__thumb {
    transition: transform .25s ease;
}
.nv-sug-vid:hover .nv-sug-vid__thumb {
    transform: scale(1.05);
}

/* ── Pagination buttons ── */
.pagination a,
.nvsr-pgbtn,
.cat-pgbtn,
.nvup-page-btn {
    transition: background .15s ease, transform .12s ease, box-shadow .15s ease;
}
.pagination a:hover,
.nvsr-pgbtn:hover,
.cat-pgbtn:hover,
.nvup-page-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,.1);
}
.pagination a:active,
.nvsr-pgbtn:active {
    transform: scale(.93);
}

/* ── Scroll-to-top button ── */
#nv-stt {
    transition: opacity .2s ease, transform .2s ease, visibility .2s ease, background .15s ease;
}
#nv-stt:hover {
    transform: translateY(-3px) !important;
}
#nv-stt:active {
    transform: scale(.9) !important;
}

/* ── Page load fade-in ── */
.content,
.nv-player-wrap {
    animation: nvFadeUp .35s ease both;
}

/* ── Card stagger on home feed ── */
.vid_list {
    animation: nvFadeUp .4s ease both;
}
.vid_list:nth-child(1)  { animation-delay: .03s; }
.vid_list:nth-child(2)  { animation-delay: .07s; }
.vid_list:nth-child(3)  { animation-delay: .11s; }
.vid_list:nth-child(4)  { animation-delay: .15s; }
.vid_list:nth-child(5)  { animation-delay: .19s; }
.vid_list:nth-child(6)  { animation-delay: .23s; }
.vid_list:nth-child(7)  { animation-delay: .27s; }
.vid_list:nth-child(8)  { animation-delay: .31s; }
.vid_list:nth-child(9)  { animation-delay: .35s; }
.vid_list:nth-child(10) { animation-delay: .39s; }

/* ── Search results stagger ── */
.nvsr-item {
    animation: nvFadeUp .35s ease both;
}

/* ── Related items stagger ── */
.nv-rel-item {
    animation: nvSlideIn .3s ease both;
}
.nv-rel-item:nth-child(1) { animation-delay: .04s; }
.nv-rel-item:nth-child(2) { animation-delay: .08s; }
.nv-rel-item:nth-child(3) { animation-delay: .12s; }
.nv-rel-item:nth-child(4) { animation-delay: .16s; }
.nv-rel-item:nth-child(5) { animation-delay: .20s; }

/* ── Suggest dropdown animate in ── */
#nv-suggest-box {
    animation: nvDropDown .18s ease both;
}

/* ── Share panel animate in ── */
.nv-share-panel {
    animation: nvDropDown .2s ease both;
}

/* ── Profile page ── */
.nvup-card {
    transition: transform .22s ease, box-shadow .22s ease;
}
.nvup-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(0,0,0,.12);
}

/* ── Keyframes ── */
@keyframes nvFadeUp {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes nvSlideIn {
    from { opacity: 0; transform: translateX(10px); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes nvDropDown {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes nvPop {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.22); }
    70%  { transform: scale(.92); }
    100% { transform: scale(1); }
}

/* ── Reduce motion for accessibility ── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}


/* ── Search box ── */
.vjs-big-play-button { top:50% !important; left:50% !important; transform:translate(-50%,-50%) !important; font-size:3em !important; border-radius:50%; width:80px; height:80px; line-height:80px; }
.nav-middle .search_box { border:1.5px solid #e0e0e0; background:#f8f8f8; padding:0 0 0 12px; border-radius:22px; display:flex; align-items:center; width:100%; max-width:480px; gap:8px; transition:border-color .2s,box-shadow .2s,background .2s; overflow:hidden; }
.nav-middle .search_box:focus-within { border-color:#c0c0c0; background:#fff; box-shadow:0 1px 6px rgba(0,0,0,.08); }
.nv-search-icon { flex-shrink:0; }
.nav-middle .search_box input { flex:1; border:0; outline:0; background:transparent; font-size:14px; color:#111; padding:9px 0; min-width:0; }
.nav-middle .search_box input::placeholder { color:#aaa; }
.nv-search-btn { flex-shrink:0; display:flex; align-items:center; justify-content:center; width:38px; height:38px; background:#111; border:none; border-radius:0 20px 20px 0; cursor:pointer; color:#fff; transition:background .15s; }
.nv-search-btn:hover { background:#333; }
.search-trigger img { display:none; }
.search-trigger { display:none; background:none; border:none; cursor:pointer; padding:4px; align-items:center; color:#444; }
@media(max-width:768px) { .search-trigger { display:flex; } }

/* ── Live search dropdown ── */
.nv-suggest-wrap { position:relative; width:100%; max-width:480px; }
.nv-suggest-wrap .search_box { max-width:100%; }
#nv-suggest-box { display:none; position:absolute; top:calc(100% + 6px); left:0; right:0; background:#fff; border:1px solid #e5e5e5; border-radius:12px; box-shadow:0 8px 30px rgba(0,0,0,.12); z-index:500; overflow:hidden; max-height:420px; overflow-y:auto; }
.nv-sug-kw { display:flex; align-items:center; gap:10px; padding:10px 14px; cursor:pointer; font-size:13px; color:#111; transition:background .12s; }
.nv-sug-kw:hover { background:#f5f5f5; }
.nv-sug-kw svg { flex-shrink:0; color:#999; }
.nv-sug-vid { display:flex; align-items:center; gap:10px; padding:8px 14px; cursor:pointer; transition:background .12s; text-decoration:none; }
.nv-sug-vid:hover { background:#f5f5f5; }
.nv-sug-vid__thumb { width:72px; height:40px; border-radius:5px; object-fit:cover; flex-shrink:0; background:#eee; }
.nv-sug-vid__info { flex:1; min-width:0; }
.nv-sug-vid__title { font-size:12px; font-weight:600; color:#111; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; line-height:1.4; }
.nv-sug-vid__dur { font-size:11px; color:#888; margin-top:2px; }
.nv-sug-divider { font-size:10px; font-weight:700; color:#aaa; text-transform:uppercase; letter-spacing:.5px; padding:8px 14px 4px; border-top:1px solid #f0f0f0; }

/* ── Scroll to top ── */
#nv-stt { position:fixed; bottom:22px; right:18px; width:32px; height:32px; border-radius:50%; background:rgba(0,0,0,.5); border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; color:#fff; opacity:0; visibility:hidden; transform:translateY(6px); transition:opacity .2s ease,transform .2s ease,visibility .2s ease,background .15s; z-index:999; backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); }
#nv-stt.visible { opacity:1; visibility:visible; transform:translateY(0); }
#nv-stt:hover { background:rgba(0,0,0,.75); }

/* ── Context menu ── */
#custom-context { background:rgba(20,20,20,.95); border-radius:8px; box-shadow:0 4px 20px rgba(0,0,0,.5); padding:6px 0; min-width:160px; font-family:'Poppins',sans-serif; }
#custom-context ul { list-style:none; margin:0; padding:0; }
#custom-context ul li { padding:10px 16px; font-size:13px; color:#fff; cursor:pointer; transition:background .12s; }
#custom-context ul li:hover { background:rgba(255,255,255,.12); }

/* ── Theater mode ── */
.nv-theater .nv-page-grid { grid-template-columns:1fr !important; }
.nv-theater .nv-player-box { border-radius:0; margin-left:-24px; margin-right:-24px; margin-top:-16px; }
.nv-theater .nv-sidebar-related { position:static !important; margin-top:16px; }
.nv-theater #nv-rel-list { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:12px; }
.nv-theater .nv-rel-item { flex-direction:column; margin-bottom:0; }
.nv-theater .nv-rel-thumb { width:100% !important; height:auto !important; aspect-ratio:16/9; border-radius:8px; }
.nv-theater .nv-rel-info { padding-top:6px; }
@media(max-width:768px) { .nv-theater .nv-player-box { margin-left:-14px; margin-right:-14px; margin-top:-12px; } }

/* ── Playlist page ── */
.nv-pl-wrap { padding: 16px 24px 40px; }
.nv-pl-layout { display:grid; grid-template-columns:minmax(0,1fr) 380px; gap:24px; align-items:start; }

/* Breadcrumb */
.nv-pl-breadcrumb { display:flex; align-items:center; gap:8px; font-size:12px; color:#606060; margin:10px 0 8px; }
.nv-pl-breadcrumb svg { flex-shrink:0; color:#ff0000; }
.nv-pl-breadcrumb a { font-weight:600; color:#0f0f0f; text-decoration:none; transition:color .15s; }
.nv-pl-breadcrumb a:hover { color:#ff0000; }
.nv-pl-breadcrumb__pos { margin-left:auto; font-size:11px; background:#f2f2f2; padding:2px 8px; border-radius:10px; }

/* Sidebar aside */
.nv-pl-aside { position:sticky; top:76px; background:#fff; border-radius:14px; overflow:hidden; box-shadow:0 4px 20px rgba(0,0,0,.10); display:flex; flex-direction:column; max-height:calc(100vh - 96px); border:1px solid #f0f0f0; }

/* Sidebar head */
.nv-pl-aside__head { padding:14px 16px 12px; background:linear-gradient(135deg,#1a1a2e,#16213e); flex-shrink:0; }
.nv-pl-aside__top { display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.nv-pl-aside__top svg { flex-shrink:0; color:#ff6b6b; }
.nv-pl-aside__name { font-size:13px; font-weight:700; color:#fff; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; }
.nv-pl-aside__desc { font-size:11px; color:rgba(255,255,255,.6); margin:0 0 8px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.nv-pl-aside__meta { font-size:11px; color:rgba(255,255,255,.5); margin-bottom:10px; }

/* Progress bar */
.nv-pl-progress { height:3px; background:rgba(255,255,255,.15); border-radius:2px; overflow:hidden; }
.nv-pl-progress__bar { height:100%; background:#ff0000; border-radius:2px; transition:width .3s ease; }

/* Sort buttons */
.nv-pl-sort { display:flex; gap:4px; margin-top:10px; }
.nv-pl-sort__btn { display:inline-flex; align-items:center; gap:4px; padding:4px 10px; border-radius:12px; font-size:11px; font-weight:600; color:rgba(255,255,255,.6); text-decoration:none; background:rgba(255,255,255,.08); transition:background .15s, color .15s; }
.nv-pl-sort__btn:hover { background:rgba(255,255,255,.15); color:#fff; }
.nv-pl-sort__btn.active { background:#ff0000; color:#fff; }

/* Video list */
.nv-pl-list { overflow-y:auto; flex:1; padding:4px 0; }
.nv-pl-list::-webkit-scrollbar { width:4px; }
.nv-pl-list::-webkit-scrollbar-thumb { background:#e0e0e0; border-radius:2px; }

/* Playlist item */
.nv-pl-item { display:flex; align-items:center; gap:10px; padding:8px 12px; text-decoration:none; transition:background .12s; }
.nv-pl-item:hover { background:#fafafa; }
.nv-pl-item--active { background:#fff5f5; }

.nv-pl-item__num { width:22px; font-size:11px; color:#aaa; text-align:center; flex-shrink:0; }
.nv-pl-item--active .nv-pl-item__num { color:#ff0000; }

/* Playing animation */
.nv-pl-item__playing { display:inline-flex; align-items:flex-end; gap:2px; height:14px; }
.nv-pl-item__playing span { display:block; width:3px; background:#ff0000; border-radius:1px; animation:plBar .8s ease-in-out infinite; }
.nv-pl-item__playing span:nth-child(1) { height:6px; animation-delay:0s; }
.nv-pl-item__playing span:nth-child(2) { height:12px; animation-delay:.15s; }
.nv-pl-item__playing span:nth-child(3) { height:8px; animation-delay:.3s; }
@keyframes plBar { 0%,100% { transform:scaleY(.5); } 50% { transform:scaleY(1); } }

.nv-pl-item__thumb { position:relative; flex-shrink:0; width:112px; height:63px; border-radius:6px; overflow:hidden; background:#111; }
.nv-pl-item__thumb img { width:100%; height:100%; object-fit:cover; transition:transform .25s ease; display:block; }
.nv-pl-item:hover .nv-pl-item__thumb img { transform:scale(1.05); }
.nv-pl-item__dur { position:absolute; bottom:4px; right:4px; background:rgba(0,0,0,.85); color:#fff; font-size:10px; font-weight:700; padding:1px 4px; border-radius:3px; }
.nv-pl-item__hover-play { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.3); opacity:0; transition:opacity .2s; }
.nv-pl-item:hover .nv-pl-item__hover-play { opacity:1; }

.nv-pl-item__info { flex:1; min-width:0; }
.nv-pl-item__title { font-size:12px; font-weight:600; color:#0f0f0f; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; line-height:1.4; margin-bottom:3px; transition:color .15s; }
.nv-pl-item--active .nv-pl-item__title { color:#ff0000; }
.nv-pl-item:hover .nv-pl-item__title { color:#ff0000; }
.nv-pl-item__ch { font-size:11px; color:#909090; }

/* Playlist card (search/home) */
.nv-pl-card { border-radius:10px; overflow:hidden; background:#fff; transition:transform .22s, box-shadow .22s; }
.nv-pl-card:hover { transform:translateY(-4px); box-shadow:0 12px 28px rgba(0,0,0,.12); }
.nv-pl-card__thumbs { position:relative; width:100%; aspect-ratio:16/9; display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; gap:2px; background:#111; border-radius:10px; overflow:hidden; }
.nv-pl-card__thumbs img { width:100%; height:100%; object-fit:cover; }
.nv-pl-card__overlay { position:absolute; inset:0; background:rgba(0,0,0,.5); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; }
.nv-pl-card__count { font-size:13px; font-weight:700; color:#fff; }
.nv-pl-card__info { padding:8px 6px 4px; }
.nv-pl-card__title { font-size:13px; font-weight:600; color:#0f0f0f; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

@media(max-width:1100px) { .nv-pl-layout { grid-template-columns:1fr; } .nv-pl-aside { position:static; max-height:420px; } }
@media(max-width:768px) { .nv-pl-wrap { padding:12px 14px; } .nv-pl-item__thumb { width:90px; height:51px; } }

/* ── Search playlist card ── */
.nvsr-playlist-card { display:flex; gap:16px; padding:14px 0; border-bottom:1px solid #f5f5f5; text-decoration:none; align-items:flex-start; border-radius:10px; transition:background .15s; margin-bottom:8px; }
.nvsr-playlist-card:hover { background:#fafafa; }
.nvsr-playlist-card__thumbs { position:relative; flex-shrink:0; width:280px; height:158px; border-radius:10px; overflow:hidden; display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; gap:2px; background:#111; }
.nvsr-playlist-card__thumbs img, .nvsr-playlist-card__thumbs div { width:100%; height:100%; object-fit:cover; display:block; }
.nvsr-playlist-card__overlay { position:absolute; inset:0; background:rgba(0,0,0,.55); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; }
.nvsr-playlist-card__count { font-size:16px; font-weight:700; color:#fff; }
.nvsr-playlist-card__label { font-size:11px; color:rgba(255,255,255,.8); text-transform:uppercase; letter-spacing:.5px; }
.nvsr-playlist-card__info { flex:1; min-width:0; padding-top:4px; }
.nvsr-playlist-card__title { font-size:16px; font-weight:700; color:#0f0f0f; margin-bottom:6px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.nvsr-playlist-card__desc { font-size:13px; color:#606060; margin-bottom:6px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.nvsr-playlist-card__meta { font-size:12px; color:#909090; }
@media(max-width:520px) { .nvsr-playlist-card { flex-direction:column; } .nvsr-playlist-card__thumbs { width:100%; height:auto; aspect-ratio:16/9; } }

/* ── Suggest playlist item ── */
.nv-sug-pl { display:flex; align-items:center; gap:10px; padding:8px 14px; text-decoration:none; transition:background .12s; border-bottom:1px solid #f0f0f0; }
.nv-sug-pl:hover { background:#f5f5f5; }
.nv-sug-pl__thumbs { position:relative; flex-shrink:0; width:72px; height:40px; border-radius:5px; overflow:hidden; display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; gap:1px; background:#111; }
.nv-sug-pl__thumbs img, .nv-sug-pl__thumbs div { width:100%; height:100%; object-fit:cover; display:block; }
.nv-sug-pl__ov { position:absolute; inset:0; background:rgba(0,0,0,.5); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; }
.nv-sug-pl__ov span { font-size:10px; font-weight:700; color:#fff; }
.nv-sug-pl__info { flex:1; min-width:0; }
.nv-sug-pl__title { font-size:12px; font-weight:600; color:#111; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; }
.nv-sug-pl__meta { font-size:11px; color:#888; margin-top:2px; }

/* ── Playlist landing page ── */
.nv-pl-page { max-width: 900px; margin: 0 auto; padding-bottom: 60px; }
.nv-pl-page__hero { display:flex; gap:28px; align-items:flex-start; padding:24px 0 20px; border-bottom:1px solid #f0f0f0; margin-bottom:20px; }

/* Cover */
.nv-pl-page__cover { position:relative; flex-shrink:0; width:240px; height:135px; border-radius:12px; overflow:hidden; background:#111; box-shadow:0 4px 20px rgba(0,0,0,.2); }
.nv-pl-page__grid { display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; gap:2px; width:100%; height:100%; }
.nv-pl-page__grid img, .nv-pl-page__grid div { width:100%; height:100%; object-fit:cover; display:block; background:#222; }
.nv-pl-page__cover-overlay { position:absolute; inset:0; background:rgba(0,0,0,.45); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; }
.nv-pl-page__cover-overlay span { font-size:10px; font-weight:700; color:rgba(255,255,255,.7); letter-spacing:1.5px; }

/* Info */
.nv-pl-page__info { flex:1; min-width:0; padding-top:4px; }
.nv-pl-page__title { font-size:22px; font-weight:800; color:#0f0f0f; margin-bottom:8px; line-height:1.25; }
.nv-pl-page__desc { font-size:13px; color:#606060; margin-bottom:8px; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.nv-pl-page__meta { font-size:12px; color:#909090; margin-bottom:16px; }
.nv-pl-page__actions { display:flex; gap:10px; flex-wrap:wrap; }
.nv-pl-page__play-all { display:inline-flex; align-items:center; gap:8px; padding:10px 22px; background:#ff0000; color:#fff; border-radius:22px; font-size:14px; font-weight:700; text-decoration:none; transition:background .15s, transform .12s; }
.nv-pl-page__play-all:hover { background:#cc0000; transform:translateY(-1px); }
.nv-pl-page__shuffle { display:inline-flex; align-items:center; gap:8px; padding:10px 22px; background:#f2f2f2; color:#0f0f0f; border-radius:22px; font-size:14px; font-weight:700; text-decoration:none; transition:background .15s; }
.nv-pl-page__shuffle:hover { background:#e5e5e5; }

/* Filter bar */
.nv-pl-page__filter { display:flex; align-items:center; gap:8px; padding:12px 0; border-bottom:1px solid #f0f0f0; margin-bottom:4px; }
.nv-pl-page__filter-label { font-size:12px; color:#909090; margin-right:4px; white-space:nowrap; }
.nv-pl-page__filter-btn { display:inline-flex; align-items:center; gap:5px; padding:6px 14px; border-radius:16px; font-size:12px; font-weight:600; color:#444; background:#f2f2f2; text-decoration:none; transition:background .15s, color .15s; white-space:nowrap; }
.nv-pl-page__filter-btn:hover { background:#e5e5e5; }
.nv-pl-page__filter-btn.active { background:#0f0f0f; color:#fff; }

/* Video list items */
.nv-pl-page__list { display:flex; flex-direction:column; }
.nv-pl-page__item { display:flex; align-items:center; gap:12px; padding:10px 8px; border-radius:10px; text-decoration:none; transition:background .12s; }
.nv-pl-page__item:hover { background:#f5f5f5; }
.nv-pl-page__item-num { width:28px; font-size:13px; color:#aaa; text-align:center; flex-shrink:0; font-weight:600; }
.nv-pl-page__item-thumb { position:relative; flex-shrink:0; width:160px; height:90px; border-radius:8px; overflow:hidden; background:#111; }
.nv-pl-page__item-thumb img { width:100%; height:100%; object-fit:cover; transition:transform .25s; display:block; }
.nv-pl-page__item:hover .nv-pl-page__item-thumb img { transform:scale(1.05); }
.nv-pl-page__item-dur { position:absolute; bottom:5px; right:5px; background:rgba(0,0,0,.85); color:#fff; font-size:11px; font-weight:700; padding:2px 5px; border-radius:4px; }
.nv-pl-page__item-play { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.35); opacity:0; transition:opacity .2s; border-radius:8px; }
.nv-pl-page__item:hover .nv-pl-page__item-play { opacity:1; }
.nv-pl-page__item-info { flex:1; min-width:0; }
.nv-pl-page__item-title { font-size:14px; font-weight:600; color:#0f0f0f; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; line-height:1.4; margin-bottom:5px; transition:color .15s; }
.nv-pl-page__item:hover .nv-pl-page__item-title { color:#ff0000; }
.nv-pl-page__item-meta { font-size:12px; color:#606060; display:flex; align-items:center; gap:5px; flex-wrap:wrap; }
.nv-pl-page__item-dot { color:#ccc; }

@media(max-width:768px) {
    .nv-pl-page__hero { flex-direction:column; }
    .nv-pl-page__cover { width:100%; height:auto; aspect-ratio:16/9; }
    .nv-pl-page__item-thumb { width:120px; height:68px; }
    .nv-pl-page__item-num { display:none; }
}