/* ============================================================
   أدوات زين — نظام الواجهة «الدفتر»
   حبر أزرق بخط الرقعة على سطور الدفتر، مع خط الهامش الأحمر.
   ملف واحد لكل الصفحات؛ لا توجد أنماط مضمّنة في صفحات HTML.
   ============================================================ */

/* ---------- الخطوط (مستضافة محلياً لأن CSP يمنع الخطوط الخارجية) ---------- */
@font-face {
  font-family: 'IBM Plex Sans Arabic'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(fonts/plex-arabic-400.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic'; font-style: normal; font-weight: 500; font-display: swap;
  src: url(fonts/plex-arabic-500.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic'; font-style: normal; font-weight: 700; font-display: swap;
  src: url(fonts/plex-arabic-700.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(fonts/plex-latin-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic'; font-style: normal; font-weight: 500; font-display: swap;
  src: url(fonts/plex-latin-500.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic'; font-style: normal; font-weight: 700; font-display: swap;
  src: url(fonts/plex-latin-700.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* المسيري للعناوين: واضح لكل القرّاء، وفيه روح الخط المكتوب */
@font-face {
  font-family: 'El Messiri'; font-style: normal; font-weight: 700; font-display: swap;
  src: url(fonts/messiri-arabic-700.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: 'El Messiri'; font-style: normal; font-weight: 700; font-display: swap;
  src: url(fonts/messiri-latin-700.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* الأميري لنصوص الآيات والأذكار فقط */
@font-face {
  font-family: 'Amiri'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(fonts/amiri-arabic-400.woff2) format('woff2');
  unicode-range: U+0600-065F, U+066A-06EF, U+06FA-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}

/* ---------- الرموز ---------- */
:root {
  color-scheme: light;
  --ground: #F6F7FB;        /* أرضية الصفحة */
  --paper: #FFFFFF;         /* الألواح */
  --ink: #2532A3;           /* حبر أزرق */
  --ink-strong: #1A247F;
  --ink-wash: #EEF1FB;
  --ink-ring: rgba(37, 50, 163, .18);
  --on-ink: #FFFFFF;
  --brand: #2532A3; --brand-strong: #1A247F; --brand-wash: #EEF1FB; --brand-ring: rgba(37, 50, 163, .18);
  --pen: var(--brand); --pen-strong: var(--brand-strong); --pen-wash: var(--brand-wash); --pen-mark: #DDE3F7; --pen-ring: #C9D2F2;
  --seg-needs: #425DAF; --seg-wants: #865901; --seg-save: #327522;
  --text: #1B1D33;          /* حبر أزرق-أسود */
  --muted: #585D78;
  --line: #DFE3EE;
  --line-strong: #C3C9DB;
  --rule-color: #D3DDF2;    /* سطر الدفتر */
  --margin: #D0453C;        /* خط الهامش */
  --gold: #A87A1F;
  --gold-wash: #FBF6EA;
  --ok: #1E7A4C;
  --warn: #8A5300;
  --warn-wash: #FFF6E5;
  --bad: #B3261E;
  --bad-wash: #FDEDEC;
  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23585D78' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  --font-ui: 'IBM Plex Sans Arabic', 'Segoe UI', Tahoma, system-ui, sans-serif;
  --font-display: 'El Messiri', 'IBM Plex Sans Arabic', 'Segoe UI', Tahoma, sans-serif;
  --font-quran: 'Amiri', 'Traditional Arabic', 'IBM Plex Sans Arabic', serif;
  --font-code: 'Cascadia Mono', Consolas, 'SFMono-Regular', Menlo, monospace;

  --max: 1200px;
  --gutter: 24px;
  --margin-col: 232px;
  --gap: 56px;
  --rule: 44px;
  --rule-shift: -16px;
  --r-panel: 16px;
  --r-ctl: 10px;
  --topbar-h: 64px;
}

/* الوضع الليلي: دفتر بحبر فاتح على ورق كحلي */
:root.dark-mode {
  color-scheme: dark;
  --ground: #11132A;
  --paper: #181B36;
  --ink: #AEB8FF;
  --ink-strong: #C9D0FF;
  --ink-wash: #20244A;
  --ink-ring: rgba(174, 184, 255, .22);
  --on-ink: #11132A;
  --brand: #AEB8FF; --brand-strong: #C9D0FF; --brand-wash: #20244A; --brand-ring: rgba(174, 184, 255, .22);
  --pen-mark: #2C3263; --pen-ring: #3B4386;
  --seg-needs: #A2BCFE; --seg-wants: #E5B46E; --seg-save: #99CF8E;
  --text: #E7E9F6;
  --muted: #A3A8C6;
  --line: #2A2E52;
  --line-strong: #3A3F6B;
  --rule-color: #252A55;
  --margin: #E06A5F;
  --gold: #D9B25C;
  --gold-wash: #26233A;
  --ok: #6FCF97;
  --warn: #F2C26B;
  --warn-wash: #2E2716;
  --bad: #FF8A80;
  --bad-wash: #3A1E24;
  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23A3A8C6' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* الصفحة الإسلامية: الهامش والسطور بالذهبي كهوامش المصحف */
.islam-page { --margin: var(--gold); --rule-color: #ECE2C9; }
:root.dark-mode .islam-page { --rule-color: #2E2B40; }

/* أقلام الأدوات: لون مستقل لكل أداة، بنفس الإضاءة لتبقى متناسقة */
[data-pen="currency"] { --pen: #327522; --pen-strong: #225C13; --pen-wash: #EEFAEC; --pen-mark: #C9F0C1; --pen-ring: #B3DBAA; }
[data-pen="salary"] { --pen: #865901; --pen-strong: #694501; --pen-wash: #FFF4E6; --pen-mark: #FEDDB0; --pen-ring: #EDC793; }
[data-pen="weather"] { --pen: #046B96; --pen-strong: #035476; --pen-wash: #EDF8FE; --pen-mark: #C6E9FE; --pen-ring: #9AD7FB; }
[data-pen="age"] { --pen: #9A3C6B; --pen-strong: #7B2B54; --pen-wash: #FEF2F7; --pen-mark: #FED6E6; --pen-ring: #F8B9D3; }
[data-pen="tasks"] { --pen: #425DAF; --pen-strong: #31478E; --pen-wash: #F2F6FE; --pen-mark: #D8E3FE; --pen-ring: #B9CDFE; }
[data-pen="words"] { --pen: #754BA0; --pen-strong: #5D3881; --pen-wash: #F8F3FF; --pen-mark: #EBDBFF; --pen-ring: #DAC1F8; }
[data-pen="qr"] { --pen: #994A03; --pen-strong: #793800; --pen-wash: #FEF3ED; --pen-mark: #FFDBC6; --pen-ring: #F9C09E; }
[data-pen="whatsapp"] { --pen: #017558; --pen-strong: #035B44; --pen-wash: #E8FBF3; --pen-mark: #B2F4D9; --pen-ring: #99DFC4; }
[data-pen="pass"] { --pen: #A23D3A; --pen-strong: #822B2A; --pen-wash: #FEF3F2; --pen-mark: #FFD9D5; --pen-ring: #FEBAB4; }
[data-pen="bmi"] { --pen: #02717A; --pen-strong: #05585F; --pen-wash: #E6FAFD; --pen-mark: #A7F2FB; --pen-ring: #8DDDE7; }
[data-pen="prayer"] { --pen: #007176; --pen-strong: #04585C; --pen-wash: #E6FBFC; --pen-mark: #A6F3F7; --pen-ring: #8CDEE2; }
[data-pen="qibla"] { --pen: #027743; --pen-strong: #045D33; --pen-wash: #EBFBEF; --pen-mark: #BCF2CD; --pen-ring: #A4DEB7; }
[data-pen="ayah"] { --pen: #7D5E04; --pen-strong: #624800; --pen-wash: #FDF5E6; --pen-mark: #FAE0AA; --pen-ring: #E6CA91; }
[data-pen="athkar"] { --pen: #3660AF; --pen-strong: #264A8E; --pen-wash: #F1F6FE; --pen-mark: #D5E4FE; --pen-ring: #B4CFFE; }
[data-pen="tasbeeh"] { --pen: #A23C45; --pen-strong: #822A33; --pen-wash: #FEF3F3; --pen-mark: #FFD8D8; --pen-ring: #FEB9BA; }
[data-pen="zakat"] { --pen: #3E7314; --pen-strong: #2D5A04; --pen-wash: #F0F9EB; --pen-mark: #CEEFBD; --pen-ring: #B8DAA5; }
[data-pen="hijri"] { --pen: #704EA4; --pen-strong: #583A84; --pen-wash: #F7F4FE; --pen-mark: #E7DDFE; --pen-ring: #D5C2FB; }
:root.dark-mode [data-pen="currency"] { --pen: #99CF8E; --pen-strong: #B9E2B0; --pen-wash: #1D2E19; --pen-mark: #274D1F; --pen-ring: #518046; }
:root.dark-mode [data-pen="salary"] { --pen: #E5B46E; --pen-strong: #F4CD99; --pen-wash: #36250D; --pen-mark: #5A3B02; --pen-ring: #936823; }
:root.dark-mode [data-pen="weather"] { --pen: #76C9F8; --pen-strong: #A5DDFE; --pen-wash: #0F2C3C; --pen-mark: #034866; --pen-ring: #287AA3; }
:root.dark-mode [data-pen="age"] { --pen: #F2A1C5; --pen-strong: #FFBFDA; --pen-wash: #3A1F2B; --pen-mark: #632D47; --pen-ring: #9E5878; }
:root.dark-mode [data-pen="tasks"] { --pen: #A2BCFE; --pen-strong: #C3D4FE; --pen-wash: #1F283F; --pen-mark: #2F3F6F; --pen-ring: #586FAC; }
:root.dark-mode [data-pen="words"] { --pen: #CDADF4; --pen-strong: #E0C8FE; --pen-wash: #2E233B; --pen-mark: #4D3566; --pen-ring: #7F62A0; }
:root.dark-mode [data-pen="qr"] { --pen: #F4AA7E; --pen-strong: #FFC7A5; --pen-wash: #3A2213; --pen-mark: #653310; --pen-ring: #9F5F36; }
:root.dark-mode [data-pen="whatsapp"] { --pen: #74D4B1; --pen-strong: #A0E6CA; --pen-wash: #0E3025; --pen-mark: #004F3A; --pen-ring: #228466; }
:root.dark-mode [data-pen="pass"] { --pen: #FAA39C; --pen-strong: #FEC4BE; --pen-wash: #3C201D; --pen-mark: #682E2B; --pen-ring: #A45953; }
:root.dark-mode [data-pen="bmi"] { --pen: #5ED1DE; --pen-strong: #93E4ED; --pen-wash: #042F33; --pen-mark: #004C53; --pen-ring: #0A818B; }
:root.dark-mode [data-pen="prayer"] { --pen: #5DD2D8; --pen-strong: #93E5E9; --pen-wash: #042F32; --pen-mark: #044C50; --pen-ring: #088187; }
:root.dark-mode [data-pen="qibla"] { --pen: #85D2A0; --pen-strong: #ABE4BD; --pen-wash: #152F1F; --pen-mark: #0F4F2E; --pen-ring: #3A8357; }
:root.dark-mode [data-pen="ayah"] { --pen: #DDB96B; --pen-strong: #EDD198; --pen-wash: #33270C; --pen-mark: #553E01; --pen-ring: #8C6C1F; }
:root.dark-mode [data-pen="athkar"] { --pen: #9BBEFE; --pen-strong: #BED5FE; --pen-wash: #1C293F; --pen-mark: #29416F; --pen-ring: #5171AC; }
:root.dark-mode [data-pen="tasbeeh"] { --pen: #FAA2A4; --pen-strong: #FEC3C3; --pen-wash: #3C1F20; --pen-mark: #682D31; --pen-ring: #A4585B; }
:root.dark-mode [data-pen="zakat"] { --pen: #A0CD88; --pen-strong: #BEE1AC; --pen-wash: #1F2E17; --pen-mark: #2D4C1A; --pen-ring: #577E41; }
:root.dark-mode [data-pen="hijri"] { --pen: #C8AEF8; --pen-strong: #DBCAFE; --pen-wash: #2C243C; --pen-mark: #4A3768; --pen-ring: #7B63A3; }
/* داخل نطاق القلم يصبح «الحبر» بلون الأداة: العنوان والزر والنتيجة وحلقة التركيز */
[data-pen] { --ink: var(--pen); --ink-strong: var(--pen-strong); --ink-wash: var(--pen-wash); --ink-ring: var(--pen-ring); }
/* الشريط العلوي والتذييل يبقيان بحبر الهوية الأزرق */
.zain-topbar-wrap, .site-footer { --ink: var(--brand); --ink-strong: var(--brand-strong); --ink-wash: var(--brand-wash); --ink-ring: var(--brand-ring); }

/* ---------- الأساس ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--topbar-h) + 16px); }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--ground);
  color: var(--text);
  font: 400 1.0625rem/1.85 var(--font-ui);
  text-align: start;
  overflow-x: hidden;
}
img, svg { max-width: 100%; height: auto; }
a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
a:hover { text-decoration-thickness: 2px; }
p { margin: 0 0 1em; }
h1, h2, h3, h4 { margin: 0; font-weight: 700; line-height: 1.4; }
strong, b { font-weight: 700; }
small { font-size: .875rem; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; -webkit-tap-highlight-color: transparent; }
::selection { background: var(--ink); color: var(--on-ink); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
[hidden] { display: none !important; }

/* ---------- الشريط العلوي ---------- */
.zain-topbar-wrap {
  position: sticky; top: 0; z-index: 1000;
  background: var(--ground);
  border-bottom: 1px solid var(--line);
}
.zain-topbar {
  max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter);
  min-height: var(--topbar-h);
  display: flex; align-items: center; gap: 28px;
}
.zain-brand { display: flex; align-items: center; gap: 10px; flex: none; color: var(--ink); text-decoration: none; }
.zain-brand img { width: 36px; height: 36px; border-radius: 8px; object-fit: cover; }
.zain-brand span { font-family: var(--font-display); font-size: 1.35rem; line-height: 1; }
.zain-brand small { display: none; }
.zain-top-links { flex: 1; display: flex; align-items: center; gap: 2px; min-width: 0; }
.zain-top-links a {
  padding: 8px 12px; border-radius: 8px;
  color: var(--muted); font-weight: 500; font-size: .95rem; text-decoration: none; white-space: nowrap;
}
.zain-top-links a:hover { color: var(--text); background: var(--ink-wash); }
.zain-top-links a[aria-current="page"] {
  color: var(--ink);
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 9px;
}
.zain-top-actions { display: flex; gap: 8px; flex: none; }
.zain-top-icon {
  width: 40px; height: 40px; padding: 0;
  display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: var(--r-ctl);
  background: var(--paper); color: var(--text); font-size: 1.05rem; line-height: 1;
}
.zain-top-icon:hover { border-color: var(--line-strong); }

/* ---------- رأس الصفحة: سطور الدفتر ---------- */
.page-head {
  position: relative;
  background-color: var(--paper);
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--rule) - 1px), var(--rule-color) calc(var(--rule) - 1px), var(--rule-color) var(--rule));
  background-position: 0 var(--rule-shift);
  border-bottom: 1px solid var(--line);
}
.page-head-inner {
  position: relative;
  max-width: var(--max); margin: 0 auto;
  padding: var(--rule) var(--gutter);
  display: grid; grid-template-columns: var(--margin-col) minmax(0, 1fr); column-gap: var(--gap);
}
/* خط الهامش: نفس الموضع في الرأس والمحتوى ليبدو خطاً واحداً متصلاً */
.page-head-inner::before,
.container::before {
  content: '';
  position: absolute; top: 0; bottom: 0;
  inset-inline-start: calc(var(--gutter) + var(--margin-col) + var(--gap) / 2);
  width: 1px; background: var(--margin);
  pointer-events: none;
}
.page-margin { grid-column: 1; min-width: 0; font-size: .925rem; line-height: var(--rule); color: var(--muted); }
.page-main { grid-column: 2; min-width: 0; }
.page-head h1 {
  font-family: var(--font-display); color: var(--ink);
  font-size: 2.6rem; line-height: var(--rule);
  position: relative; top: var(--h1-nudge, 2px);
  margin: 0;
}
.page-lead, .page-head p { font-size: 1.125rem; line-height: var(--rule); margin: 0; max-width: 62ch; }

.page-head--home h1 {
  font-size: 5.25rem; line-height: calc(var(--rule) * 2);
  --h1-nudge: 5px;
  margin-bottom: 0;
  animation: ink-write 1.1s cubic-bezier(.4, 0, .2, 1) .15s backwards;
}
.page-head--home .page-lead { max-width: 58ch; }
@keyframes ink-write {
  from { clip-path: inset(-40% 0 -40% 100%); }
  to { clip-path: inset(-40% 0 -40% 0); }
}

/* تاريخ اليوم في الهامش، كما يُكتب أعلى صفحة الدفتر */
.today-note { margin: 0; display: grid; }
.today-note span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.today-note .today-day { font-family: var(--font-display); color: var(--ink); font-size: 1.2rem; }

/* مسار الصفحة داخل الهامش */
.zain-breadcrumbs { display: flex; flex-wrap: wrap; gap: 0 8px; font-size: .9rem; line-height: var(--rule); color: var(--muted); }
.zain-breadcrumbs a { color: var(--ink); text-decoration: none; }
.zain-breadcrumbs a:hover { text-decoration: underline; }
.zain-breadcrumbs > :nth-last-child(-n+2) { display: none; }

/* ---------- شبكة المحتوى: عمود الهامش + عمود الصفحة ---------- */
.container {
  position: relative;
  max-width: var(--max); margin: 0 auto;
  padding: 40px var(--gutter) 24px;
  display: grid; grid-template-columns: var(--margin-col) minmax(0, 1fr); column-gap: var(--gap);
  align-items: start;
}
.container > * { grid-column: 2; min-width: 0; }
.zain-guide-layout { display: contents; }
.zain-guide-layout > .content-card { grid-column: 2; min-width: 0; }
.container > .margin-col,
.zain-guide-layout > .zain-guide-toc {
  grid-column: 1; grid-row: 1 / span 40;
  position: sticky; top: calc(var(--topbar-h) + 24px);
  max-height: calc(100vh - var(--topbar-h) - 48px); overflow-y: auto;
  scrollbar-width: thin;
}

/* ---------- فهرس الأدوات في الهامش ---------- */
.tool-index-title, .zain-guide-toc-head strong {
  display: block;
  font-family: var(--font-display); color: var(--ink); font-size: 1.25rem; line-height: 1.5;
  margin: 0 0 8px;
}
.tool-index-label { margin: 18px 0 2px; font-size: .8rem; font-weight: 700; color: var(--muted); }
.tool-index ul { list-style: none; margin: 0; padding: 0; }
.tool-index li a {
  display: block; padding: 7px 0;
  border-bottom: 1px solid var(--rule-color);
  color: var(--text); text-decoration: none; line-height: 1.45; font-weight: 500;
}
.tool-index li a small { display: block; font-size: .8rem; font-weight: 400; color: var(--muted); }
.tool-index li a:hover, .tool-index li a.is-current { color: var(--ink); }
.tool-index li a.is-current { border-bottom-color: var(--ink); }
.tool-index li a[data-pen] { position: relative; padding-inline-start: 16px; }
.tool-index li a[data-pen]::before {
  content: ''; position: absolute; inset-inline-start: 0; top: 11px;
  width: 6px; height: 20px; border-radius: 3px; background: var(--pen);
}
.tool-index-more {
  display: block; margin-top: 18px; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: var(--r-ctl);
  background: var(--paper); text-decoration: none; color: var(--text); line-height: 1.5;
}
.tool-index-more b { display: block; color: var(--ink); }
.tool-index-more small { color: var(--muted); }
.tool-index-more:hover { border-color: var(--ink); }

/* ---------- ألواح الأدوات ---------- */
.tools-grid, .islam-tools-grid { display: grid; gap: 24px; }
.tool-section, .islam-tool-card, .contact-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-panel);
  padding: 26px 32px 24px;
  scroll-margin-top: calc(var(--topbar-h) + 20px);
}
.tool-header { padding-bottom: 14px; margin-bottom: 20px; border-bottom: 1px solid var(--rule-color); }
.tool-section h2, .islam-tool-card h2, .contact-card h2, .home-value-strip h2 {
  font-family: var(--font-display); color: var(--ink);
  font-size: 1.75rem; line-height: 1.6;
}
.tool-section[data-pen], .islam-tool-card[data-pen] { position: relative; }
/* علامة ملوّنة على حافة اللوح، كأوراق العلامات اللاصقة على صفحات الدفتر */
.tool-section[data-pen]::before, .islam-tool-card[data-pen]::before {
  content: ''; position: absolute; top: 32px; inset-inline-start: -7px;
  width: 14px; height: 36px; border-radius: 4px; background: var(--pen);
}
/* عنوان كل أداة مظلّل بقلم فسفوري بلونها */
.tool-section[data-pen] h2, .islam-tool-card[data-pen] h2 {
  display: inline; padding: 0 .12em;
  background-image: linear-gradient(to top, transparent .14em, var(--pen-mark) .14em, var(--pen-mark) .6em, transparent .6em);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.tool-desc-short, .tool-header p, .tool-desc {
  margin: 4px 0 0; color: var(--muted); font-size: 1rem; max-width: 64ch;
}
.tool-desc { margin: 4px 0 18px; padding-bottom: 14px; border-bottom: 1px solid var(--rule-color); }
.tool-desc strong { color: var(--text); font-weight: 500; }
.tool-wrapper { margin: 0; }
.tool-section > p { margin: 14px 0 0; font-size: .875rem; color: var(--muted); }

/* ---------- الحقول ---------- */
input[type="text"], input[type="number"], input[type="date"], input[type="search"],
input[type="tel"], input[type="email"], input:not([type]), select, textarea {
  display: block; width: 100%; margin: 0;
  min-height: 48px; padding: 10px 14px;
  border: 1px solid var(--line-strong); border-radius: var(--r-ctl);
  background: var(--paper); color: var(--text);
  font-size: 1rem; line-height: 1.5;
  transition: border-color .15s, box-shadow .15s;
}
textarea { min-height: 120px; line-height: 1.8; resize: vertical; }
select {
  appearance: none; -webkit-appearance: none;
  padding-inline-end: 38px;
  background-image: var(--select-arrow); background-repeat: no-repeat;
  background-position: left 14px center;
  cursor: pointer;
}
input::placeholder, textarea::placeholder { color: var(--muted); opacity: .75; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px var(--ink-ring); }
input[type="checkbox"], input[type="radio"], input[type="range"] { accent-color: var(--ink); }
input[type="range"] { width: 100%; margin: 0; }
input[type="checkbox"] { width: 18px; height: 18px; margin: 0; flex: none; }

label, .input-label { display: block; margin: 16px 0 6px; font-size: .95rem; font-weight: 500; color: var(--text); }
.field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
.field-row label { margin-top: 0; }
.task-entry { display: flex; gap: 10px; margin-bottom: 14px; }
.task-entry input { flex: 1; min-width: 0; }
.tool-wrapper > label:first-child, .tool-wrapper > .input-label:first-child, .zakat-form-grid > label:first-child { margin-top: 0; }
.field-help { margin-top: 6px; font-size: .85rem; color: var(--muted); }

/* ---------- الأزرار ---------- */
.tool-primary-action, .islam-primary-action, .send-btn, .ayah-btn, .location-btn,
.prayer-widget-container > button, .guide-tool-back a, .zain-toc-tool-link, .ztw-location-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 24px; margin-top: 18px;
  border: 0; border-radius: var(--r-ctl);
  background: var(--ink); color: var(--on-ink);
  font-weight: 700; font-size: 1rem; line-height: 1.2; text-decoration: none;
  transition: background-color .15s;
}
.tool-primary-action:hover, .islam-primary-action:hover, .send-btn:hover, .ayah-btn:hover, .location-btn:hover,
.prayer-widget-container > button:hover, .guide-tool-back a:hover, .zain-toc-tool-link:hover, .ztw-location-btn:hover { background: var(--ink-strong); }
.tool-primary-action:active, .islam-primary-action:active, .send-btn:active, .ayah-btn:active { transform: translateY(1px); }
button:disabled { opacity: .6; cursor: progress; }
.secondary, .btn-small, .ztw-refresh {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 40px; padding: 0 16px;
  border: 1px solid var(--line-strong); border-radius: var(--r-ctl);
  background: var(--paper); color: var(--ink);
  font-weight: 500; font-size: .95rem;
}
.secondary:hover, .btn-small:hover, .ztw-refresh:hover { border-color: var(--ink); }
.tool-action-row, .zain-inline-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 18px; }
.tool-action-row > button { margin-top: 0; }
.zain-inline-actions { justify-content: center; }

/* ---------- النتائج والملاحظات ---------- */
.result {
  margin-top: 18px; padding: 16px 20px;
  border-radius: 12px; background: var(--ink-wash); color: var(--text);
  font-weight: 500; line-height: 1.8;
}
.result:empty { display: none; }
.result-loading { color: var(--muted); }
.tip-box {
  display: block; margin-top: 18px; padding: 12px 16px;
  border: 1px dashed var(--line-strong); border-radius: var(--r-ctl);
  font-size: .925rem; color: var(--muted); line-height: 1.75;
}
.tip-box > div { display: inline; }
.tip-box strong { color: var(--text); font-weight: 500; }
.tip-icon { display: none; }
.tool-guide-cta, .islam-guide-cta { margin-top: 18px; font-size: .95rem; }
.tool-guide-cta a, .islam-guide-cta a { font-weight: 500; }

/* ---------- العملات ---------- */
.currency-labels, .currency-row { display: grid; grid-template-columns: minmax(0, 1fr) 48px minmax(0, 1fr); gap: 10px; align-items: center; }
.currency-labels { margin: 16px 0 6px; font-size: .95rem; font-weight: 500; }
.currency-labels span:last-child { grid-column: 3; }
.swap-btn {
  width: 48px; height: 48px; padding: 0;
  border: 1px solid var(--line-strong); border-radius: var(--r-ctl);
  background: var(--paper); color: var(--ink); font-size: 1.2rem;
}
.swap-btn:hover { border-color: var(--ink); }
.currency-result-main strong {
  display: block; font-size: 2rem; line-height: 1.35; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.currency-result-main span { color: var(--muted); }
.currency-result-details {
  display: flex; flex-wrap: wrap; gap: 4px 20px;
  margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--rule-color);
  font-size: .875rem; font-weight: 400; color: var(--muted);
}

/* ---------- الطقس ---------- */
.ztw-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 12px 20px; }
.ztw-head-copy { min-width: 0; flex: 1 1 320px; }
.ztw-head-copy p { margin: 4px 0 0; color: var(--muted); font-size: 1rem; }
.ztw-loading {
  display: grid; justify-items: center; gap: 10px; text-align: center;
  padding: 28px 18px; border: 1px dashed var(--line-strong); border-radius: 12px;
}
.ztw-location-orb { font-size: 1.6rem; line-height: 1; }
.ztw-loading-copy strong { display: block; font-size: 1.1rem; }
.ztw-loading-copy p { margin: 4px auto 0; max-width: 46ch; color: var(--muted); font-size: .95rem; }
.ztw-loading .location-btn { margin-top: 4px; }
.ztw-error { margin: 0; color: var(--bad); }
.ztw-overview { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 16px; }
.ztw-current-card {
  display: flex; flex-direction: column; justify-content: space-between; gap: 16px;
  padding: 20px; border-radius: 12px; background: var(--ink-wash);
}
.ztw-current-card.is-night { background: #1F2558; color: #E8EAFB; --muted: #B4BAE0; --ink: #C9D0FF; --rule-color: #353C78; }
.ztw-current-top { display: flex; gap: 14px; align-items: flex-start; }
.ztw-current-icon { font-size: 2.6rem; line-height: 1; }
.ztw-kicker { font-size: .85rem; color: var(--muted); }
.ztw-temp-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.ztw-temp-row strong { font-size: 3.25rem; line-height: 1.15; color: var(--ink); font-variant-numeric: tabular-nums; }
.ztw-temp-row span { font-weight: 500; }
.ztw-meta, .ztw-updated { font-size: .85rem; color: var(--muted); }
.ztw-current-bottom { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding-top: 12px; border-top: 1px solid var(--rule-color); }
.ztw-current-bottom span { display: block; font-size: .8rem; color: var(--muted); }
.ztw-current-bottom b { font-variant-numeric: tabular-nums; }
.ztw-metrics {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px;
  background: var(--line); border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
}
.ztw-metric { display: flex; align-items: center; gap: 10px; padding: 11px 14px; background: var(--paper); }
.ztw-metric-icon { width: 1.6em; text-align: center; font-size: 1.15rem; flex: none; }
.ztw-metric small { display: block; font-size: .8rem; color: var(--muted); line-height: 1.4; }
.ztw-metric b { font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.ztw-metric em { font-style: normal; font-weight: 400; font-size: .8rem; color: var(--muted); }
.ztw-forecast-block { margin-top: 18px; }
.ztw-section-title { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 12px; margin-bottom: 10px; }
.ztw-section-title span { display: block; font-size: .8rem; color: var(--muted); }
.ztw-section-title small { font-size: .8rem; color: var(--muted); }
.ztw-forecast { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ztw-day {
  display: grid; justify-items: center; gap: 2px; text-align: center;
  padding: 12px 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper);
}
.ztw-day-icon { font-size: 1.6rem; line-height: 1.3; }
.ztw-day-desc, .ztw-day small { font-size: .8rem; color: var(--muted); }
.ztw-day b { font-variant-numeric: tabular-nums; }
.ztw-alert { margin-top: 14px; padding: 12px 16px; border-radius: var(--r-ctl); background: var(--warn-wash); color: var(--warn); font-weight: 500; }
.ztw-source-note { margin-top: 12px; font-size: .85rem; color: var(--muted); }

/* ---------- QR ---------- */
.qr-workbench { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 24px; align-items: start; }
.qr-input-pane label { margin-top: 0; }
.qr-input-pane small { display: block; margin-top: 8px; font-size: .85rem; color: var(--muted); }
.result.qr-result-card {
  display: grid; margin: 0; min-height: 240px; padding: 16px;
  place-items: center; align-content: center;
  background: var(--paper); border: 1px dashed var(--line-strong);
}
.qr-empty-state { color: var(--muted); font-size: .9rem; font-weight: 400; text-align: center; }
.qr-preview-image { width: 200px; height: 200px; padding: 8px; border-radius: 8px; background: #fff; image-rendering: pixelated; }
.qr-actions { margin-top: 12px !important; }
/* Hidden until a script shows it; replaces inline style attributes, which the CSP no longer allows.
   Not !important, so element.style.display set by the tools still wins. */
.start-hidden { display: none; }
.text-center { text-align: center; }

/* ---------- واتساب ---------- */
.whatsapp-preview {
  display: grid; gap: 2px; margin-top: 16px; padding: 12px 16px;
  border: 1px dashed var(--line-strong); border-radius: var(--r-ctl);
}
.whatsapp-preview span { font-size: .8rem; color: var(--muted); }
.whatsapp-preview b { font-weight: 500; color: var(--muted); unicode-bidi: plaintext; overflow-wrap: anywhere; }
.whatsapp-preview.is-ready { border-style: solid; border-color: var(--ink); }
.whatsapp-preview.is-ready b { color: var(--ink); }

/* ---------- الراتب ---------- */
.salary-segment-bar { display: flex; gap: 3px; height: 10px; margin-bottom: 14px; }
.salary-segment { border-radius: 3px; }
.salary-segment.needs, .salary-card:nth-child(1) { --seg: var(--seg-needs); }
.salary-segment.wants, .salary-card:nth-child(2) { --seg: var(--seg-wants); }
.salary-segment.save, .salary-card:nth-child(3) { --seg: var(--seg-save); }
.salary-segment { background: var(--seg); }
.salary-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.salary-card { padding: 10px 14px 12px; border-radius: var(--r-ctl); background: var(--paper); border-top: 3px solid var(--seg); }
.salary-card span { display: block; font-size: .85rem; color: var(--muted); }
.salary-card b { font-size: 1.35rem; font-variant-numeric: tabular-nums; }
.salary-note { display: block; margin-top: 10px; color: var(--muted); font-weight: 400; }

/* ---------- المهام: أسطر الدفتر ---------- */
.task-add-btn { margin-top: 0; flex: none; }
.task-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; font-size: .9rem; color: var(--muted); }
.task-summary b { color: var(--text); }
.task-clear-btn { margin-inline-start: auto; min-height: 34px; padding: 0 12px; font-size: .85rem; }
#taskList { list-style: none; margin: 12px 0 0 !important; padding: 0; border-top: 1px solid var(--rule-color); }
.task-item { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 4px 0; border-bottom: 1px solid var(--rule-color); }
.task-toggle {
  width: 26px; height: 26px; padding: 0; flex: none;
  display: grid; place-items: center;
  border: 1.5px solid var(--ink); border-radius: 50%;
  background: transparent; color: transparent; font-size: .8rem; font-weight: 700; line-height: 1;
}
.task-item.is-done .task-toggle { background: var(--ink); color: var(--on-ink); }
.task-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.task-item.is-done .task-text { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--margin); text-decoration-thickness: 2px; }
.task-remove {
  width: 34px; height: 34px; padding: 0; flex: none;
  border: 0; border-radius: 8px; background: transparent; color: var(--muted); font-size: 1.3rem; line-height: 1;
}
.task-remove:hover { color: var(--bad); background: var(--bad-wash); }
.task-empty { padding: 12px 0; color: var(--muted); border-bottom: 1px solid var(--rule-color); }

/* ---------- عداد الكلمات ---------- */
.result.text-stats-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: 1px;
  padding: 0; background: var(--line); border: 1px solid var(--line); overflow: hidden;
}
.text-stat { display: grid; gap: 2px; padding: 12px 10px; text-align: center; background: var(--paper); }
.text-stat span { font-size: .8rem; font-weight: 400; color: var(--muted); }
.text-stat b { font-size: 1.5rem; line-height: 1.3; color: var(--ink); font-variant-numeric: tabular-nums; }

/* ---------- كلمة المرور ---------- */
.password-controls { display: grid; gap: 14px; }
.password-length-row label { display: flex; justify-content: space-between; margin: 0 0 6px; }
.password-length-row b { color: var(--ink); font-variant-numeric: tabular-nums; }
.password-options { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.password-options label {
  display: flex; align-items: center; gap: 8px; margin: 0;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-ctl);
  font-size: .9rem; cursor: pointer;
}
.password-options label:has(input:checked) { border-color: var(--ink); background: var(--ink-wash); }
.password-profile { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 4px 12px; font-size: .875rem; }
.password-profile span { color: var(--muted); }
.password-profile i { grid-column: 1 / -1; display: block; height: 6px; border-radius: 3px; background: var(--rule-color); overflow: hidden; }
.password-profile em { display: block; height: 100%; width: 50%; border-radius: 3px; background: var(--ink); transition: width .2s; }
.result.password-result {
  direction: ltr; text-align: center;
  font-family: var(--font-code); font-size: 1.35rem; font-weight: 500; letter-spacing: .04em;
  overflow-wrap: anywhere; user-select: all; color: var(--ink);
}

/* ---------- العمر ---------- */
.age-result-main { font-size: 1.5rem; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.age-result-sub { margin-top: 2px; color: var(--muted); font-weight: 400; }

/* ---------- الصفحة الرئيسية: بعد الأدوات ---------- */
.home-value-strip { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--rule-color); }
.home-value-strip p { margin: 8px 0 0; max-width: 68ch; }
.home-value-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 24px; }
.home-value-grid b { display: block; color: var(--ink); }
.home-value-grid span { font-size: .925rem; color: var(--muted); }

/* ---------- الأدوات الإسلامية ---------- */
.islam-search-input { margin-bottom: 24px; }
.ayah-display {
  margin: 0; padding: 24px 20px; border-radius: 12px;
  background: var(--gold-wash); color: var(--muted); text-align: center;
}
.ayah-verse { font-family: var(--font-quran); font-size: 1.9rem; line-height: 2.1; color: var(--text); }
.ayah-tafseer { margin-top: 6px; font-size: .875rem; color: var(--muted); }
.ayah-display a { display: inline-block; margin-top: 6px; font-size: .9rem; }

.prayer-widget-container > p { margin: 0; color: var(--muted); }
.prayer-loading { color: var(--muted); }
.prayer-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 8px; }
.prayer-date { font-family: var(--font-display); color: var(--ink); font-size: 1.2rem; line-height: 1.6; }
.prayer-controls { display: flex; flex-wrap: wrap; gap: 8px; }
select.method-select { width: auto; max-width: 100%; min-height: 40px; padding-block: 6px; font-size: .875rem; }
.prayer-row {
  display: flex; justify-content: space-between; align-items: center;
  min-height: 48px; padding: 0 12px; border-bottom: 1px solid var(--rule-color);
}
.prayer-row.is-next { border-radius: 8px; border-bottom-color: transparent; background: var(--ink-wash); color: var(--ink); font-weight: 700; }
.prayer-time { font-weight: 700; font-variant-numeric: tabular-nums; direction: ltr; }
.prayer-meta { margin-top: 10px; font-size: .8rem; color: var(--muted); line-height: 1.7; }
.prayer-next-countdown { margin-top: 6px; font-weight: 700; color: var(--ink); }
.prayer-accuracy-note { margin-top: 14px; font-size: .875rem; color: var(--muted); }

.qibla-area { display: none; text-align: center; }
.qibla-box {
  position: relative; width: min(260px, 70vw); aspect-ratio: 1; margin: 20px auto;
  border: 2px solid var(--ink); border-radius: 50%;
  background: var(--paper); overflow: hidden;
}
.compass-rose {
  position: absolute; inset: 0; border-radius: 50%;
  background:
    linear-gradient(var(--rule-color), var(--rule-color)) center / 1px 100% no-repeat,
    linear-gradient(var(--rule-color), var(--rule-color)) center / 100% 1px no-repeat;
  box-shadow: inset 0 0 0 10px var(--paper), inset 0 0 0 11px var(--rule-color);
}
.kaaba-fixed-icon { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); font-size: 1.9rem; line-height: 1; z-index: 2; }
.needle-wrapper { position: absolute; inset: 0; z-index: 1; transition: transform .2s ease-out; }
.qibla-arrow-drawn {
  position: absolute; top: 50%; left: 50%; width: 4px; height: 38%;
  transform: translate(-50%, -100%); border-radius: 2px; background: var(--gold);
}
.qibla-arrow-drawn::after {
  content: ''; position: absolute; top: -16px; left: 50%; transform: translateX(-50%);
  border-inline: 9px solid transparent; border-bottom: 18px solid var(--gold);
}
.center-dot {
  position: absolute; top: 50%; left: 50%; width: 14px; height: 14px; z-index: 3;
  transform: translate(-50%, -50%); border-radius: 50%; background: var(--ink); border: 3px solid var(--paper);
}
.qibla-readouts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; max-width: 360px; margin: 0 auto; }
.qibla-readouts > div { padding: 10px; border: 1px solid var(--line); border-radius: var(--r-ctl); }
.qibla-readouts span { display: block; font-size: .8rem; color: var(--muted); }
.qibla-readouts b { font-size: 1.4rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.qibla-status { margin-top: 12px; font-weight: 500; }
.qibla-sensor-note { margin-top: 4px; font-size: .85rem; color: var(--muted); }
.qibla-fallback-link { display: block; width: fit-content; margin-top: 14px; font-size: .95rem; }

.tasbeeh-instruction { margin: 0; text-align: center; color: var(--muted); font-size: .95rem; }
.tasbeeh-goals { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; margin-top: 10px; }
.tasbeeh-goals span { color: var(--muted); font-size: .9rem; }
.tasbeeh-goals button {
  min-height: 36px; padding: 0 16px;
  border: 1px solid var(--line-strong); border-radius: 999px;
  background: var(--paper); color: var(--text); font-weight: 500; font-size: .9rem;
}
.tasbeeh-goals button.active { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.tasbeeh-goal-status { margin-top: 8px; text-align: center; font-size: .9rem; color: var(--muted); }
.counter-circle {
  width: 184px; height: 184px; margin: 18px auto 10px;
  display: grid; place-items: center;
  border: 2px solid var(--ink); border-radius: 50%;
  background: var(--paper); box-shadow: inset 0 0 0 9px var(--ink-wash);
  color: var(--ink); font-size: 3.25rem; font-weight: 700; line-height: 1;
  font-variant-numeric: tabular-nums; cursor: pointer; user-select: none;
  transition: transform .08s;
}
.counter-circle:active { transform: scale(.97); }
.counter-controls { text-align: center; }

.accordion {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  width: 100%; min-height: 52px; margin-top: 10px; padding: 0 16px;
  border: 1px solid var(--line); border-radius: var(--r-ctl);
  background: var(--paper); color: var(--text); font-weight: 700; font-size: 1rem; text-align: start;
}
.accordion span { color: var(--muted); font-size: .75rem; transition: transform .2s; }
.accordion.active { border-color: var(--ink); border-end-start-radius: 0; border-end-end-radius: 0; color: var(--ink); }
.accordion.active span { transform: rotate(180deg); }
.panel { display: none; padding: 6px 16px 14px; border: 1px solid var(--ink); border-top: 0; border-radius: 0 0 var(--r-ctl) var(--r-ctl); }
.panel h3 { margin: 14px 0 2px; font-size: .95rem; color: var(--ink); }
.panel p { margin: 0 0 8px; font-size: .9rem; color: var(--muted); }
.panel h3 + p { font-family: var(--font-quran); font-size: 1.45rem; line-height: 2.1; color: var(--text); }

.zakat-form-grid { display: grid; }

/* ---------- مكتبة الشروحات ---------- */
.guides-editorial-intro { margin-bottom: 8px; }
.guides-editorial-intro h2 { font-size: 1.2rem; line-height: 1.6; }
.guides-editorial-intro p { margin: 6px 0 0; color: var(--muted); max-width: 68ch; }
.zain-guides-controls { display: grid; gap: 12px; }
.zain-guides-search { position: relative; }
.zain-guides-search span { position: absolute; inset-inline-start: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.zain-guides-search input { padding-inline-start: 38px; }
.zain-guide-filter-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.zain-guide-filter {
  min-height: 34px; padding: 0 14px;
  border: 1px solid var(--line-strong); border-radius: 999px;
  background: var(--paper); color: var(--text); font-size: .875rem; font-weight: 500;
}
.zain-guide-filter.active { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.guide-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }
.guide-item { display: grid; align-content: start; gap: 4px; padding: 20px 0 18px; border-bottom: 1px solid var(--rule-color); }
.guide-item[data-pen] { position: relative; padding-inline-start: 18px; }
.guide-item[data-pen]::before {
  content: ''; position: absolute; inset-inline-start: 0; top: 27px;
  width: 6px; height: 24px; border-radius: 3px; background: var(--pen);
}
.guide-item h2, .guide-item h3 { font-family: var(--font-display); color: var(--ink); font-size: 1.3rem; line-height: 1.6; }
.guide-item p { margin: 0; font-size: .95rem; color: var(--muted); }
.guide-item .read-btn { justify-self: start; margin-top: 4px; font-weight: 500; font-size: .95rem; }
.zain-filter-hidden { display: none !important; }
.zain-guide-empty { display: none; padding: 20px 0; color: var(--muted); }
.home-link, .back-link, .back-btn { display: inline-block; margin-top: 28px; font-weight: 500; }

/* ---------- صفحات المقالات والصفحات الثابتة ---------- */
.content-card { max-width: 70ch; font-size: 1.0625rem; line-height: 1.95; }
.content-card h2 {
  margin: 2.2rem 0 .5rem;
  font-family: var(--font-display); color: var(--ink); font-size: 1.6rem; line-height: 1.55;
}
.content-card > h2:first-child, .content-card > :first-child { margin-top: 0; }
.content-card h3 { margin: 1.6rem 0 .3rem; font-size: 1.125rem; }
.content-card ul, .content-card ol { margin: 0 0 1em; padding-inline-start: 1.4em; }
.content-card li { margin: .35em 0; }
.content-card li::marker { color: var(--ink); }
.content-card table { width: 100%; border-collapse: collapse; margin: 0 0 1.2em; font-size: .95rem; }
.content-card th, .content-card td { padding: 10px 12px; border-bottom: 1px solid var(--rule-color); text-align: start; vertical-align: top; }
.content-card th { color: var(--muted); font-weight: 500; }
.content-card th, .content-card td { font-variant-numeric: tabular-nums; }
@media (max-width: 560px) {
  .content-card table { display: block; overflow-x: auto; }
  .content-card th, .content-card td { padding: 8px 6px; }
}
.guide-lead { font-size: 1.2rem; line-height: 1.95; margin-bottom: 1.4em; }
.highlight-box, .info-box, .medical-disclaimer, .warning-box {
  margin: 1.4em 0; padding: 14px 18px; border-radius: 12px; background: var(--ink-wash);
}
.warning-box, .medical-disclaimer { background: var(--warn-wash); }
.highlight-box > :last-child, .info-box > :last-child, .warning-box > :last-child, .medical-disclaimer > :last-child { margin-bottom: 0; }
.last-reviewed { margin-top: 2.4rem; padding-top: 14px; border-top: 1px solid var(--rule-color); font-size: .9rem; color: var(--muted); }
.guide-tool-back { margin-top: 8px; }

/* لقطات الأدوات داخل الشروحات */
.guide-shot { margin: 1.6em 0; }
.guide-shot img { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); }
.guide-shot figcaption { margin-top: 8px; font-size: .875rem; line-height: 1.7; color: var(--muted); }
/* شروحات ذات صلة: كل رابط بلون أداته */
.related-guides { margin-top: 2.4rem; }
.related-guides ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.related-guides li { margin: 0; }
.related-guides a {
  position: relative; display: block; padding: 10px 14px; padding-inline-start: 22px;
  border: 1px solid var(--line); border-radius: var(--r-ctl); background: var(--paper);
  color: var(--ink); font-weight: 500; text-decoration: none;
}
.related-guides a::before { content: ''; position: absolute; inset-inline-start: 10px; top: 50%; transform: translateY(-50%); width: 4px; height: 18px; border-radius: 2px; background: var(--pen); }
.related-guides a:hover { border-color: var(--ink); }

/* فهرس الدليل في الهامش */
.zain-guide-toc { font-size: .925rem; }
.zain-guide-toc-head small { display: block; margin-top: -4px; margin-bottom: 8px; color: var(--muted); font-size: .825rem; }
.zain-guide-toc nav a {
  display: block; padding: 7px 0; border-bottom: 1px solid var(--rule-color);
  color: var(--muted); text-decoration: none; line-height: 1.5;
}
.zain-guide-toc nav a:hover { color: var(--ink); }
.zain-toc-tool-link { width: 100%; min-height: 44px; font-size: .95rem; }

/* بطاقات الملخص في حول/الخصوصية/الشروط */
.about-method-grid, .privacy-summary-grid, .terms-summary-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin: 0 0 1.4em;
}
.about-method-grid > div, .privacy-summary-item, .terms-summary-item {
  display: grid; gap: 2px; align-content: start;
  padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); line-height: 1.6;
}
.about-method-grid b, .privacy-summary-item strong, .terms-summary-item strong { color: var(--ink); }
.about-method-grid span, .privacy-summary-item small, .terms-summary-item small { font-size: .9rem; color: var(--muted); }
.privacy-summary-item > span:first-child, .terms-summary-item > span:first-child { display: none; }
.zain-static-meta { display: none; }

/* ---------- التواصل ---------- */
.contact-card + .contact-card { margin-top: 24px; }
.contact-card h2 + p, .contact-card h2 + .faq-grid { margin-top: 8px; }
.contact-card h2:not(:first-child) { margin-top: 28px; }
.email-box { margin-top: 8px; }
.email-text { display: block; font-size: 1.4rem; font-weight: 700; color: var(--ink); direction: ltr; text-align: end; overflow-wrap: anywhere; }
.email-note { margin-top: 4px; color: var(--muted); font-size: .9rem; }
.form-group { margin-top: 14px; }
.form-group label { margin-top: 0; }
.form-counter, .zain-char-count { display: block; margin-top: 4px; font-size: .8rem; color: var(--muted); text-align: end; }
.faq-grid { border-top: 1px solid var(--rule-color); }
.faq-item { padding: 14px 0; border-bottom: 1px solid var(--rule-color); }
.faq-q { font-weight: 700; }
.faq-a { margin-top: 4px; color: var(--muted); font-size: .95rem; }

/* ---------- صفحة 404 ---------- */
.not-found-links { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-top: 8px; }

/* ---------- التذييل ---------- */
.site-footer { margin-top: 72px; background: var(--paper); border-top: 1px solid var(--line); }
.site-footer-inner {
  max-width: var(--max); margin: 0 auto; padding: 32px var(--gutter) 40px;
  display: grid; grid-template-columns: var(--margin-col) minmax(0, 1fr) auto; column-gap: var(--gap); row-gap: 16px; align-items: start;
}
.site-footer-brand b { display: block; font-family: var(--font-display); color: var(--ink); font-size: 1.35rem; line-height: 1.6; }
.site-footer-brand span { font-size: .875rem; color: var(--muted); line-height: 1.6; }
.site-footer-links { display: flex; flex-wrap: wrap; gap: 6px 20px; padding-top: 10px; }
.site-footer-links a { color: var(--text); text-decoration: none; font-size: .95rem; }
.site-footer-links a:hover { color: var(--ink); text-decoration: underline; }
.site-footer-inner > small { padding-top: 12px; color: var(--muted); }

/* ---------- الإشعارات ---------- */
#zain-toast-region {
  position: fixed; inset-inline: 16px; bottom: 16px; z-index: 2000;
  display: grid; justify-items: center; gap: 8px; pointer-events: none;
}
.zain-toast {
  display: flex; align-items: flex-start; gap: 10px;
  max-width: 420px; padding: 12px 16px; border-radius: 12px;
  background: var(--text); color: var(--ground);
  font-size: .925rem; line-height: 1.6; pointer-events: auto;
  transition: opacity .2s, transform .2s;
  animation: toast-in .2s ease-out;
}
.zain-toast strong { display: block; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }

/* ---------- الشاشات المتوسطة والصغيرة ---------- */
@media (max-width: 1080px) {
  :root { --margin-col: 200px; --gap: 44px; }
  .password-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ztw-overview { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 900px) {
  :root { --gutter: 16px; --rule: 38px; --rule-shift: -13px; --m-line: 12px; }
  .page-head-inner, .container, .site-footer-inner {
    grid-template-columns: minmax(0, 1fr);
    padding-inline-start: calc(var(--m-line) + 18px);
  }
  .page-head-inner::before, .container::before { inset-inline-start: var(--m-line); }
  .page-margin, .page-main, .container > *, .zain-guide-layout > .content-card { grid-column: 1; }
  .container > .margin-col, .zain-guide-layout > .zain-guide-toc {
    grid-column: 1; grid-row: auto; position: static; max-height: none; overflow: visible; margin-bottom: 28px;
  }
  .page-head h1 { font-size: 2.1rem; }
  .page-head--home h1 { font-size: 3.6rem; }
  .page-lead, .page-head p { font-size: 1.0625rem; }
  .today-note { display: flex; flex-wrap: wrap; column-gap: 14px; }
  .today-note .today-day { font-size: 1.15rem; }
  .zain-breadcrumbs > :nth-last-child(-n+2) { display: none; }

  /* الفهرس يصبح شبكة مختصرة فوق الأدوات */
  .tool-index { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; }
  .tool-index-title, .tool-index-more { grid-column: 1 / -1; }
  .tool-index-group { min-width: 0; }
  .tool-index li a small { display: none; }
  .zain-guide-toc nav { columns: 2; column-gap: 20px; }
  .zain-guide-toc nav a { break-inside: avoid; }
  .zain-toc-tool-link { width: auto; }

  .site-footer-inner { grid-template-columns: minmax(0, 1fr); }
  .guide-list { grid-template-columns: minmax(0, 1fr); }
  .home-value-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
}

@media (max-width: 720px) {
  :root { --topbar-h: 104px; }
  .zain-topbar { flex-wrap: wrap; gap: 0 12px; padding-top: 10px; }
  .zain-brand { order: 1; }
  .zain-top-actions { order: 2; margin-inline-start: auto; }
  .zain-top-links {
    order: 3; flex: 1 0 100%; margin: 6px calc(var(--gutter) * -1) 0; padding: 0 var(--gutter) 8px;
    overflow-x: auto; scrollbar-width: none;
  }
  .zain-top-links::-webkit-scrollbar { display: none; }
  .zain-top-links a { padding: 6px 10px; }
  .zain-top-links a:first-child { padding-inline-start: 0; }

  .tool-section, .islam-tool-card, .contact-card { padding: 20px 18px 18px; border-radius: 14px; }
  .tool-section h2, .islam-tool-card h2, .contact-card h2, .home-value-strip h2 { font-size: 1.5rem; }
  .tools-grid, .islam-tools-grid { gap: 16px; }
  .tool-primary-action, .islam-primary-action, .send-btn, .ayah-btn, .prayer-widget-container > button { width: 100%; }
  .task-add-btn { width: auto; }
  .tool-action-row > button { flex: 1 1 140px; }
  .qr-workbench { grid-template-columns: minmax(0, 1fr); }
  .salary-grid { grid-template-columns: minmax(0, 1fr); }
  .ztw-forecast { gap: 6px; }
  .ztw-day { padding: 10px 4px; }
  .content-card h2 { font-size: 1.4rem; }
  .guide-lead { font-size: 1.1rem; }
}

@media (max-width: 420px) {
  .page-head--home h1 { font-size: 3.1rem; }
  .password-options { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ztw-metrics { grid-template-columns: minmax(0, 1fr); }
  .zain-guide-toc nav { columns: 1; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

@media print {
  .zain-topbar-wrap, .site-footer, .margin-col, .zain-guide-toc, #zain-toast-region { display: none !important; }
  .page-head { background: none; }
  .container, .page-head-inner { display: block; }
  .container::before, .page-head-inner::before { display: none; }
}