@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@300;400;500;600;700&family=Noto+Naskh+Arabic:wght@400;500;600;700&display=swap');

:root {
    --green: #173D36;
    --ink: #0E2B26;
    --forest: #245E50;
    --paper: #FFFDF8;
    --ivory: #F5F1E8;
    --line: #E6DED0;
    --gold: #C3A15D;
    --gold-light: #E9D6A7;
    --sub: #6B746B;
    --terracotta: #A76550;
    --radius: 12px;
    --shadow-soft: 0 4px 20px rgba(23, 61, 54, 0.06);
    --shadow-hover: 0 8px 30px rgba(23, 61, 54, 0.12);
}

html, body {
    margin: 0;
    padding: 0;
    background: var(--ivory);
    color: var(--ink);
    direction: rtl;
    text-align: right;
    font-family: 'IBM Plex Sans Arabic', Tahoma, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.8;
    -webkit-font-smoothing: antialiased;
}

#riwaq {
    width: 100%;
    max-width: 100%;
    margin: 0;
    min-height: 100vh;
    background: var(--ivory);
    position: relative;
}

* {
    box-sizing: border-box;
}

button, input, select, textarea {
    font-family: inherit;
    font-size: 14px;
}

button {
    cursor: pointer;
    border: 0;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
}

/* Animations */
@keyframes riwaqFadeInUp {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes modalSpringIn {
    0% {
        opacity: 0;
        transform: scale(0.93) translateY(-15px);
    }
    70% {
        transform: scale(1.01) translateY(2px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes pulseGlow {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(195, 161, 93, 0.4);
    }
    50% {
        transform: scale(1.03);
        box-shadow: 0 0 0 8px rgba(195, 161, 93, 0);
    }
}

@keyframes barGrow {
    from { width: 0; }
    to { width: var(--target-w, 100%); }
}

@keyframes book3DHover {
    0% {
        transform: translateY(0) rotateY(0deg);
        box-shadow: -6px 7px 0 #E5DECE;
    }
    100% {
        transform: translateY(-8px) rotateY(-5deg) scale(1.02);
        box-shadow: -14px 18px 24px rgba(23, 61, 54, 0.16), -6px 7px 0 #D8CEB8;
    }
}

@keyframes toastSlide {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in {
    animation: riwaqFadeInUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.delay-1 { animation-delay: 0.08s; }
.delay-2 { animation-delay: 0.16s; }
.delay-3 { animation-delay: 0.24s; }

/* Layout Shell */
.shell {
    display: grid;
    grid-template-columns: 210px minmax(0, 1fr);
    min-height: 100vh;
    width: 100%;
}

/* Auth Buttons in Header and Sidebar */
.auth-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.btn-header-login {
    background: transparent;
    color: var(--green);
    border: 1px solid var(--line);
    padding: 7px 16px;
    border-radius: 8px;
    font-weight: 500;
    font-size: 13px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
}
.btn-header-login:hover {
    background: #EAE4D7;
    color: var(--ink);
}

.btn-header-signup {
    background: var(--green);
    color: #FFFDF8;
    padding: 7px 18px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 13px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
    box-shadow: 0 2px 6px rgba(23, 61, 54, 0.15);
}
.btn-header-signup:hover {
    background: var(--ink);
    transform: translateY(-1px);
}

.btn-header-logout {
    background: transparent;
    color: var(--terracotta);
    border: 1px solid rgba(167, 101, 80, 0.25);
    padding: 6px 14px;
    border-radius: 8px;
    font-weight: 500;
    font-size: 12.5px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
}
.btn-header-logout:hover {
    background: #FBEAE5;
    border-color: var(--terracotta);
}

.guest-card {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    padding: 14px;
    margin-top: 10px;
    text-align: center;
}

/* Sidebar */
aside {
    background: var(--green);
    color: #F5F1E8;
    padding: 26px 18px;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    box-shadow: -4px 0 20px rgba(14, 43, 38, 0.08);
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 28px;
    text-decoration: none;
    color: #F5F1E8;
}

.brand-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: linear-gradient(135deg, #1C4A3E, #0E2B26);
    border: 1px solid rgba(195, 161, 93, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gold);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
    padding: 3px;
    flex-shrink: 0;
    overflow: hidden;
    position: relative;
}

.brand-logo-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.35));
    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.brand:hover .brand-logo-img {
    transform: scale(1.1);
}

.brand b {
    font-family: 'Noto Naskh Arabic', serif;
    font-size: 24px;
    font-weight: 600;
    line-height: 1.2;
    display: block;
}

.brand small {
    display: block;
    color: #D6C9AA;
    font-size: 11px;
    margin-top: -2px;
}

nav {
    display: grid;
    gap: 4px;
}

nav a, nav button {
    display: flex;
    gap: 12px;
    align-items: center;
    text-align: right;
    color: #D3E0D8;
    background: transparent;
    padding: 10px 14px;
    border-radius: 8px;
    min-height: 44px;
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 500;
    transition: all 0.2s ease;
}

nav a:hover, nav button:hover {
    background: #25493F;
    color: #FFE2A3;
    transform: translateX(-3px);
}

nav a.active, nav button.active {
    background: #31544A;
    color: #FFE2A3;
    font-weight: 600;
    box-shadow: inset 0 0 0 1px rgba(195, 161, 93, 0.3);
}

nav svg, aside svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.aside-bottom {
    margin-top: auto;
    padding-top: 24px;
}

.aside-quote {
    color: #CDBB91;
    font-family: 'Noto Naskh Arabic', serif;
    font-size: 12.5px;
    margin-bottom: 16px;
    line-height: 1.6;
    border-right: 2px solid var(--gold);
    padding-right: 8px;
}

.identity {
    border-top: 1px solid #2F5247;
    padding-top: 16px;
    display: flex;
    gap: 10px;
    align-items: center;
}

.avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #D4BD83;
    color: #173D36;
    font-weight: 600;
    font-size: 15px;
    border: 2px solid #FFFDF8;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}

.settings-btn {
    background: none;
    color: #E0E8DF;
    padding: 8px 0;
    display: flex;
    gap: 9px;
    align-items: center;
    text-decoration: none;
    font-size: 13px;
    margin-bottom: 8px;
}
.settings-btn:hover {
    color: #FFE2A3;
}

.stage {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* Header */
header {
    padding: 16px 32px;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    position: sticky;
    top: 0;
    z-index: 10;
    backdrop-filter: blur(8px);
    background: rgba(255, 253, 248, 0.95);
}

.crumb {
    color: var(--sub);
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.crumb b {
    color: var(--green);
}

.tag {
    font-size: 11px;
    border-radius: 6px;
    padding: 4px 10px;
    background: #EDE6D7;
    color: #655431;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-weight: 500;
}

.tag.live-pulse::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--gold);
    animation: pulseGlow 2s infinite;
}

/* Main Content */
main {
    padding: 32px;
    flex: 1;
}

/* Typography & Headings */
h1 {
    font-family: 'Noto Naskh Arabic', serif;
    font-weight: 600;
    font-size: 32px;
    line-height: 1.45;
    margin: 0 0 6px;
    color: var(--ink);
}

h2 {
    font-family: 'Noto Naskh Arabic', serif;
    font-size: 20px;
    font-weight: 600;
    margin: 0 0 12px;
    color: var(--ink);
}

h3 {
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 6px;
}

p {
    margin: 0 0 14px;
}

.muted {
    color: var(--sub);
}

.eyebrow {
    color: #866C37;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.5px;
    display: block;
    margin-bottom: 4px;
}

.heading {
    margin-bottom: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.welcome-line {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #8A7142;
    font-size: 13px;
    margin-bottom: 12px;
}
.welcome-line::after {
    content: '';
    height: 1px;
    width: 60px;
    background: #C9B98F;
}

/* Buttons */
.primary {
    background: var(--green);
    color: #FFFDF8;
    padding: 10px 22px;
    border-radius: 8px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: 500;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(23, 61, 54, 0.2);
}
.primary:hover {
    background: var(--ink);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(23, 61, 54, 0.25);
}

.secondary {
    background: transparent;
    color: var(--green);
    border: 1px solid var(--line);
    padding: 9px 18px;
    border-radius: 8px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: 500;
    text-decoration: none;
}
.secondary:hover {
    background: #EAE4D7;
    border-color: #D6CAB5;
    transform: translateY(-2px);
}

.link {
    color: var(--green);
    background: none;
    padding: 4px 0;
    text-decoration: underline;
    text-underline-offset: 4px;
    font-weight: 500;
}
.link:hover {
    color: var(--gold);
}

/* Panels & Cards */
.panel {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 24px;
    box-shadow: var(--shadow-soft);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.panel:hover {
    box-shadow: var(--shadow-hover);
}

.grid2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 20px;
}

/* Hero Section (Current Book) */
.hero {
    display: grid;
    grid-template-columns: 145px minmax(0, 1fr);
    gap: 28px;
    padding: 28px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-soft);
    position: relative;
    overflow: hidden;
}
.hero::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 140px;
    height: 140px;
    background: radial-gradient(circle, rgba(195, 161, 93, 0.08) 0%, transparent 70%);
    pointer-events: none;
}

.hero h2 {
    font-size: 30px;
    margin: 2px 0 4px;
}

/* 3D Realistic Book Cover */
.cover {
    width: 125px;
    min-height: 176px;
    padding: 22px 14px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    background: #315749;
    color: #F5E6BD;
    box-shadow: -6px 7px 0 #E5DECE, -12px 14px 18px rgba(23, 61, 54, 0.08);
    border-radius: 4px 8px 8px 4px;
    border-right: 5px solid #214336;
    font-family: 'Noto Naskh Arabic', serif;
    position: relative;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease;
    transform-style: preserve-3d;
}

.cover:hover {
    animation: book3DHover 0.35s forwards;
}

.cover:before {
    content: '';
    position: absolute;
    inset: 8px;
    border: 1px solid rgba(187, 168, 120, 0.5);
    border-radius: 60px 60px 0 0;
    pointer-events: none;
}

.cover strong {
    font-weight: 600;
    font-size: 23px;
    line-height: 1.5;
    position: relative;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

.cover small {
    margin-top: 14px;
    position: relative;
    font-size: 11px;
    color: #EBD8A9;
}

/* Progress Bars */
.progress {
    height: 6px;
    background: #E8E8DD;
    border-radius: 20px;
    overflow: hidden;
    margin: 12px 0 18px;
    position: relative;
}

.progress span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #173D36, #245E50);
    border-radius: 20px;
    transition: width 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Knowledge Footprint */
.barrow {
    display: grid;
    grid-template-columns: 60px 1fr 35px;
    align-items: center;
    gap: 12px;
    margin: 10px 0;
    font-size: 13px;
}
.barrow .progress {
    margin: 0;
}

/* Books Grid */
.books {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.book-card {
    padding: 22px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    text-align: center;
    display: flex;
    flex-direction: column;
    position: relative;
    transform-style: preserve-3d;
    perspective: 1000px;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    will-change: transform;
    cursor: pointer;
}

.book-card .card-glare {
    position: absolute;
    inset: 0;
    border-radius: var(--radius);
    pointer-events: none;
    z-index: 10;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.book-card .cover {
    margin: 0 auto 18px;
    width: 110px;
    min-height: 155px;
    transform: translateZ(35px);
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    transform-style: preserve-3d;
}

.book-card:hover .cover {
    box-shadow: -8px 12px 20px rgba(23, 61, 54, 0.18);
}

.book-card h3 {
    font-size: 16px;
    margin-bottom: 4px;
    transform: translateZ(22px);
    transition: transform 0.25s ease;
}

.book-card small {
    transform: translateZ(16px);
}

.book-card button {
    margin-top: auto;
    width: 100%;
    transform: translateZ(28px);
    transition: transform 0.25s ease, background 0.2s ease;
}

/* Search & Pills */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]), select, textarea {
    background: var(--paper);
    color: var(--ink);
    border: 1px solid var(--line);
    padding: 10px 14px;
    border-radius: 8px;
    max-width: 100%;
    min-height: 44px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):focus, select:focus, textarea:focus {
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(195, 161, 93, 0.15);
}

/* Default Checkbox & Radio Reset */
input[type="checkbox"], input[type="radio"] {
    width: 18px !important;
    height: 18px !important;
    min-height: 18px !important;
    padding: 0 !important;
    margin: 0 !important;
    cursor: pointer;
    accent-color: var(--green);
    border-radius: 4px;
    flex-shrink: 0;
    vertical-align: middle;
}

.search {
    width: 100%;
    margin-bottom: 14px;
}

.pills {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.pills a, .pills button {
    background: #EBE6DB;
    padding: 7px 16px;
    border-radius: 20px;
    color: var(--ink);
    font-size: 13px;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.2s ease;
}

.pills a:hover, .pills button:hover {
    background: #DDD5C5;
}

.pills a.selected, .pills button.selected {
    background: var(--green);
    color: var(--paper);
    box-shadow: 0 2px 6px rgba(23, 61, 54, 0.2);
}

/* Public Landing Page */
.public-page main {
    padding: 0;
}

.landing-hero {
    padding: 60px 48px;
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 50px;
    align-items: center;
    background: #F5F1E8;
}

.landing-hero h1 {
    font-size: 50px;
    line-height: 1.4;
    margin: 14px 0 20px;
}

.landing-hero h1 em {
    font-style: normal;
    color: #9B7A3E;
}

.landing-hero p {
    color: #647164;
    max-width: 440px;
    line-height: 2.1;
    font-size: 16px;
}

.arch-scene {
    background: var(--green);
    border-radius: 190px 190px 12px 12px;
    min-height: 390px;
    position: relative;
    padding: 36px 28px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    border: 8px solid #E9DFCA;
    box-shadow: 0 0 0 1px #C5B792, 0 16px 40px rgba(14, 43, 38, 0.2);
}

.arch-scene:before {
    content: '';
    position: absolute;
    inset: 12px;
    border: 1px solid rgba(195, 161, 93, 0.4);
    border-radius: 170px 170px 0 0;
    pointer-events: none;
}

.arch-emblem-glow {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 6px;
    padding: 6px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(195, 161, 93, 0.28) 0%, rgba(14, 43, 38, 0.35) 60%, transparent 75%);
}

.arch-hero-logo {
    width: 130px;
    height: 130px;
    object-fit: contain;
    filter: drop-shadow(0 10px 28px rgba(0, 0, 0, 0.5));
    animation: archLogoFloat 3.8s ease-in-out infinite alternate;
    transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.arch-hero-logo:hover {
    transform: scale(1.08) translateY(-3px);
}

@keyframes archLogoFloat {
    0% {
        transform: translateY(0px) scale(1);
    }
    100% {
        transform: translateY(-6px) scale(1.02);
    }
}

.arch-caption {
    color: #E9D6A7;
    font-family: 'Noto Naskh Arabic', serif;
    font-size: 26px;
    text-align: center;
    line-height: 1.6;
}

.arch-tiny {
    font-size: 11px;
    letter-spacing: 2px;
    color: #B9C9BC;
    font-family: sans-serif;
}

.public-section {
    padding: 48px;
    background: var(--paper);
}

.feature-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 36px;
    margin-top: 32px;
}

.feature {
    border-top: 1px solid #D8C59F;
    padding-top: 22px;
    transition: transform 0.25s ease;
}
.feature:hover {
    transform: translateY(-4px);
}

.feature svg {
    color: #96763C;
    width: 26px;
    height: 26px;
    margin-bottom: 12px;
}

.closing {
    background: #EAE4D7;
    padding: 36px 48px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

/* Modals & Dialogs */
.overlay {
    position: fixed;
    inset: 0;
    background: rgba(14, 38, 32, 0.7);
    backdrop-filter: blur(8px);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    overflow-y: auto;
    box-sizing: border-box;
}

.dialog {
    background: var(--paper);
    padding: 26px 28px;
    border: 1px solid var(--line);
    border-radius: 18px;
    width: 560px;
    max-width: 95vw;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    box-shadow: 0 24px 70px rgba(12, 35, 31, 0.4);
    animation: modalSpringIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
    box-sizing: border-box;
    position: relative;
    margin: auto;
}

.dialog::-webkit-scrollbar {
    width: 6px;
}
.dialog::-webkit-scrollbar-track {
    background: transparent;
}
.dialog::-webkit-scrollbar-thumb {
    background: #D9CEB8;
    border-radius: 10px;
}
.dialog::-webkit-scrollbar-thumb:hover {
    background: var(--gold);
}

.dialog .row {
    margin-bottom: 18px;
}

.dialog .heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 16px;
    gap: 12px;
}

.dialog .heading h2 {
    font-size: 19px;
    font-family: 'Noto Naskh Arabic', serif;
    color: var(--green);
    margin: 0;
    line-height: 1.4;
}

.dialog input,
.dialog select,
.dialog textarea {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    font-family: inherit;
    font-size: 13.5px;
}

.dialog label {
    min-width: 0;
}

.dialog [style*="grid-template-columns"] {
    min-width: 0;
}

.dialog [style*="grid-template-columns"] > * {
    min-width: 0;
}

@media (max-width: 540px) {
    .dialog {
        padding: 20px 16px;
        width: 100%;
    }
    .dialog [style*="grid-template-columns:1fr 1fr"],
    .dialog [style*="grid-template-columns: 1fr 1fr"],
    .dialog [style*="grid-template-columns:minmax(0, 1fr) minmax(0, 1fr)"],
    .dialog [style*="grid-template-columns: minmax(0, 1fr) minmax(0, 1fr)"] {
        grid-template-columns: 1fr !important;
    }
}

.close-btn {
    background: #F3EFE6;
    border: 1px solid #E2D9C5;
    font-size: 18px;
    color: var(--sub);
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    cursor: pointer;
    line-height: 1;
    transition: all 0.2s ease;
    flex-shrink: 0;
    padding: 0;
}
.close-btn:hover {
    background: #E8DFC8;
    color: var(--ink);
    transform: scale(1.08);
}

/* Toast */
.toast-container {
    position: fixed;
    bottom: 24px;
    left: 24px;
    z-index: 200;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.toast {
    background: #E4EDDF;
    color: #284731;
    padding: 14px 22px;
    border: 1px solid #CFDDC7;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.1);
    font-weight: 500;
    animation: toastSlide 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Interactive Calendar */
.calendar {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
    text-align: center;
    margin-top: 16px;
}

.calendar span {
    padding: 8px 4px;
    border-radius: 6px;
    font-size: 13px;
    transition: all 0.2s ease;
}

.calendar .event-day {
    background: #DFE8DC;
    color: #193F32;
    font-weight: 600;
    border: 1px solid #C5D8C0;
    position: relative;
}
.calendar .event-day:hover {
    transform: scale(1.1);
    background: #CBE0C7;
}

/* Timeline (Reading Journey) */
.timeline {
    padding: 12px 0;
}

.timeline-item {
    border-right: 1px solid #D4C5A9;
    padding: 0 22px 24px;
    margin-right: 8px;
    position: relative;
    animation: riwaqFadeInUp 0.3s both;
}

.timeline-item:before {
    content: '';
    width: 9px;
    height: 9px;
    background: var(--gold);
    border: 3px solid #FFFDF8;
    box-shadow: 0 0 0 1px var(--gold);
    border-radius: 50%;
    position: absolute;
    right: -5px;
    top: 7px;
}

/* Community & Masthead */
.community-mast {
    background: var(--green);
    color: #FFF4D8;
    padding: 36px;
    border-radius: 90px 16px 16px 16px;
    position: relative;
    margin-bottom: 24px;
    box-shadow: 0 8px 24px rgba(23, 61, 54, 0.15);
}

.community-mast h1 {
    font-size: 40px;
    color: #FFFDF8;
}

.question-block {
    border-right: 4px solid var(--gold);
    padding: 6px 18px;
    margin: 18px 0;
    font-family: 'Noto Naskh Arabic', serif;
    font-size: 22px;
    color: var(--green);
    background: rgba(195, 161, 93, 0.06);
    border-radius: 0 6px 6px 0;
}

/* Stopwatch Widget for Live Sessions */
.stopwatch-box {
    background: #EFEBE0;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 16px;
    text-align: center;
    margin-bottom: 16px;
}

.stopwatch-digits {
    font-size: 36px;
    font-family: monospace;
    font-weight: 700;
    color: var(--green);
    letter-spacing: 2px;
    margin-bottom: 8px;
}

/* Responsive & Mobile Drawer */
.menu-toggle {
    display: none;
}

@media (max-width: 900px) {
    .shell {
        grid-template-columns: 160px 1fr;
    }
    .hero {
        grid-template-columns: 110px 1fr;
        gap: 16px;
    }
    .books {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .landing-hero {
        grid-template-columns: 1fr;
        padding: 40px 24px;
    }
    .feature-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .shell {
        display: block;
    }
    aside {
        display: none;
        position: fixed;
        right: 0;
        top: 0;
        width: 240px;
        z-index: 150;
        box-shadow: -8px 0 30px rgba(0,0,0,0.3);
    }
    aside.open {
        display: flex;
    }
    .menu-toggle {
        display: flex;
        align-items: center;
        gap: 8px;
        width: 100%;
        padding: 12px 18px;
        background: var(--green);
        color: #FFFDF8;
        font-weight: 500;
        border-radius: 0;
    }
    main {
        padding: 20px 16px;
    }
    .hero {
        grid-template-columns: 85px 1fr;
        padding: 16px;
    }
    .hero .cover {
        width: 80px;
        min-height: 125px;
    }
    .books {
        grid-template-columns: 1fr;
    }
    .grid2 {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   3D Book Opening Animation & Realistic Tome Modal
   ========================================================================== */
.book-opening-overlay {
    background: rgba(8, 22, 18, 0.85);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    z-index: 120;
    padding: 24px 16px;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.35s ease;
}
.book-opening-overlay.active {
    opacity: 1;
}

.book-modal-stage {
    position: relative;
    max-width: 880px;
    width: 100%;
    perspective: 2000px;
    margin: auto;
    padding: 20px 0;
}

.book-modal-close-btn {
    position: absolute;
    top: -12px;
    left: -14px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #173D36;
    border: 2px solid var(--gold);
    color: #FFFDF8;
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 60;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.book-modal-close-btn:hover {
    background: var(--gold);
    color: #173D36;
    transform: scale(1.1) rotate(90deg);
}

/* Ambient shadow beneath the 3D book */
.book-ambient-shadow {
    position: absolute;
    bottom: -24px;
    left: 4%;
    right: 4%;
    height: 42px;
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0) 75%);
    filter: blur(10px);
    pointer-events: none;
    z-index: 1;
    transition: all 0.9s cubic-bezier(0.2, 0.8, 0.25, 1);
}

/* The Complete 3D Book Object */
.riwaq-book-object {
    position: relative;
    width: 100%;
    height: 520px;
    margin: 0 auto;
    transform-style: preserve-3d;
    transition: transform 1s cubic-bezier(0.2, 0.8, 0.25, 1);
}

/* Closed state of the entire book object */
.riwaq-book-object.book-closed {
    transform: translateX(25%) rotateY(-6deg) rotateX(4deg);
}

/* Opened state of the book object */
.riwaq-book-object.book-opened {
    transform: translateX(0) rotateY(0deg) rotateX(0deg);
}

/* ==========================================================================
   Grounding Hardcover Base Case (Solid Leather Case with Brass Corners)
   ========================================================================== */
.book-hardcover-case {
    position: absolute;
    top: -12px;
    bottom: -14px;
    left: -14px;
    right: -14px;
    display: flex;
    pointer-events: none;
    z-index: 2;
    transition: all 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.riwaq-book-object.book-closed .book-hardcover-case {
    opacity: 0;
    transform: scale(0.95);
}

.riwaq-book-object.book-opened .book-hardcover-case {
    opacity: 1;
    transform: scale(1);
}

.hardcover-plate {
    position: relative;
    width: 50%;
    height: 100%;
    background: #0B241E;
    box-shadow: 
        0 24px 60px rgba(0, 0, 0, 0.65),
        0 4px 16px rgba(0, 0, 0, 0.4),
        inset 0 0 35px rgba(0, 0, 0, 0.8);
    box-sizing: border-box;
}

.hardcover-plate.plate-left {
    border-radius: 12px 2px 2px 12px;
    border: 2.5px solid #1A463B;
    border-right: none;
    background: linear-gradient(135deg, #091F1A 0%, #0F2E26 60%, #091F1A 100%);
}

.hardcover-plate.plate-right {
    border-radius: 2px 12px 12px 2px;
    border: 2.5px solid #1A463B;
    border-left: none;
    background: linear-gradient(225deg, #091F1A 0%, #0F2E26 60%, #091F1A 100%);
}

.hardcover-embossed-stitch {
    position: absolute;
    inset: 4px;
    border: 1px dashed rgba(195, 161, 93, 0.4);
    pointer-events: none;
}

.plate-left .hardcover-embossed-stitch {
    border-radius: 9px 0 0 9px;
    border-right: none;
}

.plate-right .hardcover-embossed-stitch {
    border-radius: 0 9px 9px 0;
    border-left: none;
}

/* Antique Brass Corner Guards */
.brass-corner {
    position: absolute;
    z-index: 10;
    pointer-events: none;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4));
}

.corner-tl { top: -2px; left: -2px; }
.corner-tr { top: -2px; right: -2px; }
.corner-bl { bottom: -2px; left: -2px; }
.corner-br { bottom: -2px; right: -2px; }

/* ==========================================================================
   Center Leather Spine & Silk Headbands & Gold Bookmark Ribbon
   ========================================================================== */
.book-center-spine {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%) translateZ(4px);
    width: 26px;
    background: linear-gradient(90deg, #0A1B17 0%, #173D34 50%, #0A1B17 100%);
    z-index: 30;
    box-shadow: inset 0 0 14px rgba(0, 0, 0, 0.9), 0 0 8px rgba(0, 0, 0, 0.6);
    border-radius: 2px;
}

.spine-texture {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 38px,
        rgba(195, 161, 93, 0.45) 39px,
        rgba(0, 0, 0, 0.5) 40px,
        transparent 42px
    );
}

/* Silk Embroidered Headbands at Top and Bottom of Spine */
.book-silk-headband {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 28px;
    height: 9px;
    border-radius: 3px;
    background: repeating-linear-gradient(
        90deg,
        #173D36 0px,
        #173D36 3px,
        #C3A15D 3px,
        #C3A15D 6px,
        #FFF2D6 6px,
        #FFF2D6 8px
    );
    box-shadow: 0 2px 6px rgba(0,0,0,0.5);
    z-index: 32;
}

.headband-top {
    top: -7px;
}

.headband-bottom {
    bottom: -7px;
}

/* Draped Gold Ribbon Bookmark */
.book-gold-ribbon {
    position: absolute;
    top: -10px;
    right: 3px;
    width: 18px;
    height: 155px;
    background: linear-gradient(135deg, #F8E5B3 0%, #C3A15D 65%, #947432 100%);
    box-shadow: 3px 6px 16px rgba(0, 0, 0, 0.45), 1px 2px 5px rgba(0,0,0,0.25);
    z-index: 35;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 86%, 0 100%);
    transform-origin: top center;
    transition: transform 0.8s ease;
}

.riwaq-book-object.book-opened .book-gold-ribbon {
    animation: ribbonGentleSway 3s ease-in-out infinite alternate;
}

@keyframes ribbonGentleSway {
    0% { transform: rotate(1.5deg) scaleY(1); }
    100% { transform: rotate(-3deg) translateY(4px) scaleY(1.02); }
}

/* ==========================================================================
   Right Leaf (Base layer with Right Page content & Page Stack Thickness)
   ========================================================================== */
.book-leaf-static.leaf-right {
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    height: 100%;
    transform-style: preserve-3d;
    z-index: 10;
}

/* Fore-edge Paper Stack Block on Outer Right */
.pages-fore-edge {
    position: absolute;
    top: 6px;
    bottom: 6px;
    width: 14px;
    background: repeating-linear-gradient(
        180deg,
        #FAF7EE 0px,
        #FAF7EE 1.5px,
        #D2C4AE 1.5px,
        #D2C4AE 3px
    );
    z-index: 4;
    pointer-events: none;
    box-shadow: inset 0 0 5px rgba(0,0,0,0.25);
}

.pages-fore-edge.edge-right {
    right: -13px;
    border-radius: 0 4px 4px 0;
    transform: perspective(400px) rotateY(-15deg);
    box-shadow: inset -2px 0 4px rgba(0, 0, 0, 0.25), 4px 6px 14px rgba(0, 0, 0, 0.25);
}

.pages-fore-edge.edge-left {
    left: -13px;
    border-radius: 4px 0 0 4px;
    transform: perspective(400px) rotateY(15deg);
    box-shadow: inset 2px 0 4px rgba(0, 0, 0, 0.25), -4px 6px 14px rgba(0, 0, 0, 0.25);
}

/* Horizontal Page Rim Top & Bottom */
.pages-horizontal-edge {
    position: absolute;
    left: 0;
    right: 0;
    pointer-events: none;
    z-index: 4;
    background: repeating-linear-gradient(
        90deg,
        #FAF7EE 0px,
        #FAF7EE 2px,
        #D6CAB4 2px,
        #D6CAB4 4px
    );
}

.edge-bottom-right, .edge-bottom-left {
    bottom: -8px;
    height: 8px;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
}

.edge-bottom-right { border-radius: 0 0 4px 0; }
.edge-bottom-left { border-radius: 0 0 0 4px; }

.edge-top-right, .edge-top-left {
    top: -6px;
    height: 6px;
    box-shadow: inset 0 -2px 4px rgba(0,0,0,0.15);
}

.edge-top-right { border-radius: 0 4px 0 0; }
.edge-top-left { border-radius: 4px 0 0 0; }

/* Fanned Underlying Page Leaves */
.page-sheet-underlay {
    position: absolute;
    pointer-events: none;
    border-radius: 6px;
    transition: all 0.3s ease;
}

.page-sheet-underlay.underlay-1 {
    inset: 2px 4px -3px -4px;
    background: #FAF5E8;
    border: 1px solid #DFD3BE;
    z-index: 1;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.page-sheet-underlay.underlay-2 {
    inset: 4px 8px -6px -8px;
    background: #F5EEDC;
    border: 1px solid #D7CABB;
    z-index: 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

/* Dynamic light-blocking shadow over right page when book is closed */
.right-page-shadow {
    position: absolute;
    inset: 10px;
    background: rgba(14, 34, 29, 0.88);
    border-radius: 8px 0 0 8px;
    z-index: 20;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.8s cubic-bezier(0.2, 0.8, 0.25, 1);
}
.riwaq-book-object.book-closed .right-page-shadow {
    opacity: 1;
}
.riwaq-book-object.book-opened .right-page-shadow {
    opacity: 0 !important;
    pointer-events: none !important;
}

/* ==========================================================================
   Left Leaf (The 3D Hinged Leaf):
   Interior Face = Left Page (Details, Synopsis, Actions)
   Exterior Face = Front Hardcover (Leather with gold frame)
   ========================================================================== */
.book-leaf-hinged.leaf-left {
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    transform-origin: right center;
    transform-style: preserve-3d;
    z-index: 25;
    transition: transform 1.05s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Closed state: rotated 180deg, folding directly over the right leaf */
.riwaq-book-object.book-closed .book-leaf-hinged.leaf-left {
    transform: rotateY(180deg);
}

/* Opened state: resting flat at 0deg on the left */
.riwaq-book-object.book-opened .book-leaf-hinged.leaf-left {
    transform: rotateY(0deg);
}

/* Leaf Faces */
.leaf-face {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* Inside Face: Left Page (Visible when book is open) */
.leaf-face.face-inside {
    transform: rotateY(0deg);
    z-index: 2;
}

/* Outside Face: Front Hardcover (Visible when book is closed) */
.leaf-face.face-outside {
    transform: rotateY(180deg);
    z-index: 1;
    background: #173D36;
    border-radius: 12px 4px 4px 12px;
    border: 3px solid #234E44;
    box-shadow: inset 0 0 35px rgba(0, 0, 0, 0.5), 0 16px 45px rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28px 24px;
    color: #FFFDF8;
    cursor: pointer;
    position: relative;
}

.leaf-face.face-outside.has-real-cover {
    padding: 0 !important;
    background: #0E2B26 !important;
}

.bmodal-face-real-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 9px 2px 2px 9px;
    z-index: 2;
    display: block;
}

.bmodal-face-crease-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        rgba(0, 0, 0, 0.55) 0%,
        rgba(0, 0, 0, 0.2) 5%,
        transparent 14%,
        transparent 88%,
        rgba(0, 0, 0, 0.25) 100%
    );
    border-radius: 9px 2px 2px 9px;
    pointer-events: none;
    z-index: 4;
}

/* Hardcover Front Frame Ornamentation (When no real cover image is uploaded) */
.cover-frame-gold {
    width: 100%;
    height: 100%;
    border: 2px solid rgba(195, 161, 93, 0.7);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 24px 18px;
    position: relative;
    background: radial-gradient(circle at center, rgba(255, 255, 255, 0.06) 0%, transparent 75%);
}

.cover-frame-gold:before {
    content: '';
    position: absolute;
    inset: 4px;
    border: 1px dashed rgba(195, 161, 93, 0.45);
    border-radius: 6px;
}

.cover-emblem {
    margin-bottom: 12px;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.3));
}

.flap-title {
    font-family: 'Noto Naskh Arabic', serif;
    font-size: 24px;
    color: #FFFDF8;
    margin: 6px 0 6px;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
    line-height: 1.35;
}

.flap-author {
    font-size: 13.5px;
    color: #D8CEB7;
    margin-bottom: 12px;
    font-weight: 500;
}

.cover-flap-divider {
    color: var(--gold);
    letter-spacing: 4px;
    margin: 6px 0 10px;
    font-size: 11px;
}

.cover-flap-brand {
    font-size: 11.5px;
    color: var(--gold);
    letter-spacing: 1.5px;
    border-top: 1px solid rgba(195, 161, 93, 0.4);
    padding-top: 8px;
    display: inline-block;
    width: 75%;
}

/* ==========================================================================
   Page Paper Styling (Both Right and Left Interior Pages)
   ========================================================================== */
.book-open-page {
    width: 100%;
    height: 100%;
    padding: 8px 12px 10px;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    position: relative;
    z-index: 5;
}

.book-open-page.page-right {
    padding-left: 18px;
}

.book-open-page.page-left {
    padding-right: 18px;
}

.page-paper {
    background: #FFFDF8;
    border-radius: 5px;
    height: 100%;
    padding: 16px 20px 14px;
    display: flex;
    flex-direction: column;
    border: 1px solid #EBE4D5;
    position: relative;
    box-sizing: border-box;
    overflow: hidden;
    z-index: 5;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
}

.page-right .page-paper {
    border-left: none;
    box-shadow: inset -14px 0 24px -10px rgba(0, 0, 0, 0.14), inset 0 0 35px rgba(220, 208, 185, 0.2);
}

.page-left .page-paper {
    border-right: none;
    box-shadow: inset 14px 0 24px -10px rgba(0, 0, 0, 0.14), inset 0 0 35px rgba(220, 208, 185, 0.2);
}

/* Classical Manuscript Inner Margin Framing Rule */
.manuscript-border-frame {
    position: absolute;
    inset: 8px;
    border: 1px solid rgba(195, 161, 93, 0.35);
    outline: 1px solid rgba(218, 207, 188, 0.45);
    outline-offset: -3px;
    border-radius: 4px;
    pointer-events: none;
    z-index: 4;
}

.corner-knot {
    position: absolute;
    font-size: 8px;
    color: var(--gold);
    line-height: 1;
    opacity: 0.8;
}

.knot-tl { top: 2px; left: 2px; }
.knot-tr { top: 2px; right: 2px; }
.knot-bl { bottom: 2px; left: 2px; }
.knot-br { bottom: 2px; right: 2px; }

/* Deep Central Spine Gutter Shadows */
.page-gutter-shadow {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 44px;
    pointer-events: none;
    z-index: 8;
}

.page-gutter-shadow.gutter-right {
    left: 0;
    background: linear-gradient(to right, rgba(14, 35, 28, 0.28) 0%, rgba(14, 35, 28, 0.08) 32%, transparent 100%);
}

.page-gutter-shadow.gutter-left {
    right: 0;
    background: linear-gradient(to left, rgba(14, 35, 28, 0.28) 0%, rgba(14, 35, 28, 0.08) 32%, transparent 100%);
}

/* Running Headers with Classical Page Numbers */
.manuscript-running-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    color: #8C8472;
    font-family: 'Noto Naskh Arabic', serif;
    padding-bottom: 6px;
    margin-bottom: 8px;
    border-bottom: 1px solid rgba(195, 161, 93, 0.28);
    position: relative;
    z-index: 5;
}

.manuscript-running-head .head-title {
    font-size: 10.5px;
    letter-spacing: 0.5px;
    color: #6C6656;
}

.manuscript-running-head .head-ornament {
    color: var(--gold);
    font-size: 12px;
}

.manuscript-running-head .manuscript-page-no {
    font-weight: 700;
    color: #9E7D38;
    font-size: 11.5px;
}

/* Interactive Dog-Ear Corner */
.page-dogear-corner {
    position: absolute;
    bottom: 0;
    width: 28px;
    height: 28px;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    transition: transform 0.2s ease;
}

.dogear-right { right: 0; }
.dogear-left { left: 0; }

.dogear-right .dogear-fold {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 20px 20px;
    border-color: transparent transparent #E4D8C4 transparent;
    box-shadow: -2px -2px 4px rgba(0, 0, 0, 0.12);
    transition: all 0.25s ease;
}

.dogear-right:hover .dogear-fold {
    border-width: 0 0 26px 26px;
    border-color: transparent transparent #D8C8AF transparent;
}

.dogear-left .dogear-fold {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 20px 0 0 20px;
    border-color: transparent transparent transparent #E4D8C4;
    box-shadow: 2px -2px 4px rgba(0, 0, 0, 0.12);
    transition: all 0.25s ease;
}

.dogear-left:hover .dogear-fold {
    border-width: 26px 0 0 26px;
    border-color: transparent transparent transparent #D8C8AF;
}

.dogear-hint {
    font-size: 10px;
    color: #9C917E;
    position: relative;
    z-index: 2;
    padding-bottom: 2px;
}

/* Interior Right Page Real Cover Display & Architectural Frontispiece */
.frontispiece-niche {
    position: relative;
    z-index: 5;
    margin: 4px auto 8px;
    padding: 8px 10px 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: radial-gradient(ellipse at 50% 60%, rgba(195, 161, 93, 0.12) 0%, rgba(245, 239, 226, 0.45) 55%, transparent 80%);
    border-radius: 120px 120px 8px 8px;
    border-top: 1px dashed rgba(195, 161, 93, 0.35);
}

.frontispiece-pedestal {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.cover-showcase {
    display: flex;
    justify-content: center;
    position: relative;
    z-index: 5;
    perspective: 800px;
}

.cover-showcase .cover {
    width: 114px;
    min-height: 162px;
    height: 162px;
    box-shadow: -10px 14px 24px rgba(14, 43, 38, 0.32), 0 2px 6px rgba(0, 0, 0, 0.15);
    border-radius: 3px 6px 6px 3px;
    position: relative;
    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.3s ease;
    transform: rotateY(-4deg) rotateX(2deg);
}

.cover-showcase .cover:hover {
    transform: rotateY(-1deg) translateY(-3px) scale(1.02);
    box-shadow: -12px 18px 28px rgba(14, 43, 38, 0.38), 0 4px 10px rgba(0, 0, 0, 0.2);
}

.frontispiece-pedestal-shadow {
    width: 95px;
    height: 10px;
    margin: -3px auto 0;
    background: radial-gradient(ellipse, rgba(14, 43, 38, 0.38) 0%, rgba(0, 0, 0, 0.12) 48%, transparent 75%);
    border-radius: 50%;
    filter: blur(1.5px);
}

.frontispiece-ribbon-tip {
    position: absolute;
    bottom: -8px;
    right: 22px;
    width: 13px;
    height: 18px;
    background: linear-gradient(135deg, #F3DF9A 0%, #C3A15D 60%, #8C6A21 100%);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 75%, 0 100%);
    z-index: 6;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.28);
}

.cover-sheen-line {
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 20%, rgba(255, 255, 255, 0.14) 45%, transparent 65%);
    pointer-events: none;
    border-radius: inherit;
}

.cover.has-real-cover {
    padding: 0 !important;
    overflow: hidden !important;
    background: #0E2B26 !important;
    border: none !important;
    box-shadow: -8px 12px 22px rgba(14, 43, 38, 0.3) !important;
}

.cover.has-real-cover::before {
    display: none !important;
}

.bmodal-real-cover-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
    display: block;
}

.bmodal-cover-typography {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 10px;
    color: #F5E6BD;
}

.cover-typo-knot {
    font-size: 11px;
    color: #E8D49E;
    margin-bottom: 4px;
}

.bmodal-cover-typography strong {
    font-size: 13px;
    line-height: 1.35;
    margin-bottom: 4px;
    font-family: 'Amiri', 'Noto Naskh Arabic', serif;
    font-weight: 700;
}

.bmodal-cover-typography small {
    font-size: 10.5px;
    opacity: 0.88;
}

.cover-typo-brand {
    font-size: 9px;
    color: #E8D49E;
    letter-spacing: 1px;
    margin-top: 8px;
    border-top: 1px solid rgba(232, 212, 158, 0.4);
    padding-top: 4px;
    width: 70%;
}

/* ==========================================================================
   Archival Specs Matrix (Right Page)
   ========================================================================== */
.heritage-specs-matrix {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px 12px;
    margin: 6px 0 8px;
    padding: 8px 12px;
    background: rgba(246, 241, 230, 0.75);
    border: 1px solid rgba(195, 161, 93, 0.28);
    border-radius: 6px;
    font-family: 'Noto Naskh Arabic', serif;
    position: relative;
    z-index: 5;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.03);
}

.spec-cell {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 11.5px;
    gap: 4px;
}

.spec-label {
    color: #7D735E;
    font-weight: 600;
    font-size: 11px;
}

.spec-val {
    font-weight: 700;
    color: #173D36;
    font-size: 11.5px;
}

.spec-val.tag-gold {
    color: #8C6A21;
    background: rgba(195, 161, 93, 0.2);
    padding: 1.5px 7px;
    border-radius: 4px;
    font-size: 11px;
    border: 1px solid rgba(195, 161, 93, 0.35);
}

.spec-val.highlight-green {
    color: #1A543B;
    background: rgba(26, 84, 59, 0.12);
    padding: 1.5px 7px;
    border-radius: 4px;
    font-size: 11px;
    border: 1px solid rgba(26, 84, 59, 0.25);
}

/* ==========================================================================
   Archival Ex-Libris Seal Box (Right Page)
   ========================================================================== */
.ex-libris-seal-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 12px;
    margin: 4px 0 8px;
    background: #FAF7F0;
    border: 1px dashed rgba(195, 161, 93, 0.5);
    border-radius: 6px;
    position: relative;
    z-index: 5;
}

.ex-libris-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #574F3C;
    font-weight: 600;
    font-size: 11px;
    font-family: 'Noto Naskh Arabic', serif;
}

.archive-code-stamp {
    font-family: 'Courier New', Courier, monospace;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 1px;
    color: #8C6A21;
    background: rgba(195, 161, 93, 0.18);
    padding: 2px 8px;
    border-radius: 4px;
    border: 1px solid rgba(195, 161, 93, 0.4);
}

/* ==========================================================================
   Epigraph / Literary Proverb (Right Page Bottom)
   ========================================================================== */
.page-sanctuary-quote {
    font-family: 'Amiri', 'Noto Naskh Arabic', serif;
    font-size: 12px;
    color: #5F6B60;
    text-align: center;
    margin-top: auto;
    padding-top: 8px;
    border-top: 1px dashed rgba(195, 161, 93, 0.35);
    position: relative;
    z-index: 5;
    line-height: 1.6;
    letter-spacing: 0.2px;
}

/* ==========================================================================
   Left Page Manuscript Typography & Elements
   ========================================================================== */
.manuscript-folio-header {
    position: relative;
    z-index: 5;
    margin-bottom: 4px;
}

.folio-eyebrow {
    display: block;
    font-size: 10px;
    font-weight: 700;
    color: #9E7D38;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
    font-family: 'Noto Naskh Arabic', serif;
}

.manuscript-work-title {
    font-family: 'Amiri', 'Noto Naskh Arabic', serif;
    font-size: 19px;
    font-weight: 800;
    color: #173D36;
    margin: 0 0 3px;
    line-height: 1.32;
    letter-spacing: -0.3px;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
}

.manuscript-author-line {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    color: #5D5443;
    font-family: 'Noto Naskh Arabic', serif;
}

.author-cat-text {
    font-weight: 600;
}

.page-divider-ornament {
    text-align: center;
    color: var(--gold);
    font-size: 12px;
    margin: 4px 0 7px;
    letter-spacing: 3px;
    position: relative;
    z-index: 5;
    opacity: 0.85;
}

/* Synopsis Container */
.manuscript-synopsis-container {
    position: relative;
    z-index: 5;
    margin-bottom: 6px;
}

.synopsis-label-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}

.synopsis-label-row h4 {
    margin: 0;
    font-size: 11.5px;
    font-weight: 700;
    color: #1A3E36;
    font-family: 'Noto Naskh Arabic', serif;
}

.book-synopsis-text {
    font-family: 'Noto Naskh Arabic', serif;
    font-size: 12.2px;
    line-height: 1.72;
    color: #423F36;
    max-height: 118px;
    overflow-y: auto;
    padding-left: 6px;
    margin: 0;
    text-align: justify;
}

.book-synopsis-text::-webkit-scrollbar {
    width: 4px;
}

.book-synopsis-text::-webkit-scrollbar-thumb {
    background: rgba(195, 161, 93, 0.4);
    border-radius: 4px;
}

/* Manuscript Thematic Strip */
.manuscript-themes-strip {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 6px 0;
    padding: 5px 0;
    border-top: 1px dotted rgba(195, 161, 93, 0.35);
    border-bottom: 1px dotted rgba(195, 161, 93, 0.35);
    flex-wrap: wrap;
    position: relative;
    z-index: 5;
}

.theme-label {
    font-size: 11px;
    font-weight: 700;
    color: #7D735E;
    font-family: 'Noto Naskh Arabic', serif;
}

.theme-chip {
    font-size: 10.5px;
    background: rgba(23, 61, 54, 0.07);
    color: #173D36;
    border: 1px solid rgba(23, 61, 54, 0.16);
    padding: 2px 8px;
    border-radius: 12px;
    font-weight: 600;
    font-family: 'Noto Naskh Arabic', serif;
    transition: all 0.2s ease;
}

.theme-chip:hover {
    background: rgba(23, 61, 54, 0.14);
    border-color: rgba(195, 161, 93, 0.5);
}

/* Sanctuary Charter Note */
.sanctuary-charter-note {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: linear-gradient(135deg, rgba(246, 242, 233, 0.95), rgba(255, 253, 248, 0.98));
    border-right: 3px solid #C3A15D;
    border-radius: 4px;
    font-size: 11px;
    line-height: 1.45;
    color: #554D3D;
    margin: 5px 0 8px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
    position: relative;
    z-index: 5;
    font-family: 'Noto Naskh Arabic', serif;
}

/* Royal Action Loan Button (Certificate CTA) */
.page-actions-bottom {
    position: relative;
    z-index: 5;
    margin-top: auto;
    padding-top: 6px;
}

.book-loan-royal-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 18px;
    background: linear-gradient(135deg, #173D36 0%, #1F5148 50%, #0E2B26 100%);
    color: #FFFDF8;
    border: 1px solid #C3A15D;
    border-radius: 8px;
    font-size: 13.5px;
    font-weight: 700;
    font-family: 'Noto Naskh Arabic', serif;
    cursor: pointer;
    box-shadow: 0 5px 16px rgba(14, 43, 38, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    position: relative;
    overflow: hidden;
    transition: all 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
    outline: 1px solid rgba(195, 161, 93, 0.45);
    outline-offset: -3px;
}

.book-loan-royal-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.18), transparent);
    transition: left 0.6s ease;
}

.book-loan-royal-btn:hover {
    transform: translateY(-2px);
    background: linear-gradient(135deg, #1C4A42 0%, #266358 50%, #143C35 100%);
    box-shadow: 0 8px 24px rgba(14, 43, 38, 0.42), 0 0 14px rgba(195, 161, 93, 0.32);
    color: #FFFDF8;
}

.book-loan-royal-btn:hover::before {
    left: 100%;
}

.book-loan-royal-btn .btn-royal-icon {
    width: 16px;
    height: 16px;
    color: #E8D49E;
    flex-shrink: 0;
}

.book-loan-royal-btn .btn-royal-text {
    flex-grow: 1;
    text-align: center;
    letter-spacing: 0.3px;
}

.book-loan-royal-btn .btn-royal-arrow {
    width: 15px;
    height: 15px;
    color: #E8D49E;
    flex-shrink: 0;
    transition: transform 0.25s ease;
}

.book-loan-royal-btn:hover .btn-royal-arrow {
    transform: translateX(-4px);
}

.page-footer-tag {
    font-size: 10.5px;
    color: #8C8775;
    text-align: center;
    margin-top: 6px;
    position: relative;
    z-index: 5;
    font-family: 'Noto Naskh Arabic', serif;
}



/* Responsive adjustment for Mobile screens */
@media (max-width: 768px) {
    .book-modal-stage {
        perspective: none;
        padding: 0;
    }
    .riwaq-book-object {
        height: auto;
        min-height: auto;
        transform: none !important;
        display: flex;
        flex-direction: column;
    }
    .book-center-spine,
    .book-ambient-shadow,
    .leaf-face.face-outside,
    .right-page-shadow,
    .book-hardcover-case,
    .pages-fore-edge,
    .pages-horizontal-edge,
    .page-sheet-underlay,
    .book-silk-headband {
        display: none !important;
    }
    .book-leaf-static.leaf-right,
    .book-leaf-hinged.leaf-left {
        position: static;
        width: 100%;
        height: auto;
        transform: none !important;
    }
    .leaf-face.face-inside {
        position: static;
        transform: none !important;
    }
    .book-open-page {
        padding: 8px;
    }
    .book-modal-close-btn {
        top: -15px;
        left: 0;
    }
}

/* ==========================================================================
   ADVANCED CULTURAL & INTERACTIVE FEATURES (رِواق المعرفة 2026)
   ========================================================================== */

/* --- 1. Live Cultural Ticker (شريط الأنشطة الحي) --- */
.cultural-ticker-container {
    display: flex;
    align-items: center;
    background: #0E2B26;
    background: linear-gradient(90deg, #0A211D 0%, #173D36 50%, #0A211D 100%);
    border-top: 1px solid rgba(195, 161, 93, 0.4);
    border-bottom: 1px solid rgba(195, 161, 93, 0.2);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
    margin-top: 36px;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    z-index: 10;
}

.ticker-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #081B18;
    color: #FFE2A3;
    padding: 14px 22px;
    font-size: 13px;
    font-weight: 700;
    border-left: 1px solid rgba(195, 161, 93, 0.35);
    flex-shrink: 0;
    z-index: 2;
    box-shadow: 4px 0 12px rgba(0, 0, 0, 0.2);
}

.live-pulse-dot {
    width: 9px;
    height: 9px;
    background: #2ECC71;
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(46, 204, 113, 0.7);
    animation: pulse-live 1.8s infinite;
}

@keyframes pulse-live {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(46, 204, 113, 0.7);
    }
    70% {
        transform: scale(1);
        box-shadow: 0 0 0 8px rgba(46, 204, 113, 0);
    }
    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(46, 204, 113, 0);
    }
}

.ticker-marquee-wrapper {
    flex: 1;
    overflow: hidden;
    position: relative;
    white-space: nowrap;
    mask-image: linear-gradient(90deg, transparent 0%, black 4%, black 96%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 4%, black 96%, transparent 100%);
}

.ticker-track {
    display: inline-flex;
    align-items: center;
    animation: ticker-scroll 42s linear infinite;
    gap: 28px;
    padding: 12px 0;
}

.ticker-track:hover {
    animation-play-state: paused;
}

@keyframes ticker-scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(50%);
    }
}

.ticker-item {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 13.5px;
    color: #F5F1E8;
    font-weight: 500;
}

.ticker-separator {
    color: #C3A15D;
    font-size: 11px;
    margin-right: 18px;
    opacity: 0.8;
}

/* --- 2. Gentle Nudge Banner (التنبيهات اللطيفة) --- */
.gentle-nudge-banner {
    display: flex;
    align-items: center;
    gap: 16px;
    background: #F5EFE4;
    border: 1px solid #DFD3BE;
    border-right: 5px solid var(--gold);
    border-radius: var(--radius);
    padding: 14px 20px;
    margin-bottom: 20px;
    box-shadow: 0 4px 16px rgba(23, 61, 54, 0.04);
}

.nudge-icon {
    width: 40px;
    height: 40px;
    background: #E8DCC4;
    color: var(--green);
    border-radius: 50%;
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

.nudge-text {
    flex: 1;
    min-width: 0;
}

.nudge-text strong {
    display: block;
    color: var(--green);
    font-size: 14.5px;
    margin-bottom: 2px;
}

.nudge-text span {
    font-size: 13px;
    color: #555042;
}

/* --- 3. Smart Session Pitch (اقتراح الجلسة الذكي) --- */
.smart-pitch-panel {
    background: #FAF8F2;
    border: 1px solid #E6DDC8;
    padding: 20px 24px;
    border-radius: var(--radius);
    margin-top: 20px;
}

.smart-pitch-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 14px;
}

.pitch-time-chips {
    display: flex;
    gap: 8px;
}

.pitch-chip {
    background: #EEE7D6;
    border: 1px solid #D8CBB2;
    color: #4A463B;
    border-radius: 20px;
    padding: 6px 14px;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.pitch-chip:hover {
    background: #E2D7C0;
    color: var(--ink);
}

.pitch-chip.active {
    background: var(--green);
    color: #FFFDF8;
    border-color: var(--green);
    box-shadow: 0 2px 8px rgba(23, 61, 54, 0.25);
}

.pitch-suggestion-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #FFFDF9;
    border: 1px solid #E4DAC4;
    padding: 12px 18px;
    border-radius: 10px;
    gap: 16px;
    flex-wrap: wrap;
}

.pitch-text {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13.5px;
    color: var(--ink);
    flex: 1;
    min-width: 240px;
}

/* --- 4. Quick Snap Note FAB (زر الخاطرة السريعة الثابت) --- */
.quick-snap-fab {
    position: fixed;
    bottom: 30px;
    left: 30px;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: linear-gradient(135deg, #D4BD83 0%, #B8964E 100%);
    color: #0E2B26;
    border: 2px solid #FFFDF8;
    box-shadow: 0 8px 24px rgba(184, 150, 78, 0.45);
    display: grid;
    place-items: center;
    cursor: pointer;
    z-index: 99;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.quick-snap-fab:hover {
    transform: scale(1.1) translateY(-3px);
    box-shadow: 0 12px 30px rgba(184, 150, 78, 0.6);
}

.quick-snap-fab i {
    width: 24px;
    height: 24px;
}

.fab-tooltip {
    position: absolute;
    right: 70px;
    background: #0E2B26;
    color: #FFE2A3;
    font-size: 12px;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 6px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transform: translateX(10px);
    transition: all 0.25s ease;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.quick-snap-fab:hover .fab-tooltip {
    opacity: 1;
    transform: translateX(0);
}

/* --- 5. Shareable Progress Card (بطاقة المسار السنوي) --- */
.shareable-card-frame {
    background: linear-gradient(145deg, #09211D 0%, #173D36 60%, #081B18 100%);
    border-radius: 16px;
    padding: 16px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
    position: relative;
    color: #F5F1E8;
}

.card-inner-border {
    border: 2px solid rgba(195, 161, 93, 0.6);
    border-radius: 12px;
    padding: 24px;
    background: radial-gradient(circle at center, rgba(23, 61, 54, 0.4) 0%, rgba(8, 27, 24, 0.8) 100%);
    position: relative;
}

.card-brand-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(195, 161, 93, 0.25);
    padding-bottom: 12px;
    margin-bottom: 18px;
}

.card-brand-pill {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #FFE2A3;
    font-size: 13px;
    font-weight: 700;
}

.card-tag-year {
    background: rgba(195, 161, 93, 0.2);
    color: #FFE2A3;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 11px;
    border: 1px solid rgba(195, 161, 93, 0.4);
}

.card-user-profile {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 22px;
}

.card-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #D4BD83;
    color: #173D36;
    font-size: 22px;
    font-weight: 700;
    display: grid;
    place-items: center;
    box-shadow: 0 4px 14px rgba(0,0,0,0.3);
}

.card-user-name {
    margin: 0 0 2px;
    font-size: 20px;
    color: #FFFDF8;
}

.card-user-role {
    font-size: 12px;
    color: rgba(245, 241, 232, 0.7);
}

.card-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 20px;
}

.card-stat-box {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(195, 161, 93, 0.35);
    border-radius: 10px;
    padding: 14px 10px;
    text-align: center;
}

.card-stat-number {
    display: block;
    font-size: 22px;
    font-weight: 700;
    color: #FFE2A3;
    font-family: 'Noto Naskh Arabic', serif;
    margin-bottom: 4px;
}

.card-stat-label {
    font-size: 11px;
    color: rgba(245, 241, 232, 0.75);
    line-height: 1.3;
}

.card-quote-banner {
    background: rgba(195, 161, 93, 0.1);
    border-right: 3px solid #C3A15D;
    padding: 10px 14px;
    border-radius: 6px;
    text-align: center;
}

.card-quote-text {
    font-size: 12.5px;
    font-style: italic;
    color: #F5E6BD;
    margin: 0 0 4px;
}

.card-watermark {
    font-size: 10px;
    color: rgba(245, 241, 232, 0.5);
    display: block;
}

/* --- 6. Physical Copy Passport (جواز سفر النسخة الورقية) --- */
.passport-header-card {
    background: #EFE8D8;
    border: 1px solid #D8CBB2;
    border-radius: 10px;
    padding: 14px;
}

.passport-code {
    background: var(--green);
    color: #FFE2A3;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-family: monospace;
    letter-spacing: 1px;
}

.passport-stats-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed #D0C3A8;
    text-align: center;
}

.passport-stat .p-num {
    display: block;
    font-weight: 700;
    font-size: 17px;
    color: var(--green);
}

.passport-stat .p-lbl {
    font-size: 11px;
    color: #6A6352;
}

.passport-notes-list {
    max-height: 150px;
    overflow-y: auto;
    display: grid;
    gap: 8px;
    padding-left: 4px;
}

.passport-note-item {
    background: #FFFDF8;
    border: 1px solid #E8DFCB;
    border-right: 3px solid var(--gold);
    border-radius: 6px;
    padding: 8px 12px;
}

.passport-stamp-mini {
    background: #EAE3D2;
    color: #79663D;
    font-size: 9.5px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 4px;
    display: inline-block;
    margin-bottom: 2px;
}

.note-quote {
    margin: 0;
    font-size: 12.5px;
    color: #3B3830;
    line-height: 1.5;
}

/* --- 7. QR Handshake Box (نافذة رمز التسليم) --- */
.qr-visual-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 16px 0;
}

.qr-token-text {
    background: #173D36;
    color: #FFE2A3;
    padding: 6px 18px;
    border-radius: 20px;
    font-family: monospace;
    font-size: 15px;
    letter-spacing: 2px;
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(23,61,54,0.15);
}

/* --- 8. Community Highlights (معجم أفكار المجلس) --- */
.highlights-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 14px;
}

.highlight-card {
    background: #FFFDF8;
    border: 1px solid #E6DDC8;
    border-radius: 10px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    position: relative;
    box-shadow: 0 2px 8px rgba(0,0,0,0.02);
}

.quote-symbol {
    font-family: 'Noto Naskh Arabic', serif;
    font-size: 28px;
    color: var(--gold);
    line-height: 1;
    margin-bottom: -6px;
}

.highlight-text {
    font-size: 13.5px;
    line-height: 1.7;
    color: var(--ink);
    margin: 0 0 14px;
    flex: 1;
}

.highlight-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 10px;
    border-top: 1px solid #EFE8D8;
}

.highlight-user-avatar {
    width: 22px;
    height: 22px;
    background: var(--green);
    color: #FFFDF8;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 11px;
    font-weight: 700;
}

/* --- 9. Silent Reading Room (غرفة القراءة الصامتة الحية) --- */
.silent-room-panel {
    background: #FAF8F2;
    border: 1px solid #E4DAC4;
    padding: 22px;
    border-radius: var(--radius);
}

.silent-room-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid #E8DFCB;
    margin-bottom: 20px;
}

.live-beacon-pulse {
    position: relative;
    width: 16px;
    height: 16px;
    display: grid;
    place-items: center;
}

.pulse-ring {
    position: absolute;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: rgba(46, 204, 113, 0.4);
    animation: beacon-ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.pulse-dot {
    position: relative;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #27AE60;
}

@keyframes beacon-ping {
    75%, 100% {
        transform: scale(2.2);
        opacity: 0;
    }
}

.presence-avatars-box {
    display: flex;
    align-items: center;
    gap: 12px;
}

.presence-stack {
    display: flex;
    direction: ltr;
}

.p-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #173D36;
    color: #FFE2A3;
    display: grid;
    place-items: center;
    font-size: 11px;
    font-weight: 700;
    border: 2px solid #FAF8F2;
    margin-left: -8px;
}

.p-avatar.more {
    background: #C3A15D;
    color: #173D36;
}

.silent-room-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

@media (max-width: 768px) {
    .silent-room-body {
        grid-template-columns: 1fr;
    }
}

.silent-timer-box {
    background: #FFFDF8;
    border: 1px solid #E5DCC6;
    border-radius: 12px;
    padding: 20px;
    text-align: center;
}

.silent-phase-switcher {
    display: inline-flex;
    background: #EFE7D4;
    border-radius: 20px;
    padding: 3px;
    margin-bottom: 16px;
    gap: 4px;
}

.phase-btn {
    border: none;
    background: transparent;
    padding: 6px 14px;
    border-radius: 16px;
    font-size: 12px;
    font-weight: 600;
    color: #555042;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s;
}

.phase-btn.active {
    background: var(--green);
    color: #FFFDF8;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

.silent-digits {
    font-family: 'Noto Naskh Arabic', serif;
    font-size: 52px;
    font-weight: 700;
    color: var(--green);
    line-height: 1.1;
    margin: 8px 0;
}

.silent-chat-box {
    background: #FFFDF8;
    border: 1px solid #E5DCC6;
    border-radius: 12px;
    padding: 16px;
    display: flex;
    flex-direction: column;
}

/* --- 10. Team vs Team Battle (تحديات الفرق) --- */
.team-battle-scoreboard {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;
    background: #FFFDF8;
    border: 1px solid #E2D9C5;
    border-radius: 12px;
    padding: 16px;
}

@media (max-width: 600px) {
    .team-battle-scoreboard {
        grid-template-columns: 1fr;
    }
}

.team-score-card {
    padding: 6px;
}

.team-vs-pill {
    background: #0E2B26;
    color: #FFE2A3;
    font-size: 11px;
    font-weight: 800;
    padding: 6px 10px;
    border-radius: 20px;
    border: 1px solid var(--gold);
    text-align: center;
}

.badges-showcase-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px;
}

.badge-item-card {
    background: #FFFDF8;
    border: 1px solid #E5DCC6;
    border-radius: 10px;
    padding: 16px;
    text-align: center;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}

.badge-item-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 18px rgba(0,0,0,0.06);
    border-color: var(--gold);
}

.badge-emblem {
    font-size: 32px;
    margin-bottom: 6px;
}

.badge-item-card strong {
    display: block;
    color: var(--green);
    font-size: 14px;
    margin-bottom: 2px;
}

.tag-verified {
    display: inline-block;
    background: #E1ECE2;
    color: #235738;
    font-size: 10.5px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 10px;
    margin-top: 8px;
}

/* --- 11. Parchment Certificate (الوثيقة والشهادة الشرفية) --- */
.parchment-cert {
    background: #FAF6ED;
    border: 2px solid #C3A15D;
    padding: 8px;
    border-radius: 8px;
    box-shadow: inset 0 0 40px rgba(195, 161, 93, 0.15);
}

.cert-gold-border {
    border: 1px solid #C3A15D;
    padding: 28px;
    text-align: center;
    position: relative;
}

.cert-brand-seal {
    width: 52px;
    height: 52px;
    margin: 0 auto 8px;
    border: 2px solid #C3A15D;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #173D36;
}

.cert-eyebrow {
    font-size: 12px;
    color: #8C7B58;
    letter-spacing: 1px;
    display: block;
}

.cert-title {
    font-family: 'Noto Naskh Arabic', serif;
    font-size: 28px;
    color: #173D36;
    margin: 6px 0 16px;
    letter-spacing: 0.5px;
}

.cert-intro {
    font-size: 13.5px;
    color: #555042;
    margin-bottom: 6px;
}

.cert-recipient-name {
    font-family: 'Noto Naskh Arabic', serif;
    font-size: 32px;
    color: #173D36;
    margin: 4px 0 10px;
    text-decoration: underline;
    text-decoration-color: #C3A15D;
    text-underline-offset: 8px;
}

.cert-description {
    font-size: 14px;
    color: #4A4538;
    line-height: 1.8;
}

.cert-wisdom {
    font-style: italic;
    font-size: 13.5px;
    color: #79663D;
    margin: 18px auto 20px;
    max-width: 480px;
    line-height: 1.7;
}

.cert-footer-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    border-top: 1px solid #DDD1B8;
    padding-top: 14px;
    margin-top: 14px;
    text-align: right;
    font-size: 11.5px;
    color: #5A5445;
}

.cert-official-seal {
    width: 64px;
    height: 64px;
    border: 2px dashed #C3A15D;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: #8C784D;
    font-weight: 700;
}



/* ==========================================================================
   MICRO-ANIMATIONS & INTERACTIVE PHYSICS SUITE (رِواق المعرفة 2026)
   ========================================================================== */

/* --- 1. Architectural Arch Gate Reveal & Parallax Floating Books --- */
.parallax-books-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}

.floating-book {
    position: absolute;
    top: var(--top, 20%);
    left: var(--left, 10%);
    transform: rotate(var(--rot, 0deg));
    display: flex;
    box-shadow: 0 16px 36px rgba(14, 43, 38, 0.16);
    border-radius: 3px 8px 8px 3px;
    opacity: 0.35;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s;
    animation: gentleFloat 8s ease-in-out infinite alternate;
}

.floating-book:hover {
    opacity: 0.8;
}

.floating-book .fb-spine {
    width: 8px;
    background: rgba(0, 0, 0, 0.25);
    border-radius: 3px 0 0 3px;
}

.floating-book .fb-cover {
    background: var(--c, #315749);
    color: #FFE2A3;
    padding: 14px 10px;
    font-size: 11px;
    font-weight: 700;
    font-family: 'Noto Naskh Arabic', serif;
    letter-spacing: 0.5px;
    border-radius: 0 6px 6px 0;
    min-width: 50px;
    text-align: center;
}

@keyframes gentleFloat {
    0% {
        transform: rotate(var(--rot, 0deg)) translateY(0px);
    }
    100% {
        transform: rotate(calc(var(--rot, 0deg) + 4deg)) translateY(-18px);
    }
}

/* Arch Scene & Gate Light Shimmer Reveal */
.arch-scene {
    position: relative;
    overflow: hidden;
}

.arch-reveal-active .arch-gate-light-sweep {
    position: absolute;
    top: 0;
    left: -150%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 235, 185, 0.45) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    transform: skewX(-25deg);
    animation: archLightSweep 3.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    pointer-events: none;
    z-index: 5;
}

@keyframes archLightSweep {
    0% {
        left: -150%;
        opacity: 0;
    }
    30% {
        opacity: 1;
    }
    100% {
        left: 200%;
        opacity: 0;
    }
}

/* Staggered Word Reveal for Arch Quote */
.stagger-word {
    display: inline-block;
    opacity: 0;
    transform: translateY(12px) scale(0.96);
    animation: wordReveal 0.75s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    animation-delay: calc(var(--w-i, 1) * 0.18s + 0.4s);
}

@keyframes wordReveal {
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* State Transition Morphing */
.auth-state-morph-container {
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.morph-btn-auth, .morph-btn-guest {
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s, background-color 0.3s;
}

.morph-btn-auth:hover, .morph-btn-guest:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 8px 24px rgba(23, 61, 54, 0.25);
}

/* --- 2. Interactive 3D Book Spine & Tilt & Liquid Progress Wave --- */
.cover-3d-stage {
    perspective: 1000px;
    display: inline-block;
    position: relative;
    user-select: none;
}

.cover-3d-tilt-box {
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.12s ease-out;
    box-shadow: 0 16px 36px rgba(14, 43, 38, 0.25);
    border-radius: 4px 10px 10px 4px;
}

.cover-3d-tilt-box .book-spine-side {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 14px;
    background: rgba(0, 0, 0, 0.35);
    border-radius: 0 10px 10px 0;
    pointer-events: none;
}

.cover-3d-tilt-box .spine-lines {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        to bottom,
        transparent,
        transparent 16px,
        rgba(255, 226, 163, 0.15) 16px,
        rgba(255, 226, 163, 0.15) 18px
    );
}

#bookDynamicShadow {
    position: absolute;
    bottom: -15px;
    left: 10%;
    right: 10%;
    height: 20px;
    background: radial-gradient(ellipse at center, rgba(14, 43, 38, 0.45) 0%, rgba(0,0,0,0) 75%);
    border-radius: 50%;
    pointer-events: none;
    transition: transform 0.15s ease-out, opacity 0.15s ease-out;
}

/* Liquid Progress Bar with Undulating Wave */
.liquid-progress {
    position: relative;
    overflow: hidden;
    background: #EBE5D6;
    border-radius: 20px;
    height: 12px;
}

.liquid-progress > span {
    position: relative;
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #173D36, #245E50);
    border-radius: 20px;
    overflow: hidden;
    transition: width 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.liquid-wave-effect {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: repeating-linear-gradient(
        -45deg,
        rgba(255, 255, 255, 0.2) 0,
        rgba(255, 255, 255, 0.2) 12px,
        transparent 12px,
        transparent 24px
    );
    background-size: 40px 100%;
    animation: liquidWaveMove 2.5s linear infinite;
    border-radius: 20px;
}

@keyframes liquidWaveMove {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 40px 0;
    }
}

/* Knowledge Footprint Radar Glow & Path Drawing */
.radar-svg-canvas path,
.radar-svg-canvas polygon {
    transition: all 0.4s ease;
}

.radar-data-polygon {
    stroke-dasharray: 600;
    stroke-dashoffset: 600;
    animation: drawRadarPath 1.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes drawRadarPath {
    to {
        stroke-dashoffset: 0;
    }
}

.highest-apex {
    animation: apexGlowPulse 2s ease-in-out infinite;
}

@keyframes apexGlowPulse {
    0%, 100% {
        r: 6;
        fill: #C3A15D;
        filter: drop-shadow(0 0 3px rgba(195, 161, 93, 0.4));
    }
    50% {
        r: 8.5;
        fill: #FFE2A3;
        filter: drop-shadow(0 0 10px rgba(195, 161, 93, 0.9));
    }
}

/* --- 3. Explore Stagger Flip & Search Ripple Aura --- */
.book-card-stagger-flip {
    animation: staggerCardFlip 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
    animation-delay: var(--stagger-delay, 0s);
}

@keyframes staggerCardFlip {
    0% {
        opacity: 0;
        transform: translateY(24px) perspective(800px) rotateY(-8deg);
    }
    100% {
        opacity: 1;
        transform: translateY(0) perspective(800px) rotateY(0deg);
    }
}

.search-input-container {
    position: relative;
    display: block;
}

.search-pulse-input:focus {
    box-shadow: 0 0 0 4px rgba(195, 161, 93, 0.28), 0 6px 18px rgba(23, 61, 54, 0.08);
    border-color: var(--gold);
}

.search-ripple-aura {
    position: absolute;
    inset: -3px;
    border-radius: 12px;
    border: 2px solid var(--gold);
    pointer-events: none;
    opacity: 0;
    transform: scale(0.98);
}

.search-pulse-input:focus ~ .search-ripple-aura {
    animation: searchRipplePing 1.2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

@keyframes searchRipplePing {
    0% {
        opacity: 0.7;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(1.05);
    }
}

/* --- 4. Libraries: Status Badge Pulse & Laser Shimmer & Spring Card --- */
.status-badge-pulse {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background-color 0.4s ease, color 0.4s ease, box-shadow 0.4s ease;
}

.status-badge-pulse.status-available {
    background: #E1ECE2;
    color: #235738;
    animation: pulseAvailable 2.4s ease-in-out infinite;
}

@keyframes pulseAvailable {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(35, 87, 56, 0.3);
    }
    50% {
        box-shadow: 0 0 0 6px rgba(35, 87, 56, 0);
    }
}

.status-badge-pulse.status-reserved {
    background: #FFF3D6;
    color: #785419;
    animation: pulseReserved 2.2s ease-in-out infinite;
}

@keyframes pulseReserved {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(195, 161, 93, 0.35);
    }
    50% {
        box-shadow: 0 0 0 6px rgba(195, 161, 93, 0);
    }
}

.status-badge-pulse.status-borrowed {
    background: #EDE6D7;
    color: #555042;
}

/* Barcode & QR Laser Shimmer Sweep */
.barcode-laser-box {
    position: relative;
    overflow: hidden;
    display: inline-block;
    border-radius: 6px;
}

.barcode-laser-sweep {
    position: absolute;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, rgba(195,161,93,0) 0%, #C3A15D 50%, rgba(195,161,93,0) 100%);
    box-shadow: 0 0 8px #C3A15D, 0 0 14px #FFE2A3;
    animation: laserScanSweep 2.2s ease-in-out infinite;
    pointer-events: none;
    z-index: 10;
}

@keyframes laserScanSweep {
    0% {
        top: 2%;
        opacity: 0.1;
    }
    15% {
        opacity: 1;
    }
    85% {
        opacity: 1;
    }
    100% {
        top: 96%;
        opacity: 0.1;
    }
}

/* Loan Request Card Spring Slide-In */
.loan-card-spring {
    animation: loanSpringEntry 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes loanSpringEntry {
    0% {
        opacity: 0;
        transform: translateX(32px) scale(0.97);
    }
    70% {
        transform: translateX(-4px) scale(1.008);
    }
    100% {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

/* --- 5. Reading: Breath Stopwatch Pulse & Timeline Snap & Confetti --- */
.stopwatch-box {
    position: relative;
    padding: 24px;
    background: #FFFDF8;
    border: 1px solid #E5DCC6;
    border-radius: 16px;
    text-align: center;
    margin-bottom: 20px;
    overflow: hidden;
}

.breath-focus-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 170px;
    height: 170px;
    border-radius: 50%;
    border: 2px solid rgba(195, 161, 93, 0.3);
    transform: translate(-50%, -50%) scale(1);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.stopwatch-box.active-breathing .breath-focus-ring {
    opacity: 1;
    animation: breathMeditationPulse 4s ease-in-out infinite;
}

@keyframes breathMeditationPulse {
    0% {
        transform: translate(-50%, -50%) scale(0.92);
        border-color: rgba(195, 161, 93, 0.25);
        box-shadow: 0 0 0 0 rgba(195, 161, 93, 0.2);
    }
    50% {
        transform: translate(-50%, -50%) scale(1.15);
        border-color: rgba(35, 87, 56, 0.5);
        box-shadow: 0 0 28px 8px rgba(195, 161, 93, 0.25);
    }
    100% {
        transform: translate(-50%, -50%) scale(0.92);
        border-color: rgba(195, 161, 93, 0.25);
        box-shadow: 0 0 0 0 rgba(195, 161, 93, 0.2);
    }
}

/* Timeline Item Paper Drop Elastic Snap */
.timeline-item-snap {
    animation: paperDropSnap 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes paperDropSnap {
    0% {
        opacity: 0;
        transform: translateY(-20px) rotate(-1deg);
    }
    70% {
        transform: translateY(3px) rotate(0.4deg);
    }
    100% {
        opacity: 1;
        transform: translateY(0) rotate(0deg);
    }
}

/* Points & Badges Celebration Burst Display */
.celebration-counter-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.5);
    background: #173D36;
    color: #FFE2A3;
    padding: 24px 38px;
    border-radius: 20px;
    border: 2px solid #C3A15D;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
    z-index: 999999;
    text-align: center;
    pointer-events: none;
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.celebration-counter-popup.show {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

/* --- 6. Communities: Spoiler Blur Ink Reveal & Elastic Poll & 3D Join Flip --- */
.spoiler-blur {
    filter: blur(6px);
    background: rgba(23, 61, 54, 0.08);
    border-radius: 4px;
    padding: 2px 6px;
    cursor: pointer;
    user-select: none;
    transition: filter 0.55s cubic-bezier(0.16, 1, 0.3, 1), background 0.4s;
    display: inline-block;
    position: relative;
}

.spoiler-blur::after {
    content: ' [انقر لكشف الحرق 👁️]';
    font-size: 11px;
    color: var(--gold);
    font-weight: 700;
}

.spoiler-blur.revealed {
    filter: blur(0);
    background: transparent;
    user-select: auto;
}

.spoiler-blur.revealed::after {
    content: '';
}

/* Elastic Voting Percentage Fill */
.poll-bar-container {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    background: #EFE8D8;
    height: 10px;
    margin-top: 6px;
}

.poll-option-elastic-bar {
    height: 100%;
    background: linear-gradient(90deg, #173D36, #327564);
    border-radius: 8px;
    transition: width 0.75s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* 3D Join Community Badge Flip */
.join-flipper-wrapper {
    perspective: 800px;
    display: inline-block;
}

.join-flipper-card {
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.65s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.join-flipper-card.flipped {
    transform: rotateY(180deg);
}

.join-front, .join-back {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.join-back {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: rotateY(180deg);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: #173D36;
    color: #FFE2A3;
    border: 1px solid var(--gold);
    font-weight: 700;
    font-size: 13px;
    box-shadow: 0 4px 14px rgba(23, 61, 54, 0.25);
    padding: 0 16px;
}

/* --- 7. Calendar Day Expansion & Quiet Hours Night Mode Fade --- */
.calendar-day-expandable {
    cursor: pointer;
    transition: transform 0.2s, background-color 0.2s, box-shadow 0.2s;
    position: relative;
}

.calendar-day-expandable:hover {
    transform: translateY(-2px) scale(1.08);
    box-shadow: 0 4px 12px rgba(23, 61, 54, 0.15);
    z-index: 4;
}

.calendar-event-drawer {
    background: #FFFDF8;
    border: 2px solid var(--gold);
    border-radius: 12px;
    padding: 16px;
    margin-top: 14px;
    animation: drawerSlideDown 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    box-shadow: 0 8px 24px rgba(14, 43, 38, 0.08);
}

@keyframes drawerSlideDown {
    0% {
        opacity: 0;
        transform: translateY(-10px) scale(0.98);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Quiet Hours Night Mode Ambient Fade */
.quiet-hours-night-fade {
    background: #0E2B26 !important;
    color: #E7E2D5 !important;
    border-color: #204C42 !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
    transition: all 0.5s ease-in-out;
}

.quiet-hours-night-fade .muted {
    color: #A3B5AE !important;
}

.glowing-crescent {
    display: inline-flex;
    align-items: center;
    color: #FFE2A3;
    animation: crescentMoonGlow 2.8s ease-in-out infinite;
}

@keyframes crescentMoonGlow {
    0%, 100% {
        filter: drop-shadow(0 0 3px rgba(255, 226, 163, 0.4));
        transform: scale(1);
    }
    50% {
        filter: drop-shadow(0 0 12px rgba(255, 226, 163, 0.9));
        transform: scale(1.08);
    }
}

/* ==========================================================================
   ENHANCED HOME DASHBOARD (مساحة القارئ الفاخرة)
   ========================================================================== */

/* 1. Sanctuary Header */
.home-sanctuary-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    background: linear-gradient(135deg, #FFFDF8 0%, #F8F4EA 100%);
    border: 1px solid #E6DDC8;
    border-radius: 16px;
    padding: 24px 28px;
    margin-bottom: 20px;
    box-shadow: 0 4px 20px rgba(23, 61, 54, 0.04);
    position: relative;
    overflow: hidden;
}

.home-sanctuary-header::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 6px;
    height: 100%;
    background: linear-gradient(180deg, var(--gold), #967535);
}

.date-capsule {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(195, 161, 93, 0.12);
    border: 1px solid rgba(195, 161, 93, 0.35);
    color: #8C6D2C;
    padding: 4px 14px;
    border-radius: 20px;
    font-size: 12.5px;
    font-weight: 600;
    margin-bottom: 8px;
}

.capsule-sep {
    opacity: 0.5;
}

.capsule-sanctuary {
    color: var(--green);
}

.greeting-title {
    font-family: 'Noto Naskh Arabic', serif;
    font-size: 28px;
    font-weight: 700;
    color: var(--ink);
    margin: 4px 0 6px;
    line-height: 1.3;
}

.gold-sparkle {
    color: var(--gold);
    display: inline-block;
    animation: sparkleSpin 4s ease-in-out infinite;
}

@keyframes sparkleSpin {
    0%, 100% { transform: scale(1) rotate(0deg); }
    50% { transform: scale(1.2) rotate(18deg); }
}

.greeting-subtitle {
    font-size: 14px;
    color: #6A6352;
}

.header-quick-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-shrink: 0;
}

.quick-action-btn {
    box-shadow: 0 4px 12px rgba(23, 61, 54, 0.12);
}

/* 2. Pulse Metrics Ribbon (4 Cards) */
.pulse-metrics-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 22px;
}

.pulse-metric-tile {
    background: #FFFDF8;
    border: 1px solid #E6DDC8;
    border-radius: 14px;
    padding: 16px 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.pulse-metric-tile:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(23, 61, 54, 0.08);
}

.tile-icon-box {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.tile-icon-box svg {
    width: 22px;
    height: 22px;
}

.tile-flame {
    background: rgba(220, 118, 51, 0.12);
    color: #DC7633;
}

.tile-pages {
    background: rgba(35, 87, 56, 0.12);
    color: var(--green);
}

.tile-points {
    background: rgba(195, 161, 93, 0.15);
    color: #B5934C;
}

.tile-trophy {
    background: rgba(160, 102, 60, 0.12);
    color: #A0663C;
}

.tile-content {
    min-width: 0;
}

.tile-value {
    font-family: 'Noto Naskh Arabic', serif;
    font-size: 19px;
    font-weight: 700;
    color: var(--ink);
    line-height: 1.25;
}

.tile-label {
    font-size: 12px;
    color: #79715E;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 3. Enhanced Current Book Hero Card */
.current-book-hero-card {
    display: grid;
    grid-template-columns: 160px minmax(0, 1fr);
    gap: 32px;
    padding: 30px;
    background: #FFFDF8;
    border: 1px solid #DFD5C2;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(23, 61, 54, 0.05);
    position: relative;
    overflow: hidden;
    margin-bottom: 20px;
}

.current-book-hero-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(195, 161, 93, 0.07) 0%, transparent 70%);
    pointer-events: none;
}

.hero-cover-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.book-shelf-ledge {
    width: 140px;
    height: 8px;
    background: linear-gradient(180deg, #D6CAB5, #B8A78F);
    border-radius: 4px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    margin-top: 4px;
}

.book-inspect-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #EFE9DC;
    border: 1px solid #D8CBB2;
    color: var(--green);
    font-size: 11.5px;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.book-inspect-pill:hover {
    background: var(--green);
    color: #FFFDF8;
    border-color: var(--green);
}

.hero-details-column {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.hero-tags-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.hero-cat-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(195, 161, 93, 0.14);
    color: #8C6D2C;
    border: 1px solid rgba(195, 161, 93, 0.4);
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 11.5px;
    font-weight: 600;
}

.hero-status-pill {
    background: rgba(35, 87, 56, 0.1);
    color: var(--green);
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 11.5px;
    font-weight: 600;
}

.hero-book-title {
    font-family: 'Noto Naskh Arabic', serif;
    font-size: 32px;
    font-weight: 700;
    color: var(--ink);
    margin: 2px 0 6px;
    line-height: 1.3;
}

.hero-book-author {
    font-size: 14.5px;
    color: #645D4C;
    margin-bottom: 16px;
}

.hero-progress-box {
    background: #F7F3E9;
    border: 1px solid #E4DAC4;
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 18px;
}

.progress-labels-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.pages-count-text {
    font-size: 13.5px;
    color: #4B4638;
}

.current-pg-highlight {
    color: var(--green);
    font-size: 15px;
}

.pct-badge-highlight {
    background: var(--green);
    color: #FFFDF8;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 12.5px;
    font-weight: 700;
}

.progress-insights-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    font-size: 12px;
    color: #726A57;
    flex-wrap: wrap;
}

.insight-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.insight-dot {
    opacity: 0.4;
}

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

.hero-primary-btn {
    box-shadow: 0 4px 14px rgba(23, 61, 54, 0.2);
    font-weight: 600;
}

/* 4. Enhanced Community Question & Quote */
.thought-sanctuary-card {
    background: linear-gradient(135deg, #FFFDF8 0%, #F9F5EC 100%);
    border: 1px solid #E4D8BF;
    border-radius: var(--radius);
    padding: 24px;
    position: relative;
    overflow: hidden;
}

.thought-sanctuary-card::before {
    content: '❝';
    position: absolute;
    top: -10px;
    left: 14px;
    font-size: 72px;
    color: rgba(195, 161, 93, 0.15);
    font-family: serif;
    pointer-events: none;
    line-height: 1;
}

.thought-quote-text {
    font-family: 'Noto Naskh Arabic', serif;
    font-size: 22px;
    color: var(--green);
    line-height: 1.6;
    margin: 12px 0 16px;
    position: relative;
    z-index: 2;
}

/* Responsive adjustments */
@media (max-width: 900px) {
    .pulse-metrics-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .current-book-hero-card {
        grid-template-columns: 1fr;
        gap: 20px;
        text-align: center;
    }
    .hero-cover-column {
        margin: 0 auto;
    }
    .hero-tags-row {
        justify-content: center;
    }
    .hero-action-buttons {
        justify-content: center;
    }
    .home-sanctuary-header {
        flex-direction: column;
        align-items: stretch;
    }
    .header-quick-actions {
        justify-content: stretch;
    }
    .header-quick-actions .quick-action-btn {
        flex: 1;
    }
}

@media (max-width: 540px) {
    .pulse-metrics-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   REFINED GOAL & KNOWLEDGE FOOTPRINT TWIN CARDS
   ========================================================================== */

.card-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid #ECE4D4;
}

.card-title-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

.icon-avatar {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.icon-avatar.avatar-green {
    background: rgba(35, 87, 56, 0.12);
    color: var(--green);
}

.icon-avatar.avatar-gold {
    background: rgba(195, 161, 93, 0.16);
    color: #927233;
}

.card-heading {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    color: var(--ink);
    line-height: 1.25;
}

.card-subheading {
    font-size: 11.5px;
    color: #79715E;
    margin-top: 2px;
}

/* --- Goal Sanctuary Card --- */
.goal-sanctuary-card,
.footprint-sanctuary-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: #FFFDF9;
    border: 1px solid #E4DAC4;
    border-radius: 16px;
    padding: 22px 24px;
    box-shadow: 0 4px 16px rgba(23, 61, 54, 0.04);
}

.goal-showcase-box {
    background: #F8F4EC;
    border: 1px solid #E8DFCC;
    border-radius: 14px;
    padding: 16px 18px;
    margin-bottom: 14px;
}

.goal-main-stat {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    flex-wrap: wrap;
    gap: 10px;
}

.goal-number-combo {
    display: flex;
    align-items: center;
    gap: 12px;
}

.goal-finished-number {
    font-size: 38px;
    font-family: 'Noto Naskh Arabic', serif;
    font-weight: 700;
    color: var(--green);
    line-height: 1;
}

.goal-number-details {
    display: flex;
    flex-direction: column;
}

.goal-unit-text {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--ink);
}

.goal-total-text {
    font-size: 12px;
    color: #726A58;
}

.goal-status-badge span {
    font-size: 11.5px;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
}

.badge-completed {
    background: rgba(35, 87, 56, 0.15);
    color: var(--green);
    border: 1px solid rgba(35, 87, 56, 0.3);
}

.badge-on-track {
    background: rgba(195, 161, 93, 0.16);
    color: #8C6D2C;
    border: 1px solid rgba(195, 161, 93, 0.4);
}

.badge-in-progress {
    background: rgba(100, 112, 92, 0.12);
    color: #55624E;
    border: 1px solid rgba(100, 112, 92, 0.25);
}

.goal-progress-wrapper {
    margin-bottom: 14px;
}

.progress-track-labels {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11.5px;
    color: #79715E;
    margin-bottom: 6px;
}

.progress-pct-badge {
    background: var(--green);
    color: #FFFDF8;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
}

.goal-milestones-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.milestone-chip {
    background: #FFFDF9;
    border: 1px solid #E4DAC4;
    border-radius: 10px;
    padding: 8px 10px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.milestone-chip.highlight {
    background: rgba(195, 161, 93, 0.12);
    border-color: rgba(195, 161, 93, 0.4);
}

.milestone-icon {
    font-size: 13px;
    line-height: 1;
}

.milestone-val {
    font-family: 'Noto Naskh Arabic', serif;
    font-size: 17px;
    font-weight: 700;
    color: var(--ink);
    line-height: 1.2;
}

.milestone-chip.highlight .milestone-val {
    color: #927233;
}

.milestone-lbl {
    font-size: 11px;
    color: #79715E;
}

.goal-pace-callout {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(195, 161, 93, 0.08);
    border: 1px solid rgba(195, 161, 93, 0.3);
    border-radius: 12px;
    padding: 10px 14px;
    margin-bottom: 14px;
}

.pace-icon-box {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(195, 161, 93, 0.18);
    color: #927233;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.pace-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 12px;
    color: #615846;
    line-height: 1.45;
}

.pace-text strong {
    color: var(--ink);
    font-size: 12.5px;
}

.goal-card-footer,
.footprint-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 12px;
    border-top: 1px dashed #E2DAC8;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: auto;
}

.goal-edit-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12.5px;
}

/* --- Footprint Sanctuary Card --- */
.footprint-radar-stage {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8px 12px;
    background: radial-gradient(circle, rgba(195, 161, 93, 0.08) 0%, rgba(247, 243, 233, 0.5) 100%);
    border: 1px dashed #DFD5C2;
    border-radius: 12px;
    margin-bottom: 12px;
    height: 165px;
    overflow: hidden;
}

.footprint-radar-stage .radar-svg-canvas {
    width: 220px;
    height: 155px;
    max-width: 100%;
    display: block;
}

.footprint-domains-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
}

.domain-item-row {
    background: #F8F4EC;
    border: 1px solid #E8DFCC;
    border-radius: 10px;
    padding: 8px 12px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    transition: all 0.2s ease;
}

.domain-item-row.is-top-domain {
    background: #FFFDF6;
    border-color: rgba(195, 161, 93, 0.5);
    box-shadow: 0 2px 8px rgba(195, 161, 93, 0.08);
}

.domain-info-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.domain-name-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
}

.domain-icon {
    width: 14px;
    height: 14px;
    color: #8C6D2C;
}

.domain-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--ink);
}

.top-domain-pill {
    background: rgba(195, 161, 93, 0.18);
    color: #8C6D2C;
    border: 1px solid rgba(195, 161, 93, 0.4);
    font-size: 10.5px;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 10px;
}

.domain-pct-value {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--green);
}

.domain-item-row .progress {
    height: 6px;
    margin: 0;
    background: #E8E0CF;
}

.footprint-insight-line {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #6E6553;
}

/* 7. Upcoming Commitments (في الأيام المقبلة) */
.commitments-items-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 6px;
}

.commitment-item-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    background: #FFFDF9;
    border: 1px solid #EAE3D2;
    border-radius: 12px;
    transition: all 0.25s ease;
}

.commitment-item-card:hover {
    transform: translateX(-3px);
    border-color: #D8CBB0;
    box-shadow: 0 4px 14px rgba(23, 61, 54, 0.05);
}

.commitment-date-badge {
    background: linear-gradient(180deg, #F5EFE1 0%, #E9E1CE 100%);
    border: 1px solid #DFD5C2;
    color: #4D5A46;
    padding: 6px 12px;
    border-radius: 10px;
    min-width: 52px;
    text-align: center;
    flex-shrink: 0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.03);
}

.commitment-date-num {
    font-size: 22px;
    font-family: 'Noto Naskh Arabic', serif;
    font-weight: 700;
    display: block;
    line-height: 1.1;
    color: var(--green);
}

.commitment-date-month {
    font-size: 11px;
    font-weight: 600;
    display: block;
    color: #726A58;
}

.commitment-details {
    flex: 1;
    min-width: 0;
}

.commitment-title {
    font-size: 14.5px;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.commitment-meta {
    font-size: 12px;
    color: #79715E;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.commitment-type-tag {
    font-size: 10.5px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.tag-meeting {
    background: rgba(195, 161, 93, 0.16);
    color: #8C6D2C;
}

.tag-loan {
    background: rgba(35, 87, 56, 0.12);
    color: var(--green);
}

.tag-challenge {
    background: rgba(160, 102, 60, 0.12);
    color: #A0663C;
}

.empty-commitments-box {
    text-align: center;
    padding: 30px 20px;
    color: #7B7360;
}

.empty-icon-leaf {
    font-size: 28px;
    margin-bottom: 8px;
}

/* ==========================================================================
   ENHANCED COMMUNITIES SUITE (مجالس رِواق والمجتمعات التفاعلية)
   ========================================================================== */

/* 1. Enhanced Masthead */
.community-mast-sanctuary {
    background: linear-gradient(135deg, #0E2B26 0%, #173D36 60%, #1A473F 100%);
    color: #FFF4D8;
    padding: 34px 38px;
    border-radius: 20px;
    position: relative;
    margin-bottom: 24px;
    box-shadow: 0 12px 36px rgba(14, 43, 38, 0.2);
    overflow: hidden;
    border: 1px solid rgba(195, 161, 93, 0.3);
}

.community-mast-sanctuary::before {
    content: '';
    position: absolute;
    top: -50px;
    left: -50px;
    width: 250px;
    height: 250px;
    background: radial-gradient(circle, rgba(195, 161, 93, 0.15) 0%, transparent 70%);
    pointer-events: none;
    border-radius: 50%;
}

.community-mast-sanctuary::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, var(--gold), transparent, var(--gold));
}

/* Switcher Tabs at top of masthead */
.community-switcher-bar {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
    flex-wrap: wrap;
    align-items: center;
}

.community-tab-chip {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #E6DFC9;
    padding: 5px 14px;
    border-radius: 18px;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.25s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.community-tab-chip:hover {
    background: rgba(255, 255, 255, 0.16);
    color: #FFFDF8;
    transform: translateY(-1px);
}

.community-tab-chip.active {
    background: rgba(195, 161, 93, 0.25);
    border-color: var(--gold);
    color: #FFE2A3;
    box-shadow: 0 2px 10px rgba(195, 161, 93, 0.2);
}

.community-mast-title {
    font-family: 'Noto Naskh Arabic', serif;
    font-size: 38px;
    font-weight: 700;
    color: #FFFDF8;
    margin: 6px 0 10px;
    line-height: 1.25;
}

.community-stats-ribbon {
    display: flex;
    gap: 14px;
    margin: 16px 0 22px;
    flex-wrap: wrap;
}

.comm-stat-pill {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #E6DFC9;
    padding: 4px 12px;
    border-radius: 14px;
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.comm-stat-pill svg {
    color: var(--gold);
    width: 13px;
    height: 13px;
}

/* 2. Enhanced Highlights Cards with Float Animation */
.highlight-card {
    background: #FFFDF8;
    border: 1px solid #E6DDC8;
    border-radius: 14px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    position: relative;
    box-shadow: 0 3px 12px rgba(23, 61, 54, 0.03);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, border-color 0.3s;
}

.highlight-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 24px rgba(23, 61, 54, 0.08);
    border-color: rgba(195, 161, 93, 0.6);
}

.quote-symbol {
    font-family: 'Noto Naskh Arabic', serif;
    font-size: 32px;
    color: var(--gold);
    line-height: 1;
    margin-bottom: -4px;
    opacity: 0.8;
}

.highlight-text {
    font-family: 'Noto Naskh Arabic', serif;
    font-size: 15px;
    line-height: 1.8;
    color: var(--ink);
    margin: 0 0 14px;
    flex: 1;
}

.highlight-reaction-btn {
    background: rgba(195, 161, 93, 0.1);
    border: 1px solid rgba(195, 161, 93, 0.3);
    color: #8C6D2C;
    border-radius: 14px;
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: all 0.2s ease;
}

.highlight-reaction-btn:hover {
    background: var(--gold);
    color: #FFFDF8;
    transform: scale(1.05);
}

/* 3. Audio Equalizer Soundwaves Animation */
.audio-equalizer-bars {
    display: inline-flex;
    align-items: flex-end;
    gap: 2px;
    height: 14px;
    width: 14px;
    margin-inline-end: 4px;
}

.equalizer-bar {
    width: 2.5px;
    background: currentColor;
    border-radius: 1px;
    height: 4px;
    transition: height 0.2s ease;
}

.audio-playing .equalizer-bar:nth-child(1) {
    animation: eqBounce1 0.7s ease-in-out infinite alternate;
}
.audio-playing .equalizer-bar:nth-child(2) {
    animation: eqBounce2 0.5s ease-in-out infinite alternate;
}
.audio-playing .equalizer-bar:nth-child(3) {
    animation: eqBounce3 0.6s ease-in-out infinite alternate;
}

@keyframes eqBounce1 {
    0% { height: 3px; }
    100% { height: 14px; }
}
@keyframes eqBounce2 {
    0% { height: 12px; }
    100% { height: 4px; }
}
@keyframes eqBounce3 {
    0% { height: 5px; }
    100% { height: 13px; }
}

/* Timer breathing animation when running */
.timer-breathe-glow {
    animation: timerPulseGlow 3s ease-in-out infinite alternate;
}

@keyframes timerPulseGlow {
    0% {
        text-shadow: 0 0 4px rgba(23, 61, 54, 0.1);
        transform: scale(1);
    }
    100% {
        text-shadow: 0 0 16px rgba(195, 161, 93, 0.4);
        transform: scale(1.02);
    }
}

/* 4. Book of Month 3D Card */
.month-book-card-3d {
    perspective: 800px;
    display: inline-block;
}

.month-book-cover {
    width: 105px;
    min-height: 152px;
    border-radius: 3px 8px 8px 3px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2), inset -4px 0 8px rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 12px;
    color: #FFFDF8;
    position: relative;
    cursor: pointer;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
    transform: rotateY(-12deg);
}

.month-book-cover:hover {
    transform: rotateY(0deg) translateY(-4px) scale(1.04);
    box-shadow: 0 14px 28px rgba(23, 61, 54, 0.25);
}

.month-book-cover::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 8px;
    height: 100%;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 0 3px 3px 0;
}

/* 5. Discussions Cards & Reactions */
.discussion-card-item {
    padding: 16px;
    background: #FFFDF9;
    border: 1px solid #EAE2D0;
    border-radius: 12px;
    margin-bottom: 12px;
    transition: all 0.25s ease;
}

.discussion-card-item:hover {
    border-color: #D8CBAC;
    box-shadow: 0 4px 14px rgba(23, 61, 54, 0.04);
    transform: translateY(-2px);
}

.disc-author-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.disc-author-info {
    display: flex;
    align-items: center;
    gap: 8px;
}

.disc-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--green);
    color: #FFFDF8;
    display: grid;
    place-items: center;
    font-size: 12px;
    font-weight: 700;
}

.disc-actions-row {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    align-items: center;
}

.disc-react-btn {
    background: transparent;
    border: 1px solid #DFD5C2;
    color: #6C6452;
    border-radius: 12px;
    padding: 2px 10px;
    font-size: 11px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: all 0.2s ease;
}

.disc-react-btn:hover {
    background: rgba(195, 161, 93, 0.15);
    border-color: var(--gold);
    color: var(--green);
}

/* ==========================================================================
   ENHANCED LIBRARIES & PHYSICAL COPIES SUITE (نظام المكتبات والنسخ المادية)
   ========================================================================== */

/* 1. Library Sanctuary Pavilion Banner */
.library-sanctuary-banner {
    background: linear-gradient(135deg, #FFFDF8 0%, #F5EFE3 100%);
    border: 1px solid #DFD5C2;
    border-radius: 18px;
    padding: 24px 28px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-bottom: 22px;
    box-shadow: 0 4px 20px rgba(23, 61, 54, 0.04);
    position: relative;
    overflow: hidden;
}

.library-sanctuary-banner::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 6px;
    height: 100%;
    background: linear-gradient(180deg, var(--gold), #967535);
}

.library-pavilion-info {
    display: flex;
    align-items: center;
    gap: 20px;
    flex: 1;
    min-width: 0;
}

.library-emblem-arch {
    width: 62px;
    height: 72px;
    background: var(--green);
    color: #FFE2A3;
    display: grid;
    place-items: center;
    border-radius: 30px 30px 8px 8px;
    flex-shrink: 0;
    box-shadow: 0 4px 14px rgba(23, 61, 54, 0.2);
    border: 1px solid rgba(195, 161, 93, 0.4);
}

.library-pavilion-texts h2 {
    margin: 0 0 4px;
    font-size: 24px;
    font-family: 'Noto Naskh Arabic', serif;
    color: var(--ink);
    line-height: 1.25;
}

.library-pavilion-stats {
    display: flex;
    gap: 14px;
    margin-top: 10px;
    flex-wrap: wrap;
}

.lib-stat-tile {
    display: flex;
    align-items: baseline;
    gap: 6px;
    background: #FFFDF9;
    border: 1px solid #E6DDC8;
    padding: 4px 12px;
    border-radius: 10px;
    font-size: 12.5px;
    color: #6C6452;
}

.lib-stat-tile b {
    font-size: 17px;
    font-family: 'Noto Naskh Arabic', serif;
    color: var(--green);
}

/* 2. Library Capsule Tab Strip */
.library-capsule-tabs {
    display: inline-flex;
    background: #EFE8D8;
    border: 1px solid #DFD5C2;
    border-radius: 24px;
    padding: 4px;
    gap: 4px;
    margin-bottom: 20px;
}

.lib-capsule-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    color: #555042;
    text-decoration: none;
    transition: all 0.25s ease;
}

.lib-capsule-tab:hover {
    color: var(--ink);
    background: rgba(255, 255, 255, 0.5);
}

.lib-capsule-tab.active {
    background: var(--green);
    color: #FFFDF8;
    box-shadow: 0 2px 8px rgba(23, 61, 54, 0.2);
}

.lib-badge-count {
    background: #C0392B;
    color: #FFFDF8;
    font-size: 11px;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 10px;
}

/* Shelves Grid: Exactly 5 columns on desktop as requested */
.libraries-shelf-grid {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 20px;
    margin-top: 20px;
}

@media (max-width: 1200px) {
    .libraries-shelf-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 992px) {
    .libraries-shelf-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 768px) {
    .libraries-shelf-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 14px;
    }
}

@media (max-width: 480px) {
    .libraries-shelf-grid {
        grid-template-columns: 1fr !important;
        gap: 12px;
    }
}

/* 3. Physical Copy Card on Shelves (Luxury Heritage Edition) */
.physical-copy-card {
    padding: 18px 16px 16px;
    background: linear-gradient(180deg, #FFFFFF 0%, #FAF7F0 100%);
    border: 1px solid #E5DBC7;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    position: relative;
    box-shadow: 0 4px 16px rgba(23, 61, 54, 0.04), 0 1px 3px rgba(0, 0, 0, 0.02);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, border-color 0.3s ease;
    overflow: hidden;
}

.physical-copy-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent 0%, #C3A15D 50%, transparent 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.physical-copy-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 14px 32px rgba(23, 61, 54, 0.12), 0 2px 8px rgba(195, 161, 93, 0.15);
    border-color: rgba(195, 161, 93, 0.65);
}

.physical-copy-card:hover::before {
    opacity: 1;
}

/* Card Header: Status & Archive Barcode */
.copy-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    gap: 8px;
}

.copy-status-wrapper {
    display: inline-flex;
    align-items: center;
}

.copy-card-header .tag {
    font-size: 11.5px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: 1px solid transparent;
}

.copy-card-header .status-available {
    background: #E8F5E9;
    color: #1E6B3A;
    border-color: #C8E6C9;
}

.copy-card-header .status-borrowed {
    background: #FFF3E0;
    color: #B25E00;
    border-color: #FFE0B2;
}

.copy-card-header .status-reserved {
    background: #FFF8E1;
    color: #8C6D2C;
    border-color: #FFECB3;
}

.status-pulse-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    display: inline-block;
}

.dot-available {
    background: #27AE60;
    box-shadow: 0 0 0 0 rgba(39, 174, 96, 0.6);
    animation: statusDotPulse 2s infinite;
}

.dot-borrowed {
    background: #E67E22;
}

.dot-reserved {
    background: #F39C12;
    animation: statusDotPulse 2.2s infinite;
}

@keyframes statusDotPulse {
    0% { box-shadow: 0 0 0 0 rgba(39, 174, 96, 0.6); }
    70% { box-shadow: 0 0 0 5px rgba(39, 174, 96, 0); }
    100% { box-shadow: 0 0 0 0 rgba(39, 174, 96, 0); }
}

.copy-barcode-chip {
    font-size: 11px;
    font-weight: 700;
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    color: #6D624C;
    background: #F3ECE0;
    padding: 3px 8px;
    border-radius: 6px;
    border: 1px solid #DFD5C0;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    letter-spacing: 0.5px;
}

/* 3D Book Cover Stage */
.copy-cover-stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
    perspective: 900px;
    position: relative;
    padding: 6px 0 8px;
}

.copy-cover-3d {
    width: 120px;
    min-height: 172px;
    height: 172px;
    border-radius: 3px 7px 7px 3px;
    position: relative;
    cursor: pointer;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease;
    transform: rotateY(-10deg) rotateX(2deg);
    transform-style: preserve-3d;
    box-shadow: -6px 8px 18px rgba(23, 61, 54, 0.22), inset -2px 0 5px rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.copy-cover-stage:hover .copy-cover-3d {
    transform: rotateY(0deg) rotateX(0deg) translateY(-6px) scale(1.05);
    box-shadow: 0 14px 28px rgba(23, 61, 54, 0.28), 0 2px 8px rgba(0, 0, 0, 0.12);
}

.copy-cover-ribbon {
    position: absolute;
    top: -2px;
    left: 18px;
    width: 12px;
    height: 38px;
    background: linear-gradient(135deg, #F8E5B3 0%, #C3A15D 100%);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 80%, 0 100%);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    z-index: 5;
}

.copy-cover-real-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 3px 7px 7px 3px;
    display: block;
}

.copy-cover-sheen-overlay {
    position: absolute;
    inset: 0;
    border-radius: 3px 7px 7px 3px;
    background: linear-gradient(
        90deg,
        rgba(0, 0, 0, 0.35) 0%,
        rgba(255, 255, 255, 0.12) 3%,
        transparent 10%,
        transparent 90%,
        rgba(0, 0, 0, 0.15) 100%
    );
    pointer-events: none;
    z-index: 2;
}

/* Classical Leather Frame (For books without custom uploaded image) */
.copy-cover-leather-frame {
    width: 100%;
    height: 100%;
    border: 1.5px solid rgba(255, 253, 248, 0.35);
    outline: 1px dashed rgba(195, 161, 93, 0.45);
    outline-offset: -3px;
    border-radius: 2px 5px 5px 2px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 14px 10px;
    box-sizing: border-box;
    background: radial-gradient(circle at center, rgba(255, 255, 255, 0.08) 0%, transparent 80%);
}

.leather-frame-corner {
    font-size: 8px;
    color: #F8E5B3;
    line-height: 1;
    opacity: 0.75;
}

.leather-frame-emblem {
    margin: 4px 0 2px;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.4));
}

.leather-cover-title {
    font-family: 'Noto Naskh Arabic', serif;
    font-size: 14.5px;
    font-weight: 700;
    color: #FFFDF8;
    line-height: 1.32;
    margin: 4px 0 3px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.leather-cover-author {
    font-size: 10.5px;
    color: #E6D8BF;
    font-weight: 500;
    opacity: 0.9;
}

.copy-cover-spine-edge {
    position: absolute;
    top: 0;
    right: 0;
    width: 7px;
    height: 100%;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.15) 100%);
    border-radius: 0 2px 2px 0;
    pointer-events: none;
    z-index: 4;
}

.copy-cover-shelf-shadow {
    width: 105px;
    height: 12px;
    background: radial-gradient(ellipse at center, rgba(23, 61, 54, 0.35) 0%, transparent 72%);
    margin-top: 4px;
    border-radius: 50%;
    filter: blur(3px);
    transition: all 0.35s ease;
}

.copy-cover-stage:hover .copy-cover-shelf-shadow {
    width: 118px;
    background: radial-gradient(ellipse at center, rgba(23, 61, 54, 0.48) 0%, transparent 72%);
    filter: blur(4px);
}

.copy-cover-hover-hint {
    position: absolute;
    bottom: 16px;
    background: rgba(14, 43, 38, 0.92);
    color: #FFFDF8;
    backdrop-filter: blur(4px);
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: 1px solid rgba(195, 161, 93, 0.4);
    opacity: 0;
    transform: translateY(6px);
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
    z-index: 10;
}

.copy-cover-stage:hover .copy-cover-hover-hint {
    opacity: 1;
    transform: translateY(0);
}

/* Card Body & Details */
.copy-card-body {
    display: flex;
    flex-direction: column;
    text-align: right;
    margin-bottom: 14px;
}

.copy-card-title {
    font-family: 'Noto Naskh Arabic', serif;
    font-size: 16.5px;
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 4px;
    line-height: 1.35;
    transition: color 0.2s ease;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 44px;
}

.copy-card-title:hover {
    color: var(--green);
}

.copy-card-author {
    font-size: 12.5px;
    color: #6C6352;
    margin: 0 0 10px;
    display: flex;
    align-items: center;
    gap: 4px;
    font-weight: 500;
}

.copy-metadata-line {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11.5px;
    color: #79715E;
    flex-wrap: wrap;
}

.copy-meta-tag {
    background: rgba(195, 161, 93, 0.14);
    color: #8C6D2C;
    font-weight: 700;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 6px;
    border: 1px solid rgba(195, 161, 93, 0.25);
}

.copy-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #6E6655;
    font-weight: 500;
}

/* Actions Structured Layout */
.copy-card-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px solid #EDE4D3;
}

.copy-actions-primary {
    width: 100%;
}

.btn-borrow-primary {
    width: 100%;
    min-height: 38px;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(23, 61, 54, 0.18);
    transition: all 0.25s ease;
}

.btn-borrow-primary:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(23, 61, 54, 0.28);
}

.btn-borrow-primary .btn-arrow-icon {
    transition: transform 0.2s ease;
}

.btn-borrow-primary:hover:not(:disabled) .btn-arrow-icon {
    transform: translateX(-3px);
}

.btn-borrow-primary.disabled-state {
    background: #EDE6D8 !important;
    border-color: #DCD3C2 !important;
    color: #7A705E !important;
    opacity: 0.85 !important;
    box-shadow: none !important;
    cursor: not-allowed !important;
}

/* Secondary Tools Row: [Passport] [3D Preview] [Delete] */
.copy-actions-secondary {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
}

.btn-secondary-tool {
    min-height: 34px;
    height: 34px;
    padding: 0 10px;
    font-size: 11.5px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    background: #FFFDF9;
    border: 1px solid #DFD5C2;
    border-radius: 8px;
    color: #4D4537;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.btn-secondary-tool:hover {
    background: #FAF5EB;
    border-color: var(--gold);
    color: var(--ink);
    transform: translateY(-1px);
}

.btn-passport {
    flex: 1;
}

.btn-3d-preview {
    flex: 1;
}

.copy-delete-form {
    display: inline-flex;
    margin: 0;
}

.btn-delete-tool {
    width: 34px;
    padding: 0;
    color: #9C8F79;
}

.btn-delete-tool:hover {
    background: #FDF2F0;
    border-color: #E6B0AA;
    color: #C0392B;
}

@media (max-width: 768px) {
    .library-sanctuary-banner {
        flex-direction: column;
        align-items: stretch;
    }
}

/* ============================================================
   CamScanner Book Cover Studio & Micro-Interactions
   ============================================================ */
.camscanner-section {
    background: #FAF8F3;
    border: 1px dashed #D5C8B2;
    border-radius: 12px;
    padding: 14px;
    display: grid;
    gap: 12px;
    transition: border-color 0.3s ease;
}

.camscanner-section:hover {
    border-color: var(--gold);
}

.camscanner-dropzone {
    background: #FFFDF9;
    border: 1.5px dashed #D8CBBA;
    border-radius: 10px;
    padding: 16px 14px;
    cursor: pointer;
    text-align: center;
    transition: all 0.25s ease;
}

.camscanner-dropzone:hover {
    border-color: var(--green);
    background: #F4EFE6;
    transform: translateY(-1px);
}

.camscanner-dropzone-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.camscanner-icon-circle {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(23, 61, 54, 0.08);
    display: grid;
    place-items: center;
    transition: transform 0.3s ease;
}

.camscanner-dropzone:hover .camscanner-icon-circle {
    transform: scale(1.1) rotate(5deg);
    background: rgba(23, 61, 54, 0.15);
}

.camscanner-studio-box {
    background: #FFFDF9;
    border: 1px solid #E6DBC6;
    border-radius: 10px;
    padding: 14px;
    box-shadow: 0 4px 16px rgba(14, 43, 38, 0.04);
}

.camscanner-status-banner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(35, 87, 56, 0.08);
    border: 1px solid rgba(35, 87, 56, 0.18);
    border-radius: 8px;
    padding: 7px 12px;
    margin-bottom: 12px;
}

.camscanner-pulse-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 0 rgba(35, 87, 56, 0.4);
    animation: pulseGlow 1.5s infinite;
}

.camscanner-peek-btn {
    background: #FFFDF9;
    border: 1px solid #D5C8B2;
    border-radius: 6px;
    padding: 3px 8px;
    font-size: 11px;
    font-weight: 600;
    color: var(--ink);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    user-select: none;
    transition: all 0.2s ease;
}

.camscanner-peek-btn:active {
    background: var(--gold);
    color: #fff;
    transform: scale(0.96);
}

.camscanner-preview-wrapper {
    position: relative;
    width: 130px;
    height: 185px;
    flex-shrink: 0;
    border-radius: 4px 8px 8px 4px;
    overflow: hidden;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18), inset -3px 0 6px rgba(0,0,0,0.25);
    background: #173D36;
    display: flex;
    align-items: center;
    justify-content: center;
}

.camscanner-preview-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: filter 0.2s ease;
}

.camscanner-spine-overlay {
    position: absolute;
    top: 0;
    right: 0;
    width: 8px;
    height: 100%;
    background: linear-gradient(to left, rgba(0,0,0,0.35), transparent);
    pointer-events: none;
}

.camscanner-watermark-tag {
    position: absolute;
    bottom: 6px;
    left: 6px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.5px;
    background: rgba(14, 43, 38, 0.75);
    color: #FFE2A3;
    padding: 2px 5px;
    border-radius: 4px;
    backdrop-filter: blur(2px);
    pointer-events: none;
}

/* CamScanner Laser Sweep Effect */
.camscanner-laser-sweep {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, #52B788, #C3A15D, #52B788, transparent);
    box-shadow: 0 0 12px 2px #52B788, 0 0 4px 1px #FFE2A3;
    z-index: 5;
    pointer-events: none;
    opacity: 0;
}

.camscanner-laser-sweep.scanning {
    animation: camScannerLaserRun 1.4s ease-in-out infinite;
}

@keyframes camScannerLaserRun {
    0% {
        top: 0%;
        opacity: 0;
    }
    15% {
        opacity: 1;
    }
    85% {
        opacity: 1;
    }
    100% {
        top: 98%;
        opacity: 0;
    }
}

.camscanner-presets-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 6px;
}

.camscanner-preset-pill {
    background: #FAF7F0;
    border: 1px solid #DED3C1;
    border-radius: 7px;
    padding: 6px 8px;
    text-align: right;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.camscanner-preset-pill span {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--ink);
}

.camscanner-preset-pill small {
    font-size: 9.5px;
    color: #7A7261;
}

.camscanner-preset-pill:hover {
    background: #EFE8DC;
    border-color: var(--gold);
}

.camscanner-preset-pill.active {
    background: var(--green);
    border-color: var(--gold);
    box-shadow: 0 2px 8px rgba(23, 61, 54, 0.2);
}

.camscanner-preset-pill.active span {
    color: #FFFDF8;
}

.camscanner-preset-pill.active small {
    color: #E2D3B8;
}

.camscanner-tools-strip {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding-top: 10px;
    margin-top: 10px;
    border-top: 1px solid #EFE8DC;
    flex-wrap: wrap;
}

.camscanner-sliders-group {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 180px;
}

.camscanner-slider-item {
    display: flex;
    align-items: center;
    gap: 5px;
    flex: 1;
}

.camscanner-slider-item input[type="range"] {
    width: 100%;
    accent-color: var(--green);
    height: 4px;
    cursor: pointer;
}

/* 3D Real Cover on Library Book Cards */
.copy-cover-3d.has-real-cover {
    padding: 0;
    justify-content: stretch;
    overflow: hidden;
    background: #0E2B26;
}

.copy-cover-real-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 2px 6px 6px 2px;
    display: block;
}

/* ==========================================================================
   ELEVATED EXPLORE CATALOG & SANCTUARY PAVILION SUITE
   ========================================================================== */

/* 1. Explore Sanctuary Pavilion Header */
.explore-sanctuary-banner {
    background: linear-gradient(135deg, #FFFDF8 0%, #F5EFE3 100%);
    border: 1px solid #DFD5C2;
    border-radius: 18px;
    padding: 24px 28px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-bottom: 24px;
    box-shadow: 0 4px 20px rgba(23, 61, 54, 0.04);
    position: relative;
    overflow: hidden;
}

.explore-sanctuary-banner::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 6px;
    height: 100%;
    background: linear-gradient(180deg, var(--gold), #967535);
}

.explore-pavilion-info {
    display: flex;
    align-items: center;
    gap: 20px;
    flex: 1;
    min-width: 0;
}

.explore-emblem-arch {
    width: 62px;
    height: 72px;
    background: var(--green);
    color: #FFE2A3;
    display: grid;
    place-items: center;
    border-radius: 30px 30px 8px 8px;
    flex-shrink: 0;
    box-shadow: 0 4px 14px rgba(23, 61, 54, 0.2);
    border: 1px solid rgba(195, 161, 93, 0.4);
}

.explore-pavilion-texts h1,
.explore-pavilion-texts h2 {
    margin: 0 0 4px;
    font-size: 24px;
    font-family: 'Noto Naskh Arabic', serif;
    color: var(--ink);
    line-height: 1.25;
}

.explore-pavilion-stats {
    display: flex;
    gap: 14px;
    margin-top: 10px;
    flex-wrap: wrap;
}

/* 2. Editorial Showcase Panel (مقدمة ابن خلدون) */
.explore-editorial-showcase {
    background: linear-gradient(135deg, #F6EFE3 0%, #ECE3CF 100%);
    border: 1px solid #D8CBB3;
    border-radius: 18px;
    padding: 26px 30px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 28px;
    align-items: center;
    margin-bottom: 26px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 6px 22px rgba(23, 61, 54, 0.05);
}

.explore-editorial-showcase::before {
    content: '';
    position: absolute;
    top: -40px;
    left: -40px;
    width: 180px;
    height: 180px;
    background: radial-gradient(circle, rgba(195, 161, 93, 0.18) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.explore-editorial-content {
    position: relative;
    z-index: 2;
}

.explore-editorial-content h2 {
    font-size: 27px;
    font-family: 'Noto Naskh Arabic', serif;
    color: var(--ink);
    margin: 6px 0 10px;
    line-height: 1.3;
}

.explore-editorial-tome-stage {
    perspective: 850px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    cursor: pointer;
    padding: 10px 14px;
}

.explore-editorial-tome-3d {
    width: 120px;
    min-height: 175px;
    border-radius: 3px 8px 8px 3px;
    box-shadow: -8px 12px 26px rgba(23, 61, 54, 0.28), inset -4px 0 8px rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 12px;
    color: #FFFDF8;
    position: relative;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease;
    transform: rotateY(-12deg) rotateX(4deg);
    overflow: hidden;
}

.explore-editorial-tome-3d:hover {
    transform: rotateY(0deg) rotateX(0deg) translateY(-6px) scale(1.05);
    box-shadow: 0 16px 36px rgba(23, 61, 54, 0.32);
}

.explore-editorial-tome-3d::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 8px;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 0 3px 3px 0;
}

.explore-editorial-tome-3d.has-real-cover {
    padding: 0;
    justify-content: stretch;
}

.explore-editorial-tome-ribbon {
    position: absolute;
    top: 0;
    left: 20px;
    width: 13px;
    height: 42px;
    background: #C3A15D;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 80%, 0 100%);
    z-index: 3;
}

/* 3. Search Bar & Category Filters */
.search-form-wrapper {
    position: relative;
    margin-bottom: 18px;
}

.search-input-container {
    position: relative;
    display: flex;
    align-items: center;
}

.search-field-icon {
    position: absolute;
    right: 14px;
    width: 18px;
    height: 18px;
    color: #8C826F;
    pointer-events: none;
    z-index: 2;
}

.search-input-container .search-pulse-input {
    padding-right: 42px;
    background: #FFFDF9;
    border: 1px solid #D5C8B2;
    border-radius: 12px;
    height: 48px;
    font-size: 14px;
    transition: all 0.25s ease;
}

.search-input-container .search-pulse-input:focus {
    border-color: var(--green);
    box-shadow: 0 0 0 4px rgba(23, 61, 54, 0.08);
}

.search-shortcut-hint {
    position: absolute;
    left: 14px;
    font-size: 11px;
    color: #9E937E;
    background: #F1EAE0;
    padding: 2px 8px;
    border-radius: 6px;
    border: 1px solid #DFD5C2;
    pointer-events: none;
}

/* Category Filter Capsule Pills */
.explore-category-pills {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 22px;
}

.explore-category-pills a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    background: #EFE8D8;
    border: 1px solid #DFD5C2;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    color: #555042;
    text-decoration: none;
    transition: all 0.25s ease;
}

.explore-category-pills a:hover {
    color: var(--ink);
    background: #FFFDF9;
    border-color: var(--gold);
    transform: translateY(-1px);
}

.explore-category-pills a.selected {
    background: var(--green);
    color: #FFFDF8;
    border-color: var(--green);
    box-shadow: 0 2px 10px rgba(23, 61, 54, 0.22);
}

/* 4. Book Cards Grid */
.explore-books-grid .physical-copy-card {
    text-align: right;
    display: flex;
    flex-direction: column;
}

@media (max-width: 768px) {
    .explore-sanctuary-banner {
        flex-direction: column;
        align-items: stretch;
    }
    .explore-editorial-showcase {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .explore-editorial-tome-stage {
        margin-top: 14px;
    }
}

/* ==========================================================================
   ENHANCED NOTIFICATIONS PAGE (واحة التنبيهات والسكينة)
   ========================================================================== */

/* 1. Sanctuary Hero Header */
.notif-sanctuary-hero {
    background: linear-gradient(135deg, #FFFDF8 0%, #F8F4EA 60%, #F2EBDA 100%);
    border: 1px solid #E4D8C1;
    border-radius: 16px;
    padding: 24px 28px;
    margin-bottom: 22px;
    box-shadow: 0 4px 20px rgba(23, 61, 54, 0.04);
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.notif-sanctuary-hero::before {
    content: '';
    position: absolute;
    top: -40px;
    left: -40px;
    width: 140px;
    height: 140px;
    background: radial-gradient(circle, rgba(195, 161, 93, 0.15) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.notif-hero-content {
    flex: 1;
    min-width: 0;
    position: relative;
    z-index: 2;
}

.notif-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    font-weight: 700;
    color: #9E7D38;
    margin-bottom: 4px;
    letter-spacing: 0.5px;
    font-family: 'Noto Naskh Arabic', serif;
}

.notif-hero-title {
    font-family: 'Amiri', 'Noto Naskh Arabic', serif;
    font-size: 26px;
    font-weight: 800;
    color: #173D36;
    margin: 0 0 6px;
    line-height: 1.3;
}

.notif-hero-desc {
    font-size: 13.5px;
    color: #5C5443;
    line-height: 1.6;
    margin: 0 0 16px;
    max-width: 620px;
}

.notif-stats-strip {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.notif-stat-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 12.5px;
    font-weight: 600;
    background: #EFE8DC;
    color: #4E4738;
    border: 1px solid rgba(195, 161, 93, 0.3);
    transition: all 0.2s ease;
    text-decoration: none;
}

.notif-stat-pill:hover {
    border-color: #C3A15D;
}

.notif-stat-pill.unread-pill {
    background: rgba(195, 161, 93, 0.18);
    color: #8C661B;
    border-color: rgba(195, 161, 93, 0.5);
}

.notif-stat-pill.tranquil-pill {
    background: rgba(26, 84, 59, 0.1);
    color: #173D36;
    border-color: rgba(26, 84, 59, 0.25);
}

.notif-stat-pill.quiet-pill {
    background: rgba(23, 61, 54, 0.1);
    color: #173D36;
    border-color: rgba(23, 61, 54, 0.25);
}

.notif-stat-pill.digest-pill {
    background: rgba(33, 79, 52, 0.08);
    color: #1B4E34;
    border-color: rgba(33, 79, 52, 0.22);
}

.pulse-beacon {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #C3A15D;
    box-shadow: 0 0 0 0 rgba(195, 161, 93, 0.7);
    animation: beaconPulse 1.8s infinite;
}

@keyframes beaconPulse {
    0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(195, 161, 93, 0.7); }
    70% { transform: scale(1.1); box-shadow: 0 0 0 7px rgba(195, 161, 93, 0); }
    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(195, 161, 93, 0); }
}

.notif-hero-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex-shrink: 0;
    align-items: flex-end;
    position: relative;
    z-index: 2;
}

.btn-royal-mark-all {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #173D36 0%, #1F5148 100%);
    color: #FFFDF8;
    padding: 10px 18px;
    border-radius: 10px;
    font-size: 13.5px;
    font-weight: 700;
    font-family: inherit;
    border: 1px solid #C3A15D;
    box-shadow: 0 4px 14px rgba(23, 61, 54, 0.22);
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
    white-space: nowrap;
}

.btn-royal-mark-all:hover {
    background: linear-gradient(135deg, #1C4A42 0%, #266358 100%);
    transform: translateY(-2px);
    box-shadow: 0 7px 20px rgba(23, 61, 54, 0.32), 0 0 10px rgba(195, 161, 93, 0.25);
    color: #FFFDF8;
}

.btn-notif-settings {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: rgba(255, 255, 255, 0.85);
    color: #4D4636;
    padding: 8px 16px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    border: 1px solid #D8CCB5;
    text-decoration: none;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.btn-notif-settings:hover {
    background: #FFFFFF;
    color: #173D36;
    border-color: #C3A15D;
    transform: translateY(-1px);
}

/* 2. Quiet Hours Night Mode Banner */
.quiet-hours-banner {
    padding: 18px 24px;
    border-radius: 14px;
    margin-bottom: 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    border: 1px solid #D5C9B3;
    background: linear-gradient(135deg, #FAF7F0 0%, #F5EFE4 100%);
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.03);
    transition: all 0.5s cubic-bezier(0.2, 0.8, 0.25, 1);
    position: relative;
    overflow: hidden;
}

.quiet-moon-halo {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(195, 161, 93, 0.16);
    border: 1px solid rgba(195, 161, 93, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.4s ease;
}

.quiet-hours-banner.quiet-hours-night-fade {
    background: radial-gradient(ellipse at 85% 20%, #164038 0%, #0A241E 60%, #051612 100%) !important;
    border-color: #C3A15D !important;
    color: #FFFDF8 !important;
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(195, 161, 93, 0.3) !important;
}

.quiet-hours-banner.quiet-hours-night-fade .quiet-moon-halo {
    background: rgba(255, 226, 163, 0.2);
    border-color: rgba(255, 226, 163, 0.5);
    box-shadow: 0 0 16px rgba(255, 226, 163, 0.3);
}

.btn-quiet-toggle {
    min-height: 36px;
    padding: 6px 16px;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    transition: all 0.25s ease;
}

/* 3. Literary Gentle Nudge Banner */
.gentle-nudge-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: linear-gradient(135deg, #F8F3E6 0%, #FAF6EE 100%);
    border: 1px solid #DECFA4;
    border-right: 5px solid #C3A15D;
    border-radius: 14px;
    padding: 16px 22px;
    margin-bottom: 22px;
    box-shadow: 0 4px 16px rgba(23, 61, 54, 0.04);
}

.nudge-icon {
    width: 44px;
    height: 44px;
    background: #E8DECA;
    color: var(--green);
    border-radius: 50%;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

.nudge-text {
    flex: 1;
    min-width: 0;
}

.nudge-text strong {
    display: block;
    color: #173D36;
    font-size: 14.5px;
    font-family: 'Noto Naskh Arabic', serif;
    margin-bottom: 3px;
}

.nudge-text span {
    font-size: 13px;
    color: #554E40;
    line-height: 1.55;
    display: block;
}

/* 4. Controls Bar: Filter Tabs & Live Search */
.notif-controls-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}

.notif-filter-tabs {
    display: flex;
    align-items: center;
    gap: 5px;
    background: #ECE5D7;
    padding: 4px 6px;
    border-radius: 12px;
    border: 1px solid #DFD5C2;
}

.notif-tab-btn {
    background: transparent;
    border: none;
    padding: 7px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #5D5443;
    cursor: pointer;
    transition: all 0.22s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: inherit;
}

.notif-tab-btn:hover {
    color: #173D36;
    background: rgba(255, 255, 255, 0.4);
}

.notif-tab-btn.active {
    background: #173D36;
    color: #FFFDF8;
    box-shadow: 0 2px 8px rgba(23, 61, 54, 0.25);
}

.tab-counter {
    font-size: 11px;
    padding: 1px 7px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.08);
    font-weight: 700;
}

.notif-tab-btn.active .tab-counter {
    background: rgba(255, 255, 255, 0.2);
    color: #FFFDF8;
}

.tab-counter.counter-unread {
    background: #C3A15D;
    color: #173D36;
}

.notif-search-box {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #FFFDF8;
    border: 1px solid #DCD1BC;
    border-radius: 10px;
    padding: 7px 14px;
    min-width: 250px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
    transition: all 0.2s ease;
}

.notif-search-box:focus-within {
    border-color: #C3A15D;
    box-shadow: 0 0 0 3px rgba(195, 161, 93, 0.2);
}

.notif-search-box input {
    border: none;
    outline: none;
    background: transparent;
    font-size: 13px;
    width: 100%;
    color: #2B2519;
    font-family: inherit;
}

/* 5. Notifications Cards List */
.notif-cards-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.notif-card {
    background: #FFFDF9;
    border: 1px solid #E6DDC8;
    border-radius: 14px;
    padding: 18px 22px;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    position: relative;
    transition: all 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
}

.notif-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(23, 61, 54, 0.07);
    border-color: #C3A15D;
}

.notif-card.is-unread {
    background: #FFFDF7;
    border-right: 4.5px solid #C3A15D;
    box-shadow: 0 4px 14px rgba(195, 161, 93, 0.09);
}

.notif-card.is-read {
    background: #F9F7F2;
    opacity: 0.82;
    border-right: 1px solid #E6DDC8;
}

.notif-card.is-read:hover {
    opacity: 1;
}

.notif-icon-badge {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.notif-card:hover .notif-icon-badge {
    transform: scale(1.05);
}

.badge-loan {
    background: #E4EFE8;
    color: #173D36;
    border: 1px solid #C4DEC8;
}

.badge-event {
    background: #F8EED9;
    color: #8A641B;
    border: 1px solid #E8D5A9;
}

.badge-reading {
    background: #E5EFF6;
    color: #1F5472;
    border: 1px solid #C5DFEE;
}

.badge-default {
    background: #EFE9DD;
    color: #5B5242;
    border: 1px solid #DDD3C1;
}

.notif-body-content {
    flex: 1;
    min-width: 0;
}

.notif-meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 5px;
}

.notif-category-chip {
    font-size: 10.5px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 6px;
    letter-spacing: 0.2px;
    font-family: 'Noto Naskh Arabic', serif;
}

.chip-loan { background: rgba(23, 61, 54, 0.1); color: #173D36; }
.chip-event { background: rgba(195, 161, 93, 0.18); color: #8A651B; }
.chip-reading { background: rgba(31, 84, 114, 0.12); color: #1F5472; }
.chip-default { background: rgba(0, 0, 0, 0.06); color: #5B5242; }

.notif-time-ago {
    font-size: 11.5px;
    color: #8A8170;
    display: flex;
    align-items: center;
    gap: 4px;
    font-family: 'Noto Naskh Arabic', serif;
}

.notif-title {
    font-size: 15.5px;
    font-weight: 700;
    color: #1A3930;
    margin: 0 0 4px;
    line-height: 1.38;
    font-family: 'Noto Naskh Arabic', serif;
}

.notif-desc {
    font-size: 13.5px;
    color: #4D4739;
    line-height: 1.62;
    margin: 0;
}

.notif-actions-col {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    align-self: center;
}

.notif-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
    color: #173D36;
    background: #EAE3D2;
    border: 1px solid #D6C9AE;
    transition: all 0.2s ease;
}

.notif-action-btn:hover {
    background: #173D36;
    color: #FFFDF8;
    border-color: #173D36;
}

.notif-action-btn .action-arrow {
    width: 14px;
    height: 14px;
    transition: transform 0.2s ease;
}

.notif-action-btn:hover .action-arrow {
    transform: translateX(-3px);
}

.notif-btn-check {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    background: #FAF7F0;
    border: 1px solid #D8CCB6;
    color: #554D3D;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
}

.notif-btn-check:hover {
    background: #173D36;
    color: #C3A15D;
    border-color: #C3A15D;
    transform: translateY(-1px);
}

.notif-read-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11.5px;
    color: #8C8472;
    padding: 4px 10px;
    background: rgba(0, 0, 0, 0.04);
    border-radius: 6px;
    font-family: 'Noto Naskh Arabic', serif;
}

/* 6. Poetic Empty State */
.notif-empty-sanctuary {
    text-align: center;
    padding: 50px 24px;
    background: linear-gradient(135deg, #FFFDF8 0%, #FAF6EE 100%);
    border: 1px dashed #DCCFA7;
    border-radius: 16px;
    margin: 10px 0;
}

.sanctuary-halo-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(195, 161, 93, 0.16);
    border: 1px solid rgba(195, 161, 93, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    color: #9E7D38;
}

.notif-empty-sanctuary h3 {
    font-family: 'Amiri', 'Noto Naskh Arabic', serif;
    font-size: 22px;
    color: #173D36;
    margin: 0 0 6px;
}

.notif-empty-sanctuary p {
    font-size: 13.5px;
    color: #6C6250;
    max-width: 440px;
    margin: 0 auto 20px;
    line-height: 1.65;
}

.empty-shortcuts {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

@media (max-width: 768px) {
    .notif-sanctuary-hero {
        flex-direction: column;
        align-items: stretch;
        padding: 20px;
    }
    .notif-hero-actions {
        align-items: stretch;
    }
    .notif-card {
        flex-direction: column;
        align-items: stretch;
    }
    .notif-actions-col {
        align-self: flex-start;
        margin-top: 8px;
    }
    .notif-controls-bar {
        flex-direction: column;
        align-items: stretch;
    }
    .notif-search-box {
        width: 100%;
    }
    .notif-filter-tabs {
        overflow-x: auto;
        white-space: nowrap;
    }
}

/* ==========================================================================
   PUBLIC LANDING PAGE COMPREHENSIVE SECTIONS (التعريف، المزايا، المجتمعات، الأسئلة الشائعة، الدخول والتسجيل)
   ========================================================================== */

/* 1. Quick Navigation Anchors Bar */
.landing-nav-anchors {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 20px;
    background: #EFE9DD;
    border-bottom: 1px solid #DFD5C0;
    flex-wrap: wrap;
    position: sticky;
    top: 0;
    z-index: 40;
    backdrop-filter: blur(10px);
}

.landing-anchor-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    color: #4C4435;
    text-decoration: none;
    background: rgba(255, 255, 255, 0.65);
    border: 1px solid rgba(195, 161, 93, 0.35);
    transition: all 0.22s ease;
}

.landing-anchor-link:hover, .landing-anchor-link.active {
    background: #173D36;
    color: #FFFDF8;
    border-color: #173D36;
    box-shadow: 0 2px 8px rgba(23, 61, 54, 0.2);
    transform: translateY(-1px);
}

/* 2. Hero Live Stats Counter Strip */
.landing-stats-bar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px dashed rgba(195, 161, 93, 0.35);
}

.landing-stat-tile {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.landing-stat-tile b {
    font-family: 'Amiri', 'Noto Naskh Arabic', serif;
    font-size: 26px;
    font-weight: 800;
    color: #173D36;
    line-height: 1.1;
    display: flex;
    align-items: center;
    gap: 4px;
}

.landing-stat-tile b .stat-spark {
    color: var(--gold);
    font-size: 16px;
}

.landing-stat-tile span {
    font-size: 12.5px;
    color: #647164;
    font-weight: 600;
}

/* 3. Section Header Generic Rules */
.landing-section-header {
    text-align: center;
    max-width: 680px;
    margin: 0 auto 40px;
}

.landing-section-header .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #9E7D38;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}

.landing-section-header h2 {
    font-family: 'Amiri', 'Noto Naskh Arabic', serif;
    font-size: 34px;
    font-weight: 800;
    color: #173D36;
    margin: 0 0 10px;
    line-height: 1.35;
}

.landing-section-header p {
    font-size: 14.5px;
    color: #5C5443;
    line-height: 1.7;
    margin: 0;
}

/* 4. Definition / About Section (التعريف بالمنصة) */
.landing-about-section {
    padding: 60px 48px;
    background: linear-gradient(180deg, #FFFDF8 0%, #F9F5EC 100%);
    border-bottom: 1px solid #E6DDC8;
}

.about-narrative-card {
    background: #FFFDF9;
    border: 1px solid #E6DDC8;
    border-radius: 16px;
    padding: 32px 36px;
    margin-bottom: 36px;
    box-shadow: 0 4px 20px rgba(23, 61, 54, 0.04);
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 32px;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.about-narrative-card::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 6px;
    height: 100%;
    background: linear-gradient(180deg, #C3A15D, #173D36);
}

.about-narrative-text h3 {
    font-family: 'Amiri', 'Noto Naskh Arabic', serif;
    font-size: 24px;
    color: #173D36;
    margin: 0 0 10px;
    font-weight: 700;
}

.about-narrative-text p {
    font-size: 14.5px;
    line-height: 1.8;
    color: #4C4535;
    margin: 0 0 16px;
}

.about-narrative-quote {
    font-family: 'Amiri', serif;
    font-size: 15.5px;
    color: #7A622A;
    background: rgba(195, 161, 93, 0.12);
    padding: 12px 18px;
    border-radius: 8px;
    border-right: 3px solid #C3A15D;
    line-height: 1.6;
}

.about-pillars-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.about-pillar-card {
    background: #FFFDF9;
    border: 1px solid #E6DDC8;
    border-radius: 14px;
    padding: 24px;
    transition: all 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
    position: relative;
}

.about-pillar-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(23, 61, 54, 0.08);
    border-color: #C3A15D;
}

.pillar-icon-box {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: rgba(23, 61, 54, 0.08);
    border: 1px solid rgba(23, 61, 54, 0.15);
    color: #173D36;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
    font-size: 22px;
    transition: transform 0.25s ease;
}

.about-pillar-card:hover .pillar-icon-box {
    transform: scale(1.08);
    background: #173D36;
    color: #FFFDF8;
}

.about-pillar-card h4 {
    font-family: 'Noto Naskh Arabic', serif;
    font-size: 17px;
    color: #173D36;
    margin: 0 0 8px;
    font-weight: 700;
}

.about-pillar-card p {
    font-size: 13.5px;
    line-height: 1.68;
    color: #554D3D;
    margin: 0;
}

/* 5. Features Section (مزايا رِواق الاستثنائية) */
.landing-features-section {
    padding: 60px 48px;
    background: #F5EFE4;
    border-bottom: 1px solid #DECFA4;
}

.features-royal-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.royal-feature-card {
    background: #FFFDF9;
    border: 1px solid #DFD4BC;
    border-radius: 14px;
    padding: 24px;
    transition: all 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
    display: flex;
    flex-direction: column;
}

.royal-feature-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 28px rgba(23, 61, 54, 0.09);
    border-color: #C3A15D;
}

.royal-feature-card .card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.royal-feature-card .card-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(195, 161, 93, 0.18), rgba(23, 61, 54, 0.06));
    border: 1px solid rgba(195, 161, 93, 0.4);
    color: #8C6A21;
    display: flex;
    align-items: center;
    justify-content: center;
}

.royal-feature-card .card-pill {
    font-size: 10.5px;
    font-weight: 700;
    color: #173D36;
    background: rgba(23, 61, 54, 0.08);
    padding: 3px 8px;
    border-radius: 6px;
    letter-spacing: 0.2px;
}

.royal-feature-card h3 {
    font-family: 'Noto Naskh Arabic', serif;
    font-size: 17.5px;
    color: #173D36;
    margin: 0 0 8px;
    font-weight: 700;
    line-height: 1.4;
}

.royal-feature-card p {
    font-size: 13.5px;
    line-height: 1.7;
    color: #4F4738;
    margin: 0 0 16px;
    flex-grow: 1;
}

.royal-feature-card .card-perk-tag {
    font-size: 11.5px;
    color: #8A6E2D;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-weight: 600;
    padding-top: 10px;
    border-top: 1px dashed rgba(195, 161, 93, 0.3);
}

/* 6. Communities Section (مجالس القراءة ونوادي الفكر) */
.landing-communities-section {
    padding: 60px 48px;
    background: #FFFDF8;
    border-bottom: 1px solid #E6DDC8;
}

.landing-communities-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-bottom: 32px;
}

.landing-comm-card {
    background: #FFFDF9;
    border: 1px solid #E4D8C1;
    border-radius: 14px;
    overflow: hidden;
    transition: all 0.28s ease;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.03);
    display: flex;
    flex-direction: column;
}

.landing-comm-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 28px rgba(23, 61, 54, 0.09);
    border-color: #C3A15D;
}

.comm-banner-strip {
    padding: 16px 20px;
    background: linear-gradient(135deg, #173D36, #0E2B26);
    color: #FFFDF8;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.comm-banner-strip .cat-tag {
    font-size: 11px;
    background: rgba(255, 255, 255, 0.15);
    padding: 2px 8px;
    border-radius: 4px;
    color: #E8D49E;
    font-weight: 600;
}

.comm-body {
    padding: 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.comm-body h4 {
    font-family: 'Amiri', 'Noto Naskh Arabic', serif;
    font-size: 20px;
    color: #173D36;
    margin: 0 0 6px;
    font-weight: 700;
}

.comm-body p {
    font-size: 13px;
    line-height: 1.6;
    color: #554D3D;
    margin: 0 0 14px;
    flex-grow: 1;
}

.comm-active-book-box {
    background: #FAF7F0;
    border: 1px solid #E8DECA;
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 12px;
    color: #4A4232;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.comm-active-book-box b {
    color: #173D36;
}

.comm-meta-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 10px;
    border-top: 1px dashed rgba(195, 161, 93, 0.35);
    font-size: 12px;
    color: #7D735E;
}

.silent-room-spotlight {
    background: linear-gradient(135deg, #0E2B26 0%, #173D34 60%, #0A221E 100%);
    color: #FFFDF8;
    border-radius: 16px;
    padding: 28px 32px;
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 28px;
    align-items: center;
    box-shadow: 0 8px 30px rgba(14, 43, 38, 0.25);
    border: 1px solid #C3A15D;
}

.silent-room-spotlight h3 {
    font-family: 'Amiri', 'Noto Naskh Arabic', serif;
    font-size: 24px;
    margin: 0 0 8px;
    color: #E8D49E;
}

.silent-room-spotlight p {
    font-size: 13.8px;
    color: #D6C9AA;
    line-height: 1.7;
    margin: 0 0 14px;
}

.silent-room-timer-demo {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(195, 161, 93, 0.4);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
}

.silent-room-timer-demo .timer-val {
    font-family: 'Courier New', monospace;
    font-size: 34px;
    font-weight: 800;
    color: #FFE2A3;
    letter-spacing: 2px;
    margin-bottom: 4px;
}

/* 7. FAQ Accordion Section (الأسئلة الشائعة) */
.landing-faq-section {
    padding: 60px 48px;
    background: #F9F5EC;
    border-bottom: 1px solid #E6DDC8;
}

.faq-accordion {
    max-width: 820px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.faq-item {
    background: #FFFDF9;
    border: 1px solid #DFD5C0;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.25s ease;
}

.faq-item[open] {
    border-color: #C3A15D;
    box-shadow: 0 4px 16px rgba(23, 61, 54, 0.05);
}

.faq-question {
    padding: 18px 22px;
    font-family: 'Noto Naskh Arabic', serif;
    font-size: 16px;
    font-weight: 700;
    color: #173D36;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    list-style: none;
    user-select: none;
}

.faq-question::-webkit-details-marker {
    display: none;
}

.faq-question .faq-chevron {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(195, 161, 93, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #8C6A21;
    flex-shrink: 0;
    transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.faq-item[open] .faq-chevron {
    transform: rotate(180deg);
    background: #173D36;
    color: #FFFDF8;
}

.faq-answer {
    padding: 0 22px 18px;
    font-size: 14px;
    line-height: 1.75;
    color: #4C4535;
    border-top: 1px dashed rgba(195, 161, 93, 0.25);
    padding-top: 14px;
}

/* 8. Closing Stage & Join CTA (الدعوة للانضمام والتسجيل) */
.landing-join-section {
    padding: 60px 48px;
    background: #EAE4D7;
}

.join-cta-card {
    background: linear-gradient(135deg, #FFFDF8 0%, #F5EFE3 100%);
    border: 1px solid #D8CBB2;
    border-radius: 18px;
    padding: 44px 48px;
    text-align: center;
    box-shadow: 0 8px 28px rgba(23, 61, 54, 0.06);
    position: relative;
    overflow: hidden;
}

.join-cta-card::before {
    content: '';
    position: absolute;
    inset: 6px;
    border: 1px dashed rgba(195, 161, 93, 0.4);
    border-radius: 12px;
    pointer-events: none;
}

.join-cta-card h2 {
    font-family: 'Amiri', 'Noto Naskh Arabic', serif;
    font-size: 34px;
    font-weight: 800;
    color: #173D36;
    margin: 0 0 10px;
}

.join-cta-card p {
    font-size: 15px;
    color: #554D3D;
    max-width: 580px;
    margin: 0 auto 24px;
    line-height: 1.7;
}

.join-cta-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 24px;
    position: relative;
    z-index: 2;
}

.join-perks-strip {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    font-size: 12.5px;
    color: #7D735E;
    position: relative;
    z-index: 2;
}

.join-perk-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* 9. Landing Footer */
.landing-footer {
    padding: 40px 48px 24px;
    background: #0E2B26;
    color: #FFFDF8;
}

.footer-top-grid {
    display: grid;
    grid-template-columns: 1.5fr repeat(3, 1fr);
    gap: 36px;
    padding-bottom: 32px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-brand-col h3 {
    font-family: 'Amiri', 'Noto Naskh Arabic', serif;
    font-size: 24px;
    margin: 0 0 8px;
    color: #E8D49E;
}

.footer-brand-col p {
    font-size: 13px;
    color: #B5C4BC;
    line-height: 1.7;
    max-width: 340px;
    margin: 0;
}

.footer-links-col h4 {
    font-family: 'Noto Naskh Arabic', serif;
    font-size: 15px;
    color: #E8D49E;
    margin: 0 0 12px;
    font-weight: 700;
}

.footer-links-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.footer-links-col a {
    color: #B5C4BC;
    text-decoration: none;
    font-size: 13px;
    transition: color 0.2s ease;
}

.footer-links-col a:hover {
    color: #FFFDF8;
}

.footer-bottom-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 20px;
    font-size: 12px;
    color: #8C9F95;
    flex-wrap: wrap;
    gap: 12px;
}

@media (max-width: 900px) {
    .landing-stats-bar {
        grid-template-columns: repeat(2, 1fr);
    }
    .about-narrative-card {
        grid-template-columns: 1fr;
    }
    .about-pillars-grid {
        grid-template-columns: 1fr;
    }
    .features-royal-grid {
        grid-template-columns: 1fr;
    }
    .landing-communities-grid {
        grid-template-columns: 1fr;
    }
    .silent-room-spotlight {
        grid-template-columns: 1fr;
    }
    .footer-top-grid {
        grid-template-columns: 1fr;
    }
    .landing-about-section, .landing-features-section, .landing-communities-section, .landing-faq-section, .landing-join-section, .landing-footer {
        padding: 40px 20px;
    }
    .landing-hero {
        padding: 40px 20px;
        grid-template-columns: 1fr;
    }
}


/* ==========================================================================
   Multi-Library, Roles, Book Conditions, Waitlists & Loan Extensions System
   ========================================================================== */

/* Multi-Library Header Switcher */
.multi-lib-switcher-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: #FFFDF9;
    border: 1px solid #E4DAC4;
    border-radius: 14px;
    padding: 10px 16px;
    margin-bottom: 18px;
    flex-wrap: wrap;
    box-shadow: 0 2px 8px rgba(23, 61, 54, 0.04);
}

.lib-switcher-left {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.lib-select-dropdown {
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink);
    background: #FAF7F0;
    border: 1px solid #D5C8B2;
    padding: 8px 14px;
    border-radius: 10px;
    outline: none;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 200px;
}
.lib-select-dropdown:focus {
    border-color: var(--green);
    box-shadow: 0 0 0 3px rgba(23, 61, 54, 0.12);
}

.lib-code-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    background: #F4EFE6;
    border: 1px solid #D8CCB5;
    border-radius: 20px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--green);
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
}
.lib-code-chip:hover {
    background: #E8DDC6;
    border-color: var(--gold);
}

/* Role Badges */
.role-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.2px;
}
.role-badge-owner {
    background: rgba(195, 161, 93, 0.2);
    color: #7A5719;
    border: 1px solid rgba(195, 161, 93, 0.45);
}
.role-badge-librarian {
    background: rgba(23, 61, 54, 0.12);
    color: #173D36;
    border: 1px solid rgba(23, 61, 54, 0.3);
}
.role-badge-member {
    background: rgba(43, 99, 82, 0.08);
    color: #245E50;
    border: 1px solid rgba(43, 99, 82, 0.2);
}
.role-badge-viewer {
    background: rgba(121, 115, 98, 0.1);
    color: #635E50;
    border: 1px solid rgba(121, 115, 98, 0.25);
}

/* Copy Condition Badges */
.cond-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
}
.cond-mint {
    background: #E6F4EA;
    color: #137333;
    border: 1px solid #CEEAD6;
}
.cond-good {
    background: #EBF3ED;
    color: #1B4D3E;
    border: 1px solid #C4DEC9;
}
.cond-fair {
    background: #FEF7E0;
    color: #B06000;
    border: 1px solid #FEEFC3;
}
.cond-damaged {
    background: #FCE8E6;
    color: #C5221F;
    border: 1px solid #FAD2CF;
}

/* Due Date Badges */
.due-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
}
.due-badge-normal {
    background: #EBF3ED;
    color: #1B4D3E;
    border: 1px solid #C4DEC9;
}
.due-badge-soon {
    background: #FFF3D6;
    color: #8C6118;
    border: 1px solid #EED79D;
    animation: pulseWarn 1.6s infinite ease-in-out;
}
.due-badge-overdue {
    background: #FDE8E4;
    color: #B3261E;
    border: 1px solid #F7B8B0;
    animation: pulseAlert 1.2s infinite ease-in-out;
}

@keyframes pulseWarn {
    0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(238, 215, 157, 0.4); }
    50% { transform: scale(1.02); box-shadow: 0 0 0 4px rgba(238, 215, 157, 0.25); }
}

@keyframes pulseAlert {
    0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(179, 38, 30, 0.4); }
    50% { transform: scale(1.03); box-shadow: 0 0 0 4px rgba(179, 38, 30, 0.25); }
}

/* Waitlist UI Cards */
.waitlist-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 14px;
}

.waitlist-card {
    background: #FFFDF9;
    border: 1px solid #E6DCC8;
    border-radius: 12px;
    padding: 16px;
    display: flex;
    gap: 14px;
    align-items: center;
    transition: all 0.25s ease;
}
.waitlist-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(23, 61, 54, 0.08);
    border-color: var(--gold);
}

.waitlist-rank-circle {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, #173D36, #0E2B26);
    color: #FFE2A3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--gold);
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.waitlist-rank-circle span {
    font-size: 9px;
    line-height: 1;
    color: #E8D49E;
}
.waitlist-rank-circle b {
    font-size: 15px;
    line-height: 1;
    font-weight: 800;
}

/* Members Grid */
.members-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 14px;
}

.member-card {
    background: #FFFDF9;
    border: 1px solid #E6DCC8;
    border-radius: 12px;
    padding: 16px;
    display: flex;
    gap: 12px;
    align-items: center;
    transition: all 0.2s ease;
}
.member-card:hover {
    border-color: var(--green);
    box-shadow: 0 4px 14px rgba(23, 61, 54, 0.06);
}

.member-avatar-box {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: rgba(23, 61, 54, 0.1);
    color: var(--green);
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: 17px;
    flex-shrink: 0;
    border: 1px solid rgba(23, 61, 54, 0.2);
}

/* All Libraries Showcase Grid */
.all-libraries-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 16px;
}

.library-tile-card {
    background: #FFFDF9;
    border: 1px solid #E6DCC8;
    border-radius: 14px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: all 0.25s ease;
}
.library-tile-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(23, 61, 54, 0.08);
    border-color: var(--gold);
}

.library-tile-banner {
    padding: 16px;
    color: #FFFDF8;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.library-tile-body {
    padding: 16px;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* ============================================================
   Knowledge Councils 3D Flip Showcase Grid (معرض بطاقات المجالس)
   ============================================================ */
.comm-flip-showcase-section {
    margin: 28px 0 28px;
    background: linear-gradient(180deg, #FAF7F0 0%, #F5EFE3 100%);
    border: 1px solid #E5DAC4;
    border-radius: 22px;
    padding: 26px 26px 30px;
    box-shadow: 0 4px 20px rgba(23, 61, 54, 0.04);
}

.comm-flip-section-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 22px;
    padding-bottom: 16px;
    border-bottom: 1px solid #EADFCB;
}

.comm-flip-hint-badge {
    background: #FFFDF8;
    border: 1px solid #DFD5C0;
    color: #5C523E;
    font-size: 12px;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
}

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

@media (max-width: 1100px) {
    .comm-flip-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .comm-flip-grid {
        grid-template-columns: 1fr;
    }
}

/* 3D Flip Card Container */
.comm-flip-card-wrapper {
    perspective: 1200px;
    height: 390px;
    cursor: pointer;
}

.comm-flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    border-radius: 18px;
}

.comm-flip-card-wrapper:hover .comm-flip-card-inner,
.comm-flip-card-wrapper.touch-flipped .comm-flip-card-inner,
.comm-flip-card-wrapper.is-active-community .comm-flip-card-inner,
.comm-flip-card-wrapper.already-flipped .comm-flip-card-inner {
    transform: rotateY(180deg);
}

.comm-flip-card-wrapper.is-active-community:hover .comm-flip-card-inner,
.comm-flip-card-wrapper.already-flipped:hover .comm-flip-card-inner {
    transform: rotateY(180deg) translateY(-4px);
}

.comm-flip-card-wrapper.is-active-community.unflipped-active .comm-flip-card-inner {
    transform: rotateY(0deg) !important;
}

.comm-flip-card-face {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    border-radius: 18px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

/* --- FRONT FACE --- */
.comm-flip-card-front {
    position: absolute;
    inset: 0;
    transform: rotateY(0deg) translateZ(1px);
    -webkit-transform: rotateY(0deg) translateZ(1px);
    background: linear-gradient(155deg, #1C4840 0%, #0F2D27 100%);
    border: 1px solid rgba(195, 161, 93, 0.35);
    color: #FFFDF8;
    padding: 20px 20px 16px;
    box-shadow: 0 6px 20px rgba(15, 45, 39, 0.12);
    justify-content: space-between;
    pointer-events: auto;
    z-index: 2;
}

.comm-flip-card-wrapper:hover .comm-flip-card-front,
.comm-flip-card-wrapper.touch-flipped .comm-flip-card-front,
.comm-flip-card-wrapper.is-active-community .comm-flip-card-front,
.comm-flip-card-wrapper.already-flipped .comm-flip-card-front {
    pointer-events: none !important;
    z-index: 1 !important;
}

.comm-flip-card-wrapper.is-active-community.unflipped-active .comm-flip-card-front {
    pointer-events: auto !important;
    z-index: 10 !important;
}

.comm-flip-card-front::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #A88438 0%, #E8D49E 50%, #A88438 100%);
}

.comm-flip-card-front::after {
    content: '';
    position: absolute;
    bottom: -40px;
    left: -40px;
    width: 160px;
    height: 160px;
    background: radial-gradient(circle, rgba(195, 161, 93, 0.08) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.flip-front-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    position: relative;
    z-index: 2;
}

.flip-badges-row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.flip-category-tag {
    background: rgba(195, 161, 93, 0.22);
    color: #F8E5B3;
    border: 1px solid rgba(195, 161, 93, 0.45);
    font-size: 11px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 12px;
}

.flip-privacy-tag {
    background: rgba(255, 255, 255, 0.12);
    color: #E2ECE5;
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 12px;
}

.active-council-glow-badge {
    background: #E8D49E;
    color: #173D36;
    font-size: 10.5px;
    font-weight: 800;
    padding: 3px 9px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    box-shadow: 0 0 10px rgba(232, 212, 158, 0.5);
}

.flip-front-body {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: auto 0;
    position: relative;
    z-index: 2;
}

.flip-emblem-circle {
    width: 58px;
    height: 58px;
    border-radius: 16px;
    border: 1.5px solid rgba(195, 161, 93, 0.5);
    display: grid;
    place-items: center;
    margin-bottom: 12px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
    transition: transform 0.3s ease;
}

.comm-flip-card-wrapper:hover .flip-emblem-circle {
    transform: scale(1.08) rotate(4deg);
}

.flip-council-title {
    font-family: 'Noto Naskh Arabic', serif;
    font-size: 20px;
    font-weight: 700;
    color: #FFFDF8;
    margin: 0 0 6px;
    line-height: 1.35;
}

.flip-council-desc {
    font-size: 12.5px;
    color: #CCD8D0;
    margin: 0 0 14px;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-width: 90%;
}

.flip-active-book-teaser {
    background: rgba(255, 255, 255, 0.1);
    border: 1px dashed rgba(195, 161, 93, 0.5);
    padding: 6px 12px;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    max-width: 95%;
}

.flip-active-book-teaser .teaser-label {
    color: #DCD0B5;
}

.flip-active-book-teaser .teaser-title {
    color: #F8E5B3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 140px;
}

.flip-front-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
    z-index: 2;
}

.flip-stats-bar {
    display: flex;
    align-items: center;
    gap: 12px;
}

.flip-stat-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11.5px;
    color: #D2DFD6;
}

.flip-rotate-prompt {
    font-size: 11px;
    color: #E8D49E;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    opacity: 0.85;
    transition: opacity 0.2s;
}

.comm-flip-card-wrapper:hover .flip-rotate-prompt {
    opacity: 1;
}

/* --- BACK FACE (Revealed on Hover) --- */
.comm-flip-card-back {
    position: absolute;
    inset: 0;
    transform: rotateY(180deg) translateZ(1px);
    -webkit-transform: rotateY(180deg) translateZ(1px);
    background: linear-gradient(180deg, #FFFFFF 0%, #F9F6EE 100%);
    border: 1.5px solid #E2D7C2;
    color: var(--ink);
    padding: 18px 18px 16px;
    box-shadow: 0 12px 28px rgba(23, 61, 54, 0.1);
    justify-content: space-between;
    pointer-events: none;
    z-index: 1;
}

.comm-flip-card-wrapper:hover .comm-flip-card-back,
.comm-flip-card-wrapper.touch-flipped .comm-flip-card-back,
.comm-flip-card-wrapper.is-active-community .comm-flip-card-back,
.comm-flip-card-wrapper.already-flipped .comm-flip-card-back {
    pointer-events: auto !important;
    z-index: 10 !important;
}

.comm-flip-card-wrapper.is-active-community .comm-flip-card-back,
.comm-flip-card-wrapper.already-flipped .comm-flip-card-back {
    border: 2px solid var(--gold) !important;
    box-shadow: 0 10px 28px rgba(195, 161, 93, 0.28) !important;
    background: linear-gradient(180deg, #FFFFFF 0%, #FAF6ED 100%) !important;
}

.comm-flip-card-wrapper.is-active-community.unflipped-active .comm-flip-card-back {
    pointer-events: none !important;
    z-index: 1 !important;
}

.flip-back-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
    padding-bottom: 10px;
    border-bottom: 1px solid #ECE3D2;
}

.flip-back-eyebrow {
    font-size: 11px;
    color: #8C6D2C;
    font-weight: 700;
    display: block;
    margin-bottom: 2px;
}

.flip-back-title {
    font-family: 'Noto Naskh Arabic', serif;
    font-size: 16.5px;
    font-weight: 700;
    color: var(--green);
    margin: 0;
}

.flip-code-pill {
    background: #F3ECE0;
    border: 1px solid #DFD5C0;
    color: #5D523E;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-family: monospace;
}

/* Back Face: Active Books Section */
.flip-active-books-container {
    background: #FAF8F2;
    border: 1px solid #E9DEC8;
    border-radius: 12px;
    padding: 10px 12px;
    margin: 10px 0;
}

.flip-books-section-title {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--green);
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
}

.flip-active-book-card {
    display: flex;
    gap: 12px;
    align-items: center;
}

.flip-mini-cover {
    width: 44px;
    height: 64px;
    border-radius: 3px 6px 6px 3px;
    overflow: hidden;
    position: relative;
    box-shadow: -3px 4px 10px rgba(0, 0, 0, 0.22);
    flex-shrink: 0;
}

.flip-mini-cover-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.flip-mini-leather {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 80%);
}

.flip-book-details {
    flex: 1;
    min-width: 0;
}

.flip-book-name {
    font-family: 'Noto Naskh Arabic', serif;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.flip-book-author {
    font-size: 11px;
    color: #6C6250;
    display: block;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.flip-book-meta-chips {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.flip-micro-tag {
    font-size: 9.5px;
    font-weight: 600;
    padding: 1px 5px;
    border-radius: 4px;
    background: #EFE8DA;
    color: #5D5442;
}

.flip-micro-tag.active-status-tag {
    background: rgba(39, 174, 96, 0.14);
    color: #1E8449;
    font-weight: 700;
}

.flip-empty-books-state {
    text-align: center;
    padding: 10px;
    font-size: 11px;
    color: #7A705E;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.flip-back-insights {
    font-size: 11px;
    color: #5A5243;
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 10px;
}

.flip-insight-row {
    display: flex;
    align-items: center;
    gap: 6px;
    line-height: 1.35;
}

.flip-insight-row .insight-label {
    font-weight: 700;
    color: #3F3728;
    white-space: nowrap;
}

.flip-insight-row .insight-value {
    color: #655C4C;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.flip-back-footer {
    margin-top: auto;
    position: relative;
    z-index: 50;
    pointer-events: auto !important;
}

.btn-flip-action {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    min-height: 40px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    background: var(--green);
    color: #FFFDF8 !important;
    border: 1px solid var(--green);
    box-shadow: 0 3px 10px rgba(23, 61, 54, 0.15);
    transition: all 0.25s ease;
    cursor: pointer !important;
    position: relative;
    z-index: 60;
    pointer-events: auto !important;
}

.btn-flip-action:hover {
    background: #112F29 !important;
    color: #FFFDF8 !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(23, 61, 54, 0.25);
}

.btn-flip-action.is-current {
    background: #E8D49E !important;
    color: #173D36 !important;
    border-color: #D3BC7E !important;
}

.btn-flip-action.is-current:hover {
    background: #DCC382 !important;
    color: #173D36 !important;
}

/* ==========================================================================
   Riwaq Modern Permission Switch Cards & Settings UI
   ========================================================================== */
.riwaq-permission-group {
    background: #FAF8F2;
    border: 1px solid #E2D9C8;
    border-radius: 12px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.riwaq-permission-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2px;
}

.riwaq-permission-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--green);
    font-family: 'Noto Naskh Arabic', serif;
}

.riwaq-permission-subtitle {
    font-size: 11.5px;
    color: #7A7264;
    line-height: 1.45;
    margin: 0 0 4px;
}

.riwaq-switch-tile {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    background: #FFFDF9;
    border: 1px solid #ECE4D5;
    border-radius: 10px;
    padding: 10px 14px;
    cursor: pointer;
    transition: all 0.22s ease;
    user-select: none;
    margin: 0;
}

.riwaq-switch-tile:hover {
    background: #FFFFFF;
    border-color: #C3A15D;
    box-shadow: 0 3px 12px rgba(23, 61, 54, 0.06);
    transform: translateY(-1px);
}

.riwaq-switch-tile-content {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
}

.riwaq-switch-tile-icon {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: rgba(195, 161, 93, 0.12);
    color: #8C6D2C;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.riwaq-switch-tile-texts {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.riwaq-switch-tile-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--ink);
    line-height: 1.35;
}

.riwaq-switch-tile-desc {
    font-size: 11.5px;
    color: var(--sub);
    line-height: 1.35;
}

/* Riwaq Modern iOS/Emerald Switch Component */
.riwaq-toggle-switch {
    position: relative;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
    display: inline-block;
}

.riwaq-toggle-switch input {
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    position: absolute !important;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: none;
}

.riwaq-toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #D6CEBE;
    transition: background-color 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 24px;
}

.riwaq-toggle-slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    right: 3px;
    top: 3px;
    background-color: #FFFFFF;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 50%;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.22);
}

.riwaq-toggle-switch input:checked + .riwaq-toggle-slider {
    background-color: var(--green);
}

.riwaq-toggle-switch input:checked + .riwaq-toggle-slider:before {
    transform: translateX(-20px);
}

[dir="ltr"] .riwaq-toggle-slider:before {
    right: auto;
    left: 3px;
}

[dir="ltr"] .riwaq-toggle-switch input:checked + .riwaq-toggle-slider:before {
    transform: translateX(20px);
}