/*
╔══════════════════════════════════════════════════════════════════════════════════════════════════╗
║                                                                                                  ║
║                    ANA-ILOVA.CSS — Bosh Ofis Ko'rinishi (DuoCards Dizayni)                       ║
║                                                                                                  ║
║   Tasavvur qiling — zamonaviy mobil ilova: pastda navigatsiya,                                   ║
║   yuqorida statistika, o'rtada kartochkalar va kitoblar.                                         ║
║   Bu fayl index.html ning butun ko'rinishini boshqaradi.                                         ║
║                                                                                                  ║
║   Bu fayl aytadi:                                                                                ║
║                                                                                                  ║
║        "Asosiy ranglar va o'zgaruvchilar (CSS variables) shu yerda"                              ║
║        "Tungi/Kunduzgi rejim (dark/light theme) shu yerda"                                       ║
║        "Kartochkalar, navigatsiya, modal oynalar dizayni shu yerda"                              ║
║        "Mobil ekranga moslashish (responsive) shu yerda"                                         ║
║                                                                                                  ║
║   Bu faylsiz index.html xunuk va formatsiz ko'rinadi.                                            ║
║                                                                                                  ║
╚══════════════════════════════════════════════════════════════════════════════════════════════════╝ */




/*
🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦
🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦
                 🟦🟦🟦  ═══════════════════════════════════════════════════════════════════════════  🟦🟦🟦
                 🟦🟦🟦                                                                               🟦🟦🟦
                 🟦🟦🟦        ANA-ILOVA.CSS  —  Bosh ilova ko'rinishi  (DuoCards dizayni)            🟦🟦🟦
                 🟦🟦🟦                                                                               🟦🟦🟦
                 🟦🟦🟦   Bu fayl index.html ning butun ko'rinishini boshqaradi.                      🟦🟦🟦
                 🟦🟦🟦   Asosiy ranglar, tema, navigatsiya, modallar shu yerda.                      🟦🟦🟦
                 🟦🟦🟦                                                                               🟦🟦🟦
                 🟦🟦🟦   BO'LIMLAR:                                                                  🟦🟦🟦
                 🟦🟦🟦     1 — CSS O'ZGARUVCHILARI (RANGLAR VA O'LCHAMLAR)                           🟦🟦🟦
                 🟦🟦🟦     2 — UMUMIY TUZILMA (body, app-container)                                  🟦🟦🟦
                 🟦🟦🟦     3 — TEPADAGI QATOR (top-bar, kurs tanlash)                                🟦🟦🟦
                 🟦🟦🟦     4 — OYNALAR (view sections, animatsiya)                                   🟦🟦🟦
                 🟦🟦🟦     5 — DASHBOARD (statistika, progress bar, BOSHLASH)                        🟦🟦🟦
                 🟦🟦🟦     6 — KUTUBXONA (kitoblar panjarasi)                                        🟦🟦🟦
                 🟦🟦🟦     7 — QO'SHISH TUGMASI (FAB)                                                🟦🟦🟦
                 🟦🟦🟦     8 — PASTKI MENYU (navigatsiya)                                            🟦🟦🟦
                 🟦🟦🟦     9 — MODALLAR (so'z qo'shish, papka, AI yordamchi)                         🟦🟦🟦
                 🟦🟦🟦    10 — SOZLAMALAR (toggle, so'z ma'lumotlari)                                🟦🟦🟦
                 🟦🟦🟦                                                                               🟦🟦🟦
                 🟦🟦🟦  ═══════════════════════════════════════════════════════════════════════════  🟦🟦🟦
🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦
🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦  */






/* 
  🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨
       🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨
           🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨
               🎨🎨🎨  ==========================================================  🎨🎨🎨
               🎨🎨🎨  ==========================================================  🎨🎨🎨
               🎨🎨🎨                                                              🎨🎨🎨
               🎨🎨🎨    1-BO'LIM: CSS O'ZGARUVCHILARI (RANGLAR VA O'LCHAMLAR)     🎨🎨🎨
               🎨🎨🎨                                                              🎨🎨🎨
               🎨🎨🎨  ==========================================================  🎨🎨🎨
               🎨🎨🎨  ==========================================================  🎨🎨🎨
           🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨
       🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨
  🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨       */



/*                            🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦
                          🟦🟦🟦                                                🟦🟦🟦
      CSS: 1-BO'LIM 🟦🟦🟦🟦          KUNDUZGI REJIM (default light theme)         🟦🟦🟦🟦
                          🟦🟦🟦                                                🟦🟦🟦
                             🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦                             */ 

:root {
    --bg-color:       #f7f9fa;      /*     Asosiy sahifa foni                        */
    --surface:        #ffffff;      /*     Kartalar, modallar, panellar foni         */
    --text-dark:      #3c4a5a;      /*     Asosiy matn rangi                         */
    --text-gray:      #a5b1c2;      /*     Ikkinchi darajali matn (label, izoh)      */
    --border-color:   #e4e9f0;      /*     Chegara va ajratgich chiziqlari           */
    --primary:        #ff5e95;      /*     Asosiy tugma rangi (pushti)               */
    --duo-blue:       #3b82f6;      /*     Ko'k aksent rangi (navigatsiya, fokus)    */
    --duo-blue-hover: #2563eb;      /*     Ko'k tugma hover holati                   */
    --app-max-width:  800px;          /*     Ilova maksimal kengligi (DuoCards kabi)   */
}


/*                            🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦
                          🟦🟦🟦                                                🟦🟦🟦
      CSS: 1-BO'LIM 🟦🟦🟦🟦                TUNGI REJIM (dark theme)               🟦🟦🟦🟦
                          🟦🟦🟦                                                🟦🟦🟦
                             🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦                             */ 


[data-theme="dark"] {
    --bg-color:     #0f171e;         /*    To'q ko'k-qora fon                                */
    --surface:      #1a222a;         /*    Kartalar va panellar uchun biroz ochroq fon       */
    --text-dark:    #ecf0f1;         /*    Och matn (oq tonida)                              */
    --text-gray:    #7f8c8d;         /*    Kulrang ikkinchi darajali matn                    */
    --border-color: #2c3e50;         /*    To'q chegara chiziqlari                           */
}





/* 
  🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨
       🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨
           🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨
               🎨🎨🎨  ==========================================================  🎨🎨🎨
               🎨🎨🎨  ==========================================================  🎨🎨🎨
               🎨🎨🎨                                                              🎨🎨🎨
               🎨🎨🎨                  2-BO'LIM: UMUMIY TUZILMA                    🎨🎨🎨
               🎨🎨🎨                                                              🎨🎨🎨
               🎨🎨🎨  ==========================================================  🎨🎨🎨
               🎨🎨🎨  ==========================================================  🎨🎨🎨
           🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨
       🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨
  🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨       */



/*                            🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦
                          🟦🟦🟦                                                🟦🟦🟦
      CSS: 2-BO'LIM 🟦🟦🟦🟦               GLOBAL RESET VA ASOSIY STIL             🟦🟦🟦🟦
                          🟦🟦🟦                                                🟦🟦🟦
                             🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦                             */ 

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Nunito', sans-serif;
    -webkit-tap-highlight-color: transparent;     /*    Mobilda bosish effektini olib tashlaydi    */
}

body {
    background-color: var(--bg-color);
    color: var(--text-dark);
    display: flex;
    justify-content: center;             /*    Ilovani gorizontal markazga olib chiqadi    */
    min-height: 100vh;
    overflow-x: hidden;
}


/*                            🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦
                          🟦🟦🟦                                                🟦🟦🟦
      CSS: 2-BO'LIM 🟦🟦🟦🟦           APP KONTEYNER (ilova asosiy qobi'i)         🟦🟦🟦🟦
                          🟦🟦🟦                                                🟦🟦🟦
                             🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦                             */ 


.app-container {
    width: 100%;
    max-width: var(--app-max-width);      /*    Maksimal 800px (DuoCards kabi)       */
    display: flex;
    flex-direction: column;
    position: relative;
    background-color: var(--bg-color);
    box-shadow: -8px 0 30px rgba(0,0,0,0.12), 8px 0 30px rgba(0,0,0,0.12);    /*   Yon soyalar   */
    min-height: 100vh;
}





/* 
  🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨
       🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨
           🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨
               🎨🎨🎨  ==========================================================  🎨🎨🎨
               🎨🎨🎨  ==========================================================  🎨🎨🎨
               🎨🎨🎨                                                              🎨🎨🎨
               🎨🎨🎨                  3-BO'LIM: TEPADAGI QATOR                    🎨🎨🎨
               🎨🎨🎨                                                              🎨🎨🎨
               🎨🎨🎨  ==========================================================  🎨🎨🎨
               🎨🎨🎨  ==========================================================  🎨🎨🎨
           🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨
       🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨
  🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨       */



/*                            🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦
                          🟦🟦🟦                                                🟦🟦🟦
      CSS: 3-BO'LIM 🟦🟦🟦🟦              TOP-BAR — tepa qator tuzilmasi          🟦🟦🟦🟦
                          🟦🟦🟦                                                🟦🟦🟦
                             🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦                             */ 


.top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    position: relative;
    z-index: 100;            /*    Dropdowndan yuqorida turadi    */
}



/*   Tepadagi aylana icon tugmalar (rang + statistika)   */

.icon-btn {
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
}
.icon-btn svg         { fill: var(--text-gray); transition: 0.3s; width: 24px; height: 24px; }
.icon-btn:hover svg   { fill: var(--text-dark); } /* Hover: ikonka to'qroq rangga o'tadi */




/*                            🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦
                          🟦🟦🟦                                                🟦🟦🟦
      CSS: 3-BO'LIM 🟦🟦🟦🟦            KURS TANLASH TUGMASI VA DROPDOWN          🟦🟦🟦🟦
                          🟦🟦🟦                                                🟦🟦🟦
                             🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦                             */ 


.course-selector-wrapper { position: relative; }      /*   Dropdown shu elementga bog'liq   */

.course-selector {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 800;
    font-size: 16px;
    cursor: pointer;
    padding: 5px 10px;
    border-radius: 8px;
    transition: 0.2s;
}


/*   Dropdown menyu (boshlang'ich holat — yashirin)   */

.course-dropdown {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-10px); /* Boshlang'ichda biroz yuqorida */
    background: var(--surface);
    width: 220px;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    opacity: 0;
    visibility: hidden;
    transition: 0.3s;
    border: 1px solid var(--border-color);
    z-index: 200;
}


/*   .show klassi JS tomonidan qo'shiladi   */

.course-dropdown.show {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(10px);    /*   Pastga siljib ko'rinadi   */
}


/*   Har bir kurs qatori   */

.course-option {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 10px;
    border: none;
    background: transparent;
    border-radius: 8px;
    cursor: pointer;
    color: var(--text-dark);
}
.course-option.active { background: rgba(59,130,246,0.1); border-left: 3px solid var(--duo-blue); }

.co-title  { font-weight: 800; font-size: 14px; display: flex; align-items: center; gap: 8px; }
.co-stats  { font-size: 11px; color: var(--text-gray); font-weight: 700; margin-left: 28px; }




/* 
  🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨
       🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨
           🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨
               🎨🎨🎨  ==========================================================  🎨🎨🎨
               🎨🎨🎨  ==========================================================  🎨🎨🎨
               🎨🎨🎨                                                              🎨🎨🎨
               🎨🎨🎨               4-BO'LIM: OYNALAR (VIEW SECTIONS)              🎨🎨🎨
               🎨🎨🎨                                                              🎨🎨🎨
               🎨🎨🎨  ==========================================================  🎨🎨🎨
               🎨🎨🎨  ==========================================================  🎨🎨🎨
           🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨
       🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨
  🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨       */



/*                            🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦
                          🟦🟦🟦                                                🟦🟦🟦
      CSS: 4-BO'LIM 🟦🟦🟦🟦        VIEW CONTAINER — sahifa almashish tizimi       🟦🟦🟦🟦
                          🟦🟦🟦                                                🟦🟦🟦
                             🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦                             */


/*   Barcha oynalar default yashirin   */

.view-section { 
    flex: 1;
    display: none;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    margin-bottom: 80px;             /*   Pastki navigatsiya uchun joy   */
    animation: fadeIn 0.4s ease;
    width: 100%;
}


/*   .active-view klassi JS tomonidan qo'shiladi   */

.view-section.active-view { display: flex; }


/*   Oyna almashganda pastdan yuqoriga silliq ko'rinish   */

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




/* 
  🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨
       🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨
           🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨
               🎨🎨🎨  ==========================================================  🎨🎨🎨
               🎨🎨🎨  ==========================================================  🎨🎨🎨
               🎨🎨🎨                                                              🎨🎨🎨
               🎨🎨🎨                       5-BO'LIM: DASHBOARD                    🎨🎨🎨
               🎨🎨🎨                                                              🎨🎨🎨
               🎨🎨🎨  ==========================================================  🎨🎨🎨
               🎨🎨🎨  ==========================================================  🎨🎨🎨
           🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨
       🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨
  🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨       */




/*                            🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦
                          🟦🟦🟦                                                🟦🟦🟦
      CSS: 5-BO'LIM 🟦🟦🟦🟦          HERO RASMI VA STATISTIKA DIAGRAMMASI         🟦🟦🟦🟦
                          🟦🟦🟦                                                🟦🟦🟦
                             🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦                             */


/*   Yuqoridagi qahramonlik rasmi   */

.hero-illustration {
    width: 160px;
    height: 160px;
    margin: 0 auto 24px;
    background: url('https://cdn-icons-png.flaticon.com/512/3048/3048122.png') center/contain no-repeat;
}


/*   Diagramma va legend birgalikda   */

#stats-chart-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
}


/*   Rangli nuqtalar bilan izoh qatori   */

#stats-legend {
    display: flex;
    gap: 18px;
}


/*   Har bir rangli izoh elementi   */

.legend-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-dark);
}
.legend-dot  { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }    /*    Rangli doiracha        */
.legend-pct  { font-weight: 800; font-size: 12px; }                              /*    Foiz raqami            */
.legend-name { color: var(--text-gray); }                                        /*    "O'rganish" kabi nom   */





/*                            🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦
                          🟦🟦🟦                                                🟦🟦🟦
      CSS: 5-BO'LIM 🟦🟦🟦🟦            PROGRESS BAR — taraqqiyot chizig'i         🟦🟦🟦🟦
                          🟦🟦🟦                                                🟦🟦🟦
                             🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦                             */


/*   Uchta progress qatori joylashgan konteyner   */

#stats-breakdown {
    width: 100%;
    max-width: 500px;
    background: var(--surface);
    border-radius: 16px;
    padding: 18px 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.02);
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}


/*   Har bir progress qatori (label + chiziq + raqam)   */

.pb-row {
    display: flex;
    align-items: center;
    gap: 10px;
}


/*   Chap taraf: rangli nuqta + ism   */

.pb-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-dark);
    width: 75px;
    flex-shrink: 0;                 /*   Kichraytirilmaydi   */
}


.pb-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}


.pb-track {
    flex: 1;
    height: 8px;
    background: var(--border-color);  /*   Kulrang bo'sh qism   */
    border-radius: 99px;
    overflow: hidden;
}


.pb-fill {
    height: 100%;
    border-radius: 99px;
    transition: width 0.7s ease;      /*   Silliq kengayish animatsiyasi   */
}



/*   O'ng taraf: "5 ta" kabi raqam   */

.pb-count {
    font-size: 13px;
    font-weight: 800;
    color: var(--text-dark);
    width: 30px;
    text-align: right;
    flex-shrink: 0;
}



/*                            🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦
                          🟦🟦🟦                                                🟦🟦🟦
      CSS: 5-BO'LIM 🟦🟦🟦🟦         STATISTIKA BLOKI — 3 ustunli raqamlar         🟦🟦🟦🟦
                          🟦🟦🟦                                                🟦🟦🟦
                             🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦                             */


/*   O'RGANISH | MASHQ QILINDI | O'RGANGAN bloki   */

.stats-container {
    display: flex;
    justify-content: space-between;
    width: 100%;
    max-width: 500px;
    background: var(--surface);
    padding: 20px;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.02);
    margin-bottom: 30px;
}

.stat-item           { text-align: center; flex: 1; border-right: 1px solid var(--border-color); }
.stat-item:last-child { border-right: none; }    /*   Oxirgi ustunda chiziq yo'q   */
.stat-label          { font-size: 11px; font-weight: 800; color: var(--text-gray); text-transform: uppercase; margin-bottom: 5px; }
.stat-value          { font-size: 26px; font-weight: 900; color: var(--text-dark); }




/*                            🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦
                          🟦🟦🟦                                                🟦🟦🟦
      CSS: 5-BO'LIM 🟦🟦🟦🟦                    BOSHLASH TUGMASI                  🟦🟦🟦🟦
                          🟦🟦🟦                                                🟦🟦🟦
                             🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦                             */


.btn-start {
    width: 100%;
    max-width: 500px;
    padding: 18px;
    background: var(--primary);
    color: white;
    border: none;
    border-radius: 50px;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 0.5px;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(255,94,149,0.3);
    transition: 0.2s;
}


/*   Hover: ozgina zoom + soya chuqurl ashadi   */

.btn-start:hover {
    filter: brightness(1.05);
    transform: scale(1.015);
    box-shadow: 0 10px 28px rgba(0,0,0,0.18);
}





/* 
  🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨
       🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨
           🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨
               🎨🎨🎨  ==========================================================  🎨🎨🎨
               🎨🎨🎨  ==========================================================  🎨🎨🎨
               🎨🎨🎨                                                              🎨🎨🎨
               🎨🎨🎨                      6-BO'LIM: KUTUBXONA                     🎨🎨🎨
               🎨🎨🎨                                                              🎨🎨🎨
               🎨🎨🎨  ==========================================================  🎨🎨🎨
               🎨🎨🎨  ==========================================================  🎨🎨🎨
           🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨
       🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨
  🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨       */




/*                            🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦
                          🟦🟦🟦                                                🟦🟦🟦
      CSS: 6-BO'LIM 🟦🟦🟦🟦       KUTUBXONA SARLAVHA VA KITOBLAR PANJARASI        🟦🟦🟦🟦
                          🟦🟦🟦                                                🟦🟦🟦
                             🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦                             */


/*   "Kutubxona" yozuvi + filtr tugmasi qatori   */

.lib-header {
    width: 100%;
    font-size: 22px;
    font-weight: 900;
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}


/*   Kitoblar avtomatik panjara — ekranga moslashadi   */

.books-grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 20px;
}




/*                            🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦
                          🟦🟦🟦                                                🟦🟦🟦
      CSS: 6-BO'LIM 🟦🟦🟦🟦                     KITOB KARTASI                     🟦🟦🟦🟦
                          🟦🟦🟦                                                🟦🟦🟦
                             🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦                             */


.book-card {
    background: var(--surface);
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
    border: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    transition: 0.3s;
}


/*   Hover: ko'tariladi, chegara rangi o'zgaradi   */

.book-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 30px rgba(0,0,0,0.05);
    border-color: var(--primary);
}


/*   Kitob muqovasi (yuqori qism)   */

.book-cover {
    height: 180px;
    background: linear-gradient(135deg, #16467a, #2c3e50);
    display: flex;
    align-items: center;
    justify-content: center;
}
.book-cover::after {
    content: '📖';
    font-size: 50px;
    opacity: 0.5;
}


/*   Kitob ma'lumotlari (pastki qism)   */

.book-info  { padding: 15px; flex: 1; display: flex; flex-direction: column; }
.book-title-row { display: flex; align-items: center; gap: 6px; margin-bottom: 5px; }
.book-title { font-size: 16px; font-weight: 800; flex: 1; min-width: 0; }
.book-desc  { font-size: 12px; color: var(--text-gray); margin-bottom: 15px; }

/*   🛠️ 2026-09-25: kitob nomini o'zgartirish (✏️) tugmasi — nom qatorining
     o'ng chekkasida, faqat bosilganda ishlaydi (kartaning o'ziga bosish
     bilan chalkashmasligi uchun stopPropagation JS tomonda qilingan)   */
.book-rename-btn {
    flex: 0 0 auto;
    background: none;
    border: none;
    font-size: 14px;
    padding: 4px 6px;
    border-radius: 6px;
    cursor: pointer;
    opacity: 0.55;
    line-height: 1;
}
.book-rename-btn:hover { opacity: 1; background: rgba(59,130,246,0.1); }


/*   "O'qishni boshlash" tugmachasi   */

.book-action {
    margin-top: auto;
    padding: 8px;
    background: rgba(59,130,246,0.1);
    color: var(--duo-blue);
    font-weight: 800;
    font-size: 12px;
    text-align: center;
    border-radius: 8px;
}





/* 
  🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨
       🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨
           🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨
               🎨🎨🎨  ==========================================================  🎨🎨🎨
               🎨🎨🎨  ==========================================================  🎨🎨🎨
               🎨🎨🎨                                                              🎨🎨🎨
               🎨🎨🎨                7-BO'LIM: QO'SHISH TUGMASI (FAB)              🎨🎨🎨
               🎨🎨🎨                                                              🎨🎨🎨
               🎨🎨🎨  ==========================================================  🎨🎨🎨
               🎨🎨🎨  ==========================================================  🎨🎨🎨
           🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨
       🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨
  🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨       */



/*                            🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦
                          🟦🟦🟦                                                🟦🟦🟦
      CSS: 7-BO'LIM 🟦🟦🟦🟦     FAB — suzuvchi qo'shish tugmasi (o'ng pastda)     🟦🟦🟦🟦
                          🟦🟦🟦                                                🟦🟦🟦
                             🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦                             */


.fab-add {
    position: fixed;
    bottom: 95px;
    right: calc(50% - 280px);     /*   Ilovaning o'ng chegarasiga yopishadi   */
    width: 60px;
    height: 60px;
    background: var(--primary);
    color: white;
    font-size: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    box-shadow: 0 8px 25px rgba(255,94,149,0.3);
    border: none;
    cursor: pointer;
    transition: 0.3s;
    z-index: 900;
}


/*   Mobil ekranda o'ng chegaradan 20px   */

@media (max-width: 600px) {
    .fab-add { right: 20px; }
}




/* 
  🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨
       🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨
           🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨
               🎨🎨🎨  ==========================================================  🎨🎨🎨
               🎨🎨🎨  ==========================================================  🎨🎨🎨
               🎨🎨🎨                                                              🎨🎨🎨
               🎨🎨🎨              8-BO'LIM: PASTKI MENYU (NAVIGATSIYA)            🎨🎨🎨
               🎨🎨🎨                                                              🎨🎨🎨
               🎨🎨🎨  ==========================================================  🎨🎨🎨
               🎨🎨🎨  ==========================================================  🎨🎨🎨
           🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨
       🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨
  🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨       */



/*                            🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦
                          🟦🟦🟦                                                🟦🟦🟦
      CSS: 8-BO'LIM 🟦🟦🟦🟦            BOTTOM NAV — pastki navigatsiya           🟦🟦🟦🟦
                          🟦🟦🟦                                                🟦🟦🟦
                             🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦                             */

.bottom-nav {
    position: fixed;
    bottom: 0;
    width: 100%;
    max-width: var(--app-max-width);
    height: 70px;
    background: var(--surface);
    display: flex;
    justify-content: space-around;
    align-items: center;
    border-top: 1px solid var(--border-color);
    z-index: 1000;
}


/*   Har bir navigatsiya elementi (ikonka + matn)   */

.nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: none;
    border: none;
    color: var(--text-gray);
    font-size: 10px;
    font-weight: 800;
    gap: 4px;
    flex: 1;
    cursor: pointer;
    position: relative;
    transition: 0.3s;
}

.nav-icon            { width: 24px; height: 24px; fill: var(--text-gray); transition: 0.3s; }
.nav-item.active     { color: var(--text-dark); }
.nav-item.active .nav-icon { fill: var(--duo-blue); } /* Faol ikonka ko'k rangga o'tadi */


/*   Faol element ustidagi ko'k nuqta   */

.nav-item.active::before {
    content: '';
    position: absolute;
    top: -8px;
    width: 6px;
    height: 6px;
    background-color: var(--duo-blue);
    border-radius: 50%;
}






/* 
  🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨
       🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨
           🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨
               🎨🎨🎨  ==========================================================  🎨🎨🎨
               🎨🎨🎨  ==========================================================  🎨🎨🎨
               🎨🎨🎨                                                              🎨🎨🎨
               🎨🎨🎨                       9-BO'LIM: MODALLAR                     🎨🎨🎨
               🎨🎨🎨                                                              🎨🎨🎨
               🎨🎨🎨  ==========================================================  🎨🎨🎨
               🎨🎨🎨  ==========================================================  🎨🎨🎨
           🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨
       🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨
  🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨       */




/*                            🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦
                          🟦🟦🟦                                                🟦🟦🟦
      CSS: 9-BO'LIM 🟦🟦🟦🟦        UMUMIY MODAL OVERLAY — barcha modallarga       🟦🟦🟦🟦
                          🟦🟦🟦                                                🟦🟦🟦
                             🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦                             */



/*   Default holat: yashirin, shaffof   */

.modal-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: var(--bg-color);          /*   Deyarli opaq oq fon   */
    z-index: 2000;
    display: none;
    align-items: flex-start;
    justify-content: center;
    opacity: 0;
    transition: 0.3s;
    overflow-y: auto;
    padding: 20px 0;
}


/*   .show klassi JS tomonidan qo'shiladi   */

.modal-overlay.show { display: flex; opacity: 1; }


/*   Fleshkarta ichidagi modallar — qorong'i overlay (standartdan farq qiladi)   */

#fcSettingsModal,
#fcHelpModal,
#wordInfoModal {
    background: rgba(0,0,0,0.55);
    align-items: center;
    padding: 0;
}




/*                            🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦
                          🟦🟦🟦                                                🟦🟦🟦
      CSS: 9-BO'LIM 🟦🟦🟦🟦          SO'Z QO'SHISH MODALI (.addWordModal)         🟦🟦🟦🟦
                          🟦🟦🟦                                                🟦🟦🟦
                             🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦                             */

#addWordModal { z-index: 10005 !important; }




.add-word-container {
    width: 100%;                                     /*     Ekran kengligini to'liq egallaydi                 */
    max-width: var(--app-max-width);                 /*     Asosiy ilova kengligi bilan bir xil (800px)       */
    background: var(--bg-color);                     /*     Tema rangiga mos fon — dark/light avtomatik       */
    padding: 10px 20px;                              /*     Ichki bo'sh joy — tepadan 10px, yonlardan 20px    */
    display: flex;                                   /*     Ichidagi elementlar ustma-ust joylashadi          */
    flex-direction: column;                          /*     Yuqoridan pastga tartibda                         */
    position: relative;                              /*     Ichidagi absolute elementlar shunga bog'liq       */
    min-height: 100vh;                               /*     Ekran balandligini to'liq egallaydi               */
    box-shadow: -8px 0 30px rgba(0,0,0,0.12), 8px 0 30px rgba(0,0,0,0.12);
    /*   Chap va o'ng tomondan soya — xuddi asosiy ilova (.app-container) dek ko'rinadi       */
}







/*   Yuqori qator: papka tugmasi + yopish tugmasi   */

.modal-top-actions { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }


/*   Papka tanlash tugmachasi   */

.btn-folder-icon {
    background: var(--surface);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    width: 40px; height: 35px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0,0,0,0.02);
    transition: 0.2s;
}
.btn-folder-icon:hover          { border-color: var(--text-gray); }
.btn-folder-icon svg            { width: 18px; height: 18px; stroke: var(--text-gray); }


/*   Yopish tugmasi   */

.modal-close-icon               { background: none; border: none; cursor: pointer; color: var(--text-gray); padding: 5px; }
.modal-close-icon svg           { width: 24px; height: 24px; stroke: currentColor; stroke-width: 2; }
.modal-close-icon:hover         { color: #e74c3c; }


/*   Emoji — modal tepasidagi katta belgi   */

.melon-icon { text-align: center; font-size: 60px; margin-bottom: 20px; }




/*                            🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦
                          🟦🟦🟦                                                🟦🟦🟦
      CSS: 9-BO'LIM 🟦🟦🟦🟦           INPUT KARTA — matn kiritish joyi            🟦🟦🟦🟦
                          🟦🟦🟦                                                🟦🟦🟦
                             🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦                             */


.input-card {
    background: var(--surface);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 12px 15px;
    margin-bottom: 15px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 15px rgba(0,0,0,0.02);
    transition: 0.3s;
    position: relative;
}


/*   Fokusda: ko'k rang bilan ajralib turadi   */

.input-card:focus-within                 { border-color: var(--duo-blue); box-shadow: 0 4px 15px rgba(59,130,246,0.1); }

.input-label                             { font-size: 12px; color: var(--text-gray); font-weight: 700; margin-bottom: 5px; transition: 0.3s; }
.input-card:focus-within .input-label   { color: var(--duo-blue); } /* Fokusda label ko'k bo'ladi */

.input-row { display: flex; justify-content: space-between; align-items: center; }

.duo-input {
    border: none;
    background: transparent;
    font-size: 16px;
    color: var(--text-dark);
    outline: none;
    width: 100%;
    font-weight: 600;
}


/*   Arabcha matn uchun alohida shrift — Noto Naskh Arabic   */

.duo-input.arabic-text {
    font-family: 'Noto Naskh Arabic', serif;
    font-size: 22px;
    direction: ltr;
}


/*   Tarjima tugmasi (AI ikonkasi)   */

.translate-icon {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
    transition: 0.3s;
}
.translate-icon svg                          { width: 22px; height: 22px; fill: currentColor; }
.input-card:focus-within .translate-icon    { color: var(--duo-blue); } /* Fokusda ko'k bo'ladi */


/*   O'chirish tugmasi   */

.clear-icon         { display: none; background: none; border: none; cursor: pointer; color: var(--text-gray); padding: 5px; font-size: 18px; font-weight: bold; }
.clear-icon:hover   { color: #e74c3c; }




/*                            🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦
                          🟦🟦🟦                                                🟦🟦🟦
      CSS: 9-BO'LIM 🟦🟦🟦🟦         MISOL CHIPLAR — arabcha misol jumlalar        🟦🟦🟦🟦
                          🟦🟦🟦                                                🟦🟦🟦
                             🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦                             */


.chips-container { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 25px; justify-content: flex-start; }


/*   Har bir chip — arabcha misol jumla tugmachasi   */

.example-chip {
    background: var(--surface);
    border: 1px solid var(--border-color);
    border-radius: 50px;
    padding: 8px 16px;
    font-size: 14px;
    font-family: 'Noto Naskh Arabic', serif;    /* Arabcha shrift */
    color: var(--text-dark);
    direction: rtl;
    cursor: pointer;
    transition: 0.2s;
    box-shadow: 0 2px 5px rgba(0,0,0,0.02);
}
.example-chip:hover { border-color: var(--duo-blue); color: var(--duo-blue); }


/*   Ko'k saqlash tugmasi   */

.btn-duo-blue {
    width: 100%;
    padding: 16px;
    background: var(--duo-blue);
    color: white;
    border: none;
    border-radius: 50px;
    font-size: 16px;
    font-weight: 800;
    cursor: pointer;
    transition: 0.2s;
    box-shadow: 0 4px 15px rgba(59,130,246,0.3);
    letter-spacing: 0.5px;
    margin-bottom: 20px;
}
.btn-duo-blue:hover { background: var(--duo-blue-hover); transform: translateY(-2px); }




/*                            🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦
                          🟦🟦🟦                                                🟦🟦🟦
      CSS: 9-BO'LIM 🟦🟦🟦🟦        PAPKA TANLASH MODALI (#folderSelectModal)      🟦🟦🟦🟦
                          🟦🟦🟦                                                🟦🟦🟦
                             🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦                             */


/*   Papka va boshlash modallari qorong'i overlay bilan   */

#folderSelectModal, #startMenuModal {
    z-index: 10005 !important;
    background: rgba(0,0,0,0.4);
    align-items: center;
}


/*   Oyna qutisi   */

.folder-modal-box {
    background: var(--surface);
    width: 90%;
    max-width: 450px;
    border-radius: 20px;
    padding: 20px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.2);
    position: relative;
    display: flex;
    flex-direction: column;
}

.folder-modal-header  { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }
.folder-modal-title   { font-weight: 800; font-size: 16px; flex: 1; text-align: center; color: var(--text-dark); }


/*   Qidiruv qatori   */

.search-box       { display: flex; align-items: center; border-bottom: 1px solid var(--border-color); padding-bottom: 10px; margin-bottom: 15px; }
.search-box svg   { width: 20px; height: 20px; stroke: var(--text-gray); }
.search-box input { border: none; background: transparent; outline: none; width: 100%; margin-left: 10px; font-size: 16px; font-weight: 600; }


/*   Papkalar ro'yxati (aylanuvchi)   */

.folder-list { max-height: 300px; overflow-y: auto; display: flex; flex-direction: column; gap: 15px; margin-bottom: 20px; }


/*   Radio tugma uslubi   */

.radio-container         { display: flex; align-items: center; position: relative; cursor: pointer; font-size: 15px; font-weight: 600; color: var(--text-dark); user-select: none; padding-left: 35px; }
.radio-container input   { position: absolute; opacity: 0; cursor: pointer; }
.checkmark               { position: absolute; top: -2px; left: 0; height: 22px; width: 22px; background-color: transparent; border: 2px solid var(--text-gray); border-radius: 50%; transition: 0.2s; }
.radio-container:hover input ~ .checkmark          { border-color: var(--duo-blue); }
.radio-container input:checked ~ .checkmark       { border-color: var(--duo-blue); border-width: 6px; }


/*   Pastki qator   */

.folder-modal-footer { display: flex; flex-direction: column; gap: 15px; }


/*   Checkbox uslubi   */

.check-container               { display: flex; align-items: center; position: relative; cursor: pointer; font-size: 14px; font-weight: 600; color: var(--text-gray); user-select: none; padding-left: 30px; }
.check-container input         { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; }
.square-mark                   { position: absolute; top: 0; left: 0; height: 20px; width: 20px; background-color: #f1f2f6; border-radius: 4px; transition: 0.2s; }
.check-container input:checked ~ .square-mark  { background-color: var(--duo-blue); }
.square-mark:after             { content: ""; position: absolute; display: none; left: 7px; top: 3px; width: 5px; height: 10px; border: solid white; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.check-container input:checked ~ .square-mark:after { display: block; }


/*   Yashil raqamli tabletka (so'z soni)   */

.folder-count-pill {
    background: #e8f5e9;
    color: #2ecc71;
    font-size: 12px;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 12px;
    margin-left: auto;
}



/*                            🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦
                          🟦🟦🟦                                                🟦🟦🟦
      CSS: 9-BO'LIM 🟦🟦🟦🟦           AI YORDAMCHI MODALI (#aiChatModal)          🟦🟦🟦🟦
                          🟦🟦🟦                                                🟦🟦🟦
                             🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦                             */


/*   Pastdan yuqoriga chiqadigan bottom sheet   */

#aiChatModal {
    align-items: flex-end;
    padding: 0;
    z-index: 10005 !important;
    background: rgba(0,0,0,0.4);
}

#aiChatModal .ai-chat-box {
    background: #fdfdfd;
    width: 100%;
    max-width: 600px;
    height: 80vh;
    border-radius: 24px 24px 0 0;    /*   Faqat yuqori burchaklar yumaloq   */
    padding: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: slideUp 0.3s cubic-bezier(0.175, 0.885, 0.32, 1);
}


/*   Pastdan yuqoriga kirish animatsiyasi   */

@keyframes slideUp {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}


/*   Chat header   */

.ai-chat-header {
    padding: 12px 16px;
    border-bottom: 1px solid #f0f0f0;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.ai-chat-header span { font-weight: 800; font-size: 14px; color: #888; letter-spacing: 1px; }

.ai-chat-content { flex: 1; overflow-y: auto; padding: 20px; }


/*   Salom kartasi (AI avatar + xabar)   */

.ai-greeting-card {
    background: #fff;
    border-radius: 18px;
    padding: 20px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.04);
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
    border: 1px solid #f4f7f9;
}


/*   AI avatar (aylana ichida emoji)   */

.ai-elephant-circle {
    width: 50px; height: 50px;
    background: #f1f2f6;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    flex-shrink: 0;
}

.ai-greeting-text p { margin: 0 0 12px 0; font-size: 15px; line-height: 1.5; color: #333; font-weight: 600; }
.ai-greeting-actions { display: flex; gap: 10px; }


/*   AI mini tugmachalari (🔊 va boshqalar)   */

.ai-mini-btn {
    background: #f1f2f6;
    border: none;
    border-radius: 10px;
    padding: 6px 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
    font-weight: 700;
    font-size: 12px;
    color: #555;
    transition: 0.2s;
}
.ai-mini-btn:active { background: #e4e9f0; }


/*   Gorizontal aylana chip qatori   */

.ai-chip-container {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding: 0 20px 10px;
    margin-bottom: 10px;
    white-space: nowrap;
    scrollbar-width: none;
}
.ai-chip-container::-webkit-scrollbar { display: none; }


/*   Har bir chip (arabcha misol jumla)   */

.ai-chip {
    background: #fff;
    border: 1px solid #e4e9f0;
    color: #333;
    padding: 10px 14px;
    border-radius: 14px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    flex-shrink: 0;
    text-align: right;
    line-height: 1.4;
    white-space: normal;
    min-width: 140px;
    max-width: 180px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}





/* 
  🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨
       🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨
           🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨
               🎨🎨🎨  ==========================================================  🎨🎨🎨
               🎨🎨🎨  ==========================================================  🎨🎨🎨
               🎨🎨🎨                                                              🎨🎨🎨
               🎨🎨🎨                     10-BO'LIM: SOZLAMALAR                    🎨🎨🎨
               🎨🎨🎨                                                              🎨🎨🎨
               🎨🎨🎨  ==========================================================  🎨🎨🎨
               🎨🎨🎨  ==========================================================  🎨🎨🎨
           🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨
       🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨
  🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨       */




/*                             🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦
                           🟦🟦🟦                                                🟦🟦🟦
      CSS: 10-BO'LIM 🟦🟦🟦🟦        SO'Z MA'LUMOTLARI MODALI (#wordInfoModal)      🟦🟦🟦🟦
                           🟦🟦🟦                                                🟦🟦🟦
                              🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦                             */



/*   📖 tugmasi bosilganda chiqadigan oyna overlay   */
#wordInfoModal {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 9999;
    display: none;
}


/*   Kontent ichidagi sarlavhalar   */
#wi-content h4 {
    font-size: 12px;
    font-weight: 700;
    color: #999;
    text-transform: uppercase;
    margin: 16px 0 5px;
}


/*   Kontent ichidagi matnlar   */
#wi-content p,
#wi-content li {
    font-size: 15px;
    color: #333;
    line-height: 1.7;
}



/*                               ⚙️⚙️⚙️⚙️⚙️⚙️⚙️⚙️⚙️⚙️⚙️⚙️⚙️⚙️⚙️⚙️⚙️⚙️⚙️⚙️⚙️⚙️⚙️
                             ⚙️⚙️⚙️                                                  ⚙️⚙️⚙️
      CSS: 10-BO'LIM   ⚙️⚙️⚙️⚙️        FLESHKARTA SOZLAMALAR TOGGLE (.fc-toggle)        ⚙️⚙️⚙️⚙️
                             ⚙️⚙️⚙️                                                  ⚙️⚙️⚙️
                                 ⚙️⚙️⚙️⚙️⚙️⚙️⚙️⚙️⚙️⚙️⚙️⚙️⚙️⚙️⚙️⚙️⚙️⚙️⚙️⚙️⚙️⚙️⚙️                             */


/*   Toggle konteyner   */
.fc-toggle {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 26px;
    flex-shrink: 0;
}

.fc-toggle input { display: none; }    /*   Haqiqiy checkbox yashirin   */


/*   Fon (off holat — kulrang)   */
.fc-toggle-slider {
    position: absolute;
    inset: 0;
    background: #ddd;
    border-radius: 26px;
    cursor: pointer;
    transition: 0.3s;
}


/*   Aylanuvchi doiracha   */
.fc-toggle-slider:before {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    left: 3px;
    top: 3px;
    background: #fff;
    border-radius: 50%;
    transition: 0.3s;
}


/*   On holat — ko'k rang   */
.fc-toggle input:checked + .fc-toggle-slider          { background: #3b82f6; }


/*   On holatda doiracha o'ngga siljiydi   */
.fc-toggle input:checked + .fc-toggle-slider:before  { transform: translateX(22px); }



/*   ═══════════════  MASHQ BO'LIMI (1-Ana-ilova-modules/Mashq-bolimi.js)  ═══════════════   */

.practice-modes { width: 100%; display: flex; flex-direction: column; gap: 12px; }
.practice-count { font-size: 14px; color: #888; font-weight: 700; margin-bottom: 4px; }
.practice-empty { font-size: 14px; color: #aaa; text-align: center; padding: 12px 0; }

.practice-card {
    display: flex; align-items: center; gap: 14px;
    width: 100%; padding: 18px 20px;
    background: var(--surface); color: var(--text-dark);
    border: 1px solid var(--border-color); border-left: 5px solid var(--pc);
    border-radius: 16px; cursor: pointer; text-align: left;
    font-family: 'Nunito', sans-serif;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
    transition: transform 0.15s ease;
}
.practice-card:hover:not(:disabled) { transform: translateY(-2px); }
.practice-card:disabled { opacity: 0.4; cursor: default; }
.practice-icon  { font-size: 30px; }
.practice-text  { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.practice-text b { font-size: 17px; }
.practice-text small { font-size: 13px; color: #888; }
.practice-arrow { color: var(--pc); font-size: 13px; }

#mashq-overlay {
    position: fixed; inset: 0; z-index: 9990;
    background: var(--bg-color); color: var(--text-dark);
    display: flex; flex-direction: column; align-items: center;
    font-family: 'Nunito', sans-serif;
}
.mashq-top { width: 100%; max-width: 480px; display: flex; align-items: center; gap: 12px; padding: 16px 20px; box-sizing: border-box; }
.mashq-close { background: none; border: none; font-size: 20px; color: #aaa; cursor: pointer; }
.mashq-progress { flex: 1; height: 10px; background: var(--border-color); border-radius: 5px; overflow: hidden; }
.mashq-progress-bar { height: 100%; width: 0; background: #2ecc71; transition: width 0.3s ease; }
.mashq-counter { font-size: 13px; color: #888; font-weight: 700; min-width: 48px; text-align: right; }

.mashq-body {
    flex: 1; width: 100%; max-width: 420px; padding: 20px; box-sizing: border-box;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
}
.mashq-hint     { font-size: 14px; color: #888; font-weight: 700; }
.mashq-question { font-size: 26px; font-weight: 800; text-align: center; }
.mashq-listen   { width: 90px; height: 90px; border-radius: 50%; border: none; background: #ff5e95; color: #fff; font-size: 38px; cursor: pointer; box-shadow: 0 4px 14px rgba(255,94,149,0.35); }
.mashq-input {
    width: 100%; padding: 14px 16px; box-sizing: border-box;
    border: 2px solid var(--border-color); border-radius: 14px;
    background: var(--surface); color: var(--text-dark);
    font-size: 20px; outline: none; text-align: center;
}
.mashq-input.arabic-text { font-family: 'Noto Naskh Arabic', serif; font-size: 26px; }
.mashq-input.is-right { border-color: #2ecc71; }
.mashq-input.is-wrong { border-color: #e74c3c; }
.mashq-feedback { min-height: 24px; text-align: center; font-weight: 800; }
.mashq-feedback.is-right { color: #2ecc71; }
.mashq-feedback.is-wrong { color: #e74c3c; }
.mashq-answer    { font-size: 26px; color: var(--text-dark); font-family: 'Noto Naskh Arabic', serif; margin-top: 4px; }
.mashq-answer-uz { font-size: 14px; color: #888; font-weight: 600; }
.mashq-btn  { width: 100%; padding: 16px; border: none; border-radius: 14px; background: #3b82f6; color: #fff; font-size: 16px; font-weight: 800; cursor: pointer; box-shadow: 0 4px 0 #2563eb; }
.mashq-skip { background: none; border: none; color: #888; font-weight: 700; cursor: pointer; font-size: 14px; }



/*   ═══════════════  MENING KITOBLARIM (1-Ana-ilova-modules/Mening-kitoblarim.js)  ═══════════════   */

.book-progress { height: 5px; background: var(--border-color); }
.book-progress > div { height: 100%; background: #f1c40f; }
.book-meta { font-size: 12px; color: var(--text-gray); font-weight: 700; margin: -8px 0 12px; }

.book-card-action { border-style: dashed; }
.book-cover-action { background: var(--bg-color); height: 120px; }
.book-cover-action::after { content: none; }
.book-cover-action span { font-size: 40px; }

.kitob-oyna {
    position: fixed; inset: 0; z-index: 99990; background: rgba(0,0,0,0.5);
    display: flex; align-items: center; justify-content: center; padding: 16px;
    font-family: 'Nunito', sans-serif;
}
.kitob-oyna-box {
    width: 100%; max-width: 400px; background: var(--surface); color: var(--text-dark);
    border-radius: 18px; padding: 22px; box-shadow: 0 10px 30px rgba(0,0,0,0.25);
}
.kitob-oyna-title { font-size: 18px; font-weight: 900; margin-bottom: 12px; }
.kitob-oyna-text  { font-size: 14px; color: var(--text-gray); line-height: 1.5; }
.kitob-oyna-label { display: block; font-size: 13px; font-weight: 800; color: var(--text-gray); margin: 12px 0 4px; }
.kitob-oyna-input {
    width: 100%; box-sizing: border-box; padding: 10px 12px; border-radius: 10px;
    border: 1.5px solid var(--border-color); background: var(--bg-color); color: var(--text-dark);
    font-size: 15px; font-family: inherit; outline: none;
}
.kitob-oyna-input:focus { border-color: #3b82f6; }
.kitob-ranglar { display: flex; gap: 8px; flex-wrap: wrap; }
.kitob-rang { width: 38px; height: 38px; border-radius: 10px; border: 3px solid transparent; cursor: pointer; }
.kitob-rang.is-on { border-color: #3b82f6; }
.kitob-menu-item {
    display: block; width: 100%; text-align: left; padding: 14px 12px; margin-bottom: 6px;
    border: 1px solid var(--border-color); border-radius: 12px; background: var(--bg-color);
    color: var(--text-dark); font-size: 15px; font-weight: 700; cursor: pointer; font-family: inherit;
}
.kitob-menu-danger { color: #e74c3c; }
.kitob-oyna-actions { display: flex; gap: 10px; margin-top: 18px; }
.kitob-oyna-actions button { flex: 1; padding: 12px; border-radius: 12px; font-size: 14px; font-weight: 800; cursor: pointer; font-family: inherit; }
.kitob-btn-cancel { background: none; border: 1.5px solid var(--border-color); color: var(--text-dark); }
.kitob-btn-ok     { background: #3b82f6; border: none; color: #fff; }
.kitob-btn-danger { background: #e74c3c; border: none; color: #fff; }



/*   ═══════════════  FAOLLIK VA STATISTIKA (1-Ana-ilova-modules/Faollik-statistika.js)  ═══════════════   */

.daily-goal {
    display: flex; align-items: center; gap: 10px;
    width: 100%; max-width: 500px; margin-top: 14px; padding: 12px 16px;
    background: var(--surface); color: var(--text-dark);
    border: 1px solid var(--border-color); border-radius: 14px;
    font-family: 'Nunito', sans-serif; font-size: 13px; font-weight: 800; cursor: pointer;
}
.dg-streak { white-space: nowrap; }
.dg-bar { flex: 1; height: 8px; background: var(--border-color); border-radius: 4px; overflow: hidden; }
.dg-bar > div { height: 100%; width: 0; background: #2ecc71; border-radius: 4px; transition: width 0.3s ease; }
.dg-text { white-space: nowrap; color: var(--text-gray); }

.st-oyna {
    position: fixed; inset: 0; z-index: 99990; background: rgba(0,0,0,0.5);
    display: flex; align-items: center; justify-content: center; padding: 16px;
    font-family: 'Nunito', sans-serif;
}
.st-box {
    position: relative; width: 100%; max-width: 460px; max-height: 90vh; overflow-y: auto;
    background: var(--surface); color: var(--text-dark);
    border-radius: 20px; padding: 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.25);
}
.st-head { display: flex; justify-content: space-between; align-items: center; font-size: 19px; font-weight: 900; margin-bottom: 14px; }
.st-close { background: none; border: none; font-size: 20px; color: var(--text-gray); cursor: pointer; }
.st-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.st-tiles-4 { grid-template-columns: repeat(4, 1fr); }
.st-tile { background: var(--bg-color); border-radius: 12px; padding: 12px 6px; text-align: center; }
.st-num { font-size: 20px; font-weight: 900; }
.st-lbl { font-size: 11px; color: var(--text-gray); font-weight: 700; margin-top: 2px; display: flex; align-items: center; justify-content: center; gap: 4px; }
.st-lbl i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.st-section { margin-top: 18px; }
.st-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 14px; margin-bottom: 8px; }
.st-muted { color: var(--text-gray); font-size: 12px; font-weight: 700; }
.st-row select { background: var(--bg-color); color: var(--text-dark); border: 1px solid var(--border-color); border-radius: 8px; padding: 4px 8px; font-family: inherit; }
.st-goal { height: 10px; background: var(--border-color); border-radius: 5px; overflow: hidden; margin-bottom: 8px; }
.st-goal > div { height: 100%; background: #2ecc71; border-radius: 5px; }

/*   30 kunlik ustunli grafik: bitta seriya — legend yo'q, sarlavha nomlaydi   */
.st-chart { display: flex; gap: 6px; height: var(--h); }
.st-yaxis { display: flex; flex-direction: column; justify-content: space-between; font-size: 10px; color: var(--text-gray); text-align: right; min-width: 20px; margin: -6px 0; }
.st-plot  { position: relative; flex: 1; border-bottom: 1px solid var(--border-color); }
.st-grid  { position: absolute; left: 0; right: 0; border-top: 1px solid var(--border-color); }
.st-grid span { position: absolute; right: 0; top: -15px; font-size: 10px; color: var(--text-gray); font-weight: 700; }
.st-bars  { position: absolute; inset: 0; display: flex; align-items: flex-end; gap: 2px; }
.st-col   { flex: 1; height: 100%; display: flex; align-items: flex-end; justify-content: center; cursor: default; outline: none; }
.st-col:hover .st-bar, .st-col:focus .st-bar { filter: brightness(0.85); }
.st-col:focus-visible { box-shadow: inset 0 0 0 2px var(--border-color); border-radius: 4px; }
.st-bar   { width: 100%; max-width: 12px; background: #3b82f6; border-radius: 4px 4px 0 0; }
.st-col.is-today .st-bar { box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px #3b82f6; }
.st-xaxis { display: flex; justify-content: space-between; font-size: 10px; color: var(--text-gray); margin: 4px 0 0 26px; }
.st-tip {
    position: absolute; display: none; pointer-events: none; z-index: 2;
    background: var(--text-dark); color: var(--surface);
    font-size: 12px; font-weight: 700; padding: 6px 10px; border-radius: 8px; white-space: nowrap;
}
.st-table { margin-top: 10px; font-size: 12px; }
.st-table summary { cursor: pointer; color: var(--text-gray); font-weight: 700; }
.st-table table { width: 100%; border-collapse: collapse; margin-top: 6px; }
.st-table th, .st-table td { padding: 4px 6px; text-align: center; border-bottom: 1px solid var(--border-color); }


/* ── Soz-yordamchi.js — "So'z qo'shish" oynasidagi AI yordamchi ── */
.sy-holat:empty { display: none; }
.sy-holat { margin: -6px 0 12px; font-size: 13px; }
.sy-holat button {
    border: none; background: none; color: var(--duo-blue); font: 700 13px 'Nunito', sans-serif; cursor: pointer; padding: 2px 4px;
}
.sy-ogoh { background: #fff7ed; border: 1px solid #fed7aa; color: #9a3412; border-radius: 10px; padding: 8px 12px; line-height: 1.6; }
.sy-ogoh b { font-family: 'Noto Naskh Arabic', serif; font-size: 16px; }
.sy-izoh, .sy-taklif { color: var(--text-gray); padding: 0 4px; }
.sy-taklif button { font-family: 'Noto Naskh Arabic', serif; font-size: 20px; background: var(--surface); border: 1px solid var(--border-color); border-radius: 10px; padding: 2px 12px; color: var(--text-dark); }
.sy-misol {
    display: flex; flex-direction: column; align-items: flex-end; gap: 2px; width: 100%;
    background: var(--surface); border: 1px dashed var(--border-color); border-radius: 10px;
    padding: 8px 12px; cursor: pointer; text-align: right; color: var(--text-dark);
}
.sy-misol span { font-family: 'Noto Naskh Arabic', serif; font-size: 16px; }
.sy-misol small { font-size: 12px; color: var(--text-gray); text-align: left; align-self: stretch; }
.sy-misol:hover { border-color: var(--duo-blue); }
.sy-grammatika { background: var(--surface); border: 1px solid var(--border-color); border-radius: 12px; padding: 10px 14px; margin: -12px 0 18px; }
.sy-grammatika[hidden] { display: none; }
.sy-g-bosh { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--text-dark); cursor: pointer; }
.sy-g-qatorlar { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 14px; margin-top: 8px; }
.sy-g-qatorlar div { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; }
.sy-g-qatorlar span { color: var(--text-gray); }
.sy-g-qatorlar b { font-family: 'Nunito', 'Noto Naskh Arabic', sans-serif; font-size: 15px; color: var(--text-dark); }

/* ── Karta-tanishtirish.js — yangi so'z tanishtiruvi va "avval tinglash" ── */
.fc-intro {
    position: absolute; z-index: 5; width: calc(100% - 40px); max-width: 600px; height: min(580px, calc(100vh - 210px));
    flex-direction: column; gap: 12px;
}
.fc-intro-karta {
    position: relative; flex: 1; background: #fff; border-radius: 20px; box-shadow: 0 8px 30px rgba(0,0,0,0.08);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
    padding: 28px 22px; box-sizing: border-box; text-align: center; overflow-y: auto;
}
.fc-intro-yorliq { position: absolute; top: 16px; left: 16px; font-size: 12px; font-weight: 800; color: #2ecc71; background: #eafaf1; border-radius: 8px; padding: 4px 10px; }
.fc-intro-ovoz { position: absolute; top: 12px; right: 12px; border: none; background: #eff6ff; color: #3b82f6; border-radius: 50%; width: 40px; height: 40px; font-size: 18px; cursor: pointer; }
/* ── Bulut.js — Hisob bo'limidagi kirish / profil kartasi ── */
.bh-karta { max-width: 420px; margin: 0 auto; background: var(--surface); border: 1px solid var(--border-color); border-radius: 18px; padding: 22px 20px; text-align: center; display: flex; flex-direction: column; gap: 10px; }
.bh-avatar { width: 80px; height: 80px; margin: 0 auto 4px; border-radius: 50%; background: #e8f4fd; display: flex; align-items: center; justify-content: center; font-size: 38px; font-weight: 900; color: #3b82f6; overflow: hidden; }
.bh-avatar img { width: 100%; height: 100%; object-fit: cover; }
.bh-ism { font-size: 20px; font-weight: 800; color: var(--text-dark); }
.bh-email, .bh-izoh { font-size: 13px; color: var(--text-gray); line-height: 1.5; }
.bh-holat { font-size: 13px; font-weight: 700; color: #16a34a; }
.bh-tugmalar { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.bh-tugmalar button, .bh-google { border: none; border-radius: 12px; padding: 12px 16px; font: 800 14px 'Nunito', sans-serif; cursor: pointer; flex: 1; }
.bh-asosiy { background: #3b82f6; color: #fff; }
.bh-ikkinchi { background: var(--bg-color); color: var(--text-dark); border: 1px solid var(--border-color) !important; }
.bh-google { background: #fff; color: #3c4043; border: 1px solid #dadce0 !important; display: flex; align-items: center; justify-content: center; gap: 10px; }
.bh-g { font: 900 18px Arial, sans-serif; background: conic-gradient(from -45deg, #ea4335 0 25%, #4285f4 0 50%, #34a853 0 75%, #fbbc05 0); -webkit-background-clip: text; background-clip: text; color: transparent; }
.bh-yoki { display: flex; align-items: center; gap: 10px; color: var(--text-gray); font-size: 12px; font-weight: 700; }
.bh-yoki::before, .bh-yoki::after { content: ''; flex: 1; height: 1px; background: var(--border-color); }
.bh-forma { display: flex; flex-direction: column; gap: 10px; }
.bh-forma input { border: 1px solid var(--border-color); border-radius: 12px; padding: 12px 14px; font: 600 15px 'Nunito', sans-serif; background: var(--bg-color); color: var(--text-dark); outline: none; }
.bh-forma input:focus { border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,0.15); }
.bh-xabar { font-size: 13px; font-weight: 700; color: #dc2626; min-height: 18px; }
.bh-xabar.yaxshi { color: #16a34a; }
.bh-ornatish { display: block; width: 100%; max-width: 420px; margin: 10px auto 0; border: none; border-radius: 14px; padding: 14px; font: 800 15px 'Nunito', sans-serif; cursor: pointer; background: linear-gradient(135deg, #3b82f6, #1e40af); color: #fff; box-shadow: 0 4px 12px rgba(59,130,246,0.3); }
.bh-ornatish-izoh { max-width: 420px; margin: 10px auto 0; text-align: center; font-size: 13px; color: var(--text-gray); line-height: 1.6; }
.bh-havola { border: none; background: none; color: #3b82f6; font: 700 13px 'Nunito', sans-serif; cursor: pointer; }
.fc-intro-rasm { font-size: 72px; line-height: 1; margin-bottom: 4px; }
/*   Orqa tomondagi rasmni almashtirish tugmasi (o'ng yuqori burchak)   */
#fc-rasm-tugma {
    position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; border-radius: 50%;
    border: 1px solid #e4e9f0; background: #fff; font-size: 16px; cursor: pointer; opacity: .55; transition: opacity .2s;
}
#fc-rasm-tugma:hover { opacity: 1; }
.fc-intro-ar { font-family: 'Noto Naskh Arabic', serif; font-size: 54px; font-weight: 700; color: #222; line-height: 1.5; }
.fc-intro-uz { font-size: 23px; font-weight: 700; color: #3b82f6; }
.fc-intro-misol { word-spacing: .3em; font-family: 'Noto Naskh Arabic', serif; font-size: 20px; color: #444; line-height: 1.8; unicode-bidi: plaintext; }
.fc-intro-info { font-size: 12px; color: #888; line-height: 1.6; unicode-bidi: plaintext; }
.fc-intro-tugmalar { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fc-intro-tugmalar button { border: none; border-radius: 14px; padding: 14px 8px; font: 800 15px 'Nunito', sans-serif; cursor: pointer; }
.fc-intro-bilaman { background: #eceff1; color: #546e7a; }
.fc-intro-tushundim { background: #3b82f6; color: #fff; }
#fc-front-text.fc-tinglash { filter: blur(10px); user-select: none; }
#fc-tinglay-olmayman {
    display: none; align-items: center; gap: 6px; margin-top: 24px; border: none; background: none;
    color: #90a4ae; font: 700 13px 'Nunito', sans-serif; cursor: pointer; text-decoration: underline;
}

/* ── Mashq-turlari.js — Test, Tinglash, Gapirish, Tushunish, Rollar, So'rash ── */
.practice-group { font-size: 13px; font-weight: 800; color: var(--text-gray); text-transform: uppercase; letter-spacing: .5px; margin: 10px 2px 0; }
.mt-sarlavha { font-weight: 800; color: var(--text-dark); font-size: 15px; margin-top: -6px; }
.mt-body { width: 100%; max-width: 480px; box-sizing: border-box; overflow-y: auto; justify-content: safe center; }
.mt-gap { font-family: 'Noto Naskh Arabic', serif; font-size: 24px; line-height: 1.9; color: var(--text-dark); text-align: center; }
.mt-gap mark { background: #fef3c7; color: inherit; border-radius: 4px; padding: 0 2px; }
.mt-gap-uz { font-size: 14px; color: #888; text-align: center; }
.mt-bosh { display: inline-block; min-width: 70px; border-bottom: 3px solid #f59e0b; color: #f59e0b; margin: 0 4px; }
.mt-bosh.is-right { color: #2ecc71; border-color: #2ecc71; }
.mt-bosh.is-wrong { color: #e74c3c; border-color: #e74c3c; }
.mt-variantlar { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; }
.mt-uz-variant { grid-template-columns: 1fr; }
.mt-variant {
    position: relative; display: flex; align-items: center; justify-content: center; min-height: 60px; padding: 10px 14px;
    background: var(--surface); color: var(--text-dark); border: 2px solid var(--border-color); border-radius: 14px;
    font: 700 15px 'Nunito', sans-serif; cursor: pointer; box-shadow: 0 3px 0 var(--border-color);
}
.mt-variant span[dir="rtl"] { font-family: 'Noto Naskh Arabic', serif; font-size: 22px; }
.mt-variant small { position: absolute; top: 6px; left: 10px; font-size: 11px; color: #bbb; }
.mt-variant:hover:not(:disabled) { border-color: #3b82f6; }
.mt-variant.is-right { border-color: #2ecc71; background: #eafaf1; }
.mt-variant.is-wrong { border-color: #e74c3c; background: #fdecea; }
.mt-tinglash-karta { width: 100%; background: var(--surface); border-radius: 20px; box-shadow: 0 8px 30px rgba(0,0,0,.08); padding: 36px 20px; display: flex; flex-direction: column; align-items: center; gap: 14px; box-sizing: border-box; }
.mt-t-ar { font-family: 'Noto Naskh Arabic', serif; font-size: 42px; font-weight: 700; color: var(--text-dark); text-align: center; }
.mt-t-uz, .mt-t-misol { opacity: 0; transition: opacity .4s; text-align: center; }
.mt-t-uz { font-size: 20px; font-weight: 800; color: #06b6d4; }
.mt-t-misol { font-family: 'Noto Naskh Arabic', serif; font-size: 18px; color: #666; }
.mt-t-uz.ochiq, .mt-t-misol.ochiq { opacity: 1; }
.mt-pleer { display: flex; gap: 18px; align-items: center; justify-content: center; }
.mt-pleer button { width: 52px; height: 52px; border-radius: 50%; border: none; background: var(--surface); box-shadow: 0 2px 8px rgba(0,0,0,.1); font-size: 20px; cursor: pointer; }
.mt-pleer .mt-katta { width: 72px; height: 72px; background: #06b6d4; color: #fff; font-size: 28px; }
.mt-mik { width: 96px; height: 96px; border-radius: 50%; border: none; background: #8b5cf6; color: #fff; font-size: 40px; cursor: pointer; box-shadow: 0 4px 14px rgba(139,92,246,.4); }
.mt-mik.tinglanmoqda, .mt-y-mik.tinglanmoqda { background: #e74c3c; animation: mt-puls 1s infinite; }
@keyframes mt-puls { 50% { transform: scale(1.08); } }
.mt-kutish { text-align: center; color: #888; font-weight: 700; padding: 40px 0; }
.mt-hikoya-sarlavha { font-family: 'Noto Naskh Arabic', serif; font-size: 26px; font-weight: 700; color: var(--text-dark); text-align: center; }
.mt-hikoya { width: 100%; display: flex; flex-direction: column; gap: 8px; }
.mt-gap-qator { display: flex; gap: 10px; align-items: flex-start; background: var(--surface); border-radius: 12px; padding: 8px 12px; cursor: pointer; }
.mt-gap-qator > div { flex: 1; }
.mt-gap-qator .mt-gap { font-size: 20px; text-align: right; }
.mt-gap-qator .mt-gap-uz { text-align: left; }
.mt-gap-ovoz { border: none; background: none; font-size: 16px; cursor: pointer; padding: 6px 0; }
.mt-yopiq { display: none; }
.mt-vaziyatlar { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; }
.mt-vaziyat { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 14px; background: var(--surface); color: var(--text-dark); border: 1px solid var(--border-color); border-radius: 14px; cursor: pointer; text-align: left; font-family: 'Nunito', sans-serif; }
.mt-vaziyat span { font-size: 26px; }
.mt-vaziyat small { color: #888; font-size: 12px; }
.mt-vaziyat:hover { border-color: #ef4444; }
.mt-suhbat-body { flex: 1; min-height: 0; gap: 10px !important; padding-bottom: 16px; }
.mt-suhbat { width: 100%; flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 4px; box-sizing: border-box; max-height: calc(100vh - 230px); }
.mt-xabar { max-width: 85%; padding: 10px 14px; border-radius: 16px; font-size: 15px; line-height: 1.6; white-space: pre-wrap; }
.mt-ai { align-self: flex-start; background: var(--surface); color: var(--text-dark); border-bottom-left-radius: 4px; box-shadow: 0 1px 4px rgba(0,0,0,.06); }
.mt-men { align-self: flex-end; background: #3b82f6; color: #fff; border-bottom-right-radius: 4px; }
.mt-x-ar { font-family: 'Noto Naskh Arabic', serif; font-size: 20px; }
.mt-x-uz { font-size: 13px; color: #888; margin-top: 4px; }
.mt-x-amallar { display: flex; gap: 8px; margin-top: 6px; }
.mt-x-amallar button { border: none; background: #f1f5f9; border-radius: 8px; padding: 3px 8px; font-size: 12px; cursor: pointer; }
.mt-tuzatish { margin-top: 6px; padding: 6px 8px; background: #fff7ed; color: #9a3412; border-radius: 8px; font-size: 13px; }
.mt-takliflar { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; }
.mt-takliflar:empty { display: none; }
.mt-taklif { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; border: 1px dashed var(--border-color); background: var(--surface); color: var(--text-dark); border-radius: 12px; padding: 6px 12px; cursor: pointer; font: 600 13px 'Nunito', sans-serif; }
.mt-taklif span { font-family: 'Noto Naskh Arabic', serif; font-size: 17px; }
.mt-taklif small { color: #888; font-size: 11px; }
.mt-yozish { display: flex; gap: 8px; width: 100%; align-items: center; }
.mt-y-input { flex: 1; min-width: 0; padding: 12px 14px; border: 2px solid var(--border-color); border-radius: 14px; font: 600 16px 'Nunito', 'Noto Naskh Arabic', sans-serif; background: var(--surface); color: var(--text-dark); outline: none; }
.mt-y-input:focus { border-color: #3b82f6; }
.mt-y-mik, .mt-y-yubor { width: 46px; height: 46px; border-radius: 50%; border: none; cursor: pointer; font-size: 18px; flex-shrink: 0; }
.mt-y-mik { background: #eef2ff; }
.mt-y-yubor { background: #3b82f6; color: #fff; }

/* ── Translit.js — kartochkadagi romanizatsiya ── */
.fc-roman { font-size: 16px; color: #90a4ae; font-style: italic; letter-spacing: .3px; margin-top: 4px; text-align: center; }
.fc-roman:empty { display: none; }
#fc-front-text.fc-tinglash + .fc-roman { filter: blur(6px); }

/* ── AI-toplam.js ── */
.at-chiplar { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 4px; }
.at-chip { border: 1px solid var(--border-color); background: var(--surface); color: var(--text-dark); border-radius: 999px; padding: 4px 10px; font: 600 12px 'Nunito', sans-serif; cursor: pointer; }
.at-chip:hover { border-color: #3b82f6; }
.at-holat { min-height: 18px; font-size: 13px; color: #888; margin-top: 8px; }

/* ── Kartadagi arabcha shakllar qatori (moziy – muzore – amr – masdar / birlik – ko'plik) ── */
.fc-shakl { font-family: 'Noto Naskh Arabic', serif; font-size: 22px; color: #7f8c8d; text-align: center; line-height: 1.6; margin-top: 6px; }
.fc-shakl:empty { display: none; }
/*   Misol jumlasida o'rganilayotgan so'z (DarsLugati.urgula) — DuoCards kabi to'q sariq   */
/*   font-family: inherit — umumiy "* { Nunito }" qoidasi span'ga Nunito bermasin; qalin emas — atrofdagidek ko'rinsin   */
.fc-urgu { color: #e67e22; font-family: inherit; }
#fc-front-text.fc-front-ar { font-family: 'Noto Naskh Arabic', serif; font-size: 52px !important; font-weight: 700 !important; color: #222 !important; direction: rtl; }
.fc-ajrat { width: 60%; height: 1px; background: #eceff1; margin: 4px auto; }



/*   ═══════════════  KUTUBXONA BO'LIMLARI (1-Ana-ilova-modules/Kutubxona-bolimlar.js)  ═══════════════
     DuoCards kutubxonasi kabi: har bo'lim — sarlavha (›) + o'ngga suriladigan qator.
     "›" bosilsa — o'sha bo'lim panjarada (.books-grid), tepada yo'l (.lib-yol).                      */

#library-books-container { width: 100%; min-width: 0; }
.lib-bolim { width: 100%; min-width: 0; margin-bottom: 26px; }

.lib-bolim-bosh {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; margin-bottom: 10px;
}
.lib-bolim-nomi {
    background: none; border: none; padding: 4px 2px; cursor: pointer;
    font-family: inherit; font-size: 18px; font-weight: 900; color: var(--text-dark);
    display: inline-flex; align-items: center; gap: 6px;
}
.lib-strelka { font-size: 22px; line-height: 1; color: var(--text-gray); transition: transform 0.2s, color 0.2s; }
.lib-bolim-nomi:hover .lib-strelka { transform: translateX(3px); color: var(--duo-blue); }

.lib-qoshish {
    background: none; border: none; cursor: pointer; font-family: inherit;
    font-size: 14px; font-weight: 800; color: var(--duo-blue);
    padding: 6px 10px; border-radius: 10px; white-space: nowrap;
}
.lib-qoshish:hover { background: rgba(59,130,246,0.1); }

/*   Gorizontal qator: kartalar bir xil kenglikda, sichqoncha/barmoq bilan o'ngga suriladi   */
.lib-qator {
    display: flex; gap: 12px;
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    padding: 4px 2px 12px;
    scrollbar-width: thin;
    scrollbar-color: var(--border-color) transparent;
}
.lib-qator::-webkit-scrollbar { height: 6px; }
.lib-qator::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 3px; }
.lib-qator > .book-card { flex: 0 0 148px; scroll-snap-align: start; }
.lib-qator > .book-card:hover { transform: translateY(-3px); }
.lib-qator .book-cover { height: 120px; }
.lib-qator .book-cover-action { height: 120px; }

/*   Papka / dars / video muqovasi — o'rtada belgi (📖 o'rniga)   */
.lib-cover { position: relative; }
.lib-cover::after { content: none; }
.lib-cover > span { font-size: 46px; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.25)); }
.lib-nishon {
    position: absolute; top: 8px; right: 8px;
    font-style: normal; font-size: 11px; font-weight: 800;
    background: rgba(0,0,0,0.45); color: #fff; padding: 3px 8px; border-radius: 8px;
}
.lib-tez-orada { opacity: 0.65; }
#library-books-container .books-grid .book-cover { height: 140px; }
.lib-meta { margin: auto 0 0; }

/*   Bo'lim sahifasi / papka ichi: ← va yo'l (Kutubxona › Kartalar to'plami › ...)   */
.lib-yol {
    display: flex; align-items: center; flex-wrap: wrap; gap: 4px;
    margin-bottom: 18px;
}
.lib-orqaga {
    width: 38px; height: 38px; border-radius: 50%; margin-right: 6px;
    border: 1px solid var(--border-color); background: var(--surface); color: var(--text-dark);
    font-size: 18px; font-weight: 900; cursor: pointer;
}
.lib-orqaga:hover { border-color: var(--duo-blue); color: var(--duo-blue); }
.lib-yol-qism {
    background: none; border: none; cursor: pointer; font-family: inherit;
    font-size: 15px; font-weight: 700; color: var(--text-gray); padding: 4px 4px; border-radius: 6px;
}
.lib-yol-qism:hover { color: var(--duo-blue); }
.lib-yol-qism.is-joriy { color: var(--text-dark); font-size: 20px; font-weight: 900; cursor: default; }
.lib-yol-ajrat { color: var(--text-gray); font-weight: 700; }

/*   Har bo'limning o'z qidiruvi — sarlavha bilan "+ Qo'shish" orasida   */
.lib-bolim-nomi { flex: 0 0 auto; }
.lib-qidiruv {
    flex: 1 1 auto; min-width: 0; max-width: 240px; margin-left: auto;
    display: flex; align-items: center; gap: 6px;
    background: var(--surface); border: 1px solid var(--border-color); border-radius: 12px;
    padding: 0 10px; height: 36px; cursor: text; transition: border-color 0.2s, box-shadow 0.2s;
}
.lib-qidiruv:focus-within { border-color: var(--duo-blue); box-shadow: 0 0 0 3px rgba(59,130,246,0.15); }
.lib-qidiruv span { font-size: 13px; opacity: 0.6; }
.lib-qidiruv input {
    flex: 1; min-width: 0; border: none; outline: none; background: transparent;
    font-family: inherit; font-size: 14px; font-weight: 600; color: var(--text-dark);
}
.lib-qidiruv input::placeholder { color: var(--text-gray); }
.lib-bolim-bosh .lib-qidiruv + .lib-qoshish { margin-left: 0; }
.lib-asboblar { display: flex; align-items: center; gap: 10px; margin: -6px 0 16px; }
.lib-asboblar .lib-qidiruv { margin-left: 0; max-width: none; }

.lib-topilmadi {
    padding: 22px 8px; color: var(--text-gray); font-weight: 700; font-size: 14px;
}

/*   "O'rganildi N%" — papka va dars kartalarida   */
.lib-progress > div { background: #22c55e; transition: width 0.4s; }
.lib-organildi { font-size: 12px; font-weight: 800; color: #16a34a; margin-top: 4px; min-height: 16px; }
.lib-organildi.is-tugadi::after { content: ' 🎉'; }

/*   "Oxirgi ochilgan"dagi davom tugmasi ("O'qishni davom ettirish", "Qolgan N so'zni saralash")   */
.lib-tugma { margin-top: 10px; }
.lib-tugma.is-tugadi { background: rgba(34,197,94,0.12); color: #16a34a; }

@media (max-width: 600px) {
    .lib-qator > .book-card { flex-basis: 140px; }
    .lib-qator .book-cover, .lib-qator .book-cover-action { height: 110px; }
    .lib-yol-qism.is-joriy { font-size: 17px; }
    .lib-qoshish-yozuv { display: none; }
    .lib-qoshish { font-size: 20px; padding: 2px 10px; }
    .lib-bolim-nomi { font-size: 16px; }
}