/* خط Tajawal محلي (ترخيص OFL 1.1، fonts/OFL.txt) بدل Google Fonts: ما في طلب خارجي حاجب للعرض، والخط بيتخزّن بالـ SW للعمل offline.
   الكتل مأخوذة من css2 تبع Google (Chrome) مع تغيير src بس. الروابط هون بدون ?v= بس /assets/* مخزّنة immutable، فعند تحديث الخط غيّر اسم الملف (v12 →) */
/* arabic */
@font-face {
  font-family: 'Tajawal';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/tajawal-v12-400-arabic.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, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
/* latin */
@font-face {
  font-family: 'Tajawal';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/tajawal-v12-400-latin.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;
}
/* arabic */
@font-face {
  font-family: 'Tajawal';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/tajawal-v12-500-arabic.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, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
/* latin */
@font-face {
  font-family: 'Tajawal';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/tajawal-v12-500-latin.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;
}
/* arabic */
@font-face {
  font-family: 'Tajawal';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/tajawal-v12-700-arabic.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, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
/* latin */
@font-face {
  font-family: 'Tajawal';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/tajawal-v12-700-latin.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;
}
/* arabic */
@font-face {
  font-family: 'Tajawal';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(fonts/tajawal-v12-800-arabic.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, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
/* latin */
@font-face {
  font-family: 'Tajawal';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(fonts/tajawal-v12-800-latin.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;
}
/* Alexandria (ترخيص OFL 1.1) — خط العناوين والأرقام الكبيرة بالهوية v3. متغيّر: ملف واحد لكل الأوزان.
   مستضاف محلياً متل Tajawal حتى ما يصير في طلب خارجي حاجب للعرض. */
@font-face {
  font-family: 'Alexandria';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(fonts/alexandria-v6-arabic.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-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, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face {
  font-family: 'Alexandria';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(fonts/alexandria-v6-latin.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;
}
:root {
  /* عناصر التحكم الأصلية (أيقونة منتقي التاريخ، مربعات الاختيار، شريط التمرير، نافذة التقويم) بتتبع وضع النظام.
     بدونها بتضل أيقونة التقويم سودا على خلفية الحقل الغامقة (1.13:1) ومربعات الاختيار بيضا بالوضع الغامق */
  color-scheme: light dark;
  --bg: #f4f6f8;
  --card: #ffffff;
  --text: #17202b;
  --muted: #5b6676;
  --line: #e3e8ee;
  --line-strong: #838d99;
  --accent: #0c7566;
  --accent-2: #0b5f54;
  --ring: #0b5f54;
  --accent-soft: #e2f4f0;
  --on-c: #ffffff; /* حبر النص على خلفيات --accent / --c (بالدارك بيصير داكن لأن الألوان فاتحة) */
  /* حبر النص على خلفيات ألوان العلامات التجارية الثابتة (واتساب #25d366، تيليجرام #229ed9، الذهبي).
     ما بيتغيّر بين الوضعين لأن الخلفية نفسها ما بتتغيّر، وأبيض عليها بيطلع 1.98:1 و3.02:1 (تحت 4.5:1) */
  --on-brand: #0f1419;
  --gold: #f5b532;
  --gold-soft: #fdf1d6;
  --gold-ink: #9a6800;
  --radius: 16px;
  /* المسافة تحت الهيدر الثابت (64px + هامش) لأي عنصر بيتنقل لعندو (مرساة، scrollIntoView): مكان واحد */
  --hdr-h: 80px;
  --shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 4px 16px rgba(16, 24, 40, .06);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f1419;
    --card: #182029;
    --text: #e8edf2;
    --muted: #9aa6b5;
    --line: #26303b;
    --line-strong: #5d6b7b;
    --accent: #36c2ab;
    --accent-2: #1f8f7d;
    --ring: #f5b532;
    --accent-soft: #17312d;
    --on-c: #0f1419;
    --gold-soft: #3a2f16;
    --gold-ink: #f5c55a;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 16px rgba(0, 0, 0, .25);
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Tajawal", "Segoe UI", Tahoma, system-ui, sans-serif;
  line-height: 1.8;
  font-size: 17px;
}
a { color: var(--accent); }
a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; }
.wrap { max-width: 980px; margin: 0 auto; padding: 0 16px; }
.icon { width: 24px; height: 24px; flex: none; }

/* ---------- الرأس ---------- */
header.site {
  position: sticky; top: 0; z-index: 10;
  background: var(--card);
  border-bottom: 1px solid var(--line);
}
header.site .wrap { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); }
.logo img { width: 38px; height: 38px; }
.logo b { display: block; font-size: 1.45rem; font-weight: 800; line-height: 1.2; }
.logo small { display: block; font-size: .72rem; color: var(--muted); line-height: 1.2; }
nav.top { display: flex; gap: 6px; }
nav.top a { text-decoration: none; color: var(--muted); font-size: .95rem; padding: 6px 12px; border-radius: 10px; }
nav.top a:hover { color: var(--accent); background: var(--accent-soft); }
@media (max-width: 480px) { .logo small { display: none; } nav.top a { padding: 6px 8px; } }

/* ---------- الواجهة الرئيسية ---------- */
.hero {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, #0b6659 0%, #083f38 100%);
  color: #fff; padding: 40px 0 34px;
}
@media (prefers-color-scheme: dark) { .hero { background: linear-gradient(135deg, #0c705f 0%, #083f38 100%); } }
.hero::before, .hero::after {
  content: ""; position: absolute; border-radius: 50%; background: rgba(255, 255, 255, .07);
}
.hero::before { width: 380px; height: 380px; top: -180px; left: -90px; }
.hero::after { width: 260px; height: 260px; bottom: -150px; right: 8%; }
.hero .wrap { position: relative; z-index: 1; }
.hero h1 { color: #fff; font-size: 2.15rem; margin: 0 0 8px; max-width: 26ch; }
.hero p { margin: 0 0 20px; opacity: .92; font-size: 1.08rem; max-width: 620px; }
.search { position: relative; max-width: 620px; }
.search input {
  width: 100%; padding: 17px 52px 17px 16px; border: 0; border-radius: 16px;
  font-size: 1.08rem; background: #fff; color: #17202b;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .18);
}
.search input:focus { outline: none; box-shadow: 0 0 0 4px rgba(255, 255, 255, .75), 0 8px 28px rgba(0, 0, 0, .18); }
.search svg { position: absolute; right: 15px; top: 50%; transform: translateY(-50%); color: #7a8594; }
@media (max-width: 520px) {
  .hero { padding: 26px 0 24px; }
  .hero h1 { font-size: 1.55rem; }
  .hero p { font-size: .98rem; margin-bottom: 16px; }
}

.cat { margin-top: 34px; scroll-margin-top: var(--hdr-h); }
.cat h2 { display: flex; align-items: center; gap: 10px; font-size: 1.2rem; margin: 0 0 14px; }
.cat h2::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.empty { text-align: center; color: var(--muted); padding: 30px 0; display: none; }

/* ---------- بطاقات الأدوات ---------- */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.tool-link {
  display: flex; gap: 14px; align-items: flex-start; text-decoration: none; color: var(--text);
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px; box-shadow: var(--shadow); transition: border-color .15s, transform .15s, box-shadow .15s;
}
.tool-link:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 10px 26px rgba(16, 24, 40, .1); }
/* أيقونة الأداة 3D (lib/card.js: toolImg): صورة بلونها وظلّها، فما في مربّع ملوّن وراها */
.tool-ic { width: 46px; height: 46px; flex: none; display: grid; place-items: center; }
.tool-ic > img { display: block; width: 100%; height: 100%; filter: drop-shadow(0 4px 5px rgba(16, 32, 29, .22)); }
.tool-link > span:last-child { min-width: 0; }
.tool-link b { display: block; font-size: 1.04rem; line-height: 1.5; }
.tool-link small { display: block; color: var(--muted); font-size: .88rem; line-height: 1.6; margin-top: 2px; }
.tool-link .new { display: inline-block; line-height: 1.6; font-size: .7rem; background: var(--gold); color: #3d2a00; border-radius: 6px; padding: 0 6px; margin-inline-start: 6px; vertical-align: 2px; }

/* ---------- صفحة الأداة ---------- */
main { padding: 0 0 48px; }
.page-head { padding: 22px 0 6px; }
.crumbs { font-size: .85rem; color: var(--muted); margin-bottom: 10px; }
/* inline-block مع padding عمودي حتى يصير هدف اللمس ≥ 24px بالارتفاع (WCAG 2.5.8) بدل 19px */
.crumbs a { display: inline-block; padding: 3px 0; color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--accent); }
.title-row { display: flex; align-items: center; gap: 14px; }
.title-row .tool-ic { width: 54px; height: 54px; }
h1 { font-size: 1.75rem; line-height: 1.4; margin: 0; }
h2 { font-size: 1.25rem; margin: 30px 0 8px; }
.lead { color: var(--muted); margin: 10px 0 20px; }
@media (max-width: 480px) { h1 { font-size: 1.45rem; } .hero h1 { font-size: 1.7rem; } }

.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; margin-bottom: 18px; box-shadow: var(--shadow); }

label { display: block; font-weight: 700; margin: 12px 0 6px; font-size: .95rem; }
input, select, textarea, button { font: inherit; }
input, select, textarea {
  width: 100%; padding: 11px 13px; border: 1px solid var(--line-strong); border-radius: 11px;
  background: var(--bg); color: var(--text); transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--c, var(--accent)); outline-offset: 1px; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
input[type=checkbox] { width: auto; accent-color: var(--accent); margin-inline-end: 6px; }
input[type=range] { accent-color: var(--accent); padding: 0; border: 0; background: none; box-shadow: none; }
textarea { min-height: 170px; resize: vertical; }
.row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.row2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (max-width: 520px) { .row2 { grid-template-columns: 1fr; } }
button {
  margin-top: 16px; padding: 12px 24px; border: 0; border-radius: 12px;
  background: var(--c, var(--accent)); color: var(--on-c); font-weight: 700; cursor: pointer;
  transition: filter .15s, transform .05s;
}
button:hover { filter: brightness(1.08); }
/* كبسة الزر (transform) صارت بـassets/motion.css للزر الأساسي بس: القاعدة العامة كانت تمسح transform أزرار الأدوات المثبّتة بمكانها */
button.ghost { background: transparent; color: var(--c, var(--accent)); border: 1px solid var(--c, var(--accent)); }
.result {
  margin-top: 16px; padding: 16px 18px; border-radius: 12px; font-size: 1.1rem;
  background: var(--accent-soft); border-inline-start: 4px solid var(--accent);
}
.stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin-top: 14px; }
/* الفارغة بتضل بالـ DOM (مش display:none) حتى قارئ الشاشة يلقط aria-live أول ما تتعبّى، وبنصفّر أبعادها حتى ما تترك فراغ ولا إطار */
.result:empty, .stats:empty { display: block; margin: 0; padding: 0; border: 0; min-height: 0; }
.stat { background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 12px; text-align: center; }
.stat b { display: block; font-size: 1.45rem; color: var(--accent); }
.stat span { color: var(--muted); font-size: .86rem; }
.note { color: var(--muted); font-size: .9rem; }
.bar { height: 10px; background: var(--line); border-radius: 99px; overflow: hidden; margin-top: 10px; }
.bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--gold)); border-radius: 99px; }

.content { margin-top: 10px; }
.content p, .content li { color: var(--text); }
.faq dt { font-weight: 700; margin-top: 14px; }
.faq dd { margin: 4px 0 0; color: var(--muted); }

/* ---------- مكان الإعلان (ADS_ENABLED بـ lib/site.js؛ مطفي = ما بينرسم شي) ----------
   الارتفاع محجوز مسبقاً حتى ما يقفز المحتوى لمّا يتحمّل الإعلان (CLS)، وبعيد عن الحاسبة والنتيجة */
.ad-slot { position: relative; min-height: 280px; margin: 26px 0; border: 1px dashed var(--line); border-radius: var(--radius); background: var(--card); display: grid; place-items: center; overflow: hidden; }
.ad-slot .ad-label { position: absolute; top: 6px; inset-inline-start: 10px; font-size: .7rem; line-height: 1.4; color: var(--muted); letter-spacing: .02em; }
.ad-slot[data-ad=footer] { margin: 0 0 26px; }

/* ---------- التذييل ---------- */
footer.site { border-top: 1px solid var(--line); background: var(--card); padding: 26px 0; color: var(--muted); font-size: .9rem; }
footer.site .links { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-bottom: 8px; }
footer.site a { color: var(--muted); text-decoration: none; }
footer.site a:hover { color: var(--accent); }
footer.site p { margin: 0; }

/* ---------- المشاركة والتثبيت ---------- */
.share { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--line); font-size: .92rem; color: var(--muted); }
.share[hidden] { display: none; }
.share a, .share button { margin: 0; padding: 6px 14px; border-radius: 99px; font-size: .9rem; font-weight: 700; text-decoration: none; border: 1px solid var(--line); background: var(--bg); color: var(--text); cursor: pointer; }
.share .wa { background: #25d366; border-color: #25d366; color: var(--on-brand); }
.share .tg { background: #229ed9; border-color: #229ed9; color: var(--on-brand); }
.hm-stats .install { display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 5px 14px; border-radius: 99px; font-size: .9rem; background: var(--gold); color: #3d2a00; }
.hm-stats .install .icon { width: 18px; height: 18px; }
.install[hidden] { display: none; }

/* ---------- الصفحة الرئيسية (hm-) ---------- */
.hm-qmeta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 14px; max-width: 560px; min-height: 1.6em; margin-top: 8px; font-size: .86rem; color: #fff; }
#qcount { font-weight: 700; }
.hm-kbd { display: none; }
@media (hover: hover) and (pointer: fine) { .hm-kbd { display: inline; } }
.hm-qmeta kbd { font: inherit; font-size: .8rem; padding: 0 6px; border-radius: 5px; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .3); }
body.searching .hm-kbd { display: none; }

body.searching .hm-extra { display: none; }
body.searching .hero { padding-bottom: 20px; }
.hm-more { display: inline-block; margin-top: 12px; font-weight: 700; font-size: .92rem; text-decoration: none; }
/* الزاوية: حدّان متقاطعان مدوّرين بدل «←» — المحرف بينقلب مع الاتجاه وبتلفظو قارئة الشاشة */
/* روابط لصفحة تانية: سهم «لقدّام» (‹ بالعربي)، مش ⌄ اللي معناه «بيفتح هون» (متل الأقسام المطوية) */
.hm-more::after, .hm-qhit .go::after { content: ""; display: inline-block; width: .42em; height: .42em; margin-inline-start: 7px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); vertical-align: 1px; }
.hm-more:hover { text-decoration: underline; }

.hm-pops { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.hm-pop {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px;
  padding: 18px 10px 14px; text-decoration: none; color: var(--text);
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
.hm-pop:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 10px 26px rgba(16, 24, 40, .1); }
.hm-pop .tool-ic { width: 54px; height: 54px; }
/* تبديل أخضر/ذهبي على شكل رقعة شطرنج: 4 أعمدة على الشاشات الكبيرة و2 على الموبايل */
.hm-pop b { font-size: 1rem; line-height: 1.45; }
.hm-pop small { color: var(--muted); font-size: .8rem; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 760px) {
  .hm-pops { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .hm-pop { padding: 14px 8px 12px; gap: 6px; }
  .hm-pop .tool-ic { width: 46px; height: 46px; }
  .hm-pop b { font-size: .95rem; }
  .hm-pop small { display: none; }
}

.tool-link.hm-hit { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft), var(--shadow); }
@media (max-width: 520px) {
  .cat { margin-top: 26px; }
  .hm-list .grid { gap: 10px; }
  .hm-list .tool-link { padding: 12px; gap: 12px; align-items: center; }
  .hm-list .tool-ic { width: 40px; height: 40px; }
  .hm-list .tool-link b { font-size: 1rem; }
  .hm-list .tool-link small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 0; }
}

/* ---------- «الجديد في أدوات» (new.html): قائمة بالشهر مع تاريخ كل أداة ---------- */
.cat h2 .nw-c { font-size: .8rem; font-weight: 500; color: var(--muted); }
.nw-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.nw-it {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
}
.nw-it .tool-ic { width: 40px; height: 40px; }
.nw-tx { flex: 1; min-width: 0; }
.nw-tx a { text-decoration: none; }
.nw-tx a:hover b { text-decoration: underline; }
.nw-tx b { display: block; font-size: 1.02rem; line-height: 1.5; }
.nw-tx small { display: block; color: var(--muted); font-size: .86rem; line-height: 1.6; }
.nw-dt { flex: none; font-size: .8rem; color: var(--muted); white-space: nowrap; }
@media (max-width: 520px) {
  .nw-it { flex-wrap: wrap; gap: 8px 12px; padding: 12px; }
  .nw-tx { flex-basis: 0; }
  .nw-dt { flex-basis: 100%; padding-inline-start: 52px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}
@media (max-width: 400px) { .hm-tabs button { font-size: .88rem; white-space: nowrap; padding-inline: 4px; } }

/* ---------- «اسأل» (ask-) ---------- */
nav.top { align-items: center; }
nav.top a { white-space: nowrap; }
.ask-btn {
  display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 6px 12px 6px 10px; border-radius: 99px;
  background: var(--bg); color: var(--text); border: 1px solid var(--line); font-size: .92rem; font-weight: 700; line-height: 1.5;
}
.ask-btn:hover { filter: none; border-color: var(--accent); color: var(--accent); }
.ask-btn .icon { width: 18px; height: 18px; color: var(--accent); }
.ask-btn kbd { display: none; font: inherit; font-size: .72rem; font-weight: 500; color: var(--muted); border: 1px solid var(--line); border-radius: 5px; padding: 0 5px; direction: ltr; }
@media (hover: hover) and (pointer: fine) { .ask-btn kbd { display: inline; } }
@media (max-width: 480px) { nav.top .nav-about { display: none; } nav.top { gap: 4px; } .ask-btn { padding: 5px 10px 5px 8px; } .ask-btn kbd { display: none; } }
html.ask-lock, html.ask-lock body { overflow: hidden; }

.ask-ov { position: fixed; inset: 0; z-index: 100; display: flex; justify-content: center; align-items: flex-start; padding: 9vh 12px 12px; background: rgba(8, 14, 20, .55); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.ask-ov[hidden] { display: none; }
.ask-pal { width: 100%; max-width: 660px; max-height: calc(100vh - 9vh - 24px); max-height: calc(100dvh - 9vh - 24px); display: flex; flex-direction: column; background: var(--card); color: var(--text); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 24px 70px rgba(0, 0, 0, .35); overflow: hidden; animation: ask-in .16s ease-out; }
@keyframes ask-in { from { opacity: 0; transform: translateY(-8px) scale(.985); } to { opacity: 1; transform: none; } }
@media (max-width: 520px) { .ask-ov { padding: 8px; } .ask-pal { max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px); border-radius: 16px; } }
.ask-bar { display: flex; align-items: center; gap: 10px; padding: 4px 14px; border-bottom: 1px solid var(--line); }
.ask-bar .icon { color: var(--accent); }
.ask-bar input { flex: 1; min-width: 0; border: 0; background: transparent; padding: 14px 0; font-size: 1.12rem; box-shadow: none; border-radius: 0; }
.ask-bar input:focus { outline: none; box-shadow: none; }
.ask-x { margin: 0; padding: 3px 9px; border-radius: 7px; background: var(--bg); color: var(--muted); border: 1px solid var(--line); font-size: .78rem; font-weight: 500; }
.ask-body { padding: 14px; overflow-y: auto; overscroll-behavior: contain; }
.ask-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 14px; margin: 14px 0 0; font-size: .82rem; color: var(--muted); }
.ask-foot a { font-weight: 700; text-decoration: none; }
.ask-keys { display: none; }
@media (hover: hover) and (pointer: fine) { .ask-keys { display: inline; } }
.ask-foot kbd, .ask-keys kbd { font: inherit; font-size: .74rem; border: 1px solid var(--line); border-radius: 5px; padding: 0 5px; background: var(--bg); }

.ask-ex { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; transition: opacity .25s; }
.ask-ex[hidden] { display: none; }
.ask-ex.ask-fade { opacity: 0; }
.ask-try { font-size: .84rem; color: var(--muted); }
.ask-chip { margin: 0; padding: 4px 12px; border-radius: 99px; font-size: .86rem; font-weight: 500; line-height: 1.6; background: var(--bg); color: var(--text); border: 1px solid var(--line); }
.ask-chip:hover { filter: none; border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.ask-out .ask-ex + .ask-slot:not(:empty), .ask-ex + .ask-out .ask-slot:not(:empty) { margin-top: 12px; }
.ask-out { margin-top: 12px; }
.ask-out .share { margin-top: 12px; }

.ask-card { border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; background: var(--card); }
.ask-k { display: inline-block; font-size: .78rem; font-weight: 700; color: var(--accent); background: var(--accent-soft); border-radius: 99px; padding: 0 10px; }
.ask-card .result { margin-top: 10px; line-height: 1.6; }
.ask-pre { display: block; color: var(--muted); font-size: .95rem; }
.ask-big { display: block; font-size: 1.65rem; font-weight: 800; line-height: 1.4; overflow-wrap: anywhere; color: var(--text); }
.ask-d { display: block; font-size: .92rem; color: var(--muted); margin-top: 4px; }
.ask-d b { color: var(--text); }
.ask-card .stats { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; margin-top: 10px; }
.ask-card .stat { padding: 8px 4px; }
.ask-card .stat b { font-size: 1.12rem; }
.ask-card .stat span { font-size: .78rem; display: block; line-height: 1.4; }
.ask-note { margin: 10px 0 0; font-size: .84rem; line-height: 1.7; }
.ask-msg { margin: 10px 0 0; line-height: 1.8; }
.ask-wait { margin: 8px 0 0; color: var(--muted); }
.ask-go { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; padding: 7px 16px; border-radius: 10px; background: var(--accent); color: var(--on-c); font-weight: 700; font-size: .92rem; text-decoration: none; }
.ask-go:hover, .ask-go.ask-act { filter: brightness(1.08); box-shadow: 0 0 0 3px var(--accent-soft); }
.ask-retry { margin: 12px 0 0; padding: 6px 14px; font-size: .88rem; }
.ask-miss p { margin: 6px 0 0; color: var(--muted); font-size: .92rem; }
.ask-h { margin: 12px 0 6px; font-size: .86rem; font-weight: 700; color: var(--muted); }
.ask-sugs { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.ask-sug { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 12px; text-decoration: none; color: var(--text); border: 1px solid transparent; }
.ask-sug:hover, .ask-sug.ask-act { background: var(--accent-soft); border-color: var(--line); }
.ask-sug .tool-ic { width: 38px; height: 38px; }
.ask-sug > span:last-child { min-width: 0; }
.ask-sug b { display: block; font-size: .98rem; line-height: 1.5; }
.ask-sug small { display: block; color: var(--muted); font-size: .82rem; line-height: 1.5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* بالرئيسية: الجواب تحت شريط البحث */
.ask-hero { max-width: 640px; margin-top: 12px; padding: 14px; border-radius: 16px; background: var(--card); color: var(--text); box-shadow: 0 10px 30px rgba(0, 0, 0, .2); }
.ask-hero[hidden] { display: none; }
.ask-hero .ask-card { border: 0; padding: 0; }
.ask-hero .ask-h:first-child { margin-top: 0; }
.hero .ask-ex { margin-top: 10px; max-width: 640px; }
.hero .ask-try { color: #fff; }
.hero .ask-chip { background: rgba(255, 255, 255, .12); color: #fff; border-color: rgba(255, 255, 255, .3); }
.hero .ask-chip:hover { background: rgba(255, 255, 255, .24); color: #fff; border-color: rgba(255, 255, 255, .5); }
.hero .ask-chip:focus-visible { outline-color: #fff; }
body.ask-has #none, body.ask-show #none { display: none !important; }
body.ask-has #qcount, body.ask-show #qcount { visibility: hidden; }
body.searching .hero .ask-ex { display: none; }
@media (max-width: 520px) {
  .hero .ask-ex { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 10px -16px 0; padding: 0 16px 2px; }
  .hero .ask-ex::-webkit-scrollbar { display: none; }
  .hero .ask-ex > * { flex: none; white-space: nowrap; }
  .ask-big { font-size: 1.4rem; }
}
.ask-sugs > li { min-width: 0; }
.ask-sug > span:last-child { flex: 1; }

/* ---------- حفظ النتيجة كصورة (share-img) ---------- */
.share .img { background: var(--gold); border-color: var(--gold); color: #3d2a00; }
.share .img[aria-expanded="true"] { box-shadow: inset 0 0 0 2px rgba(61, 42, 0, .35); }
.share-img { margin-top: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg); text-align: center; }
.share-img[hidden], .share-img [hidden] { display: none; }
.si-fmt { display: inline-flex; gap: 4px; padding: 4px; border-radius: 99px; background: var(--card); border: 1px solid var(--line); }
.si-fmt button { margin: 0; padding: 4px 14px; border-radius: 99px; font-size: .88rem; font-weight: 700; background: transparent; color: var(--muted); border: 0; }
.si-fmt button[aria-pressed="true"] { background: var(--accent); color: var(--on-c); }
.si-prev { position: relative; display: grid; place-items: center; min-height: 120px; margin: 12px 0; }
.si-prev img { display: block; max-width: 100%; height: auto; max-height: 340px; border-radius: 12px; box-shadow: 0 6px 22px rgba(0, 0, 0, .18); transition: opacity .15s; }
.si-prev img:not([src]) { display: none; }
.si-prev img.si-square { max-height: 260px; }
.share-img.busy .si-prev img { opacity: .45; }
.si-msg { font-size: .9rem; color: var(--muted); }
.si-act { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.si-act button { margin: 0; padding: 8px 18px; border-radius: 99px; font-size: .92rem; }
.si-act .si-dl { background: transparent; color: var(--accent); border: 1px solid var(--accent); }
.si-act button:disabled { opacity: .55; cursor: progress; }

/* شاشات صغيرة: "كل الأدوات" بيختفي (الشعار بيرجع للرئيسية) حتى يتّسع "يومي" */
@media (max-width: 420px) { nav.top .nav-all { display: none; } }

/* ======================================================================
   الهوية البصرية v2: لون لكل قسم، نقشة هندسية، رأس ملوّن، حركات ناعمة
   ====================================================================== */
:root {
  --pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%23fff' stroke-width='1.2' stroke-opacity='.5'%3E%3Cpath d='M36 6l8.5 21.5L66 36l-21.5 8.5L36 66l-8.5-21.5L6 36l21.5-8.5z'/%3E%3Cpath d='M36 14.8l15 6.2 6.2 15-6.2 15-15 6.2-15-6.2-6.2-15 6.2-15z'/%3E%3Ccircle cx='36' cy='36' r='6'/%3E%3Cpath d='M0 0l6 6M72 0l-6 6M0 72l6-6M72 72l-6-6'/%3E%3C/g%3E%3C/svg%3E");
  --c: var(--accent);
  --ease: cubic-bezier(.2, .8, .2, 1);
}
/* data-cat = معرّف القسم (lib/sections.js). ألوان الأقسام بـpages/css/sections.css (.cat-<id>)؛ هون لون واحد للكل (تحت: الذهبي/الأخضر) */
[data-cat] { --c-soft: color-mix(in srgb, var(--c) 13%, var(--card)); }

/* الواجهة الرئيسية: النقشة فوق التدرّج */
.hero { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%23fff' stroke-width='1' stroke-opacity='.11'%3E%3Cpath d='M36 6l8.5 21.5L66 36l-21.5 8.5L36 66l-8.5-21.5L6 36l21.5-8.5z'/%3E%3Cpath d='M36 14.8l15 6.2 6.2 15-6.2 15-15 6.2-15-6.2-6.2-15 6.2-15z'/%3E%3Ccircle cx='36' cy='36' r='6'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 72px 72px, linear-gradient(135deg, #0b6659 0%, #083f38 100%); }
.hero::before, .hero::after { background: rgba(255, 255, 255, .06); }

/* رأس صفحة الأداة */
.page-hero {
  position: relative; overflow: hidden; margin-bottom: 22px;
  background: linear-gradient(180deg, var(--c-soft, var(--accent-soft)) 0%, var(--bg) 100%);
  border-bottom: 1px solid var(--line);
}
.page-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: var(--pattern) 0 0 / 72px 72px;
  filter: invert(1); opacity: .06;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 70%); mask-image: linear-gradient(90deg, transparent 0%, #000 70%);
}
@media (prefers-color-scheme: dark) { .page-hero::before { filter: none; opacity: .05; } }
.page-hero .page-head { position: relative; padding: 26px 16px 18px; }
.page-hero .crumbs a:hover { color: var(--c); }
.title-row .tool-ic { width: 60px; height: 60px; }
.page-hero h1 { font-size: 2rem; }
@media (max-width: 480px) { .page-hero h1 { font-size: 1.5rem; } .title-row .tool-ic { width: 50px; height: 50px; } }

/* بطاقة الأداة بالصفحة: شريط لون القسم فوق */
main .card:first-of-type { position: relative; overflow: hidden; }
body[data-cat] main .wrap > .card:first-of-type::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: linear-gradient(90deg, var(--c), var(--gold)); }
body[data-cat] input:focus, body[data-cat] select:focus, body[data-cat] textarea:focus { border-color: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 18%, transparent); }
body[data-cat] .result { background: var(--c-soft); border-inline-start-color: var(--c); }
body[data-cat] .stat b { color: var(--c); }

/* بطاقات الأدوات */
.tool-ic { transition: transform .25s var(--ease); }
.tool-link { transition: border-color .2s, transform .25s var(--ease), box-shadow .25s; }
.tool-link:hover { border-color: color-mix(in srgb, var(--c) 55%, var(--line)); transform: translateY(-3px); box-shadow: 0 14px 30px color-mix(in srgb, var(--c) 16%, transparent); }
.tool-link:hover .tool-ic, .hm-pop:hover .tool-ic { transform: scale(1.08) rotate(-4deg); }
.cat h2::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--c); transform: rotate(45deg); flex: none; }

/* ظهور النتيجة */
@keyframes adw-in { from { opacity: 0; transform: translateY(8px) scale(.985); } to { opacity: 1; transform: none; } }
.result:not(:empty), .stats:not(:empty) .stat { animation: adw-in .45s var(--ease) both; }
.stats:not(:empty) .stat:nth-child(2) { animation-delay: .05s; }
.stats:not(:empty) .stat:nth-child(3) { animation-delay: .1s; }
.stats:not(:empty) .stat:nth-child(4) { animation-delay: .15s; }
.stats:not(:empty) .stat:nth-child(n+5) { animation-delay: .2s; }

/* التذييل */
footer.site { padding: 32px 0 26px; }
.ft-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 18px; margin-bottom: 16px; border-bottom: 1px solid var(--line); }
.ft-cats { display: flex; flex-wrap: wrap; gap: 8px; }
footer.site .ft-cats a { padding: 4px 12px; border-radius: 99px; background: var(--c-soft); color: var(--c); font-weight: 700; font-size: .88rem; }
footer.site .ft-cats a:hover { background: var(--c); color: var(--on-c); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* «الأكثر استخداماً» بلون قسم كل أداة */
.hm-pop:hover { border-color: color-mix(in srgb, var(--c) 55%, var(--line)); box-shadow: 0 14px 30px color-mix(in srgb, var(--c) 16%, transparent); }

/* ---------- الرئيسية v2: الأرقام، الميزات، تبويبات الأقسام ---------- */
.hm-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; margin: 22px 0 6px; padding: 14px 16px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); color: var(--muted); font-size: .95rem; }
.hm-stats b { color: var(--accent); font-size: 1.15rem; margin-inline-end: 4px; }
/* ---------- دليل الأدوات: عنوان «كل الأدوات» فوق، والأقسام السبعة المطوية تحتو ---------- */
/* القسم <details> أصلي: محتواه بالـHTML وبيفتح بالمتصفح بلا سكربت. ولا رابط مولَّد بجافاسكربت. */
#tools { margin-top: 6px; }
.world-h { border-inline-start: 4px solid var(--accent); padding-inline-start: 12px; margin-bottom: 12px; }
.world-h h2 { font-size: 1.3rem; margin: 0; line-height: 1.5; }
.world-h p { margin: 1px 0 0; color: var(--muted); font-size: .92rem; line-height: 1.6; }

.sec { margin-top: 10px; scroll-margin-top: var(--hdr-h); background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.sec > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: 1px 10px; padding: 13px 14px; border-radius: var(--radius); }
.sec > summary::-webkit-details-marker { display: none; }
.sec > summary:hover .sec-nm { color: var(--c, var(--accent)); }
.sec-nm { font-weight: 700; font-size: 1.05rem; }
.sec-n { grid-column: 3; justify-self: start; font-size: .78rem; font-weight: 700; color: var(--c, var(--accent)); background: var(--c-soft, var(--accent-soft)); border-radius: 99px; padding: 1px 9px; font-variant-numeric: tabular-nums; }
.chev { width: 20px; height: 20px; color: var(--muted); transition: transform .2s var(--ease); }
.sec[open] > summary .chev { transform: rotate(180deg); }
.sec-pv { grid-column: 2 / span 3; color: var(--muted); font-size: .85rem; line-height: 1.5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sec[open] > summary .sec-pv { display: none; }
/* اسم المجموعة ما بينقطع بسطرين («صور / وملفات»)، وbdi بيمنع «الإنترنت وQR» تنقلب «QRو» */
.sec-pv .pv-g { white-space: nowrap; }
.sec > .grid { padding: 2px 14px 16px; }
/* بلا جافاسكربت كمان: رابط متل ‎./#money‎ بيفتح القسم */
.sec:target > .grid { display: grid; }

@media (max-width: 520px) {
  .world-h h2 { font-size: 1.18rem; }
  .sec > summary { padding: 11px 12px; }
  .sec-nm { font-size: 1rem; }
  .sec > .grid { padding: 0 12px 14px; gap: 10px; }
  .sec .tool-link { padding: 12px; gap: 12px; align-items: center; }
  .sec .tool-ic { width: 40px; height: 40px; }
  .sec .tool-link b { font-size: 1rem; }
  .sec .tool-link small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 0; }
}
/* «يمكن تقصد»: بتطلع بس لمّا النتائج تكون من المطابقة التقريبية (خطأ إملائي بالبحث) */
.hm-did { margin: 16px 0 -14px; font-weight: 700; color: var(--muted); font-size: .95rem; }
.hm-did[hidden] { display: none; }
/* زر «اقترحها علينا» بالحالة الفاضية (بالرئيسية وبكرت «ما فهمت سؤالك» بـ ask.js) */
.sg-cta { display: block; width: fit-content; margin: 14px auto 0; padding: 11px 22px; border-radius: 12px; background: var(--c, var(--accent)); color: var(--on-c); font-weight: 700; text-decoration: none; }
.sg-cta:hover { filter: brightness(1.08); color: var(--on-c); }
.ask-miss .sg-cta { margin-inline: 0; }

/* زر الحساب بالرأس */
.acct-btn { display: inline-grid; place-items: center; min-width: 34px; height: 34px; padding: 0 12px !important; border-radius: 99px !important; border: 1px solid var(--line); color: var(--text) !important; font-weight: 700; font-size: .9rem; overflow: hidden; }
.acct-btn.signed { padding: 0 !important; width: 34px; background: var(--accent-soft); color: var(--accent) !important; }
.acct-btn img { width: 100%; height: 100%; object-fit: cover; }

/* رابط «تخطَّ إلى المحتوى»: مخفي فوق الصفحة وبيظهر بس لما يوصلو التركيز بالكيبورد (WCAG 2.4.1) */
.skip { position: absolute; top: -60px; inset-inline-start: 8px; z-index: 20; padding: 8px 14px; background: var(--card); color: var(--text); border-radius: 10px; box-shadow: var(--shadow); text-decoration: none; font-weight: 700; }
.skip:focus { top: 8px; }
/* main بياخد التركيز من رابط التخطّي بس، فما بدنا إطار حوالين الصفحة كلها */
main[tabindex]:focus, main[tabindex]:focus-visible { outline: 0; }

/* ======================================================================
   الهوية v3 — «شو بدك تعرف؟»
   مسرح ليلي للحظات الكبيرة (العنوان، الأداة، النتيجة) وورق عاجي للقراءة.
   الفكرة الأساسية إنو المتغيّرات بتتوارث: body بيحمل ألوان الليل و.paper بيبدّلها
   لألوان الورق، فكل أداة من الـ83 بتاخد الألوان الصح لحالها لأنها مكتوبة أصلاً
   بـvar(--card) و var(--text) … بلا ما نلمس ولا أداة.
   القواعد تحت بتطغى على v2 (لون لكل قسم) ولا بتشيلها، فلو انشالت هالطبقة بيرجع v2.
   ====================================================================== */
body {
  --abyss: #04241f; --night: #06332d; --teal-mid: #084a41; --teal: #0c7566;
  --display: 'Alexandria', 'Tajawal', 'Segoe UI', Tahoma, system-ui, sans-serif;
  --bg: rgba(0, 0, 0, .22);              /* خلفية الحقول جوّا الكرت */
  --card: rgba(255, 255, 255, .055);
  --text: #ffffff;
  --muted: rgba(255, 255, 255, .82);    /* ≥ 4.5:1 حتى على أفتح نقطة بالمسرح (tests/contrast-ui.check.js) */
  --line: rgba(255, 255, 255, .12);
  --line-strong: rgba(255, 255, 255, .34);
  /* نص ذهبي (روابط، شرائح) بضو المسرح: #ffc94f ≥ 4.5:1؛ #f5b532 كان ينزل لـ3.5:1 (tests/contrast-ui.check.js).
     التعبئة (الزر الأساسي) بتضل تدرّج #f5b532 */
  --accent: #ffc94f;
  --accent-2: #e9a51f;
  --ring: #f5b532;
  --accent-soft: rgba(245, 181, 50, .12);
  --on-c: #3d2a00;
  --gold-soft: rgba(245, 181, 50, .14);
  --gold-ink: #ffd98f;                   /* نص ذهبي صغير: ≥ 4.5:1 حتى بنص ضو المسرح */
  --c: #f5b532;                         /* لون القسم صار واحد: ذهبي */
  --c-soft: rgba(245, 181, 50, .1);
  --shadow: none;
  --radius: 22px;
  color-scheme: dark;
  background: var(--abyss);
  color: var(--text);
}
/* الأقسام ما عاد إلها ألوان: الهوية هي العنوان-السؤال مش مربع الأيقونة الملوّن */
body [data-cat], body[data-cat] { --c: #f5b532; --c-soft: rgba(245, 181, 50, .1); }

h1, h2, h3, .logo b, .stat b, .result b { font-family: var(--display); }
::selection { background: rgba(245, 181, 50, .35); color: #fff; }

/* ---------- الرأس: شفاف فوق الليل ---------- */
header.site {
  background: rgba(4, 36, 31, .72);
  -webkit-backdrop-filter: saturate(140%) blur(14px); backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.logo b { font-weight: 700; letter-spacing: -.3px; }
.logo small { color: rgba(255, 255, 255, .55); }
nav.top a { color: rgba(255, 255, 255, .72); }
nav.top a:hover { color: #fff; background: rgba(255, 255, 255, .07); }

/* ---------- المسرح: ضو من نقطة وحدة + حبيبات ---------- */
.stage {
  position: relative; isolation: isolate; overflow: hidden;
  background: radial-gradient(120% 75% at 70% 0%, #0b6a5c 0%, var(--teal-mid) 34%, var(--night) 60%, var(--abyss) 100%);
}
/* حبيبات: بتعطي ملمس بدل لون مسطّح (هي الفرق بين «تدرّج» و«جو») */
.stage::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; opacity: .1; mix-blend-mode: overlay;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* شمس ناعمة متل كرة superpower — من CSS بلا صور */
.stage::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none; border-radius: 50%;
  width: 440px; height: 440px; top: -170px; left: -150px;
  background: radial-gradient(circle, rgba(255, 214, 128, .5) 0%, rgba(245, 181, 50, .26) 26%, rgba(232, 140, 38, .1) 48%, transparent 70%);
  filter: blur(8px);
}
.stage > * { position: relative; z-index: 1; }
.stage > .wrap { padding-bottom: 36px; }

/* رأس صفحة الأداة: بلا تلوين القسم ولا النقشة القديمة */
.stage .page-hero { background: none; border: 0; margin-bottom: 4px; }
.stage .page-hero::before { display: none; }
.stage .page-hero .page-head { padding: 30px 16px 6px; }
.stage .crumbs, .stage .crumbs a { color: rgba(255, 255, 255, .9); }
.stage .crumbs a:hover { color: #f5b532; }
.stage .title-row { align-items: flex-start; }
.stage .title-row .tool-ic { width: 56px; height: 56px; }
.stage h1 { font-size: 2.35rem; line-height: 1.3; font-weight: 800; letter-spacing: -1px; color: #fff; }
.stage .lead { color: rgba(255, 255, 255, .88); font-size: 1.06rem; max-width: 36ch; margin: 14px 0 22px; }

/* العنوان-السؤال: سطر خفيف وسطر تقيل وعلامة استفهام ذهبية */
.q-title .ql { display: block; font-weight: 200; letter-spacing: -.5px; }
.q-title .qb { display: block; font-weight: 800; }
.q-title .qm { color: #f5b532; }
@media (max-width: 480px) { .stage h1 { font-size: 2.05rem; } }

/* ---------- الكرت والحقول على الليل ---------- */
.stage .card {
  background: linear-gradient(180deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .03));
  border: 1px solid rgba(255, 255, 255, .13);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 30px 60px -30px rgba(0, 0, 0, .55);
  border-radius: 24px; padding: 22px;
}
.stage label { color: rgba(255, 255, 255, .86); font-weight: 500; }
.stage input, .stage select, .stage textarea {
  background: rgba(0, 0, 0, .22); border: 1px solid rgba(255, 255, 255, .16); border-radius: 14px; color: #fff;
}
.stage input::placeholder, .stage textarea::placeholder { color: rgba(255, 255, 255, .36); }
.stage input:focus, .stage select:focus, .stage textarea:focus {
  outline: none; border-color: rgba(245, 181, 50, .75); box-shadow: 0 0 0 4px rgba(245, 181, 50, .14);
}
.stage select option { background: #06332d; color: #fff; }

/* الزر الأساسي: ذهبي متوهّج.
   ‎:where‎ بتخلّي وزن القاعدة متل قاعدة زر عادية (0,1,0): أي زر إلو تنسيق خاص جوّا الأداة
   (تبويبات، أزرار صغيرة جوّا الألوان…) بيضل تنسيقو هو الغالب، ومش كل زر بيصير ذهبي ضخم */
.stage :where(button:not(.ghost)) {
  background: linear-gradient(180deg, #ffc94f, #f5b532 60%, #e9a51f); color: #3d2a00;
  border-radius: 16px; padding: 14px 28px; font-weight: 800; font-size: 1.05rem;
}
/* التوهّج للزر الذهبي بس. كان على كل زر: الأزرار اللي الأداة بترجّعها لشكل رابط نصي
   (background:none; border:0) أو تبويب كانت تضل حاملة قوس أبيض وظل ذهبي تحت الكلمة.
   [data-enter] و#go بيتوهّجوا من أول رسم؛ وsite.js بيحط data-glow على أي زر لسا لابس التدرّج الذهبي
   (يعني ما انعملو reset) — هيك أي زر أساسي بأداة جديدة بيتوهّج لحالو بلا قائمة */
.stage :where(button[data-enter], button#go, button[data-glow]) {
  box-shadow: 0 16px 34px -14px rgba(245, 181, 50, .7), inset 0 1px 0 rgba(255, 255, 255, .5);
}
.stage button.ghost { color: var(--accent); border-color: rgba(245, 181, 50, .5); }

/* ---------- لحظة النتيجة ---------- */
.stage .result {
  background: radial-gradient(120% 120% at 50% 0%, rgba(245, 181, 50, .16), rgba(255, 255, 255, .03) 60%);
  border: 1px solid rgba(245, 181, 50, .28); border-inline-start-width: 1px;
  border-radius: 20px; padding: 20px; font-size: 1.12rem; color: rgba(255, 255, 255, .9);
}
.stage .result b { font-weight: 800; color: #fff; }
/* الحجم الكبير للعنوان بس: <b> وحيد بالنتيجة = الرقم البطل («31 سنة و5 أشهر»). لما يكون في أكتر
   من <b> (عنوان الإمساكية، تفاصيل الزكاة، الشيك) كلهن كانوا يكبروا ويكسروا الأسطر */
.stage .result > b:only-of-type { font-size: 1.55em; letter-spacing: -.5px; line-height: 1.35; }
.stage .result .note { color: rgba(255, 255, 255, .74); }
/* الإحصاءات: شبكة حقائق بخطوط رفيعة بدل كروت */
.stage .stats { gap: 0; border-top: 1px solid rgba(255, 255, 255, .12); margin-top: 18px; }
/* auto-fit بوزن :where (0,1,0): بيغلب .stats العامة (auto-fill) بس، وشبكات الصفحات الخاصة
   (.ask-card .stats، .hc-st بـ3 أعمدة، #stats بالأدوات) بتضل هي الغالبة */
:where(.stage) .stats { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
/* نفس وزن .stats:empty بس بعدها: قبل أي حساب ما في خط شارد تحت الزر */
.stage .stats:empty { border: 0; margin: 0; }
.stage .stat {
  background: none; border: 0; border-bottom: 1px solid rgba(255, 255, 255, .12); border-radius: 0;
  padding: 14px 6px; text-align: start;
}
.stage .stat b { font-weight: 300; font-size: 1.95rem; line-height: 1.05; letter-spacing: -1px; color: #fff; }
/* قيمة هي جملة مش رقم («8 سنين و7 أشهر و5 أيام»): site.js بيعلّمها .long */
.stage .stat b.long { font-size: 1.35rem; line-height: 1.4; letter-spacing: -.3px; }
/* عمودين عالموبايل وعدد فردي: الأخيرة بتاخد الصف كلو بدل نص خط معلّق */
@media (max-width: 480px) { .stage :is(#stats, .ask-card .stats) > .stat:last-child:nth-child(odd) { grid-column: 1 / -1; } }
/* «اسأل» على المسرح (الرئيسية وask.html): أرقام أصغر من أرقام الأدوات وعمود ما بيضيق عن الرقم، فـ«6,655.46»
   و«10,072,181» ما بيلزقوا ببعض على 360. min-width:0 مع overflow-wrap: أطول رقم بينكسر جوّا خانتو بدل ما يركب عالجار */
.stage .ask-card .stats { grid-template-columns: repeat(auto-fit, minmax(min(100%, 128px), 1fr)); }
.stage .ask-card .stat { min-width: 0; container-type: inline-size; }
/* الخط بيصغر مع عرض الخانة (13cqi: «358,000,000» بالليرة اللبنانية بسطر واحد على 320) وما بينكسر بنص الرقم؛
   متصفح بلا container queries بياخد 1.4rem وبيكسر جوّا الخانة بدل ما يركب عالجار */
.stage .ask-card .stat b { font-size: 1.4rem; letter-spacing: -.3px; overflow-wrap: anywhere; }
@supports (font-size: 1cqi) { .stage .ask-card .stat b { font-size: min(1.4rem, 13cqi); white-space: nowrap; } }
.stage .stat span { color: rgba(255, 255, 255, .74); font-size: .88rem; }

/* ---------- الورق: للقراءة ---------- */
.paper {
  --bg: #f3eee4; --card: #fbf8f2; --text: #10201d; --muted: #4a5a56;
  --line: rgba(16, 32, 29, .12); --line-strong: #8a8f88;
  --accent: #0b5f54; --accent-2: #084a41; --ring: #0b5f54; --accent-soft: #e2ece6;
  --on-c: #fff; --gold-ink: #8a5d00; --gold-soft: #f6ead0; --c: #0b5f54; --c-soft: #e2ece6;
  color-scheme: light;
  background: var(--bg); color: var(--text);
  padding: 46px 0 30px;
}
.paper h2 { font-family: var(--display); font-weight: 700; font-size: 1.65rem; line-height: 1.2; letter-spacing: -.5px; margin-top: 40px; }
.paper .content > h2:first-child { margin-top: 0; }
.paper .content { font-size: 1.04rem; }
.paper .tool-link { background: var(--card); border-color: var(--line); box-shadow: none; }
@media (prefers-color-scheme: dark) {
  /* اللي مفضّل الوضع الغامق ما منعميه بورق فاتح: بيصير «ورق ليلي» */
  .paper {
    --bg: #0a2b26; --card: #0f342e; --text: #e8edf2; --muted: #a9b8b4;
    --line: rgba(255, 255, 255, .1); --line-strong: #6f807c;
    --accent: #5fd4bf; --accent-2: #36c2ab; --ring: #f5b532; --accent-soft: #123b34;
    --on-c: #04241f; --gold-ink: #f5c55a; --gold-soft: #3a2f16; --c: #5fd4bf; --c-soft: #123b34;
    color-scheme: dark;
  }
}

/* ---------- التذييل ---------- */
footer.site { background: var(--abyss); border-top: 1px solid rgba(255, 255, 255, .07); color: rgba(255, 255, 255, .6); }
footer.site a { color: rgba(255, 255, 255, .72); }
footer.site a:hover { color: #f5b532; }

@media (prefers-reduced-motion: reduce) { .stage::before { filter: none; } }

/* v3 — تصحيحات بعد أول رندر */
/* صندوق النتيجة الفاضي بيضل بالـDOM (aria-live) — بلا إطار ولا خلفية لحتى تطلع نتيجة */
.stage .result:empty { background: none; border: 0; padding: 0; margin: 0; }
/* الأرقام بيضا، والذهبي محفوظ للأشياء المهمة. (body[data-cat] .stat b بسطر v2 أقوى من .stage .stat b) */
.stage .stats .stat b { color: #fff; }
/* شريط المشاركة ولوحة الصورة: أزرار صغيرة، مش زر الإجراء الأساسي */
.stage .share a, .stage .share button,
.stage .share-img button {
  padding: 8px 16px; font-size: .9rem; font-weight: 700; border-radius: 99px; box-shadow: none; margin: 0;
}
.stage .share .cp { background: rgba(255, 255, 255, .07); color: #fff; border: 1px solid rgba(255, 255, 255, .18); }
.stage .share .img { background: #f5b532; color: #3d2a00; border-color: #f5b532; }
.stage .si-fmt { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .14); }
.stage .si-fmt button { background: transparent; color: rgba(255, 255, 255, .72); padding: 4px 14px; font-size: .88rem; box-shadow: none; }
.stage .si-fmt button[aria-pressed="true"] { background: #f5b532; color: #3d2a00; }
.stage .si-act .si-dl { background: rgba(255, 255, 255, .07); color: #fff; border: 1px solid rgba(255, 255, 255, .18); }
.stage .share { border-top-color: rgba(255, 255, 255, .1); }
.stage .share > span { color: rgba(255, 255, 255, .6); }

/* اسم الأداة صغير ذهبي فوق السؤال، بخط رفيع قبلو متل «kicker» المجلات */
.q-title .qk { display: flex; align-items: center; gap: 10px; font-family: var(--display); font-size: .82rem; font-weight: 600; letter-spacing: .2px; color: var(--gold-ink); margin-bottom: 12px; line-height: 1.4; }
.q-title .qk::before { content: ""; width: 22px; height: 1px; background: #f5b532; }
.stage h1.q-title { font-size: 2.75rem; line-height: 1.02; letter-spacing: -1.2px; }
/* لما نص السؤال نفسو بيلتف (عناوين طويلة متل «رواتب موظفي الدولة نوفمبر 2026») 1.02 بيلزّق الحروف النازلة بالطالعة */
.stage h1.q-title:not(.hq) .ql, .stage h1.q-title:not(.hq) .qb { line-height: 1.15; }
@media (max-width: 480px) { .stage h1.q-title { font-size: 2.45rem; } }
/* مع السؤال الأيقونة الملوّنة بتصير ضجيج — الهوية هي العنوان نفسو */
.stage .title-row:has(.q-title) .tool-ic { display: none; }

/* ---------- الرئيسية v3: «شو بدك تعرف؟» ---------- */
/* الهيرو القديم كان إلو خلفيتو ونقشتو ودوايرو — هلأ المسرح هو الخلفية */
.stage .hero-v3 { background: none; padding: 34px 0 30px; overflow: visible; }
.stage .hero-v3::before, .stage .hero-v3::after { display: none; }
/* شمس الرئيسية أكبر وأقرب للنص من شمس صفحات الأدوات */
/* بس الرئيسية (فيها .hero-v3): الصفحات المولّدة بلا data-tool (أشهر هجرية، عدّادات…) كانت تاخدها
   وتقعد ورا عنوانها فتنزّل التباين لـ2.6:1 */
.stage:has(.hero-v3)::before {
  width: 560px; height: 560px; top: -230px; left: -170px;
  background: radial-gradient(circle, rgba(255, 220, 140, .62) 0%, rgba(245, 181, 50, .32) 24%, rgba(232, 140, 38, .12) 46%, transparent 70%);
}
/* الشعار 3D (WebP خفيف): زخرفة بزاوية الهيرو، بعيد عن النص */
.stage .hero-v3 .wrap { position: relative; }
.stage .hero-v3 .hm-logo { position: absolute; inset-inline-end: 14px; top: 6px; width: 100px; height: 100px; pointer-events: none; filter: drop-shadow(0 14px 22px rgba(0, 0, 0, .35)); }
@media (min-width: 720px) { .stage .hero-v3 .hm-logo { width: 150px; height: 150px; top: 0; } }
.stage .hero-v3 h1.hq { font-size: 4.1rem; line-height: .98; letter-spacing: -2px; margin: 0; max-width: none; color: #fff; }
.stage .hero-v3 h1.hq .qk { font-size: .9rem; letter-spacing: .2px; margin-bottom: 16px; }
.stage .hero-v3 .hm-lead { color: rgba(255, 255, 255, .74); font-size: 1.05rem; max-width: 34ch; margin: 16px 0 22px; opacity: 1; }
@media (max-width: 480px) { .stage .hero-v3 h1.hq { font-size: 3.45rem; } }

/* البحث: زجاج على الليل بدل صندوق أبيض */
.stage .hero-v3 .search input {
  background: rgba(255, 255, 255, .08); color: #fff; border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 20px; padding: 19px 54px 19px 18px; font-size: 1.08rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 24px 50px -24px rgba(0, 0, 0, .6);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.stage .hero-v3 .search input::placeholder { color: rgba(255, 255, 255, .5); }
.stage .hero-v3 .search input:focus { border-color: rgba(245, 181, 50, .75); box-shadow: 0 0 0 4px rgba(245, 181, 50, .16), 0 24px 50px -24px rgba(0, 0, 0, .6); }
.stage .hero-v3 .search svg { color: #f5b532; }
.stage .hero-v3 .hm-qmeta, .stage .hero-v3 .hm-kbd { color: rgba(255, 255, 255, .45); }

/* جملة اليوم: الأرقام ذهبية، والباقي نص هادي — سبب صغير للرجوع كل يوم */
.hm-today { margin: 20px 0 6px; font-size: 1.04rem; line-height: 1.9; color: rgba(255, 255, 255, .78); max-width: 38ch; }
.hm-today:empty { display: none; }
.hm-today b { font-family: var(--display); font-weight: 700; color: #f5b532; }
.hm-today a { color: inherit; text-decoration: underline; text-decoration-color: rgba(245, 181, 50, .5); text-underline-offset: 5px; }
.hm-today a:hover { color: #fff; text-decoration-color: #f5b532; }

/* أمثلة الأسئلة: حبوب زجاجية صغيرة — مش زر الإجراء الذهبي */
.stage .ask-chip, .stage .hero .ask-chip {
  background: rgba(255, 255, 255, .07); color: rgba(255, 255, 255, .88); border: 1px solid rgba(255, 255, 255, .18);
  padding: 6px 14px; font-size: .9rem; font-weight: 500; border-radius: 99px; box-shadow: none; margin: 0;
}
.stage .ask-chip:hover { background: rgba(245, 181, 50, .14); border-color: rgba(245, 181, 50, .55); color: #fff; filter: none; }
.stage .ask-try { color: var(--muted); }

/* ---------- الورق بيطلع فوق الليل متل ورقة ---------- */
/* حافة مدوّرة وظل خفيف بدل خط أفقي قاطع: الورقة «بتنسحب» فوق المسرح */
.paper { position: relative; z-index: 2; margin-top: -28px; border-radius: 28px 28px 0 0; box-shadow: 0 -18px 40px -24px rgba(0, 0, 0, .55); }
/* الرئيسية: المسرح فيه السؤال بس — مساحة كافية تحت قبل ما تطلع الورقة */
.stage:has(.hero-v3) > .wrap { padding-bottom: 0; }
.stage .hero-v3 { padding-bottom: 70px; }

/* الألوان بالورق: لون القسم الذهبي ما بيبان على العاجي — منرجّعو للأخضر الغامق */
.paper [data-cat] { --c: var(--accent); --c-soft: var(--accent-soft); }

/* ---------- الرئيسية: الفهرس العاجي ---------- */
/* متل فهرس كتاب: عنوان كبير «كل الأدوات»، خط تحتو، وكل قسم سطر فيه كل أسماء أدواتو مكتوبة */
.paper .world-h { border: 0; padding: 0 0 12px; margin: 4px 0 0; border-bottom: 2px solid var(--text); }
.paper .world-h h2 { font-size: 2rem; font-weight: 800; letter-spacing: -.8px; line-height: 1.15; margin: 0; }
.paper .world-h p { margin: 6px 0 0; color: var(--muted); font-size: .98rem; }

.paper .sec { margin: 0; background: none; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; box-shadow: none; }
.paper .sec > summary { grid-template-columns: auto 1fr auto; gap: 2px 10px; padding: 16px 2px 15px; border-radius: 0; }
.paper .sec-nm { grid-column: 1; font-family: var(--display); font-weight: 700; font-size: 1.22rem; letter-spacing: -.3px; }
.paper .sec-n { grid-column: 2; grid-row: 1; background: none; padding: 0; color: var(--gold-ink); font-family: var(--display); font-size: .95rem; }
.paper .sec .chev { grid-column: 3; grid-row: 1; }
.paper .sec-pv { grid-column: 1 / -1; white-space: normal; overflow: visible; text-overflow: clip; font-size: .95rem; line-height: 1.85; }
.paper .sec > summary:hover .sec-nm { color: var(--accent); }
.paper .sec > summary:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; }
.paper .sec > .grid { padding: 2px 0 22px; }

/* أقسام الرئيسية التانية على الورق: نفس عناوين المقال */
.paper .cat { margin-top: 56px; }
.paper .cat h2 { font-size: 1.65rem; margin-bottom: 16px; }
.paper .cat h2::before { display: none; }
.paper .hm-pop { background: var(--card); border-color: var(--line); box-shadow: none; }
.paper .hm-pop:hover { box-shadow: 0 14px 30px -18px rgba(16, 32, 29, .35); }

/* الأرقام بآخر الصفحة: سطر تحريري بدل صندوق */
.paper .hm-stats {
  margin: 56px 0 6px; padding: 20px 0 0; border: 0; border-top: 2px solid var(--text); border-radius: 0;
  background: none; box-shadow: none; justify-content: space-between; gap: 14px 22px; color: var(--muted);
}
.paper .hm-stats b { display: block; font-family: var(--display); font-weight: 800; font-size: 1.6rem; line-height: 1.15; color: var(--text); margin: 0; }
@media (max-width: 480px) {
  .paper .world-h h2 { font-size: 1.7rem; }
  .paper .sec-nm { font-size: 1.12rem; }
  .paper .hm-stats { justify-content: flex-start; gap: 16px 28px; }
}
/* الديسكتوب: السؤال لازم يملّي الشاشة متل ملصق، مش يضل بحجم الموبايل */
@media (min-width: 760px) {
  .stage .hero-v3 { padding-top: 64px; padding-bottom: 96px; }
  .stage .hero-v3 h1.hq { font-size: clamp(4.1rem, 7.4vw, 6.4rem); letter-spacing: -3px; }
  .stage .hero-v3 h1.hq .qk { font-size: 1rem; margin-bottom: 22px; }
  .stage .hero-v3 .hm-lead { font-size: 1.15rem; }
  .stage .hero-v3 .search { max-width: 640px; }
}
/* بلا «…»: الوصف بيلتف على سطرين بدل ما ينقص */
.paper .hm-list .tool-link small { white-space: normal; overflow: visible; text-overflow: clip; }
@media (max-width: 480px) {
  .paper .hm-stats { display: grid; grid-template-columns: repeat(3, auto); justify-content: space-between; }
}
/* أيقونة البحث فوق الحقل: الـbackdrop-filter تبع الحقل كان يغبّشها لأنها مرسومة تحتو */
.stage .hero-v3 .search svg { z-index: 2; }
/* الديسكتوب: الشمس بتضل طالعة من برّا الزاوية (لو بنص الفراغ بتصير بقعة زيتونية) بس أكبر،
   وبمزج screen حتى الدهبي فوق الأخضر يطلع ضو مش لون عكر */
@media (min-width: 1000px) {
  .stage:has(.hero-v3)::before { width: 900px; height: 900px; top: -380px; left: -300px; mix-blend-mode: screen; }
}

/* الموبايل: الشمس أصغر وأبعد لبرّا حتى ما تقعد ورا العنوان والسطر التعريفي (الصفحات الداخلية) */
@media (max-width: 600px) {
  .stage:not(:has(.hero-v3))::before { width: 330px; height: 330px; top: -185px; left: -175px; }
}

/* ---------- فهرس المدن (مواقيت الصلاة والإمساكية): شبكة دول بدل عمود واحد طوله 7000 بكسل ---------- */
.city-dir { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px 28px; margin: 22px 0 26px; }
.city-dir h2 { font-size: 1.08rem; margin: 14px 0 6px; }
/* الروابط بلا « · » نصية: لما البحث بيخفي رابط ما بيضل فاصل معلّق */
.city-dir p { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; line-height: 1.7; }
@media (min-width: 760px) { .city-dir { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); } }

/* الرأس على 320 بلا ما يفيض (tests/sections-ux.check.js) */
@media (max-width: 359px) {
  header.site .wrap { gap: 6px; } .logo { gap: 6px; } .logo img { width: 32px; height: 32px; } .logo b { font-size: 1.2rem; }
  nav.top { gap: 2px; } nav.top a { padding: 6px; } .ask-btn { gap: 4px; padding: 5px 9px 5px 7px; } .acct-btn { padding: 0 9px !important; }
}