/* ============ طبقة المظهر الزجاجي العصري (بصمة المنصة) — فوق التصميم الحالي، بلا مساس بالمنطق أو الأوراق الرسمية ============ */
:root{
  --glass-bg:rgba(255,255,255,.62);
  --glass-bg-2:rgba(255,255,255,.34);
  --glass-brd:rgba(255,255,255,.75);
  --glass-hi:rgba(255,255,255,.9);
  --glass-shadow:0 1px 1px rgba(15,46,54,.04), 0 8px 24px -8px rgba(15,46,54,.14), 0 30px 60px -30px rgba(11,124,121,.22);
  --glass-blur:saturate(160%) blur(22px);
  --aurora-1:rgba(11,124,121,.46);
  --aurora-2:rgba(45,95,154,.36);
  --aurora-3:rgba(156,133,80,.30);
  --aurora-4:rgba(17,128,78,.30);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --glass-bg:rgba(22,38,44,.58); --glass-bg-2:rgba(22,38,44,.4); --glass-brd:rgba(120,160,165,.18); --glass-hi:rgba(180,220,225,.14);
  --glass-shadow:0 1px 1px rgba(0,0,0,.3), 0 10px 30px -10px rgba(0,0,0,.5), 0 30px 60px -30px rgba(0,0,0,.6);
  --aurora-1:rgba(51,181,176,.18); --aurora-2:rgba(141,182,234,.12); --aurora-3:rgba(216,194,138,.08); --aurora-4:rgba(76,200,142,.12);
}}
:root[data-theme="dark"]{
  --glass-bg:rgba(22,38,44,.58); --glass-bg-2:rgba(22,38,44,.4); --glass-brd:rgba(120,160,165,.18); --glass-hi:rgba(180,220,225,.14);
  --glass-shadow:0 1px 1px rgba(0,0,0,.3), 0 10px 30px -10px rgba(0,0,0,.5), 0 30px 60px -30px rgba(0,0,0,.6);
  --aurora-1:rgba(51,181,176,.2); --aurora-2:rgba(141,182,234,.14); --aurora-3:rgba(216,194,138,.08); --aurora-4:rgba(76,200,142,.14);
}

/* خلفية متدرّجة حيّة (شفق) ثابتة خلف كل شيء */
body{
  background:
    radial-gradient(60% 50% at 85% 0%, var(--aurora-1), transparent 70%),
    radial-gradient(55% 45% at 5% 15%, var(--aurora-2), transparent 70%),
    radial-gradient(50% 50% at 95% 80%, var(--aurora-3), transparent 72%),
    radial-gradient(45% 40% at 10% 95%, var(--aurora-4), transparent 70%),
    var(--bg);
  background-attachment:fixed;
}

/* ===== البطاقات والمجموعات: زجاج مصنفر بحافة مضيئة وظل متدرّج ===== */
.b4card, .group, .now, .b6r, .dpc, .dpp, .dcssum>div, .thxs1, .acct, .qvrc, .sgbar, .aprbar, .kcard, .tlc, .vabar,
.b3card, .b3f, .stc, .wst, .dcsi, .evxd{
  background:var(--glass-bg);
  -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-brd);
  box-shadow:var(--glass-shadow);
}
.group{border-radius:20px;overflow:hidden}
.group .row{background:transparent;border-top:1px solid color-mix(in srgb,var(--line-2) 55%,transparent)}
.group .row:first-child{border-top:0}
.group .row:hover,.group .row:focus-within{background:color-mix(in srgb,var(--surface) 40%,transparent)}
.b4card{border-radius:22px}
.b4card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(160deg,var(--glass-hi),transparent 38%);mix-blend-mode:overlay}
.b4card.has, .b4card.bad{box-shadow:var(--glass-shadow), inset 0 0 0 1.5px color-mix(in srgb,var(--brand) 22%,transparent)}

/* ===== الشريط العلوي والقائمة الجانبية والشريط السفلي: زجاج عائم ===== */
.bar, .b4top{
  background:linear-gradient(to bottom, color-mix(in srgb,var(--bg) 82%,transparent), color-mix(in srgb,var(--bg) 55%,transparent));
  -webkit-backdrop-filter:saturate(160%) blur(14px); backdrop-filter:saturate(160%) blur(14px);
  box-shadow:0 1px 0 var(--glass-brd), 0 8px 20px -14px rgba(15,46,54,.2);
}
.side{
  background:var(--glass-bg-2);
  -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
  border-inline-start:1px solid var(--glass-brd);
  box-shadow:-8px 0 30px -20px rgba(15,46,54,.25);
}
.side a{border-radius:14px;transition:background .15s, transform .15s}
.side a:hover{background:color-mix(in srgb,var(--brand-tint) 50%,transparent)}
.side a[aria-current="page"]{background:color-mix(in srgb,var(--brand-tint) 80%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--brand) 25%,transparent)}
.tabbar{
  background:color-mix(in srgb,var(--bg) 72%,transparent);
  -webkit-backdrop-filter:saturate(160%) blur(16px); backdrop-filter:saturate(160%) blur(16px);
  box-shadow:0 -1px 0 var(--glass-brd), 0 -10px 30px -18px rgba(15,46,54,.28);
}

/* ===== الأزرار: عمق لطيف وتدرّج على الرئيسي ===== */
.btn{transition:transform .12s ease, box-shadow .15s ease, filter .15s ease; border-radius:14px}
.btn:active{transform:translateY(1px)}
.btn:not(.plain):not(.soft){
  background:linear-gradient(180deg, color-mix(in srgb,var(--brand) 92%,white), var(--brand));
  box-shadow:0 1px 0 rgba(255,255,255,.25) inset, 0 6px 16px -6px color-mix(in srgb,var(--brand) 60%,transparent);
}
.btn:not(.plain):not(.soft):hover{filter:brightness(1.05)}
.btn.soft{background:color-mix(in srgb,var(--brand-tint) 60%,var(--glass-bg));-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border:1px solid var(--glass-brd)}
.btn.plain{background:color-mix(in srgb,var(--surface) 30%,transparent)}

/* ===== الرقائق والشرائح والحبوب: زجاج صغير ===== */
.seg, .b5chips, .chips, .b3fs{gap:6px}
.seg{background:var(--glass-bg-2);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border:1px solid var(--glass-brd);border-radius:14px;padding:4px}
.seg button, .seg a{border-radius:11px;transition:background .15s}
.seg button[aria-pressed="true"], .seg a[aria-pressed="true"]{background:var(--surface);box-shadow:0 2px 8px -3px rgba(15,46,54,.2)}
.b5c, .chip{-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border:1px solid var(--glass-brd);background:var(--glass-bg-2)}
.b5c[aria-selected="true"]{box-shadow:0 4px 12px -4px rgba(15,46,54,.25)}
.pill{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}

/* ===== أرقام أبرز قليلًا ===== */
.b4card .b4n, .dcssum b, .dpc b, .now .nt{letter-spacing:-.5px}

/* ===== أعطِ المحتوى هامشًا علويًا ليتنفّس تحت الشريط الزجاجي ===== */
.page{position:relative}

/* حركة واحدة لطيفة عند دخول الصفحة (تحترم تقليل الحركة) */
@media (prefers-reduced-motion:no-preference){
  .main>.page>*{animation:glassIn .4s cubic-bezier(.22,.61,.36,1) both}
  .main>.page>*:nth-child(2){animation-delay:.04s}
  .main>.page>*:nth-child(3){animation-delay:.08s}
  .main>.page>*:nth-child(n+4){animation-delay:.1s}
}
@keyframes glassIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* بطاقة «الآن» (الحصة القادمة): زجاج ملوّن بتدرّج العلامة */
.now{background:linear-gradient(135deg, color-mix(in srgb,var(--brand) 14%,var(--glass-bg)), var(--glass-bg) 60%);}
.now:hover{box-shadow:var(--glass-shadow), 0 0 0 1px color-mix(in srgb,var(--brand) 30%,transparent)}
/* الشريحة اليومية والبطاقات التفاعلية: رفع خفيف عند المرور */
.b4card,.dpc,.kcard,.tlc{transition:transform .18s ease, box-shadow .2s ease}
.b4card:hover,.dpc:hover,.kcard:hover,.tlc:hover{transform:translateY(-2px);box-shadow:var(--glass-shadow), 0 16px 32px -16px rgba(15,46,54,.3)}
.tabbar a[aria-current="page"],.tabbar a.on{background:color-mix(in srgb,var(--brand-tint) 70%,transparent);border-radius:14px}
/* بطاقة «ينتظر قرارك» لا تمتدّ فارغة على صفّين إن لم يكن فيها طلبات */
@media (min-width:900px){.b4 .b4apr:not(.has){grid-row:auto}}
.now .nh b.num{white-space:nowrap;flex:none}.now .nh{flex-wrap:wrap}

/* ===== كثافة الجوال: أحجام طبيعية (≤640px) — مقاسات نظام iOS/Material: صفوف 48px، عناوين 20px، زوايا 14–16px ===== */
@media (max-width:640px){
  html:not(.easy) .page{gap:12px;padding:2px 14px 28px}
  html:not(.easy) .hero h1, html:not(.easy) .b4top h1, html:not(.easy) .ph h1{font-size:20px;line-height:1.3}
  html:not(.easy) .hero{gap:3px}html:not(.easy) .hero small, html:not(.easy) .b4top small{font-size:12px}
  html:not(.easy) .ksearch input, html:not(.easy) .search input, html:not(.easy) input[type="search"]{min-height:42px;font-size:14px;border-radius:12px}
  html:not(.easy) .now{padding:12px 14px;border-radius:16px;gap:3px}
  html:not(.easy) .now .nt{font-size:21px;line-height:1.3}html:not(.easy) .now .nh{font-size:12.5px}html:not(.easy) .now .nh b{font-size:13px;padding:1px 10px}
  html:not(.easy) .now small, html:not(.easy) .now .ns{font-size:12.5px}
  html:not(.easy) .seg, html:not(.easy) .pbar{font-size:12.5px}html:not(.easy) .seg button, html:not(.easy) .seg a{min-height:32px;padding:0 10px;font-size:13px}
  html:not(.easy) .dpdg{gap:8px}html:not(.easy) .dpc{padding:10px 11px;border-radius:14px;gap:1px}html:not(.easy) .dpc b{font-size:17px}html:not(.easy) .dpc span{font-size:13px}html:not(.easy) .dpc small{font-size:11.5px;line-height:1.35}
  html:not(.easy) .dpp{padding:10px 12px;border-radius:14px;font-size:13px}
  html:not(.easy) .group{border-radius:14px}html:not(.easy) .row{min-height:50px;padding:10px 12px;gap:10px}html:not(.easy) .row .tx b{font-size:14.5px}html:not(.easy) .row .tx small{font-size:12px}
  html:not(.easy) .group-h h3{font-size:14px}
  html:not(.easy) .apps{gap:8px}html:not(.easy) .app{min-height:94px;padding:10px 4px 9px;border-radius:14px;gap:4px}
  html:not(.easy) .app .api{width:40px;height:40px;border-radius:12px}html:not(.easy) .app .api svg{width:20px;height:20px}
  html:not(.easy) .app b{font-size:13px;line-height:1.25}html:not(.easy) .app small{font-size:11px;line-height:1.3}
  html:not(.easy) .b4card{padding:12px;border-radius:16px;gap:4px}html:not(.easy) .b4card .b4n{font-size:22px}
  html:not(.easy) .tile{min-height:68px;padding:10px 6px;border-radius:12px}html:not(.easy) .tile b{font-size:22px}
  html:not(.easy) .btn{min-height:40px;font-size:14px;border-radius:12px}html:not(.easy) .btn.sm{min-height:34px;font-size:13px}
  html:not(.easy) .b3f{padding:6px 11px;font-size:12.5px}
  html:not(.easy) .qvrc, html:not(.easy) .kcard, html:not(.easy) .tlc, html:not(.easy) .thxs1{border-radius:16px}
  html:not(.easy) .main>.page>*{animation-duration:.22s}
}
/* صفّ التوقيع في «ملفي»: المعاينة والنص في سطر، والأزرار تحتهما على الجوال */
.sigset .row{display:grid;grid-template-columns:auto 1fr;grid-auto-flow:row dense;gap:8px 12px;align-items:center}
.sigset .row .tx{grid-column:2}
.sigset .row .sgprev{grid-row:1}
.sigset .row .btn,.sigset .row label.btn{grid-column:1/-1;justify-self:start}
@media (min-width:641px){.sigset .row{grid-template-columns:auto 1fr auto auto auto}.sigset .row .btn,.sigset .row label.btn{grid-column:auto}}

/* ===== الرئيسية للوكيل على الجوال: بحث مضغوط، شريط الحصة، وحالة اليوم كقائمة بدل أربع صناديق ===== */
@media (max-width:640px){
  html:not(.easy) .lsrch input{font-size:14px;padding:9px 14px 9px 12px;border-radius:999px;min-height:38px;background:color-mix(in srgb,var(--surface) 70%,transparent)}
  html:not(.easy) .dash.dep{gap:10px}
  html:not(.easy) .dash.dep .now{padding:10px 12px;border-radius:14px}
  html:not(.easy) .dash.dep .now .nt{font-size:18px}
  html:not(.easy) .dash.dep .now .ns{font-size:12px}
  html:not(.easy) .pchips button{width:30px;height:30px;border-radius:9px;font-size:13px}
  html:not(.easy) .pbar{gap:6px}
  html:not(.easy) .dpdg{grid-template-columns:1fr;gap:0;background:var(--glass-bg);border:1px solid var(--glass-brd);border-radius:14px;overflow:hidden;box-shadow:var(--glass-shadow)}
  html:not(.easy) .dpc{display:grid;grid-template-columns:1fr auto;grid-template-areas:"l n" "s n";align-items:center;column-gap:10px;row-gap:0;padding:9px 12px;border:0;border-radius:0;background:transparent;border-inline-start:3px solid var(--line);box-shadow:none;border-top:1px solid color-mix(in srgb,var(--line-2) 60%,transparent)}
  html:not(.easy) .dpc:first-child{border-top:0}
  html:not(.easy) .dpc b{grid-area:n;font-size:15px;text-align:left;white-space:nowrap}
  html:not(.easy) .dpc span{grid-area:l;font-size:13.5px}
  html:not(.easy) .dpc small{grid-area:s;font-size:11.5px;line-height:1.3}
  html:not(.easy) .dpp{padding:9px 12px;font-size:13px;border-radius:12px}
  html:not(.easy) .group-h{margin-bottom:2px}html:not(.easy) .group-h h3{font-size:13.5px}html:not(.easy) .group-h small{font-size:11.5px}
  html:not(.easy) .b4card .b4n{font-size:20px}
}
.thm-easy{display:flex;gap:12px;align-items:flex-start;padding:10px 4px}.thm-easy input{width:22px;height:22px;margin-top:2px;accent-color:var(--brand)}.thm-easy span{display:grid;gap:2px}.thm-easy small{color:var(--ink-2);font-size:12.5px;line-height:1.5}

/* ===== جوال: شريط أعلى أخف، بحث خلف أيقونة، الأقسام قائمة بأيقونات صغيرة (نمط تطبيقات الجوال) ===== */
.hbell.gsb{display:grid}
@media (max-width:640px){
  html:not(.easy) .bar{min-height:50px;padding-top:calc(env(safe-area-inset-top,0px) + 7px);padding-bottom:7px;gap:6px}
  html:not(.easy) .bar h1{font-size:16px}
  html:not(.easy) .hbell{width:34px;height:34px}html:not(.easy) .hbell svg{width:17px;height:17px}
  html:not(.easy) .hmini,html:not(.easy) .holm{font-size:11.5px;padding:0 8px;min-height:30px}
  html:not(.easy) .hbell.gsb{display:grid}
  html:not(.easy) .page .lsrch{display:none}
  html.srch:not(.easy) .page .lsrch{display:block}
  #layer .lsrch{display:block}#layer .lsrch input{min-height:44px;font-size:16px;border-radius:12px}#layer #gres{margin-top:8px;max-height:50vh;overflow:auto}
  html:not(.easy) .tdate{flex-direction:row;align-items:baseline;gap:8px;flex-wrap:wrap}
  html:not(.easy) .tdate b{font-size:17px}html:not(.easy) .tdate span{font-size:11.5px}
  html:not(.easy) .dash.dep{gap:8px}
  html:not(.easy) .ksearch input{min-height:36px;font-size:13.5px;border-radius:999px;padding:7px 14px}
  /* الأقسام: صفوف */
  html:not(.easy) .apps{display:flex;flex-direction:column;gap:0;background:var(--glass-bg);border:1px solid var(--glass-brd);border-radius:14px;overflow:hidden;box-shadow:var(--glass-shadow)}
  html:not(.easy) .app{display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"i t c" "i s c";column-gap:10px;row-gap:0;align-items:center;justify-items:start;text-align:start;min-height:48px;padding:7px 12px;border-radius:0;background:transparent;box-shadow:none;border-top:1px solid color-mix(in srgb,var(--line-2) 60%,transparent)}
  html:not(.easy) .app:first-child{border-top:0}
  html:not(.easy) .app:active{transform:none;background:color-mix(in srgb,var(--surface) 50%,transparent)}
  html:not(.easy) .app .api{grid-area:i;width:30px;height:30px;border-radius:9px}
  html:not(.easy) .app .api svg{width:16px;height:16px}
  html:not(.easy) .app>b{grid-area:t;font-size:14px;font-weight:600;line-height:1.3}
  html:not(.easy) .app>small{grid-area:s;font-size:11.5px;line-height:1.3;-webkit-line-clamp:1}
  html:not(.easy) .app::after{content:"";grid-area:c;width:7px;height:7px;border:solid var(--ink-3);border-width:0 0 1.5px 1.5px;transform:rotate(45deg);margin-inline-start:4px}
  html:not(.easy) .app .abd{position:static;min-width:18px;height:18px;font-size:11px;margin-inline-start:4px;box-shadow:none;grid-area:c;justify-self:end}
  html:not(.easy) .app .abd + *{}
  html:not(.easy) .app .api .abd{position:absolute;top:-5px;inset-inline-end:-6px}
  /* بطاقات الحالة والأرقام: أرقام وعناوين أصغر */
  html:not(.easy) .b4card .b4n{font-size:19px}html:not(.easy) .b4card b,html:not(.easy) .b4card .tx b{font-size:13.5px}html:not(.easy) .b4card small{font-size:11.5px}
  html:not(.easy) .b4card .b4ic{width:30px;height:30px;border-radius:9px}html:not(.easy) .b4card .b4ic svg{width:16px;height:16px}
  html:not(.easy) .empty{font-size:13px;padding:14px}
}

.qvri span svg{width:20px;height:20px;color:var(--brand)}
@media (max-width:640px){
  html:not(.easy) .qvrc{padding:10px 12px;border-radius:14px;gap:10px}
  html:not(.easy) .qvrc .ring{width:46px;height:46px}html:not(.easy) .qvrc .ring::before{inset:5px}html:not(.easy) .qvrc .ring b{font-size:11px}
  html:not(.easy) .qvrc .tx b{font-size:14px}html:not(.easy) .qvrc .tx small{font-size:11.5px}html:not(.easy) .qvgap{font-size:12px}
  html:not(.easy) .qvri a{flex-direction:row;justify-content:center;gap:6px;padding:7px 6px;border-radius:10px}
  html:not(.easy) .qvri span{font-size:16px;display:grid}html:not(.easy) .qvri span svg{width:16px;height:16px}html:not(.easy) .qvri small{font-size:12px}
  html:not(.easy) .quick{grid-template-columns:1fr;gap:0;background:var(--glass-bg);border:1px solid var(--glass-brd);border-radius:14px;overflow:hidden}
  html:not(.easy) .qk{flex-direction:row;align-items:center;gap:10px;padding:9px 12px;border-radius:0;background:transparent;box-shadow:none;border-top:1px solid color-mix(in srgb,var(--line-2) 60%,transparent);flex-wrap:wrap}
  html:not(.easy) .qk:first-child{border-top:0}
  html:not(.easy) .qk svg{width:18px;height:18px;margin:0}html:not(.easy) .qk b{font-size:14px;flex:1}html:not(.easy) .qk small{font-size:11.5px;flex-basis:100%;margin-inline-start:28px}
}
@media (max-width:640px){html:not(.easy) .qvrc{grid-template-columns:auto minmax(0,1fr);justify-items:start;text-align:start}html:not(.easy) .qvrc .tx{align-items:flex-start;text-align:start}html:not(.easy) .qvrc .ring{grid-row:1}}
.dash section.qvrc{display:grid}
/* ===== سطح المكتب: الكثافة نفسها بنسخة أوسع (بلا تكبير) ===== */
@media (min-width:641px){
  html:not(.easy) .page{gap:14px}
  html:not(.easy) .row{min-height:52px;padding:10px 14px}html:not(.easy) .row .tx b{font-size:14.5px}html:not(.easy) .row .tx small{font-size:12.5px}
  html:not(.easy) .apps{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
  html:not(.easy) .app{min-height:84px;padding:10px 6px 8px;border-radius:14px;gap:4px}
  html:not(.easy) .app .api{width:36px;height:36px;border-radius:11px}html:not(.easy) .app .api svg{width:18px;height:18px}
  html:not(.easy) .app>b{font-size:13px}html:not(.easy) .app>small{font-size:11px}
  html:not(.easy) .now{padding:12px 16px;border-radius:16px}html:not(.easy) .now .nt{font-size:22px}html:not(.easy) .now .ns{font-size:13px}
  html:not(.easy) .dpc{padding:10px 12px;border-radius:14px}html:not(.easy) .dpc b{font-size:18px}html:not(.easy) .dpc span{font-size:13px}html:not(.easy) .dpc small{font-size:11.5px}
  html:not(.easy) .b4card{padding:12px 14px;border-radius:16px}html:not(.easy) .b4card .b4n{font-size:22px}
  html:not(.easy) .b4top h1{font-size:20px}html:not(.easy) .tdate b{font-size:18px}
  html:not(.easy) .lsrch input{padding:9px 14px;font-size:14px;border-radius:999px}
  html:not(.easy) .hbell{width:36px;height:36px}html:not(.easy) .hbell svg{width:18px;height:18px}
  html:not(.easy) .qvrc{padding:12px 14px;border-radius:16px}html:not(.easy) .qvrc .ring{width:52px;height:52px}
  html:not(.easy) .side a{min-height:40px;font-size:14px}
}
/* ===== صعوبات التعلم: قائمة الطلاب صفوف بحلقة صغيرة بدل بطاقات ===== */
@media (max-width:640px){
  html:not(.easy) .u2grid{grid-template-columns:1fr;gap:0;background:var(--glass-bg);border:1px solid var(--glass-brd);border-radius:14px;overflow:hidden;box-shadow:var(--glass-shadow)}
  html:not(.easy) .u2stu{display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"r n s" "r c s";column-gap:10px;row-gap:0;align-items:center;justify-items:start;text-align:start;padding:8px 12px;border-radius:0;background:transparent;box-shadow:none;border-top:1px solid color-mix(in srgb,var(--line-2) 60%,transparent)}
  html:not(.easy) .u2stu:first-child{border-top:0}
  html:not(.easy) .u2stu .ring{grid-area:r;width:36px;height:36px}html:not(.easy) .u2stu .ring::before{inset:4px}html:not(.easy) .u2stu .ring b{font-size:9.5px}
  html:not(.easy) .u2stu>b{grid-area:n;font-size:14px;margin:0}html:not(.easy) .u2stu>small{grid-area:c;font-size:11.5px}
  html:not(.easy) .u2stu .u2st{grid-area:s;font-size:11px;padding:3px 8px;border-radius:999px;white-space:nowrap}
  html:not(.easy) .u2seg button{min-height:34px;font-size:13px}
  html:not(.easy) .ldr .ldpct{font-size:13px}
  html:not(.easy) .hint{font-size:12px}
  html:not(.easy) .warea,html:not(.easy) .win{border-radius:14px}
}
/* غرفة المصادر/الأركان/البرامج (.sttg .rmt): صفوف بدل شبكة صناديق على الجوال */
@media (max-width:640px){
  html:not(.easy) .sttg{grid-template-columns:1fr;gap:0;background:var(--glass-bg);border:1px solid var(--glass-brd);border-radius:14px;overflow:hidden;box-shadow:var(--glass-shadow)}
  html:not(.easy) .rmt{display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"i t c" "i s c";column-gap:10px;row-gap:0;align-items:center;justify-items:start;text-align:start;padding:8px 12px;border-radius:0;background:transparent;box-shadow:none;border-top:1px solid color-mix(in srgb,var(--line-2) 60%,transparent)}
  html:not(.easy) .rmt:first-child{border-top:0}
  html:not(.easy) .rmt .sti{grid-area:i;width:30px;height:30px;border-radius:9px}html:not(.easy) .rmt .sti svg{width:16px;height:16px}
  html:not(.easy) .rmt b{grid-area:t;font-size:14px}html:not(.easy) .rmt small{grid-area:s;font-size:11.5px}
  html:not(.easy) .rmt::after{content:"";grid-area:c;width:7px;height:7px;border:solid var(--ink-3);border-width:0 0 1.5px 1.5px;transform:rotate(45deg)}
  html:not(.easy) .rmt.nx{box-shadow:none;border-inline-start:3px solid var(--sug)}
}
/* صفحة الدخول: النموذج أولًا، والتثبيت والتعريف مطويان تحته */
.login{padding:16px 16px calc(16px + env(safe-area-inset-bottom,0px));align-content:start;place-items:start center}
.login .card{gap:12px;margin-top:12px}
.login .id{gap:6px}.login .id img{height:44px}.login .id b{font-size:17px}.login .id small{font-size:12.5px}
.login form{background:var(--glass-bg);border:1px solid var(--glass-brd);border-radius:18px;padding:14px;display:grid;gap:10px;box-shadow:var(--glass-shadow);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur)}
.login .field label{font-size:13px}.login .field input{min-height:44px;border-radius:12px}
.login details.lnote{border-radius:14px;padding:0;background:var(--glass-bg-2);border:1px solid var(--glass-brd)}
.login details.lnote summary{cursor:pointer;padding:10px 14px;font-size:13.5px;font-weight:600;color:var(--ink-2);list-style:none}
.login details.lnote summary::-webkit-details-marker{display:none}
.login details.lnote p{margin:0 14px 10px;font-size:13px;line-height:1.7;color:var(--ink-2)}
.login details.lnote .wa{margin:0 14px 14px}
.login .instc,.login .pwa{padding:10px 12px;border-radius:14px}.login .instc b{font-size:14px}.login .instc small{font-size:12px}.login .instc img{width:40px;height:40px}