/* ══ الثيم الافتراضي: أبيض بهويةٍ زرقاء — طلب عليّ، ١٢ أكتوبر ٢٠٢٦ ══
   كان البيج والبنّي، وبقيا اختياراً: «بيج فاتح» و«بنّي داكن» في الخلفية، و«بنّي» في لون الهوية */
:root{
  --bg:#f4f5f7; --card:#ffffff; --card2:#f1f3f6; --line:#e1e4ea; --txt:#1f2430; --muted:#5f6878;
  --brand:#3550c0; --brand2:#2b42a3; --brandT:#3550c0; --brandL:#7d90dd; --ok:#457449; --warn:#915e16; --bad:#c0392b; --wa:#25d366; --onOk:#fff; --onWarn:#fff; --onBad:#fff; --starOff:#9a876c; --starOn:#b67800;
  color-scheme:light;
  --sh:0 2px 10px rgba(25,35,60,.08); --sh2:0 8px 30px rgba(25,35,60,.16);
}
/* ألوان الدلالة مُعايَرة كألوان الهوية: كلٌّ ≥٤٫٦:١ نصّاً على أضعف خلفية
   يقع عليها. و--onOk/--onWarn حبرُ ما يُكتب فوقها حين تُستعمل خلفيةً —
   أبيضُ الفاتح لا يصلح على أخضر الداكن الفاتح. أمّا --wa فأخضر واتساب
   المسجَّل: لا يُغيَّر لأن التعرّف عليه هو فائدته، وعُولج بحبرٍ داكن فوقه. */
/* ══ الوضع الداكن: ثلاث حالات لا حالتان ══
   «تلقائي» يتبع الجهاز، و«فاتح»/«داكن» اختيارٌ صريح يغلب الجهاز. ولذلك
   ثلاث كتل: الافتراضية أعلاه، وكتلة الجهاز محروسة بـ:not([data-theme="light"])
   لئلّا يُجبَر من اختار الفاتح على الداكن ليلاً، وكتلة صريحة للداكن. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){ --bg:#15171b; --card:#1f2228; --card2:#272b32; --line:#343944; --txt:#eceef2; --muted:#9aa1ad;
         --brandT:#8a9cea; --ok:#6aa96e; --warn:#e0a34a; --bad:#e27e72; --onOk:#2a1f0a; --onWarn:#2a1f0a; --onBad:#2a1f0a; --starOff:#8a7963; --starOn:#f6a609; color-scheme:dark;
         --sh:0 2px 10px rgba(0,0,0,.35); --sh2:0 8px 30px rgba(0,0,0,.55); }
}
:root[data-theme="dark"]{ --bg:#15171b; --card:#1f2228; --card2:#272b32; --line:#343944; --txt:#eceef2; --muted:#9aa1ad;
       --brandT:#8a9cea; --ok:#6aa96e; --warn:#e0a34a; --bad:#e27e72; --onOk:#2a1f0a; --onWarn:#2a1f0a; --onBad:#2a1f0a; --starOff:#8a7963; --starOn:#f6a609; color-scheme:dark;
       --sh:0 2px 10px rgba(0,0,0,.35); --sh2:0 8px 30px rgba(0,0,0,.55); }

/* ══ الخلفيات الست لكل جهاز (BG_THEMES في app.js) ══ تُطبَّق حين يطابق وضعُها data-theme،
   وسكربت رأس index.html يضع data-bg قبل أول رسم فلا يومض الافتراضي. (٠،٣،٠) تغلب كتل الداكن أعلاه */
:root[data-theme="dark"][data-bg="brown"]  { --bg:#221d16; --card:#2e2820; --card2:#373026; --line:#4a4034; --txt:#f2ead9; --muted:#a99a83; }
:root[data-theme="dark"][data-bg="navy"]   { --bg:#0f1626; --card:#172036; --card2:#1e2942; --line:#2b3956; --txt:#e8edf7; --muted:#93a1bd; }
:root[data-theme="dark"][data-bg="forest"] { --bg:#111a16; --card:#19241f; --card2:#203029; --line:#2d4037; --txt:#e7f0eb; --muted:#93ab9f; }
:root[data-theme="light"][data-bg="beige"] { --bg:#f3ece0; --card:#fffdf8; --card2:#f8f2e7; --line:#e3d8c4; --txt:#3a3025; --muted:#746856; }

/* ══ لون الأكاديمية ══
   ثلاثة متغيّرات لا اثنان: --brand و--brand2 سطحُ الهوية (الرأس والأزرار)
   يحمل نصّاً أبيض، فوجب أن يكون غامقاً في النمطين كليهما ليبلغ النصّ
   الأبيض ٤٫٥:١ (WCAG AA). و--brandT لونُ الهوية نصّاً على البطاقات، وهذا
   وحده يفتحُ في الداكن وإلّا غرق في الخلفية. الدرجات محسوبةٌ لا مُقدَّرة:
   أبيضُ الرأس على السطح ≥٤٫٦:١، و--brandT على **أضعف** خلفيةٍ يقع عليها
   (صفحة الفاتح #f3ece0 وبطاقة الداكن الثانية #373026) ≥٤٫٦:١ — قياساً في
   المتصفّح لا تقديراً. و--brandL درجةٌ فاتحةٌ لشاشة الدخول وحدها. */
:root[data-accent="brown"] { --brand:#9d693d; --brand2:#7c5230; --brandT:#8f5f37; --brandL:#ca9d77; }
:root[data-accent="blue"]  { --brand:#3a7c9e; --brand2:#2a5d78; --brandT:#34708e; --brandL:#75afcc; }
:root[data-accent="green"] { --brand:#448055; --brand2:#356a44; --brandT:#3e754e; --brandL:#84be94; }
:root[data-accent="red"]   { --brand:#b5504a; --brand2:#8c3a35; --brandT:#ac4c46; --brandL:#c87e79; }
:root[data-accent="purple"]{ --brand:#7c6098; --brand2:#5c4673; --brandT:#7a5e95; --brandL:#a18bb6; }
:root[data-accent="slate"] { --brand:#5d6b78; --brand2:#414d57; --brandT:#5d6b78; --brandL:#95a1ad; }
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"])                     { --brandT:#8a9cea }
  :root:not([data-theme="light"])[data-accent="brown"] { --brandT:#c3905e }
  :root:not([data-theme="light"])[data-accent="blue"]  { --brandT:#5fa3c6 }
  :root:not([data-theme="light"])[data-accent="green"] { --brandT:#6cae7d }
  :root:not([data-theme="light"])[data-accent="red"]   { --brandT:#d9837e }
  :root:not([data-theme="light"])[data-accent="purple"]{ --brandT:#a990c3 }
  :root:not([data-theme="light"])[data-accent="slate"] { --brandT:#8d9ca9 }
}
:root[data-theme="dark"]                     { --brandT:#8a9cea }
:root[data-theme="dark"][data-accent="brown"] { --brandT:#c3905e }
:root[data-theme="dark"][data-accent="blue"]  { --brandT:#5fa3c6 }
:root[data-theme="dark"][data-accent="green"] { --brandT:#6cae7d }
:root[data-theme="dark"][data-accent="red"]   { --brandT:#d9837e }
:root[data-theme="dark"][data-accent="purple"]{ --brandT:#a990c3 }
:root[data-theme="dark"][data-accent="slate"] { --brandT:#8d9ca9 }

/* داخل التطبيق الأصلي لا طباعة (قيد iOS): ما لا بديل له هناك يُخفى */
html.is-native .web-only{display:none !important}
/* أزرار اختيار المظهر */
.thmRow{display:flex;gap:8px;flex-wrap:wrap}
.thmRow button{flex:1;min-width:90px}
.thmRow button.on{background:var(--brand);color:#fff;border-color:var(--brandT)}
.accRow{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.accDot{width:38px;height:38px;border-radius:50%;border:2px solid var(--line);padding:0;cursor:pointer}
.accDot.on{border-color:var(--txt);box-shadow:0 0 0 3px var(--card2)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
/* الصفحة لا تُسحب عرضاً بحال — حارسٌ أخير مهما تجاوز عنصرٌ حدّه */
html,body{overscroll-behavior-y:contain;overflow-x:hidden;max-width:100%}
body{margin:0;background:var(--bg);color:var(--txt);font-size:15px;line-height:1.5;
 font-family:-apple-system,"SF Arabic","Segoe UI",Tahoma,Arial,sans-serif;
 padding-bottom:calc(74px + env(safe-area-inset-bottom))}
body.locked{padding:0;overflow:hidden}

header{background:linear-gradient(135deg,var(--brand),var(--brand2));color:#fff;
 padding:calc(11px + env(safe-area-inset-top)) 14px 11px;display:flex;align-items:center;gap:9px;position:sticky;top:0;z-index:30}
header h1{font-size:16px;margin:0;font-weight:800;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
header .who{font-size:11px;font-weight:600}  /* لا opacity: كانت تهبط بالتبايُن إلى ٢٫٣:١ */
.iconbtn{background:rgba(255,255,255,.18);color:#fff;border:1px solid rgba(255,255,255,.3);
 border-radius:10px;padding:7px 10px;font-size:15px;line-height:1}
.wrap{max-width:1050px;margin:0 auto;padding:14px}
section{display:none} section.on{display:block}

button{font-family:inherit;font-size:14px;cursor:pointer;border-radius:10px;border:1px solid transparent;padding:10px 14px;
 display:inline-flex;align-items:center;justify-content:center;gap:6px}
button:active{transform:scale(.97)}
button:disabled{opacity:.5;cursor:not-allowed}
.btn{background:var(--brand);color:#fff}
.btn-l{background:var(--card);color:var(--txt);border-color:var(--line)}
.btn-wa{background:var(--wa);color:#0a3d1f}
.btn-d{background:var(--card);color:var(--bad);border-color:var(--line)}
.btn-ok{background:var(--ok);color:var(--onOk)}
.btn-sm{padding:7px 11px;font-size:13px;border-radius:9px}
.btn-blk{width:100%;padding:13px;font-size:16px;font-weight:700}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:11px}
.grow{flex:1;min-width:150px}
input,select,textarea{font-family:inherit;font-size:16px;padding:11px 12px;border:1px solid var(--line);
 border-radius:10px;background:var(--card);color:var(--txt);width:100%}
input:focus,select:focus,textarea:focus{outline:2px solid var(--brandT);outline-offset:1px;border-color:var(--brandT)}
select{appearance:none;padding-left:30px;
 background-image:linear-gradient(45deg,transparent 49%,var(--muted) 50%),linear-gradient(-45deg,transparent 49%,var(--muted) 50%);
 background-position:13px 20px,18px 20px;background-size:5px 5px;background-repeat:no-repeat}
.w-auto{width:auto;min-width:125px}
h2{font-size:16px;margin:20px 0 10px;display:flex;align-items:center;gap:7px}
h2:first-child{margin-top:0}
.mini{font-size:12.5px;color:var(--muted)}

.chips{display:grid;grid-template-columns:repeat(auto-fit,minmax(102px,1fr));gap:9px;margin-bottom:13px}
.chip{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:11px;box-shadow:var(--sh);text-align:center}
.chip .n{font-size:21px;font-weight:800;line-height:1.25}
.chip .t{font-size:11.5px;color:var(--muted)}
.card{background:var(--card);border:1px solid var(--line);border-radius:13px;padding:13px;box-shadow:var(--sh);margin-bottom:10px}
.card.pad0{padding:0;overflow:hidden}
.top{display:flex;align-items:flex-start;gap:9px}
.nm{font-weight:800;font-size:16px;flex:1}
.meta{color:var(--muted);font-size:13px;margin:4px 0 7px}
.ph{width:46px;height:46px;border-radius:12px;object-fit:cover;background:var(--card2);flex:none;
 display:flex;align-items:center;justify-content:center;font-size:19px;color:var(--muted);border:1px solid var(--line)}
.tag{display:inline-block;padding:3px 10px;border-radius:20px;font-size:11.5px;font-weight:800;white-space:nowrap}
.t-ok{background:#e4efe0;color:#3d6b41} .t-warn{background:#faf0dc;color:#95611a}
.t-bad{background:#f9e6e3;color:#a5342a} .t-info{background:#e6ebf8;color:#2f47a8}
/* ثلاث حالات لا حالتان — بلا الحارس كان مَن يختار «فاتح» على جهازٍ داكن
   يرى هذه وحدها سوداء وسط صفحةٍ بيضاء، ومَن يختار «داكن» على جهازٍ فاتح
   لا يراها داكنةً أصلاً */
@media (prefers-color-scheme:dark){
 :root:not([data-theme="light"]) .t-ok{background:#283a26;color:#9ccf9f}
 :root:not([data-theme="light"]) .t-warn{background:#3d3116;color:#e8bd75}
 :root:not([data-theme="light"]) .t-bad{background:#3d211d;color:#e8a49b}
 :root:not([data-theme="light"]) .t-info{background:#222a40;color:#a9b8ec}}
:root[data-theme="dark"] .t-ok{background:#283a26;color:#9ccf9f}
:root[data-theme="dark"] .t-warn{background:#3d3116;color:#e8bd75}
:root[data-theme="dark"] .t-bad{background:#3d211d;color:#e8a49b}
:root[data-theme="dark"] .t-info{background:#222a40;color:#a9b8ec}
.bar{height:7px;background:var(--card2);border:1px solid var(--line);border-radius:20px;overflow:hidden;margin:7px 0}
.bar i{display:block;height:100%;border-radius:20px;transition:width .4s}
.acts{display:flex;gap:6px;flex-wrap:wrap;margin-top:9px}
.empty{text-align:center;color:var(--muted);padding:32px 12px;background:var(--card);border:1px dashed var(--line);border-radius:13px}
.alert{border-radius:12px;padding:11px 13px;margin-bottom:10px;font-size:14px;font-weight:600;display:flex;gap:9px;align-items:center}
.a-warn{background:#faf0dc;color:#8a5a12;border:1px solid #ecd6a8}
.a-bad{background:#f9e6e3;color:#963026;border:1px solid #e8bdb6}
.a-info{background:#eaeef9;color:#2c3f8f;border:1px solid #c9d3ef}
.a-ok{background:#e8f1e6;color:#2f5a33;border:1px solid #c4dbc0}
/* ثلاث حالات لا حالتان — بلا الحارس كان مَن يختار «فاتح» على جهازٍ داكن
   يرى هذه وحدها سوداء وسط صفحةٍ بيضاء، ومَن يختار «داكن» على جهازٍ فاتح
   لا يراها داكنةً أصلاً */
@media (prefers-color-scheme:dark){
 :root:not([data-theme="light"]) .a-warn{background:#382d13;color:#e8bd75;border-color:#5c4a22}
 :root:not([data-theme="light"]) .a-bad{background:#3a211c;color:#e8a49b;border-color:#5c322a}
 :root:not([data-theme="light"]) .a-info{background:#1e2538;color:#a9b8ec;border-color:#33405f}
 :root:not([data-theme="light"]) .a-ok{background:#1d2c1e;color:#9fd0a2;border-color:#33503a}}
:root[data-theme="dark"] .a-warn{background:#382d13;color:#e8bd75;border-color:#5c4a22}
:root[data-theme="dark"] .a-bad{background:#3a211c;color:#e8a49b;border-color:#5c322a}
:root[data-theme="dark"] .a-info{background:#1e2538;color:#a9b8ec;border-color:#33405f}
:root[data-theme="dark"] .a-ok{background:#1d2c1e;color:#9fd0a2;border-color:#33503a}

.nav{position:fixed;bottom:0;left:0;right:0;background:var(--card);border-top:1px solid var(--line);
 display:flex;z-index:40;padding-bottom:env(safe-area-inset-bottom)}
.nav button{flex:1;background:none;border:none;border-radius:0;padding:9px 2px 8px;color:var(--muted);
 font-size:10.5px;font-weight:700;display:flex;flex-direction:column;align-items:center;gap:3px}
.nav button i{font-style:normal;font-size:19px;line-height:1}
.nav button.on{color:var(--brandT)}

/* ══ النافذة تنزلق طولاً لا عرضاً ══
   كانت الطبقة والنافذة كلتاهما overflow:auto — أي بمحورين. ولا يظهر أثر
   ذلك في قياسٍ ساكن (لا تجاوز أفقي أصلاً)، لكنه يظهر في اليد: السحب
   السريع للأسفل على الجوال يميل قليلاً، فيجد محوراً أفقياً مفتوحاً
   فينزلق فيه، ثم يتسلسل إلى الصفحة خلف النافذة فتتحرك معه.
   شكا منه عليّ في ١ سبتمبر ٢٠٢٦: «لو نزّلت بسرعة تتحرك معاي».
   فالمحور الأفقي يُغلق، والتسلسل يُمنع. */
.ovl{position:fixed;inset:0;background:rgba(10,18,35,.55);display:none;align-items:flex-end;justify-content:center;z-index:60;
 overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain}
.ovl.on{display:flex}
.modal{background:var(--card);border-radius:18px 18px 0 0;width:100%;max-width:580px;padding:18px;
 padding-bottom:calc(18px + env(safe-area-inset-bottom));max-height:93vh;
 overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;box-shadow:var(--sh2)}
.modal h3{margin:0 0 14px;font-size:17px}
.frm{display:grid;grid-template-columns:1fr 1fr;gap:11px}
/* عنصر الشبكة لا ينكمش دون عرض محتواه ما لم يُقَل له ذلك — وحقلٌ واحد
   بقيمةٍ طويلة يوسّع العمود فيتجاوز الصفّ كلّه. min-width:0 يمنع ذلك. */
.f{display:flex;flex-direction:column;gap:5px;min-width:0} .f.full{grid-column:1/-1}
.frm > *{min-width:0}
.f input,.f select,.f textarea{max-width:100%}
label{font-size:13px;color:var(--muted);font-weight:700}
.mact{display:flex;gap:8px;margin-top:16px} .mact .btn,.mact .btn-ok{flex:1}
/* أزرار النافذة ثابتةٌ في أسفلها: في «ما الجديد» الطويلة لم يجد عليّ ما يُخرجه حتى نزل
   إلى آخرها (٦ أكتوبر ٢٠٢٦). والهامش السالب يلصقها بحافّة النافذة فوق حشوتها السفلية */
/* والحقل المُركَّز لا يختبئ خلف الشريط: التمرير إليه يترك له ارتفاع الشريط */
.modal{scroll-padding-bottom:calc(76px + env(safe-area-inset-bottom))}
.modal > .mact{position:sticky;bottom:calc(-18px - env(safe-area-inset-bottom));z-index:3;
 background:var(--card);border-top:1px solid var(--line);
 margin:16px -18px calc(-18px - env(safe-area-inset-bottom));
 padding:10px 18px calc(12px + env(safe-area-inset-bottom))}

.arow{display:flex;align-items:center;gap:8px;padding:10px 4px;border-bottom:1px solid var(--line)}
.arow:last-child{border-bottom:none}
.pill{padding:9px 13px;border-radius:10px;border:1px solid var(--line);background:var(--card);color:var(--txt);font-weight:700;font-size:13px}
.pill.p-on{background:var(--ok);color:var(--onOk);border-color:var(--ok)}
.pill.a-on{background:var(--bad);color:var(--onBad);border-color:var(--bad)}
.pill.l-on{background:var(--warn);color:var(--onWarn);border-color:var(--warn)}
.line{display:flex;gap:8px;align-items:center;padding:10px 4px;border-bottom:1px solid var(--line);font-size:14px}
.line:last-child{border-bottom:none}
.money{font-weight:800;color:var(--ok)}
.money.neg{color:var(--bad)}
table{width:100%;border-collapse:collapse;font-size:13px}
th,td{padding:8px 6px;text-align:right;border-bottom:1px solid var(--line)}
th{background:var(--card2);color:var(--muted);font-size:12px}
.tw{overflow-x:auto;background:var(--card);border:1px solid var(--line);border-radius:13px;padding:10px}

/* شاشة الدخول */
/* align-items:center مع overflow يقصّ أعلى النموذج ولا يمكن التمرير إليه —
   لذلك التوسيط بـ margin:auto على الصندوق نفسه */
.lock{position:fixed;inset:0;z-index:100;
 /* تتبع لون الأكاديمية لمن سبق أن دخل على هذا الجهاز. و--brandL درجةٌ
    مكتوبةٌ لا محسوبةٌ بـcolor-mix: تصريحٌ فيه var() يسقط إلى «الابتدائية»
    لا إلى التصريح السابق، فيصير الحاجز شفّافاً ويظهر ما خلفه. */
 background:linear-gradient(160deg,var(--brandL),var(--brand2));
 display:flex;align-items:flex-start;justify-content:center;overflow:auto;
 padding:max(22px,env(safe-area-inset-top)) 22px max(22px,env(safe-area-inset-bottom))}
.lockbox{background:var(--card);border-radius:20px;padding:24px;width:100%;max-width:400px;box-shadow:var(--sh2);margin:auto}
.lockbox h2{justify-content:center;font-size:19px;margin:0 0 4px}
.lockbox .sub{text-align:center;color:var(--muted);font-size:13px;margin-bottom:18px}
.logo{width:66px;height:66px;margin:0 auto 12px;display:block}

/* التقويم/الرسوم */
.chart{display:flex;align-items:flex-end;gap:7px;height:130px;padding:6px 2px}
.chart .b{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:5px;height:100%}
.chart .b i{width:100%;background:linear-gradient(180deg,var(--brand),var(--brand2));border-radius:6px 6px 0 0;min-height:3px;display:block}
.chart .b span{font-size:10.5px;color:var(--muted);white-space:nowrap}
.qrbox{background:#fff;padding:8px;border-radius:10px;display:inline-block;line-height:0}

/* التقييم والتطوّر */
.skillrow{display:flex;align-items:center;gap:9px;padding:8px 2px;border-bottom:1px solid var(--line)}
.skillrow:last-child{border-bottom:none}
.skillrow .sn{flex:1;font-weight:700;font-size:14px}
/* النجمة الفارغة بمتغيّرٍ لا بمحدِّدٍ محروس: الحارس يرفع الخصوصية إلى
   (0,3,1) فيغلب .stars span.on عند (0,2,1) فتتساوى المملوءة والفارغة
   ولا يُعرف التقييم. المتغيّر لا يدخل هذه الحرب أصلاً. */
.stars span{font-size:25px;line-height:1;color:var(--starOff);cursor:pointer;padding:0 1px;user-select:none}
.stars span.on{color:var(--starOn)}   /* ≥٣:١ على البطاقة في الوضعين (مراجعة ٣٠ سبتمبر) */
.lvl{display:inline-block;padding:3px 11px;border-radius:20px;font-size:12px;font-weight:800}
.l-1{background:#eceef2;color:#5a6372} .l-2{background:#e6ebf8;color:#2f47a8}
.l-3{background:#e4efe0;color:#3d6b41} .l-4{background:#f9edd0;color:#8a6212}
/* ثلاث حالات لا حالتان — بلا الحارس كان مَن يختار «فاتح» على جهازٍ داكن
   يرى هذه وحدها سوداء وسط صفحةٍ بيضاء، ومَن يختار «داكن» على جهازٍ فاتح
   لا يراها داكنةً أصلاً */
@media (prefers-color-scheme:dark){
 :root:not([data-theme="light"]) .l-1{background:#2a2e36;color:#a3a9b4}
 :root:not([data-theme="light"]) .l-2{background:#222a40;color:#a9b8ec}
 :root:not([data-theme="light"]) .l-3{background:#283a26;color:#9ccf9f}
 :root:not([data-theme="light"]) .l-4{background:#3d3416;color:#e8cd7a}}
:root[data-theme="dark"] .l-1{background:#2a2e36;color:#a3a9b4}
:root[data-theme="dark"] .l-2{background:#222a40;color:#a9b8ec}
:root[data-theme="dark"] .l-3{background:#283a26;color:#9ccf9f}
:root[data-theme="dark"] .l-4{background:#3d3416;color:#e8cd7a}
.sbar{display:flex;align-items:center;gap:8px;margin:5px 0;font-size:12.5px}
.sbar .lb{width:78px;color:var(--muted);flex:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sbar .tr{flex:1;height:9px;background:var(--card2);border:1px solid var(--line);border-radius:20px;overflow:hidden}
.sbar .tr i{display:block;height:100%;background:linear-gradient(90deg,var(--brand2),var(--brand));border-radius:20px}
.sbar .vl{width:52px;text-align:left;font-weight:700;flex:none}
.rank{width:27px;height:27px;border-radius:50%;background:var(--card2);border:1px solid var(--line);
 display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;flex:none}
/* أبيضُ على ذهبيٍّ وفضيٍّ فاتحين كان تباينه ٢٫٤ — تُقرأ المرتبة بصعوبة (جولة العميل ١). أغمق بالطابع نفسه، ≥٤٫٥:١ */
.rank.r1{background:#8a6514;color:#fff;border-color:#8a6514}
.rank.r2{background:#5f6b80;color:#fff;border-color:#5f6b80}
.rank.r3{background:#8a5a2e;color:#fff;border-color:#8a5a2e}
.up{color:var(--ok);font-weight:800} .down{color:var(--bad);font-weight:800}

.toast{position:fixed;bottom:calc(84px + env(safe-area-inset-bottom));right:50%;transform:translateX(50%);
 background:#4a3a28;color:#fff;padding:11px 18px;border-radius:12px;font-size:14px;font-weight:600;
 z-index:200;box-shadow:var(--sh2);max-width:88vw;text-align:center;animation:up .25s}
.toast.ok{background:var(--ok)} .toast.err{background:var(--bad)}
@keyframes up{from{opacity:0;transform:translate(50%,14px)}to{opacity:1;transform:translate(50%,0)}}

#video{width:100%;border-radius:12px;background:#000;max-height:60vh;object-fit:cover}

@media(min-width:820px){
  body{padding-bottom:20px}
  .nav{position:static;border:none;background:none;max-width:1050px;margin:14px auto -4px;padding:0 14px;gap:8px}
  .nav button{flex:0 1 auto;flex-direction:row;font-size:14px;padding:10px 15px;border:1px solid var(--line);
   background:var(--card);border-radius:11px}
  .nav button.on{background:var(--brand);color:#fff;border-color:var(--brandT)}
  .ovl{align-items:center;padding:20px} .modal{border-radius:16px}
}
@media(max-width:520px){.frm{grid-template-columns:1fr}}

/* الطباعة */
@media print{
  /* ══ الورق أبيضٌ دائماً ══
     من يطبع وهو في الوضع الداكن كان يُخرج نصّاً فاتحاً على ورقٍ أبيض.
     الطباعة تُثبَّت على الفاتح، و--brandT يرجع إلى سطح الهوية الغامق. */
  /* !important لا زينة: خصوصية :root (0,1,0) أضعف من
     :root[data-theme="dark"] و:root:not([data-theme="light"]) (0,2,0)،
     فكانت كتلة الطباعة بلا أثرٍ إطلاقاً على من يطبع في الوضع الداكن.
     و--card2 تبقى مظلّلةً قليلاً لأن رؤوس جداول الكشوف تعتمد تظليلها. */
  :root{ --bg:#fff !important; --card:#fff !important; --card2:#f1f3f6 !important;
         --line:#ddd !important; --txt:#111 !important; --muted:#555 !important;
         --brandT:var(--brand) !important; --sh:none !important; --sh2:none !important; }
  /* ══ الطباعة تُخرج #printArea وحده ══
     كانت القواعد تُخفي الشريط والأزرار فقط، فتُطبع الشاشة كلّها معها:
     قائمة اللاعبين والنوافذ المفتوحة… خمس صفحات والشهادة في آخرها.
     الآن: أخفِ كل شيء، ثم أعِد إظهار #printArea وسلسلة آبائه فقط. */
  body > *{ display:none !important; }
  main.wrap{ display:block !important; padding:0 !important; margin:0 !important;
             max-width:none !important; }
  main.wrap > *{ display:none !important; }
  #printArea, #printArea *{ display:revert !important; }
  #printArea{ display:block !important; }
  #printArea img{ display:inline-block !important; }
  #printArea table{ display:table !important; }
  #printArea tr{ display:table-row !important; }
  #printArea td, #printArea th{ display:table-cell !important; }

  header,.nav,.row,.acts,.chips,.alert,.toast,.no-print{display:none!important}
  body{padding:0;background:#fff;color:#000}
  .card,.tw{box-shadow:none;border-color:#ccc;break-inside:avoid}
  .print-only{display:block!important}
  @page{ margin:10mm; }
}
.print-only{display:none}
.qrcard{display:inline-block;width:31%;margin:1%;border:1px dashed #999;border-radius:10px;padding:8px;text-align:center;break-inside:avoid;vertical-align:top}
.qrcard b{display:block;font-size:13px;margin-top:5px}
.logoImg{max-width:120px;max-height:120px;object-fit:contain}
.qrcard small{color:#666;font-size:11px}

/* ══════════ الصفحة التعريفية ══════════ */
#landing{position:fixed;inset:0;z-index:110;overflow:auto;background:var(--bg);
 -webkit-overflow-scrolling:touch}
#landing section{display:block}   /* يتجاوز القاعدة العامة section{display:none} */
.lp-hero{background:linear-gradient(160deg,var(--brand),var(--brand2));color:#fff;text-align:center;
 padding:max(38px,env(safe-area-inset-top)) 20px 40px}
.lp-logo{width:74px;height:74px;border-radius:19px;margin:0 auto 14px;display:block;box-shadow:var(--sh2)}
.lp-hero h1{font-size:27px;margin:0 0 10px;line-height:1.35;justify-content:center}
.lp-hero h2{font-size:21px;margin:0 0 16px;justify-content:center}
.lp-sub{font-size:15px;line-height:1.95;opacity:.95;margin:0 auto 20px;max-width:520px}
.lp-cta{background:#fff;color:var(--brand2);border:0;border-radius:14px;padding:15px 30px;
 font-size:17px;font-weight:800;font-family:inherit;cursor:pointer;box-shadow:var(--sh2)}
.lp-cta:active{transform:scale(.97)}
.lp-note{font-size:12.5px;opacity:.85;margin-top:12px}
.lp-sec{padding:34px 18px;max-width:900px;margin:0 auto}
.lp-sec>h2{font-size:20px;text-align:center;justify-content:center;margin:0 0 20px;color:var(--brandT)}
.lp-sec .lp-sub{color:var(--muted);opacity:1;margin-top:18px;text-align:center}
.lp-alt{background:var(--card);max-width:none}
.lp-alt>*{max-width:900px;margin-inline:auto}
.lp-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.lp-card{background:var(--card);border:1px solid var(--line);border-radius:15px;padding:16px;position:relative}
.lp-alt .lp-card{background:var(--bg)}
.lp-card b{display:block;font-size:16px;margin-bottom:7px;color:var(--brandT)}
.lp-card span{display:block;font-size:13.5px;line-height:1.9;color:var(--muted)}
.lp-card em{display:block;font-style:normal;font-size:30px;font-weight:800;color:var(--brandT);margin:6px 0 8px}
.lp-card em small{font-size:13px;font-weight:600;color:var(--muted)}
.lp-price .lp-card{text-align:center}
.lp-best{border:2.5px solid var(--brandT)}
.lp-tag{position:absolute;top:-11px;inset-inline-start:50%;transform:translateX(50%);
 background:var(--brand);color:#fff;font-size:11.5px;font-weight:800;padding:3px 12px;
 border-radius:20px;white-space:nowrap;max-width:calc(100% - 20px);overflow:hidden;text-overflow:ellipsis}
.lp-best{padding-top:20px}
.lp-phone{max-width:330px;margin:0 auto;background:#1f2430;border-radius:26px;padding:12px;box-shadow:var(--sh2)}
.lp-scr{background:var(--bg);border-radius:16px;padding:12px}
.lp-row{display:flex;align-items:center;gap:8px;padding:9px 4px;border-bottom:1px solid var(--line);font-size:14px}
.lp-row span{flex:1;font-weight:700;color:var(--txt)}
.lp-row i{font-style:normal;font-size:11.5px;font-weight:800;padding:3px 9px;border-radius:20px}
.lp-row .ok{background:#dcf5e3;color:#166534}
.lp-row .warn{background:#fef3c7;color:#92400e}
.lp-row .bad{background:#fee2e2;color:#991b1b}
.lp-bar{display:flex;justify-content:space-between;padding:10px 4px 0;font-size:14px;color:var(--txt)}
.lp-bar span{font-weight:800;color:var(--brandT)}
.lp-trust{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.lp-trust>div{text-align:center;padding:6px}
.lp-trust b{display:block;font-size:15px;margin-bottom:6px;color:var(--brandT)}
.lp-trust span{font-size:13px;line-height:1.85;color:var(--muted)}
.lp-end{padding-bottom:max(40px,env(safe-area-inset-bottom))}
.lp-links{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;margin-top:22px}
.lp-links a{color:#fff;opacity:.9;font-size:13px;text-decoration:underline}

/* شبكة صلاحيات الموظف */
.permgrid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:6px; }
.permgrid label{ display:flex; align-items:center; gap:7px; background:var(--card,#221c17);
  border:1px solid var(--line,#4a3d33); border-radius:9px; padding:8px 10px; cursor:pointer;
  font-size:13px; font-weight:600; margin:0; }
.permgrid label:has(input:checked){ border-color:var(--brandT,#3550c0); background:rgba(53,80,192,.10); background:color-mix(in srgb,var(--brandT) 14%,transparent); }
.permgrid input{ width:17px; height:17px; accent-color:var(--brandT,#3550c0); flex:0 0 auto; margin:0; }

/* ══ العقد ══ */
.c-doc{max-height:46vh;overflow:auto;background:var(--card2);border:1px solid var(--line);
  border-radius:11px;padding:12px 13px;font-size:13px;line-height:1.85}
.c-art{margin-bottom:11px}
.c-art:last-child{margin-bottom:0}
.c-art h4{margin:0 0 3px;font-size:13.5px;color:var(--brandT)}
.c-art div{color:var(--txt);opacity:.92}
.c-art b{color:var(--brandT)}
.c-sig{margin-top:12px;padding-top:10px;border-top:2px solid var(--line);display:flex;
  gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.c-sig code{background:var(--card);padding:1px 6px;border-radius:5px;font-size:11.5px;direction:ltr;display:inline-block}
.c-ok{color:var(--ok);font-weight:800;font-size:15px}
.sigpad{width:100%;height:130px;background:#fff;border:1px solid var(--line);border-radius:11px;
  display:block;touch-action:none;cursor:crosshair}
.ctagree{display:flex;gap:9px;align-items:flex-start;font-size:12.5px;color:var(--muted);
  font-weight:600;cursor:pointer;line-height:1.7}
.ctagree input{width:19px;height:19px;flex:0 0 auto;margin:2px 0 0;accent-color:var(--brandT)}
.ctref{background:var(--card2);border:1px dashed var(--line);border-radius:9px;padding:9px;
  font-family:"SF Mono",Menlo,monospace;font-size:13px;direction:ltr;margin:10px auto;
  color:var(--brandT);font-weight:700;max-width:260px}
.c-print{max-width:700px;margin:0 auto;color:#000}
.c-print .c-doc{max-height:none;overflow:visible;background:#fff;border:none;padding:0;font-size:11px}
.c-print .c-art{break-inside:avoid;page-break-inside:avoid}
.c-print .c-art h4{color:#000;border-bottom:1px solid #bbb;padding-bottom:2px}
.c-print .c-art b,.c-print .c-art div{color:#000;opacity:1}

/* ══ موافقة وليّ الأمر ══ */
.cn-hd{text-align:center;border-bottom:2px solid var(--line);padding-bottom:8px;margin-bottom:10px}
.cn-hd b{font-size:15px;color:var(--brandT)}
.cn-who{background:var(--card);border:1px solid var(--line);border-radius:9px;
  padding:8px 10px;margin-bottom:10px;font-size:12.5px;line-height:1.9}
.cn-intro{margin:0 0 11px;font-weight:700}
.cn-ack{margin:12px 0 0;font-weight:700;color:var(--brandT)}
.cn-sig{margin-top:12px;padding-top:10px;border-top:2px solid var(--line)}
.cn-ok{color:var(--ok)}
.cn-line{display:flex;gap:8px;align-items:flex-end;margin-bottom:11px;font-size:12.5px}
.cn-line span{flex:0 0 auto;color:var(--muted);font-weight:700}
.cn-line i{flex:1;border-bottom:1.5px dotted var(--line);height:16px;display:block}
.qcBox{background:var(--card2);border:1px solid var(--brandT);border-radius:10px;
  padding:10px 11px;margin:0 9px 9px}
.qcBox input{width:100%;background:var(--card);border:1px solid var(--line);
  color:var(--txt);border-radius:8px;padding:8px 10px;font:inherit;font-size:13px}

/* ══ حقول التاريخ ══
   حقل <input type="date"> يرسمه المتصفّح بنفسه، وقالبه لاتيني بطبعه
   (سنة/شهر/يوم). وتحت dir="rtl" ينعكس ترتيب مقاطعه فيُقرأ «موي/رهش/ةنس».
   العلاج أن يبقى الحقل نفسه ltr، ويُحاذى لليمين ليستقيم مع بقية النموذج. */
input[type="date"], input[type="month"], input[type="time"], input[type="datetime-local"]{
  direction:ltr; text-align:right;
}
/* ⚠️ سفاري iOS عكسُ ذلك تماماً: مع ltr يعرض «172026/09/»، ومع rtl يعرض
   «2026/09/17» صحيحاً — جُرّبت ١٢ تنويعة على المحاكي في ٢٢ سبتمبر ٢٠٢٦
   ولم تنفع إلا هذه. الشرط التالي لا يصدق إلا على iOS. */
@supports (-webkit-touch-callout: none){
  input[type="date"], input[type="month"], input[type="time"], input[type="datetime-local"]{ direction:rtl; }
}
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator{
  margin:0 0 0 auto; filter:invert(.75); cursor:pointer;
}

.dtrio{display:grid;grid-template-columns:1fr 1.4fr 1fr;gap:7px}
.dtrio > *{min-width:0}
.dtrio select{width:100%;min-width:0}

/* منع الصلاحية يُخفي المحتوى ولا يمحوه — ليعود فور منح الصلاحية */
.noperm > *{ display:none !important }
.noperm::before{ content:'لا تملك صلاحية الاطّلاع على هذا القسم.';
  display:block; text-align:center; color:var(--muted); padding:34px 16px;
  background:var(--card); border:1px solid var(--line); border-radius:12px }

/* ══ الفاتورة الضريبية ══ */
.invBox{background:var(--card2);border:1px solid var(--line);border-radius:12px;padding:14px 15px}
.invBox .line{border-color:var(--line)}

/* ══ سجلّ العمليات ══
   سطرٌ واحد لكل عملية بدل ثلاثة: رمزٌ يدلّ على بابها، ثم ما جرى،
   ثم الوقت وصاحبه صغيراً على الحافة. والتاريخ عنوانٌ للمجموعة لا تكراراً في كل سطر. */
.logday{
  position:sticky; top:0; z-index:2;
  background:var(--card2); color:var(--muted);
  font-size:11.5px; font-weight:700; letter-spacing:.03em;
  padding:6px 12px; border-bottom:1px solid var(--line);
}
.logday:not(:first-child){ border-top:1px solid var(--line) }
.logrow{
  display:flex; align-items:baseline; gap:9px;
  padding:8px 12px; border-bottom:1px solid var(--line); font-size:13.5px;
}
.logrow:last-child{ border-bottom:none }
.logi{ flex:none; font-size:14px; line-height:1 }
.logt{ flex:1; min-width:0; line-height:1.6 }
.logt b{ font-weight:600 }
.logd{ color:var(--muted); font-size:12.5px }
.logn{
  display:inline-block; background:var(--card2); color:var(--muted);
  border-radius:6px; padding:0 6px; font-size:11px; font-weight:700; vertical-align:1px;
}
.logm{ flex:none; color:var(--muted); font-size:11px; white-space:nowrap; font-variant-numeric:tabular-nums }
@media (max-width:430px){
  .logrow{ flex-wrap:wrap; gap:4px 8px }
  .logm{ width:100%; padding-inline-start:23px }
}
/* صفّ أبواب السجلّ: يمرّر أفقياً بدل أن ينكسر سطرين على الجوال */
.logtabs{
  display:flex; gap:6px; margin:0 0 9px; overflow-x:auto;
  scrollbar-width:none; -webkit-overflow-scrolling:touch; padding-bottom:2px;
}
.logtabs::-webkit-scrollbar{ display:none }
.logtabs button{ flex:none; white-space:nowrap }

/* شريط التحديث: يظهر حين لا يصحّ أن نُعيد التحميل فجأةً (نافذة مفتوحة أو كتابة) */
.updbar{
  position:fixed; inset-inline:12px; bottom:calc(64px + env(safe-area-inset-bottom));
  z-index:70; display:flex; align-items:center; gap:9px;
  background:var(--card); border:1px solid var(--line); border-radius:12px;
  padding:10px 13px; box-shadow:0 8px 28px -12px rgba(0,0,0,.45);
  font-size:14px; font-weight:600; animation:updIn .28s ease;
}
.updbar span{ flex:1 }
@keyframes updIn{ from{ transform:translateY(14px); opacity:0 } to{ transform:none; opacity:1 } }
@media (prefers-reduced-motion:reduce){ .updbar{ animation:none } }

/* ══ شاشة «اليوم» ══ صفٌّ كبير يُضغط بالإبهام في الملعب، لا زرٌّ دقيق */
.tdrow{
  display:flex; align-items:center; gap:11px; padding:13px 12px;
  border-bottom:1px solid var(--line); cursor:pointer; user-select:none;
  transition:background .12s ease;
}
.tdrow:last-child{ border-bottom:none }
.tdrow:active{ background:var(--card2) }
.tdrow.on{ background:rgba(74,124,78,.10) }
.tdrow.off{ background:rgba(192,57,43,.08) }
.tdmark{ font-size:20px; flex:none; line-height:1 }
.tdn{ flex:1; min-width:0 }
.tdn b{ font-size:15.5px }

/* ══ المساعدة ══ */
details.hlp{ background:var(--card2); border:1px solid var(--line); border-radius:10px; padding:0 12px; margin-bottom:7px }
details.hlp summary{ cursor:pointer; list-style:none; padding:11px 0; font-weight:700; font-size:14.5px; display:flex; gap:9px; align-items:center }
details.hlp summary::-webkit-details-marker{ display:none }
details.hlp summary::after{ content:'+'; margin-inline-start:auto; color:var(--brandT); font-size:19px; font-weight:400; line-height:1 }
details.hlp[open] summary::after{ content:'−' }
details.hlp > div{ padding:0 0 12px; font-size:13.5px; color:var(--muted); line-height:1.9 }

/* ══════════════════ نظام التصميم ══════════════════
   أُضيف مع طقم الأيقونات. ثلاث قواعد لا رابع لها:
     ١) الأيقونة ترث لون النصّ وحجمها من متغيّر واحد.
     ٢) ستّة أحجام خطّ لا تسعة عشر — ولكلٍّ وظيفة مسمّاة.
     ٣) الأخضر والبرتقالي والأحمر للحالة فقط، لا للتزيين. */

:root{
  --ico-sz:19px;
  --fs-1:22px;   /* عنوان شاشة   */
  --fs-2:17px;   /* عنوان قسم    */
  --fs-3:15px;   /* اسم / نصّ بارز */
  --fs-4:13.5px; /* نصّ عادي     */
  --fs-5:12px;   /* تفصيل        */
  --fs-6:10.5px; /* وسم          */
}

.ico{
  width:var(--ico-sz); height:var(--ico-sz);
  fill:none; stroke:currentColor; stroke-width:1.75;
  stroke-linecap:round; stroke-linejoin:round;
  display:inline-block; vertical-align:-.22em; flex:none
}
.sz-sm{--ico-sz:16px} .sz-lg{--ico-sz:23px} .sz-xl{--ico-sz:30px}
.nav button .ico{--ico-sz:22px;margin:0}

.ltr{direction:ltr;unicode-bidi:isolate;display:inline-block}
/* الأرقام تُقرأ بعمود ثابت — بلا هذا ترقص خانات المبالغ عند كل تحديث */
.money,.num,.chip .n,.ring text{font-variant-numeric:tabular-nums}

/* ══ اللبنات البصرية ══ */

/* ① حلقة الاشتراك — تفرغ باقتراب الانتهاء، وتتقطّع حين ينتهي */
.ring{width:43px;height:43px;flex:none}
.ring text{font-size:9.5px;font-weight:800}
.ring .trk{stroke:var(--line)}

/* ② بلاطة الحرف — تمييزٌ بلا صورة، ولا أحد يرفع صور الأطفال */
.av{
  width:40px;height:40px;border-radius:12px;flex:none;
  display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:17px;color:#fff;overflow:hidden
}
.av img{width:100%;height:100%;object-fit:cover}

/* ③ شريط الحصص — أخضر حضر، أحمر غاب، رمادي لم يأتِ بعد */
.strip{display:flex;gap:3px}
.strip i{flex:1;height:22px;border-radius:4px;background:var(--line)}
.strip i.p{background:var(--ok)} .strip i.a{background:var(--bad);opacity:.45}

/* ④ الهيكل الرمادي أثناء المزامنة — أقصر في الإحساس من شاشةٍ فارغة */
@keyframes shim{0%{background-position:100% 0}100%{background-position:-100% 0}}
.sk{border-radius:6px;height:13px;margin-bottom:9px;
 background:linear-gradient(90deg,var(--card2),var(--line),var(--card2));
 background-size:200% 100%;animation:shim 1.5s linear infinite}
@media (prefers-reduced-motion:reduce){ .sk{animation:none} }

/* ⑤ صفّ اللاعب المدمج — أربعة في مساحة واحد، ومساحة الضغط الصفّ كلّه */
.prow{
  display:flex;align-items:center;gap:10px;padding:11px 12px;
  border-bottom:1px solid var(--line);background:none;border-radius:0;
  width:100%;text-align:start;color:var(--txt);border-inline:none;border-top:none
}
.prow:last-child{border-bottom:none}
/* صفّ التحضير: الاسم زرٌّ داخل صفٍّ فيه أزرار أخرى — فلا يأخذ العرض كلّه
   وإلا دفع الوسم وزرّ «غائب» خارج الشاشة كلما طال سطر «بواسطة فلان». */
.arow .prow{width:auto;min-width:0}
.prow:active{background:var(--card2);transform:none}
.prow .nmw{flex:1;min-width:0}
.prow .nmw b{display:block;font-size:var(--fs-3);font-weight:700;
 overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.prow .nmw .mini{display:block;font-size:var(--fs-5);
 overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.plist-card{background:var(--card);border:1px solid var(--line);border-radius:13px;
 box-shadow:var(--sh);overflow:hidden;margin-bottom:10px}

/* ⑥ بطاقة اللحظة — لا تظهر إلا لأهمّ شيءٍ الآن، وندرتها هي ما يجعلها تُرى */
.moment{
  background:var(--card);
  border:1.5px solid var(--brandT);border-radius:15px;padding:14px 15px;margin-bottom:12px
}
.moment .k{font-size:var(--fs-5);color:var(--brandT);font-weight:800;
 display:flex;align-items:center;gap:5px;margin-bottom:3px}
.moment .ttl{font-size:var(--fs-2);font-weight:800;margin-bottom:2px}

/* ⑦ ورقة الإجراءات — الإجراء الثاني خلف زرّ، مرتّباً بنيّته لا مبعثراً */
.asheet .h{font-size:var(--fs-5);color:var(--muted);font-weight:800;
 margin:14px 0 8px;letter-spacing:.04em}
.asheet .h:first-child{margin-top:2px}
.agrid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.agrid button{
  background:var(--card2);border:1px solid var(--line);border-radius:12px;
  padding:11px 3px 9px;font-size:var(--fs-6);font-weight:700;color:var(--txt);
  display:flex;flex-direction:column;align-items:center;gap:6px;line-height:1.25
}
.agrid button .ico{--ico-sz:21px;margin:0}
.agrid button:active{background:var(--line)}

/* ══ صفحة اللاعب ══ */
.ptabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin:14px 0 12px}
.ptabs button{
  background:none;border:none;border-radius:0;padding:8px 11px;
  font-size:var(--fs-4);font-weight:700;color:var(--muted);border-bottom:2px solid transparent
}
.ptabs button.on{color:var(--brandT);border-bottom-color:var(--brandT)}
.pstats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}
.pstats div{background:var(--card2);border-radius:11px;padding:10px 4px;text-align:center}
.pstats b{display:block;font-size:var(--fs-2);font-weight:800;line-height:1.3}
.pstats span{font-size:var(--fs-5);color:var(--muted)}
.pbar{display:flex;gap:8px;padding-top:12px;margin-top:12px;border-top:1px solid var(--line)}
.pbar .grow{flex:1;min-width:0}

/* ══ التحضير: الصفّ كلّه هو الهدف، ولونه يقول حالته من بعيد ══ */
.arow.on-p{background:color-mix(in srgb,var(--ok) 11%,transparent)}
.arow.on-a{background:color-mix(in srgb,var(--bad) 9%,transparent)}
.acount{
  position:sticky;top:calc(52px + env(safe-area-inset-top));z-index:12;
  background:var(--card);border:1px solid var(--line);border-radius:11px;
  padding:8px 12px;margin-bottom:9px;display:flex;align-items:center;gap:10px;
  box-shadow:var(--sh);font-size:var(--fs-4);font-weight:700
}
.acount .track{flex:1;height:7px;background:var(--card2);border-radius:20px;overflow:hidden}
.acount .track i{display:block;height:100%;background:var(--ok);border-radius:20px;transition:width .35s}

/* الشمس على الشاشة في الملعب تبتلع الرمادي الفاتح */
@media (prefers-contrast:more){
  :root{--muted:#5f5344;--line:#c8b89c}
}

/* ══ أقسام الإعدادات ══ */
/* شاشات الاشتراك الكاملة (licScreen): بلون هوية الأكاديمية، لا تُغلق إلا بزرّها.
   --brand→--brand2 لا --brandL: الأبيض فوق الفاتح لا يبلغ ٤٫٥:١ للنصّ الصغير */
.licScr{position:fixed;inset:0;z-index:300;display:flex;flex-direction:column;text-align:center;color:#fff;
 background:linear-gradient(160deg,var(--brand),var(--brand2));overflow-y:auto;overscroll-behavior:contain;
 padding:max(30px,env(safe-area-inset-top)) 26px max(26px,env(safe-area-inset-bottom))}
.licScr-in{flex:1;display:flex;flex-direction:column;justify-content:center;width:100%;max-width:420px;margin:0 auto}
.licScr-ico{width:84px;height:84px;border-radius:50%;background:rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;margin:0 auto 18px}
.licScr-ico svg{width:46px;height:46px;stroke-width:2.2}
.licScr-ac{font-size:15px}
.licScr h1{justify-content:center;margin:6px 0;font-size:28px;color:#fff}
.licScr-sub{font-size:15px;line-height:1.8;max-width:340px;margin:0 auto}
.licScr-box{margin:24px auto 0;width:100%;max-width:300px;border-radius:16px;padding:16px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.32)}
.licScr-box .k{font-size:14px;font-weight:600}   /* بلا شفافية: ٤٫٥:١ في الألوان السبعة (مراجعة v203) */
.licScr-box .v{font-size:30px;font-weight:900;margin:2px 0}
.licScr a{color:#fff}
.licScr-btns{width:100%;max-width:360px;margin:18px auto 0;display:flex;flex-direction:column;gap:10px}
.licScr-b1,.licScr-b2{padding:15px;border-radius:14px;font:inherit;font-size:17px;font-weight:800;cursor:pointer}
.licScr-b1{background:#fff;color:var(--brand2);border:0}
.licScr-b2{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.65)}
/* شاشة القفل فوقها: لا تُرى قبل الدخول */
body.locked .licScr{display:none}
/* عدّاد الاشتراك أعلى الإعدادات */
.subT-n{margin:8px 0 6px}
.subT-n b{font-size:24px;color:var(--brandT);font-weight:900}
.subT.over .subT-n b{color:var(--bad);font-size:19px}
.setgrp{background:var(--card);border:1px solid var(--line);border-radius:14px;margin:0 0 10px;box-shadow:var(--sh);overflow:hidden}
.setgrp > summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:11px;padding:13px 14px;user-select:none}
.setgrp > summary::-webkit-details-marker{display:none}
.setgrp > summary::after{content:'‹';margin-inline-start:auto;color:var(--muted);font-size:22px;line-height:1;transition:transform .2s}
.setgrp[open] > summary::after{transform:rotate(-90deg)}
.setgrp[open] > summary{border-bottom:1px solid var(--line)}
.sg-ico{width:34px;height:34px;border-radius:10px;background:var(--card2);color:var(--brandT);display:flex;align-items:center;justify-content:center;flex:none}
.sg-t{display:flex;flex-direction:column;gap:2px;min-width:0}
.sg-t b{font-size:15px}
.sg-body{padding:12px 12px 4px}
.sg-body > .card{box-shadow:none}
.sg-h{font-size:13.5px;color:var(--muted);margin:14px 2px 8px;font-weight:800}

/* ═══ الإنجليزية (ltr) — القواعد الفيزيائية القليلة تنقلب هنا ═══
   البرنامج مكتوبٌ للعربية؛ وهذه وحدها تعتمد على اليمين واليسار صراحةً. */
html[dir="ltr"] select{padding-left:12px;padding-right:30px;
  background-position:calc(100% - 18px) 20px,calc(100% - 13px) 20px}
/* start لا left: الفاتورة داخل ltr تبقى rtl فتحاذي لليمين. ورؤوس الأعمدة مضمّنٌ فيها right */
html[dir="ltr"] th, html[dir="ltr"] td{text-align:start !important}
/* ما يبقى عربياً عمداً يبقى باتجاهه: الفاتورة الضريبية ونصّ العقد والموافقة */
html[dir="ltr"] .invBox, html[dir="ltr"] .c-doc{direction:rtl;text-align:right}
/* الاسم العربي داخل تخطيطٍ ltr: اتجاهه من محتواه فيُقصّ آخره لا أوّله */
html[dir="ltr"] .prow .nmw b, html[dir="ltr"] .nm{unicode-bidi:plaintext;text-align:left}
html[dir="ltr"] .sbar .vl{text-align:right}
html[dir="ltr"] input[type="date"], html[dir="ltr"] input[type="month"],
html[dir="ltr"] input[type="time"], html[dir="ltr"] input[type="datetime-local"]{text-align:left}
/* «Expired» أطول من «منتهٍ» فلا تسعه الحلقة بالحجم العربي */
html[dir="ltr"] .ring text[style]{font-size:6.2px !important}
/* ‹hidden› كان يُبطله display:flex في .btn-l، فظهر زرٌّ أوقفه صاحب البرنامج (جولة العميل) */
[hidden]{display:none!important}