:root { --bg: #050505; --card-bg: #121212; --neon: #00FFFF; --text: #e0e0e0; }
    
    /* GLOBAL FONT FIX */
    body, button, input, select, textarea, #lbl-type, #sel-type, #lbl-lang { 
        font-family: 'Roboto', sans-serif !important; 
    }
    
    body { background-color: var(--bg) !important; color: var(--text); }
    
    .post-body-container::before { display: none; }

    /* Controls */
    .lib-controls { text-align: center; margin-bottom: 40px; }
    .lib-title { font-size: 2.5rem; font-weight: 900; color: #fff; margin-bottom: 20px; text-transform: uppercase; letter-spacing: -1px; margin-top: 0 }
    
    /* Search */
    .search-wrapper { position: relative; width: 95%; max-width: 600px; margin: 0 auto 30px auto; box-sizing: border-box; }
    #searchBox { width: 100%; padding: 15px 20px 15px 50px; background: #111; border: 1px solid #333; border-radius: 50px; color: #fff; outline: none; transition: 0.3s; font-size: 16px; box-sizing: border-box; max-width: 90vw; }
    #searchBox:focus { border-color: var(--neon); box-shadow: 0 0 15px rgba(0,255,255,0.2); }
    .search-icon { position: absolute; left: 20px; top: 50%; transform: translateY(-50%); opacity: 0.5; pointer-events: none; }

    /* Filters */
    .filter-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 15px; max-width: 1000px; margin: 0 auto; }
    .filter-group { display: flex; flex-direction: column; text-align: left; }
    .filter-group label { font-size: 10px; color: var(--neon); font-weight: bold; margin-bottom: 5px; margin-left: 5px; }
    select { width: 100%; padding: 10px; background: #1a1a1a; color: #fff; border: 1px solid #333; border-radius: 6px; cursor: pointer; outline: none; appearance: none; background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%2300FFFF%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E"); background-repeat: no-repeat; background-position: right 10px center; background-size: 10px; }
    
    .reset-btn { 
        background: transparent; border: 1px solid #333; color: #666; 
        padding: 8px 20px; border-radius: 20px; cursor: pointer; 
        margin-top:20px; transition: 0.3s; font-size: 11px; font-weight: bold;
        display: inline-flex; align-items: center; justify-content: center;
    }
    .reset-btn:hover { border-color: var(--neon); color: var(--neon); }
    .reset-btn.active { border-color: var(--neon); color: var(--neon); background: rgba(0, 255, 255, 0.1); }

    /* Language Switcher */
    .lang-toggle { margin-top: 25px; display: inline-flex; align-items: center; background: #0a0a0a; padding: 6px 15px; border-radius: 50px; border: 1px solid #333; box-shadow: 0 5px 15px rgba(0,0,0,0.5); }
    .lang-label { color: #555; font-size: 10px; font-weight: 800; letter-spacing: 1px; margin-right: 15px; text-transform: uppercase; }
    .lang-opt { padding: 6px 14px; font-size: 11px; font-weight: bold; color: #888; cursor: pointer; border-radius: 20px; transition: all 0.3s; border: 1px solid transparent; margin-left: 2px; }
    .lang-opt:hover { color: #fff; background: rgba(255, 255, 255, 0.1); border-color: #444; }
    .lang-opt.active { background: var(--neon); color: #000; box-shadow: 0 0 15px var(--neon); border-color: var(--neon); transform: scale(1.05); }

    /* Grid & Cards */
    #book-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 25px; padding-bottom: 50px; }
    .book-card { background: var(--card-bg); border: 1px solid #222; border-radius: 12px; overflow: hidden; position: relative; transition: 0.3s; display: flex; flex-direction: column; animation: fadeIn 0.5s; }
    .book-card:hover { transform: translateY(-5px); border-color: var(--neon); box-shadow: 0 10px 20px rgba(0, 255, 255, 0.1); }   
  
    .img-wrapper { position: relative; }
    .card-loader {
        position: absolute; top: 50%; left: 50%;
        margin-top: -12.5px; margin-left: -12.5px;
        width: 25px; height: 25px;
        border: 3px solid #333; border-top: 3px solid var(--neon);
        border-radius: 50%; animation: spin 1s linear infinite; z-index: 1;
    }
    @keyframes spin { 
        0% { transform: translate(-50%, -50%) rotate(0deg); }
        100% { transform: translate(-50%, -50%) rotate(360deg); }
    }
    .book-img { opacity: 0; transition: opacity 0.3s ease; }
    .book-img.loaded { opacity: 1; }
    
  	/* --- BLOGGER IMAGE GAP FIX --- */
    .img-wrapper { 
        position: relative !important; 
        padding-top: 150% !important; /* Locks in the 2:3 ratio */
        overflow: hidden !important; 
    }
    .book-img { 
        position: absolute !important; 
        top: 0 !important; 
        left: 0 !important; 
        width: 100% !important; 
        height: 100% !important; 
        object-fit: cover !important; 
    }
    /* ----------------------------- */
  
    /* Description Overlay - SCROLLABLE */
    .desc-overlay { 
        position: absolute; top: 0; left: 0; width: 100%; height: 100%; 
        background: rgba(0, 0, 0, 0.95); color: #fff; 
        display: flex; flex-direction: column; justify-content: center; align-items: center; 
        padding: 10px; box-sizing: border-box; text-align: center; 
        opacity: 0; transition: opacity 0.3s; pointer-events: none; 
        backdrop-filter: blur(4px); 
        z-index: 10;
    }
    .desc-text { 
        font-size: 13px; line-height: 1.5; color: #ddd; 
        max-height: 80%; 
        overflow-y: auto; 
        width: 100%;
        text-align: left;
        font-family: 'Roboto', sans-serif;
        scrollbar-width: thin; 
        scrollbar-color: var(--neon) #333;
    }
    .desc-text::-webkit-scrollbar { width: 6px; }
    .desc-text::-webkit-scrollbar-track { background: #333; }
    .desc-text::-webkit-scrollbar-thumb { background-color: var(--neon); border-radius: 10px; }

    .close-hint { margin-top: 10px; font-size: 10px; color: var(--neon); text-transform: uppercase; cursor:pointer; flex-shrink: 0; }
    .book-card.show-desc .book-img { opacity: 0; }
    .book-card.show-desc .desc-overlay { opacity: 1; pointer-events: auto; }

    /* Card Content */
    .card-content { padding: 15px; flex-grow: 1; display: flex; flex-direction: column; justify-content: space-between; }
    .book-title { color: #fff; font-size: 14px; font-weight: 700; margin-bottom: 8px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    .tag-row { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 10px; }
    .mini-tag { font-size: 9px; background: #222; color: #888; padding: 2px 6px; border-radius: 4px; border: 1px solid #333; }

    .btn-row { display: flex; gap: 10px; margin-top: 10px; }

    .dl-btn { 
        width: 100%; padding: 8px 0; background: transparent; 
        border: 1px solid var(--neon); color: var(--neon); 
        cursor: pointer; border-radius: 4px; transition: 0.2s;
        display: flex; justify-content: center; align-items: center; min-height: 35px;
        flex-grow: 1; 
    }
    
    .dl-btn:hover:not(:disabled) { background: var(--neon); color: #000; }
    .dl-btn:disabled { opacity: 0.5; cursor: not-allowed; }

    .blog-btn {
        width: 40px; padding: 0; background: transparent;
        border: 1px solid var(--neon); color: var(--neon);
        cursor: pointer; border-radius: 4px; transition: 0.2s;
        display: flex; justify-content: center; align-items: center; min-height: 35px;
        flex-shrink: 0;
    }
    .blog-btn:hover { background: var(--neon); color: #000; }

    .dl-icon { width: 20px; height: 20px; fill: currentColor; }

    #lib-loading { text-align: center; color: var(--neon); margin-top: 50px; }
    .cyber-spinner { width: 40px; height: 40px; margin: 0 auto; border: 4px solid #333; border-top: 4px solid var(--neon); border-radius: 50%; animation: spin 1s linear infinite; }
    @keyframes spin { 100% { transform: rotate(360deg); } }
    @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
    #load-more-btn { display:none; margin: 0 auto; background: transparent; border: 1px solid var(--neon); color: var(--neon); padding: 12px 30px; font-weight:bold; cursor:pointer; }
    #load-more-btn:hover { background: var(--neon); color: #000; }
  
    @media (max-width: 600px) { 
        #book-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } 
        .card-content { padding: 8px; } 
        .book-title { font-size: 12px; margin-bottom: 5px; } 
        .mini-tag { font-size: 8px; padding: 1px 4px; } 
        .dl-btn, .blog-btn { min-height: 30px; } 
    }
    
    @media only screen and (min-width:601px) and (max-width:799px){#library-app{margin-left:-25px;margin-right:-25px;}}@media only screen and (min-width:800px) and (max-width:849px){#library-app{margin-left:-100px;margin-right:-95px;}}@media only screen and (min-width:850px) and (max-width:899px){#library-app{margin-left:-130px;margin-right:-120px;}}@media only screen and (min-width:900px) and (max-width:957px){#library-app{margin-left:-155px;margin-right:-145px;}}@media only screen and (min-width:958px) and (max-width:999px){#library-app{margin-left:-185px;margin-right:-175px;}}@media only screen and (min-width:1000px) and (max-width:1016px){#library-app{margin-left:-225px;margin-right:-195px;}}@media only screen and (min-width:1017px) and (max-width:1023px){#library-app{margin-left:-200px;margin-right:-230px;}}@media only screen and (min-width:1024px) and (max-width:1099px){#library-app{margin-left:-215px;margin-right:-255px;}}@media only screen and (min-width:1100px) and (max-width:1199px){#library-app{margin-left:-235px;margin-right:-230px;}}@media only screen and (min-width:1200px) and (max-width:1241px){#library-app{margin-left:-235px;margin-right:-230px;}}@media only screen and (min-width:1242px) and (max-width:1249px){#library-app{margin-left:-185px;margin-right:-150px;}}@media only screen and (min-width:1250px) and (max-width:1299px){#library-app{margin-left:-185px;margin-right:-165px;}}@media only screen and (min-width:1300px) and (max-width:1316px){#library-app{margin-left:-200px;margin-right:-165px;}}@media only screen and (width:1317px){#library-app{margin-left:-230px;margin-right:-35px;}}@media only screen and (min-width:1318px) and (max-width:1349px){#library-app{margin-left:-240px;margin-right:-35px;}}@media only screen and (min-width:1350px) and (max-width:1500px){#library-app{margin-left:-245px;margin-right:-30px;}}@media only screen and (min-width:1501px) and (max-width:1750px){#library-app{margin-left:-300px; margin-right:-50px}}@media only screen and (min-width:1751px) and (max-width:1970px){#library-app{margin-left:-370px; margin-right:-160px}}@media only screen and (min-width:1971px) and (max-width:2299px){#library-app{margin-left:-460px; margin-right:-320px}}@media only screen and (min-width:2300px){#library-app{margin-left:-630px; margin-right:-460px}}