/* أنماط تطبيق شيخي — كانت مضمّنة في index.html (36 كيلوبايت تُرسل مع كل فتح للتطبيق).
كملف موسوم بـ?v= تُخزّنه Cloudflare والمتصفح سنة كاملة وتتغيّر النسخة عند كل تحديث.
الترتيب (البند 22 — تعريف واحد لكل محدِّد): الرموز → الأساس والخط → الشريط العلوي والاستماع → المصحف → الأشرطة السفلية
→ الأوراق المشتركة → الانتقال → الإعدادات → السجل → النتيجة → الكلمة → التنبيهات → استعلامات الشاشة. */
/* ============================== 1) الرموز ============================== */
/* مقاييس الخط تُصحَّح: صندوق سطر الخط الأصلي أطول من الحرف نحو الضعف، فكان تظليل الخطأ عموداً بارتفاع السطر
بدل أن يكون بحجم الحرف. هذا يغيّر مقاييس السطر لا رسم الحروف (فاتصال الحروف سليم كما هو). */
@font-face{font-family:"KFGQPC HAFS";src:url("/static/fonts/UthmanicHafs_V22.woff2") format("woff2");font-display:block;ascent-override:100%;descent-override:50%}
:root{
--bar:#182845; --bar2:#22365c; --on-bar:#f3f5fa; --bg:#f7f5ef; --card:#fffdf8; --ink:#1b2230; --muted:#5c6677; --line:#e1ddd2; --field:#fff;
/* الهوية كحلية (--brand) والإجراء ذهبي (--cta) في المظهرين كما في صفحة الهبوط؛ --green/--green-soft مرادفان قديمان لـ--brand */
--brand:#1e3a6b; --brand-soft:#e4ebf7; --green:var(--brand); --green-soft:var(--brand-soft); --on-green:#fff; --gold:#d3a53a; --gold-soft:#f8edd0; --gold-ink:#8a6414; --red:#b23b3b; --red-soft:#fae3e3; --red-strong:#b23b3b; --play-ayah:rgba(120,130,150,.22); --play-word:rgba(211,165,58,.62); --stop:#246b42; --stop-soft:#dff3e6; --sel:#f8edd0;
/* --amber برتقالي (5.7:1) لا أحمر: كان #b8380a يكاد يطابق --red و--g-reading فتلتبس «متوسطة» باللحن الجلي */
--amber:#9a5300; --amber-soft:#fdebd3; --on-gold:#1b2230;
/* ألوان الأبواب على أرضية فاتحة: كلها 4.5:1 فأعلى مقابل --card */
--g-reading:#b8302f; --g-noon:#1e5fbf; --g-meem:#4a3fbf; --g-madd:#8f5a0a; --g-tafkheem:#7b3fa0; --g-qalqala:#0b6b5e; --g-raa:#b32e75; --g-sifat:#5e5220; --g-other:#50606f; --g-mix:30%;
color-scheme:light;
/* نصيب ألوان الأبواب من الأرضية: التسطير في المصحف أخفّ من الوسوم، واللحن الجلي أقوى من التجويد */
--g-hl:20%; --g-hl-jali:36%; --tag-mix:12%; --on-red:#fff; --cta:var(--gold); --on-cta:var(--on-gold); --qscale:1;
/* --line للفواصل الزخرفية، و--line-ui لحدود عناصر التحكم (3:1 فأعلى، WCAG 1.4.11) */
--line-ui:#8a8578;
--qfs:1.95rem; --top:58px; --bottom:68px; --sheet:#fffdf8; --listen:0px;
/* نظام الشكل الواحد (صفحة الهبوط): الأزرار والرقاقات كبسولية، البطاقات 16، الحقول والألسنة والأيقونات 10، العلامات داخل السطر 4 */
--r-pill:999px; --r-card:16px; --r-field:10px; --r-inline:4px;
/* ظلال كحلية واحدة العائلة: 1 للأشرطة والبطاقات، 2 للعائم (الملخّص والتنبيه والقائمة)، 3 للأوراق، cta للزرّ الذهبي؛ --sh-up نسخة 1 معكوسة للشريط السفلي */
--sh-1:0 1px 2px rgba(24,40,69,.08),0 2px 8px rgba(24,40,69,.06); --sh-up:0 -1px 2px rgba(24,40,69,.08),0 -2px 8px rgba(24,40,69,.06);
--sh-2:0 6px 20px rgba(24,40,69,.14); --sh-3:0 -8px 30px rgba(24,40,69,.22); --sh-cta:0 6px 18px rgba(24,40,69,.22); --scrim:rgba(15,21,32,.5);
/* سلّم الخط الواحد: الشارات والتلميحات xs/sm، الرسائل base، عناوين البلاطات والأوراق lg، الرقم display (و.perfect 3rem) */
--fs-xs:.75rem; --fs-sm:.8125rem; --fs-md:.875rem; --fs-base:1rem; --fs-lg:1.125rem; --fs-xl:1.25rem; --fs-display:2.5rem;
/* الكلمة القرآنية خارج المصحف: q-sm في القوائم والشرائح، q-md في البطاقات وعنوان ورقة الكلمة (--qword مرادف قديم) */
--q-sm:1.25rem; --q-md:1.5rem; --q-lh:1.9; --qword:var(--q-md); --qword-lh:var(--q-lh);
/* الأيقونات: شبكة 24 بثلاثة مقاسات (svg.i.sm/.md/.lg) */
--ic-sm:18px; --ic-md:22px; --ic-lg:28px;
}
/* كتلة ليلية واحدة: applyTheme في app.js يحسم «تلقائي» بـmatchMedia ويكتب data-theme، فلا نسخة ثانية في @media */
:root[data-theme="light"]{color-scheme:light}
:root[data-theme="dark"]{color-scheme:dark;--bg:#0f1520;--card:#161e2c;--sheet:#161e2c;--ink:#e9edf5;--muted:#98a2b3;--line:#2a3446;--field:#1c2534;
--g-reading:#ff8a8a; --g-noon:#7fb0ff; --g-meem:#a9a0ff; --g-madd:#f0b35c; --g-tafkheem:#d4a6ff; --g-qalqala:#5fd6c4; --g-raa:#ff8fc2; --g-sifat:#d8c66a; --g-other:#a8b4c0; --g-mix:34%;--on-green:#0f1520;--gold-ink:#d3a53a;--gold-soft:#2b2924;--sel:#2b2924;--red:#f08a8a;--red-soft:#3f2323;--amber:#f0b35c;--amber-soft:#3d2c19;--brand:#8fb3f0;--brand-soft:#22375a;--play-ayah:rgba(160,170,190,.28);--play-word:rgba(211,165,58,.55);--stop:#7fd4a0;--stop-soft:#1d3a2a;--tag-mix:22%;--g-hl:26%;--g-hl-jali:44%;--on-red:#0f1520;--red-strong:#f08a8a;
--sh-1:0 1px 2px rgba(0,0,0,.35),0 2px 8px rgba(0,0,0,.35);--sh-up:0 -1px 2px rgba(0,0,0,.35),0 -2px 8px rgba(0,0,0,.35);--sh-2:0 6px 20px rgba(0,0,0,.45);--sh-3:0 -8px 30px rgba(0,0,0,.55);--sh-cta:0 6px 18px rgba(0,0,0,.45);}
/* ============================== 2) الأساس والخط ============================== */
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{height:100%}
body{height:100%;margin:0;background:var(--bg);color:var(--ink);font-family:"Cairo",system-ui,sans-serif;line-height:1.6;overflow:hidden}
button{font-family:inherit;cursor:pointer}
button,.word,.ayah,.it,.tile,.fab{touch-action:manipulation}
:is(button,input,select,a,summary,[tabindex]):focus-visible{outline:3px solid var(--gold-ink);outline-offset:2px;box-shadow:none}
.appbar :focus-visible,.listenbar :focus-visible{outline-color:var(--gold)}
.sheet h3:focus,.sheet h3:focus-visible{outline:none}
:lang(ur){font-family:"Noto Nastaliq Urdu","Noto Naskh Arabic","Cairo",system-ui,sans-serif}
:lang(fa){font-family:"Vazirmatn","Noto Naskh Arabic","Cairo",system-ui,sans-serif}
:lang(hi){font-family:"Noto Sans Devanagari","Cairo",system-ui,sans-serif}
:lang(bn){font-family:"Noto Sans Bengali","Cairo",system-ui,sans-serif}
:lang(zh){font-family:"Noto Sans SC","Cairo",system-ui,sans-serif}
@media (prefers-reduced-motion:reduce){*{animation:none !important;transition:none !important}}
svg.i{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;display:block}
svg.i.sm{width:var(--ic-sm);height:var(--ic-sm)}svg.i.md{width:var(--ic-md);height:var(--ic-md)}svg.i.lg{width:var(--ic-lg);height:var(--ic-lg)}
[hidden]{display:none!important}
.sr-input{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* نصوص مساعدة مشتركة: .accum قبل .hint عمداً (كلاهما على #accum وبالخصوصية نفسها، فالمتأخر يغلب كما كان) */
.accum{color:var(--gold-ink);font-weight:600}
button.accum{appearance:none;-webkit-appearance:none;display:block;width:100%;border:0;background:none;padding:4px 0;text-align:start;min-height:32px;border-radius:var(--r-field);line-height:inherit}
button.accum:active{background:var(--green-soft)}
.delta{font-weight:700}.delta.up{color:var(--stop)}.delta.down{color:var(--red)}
.hint{font-size:var(--fs-sm);color:var(--muted)}
.empty{color:var(--muted);text-align:center;padding:40px 10px;font-size:var(--fs-base)}
.badge{position:absolute;top:4px;inset-inline-end:4px;min-width:18px;height:18px;border-radius:var(--r-pill);background:var(--red-strong);color:var(--on-red);font-size:max(var(--fs-xs),12px);font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 5px}
/* ============================== 3) الشريط العلوي والاستماع ============================== */
.appbar{position:fixed;top:0;right:0;left:0;height:auto;min-height:calc(var(--top) + env(safe-area-inset-top));padding-top:env(safe-area-inset-top);background:var(--bar);color:var(--on-bar);display:flex;flex-direction:column;z-index:40;box-shadow:var(--sh-1);padding-inline:max(0px,env(safe-area-inset-left)) max(0px,env(safe-area-inset-right))}
.appbar .r1{display:flex;align-items:center;gap:2px;padding-inline:6px;height:58px}
.appbar .ib{width:auto;min-width:44px;padding:0 6px;height:44px;border:0;background:transparent;color:var(--on-bar);border-radius:var(--r-field);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;position:relative;transition:background .15s;font-size:max(var(--fs-xs),12px);line-height:1.15;flex:0 0 auto}
.appbar .ib:not(:disabled):active,.appbar .ib.on{background:rgba(255,255,255,.14)}
@media (hover:hover){.appbar .ib:not(:disabled):hover{background:rgba(255,255,255,.14)}}
.appbar .ib.txt{width:auto;padding:0 10px;font-size:var(--fs-base);font-weight:700}
.appbar .ttl{flex:1;text-align:center;min-width:0;line-height:1.15;border:0;background:transparent;color:var(--on-bar);font-family:inherit;height:44px;border-radius:var(--r-field);display:flex;align-items:center;justify-content:center;gap:6px}
.appbar .ttl:active{background:rgba(255,255,255,.14)}
.appbar .ttl span{display:flex;flex-direction:column;align-items:center;min-width:0;line-height:1.1}
.appbar .ttl b{font-size:var(--fs-xl);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.appbar .ttl small{font-size:max(var(--fs-xs),12px);opacity:.85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.appbar .ttl svg.i{width:var(--ic-sm);height:var(--ic-sm);opacity:.8}
.appbar .sub{flex:1;font-size:var(--fs-xs);opacity:.9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-inline:8px}
/* أول تشغيل: حلقة ذهبية على اسم السورة (زرّ لا عنوان) تزول مع introSeen */
.appbar .ttl.coach{box-shadow:inset 0 0 0 1.5px var(--gold)}
/* الحالات المقفولة تبدو مقفولة (setLocked أثناء التسجيل والتحليل) */
.appbar .ttl:disabled,.appbar .ib:disabled{opacity:.45;cursor:default}
.appbar .ttl:disabled svg.i{visibility:hidden}
.appbar .ttl:disabled:active{background:transparent;transform:none}
/* شريط الاستماع */
.listenbar{position:fixed;top:calc(var(--top) + env(safe-area-inset-top));right:0;left:0;height:48px;background:var(--bar2);color:var(--on-bar);display:none;align-items:center;gap:6px;padding-inline:8px;z-index:39;box-shadow:var(--sh-1)}
.listenbar.show{display:flex}
.listenbar .rc{flex:1;min-width:0;display:flex;align-items:center;gap:6px;border:0;background:transparent;color:var(--on-bar);font-family:inherit;font-size:var(--fs-lg);font-weight:600;height:44px;border-radius:var(--r-field);padding-inline:6px}
.listenbar .rc:active{background:rgba(255,255,255,.12)}
.listenbar .rc .nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.listenbar .np{font-size:max(var(--fs-xs),12px);opacity:.85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:34vw}
.listenbar .rc svg.i{color:var(--gold);flex:0 0 auto}
.listenbar .rc .chev{color:inherit;opacity:.8} /* سهم القائمة بلون النص لا ذهبياً (كان سطراً مضمّناً في index.html) */
.listenbar .ib{width:44px;height:44px;border:0;background:transparent;color:var(--on-bar);border-radius:var(--r-field);flex:0 0 auto;display:flex;align-items:center;justify-content:center}
.listenbar .ib:active{background:rgba(255,255,255,.12)}
.listenbar .pp{width:46px;height:46px;border-radius:50%;background:var(--gold);color:var(--on-gold);border:0;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.listenbar .pp svg.i{width:var(--ic-md);height:var(--ic-md)}
.dropdown{position:fixed;top:calc(var(--top) + env(safe-area-inset-top) + 4px);right:8px;left:8px;max-width:420px;margin-inline-end:auto;background:var(--bar);color:var(--on-bar);border-radius:var(--r-card);box-shadow:var(--sh-2);z-index:65;display:none;max-height:70dvh;overflow:auto;padding:6px 0}
.dropdown.show{display:block}
.dropdown div{padding:12px 18px;font-size:var(--fs-lg);cursor:pointer;border-inline-start:3px solid transparent}
.dropdown div.on{background:rgba(255,255,255,.14);border-inline-start-color:var(--gold);font-weight:700}
.dropdown div:focus-visible{outline-color:var(--gold);outline-offset:-3px;box-shadow:none}
.dropdown div:active{background:rgba(255,255,255,.2)}
/* شاشة البدء: بطل الهبوط نفسه (تدرّج شعاعي كحلي) والشعار الشفاف واسم التطبيق، وخط ذهبي يتحرّك بعد 1.2 ث (.slow) ليقول «أعمل» */
.splash{position:fixed;inset:0;z-index:100;background:var(--bar);background:radial-gradient(120% 80% at 50% 0%,var(--bar2),var(--bar) 70%);color:var(--on-bar);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;transition:opacity .45s ease}
.splash img{width:96px;height:auto}.splash b{font-family:"Cairo",system-ui,sans-serif;font-weight:800;font-size:2rem;line-height:1.2;letter-spacing:.01em}
.splash .line{width:120px;height:2px;border-radius:2px;background:var(--gold);opacity:0;transform:scaleX(0);transform-origin:center}
.splash.slow .line{opacity:1;animation:splashline 1.2s ease-in-out infinite}@keyframes splashline{0%{transform:scaleX(0)}50%{transform:scaleX(1)}100%{transform:scaleX(0)}}
@media (prefers-reduced-motion:reduce){.splash.slow .line{animation:none;transform:scaleX(1)}}
.splash.hide{opacity:0;pointer-events:none}
/* ============================== 4) المصحف ============================== */
.reader{position:absolute;top:calc(var(--top) + var(--listen) + env(safe-area-inset-top));bottom:calc(var(--bottom) + env(safe-area-inset-bottom));right:0;left:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;padding:14px 14px calc(30px + var(--summary,0px));scroll-padding-bottom:calc(var(--summary,0px) + 8px)}
.reader.bg-off{pointer-events:none} /* ورقة مفتوحة: الخلفية معطّلة بلا inert (انظر readerModal في app.js) */
/* مقاس السطر: عمود بعرض سطر مصحف تقريباً (37 حرفاً ≈ 18 em من خط المصحف) حتى لا يصير السطر على الحاسوب
ضعف سطر المصحف. المقياس نسبة مستقلة (--qscale) فلا يمسّ --qfs الذي يحفظه المستخدم بأزرار A−/A+. */
.quran{font-family:"KFGQPC HAFS","Amiri Quran",serif;font-size:calc(var(--qfs) * var(--qscale,1));line-height:2.15;text-align:justify;text-align-last:center;direction:rtl;text-wrap:pretty}
@media (max-width:520px){.quran{text-align:center}}
.intro{margin:6px 0 14px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);padding:12px 14px;font-family:"Cairo",system-ui,sans-serif;font-size:var(--fs-md);direction:inherit;text-align:start;text-align-last:auto}
.intro ol{margin:6px 0 0;padding-inline-start:20px}.intro .btnrow{margin-top:8px;display:flex;gap:8px;justify-content:flex-end}
.retry{display:flex;flex-direction:column;align-items:center;gap:10px;padding:40px 10px;font-family:"Cairo",system-ui,sans-serif;font-size:var(--fs-base);direction:inherit;text-align:center;text-align-last:auto}
/* صفّ التنقل داخل المحتوى بعد المصحف (البند 17): غير ثابت، 44 بكسل ومسافة 16 من النص، فينتقل القارئ من آخر كلمة
إلى «الآية التالية» بحركة عين واحدة ويبقى شريط ثابت واحد؛ ويختفي أثناء التهيئة والتسجيل والتحليل (:root.recording من setFab) */
.navrow{display:flex;flex-direction:column;align-items:stretch;gap:4px;margin:16px 0 0;font-family:"Cairo",system-ui,sans-serif;font-size:1rem;line-height:1.3;direction:inherit;text-align:start;text-align-last:auto}
:root.recording .navrow{display:none}
/* سطران (البند 15): «ما أقرأ» — نصّ الموضع (زرّ يفتح ورقة الانتقال على لسان «الآيات») وبجواره أزرار الطول ١·٢·٣ (.seg.mini) —
ثم صفّ السابق/التالي بارتفاع 44 وبنصّه كاملاً (لا يُقصّ على 360) */
.navtop{display:flex;align-items:center;justify-content:center;gap:10px;min-width:0}
.navrow .lbl{border:0;background:transparent;color:var(--muted);font-family:inherit;font-size:var(--fs-sm);font-weight:600;min-height:44px;min-width:0;flex:0 1 auto;padding:0 8px;border-radius:var(--r-field);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center;cursor:pointer}
.navrow .lbl:active{background:var(--green-soft)}
#navLen{flex:0 0 auto}
.navbtns{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:44px;min-width:0}
.navbtns>button{border:0;background:var(--brand-soft);color:var(--brand);border-radius:var(--r-pill);padding:6px 12px;min-height:44px;font-weight:700;display:flex;align-items:center;gap:4px;font-size:clamp(var(--fs-xs),3.4vw,var(--fs-md));min-width:0;flex:0 1 auto;font-family:inherit;transition:transform .08s,background .12s}
/* نصّ الزرّ لا يلتفّ ولا يفيض: «Предыдущий отрывок» كانت تخرج من الشريط على الحجم الافتراضي */
.navbtns>button span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.navbtns>button svg.i{flex:0 0 auto;width:var(--ic-sm);height:var(--ic-sm)}
.navbtns>button:disabled{opacity:.35;cursor:default}
.navbtns>button:not(:disabled):active{transform:scale(.985)}
[dir=ltr] .navbtns>button .i{transform:scaleX(-1)}
.ayah{display:inline}
.ayah-num{display:inline-flex;align-items:center;justify-content:center;font-family:"Cairo";font-size:max(.85rem,.46em);font-weight:600;line-height:1;color:var(--gold-ink);border:1.5px solid var(--gold-ink);border-radius:50%;width:1.9em;height:1.9em;min-width:32px;min-height:32px;margin:0 .12em 0 .38em;vertical-align:middle;cursor:pointer;position:relative}
.ayah-num::before{content:"";position:absolute;inset:-6px;border-radius:50%} /* منطقة لمس 44 بكسل بلا تغيير الرسم */
.ayah-num.stopped{background:var(--stop-soft);border-color:var(--stop);color:var(--stop)}
/* الاستماع مفتوح: حلقة خفيفة على أرقام الآيات (كلٌّ منها زرّ تشغيل) */
:root.listening .ayah-num{box-shadow:0 0 0 3px var(--gold-soft)}
.ayah.playing{background:var(--play-ayah);border-radius:5px;box-decoration-break:clone;-webkit-box-decoration-break:clone;padding:.04em 0}
.ayah.playing .word.reading{background:var(--play-word);box-shadow:0 0 0 2px var(--play-word)}
.word{display:inline;white-space:nowrap;border-radius:var(--r-inline);padding:0 .06em;text-underline-offset:.14em}
.word.has-err{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;cursor:pointer}
.word.stopped-after{box-shadow:inset 0 -2px 0 var(--stop)}
.word.flash{animation:flash 1.2s ease-out}
@keyframes flash{0%{background:var(--gold-soft)}100%{background:transparent}}
.word.unread-tail{color:var(--muted);box-shadow:inset 0 -2px 0 var(--muted)}
.ch{border-radius:var(--r-inline)}
/* علامة الخطأ على الحرف: **لون وتسطير بلا خلفية** — كانت الخلفية تطلي صندوق السطر كله فتصير لوحاً أطول من
الحرف بمرة ونصف (مقيس: 53 بكسل لحبر 27.5)، وتحجب الحركات في الوضع الداكن. هكذا تتفق العلامة في المصحف مع
العلامة في بطاقة الملاحظة (.hlc)، ولا وزن ولا حجم يتغيّر داخل الكلمة. واللحن الجلي **مزدوج** لا سميك فقط،
ليبقى متمايزاً في عمى الأحمر والأخضر حيث تتقارب الأبواب التسعة إلى شريط واحد. */
/* التلوين بحسب نوع الخطأ: اللحن الجلي (حرف/حركة) أحمر، ولكل باب من أبواب اللحن الخفي لونه؛ واللحن الجلي آخرها ليغلب لون أي باب آخر على الحرف نفسه */
.ch.g-reading-soft{color:var(--g-reading);text-decoration:underline var(--g-reading) .1em}
.word.err-whole.g-reading-soft{background:color-mix(in srgb,var(--g-reading) var(--tag-mix),transparent)}
.ch.g-noon{color:var(--g-noon);text-decoration:underline var(--g-noon) .1em}
.word.err-whole.g-noon{background:color-mix(in srgb,var(--g-noon) var(--g-mix),transparent);box-shadow:inset 0 -4px 0 var(--g-noon)}
.ch.g-meem{color:var(--g-meem);text-decoration:underline var(--g-meem) .1em}
.word.err-whole.g-meem{background:color-mix(in srgb,var(--g-meem) var(--g-mix),transparent);box-shadow:inset 0 -4px 0 var(--g-meem)}
.ch.g-madd{color:var(--g-madd);text-decoration:underline var(--g-madd) .1em}
.word.err-whole.g-madd{background:color-mix(in srgb,var(--g-madd) var(--g-mix),transparent);box-shadow:inset 0 -4px 0 var(--g-madd)}
.ch.g-tafkheem{color:var(--g-tafkheem);text-decoration:underline var(--g-tafkheem) .1em}
.word.err-whole.g-tafkheem{background:color-mix(in srgb,var(--g-tafkheem) var(--g-mix),transparent);box-shadow:inset 0 -4px 0 var(--g-tafkheem)}
.ch.g-qalqala{color:var(--g-qalqala);text-decoration:underline var(--g-qalqala) .1em}
.word.err-whole.g-qalqala{background:color-mix(in srgb,var(--g-qalqala) var(--g-mix),transparent);box-shadow:inset 0 -4px 0 var(--g-qalqala)}
.ch.g-raa{color:var(--g-raa);text-decoration:underline var(--g-raa) .1em}
.word.err-whole.g-raa{background:color-mix(in srgb,var(--g-raa) var(--g-mix),transparent);box-shadow:inset 0 -4px 0 var(--g-raa)}
.ch.g-sifat{color:var(--g-sifat);text-decoration:underline var(--g-sifat) .1em}
.word.err-whole.g-sifat{background:color-mix(in srgb,var(--g-sifat) var(--g-mix),transparent);box-shadow:inset 0 -4px 0 var(--g-sifat)}
.ch.g-other{color:var(--g-other);text-decoration:underline var(--g-other) .1em}
.word.err-whole.g-other{background:color-mix(in srgb,var(--g-other) var(--g-mix),transparent);box-shadow:inset 0 -4px 0 var(--g-other)}
.ch.g-reading{background:color-mix(in srgb,var(--g-reading) var(--g-mix),transparent);box-shadow:inset 0 -4px 0 var(--g-reading);color:var(--g-reading);text-decoration:underline double var(--g-reading) .13em}
.word.err-whole.g-reading{background:color-mix(in srgb,var(--g-reading) var(--g-mix),transparent);box-shadow:inset 0 -5px 0 var(--g-reading)}
.word.g-reading.pulse{animation:errpulse 1.1s ease-out 2;border-radius:8px;outline-offset:2px}
@keyframes errpulse{0%{outline:0 solid color-mix(in srgb,var(--g-reading) 55%,transparent)}100%{outline:10px solid transparent}}
@media (prefers-reduced-motion:reduce){.word.g-reading.pulse{outline:3px solid color-mix(in srgb,var(--g-reading) 55%,transparent);outline-offset:2px}}
.ch.stop-mark{background:var(--stop-soft);box-shadow:inset 0 -4px 0 var(--stop)}
.word.err-whole .ch{background:transparent;box-shadow:none}
/* الكلمة التي لم تُقرأ: تسطير متقطّع (شكل مختلف لا لون فقط) */
.word.err-whole.skipped{box-shadow:none;border-bottom:.1em dashed var(--g-reading)}
/* سفاري/iOS (WORD_MARK في app.js): الكلمة كلها بلون أهمّ أبوابها وتسطيره — ::highlight لا يُطلى فيها على جزء من كلمة موصولة */
.word.err-word.g-reading{color:var(--g-reading);text-decoration:underline double var(--g-reading) .13em}
.word.err-word.g-reading-soft{color:var(--g-reading);text-decoration:underline var(--g-reading) .1em}
.word.err-word.g-noon{color:var(--g-noon);text-decoration:underline var(--g-noon) .1em}
.word.err-word.g-meem{color:var(--g-meem);text-decoration:underline var(--g-meem) .1em}
.word.err-word.g-madd{color:var(--g-madd);text-decoration:underline var(--g-madd) .1em}
.word.err-word.g-tafkheem{color:var(--g-tafkheem);text-decoration:underline var(--g-tafkheem) .1em}
.word.err-word.g-qalqala{color:var(--g-qalqala);text-decoration:underline var(--g-qalqala) .1em}
.word.err-word.g-raa{color:var(--g-raa);text-decoration:underline var(--g-raa) .1em}
.word.err-word.g-sifat{color:var(--g-sifat);text-decoration:underline var(--g-sifat) .1em}
.word.err-word.g-other{color:var(--g-other);text-decoration:underline var(--g-other) .1em}
::highlight(g-reading){color:var(--g-reading);text-decoration:underline double var(--g-reading) .13em}
::highlight(g-reading-soft){color:var(--g-reading);text-decoration:underline var(--g-reading) .1em}
::highlight(g-noon){color:var(--g-noon);text-decoration:underline var(--g-noon) .1em}
::highlight(g-meem){color:var(--g-meem);text-decoration:underline var(--g-meem) .1em}
::highlight(g-madd){color:var(--g-madd);text-decoration:underline var(--g-madd) .1em}
::highlight(g-tafkheem){color:var(--g-tafkheem);text-decoration:underline var(--g-tafkheem) .1em}
::highlight(g-qalqala){color:var(--g-qalqala);text-decoration:underline var(--g-qalqala) .1em}
::highlight(g-raa){color:var(--g-raa);text-decoration:underline var(--g-raa) .1em}
::highlight(g-sifat){color:var(--g-sifat);text-decoration:underline var(--g-sifat) .1em}
::highlight(g-other){color:var(--g-other);text-decoration:underline var(--g-other) .1em}
::highlight(stop-mark){background-color:var(--stop-soft);text-decoration:underline 4px var(--stop)}
/* ============================== 5) الأشرطة السفلية ============================== */
/* الشريط السفلي */
.bottombar{position:fixed;bottom:0;right:0;left:0;height:auto;min-height:calc(68px + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);background:var(--card);border-top:1px solid var(--line);display:flex;align-items:center;padding-inline:max(14px,env(safe-area-inset-left)) max(14px,env(safe-area-inset-right));gap:10px;z-index:40;box-shadow:var(--sh-up)}
/* الفاب آخر عنصر في الشريط (ترتيب التنقل)، ويُقلب في العربية ليبقى في زاوية الإبهام في الاتجاهين */
[dir=rtl] .bottombar{flex-direction:row-reverse}
.fab{width:56px;height:56px;border-radius:50%;border:0;background:var(--gold);color:var(--on-gold);display:flex;align-items:center;justify-content:center;box-shadow:0 6px 18px rgba(211,165,58,.4);transition:transform .15s,background .2s;flex:0 0 auto}
.fab:active{transform:scale(.94)}
.fab svg.i{width:var(--ic-lg);height:var(--ic-lg);stroke-width:1.75}
.fab.coach{animation:coach 1.6s ease-in-out infinite;box-shadow:0 0 0 0 rgba(211,165,58,.7)}@keyframes coach{0%{box-shadow:0 0 0 0 rgba(211,165,58,.7)}70%{box-shadow:0 0 0 16px rgba(211,165,58,0)}100%{box-shadow:0 0 0 0 rgba(211,165,58,0)}}@media (prefers-reduced-motion:reduce){.fab.coach,.fab.warm{animation:none;box-shadow:0 0 0 4px var(--gold)}}
/* التهيئة (warm): ذهبي بأيقونة الميكروفون وحلقة تتّسع (coach) لا دوّار التحليل؛ ثم عند rec نبضة دخول واحدة (180 م.ث) مع الأحمر */
.fab.warm{background:var(--gold);color:var(--on-gold);animation:coach 1s ease-out infinite;box-shadow:0 0 0 0 rgba(211,165,58,.7)}
.fab.rec{background:var(--red-strong);color:var(--on-red);box-shadow:0 6px 18px rgba(178,59,59,.45);animation:recin .18s ease-out,pulse 1.4s infinite}
@keyframes recin{0%{transform:scale(1)}50%{transform:scale(1.12)}100%{transform:scale(1)}}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(178,59,59,.45)}70%{box-shadow:0 0 0 14px rgba(178,59,59,0)}100%{box-shadow:0 0 0 0 rgba(178,59,59,0)}}
.fab.busy{background:var(--bar2);color:var(--on-bar);animation:none;box-shadow:0 0 0 4px var(--gold)}
.fab.busy:active{transform:none}
.fab.busy svg.i{animation:spin .9s linear infinite}
/* الزرّ الكبير أثناء التحليل: النقرة الأولى تسلّح (X بلون الخطر) والثانية تلغي — نمط .hdel.arm */
.fab.busy.arm{background:var(--red-soft);color:var(--red);box-shadow:0 0 0 4px var(--red-soft)}.fab.busy.arm svg.i{animation:none}
.fab.ready{background:var(--stop);color:var(--on-green)}
.fab.denied{background:var(--muted);color:var(--on-green)}
.bstats{display:flex;flex-direction:column;gap:2px;font-size:max(var(--fs-sm),13px);color:var(--muted);flex:1;min-width:0}
/* المؤقّت يُقرأ من بُعد ذراع، وبجانبه العدّ التنازلي إلى سقف التسجيل يتلوّن كهرمانياً قرب النهاية بدل رسالة نصّية */
.bstats .row{display:none;gap:4px 10px;align-items:center;flex-wrap:wrap;font-variant-numeric:tabular-nums;color:var(--ink)}
.bottombar.warm .row,.bottombar.rec .row,.bottombar.ready .row,.bottombar.busy .row{display:flex}
.bstats .row span{display:flex;align-items:center;gap:4px}
.bstats .row span svg.i{width:var(--ic-sm);height:var(--ic-sm)}
#timer{font-size:1.6rem;font-weight:700;line-height:1.1;font-variant-numeric:tabular-nums}
.bstats .cd{display:none;font-variant-numeric:tabular-nums;color:var(--muted);font-weight:600}
.bottombar.rec .cd{display:flex}
#timer.warn,.bstats .cd.warn{color:var(--amber)}
.meter{height:5px;background:var(--line);border-radius:6px;overflow:hidden;display:none}
.meter i{display:block;height:100%;width:100%;background:linear-gradient(to left,var(--green),var(--gold),var(--red));clip-path:inset(0 0 0 calc(100% - var(--lvl,0%)))}
[dir=ltr] .meter i{background:linear-gradient(to right,var(--green),var(--gold),var(--red));clip-path:inset(0 calc(100% - var(--lvl,0%)) 0 0)}
.bottombar.warm .meter,.bottombar.rec .meter{display:block;height:8px}
/* سطر الحالة: بلا قطع في الخمول (stIdle قصير)؛ وأثناء التسجيل/الجاهزية/التحليل 14px بلون النص لا رمادية، ويلتفّ على سطرين في rec (stRec) */
#status{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;font-size:max(var(--fs-xs),12px);line-height:1.3}
#status.err{color:var(--red);font-weight:600}
.bottombar.idle #status{-webkit-line-clamp:1}
.bottombar.ready #status,.bottombar.busy #status{-webkit-line-clamp:1;font-size:max(var(--fs-md),14px);color:var(--ink)}
.bottombar.rec #status,.bottombar.warm #status{-webkit-line-clamp:2;font-size:max(var(--fs-md),14px);color:var(--ink)}
.bb{width:auto;min-width:46px;padding:0;height:46px;border:0;background:transparent;color:var(--ink);border-radius:var(--r-field);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;font-size:max(var(--fs-xs),12px);position:relative;font-family:inherit;transition:transform .08s,background .12s}
.bb.on{color:var(--green);background:var(--green-soft)}
.bb[aria-disabled=true]{opacity:.45}
.bb.upl{cursor:pointer}
.bb:disabled{opacity:.45;cursor:default}
.bb:disabled:active{background:transparent;transform:none}
.bb:not(:disabled):active{background:var(--green-soft);transform:scale(.985)}
/* رقاقة الرصيد في الخمول (البند 14): «متبقٍ 4:32» لغير الحساب المفتوح، تفتح ورقة الحساب وتتلوّن تحت 25% (low) وعند النفاد (out) */
.bstats .bal{display:none;align-self:flex-start;min-height:24px;max-width:100%;padding:1px 10px;font-size:max(var(--fs-xs),12px);font-weight:700;line-height:1.6;background:var(--gold-soft);color:var(--gold-ink);cursor:pointer;position:relative;font-variant-numeric:tabular-nums}
.bstats .bal::before{content:"";position:absolute;inset:-10px 0} /* هدف لمس أعلى دون تطويل الشريط */
.bottombar.idle .bal{display:inline-block}
.bstats .bal.low{background:var(--amber-soft);color:var(--amber)}.bstats .bal.out{background:var(--red-soft);color:var(--red)}
/* شريط الملخص العائم: زر واحد ممتلئ («التفاصيل») وحافة بلون النتيجة */
.summary{position:fixed;right:max(10px,env(safe-area-inset-right));left:max(10px,env(safe-area-inset-left));flex-wrap:nowrap;bottom:calc(var(--bottom) + env(safe-area-inset-bottom) + 8px);background:var(--card);border:1px solid var(--line);border-inline-start:4px solid var(--line);border-radius:var(--r-card);padding:2px 10px;display:flex;visibility:hidden;opacity:0;transform:translateY(8px);transition:opacity .2s,transform .2s,visibility 0s .2s;align-items:center;gap:8px;z-index:35;box-shadow:var(--sh-2)}
.summary.show{visibility:visible;opacity:1;transform:none;transition:opacity .2s,transform .2s,visibility 0s}
.summary.good{border-inline-start-color:var(--stop)}.summary.mid{border-inline-start-color:var(--amber)}.summary.bad{border-inline-start-color:var(--red)}
.summary .sc{font-size:var(--fs-xl);font-weight:700;font-variant-numeric:tabular-nums}.summary .lbl{font-weight:600;color:var(--muted);font-size:var(--fs-sm)}.summary .lbl::after{content:':'}.summary .sp{flex:1}
.summary .sc.good{color:var(--stop)}.summary .sc.mid{color:var(--amber)}.summary .sc.bad{color:var(--red)}
/* الرقاقات تلتفّ (لا تُقصّ خلف الزرّ) والشريط يعلو بقدرها (showSummary يقيس ارتفاعه)؛ وعلى الضيّق يُخفى «النتيجة:» بصرياً — الرقم والرقاقات يقولانها */
.summary .chips{display:flex;gap:4px;flex-wrap:wrap;overflow:visible;scrollbar-width:none;flex:1;min-width:0;font-size:var(--fs-xs)}.summary .chips::-webkit-scrollbar{display:none}
.summary .chip.more{min-height:32px;padding:0 12px}
.summary .badge{position:static;flex:0 0 auto} /* شارة عدد الملاحظات (كانت على زرّ «الملاحظات» المحذوف) قرب زرّ الخطوة */
/* مطويّاً (#sumClose): رقاقة بعرض محتواها في جهة البداية — النتيجة وشارتها وزرّ «التفاصيل» فقط، فلا يضيع مدخل ورقة النتيجة */
.summary.mini{inset-inline-end:auto;min-height:44px;padding:2px 8px}
.summary.mini .lbl,.summary.mini .chips,.summary.mini .sp,.summary.mini #sumClose{display:none}
#sumClose{flex:0 0 44px;width:44px;height:44px;padding:0;border:0;background:transparent;color:var(--muted);display:flex;align-items:center;justify-content:center;border-radius:var(--r-field)}
/* بطاقات الانشغال وفحص الصوت فوق الشريط السفلي */
.busy-card{position:fixed;left:50%;bottom:calc(var(--bottom) + env(safe-area-inset-bottom) + 12px);transform:translate(-50%,8px);visibility:hidden;opacity:0;transition:opacity .2s,transform .2s,visibility 0s .2s;background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:var(--r-card);padding:16px 20px;z-index:55;display:flex;flex-direction:column;align-items:center;gap:10px;box-shadow:var(--sh-2);min-width:220px;text-align:center}
.busy-card.show{visibility:visible;opacity:1;transform:translateX(-50%);transition:opacity .2s,transform .2s,visibility 0s}
#checkCard{max-width:min(92vw,360px)}#checkCard b{font-weight:600;font-size:var(--fs-base)}#checkCard .btnrow{width:100%}
/* مقياس مستوى الصوت داخل البطاقة (بدل نسبة «(1٪)» بلا معنى): شريط .meter نفسه بقيمة --lvl من مستوى الكلام المقيس */
#checkCard .meter{display:block;width:100%;height:8px}
.spinner{width:34px;height:34px;border:4px solid var(--line);border-top-color:var(--green);border-radius:50%;animation:spin .9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spinner,.fab.busy:not(.arm) svg.i{animation:spin 1.8s linear infinite !important}}
/* ============================== 6) الأوراق المشتركة ============================== */
.scrim{position:fixed;inset:0;background:var(--scrim);z-index:50;display:block;visibility:hidden;opacity:0;transition:opacity .2s,visibility 0s .2s}
.scrim.show{visibility:visible;opacity:1;transition:opacity .2s,visibility 0s}
.sheet{position:fixed;right:0;left:0;bottom:0;max-height:88vh;max-height:min(88dvh,var(--vvh,100dvh));background:var(--sheet);border-radius:20px 20px 0 0;z-index:60;transform:translateY(105%);visibility:hidden;transition:transform .25s ease-out,visibility 0s .25s;display:flex;flex-direction:column;box-shadow:var(--sh-3)}
/* --vvd (app.js visualViewport): إزاحة أسفل الورقة إلى أسفل منطقة الرؤية حين تغطّيها لوحة مفاتيح iOS بدل أن تنزلق خارج الشاشة */
.sheet.show{transform:translateY(var(--vvd,0px));visibility:visible;transition:transform .25s ease-out,visibility 0s}
.sheet:not(.show){pointer-events:none}
.sheet .grab{width:44px;height:5px;border-radius:3px;background:var(--line);margin:8px auto 0}
.sheet h3{margin:8px 16px;font-size:var(--fs-lg);display:flex;align-items:center;justify-content:space-between}
.sheet .body{overflow-y:auto;overscroll-behavior:contain;padding:0 16px 16px;flex:1 1 auto;min-height:0}
.sheet .body:last-child{padding-bottom:calc(16px + env(safe-area-inset-bottom))}
.sheethead{display:flex;align-items:center;gap:4px;padding:4px 8px}
.sheethead h3{flex:1;margin:0 8px;min-width:0;font-size:var(--fs-lg);font-weight:700;display:flex;align-items:center;justify-content:space-between;gap:8px}
.sheethead .ib{width:44px;height:44px;border:0;background:transparent;color:var(--ink);border-radius:var(--r-field);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.sheethead .ib:active{background:var(--green-soft)}
[dir=ltr] .sheethead .back svg{transform:scaleX(-1)}
/* الأوراق: أزرار الأسفل بسطر واحد، ومسافة آمنة واحدة */
.sheet .foot{display:flex;gap:6px;padding:10px 12px calc(12px + env(safe-area-inset-bottom));border-top:1px solid var(--line);background:var(--sheet)}
.sheet .foot .btn{flex:1 1 0;min-width:0;padding:8px 4px;font-size:clamp(var(--fs-sm),3.6vw,var(--fs-md));white-space:normal;line-height:1.25;text-wrap:balance}
.sheet .foot .pos{align-self:center;flex:0 1 auto;color:var(--muted);font-size:var(--fs-sm);white-space:nowrap}
.field{display:flex;flex-direction:column;gap:4px;margin-bottom:10px}
.field label{font-weight:600;font-size:var(--fs-md)}
select,input[type=text],input[type=search],input[type=number],input[type=email],input[type=password],input:not([type]){font-family:inherit;font-size:var(--fs-base);padding:9px 12px;border:1px solid var(--line-ui);border-radius:var(--r-field);background:var(--field);color:var(--ink);min-height:44px;width:100%}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
/* أزرار ورقة الكلمة قبل .btn.sm عمداً: أزرارها «btn sm» فتغلبها حشوة .btn.sm وحجمه كما كان */
.wordacts{display:flex;gap:8px;margin:12px 0 0;flex-wrap:wrap}.wordacts .btn{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:10px 6px;font-size:var(--fs-md);white-space:normal;line-height:1.25;text-align:center}.wordacts .btn .i{width:var(--ic-sm);height:var(--ic-sm)}
.wordacts .btn.mushaf{flex:1 1 100%}
/* زرّ ذهبي ممتلئ واحد لكل ورقة (كـ.cta في الهبوط، بظلّه)؛ الشبح كحلي فاتح؛ الصغير والشبح بلا ظلّ */
.btn{border:0;border-radius:var(--r-pill);padding:10px 14px;font-weight:700;min-height:44px;background:var(--cta);color:var(--on-cta);font-family:inherit;box-shadow:var(--sh-cta)}
.btn.danger{background:var(--red);color:var(--on-red)}
.btn.ghost{background:var(--brand-soft);color:var(--brand);box-shadow:none}
.btn.ghost.danger{background:var(--red-soft);color:var(--red)}
.btn.sm{min-height:44px;padding:6px 12px;font-size:var(--fs-sm);box-shadow:none}
.btn:disabled{opacity:.45;cursor:default;box-shadow:none}
.btnrow{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0 12px}
.link{border:0;background:none;color:var(--brand);font:inherit;font-weight:700;padding:8px 10px;min-height:44px;border-radius:var(--r-field)}.link:active{background:var(--green-soft)}
.seg{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.seg button{border:1.5px solid var(--line-ui);background:var(--card);color:var(--ink);border-radius:var(--r-pill);padding:10px 16px;font-weight:600;min-height:44px}
.seg button.on{background:var(--sel);border-color:var(--gold-ink);font-weight:700}
.seg button:disabled{opacity:.45}
.seg.tabs{gap:6px;margin-bottom:10px}.seg.tabs button{flex:1;padding:10px 6px;border-radius:var(--r-field)}
.seg button b{font-family:"KFGQPC HAFS",serif;font-weight:400;font-size:var(--q-sm);line-height:var(--q-lh);margin-inline-end:6px}
/* المقطع المدمج (أزرار الطول في صفّ التنقل): كبسولة واحدة بفواصل، 32 بكسل ارتفاعاً وهدف لمس 44 بـ::before */
.seg.mini{margin:0;gap:0;flex-wrap:nowrap;border:1.5px solid var(--line-ui);border-radius:var(--r-pill);background:var(--card)}
.seg.mini button:first-child{border-start-start-radius:var(--r-pill);border-end-start-radius:var(--r-pill)}
.seg.mini button:last-child{border-start-end-radius:var(--r-pill);border-end-end-radius:var(--r-pill)}
.seg.mini button{border:0;border-radius:0;min-height:32px;padding:0 12px;font-size:var(--fs-sm);background:transparent;font-variant-numeric:tabular-nums;position:relative;font-family:inherit}
.seg.mini button+button{border-inline-start:1.5px solid var(--line-ui)}
.seg.mini button.on{background:var(--sel);color:var(--gold-ink);box-shadow:inset 0 0 0 1.5px var(--gold-ink)}
.seg.mini button::before{content:"";position:absolute;inset:-6px 0}
.sech{margin:12px 2px 6px;font-size:var(--fs-sm);font-weight:700;color:var(--muted);letter-spacing:.02em}
.list{display:flex;flex-direction:column;gap:6px}
.list .it{border:1px solid var(--line);border-radius:var(--r-field);padding:9px 12px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:8px;background:var(--card);box-shadow:var(--sh-1);font:inherit;color:inherit;width:100%;text-align:start;min-height:44px;transition:transform .08s,background .12s}
.list .it.on,.list .it[aria-current=true]{background:var(--sel);border-color:var(--gold-ink)}
.list .it .t{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-family:"KFGQPC HAFS",serif;font-size:var(--q-sm);line-height:var(--q-lh);flex:1}
.list .it small{color:var(--muted)}
.list .it mark{background:var(--gold-soft);color:inherit;border-radius:var(--r-inline)}
.list .it .ar{font-family:"Cairo",system-ui,sans-serif;direction:rtl;unicode-bidi:isolate}
.list .grp{font-size:var(--fs-xs);font-weight:700;color:var(--muted);padding:8px 6px 2px;letter-spacing:.02em}
.tiles{display:grid;gap:8px;margin-bottom:6px}
.tile{display:flex;align-items:center;gap:12px;padding:10px 14px;min-height:64px;border:1px solid var(--line);border-radius:var(--r-card);background:var(--card);box-shadow:var(--sh-1);text-align:start;font:inherit;color:inherit;cursor:pointer;width:100%;transition:transform .08s,background .12s}
.tile .i{width:var(--ic-md);height:var(--ic-md);color:var(--brand);flex:none}
.tile b{display:block;font-size:var(--fs-lg)}.tile small{color:var(--muted);display:-webkit-box;margin-top:2px;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tile .chev{margin-inline-start:auto;color:var(--muted);width:var(--ic-sm);height:var(--ic-sm)}
[dir=ltr] .tile .chev{transform:scaleX(-1)}
/* الإعدادات: أيقونات بهوية التطبيق وبلاطات أكثف */
.tile .i:not(.chev){width:40px;height:40px;padding:9px;border-radius:var(--r-field);background:var(--gold-soft);color:var(--gold-ink);box-sizing:border-box}
/* استجابة الضغط على البلاطات والصفوف والرقائق وأزرار الشريط السفلي وكلمة البطاقة (المؤشّر الحقيقي وحده يرى hover) */
@media (hover:hover){.tile:hover,.list .it:not(.on):not([aria-current=true]):hover{background:var(--green-soft)}}
.tile:active,.list .it:active{background:var(--green-soft);transform:scale(.985)}
.chip{padding:3px 9px;border-radius:var(--r-pill);font-weight:700;background:var(--line);white-space:nowrap;border:0;font-family:inherit;font-size:inherit;color:var(--ink)}
.chip.reading{background:color-mix(in srgb,var(--g-reading) var(--tag-mix),transparent);color:var(--g-reading)}.chip.tj{background:var(--amber-soft);color:var(--amber)}.chip.ok{background:var(--stop-soft);color:var(--stop)}.chip.gold{background:var(--gold-soft);color:var(--gold-ink)}
.chip.more{cursor:pointer}
button.chip{transition:transform .08s,background .12s}
button.chip:active{background:var(--green-soft);transform:scale(.985)}
.filters{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 10px}.filters .chip{min-height:40px;padding:8px 14px;font-size:var(--fs-sm)}.filters .chip.on{outline:2px solid var(--gold)}
.native-confirm{background:var(--gold-soft);border:1px solid var(--gold);border-radius:var(--r-card);padding:10px 14px;margin:4px 0 12px}.native-confirm b{display:block;font-weight:600;font-size:var(--fs-md);margin-bottom:8px}
/* ============================== 7) ورقة الانتقال والبحث ============================== */
#navSheet{max-height:96vh;max-height:min(96dvh,var(--vvh,100dvh));height:min(96dvh,var(--vvh,100dvh))}
.cur{display:flex;justify-content:space-between;align-items:center;gap:8px;min-height:44px;margin:0 0 6px;font-size:var(--fs-base)}.cur b{font-size:var(--fs-lg)}
/* اختيار طول المقطع (تسميته كانت نمطاً مضمّناً في index.html؛ صارت من سلّم الخط) */
#lblLen{font-weight:600;font-size:var(--fs-md);display:block;margin-bottom:6px}
#lenSeg{align-items:center}
/* ============================== 8) الإعدادات والحساب ============================== */
.pref{display:flex;align-items:center;gap:10px;min-height:52px;padding:4px 14px;border:1px solid var(--line);border-radius:var(--r-card);background:var(--card);margin-bottom:10px}
.pref>.lbl{flex:1;font-weight:600;font-size:var(--fs-base)}
.pref .seg{margin:0;gap:4px;flex-wrap:nowrap}.pref .seg button{padding:0 12px;min-height:44px;font-size:var(--fs-sm)}
.stepper{display:flex;align-items:center;border:1.5px solid var(--line-ui);border-radius:var(--r-field);overflow:hidden}
.stepper button{width:44px;height:44px;border:0;background:transparent;color:var(--brand);font-weight:700;font-size:var(--fs-base);font-family:inherit}
.stepper button:disabled{opacity:.35}.stepper button:active{background:var(--green-soft)}
/* القيمة زرّ: نقرة تعيد الحجم الافتراضي (100%) */
.stepper .val{min-width:52px;width:auto;height:44px;padding:0 8px;border:0;border-inline:1.5px solid var(--line-ui);background:transparent;color:var(--ink);font-family:inherit;text-align:center;font-variant-numeric:tabular-nums;font-size:var(--fs-sm);font-weight:600;line-height:44px;cursor:pointer}
.derived{margin:2px 2px 8px;font-size:var(--fs-md);font-weight:600;color:var(--ink)}
/* المدود صفّاً واحداً في ورقة الإعدادات (البند 16): التسمية ثم مختارا المنفصل والعارض، وتحتهما سطر المتصل المشتقّ والتلميح */
.pref.madd{flex-wrap:wrap;padding:8px 14px 10px;row-gap:4px}
.pref.madd .mdd{display:flex;gap:8px;flex:0 0 auto}
.pref.madd .mdd label{display:flex;flex-direction:column;gap:2px;font-size:var(--fs-xs);font-weight:600;color:var(--muted)}
.pref.madd .mdd select{width:auto;min-width:72px;padding-inline:10px}
.pref.madd .derived{flex:1 1 100%;margin:2px 0 0}.pref.madd .hint{flex:1 1 100%;margin:0}
/* روابط الذيل بدل بلاطات: عن التطبيق · الخصوصية · تثبيت التطبيق · تسجيل الخروج؛ الفاصلة قبل كل ظاهر سبقه ظاهر */
.menulinks{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;margin:14px 0 4px}
.menulinks .lnk{border:0;background:none;color:var(--brand);font:inherit;font-size:var(--fs-md);font-weight:600;padding:8px 6px;min-height:44px;border-radius:var(--r-field);cursor:pointer;text-decoration:none;display:inline-flex;align-items:center}
.menulinks .lnk:not([hidden])~.lnk:not([hidden])::before{content:"·" / "";color:var(--muted);margin-inline-end:12px}
.menulinks .lnk:active{background:var(--green-soft)}
/* الاسم يُعدَّل في حقل داخل الصفّ نفسه (بدل prompt)؛ والخطأ تحت الحقل */
.pref.namebox{flex-direction:column;align-items:stretch;padding:10px 14px}.pref.namebox .field{margin-bottom:8px}
.ferr{color:var(--red);font-size:var(--fs-sm);font-weight:600;margin:0 0 8px}
/* كلمة السر: يفتح حقلين حقيقيين (current-password / new-password) وزرّ حفظ */
.pwbox{margin:12px 0 0}.pwbox>summary{list-style:none;cursor:pointer;color:var(--brand);font-weight:700;min-height:44px;display:flex;align-items:center;padding:0 4px;border-radius:var(--r-field)}
.pwbox>summary::-webkit-details-marker{display:none}.pwbox>summary:active{background:var(--green-soft)}.pwbox form{margin-top:6px}
.quota{margin:6px 0 4px}.qbar{height:8px;border-radius:6px;background:var(--line);overflow:hidden}.qbar i{display:block;height:100%;background:var(--stop);width:0;transition:width .3s}.qbar i.low{background:var(--amber)}.qbar i.out{background:var(--red)}
.quota small{display:block;margin-top:6px;color:var(--muted)}
.acct-mail{font-family:system-ui,sans-serif;direction:ltr;unicode-bidi:isolate;display:block;font-weight:400;font-size:var(--fs-md);color:var(--muted)}
.consent{display:flex;align-items:flex-start;gap:8px;font-size:var(--fs-md);margin:0 0 12px;min-height:44px}.consent input{width:20px;height:20px;margin-top:3px;flex:none}.consent a{color:var(--green);font-weight:600}
#packList button small{display:block;color:var(--muted);font-weight:400;font-size:var(--fs-sm)}
.btn.nativepay{display:flex;align-items:center;justify-content:center;width:100%;box-sizing:border-box;text-decoration:none;margin:6px 0 4px}
.about-logo{display:block;width:96px;margin:4px auto 10px}
.about p{font-size:var(--fs-md)}.about h4{margin:12px 0 4px;font-size:var(--fs-base)}.about ul{padding:0;margin:0;list-style:none}.about li{font-size:var(--fs-md);min-height:44px;display:flex;align-items:center;border-bottom:1px solid var(--line)}.about a{color:var(--green);font-weight:600;text-decoration:none}.about li small{color:var(--muted);margin-inline-start:6px}
/* ============================== 9) سجل المحاولات ============================== */
.hstats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:6px 0 10px}.hstats div{background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);padding:8px 6px;text-align:center;box-shadow:var(--sh-1)}.hstats b{display:block;font-size:var(--fs-xl)}.hstats small{color:var(--muted);font-size:max(var(--fs-xs),12px)}
/* الورقة بطول ورقة الانتقال: قائمة المحاولات — سبب الفتح — لا تبقى تحت الطيّ */
#historySheet{max-height:96vh;max-height:min(96dvh,var(--vvh,100dvh));height:min(96dvh,var(--vvh,100dvh))}
/* الرسم يُقرأ (role=img بوصف) ويُنقر: عمود ← التاريخ والنتيجة في