/* ============================================================
   SKROLLBAR — butun sayt bo'yicha ingichka va xira (standart qalin,
   yorqin brauzer skrolli o'rniga). Firefox uchun scrollbar-width/-color,
   Chrome/Safari/Edge uchun ::-webkit-scrollbar. */
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    /* Telefon/planshetda tugma bosilganda chiqadigan standart ko'k/kulrang
       "tap highlight" (link bosilganidek) yaltillashini o'chiradi. Haqiqiy
       :hover/:active effektlar (agar bo'lsa) shu bilan yo'qolmaydi — faqat
       brauzerning o'ziga xos qo'shimcha rangi olib tashlanadi. */
    -webkit-tap-highlight-color: transparent;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.18) transparent;
}
*::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
*::-webkit-scrollbar-track {
    background: transparent;
}
*::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,.18);
    border-radius: 10px;
}
*::-webkit-scrollbar-thumb:hover {
    background: rgba(255,255,255,.3);
}
/* ============================================================ */

html{
    scroll-behavior:smooth;
}

body{
    font-family:"Segoe UI",Arial,sans-serif;
    background:#0b0f17;
    color:#f3f4f6;
    min-height:100vh;
    overflow-x:hidden;
    line-height:1.5;
}

/* Sichqoncha (haqiqiy hover) mavjud qurilmalarda ishlaydi. Telefon/planshet
   kabi faqat barmoq bilan boshqariladigan qurilmalarda :hover bosgandan
   keyin "yopishib qolgani" (chunki haqiqiy hover yo'q, brauzer bosishni
   ba'zan hover deb hisoblab, keyingi bosishgacha shu holatda saqlaydi)
   oldini olish uchun shu holatlar FAQAT haqiqiy hover mavjud bo'lganda
   ishlaydi. */
@media (hover: hover) and (pointer: fine) {
    .menu-item:hover{
        background: #1f2937;
        color: #ffffff;
        transform: translateX(4px);
    }
}
@media (hover: none), (pointer: coarse) {
    .menu-item:active{
        background: #1f2937;
        color: #ffffff;
    }
}

.header{
    position:fixed;
    top:0;
    left:0;
    right:0;

    height:70px;

    display:flex;
    align-items:center;
    justify-content:space-between;

    padding:0 24px;

    background:rgba(11,15,23,.95);

    backdrop-filter:blur(12px);

    border-bottom:1px solid rgba(255,255,255,.06);

    box-shadow:0 4px 20px rgba(0,0,0,.25);

    z-index:1000;
}

.page-wrapper{
    display:flex;
    margin-top:70px;
    min-height:calc(100vh - 70px);
}

.sidebar{
    width:240px;
    min-height:calc(100vh - 70px);
    background:#111827;
    border-right:1px solid rgba(255,255,255,.06);
    padding:18px 0;
    flex-shrink:0;
    /* MUHIM: sidebar flex-qatorning bo'yiga (align-items:stretch, standart)
       cho'zilib, ro'yxat uzun bo'lganda main-content bilan bir xil (juda
       katta) balandlikka ega bo'lib qolardi — lekin ichidagi havolalar
       faqat shu balandlikning ENG YUQORISIDA turadi. Natijada pastga
       skroll qilinganda menyu ochilsa, havolalar ko'rinmay (sahifaning
       yuqorisida qolib) "bo'sh" ko'rinardi. position:sticky + align-self
       bilan sidebar hech qachon bitta ekrandan uzun bo'lmaydi va skroll
       qilinganda ham har doim ko'rinishda qoladi. */
    position:sticky;
    top:70px;
    align-self:flex-start;
    overflow-y:auto;
    max-height:calc(100vh - 70px);
}

.sidebar-menu{
    display:flex;
    flex-direction:column;
    gap:4px;
}

.menu-item{
    color:#d1d5db;
    text-decoration:none;

    padding:14px 20px;

    margin:0 10px;

    border-radius:12px;

    transition:.25s;
}

.menu-item:hover{
    background:#1f2937;
    color:#fff;
    transform:translateX(4px);
}

.main-content{
    flex:1;
    min-width:0;
    padding:20px;
}

.categories-section{
    width: 100%;
}

body{
    overflow-x:hidden;
}

/* *{
 outline:0.1px solid red;
}
 */

.categories-row{
    width: 100%;
    display:flex;
    gap:15px;
    overflow-x:auto;
    --chip-bar-outer-margin: 12px;
    /* white-space: nowrap; */
    overflow-x: auto;
    overflow-y: hidden;
    /* height: 48px; */
}

.category-btn{
    height: 32px;
    min-width: 88px;
    text-align: center;
    padding: 15px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    box-sizing: border-box;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    border-radius: 8px;
    border: 0;
    background:#1f2937;
    font-family: Roboto, "Arial", sans-serif;
    font-size: 1.4rem;
    line-height: 2rem;
    font-weight: 500;
    cursor: pointer;
    flex-shrink: 0;
}

/* scrollbarni yashirish */
.categories-row::-webkit-scrollbar{
    display: none;
}

.category-btn.active{
    background:#2563eb;
    color:#fff;
}

.search-box{
    display:flex;
    align-items:center;
    gap:10px;
}

.search-input{
    flex:1;
    padding:12px 16px;
    background:#111827;
    color:#fff;
    border:1px solid rgba(255,255,255,.08);
    border-radius:12px;
    outline:none;
    transition:.25s;
}

.search-input:focus{
    border-color:#2563eb;
    box-shadow:0 0 0 3px rgba(37,99,235,.2);
}

.logo{
    font-size:26px;
    font-weight:700;
    color:#fff;
    cursor:pointer;
    user-select:none;
}

.logo span{
    color:#3b82f6;
}

.user-profile{
    display:flex;
    align-items:center;
    gap:12px;
}

.avatar{
    width:40px;
    height:40px;
    border-radius:50%;
    object-fit:cover;
    border:2px solid rgba(255,255,255,.15);
}

.username{
    color:#e5e7eb;
    font-weight:600;
}

.search-btn{
    margin-left:10px;
    background:#2563eb;
    color:#fff;
    border:none;
    padding:12px 20px;
    border-radius:12px;
    cursor:pointer;
    transition:.25s;
}

.search-btn:hover{
    background:#1d4ed8;
}

@media (hover: hover) and (pointer: fine) {
    .category-btn:hover:not(.active){
        background:#374151;
        color:#fff;
    }
}

.playlist-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
    gap:24px;
    margin-top:25px;
}

@media (hover: hover) and (pointer: fine) {
    .playlist-card:hover{
        transform:translateY(-8px);
        box-shadow:0 18px 40px rgba(0,0,0,.4);
    }
    .playlist-card:hover .playlist-thumbnail img{
        transform:scale(1.08);
    }
}

.playlist-card{
    background:#111827;
    border-radius:18px;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.06);
    transition:.25s;
    cursor:pointer;
    position:relative;
}

.playlist-thumbnail{
    position:relative;
    overflow:hidden;
    background:#0f172a;
    /* aspect-ratio:16/9; */
}

.playlist-thumbnail img{
    width:100%;
    height: 200px;
    object-fit:cover;
    /* display:block; */
    transition:.35s;
}

.playlist-info{
    padding: 2px 8px;
    gap: 8px;
}

.playlist-title{
    font-size:18px;
    font-weight:600;
    color:#fff;
    line-height:1.4;
}

.playlist-description{
    color:#9ca3af;
    font-size:14px;
    line-height:1.6;
}

.categories{
    display:flex;
    gap:12px;
    margin-bottom:25px;
    overflow-x:auto;
    scrollbar-width:none;
}

.categories::-webkit-scrollbar{
    display:none;
}

.header-left{
    display:flex;
    align-items:center;
    gap:16px;
}

.header-center{
    display:flex;
    align-items:center;
    width:100%;
    max-width:600px;
    margin:0 30px;
}

.header-right{
    display:flex;
    align-items:center;
    gap:12px;
}

.menu-btn{
    width:42px;
    height:42px;
    border:none;
    border-radius:10px;
    background:#111827;
    color:#fff;
    cursor:pointer;
    transition:.25s;
}

.menu-btn:hover{
    background:#1f2937;
}

.profile-btn{
    width:42px;
    height:42px;
    border:none;
    border-radius:50%;
    background:#2563eb;
    color:#fff;
    cursor:pointer;
    transition:.25s;
}

.profile-btn:hover{
    background:#1d4ed8;
    transform:scale(1.05);
}

.playlist-meta{
    color:#9ca3af;
    font-size:14px;
    line-height:1.5;
}

.playlist-link{
    text-decoration:none;
    color:inherit;
    display:block;
}

.playlist-card::after{
    content:"▶";
    position:absolute;
    top:12px;
    right:12px;
    width:36px;
    height:36px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(0,0,0,.7);
    color:#fff;
    border-radius:50%;
    opacity:0;
    transition:.25s;
}

@media (hover: hover) and (pointer: fine) {
    .playlist-card:hover::after{
        opacity:1;
    }
}

.mobile-nav{
    display:none;
}

.mobile-nav-item{
    background:none;
    border:none;
    color:#d1d5db;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:4px;
    cursor:pointer;
    font-size:18px;
}

.mobile-nav-item span{
    font-size:12px;
}

@media (hover: hover) and (pointer: fine) {
    .mobile-nav-item:hover{
        color:#fff;
    }
}

/* Joriy sahifaga mos tugma (masalan "Asosiy"da bo'lganda pastdagi
   "Asosiy" tugmasi, "Profil"da "Profil" tugmasi va h.k.) sayt aksent
   rangida bo'ladi — har bir sahifa o'zining mos tugmasiga "active"
   klassini qo'yadi (HTML'da qo'lda belgilangan). */
.mobile-nav-item.active,
.profile-btn.active {
    color: #3b82f6;
}

@media (max-width:768px){

    .header-center{
        margin:0 10px;
        width: 130px;
    }

    .header-center input{
        display: none;
    }

    .search-input{
        width:100%;
    }

    /* .playlist-grid{
        grid-template-columns:1fr;
    } */

    .mobile-nav{
        position:fixed;
        left:0;
        right:0;
        bottom:0;

        height:auto;

        background:#111827;

        border-top:1px solid rgba(255,255,255,.08);

        display:flex;
        align-items:center;
        justify-content:space-around;

        z-index:9999;
    }

    .main-content{
        padding-bottom:90px;
    }
}

@media (max-width:500px){

    .logo{
        font-size:20px;
    }

    .search-btn{
        padding:12px;
    }

    .profile-btn{
        display: none;
        width:38px;
        height:38px;
    }
    .header {
        width: auto;
    }

}

.playlist-page{
    display:flex;
    flex-direction:column;
    gap:20px;
}

.playlist-banner{
    display:flex;
    gap:10px;
    background:#111827;
    /* padding:25px; */
    border-radius:20px;
    border:1px solid rgba(255,255,255,.06);
}

.playlist-cover-large{
    flex-shrink:0;
    width:320px;
}

.playlist-cover-large img{
    width:100%;
    border-radius:16px;
    display:block;
}

.playlist-details{
    flex:1;
    display:flex;
    flex-direction:column;
    gap: 10px;
}

.playlist-name{
    font-size:34px;
    color:#fff;
}

.playlist-description{
    color:#9ca3af;
    line-height:1.8;
    margin-bottom:20px;
}

.playlist-meta{
    grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
}

.meta-item{
    background:#0f172a;
    /* padding:12px; */
    border-radius:10px;
    color:#d1d5db;
}

.playlist-actions{
    display:flex;
    gap:12px;
    margin-top:auto;
}

.play-playlist-btn{
    background:#2563eb;
    color:#fff;
    border:none;
    padding:14px 24px;
    border-radius:12px;
    cursor:pointer;
    transition:.25s;
}

.play-playlist-btn:hover{
    background:#1d4ed8;
}

.playlist-actions button{
    font-weight:600;
}

.play-playlist-btn{
    font-size: 15px;
}

.save-playlist-btn{
    background:#4d6a94;
    color:#fff;
    border:none;
    padding:14px 24px;
    border-radius:12px;
    transition:.25s;
    font-size: 20px;
}

.save-playlist-btn:hover{
    background:#374151;
}

.episodes-section{
    background:#111827;
    /* padding:25px; */
    border-radius:20px;
    border:1px solid rgba(255,255,255,.06);
}

.episodes-section h2{
    margin-bottom:20px;
    color:#fff;
}

.episodes-list{
    display:flex;
    flex-direction:column;
    gap:15px;
}

.episode-link{
    display:flex;
    gap: 10px;
    text-decoration:none;
    color:inherit;
}

.episode-card{
    background:#0f172a;
    border-radius:14px;
    overflow:hidden;
    transition:.25s;
}

.episode-card:hover{
    transform:translateX(6px);
    background:#172033;
}

.episode-thumbnail{
    width: auto;
}

.episode-thumbnail img{
    width: 180px;
    height:100%;
    object-fit:cover;
    border-radius: 10px;
    /* display:block; */
}

.episode-info{
    /* padding:15px; */
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.episode-info h3{
    color:#fff;
    margin-bottom:10px;
}

.episode-info p{
    color:#9ca3af;
    margin-bottom:4px;
}

@media (max-width:900px){

    .playlist-banner{
        flex-direction:column;
    }

    .playlist-cover-large{
        width:100%;
    }

    /* .episode-link{
        flex-direction:column;
    } */

}

.playlist-page{
    width:100%;
}

.playlist-details strong{
    color:#fff;
}

.episodes-section h2{
    font-size:28px;
    margin-bottom:20px;
}

.episode-info h3{
    font-size:18px;
    font-weight:600;
}

.episode-info p{
    font-size:14px;
    line-height:1.6;
}

.episode-card{
    border:1px solid rgba(255,255,255,.04);
}

.episode-card:hover{
    border-color:rgba(59,130,246,.25);
}

.episode-thumbnail img{
    transition:.3s;
}

.episode-card:hover .episode-thumbnail img{
    transform:scale(1.05);
}

.playlist-banner{
    box-shadow:0 10px 30px rgba(0,0,0,.25);
}

.episodes-section{
    box-shadow:0 10px 30px rgba(0,0,0,.25);
}

.video-layout{
    display:grid;
    grid-template-columns:1fr 350px;
    gap:25px;
}

.video-main{
    min-width:0;
}

.video-sidebar{
    background:#111827;
    border-radius:20px;
    border:1px solid rgba(255,255,255,.06);
    overflow:hidden;
}

video{
    width:100%;
    display:block;
}

.video-details{
    margin-top:20px;
    padding:20px;
    background:#111827;
    border-radius:20px;
    border:1px solid rgba(255,255,255,.06);
}

.video-meta{
    display:flex;
    flex-wrap:wrap;
    gap:15px;
    color:#9ca3af;
    font-size:14px;
}

@media(max-width:1000px){

    .video-layout{
        grid-template-columns:1fr;
    }

}

.episode-about{
    font-size:13px;
    color:#f59e0b;
    margin-top:4px;
}

.video-meta-item{
    background:#0f172a;
    color:#d1d5db;
    padding:8px 4px;
    border-radius:999px;
    font-size:14px;
}

.video-actions{
    display:flex;
    gap:12px;
    margin-bottom:25px;
}

.save-video-btn{
    border:none;
    background:#1f2937;
    color:#fff;
    padding:12px 20px;
    border-radius:12px;
    cursor:pointer;
    transition:.25s;
}

.save-video-btn:hover{
    background:#374151;
}

.continue-btn{
    border:none;
    background:#2563eb;
    color:#fff;
    padding:12px 20px;
    border-radius:12px;
    cursor:pointer;
    transition:.25s;
}

.continue-btn:hover{
    background:#1d4ed8;
}

.video-description{
    margin-bottom:25px;
}

.video-description h3{
    color:#fff;
    margin-bottom:12px;
    font-size:20px;
}

.video-description p{
    color:#9ca3af;
    line-height:1.8;
}

.learning-info{
    background:#0f172a;
    border-radius:16px;
    padding:20px;
}

.learning-info h3{
    color:#fff;
    margin-bottom:15px;
}

.learning-info ul{
    padding-left:20px;
}

.learning-info li{
    color:#d1d5db;
    margin-bottom:10px;
    line-height:1.7;
}

/* .next-episode-item, .analysis-subtitle, .analysis-translation, .analysis-text
   — watch.css'ga ko'chirildi (faqat watch.html/book.html'da ishlatiladi) */

#continueVideoBtn{
    width:100%;
    border:none;
    background:#2563eb;
    color:#fff;
    padding:15px;
    border-radius:14px;
    font-size:16px;
    font-weight:600;
    cursor:pointer;
    transition:.25s;
}

#continueVideoBtn:hover{
    background:#1d4ed8;
}

/* @media(max-width:900px) .video-title/.analysis-subtitle/.analysis-translation
   — watch.css'ga ko'chirildi */

/* .seg-row/.seg-ar/.seg-uz — hech qayerda ishlatilmagani aniqlandi, olib tashlandi.
   (Eslatma: .sidebar bu yerda oldin 3 marta takroran e'lon qilingan edi —
   faqat eng to'liq versiyasi pastda qoldirildi.) */

.sidebar{
    width:240px;
    min-width:240px;
    transition:.3s;
}

.sidebar.collapsed{
    width:0;
    min-width:0;
    padding:0;
    overflow:hidden;
    border:none;
}

/* .analysis-table, .ar-cell, .uz-cell — watch.css'ga ko'chirildi.
   MUHIM (tarixiy eslatma): arabcha (segs) format uchun massiv JS'da
   OLDINDAN teskari aylantirilib (rtlRow = [...row].reverse()), keyin
   ODDIY (LTR) jadvalga joylashtiriladi. Jadvalning o'ziga QO'SHIMCHA
   direction:rtl berilmasin — .ar-cell{direction:rtl} yetarli. */

/* watch/book sahifasiga tegishli barcha @media (analysis-*, ar-cell,
   uz-cell, controls-*, video-time, video-title, video-meta-row) qoidalari
   watch.css'ga ko'chirildi — bu yerda bir necha marta takroran va
   qarama-qarshi qiymatlar bilan (masalan .controls-row button uchun
   40px va 42px) sochilib yotgan edi, hamda bir nechta bo'sh @media
   bloklari ham bor edi. */
/* =====================================================================
   QIDIRUV — PLANSHET/TELEFON UCHUN (search-btn bosilganda input + klaviatura
   birga ochiladi). #searchArea ga JS orqali "search-open" klassi qo'shiladi.
   ===================================================================== */
.search-close-btn{
    display:none;
    margin-left:8px;
    background:#1f2937;
    color:#fff;
    border:none;
    width:42px;
    height:42px;
    border-radius:12px;
    cursor:pointer;
    font-size:16px;
    flex-shrink:0;
    align-items:center;
    justify-content:center;
    transition:.2s;
}
.search-close-btn:hover{
    background:#374151;
}

@media (max-width:768px){
    .header-center.search-open{
        position:fixed;
        left:8px;
        right:8px;
        top:14px;
        width:auto;
        max-width:none;
        margin:0;
        z-index:1100;
        background:rgba(11,15,23,.98);
        border-radius:14px;
        padding:6px;
        box-shadow:0 12px 32px rgba(0,0,0,.5);
        border:1px solid rgba(255,255,255,.08);
    }
    .header-center.search-open input{
        display:block;
        font-size:16px; /* iOS avtomatik zoom qilmasligi uchun */
    }
    .header-center.search-open .search-close-btn{
        display:flex;
    }
}

/* Barcha o'lchamlarda: input fokus paytida iOS zoom bo'lmasligi uchun */
.search-input{
    font-size:16px;
}

/* =====================================================================
   PLAYLIST SAHIFASIDAGI HAR BIR EPIZOD — O'NG TOMONDAGI 3-NUQTA MENYU
   (watch.html / book.html dagi uch-nuqta menyu bilan bir xil uslub)
   ===================================================================== */
.episode-card{
    display:flex;
    align-items:center;
    overflow:visible; /* dropdown menyu kesilib qolmasligi uchun */
    position:relative; /* MUHIM: pastdagi .menu-open qoidasi ishlashi uchun
                           bu kartaning o'zi stacking context hosil qilishi
                           kerak */
    z-index:1;
}
/* Uch-nuqta menyusi ochiq bo'lgan kartani BARCHA qo'shni kartalardan
   yuqoriga chiqaramiz. MUHIM: buni faqat .three-dot-menu'ning o'z
   z-index'iga (200) ishonib qoldirib bo'lmaydi — mobil qurilmalarda
   qo'shni kartaning rasmi ustida (:hover orqali transform bilan) alohida
   stacking context paydo bo'lishi mumkin va shu context DOM tartibida
   keyinroq bo'lgani uchun ochiq menyuni "yutib" qo'yishi (uning ustidan
   chiqib, uni orqaga — rasm ostiga tushirib qo'yishi) mumkin edi. Shu
   sabab aynan kartaning o'ziga yuqori z-index berish kerak. */
.episode-card.menu-open{
    z-index:50;
}
.episode-link{
    flex:1;
    min-width:0;
}
.episode-menu-wrap{
    position:relative;
    flex-shrink:0;
    margin-right:14px;
}

.menu-wrap{ position:relative; }

.three-dot-btn{
    background:#1f2937;
    border:none;
    font-size:18px;
    cursor:pointer;
    color:#d1d5db;
    padding:8px 12px;
    border-radius:10px;
    transition:.2s;
}
.three-dot-btn:hover{
    background:#374151;
    color:#fff;
}

.three-dot-menu{
    display:none;
    position:absolute;
    right:0;
    top:100%;
    background:#111827;
    border:1px solid rgba(255,255,255,.1);
    border-radius:12px;
    box-shadow:0 8px 24px rgba(0,0,0,.4);
    z-index:200;
    min-width:220px;
    overflow:hidden;
}
.three-dot-menu.open{
    display:block;
}

.menu-action{
    display:block;
    width:100%;
    padding:12px 16px;
    background:none;
    border:none;
    text-align:left;
    cursor:pointer;
    font-size:14px;
    color:#d1d5db;
    transition:.2s;
}
.menu-action:hover{
    background:#1f2937;
    color:#fff;
}

.settings-section-title{
    padding:10px 16px 4px;
    font-size:11px;
    color:#6b7280;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.05em;
}

@media (max-width:768px){
    .episode-menu-wrap{
        margin-right:8px;
    }
}

/* Yuklab olish menyusidagi "tahlil turini tanlang" ichki ro'yxati
   (episode-downloads.js tomonidan qo'shiladi) — asosiy menu-action
   tugmalaridan vizual jihatdan ajralib tursin deb yuqorisiga chiziq
   qo'yildi. */
.ep-analysis-picker{
    border-top:1px solid rgba(255,255,255,.08);
    margin-top:4px;
    padding-top:4px;
}

/* =====================================================================
   SAQLANGANLAR SAHIFASI (saved.html)
   ===================================================================== */
.saved-toolbar{
    display:flex;
    justify-content:flex-end;
    margin-bottom:6px;
}
.saved-remove-btn{
    position:absolute;
    top:8px;
    right:8px;
    width:30px;
    height:30px;
    border:none;
    border-radius:50%;
    background:rgba(0,0,0,.65);
    color:#fff;
    cursor:pointer;
    font-size:14px;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:.2s;
    z-index:2;
}
.saved-remove-btn:hover{
    background:#dc2626;
}
.saved-type-badge{
    position:absolute;
    bottom:8px;
    left:8px;
    background:rgba(0,0,0,.65);
    color:#fff;
    font-size:12px;
    padding:3px 10px;
    border-radius:12px;
    z-index:2;
}