:root{
  --teal-deep:#071A1A;--teal-mid:#0B2A2A;--teal-rich:#0E3535;
  --gold:#C8922A;--gold-light:#E8B84B;--gold-pale:#F5E6C8;
  --cream:#FAF6EE;--text:#2C1A06;--text-inv:#FFFFFF;
  --green:#1B4332;--green-light:#2D6A4F;--emerald:#1B7A55;
  --blue:#0D2147;--indigo:#1A3A8F;--ruby:#9B2C2C;
  --shadow-gold:rgba(200,146,42,0.18);--border-gold:rgba(200,146,42,0.22);
  --inv-dim:rgba(255,255,255,0.58);--inv-dimmer:rgba(255,255,255,0.34);
  --font-scale:1;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth} body{font-family:'Cairo',sans-serif;background:var(--cream);color:var(--text);min-height:100vh;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;background:radial-gradient(circle at 15% 15%,rgba(200,146,42,.06) 0%,transparent 48%),radial-gradient(circle at 85% 85%,rgba(27,67,50,.06) 0%,transparent 46%);pointer-events:none;z-index:0}.page{position:relative;z-index:1}.wrap{max-width:960px;margin:0 auto;padding:0 18px;position:relative;z-index:1}.site-header{position:sticky;top:0;z-index:200;height:66px;padding:0 22px;display:flex;align-items:center;justify-content:space-between;gap:12px;background:linear-gradient(135deg,var(--teal-mid) 0%,var(--teal-rich) 55%,var(--teal-mid) 100%);border-bottom:1px solid rgba(200,146,42,.38);box-shadow:0 4px 24px rgba(0,0,0,.38),inset 0 1px 0 rgba(200,146,42,.15)}.site-header::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--gold),var(--gold-light),var(--gold),transparent);opacity:.75}.hdr-logo{display:flex;align-items:center;gap:10px;text-decoration:none;flex-shrink:0}.hdr-logo img{width:44px;height:44px;border-radius:50%;border:2px solid rgba(200,146,42,.6);object-fit:cover}.logo-fb{width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,var(--gold),var(--gold-light));display:flex;align-items:center;justify-content:center;font-size:1.3rem;border:2px solid rgba(200,146,42,.6);flex-shrink:0}.hdr-name-ar{font-family:'Amiri',serif;font-size:1.05rem;color:var(--gold-light);font-weight:700;display:block;line-height:1.25;text-shadow:0 1px 6px rgba(0,0,0,.5)}.hdr-name-en{font-size:.62rem;color:rgba(255,255,255,.35);letter-spacing:2px;text-transform:uppercase;display:block}.hdr-pill{flex:1;display:flex;justify-content:center}.hdr-pill-inner{background:rgba(200,146,42,.1);border:1px solid rgba(200,146,42,.3);border-radius:22px;padding:5px 18px;font-size:calc(.76rem * var(--font-scale));font-weight:700;color:var(--gold-light);white-space:nowrap}.hdr-actions{display:flex;align-items:center;gap:8px}.hdr-btn{display:flex;align-items:center;gap:6px;background:rgba(255,255,255,.06);color:rgba(255,255,255,.75);font-family:'Cairo',sans-serif;font-size:.78rem;font-weight:800;padding:7px 12px;border-radius:10px;text-decoration:none;border:1px solid rgba(255,255,255,.11);cursor:pointer;white-space:nowrap;flex-shrink:0;transition:.2s}.hdr-btn.gold{background:linear-gradient(135deg,var(--gold),var(--gold-light));color:var(--teal-mid);border:none;box-shadow:0 3px 12px rgba(200,146,42,.4)}.hdr-btn:hover{transform:translateY(-1px);border-color:rgba(200,146,42,.35);color:var(--gold-light)}.hdr-btn.gold:hover{color:var(--teal-mid);box-shadow:0 6px 20px rgba(200,146,42,.55)}@media(max-width:620px){.hdr-pill{display:none}.site-header{padding:0 12px}.hdr-name-en{display:none}.hdr-btn span{display:none}.hdr-btn{padding:8px 10px}.hdr-logo img,.logo-fb{width:40px;height:40px}.hdr-name-ar{font-size:.92rem}}
.hero{background:linear-gradient(160deg,var(--teal-mid) 0%,var(--teal-rich) 55%,#122222 100%);position:relative;overflow:hidden;padding:46px 20px 40px;text-align:center}.hero::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 0%,rgba(200,146,42,.13) 0%,transparent 65%),radial-gradient(ellipse at 16% 100%,rgba(46,204,113,.06) 0%,transparent 50%);pointer-events:none}.hero-inner{position:relative;z-index:1}.hero-badge{display:inline-flex;align-items:center;gap:7px;background:rgba(200,146,42,.12);border:1px solid rgba(200,146,42,.3);border-radius:30px;padding:5px 16px;font-size:.72rem;color:var(--gold-light);font-weight:800;letter-spacing:1.2px;margin-bottom:13px}.hero h1{font-family:'Amiri',serif;font-size:clamp(2rem,6vw,3.35rem);color:#fff;font-weight:700;line-height:1.28;margin-bottom:10px}.hero h1 .gold{color:var(--gold-light)}.hero-sub{font-size:calc(.92rem * var(--font-scale));color:var(--inv-dim);max-width:620px;margin:0 auto;line-height:1.85}.sec-head{display:flex;align-items:center;gap:14px;margin:34px 0 18px}.sec-badge{font-size:calc(.72rem * var(--font-scale));font-weight:900;padding:5px 14px;border-radius:20px;white-space:nowrap;color:#fff}.sec-badge.emerald{background:linear-gradient(135deg,#0F4C35,#1B7A55)}.sec-badge.indigo{background:linear-gradient(135deg,#1A3A8F,#2456CC)}.sec-badge.amber{background:linear-gradient(135deg,#7A4A00,#C8922A)}.sec-badge.ruby{background:linear-gradient(135deg,#7A1A1A,#C0392B)}.sec-title{font-family:'Amiri',serif;font-size:calc(1.35rem * var(--font-scale));color:var(--text);font-weight:700}.sec-line{flex:1;height:1px;background:linear-gradient(90deg,rgba(200,146,42,.3),transparent)}.grid{display:grid;gap:14px}.grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}.grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}.card{background:#fff;border:1px solid rgba(200,146,42,.15);border-radius:18px;box-shadow:0 8px 26px rgba(0,0,0,.06);overflow:hidden}.card.dark{background:linear-gradient(135deg,var(--teal-mid),var(--teal-rich));border-color:rgba(200,146,42,.25);box-shadow:0 10px 34px rgba(0,0,0,.18);color:#fff}.card-body{padding:18px}.card-title{font-family:'Amiri',serif;font-size:calc(1.25rem * var(--font-scale));font-weight:700;line-height:1.35;color:inherit;margin-bottom:6px}.card-sub{font-size:calc(.88rem * var(--font-scale));line-height:1.8;color:rgba(44,26,6,.62)}.dark .card-sub{color:rgba(255,255,255,.56)}.pill{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;background:rgba(200,146,42,.1);border:1px solid rgba(200,146,42,.18);color:var(--gold);font-size:calc(.68rem * var(--font-scale));font-weight:900}.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:none;border-radius:14px;padding:10px 15px;font-family:'Cairo',sans-serif;font-size:calc(.84rem * var(--font-scale));font-weight:900;cursor:pointer;text-decoration:none;transition:.2s}.btn.gold{background:linear-gradient(135deg,var(--gold),var(--gold-light));color:var(--teal-mid);box-shadow:0 4px 14px rgba(200,146,42,.28)}.btn.green{background:linear-gradient(135deg,var(--green),var(--green-light));color:#fff}.btn.ghost{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);color:rgba(255,255,255,.78)}.btn.light{background:#fff;border:1px solid rgba(200,146,42,.18);color:var(--text)}.btn:hover{transform:translateY(-1px)}.actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}.textarea,.input{width:100%;border:1px solid rgba(200,146,42,.18);border-radius:14px;background:#fff;color:var(--text);font-family:'Cairo',sans-serif;font-size:calc(.95rem * var(--font-scale));line-height:1.8;padding:12px 14px;outline:none}.textarea{min-height:118px;resize:vertical}.textarea:focus,.input:focus{border-color:rgba(200,146,42,.55);box-shadow:0 0 0 4px rgba(200,146,42,.08)}.toggle-row{display:flex;align-items:flex-start;gap:12px;padding:14px;border-radius:14px;background:#fff;border:1px solid rgba(200,146,42,.14);box-shadow:0 4px 18px rgba(0,0,0,.035)}.check{width:24px;height:24px;min-width:24px;accent-color:var(--green-light);margin-top:3px}.row-title{font-size:calc(.95rem * var(--font-scale));font-weight:800;color:var(--text);line-height:1.5}.row-sub{font-size:calc(.8rem * var(--font-scale));color:rgba(44,26,6,.56);line-height:1.65;margin-top:3px}.progress-box{background:linear-gradient(135deg,var(--teal-mid),var(--teal-rich));border-radius:18px;padding:18px;color:#fff;border:1px solid rgba(200,146,42,.22);box-shadow:0 8px 30px rgba(0,0,0,.18)}.progress-top{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:10px}.progress-label{font-weight:900;color:var(--gold-light)}.progress-num{font-family:'Amiri',serif;font-size:1.35rem;color:#fff}.progress-track{height:9px;background:rgba(255,255,255,.09);border-radius:999px;overflow:hidden}.progress-fill{height:100%;width:0;background:linear-gradient(90deg,var(--gold),var(--gold-light));border-radius:999px;transition:width .25s}.fav-btn{border:none;background:rgba(200,146,42,.1);color:var(--gold);border:1px solid rgba(200,146,42,.22);border-radius:12px;padding:7px 10px;font-weight:900;cursor:pointer}.fav-btn.saved{background:linear-gradient(135deg,var(--gold),var(--gold-light));color:var(--teal-mid)}.font-toggle{position:fixed;bottom:18px;right:18px;z-index:500;width:54px;height:54px;border-radius:50%;border:none;background:linear-gradient(135deg,var(--gold),var(--gold-light));color:var(--teal-mid);font-weight:900;font-size:1rem;box-shadow:0 6px 22px rgba(0,0,0,.28);cursor:pointer}.toast{position:fixed;right:50%;bottom:22px;transform:translateX(50%) translateY(18px);z-index:700;background:rgba(11,42,42,.96);color:var(--gold-light);border:1px solid rgba(200,146,42,.28);border-radius:999px;padding:10px 16px;font-size:.82rem;font-weight:800;opacity:0;pointer-events:none;transition:.22s;box-shadow:0 8px 28px rgba(0,0,0,.25)}.toast.show{opacity:1;transform:translateX(50%) translateY(0)}.pg-footer{text-align:center;padding:36px 20px 48px;border-top:1px solid rgba(200,146,42,.12);color:rgba(44,26,6,.45);font-size:calc(.78rem * var(--font-scale));line-height:1.8;margin-top:44px}.footer-dua{font-family:'Amiri',serif;font-size:calc(1.25rem * var(--font-scale));color:var(--gold);margin-bottom:10px}.bottom-nav{position:sticky;bottom:0;z-index:120;background:rgba(250,246,238,.95);backdrop-filter:blur(16px);border-top:1px solid rgba(200,146,42,.18);display:none;grid-template-columns:repeat(5,1fr);gap:0}.bottom-nav a{padding:10px 4px;text-align:center;text-decoration:none;color:rgba(44,26,6,.62);font-size:.68rem;font-weight:800}.bottom-nav span{display:block;font-size:1.12rem;margin-bottom:2px}@media(max-width:720px){.grid.two,.grid.three{grid-template-columns:1fr}.hero{padding:36px 14px 32px}.wrap{padding:0 13px}.bottom-nav{display:grid}.font-toggle{bottom:72px}.card-body{padding:16px}.sec-head{gap:10px}.sec-title{font-size:calc(1.18rem * var(--font-scale))}}
@media print{.site-header,.font-toggle,.bottom-nav,.actions,.fav-btn,.pg-footer{display:none!important}body{background:#fff}.card,.card.dark{box-shadow:none;border:1px solid #ddd;color:#111;background:#fff}.hero{background:#fff;color:#111;border-bottom:1px solid #ddd}.hero h1{color:#111}.hero-sub{color:#555}}

/* ═══════════════════════════════════════════════════
   Salsabeel v2 — Fonts, bottom bar, night mode
   ═══════════════════════════════════════════════════ */
@font-face {
  font-family: "hafs";
  src: url('/assets/fonts/hafs/hafs.eot');
  src: url('/assets/fonts/hafs/hafs.woff2') format('woff2'),
       url('/assets/fonts/hafs/hafs.woff') format('woff'),
       url('/assets/fonts/hafs/hafs.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root{
  --font-main:'Cairo', sans-serif;
  --font-heading:'Amiri', serif;
  --font-quran:'hafs', 'Amiri', serif;
  --bottom-nav-height:70px;
}

body{font-family:var(--font-main)}
.hero h1,.sec-title,.card-title,.hdr-name-ar,.footer-dua,.guide-toggle-title,.phase-title,.qa-title,.lc-title,.resource-title{font-family:var(--font-heading)}
.quran-text,.ayah-text,.quran-bism,.bism,.final-txt,.quran-page .ayah,.quran-page #quranText{font-family:var(--font-quran)!important}

html[data-font-main="cairo"]{--font-main:'Cairo', sans-serif;--font-heading:'Amiri', serif}
html[data-font-main="amiri"]{--font-main:'Amiri', serif;--font-heading:'Amiri', serif}
html[data-font-main="system"]{--font-main:Tahoma, Arial, sans-serif;--font-heading:'Amiri', serif}
html[data-quran-font="hafs"]{--font-quran:'hafs', 'Amiri', serif}
html[data-quran-font="amiri"]{--font-quran:'Amiri', serif}

body.has-bottom-nav{padding-bottom:calc(var(--bottom-nav-height) + env(safe-area-inset-bottom, 0px))}
.bottom-nav{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:650;
  min-height:var(--bottom-nav-height);
  padding-bottom:env(safe-area-inset-bottom, 0px);
  background:rgba(250,246,238,.96);
  backdrop-filter:blur(18px);
  border-top:1px solid rgba(200,146,42,.22);
  display:grid;
  grid-template-columns:repeat(5,1fr);
  box-shadow:0 -8px 28px rgba(0,0,0,.10);
}
.bottom-nav a{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-height:64px;
  padding:8px 4px;
  text-align:center;
  text-decoration:none;
  color:rgba(44,26,6,.64);
  font-size:.68rem;
  font-weight:900;
  line-height:1.25;
  border-left:1px solid rgba(200,146,42,.08);
}
.bottom-nav a:last-child{border-left:none}
.bottom-nav .bn-icon{display:block;font-size:1.18rem;margin-bottom:3px;line-height:1}
.bottom-nav a.active{color:var(--teal-mid);background:linear-gradient(180deg,rgba(200,146,42,.16),rgba(200,146,42,.04))}
.bottom-nav a.active .bn-icon{filter:drop-shadow(0 2px 4px rgba(200,146,42,.25))}

.salsabeel-floating-tools{
  position:fixed;
  right:16px;
  bottom:calc(var(--bottom-nav-height) + 14px + env(safe-area-inset-bottom, 0px));
  z-index:660;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.salsabeel-tool-btn{
  width:52px;
  height:52px;
  border-radius:50%;
  border:none;
  background:linear-gradient(135deg,var(--gold),var(--gold-light));
  color:var(--teal-mid);
  font-weight:900;
  font-size:.95rem;
  box-shadow:0 6px 22px rgba(0,0,0,.28);
  cursor:pointer;
}
.salsabeel-tool-btn.secondary{background:rgba(11,42,42,.95);color:var(--gold-light);border:1px solid rgba(200,146,42,.32)}

.salsabeel-settings-panel{
  position:fixed;
  inset:auto 12px calc(var(--bottom-nav-height) + 12px + env(safe-area-inset-bottom, 0px)) 12px;
  z-index:800;
  background:var(--cream);
  border:1px solid rgba(200,146,42,.24);
  border-radius:20px;
  box-shadow:0 20px 70px rgba(0,0,0,.28);
  padding:16px;
  display:none;
}
.salsabeel-settings-panel.open{display:block;animation:fadeUp .18s ease both}
.settings-title{font-family:var(--font-heading);font-size:1.18rem;font-weight:800;color:var(--teal-mid);margin-bottom:10px}
.settings-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid rgba(200,146,42,.12)}
.settings-row:first-of-type{border-top:none}
.settings-label{font-size:.86rem;font-weight:800;color:var(--text)}
.settings-select,.settings-small-btn{
  border:1px solid rgba(200,146,42,.22);
  background:#fff;
  border-radius:12px;
  padding:8px 10px;
  font-family:var(--font-main);
  font-weight:800;
  color:var(--text);
}
.settings-small-btn{cursor:pointer;background:linear-gradient(135deg,var(--gold),var(--gold-light));color:var(--teal-mid);border:none}

html[data-theme="dark"]{
  --cream:#071A1A;
  --text:#F4E8D2;
  --gold-pale:#2D2416;
}
html[data-theme="dark"] body{background:#071A1A;color:var(--text)}
html[data-theme="dark"] body::before{background:radial-gradient(circle at 15% 15%,rgba(200,146,42,.08),transparent 48%),radial-gradient(circle at 85% 85%,rgba(46,204,113,.05),transparent 46%)}
html[data-theme="dark"] .card,
html[data-theme="dark"] .toggle-row,
html[data-theme="dark"] .textarea,
html[data-theme="dark"] .input,
html[data-theme="dark"] .guide-body-inner,
html[data-theme="dark"] .step-card{background:#102525;color:var(--text);border-color:rgba(200,146,42,.18)}
html[data-theme="dark"] .card-sub,
html[data-theme="dark"] .row-sub,
html[data-theme="dark"] .resource-note{color:rgba(244,232,210,.64)}
html[data-theme="dark"] .row-title,
html[data-theme="dark"] .step-title,
html[data-theme="dark"] .step-body p,
html[data-theme="dark"] .step-list li{color:var(--text)}
html[data-theme="dark"] .bottom-nav{background:rgba(7,26,26,.96);border-top-color:rgba(200,146,42,.24)}
html[data-theme="dark"] .bottom-nav a{color:rgba(244,232,210,.68);border-left-color:rgba(200,146,42,.10)}
html[data-theme="dark"] .bottom-nav a.active{color:var(--gold-light);background:linear-gradient(180deg,rgba(200,146,42,.15),rgba(200,146,42,.05))}
html[data-theme="dark"] .salsabeel-settings-panel{background:#0B2A2A;color:var(--text);border-color:rgba(200,146,42,.28)}
html[data-theme="dark"] .settings-title{color:var(--gold-light)}
html[data-theme="dark"] .settings-label{color:var(--text)}
html[data-theme="dark"] .settings-select{background:#102525;color:var(--text)}

@media(min-width:900px){
  .bottom-nav{left:50%;right:auto;transform:translateX(-50%);width:min(620px,calc(100% - 24px));border-radius:22px 22px 0 0;border-inline:1px solid rgba(200,146,42,.18)}
  .salsabeel-settings-panel{left:50%;right:auto;transform:translateX(-50%);width:min(560px,calc(100% - 24px))}
}
@media(max-width:480px){
  .bottom-nav a{font-size:.62rem}.bottom-nav .bn-icon{font-size:1.08rem}.salsabeel-tool-btn{width:48px;height:48px}
}


/* === Settings panel usability fix === */
.settings-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.settings-head .settings-title{margin-bottom:0}
.settings-close{width:34px;height:34px;border-radius:50%;border:1px solid rgba(200,146,42,.22);background:rgba(200,146,42,.08);color:var(--text);font-weight:900;cursor:pointer;display:flex;align-items:center;justify-content:center}
.settings-close:hover{background:rgba(200,146,42,.16)}
.settings-done{width:100%;margin-top:12px;border:none;border-radius:14px;padding:11px 14px;background:linear-gradient(135deg,var(--gold),var(--gold-light));color:var(--teal-mid);font-family:var(--font-main);font-weight:900;cursor:pointer;box-shadow:0 4px 14px rgba(200,146,42,.22)}
html[data-theme="dark"] .settings-close{background:rgba(200,146,42,.10);color:var(--text);border-color:rgba(200,146,42,.30)}
html[data-theme="dark"] .settings-done{color:var(--teal-mid)}
/* =========================================================
   إصلاح أزرار الصفحات المشتركة في الوضع الليلي والنهاري
   يشمل: المفضلة، الطوارئ، الكراسة، قائمة التحقق، أنا الآن
========================================================= */

/* أزرار البطاقات العامة */
.card .btn,
.card .fav-btn,
.actions .btn,
.actions .fav-btn {
  font-family: var(--font-main), 'Cairo', sans-serif !important;
  font-weight: 900 !important;
  border-radius: 14px !important;
  text-shadow: none !important;
}

/* الوضع الليلي: الأزرار الفاتحة لا تكون بيضاء باهتة */
html[data-theme="dark"] .btn.light,
html[data-theme="dark"] .card .btn.light,
html[data-theme="dark"] .actions .btn.light {
  background: rgba(255, 255, 255, .07) !important;
  color: rgba(255, 255, 255, .88) !important;
  border: 1px solid rgba(200, 146, 42, .28) !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .btn.light:hover,
html[data-theme="dark"] .card .btn.light:hover,
html[data-theme="dark"] .actions .btn.light:hover {
  background: rgba(200, 146, 42, .16) !important;
  color: var(--gold-light) !important;
  border-color: rgba(200, 146, 42, .45) !important;
}

/* الوضع الليلي: أزرار الحفظ */
html[data-theme="dark"] .fav-btn {
  background: rgba(255, 255, 255, .07) !important;
  color: rgba(255, 255, 255, .88) !important;
  border: 1px solid rgba(200, 146, 42, .28) !important;
}

html[data-theme="dark"] .fav-btn:hover {
  background: rgba(200, 146, 42, .16) !important;
  color: var(--gold-light) !important;
}

html[data-theme="dark"] .fav-btn.saved {
  background: linear-gradient(135deg, var(--gold), var(--gold-light)) !important;
  color: var(--teal-mid) !important;
  border-color: transparent !important;
}

/* الوضع الليلي: أزرار الأشباح ghost */
html[data-theme="dark"] .btn.ghost,
html[data-theme="dark"] .card .btn.ghost,
html[data-theme="dark"] .actions .btn.ghost {
  background: rgba(255, 255, 255, .07) !important;
  color: rgba(255, 255, 255, .88) !important;
  border: 1px solid rgba(200, 146, 42, .24) !important;
}

html[data-theme="dark"] .btn.ghost:hover,
html[data-theme="dark"] .card .btn.ghost:hover,
html[data-theme="dark"] .actions .btn.ghost:hover {
  background: rgba(200, 146, 42, .16) !important;
  color: var(--gold-light) !important;
}

/* الوضع الليلي: أزرار الحذف والخطر */
html[data-theme="dark"] .danger-btn,
html[data-theme="dark"] .btn.danger,
html[data-theme="dark"] button.danger {
  background: rgba(155, 44, 44, .14) !important;
  color: #ff8a8a !important;
  border: 1px solid rgba(255, 120, 120, .32) !important;
}

html[data-theme="dark"] .danger-btn:hover,
html[data-theme="dark"] .btn.danger:hover,
html[data-theme="dark"] button.danger:hover {
  background: rgba(155, 44, 44, .24) !important;
  color: #ffb0b0 !important;
}

/* الوضع النهاري: الأزرار الفاتحة تبقى واضحة */
html[data-theme="light"] .btn.light,
html[data-theme="light"] .card .btn.light,
html[data-theme="light"] .actions .btn.light {
  background: #ffffff !important;
  color: #2C1A06 !important;
  border: 1px solid rgba(200, 146, 42, .24) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .05) !important;
}

html[data-theme="light"] .btn.light:hover,
html[data-theme="light"] .card .btn.light:hover,
html[data-theme="light"] .actions .btn.light:hover {
  background: rgba(200, 146, 42, .10) !important;
  color: var(--gold) !important;
}

/* الوضع النهاري: أزرار الحفظ */
html[data-theme="light"] .fav-btn {
  background: rgba(200, 146, 42, .08) !important;
  color: var(--gold) !important;
  border: 1px solid rgba(200, 146, 42, .24) !important;
}

html[data-theme="light"] .fav-btn:hover {
  background: rgba(200, 146, 42, .14) !important;
  color: var(--teal-mid) !important;
}

html[data-theme="light"] .fav-btn.saved {
  background: linear-gradient(135deg, var(--gold), var(--gold-light)) !important;
  color: var(--teal-mid) !important;
  border-color: transparent !important;
}

/* الوضع النهاري: أزرار الحذف */
html[data-theme="light"] .danger-btn,
html[data-theme="light"] .btn.danger,
html[data-theme="light"] button.danger {
  background: rgba(155, 44, 44, .05) !important;
  color: #8b2e2e !important;
  border: 1px solid rgba(155, 44, 44, .22) !important;
}

/* منع اختفاء النص داخل الأزرار */
.btn *,
.fav-btn *,
.danger-btn * {
  color: inherit !important;
}


/* =========================================================
   Quran Pages Fix
   إصلاح صفحات القرآن: التكبير + ألوان الأزرار في الوضع النهاري
========================================================= */

/* جعل تكبير الخط المشترك يؤثر على صفحات القرآن */
body #content {
  font-size: calc(1.35rem * var(--font-scale)) !important;
  line-height: 2.65 !important;
}

/* على الجوال: خط كبير ومريح للحجاج وكبار السن */
@media (max-width: 620px) {
  body #content {
    font-size: calc(1.22rem * var(--font-scale)) !important;
    line-height: 2.65 !important;
  }
}

/* تأكيد خط القرآن من الإعدادات المركزية */
.quran-text,
.ayah-text,
.quran-bism,
.final-txt {
  font-family: var(--font-quran), hafs, 'Amiri', serif !important;
}

/* تكبير البسملة والنصوص القرآنية مع نفس مقياس القراءة */
.quran-bism {
  font-size: calc(1.35em * var(--font-scale)) !important;
}

.final-txt {
  font-size: calc(1.05em * var(--font-scale)) !important;
}

/* أرقام الآيات لا تكبر بشكل مبالغ */
.ayah-num {
  font-size: .52em !important;
}

/* إصلاح أزرار الفهرس والأدوات في الوضع النهاري */
html[data-theme="light"] .nav-grid a,
html[data-theme="light"] .tool-btn,
html[data-theme="light"] .qa-btn {
  background: #ffffff !important;
  color: #5b4526 !important;
  border: 1px solid rgba(200, 146, 42, .32) !important;
  box-shadow: 0 6px 18px rgba(44, 26, 6, .06) !important;
  opacity: 1 !important;
}

html[data-theme="light"] .nav-grid a:hover,
html[data-theme="light"] .tool-btn:hover,
html[data-theme="light"] .qa-btn:hover {
  background: rgba(200, 146, 42, .12) !important;
  color: #8a5f12 !important;
  border-color: rgba(200, 146, 42, .5) !important;
}

/* إصلاح ألوان أزرار صفحات القرآن في الوضع الليلي */
html[data-theme="dark"] .nav-grid a,
html[data-theme="dark"] .tool-btn,
html[data-theme="dark"] .qa-btn {
  background: rgba(255, 255, 255, .07) !important;
  color: rgba(255, 255, 255, .86) !important;
  border: 1px solid rgba(200, 146, 42, .28) !important;
  opacity: 1 !important;
}

html[data-theme="dark"] .nav-grid a:hover,
html[data-theme="dark"] .tool-btn:hover,
html[data-theme="dark"] .qa-btn:hover {
  background: rgba(200, 146, 42, .18) !important;
  color: var(--gold-light) !important;
}

/* عنوان الفهرس والوصف في الوضع النهاري */
html[data-theme="light"] .chapter-note,
html[data-theme="light"] .hero-hint,
html[data-theme="light"] .final-sub,
html[data-theme="light"] .pg-footer {
  color: rgba(44, 26, 6, .62) !important;
}

/* بطاقات الميتا في الوضع النهاري */
html[data-theme="light"] .meta-pill,
html[data-theme="light"] .pill {
  background: rgba(255, 255, 255, .85) !important;
  color: #5b4526 !important;
  border-color: rgba(200, 146, 42, .28) !important;
}

/* كرت القرآن في الوضع النهاري */
html[data-theme="light"] .quran-card,
html[data-theme="light"] .surah-card {
  background: rgba(255, 255, 255, .88) !important;
  border-color: rgba(36, 120, 80, .22) !important;
  box-shadow: 0 16px 42px rgba(44, 26, 6, .08) !important;
}

/* نص القرآن في النهاري يبقى واضحًا */
html[data-theme="light"] .quran-text {
  color: #0f5a3a !important;
}

html[data-theme="light"] .ayah:hover {
  background: rgba(200, 146, 42, .13) !important;
  color: #07452c !important;
}

/* أزرار المشاركة داخل نافذة المشاركة */
html[data-theme="light"] .sa.nat,
html[data-theme="light"] .sa.cp {
  background: #ffffff !important;
  color: #5b4526 !important;
  border-color: rgba(200, 146, 42, .28) !important;
}

html[data-theme="dark"] .sa.nat,
html[data-theme="dark"] .sa.cp {
  background: rgba(255, 255, 255, .08) !important;
  color: rgba(255, 255, 255, .88) !important;
  border-color: rgba(200, 146, 42, .28) !important;
}




/* =========================================================
   Fix Wasiyyah / Reading Pages
   إصلاح صفحة وصية الحاج والصفحات النصية في الوضع النهاري والـ Toast
========================================================= */

/* منع ظهور Toast بشكل طولي بسبب تعارض الصفحات القديمة */
.salsabeel-toast,
#salsabeel-toast,
.toast {
  min-width: auto !important;
  max-width: min(92vw, 360px) !important;
  width: auto !important;
  height: auto !important;
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  white-space: nowrap !important;
  line-height: 1.6 !important;
  text-align: center !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  z-index: 99999 !important;
}

/* توست النظام المشترك */
.salsabeel-toast {
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  bottom: calc(94px + env(safe-area-inset-bottom, 0px)) !important;
  transform: translateX(-50%) translateY(16px) !important;
  padding: 10px 18px !important;
  border-radius: 999px !important;
  font-family: var(--font-main), 'Cairo', sans-serif !important;
  font-size: calc(.86rem * var(--font-scale)) !important;
  font-weight: 900 !important;
}

.salsabeel-toast.show,
.salsabeel-toast.is-visible,
#salsabeel-toast.show,
.toast.show {
  transform: translateX(-50%) translateY(0) !important;
}

/* الوضع النهاري لصفحات الوصية والقراءة الطويلة */
html[data-theme="light"] body {
  background-color: #f8f1e3 !important;
}

/* هيرو صفحة الوصية */
html[data-theme="light"] .hero {
  background:
    radial-gradient(circle at 50% 0%, rgba(200, 146, 42, .13), transparent 58%),
    linear-gradient(180deg, #fff8eb, #f4ead7) !important;
  border-bottom-color: rgba(200, 146, 42, .22) !important;
}

html[data-theme="light"] .hero h1,
html[data-theme="light"] .hero h1 span {
  color: #8a5f12 !important;
  -webkit-text-fill-color: initial !important;
  text-shadow: none !important;
}

html[data-theme="light"] .hero-sub,
html[data-theme="light"] .hero-hint,
html[data-theme="light"] .intro-note,
html[data-theme="light"] .card-small,
html[data-theme="light"] .meta-chip {
  color: rgba(44, 26, 6, .68) !important;
}

/* الشارة العلوية في صفحة الوصية */
html[data-theme="light"] .badge,
html[data-theme="light"] .hero-tag {
  color: #9b6b16 !important;
  background: rgba(200, 146, 42, .12) !important;
  border-color: rgba(200, 146, 42, .28) !important;
}

/* صندوق البسملة */
html[data-theme="light"] .invocation {
  background: rgba(255, 255, 255, .86) !important;
  border-color: rgba(200, 146, 42, .22) !important;
  box-shadow: 0 16px 44px rgba(44, 26, 6, .08) !important;
}

html[data-theme="light"] .bismillah,
html[data-theme="light"] .bism,
html[data-theme="light"] .closing-title,
html[data-theme="light"] .card-title,
html[data-theme="light"] .section-label {
  color: #b47a19 !important;
}

/* كرت القراءة */
html[data-theme="light"] .reading-card,
html[data-theme="light"] .surah-card,
html[data-theme="light"] .card {
  background: rgba(255, 255, 255, .9) !important;
  border-color: rgba(200, 146, 42, .20) !important;
  box-shadow: 0 14px 38px rgba(44, 26, 6, .07) !important;
}

/* المقاطع الداخلية */
html[data-theme="light"] .section {
  background: rgba(255, 255, 255, .82) !important;
  border-color: rgba(200, 146, 42, .18) !important;
}

html[data-theme="light"] .section:hover {
  background: rgba(200, 146, 42, .07) !important;
  border-color: rgba(200, 146, 42, .32) !important;
}

/* نص الوصية */
html[data-theme="light"] .wasiyyah-text,
html[data-theme="light"] .wasiyyah-text p,
html[data-theme="light"] .section p,
html[data-theme="light"] .dk-text {
  color: #2C1A06 !important;
}

/* صندوق الخاتمة */
html[data-theme="light"] .closing {
  background: linear-gradient(135deg, rgba(46, 139, 87, .08), rgba(200, 146, 42, .10)) !important;
  border-color: rgba(46, 139, 87, .22) !important;
}

html[data-theme="light"] .closing-dua {
  color: #2C1A06 !important;
}

/* أزرار صفحة الوصية */
html[data-theme="light"] .tool,
html[data-theme="light"] .ctrl-btn,
html[data-theme="light"] .share-link {
  background: #ffffff !important;
  color: #2C1A06 !important;
  border-color: rgba(200, 146, 42, .25) !important;
  box-shadow: 0 5px 14px rgba(44, 26, 6, .05) !important;
}

html[data-theme="light"] .tool:hover,
html[data-theme="light"] .ctrl-btn:hover,
html[data-theme="light"] .share-link:hover {
  background: rgba(200, 146, 42, .11) !important;
  color: #8a5f12 !important;
}

html[data-theme="light"] .tool.primary,
html[data-theme="light"] .ctrl-btn.gold {
  background: linear-gradient(135deg, var(--gold), var(--gold-light)) !important;
  color: #180F05 !important;
  border-color: transparent !important;
}

/* الهيدر في الوضع النهاري */
html[data-theme="light"] .hdr,
html[data-theme="light"] .site-header {
  background: rgba(255, 255, 255, .94) !important;
  border-bottom-color: rgba(200, 146, 42, .18) !important;
}

html[data-theme="light"] .hdr-name-ar,
html[data-theme="light"] .hdr-name-en {
  text-shadow: none !important;
}

/* زر أعلى الصفحة حتى لا يتعارض مع البانر السفلي */
.top-btn,
.fab-group {
  bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important;
}

/* =========================================================
   Hajj Emergency Light/Dark Fix
   إصلاح وضوح النصوص في صفحة طوارئ الحاج
========================================================= */

html[data-theme="light"] .card.dark,
html[data-theme="light"] .emergency-card,
html[data-theme="light"] .card {
  background: #ffffff !important;
  color: #2C1A06 !important;
  border-color: rgba(200, 146, 42, .20) !important;
  box-shadow: 0 14px 38px rgba(44, 26, 6, .07) !important;
}

html[data-theme="light"] .card.dark .card-title,
html[data-theme="light"] .emergency-card .card-title,
html[data-theme="light"] .card .card-title,
html[data-theme="light"] #makkahHotel,
html[data-theme="light"] #madinahHotel,
html[data-theme="light"] #supervisorName,
html[data-theme="light"] #guideName {
  color: #b47a19 !important;
  text-shadow: none !important;
}

html[data-theme="light"] .card.dark .card-sub,
html[data-theme="light"] .emergency-card .card-sub,
html[data-theme="light"] .card .card-sub,
html[data-theme="light"] .emergency-note,
html[data-theme="light"] .num {
  color: rgba(44, 26, 6, .74) !important;
  text-shadow: none !important;
}

html[data-theme="light"] .card.dark .pill,
html[data-theme="light"] .emergency-card .pill,
html[data-theme="light"] .card .pill {
  background: #ffffff !important;
  color: #5b4526 !important;
  border-color: rgba(200, 146, 42, .30) !important;
}

html[data-theme="light"] .emergency-note {
  background: rgba(155, 44, 44, .055) !important;
  border-color: rgba(155, 44, 44, .18) !important;
}

html[data-theme="light"] .textarea,
html[data-theme="light"] textarea {
  background: #ffffff !important;
  color: #2C1A06 !important;
  border-color: rgba(200, 146, 42, .22) !important;
}

html[data-theme="light"] .textarea::placeholder,
html[data-theme="light"] textarea::placeholder {
  color: rgba(44, 26, 6, .42) !important;
}

html[data-theme="dark"] .card.dark,
html[data-theme="dark"] .emergency-card,
html[data-theme="dark"] .card {
  background: rgba(255, 255, 255, .055) !important;
  color: rgba(255, 255, 255, .88) !important;
  border-color: rgba(200, 146, 42, .18) !important;
}

html[data-theme="dark"] .card.dark .card-title,
html[data-theme="dark"] .emergency-card .card-title,
html[data-theme="dark"] .card .card-title {
  color: var(--gold-light) !important;
}

html[data-theme="dark"] .card.dark .card-sub,
html[data-theme="dark"] .emergency-card .card-sub,
html[data-theme="dark"] .card .card-sub,
html[data-theme="dark"] .emergency-note,
html[data-theme="dark"] .num {
  color: rgba(255, 255, 255, .76) !important;
}

html[data-theme="dark"] .emergency-note {
  background: rgba(155, 44, 44, .12) !important;
  border-color: rgba(255, 120, 120, .20) !important;
}





/* زر تحديث التطبيق داخل الإعدادات */
.settings-action-btn,
.salsabeel-settings button.settings-action-btn {
  width: 100%;
  min-height: 46px;
  border: 1px solid rgba(200, 146, 42, .28);
  background: rgba(200, 146, 42, .10);
  color: var(--gold-light);
  border-radius: 14px;
  font-family: var(--font-main), 'Cairo', sans-serif;
  font-size: calc(.9rem * var(--font-scale));
  font-weight: 900;
  cursor: pointer;
  margin-top: 10px;
}

html[data-theme="light"] .settings-action-btn,
html[data-theme="light"] .salsabeel-settings button.settings-action-btn {
  background: #ffffff;
  color: #8a5f12;
  border-color: rgba(200, 146, 42, .30);
}

.settings-action-btn:hover {
  background: rgba(200, 146, 42, .18);
}





/* =========================================================
   Fix Ghost Buttons in Light Mode
   إصلاح زر "نسخ اسم الفندق" وأزرار ghost في الوضع النهاري
========================================================= */

html[data-theme="light"] .btn.ghost,
html[data-theme="light"] .card .btn.ghost,
html[data-theme="light"] .card.dark .btn.ghost,
html[data-theme="light"] .actions .btn.ghost {
  background: #ffffff !important;
  color: #2C1A06 !important;
  border: 1px solid rgba(200, 146, 42, .28) !important;
  box-shadow: 0 5px 14px rgba(44, 26, 6, .06) !important;
}

html[data-theme="light"] .btn.ghost:hover,
html[data-theme="light"] .card .btn.ghost:hover,
html[data-theme="light"] .card.dark .btn.ghost:hover,
html[data-theme="light"] .actions .btn.ghost:hover {
  background: rgba(200, 146, 42, .12) !important;
  color: #8a5f12 !important;
  border-color: rgba(200, 146, 42, .42) !important;
}

/* تأكيد خاص لزر نسخ اسم الفندق داخل صفحة الطوارئ */
html[data-theme="light"] #makkahHotel ~ .card-sub + .actions .btn.ghost,
html[data-theme="light"] #madinahHotel ~ .card-sub + .actions .btn.ghost {
  background: #ffffff !important;
  color: #2C1A06 !important;
  border-color: rgba(200, 146, 42, .30) !important;
}