.naba-yt{--naba-cols:4;--naba-accent:#0b2a5b;--naba-ink:#14213d;margin:2em 0;font-family:var(--naba-font,inherit)}
.naba-yt-heading{margin:0 0 14px;color:var(--naba-accent);border-left:5px solid var(--naba-accent);padding-left:12px;line-height:1.2}

/* toolbar */
.naba-yt-bar{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center;margin-bottom:10px}
.naba-yt-search{display:flex;flex:1 1 280px;max-width:480px;gap:0;align-items:stretch}
.naba-yt-input{flex:1;min-width:0;padding:11px 14px;border:1px solid #cdd5e4;border-right:0;border-radius:8px 0 0 8px;font:inherit;background:#fff;color:#111;box-shadow:none;margin:0}
.naba-yt-input:focus{outline:0;border-color:var(--naba-accent)}
.naba-yt-go{background:var(--naba-accent);color:#fff;border:0;padding:0 22px;border-radius:0 8px 8px 0;font:inherit;font-weight:700;cursor:pointer}
.naba-yt-go:hover{opacity:.9}
.naba-yt-clear{background:none;border:0;color:var(--naba-accent);font:inherit;font-weight:600;cursor:pointer;padding:0 10px;text-decoration:underline}
.naba-yt-clear[hidden],.naba-yt-more-wrap[hidden]{display:none}
.naba-yt-sort{display:flex;gap:6px}
.naba-yt-sort button{background:#fff;color:var(--naba-accent);border:1px solid var(--naba-accent);padding:9px 18px;border-radius:999px;font:inherit;font-weight:600;cursor:pointer}
.naba-yt-sort button.is-on{background:var(--naba-accent);color:#fff}
.naba-yt-count{font-size:13px;opacity:.65;margin:0 0 14px}

/* grid + cards */
.naba-yt-grid{display:grid;grid-template-columns:repeat(var(--naba-cols),1fr);gap:22px 18px;transition:opacity .2s}
.naba-yt.is-loading .naba-yt-grid{opacity:.45}
.naba-yt-card{display:flex;flex-direction:column;background:#fff;border:1px solid #e1e7f1;border-radius:12px;overflow:hidden;box-shadow:0 1px 4px rgba(11,42,91,.07);text-decoration:none!important;color:var(--naba-ink)!important;transition:transform .2s,box-shadow .2s,border-color .2s}
.naba-yt-card:hover{transform:translateY(-4px);box-shadow:0 10px 24px rgba(11,42,91,.16);border-color:var(--naba-accent)}
.naba-yt-thumb{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:#0d1626}
.naba-yt--reels .naba-yt-thumb{aspect-ratio:9/16}
.naba-yt-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s;margin:0}
.naba-yt-card:hover .naba-yt-thumb img{transform:scale(1.06)}
.naba-yt-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(transparent 55%,rgba(0,0,0,.4))}
.naba-yt-play::before{content:"";width:50px;height:50px;border-radius:50%;background:var(--naba-accent);box-shadow:0 2px 10px rgba(0,0,0,.35);transition:transform .2s}
.naba-yt-play::after{content:"";position:absolute;border-left:15px solid #fff;border-top:9px solid transparent;border-bottom:9px solid transparent;margin-left:4px}
.naba-yt-card:hover .naba-yt-play::before{transform:scale(1.12)}
.naba-yt-dur{position:absolute;right:8px;bottom:8px;background:rgba(0,0,0,.82);color:#fff;font-size:12px;font-weight:600;padding:2px 6px;border-radius:4px}
.naba-yt-body{display:flex;flex-direction:column;gap:6px;padding:12px 14px 14px;border-top:3px solid var(--naba-accent);flex:1}
.naba-yt-title{font-weight:700;font-size:15px;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.naba-yt-card:hover .naba-yt-title{color:var(--naba-accent)}
.naba-yt-meta{font-size:12.5px;opacity:.65;margin-top:auto}
.naba-yt-empty{grid-column:1/-1;text-align:center;padding:40px 0;opacity:.7}
.naba-yt-error{padding:12px;background:#fff3cd;border-left:4px solid #e0a800}

/* load more */
.naba-yt-more-wrap{text-align:center;margin-top:28px}
.naba-yt-more{background:var(--naba-accent);color:#fff;border:0;padding:12px 36px;border-radius:999px;font:inherit;font-weight:700;cursor:pointer}
.naba-yt-more:hover{opacity:.9}

/* popup player */
.naba-yt-modal{position:fixed;inset:0;z-index:99999;background:rgba(0,0,0,.88);display:flex;align-items:center;justify-content:center;padding:20px}
.naba-yt-modal[hidden]{display:none}
.naba-yt-frame{width:min(1000px,100%);aspect-ratio:16/9;background:#000}
.naba-yt-frame.is-reel{width:min(380px,100%);aspect-ratio:9/16;max-height:90vh}
.naba-yt-frame iframe{width:100%;height:100%;border:0}
.naba-yt-close{position:absolute;top:14px;right:20px;color:#fff;background:none;border:0;font-size:38px;line-height:1;cursor:pointer}

@media(max-width:900px){
 .naba-yt--videos .naba-yt-grid{grid-template-columns:repeat(min(var(--naba-cols),2),1fr)}
 .naba-yt--reels .naba-yt-grid{grid-template-columns:repeat(min(var(--naba-cols),3),1fr)}
}
@media(max-width:560px){
 .naba-yt--videos .naba-yt-grid{grid-template-columns:1fr}
 .naba-yt--reels .naba-yt-grid{grid-template-columns:repeat(2,1fr);gap:14px 12px}
 .naba-yt-search{max-width:none}
}

/* Dhivehi (right-to-left) */
.naba-yt--rtl .naba-yt-heading{border-left:0;border-right:5px solid var(--naba-accent);padding-left:0;padding-right:12px}
.naba-yt--rtl .naba-yt-input{border:1px solid #cdd5e4;border-left:0;border-radius:0 8px 8px 0}
.naba-yt--rtl .naba-yt-input:focus{border-color:var(--naba-accent)}
.naba-yt--rtl .naba-yt-go{border-radius:8px 0 0 8px}
.naba-yt--rtl .naba-yt-dur{right:auto;left:8px}
.naba-yt--rtl .naba-yt-title{font-size:16px;line-height:1.8}
.naba-yt--rtl .naba-yt-meta,.naba-yt--rtl .naba-yt-count{font-size:13.5px}
.naba-yt--rtl .naba-yt-sort button,.naba-yt--rtl .naba-yt-more,.naba-yt--rtl .naba-yt-go{line-height:1.7}

/* =====================  Full video page  ===================== */
.naba-hub{--naba-cols:4;margin:0}
.naba-hub--fw{width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
body.naba-hub-body{overflow-x:hidden}
.naba-hub-inner{max-width:1400px;margin:0 auto;padding:30px 24px 60px}

.naba-hub-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px;margin-bottom:26px;padding-bottom:16px;border-bottom:3px solid var(--naba-accent)}
.naba-hub-title{margin:0;font-size:36px;line-height:1.2;color:var(--naba-accent)}
.naba-hub-count{margin:6px 0 0;opacity:.65;font-size:14.5px}
.naba-hub-yt{display:inline-flex;align-items:center;gap:8px;background:var(--naba-accent);color:#fff!important;padding:11px 24px;border-radius:999px;font-weight:700;text-decoration:none!important;transition:opacity .2s,transform .2s}
.naba-hub-yt::before{content:"";border-left:10px solid #fff;border-top:6px solid transparent;border-bottom:6px solid transparent}
.naba-hub-yt:hover{opacity:.9;transform:translateY(-1px)}

/* featured video + latest list */
.naba-hub-hero{display:grid;grid-template-columns:minmax(0,2fr) minmax(300px,1fr);gap:26px;margin-bottom:40px;align-items:start}
.naba-hub-screen{position:relative;aspect-ratio:16/9;background:#0d1626;border-radius:14px;overflow:hidden;cursor:pointer;box-shadow:0 10px 32px rgba(11,42,91,.22)}
.naba-hub-screen img{width:100%;height:100%;object-fit:cover;display:block;margin:0}
.naba-hub-screen iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.naba-hub-screen.is-playing{cursor:default}
.naba-hub-screen .naba-yt-play::before{width:78px;height:78px}
.naba-hub-screen .naba-yt-play::after{border-left-width:24px;border-top-width:15px;border-bottom-width:15px;margin-left:6px}
.naba-hub-ftitle{margin:16px 0 6px;font-size:27px;line-height:1.5;color:var(--naba-ink)}
.naba-hub-fmeta{opacity:.65;font-size:14.5px}

.naba-hub-latest{background:#fff;border:1px solid #e1e7f1;border-radius:14px;overflow:hidden;box-shadow:0 1px 4px rgba(11,42,91,.07)}
.naba-hub-lhead{margin:0;padding:13px 18px;background:var(--naba-accent);color:#fff;font-size:18px;line-height:1.6}
.naba-hub-list{max-height:600px;overflow-y:auto}
.naba-hub-li{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-bottom:1px solid #edf0f6;border-inline-start:4px solid transparent;text-decoration:none!important;color:var(--naba-ink)!important;transition:background .15s}
.naba-hub-li:hover{background:#f4f7fc}
.naba-hub-li.is-on{background:#eaf0fa;border-inline-start-color:var(--naba-accent)}
.naba-hub-lthumb{position:relative;flex:0 0 132px;aspect-ratio:16/9;border-radius:8px;overflow:hidden;background:#0d1626}
.naba-hub-lthumb img{width:100%;height:100%;object-fit:cover;display:block;margin:0}
.naba-hub-lthumb .naba-yt-dur{right:4px;bottom:4px;font-size:11px;padding:1px 5px}
.naba-hub-ltext{display:flex;flex-direction:column;gap:5px;min-width:0}
.naba-hub-ltitle{font-weight:700;font-size:15px;line-height:1.55;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.naba-hub-lmeta{font-size:12.5px;opacity:.65}

/* reels row (9:16) */
.naba-hub-sechead{display:flex;justify-content:space-between;align-items:center;margin:4px 0 14px}
.naba-hub-sechead h3{margin:0;font-size:26px;line-height:1.4;color:var(--naba-accent);border-inline-start:5px solid var(--naba-accent);padding-inline-start:12px}
.naba-hub-seeall{background:none;border:0;color:var(--naba-accent);font:inherit;font-weight:700;cursor:pointer;text-decoration:underline}
.naba-hub-railwrap{position:relative;margin-bottom:40px}
.naba-hub-rail{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 2px 14px;scrollbar-width:thin}
.naba-hub-rail .naba-yt-card{flex:0 0 clamp(150px,15.5vw,215px);scroll-snap-align:start}
.naba-hub-rail .naba-yt-thumb{aspect-ratio:9/16}
.naba-hub-arrow{position:absolute;top:34%;z-index:2;width:44px;height:44px;border-radius:50%;border:0;background:var(--naba-accent);color:#fff;font-size:26px;line-height:1;cursor:pointer;box-shadow:0 2px 10px rgba(0,0,0,.3)}
.naba-hub-arrow[data-step=prev]{inset-inline-start:-12px}
.naba-hub-arrow[data-step=next]{inset-inline-end:-12px}
.naba-yt--rtl .naba-hub-arrow{transform:scaleX(-1)}

/* tabs + search + sort */
.naba-hub-bar{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin:4px 0 8px;padding:14px 0;border-top:1px solid #e1e7f1}
.naba-hub-tabs{display:flex;border:2px solid var(--naba-accent);border-radius:999px;overflow:hidden}
.naba-hub-tabs button{background:#fff;color:var(--naba-accent);border:0;padding:10px 28px;font:inherit;font-weight:700;cursor:pointer}
.naba-hub-tabs button.is-on{background:var(--naba-accent);color:#fff}
.naba-hub-bar .naba-yt-search{flex:1 1 260px;max-width:520px;margin-inline-start:auto}

/* bigger cards on the full page */
.naba-hub .naba-yt-grid{gap:28px 22px}
.naba-hub .naba-yt-title{font-size:16.5px}
.naba-hub .naba-yt-body{padding:14px 16px 16px}
.naba-hub .naba-yt-count{font-size:14px}
.naba-hub.naba-yt--reels .naba-yt-grid{gap:22px 16px}
.naba-hub.naba-yt--reels .naba-yt-title{font-size:15px}
.naba-hub-main{display:block;width:100%}

@media(max-width:1000px){
 .naba-hub-hero{grid-template-columns:1fr}
 .naba-hub-list{max-height:none}
 .naba-hub-bar .naba-yt-search{margin-inline-start:0;max-width:none}
}
@media(max-width:560px){
 .naba-hub-inner{padding:20px 14px 44px}
 .naba-hub-title{font-size:28px}
 .naba-hub-ftitle{font-size:21px}
 .naba-hub-lthumb{flex-basis:112px}
 .naba-hub-arrow{display:none}
 .naba-hub-rail .naba-yt-card{flex-basis:44vw}
}