:root {
    --bg:     #0a0a0a;
    --surf:   #141414;
    --brd:    rgba(255,255,255,.07);
    --text:   #e8e8f0;
    --muted:  #6b6b7a;
    --cyan:   #00e5ff;
    --purple: #9b5de5;
    --pink:   #f72585;
    --fd:     'Syne', sans-serif;
    --fb:     'DM Sans', sans-serif;

    /* ── category palette ── */
    --acc-nature:#22d37a; --bg-nature:rgba(34,211,122,.13);  --bo-nature:rgba(34,211,122,.42);
    --acc-travel:#fbbf24; --bg-travel:rgba(251,191,36,.13);  --bo-travel:rgba(251,191,36,.42);
    --acc-urban: #3b82f6; --bg-urban: rgba(59,130,246,.13);  --bo-urban: rgba(59,130,246,.42);
    --acc-sports:#f97316; --bg-sports:rgba(249,115,22,.13);  --bo-sports:rgba(249,115,22,.42);
    --acc-arts:  #e879f9; --bg-arts:  rgba(232,121,249,.13); --bo-arts:  rgba(232,121,249,.42);
    --acc-gaming:    #ff4d6d; --bg-gaming:    rgba(255,77,109,.13);  --bo-gaming:    rgba(255,77,109,.42);
    --acc-education: #34d399; --bg-education: rgba(52,211,153,.13);  --bo-education: rgba(52,211,153,.42);
    --acc-lifestyle: #a78bfa; --bg-lifestyle: rgba(167,139,250,.13); --bo-lifestyle: rgba(167,139,250,.42);
}
*,*::before,*::after{box-sizing:border-box}
body{background:var(--bg);color:var(--text);font-family:var(--fb);overflow-x:hidden;-webkit-font-smoothing:antialiased}

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

@keyframes fade-in    {from{opacity:0}to{opacity:1}}
@keyframes fade-in-up {from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
@keyframes shimmer    {0%{background-position:200% 0}100%{background-position:-200% 0}}
@keyframes fab-pulse  {0%,100%{box-shadow:0 8px 28px rgba(155,93,229,.4)}50%{box-shadow:0 8px 38px rgba(155,93,229,.65)}}
@keyframes spin-fast  {to{transform:rotate(360deg)}}

.animate-fade-in    {animation:fade-in    .6s ease both}
.animate-fade-in-up {animation:fade-in-up .7s ease both}
.delay-100{animation-delay:.1s}
.delay-200{animation-delay:.2s}

.shimmer{background:linear-gradient(90deg,#141414 25%,#1e1e1e 50%,#141414 75%);background-size:200% 100%;animation:shimmer 1.4s infinite}

/* ── gradient text ── */
.grad{background:linear-gradient(135deg,var(--cyan),var(--purple),var(--pink));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

/* ════════════════════════════════
   VIDEO CARDS
════════════════════════════════ */
.video-card{
    background:var(--surf);border-radius:18px;overflow:hidden;
    cursor:pointer;border:1.5px solid var(--brd);
    opacity:0;transform:translateY(16px);
    transition:opacity .5s,transform .5s,border-color .28s,box-shadow .28s;
    display:flex;flex-direction:column;
}
.video-card.visible{opacity:1;transform:translateY(0)}
.video-card .p-4{flex:1;display:flex;flex-direction:column}

/* coloured top accent bar per category */
.video-card::before{content:'';display:block;height:3px;border-radius:18px 18px 0 0}
.video-card[data-cat="nature"]::before{background:linear-gradient(90deg,var(--acc-nature),transparent)}
.video-card[data-cat="travel"]::before{background:linear-gradient(90deg,var(--acc-travel),transparent)}
.video-card[data-cat="urban"]::before {background:linear-gradient(90deg,var(--acc-urban), transparent)}
.video-card[data-cat="sports"]::before{background:linear-gradient(90deg,var(--acc-sports),transparent)}
.video-card[data-cat="arts"]::before  {background:linear-gradient(90deg,var(--acc-arts),  transparent)}
.video-card[data-cat="gaming"]::before    {background:linear-gradient(90deg,var(--acc-gaming),    transparent)}
.video-card[data-cat="education"]::before {background:linear-gradient(90deg,var(--acc-education), transparent)}
.video-card[data-cat="lifestyle"]::before {background:linear-gradient(90deg,var(--acc-lifestyle),  transparent)}

/* subtle category border */
.video-card[data-cat="nature"]{border-color:rgba(34,211,122,.18)}
.video-card[data-cat="travel"]{border-color:rgba(251,191,36,.18)}
.video-card[data-cat="urban"] {border-color:rgba(59,130,246,.18)}
.video-card[data-cat="sports"]{border-color:rgba(249,115,22,.18)}
.video-card[data-cat="arts"]  {border-color:rgba(232,121,249,.18)}
.video-card[data-cat="gaming"]    {border-color:rgba(255,77,109,.18)}
.video-card[data-cat="education"] {border-color:rgba(52,211,153,.18)}
.video-card[data-cat="lifestyle"] {border-color:rgba(167,139,250,.18)}

/* hover glow per category */
.video-card[data-cat="nature"]:hover{border-color:var(--bo-nature);box-shadow:0 20px 50px rgba(34,211,122,.12),0 0 0 1px var(--bo-nature);transform:translateY(-4px) scale(1.01)}
.video-card[data-cat="travel"]:hover{border-color:var(--bo-travel);box-shadow:0 20px 50px rgba(251,191,36,.12),0 0 0 1px var(--bo-travel);transform:translateY(-4px) scale(1.01)}
.video-card[data-cat="urban"]:hover {border-color:var(--bo-urban); box-shadow:0 20px 50px rgba(59,130,246,.12),0 0 0 1px var(--bo-urban); transform:translateY(-4px) scale(1.01)}
.video-card[data-cat="sports"]:hover{border-color:var(--bo-sports);box-shadow:0 20px 50px rgba(249,115,22,.12),0 0 0 1px var(--bo-sports);transform:translateY(-4px) scale(1.01)}
.video-card[data-cat="arts"]:hover  {border-color:var(--bo-arts);  box-shadow:0 20px 50px rgba(232,121,249,.12),0 0 0 1px var(--bo-arts);  transform:translateY(-4px) scale(1.01)}
.video-card[data-cat="gaming"]:hover    {border-color:var(--bo-gaming);    box-shadow:0 20px 50px rgba(255,77,109,.12), 0 0 0 1px var(--bo-gaming);    transform:translateY(-4px) scale(1.01)}
.video-card[data-cat="education"]:hover {border-color:var(--bo-education); box-shadow:0 20px 50px rgba(52,211,153,.12), 0 0 0 1px var(--bo-education); transform:translateY(-4px) scale(1.01)}
.video-card[data-cat="lifestyle"]:hover {border-color:var(--bo-lifestyle); box-shadow:0 20px 50px rgba(167,139,250,.12),0 0 0 1px var(--bo-lifestyle); transform:translateY(-4px) scale(1.01)}

.thumb-img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.6,.3,1)}
.video-card:hover .thumb-img{transform:scale(1.06)}
.play-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .28s;pointer-events:none}
.video-card:hover .play-overlay{opacity:1}

/* category badge */
.cat-badge{
    position:absolute;top:10px;left:10px;
    padding:.3rem .8rem;border-radius:9999px;
    font-size:.68rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
    /* solid dark bg + bright accent text = maximum contrast */
    background:rgba(0,0,0,.82);
    backdrop-filter:blur(6px);
    border-width:1.5px;border-style:solid;
    text-shadow:none;
    transition:transform .18s, filter .18s, box-shadow .18s;
}
.cat-badge:hover{transform:scale(1.08);filter:brightness(1.3);box-shadow:0 4px 16px rgba(0,0,0,.4)}

/* ════════════════════════════════
   FILTER PILLS
════════════════════════════════ */
.filter-btn{
    padding:.45rem 1.1rem;border-radius:9999px;font-size:.8rem;font-weight:500;
    white-space:nowrap;cursor:pointer;border:1.5px solid var(--brd);
    background:rgba(255,255,255,.04);color:var(--muted);transition:all .25s;letter-spacing:.03em
}
.filter-btn:hover{background:rgba(255,255,255,.09);color:var(--text)}
a.filter-btn{display:inline-block;text-decoration:none;line-height:normal}

.filter-btn[data-category="all"].active   {background:rgba(0,229,255,.1);   border-color:var(--cyan);       color:var(--cyan);       box-shadow:0 0 18px rgba(0,229,255,.25);    font-weight:700}
.filter-btn[data-category="nature"].active{background:var(--bg-nature);border-color:var(--acc-nature);color:var(--acc-nature);box-shadow:0 0 18px rgba(34,211,122,.22);  font-weight:700}
.filter-btn[data-category="travel"].active{background:var(--bg-travel);border-color:var(--acc-travel);color:var(--acc-travel);box-shadow:0 0 18px rgba(251,191,36,.22);  font-weight:700}
.filter-btn[data-category="urban"].active {background:var(--bg-urban); border-color:var(--acc-urban); color:var(--acc-urban); box-shadow:0 0 18px rgba(59,130,246,.22);  font-weight:700}
.filter-btn[data-category="sports"].active{background:var(--bg-sports);border-color:var(--acc-sports);color:var(--acc-sports);box-shadow:0 0 18px rgba(249,115,22,.22);  font-weight:700}
.filter-btn[data-category="arts"].active  {background:var(--bg-arts);  border-color:var(--acc-arts);  color:var(--acc-arts);  box-shadow:0 0 18px rgba(232,121,249,.22); font-weight:700}
.filter-btn[data-category="gaming"].active    {background:var(--bg-gaming);    border-color:var(--acc-gaming);    color:var(--acc-gaming);    box-shadow:0 0 18px rgba(255,77,109,.22);   font-weight:700}
.filter-btn[data-category="education"].active {background:var(--bg-education); border-color:var(--acc-education); color:var(--acc-education); box-shadow:0 0 18px rgba(52,211,153,.22);   font-weight:700}
.filter-btn[data-category="lifestyle"].active {background:var(--bg-lifestyle); border-color:var(--acc-lifestyle); color:var(--acc-lifestyle); box-shadow:0 0 18px rgba(167,139,250,.22);  font-weight:700}

.filter-btn[data-category="nature"]:not(.active):hover{border-color:rgba(34,211,122,.3); color:var(--acc-nature)}
.filter-btn[data-category="travel"]:not(.active):hover{border-color:rgba(251,191,36,.3); color:var(--acc-travel)}
.filter-btn[data-category="urban"]:not(.active):hover {border-color:rgba(59,130,246,.3); color:var(--acc-urban)}
.filter-btn[data-category="sports"]:not(.active):hover{border-color:rgba(249,115,22,.3); color:var(--acc-sports)}
.filter-btn[data-category="arts"]:not(.active):hover  {border-color:rgba(232,121,249,.3);color:var(--acc-arts)}
.filter-btn[data-category="gaming"]:not(.active):hover    {border-color:rgba(255,77,109,.3);  color:var(--acc-gaming)}
.filter-btn[data-category="education"]:not(.active):hover {border-color:rgba(52,211,153,.3);  color:var(--acc-education)}
.filter-btn[data-category="lifestyle"]:not(.active):hover {border-color:rgba(167,139,250,.3); color:var(--acc-lifestyle)}

/* ════════════════════════════════
   RANDOM FAB
════════════════════════════════ */
.random-fab{
    position:fixed;bottom:28px;right:28px;z-index:90;
    display:flex;align-items:center;gap:.55rem;
    padding:.75rem 1.3rem;border-radius:9999px;border:none;
    background:linear-gradient(135deg,#9b5de5,#7c3aed);
    color:#fff;font-size:.8rem;font-weight:700;letter-spacing:.04em;
    cursor:pointer;font-family:var(--fd);
    box-shadow:0 8px 28px rgba(155,93,229,.45);
    transition:all .3s;animation:fab-pulse 3s ease-in-out infinite
}
.random-fab:hover{transform:translateY(-3px) scale(1.05);box-shadow:0 14px 40px rgba(155,93,229,.6)}
/* FAB hidden on mobile */
@media(max-width:639px){.random-fab{display:none!important}}
.random-fab svg{transition:transform .5s}
.random-fab:hover svg{transform:rotate(360deg)}

/* ── Mobile Surprise Me inside filter bar ── */
.surprise-filter-btn{
    display:none;
    flex-shrink:0;align-items:center;gap:.45rem;
    padding:.45rem 1.1rem;border-radius:9999px;
    border:1.5px solid rgba(155,93,229,.45);
    background:rgba(155,93,229,.13);
    color:#c084fc;font-size:.8rem;font-weight:700;letter-spacing:.03em;
    cursor:pointer;font-family:var(--fd);
    transition:all .25s;white-space:nowrap;
    -webkit-tap-highlight-color:transparent;touch-action:manipulation;
}
.surprise-filter-btn svg{transition:transform .45s}
.surprise-filter-btn:hover,
.surprise-filter-btn:active{background:rgba(155,93,229,.28);border-color:rgba(155,93,229,.7);color:#e9d5ff}
.surprise-filter-btn:active svg{transform:rotate(180deg)}
@media(max-width:639px){.surprise-filter-btn{display:flex}}

/* ════════════════════════════════
   VOICE SEARCH BUTTONS
════════════════════════════════ */
.voice-btn{
    display:flex;align-items:center;justify-content:center;
    width:28px;height:28px;flex-shrink:0;margin-right:4px;
    background:transparent;border:none;cursor:pointer;
    color:#3b82f6;transition:color .2s,transform .2s,background .2s;border-radius:50%;
}
.voice-btn:hover{color:#60a5fa;transform:scale(1.15)}
.voice-btn.listening{color:#ef4444!important;background:rgba(239,68,68,.13)!important;}

/* ════════════════════════════════
   VOICE OVERLAY
════════════════════════════════ */
@keyframes vo-fade-in   {from{opacity:0}to{opacity:1}}
@keyframes vo-card-up   {from{opacity:0;transform:translateY(40px) scale(.93)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes vo-ring-out  {0%{transform:scale(.9);opacity:.8}100%{transform:scale(2.6);opacity:0}}
@keyframes vo-ring-out2 {0%{transform:scale(.9);opacity:.6}100%{transform:scale(3.2);opacity:0}}
@keyframes vo-ring-out3 {0%{transform:scale(.9);opacity:.4}100%{transform:scale(3.8);opacity:0}}
@keyframes vo-mic-beat  {0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(239,68,68,.7)}
                          50%{transform:scale(1.07);box-shadow:0 0 0 22px rgba(239,68,68,0)}}
@keyframes vo-bar       {0%,100%{transform:scaleY(.28)}50%{transform:scaleY(1)}}
@keyframes vo-text-blink{0%,100%{opacity:1}50%{opacity:.45}}

#voiceOverlay{
    position:fixed;inset:0;z-index:9999;
    display:none;align-items:center;justify-content:center;
    background:rgba(4,4,10,.92);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);
    animation:vo-fade-in .2s ease both;
}
#voiceOverlay.active{display:flex}

.vo-card{
    display:flex;flex-direction:column;align-items:center;gap:1.6rem;
    padding:3.2rem 3.8rem 2.6rem;border-radius:36px;
    background:rgba(16,16,24,.98);
    border:1.5px solid rgba(255,255,255,.08);
    box-shadow:0 48px 120px rgba(0,0,0,.75),0 0 0 1px rgba(239,68,68,.06);
    animation:vo-card-up .32s cubic-bezier(.22,.9,.36,1) both;
    min-width:320px;max-width:88vw;
}

/* ripple rings */
.vo-ripple{position:relative;display:flex;align-items:center;justify-content:center;width:160px;height:160px}
.vo-ring{
    position:absolute;inset:0;border-radius:50%;
    border:2px solid rgba(239,68,68,.55);
    opacity:0;
}
#voiceOverlay.recording .vo-ring:nth-child(1){animation:vo-ring-out 1.6s ease-out infinite}
#voiceOverlay.recording .vo-ring:nth-child(2){animation:vo-ring-out2 1.6s ease-out .28s infinite}
#voiceOverlay.recording .vo-ring:nth-child(3){animation:vo-ring-out3 1.6s ease-out .56s infinite}

/* big mic circle */
.vo-mic-circle{
    width:104px;height:104px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    background:linear-gradient(145deg,#c81f1f,#ef4444,#f87171);
    box-shadow:0 12px 48px rgba(239,68,68,.55);
    position:relative;z-index:2;
    transition:box-shadow .3s;
}
#voiceOverlay.recording .vo-mic-circle{
    animation:vo-mic-beat 1.15s ease-in-out infinite;
}

/* sound bars */
.vo-bars{display:flex;align-items:flex-end;gap:5px;height:34px;opacity:0;transition:opacity .25s}
#voiceOverlay.recording .vo-bars{opacity:1}
.vo-bars span{
    display:block;width:5px;border-radius:3px;
    background:linear-gradient(to top,#ef4444,#fb923c);
    transform-origin:bottom;
}
.vo-bars span:nth-child(1){height:10px;animation:vo-bar 1.0s .00s infinite ease-in-out}
.vo-bars span:nth-child(2){height:22px;animation:vo-bar 1.0s .13s infinite ease-in-out}
.vo-bars span:nth-child(3){height:32px;animation:vo-bar 1.0s .26s infinite ease-in-out}
.vo-bars span:nth-child(4){height:22px;animation:vo-bar 1.0s .39s infinite ease-in-out}
.vo-bars span:nth-child(5){height:12px;animation:vo-bar 1.0s .52s infinite ease-in-out}

.vo-label{font-size:1.15rem;font-weight:700;color:var(--text);font-family:var(--fd);letter-spacing:.04em;text-align:center}
#voiceOverlay.recording .vo-label{animation:vo-text-blink 1.8s ease-in-out infinite}
.vo-sub{font-size:.8rem;color:var(--muted);text-align:center;margin-top:-.8rem}
.vo-transcript{
    min-height:1.4rem;font-size:1rem;color:var(--cyan);
    font-weight:600;text-align:center;max-width:260px;
    word-break:break-word;transition:all .2s;
}
.vo-cancel{
    padding:.52rem 1.9rem;border-radius:9999px;
    background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.13);
    color:var(--muted);font-size:.82rem;font-weight:600;
    cursor:pointer;transition:all .2s;font-family:var(--fb);
}
.vo-cancel:hover{background:rgba(255,255,255,.12);color:var(--text);border-color:rgba(255,255,255,.25)}

/* ════════════════════════════════
   ADSENSE helpers
════════════════════════════════ */
.ad-native-wrap{position:relative;border-radius:14px;border:1px solid var(--brd);background:rgba(255,255,255,.02);padding:.5rem}
.ad-label{display:inline-block;font-size:.6rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding:.2rem .6rem;border-radius:4px;background:rgba(255,255,255,.04);margin-bottom:.3rem}
.ad-cta-wrap{border-radius:18px;padding:2px;background:linear-gradient(135deg,rgba(0,229,255,.18),rgba(155,93,229,.18),rgba(247,37,133,.12))}
.ad-cta-inner{border-radius:16px;background:rgba(10,10,10,.95);padding:1rem 1.2rem;overflow:hidden}
.ad-cta-label{display:flex;align-items:center;gap:.5rem;font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin-bottom:.6rem;background:linear-gradient(90deg,var(--cyan),var(--purple));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.ad-cta-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--cyan);animation:fab-pulse 1.8s infinite;flex-shrink:0}

/* ════════════════════════════════
   MODAL
════════════════════════════════ */
#videoModal .modal-bg{background:rgba(0,0,0,.97);backdrop-filter:blur(20px)}

.modal-top-ad{flex-shrink:0;background:rgba(0,0,0,.4);border-bottom:1px solid rgba(255,255,255,.05);min-height:0;overflow:hidden}

.modal-bar{
    flex-shrink:0;display:flex;align-items:center;gap:6px;
    padding:10px 12px;
    background:rgba(6,6,10,.97);backdrop-filter:blur(16px);
    border-top:1px solid rgba(255,255,255,.07);
    flex-wrap:nowrap;overflow-x:auto;
}
/* ── Prev / Next ── */
.mbar-nav{
    display:flex;align-items:center;gap:6px;
    padding:0 14px;height:46px;min-width:46px;border-radius:12px;
    border:1.5px solid rgba(255,255,255,.12);background:rgba(255,255,255,.07);
    color:rgba(255,255,255,.82);cursor:pointer;
    font-size:.78rem;font-weight:700;letter-spacing:.04em;
    transition:all .2s;flex-shrink:0;font-family:var(--fd);
    -webkit-tap-highlight-color:transparent;touch-action:manipulation;
}
.mbar-nav:hover{background:rgba(0,229,255,.13);border-color:rgba(0,229,255,.55);color:var(--cyan);box-shadow:0 0 22px rgba(0,229,255,.2);transform:scale(1.04)}
.mbar-nav:disabled{opacity:.18;cursor:not-allowed;transform:none!important;box-shadow:none!important}
@media(max-width:520px){
    .mbar-nav span{display:none}
    .mbar-nav{padding:0;width:46px;justify-content:center}
}

/* ── Surprise ── */
.mbar-surprise{
    display:flex;align-items:center;gap:6px;
    padding:0 14px;height:46px;border-radius:12px;
    border:1.5px solid rgba(155,93,229,.4);background:rgba(155,93,229,.14);
    color:#c084fc;cursor:pointer;
    font-size:.77rem;font-weight:700;letter-spacing:.03em;
    transition:all .2s;flex-shrink:0;font-family:var(--fd);
    -webkit-tap-highlight-color:transparent;touch-action:manipulation;
}
.mbar-surprise:hover{background:rgba(155,93,229,.28);border-color:rgba(155,93,229,.7);color:#e9d5ff;box-shadow:0 0 22px rgba(155,93,229,.35);transform:scale(1.04)}
.mbar-surprise svg{transition:transform .45s}
.mbar-surprise:hover svg{transform:rotate(180deg)}
@media(max-width:520px){
    .mbar-surprise .mbar-surprise-label{display:none}
    .mbar-surprise{padding:0;width:46px;justify-content:center}
}

/* ── Category chip ── */
.mbar-cat-chip{
    display:flex;align-items:center;gap:5px;
    padding:0 13px;height:34px;border-radius:9999px;
    border:1.5px solid transparent;background:transparent;
    cursor:pointer;font-size:.72rem;font-weight:700;
    letter-spacing:.07em;text-transform:uppercase;
    transition:all .2s;flex-shrink:0;
    -webkit-tap-highlight-color:transparent;touch-action:manipulation;
}
.mbar-cat-chip:hover{transform:scale(1.07);filter:brightness(1.25)}
@media(max-width:400px){.mbar-cat-chip{display:none}}

.mbar-counter{font-size:.7rem;font-weight:600;color:rgba(255,255,255,.32);letter-spacing:.07em;font-variant-numeric:tabular-nums;padding:0 4px;white-space:nowrap}

/* ── VR deep-link button (mobile only) ── */
.mbar-vr-btn{
    display:none;align-items:center;gap:5px;
    padding:0 12px;height:46px;border-radius:12px;
    border:1.5px solid rgba(0,229,255,.35);background:rgba(0,229,255,.1);
    color:var(--cyan);text-decoration:none;
    font-size:.72rem;font-weight:700;letter-spacing:.04em;
    transition:all .2s;flex-shrink:0;font-family:var(--fd);
    -webkit-tap-highlight-color:transparent;touch-action:manipulation;
}
.mbar-vr-btn:hover,.mbar-vr-btn:active{background:rgba(0,229,255,.22);border-color:var(--cyan)}
@media(max-width:639px){.mbar-vr-btn{display:flex}}

/* ── Close ── */
.mbar-close{
    width:48px;height:48px;display:flex;align-items:center;justify-content:center;
    border-radius:12px;border:2px solid rgba(255,80,80,.35);
    background:rgba(255,80,80,.12);color:#fca5a5;
    cursor:pointer;transition:all .2s;flex-shrink:0;
    -webkit-tap-highlight-color:transparent;touch-action:manipulation;
}
.mbar-close:hover{background:rgba(255,80,80,.28);border-color:rgba(255,80,80,.7);color:#fff;transform:scale(1.08);box-shadow:0 0 20px rgba(255,80,80,.3)}
.mbar-close:active{transform:scale(.95)}

/* floating close FAB — disabled */
.modal-close-fab{display:none!important}

.modal-sidebar{
    width:260px;flex-shrink:0;
    background:rgba(5,5,8,.98);border-left:1px solid rgba(255,255,255,.07);
    display:flex;flex-direction:column;overflow:hidden
}
@media(max-width:768px){.modal-sidebar{width:140px}}
@media(max-width:480px){.modal-sidebar{display:none}}

.sthumb{
    flex-shrink:0;border-radius:10px;overflow:hidden;
    cursor:pointer;border:1.5px solid rgba(255,255,255,.07);
    transition:border-color .2s,transform .2s,box-shadow .2s;
    position:relative;background:#0f0f13
}
.sthumb:hover{border-color:rgba(255,255,255,.25);transform:scale(1.02)}
.sthumb.sthumb-active{border-color:var(--cyan)!important;box-shadow:0 0 0 2px rgba(0,229,255,.2),0 4px 16px rgba(0,229,255,.1)}
.sthumb img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;opacity:.72;transition:opacity .2s}
.sthumb:hover img,.sthumb.sthumb-active img{opacity:1}
.sthumb-stripe{position:absolute;left:0;top:0;bottom:0;width:4px}
.sthumb-play{display:none;position:absolute;inset:0;align-items:center;justify-content:center;background:rgba(0,0,0,.38);font-size:1.4rem}
.sthumb.sthumb-active .sthumb-play{display:flex}
.sthumb-badge{position:absolute;top:5px;right:5px;padding:.18rem .55rem;border-radius:9999px;font-size:.6rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;backdrop-filter:blur(6px)}
.modal-sidebar-ad{flex-shrink:0;padding:6px 8px;border-top:1px solid rgba(255,255,255,.05)}

/* ── Pagination ── */
.page-btn {
    min-width:40px; height:40px; padding:0 8px;
    display:flex; align-items:center; justify-content:center;
    border-radius:10px;
    border:1.5px solid var(--brd);
    background:rgba(255,255,255,.04);
    color:var(--muted);
    font-size:.85rem; font-weight:600;
    cursor:pointer;
    transition:all .2s;
    font-family:var(--fd);
}
.page-btn:hover {
    background:rgba(255,255,255,.1);
    border-color:rgba(255,255,255,.2);
    color:var(--text);
    transform:scale(1.06);
}
.page-btn.active {
    background:var(--cyan);
    border-color:var(--cyan);
    color:#000;
    font-weight:800;
    box-shadow:0 0 20px rgba(0,229,255,.35);
    transform:scale(1.08);
}
.page-btn:disabled {
    opacity:.25;
    cursor:not-allowed;
    transform:none!important;
}
.page-ellipsis {
    width:32px; height:40px;
    display:flex; align-items:center; justify-content:center;
    color:var(--muted); font-size:.85rem; letter-spacing:.1em;
}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ════════════════════════════════
   SEARCH BAR
════════════════════════════════ */

/* suggestion chips */
.search-chips{
    display:flex;flex-wrap:wrap;gap:.55rem;margin-top:.9rem;align-items:center;
}
.search-chip-label{font-size:.72rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-right:.2rem}
.search-chip{
    padding:.3rem .85rem;border-radius:9999px;font-size:.78rem;font-weight:600;
    cursor:pointer;border:1.5px solid rgba(0,229,255,.22);
    background:rgba(0,229,255,.06);color:rgba(0,229,255,.8);
    transition:all .2s;letter-spacing:.02em;
}
.search-chip:hover{background:rgba(0,229,255,.15);border-color:var(--cyan);color:var(--cyan);transform:translateY(-1px)}
.chip-refresh{
    display:flex;align-items:center;gap:.3rem;
    padding:.3rem .75rem;border-radius:9999px;font-size:.72rem;font-weight:600;
    cursor:pointer;border:1.5px solid rgba(255,255,255,.1);
    background:rgba(255,255,255,.04);color:var(--muted);
    transition:all .2s;letter-spacing:.03em;
}
.chip-refresh:hover{background:rgba(255,255,255,.09);color:var(--text);border-color:rgba(255,255,255,.22)}
.chip-refresh svg{transition:transform .45s}
.chip-refresh:hover svg{transform:rotate(180deg)}

/* search results state */
#searchBanner{
    display:none;align-items:center;justify-content:space-between;gap:1rem;
    padding:.65rem 1rem;border-radius:12px;margin-bottom:1.2rem;
    background:rgba(0,229,255,.07);border:1px solid rgba(0,229,255,.18);
    font-size:.85rem;color:var(--cyan);flex-wrap:wrap;
}
#searchBanner.visible{display:flex}
#searchBanner button{
    padding:.28rem .8rem;border-radius:9999px;font-size:.75rem;font-weight:700;
    background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);
    color:var(--text);cursor:pointer;transition:all .2s;
}
#searchBanner button:hover{background:rgba(255,80,80,.15);border-color:rgba(255,80,80,.3);color:#fca5a5}

#noResults{display:none;text-align:center;padding:4rem 1rem;color:var(--muted)}
#noResults.visible{display:block}
#noResults h3{font-size:1.25rem;font-weight:700;color:var(--text);margin-bottom:.5rem;font-family:var(--fd)}
#navSearchBox:focus-within{border-color:rgba(0,229,255,.45);box-shadow:0 0 0 2px rgba(0,229,255,.12);background:rgba(255,255,255,.07)}