@import "https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@100;200;300;400;500;600;700&display=swap";:root{--brand-primary:#5b0b7d;--brand-primary-light:#9f69d5;--brand-primary-dark:#3f1870;--brand-accent:#d4af37;--brand-accent-light:#e8cc6a;--brand-accent-muted:#8b6914;--surface-page:#faf6f0;--surface-card:#fffdf9;--surface-elevated:#fff;--surface-sunken:#f3ecfa;--surface-overlay:#1a0a2e80;--text-primary:#1e0f30;--text-secondary:#5a4670;--text-muted:#8a7a9a;--text-inverse:#fff;--border-default:#5b0b7d14;--border-subtle:#5b0b7d0a;--border-strong:#5b0b7d26;--shadow-sm:0 1px 3px #1a0a2e0f;--shadow-md:0 4px 16px #1a0a2e14;--shadow-lg:0 8px 32px #1a0a2e1a;--shadow-glow:0 0 40px #5b0b7d14;--header-bg:linear-gradient(135deg, #1a0a2e 0%, #3f1870 50%, #2d1150 100%);--header-text:#fff;--header-nav:#ffffffb3;--header-nav-hover:#fff;--header-nav-active:#e8cc6a;--header-accent:linear-gradient(90deg, #d4af37, #b8860b, #d4af37);--footer-bg:#1a0a2e;--footer-text:#ffffff80;--radius-sm:6px;--radius-md:12px;--radius-lg:20px;--transition-fast:.15s ease;--transition:.3s cubic-bezier(.4, 0, .2, 1);--font-display:"IBM Plex Sans Arabic", sans-serif;--font-body:"IBM Plex Sans Arabic", sans-serif;--card-bg:var(--surface-card);--card-border:var(--border-default);--card-hover-shadow:var(--shadow-md);--card-accent-bar:var(--brand-primary-light);--badge-bg:var(--surface-sunken);--badge-text:var(--brand-primary);--badge-featured-bg:#fbf4d6;--badge-featured-text:#8b6914;--input-bg:var(--surface-card);--input-border:#5b0b7d1a;--input-focus-border:var(--brand-primary-light);--input-text:var(--text-primary);--input-placeholder:var(--text-muted);--counter-current-bg:linear-gradient(to left, #d4af3714, #d4af3726);--counter-current-text:#8b6914;--counter-current-border:#d4af37;--table-header-bg:linear-gradient(135deg, #3f1870, #5b0b7d);--table-row-alt:var(--surface-sunken);--table-row-hover:#9f69d514;--pattern-opacity:.018}[data-theme=dark]{--surface-page:#0f0a1a;--surface-card:#1c1330;--surface-elevated:#261a40;--surface-sunken:#16102a;--surface-overlay:#0009;--text-primary:#f0eaf8;--text-secondary:#baaed0;--text-muted:#9080a8;--text-inverse:#0f0a1a;--border-default:#b48ce62e;--border-subtle:#b48ce61a;--border-strong:#b48ce647;--shadow-sm:0 1px 3px #0006;--shadow-md:0 4px 16px #00000080;--shadow-lg:0 8px 32px #0009;--shadow-glow:0 0 40px #5b0b7d40;--header-bg:linear-gradient(135deg, #0a0618 0%, #1a0a2e 50%, #0f0a1a 100%);--footer-bg:#0a0618;--footer-text:#ffffff73;--card-bg:var(--surface-card);--card-border:var(--border-default);--card-hover-shadow:var(--shadow-md);--card-accent-bar:var(--brand-primary-light);--badge-bg:#b48ce62e;--badge-text:#d4b8f0;--badge-featured-bg:#d4af3733;--badge-featured-text:#f0d860;--input-bg:var(--surface-elevated);--input-border:#b48ce633;--input-focus-border:var(--brand-primary-light);--input-text:var(--text-primary);--input-placeholder:var(--text-muted);--counter-current-bg:linear-gradient(to left, #d4af371f, #d4af3738);--counter-current-text:#f0d860;--counter-current-border:#d4af37;--table-header-bg:linear-gradient(135deg, #1a0a2e, #2d1150);--table-row-alt:#b48ce60f;--table-row-hover:#b48ce61f;--pattern-opacity:.035}[data-season=spring]{--brand-primary:#166534;--brand-primary-light:#4ade80;--brand-primary-dark:#14532d;--brand-accent:#a3e635;--brand-accent-light:#d9f99d;--brand-accent-muted:#4d7c0f;--surface-page:#f7fdf4;--surface-card:#fcfff9;--surface-sunken:#ecfce5;--badge-bg:#ecfce5;--badge-text:#166534;--header-bg:linear-gradient(135deg, #052e16 0%, #166534 50%, #14532d 100%);--header-accent:linear-gradient(90deg, #4ade80, #a3e635, #4ade80);--header-nav-active:#d9f99d;--footer-bg:#052e16;--table-header-bg:linear-gradient(135deg, #14532d, #166534);--counter-current-bg:linear-gradient(to left, #4ade8014, #4ade8026);--counter-current-text:#166534;--counter-current-border:#4ade80}[data-season=summer]{--brand-primary:#92400e;--brand-primary-light:#fbbf24;--brand-primary-dark:#78350f;--brand-accent:#f59e0b;--brand-accent-light:#fde68a;--brand-accent-muted:#92400e;--surface-page:#fffbf0;--surface-card:#fffdf5;--surface-sunken:#fef3c7;--badge-bg:#fef3c7;--badge-text:#92400e;--header-bg:linear-gradient(135deg, #451a03 0%, #92400e 50%, #78350f 100%);--header-accent:linear-gradient(90deg, #fbbf24, #f59e0b, #fbbf24);--header-nav-active:#fde68a;--footer-bg:#451a03;--table-header-bg:linear-gradient(135deg, #78350f, #92400e);--counter-current-bg:linear-gradient(to left, #fbbf2414, #fbbf2426);--counter-current-text:#92400e;--counter-current-border:#fbbf24}[data-season=fall]{--brand-primary:#9a3412;--brand-primary-light:#fb923c;--brand-primary-dark:#7c2d12;--brand-accent:#ea580c;--brand-accent-light:#fdba74;--brand-accent-muted:#9a3412;--surface-page:#fdf8f3;--surface-card:#fffcf8;--surface-sunken:#ffedd5;--badge-bg:#ffedd5;--badge-text:#9a3412;--header-bg:linear-gradient(135deg, #431407 0%, #9a3412 50%, #7c2d12 100%);--header-accent:linear-gradient(90deg, #fb923c, #ea580c, #fb923c);--header-nav-active:#fdba74;--footer-bg:#431407;--table-header-bg:linear-gradient(135deg, #7c2d12, #9a3412);--counter-current-bg:linear-gradient(to left, #fb923c14, #fb923c26);--counter-current-text:#9a3412;--counter-current-border:#fb923c}[data-season=winter]{--brand-primary:#1e3a5f;--brand-primary-light:#60a5fa;--brand-primary-dark:#172554;--brand-accent:#3b82f6;--brand-accent-light:#93c5fd;--brand-accent-muted:#1e40af;--surface-page:#f0f5fa;--surface-card:#f8fafd;--surface-sunken:#dbeafe;--badge-bg:#dbeafe;--badge-text:#1e3a5f;--header-bg:linear-gradient(135deg, #0c1929 0%, #1e3a5f 50%, #172554 100%);--header-accent:linear-gradient(90deg, #60a5fa, #3b82f6, #60a5fa);--header-nav-active:#93c5fd;--footer-bg:#0c1929;--table-header-bg:linear-gradient(135deg, #172554, #1e3a5f);--counter-current-bg:linear-gradient(to left, #60a5fa14, #60a5fa26);--counter-current-text:#1e3a5f;--counter-current-border:#60a5fa}[data-theme=dark][data-season=spring]{--surface-page:#081408;--surface-card:#122214;--surface-elevated:#1a301c;--surface-sunken:#0c1c0e;--text-secondary:#a8d4ac;--text-muted:#78aa7e;--border-default:#4ade802e;--border-subtle:#4ade801a;--badge-bg:#4ade8026;--badge-text:#a8e8b8;--footer-bg:#050e06;--footer-text:#ffffff73;--table-header-bg:linear-gradient(135deg, #052e16, #166534);--counter-current-text:#a8e8b8}[data-theme=dark][data-season=summer]{--surface-page:#1a1006;--surface-card:#281c0a;--surface-elevated:#36260e;--surface-sunken:#1e1408;--text-secondary:#d4bc90;--text-muted:#a89470;--border-default:#fbbf242e;--border-subtle:#fbbf241a;--badge-bg:#fbbf2426;--badge-text:#fde68a;--footer-bg:#120a04;--footer-text:#ffffff73;--table-header-bg:linear-gradient(135deg, #451a03, #78350f);--counter-current-text:#fde68a}[data-theme=dark][data-season=fall]{--surface-page:#180e08;--surface-card:#26180c;--surface-elevated:#342010;--surface-sunken:#1c1208;--text-secondary:#d4a888;--text-muted:#a88068;--border-default:#fb923c2e;--border-subtle:#fb923c1a;--badge-bg:#fb923c26;--badge-text:#fdcc98;--footer-bg:#110a06;--footer-text:#ffffff73;--table-header-bg:linear-gradient(135deg, #431407, #7c2d12);--counter-current-text:#fdcc98}[data-theme=dark][data-season=winter]{--surface-page:#0a1020;--surface-card:#121c30;--surface-elevated:#1a2640;--surface-sunken:#0e1628;--text-secondary:#90b8d8;--text-muted:#6890b0;--border-default:#60a5fa2e;--border-subtle:#60a5fa1a;--badge-bg:#60a5fa26;--badge-text:#a8d0f8;--footer-bg:#080c18;--footer-text:#ffffff73;--table-header-bg:linear-gradient(135deg, #0c1929, #172554);--counter-current-text:#a8d0f8}*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{font-family:var(--font-body);background:var(--surface-page);color:var(--text-primary);-webkit-font-smoothing:antialiased;min-height:100vh;transition:background var(--transition), color var(--transition);direction:rtl;line-height:1.9}#root{flex-direction:column;width:100%;min-height:100vh;display:flex}#root>*{width:100%}body:before{content:"";opacity:var(--pattern-opacity);pointer-events:none;z-index:0;background-image:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 0L60 30L30 60L0 30Z' fill='none' stroke='%235B0B7D' stroke-width='0.5'/%3E%3Cpath d='M30 10L50 30L30 50L10 30Z' fill='none' stroke='%235B0B7D' stroke-width='0.3'/%3E%3C/svg%3E");background-size:60px 60px;position:fixed;inset:0}a{color:var(--brand-primary);transition:color var(--transition);text-decoration:none}a:hover{color:var(--brand-accent)}[data-theme=dark] a{color:var(--brand-primary-light)}img{max-width:100%;height:auto}.container{z-index:1;max-width:1140px;margin:0 auto;padding:0 24px;position:relative}.header-wrapper{z-index:100;pointer-events:none;padding:14px 24px 0;position:fixed;top:0;left:0;right:0}.site-header{-webkit-backdrop-filter:blur(24px)saturate(1.8);pointer-events:auto;max-width:1140px;transition:background var(--transition), border-color var(--transition), border-radius var(--transition);background:#1a0a2ea6;border:1px solid #ffffff14;border-radius:9999px;margin:0 auto;box-shadow:0 4px 24px #00000026}.site-header.mobile-open{border-radius:20px}[data-theme=dark] .site-header{background:#0a0618b3;border-color:#9f69d51a}.header-inner{justify-content:space-between;align-items:center;height:52px;padding:0 20px;display:flex}.site-logo{align-items:center;gap:10px;display:flex}.site-logo .logo-icon{background:linear-gradient(135deg, var(--brand-accent), var(--brand-accent-muted));width:32px;height:32px;font-family:var(--font-display);color:#1a0a2e;border-radius:8px;flex-shrink:0;justify-content:center;align-items:center;font-size:1.1rem;font-weight:700;display:flex}.site-logo h1{font-family:var(--font-display);color:#fff;font-size:1.05rem;font-weight:700;line-height:1.2}.site-logo h1 a{color:#fff}.site-logo h1 a:hover{color:var(--brand-accent-light)}.site-logo .subtitle{display:none}.nav-desktop{align-items:center;gap:2px;display:flex}.nav-desktop a{color:#fff9;transition:all var(--transition);border-radius:9999px;padding:6px 14px;font-size:.82rem;font-weight:500}.nav-desktop a:hover{color:#fff;background:#ffffff1a}.nav-desktop a.active{color:#fff;background:#ffffff26}.nav-actions{align-items:center;gap:6px;display:flex}.theme-toggle{color:#fff;cursor:pointer;width:34px;height:34px;transition:all var(--transition);background:#ffffff14;border:none;border-radius:9999px;justify-content:center;align-items:center;font-size:.9rem;display:flex}.theme-toggle:hover{background:#ffffff26}.nav-hamburger{color:#fff;cursor:pointer;width:34px;height:34px;transition:all var(--transition);background:0 0;border:none;border-radius:9999px;justify-content:center;align-items:center;font-size:1.2rem;display:none}.nav-hamburger:hover{background:#ffffff1a}.nav-mobile{border-top:1px solid #ffffff14;padding:12px 16px 16px;display:none}.nav-mobile.open{flex-direction:column;gap:2px;display:flex}.nav-mobile a{color:#fff9;transition:all var(--transition);border-radius:12px;padding:10px 16px;font-size:.88rem;font-weight:500}.nav-mobile a:hover{color:#fff;background:#ffffff14}.nav-mobile a.active{color:#fff;background:#ffffff1f}.header-spacer{height:80px}@media (width<=768px){.header-wrapper{padding:10px 12px 0}.nav-desktop{display:none}.nav-hamburger{display:flex}}main{flex:1;padding:20px 0 36px}.site-footer{background:var(--footer-bg);color:var(--footer-text);text-align:center;margin-top:50px;padding:28px 0;font-size:.82rem;position:relative}.site-footer:before{content:"";background:linear-gradient(90deg, transparent, var(--brand-accent), transparent);height:2px;position:absolute;top:0;left:0;right:0}.page-title{font-family:var(--font-display);color:var(--text-primary);margin-bottom:28px;padding-bottom:14px;font-size:1.6rem;position:relative}.page-title:after{content:"";background:linear-gradient(to left, var(--brand-accent), transparent);border-radius:2px;width:80px;height:3px;position:absolute;bottom:0;right:0}.page-title .count{color:var(--text-muted);font-size:.9rem;font-family:var(--font-body);font-weight:400}.card{background:var(--card-bg);border-radius:var(--radius-md);border:1px solid var(--card-border);transition:all var(--transition);margin-bottom:14px;padding:22px 26px;position:relative;overflow:hidden}.card:before{content:"";background:var(--card-accent-bar);opacity:0;width:4px;height:100%;transition:opacity var(--transition);position:absolute;top:0;right:0}.card:hover{box-shadow:var(--card-hover-shadow);border-color:var(--border-strong);transform:translateY(-1px)}.card:hover:before{opacity:1}.card h2{font-family:var(--font-display);color:var(--text-primary);margin-bottom:8px;font-size:1.15rem;font-weight:700;line-height:1.7}.card .meta{color:var(--text-muted);flex-wrap:wrap;align-items:center;gap:10px;font-size:.78rem;display:flex}.card .meta .separator{background:var(--brand-primary-light);border-radius:50%;width:3px;height:3px}.views-badge{background:var(--badge-bg);color:var(--badge-text);border-radius:20px;align-items:center;gap:4px;padding:2px 10px;font-size:.72rem;font-weight:600;display:inline-flex}.featured-badge{background:var(--badge-featured-bg);color:var(--badge-featured-text);border-radius:20px;align-items:center;gap:4px;padding:2px 10px;font-size:.72rem;font-weight:600;display:inline-flex}.article-content{background:var(--card-bg);border-radius:var(--radius-lg);border:1px solid var(--card-border);box-shadow:var(--shadow-glow);padding:40px 44px;line-height:2.1}.article-content .back-link{color:var(--text-muted);transition:color var(--transition);align-items:center;gap:6px;margin-bottom:20px;font-size:.85rem;display:inline-flex}.article-content .back-link:hover{color:var(--brand-primary)}.article-content h1{font-family:var(--font-display);color:var(--text-primary);margin-bottom:8px;font-size:1.7rem;line-height:1.6}.article-content .title-bar{border-bottom:2px solid var(--border-default);margin-bottom:10px;padding-bottom:16px;position:relative}.article-content .title-bar:after{content:"";background:var(--brand-accent);width:60px;height:2px;position:absolute;bottom:-2px;right:0}.article-content .meta{color:var(--text-muted);flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:30px;font-size:.82rem;display:flex}.article-content .body-content{color:var(--text-primary);font-size:1.05rem}.article-content .body-content p{margin-bottom:16px}.article-content .body-content img{border-radius:var(--radius-md);box-shadow:var(--shadow-sm);margin:20px 0}.article-content .body-content iframe{border-radius:var(--radius-md);max-width:100%;margin:20px 0}.article-content .body-content table{border-collapse:collapse;width:100%;margin:20px 0;font-size:.9rem}.article-content .body-content td,.article-content .body-content th{border:1px solid var(--border-default);text-align:right;padding:10px 14px}.article-content .body-content th{background:var(--surface-sunken);font-weight:600}.article-content .body-content hr{background:linear-gradient(to left, var(--border-default), transparent);border:none;height:1px;margin:28px 0}.article-content .body-content blockquote{border-right:4px solid var(--brand-accent);background:var(--badge-featured-bg);border-radius:0 var(--radius-sm) var(--radius-sm) 0;margin:16px 0;padding:12px 20px}.article-content .body-content strong{color:var(--brand-primary)}[data-theme=dark] .article-content .body-content strong{color:var(--brand-primary-light)}.tafsir-grid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:22px;display:grid}.tafsir-card{background:var(--card-bg);border-radius:var(--radius-md);border:1px solid var(--card-border);transition:all var(--transition);overflow:hidden}.tafsir-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-3px)}.tafsir-card .tafsir-img-wrap{aspect-ratio:4/3;background:var(--surface-sunken);position:relative;overflow:hidden}.tafsir-card img{object-fit:cover;width:100%;height:100%;transition:transform .5s}.tafsir-card:hover img{transform:scale(1.05)}.tafsir-card .tafsir-title{font-family:var(--font-display);color:var(--text-primary);border-top:2px solid var(--badge-featured-bg);padding:16px 18px;font-size:.95rem;line-height:1.8}.prayer-section{background:var(--card-bg);border-radius:var(--radius-lg);border:1px solid var(--card-border);box-shadow:var(--shadow-glow);padding:30px}.prayer-section .city-info{color:var(--text-primary);font-size:1.1rem;font-weight:600;font-family:var(--font-display);margin-bottom:20px}.city-select{font-size:.95rem;font-family:var(--font-body);border:2px solid var(--input-border);border-radius:var(--radius-md);background:var(--input-bg);color:var(--input-text);cursor:pointer;min-width:240px;transition:border-color var(--transition);appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%235B0B7D' d='M6 8L1 3h10z'/%3E%3C/svg%3E");background-position:16px;background-repeat:no-repeat;margin-bottom:24px;padding:12px 20px 12px 40px}.city-select:focus{border-color:var(--input-focus-border);outline:none;box-shadow:0 0 0 3px #5b0b7d14}.counter-grid{grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:22px;display:grid}.counter-card{background:var(--card-bg);border-radius:var(--radius-lg);border:1px solid var(--card-border);box-shadow:var(--shadow-sm);overflow:hidden}.counter-card h3{background:var(--table-header-bg);color:var(--text-inverse);font-family:var(--font-display);padding:14px 20px;font-size:1.05rem;position:relative}.counter-card h3:after{content:"";background:linear-gradient(to left, var(--brand-accent), transparent);height:2px;position:absolute;bottom:0;left:0;right:0}.counter-item{border-bottom:1px solid var(--border-subtle);color:var(--text-secondary);transition:background var(--transition);padding:12px 20px;font-size:.88rem}.counter-item:last-child{border-bottom:none}.counter-item:hover{background:var(--table-row-hover)}.counter-item.current{background:var(--counter-current-bg);color:var(--counter-current-text);border-right:4px solid var(--counter-current-border);font-weight:700}.search-wrap{margin-bottom:24px;position:relative}.search-input{width:100%;font-size:.95rem;font-family:var(--font-body);border:2px solid var(--input-border);border-radius:var(--radius-lg);background:var(--input-bg);color:var(--input-text);transition:all var(--transition);padding:14px 48px 14px 24px}.search-input:focus{border-color:var(--input-focus-border);outline:none;box-shadow:0 0 0 4px #5b0b7d0f}.search-input::placeholder{color:var(--input-placeholder)}.search-icon{color:var(--brand-primary-light);font-size:1.1rem;position:absolute;top:50%;right:18px;transform:translateY(-50%)}.pagination{flex-wrap:wrap;justify-content:center;gap:6px;margin:36px 0;display:flex}.pagination button{border:1px solid var(--border-default);background:var(--card-bg);border-radius:var(--radius-sm);cursor:pointer;width:38px;height:38px;font-family:var(--font-body);color:var(--text-secondary);transition:all var(--transition);justify-content:center;align-items:center;font-size:.85rem;display:flex}.pagination button:hover{background:var(--surface-sunken);border-color:var(--brand-primary-light)}.pagination button.active{background:var(--table-header-bg);color:var(--text-inverse);border-color:var(--brand-primary);box-shadow:var(--shadow-sm)}.hero{background:var(--header-bg);border-radius:var(--radius-lg);color:var(--text-inverse);margin-bottom:36px;padding:48px 44px;position:relative;overflow:hidden}.hero:before{content:"";opacity:.03;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M40 0L80 40L40 80L0 40Z' fill='none' stroke='%23D4AF37' stroke-width='0.5'/%3E%3Ccircle cx='40' cy='40' r='20' fill='none' stroke='%23D4AF37' stroke-width='0.3'/%3E%3C/svg%3E");background-size:80px 80px;width:200%;height:200%;position:absolute;top:-50%;left:-50%}.hero h2{font-family:var(--font-display);margin-bottom:10px;font-size:2rem;position:relative}.hero p{color:#ffffffb3;max-width:500px;font-size:.95rem;position:relative}.hero .hero-accent{border:2px solid var(--brand-accent);opacity:.15;border-radius:50%;width:80px;height:80px;position:absolute;bottom:20px;left:30px}.loading-state,.empty-state{text-align:center;color:var(--text-muted);padding:60px 20px}.loading-spinner{border:3px solid var(--border-default);border-top-color:var(--brand-primary);border-radius:50%;width:36px;height:36px;margin:0 auto 16px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}@media (width<=768px){.container{padding:0 16px}.hero{padding:32px 24px}.hero h2{font-size:1.5rem}.article-content{padding:24px 20px}.article-content h1{font-size:1.3rem}.prayer-section{padding:20px}.tafsir-grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}.counter-grid{grid-template-columns:1fr}}@media (width<=480px){.tafsir-grid{grid-template-columns:1fr}}