/* نظام التصميم الموحد — مداد (النسخة المعتمدة: هوية مكة فاتحة دافئة، هوية المدينة هادئة، وضع ليلي منفصل) */

:root{
  --radius-sm:8px; --radius-md:16px; --radius-lg:26px;
  --sp-1:4px; --sp-2:8px; --sp-3:16px; --sp-4:24px; --sp-5:40px;
  --shadow:0 4px 18px rgba(0,0,0,0.06);
}

/* ===== هوية مكة: فاتحة دافئة فخمة ===== */
:root[data-identity="makkah"]{
  --bg:#F7F1E7;
  --surface:#FFFDF9;
  --surface-2:#F0E6D6;
  --sand:#E8D8C3;
  --text:#241E15;
  --text-muted:#6B5D46;
  --accent:#C8A56A;
  --accent-contrast:#241E15;
  --deep:#8A6A45;
  --line:#DCCBAE;
  --charcoal:#1F2933;
  --focus:#8A6A45;
}
/* ===== هوية المدينة: هادئة عاجي/أخضر ===== */
:root[data-identity="madinah"]{
  --bg:#F4F1E8;
  --surface:#FFFFFF;
  --surface-2:#EFEAD9;
  --sand:#DDE6D5;
  --text:#1E2A22;
  --text-muted:#556355;
  --accent:#B59A68;
  --accent-contrast:#1E2A22;
  --deep:#2F5D50;
  --line:#D6DCC9;
  --charcoal:#2F5D50;
  --focus:#2F5D50;
}
/* ===== وضع ليلي منفصل تمامًا — يُطبَّق فوق أي هوية ===== */
:root[data-theme="dark"]{
  --bg:#161310;
  --surface:#1F1B15;
  --surface-2:#26221A;
  --sand:#332C22;
  --text:#F3ECDD;
  --text-muted:#B7AB92;
  --line:#3A3225;
}
:root[data-theme="dark"][data-identity="madinah"]{
  --bg:#101613;
  --surface:#161F1A;
  --surface-2:#1C2620;
  --sand:#233229;
  --text:#EDF1E7;
  --text-muted:#A9B7AC;
  --line:#2B3A31;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:"Segoe UI","Tahoma",sans-serif; line-height:1.8;
  transition:background .25s ease, color .25s ease;
  min-height:100vh;
}
html[dir="ltr"] body{font-family:"Segoe UI",Arial,sans-serif}

a{color:inherit; text-decoration:none}
button{font-family:inherit; cursor:pointer}

/* ===== نقوش SVG مضمّنة محليًا (لا CDN، تصميم أصلي) ===== */
.pattern-layer{
  position:absolute; inset:0; pointer-events:none;
  opacity:.07; z-index:0; background-repeat:repeat;
}
:root[data-identity="makkah"] .pattern-layer{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cg fill='none' stroke='%238A6A45' stroke-width='1.4'%3E%3Cpath d='M60 5 L100 30 L100 90 L60 115 L20 90 L20 30 Z'/%3E%3Cpath d='M60 5 L60 115 M20 30 L100 90 M100 30 L20 90'/%3E%3C/g%3E%3C/svg%3E");
  background-size:120px 120px;
}
:root[data-identity="madinah"] .pattern-layer{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cg fill='none' stroke='%232F5D50' stroke-width='1.4'%3E%3Cpath d='M70 10 Q100 40 70 70 Q40 40 70 10 Z'/%3E%3Cpath d='M0 70 Q35 40 70 70 Q105 100 140 70'/%3E%3C/g%3E%3C/svg%3E");
  background-size:140px 140px;
}

/* ===== شريط التنقل العلوي ===== */
.topbar{
  position:sticky; top:0; z-index:50;
  background:var(--surface); border-bottom:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 20px; gap:12px; flex-wrap:wrap;
}
.brand{font-size:1.4rem; font-weight:800; color:var(--deep)}
.nav-links{display:flex; gap:18px; align-items:center; flex-wrap:wrap}
.nav-links a{padding:6px 4px; border-bottom:2px solid transparent; font-weight:600; color:var(--text)}
.nav-links a:hover, .nav-links a.active{border-color:var(--accent); color:var(--deep)}
.nav-actions{display:flex; align-items:center; gap:8px}
.pill-btn{
  background:var(--surface-2); border:1px solid var(--line); color:var(--text);
  border-radius:999px; padding:7px 14px; font-size:.85rem; font-weight:600;
}
.pill-btn.active{background:var(--deep); color:var(--surface); border-color:var(--deep)}
.icon-btn{
  width:38px; height:38px; border-radius:999px; border:1px solid var(--line);
  background:var(--surface-2); display:flex; align-items:center; justify-content:center;
}
.hamburger{display:none}

@media (max-width:820px){
  .nav-links{display:none}
  .hamburger{display:flex}
  .nav-links.mobile-open{
    display:flex; flex-direction:column; position:absolute; top:64px; inset-inline:0;
    background:var(--surface); padding:16px; border-bottom:1px solid var(--line); gap:10px;
  }
}

.container{max-width:1100px; margin:0 auto; padding:24px 20px; position:relative}

/* ===== الصفحة الرئيسية: شبكة بينتو غير متطابقة ===== */
.hero{
  position:relative; overflow:hidden; border-radius:var(--radius-lg);
  background:linear-gradient(135deg,var(--surface),var(--sand));
  padding:36px 28px; margin-bottom:28px; border:1px solid var(--line);
}
.hero h1{font-size:1.9rem; margin:0 0 8px; color:var(--deep)}
.hero p{color:var(--text-muted); margin:0; max-width:560px}

.bento{
  display:grid; gap:16px;
  grid-template-columns:repeat(4,1fr);
  grid-auto-rows:minmax(120px,auto);
}
.bento .card{grid-column:span 2}
.bento .card.wide{grid-column:span 4}
.bento .card.tall{grid-row:span 2}
.bento .card.small{grid-column:span 1}
@media (max-width:760px){
  .bento{grid-template-columns:repeat(2,1fr)}
  .bento .card, .bento .card.small{grid-column:span 2}
}

.card{
  position:relative; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-md); padding:18px; box-shadow:var(--shadow);
  overflow:hidden;
}
.card h3{margin:0 0 6px; font-size:1.05rem}
.card .muted{color:var(--text-muted); font-size:.88rem}
.card .accent-tag{
  display:inline-block; background:var(--accent); color:var(--accent-contrast);
  border-radius:999px; padding:3px 10px; font-size:.75rem; font-weight:700; margin-bottom:8px;
}

/* ===== تذييل ===== */
footer{
  border-top:1px solid var(--line); background:var(--surface-2); margin-top:40px;
  padding:32px 20px; color:var(--text-muted); font-size:.85rem;
}
.footer-grid{max-width:1100px; margin:0 auto; display:grid; grid-template-columns:repeat(4,1fr); gap:20px}
.footer-grid h4{color:var(--text); margin:0 0 8px; font-size:.95rem}
.footer-grid a{display:block; margin-bottom:6px}
@media (max-width:700px){.footer-grid{grid-template-columns:repeat(2,1fr)}}

/* ===== صفحة القرآن ===== */
.quran-layout{display:grid; grid-template-columns:280px 1fr; gap:20px}
@media (max-width:900px){.quran-layout{grid-template-columns:1fr}}
.surah-sidebar{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md);
  padding:14px; height:fit-content; max-height:80vh; overflow:auto; position:sticky; top:76px;
}
@media (max-width:900px){
  .surah-sidebar{position:static; max-height:340px}
}
.surah-search{width:100%; padding:9px 12px; border-radius:999px; border:1px solid var(--line); background:var(--bg); color:var(--text); margin-bottom:10px}
.surah-item{
  display:flex; justify-content:space-between; padding:8px 10px; border-radius:10px; margin-bottom:2px;
}
.surah-item:hover{background:var(--surface-2)}
.surah-item.active{background:var(--deep); color:var(--surface)}
.surah-item .n{opacity:.65; font-size:.78rem}

.reader-toolbar{
  position:sticky; top:0; z-index:10; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-md); padding:10px 16px; display:flex; align-items:center;
  justify-content:space-between; margin-bottom:16px; flex-wrap:wrap; gap:10px;
}
.mode-switch{display:flex; gap:6px; background:var(--surface-2); border-radius:999px; padding:4px}
.mode-switch button{border:none; background:transparent; padding:6px 12px; border-radius:999px; font-size:.8rem; font-weight:600; color:var(--text-muted)}
.mode-switch button.active{background:var(--deep); color:var(--surface)}

.surah-header{
  text-align:center; padding:24px; border:1px solid var(--line); border-radius:var(--radius-lg);
  background:linear-gradient(180deg,var(--surface),var(--sand)); margin-bottom:20px; position:relative; overflow:hidden;
}
.surah-header h2{margin:0 0 6px; font-size:1.6rem; color:var(--deep)}
.surah-header .meta{color:var(--text-muted); font-size:.85rem}
.basmala{font-size:1.4rem; text-align:center; margin:18px 0; color:var(--deep); font-weight:700}

.reader{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); padding:26px; position:relative}
.reader.focus-mode ~ .surah-sidebar, .quran-layout.focus .surah-sidebar, .quran-layout.focus .reader-toolbar{display:none}

.ayah-continuous{font-size:1.5rem; line-height:2.6; text-align:justify}
.ayah-continuous .ayah-num{
  display:inline-flex; align-items:center; justify-content:center; width:1.9rem; height:1.9rem;
  border:1.5px solid var(--accent); border-radius:50%; font-size:.85rem; margin:0 6px; color:var(--deep); vertical-align:middle;
}
.ayah-span{cursor:pointer; border-radius:4px; padding:0 2px}
.ayah-span:hover{background:var(--sand)}

.ayah-block{padding:18px 0; border-bottom:1px dashed var(--line)}
.ayah-block:last-child{border-bottom:none}
.ayah-block .ayah-text{font-size:1.7rem; text-align:center; margin-bottom:10px}
.ayah-block .ayah-tools{display:flex; justify-content:center; gap:8px; flex-wrap:wrap}
.tool-chip{
  font-size:.75rem; padding:5px 10px; border-radius:999px; background:var(--surface-2); border:1px solid var(--line); color:var(--text-muted);
}

.ayah-popover{
  position:fixed; z-index:80; background:var(--surface); border:1px solid var(--line); border-radius:12px;
  box-shadow:0 10px 30px rgba(0,0,0,.15); padding:8px; display:none; gap:4px; flex-direction:column; min-width:180px;
}
.ayah-popover.show{display:flex}
.ayah-popover button{
  background:none; border:none; text-align:right; padding:8px 10px; border-radius:8px; font-size:.85rem; color:var(--text);
}
.ayah-popover button:hover{background:var(--surface-2)}
.ayah-popover button[disabled]{opacity:.45; cursor:not-allowed}

.settings-fab{
  position:fixed; bottom:20px; inset-inline-end:20px; z-index:60;
  width:52px; height:52px; border-radius:50%; background:var(--deep); color:var(--surface);
  display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow); border:none; font-size:1.2rem;
}
.settings-drawer{
  position:fixed; bottom:82px; inset-inline-end:20px; z-index:60; width:260px;
  background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:16px; box-shadow:var(--shadow);
  display:none;
}
.settings-drawer.show{display:block}
.settings-drawer label{display:block; font-size:.8rem; margin:10px 0 4px; color:var(--text-muted)}
.settings-drawer input[type=range]{width:100%}

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

/* صفحة مساحتي */
.space-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:16px}
@media (max-width:700px){.space-grid{grid-template-columns:1fr}}
.danger-btn{background:#B3453F; color:#fff; border:none; padding:10px 18px; border-radius:10px; font-weight:700}

.page-section{display:none}
.page-section.active{display:block}

.confirm-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:100; display:none; align-items:center; justify-content:center;
}
.confirm-overlay.show{display:flex}
.confirm-box{background:var(--surface); padding:24px; border-radius:16px; max-width:360px; text-align:center}
.confirm-box .actions{display:flex; gap:10px; margin-top:16px; justify-content:center}