/* ==========================================================
   منصة القراءات العشر — GLOBAL STYLE
   متوافق مع index.html المرسل
========================================================== */

:root{
    --bg:#f7f4ed;
    --bg-soft:#efe9dc;
    --surface:#fffdf8;
    --surface-2:#f4efe4;
    --text:#29261f;
    --muted:#766f62;
    --primary:#166b50;
    --primary-dark:#0d4938;
    --primary-soft:#dcece4;
    --gold:#b98a36;
    --gold-light:#d8b86a;
    --border:rgba(49,55,45,.12);
    --shadow:0 18px 50px rgba(40,35,25,.10);
    --shadow-sm:0 8px 25px rgba(40,35,25,.08);
    --radius:24px;
    --radius-sm:14px;
    --container:1200px;
    --header-height:82px;
    --transition:.3s ease;
}

body.dark-mode,
html.dark-mode{
    --bg:#111813;
    --bg-soft:#17221b;
    --surface:#19251e;
    --surface-2:#202d25;
    --text:#f3efe4;
    --muted:#b7b0a0;
    --primary:#3b9b76;
    --primary-dark:#287557;
    --primary-soft:#193c30;
    --gold:#d0a64d;
    --gold-light:#e0c476;
    --border:rgba(255,255,255,.10);
    --shadow:0 18px 50px rgba(0,0,0,.30);
    --shadow-sm:0 8px 25px rgba(0,0,0,.22);
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
    scroll-padding-top:100px;
}

body{
    direction:rtl;
    font-family:"Cairo",sans-serif;
    background:var(--bg);
    color:var(--text);
    line-height:1.8;
    overflow-x:hidden;
    transition:background var(--transition),color var(--transition);
}

body.no-scroll{
    overflow:hidden;
}

a{
    color:inherit;
    text-decoration:none;
}

button,
input,
select{
    font:inherit;
}

button{
    cursor:pointer;
    border:0;
}

img{
    max-width:100%;
    display:block;
}

ul{
    list-style:none;
}

.container{
    width:min(100% - 40px,var(--container));
    margin-inline:auto;
}

.section{
    position:relative;
    padding:110px 0;
}

.section-heading{
    max-width:760px;
    margin:0 auto 55px;
    text-align:center;
}

.section-kicker{
    display:inline-flex;
    align-items:center;
    gap:8px;
    color:var(--primary);
    font-size:.9rem;
    font-weight:700;
    margin-bottom:12px;
}

.section-heading h2{
    font-family:"Amiri",serif;
    font-size:clamp(2rem,4vw,3.25rem);
    line-height:1.25;
    margin-bottom:14px;
}

.section-heading p{
    color:var(--muted);
    font-size:1rem;
}

/* ==========================================================
   BUTTONS
========================================================== */

.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    min-height:52px;
    padding:0 25px;
    border-radius:14px;
    font-weight:700;
    transition:transform var(--transition),box-shadow var(--transition),background var(--transition);
}

.btn:hover{
    transform:translateY(-3px);
}

.btn-primary{
    color:#fff;
    background:linear-gradient(135deg,var(--primary),var(--primary-dark));
    box-shadow:0 12px 25px rgba(22,107,80,.20);
}

.btn-primary:hover{
    box-shadow:0 16px 32px rgba(22,107,80,.28);
}

.btn-secondary{
    color:var(--primary);
    background:var(--surface);
    border:1px solid var(--border);
}

.btn-secondary:hover{
    background:var(--primary-soft);
}

/* ==========================================================
   PRELOADER
========================================================== */

.preloader{
    position:fixed;
    inset:0;
    z-index:99999;
    display:grid;
    place-items:center;
    background:var(--bg);
    transition:opacity .5s ease,visibility .5s ease;
}

.preloader.hidden{
    opacity:0;
    visibility:hidden;
    pointer-events:none;
}

.preloader-inner{
    width:min(90%,380px);
    text-align:center;
}

.preloader-icon{
    width:76px;
    height:76px;
    margin:0 auto 20px;
    display:grid;
    place-items:center;
    border-radius:22px;
    color:#fff;
    background:linear-gradient(135deg,var(--primary),var(--primary-dark));
    box-shadow:var(--shadow);
    font-size:30px;
}

.preloader h2{
    font-family:"Amiri",serif;
    font-size:2rem;
}

.preloader p{
    color:var(--muted);
    margin:4px 0 20px;
}

.loader-line{
    height:4px;
    overflow:hidden;
    border-radius:50px;
    background:var(--border);
}

.loader-line span{
    display:block;
    width:45%;
    height:100%;
    border-radius:inherit;
    background:var(--gold);
    animation:loader 1.4s infinite ease-in-out;
}

@keyframes loader{
    0%{transform:translateX(220%);}
    100%{transform:translateX(-220%);}
}

/* ==========================================================
   HEADER / NAVBAR
========================================================== */

.site-header{
    position:fixed;
    top:0;
    left:0;
    right:0;
    z-index:5000;
    transition:background var(--transition),box-shadow var(--transition);
}

.site-header.scrolled{
    background:color-mix(in srgb,var(--surface) 92%,transparent);
    backdrop-filter:blur(18px);
    box-shadow:0 8px 30px rgba(0,0,0,.07);
}

.navbar{
    width:min(100% - 40px,1400px);
    height:var(--header-height);
    margin:auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:25px;
}

.brand{
    display:flex;
    align-items:center;
    gap:12px;
    flex-shrink:0;
}

.brand-icon{
    width:46px;
    height:46px;
    display:grid;
    place-items:center;
    border-radius:14px;
    color:#fff;
    background:linear-gradient(135deg,var(--primary),var(--primary-dark));
    box-shadow:0 8px 20px rgba(22,107,80,.18);
}

.brand-text{
    display:flex;
    flex-direction:column;
    line-height:1.2;
}

.brand-text strong{
    font-family:"Amiri",serif;
    font-size:1.25rem;
}

.brand-text span{
    color:var(--muted);
    font-size:.72rem;
}

.nav-links{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:5px;
}

.nav-link{
    position:relative;
    display:block;
    padding:10px 12px;
    color:var(--muted);
    font-size:.9rem;
    font-weight:600;
    transition:color var(--transition);
}

.nav-link::after{
    content:"";
    position:absolute;
    left:12px;
    right:12px;
    bottom:3px;
    height:2px;
    border-radius:10px;
    background:var(--primary);
    transform:scaleX(0);
    transform-origin:center;
    transition:transform var(--transition);
}

.nav-link:hover,
.nav-link.active{
    color:var(--primary);
}

.nav-link.active::after,
.nav-link:hover::after{
    transform:scaleX(1);
}

.nav-actions{
    display:flex;
    align-items:center;
    gap:7px;
}

.icon-btn,
.menu-toggle{
    position:relative;
    width:43px;
    height:43px;
    display:grid;
    place-items:center;
    border-radius:13px;
    color:var(--text);
    background:transparent;
    transition:background var(--transition),color var(--transition),transform var(--transition);
}

.icon-btn:hover,
.menu-toggle:hover{
    color:var(--primary);
    background:var(--primary-soft);
}

.favorites-btn span{
    position:absolute;
    top:-3px;
    right:-3px;
    min-width:18px;
    height:18px;
    padding:0 4px;
    display:grid;
    place-items:center;
    border-radius:20px;
    color:#fff;
    background:var(--gold);
    font-size:.65rem;
}

.menu-toggle{
    display:none;
}

/* ==========================================================
   SEARCH PANEL
========================================================== */

.search-panel{
    position:absolute;
    top:calc(100% + 8px);
    left:50%;
    width:min(92%,760px);
    padding:15px;
    border:1px solid var(--border);
    border-radius:20px;
    background:var(--surface);
    box-shadow:var(--shadow);
    transform:translate(-50%,-15px);
    opacity:0;
    visibility:hidden;
    transition:all var(--transition);
}

.search-panel.open,
.search-panel.active{
    transform:translate(-50%,0);
    opacity:1;
    visibility:visible;
}

.search-box{
    display:flex;
    align-items:center;
    gap:10px;
    padding:0 14px;
    border:1px solid var(--border);
    border-radius:14px;
    background:var(--surface-2);
}

.search-box > i{
    color:var(--primary);
}

.search-box input{
    flex:1;
    min-width:0;
    height:50px;
    border:0;
    outline:0;
    color:var(--text);
    background:transparent;
}

.search-box button{
    width:35px;
    height:35px;
    border-radius:10px;
    color:var(--muted);
    background:transparent;
}

.search-results{
    max-height:350px;
    overflow:auto;
    margin-top:10px;
}

.search-result-item{
    padding:12px;
    border-radius:12px;
    transition:background var(--transition);
}

.search-result-item:hover{
    background:var(--surface-2);
}

/* ==========================================================
   HERO
========================================================== */

.hero{
    position:relative;
    min-height:100vh;
    min-height:780px;
    display:flex;
    align-items:center;
    overflow:hidden;
    padding:150px 0 100px;
    background:
        radial-gradient(circle at 80% 30%,rgba(185,138,54,.13),transparent 28%),
        radial-gradient(circle at 15% 70%,rgba(22,107,80,.12),transparent 30%),
        var(--bg);
}

.hero-background{
    position:absolute;
    inset:0;
    pointer-events:none;
}

.hero-pattern{
    position:absolute;
    inset:0;
    opacity:.22;
    background-image:
        linear-gradient(30deg,rgba(22,107,80,.05) 12%,transparent 12.5%,transparent 87%,rgba(22,107,80,.05) 87.5%),
        linear-gradient(150deg,rgba(185,138,54,.04) 12%,transparent 12.5%,transparent 87%,rgba(185,138,54,.04) 87.5%);
    background-size:70px 120px;
}

.hero-glow{
    position:absolute;
    width:350px;
    height:350px;
    border-radius:50%;
    filter:blur(80px);
    opacity:.25;
}

.glow-one{
    top:10%;
    right:5%;
    background:var(--gold);
}

.glow-two{
    bottom:0;
    left:10%;
    background:var(--primary);
}

.hero-container{
    position:relative;
    z-index:2;
    width:min(100% - 40px,var(--container));
    margin:auto;
    display:grid;
    grid-template-columns:1.1fr .9fr;
    align-items:center;
    gap:80px;
}

.hero-content{
    max-width:700px;
}

.hero-badge{
    width:max-content;
    max-width:100%;
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:7px 13px 7px 16px;
    margin-bottom:22px;
    border:1px solid rgba(185,138,54,.25);
    border-radius:50px;
    color:var(--primary);
    background:var(--surface);
    box-shadow:var(--shadow-sm);
    font-size:.85rem;
    font-weight:700;
}

.badge-icon{
    width:28px;
    height:28px;
    display:grid;
    place-items:center;
    border-radius:50%;
    color:#fff;
    background:var(--gold);
}

.hero h1{
    font-family:"Amiri",serif;
    font-size:clamp(3.2rem,6vw,5.6rem);
    line-height:1.1;
    letter-spacing:-1px;
    margin-bottom:25px;
}

.hero h1 span{
    color:var(--primary);
    position:relative;
}

.hero-description{
    max-width:650px;
    color:var(--muted);
    font-size:1.08rem;
    line-height:2;
    margin-bottom:30px;
}

.hero-buttons{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
}

.hero-features{
    display:flex;
    flex-wrap:wrap;
    gap:25px;
    margin-top:35px;
}

.hero-feature{
    display:flex;
    align-items:center;
    gap:9px;
    color:var(--muted);
    font-size:.88rem;
}

.hero-feature i{
    color:var(--gold);
}

.hero-visual{
    display:grid;
    place-items:center;
}

.quran-orbit{
    position:relative;
    width:min(480px,80vw);
    aspect-ratio:1;
    display:grid;
    place-items:center;
}

.orbit{
    position:absolute;
    inset:8%;
    border:1px solid rgba(22,107,80,.18);
    border-radius:50%;
}

.orbit-two{
    inset:18%;
    border-color:rgba(185,138,54,.22);
}

.orbit-three{
    inset:28%;
    border-style:dashed;
    border-color:rgba(22,107,80,.15);
}

.quran-card{
    position:relative;
    z-index:3;
    width:min(270px,58vw);
    aspect-ratio:.78;
    padding:35px 25px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    border:1px solid rgba(185,138,54,.35);
    border-radius:18px;
    color:#f7f0dc;
    background:
        linear-gradient(145deg,rgba(255,255,255,.05),transparent),
        linear-gradient(135deg,#174d3d,#0b3027);
    box-shadow:0 30px 60px rgba(0,0,0,.18);
    transform:rotate(-3deg);
}

.quran-card-top{
    display:flex;
    align-items:center;
    gap:25px;
    color:var(--gold-light);
    font-size:1.5rem;
}

.quran-card-title{
    font-family:"Amiri",serif;
    font-size:2.1rem;
    margin:18px 0;
}

.quran-card-line{
    width:80px;
    height:1px;
    background:var(--gold);
}

.quran-card-subtitle{
    margin-top:18px;
    color:#d8d0bd;
    font-size:.85rem;
}

.quran-card-decoration{
    display:flex;
    align-items:center;
    gap:10px;
    margin-top:30px;
    color:var(--gold);
}

.quran-card-decoration span{
    width:35px;
    height:1px;
    background:currentColor;
}

.scroll-indicator{
    position:absolute;
    bottom:25px;
    left:50%;
    z-index:3;
    transform:translateX(-50%);
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:4px;
    color:var(--muted);
    font-size:.75rem;
    animation:float 2s infinite;
}

@keyframes float{
    50%{transform:translate(-50%,6px);}
}

/* ==========================================================
   STATS
========================================================== */

.stats-section{
    position:relative;
    z-index:4;
    margin-top:-55px;
}

.stats-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:16px;
}

.stat-card{
    padding:25px 18px;
    text-align:center;
    border:1px solid var(--border);
    border-radius:20px;
    background:var(--surface);
    box-shadow:var(--shadow-sm);
    transition:transform var(--transition),box-shadow var(--transition);
}

.stat-card:hover{
    transform:translateY(-6px);
    box-shadow:var(--shadow);
}

.stat-icon{
    width:48px;
    height:48px;
    margin:0 auto 10px;
    display:grid;
    place-items:center;
    border-radius:14px;
    color:var(--primary);
    background:var(--primary-soft);
}

.stat-number{
    font-size:2rem;
    font-weight:800;
    color:var(--primary);
    line-height:1.2;
}

.stat-label{
    color:var(--muted);
    font-size:.82rem;
}

/* ==========================================================
   QIRAAT
========================================================== */

.qiraat-section{
    background:var(--bg);
}

.filter-bar{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:9px;
    margin-bottom:35px;
}

.filter-btn{
    padding:9px 20px;
    border:1px solid var(--border);
    border-radius:50px;
    color:var(--muted);
    background:var(--surface);
    transition:all var(--transition);
}

.filter-btn:hover,
.filter-btn.active{
    color:#fff;
    border-color:var(--primary);
    background:var(--primary);
}

.qiraat-grid{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:18px;
}

.qiraat-card{
    position:relative;
    min-height:360px;
    padding:28px 22px 22px;
    overflow:hidden;
    border:1px solid var(--border);
    border-radius:22px;
    background:var(--surface);
    box-shadow:var(--shadow-sm);
    transition:transform var(--transition),box-shadow var(--transition),border-color var(--transition);
}

.qiraat-card::before{
    content:"";
    position:absolute;
    width:100px;
    height:100px;
    top:-50px;
    left:-50px;
    border-radius:50%;
    background:var(--primary-soft);
}

.qiraat-card:hover{
    transform:translateY(-8px);
    border-color:rgba(22,107,80,.25);
    box-shadow:var(--shadow);
}

.card-number{
    position:absolute;
    top:15px;
    left:18px;
    color:var(--border);
    font-size:.8rem;
    font-weight:800;
}

.card-icon{
    width:58px;
    height:58px;
    margin-bottom:18px;
    display:grid;
    place-items:center;
    border-radius:18px;
    color:var(--primary);
    background:var(--primary-soft);
    font-size:1.25rem;
}

.card-region{
    display:inline-block;
    margin-bottom:7px;
    color:var(--gold);
    font-size:.75rem;
    font-weight:700;
}

.qiraat-card h3{
    font-family:"Amiri",serif;
    font-size:1.45rem;
    margin-bottom:8px;
}

.qiraat-card p{
    min-height:72px;
    color:var(--muted);
    font-size:.82rem;
    line-height:1.9;
}

.card-readers{
    display:flex;
    flex-wrap:wrap;
    gap:7px;
    margin:15px 0;
}

.card-readers span{
    padding:4px 9px;
    border-radius:8px;
    color:var(--primary);
    background:var(--primary-soft);
    font-size:.72rem;
    font-weight:700;
}

.card-btn{
    display:inline-flex;
    align-items:center;
    gap:7px;
    padding:7px 0;
    color:var(--primary);
    background:transparent;
    font-size:.8rem;
    font-weight:700;
}

.card-btn i{
    transition:transform var(--transition);
}

.card-btn:hover i{
    transform:translateX(-5px);
}

.card-favorite{
    position:absolute;
    left:16px;
    bottom:18px;
    width:36px;
    height:36px;
    display:grid;
    place-items:center;
    border-radius:10px;
    color:var(--muted);
    background:var(--surface-2);
}

.card-favorite.active{
    color:var(--gold);
}

/* ==========================================================
   MUSHAFS
========================================================== */

.mushafs-section{
    background:var(--surface-2);
}

.mushaf-tools{
    display:grid;
    grid-template-columns:minmax(250px,1fr) 260px auto;
    gap:12px;
    align-items:center;
    margin-bottom:30px;
}

.mushaf-search-box,
.mushaf-filter-box{
    min-height:52px;
    display:flex;
    align-items:center;
    gap:10px;
    padding:0 15px;
    border:1px solid var(--border);
    border-radius:14px;
    background:var(--surface);
}

.mushaf-search-box > i,
.mushaf-filter-box > label i{
    color:var(--primary);
}

.mushaf-search-box input{
    flex:1;
    min-width:0;
    height:50px;
    border:0;
    outline:0;
    color:var(--text);
    background:transparent;
}

.mushaf-search-box button{
    width:32px;
    height:32px;
    border-radius:8px;
    color:var(--muted);
    background:transparent;
}

.mushaf-filter-box label{
    display:flex;
    align-items:center;
    gap:7px;
    white-space:nowrap;
    color:var(--muted);
    font-size:.8rem;
}

.mushaf-filter-box select{
    flex:1;
    min-width:0;
    border:0;
    outline:0;
    color:var(--text);
    background:transparent;
}

.mushaf-results-count{
    padding:12px 16px;
    border-radius:14px;
    color:var(--primary);
    background:var(--primary-soft);
    text-align:center;
    font-size:.8rem;
    font-weight:700;
}

.mushaf-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:18px;
}

.mushaf-card{
    position:relative;
    padding:22px;
    border:1px solid var(--border);
    border-radius:20px;
    background:var(--surface);
    box-shadow:var(--shadow-sm);
    transition:all var(--transition);
}

.mushaf-card:hover{
    transform:translateY(-6px);
    box-shadow:var(--shadow);
}

.mushaf-card-cover{
    height:180px;
    margin-bottom:18px;
    display:grid;
    place-items:center;
    border-radius:15px;
    color:var(--gold);
    background:
        radial-gradient(circle,rgba(185,138,54,.15),transparent 60%),
        var(--primary-dark);
    font-size:3.5rem;
}

.mushaf-card h3{
    font-family:"Amiri",serif;
    font-size:1.35rem;
}

.mushaf-card p{
    color:var(--muted);
    font-size:.8rem;
}

.mushaf-card button{
    width:100%;
    margin-top:15px;
    padding:10px;
    border-radius:11px;
    color:#fff;
    background:var(--primary);
}

.mushaf-empty{
    padding:60px 20px;
    text-align:center;
}

.mushaf-empty-icon{
    width:70px;
    height:70px;
    margin:0 auto 15px;
    display:grid;
    place-items:center;
    border-radius:20px;
    color:var(--primary);
    background:var(--primary-soft);
    font-size:1.5rem;
}

.mushaf-empty h3{
    font-family:"Amiri",serif;
    font-size:1.6rem;
}

.mushaf-empty p{
    color:var(--muted);
}

.mushaf-reset-btn{
    margin-top:15px;
    padding:10px 18px;
    border-radius:11px;
    color:#fff;
    background:var(--primary);
}

/* ==========================================================
   MUSHAF MODAL / VIEWER
========================================================== */

.mushaf-modal,
.modal{
    position:fixed;
    inset:0;
    z-index:9000;
    display:grid;
    place-items:center;
    padding:20px;
    opacity:0;
    visibility:hidden;
    transition:all var(--transition);
}

.mushaf-modal.open,
.mushaf-modal.active,
.modal.open,
.modal.active{
    opacity:1;
    visibility:visible;
}

.mushaf-modal-overlay,
.modal-overlay{
    position:absolute;
    inset:0;
    background:rgba(5,10,8,.72);
    backdrop-filter:blur(8px);
}

.mushaf-viewer{
    position:relative;
    z-index:2;
    width:min(1250px,96vw);
    height:min(900px,94vh);
    display:flex;
    flex-direction:column;
    overflow:hidden;
    border:1px solid var(--border);
    border-radius:24px;
    background:var(--surface);
    box-shadow:0 30px 100px rgba(0,0,0,.35);
}

.mushaf-viewer-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px;
    padding:18px 22px;
    border-bottom:1px solid var(--border);
}

.mushaf-viewer-heading{
    display:flex;
    align-items:center;
    gap:12px;
}

.mushaf-viewer-icon{
    width:48px;
    height:48px;
    display:grid;
    place-items:center;
    border-radius:14px;
    color:var(--primary);
    background:var(--primary-soft);
}

.mushaf-viewer-heading span,
.mushaf-viewer-heading p{
    color:var(--muted);
    font-size:.75rem;
}

.mushaf-viewer-heading h2{
    font-family:"Amiri",serif;
    font-size:1.5rem;
    line-height:1.2;
}

.mushaf-viewer-close,
.modal-close{
    width:42px;
    height:42px;
    display:grid;
    place-items:center;
    border-radius:12px;
    color:var(--muted);
    background:var(--surface-2);
}

.mushaf-viewer-close:hover,
.modal-close:hover{
    color:#fff;
    background:#b84b4b;
}

.mushaf-toolbar{
    min-height:58px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:15px;
    padding:8px 15px;
    border-bottom:1px solid var(--border);
    background:var(--surface-2);
}

.mushaf-toolbar-group{
    display:flex;
    align-items:center;
    gap:5px;
}

.mushaf-tool-btn,
.mushaf-zoom-value{
    min-height:38px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    padding:0 12px;
    border-radius:10px;
    color:var(--text);
    background:var(--surface);
}

.mushaf-tool-btn:hover,
.mushaf-zoom-value:hover{
    color:var(--primary);
}

.mushaf-icon-only{
    width:38px;
    padding:0;
}

.mushaf-page-indicator{
    min-width:70px;
    text-align:center;
    font-weight:700;
}

.mushaf-page-stage{
    flex:1;
    min-height:0;
    display:grid;
    place-items:center;
    overflow:auto;
    padding:30px;
    background:#d7d1c4;
}

.mushaf-page-wrapper{
    position:relative;
    min-width:260px;
    max-width:100%;
    min-height:300px;
    display:grid;
    place-items:center;
}

.mushaf-page-image{
    max-width:100%;
    max-height:72vh;
    object-fit:contain;
    border-radius:5px;
    box-shadow:0 15px 35px rgba(0,0,0,.25);
    user-select:none;
}

.mushaf-page-placeholder{
    min-width:300px;
    padding:45px;
    text-align:center;
    border-radius:18px;
    background:var(--surface);
}

.mushaf-placeholder-icon{
    font-size:2.5rem;
    color:var(--primary);
}

.mushaf-side-nav{
    position:absolute;
    z-index:4;
    top:50%;
    width:45px;
    height:45px;
    display:grid;
    place-items:center;
    border-radius:50%;
    color:var(--text);
    background:var(--surface);
    box-shadow:var(--shadow-sm);
    transform:translateY(-50%);
}

.mushaf-side-prev{right:18px;}
.mushaf-side-next{left:18px;}

.mushaf-viewer-body{
    position:relative;
    flex:1;
    min-height:0;
}

.mushaf-viewer-footer{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    padding:10px 18px;
    border-top:1px solid var(--border);
    color:var(--muted);
    font-size:.72rem;
}

.mushaf-viewer-status{
    display:flex;
    align-items:center;
    gap:7px;
}

.mushaf-viewer-status i{
    color:var(--primary);
}

.mushaf-viewer-shortcuts{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
}

kbd{
    padding:2px 6px;
    border:1px solid var(--border);
    border-radius:5px;
    background:var(--surface-2);
}

/* ==========================================================
   LIBRARY
========================================================== */

.library-section{
    background:var(--bg);
}

.library-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:22px;
}

.library-card{
    display:grid;
    grid-template-columns:125px 1fr;
    overflow:hidden;
    border:1px solid var(--border);
    border-radius:22px;
    background:var(--surface);
    box-shadow:var(--shadow-sm);
    transition:transform var(--transition),box-shadow var(--transition);
}

.library-card:hover{
    transform:translateY(-6px);
    box-shadow:var(--shadow);
}

.library-cover{
    min-height:210px;
    display:grid;
    place-items:center;
    color:var(--gold);
    background:linear-gradient(145deg,var(--primary-dark),var(--primary));
    font-size:2.7rem;
}

.library-info{
    padding:22px 18px;
}

.library-info > span{
    color:var(--gold);
    font-size:.72rem;
    font-weight:700;
}

.library-info h3{
    font-family:"Amiri",serif;
    font-size:1.3rem;
    line-height:1.5;
    margin:7px 0;
}

.library-info p{
    color:var(--muted);
    font-size:.78rem;
}

.library-btn{
    margin-top:15px;
    padding:8px 13px;
    border-radius:9px;
    color:var(--primary);
    background:var(--primary-soft);
    font-size:.75rem;
    font-weight:700;
}

/* ==========================================================
   AUDIO LIBRARY
========================================================== */

.audio-library-section{
    background:var(--surface-2);
}

.audio-library{
    display:grid;
    grid-template-columns:1fr 1.15fr;
    gap:22px;
}

.audio-browser,
.audio-player{
    border:1px solid var(--border);
    border-radius:24px;
    background:var(--surface);
    box-shadow:var(--shadow-sm);
}

.audio-browser{
    overflow:hidden;
}

.audio-browser-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px;
    padding:22px;
    border-bottom:1px solid var(--border);
}

.audio-browser-title{
    display:flex;
    align-items:center;
    gap:12px;
}

.audio-browser-icon{
    width:48px;
    height:48px;
    display:grid;
    place-items:center;
    border-radius:14px;
    color:var(--primary);
    background:var(--primary-soft);
}

.audio-browser-title span{
    color:var(--muted);
    font-size:.72rem;
}

.audio-browser-title h3{
    font-family:"Amiri",serif;
    font-size:1.3rem;
    line-height:1.3;
}

.audio-reader-count{
    color:var(--gold);
    font-size:.78rem;
    font-weight:700;
}

.audio-browser-tools{
    display:grid;
    grid-template-columns:1fr 190px;
    gap:10px;
    padding:15px;
}

.audio-search,
.audio-filter-wrapper{
    min-height:47px;
    display:flex;
    align-items:center;
    gap:8px;
    padding:0 12px;
    border:1px solid var(--border);
    border-radius:12px;
    background:var(--surface-2);
}

.audio-search i,
.audio-filter-wrapper > i{
    color:var(--primary);
}

.audio-search input{
    flex:1;
    min-width:0;
    height:45px;
    border:0;
    outline:0;
    color:var(--text);
    background:transparent;
}

.audio-search-clear{
    background:transparent;
    color:var(--muted);
}

.audio-filter-wrapper select{
    flex:1;
    min-width:0;
    border:0;
    outline:0;
    color:var(--text);
    background:transparent;
}

.audio-readers{
    max-height:430px;
    overflow:auto;
    padding:0 15px 15px;
}

.audio-reader-item{
    display:flex;
    align-items:center;
    gap:12px;
    width:100%;
    padding:12px;
    margin-top:8px;
    border:1px solid transparent;
    border-radius:14px;
    text-align:right;
    color:var(--text);
    background:var(--surface-2);
    transition:all var(--transition);
}

.audio-reader-item:hover,
.audio-reader-item.active{
    border-color:rgba(22,107,80,.25);
    color:var(--primary);
    background:var(--primary-soft);
}

.audio-reader-item-icon{
    width:40px;
    height:40px;
    display:grid;
    place-items:center;
    flex-shrink:0;
    border-radius:11px;
    background:var(--surface);
}

.audio-reader-item strong{
    display:block;
    font-size:.82rem;
}

.audio-reader-item span{
    display:block;
    color:var(--muted);
    font-size:.7rem;
}

.audio-player{
    min-height:530px;
    padding:28px;
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.audio-player-header{
    display:flex;
    align-items:center;
    gap:15px;
}

.audio-player-cover{
    width:82px;
    height:82px;
    display:grid;
    place-items:center;
    flex-shrink:0;
    border-radius:20px;
    color:var(--gold);
    background:linear-gradient(145deg,var(--primary-dark),var(--primary));
    font-size:2rem;
}

.audio-player-info{
    flex:1;
}

.audio-player-info > span{
    color:var(--muted);
    font-size:.72rem;
}

.audio-player-info h3{
    font-family:"Amiri",serif;
    font-size:1.6rem;
    line-height:1.3;
}

.audio-player-info p{
    color:var(--muted);
    font-size:.78rem;
}

.audio-player-favorite{
    width:42px;
    height:42px;
    border-radius:12px;
    color:var(--muted);
    background:var(--surface-2);
}

.audio-player-favorite.active{
    color:#c45b5b;
}

.audio-surah-info{
    display:flex;
    align-items:end;
    justify-content:space-between;
    gap:15px;
    margin:35px 0 10px;
}

.audio-surah-current span{
    display:block;
    color:var(--muted);
    font-size:.72rem;
}

.audio-surah-current strong{
    font-family:"Amiri",serif;
    font-size:1.6rem;
}

.audio-time{
    color:var(--muted);
    font-size:.75rem;
}

.audio-progress{
    width:100%;
    accent-color:var(--primary);
}

.audio-controls-new{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:14px;
    margin:30px 0;
}

.audio-control-new,
.audio-main-play{
    width:48px;
    height:48px;
    display:grid;
    place-items:center;
    border-radius:50%;
    color:var(--text);
    background:var(--surface-2);
    transition:all var(--transition);
}

.audio-control-new:hover{
    color:var(--primary);
    transform:scale(1.06);
}

.audio-main-play{
    width:68px;
    height:68px;
    color:#fff;
    background:var(--primary);
    box-shadow:0 12px 25px rgba(22,107,80,.22);
}

.audio-main-play:hover{
    transform:scale(1.07);
}

.audio-player-bottom{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
}

.audio-volume{
    display:flex;
    align-items:center;
    gap:8px;
}

.audio-volume-button{
    color:var(--muted);
    background:transparent;
}

.audio-volume input{
    width:100px;
    accent-color:var(--primary);
}

.audio-status{
    color:var(--muted);
    font-size:.72rem;
}

.audio-player audio{
    display:none;
}

/* ==========================================================
   RECITATION BROWSER
========================================================== */

.recitation-browser{
    width:min(100% - 40px,900px);
    margin:40px auto 0;
    padding:25px;
    border:1px solid var(--border);
    border-radius:20px;
    background:var(--surface);
}

.recitation-selector{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:15px;
}

.selector-group label{
    display:block;
    margin-bottom:7px;
    color:var(--muted);
    font-size:.8rem;
    font-weight:700;
}

.selector-group select{
    width:100%;
    height:48px;
    padding:0 13px;
    border:1px solid var(--border);
    border-radius:12px;
    outline:0;
    color:var(--text);
    background:var(--surface-2);
}

.recitation-actions{
    margin-top:18px;
}

.recitation-play-btn{
    display:inline-flex;
    align-items:center;
    gap:9px;
    padding:12px 20px;
    border-radius:12px;
    color:#fff;
    background:var(--primary);
}

.recitation-message{
    margin-top:12px;
    color:var(--muted);
    font-size:.8rem;
}

/* ==========================================================
   ABOUT
========================================================== */

.about-section{
    background:var(--bg);
}

.about-box{
    position:relative;
    overflow:hidden;
    display:grid;
    grid-template-columns:180px 1fr;
    gap:35px;
    align-items:center;
    padding:55px;
    border:1px solid var(--border);
    border-radius:30px;
    background:
        radial-gradient(circle at 10% 20%,rgba(185,138,54,.12),transparent 25%),
        var(--surface);
    box-shadow:var(--shadow-sm);
}

.about-decoration{
    width:150px;
    height:150px;
    display:grid;
    place-items:center;
    border-radius:35px;
    color:var(--gold);
    background:var(--primary-dark);
    font-size:4rem;
}

.about-content .section-kicker{
    margin-bottom:5px;
}

.about-content h2{
    font-family:"Amiri",serif;
    font-size:2.6rem;
    margin-bottom:15px;
}

.about-content p{
    max-width:850px;
    color:var(--muted);
    margin-top:10px;
}

/* ==========================================================
   CTA
========================================================== */

.cta-section{
    padding:40px 0 100px;
    background:var(--bg);
}

.cta-box{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:25px;
    padding:40px 45px;
    border-radius:25px;
    color:#fff;
    background:linear-gradient(135deg,var(--primary-dark),var(--primary));
    box-shadow:0 20px 45px rgba(22,107,80,.20);
}

.cta-box > div > span{
    color:var(--gold-light);
    font-size:.8rem;
    font-weight:700;
}

.cta-box h2{
    font-family:"Amiri",serif;
    font-size:2.2rem;
    line-height:1.3;
}

.cta-box p{
    color:rgba(255,255,255,.72);
}

.cta-box .btn{
    flex-shrink:0;
    color:var(--primary-dark);
    background:#fff;
}

/* ==========================================================
   FOOTER
========================================================== */

.site-footer{
    padding:70px 0 0;
    color:#d8d5ca;
    background:#101713;
}

.footer-grid{
    display:grid;
    grid-template-columns:1.5fr .8fr .8fr 1fr;
    gap:45px;
    padding-bottom:50px;
}

.footer-brand .brand-text strong{
    color:#fff;
}

.footer-brand .brand-text span{
    color:#9eaa9f;
}

.footer-brand p{
    max-width:420px;
    margin-top:20px;
    color:#9eaa9f;
    font-size:.83rem;
}

.footer-column{
    display:flex;
    flex-direction:column;
    gap:9px;
}

.footer-column h3{
    margin-bottom:7px;
    color:#fff;
    font-family:"Amiri",serif;
    font-size:1.25rem;
}

.footer-column a,
.footer-column p{
    color:#9eaa9f;
    font-size:.8rem;
    transition:color var(--transition);
}

.footer-column a:hover{
    color:var(--gold-light);
}

.footer-social{
    display:flex;
    gap:8px;
    margin-top:10px;
}

.footer-social a{
    width:40px;
    height:40px;
    display:grid;
    place-items:center;
    border-radius:11px;
    background:rgba(255,255,255,.06);
}

.footer-bottom{
    padding:20px 0;
    border-top:1px solid rgba(255,255,255,.08);
    color:#77847a;
    text-align:center;
    font-size:.72rem;
}

/* ==========================================================
   READER MODAL
========================================================== */

.modal-content{
    position:relative;
    z-index:2;
    width:min(680px,94vw);
    max-height:90vh;
    overflow:auto;
    border:1px solid var(--border);
    border-radius:24px;
    background:var(--surface);
    box-shadow:var(--shadow);
}

.modal-close{
    position:absolute;
    top:15px;
    left:15px;
}

.modal-header{
    display:flex;
    align-items:center;
    gap:15px;
    padding:35px 30px 20px;
    border-bottom:1px solid var(--border);
}

.modal-icon{
    width:58px;
    height:58px;
    display:grid;
    place-items:center;
    border-radius:17px;
    color:var(--primary);
    background:var(--primary-soft);
    font-size:1.3rem;
}

.modal-header span{
    color:var(--muted);
    font-size:.75rem;
}

.modal-header h2{
    font-family:"Amiri",serif;
    font-size:2rem;
}

.modal-body{
    padding:25px 30px 35px;
}

.modal-tabs{
    display:flex;
    gap:6px;
    margin-bottom:20px;
    padding:5px;
    border-radius:13px;
    background:var(--surface-2);
}

.modal-tab{
    flex:1;
    padding:9px;
    border-radius:9px;
    color:var(--muted);
    background:transparent;
}

.modal-tab.active{
    color:var(--primary);
    background:var(--surface);
    box-shadow:var(--shadow-sm);
}

.modal-overview p{
    color:var(--muted);
}

/* ==========================================================
   FAVORITES DRAWER
========================================================== */

.favorites-panel{
    position:fixed;
    inset:0;
    z-index:8500;
    visibility:hidden;
    pointer-events:none;
}

.favorites-panel.open,
.favorites-panel.active{
    visibility:visible;
    pointer-events:auto;
}

.favorites-overlay{
    position:absolute;
    inset:0;
    background:rgba(5,10,8,.55);
    opacity:0;
    transition:opacity var(--transition);
}

.favorites-panel.open .favorites-overlay,
.favorites-panel.active .favorites-overlay{
    opacity:1;
}

.favorites-drawer{
    position:absolute;
    top:0;
    right:0;
    width:min(420px,94vw);
    height:100%;
    display:flex;
    flex-direction:column;
    background:var(--surface);
    box-shadow:-20px 0 60px rgba(0,0,0,.18);
    transform:translateX(100%);
    transition:transform .35s ease;
}

.favorites-panel.open .favorites-drawer,
.favorites-panel.active .favorites-drawer{
    transform:translateX(0);
}

.drawer-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:25px;
    border-bottom:1px solid var(--border);
}

.drawer-header span{
    color:var(--muted);
    font-size:.72rem;
}

.drawer-header h2{
    font-family:"Amiri",serif;
    font-size:1.8rem;
}

.drawer-close{
    width:42px;
    height:42px;
    display:grid;
    place-items:center;
    border-radius:11px;
    color:var(--muted);
    background:var(--surface-2);
}

.favorites-list{
    flex:1;
    overflow:auto;
    padding:20px;
}

.favorites-empty{
    padding:60px 20px;
    text-align:center;
    color:var(--muted);
}

.favorites-empty > i{
    font-size:3rem;
    color:var(--gold);
    margin-bottom:12px;
}

.favorites-empty h3{
    color:var(--text);
    font-family:"Amiri",serif;
    font-size:1.5rem;
}

/* ==========================================================
   TOAST
========================================================== */

.toast{
    position:fixed;
    right:25px;
    bottom:25px;
    z-index:10000;
    max-width:min(360px,90vw);
    display:flex;
    align-items:center;
    gap:10px;
    padding:13px 17px;
    border:1px solid var(--border);
    border-radius:13px;
    color:var(--text);
    background:var(--surface);
    box-shadow:var(--shadow);
    transform:translateY(30px);
    opacity:0;
    visibility:hidden;
    transition:all .3s ease;
}

.toast.show,
.toast.active{
    transform:translateY(0);
    opacity:1;
    visibility:visible;
}

.toast > i{
    color:var(--primary);
}

/* ==========================================================
   SCROLLBAR
========================================================== */

::-webkit-scrollbar{
    width:9px;
    height:9px;
}

::-webkit-scrollbar-track{
    background:var(--surface-2);
}

::-webkit-scrollbar-thumb{
    border-radius:20px;
    background:rgba(22,107,80,.35);
}

::-webkit-scrollbar-thumb:hover{
    background:var(--primary);
}

/* ==========================================================
   SELECTION
========================================================== */

::selection{
    color:#fff;
    background:var(--primary);
}

/* ==========================================================
   RESPONSIVE — TABLET
========================================================== */

@media (max-width:1100px){

    .qiraat-grid{
        grid-template-columns:repeat(3,1fr);
    }

    .mushaf-grid{
        grid-template-columns:repeat(3,1fr);
    }

    .hero-container{
        grid-template-columns:1fr .75fr;
        gap:35px;
    }

    .nav-links{
        gap:0;
    }

    .nav-link{
        padding-inline:8px;
        font-size:.82rem;
    }

    .footer-grid{
        grid-template-columns:1.3fr 1fr 1fr;
    }

    .audio-library{
        grid-template-columns:1fr;
    }

    .audio-readers{
        max-height:330px;
    }
}

/* ==========================================================
   RESPONSIVE — MOBILE NAV
========================================================== */

@media (max-width:850px){

    :root{
        --header-height:72px;
    }

    .navbar{
        width:min(100% - 25px,1400px);
    }

    .nav-links{
        position:absolute;
        top:calc(100% + 8px);
        right:12px;
        left:12px;
        display:flex;
        flex-direction:column;
        align-items:stretch;
        gap:2px;
        padding:10px;
        border:1px solid var(--border);
        border-radius:18px;
        background:var(--surface);
        box-shadow:var(--shadow);
        transform:translateY(-10px);
        opacity:0;
        visibility:hidden;
        transition:all var(--transition);
    }

    .nav-links.open,
    .nav-links.active{
        transform:translateY(0);
        opacity:1;
        visibility:visible;
    }

    .nav-link{
        padding:12px 15px;
        border-radius:10px;
    }

    .nav-link::after{
        display:none;
    }

    .nav-link:hover,
    .nav-link.active{
        background:var(--primary-soft);
    }

    .menu-toggle{
        display:grid;
    }

    .hero{
        min-height:auto;
        padding-top:130px;
    }

    .hero-container{
        grid-template-columns:1fr;
        text-align:center;
    }

    .hero-content{
        margin:auto;
    }

    .hero-badge,
    .hero-buttons,
    .hero-features{
        margin-inline:auto;
        justify-content:center;
    }

    .hero-description{
        margin-inline:auto;
    }

    .hero-visual{
        margin-top:20px;
    }

    .quran-orbit{
        width:350px;
    }

    .stats-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .mushaf-tools{
        grid-template-columns:1fr;
    }

    .library-grid{
        grid-template-columns:1fr;
    }

    .about-box{
        grid-template-columns:1fr;
        text-align:center;
    }

    .about-decoration{
        margin:auto;
    }

    .about-content .section-kicker{
        justify-content:center;
    }

    .cta-box{
        flex-direction:column;
        align-items:flex-start;
    }

    .footer-grid{
        grid-template-columns:1fr 1fr;
    }
}

/* ==========================================================
   RESPONSIVE — SMALL MOBILE
========================================================== */

@media (max-width:600px){

    .container{
        width:min(100% - 25px,var(--container));
    }

    .section{
        padding:75px 0;
    }

    .section-heading{
        margin-bottom:35px;
    }

    .section-heading h2{
        font-size:2.2rem;
    }

    .brand-text span{
        display:none;
    }

    .brand-text strong{
        font-size:1.05rem;
    }

    .brand-icon{
        width:41px;
        height:41px;
    }

    .nav-actions{
        gap:2px;
    }

    .icon-btn,
    .menu-toggle{
        width:39px;
        height:39px;
    }

    .hero{
        padding-bottom:80px;
    }

    .hero h1{
        font-size:3.15rem;
    }

    .hero-description{
        font-size:.9rem;
    }

    .hero-feature{
        font-size:.75rem;
    }

    .quran-orbit{
        width:280px;
    }

    .quran-card{
        width:190px;
    }

    .quran-card-title{
        font-size:1.65rem;
    }

    .stats-grid{
        grid-template-columns:1fr 1fr;
        gap:10px;
    }

    .stat-card{
        padding:18px 8px;
    }

    .stat-number{
        font-size:1.6rem;
    }

    .qiraat-grid,
    .mushaf-grid{
        grid-template-columns:1fr;
    }

    .qiraat-card{
        min-height:330px;
    }

    .library-card{
        grid-template-columns:95px 1fr;
    }

    .library-cover{
        min-height:190px;
    }

    .audio-browser-tools{
        grid-template-columns:1fr;
    }

    .audio-player{
        padding:20px;
    }

    .audio-player-cover{
        width:62px;
        height:62px;
        border-radius:15px;
    }

    .audio-player-info h3{
        font-size:1.3rem;
    }

    .audio-surah-info{
        margin-top:25px;
    }

    .audio-controls-new{
        gap:7px;
    }

    .audio-control-new{
        width:42px;
        height:42px;
    }

    .audio-main-play{
        width:58px;
        height:58px;
    }

    .audio-player-bottom{
        align-items:flex-start;
        flex-direction:column;
    }

    .recitation-selector{
        grid-template-columns:1fr;
    }

    .about-box{
        padding:30px 20px;
    }

    .about-content h2{
        font-size:2rem;
    }

    .cta-box{
        padding:30px 22px;
    }

    .cta-box h2{
        font-size:1.8rem;
    }

    .footer-grid{
        grid-template-columns:1fr;
        gap:30px;
    }

    .mushaf-viewer{
        width:100%;
        height:95vh;
        border-radius:16px;
    }

    .mushaf-toolbar{
        justify-content:space-between;
        overflow:auto;
    }

    .mushaf-toolbar-group{
        flex-shrink:0;
    }

    .mushaf-toolbar .mushaf-extra-tools{
        display:none;
    }

    .mushaf-side-nav{
        width:38px;
        height:38px;
    }

    .mushaf-side-prev{right:8px;}
    .mushaf-side-next{left:8px;}

    .mushaf-page-stage{
        padding:15px 45px;
    }

    .mushaf-viewer-footer{
        justify-content:center;
    }

    .mushaf-viewer-shortcuts{
        display:none;
    }

    .modal{
        padding:10px;
    }

    .modal-header{
        padding:30px 20px 18px;
    }

    .modal-body{
        padding:20px;
    }

    .favorites-drawer{
        width:100%;
    }

    .toast{
        right:12px;
        bottom:12px;
        left:12px;
        max-width:none;
    }
}

/* ==========================================================
   ACCESSIBILITY
========================================================== */

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible{
    outline:3px solid rgba(185,138,54,.45);
    outline-offset:3px;
}

@media (prefers-reduced-motion:reduce){
    *,
    *::before,
    *::after{
        scroll-behavior:auto!important;
        animation-duration:.01ms!important;
        animation-iteration-count:1!important;
        transition-duration:.01ms!important;
    }
}

/* ==========================================================
   UTILITY CLASSES
========================================================== */

[hidden]{
    display:none!important;
}

.fade-in{
    animation:fadeIn .5s ease both;
}

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

/* =========================================================
   MUSHAF CARDS
========================================================= */

.mushaf-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
    margin-top: 30px;
}

.mushaf-card {
    position: relative;
    overflow: hidden;
    padding: 22px;
    border: 1px solid rgba(197, 160, 89, 0.22);
    border-radius: 22px;
    background: var(--card-bg, #fff);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
    transition: 0.3s ease;
}

.mushaf-card:hover {
    transform: translateY(-5px);
    border-color: rgba(197, 160, 89, 0.55);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.1);
}

.mushaf-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.mushaf-card-icon {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    color: var(--gold, #c5a059);
    background: rgba(197, 160, 89, 0.12);
    font-size: 23px;
}

.mushaf-card-badge {
    padding: 7px 11px;
    border-radius: 30px;
    font-size: 12px;
    color: var(--gold, #c5a059);
    background: rgba(197, 160, 89, 0.1);
}

.mushaf-card-body {
    padding: 20px 0;
}

.mushaf-card-kicker {
    display: block;
    margin-bottom: 8px;
    color: var(--gold, #c5a059);
    font-size: 13px;
}

.mushaf-card-body h3 {
    margin: 0 0 10px;
    line-height: 1.7;
    font-size: 18px;
}

.mushaf-card-body p {
    margin: 0;
    color: var(--text-muted, #777);
    font-size: 14px;
}

.mushaf-card-actions {
    display: flex;
    gap: 10px;
}

.mushaf-card-actions a {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 10px;
    border-radius: 12px;
    text-decoration: none;
    transition: 0.25s;
}

.mushaf-open-btn {
    color: #fff;
    background: var(--gold, #c5a059);
}

.mushaf-open-btn:hover {
    opacity: 0.9;
}

.mushaf-book-btn {
    color: var(--gold, #c5a059);
    border: 1px solid rgba(197, 160, 89, 0.35);
}

.mushaf-book-btn:hover {
    background: rgba(197, 160, 89, 0.08);
}


/* =========================================================
   EMPTY
========================================================= */

.mushaf-empty {
    text-align: center;
    padding: 50px 20px;
}

.mushaf-empty[hidden] {
    display: none;
}


/* =========================================================
   DARK MODE
========================================================= */

body.dark-mode .mushaf-card,
[data-theme="dark"] .mushaf-card {
    background: var(--card-bg, #171717);
    border-color: rgba(197, 160, 89, 0.25);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.25);
}


/* =========================================================
   MODAL
========================================================= */

.mushaf-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: none;
}

.mushaf-modal.is-open {
    display: block;
}

.mushaf-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(7px);
}

.mushaf-viewer {
    position: relative;
    z-index: 2;
    width: min(1200px, 94vw);
    height: min(900px, 94vh);
    margin: 3vh auto;
    overflow: hidden;
    border-radius: 24px;
    background: var(--card-bg, #fff);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
}

.mushaf-viewer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px;
    border-bottom: 1px solid rgba(128, 128, 128, 0.15);
}

.mushaf-viewer-heading {
    display: flex;
    align-items: center;
    gap: 14px;
}

.mushaf-viewer-icon {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    color: var(--gold, #c5a059);
    background: rgba(197, 160, 89, 0.12);
}

.mushaf-viewer-heading span {
    display: block;
    color: var(--gold, #c5a059);
    font-size: 12px;
}

.mushaf-viewer-heading h2 {
    margin: 3px 0;
    font-size: 18px;
}

.mushaf-viewer-heading p {
    margin: 0;
    color: var(--text-muted, #777);
    font-size: 13px;
}

.mushaf-viewer-close {
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 12px;
    cursor: pointer;
    background: rgba(128, 128, 128, 0.1);
    color: inherit;
    font-size: 18px;
}

.mushaf-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    padding: 12px 18px;
    border-bottom: 1px solid rgba(128, 128, 128, 0.12);
}

.mushaf-toolbar-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mushaf-tool-btn,
.mushaf-zoom-value {
    border: 1px solid rgba(128, 128, 128, 0.18);
    border-radius: 10px;
    padding: 8px 12px;
    background: transparent;
    color: inherit;
    cursor: pointer;
}

.mushaf-viewer-body {
    position: relative;
    height: calc(100% - 180px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.mushaf-page-stage {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: auto;
    padding: 30px 80px;
}

.mushaf-page-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 300px;
    min-height: 400px;
}

.mushaf-page-image {
    max-width: 100%;
    max-height: 100%;
    transform-origin: center;
    transition: transform 0.2s ease;
}

.mushaf-page-placeholder {
    text-align: center;
    max-width: 450px;
    padding: 40px;
}

.mushaf-placeholder-icon {
    font-size: 50px;
    color: var(--gold, #c5a059);
    margin-bottom: 20px;
}

.mushaf-side-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    background: rgba(0, 0, 0, 0.08);
    color: inherit;
}

.mushaf-side-prev {
    right: 18px;
}

.mushaf-side-next {
    left: 18px;
}

.mushaf-viewer-footer {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding: 12px 20px;
    border-top: 1px solid rgba(128, 128, 128, 0.12);
    font-size: 12px;
}

.mushaf-viewer-shortcuts {
    display: flex;
    gap: 15px;
}

.mushaf-viewer-shortcuts kbd {
    padding: 2px 6px;
    border-radius: 5px;
    background: rgba(128, 128, 128, 0.12);
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 900px) {

    .mushaf-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}

@media (max-width: 600px) {

    .mushaf-grid {
        grid-template-columns: 1fr;
    }

    .mushaf-toolbar {
        flex-wrap: wrap;
    }

    .mushaf-viewer {
        width: 100vw;
        height: 100vh;
        margin: 0;
        border-radius: 0;
    }

    .mushaf-viewer-shortcuts {
        display: none;
    }

    .mushaf-page-stage {
        padding: 20px 55px;
    }

}

/* ==========================================================
   LIBRARY
========================================================== */

.library-section {
    position: relative;
}

.library-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    margin-top: 35px;
}

.library-card {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 390px;

    background: var(--card-bg, #ffffff);
    border: 1px solid var(--border-color, rgba(0,0,0,.08));
    border-radius: 22px;

    box-shadow:
        0 12px 35px rgba(0,0,0,.07);

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease;
}

.library-card:hover {
    transform: translateY(-7px);

    box-shadow:
        0 20px 45px rgba(0,0,0,.12);

    border-color:
        var(--gold, #c5a059);
}

.library-cover {
    position: relative;

    min-height: 175px;

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

    background:
        linear-gradient(
            135deg,
            rgba(197,160,89,.18),
            rgba(197,160,89,.04)
        );

    border-bottom:
        1px solid var(--border-color, rgba(0,0,0,.07));
}

.library-cover::before {
    content: "";

    position: absolute;

    width: 105px;
    height: 130px;

    border:
        2px solid
        var(--gold, #c5a059);

    border-radius: 8px;

    opacity: .35;

    transform: rotate(-4deg);
}

.library-cover i {
    position: relative;
    z-index: 2;

    font-size: 55px;

    color:
        var(--gold, #c5a059);
}

.library-info {
    display: flex;
    flex: 1;

    flex-direction: column;

    padding: 25px;
}

.library-info > span {
    display: inline-flex;
    width: fit-content;

    padding: 5px 12px;

    border-radius: 30px;

    background:
        rgba(197,160,89,.12);

    color:
        var(--gold, #c5a059);

    font-size: 12px;
    font-weight: 700;
}

.library-info h3 {
    margin: 15px 0 10px;

    color:
        var(--heading-color, #222);

    font-size: 20px;
    line-height: 1.7;
}

.library-info p {
    margin: 0 0 20px;

    color:
        var(--text-muted, #777);

    font-size: 14px;
    line-height: 1.8;
}

.library-btn {
    width: 100%;
    margin-top: auto;

    padding: 12px 18px;

    border: 1px solid
        var(--gold, #c5a059);

    border-radius: 12px;

    background:
        transparent;

    color:
        var(--gold, #c5a059);

    font-family: inherit;
    font-size: 14px;
    font-weight: 700;

    cursor: pointer;

    transition:
        background .25s ease,
        color .25s ease,
        transform .25s ease;
}

.library-btn:hover {
    background:
        var(--gold, #c5a059);

    color:
        #fff;

    transform: translateY(-2px);
}


/* ==========================================================
   LIBRARY VIEWER
========================================================== */

.library-viewer {
    position: fixed;
    inset: 0;

    z-index: 99999;

    display: flex;

    align-items: center;
    justify-content: center;

    padding: 20px;

    visibility: hidden;
    opacity: 0;

    pointer-events: none;

    transition:
        opacity .25s ease,
        visibility .25s ease;
}

.library-viewer.is-open {
    visibility: visible;
    opacity: 1;

    pointer-events: auto;
}

.library-viewer-overlay {
    position: absolute;
    inset: 0;

    background:
        rgba(0,0,0,.78);

    backdrop-filter:
        blur(7px);
}

.library-viewer-dialog {
    position: relative;
    z-index: 2;

    display: flex;

    flex-direction: column;

    width: min(1250px, 96vw);
    height: min(900px, 94vh);

    overflow: hidden;

    background:
        var(--card-bg, #fff);

    color:
        var(--text-color, #222);

    border:
        1px solid
        var(--border-color, rgba(0,0,0,.1));

    border-radius: 20px;

    box-shadow:
        0 30px 80px rgba(0,0,0,.35);

    outline: none;
}

.library-viewer-header {
    display: flex;

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

    gap: 20px;

    padding: 18px 22px;

    border-bottom:
        1px solid
        var(--border-color, rgba(0,0,0,.08));
}

.library-viewer-heading {
    display: flex;

    align-items: center;

    gap: 14px;

    min-width: 0;
}

.library-viewer-icon {
    flex: 0 0 48px;

    width: 48px;
    height: 48px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 14px;

    background:
        rgba(197,160,89,.13);

    color:
        var(--gold, #c5a059);

    font-size: 21px;
}

.library-viewer-heading span {
    display: block;

    margin-bottom: 3px;

    color:
        var(--gold, #c5a059);

    font-size: 12px;
    font-weight: 700;
}

.library-viewer-heading h2 {
    margin: 0;

    color:
        var(--heading-color, #222);

    font-size: 19px;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.library-viewer-heading p {
    margin: 4px 0 0;

    color:
        var(--text-muted, #777);

    font-size: 12px;
}

.library-viewer-close {
    flex: 0 0 42px;

    width: 42px;
    height: 42px;

    display: flex;

    align-items: center;
    justify-content: center;

    border: 0;
    border-radius: 12px;

    background:
        rgba(128,128,128,.1);

    color:
        var(--text-color, #444);

    font-size: 18px;

    cursor: pointer;

    transition:
        background .2s ease,
        color .2s ease;
}

.library-viewer-close:hover {
    background:
        #c94b4b;

    color: #fff;
}


/* ==========================================================
   TOOLBAR
========================================================== */

.library-viewer-toolbar {
    display: flex;

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

    gap: 15px;

    padding: 10px 18px;

    background:
        var(--surface-bg, rgba(128,128,128,.06));

    border-bottom:
        1px solid
        var(--border-color, rgba(0,0,0,.07));
}

.library-viewer-status {
    display: flex;

    align-items: center;

    gap: 8px;

    color:
        var(--text-muted, #777);

    font-size: 13px;
}

.library-viewer-status i {
    color:
        var(--gold, #c5a059);
}

.library-viewer-actions {
    display: flex;

    align-items: center;

    gap: 8px;
}

.library-toolbar-btn {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 7px;

    min-height: 38px;

    padding: 8px 13px;

    border:
        1px solid
        var(--border-color, rgba(0,0,0,.1));

    border-radius: 10px;

    background:
        var(--card-bg, #fff);

    color:
        var(--text-color, #444);

    font-family: inherit;
    font-size: 12px;

    cursor: pointer;

    transition:
        border-color .2s ease,
        color .2s ease,
        background .2s ease;
}

.library-toolbar-btn:hover:not(:disabled) {
    border-color:
        var(--gold, #c5a059);

    color:
        var(--gold, #c5a059);
}

.library-toolbar-btn:disabled {
    opacity: .45;
    cursor: not-allowed;
}


/* ==========================================================
   BODY
========================================================== */

.library-viewer-body {
    position: relative;

    flex: 1;

    min-height: 0;

    background:
        #eeeeee;

    overflow: hidden;
}

.library-viewer-frame {
    width: 100%;
    height: 100%;

    display: block;

    border: 0;

    background: #fff;
}

.library-viewer-placeholder {
    position: absolute;
    inset: 0;

    display: flex;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    padding: 30px;

    text-align: center;
}

.library-placeholder-icon {
    width: 75px;
    height: 75px;

    display: flex;

    align-items: center;
    justify-content: center;

    margin-bottom: 18px;

    border-radius: 22px;

    background:
        rgba(197,160,89,.13);

    color:
        var(--gold, #c5a059);

    font-size: 32px;
}

.library-viewer-placeholder h3 {
    margin: 0 0 8px;

    color:
        var(--heading-color, #222);

    font-size: 19px;
}

.library-viewer-placeholder p {
    max-width: 500px;

    margin: 0;

    color:
        var(--text-muted, #777);

    line-height: 1.8;

    font-size: 13px;
}

.library-viewer-placeholder code {
    color:
        var(--gold, #c5a059);
}


/* ==========================================================
   FOOTER
========================================================== */

.library-viewer-footer {
    display: flex;

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

    gap: 15px;

    padding: 10px 18px;

    border-top:
        1px solid
        var(--border-color, rgba(0,0,0,.08));
}

.library-viewer-footer > div {
    display: flex;

    align-items: center;

    gap: 7px;

    color:
        var(--text-muted, #777);

    font-size: 12px;
}

.library-viewer-footer > div i {
    color:
        var(--gold, #c5a059);
}

.library-footer-close {
    padding: 8px 15px;

    border: 0;

    border-radius: 9px;

    background:
        var(--gold, #c5a059);

    color: #fff;

    font-family: inherit;
    font-weight: 700;

    cursor: pointer;
}


/* ==========================================================
   DARK MODE
========================================================== */

[data-theme="dark"] .library-card,
.dark-mode .library-card {
    background:
        var(--card-bg, #151515);

    border-color:
        rgba(255,255,255,.08);

    box-shadow:
        0 15px 40px rgba(0,0,0,.25);
}

[data-theme="dark"] .library-info h3,
.dark-mode .library-info h3 {
    color:
        var(--heading-color, #f5f5f5);
}

[data-theme="dark"] .library-viewer-dialog,
.dark-mode .library-viewer-dialog {
    background:
        var(--card-bg, #151515);
}

[data-theme="dark"] .library-viewer-body,
.dark-mode .library-viewer-body {
    background:
        #101010;
}

[data-theme="dark"] .library-toolbar-btn,
.dark-mode .library-toolbar-btn {
    background:
        rgba(255,255,255,.05);

    color:
        #eee;

    border-color:
        rgba(255,255,255,.1);
}


/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width: 900px) {

    .library-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}

@media (max-width: 620px) {

    .library-grid {
        grid-template-columns: 1fr;

        gap: 18px;
    }

    .library-card {
        min-height: 350px;
    }

    .library-viewer {
        padding: 8px;
    }

    .library-viewer-dialog {
        width: 100%;
        height: 96vh;

        border-radius: 15px;
    }

    .library-viewer-header {
        padding: 13px;
    }

    .library-viewer-heading h2 {
        font-size: 15px;
    }

    .library-viewer-toolbar {
        padding: 8px 10px;
    }

    .library-toolbar-btn {
        min-width: 38px;

        padding: 8px;
    }

    .library-toolbar-btn:not(:has(i:only-child)) {
        font-size: 0;
    }

    .library-viewer-footer {
        padding: 8px 10px;
    }

}

/* =========================================================
   LIBRARY.CSS
   المكتبة العلمية — منصة القراءات العشر التفاعلية
========================================================= */


/* =========================================================
   بطاقات المكتبة
========================================================= */

.library-section {
    position: relative;
}


.library-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    margin-top: 35px;
}


.library-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 430px;
    overflow: hidden;

    background: var(
        --card-bg,
        #ffffff
    );

    border: 1px solid var(
        --border-color,
        rgba(0, 0, 0, 0.08)
    );

    border-radius: 22px;

    box-shadow:
        0 12px 35px
        rgba(0, 0, 0, 0.07);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}


.library-card:hover {
    transform: translateY(-7px);

    box-shadow:
        0 20px 45px
        rgba(0, 0, 0, 0.12);

    border-color:
        rgba(197, 160, 89, 0.4);
}


/* =========================================================
   غلاف البطاقة
========================================================= */

.library-cover {
    position: relative;

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

    min-height: 220px;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            rgba(197, 160, 89, 0.18),
            rgba(197, 160, 89, 0.04)
        );

    color:
        var(--gold, #c5a059);

    font-size: 70px;
}


.library-cover::before {
    content: "";

    position: absolute;

    width: 160px;
    height: 160px;

    border-radius: 50%;

    border:
        1px solid
        rgba(197, 160, 89, 0.25);
}


.library-cover::after {
    content: "";

    position: absolute;

    width: 110px;
    height: 110px;

    border-radius: 50%;

    border:
        1px solid
        rgba(197, 160, 89, 0.18);
}


.library-cover i {
    position: relative;
    z-index: 2;

    transition:
        transform 0.3s ease;
}


.library-card:hover
.library-cover i {
    transform:
        scale(1.08)
        rotate(-3deg);
}


/* =========================================================
   معلومات الكتاب
========================================================= */

.library-info {
    display: flex;
    flex-direction: column;

    flex: 1;

    padding: 25px;
}


.library-info > span {
    display: inline-flex;
    align-items: center;

    width: fit-content;

    padding: 5px 12px;

    margin-bottom: 12px;

    border-radius: 30px;

    background:
        rgba(197, 160, 89, 0.12);

    color:
        var(--gold, #a98543);

    font-size: 12px;
    font-weight: 700;
}


.library-info h3 {
    margin: 0 0 10px;

    color:
        var(--heading-color, #252525);

    font-size: 20px;
    line-height: 1.7;
}


.library-info p {
    margin: 0;

    color:
        var(--text-muted, #777);

    font-size: 14px;
    line-height: 1.8;
}


/* =========================================================
   زر الكتاب
========================================================= */

.library-btn {
    width: 100%;

    margin-top: auto;
    padding: 13px 18px;

    border: 1px solid
        var(--gold, #c5a059);

    border-radius: 12px;

    background:
        var(--gold, #c5a059);

    color: #ffffff;

    font-family: inherit;
    font-size: 14px;
    font-weight: 700;

    cursor: pointer;

    transition:
        background 0.25s ease,
        color 0.25s ease,
        transform 0.25s ease,
        box-shadow 0.25s ease;
}


.library-btn:hover {
    background:
        transparent;

    color:
        var(--gold, #c5a059);

    transform:
        translateY(-2px);

    box-shadow:
        0 8px 20px
        rgba(197, 160, 89, 0.18);
}


.library-btn:active {
    transform:
        translateY(0);
}


/* =========================================================
   منع تمرير الصفحة عند فتح العارض
========================================================= */

body.library-viewer-open {
    overflow: hidden;
}


/* =========================================================
   العارض
========================================================= */

.library-viewer {
    position: fixed;

    inset: 0;

    z-index: 99999;

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

    padding: 20px;

    visibility: hidden;
    opacity: 0;

    pointer-events: none;

    transition:
        opacity 0.25s ease,
        visibility 0.25s ease;
}


.library-viewer.is-open {
    visibility: visible;
    opacity: 1;

    pointer-events: auto;
}


/* =========================================================
   الخلفية
========================================================= */

.library-viewer-overlay {
    position: absolute;

    inset: 0;

    background:
        rgba(8, 12, 18, 0.88);

    backdrop-filter:
        blur(8px);

    -webkit-backdrop-filter:
        blur(8px);
}


/* =========================================================
   نافذة العارض
========================================================= */

.library-viewer-dialog {
    position: relative;

    z-index: 2;

    display: flex;
    flex-direction: column;

    width: min(
        1500px,
        100%
    );

    height: min(
        94vh,
        1000px
    );

    overflow: hidden;

    border:
        1px solid
        rgba(197, 160, 89, 0.25);

    border-radius: 22px;

    background:
        var(
            --card-bg,
            #ffffff
        );

    box-shadow:
        0 35px 100px
        rgba(0, 0, 0, 0.35);

    outline: none;

    transform:
        translateY(15px)
        scale(0.98);

    transition:
        transform 0.3s ease;
}


.library-viewer.is-open
.library-viewer-dialog {
    transform:
        translateY(0)
        scale(1);
}


/* =========================================================
   رأس العارض
========================================================= */

.library-viewer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    min-height: 82px;

    padding:
        14px 20px;

    background:
        var(
            --surface-color,
            #ffffff
        );

    border-bottom:
        1px solid
        var(
            --border-color,
            rgba(0, 0, 0, 0.08)
        );
}


.library-viewer-title-area {
    display: flex;
    align-items: center;

    min-width: 0;

    gap: 14px;
}


.library-viewer-book-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 48px;

    width: 48px;
    height: 48px;

    border-radius: 14px;

    background:
        rgba(197, 160, 89, 0.12);

    color:
        var(--gold, #c5a059);

    font-size: 20px;
}


.library-viewer-label {
    display: block;

    margin-bottom: 2px;

    color:
        var(--gold, #c5a059);

    font-size: 11px;
    font-weight: 700;
}


.library-viewer-header h2 {
    margin: 0;

    color:
        var(--heading-color, #252525);

    font-size: 18px;
    line-height: 1.5;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


.library-viewer-header p {
    margin: 2px 0 0;

    color:
        var(--text-muted, #777);

    font-size: 12px;
}


.library-viewer-close {
    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 44px;

    width: 44px;
    height: 44px;

    border: 0;

    border-radius: 12px;

    background:
        rgba(0, 0, 0, 0.05);

    color:
        var(--text-color, #333);

    font-size: 18px;

    cursor: pointer;

    transition:
        background 0.25s ease,
        color 0.25s ease,
        transform 0.25s ease;
}


.library-viewer-close:hover {
    background:
        #b33a3a;

    color: #ffffff;

    transform:
        rotate(5deg);
}


/* =========================================================
   شريط الأدوات
========================================================= */

.library-viewer-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;

    padding:
        10px 15px;

    background:
        var(
            --surface-soft,
            rgba(197, 160, 89, 0.045)
        );

    border-bottom:
        1px solid
        var(
            --border-color,
            rgba(0, 0, 0, 0.07)
        );
}


.library-toolbar-group {
    display: flex;
    align-items: center;

    gap: 7px;
}


.library-tool-btn,
.library-zoom-value {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 38px;

    padding:
        7px 12px;

    border:
        1px solid
        var(
            --border-color,
            rgba(0, 0, 0, 0.1)
        );

    border-radius: 10px;

    background:
        var(
            --card-bg,
            #ffffff
        );

    color:
        var(
            --text-color,
            #333
        );

    font-family: inherit;
    font-size: 12px;
    font-weight: 700;

    cursor: pointer;

    transition:
        background 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease,
        opacity 0.2s ease;
}


.library-tool-btn:hover,
.library-zoom-value:hover {
    border-color:
        rgba(197, 160, 89, 0.55);

    color:
        var(--gold, #c5a059);

    background:
        rgba(197, 160, 89, 0.07);
}


.library-tool-btn:disabled {
    opacity: 0.35;

    cursor:
        not-allowed;
}


.library-icon-btn {
    width: 38px;

    padding: 0;
}


.library-zoom-value {
    min-width: 60px;

    color:
        var(--gold, #c5a059);
}


/* =========================================================
   عداد الصفحات
========================================================= */

.library-page-counter {
    display: flex;
    align-items: center;
    justify-content: center;

    min-width: 85px;

    padding:
        7px 10px;

    border-radius: 10px;

    background:
        rgba(197, 160, 89, 0.1);

    color:
        var(--gold, #a98543);

    font-size: 13px;
    font-weight: 800;

    direction: ltr;

    gap: 5px;
}


/* =========================================================
   جسم العارض
========================================================= */

.library-viewer-body {
    position: relative;

    display: flex;

    flex: 1;

    min-height: 0;

    background:
        #20242a;
}


/* =========================================================
   منطقة الصفحة
========================================================= */

.library-page-stage {
    position: relative;

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

    flex: 1;

    min-width: 0;
    min-height: 0;

    overflow: auto;

    padding: 35px 80px;

    outline: none;

    overscroll-behavior:
        contain;

    scrollbar-width:
        thin;
}


.library-page-stage::-webkit-scrollbar {
    width: 9px;
    height: 9px;
}


.library-page-stage::-webkit-scrollbar-track {
    background:
        rgba(255, 255, 255, 0.05);
}


.library-page-stage::-webkit-scrollbar-thumb {
    background:
        rgba(255, 255, 255, 0.22);

    border-radius: 20px;
}


/* =========================================================
   غلاف الصفحة
========================================================= */

.library-page-wrapper {
    position: relative;

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

    flex-shrink: 0;

    min-width: 300px;
    min-height: 400px;

    padding: 5px;

    transition:
        width 0.2s ease,
        height 0.2s ease;
}


/* =========================================================
   صورة الصفحة
========================================================= */

.library-page-image {
    display: block;

    width: auto;
    height: auto;

    max-width: min(
        800px,
        75vw
    );

    max-height: 78vh;

    object-fit: contain;

    background:
        #ffffff;

    box-shadow:
        0 15px 45px
        rgba(0, 0, 0, 0.4);

    user-select: none;
    -webkit-user-select: none;

    transform-origin:
        center center;

    transition:
        transform 0.2s ease;

    cursor:
        default;
}


/* =========================================================
   أزرار الجوانب
========================================================= */

.library-side-nav {
    position: absolute;

    top: 50%;

    z-index: 5;

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

    width: 46px;
    height: 46px;

    margin-top: -23px;

    border:
        1px solid
        rgba(255, 255, 255, 0.15);

    border-radius: 50%;

    background:
        rgba(0, 0, 0, 0.5);

    color:
        #ffffff;

    font-size: 15px;

    cursor: pointer;

    backdrop-filter:
        blur(5px);

    transition:
        background 0.2s ease,
        transform 0.2s ease,
        opacity 0.2s ease;
}


.library-side-prev {
    right: 18px;
}


.library-side-next {
    left: 18px;
}


.library-side-nav:hover {
    background:
        var(--gold, #c5a059);

    transform:
        scale(1.08);
}


.library-side-nav:disabled {
    opacity: 0.25;

    cursor:
        not-allowed;
}


/* =========================================================
   التحميل
========================================================= */

.library-page-loading {
    position: absolute;

    inset: 0;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    gap: 14px;

    background:
        rgba(20, 24, 29, 0.72);

    color:
        #ffffff;

    font-size: 13px;

    z-index: 10;
}


.library-loader-spinner {
    width: 42px;
    height: 42px;

    border:
        3px solid
        rgba(255, 255, 255, 0.18);

    border-top-color:
        var(--gold, #c5a059);

    border-radius: 50%;

    animation:
        librarySpin 0.8s linear infinite;
}


@keyframes librarySpin {

    to {
        transform:
            rotate(360deg);
    }

}


/* =========================================================
   الخطأ
========================================================= */

.library-page-error {
    position: absolute;

    inset: 0;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    padding: 30px;

    text-align: center;

    background:
        #20242a;

    color:
        #ffffff;

    z-index: 15;
}


.library-page-error[hidden] {
    display: none;
}


.library-error-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 70px;
    height: 70px;

    margin-bottom: 15px;

    border-radius: 20px;

    background:
        rgba(197, 160, 89, 0.12);

    color:
        var(--gold, #c5a059);

    font-size: 28px;
}


.library-page-error h3 {
    margin: 0 0 8px;

    font-size: 18px;
}


.library-page-error p {
    max-width: 450px;

    margin: 0 0 18px;

    color:
        rgba(255, 255, 255, 0.65);

    font-size: 13px;

    line-height: 1.8;
}


.library-retry-btn {
    display: inline-flex;
    align-items: center;

    gap: 8px;

    padding:
        10px 18px;

    border:
        1px solid
        var(--gold, #c5a059);

    border-radius: 10px;

    background:
        transparent;

    color:
        var(--gold, #c5a059);

    font-family: inherit;
    font-weight: 700;

    cursor: pointer;

    transition:
        background 0.2s ease,
        color 0.2s ease;
}


.library-retry-btn:hover {
    background:
        var(--gold, #c5a059);

    color:
        #ffffff;
}


/* =========================================================
   تذييل العارض
========================================================= */

.library-viewer-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    min-height: 48px;

    padding:
        8px 18px;

    background:
        var(
            --surface-color,
            #ffffff
        );

    border-top:
        1px solid
        var(
            --border-color,
            rgba(0, 0, 0, 0.08)
        );
}


.library-viewer-status {
    display: flex;
    align-items: center;

    gap: 8px;

    color:
        var(--text-muted, #777);

    font-size: 12px;
}


.library-viewer-status i {
    color:
        var(--gold, #c5a059);
}


.library-shortcuts {
    display: flex;
    align-items: center;

    gap: 15px;

    color:
        var(--text-muted, #777);

    font-size: 11px;
}


.library-shortcuts span {
    display: inline-flex;
    align-items: center;

    gap: 5px;
}


.library-shortcuts kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 23px;
    height: 21px;

    padding:
        0 5px;

    border:
        1px solid
        var(
            --border-color,
            rgba(0, 0, 0, 0.12)
        );

    border-bottom-width:
        2px;

    border-radius: 5px;

    background:
        var(
            --card-bg,
            #ffffff
        );

    color:
        var(--text-color, #444);

    font-size: 10px;
}


/* =========================================================
   رسالة مؤقتة
========================================================= */

.library-temporary-message {
    position: fixed;

    left: 50%;

    bottom: 30px;

    z-index: 100000;

    padding:
        12px 20px;

    border:
        1px solid
        rgba(197, 160, 89, 0.3);

    border-radius: 12px;

    background:
        rgba(20, 24, 29, 0.95);

    color:
        #ffffff;

    font-size: 13px;

    box-shadow:
        0 10px 35px
        rgba(0, 0, 0, 0.25);

    opacity: 0;

    transform:
        translate(-50%, 15px);

    transition:
        opacity 0.3s ease,
        transform 0.3s ease;
}


.library-temporary-message.is-visible {
    opacity: 1;

    transform:
        translate(-50%, 0);
}


/* =========================================================
   الوضع الليلي
   يدعم عدة أسماء محتملة للـtheme الموجودة لديك
========================================================= */

[data-theme="dark"] .library-card,
.dark-mode .library-card,
body.dark .library-card {
    background:
        var(
            --card-bg,
            #15191f
        );

    border-color:
        rgba(255, 255, 255, 0.08);
}


[data-theme="dark"] .library-info h3,
.dark-mode .library-info h3,
body.dark .library-info h3 {
    color:
        var(
            --heading-color,
            #f1f1f1
        );
}


[data-theme="dark"] .library-info p,
.dark-mode .library-info p,
body.dark .library-info p {
    color:
        var(
            --text-muted,
            #a8a8a8
        );
}


/* =========================================================
   الاستجابة — التابلت
========================================================= */

@media (max-width: 1000px) {

    .library-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .library-viewer {
        padding: 10px;
    }


    .library-viewer-dialog {
        width: 100%;
        height: 96vh;

        border-radius: 18px;
    }


    .library-page-stage {
        padding:
            25px 65px;
    }


    .library-page-image {
        max-width: 80vw;
    }


    .library-shortcuts span:nth-child(n+4) {
        display: none;
    }

}


/* =========================================================
   الاستجابة — الجوال
========================================================= */

@media (max-width: 700px) {

    .library-grid {
        grid-template-columns:
            1fr;

        gap: 18px;
    }


    .library-card {
        min-height: 400px;
    }


    .library-cover {
        min-height: 190px;

        font-size: 58px;
    }


    .library-info {
        padding: 20px;
    }


    .library-info h3 {
        font-size: 18px;
    }


    .library-viewer {
        padding: 0;
    }


    .library-viewer-dialog {
        width: 100%;
        height: 100vh;

        border-radius: 0;
    }


    .library-viewer-header {
        min-height: 70px;

        padding:
            10px 12px;
    }


    .library-viewer-book-icon {
        width: 40px;
        height: 40px;

        flex-basis: 40px;

        font-size: 17px;
    }


    .library-viewer-header h2 {
        max-width: 220px;

        font-size: 15px;
    }


    .library-viewer-close {
        width: 40px;
        height: 40px;

        flex-basis: 40px;
    }


    .library-viewer-toolbar {
        overflow-x: auto;

        justify-content: flex-start;

        padding:
            8px 10px;
    }


    .library-toolbar-group {
        flex-shrink: 0;
    }


    .library-tool-btn span {
        display: none;
    }


    .library-tool-btn {
        min-width: 38px;

        padding: 7px;
    }


    .library-page-stage {
        padding:
            20px 45px;
    }


    .library-page-image {
        max-width: 88vw;

        max-height: 78vh;
    }


    .library-side-nav {
        width: 38px;
        height: 38px;

        margin-top: -19px;
    }


    .library-side-prev {
        right: 6px;
    }


    .library-side-next {
        left: 6px;
    }


    .library-viewer-footer {
        min-height: 44px;

        padding:
            7px 10px;
    }


    .library-shortcuts {
        display: none;
    }


    .library-viewer-status {
        font-size: 11px;
    }

}


/* =========================================================
   الجوال الصغير
========================================================= */

@media (max-width: 420px) {

    .library-viewer-header h2 {
        max-width: 170px;

        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }


    .library-viewer-header p {
        display: none;
    }


    .library-page-stage {
        padding:
            15px 40px;
    }


    .library-page-image {
        max-width: 92vw;
    }

}


/* =========================================================
   ملء الشاشة
========================================================= */

.library-viewer-dialog:fullscreen {
    width: 100vw;
    height: 100vh;

    border-radius: 0;
}


/* =========================================================
   تقليل الحركة
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .library-card,
    .library-btn,
    .library-viewer,
    .library-viewer-dialog,
    .library-page-image,
    .library-tool-btn,
    .library-side-nav {
        transition: none !important;
    }

}

/* =========================================================
   LIBRARY VIEWER
========================================================= */

.library-viewer {
    position: fixed;
    inset: 0;
    z-index: 99999;

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

    padding: 20px;

    visibility: hidden;
    opacity: 0;

    pointer-events: none;

    transition:
        opacity .25s ease,
        visibility .25s ease;
}


.library-viewer.is-open {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}


.library-viewer-overlay {
    position: absolute;
    inset: 0;

    background:
        rgba(10, 14, 20, .86);

    backdrop-filter:
        blur(8px);
}


/* =========================================================
   DIALOG
========================================================= */

.library-viewer-dialog {
    position: relative;

    width: min(1450px, 96vw);
    height: min(94vh, 1000px);

    display: flex;
    flex-direction: column;

    overflow: hidden;

    background:
        var(--bg-card, #ffffff);

    color:
        var(--text-main, #222);

    border:
        1px solid rgba(197, 160, 89, .35);

    border-radius: 18px;

    box-shadow:
        0 30px 100px rgba(0,0,0,.35);

    outline: none;

    transform:
        translateY(20px) scale(.98);

    transition:
        transform .3s ease;
}


.library-viewer.is-open
.library-viewer-dialog {
    transform:
        translateY(0) scale(1);
}


/* =========================================================
   HEADER
========================================================= */

.library-viewer-header {
    min-height: 82px;

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

    gap: 20px;

    padding:
        14px 20px;

    background:
        linear-gradient(
            135deg,
            rgba(197,160,89,.12),
            transparent
        );

    border-bottom:
        1px solid rgba(197,160,89,.2);
}


.library-viewer-title-area {
    display: flex;
    align-items: center;
    gap: 14px;

    min-width: 0;
}


.library-viewer-book-icon {
    width: 48px;
    height: 48px;

    flex: 0 0 48px;

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

    border-radius: 14px;

    background:
        rgba(197,160,89,.14);

    color:
        var(--gold, #c5a059);

    font-size: 21px;
}


.library-viewer-label {
    display: block;

    margin-bottom: 3px;

    color:
        var(--gold, #c5a059);

    font-size: 12px;
}


.library-viewer-header h2 {
    margin: 0;

    font-size: 19px;

    line-height: 1.4;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


.library-viewer-header p {
    margin: 3px 0 0;

    opacity: .7;

    font-size: 13px;
}


.library-viewer-close {
    width: 42px;
    height: 42px;

    flex: 0 0 42px;

    border: 0;
    border-radius: 12px;

    background:
        rgba(0,0,0,.06);

    color:
        inherit;

    cursor: pointer;

    font-size: 18px;

    transition:
        .2s ease;
}


.library-viewer-close:hover {
    background:
        rgba(197,160,89,.18);

    color:
        var(--gold, #c5a059);

    transform:
        rotate(5deg);
}


/* =========================================================
   TOOLBAR
========================================================= */

.library-viewer-toolbar {
    min-height: 55px;

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

    gap: 15px;

    padding:
        8px 16px;

    border-bottom:
        1px solid rgba(0,0,0,.08);

    background:
        var(--bg-card, #fff);
}


.library-toolbar-info,
.library-toolbar-actions {
    display: flex;
    align-items: center;

    gap: 10px;
}


.library-toolbar-info {
    color:
        var(--gold, #c5a059);

    font-size: 14px;
}


.library-toolbar-actions {
    flex-wrap: wrap;
}


.library-tool-btn,
.library-source-btn {
    min-height: 36px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 7px;

    padding:
        7px 13px;
        border:
        1px solid rgba(197,160,89,.3);

    border-radius: 9px;

    background:
        transparent;

    color:
        inherit;

    cursor: pointer;

    font-family: inherit;

    transition:
        .2s ease;
}


.library-tool-btn:hover,
.library-source-btn:hover {
    background:
        rgba(197,160,89,.12);

    color:
        var(--gold, #c5a059);

    border-color:
        var(--gold, #c5a059);
}


/* =========================================================
   BODY
========================================================= */

.library-viewer-body {
    position: relative;

    flex: 1;

    min-height: 0;

    overflow: hidden;

    background:
        #252525;
}


.library-pdf-stage {
    position: absolute;
    inset: 0;

    overflow: hidden;

    display: flex;
    align-items: stretch;
    justify-content: center;
}


.library-pdf-stage iframe {
    width: 100%;
    height: 100%;

    display: block;

    border: 0;

    background: #fff;
}


/* =========================================================
   LOADING
========================================================= */

.library-pdf-loading {
    position: absolute;
    inset: 0;

    z-index: 5;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    gap: 15px;

    background:
        #252525;

    color: #fff;
}


.library-loader-spinner {
    width: 42px;
    height: 42px;

    border:
        3px solid rgba(255,255,255,.2);

    border-top-color:
        var(--gold, #c5a059);

    border-radius: 50%;

    animation:
        librarySpin .8s linear infinite;
}


@keyframes librarySpin {

    to {
        transform: rotate(360deg);
    }

}


/* =========================================================
   EMPTY
========================================================= */

.library-pdf-empty {
    position: absolute;
    inset: 0;

    z-index: 10;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    padding: 30px;

    text-align: center;

    background:
        var(--bg-card, #fff);

    color:
        var(--text-main, #222);
}


.library-pdf-empty[hidden] {
    display: none;
}


.library-empty-icon {
    width: 70px;
    height: 70px;

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

    margin-bottom: 18px;

    border-radius: 20px;

    background:
        rgba(197,160,89,.12);

    color:
        var(--gold, #c5a059);

    font-size: 30px;
}


.library-pdf-empty h3 {
    margin:
        0 0 8px;

    font-size: 19px;
}


.library-pdf-empty p {
    max-width: 520px;

    margin:
        0 0 20px;

    line-height: 1.8;

    opacity: .7;
}


.library-source-btn {
    background:
        var(--gold, #c5a059);

    color: #fff;

    border-color:
        var(--gold, #c5a059);
}


.library-source-btn:hover {
    background:
        #ad8847;

    color: #fff;
}


/* =========================================================
   FOOTER
========================================================= */

.library-viewer-footer {
    min-height: 42px;

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

    gap: 15px;

    padding:
        7px 15px;

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

    font-size: 12px;
}


.library-viewer-status {
    display: flex;
    align-items: center;
    gap: 7px;

    opacity: .75;
}


.library-viewer-shortcuts {
    display: flex;
    align-items: center;
    gap: 12px;

    opacity: .6;
}


.library-viewer-shortcuts span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}


.library-viewer-shortcuts kbd {
    padding:
        2px 6px;

    border:
        1px solid currentColor;

    border-radius: 4px;

    font-size: 10px;
}


/* =========================================================
   BODY LOCK
========================================================= */

body.library-viewer-open {
    overflow: hidden;
}


/* =========================================================
   DARK MODE

   ========================================================= */

[data-theme="dark"] .library-viewer-dialog,
.dark-mode .library-viewer-dialog,
body.dark .library-viewer-dialog {
    background:
        var(--bg-card, #171717);

    color:
        var(--text-main, #f4f4f4);
}


[data-theme="dark"] .library-viewer-toolbar,
.dark-mode .library-viewer-toolbar,
body.dark .library-viewer-toolbar {
    background:
        var(--bg-card, #171717);

    border-color:
        rgba(255,255,255,.08);
}


[data-theme="dark"] .library-viewer-footer,
.dark-mode .library-viewer-footer,
body.dark .library-viewer-footer {
    border-color:
        rgba(255,255,255,.08);
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 800px) {

    .library-viewer {
        padding: 0;
    }


    .library-viewer-dialog {
        width: 100vw;
        height: 100vh;

        border-radius: 0;
    }


    .library-viewer-header {
        min-height: 70px;

        padding:
            10px 12px;
    }


    .library-viewer-book-icon {
        width: 40px;
        height: 40px;

        flex-basis: 40px;
    }


    .library-viewer-header h2 {
        font-size: 15px;
    }


    .library-viewer-header p {
        font-size: 11px;
    }


    .library-viewer-toolbar {
        min-height: 48px;

        padding:
            6px 10px;
    }


    .library-toolbar-info {
        display: none;
    }


    .library-tool-btn {
        min-height: 34px;

        padding:
            6px 9px;

        font-size: 11px;
    }


    .library-viewer-footer {
        min-height: 36px;
    }


    .library-viewer-shortcuts {
        display: none;
    }

}


/* =========================================================
   FULLSCREEN
========================================================= */

.library-viewer-dialog:fullscreen {
    width: 100vw;
    height: 100vh;

    border-radius: 0;
}


.library-viewer-dialog:fullscreen
.library-viewer-body {
    min-height: 0;
}

/* =========================================================
   LIBRARY VIEWER
   المكتبة العلمية — PDF داخلي
========================================================= */


/* =========================================================
   منع تمرير الصفحة عند فتح العارض
========================================================= */

body.library-viewer-open {
    overflow: hidden;
}


/* =========================================================
   العارض الرئيسي
========================================================= */

.library-viewer {
    position: fixed;
    inset: 0;
    z-index: 99999;

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

    padding: 20px;

    visibility: hidden;
    opacity: 0;

    pointer-events: none;

    transition:
        opacity 0.25s ease,
        visibility 0.25s ease;
}


/* =========================================================
   حالة الفتح
========================================================= */

.library-viewer.is-open {
    visibility: visible;
    opacity: 1;

    pointer-events: auto;
}


/* =========================================================
   الخلفية
========================================================= */

.library-viewer-overlay {
    position: absolute;
    inset: 0;

    background:
        rgba(0, 0, 0, 0.78);

    backdrop-filter:
        blur(8px);

    -webkit-backdrop-filter:
        blur(8px);
}


/* =========================================================
   نافذة العارض
========================================================= */

.library-viewer-dialog {
    position: relative;

    width: min(1400px, 96vw);
    height: min(92vh, 950px);

    display: flex;
    flex-direction: column;

    overflow: hidden;

    background:
        #ffffff;

    border:
        1px solid rgba(0, 0, 0, 0.08);

    border-radius:
        20px;

    box-shadow:
        0 30px 90px rgba(0, 0, 0, 0.35);

    transform:
        translateY(20px) scale(0.98);

    transition:
        transform 0.25s ease;
}


/* =========================================================
   حركة الفتح
========================================================= */

.library-viewer.is-open
.library-viewer-dialog {
    transform:
        translateY(0) scale(1);
}


/* =========================================================
   HEADER
========================================================= */

.library-viewer-header {
    flex-shrink: 0;

    min-height: 82px;

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

    gap: 16px;

    padding:
        14px 20px;

    background:
        linear-gradient(
            135deg,
            #f8f5ed,
            #ffffff
        );

    border-bottom:
        1px solid #e8e3d8;
}


/* =========================================================
   عنوان الكتاب
========================================================= */

.library-viewer-title-area {
    min-width: 0;

    display: flex;
    align-items: center;

    gap: 13px;
}


.library-viewer-book-icon {
    width: 48px;
    height: 48px;

    flex-shrink: 0;

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

    border-radius:
        14px;

    background:
        #f0e5c8;

    color:
        #80651f;

    font-size:
        21px;
}


.library-viewer-label {
    display: block;

    margin-bottom:
        2px;

    font-size:
        11px;

    font-weight:
        700;

    color:
        #a1843c;
}


#libraryViewerTitle {
    margin: 0;

    max-width:
        850px;

    overflow: hidden;

    white-space: nowrap;

    text-overflow: ellipsis;

    font-size:
        clamp(16px, 2vw, 22px);

    line-height:
        1.5;

    color:
        #2c2924;
}


#libraryViewerAuthor {
    margin:
        2px 0 0;

    font-size:
        13px;

    color:
        #77736c;
}


/* =========================================================
   زر الإغلاق
========================================================= */

.library-viewer-close {
    width: 42px;
    height: 42px;

    flex-shrink: 0;

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

    border: 0;

    border-radius:
        12px;

    background:
        #f1efeb;

    color:
        #4b4842;

    cursor:
        pointer;

    font-size:
        18px;

    transition:
        background 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}


.library-viewer-close:hover {
    background:
        #e6e1d8;

    color:
        #1f1d19;

    transform:
        rotate(5deg);
}


.library-viewer-close:focus-visible {
    outline:
        3px solid rgba(128, 101, 31, 0.25);

    outline-offset:
        2px;
}


/* =========================================================
   TOOLBAR
========================================================= */

.library-viewer-toolbar {
    flex-shrink: 0;

    min-height: 52px;

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

    gap: 12px;

    padding:
        8px 14px;

    background:
        #faf9f7;

    border-bottom:
        1px solid #ebe8e2;
}


.library-toolbar-info {
    display: flex;
    align-items: center;

    gap: 8px;

    font-size:
        13px;

    font-weight:
        700;

    color:
        #5c554a;
}


.library-toolbar-info i {
    color:
        #a1843c;
}


/* =========================================================
   أزرار الأدوات
========================================================= */

.library-toolbar-actions {
    display: flex;
    align-items: center;

    gap: 7px;
}


.library-tool-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 7px;

    min-height:
        36px;

    padding:
        7px 12px;

    border:
        1px solid #ddd8ce;

    border-radius:
        9px;

    background:
        #ffffff;

    color:
        #4e4941;

    font-family:
        inherit;

    font-size:
        12px;

    font-weight:
        700;

    cursor:
        pointer;

    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease;
}


.library-tool-btn:hover {
    background:
        #f5f1e8;

    border-color:
        #cfc5b2;

    transform:
        translateY(-1px);
}


.library-tool-btn i {
    font-size:
        12px;
}


/* =========================================================
   اختيار أجزاء الكتاب
========================================================= */

.library-parts {
    flex-shrink: 0;

    display: flex;
    align-items: center;

    gap: 14px;

    padding:
        9px 14px;

    background:
        #f7f4ed;

    border-bottom:
        1px solid #e5dfd2;
}


.library-parts[hidden] {
    display: none;
}


.library-parts-title {
    display: flex;
    align-items: center;

    gap: 7px;

    flex-shrink: 0;

    font-size:
        12px;

    font-weight:
        800;

    color:
        #6d5928;
}


.library-parts-title i {
    color:
        #9a7b32;
}


/* =========================================================
   قائمة الأجزاء
========================================================= */

.library-parts-list {
    display: flex;
    align-items: center;

    gap: 7px;

    overflow-x: auto;

    scrollbar-width:
        thin;
}


.library-part-btn {
    min-width:
        105px;

    min-height:
        36px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 7px;

    padding:
        7px 12px;

    border:
        1px solid #d9d1c0;

    border-radius:
        9px;

    background:
        #ffffff;

    color:
        #5d564c;

    font-family:
        inherit;

    font-size:
        12px;

    font-weight:
        700;

    cursor:
        pointer;

    white-space:
        nowrap;

    transition:
        all 0.2s ease;
}


.library-part-btn:hover {
    border-color:
        #aa8c48;

    background:
        #fffdf7;

    transform:
        translateY(-1px);
}


.library-part-btn.active {
    background:
        #8a6d2f;

    border-color:
        #8a6d2f;

    color:
        #ffffff;

    box-shadow:
        0 4px 12px rgba(138, 109, 47, 0.22);
}


.library-part-btn.active i {
    color:
        #ffffff;
}


/* =========================================================
   جسم العارض
========================================================= */

.library-viewer-body {
    position: relative;

    flex: 1;

    min-height: 0;

    background:
        #282828;

    overflow: hidden;
}


/* =========================================================
   منطقة PDF
========================================================= */

.library-pdf-stage {
    position: relative;

    width: 100%;
    height: 100%;

    background:
        #2b2b2b;
}


/* =========================================================
   iframe
========================================================= */

#libraryPdfFrame {
    display: block;

    width: 100%;
    height: 100%;

    border: 0;

    background:
        #ffffff;
}


/* =========================================================
   Loading
========================================================= */

.library-pdf-loading {
    position: absolute;

    inset: 0;

    z-index: 5;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    gap: 14px;

    background:
        #292929;

    color:
        #ffffff;
}


.library-pdf-loading[hidden] {
    display: none;
}


.library-loader-spinner {
    width: 42px;
    height: 42px;

    border:
        3px solid rgba(255, 255, 255, 0.2);

    border-top-color:
        #d5b45c;

    border-radius:
        50%;

    animation:
        library-spin 0.8s linear infinite;
}


@keyframes library-spin {

    to {
        transform:
            rotate(360deg);
    }

}


.library-pdf-loading p {
    margin: 0;

    font-size:
        13px;

    color:
        rgba(255, 255, 255, 0.82);
}


/* =========================================================
   حالة عدم وجود PDF
========================================================= */

.library-pdf-empty {
    position: absolute;

    inset: 0;

    z-index: 6;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    gap: 10px;

    padding:
        30px;

    text-align:
        center;

    background:
        #292929;

    color:
        #ffffff;
}


.library-pdf-empty[hidden] {
    display: none;
}


.library-empty-icon {
    width: 72px;
    height: 72px;

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

    margin-bottom:
        5px;

    border-radius:
        18px;

    background:
        rgba(255, 255, 255, 0.08);

    color:
        #d5b45c;

    font-size:
        28px;
}


.library-pdf-empty h3 {
    margin:
        0;

    font-size:
        18px;
}


.library-pdf-empty p {
    max-width:
        430px;

    margin:
        0 0 8px;

    font-size:
        13px;

    line-height:
        1.8;

    color:
        rgba(255, 255, 255, 0.65);
}


/* =========================================================
   زر المصدر
========================================================= */

.library-source-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    min-height:
        40px;

    padding:
        8px 16px;

    border:
        0;

    border-radius:
        10px;

    background:
        #8a6d2f;

    color:
        #ffffff;

    font-family:
        inherit;

    font-size:
        13px;

    font-weight:
        700;

    cursor:
        pointer;

    transition:
        transform 0.2s ease,
        opacity 0.2s ease;
}


.library-source-btn:hover {
    opacity:
        0.9;

    transform:
        translateY(-1px);
}


/* =========================================================
   FOOTER
========================================================= */

.library-viewer-footer {
    flex-shrink: 0;

    min-height:
        40px;

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

    gap: 10px;

    padding:
        7px 14px;

    background:
        #faf9f7;

    border-top:
        1px solid #e7e3dc;
}


.library-viewer-status {
    display: flex;
    align-items: center;

    gap: 7px;

    min-width: 0;

    font-size:
        11px;

    color:
        #777168;
}


.library-viewer-status i {
    color:
        #9b7c35;
}


.library-viewer-shortcuts {
    display: flex;
    align-items: center;

    gap: 6px;

    font-size:
        10px;

    color:
        #99938b;
}


.library-viewer-shortcuts kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width:
        27px;

    height:
        23px;

    padding:
        2px 6px;

    border:
        1px solid #d7d2c9;

    border-bottom-width:
        2px;

    border-radius:
        5px;

    background:
        #ffffff;

    color:
        #656057;

    font-family:
        inherit;

    font-size:
        10px;
}


/* =========================================================
   ملء الشاشة
========================================================= */

.library-viewer-dialog:fullscreen {
    width:
        100vw;

    height:
        100vh;

    max-width:
        none;

    max-height:
        none;

    border-radius:
        0;
}


/* =========================================================
   التركيز
========================================================= */

.library-viewer button:focus-visible {
    outline:
        3px solid rgba(138, 109, 47, 0.3);

    outline-offset:
        2px;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .library-viewer {
        padding:
            10px;
    }


    .library-viewer-dialog {
        width:
            98vw;

        height:
            95vh;

        border-radius:
            16px;
    }


    .library-viewer-header {
        min-height:
            72px;

        padding:
            11px 14px;
    }


    .library-viewer-book-icon {
        width:
            42px;

        height:
            42px;

        border-radius:
            11px;

        font-size:
            18px;
    }


    #libraryViewerTitle {
        max-width:
            65vw;

        font-size:
            16px;
    }


    #libraryViewerAuthor {
        font-size:
            12px;
    }


    .library-parts {
        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            7px;
    }


    .library-parts-list {
        width:
            100%;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .library-viewer {
        padding:
            0;
    }


    .library-viewer-dialog {
        width:
            100vw;

        height:
            100vh;

        border-radius:
            0;
    }


    .library-viewer-header {
        min-height:
            67px;

        padding:
            9px 11px;
    }


    .library-viewer-title-area {
        gap:
            9px;
    }


    .library-viewer-book-icon {
        width:
            38px;

        height:
            38px;

        border-radius:
            10px;

        font-size:
            16px;
    }


    .library-viewer-label {
        font-size:
            9px;
    }


    #libraryViewerTitle {
        max-width:
            calc(100vw - 115px);

        font-size:
            14px;
    }


    #libraryViewerAuthor {
        font-size:
            10px;
    }


    .library-viewer-close {
        width:
            37px;

        height:
            37px;

        border-radius:
            9px;

        font-size:
            16px;
    }


    .library-viewer-toolbar {
        min-height:
            46px;

        padding:
            6px 9px;
    }


    .library-toolbar-info {
        font-size:
            11px;
    }


    .library-tool-btn {
        min-height:
            32px;

        padding:
            6px 8px;

        font-size:
            10px;
    }


    .library-tool-btn i {
        font-size:
            10px;
    }


    /*
       إخفاء كلمة المصدر على الجوال
       والإبقاء على الأيقونة
    */

    #libraryOpenSource {
        font-size:
            0;
    }


    #libraryOpenSource i {
        font-size:
            13px;
    }


    /*
       إخفاء كلمة ملء الشاشة
    */

    #libraryFullscreen {
        font-size:
            0;
    }


    #libraryFullscreen i {
        font-size:
            13px;
    }


    .library-parts {
        padding:
            8px 9px;
    }


    .library-parts-title {
        font-size:
            11px;
    }


    .library-part-btn {
        min-width:
            92px;

        min-height:
            34px;

        padding:
            6px 9px;

        font-size:
            11px;
    }


    .library-viewer-footer {
        min-height:
            36px;

        padding:
            5px 9px;
    }


    .library-viewer-status {
        font-size:
            10px;
    }


    .library-viewer-shortcuts {
        display:
            none;
    }


    .library-pdf-empty {
        padding:
            20px;
    }


    .library-empty-icon {
        width:
            60px;

        height:
            60px;

        font-size:
            24px;
    }


    .library-pdf-empty h3 {
        font-size:
            16px;
    }


    .library-pdf-empty p {
        font-size:
            11px;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 380px) {

    .library-viewer-header {
        min-height:
            62px;
    }


    .library-viewer-book-icon {
        width:
            34px;

        height:
            34px;
    }


    #libraryViewerTitle {
        font-size:
            13px;
    }


    .library-part-btn {
        min-width:
            84px;

        font-size:
            10px;
    }

}


/* =========================================================
   DARK MODE
   يعمل إذا كان موقعك يستخدم data-theme="dark"
========================================================= */

[data-theme="dark"] .library-viewer-dialog {

    background:
        #171717;

    border-color:
        rgba(255, 255, 255, 0.08);

}


[data-theme="dark"] .library-viewer-header {

    background:
        linear-gradient(
            135deg,
            #20201e,
            #171717
        );

    border-bottom-color:
        #30302d;

}


[data-theme="dark"] #libraryViewerTitle {

    color:
        #f4f1ea;

}


[data-theme="dark"] #libraryViewerAuthor {

    color:
        #aaa59c;

}


[data-theme="dark"] .library-viewer-close {

    background:
        #292927;

    color:
        #e5e1d8;

}


[data-theme="dark"] .library-viewer-toolbar {

    background:
        #1d1d1b;

    border-bottom-color:
        #30302d;

}


[data-theme="dark"] .library-toolbar-info {

    color:
        #c8c3ba;

}


[data-theme="dark"] .library-tool-btn {

    background:
        #252523;

    border-color:
        #3a3935;

    color:
        #ddd8cf;

}


[data-theme="dark"] .library-tool-btn:hover {

    background:
        #302f2b;

}


[data-theme="dark"] .library-parts {

    background:
        #20201d;

    border-bottom-color:
        #34332e;

}


[data-theme="dark"] .library-part-btn {

    background:
        #292925;

    border-color:
        #403e37;

    color:
        #d8d3ca;

}


[data-theme="dark"] .library-part-btn:hover {

    background:
        #33312b;

}


[data-theme="dark"] .library-part-btn.active {

    background:
        #8a6d2f;

    border-color:
        #8a6d2f;

    color:
        #ffffff;

}


[data-theme="dark"] .library-viewer-footer {

    background:
        #1d1d1b;

    border-top-color:
        #30302d;

}


[data-theme="dark"] .library-viewer-status {

    color:
        #aaa59c;

}


[data-theme="dark"] .library-viewer-shortcuts kbd {

    background:
        #292927;

    border-color:
        #403e39;

    color:
        #c7c2b9;

}

/* =========================================================
   GLOBAL SEARCH RESULTS
========================================================= */

.search-results {
    overflow-y: auto;
    scrollbar-width: thin;
}


.search-result {
    width: 100%;

    display: flex;
    align-items: center;

    gap: 12px;

    padding: 12px;

    border: 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.07);

    background: transparent;

    color: inherit;

    font-family: inherit;

    text-align: right;

    cursor: pointer;

    transition:
        background 0.2s ease,
        transform 0.2s ease;
}


.search-result:hover {
    background: rgba(138, 109, 47, 0.08);

    transform: translateX(-3px);
}


.search-result-icon {
    width: 42px;
    height: 42px;

    flex-shrink: 0;

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

    border-radius: 12px;

    background: rgba(138, 109, 47, 0.1);

    color: #8a6d2f;
}


.search-result-info {
    min-width: 0;

    flex: 1;

    display: flex;
    flex-direction: column;

    gap: 3px;
}


.search-result-name {
    overflow: hidden;

    white-space: nowrap;

    text-overflow: ellipsis;

    font-size: 14px;

    font-weight: 800;
}


.search-result-meta {
    overflow: hidden;

    white-space: nowrap;

    text-overflow: ellipsis;

    font-size: 11px;

    color: #888177;
}


.search-result-type {
    flex-shrink: 0;

    padding: 4px 8px;

    border-radius: 20px;

    background: #f3efe7;

    color: #80672f;

    font-size: 10px;

    font-weight: 800;
}


.search-result-arrow {
    flex-shrink: 0;

    color: #aaa;

    font-size: 11px;
}


.search-empty {
    padding: 35px 20px;

    display: flex;
    flex-direction: column;

    align-items: center;

    text-align: center;

    gap: 7px;

    color: #777;
}


.search-empty-icon {
    width: 55px;
    height: 55px;

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

    margin-bottom: 5px;

    border-radius: 50%;

    background: rgba(138, 109, 47, 0.1);

    color: #8a6d2f;

    font-size: 21px;
}


.search-empty strong {
    color: #403b34;

    font-size: 14px;
}


.search-empty p {
    margin: 0;

    font-size: 11px;

    color: #999;
}


/* =========================================================
   إبراز العنصر بعد فتح نتيجة البحث
========================================================= */

.search-highlight {
    animation:
        searchHighlight 1.8s ease;
}


@keyframes searchHighlight {

    0% {
        box-shadow:
            0 0 0 0 rgba(138, 109, 47, 0);
    }

    25% {
        box-shadow:
            0 0 0 6px rgba(138, 109, 47, 0.16);
    }

    70% {
        box-shadow:
            0 0 0 6px rgba(138, 109, 47, 0.10);
    }

    100% {
        box-shadow:
            0 0 0 0 rgba(138, 109, 47, 0);
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .search-result {
        padding: 10px;
        gap: 9px;
    }


    .search-result-icon {
        width: 36px;
        height: 36px;

        border-radius: 10px;
    }


    .search-result-name {
        font-size: 12px;
    }


    .search-result-meta {
        font-size: 10px;
    }


    .search-result-type {
        font-size: 9px;

        padding: 3px 6px;
    }


    .search-result-arrow {
        display: none;
    }

}

/* =====================================================
   ACCOUNT BUTTON
===================================================== */

.account-btn {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 42px;
    padding: 5px 10px;
    border: 1px solid rgba(15, 61, 50, .15);
    border-radius: 999px;
    background: rgba(255,255,255,.7);
    color: #0f3d32;
    cursor: pointer;
    transition: .25s ease;
    font-family: inherit;
}

.account-btn:hover {
    transform: translateY(-2px);
    border-color: #b8954a;
    box-shadow: 0 6px 20px rgba(15,61,50,.12);
}

.account-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: #0f3d32;
    color: #fff;
    flex-shrink: 0;
}

.account-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.account-label {
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}


/* =====================================================
   ACCOUNT MODAL
===================================================== */

.account-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.account-modal.active {
    display: flex;
}

.account-overlay {
    position: absolute;
    inset: 0;
    background: rgba(4, 20, 16, .72);
    backdrop-filter: blur(7px);
}

.account-box {
    position: relative;
    z-index: 2;
    width: min(440px, 100%);
    max-height: 90vh;
    overflow-y: auto;
    padding: 35px;
    border-radius: 26px;
    background: #fff;
    box-shadow: 0 30px 80px rgba(0,0,0,.28);
    animation: accountModalIn .3s ease;
}

@keyframes accountModalIn {
    from {
        opacity: 0;
        transform: translateY(25px) scale(.96);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.account-close {
    position: absolute;
    top: 15px;
    left: 15px;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 50%;
    background: #f2f4f2;
    color: #0f3d32;
    cursor: pointer;
    font-size: 18px;
}


/* =====================================================
   AUTH
===================================================== */

.auth-view {
    text-align: center;
}

.auth-icon {
    width: 68px;
    height: 68px;
    margin: 5px auto 18px;
    border-radius: 20px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg,#0f3d32,#1b5d4c);
    color: #d7b867;
    font-size: 27px;
}

.auth-view h2 {
    margin: 0 0 8px;
    color: #0f3d32;
    font-family: "Amiri", serif;
    font-size: 30px;
}

.auth-view > p {
    margin-bottom: 25px;
    color: #777;
}


/* =====================================================
   GOOGLE
===================================================== */

.google-login-btn {
    width: 100%;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    border: 1px solid #ddd;
    border-radius: 13px;
    background: #fff;
    color: #333;
    font-family: inherit;
    font-weight: 700;
    cursor: pointer;
    transition: .2s ease;
}

.google-login-btn:hover {
    background: #f8f8f8;
    box-shadow: 0 5px 18px rgba(0,0,0,.08);
}

.google-icon {
    font-family: Arial, sans-serif;
    font-size: 21px;
    font-weight: 800;
}


/* =====================================================
   DIVIDER
===================================================== */

.auth-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 22px 0;
    color: #aaa;
}

.auth-divider::before,
.auth-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #e5e5e5;
}

.auth-divider span {
    font-size: 13px;
}


/* =====================================================
   INPUTS
===================================================== */

.auth-field {
    margin-bottom: 17px;
    text-align: right;
}

.auth-field label {
    display: block;
    margin-bottom: 7px;
    color: #333;
    font-size: 13px;
    font-weight: 700;
}

.auth-input {
    position: relative;
    display: flex;
    align-items: center;
}

.auth-input > i {
    position: absolute;
    right: 15px;
    color: #888;
}

.auth-input input {
    width: 100%;
    height: 50px;
    padding: 0 44px 0 45px;
    border: 1px solid #ddd;
    border-radius: 12px;
    outline: none;
    font-family: inherit;
    font-size: 14px;
    direction: rtl;
    transition: .2s;
}

.auth-input input:focus {
    border-color: #0f3d32;
    box-shadow: 0 0 0 3px rgba(15,61,50,.08);
}

.password-toggle {
    position: absolute;
    left: 12px;
    border: 0;
    background: transparent;
    color: #888;
    cursor: pointer;
}


/* =====================================================
   SUBMIT
===================================================== */

.auth-submit {
    width: 100%;
    height: 52px;
    border: 0;
    border-radius: 13px;
    background: #0f3d32;
    color: white;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: .2s;
}

.auth-submit:hover {
    background: #145342;
    transform: translateY(-1px);
}


/* =====================================================
   SWITCH
===================================================== */

.auth-switch {
    margin-top: 22px !important;
    margin-bottom: 0 !important;
    font-size: 13px;
    color: #777;
}

.auth-switch button {
    border: 0;
    background: transparent;
    color: #0f3d32;
    font-family: inherit;
    font-weight: 800;
    cursor: pointer;
}


/* =====================================================
   USER
===================================================== */

.user-profile {
    padding: 20px 0;
}

.user-profile img {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 15px;
    background: #0f3d32;
}

.user-profile h2 {
    margin-bottom: 5px;
}

.user-profile p {
    color: #777;
    direction: ltr;
}

.logout-btn {
    width: 100%;
    height: 50px;
    border: 0;
    border-radius: 12px;
    background: #8b2f2f;
    color: white;
    font-family: inherit;
    font-weight: 700;
    cursor: pointer;
}


/* =====================================================
   MESSAGE
===================================================== */

.auth-message {
    display: none;
    margin-top: 18px;
    padding: 11px 14px;
    border-radius: 10px;
    background: #fff3f3;
    color: #9b3030;
    font-size: 13px;
    line-height: 1.7;
}

.auth-message.show {
    display: block;
}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 700px) {

    .account-label {
        display: none;
    }

    .account-btn {
        width: 42px;
        height: 42px;
        padding: 4px;
        justify-content: center;
    }

    .account-avatar {
        width: 32px;
        height: 32px;
    }

    .account-box {
        padding: 30px 20px;
        border-radius: 20px;
    }

    .auth-view h2 {
        font-size: 27px;
    }

}

@media (max-width: 400px) {

    .account-box {
        width: 100%;
        padding: 25px 15px;
        border-radius: 16px;
    }

    .auth-view h2 {
        font-size: 24px;
    }

}


/* =========================================================
   MUSHAFS — SECTION
   منصة المصاحف بالروايات
========================================================= */

.mushafs-section {
    position: relative;
    padding: 110px 0;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 10% 10%,
            rgba(44, 150, 105, 0.10),
            transparent 32%
        ),
        radial-gradient(
            circle at 90% 85%,
            rgba(191, 151, 73, 0.08),
            transparent 30%
        ),
        var(--bg-primary, #07100d);
}


/* =========================================================
   خلفية زخرفية
========================================================= */

.mushafs-section::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.35;

    background-image:
        linear-gradient(
            45deg,
            transparent 48%,
            rgba(255,255,255,0.018) 49%,
            transparent 50%
        );

    background-size: 28px 28px;
}


/* =========================================================
   CONTAINER
========================================================= */

.mushafs-section .container {
    position: relative;
    z-index: 2;
}


/* =========================================================
   SECTION HEADING
========================================================= */

.mushafs-section .section-heading {
    max-width: 850px;
    margin: 0 auto 48px;
    text-align: center;
}


.mushafs-section .section-kicker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;

    padding: 9px 17px;

    border: 1px solid rgba(91, 181, 135, 0.22);
    border-radius: 999px;

    background:
        rgba(37, 126, 88, 0.08);

    color:
        #6bc69a;

    font-size: 0.86rem;
    font-weight: 700;

    box-shadow:
        0 8px 30px rgba(0,0,0,0.12);
}


.mushafs-section .section-kicker i {
    font-size: 0.9rem;
}


.mushafs-section .section-heading h2 {
    margin: 18px 0 12px;

    color:
        var(--text-primary, #f5f7f5);

    font-size:
        clamp(2rem, 4vw, 3.2rem);

    line-height: 1.25;
    font-weight: 800;

    letter-spacing: -0.5px;
}


.mushafs-section .section-heading p {
    max-width: 700px;
    margin: 0 auto;

    color:
        var(--text-secondary, #9ca9a2);

    font-size: 1rem;
    line-height: 1.9;
}


/* =========================================================
   TOOLS
========================================================= */

.mushaf-tools {
    display: grid;

    grid-template-columns:
        minmax(260px, 1fr)
        minmax(210px, 280px)
        auto;

    gap: 15px;

    align-items: center;

    margin-bottom: 32px;

    padding: 15px;

    border:
        1px solid rgba(255,255,255,0.07);

    border-radius: 20px;

    background:
        rgba(255,255,255,0.025);

    box-shadow:
        0 18px 50px rgba(0,0,0,0.16);

    backdrop-filter:
        blur(14px);
}


/* =========================================================
   SEARCH
========================================================= */

.mushaf-search-box {
    position: relative;

    display: flex;
    align-items: center;

    min-height: 52px;

    border:
        1px solid rgba(255,255,255,0.08);

    border-radius: 14px;

    background:
        rgba(0,0,0,0.18);

    transition:
        border-color .25s ease,
        box-shadow .25s ease,
        background .25s ease;
}


.mushaf-search-box:focus-within {
    border-color:
        rgba(87, 190, 139, 0.55);

    background:
        rgba(37, 126, 88, 0.055);

    box-shadow:
        0 0 0 4px rgba(64, 166, 117, 0.08);
}


.mushaf-search-box > i {
    flex: 0 0 auto;

    margin-right: 17px;

    color:
        #63bf91;

    font-size: 0.95rem;
}


.mushaf-search-box input {
    width: 100%;
    height: 50px;

    padding:
        0 14px 0 8px;

    border: 0;
    outline: 0;

    background: transparent;

    color:
        var(--text-primary, #f5f7f5);

    font-family: inherit;
    font-size: 0.95rem;
}


.mushaf-search-box input::placeholder {
    color:
        #6f7d75;
}


.mushaf-search-box button {
    flex: 0 0 auto;

    width: 34px;
    height: 34px;

    margin-left: 8px;
    margin-right: 8px;

    border: 0;
    border-radius: 10px;

    background:
        rgba(255,255,255,0.05);

    color:
        #849189;

    cursor: pointer;

    transition:
        background .2s ease,
        color .2s ease,
        transform .2s ease;
}


.mushaf-search-box button:hover {
    background:
        rgba(255,255,255,0.1);

    color:
        #fff;

    transform: scale(1.05);
}


/* =========================================================
   FILTER
========================================================= */

.mushaf-filter-box {
    display: flex;
    align-items: center;
    gap: 11px;

    min-height: 52px;

    padding:
        0 14px;

    border:
        1px solid rgba(255,255,255,0.08);

    border-radius: 14px;

    background:
        rgba(0,0,0,0.18);
}


.mushaf-filter-box label {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    flex: 0 0 auto;

    color:
        #93a198;

    font-size: 0.84rem;
    font-weight: 700;
}


.mushaf-filter-box label i {
    color:
        #63bf91;
}


.mushaf-filter-box select {
    width: 100%;
    min-width: 0;

    border: 0;
    outline: 0;

    background:
        transparent;

    color:
        var(--text-primary, #f5f7f5);

    font-family: inherit;
    font-size: 0.88rem;

    cursor: pointer;
}


.mushaf-filter-box select option {
    background:
        #101915;

    color:
        #fff;
}


/* =========================================================
   RESULTS COUNT
========================================================= */

.mushaf-results-count {
    min-height: 52px;

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

    padding:
        0 18px;

    border:
        1px solid rgba(255,255,255,0.07);

    border-radius: 14px;

    background:
        rgba(255,255,255,0.025);

    color:
        #88cda9;

    font-size: 0.88rem;
    font-weight: 800;

    white-space: nowrap;
}


/* =========================================================
   GRID
========================================================= */

.mushaf-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 20px;
}


/* =========================================================
   CARD
========================================================= */

.mushaf-card {
    position: relative;

    display: flex;
    flex-direction: column;

    min-height: 330px;

    overflow: hidden;

    border:
        1px solid rgba(255,255,255,0.075);

    border-radius: 22px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,0.045),
            rgba(255,255,255,0.018)
        );

    box-shadow:
        0 15px 45px rgba(0,0,0,0.18);

    transition:
        transform .3s ease,
        border-color .3s ease,
        box-shadow .3s ease,
        background .3s ease;
}


.mushaf-card::before {
    content: "";

    position: absolute;

    top: 0;
    right: 0;
    left: 0;

    height: 2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(87, 190, 139, 0.8),
            transparent
        );

    opacity: 0;

    transition:
        opacity .3s ease;
}


.mushaf-card:hover {
    transform:
        translateY(-7px);

    border-color:
        rgba(87,190,139,0.25);

    background:
        linear-gradient(
            145deg,
            rgba(44,150,105,0.08),
            rgba(255,255,255,0.025)
        );

    box-shadow:
        0 25px 65px rgba(0,0,0,0.28);
}


.mushaf-card:hover::before {
    opacity: 1;
}


/* =========================================================
   CARD TOP
========================================================= */

.mushaf-card-top {
    display: flex;

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

    padding:
        20px 20px 0;
}


.mushaf-card-icon {
    width: 48px;
    height: 48px;

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

    border-radius: 15px;

    border:
        1px solid rgba(87,190,139,0.18);

    background:
        rgba(44,150,105,0.08);

    color:
        #69c99b;

    font-size: 1.1rem;
}


.mushaf-card-badge {
    padding:
        6px 10px;

    border:
        1px solid rgba(255,255,255,0.07);

    border-radius: 999px;

    background:
        rgba(255,255,255,0.035);

    color:
        #89978f;

    font-size: 0.7rem;
    font-weight: 700;
}


/* =========================================================
   CARD BODY
========================================================= */

.mushaf-card-body {
    flex: 1;

    padding:
        22px 20px 18px;
}


.mushaf-card-kicker {
    display: block;

    margin-bottom: 9px;

    color:
        #65bf91;

    font-size: 0.78rem;
    font-weight: 800;
}


.mushaf-card-body h3 {
    margin: 0 0 14px;

    color:
        #f1f5f2;

    font-size: 1.12rem;
    line-height: 1.65;
    font-weight: 800;
}


.mushaf-card-body p {
    margin: 0 0 9px;

    color:
        #8d9a93;

    font-size: 0.83rem;
    line-height: 1.7;
}


.mushaf-card-body strong {
    color:
        #c9d2cd;

    font-weight: 700;
}


.mushaf-card-body .mushaf-book-name {
    display: flex;

    align-items: flex-start;

    gap: 8px;

    margin-top: 13px;

    color:
        #7f8e86;

    line-height: 1.6;
}


.mushaf-book-name i {
    flex: 0 0 auto;

    margin-top: 3px;

    color:
        #b99a5c;
}


/* =========================================================
   CARD ACTIONS
========================================================= */

.mushaf-card-actions {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 9px;

    padding:
        0 20px 20px;
}


.mushaf-card-actions button {
    min-height: 46px;

    border-radius: 12px;

    font-family: inherit;

    font-size: 0.8rem;
    font-weight: 800;

    cursor: pointer;

    transition:
        transform .2s ease,
        background .2s ease,
        border-color .2s ease,
        color .2s ease;
}


.mushaf-open-btn {
    border:
        1px solid rgba(76,178,128,0.32);

    background:
        rgba(44,150,105,0.12);

    color:
        #72cda0;
}


.mushaf-open-btn:hover {
    background:
        rgba(44,150,105,0.22);

    border-color:
        rgba(87,190,139,0.55);

    transform:
        translateY(-2px);
}


.mushaf-book-btn {
    border:
        1px solid rgba(255,255,255,0.09);

    background:
        rgba(255,255,255,0.035);

    color:
        #b0bbb5;
}


.mushaf-book-btn:hover {
    background:
        rgba(255,255,255,0.075);

    border-color:
        rgba(255,255,255,0.15);

    color:
        #fff;

    transform:
        translateY(-2px);
}


.mushaf-card-actions button i {
    margin-left: 5px;
}


/* =========================================================
   EMPTY
========================================================= */

.mushaf-empty {
    padding:
        65px 20px;

    margin-top: 25px;

    text-align: center;

    border:
        1px dashed rgba(255,255,255,0.1);

    border-radius: 22px;

    background:
        rgba(255,255,255,0.018);
}


.mushaf-empty-icon {
    width: 72px;
    height: 72px;

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

    margin: 0 auto 18px;

    border-radius: 20px;

    background:
        rgba(44,150,105,0.08);

    color:
        #63bf91;

    font-size: 1.5rem;
}


.mushaf-empty h3 {
    margin: 0 0 8px;

    color:
        #e8edea;

    font-size: 1.15rem;
}


.mushaf-empty p {
    margin: 0 0 22px;

    color:
        #7d8983;

    font-size: 0.9rem;
}


.mushaf-reset-btn {
    min-height: 44px;

    padding:
        0 18px;

    border:
        1px solid rgba(87,190,139,0.25);

    border-radius: 12px;

    background:
        rgba(44,150,105,0.09);

    color:
        #70c99d;

    font-family: inherit;
    font-weight: 800;

    cursor: pointer;

    transition:
        .2s ease;
}


.mushaf-reset-btn:hover {
    background:
        rgba(44,150,105,0.18);

    transform:
        translateY(-2px);
}


/* =========================================================
   MUSHAF MODAL
========================================================= */

.mushaf-modal {
    position: fixed;

    inset: 0;

    z-index: 9990;

    display: flex;

    align-items: center;
    justify-content: center;

    padding: 20px;

    visibility: hidden;
    opacity: 0;

    pointer-events: none;

    transition:
        opacity .3s ease,
        visibility .3s ease;
}


.mushaf-modal.is-open {
    visibility: visible;
    opacity: 1;

    pointer-events: auto;
}


/* =========================================================
   MODAL OVERLAY
========================================================= */

.mushaf-modal-overlay {
    position: absolute;

    inset: 0;

    background:
        rgba(0,0,0,0.78);

    backdrop-filter:
        blur(8px);
}


/* =========================================================
   VIEWER
========================================================= */

.mushaf-viewer {
    position: relative;

    z-index: 2;

    width: min(1450px, 96vw);
    height: min(94vh, 950px);

    display: flex;
    flex-direction: column;

    overflow: hidden;

    border:
        1px solid rgba(255,255,255,0.1);

    border-radius: 24px;

    background:
        #0b1210;

    box-shadow:
        0 35px 100px rgba(0,0,0,0.55);

    outline: none;

    transform:
        translateY(18px) scale(.98);

    transition:
        transform .3s ease;
}


.mushaf-modal.is-open .mushaf-viewer {
    transform:
        translateY(0) scale(1);
}


/* =========================================================
   VIEWER HEADER
========================================================= */

.mushaf-viewer-header {
    flex: 0 0 auto;

    display: flex;

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

    gap: 20px;

    min-height: 82px;

    padding:
        14px 20px;

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

    background:
        rgba(10,18,15,0.96);
}


.mushaf-viewer-heading {
    display: flex;

    align-items: center;

    gap: 13px;

    min-width: 0;
}


.mushaf-viewer-icon {
    width: 48px;
    height: 48px;

    flex: 0 0 auto;

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

    border:
        1px solid rgba(87,190,139,0.2);

    border-radius: 14px;

    background:
        rgba(44,150,105,0.1);

    color:
        #6bc69a;
}


.mushaf-viewer-heading span {
    display: block;

    margin-bottom: 2px;

    color:
        #6bc69a;

    font-size: 0.7rem;
    font-weight: 800;
}


.mushaf-viewer-heading h2 {
    margin: 0;

    color:
        #f0f4f1;

    font-size:
        clamp(0.95rem, 2vw, 1.2rem);

    line-height: 1.5;
}


.mushaf-viewer-heading p {
    margin: 2px 0 0;

    color:
        #77847d;

    font-size: 0.75rem;
}


.mushaf-viewer-close {
    width: 44px;
    height: 44px;

    flex: 0 0 auto;

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

    border:
        1px solid rgba(255,255,255,0.08);

    border-radius: 12px;

    background:
        rgba(255,255,255,0.035);

    color:
        #9ca8a2;

    font-size: 1rem;

    cursor: pointer;

    transition:
        .2s ease;
}


.mushaf-viewer-close:hover {
    background:
        rgba(210,70,70,0.15);

    border-color:
        rgba(210,70,70,0.3);

    color:
        #ff9b9b;

    transform:
        rotate(3deg);
}


/* =========================================================
   TOOLBAR
========================================================= */

.mushaf-toolbar {
    flex: 0 0 auto;

    display: flex;

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

    gap: 12px;

    padding:
        10px 14px;

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

    background:
        #0e1713;
}


.mushaf-toolbar-group {
    display: flex;

    align-items: center;

    gap: 7px;
}


.mushaf-tool-btn,
.mushaf-zoom-value {
    min-height: 38px;

    border:
        1px solid rgba(255,255,255,0.08);

    border-radius: 10px;

    background:
        rgba(255,255,255,0.035);

    color:
        #aeb8b3;

    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 700;

    cursor: pointer;

    transition:
        .2s ease;
}


.mushaf-tool-btn {
    padding:
        0 12px;
}


.mushaf-tool-btn:hover,
.mushaf-zoom-value:hover {
    border-color:
        rgba(87,190,139,0.3);

    background:
        rgba(44,150,105,0.09);

    color:
        #74cda0;
}


.mushaf-tool-btn:disabled {
    cursor:
        not-allowed;

    opacity:
        .4 !important;
}


.mushaf-icon-only {
    width: 38px;

    padding:
        0;
}


.mushaf-zoom-value {
    min-width: 60px;

    padding:
        0 10px;

    color:
        #75cda0;
}


.mushaf-page-indicator {
    display: flex;

    align-items: center;
    justify-content: center;

    gap: 6px;

    min-width: 82px;

    color:
        #76837c;

    font-size: 0.78rem;
}


#mushafCurrentPage {
    color:
        #dbe4df;

    font-weight: 800;
}


/* =========================================================
   VIEWER BODY
========================================================= */

.mushaf-viewer-body {
    position: relative;

    flex: 1 1 auto;

    min-height: 0;

    display: flex;

    overflow: hidden;

    background:
        #050806;
}


.mushaf-page-stage {
    position: relative;

    flex: 1;

    min-width: 0;
    min-height: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    overflow: hidden;

    background:
        radial-gradient(
            circle at center,
            #17211c 0%,
            #080d0a 58%,
            #030504 100%
        );

    outline: none;
}


.mushaf-page-wrapper {
    position: relative;

    width: 100%;
    height: 100%;

    display: flex;

    align-items: center;
    justify-content: center;
}


.mushaf-page-image {
    max-width: 100%;
    max-height: 100%;

    object-fit: contain;

    user-select: none;

    box-shadow:
        0 25px 70px rgba(0,0,0,0.45);
}


/* =========================================================
   SIDE NAV
========================================================= */

.mushaf-side-nav {
    position: absolute;

    top: 50%;

    z-index: 20;

    width: 44px;
    height: 70px;

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

    transform:
        translateY(-50%);

    border:
        1px solid rgba(255,255,255,0.08);

    border-radius: 12px;

    background:
        rgba(8,14,11,0.82);

    color:
        #9eaaa4;

    backdrop-filter:
        blur(8px);

    cursor: pointer;

    transition:
        .2s ease;
}


.mushaf-side-prev {
    right: 14px;
}


.mushaf-side-next {
    left: 14px;
}


.mushaf-side-nav:hover {
    background:
        rgba(44,150,105,0.16);

    border-color:
        rgba(87,190,139,0.3);

    color:
        #75cda0;
}


.mushaf-side-nav:disabled {
    opacity:
        .35;

    pointer-events:
        none;
}


/* =========================================================
   FOOTER
========================================================= */

.mushaf-viewer-footer {
    flex: 0 0 auto;

    display: flex;

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

    gap: 20px;

    min-height: 48px;

    padding:
        8px 16px;

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

    background:
        #0b1210;
}


.mushaf-viewer-status {
    display: flex;

    align-items: center;

    gap: 7px;

    color:
        #78857e;

    font-size: 0.72rem;
}


.mushaf-viewer-status i {
    color:
        #61bc8e;
}


.mushaf-viewer-shortcuts {
    display: flex;

    align-items: center;

    gap: 13px;

    color:
        #66736c;

    font-size: 0.68rem;
}


.mushaf-viewer-shortcuts span {
    display: inline-flex;

    align-items: center;

    gap: 5px;
}


.mushaf-viewer-shortcuts kbd {
    min-width: 22px;
    height: 20px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0 5px;

    border:
        1px solid rgba(255,255,255,0.1);

    border-bottom-width: 2px;

    border-radius: 5px;

    background:
        rgba(255,255,255,0.035);

    color:
        #9ca8a2;

    font-family: inherit;
    font-size: 0.63rem;
}


/* =========================================================
   LOCAL BOOK VIEWER
========================================================= */

.local-mushaf-book-viewer {
    position: fixed;

    inset: 0;

    z-index: 10000;

    display: flex;

    align-items: center;
    justify-content: center;

    padding: 20px;

    visibility: hidden;
    opacity: 0;

    pointer-events: none;

    transition:
        opacity .3s ease,
        visibility .3s ease;
}


.local-mushaf-book-viewer.is-open {
    visibility: visible;

    opacity: 1;

    pointer-events: auto;
}


.local-mushaf-book-overlay {
    position: absolute;

    inset: 0;

    background:
        rgba(0,0,0,0.8);

    backdrop-filter:
        blur(8px);
}


.local-mushaf-book-dialog {
    position: relative;

    z-index: 2;

    width: min(1400px, 96vw);
    height: min(94vh, 900px);

    display: flex;
    flex-direction: column;

    overflow: hidden;

    border:
        1px solid rgba(255,255,255,0.1);

    border-radius: 24px;

    background:
        #0b1210;

    box-shadow:
        0 35px 100px rgba(0,0,0,0.55);

    outline: none;

    transform:
        translateY(18px) scale(.98);

    transition:
        transform .3s ease;
}


.local-mushaf-book-viewer.is-open
.local-mushaf-book-dialog {
    transform:
        translateY(0) scale(1);
}


/* =========================================================
   BOOK HEADER
========================================================= */

.local-mushaf-book-header {
    flex: 0 0 auto;

    display: flex;

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

    gap: 20px;

    min-height: 80px;

    padding:
        13px 18px;

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

    background:
        #0c1511;
}


.local-mushaf-book-heading {
    display: flex;

    align-items: center;

    gap: 13px;

    min-width: 0;
}


.local-mushaf-book-icon {
    width: 48px;
    height: 48px;

    flex: 0 0 auto;

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

    border-radius: 14px;

    border:
        1px solid rgba(185,154,92,0.22);

    background:
        rgba(185,154,92,0.08);

    color:
        #c5a66a;
}


.local-mushaf-book-heading span {
    display: block;

    margin-bottom: 2px;

    color:
        #b89b61;

    font-size: 0.68rem;
    font-weight: 800;
}


.local-mushaf-book-heading h2 {
    margin: 0;

    color:
        #eef2ef;

    font-size:
        clamp(.9rem, 2vw, 1.15rem);

    line-height: 1.5;
}


.local-mushaf-book-heading p {
    margin: 2px 0 0;

    color:
        #77847d;

    font-size: 0.72rem;
}


/* =========================================================
   BOOK ACTIONS
========================================================= */

.local-mushaf-book-actions {
    display: flex;

    align-items: center;

    gap: 7px;
}


.local-mushaf-book-actions button {
    width: 40px;
    height: 40px;

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

    border:
        1px solid rgba(255,255,255,0.08);

    border-radius: 10px;

    background:
        rgba(255,255,255,0.035);

    color:
        #9da9a3;

    cursor: pointer;

    transition:
        .2s ease;
}


.local-mushaf-book-actions button:hover {
    background:
        rgba(255,255,255,0.08);

    color:
        #fff;

    transform:
        translateY(-1px);
}


#localMushafBookClose:hover {
    background:
        rgba(210,70,70,0.15);

    color:
        #ff9b9b;

    border-color:
        rgba(210,70,70,0.3);
}


/* =========================================================
   BOOK TOOLBAR
========================================================= */

.local-mushaf-book-toolbar {
    flex: 0 0 auto;

    min-height: 38px;

    display: flex;

    align-items: center;

    padding:
        0 16px;

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

    background:
        #0a100d;

    color:
        #728078;

    font-size: 0.7rem;
}


/* =========================================================
   BOOK BODY
========================================================= */

.local-mushaf-book-body {
    position: relative;

    flex: 1;

    min-height: 0;

    overflow: hidden;

    background:
        #050806;
}


.local-mushaf-book-body iframe {
    width: 100%;
    height: 100%;

    display: block;

    border: 0;

    background:
        #fff;
}


/* =========================================================
   BOOK LOADING
========================================================= */

.local-mushaf-book-loading {
    position: absolute;

    inset: 0;

    z-index: 5;

    display: flex;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    gap: 14px;

    background:
        #070c09;

    color:
        #89968f;
}


.local-mushaf-spinner {
    width: 38px;
    height: 38px;

    border:
        3px solid rgba(255,255,255,0.08);

    border-top-color:
        #61bd8e;

    border-radius: 50%;

    animation:
        mushafSpinner .8s linear infinite;
}


@keyframes mushafSpinner {
    to {
        transform: rotate(360deg);
    }
}


.local-mushaf-book-loading p {
    margin: 0;

    font-size: 0.8rem;
}


/* =========================================================
   BOOK ERROR
========================================================= */

.local-mushaf-book-error {
    position: absolute;

    inset: 0;

    z-index: 10;

    display: flex;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    padding: 30px;

    text-align: center;

    background:
        #080d0a;
}


.local-mushaf-book-error > i {
    margin-bottom: 15px;

    color:
        #b96c6c;

    font-size: 2.2rem;
}


.local-mushaf-book-error h3 {
    margin: 0 0 8px;

    color:
        #e8eeea;

    font-size: 1.1rem;
}


.local-mushaf-book-error p {
    max-width: 520px;

    margin: 0 0 20px;

    color:
        #7e8a84;

    font-size: 0.8rem;

    line-height: 1.8;
}


.local-mushaf-book-error button {
    min-height: 42px;

    padding:
        0 16px;

    border:
        1px solid rgba(87,190,139,0.25);

    border-radius: 10px;

    background:
        rgba(44,150,105,0.1);

    color:
        #70c99d;

    font-family: inherit;
    font-weight: 800;

    cursor: pointer;
}


/* =========================================================
   BODY LOCK
========================================================= */

body.mushaf-modal-open,
body.mushaf-book-viewer-open {
    overflow: hidden;
}


/* =========================================================
   FULLSCREEN
========================================================= */

.mushaf-viewer:fullscreen,
.local-mushaf-book-dialog:fullscreen {
    width: 100vw;
    height: 100vh;

    max-width: none;
    max-height: none;

    border-radius: 0;
}


.mushaf-viewer:fullscreen {
    background:
        #050806;
}


.local-mushaf-book-dialog:fullscreen {
    background:
        #050806;
}


/* =========================================================
   FOCUS
========================================================= */

.mushaf-tool-btn:focus-visible,
.mushaf-zoom-value:focus-visible,
.mushaf-viewer-close:focus-visible,
.mushaf-side-nav:focus-visible,
.local-mushaf-book-actions button:focus-visible,
.mushaf-card-actions button:focus-visible,
.mushaf-reset-btn:focus-visible,
.mushaf-search-box button:focus-visible {
    outline:
        2px solid rgba(100,201,153,0.8);

    outline-offset:
        2px;
}


/* =========================================================
   RESPONSIVE — TABLET
========================================================= */

@media (max-width: 1100px) {

    .mushaf-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .mushaf-tools {
        grid-template-columns:
            1fr 1fr;

    }


    .mushaf-results-count {
        grid-column:
            1 / -1;

        justify-content:
            center;
    }


    .mushaf-viewer {
        width: 97vw;
        height: 94vh;
    }
}


/* =========================================================
   RESPONSIVE — MOBILE
========================================================= */

@media (max-width: 700px) {

    .mushafs-section {
        padding:
            75px 0;
    }


    .mushafs-section .section-heading {
        margin-bottom:
            32px;
    }


    .mushafs-section .section-heading h2 {
        font-size:
            1.8rem;
    }


    .mushafs-section .section-heading p {
        font-size:
            .88rem;

        line-height:
            1.8;
    }


    .mushaf-tools {
        grid-template-columns:
            1fr;

        padding:
            10px;

        border-radius:
            16px;
    }


    .mushaf-results-count {
        grid-column:
            auto;
    }


    .mushaf-grid {
        grid-template-columns:
            1fr;

        gap:
            14px;
    }


    .mushaf-card {
        min-height:
            0;
    }


    .mushaf-card-actions {
        grid-template-columns:
            1fr 1fr;
    }


    /* =========================
       MUSHAF VIEWER
    ========================= */

    .mushaf-modal {
        padding:
            0;
    }


    .mushaf-viewer {
        width:
            100vw;

        height:
            100vh;

        border-radius:
            0;
    }


    .mushaf-viewer-header {
        min-height:
            70px;

        padding:
            10px 12px;
    }


    .mushaf-viewer-icon {
        width:
            42px;

        height:
            42px;
    }


    .mushaf-viewer-heading h2 {
        font-size:
            .88rem;
    }


    .mushaf-viewer-heading p {
        font-size:
            .65rem;
    }


    .mushaf-toolbar {
        flex-wrap:
            wrap;

        justify-content:
            center;

        padding:
            8px;
    }


    .mushaf-toolbar-group {
        flex:
            0 0 auto;
    }


    .mushaf-tool-btn {
        min-height:
            36px;

        padding:
            0 9px;

        font-size:
            .7rem;
    }


    .mushaf-side-nav {
        width:
            38px;

        height:
            58px;
    }


    .mushaf-side-prev {
        right:
            7px;
    }


    .mushaf-side-next {
        left:
            7px;
    }


    .mushaf-viewer-footer {
        min-height:
            42px;

        padding:
            7px 10px;
    }


    .mushaf-viewer-shortcuts {
        display:
            none;
    }


    /* =========================
       BOOK VIEWER
    ========================= */

    .local-mushaf-book-viewer {
        padding:
            0;
    }


    .local-mushaf-book-dialog {
        width:
            100vw;

        height:
            100vh;

        border-radius:
            0;
    }


    .local-mushaf-book-header {
        min-height:
            70px;

        padding:
            10px 12px;
    }


    .local-mushaf-book-icon {
        width:
            42px;

        height:
            42px;
    }


    .local-mushaf-book-heading h2 {
        font-size:
            .85rem;
    }


    .local-mushaf-book-heading p {
        font-size:
            .63rem;
    }


    .local-mushaf-book-actions button {
        width:
            36px;

        height:
            36px;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 430px) {

    .mushaf-card-top {
        padding:
            16px 16px 0;
    }


    .mushaf-card-body {
        padding:
            18px 16px;
    }


    .mushaf-card-actions {
        padding:
            0 16px 16px;
    }


    .mushaf-card-actions button {
        min-height:
            43px;

        font-size:
            .72rem;
    }


    .mushaf-card-icon {
        width:
            43px;

        height:
            43px;
    }


    .mushaf-card-badge {
        font-size:
            .62rem;
    }


    .mushaf-toolbar-group:first-child
    .mushaf-tool-btn {
        padding:
            0 7px;
    }


    .mushaf-page-indicator {
        min-width:
            55px;
    }


    .local-mushaf-book-actions {
        gap:
            4px;
    }


    #localMushafBookNewTab {
        display:
            none;
    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .mushaf-card,
    .mushaf-tool-btn,
    .mushaf-viewer,
    .local-mushaf-book-dialog,
    .local-mushaf-spinner {
        animation:
            none !important;

        transition:
            none !important;
    }
}

/* =========================================================
   MUSHAFS SECTION - DUAL THEME (LIGHT & DARK MODE)
========================================================= */

/* 1. نظام الألوان (THEME VARIABLES)
========================================================= */

/* الوضع النهاري (Light Mode) */
:root,
[data-theme="light"] {
  --mushaf-bg-main: #fcfbf7;
  --mushaf-bg-card: #ffffff;
  --mushaf-bg-subtle: #f3f0e6;
  
  --mushaf-primary: #1b4332;       /* أخضر زيتي غامق */
  --mushaf-primary-hover: #2d6a4f;
  --mushaf-accent: #c99a2e;        /* ذهبي دافئ */
  --mushaf-accent-light: #fff8e7;
  
  --mushaf-text-title: #1b4332;    /* عناوين المصاحف */
  --mushaf-text-sub: #2d6a4f;      /* الرواية / الأسلوب */
  --mushaf-text-main: #2b2d42;     /* النصوص العامة */
  --mushaf-text-muted: #6c757d;    /* تفاصيل الإمام والملف */
  
  --mushaf-border: #e6e1d5;
  --mushaf-shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.04);
  --mushaf-shadow-lg: 0 12px 32px rgba(27, 67, 50, 0.08);
}

/* الوضع الليلي (Dark Mode) */
[data-theme="dark"],
.dark-mode {
  --mushaf-bg-main: #0f1715;
  --mushaf-bg-card: #18221f;
  --mushaf-bg-subtle: #22302c;
  
  --mushaf-primary: #52b788;       /* أخضر زاهي للوضع الداكن */
  --mushaf-primary-hover: #74c69d;
  --mushaf-accent: #e9c46a;        /* ذهبي مضيء */
  --mushaf-accent-light: rgba(233, 196, 106, 0.12);
  
  --mushaf-text-title: #ffffff;    /* أبيض للبطاقات والأسماء */
  --mushaf-text-sub: #52b788;      /* أخضر مائل للفيروزي */
  --mushaf-text-main: #e0e0e0;     
  --mushaf-text-muted: #a0aec0;    
  
  --mushaf-border: #2d3f39;
  --mushaf-shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.3);
  --mushaf-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5);
}

/* 2. الهيكل الأساسي للقسم
========================================================= */
.mushafs-section {
  background-color: var(--mushaf-bg-main);
  color: var(--mushaf-text-main);
  padding: 4rem 1.5rem;
  direction: rtl;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.mushafs-section .section-heading {
  text-align: center;
  max-width: 650px;
  margin: 0 auto 3rem;
}

.mushafs-section .section-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background-color: var(--mushaf-accent-light);
  color: var(--mushaf-accent);
  padding: 0.4rem 1rem;
  border-radius: 50px;
  font-size: 0.9rem;
  font-weight: 600;
  border: 1px solid rgba(201, 154, 46, 0.2);
  margin-bottom: 0.75rem;
}

.mushafs-section .section-heading h2 {
  color: var(--mushaf-primary);
  font-size: 2.2rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.mushafs-section .section-heading p {
  color: var(--mushaf-text-muted);
  font-size: 1rem;
  line-height: 1.6;
}

/* 3. أدوات البحث والتصفية
========================================================= */
.mushaf-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background-color: var(--mushaf-bg-card);
  padding: 1rem 1.25rem;
  border-radius: 12px;
  border: 1px solid var(--mushaf-border);
  box-shadow: var(--mushaf-shadow-sm);
  margin-bottom: 2rem;
}

.mushaf-search-box {
  position: relative;
  flex: 1 1 300px;
  display: flex;
  align-items: center;
}

.mushaf-search-box i {
  position: absolute;
  right: 1rem;
  color: var(--mushaf-text-muted);
  pointer-events: none;
}

.mushaf-search-box input[type="search"] {
  width: 100%;
  padding: 0.75rem 2.75rem 0.75rem 2.5rem;
  background-color: var(--mushaf-bg-subtle);
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--mushaf-text-main);
  font-size: 0.95rem;
  outline: none;
  transition: all 0.25s ease;
}

.mushaf-search-box input[type="search"]:focus {
  background-color: var(--mushaf-bg-card);
  border-color: var(--mushaf-accent);
  box-shadow: 0 0 0 3px rgba(201, 154, 46, 0.15);
}

.mushaf-filter-box select {
  padding: 0.75rem 2rem 0.75rem 1rem;
  background-color: var(--mushaf-bg-subtle);
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--mushaf-text-main);
  font-size: 0.95rem;
  cursor: pointer;
  outline: none;
}

.mushaf-results-count {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--mushaf-primary);
  background-color: var(--mushaf-bg-subtle);
  padding: 0.5rem 0.9rem;
  border-radius: 6px;
}

/* 4. تصميم بطاقات المصاحف (CARDS)
========================================================= */
.mushaf-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
}

.mushaf-card {
  background-color: var(--mushaf-bg-card) !important;
  border: 1px solid var(--mushaf-border) !important;
  border-radius: 12px;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.25rem;
  box-shadow: var(--mushaf-shadow-sm);
  transition: all 0.25s ease;
  position: relative;
  overflow: hidden;
}

.mushaf-card::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--mushaf-accent), var(--mushaf-primary));
  opacity: 0;
  transition: opacity 0.25s ease;
}

.mushaf-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--mushaf-shadow-lg);
  border-color: var(--mushaf-accent) !important;
}

.mushaf-card:hover::before {
  opacity: 1;
}

/* شارة المصدر والأيقونة */
.mushaf-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.mushaf-card-badge, 
.badge-external {
  background-color: var(--mushaf-bg-subtle) !important;
  color: var(--mushaf-text-muted) !important;
  padding: 0.35rem 0.75rem;
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: 600;
  border: 1px solid var(--mushaf-border);
}

.mushaf-card-icon {
  width: 42px;
  height: 42px;
  background-color: var(--mushaf-accent-light) !important;
  color: var(--mushaf-accent) !important;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  border: 1px solid rgba(201, 154, 46, 0.3);
}

/* نصوص البطاقات المعدلة والمضبوطة */
.mushaf-card-subtitle,
.mushaf-card-riwaya {
  color: var(--mushaf-text-sub) !important;
  font-size: 0.88rem;
  font-weight: 700;
  margin-bottom: 0.25rem;
}

.mushaf-card-title,
.mushaf-card h3,
.mushaf-card h4 {
  color: var(--mushaf-text-title) !important;
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0.25rem 0;
  line-height: 1.4;
}

.mushaf-card-meta,
.mushaf-card-author,
.mushaf-card-file {
  color: var(--mushaf-text-muted) !important;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

/* الأزرار داخل البطاقة */
.mushaf-card-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: auto;
}

.mushaf-card-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.65rem;
  border-radius: 8px;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s ease;
}

.mushaf-btn-primary {
  background-color: var(--mushaf-primary) !important;
  color: #ffffff !important;
  border: 1px solid var(--mushaf-primary) !important;
}

.mushaf-btn-primary:hover {
  background-color: var(--mushaf-primary-hover) !important;
}

.mushaf-btn-secondary {
  background-color: var(--mushaf-bg-subtle) !important;
  color: var(--mushaf-text-main) !important;
  border: 1px solid var(--mushaf-border) !important;
}

.mushaf-btn-secondary:hover {
  background-color: var(--mushaf-accent-light) !important;
  color: var(--mushaf-accent) !important;
}

/* 5. عارض المصاحف (MODAL VIEWER)
========================================================= */
.mushaf-viewer {
  background-color: var(--mushaf-bg-card);
  border: 1px solid var(--mushaf-border);
  box-shadow: var(--mushaf-shadow-lg);
}

.mushaf-viewer-header,
.mushaf-viewer-footer {
  background-color: var(--mushaf-bg-subtle);
  border-color: var(--mushaf-border);
}

.mushaf-viewer-body {
  background-color: var(--mushaf-bg-main);
}

/* حاوية قسم المصاحف / القارئ */
.quran-reader-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #ffffff;
}

/* هيدر معلومات الكتاب */
.book-header-info {
    width: 100%;
    text-align: center;
    margin-bottom: 20px;
}

.book-title {
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 8px;
    direction: rtl;
}

.book-meta {
    font-size: 1rem;
    color: var(--accent-gold, #c5a059);
    margin-bottom: 12px;
}

/* أزرار التحكم والعمليات */
.reader-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-bottom: 15px;
}

.reader-controls button, 
.reader-controls a {
    background: #1a1a1a;
    border: 1px solid #333;
    color: #fff;
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.reader-controls button:hover {
    border-color: var(--accent-gold, #c5a059);
    color: var(--accent-gold, #c5a059);
}

/* إطار عرض الـ PDF */
.pdf-viewer-wrapper {
    width: 100%;
    height: 80vh; /* يضمن أخذ نسبة مناسبة من ارتفاع الشاشة */
    min-height: 600px;
    background-color: #1e1e1e;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    border: 1px solid #333;
}

.pdf-viewer-wrapper iframe,
.pdf-viewer-wrapper embed,
.pdf-viewer-wrapper object {
    width: 100%;
    height: 100%;
    border: none;
}

/* ==========================================================================
   تنسيقات شبكة وبطاقات المصاحف (Mushaf Grid & Cards Fix)
   ========================================================================== */

/* 1. شبكة العرض الموحدة */
.mushaf-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1.5rem;
    padding: 1rem 0;
}

/* 2. بطاقة المصحف/الكتاب */
.mushaf-card {
    background-color: var(--surface, #ffffff);
    border: 1px solid var(--border, rgba(0, 0, 0, 0.1));
    border-radius: 12px;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.mushaf-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
}

/* 3. زر قراءة الكتاب الموحد */
.mushaf-book-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0.75rem 1rem;
    margin-top: 1rem;
    background-color: var(--primary, #10b981);
    color: #ffffff;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.2s ease;
}

.mushaf-book-btn:hover {
    background-color: var(--primary-hover, #059669);
    color: #ffffff;
}

/* 4. التجاوب مع الشاشات الصغيرة (الهواتف) */
@media (max-width: 640px) {
    .mushaf-grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 1rem;
    }
}

/* إخفاء زر الهامبرغر على الشاشات الكبيرة */
.menu-toggle {
    display: none;
    background: transparent;
    border: none;
    color: currentColor;
    font-size: 1.4rem;
    cursor: pointer;
    padding: 5px;
}

/* تنسيقات الشاشات الصغيرة (الجوال) */
@media (max-width: 992px) {
    /* إخفاء الروابط العادية وإظهار زر الهامبرغر */
    .menu-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* تحويل القائمة إلى قائمة منسدلة تحت الهيدر */
    .nav-links {
        display: none; /* مخفية افتراضياً */
        position: absolute;
        top: 100%;
        right: 0;
        left: 0;
        width: 100%;
        background-color: #0b1d17; /* نفس لون الهيدر خلفيتك */
        flex-direction: column;
        padding: 15px 20px;
        gap: 15px;
        box-shadow: 0 10px 15px rgba(0, 0, 0, 0.4);
        z-index: 1000;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    /* الكلاس الذي يُضاف بالـ JS عند الضغط لإظهار القائمة */
    .nav-links.show {
        display: flex !important;
    }

    /* اخفاء النص بجانب زر الحساب لإخلاء مساحة في الجوال */
    .account-label {
        display: none;
    }
}