:root {
    --bg-primary:#0B1523;
    --bg-secondary:#111F33;
    --bg-card:#162338;
    --bg-card-hover:#1C2E47;
    --gold:#C9A84C;
    --gold-light:#E6C96A;
    --gold-dim:rgba(201,168,76,0.15);
    --teal:#1E8A6E;
    --teal-light:#25AA87;
    --teal-dim:rgba(30,138,110,0.12);
    --text-primary:#EDF2F7;
    --text-secondary:#A0AEC0;
    --text-muted:#617284;
    --border:rgba(201,168,76,0.18);
    --border-card:rgba(255,255,255,0.07);
    --radius:12px;
    --transition:0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}

body{
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background:var(--bg-primary);
    color:var(--text-primary);
    min-height:100vh;
    direction:rtl;
    text-align:right;
    overflow-x:hidden;
}

body::before{
    content:'';
    position:fixed;
    inset:0;
    background-image:radial-gradient(ellipse 80% 60% at 20% 0%,rgba(30,138,110,0.10) 0%,transparent 60%),radial-gradient(ellipse 60% 80% at 80% 100%,rgba(201,168,76,0.07) 0%,transparent 60%);
    pointer-events:none;
    z-index:0;
}

/* ============================================================
 N AVBAR (الهيدر العلوي للموقع)                                                                                                                                                                                     *
 ============================================================ */
.site-nav{position:sticky;top:0;z-index:100;background:rgba(11,21,35,0.92);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid var(--border-card);padding:14px 24px;display:flex;align-items:center;gap:16px}

.site-nav a.nav-logo,
.site-nav a.nav-logo *,
.site-nav a.nav-logo:visited {
    font-size:14px !important;
    color: #E6C96A !important;
    text-decoration:none !important;
    font-weight:700 !important;
    padding: 8px 16px;
    background: var(--bg-card);
    border: 1px solid rgba(201, 168, 76, 0.35);
    border-radius: 8px;
    transition: var(--transition);
    display: inline-block;
}
.site-nav a.nav-logo:hover{
    background: var(--bg-card-hover) !important;
    border-color: #E6C96A !important;
    color: #fff !important;
    transform: translateY(-1px);
}
.nav-sep{color:var(--text-muted);font-size:12px}
.nav-current{font-size:13px;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:400px}

/* MAIN */
.story-page{max-width:820px;margin:0 auto;padding:40px 24px 80px;position:relative;z-index:1}

/* ============================================================
 H EADER & TITLE (تعديل لون عنوان القصة للأصفر الفاتح)                                                                                                                                                              *
 ============================================================ */
.story-header{margin-bottom:36px;animation:fadeUp .6s ease both}
.story-badges{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.badge{border-radius:100px;padding:4px 14px;font-size:12px;font-weight:600}
.badge-num{background:var(--gold-dim);border:1px solid var(--border);color:var(--gold)}
.badge-cat{background:var(--teal-dim);border:1px solid rgba(30,138,110,0.3);color:var(--teal-light)}
.badge-country{background:rgba(255,255,255,0.05);border:1px solid var(--border-card);color:var(--text-secondary)}

/* فرض اللون الأصفر الفاتح على عنوان القصة الرئيسي */
.story-title {
    font-size: clamp(22px, 4vw, 30px);
    font-weight: 700;
    line-height: 1.5;
    color: #E6C96A !important; /* اللون الأصفر الذهبي الفاتح والواضح */
    margin-bottom: 16px;
}
.story-divider{height:2px;background:linear-gradient(90deg,var(--gold),var(--teal),transparent);border-radius:2px;margin-bottom:32px}

/* CONTENT */
.story-content{animation:fadeUp .7s .1s ease both}
.story-content h3{font-size:18px; color:var(--text-primary); margin-bottom:16px; font-weight:700;}
.story-content h2{font-size:22px; color:var(--gold-light); margin:28px 0 14px; line-height:1.5; border-right:3px solid var(--gold); padding-right:12px}
.story-content p {
    font-size:16px;line-height:1.9;color:var(--text-secondary);
    margin-bottom:18px;
}

/* Quran verses block */
.quran-box {
    background: var(--gold-dim);
    border-right: 3px solid var(--gold);
    border-radius: 0 var(--radius) var(--radius) 0;
    padding: 16px 20px;
    color: var(--text-primary);
    font-size: 16.5px;
    line-height: 2;
    margin: 24px 0;
}

/* ============================================================
 S TORY BOTTOM NAVIGATION CARDS (الروابط السفلية الشاملة والمباشرة)                                                                                                                                                 *
 ============================================================ */
.story-nav {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin-top: 60px;
    padding-top: 30px;
    border-top: 1px solid var(--border-card);
    animation: fadeUp .8s .2s ease both;
}

.story-nav a,
.story-nav a *,
.story-nav a:visited,
.story-nav a:visited * {
    color: #E6C96A !important;
    text-decoration: none !important;
}

.story-nav a {
    background: var(--bg-card) !important;
    border: 1px solid rgba(201, 168, 76, 0.35) !important;
    border-radius: var(--radius);
    padding: 16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    transition: var(--transition);
    position: relative;
    overflow: hidden;
}

.story-nav a div,
.story-nav a span {
    margin-bottom: 4px;
    font-size: 14px;
    font-weight: 600;
}

.story-nav a:hover,
.story-nav a:hover * {
    background: var(--bg-card-hover) !important;
    border-color: #E6C96A !important;
    color: #fff !important;
}

.story-nav a:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 8px 24px rgba(201, 168, 76, 0.18) !important;
}

/* FOOTER */
.site-footer{text-align:center;padding:36px 24px;border-top:1px solid var(--border-card);color:var(--text-muted);font-size:13px;position:relative;z-index:1}

@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
::-webkit-scrollbar{width:5px}::-webkit-scrollbar-track{background:var(--bg-primary)}::-webkit-scrollbar-thumb{background:var(--text-muted);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--gold)}