/* ===== منصتي – التصميم: كحلي ودرجاته + أبيض =====
   --brand بيجي من إعدادات المنصة (الافتراضي كحلي #14305E) */

:root {
    --brand: #14305E;
    --navy-950: color-mix(in srgb, var(--brand) 42%, #000);
    --navy-900: color-mix(in srgb, var(--brand) 60%, #000);
    --navy-800: color-mix(in srgb, var(--brand) 75%, #000);
    --navy-700: var(--brand);
    --navy-600: color-mix(in srgb, var(--brand) 85%, #fff);
    --navy-500: color-mix(in srgb, var(--brand) 65%, #fff);
    --navy-300: color-mix(in srgb, var(--brand) 35%, #fff);
    --navy-200: color-mix(in srgb, var(--brand) 20%, #fff);
    --navy-100: color-mix(in srgb, var(--brand) 10%, #fff);
    --navy-50: color-mix(in srgb, var(--brand) 5%, #fff);
    --sky: #4F9BFF;

    /* دفتر وقلم أزرق: حبر كحلي على ورق أبيض */
    --ink: #12285A;
    --ink-deep: var(--navy-900);
    --ink-soft: color-mix(in srgb, var(--blue) 70%, var(--brand));
    --paper: #FFFFFF;
    --rule: #DCE5F3;
    --margin-line: #9DB3DA;
    --scratch: #CBD5E4;

    --bg: #F5F8FD;
    --card: #FFFFFF;
    --text: #0F1F3A;
    --muted: #5E6B85;
    --line: #E2E8F3;
    --success: #0E7A55;
    --success-soft: #E4F6EE;
    --danger: #C23B3B;
    --danger-soft: #FCEBEB;
    --warning: #8A5A00;
    --warning-soft: #FFF4DC;
    --radius: 16px;
    --radius-sm: 10px;
    --shadow-sm: 0 1px 2px rgba(10, 26, 51, .06);
    --shadow: 0 2px 6px rgba(10, 26, 51, .05), 0 10px 28px rgba(10, 26, 51, .07);
    --shadow-lg: 0 18px 50px rgba(10, 26, 51, .16);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: "Readex Pro", system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 1rem;
    line-height: 1.75;
    color: var(--text);
    background: var(--bg);
}

a { color: var(--navy-600); text-decoration: none; }
a:hover { color: var(--navy-800); }
img { max-width: 100%; }
h1, h2, h3, h4 { line-height: 1.35; margin: 0 0 .5em; color: var(--ink); font-weight: 600; }
/* Alexandria للعناوين: عصري وواضح، وReadex Pro للنصوص */
h1, h2, h3, h4 { font-family: "Alexandria", "Readex Pro", sans-serif; }
h1, h2 { font-weight: 700; }
h1 { font-size: 1.9rem; font-weight: 800; }
h2 { font-size: 1.45rem; font-weight: 800; }
h3 { font-size: 1.12rem; font-weight: 700; }
p { margin: 0 0 1em; }

.container { width: 100%; max-width: clamp(1180px, 78vw, 2000px); margin: 0 auto; padding: 0 16px; }
.muted { color: var(--muted); }
.small { font-size: .875rem; }
.ltr { direction: ltr; unicode-bidi: embed; }
.mono { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; letter-spacing: .05em; }
.inline-form { display: inline; margin: 0; }
.stack > * + * { margin-top: 14px; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.row-between { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.spacer { flex: 1; }
.center { text-align: center; }

.icon { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ===== الأزرار ===== */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 11px 20px; border-radius: 12px; border: 1.5px solid transparent;
    font: inherit; font-weight: 700; cursor: pointer; text-decoration: none !important;
    transition: background .15s, border-color .15s, color .15s, transform .15s, box-shadow .15s;
    white-space: nowrap; line-height: 1.4;
}
.btn:active { transform: translateY(1px); }
.btn .icon { width: 20px; height: 20px; }
.btn-sm { padding: 6px 13px; font-size: .9rem; border-radius: 9px; }
.btn-sm .icon { width: 16px; height: 16px; }
.btn-lg { padding: 15px 28px; font-size: 1.1rem; border-radius: 14px; }
.btn-block { width: 100%; }
.btn-primary { background: linear-gradient(135deg, var(--blue), var(--blue-deep)); color: #fff; box-shadow: 0 8px 22px -8px color-mix(in srgb, var(--blue) 60%, transparent); }
.btn-primary:hover { background: linear-gradient(135deg, color-mix(in srgb, var(--blue) 80%, #fff), var(--blue)); color: #fff; }
.btn-white { background: #fff; color: var(--navy-800); }
.btn-white:hover { background: var(--navy-50); color: var(--navy-900); }
.btn-outline { border-color: var(--line); background: #fff; color: var(--navy-800); }
.btn-outline:hover { border-color: var(--navy-500); color: var(--navy-700); }
.btn-ghost-light { border-color: rgba(255, 255, 255, .45); color: #fff; background: transparent; }
.btn-ghost-light:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.btn-ghost { background: transparent; color: var(--muted); }
.btn-ghost:hover { color: var(--navy-800); background: var(--navy-50); }
.btn-danger { background: #fff; border-color: #F1C4C4; color: var(--danger); }
.btn-danger:hover { background: var(--danger-soft); color: var(--danger); }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

/* ===== التنبيهات والشارات ===== */
.alert { padding: 13px 16px; border-radius: 12px; margin: 16px 0; font-weight: 500; }
.alert-success { background: var(--success-soft); color: var(--success); }
.alert-error { background: var(--danger-soft); color: var(--danger); }
.alert-info { background: var(--navy-100); color: var(--navy-800); }
.alert-warning { background: var(--warning-soft); color: var(--warning); }

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
    display: inline-flex; align-items: center; gap: 4px; padding: 2px 11px; border-radius: 999px;
    font-size: .82rem; font-weight: 700; background: var(--navy-100); color: var(--navy-700); line-height: 1.8;
}
.chip-muted { background: #EEF1F7; color: var(--muted); }
.chip-success { background: var(--success-soft); color: var(--success); }
.chip-danger { background: var(--danger-soft); color: var(--danger); }
.chip-warning { background: var(--warning-soft); color: var(--warning); }
.chip-navy { background: var(--navy-700); color: #fff; }

/* ===== الهيدر: زجاجي بسيط، 4 روابط، زر "فعّل بطاقة"، وزر حساب واحد ===== */
.site-header {
    background: rgba(255, 255, 255, .78); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid rgba(226, 232, 243, .8); position: sticky; top: 0; z-index: 50;
}
/* هيدر أعلى ومريح: 88px عالكمبيوتر، 68px عالجوال */
.header-row { display: flex; align-items: center; gap: 32px; min-height: 88px; }
.brand { display: flex; align-items: center; gap: 12px; color: var(--navy-900) !important; flex: none; }
.brand-logo { width: 48px; height: 48px; border-radius: 14px; object-fit: contain; }
.brand-name { font-size: 1.5rem; font-weight: 800; }
/* اسم لاتيني (مثل Prime Academy): اللوجو على اليسار، والكلمة الأولى كبيرة وتحتها الباقي بحروف متباعدة، زي اللوجو */
.brand:has(.is-latin), .footer-brand:has(.is-latin), .dash-brand:has(.is-latin) { direction: ltr; }
.brand:has(.is-latin) { gap: 10px; }
.brand:has(.is-latin) .brand-logo { width: 52px; height: 52px; border-radius: 0; }
.brand-name.is-latin { display: flex; flex-direction: column; align-items: center; line-height: 1; font-family: "Alexandria", "Readex Pro", sans-serif; }
/* هوية ذهبية: اللوجو ذهبي، PRIME كحلي على الأبيض وأبيض على الغامق، و ACADEMY ذهبي */
.brand-name.is-latin b { font-weight: 900; font-size: 1.5rem; letter-spacing: .08em; text-transform: uppercase; color: #14305E; }
.brand-name.is-latin small { font-size: .6rem; font-weight: 700; letter-spacing: .5em; margin-inline-end: -.5em; text-transform: uppercase; margin-top: 4px; color: #C88A00; }
/* على الخلفيات الغامقة (واجهة الرئيسية، التذييل، لوحة التحكم) */
.is-home .site-header:not(.is-scrolled) .brand-name.is-latin b, .footer-brand .brand-name.is-latin b, .dash-brand .brand-name.is-latin b { color: #fff; }
.is-home .site-header:not(.is-scrolled) .brand-name.is-latin small, .footer-brand .brand-name.is-latin small, .dash-brand .brand-name.is-latin small { color: #FFC23D; }
.footer-brand .brand-name.is-latin b, .dash-brand .brand-name.is-latin b { font-size: 1.25rem; }
.footer-brand .brand-name.is-latin small, .dash-brand .brand-name.is-latin small { font-size: .52rem; }
.footer-brand:has(.is-latin) img, .dash-brand:has(.is-latin) img { border-radius: 0; }
@media (min-width: 901px) {
    .site-nav .nav-links a { font-size: 1.02rem; padding: 10px 14px; }
    .site-nav .nav-actions .btn { padding-block: 11px; }
}
.site-nav { display: flex; align-items: center; gap: 6px; flex: 1; }
.site-nav .nav-links { display: flex; gap: 4px; }
.site-nav .nav-links a {
    position: relative; color: var(--muted); font-weight: 600; padding: 8px 12px; border-radius: 10px; white-space: nowrap; transition: color .15s;
}
.site-nav .nav-links a:hover { color: var(--navy-900); }
/* الصفحة الحالية: خط أزرق صغير تحت الرابط */
.site-nav .nav-links a.active { color: var(--navy-900); }
.site-nav .nav-links a.active::after {
    content: ""; position: absolute; inset-inline: 12px; bottom: 2px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--cyan), var(--blue));
}
.site-nav .nav-actions { display: flex; align-items: center; gap: 10px; margin-inline-start: auto; }
.nav-cta { box-shadow: 0 8px 20px -10px color-mix(in srgb, var(--blue) 80%, transparent); }

/* زر الحساب: صورة واسم، وقائمة صغيرة */
.nav-account { position: relative; }
.nav-account > summary {
    list-style: none; display: flex; align-items: center; gap: 8px; padding: 4px 10px 4px 4px; border-radius: 999px; cursor: pointer;
    border: 1px solid var(--line); background: #fff; font-weight: 700; color: var(--navy-900); font-size: .92rem;
}
.nav-account > summary::-webkit-details-marker { display: none; }
.nav-account > summary:hover, .nav-account[open] > summary { border-color: color-mix(in srgb, var(--blue) 32%, #fff); }
.nav-account-name { max-width: 9em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-menu {
    position: absolute; top: calc(100% + 8px); inset-inline-end: 0; min-width: 200px; padding: 6px; z-index: 60;
    background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 24px 50px -20px rgba(10, 26, 51, .35);
    animation: menu-in .18s ease both;
}
.nav-menu a, .nav-menu button {
    display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border: 0; border-radius: 10px; background: none;
    font: inherit; font-weight: 600; color: var(--text) !important; cursor: pointer; text-align: start;
}
.nav-menu a:hover, .nav-menu button:hover { background: var(--navy-50); }
.nav-menu .icon { width: 18px; height: 18px; color: var(--blue); }
.nav-menu form { margin: 4px 0 0; padding-top: 4px; border-top: 1px solid var(--line); }
.nav-menu form button { color: var(--danger) !important; }
.nav-menu form .icon { color: var(--danger); }
@keyframes menu-in { from { opacity: 0; transform: translateY(-6px); } }

.nav-toggle { display: none; margin-inline-start: auto; background: none; border: 0; padding: 8px; cursor: pointer; color: var(--navy-800); }
.header-quick { display: none; }

/* الرئيسية: الهيدر غامق وبيذوب مع الواجهة، وبيرجع زجاجي أبيض أول ما الطالب ينزل */
.site-header { transition: background-color .3s, border-color .3s, box-shadow .3s; }
.is-home .site-header:not(.is-scrolled) { background: var(--night); border-bottom-color: rgba(255, 255, 255, .08); }
.is-home .site-header:not(.is-scrolled) .brand { color: #fff !important; }
.is-home .site-header:not(.is-scrolled) .brand-logo { background: transparent; }
.is-home .site-header:not(.is-scrolled) .nav-links a { color: color-mix(in srgb, var(--brand) 22%, #fff); }
.is-home .site-header:not(.is-scrolled) .nav-links a:hover { color: #fff; }
.is-home .site-header:not(.is-scrolled) .nav-account > summary { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .18); color: #fff; }
.is-home .site-header:not(.is-scrolled) .site-nav .btn-outline,
.is-home .site-header:not(.is-scrolled) .header-quick.btn-outline { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .25); color: #fff !important; }
.is-home .site-header:not(.is-scrolled) .nav-toggle { color: #fff; }
.site-header.is-scrolled { box-shadow: 0 10px 30px -22px rgba(10, 26, 51, .45); }
/* قائمة الجوال بالرئيسية: لوحة بيضاء، فالروابط بترجع غامقة */
@media (max-width: 900px) {
    .is-home .site-header:not(.is-scrolled) .nav-links a { color: var(--navy-900); }
    .is-home .site-header:not(.is-scrolled) .nav-account > summary { background: #fff; border-color: var(--line); color: var(--navy-900); }
}

@media (max-width: 900px) {
    .nav-toggle { display: block; }
    .header-quick { display: inline-flex; margin-inline-start: auto; }
    .header-quick + .nav-toggle { margin-inline-start: 0; }
    .header-row { min-height: 68px; gap: 10px; }
    .brand-logo { width: 40px; height: 40px; border-radius: 12px; }
    .brand-name { font-size: 1.3rem; }
    .site-nav {
        display: none; position: absolute; top: 68px; inset-inline: 0; background: #fff;
        max-height: calc(100vh - 68px); overflow-y: auto;
        flex-direction: column; align-items: stretch; gap: 10px; padding: 12px 16px 18px;
        border-bottom: 1px solid var(--line); box-shadow: var(--shadow);
    }
    .site-nav.open { display: flex; }
    .site-nav .nav-links { flex-direction: column; }
    .site-nav .nav-links a { padding: 12px; color: var(--navy-900); }
    .site-nav .nav-links a.active { background: var(--navy-50); }
    .site-nav .nav-links a.active::after { display: none; }
    .site-nav .nav-actions { margin: 0; flex-direction: column; align-items: stretch; }
    .nav-account > summary { justify-content: flex-start; }
    .nav-menu { position: static; box-shadow: none; margin-top: 6px; }
}

.site-main { min-height: calc(100vh - 300px); padding-bottom: 56px; }

/* ===== الفوتر ===== */
.site-footer { background: var(--night); color: color-mix(in srgb, var(--brand) 35%, #fff); padding: 52px 0 22px; margin-top: 24px; }
.site-footer a { color: #DCE4F3; }
.site-footer a:hover { color: #fff; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 28px; }
.footer-grid h4 { color: #fff; font-size: 1rem; margin-bottom: 12px; }
.footer-grid ul { list-style: none; padding: 0; margin: 0; }
.footer-grid li { margin: 6px 0; }
.footer-brand { display: flex; align-items: center; gap: 10px; color: #fff; font-weight: 800; font-size: 1.25rem; margin-bottom: 10px; }
.footer-brand img { width: 40px; height: 40px; border-radius: 11px; object-fit: contain; }
.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, .1); margin-top: 32px; padding-top: 16px; font-size: .88rem;
    display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; justify-content: space-between;
}
.footer-legal { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.footer-legal a { color: color-mix(in srgb, var(--brand) 22%, #fff); }
@media (max-width: 640px) { .footer-bottom { justify-content: center; text-align: center; } .footer-legal { justify-content: center; } }
.link-button {
    display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; cursor: pointer;
    font: inherit; color: #DCE4F3; text-align: start;
}
.link-button:hover { color: #fff; }
.link-button .icon { width: 17px; height: 17px; }
.link-button[hidden], .install-card[hidden] { display: none; }

/* زر "نزّل التطبيق" بصفحة دوراتي */
.install-card {
    display: flex; align-items: center; gap: 14px; width: 100%; text-align: start; cursor: pointer; font: inherit; color: inherit;
    border: 1px dashed color-mix(in srgb, var(--blue) 32%, #fff); background: linear-gradient(135deg, color-mix(in srgb, var(--blue) 5%, #fff), #fff);
}
.install-card strong { display: block; color: var(--navy-900); font-size: 1.05rem; }
.install-card:hover { border-color: var(--blue); }

/* صفحات الشروط والخصوصية */
.legal-page { max-width: 780px; margin: 32px auto 48px; background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: clamp(20px, 4vw, 44px); }
.legal-page h1 { margin: 18px 0 4px; }
.legal-page h2 { font-size: 1.2rem; margin: 26px 0 8px; color: var(--navy-900); }
.legal-page p, .legal-page li { line-height: 2; color: var(--text); }
.legal-page ul { padding-inline-start: 22px; margin: 0; }
.legal-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.legal-tabs a { padding: 7px 14px; border-radius: 999px; background: var(--navy-50); color: var(--muted) !important; font-weight: 600; font-size: .92rem; }
.legal-tabs a.active { background: var(--navy-900); color: #fff !important; }

/* سجل الأخطاء */
.error-list { border-top: 1px solid var(--line); }
.error-item { border-bottom: 1px solid var(--line); }
.error-item > summary {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 12px 16px; cursor: pointer; list-style: none;
}
.error-item > summary::-webkit-details-marker { display: none; }
.error-item > summary:hover { background: var(--navy-50); }
.error-item .chip .icon { width: 14px; height: 14px; }
.error-msg { flex-basis: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.error-item pre {
    margin: 0 16px 14px; padding: 12px; max-height: 320px; overflow: auto; background: var(--navy-900); color: #DCE4F3;
    border-radius: 12px; font-size: .78rem; line-height: 1.6; white-space: pre-wrap; word-break: break-word; text-align: left;
}
@media (max-width: 820px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } }

/* ===== الصفحة الرئيسية (عصرية) =====
   كحلي غامق + إضاءات زرقاء، عنوان كبير، ومشهد من المنصة نفسها. الحركة: دخول المشهد + قشط البطاقة بس */
:root {
    --blue: #2F6BFF;
    --blue-deep: color-mix(in srgb, var(--blue) 82%, #000);
    --cyan: #5CC8FF;
    /* أفتح شوي عشان الشريط العلوي والواجهة يتناسقوا مع أزرق اللوجو */
    --night: color-mix(in srgb, var(--brand) 58%, #000);
}

.btn-glow {
    background: linear-gradient(135deg, var(--blue), var(--blue-deep)); color: #fff !important;
    box-shadow: 0 10px 30px -8px color-mix(in srgb, var(--blue) 65%, transparent), inset 0 1px 0 rgba(255, 255, 255, .25);
}
.btn-glow:hover { background: linear-gradient(135deg, color-mix(in srgb, var(--blue) 80%, #fff), var(--blue)); }
.btn-glass { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .22); color: #fff !important; backdrop-filter: blur(8px); }
.btn-glass:hover { background: rgba(255, 255, 255, .16); }

/* الواجهة */
.hx { position: relative; overflow: hidden; background: var(--night); color: #fff; padding: 72px 0 120px; isolation: isolate; }
.hx-glow { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.hx-glow span { position: absolute; border-radius: 50%; filter: blur(80px); }
.hx-glow .g1 { width: 520px; height: 520px; background: color-mix(in srgb, var(--blue) 55%, transparent); top: -140px; inset-inline-end: -120px; }
.hx-glow .g2 { width: 460px; height: 460px; background: rgba(92, 200, 255, .28); bottom: -200px; inset-inline-start: 8%; }
.hx-glow .g3 { width: 380px; height: 380px; background: rgba(120, 90, 255, .25); top: 20%; inset-inline-start: 35%; }
/* خط أفق ناعم تحت الواجهة بدل شبكة المربعات */
.hx::after {
    content: ""; position: absolute; inset: auto 0 0; height: 1px; z-index: -1; pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(92, 200, 255, .45), transparent);
}
.hx-grid { display: grid; grid-template-columns: 1.08fr .92fr; gap: 48px; align-items: center; }
.hx-pill {
    display: inline-flex; align-items: center; gap: 8px; padding: 7px 16px; border-radius: 999px; font-size: .9rem; font-weight: 500;
    background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14); color: color-mix(in srgb, var(--blue) 22%, #fff);
}
.hx-pill .icon { width: 18px; height: 18px; color: var(--cyan); }
.hx h1 { color: #fff; font-size: clamp(1.8rem, 1.2rem + 3vw, 3.35rem); font-weight: 800; line-height: 1.38; letter-spacing: -.01em; margin: 22px 0 18px; }
.hx .lead { font-size: 1.18rem; color: color-mix(in srgb, var(--brand) 22%, #fff); margin: 0; max-width: 32em; }
.hx-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 32px; }
.hx-proof { list-style: none; margin: 34px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 22px; color: color-mix(in srgb, var(--brand) 35%, #fff); font-size: .93rem; }
.hx-proof li { display: flex; align-items: center; gap: 8px; }
.hx-proof .icon { width: 18px; height: 18px; color: var(--cyan); }

/* المشهد */
.hx-scene { position: relative; min-height: max(480px, 25vw); }
.scene-player {
    position: absolute; top: 34px; inset-inline-start: 0; width: 84%;
    background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); border-radius: 20px; padding: 12px;
    backdrop-filter: blur(14px); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .8);
    animation: rise .8s .1s cubic-bezier(.2, .8, .2, 1) both;
}
.scene-thumb { position: relative; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: linear-gradient(135deg, #10306E, var(--navy-900)); }
/* الصورة المرفوعة بتعبّي إطار الفيديو (أحسن إشي صورة عرضية 16:9) */
.scene-thumb > img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* صورة الدرس العامة: شعار المنصة بالنص، وحواليه رموز تعليمية خفيفة (ما بتخص أستاذ ولا مادة) */
.thumb-brand {
    position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
    background: radial-gradient(circle at 50% 45%, rgba(92, 200, 255, .28), transparent 60%), linear-gradient(135deg, var(--blue-deep), var(--navy-900));
}
.thumb-logo { width: 88px; height: 88px; object-fit: contain; filter: drop-shadow(0 14px 26px rgba(0, 0, 0, .45)); }
.thumb-name { font-family: "Alexandria", sans-serif; font-weight: 800; font-size: clamp(1.1rem, 2.2vw, 1.5rem); color: #fff; }
.doodle { position: absolute; color: rgba(220, 232, 255, .28); }
.doodle .icon { width: 30px; height: 30px; }
.doodle.d1 { top: 12%; left: 9%; transform: rotate(-12deg); }
.doodle.d2 { top: 14%; right: 26%; transform: rotate(10deg); }
.doodle.d3 { bottom: 16%; left: 16%; transform: rotate(8deg); }
.doodle.d4 { bottom: 14%; right: 12%; }
.doodle.d5 { top: 42%; left: 26%; transform: rotate(-6deg); }
.doodle.d6 { top: 44%; right: 8%; transform: rotate(12deg); }
.scene-avatar.scene-logo { background: transparent; object-fit: contain; padding: 0; border-radius: 0; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .35)); }
.thumb-chip { position: absolute; top: 10px; inset-inline-start: 10px; padding: 3px 11px; border-radius: 999px; background: color-mix(in srgb, var(--night) 70%, transparent); font-size: .78rem; }
.thumb-play {
    position: absolute; bottom: 12px; inset-inline-end: 12px; width: 48px; height: 48px; border-radius: 50%;
    display: grid; place-items: center; background: linear-gradient(135deg, var(--blue), var(--blue-deep)); color: #fff; box-shadow: 0 0 0 6px color-mix(in srgb, var(--blue) 22%, transparent), 0 10px 22px -8px color-mix(in srgb, var(--blue) 80%, transparent);
}
.thumb-play .icon { width: 22px; height: 22px; fill: currentColor; stroke: none; }
.scene-meta { display: flex; align-items: center; gap: 12px; padding: 14px 6px 10px; }
.scene-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; display: grid; place-items: center; background: var(--blue); font-weight: 700; flex: none; }
.scene-meta strong { display: block; font-size: 1rem; }
.scene-meta span { color: color-mix(in srgb, var(--brand) 35%, #fff); font-size: .85rem; }
.scene-bar { height: 5px; border-radius: 5px; background: rgba(255, 255, 255, .12); margin: 0 6px 6px; overflow: hidden; }
.scene-bar span { display: block; width: 42%; height: 100%; border-radius: 5px; background: linear-gradient(90deg, var(--cyan), var(--blue)); }

.scene-progress {
    position: absolute; display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 16px;
    background: #fff; color: var(--ink); box-shadow: 0 24px 50px -18px rgba(0, 0, 0, .55);
}
.scene-progress strong { display: block; font-size: .95rem; }
.scene-progress span { color: var(--muted); font-size: .8rem; }
.scene-progress { top: 0; inset-inline-end: 0; animation: rise .8s .35s cubic-bezier(.2, .8, .2, 1) both; }
.ring { width: 44px; height: 44px; transform: rotate(-90deg); flex: none; }
.ring circle { fill: none; stroke-width: 5; }
.ring-bg { stroke: #E3EAF7; }
.ring-fg { stroke: var(--blue); stroke-linecap: round; stroke-dasharray: 67 100; }

.scene-card.prepaid {
    position: absolute; bottom: -34px; inset-inline-end: -2%; width: 14.75rem; aspect-ratio: 85.6 / 54; padding: 16px 18px; border-radius: 16px;
    background: linear-gradient(145deg, #2A5298, #163570 60%, #112B5C); color: #fff; overflow: hidden;
    display: flex; flex-direction: column; justify-content: space-between;
    border: 1px solid rgba(255, 255, 255, .16); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .75);
    transform: rotate(-6deg); animation: card-in .9s .45s cubic-bezier(.2, .8, .2, 1) both;
}
.prepaid > * { position: relative; }
.prepaid-head { display: flex; align-items: center; gap: 8px; }
/* اللوجو على البطاقة بدون خلفية، بس بظل خفيف عشان يبيّن على الأزرق */
.prepaid-head img { width: 32px; height: 32px; object-fit: contain; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .35)); }
.prepaid-head strong { font-family: "Alexandria", sans-serif; font-weight: 700; }
.prepaid-code { position: relative; direction: ltr; text-align: center; border-radius: 9px; overflow: hidden; background: rgba(255, 255, 255, .1); padding: 9px 6px; }
.code-text { font-family: "Alexandria", sans-serif; font-weight: 700; font-size: clamp(.9rem, 1.4vw, 1.05rem); letter-spacing: .06em; white-space: nowrap; }
.prepaid-foot { display: flex; justify-content: space-between; color: #AFC0E0; font-size: .75rem; }
.scratch { position: absolute; inset: 0; width: 100%; height: 100%; }
.scratch-path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: coin-scratch 1.6s 1.5s cubic-bezier(.45, 0, .35, 1) forwards; }
.scratch-silver { animation: silver-fade .5s 3.1s ease forwards; }

@keyframes rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes card-in { from { opacity: 0; transform: translateY(30px) rotate(-14deg); } to { opacity: 1; transform: rotate(-6deg); } }
@keyframes coin-scratch { to { stroke-dashoffset: 0; } }
@keyframes silver-fade { to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
    .scene-player, .scene-progress, .scene-card.prepaid { animation: none; }
    .scratch-path { animation: none; stroke-dashoffset: 0; }
    .scratch-silver { animation: none; opacity: 0; }
}

@media (max-width: 980px) {
    .hx { padding: 44px 0 96px; }
    .hx-grid { grid-template-columns: 1fr; gap: 40px; }
    .hx-scene { min-height: 0; display: grid; gap: 14px; }
    .scene-player, .scene-progress, .scene-card.prepaid { position: relative; inset: auto; width: auto; max-width: none; }
    .scene-player { width: 100%; }
    .scene-card.prepaid { width: min(100%, 290px); justify-self: center; margin-top: 6px; }
}

/* أرقام المنصة: شريط أبيض فوق طرف الواجهة */
.hx-stats {
    position: relative; z-index: 2; margin-top: -58px; display: grid; grid-template-columns: repeat(4, 1fr);
    background: #fff; border-radius: 22px; box-shadow: 0 24px 60px -28px rgba(10, 26, 51, .35); border: 1px solid var(--line);
}
.hx-stats div { padding: 22px 16px; text-align: center; }
.hx-stats div + div { border-inline-start: 1px solid var(--line); }
.hx-stats strong { display: block; font-family: "Alexandria", sans-serif; font-size: 2rem; font-weight: 800; color: var(--ink); line-height: 1.2; }
.hx-stats span { color: var(--muted); font-size: .9rem; }
@media (max-width: 700px) {
    .hx-stats { grid-template-columns: repeat(2, 1fr); }
    .hx-stats div:nth-child(3) { border-inline-start: 0; }
    .hx-stats div:nth-child(n+3) { border-top: 1px solid var(--line); }
}

/* الصفوف: كل صف ببطاقة زي بطاقة الجلوس بالامتحان، رأس كحلي وطرف مثقّب للدخول */
.grade-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(18.5rem, 100%), 1fr)); gap: 22px; }
.grade-card {
    position: relative; display: flex; flex-direction: column; border-radius: 20px; background: #fff; color: inherit !important;
    box-shadow: 0 1px 0 var(--line), 0 18px 40px -30px rgba(10, 26, 51, .55); transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s;
}
.grade-card:hover { transform: translateY(-4px); box-shadow: 0 1px 0 var(--line), 0 28px 50px -28px color-mix(in srgb, var(--blue) 60%, transparent); }
.grade-card:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.grade-top {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 22px; border-radius: 20px 20px 0 0;
    background: linear-gradient(135deg, var(--navy-900), #163570); color: #fff;
}
.grade-level { font-size: .92rem; font-weight: 600; color: color-mix(in srgb, var(--blue) 22%, #fff); }
.grade-icon { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: rgba(255, 255, 255, .1); color: var(--cyan); }
.grade-icon .icon { width: 22px; height: 22px; }
.grade-body { padding: 20px 22px 6px; display: flex; flex-direction: column; gap: 10px; }
.grade-name { font-family: "Alexandria", sans-serif; font-weight: 800; font-size: 1.55rem; line-height: 1.35; color: var(--ink); }
.grade-fields { display: flex; flex-wrap: wrap; gap: 6px; }
.grade-fields span { padding: 3px 11px; border-radius: 8px; background: var(--bg); border: 1px solid var(--line); color: #31508F; font-size: .82rem; }
/* الثقوب: دايرتين بلون الصفحة على طرفي الخط المنقّط */
.grade-perf { position: relative; height: 0; margin: 18px 0 0; border-top: 2px dashed var(--line); }
.grade-perf::before, .grade-perf::after { content: ""; position: absolute; top: -12px; width: 22px; height: 22px; border-radius: 50%; background: var(--bg); }
.grade-perf::before { inset-inline-start: -11px; }
.grade-perf::after { inset-inline-end: -11px; }
.grade-go { display: flex; align-items: center; justify-content: space-between; padding: 14px 22px 16px; font-weight: 600; color: var(--blue); }
.grade-go .icon { width: 20px; height: 20px; transition: transform .25s; }
.grade-card:hover .grade-go .icon { transform: translateX(-4px); }
@media (prefers-reduced-motion: reduce) { .grade-card, .grade-go .icon { transition: none; } .grade-card:hover { transform: none; } }

/* العروض والأخبار */
.news-mosaic { display: grid; grid-template-columns: 1.4fr 1fr; grid-template-rows: auto auto; gap: 18px; }
.news-mosaic.single { grid-template-columns: minmax(0, 760px); }
.news-hero {
    grid-row: span 2; position: relative; overflow: hidden; border-radius: 24px; min-height: 340px; display: flex; align-items: flex-end;
    background: linear-gradient(135deg, var(--blue-deep), var(--navy-900)); color: #fff !important;
}
.news-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.news-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, color-mix(in srgb, var(--night) 92%, transparent), color-mix(in srgb, var(--night) 20%, transparent) 70%); }
.news-hero-body { position: relative; z-index: 1; padding: 28px; }
.news-hero h3 { color: #fff; font-size: 1.7rem; margin: 12px 0 8px; }
.news-hero p { color: #C9D6EE; margin: 0 0 18px; }
.news-side {
    display: flex; flex-direction: column; gap: 8px; padding: 22px; border-radius: 22px; background: #fff; border: 1px solid var(--line);
    color: inherit !important; transition: border-color .2s;
}
.news-side:hover { border-color: color-mix(in srgb, var(--blue) 32%, #fff); }
.news-side h3 { margin: 0; font-size: 1.12rem; }
.news-side p { margin: 0; color: var(--muted); font-size: .93rem; }
.news-side .news-date { margin-top: auto; color: var(--muted); font-size: .82rem; }
.news-tag { align-self: flex-start; display: inline-block; padding: 4px 12px; border-radius: 999px; font-size: .8rem; font-weight: 600; background: color-mix(in srgb, var(--blue) 9%, #fff); color: var(--blue); }
.news-hero .news-tag { background: rgba(255, 255, 255, .16); color: #fff; }
.news-tag.tag-offer { background: var(--blue); color: #fff; }
@media (max-width: 900px) {
    .news-mosaic { grid-template-columns: 1fr; }
    .news-hero { grid-row: auto; min-height: 280px; }
}

/* الخطوات: مسار متصل من المكتب للدرس، مش بطاقات منفصلة */
.step-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; position: relative; }
.step-cards::before {
    content: ""; position: absolute; top: 27px; inset-inline: 16.6%; height: 2px;
    background: repeating-linear-gradient(90deg, var(--blue) 0 10px, transparent 10px 18px); opacity: .45;
}
.step-cards li { position: relative; text-align: center; padding: 0 8px; }
.step-num {
    position: relative; z-index: 1; width: 56px; height: 56px; margin: 0 auto 16px; border-radius: 50%; display: grid; place-items: center;
    font-family: "Alexandria", sans-serif; font-weight: 800; font-size: 1.35rem; color: #fff;
    background: linear-gradient(135deg, var(--blue), var(--blue-deep)); box-shadow: 0 0 0 8px var(--bg), 0 14px 26px -12px color-mix(in srgb, var(--blue) 80%, transparent);
}
.step-cards strong { display: block; font-family: "Alexandria", sans-serif; font-size: 1.2rem; color: var(--ink); margin-bottom: 6px; }
.step-cards p { margin: 0 auto; color: var(--muted); max-width: 22em; }
@media (max-width: 800px) {
    .step-cards { grid-template-columns: 1fr; gap: 22px; }
    .step-cards::before { top: 28px; bottom: 28px; inset-inline: auto; inset-inline-start: 27px; width: 2px; height: auto; background: repeating-linear-gradient(180deg, var(--blue) 0 10px, transparent 10px 18px); }
    .step-cards li { display: grid; grid-template-columns: 56px 1fr; column-gap: 16px; text-align: start; padding: 0; }
    .step-num { grid-row: span 2; margin: 0; }
    .step-cards p { margin: 0; }
}

/* المعلمون */
.teacher-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(13.75rem, 100%), 1fr)); gap: 18px; }
/* المعلمون: صورة طولية والاسم فوقها، زي غلاف */
.teacher-tile {
    position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; min-height: 320px; padding: 18px;
    border-radius: 22px; overflow: hidden; isolation: isolate; color: #fff !important; background: linear-gradient(135deg, #2A5298, var(--navy-900));
}
.teacher-tile:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.teacher-media { position: absolute; inset: 0; z-index: -2; display: grid; place-items: center; }
.teacher-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.teacher-tile:hover .teacher-media img { transform: scale(1.04); }
.teacher-tile::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, color-mix(in srgb, var(--night) 94%, transparent) 0%, color-mix(in srgb, var(--night) 55%, transparent) 38%, transparent 66%); }
.teacher-initial { font-family: "Alexandria", sans-serif; font-weight: 800; font-size: 4.4rem; color: rgba(255, 255, 255, .85); margin-bottom: 60px; }
.teacher-tile strong { font-family: "Alexandria", sans-serif; font-size: 1.2rem; color: #fff; }
.teacher-subjects { color: #9FD8FF; font-size: .9rem; }
.teacher-count { color: color-mix(in srgb, var(--brand) 22%, #fff); font-size: .82rem; }
@media (prefers-reduced-motion: reduce) { .teacher-media img { transition: none; } .teacher-tile:hover .teacher-media img { transform: none; } }

/* الدعوة الأخيرة */
.cta-band {
    position: relative; overflow: hidden; isolation: isolate; border-radius: 28px; padding: 44px; background: var(--night); color: #fff;
    display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
.cta-band h2 { color: #fff; font-size: clamp(1.7rem, 3.4vw, 2.4rem); margin: 0 0 6px; }
.cta-band p { color: color-mix(in srgb, var(--brand) 22%, #fff); margin: 0; max-width: 36em; white-space: pre-line; }
.cta-actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* صفحة الأخبار */
.news-kind {
    position: absolute; top: 12px; inset-inline-start: 12px; padding: 3px 12px; border-radius: 999px;
    font-size: .8rem; font-weight: 600; background: var(--ink); color: #fff;
}
.news-kind.kind-offer { background: var(--blue); }
.news-kind.kind-announcement { background: var(--ink-deep); }
.news-kind.kind-news { background: var(--navy-500); }

.grid-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .grid-3, .grid-4 { grid-template-columns: 1fr; } }

.card.news-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.news-media { position: relative; aspect-ratio: 1200 / 630; background: linear-gradient(135deg, var(--blue-deep), var(--navy-900)); display: grid; place-items: center; }
.news-media img { width: 100%; height: 100%; object-fit: cover; }
.news-media > .icon { width: 48px; height: 48px; color: rgba(255, 255, 255, .8); }
.news-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.news-body h3 { margin: 0; }
.news-body p { margin: 0; color: var(--muted); font-size: .93rem; }
.news-date { margin-top: auto; padding-top: 8px; color: var(--muted); font-size: .85rem; display: flex; align-items: center; gap: 6px; }
.news-date .icon { width: 16px; height: 16px; }

.news-article { max-width: 820px; margin: 0 auto; padding: 0 0 28px; overflow: hidden; }
.news-article > *:not(img) { margin-inline: 28px; }
.news-article-img { width: 100%; display: block; margin-bottom: 22px; }
.news-article > :first-child:not(img) { margin-top: 28px; }
.lead-text { font-size: 1.15rem; font-weight: 600; color: var(--ink); }
.icon-inline { width: 16px; height: 16px; vertical-align: -3px; }

/* تركيز واضح للكيبورد */
a:focus-visible, button:focus-visible, .btn:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 8px; }

/* ===== العناوين ===== */
.section { padding: 72px 0 0; }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }
.section-head h2 { margin: 0; font-size: clamp(1.6rem, 3vw, 2rem); }
.section-head p { margin: 4px 0 0; color: var(--muted); }
.eyebrow { color: var(--navy-500); font-weight: 800; font-size: .85rem; letter-spacing: .02em; }

/* ===== الكروت ===== */
.grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr)); }
.grid-2 { grid-template-columns: repeat(auto-fill, minmax(min(20rem, 100%), 1fr)); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } }

.card { background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 22px; }
.card-link { display: block; color: inherit !important; transition: border-color .2s, box-shadow .2s; }
.card-link:hover { border-color: color-mix(in srgb, var(--blue) 32%, #fff); box-shadow: 0 18px 40px -24px color-mix(in srgb, var(--blue) 50%, transparent); }

.icon-bubble {
    width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center;
    background: linear-gradient(135deg, var(--blue), var(--blue-deep)); color: #fff;
    box-shadow: 0 10px 24px -10px color-mix(in srgb, var(--blue) 70%, transparent);
}
.icon-bubble .icon { width: 28px; height: 28px; }
.icon-bubble.soft { background: color-mix(in srgb, var(--blue) 9%, #fff); color: var(--blue); box-shadow: none; }
/* الأساتذة */
.teacher-photo {
    width: 96px; height: 96px; border-radius: 50%; object-fit: cover; margin: 0 auto 12px; display: grid; place-items: center;
    background: linear-gradient(135deg, var(--blue), var(--navy-900)); color: #fff; font-size: 2rem; font-weight: 800;
    border: 4px solid color-mix(in srgb, var(--blue) 9%, #fff);
}
.teacher-photo-lg { width: 128px; height: 128px; font-size: 2.6rem; }
.avatar {
    width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; flex: none; object-fit: cover;
    background: var(--navy-700); color: #fff; font-weight: 800; font-size: 1.05rem;
}
.avatar-sm { width: 32px; height: 32px; font-size: .85rem; }

/* بطاقة الدورة */
.course-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.course-thumb { position: relative; aspect-ratio: 16 / 9; background: linear-gradient(135deg, var(--blue-deep), var(--navy-900)); display: grid; place-items: center; overflow: hidden; }
.course-thumb img { width: 100%; height: 100%; object-fit: cover; }
.course-thumb .icon { width: 52px; height: 52px; color: rgba(255, 255, 255, .85); }
.course-thumb .chip { position: absolute; top: 10px; inset-inline-start: 10px; background: rgba(10, 26, 51, .78); color: #fff; backdrop-filter: blur(4px); }
.course-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.course-body h3 { margin: 0; }
.course-teacher { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: .92rem; }
.course-meta { display: flex; justify-content: space-between; align-items: center; gap: 8px; color: var(--muted); font-size: .9rem; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--line); }
.price { color: var(--blue-deep); font-weight: 800; }
.course-meta .icon { width: 18px; height: 18px; vertical-align: -4px; }
.alert .icon, .nav-actions .icon { width: 18px; height: 18px; vertical-align: -4px; }

/* ===== المسار ===== */
.page-hero {
    position: relative; overflow: hidden; color: #fff; padding: 40px 0 56px; margin-bottom: 32px;
    background:
        radial-gradient(420px 260px at 12% 0%, color-mix(in srgb, var(--blue) 45%, transparent), transparent 70%),
        radial-gradient(360px 240px at 85% 120%, rgba(92, 200, 255, .22), transparent 70%),
        var(--night);
}
.page-hero.has-image { background: linear-gradient(0deg, color-mix(in srgb, var(--night) 92%, transparent), color-mix(in srgb, var(--night) 60%, transparent)), var(--hero-image) center / cover no-repeat; }
.page-hero h1 { color: #fff; margin: 10px 0 8px; font-size: clamp(1.8rem, 3.6vw, 2.6rem); font-weight: 800; }
.page-hero p { color: color-mix(in srgb, var(--brand) 22%, #fff); margin: 0; font-size: 1.05rem; }
.page-hero .chip { background: rgba(255, 255, 255, .14); color: #fff; border: 1px solid rgba(255, 255, 255, .2); }
.page-hero .chip-navy { background: var(--blue); border-color: var(--blue); color: #fff; }
.breadcrumb { display: flex; flex-wrap: wrap; gap: 6px; font-size: .9rem; color: #AFC0DD; }
.breadcrumb a { color: #DCE4F3; }
.breadcrumb a:hover { color: #fff; }
.breadcrumb > * + *::before { content: "‹"; margin-inline-end: 6px; color: #8FA3C6; }
.breadcrumb.dark { color: var(--muted); }
.breadcrumb.dark a { color: var(--navy-600); }

/* تبويبات الحقول */
.field-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.field-tab { padding: 10px 20px; border-radius: 999px; background: #fff; border: 1.5px solid var(--line); color: var(--ink); cursor: pointer; font: inherit; font-weight: 600; }
.field-tab.active, .field-tab:hover { background: linear-gradient(135deg, var(--blue), var(--blue-deep)); border-color: transparent; color: #fff; }
.field-panel[hidden] { display: none; }

.subject-tile { display: flex; align-items: center; gap: 14px; padding: 18px; }
.subject-tile h3 { margin: 0; font-size: 1.05rem; }

/* ===== فلاتر التصفح ===== */
.filter-bar {
    position: relative; z-index: 2; margin-top: -64px;
    background: #fff; border: 1px solid var(--line); border-radius: 22px; padding: 18px; box-shadow: 0 24px 60px -28px rgba(10, 26, 51, .4);
    display: grid; grid-template-columns: repeat(5, 1fr) auto; gap: 10px; align-items: end; margin-bottom: 22px;
}
.filter-bar label { display: block; font-size: .82rem; font-weight: 700; color: var(--muted); margin-bottom: 4px; }
@media (max-width: 960px) { .filter-bar { grid-template-columns: repeat(2, 1fr); } }

/* ملخص الفلاتر على الجوال: اللي اختاره الطالب، وزر "غيّر" بيفتح الفلاتر */
.filter-summary { display: none; }
@media (max-width: 700px) {
    .filter-summary {
        position: relative; z-index: 2; margin-top: -40px; margin-bottom: 18px; width: 100%;
        display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px;
        background: #fff; border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 24px 60px -28px rgba(10, 26, 51, .4);
        font: inherit; color: inherit; text-align: start; cursor: pointer;
    }
    .filter-summary-chips { display: flex; flex-wrap: wrap; gap: 6px; }
    .filter-summary-edit { display: inline-flex; align-items: center; gap: 6px; flex: none; font-weight: 700; color: var(--blue); }
    .filter-summary-edit .icon { width: 18px; height: 18px; }
    .filter-bar.is-collapsed { display: none; }
    .filter-summary + .filter-bar { margin-top: 0; }
}

/* ===== صفحة الدورة ===== */
.course-layout { display: grid; grid-template-columns: minmax(0, 1fr) 21.25rem; gap: 24px; align-items: start; }
.course-side { position: sticky; top: 90px; }
@media (max-width: 960px) {
    .course-layout { grid-template-columns: minmax(0, 1fr); }
    .course-side { position: static; order: -1; }
}
.teacher-row { display: flex; align-items: center; gap: 12px; }

.unit { margin-bottom: 14px; padding: 0; overflow: hidden; }
.unit-head { padding: 14px 18px; background: var(--navy-50); border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.unit-head strong { color: var(--navy-900); }
.lesson-list { list-style: none; margin: 0; padding: 0; }
.lesson-list li + li { border-top: 1px solid var(--line); }
.lesson-item { display: flex; align-items: center; gap: 12px; padding: 13px 18px; color: var(--text) !important; }
a.lesson-item:hover { background: var(--navy-50); }
.lesson-item .icon { width: 22px; height: 22px; color: var(--muted); }
.lesson-item.playable .icon { color: var(--blue); }
.lesson-item.current { background: var(--navy-100); font-weight: 700; }
.lesson-item.done .icon { color: var(--success); }

/* تقدّم الطالب بالدورة */
.course-progress { padding: 14px 18px; border-bottom: 1px solid var(--line); font-size: .9rem; }
.course-progress span { color: var(--muted); }
.progress-track { height: 8px; border-radius: 8px; background: var(--navy-50); border: 1px solid var(--line); overflow: hidden; margin-top: 8px; }
.progress-track > span { display: block; height: 100%; border-radius: 8px; background: linear-gradient(90deg, var(--cyan), var(--blue)); }
.lesson-num { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: color-mix(in srgb, var(--blue) 9%, #fff); color: var(--blue-deep); font-weight: 800; font-size: .85rem; flex: none; }
.lesson-title { flex: 1; }

.continue-card {
    display: flex; gap: 18px; align-items: center; padding: 20px 22px; color: #fff !important;
    background: radial-gradient(300px 160px at 10% 0%, rgba(92, 200, 255, .3), transparent 70%), linear-gradient(135deg, var(--blue), var(--navy-900)); border: 0; border-radius: 24px;
}
.continue-card h3 { color: #fff; margin: 0; }
.continue-card p { margin: 0; color: #C9D6EE; }
.continue-card .play {
    width: 60px; height: 60px; border-radius: 50%; background: #fff; color: var(--navy-700); display: grid; place-items: center; flex: none;
    box-shadow: 0 0 0 8px rgba(255, 255, 255, .15);
}
.continue-card .play .icon { width: 28px; height: 28px; fill: currentColor; stroke: none; }

/* ===== المشاهدة ===== */
.watch-layout { display: grid; grid-template-columns: minmax(0, 1fr) 21.875rem; gap: 20px; align-items: start; }
@media (max-width: 1000px) { .watch-layout { grid-template-columns: minmax(0, 1fr); } }
.player {
    position: relative; aspect-ratio: 16 / 9; background: #000; border-radius: 18px; overflow: hidden; box-shadow: var(--shadow-lg);
    -webkit-user-select: none; user-select: none;
}
/* الإطار أطول من المشغّل: عنوان يوتيوب وشعاره بيطلعوا برّا الجزء الظاهر */
.player-stage { position: absolute; inset: 0; overflow: hidden; }
.player-stage iframe { position: absolute; left: 0; top: -100%; width: 100%; height: 300%; border: 0; pointer-events: none; }
.player-shield { position: absolute; inset: 0; z-index: 2; cursor: pointer; }
.player:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.player:fullscreen { width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; }
.player.is-maximized { position: fixed; inset: 0; z-index: 1000; aspect-ratio: auto; border-radius: 0; }

/* الغطاء: قبل التشغيل، وعند الإيقاف والنهاية */
.player-cover {
    position: absolute; inset: 0; z-index: 4; width: 100%; border: 0; color: #fff; cursor: pointer; font: inherit; padding: 16px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center;
    background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--blue) 45%, transparent), transparent 60%), var(--night);
}
.player.is-started .player-cover { background: color-mix(in srgb, var(--night) 55%, transparent); }
.player.is-ended .player-cover { background: var(--night); }
.player.is-playing .player-cover, .player.is-buffering .player-cover { display: none; }
.cover-title { font-family: "Alexandria", sans-serif; font-weight: 700; font-size: clamp(1rem, 2.4vw, 1.6rem); }
.cover-play { width: 68px; height: 68px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, var(--blue), var(--blue-deep)); opacity: .45; }
.player.is-ready .cover-play { opacity: 1; }
.player.has-error .cover-play { display: none; }
.cover-play .icon { width: 30px; height: 30px; fill: currentColor; stroke: none; }
.cover-note { color: color-mix(in srgb, var(--brand) 22%, #fff); font-size: .9rem; }

/* شريط التحكم */
.player-bar {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; display: flex; align-items: center; gap: 8px; padding: 22px 12px 10px; color: #fff;
    background: linear-gradient(0deg, color-mix(in srgb, var(--night) 90%, transparent), transparent); transition: opacity .2s;
}
.player:not(.is-ready) .player-bar, .player:not(.is-started) .player-bar { display: none; }
.player.bar-hidden .player-bar { opacity: 0; pointer-events: none; }
.player.bar-hidden { cursor: none; }
.pbtn { background: none; border: 0; color: #fff; cursor: pointer; padding: 6px; display: grid; place-items: center; border-radius: 8px; font: inherit; }
.pbtn:hover { background: rgba(255, 255, 255, .15); }
.pbtn .icon { width: 22px; height: 22px; }
#pPlay .icon { fill: currentColor; stroke: none; }
.player.is-playing .i-play, .player:not(.is-playing) .i-pause { display: none; }
.player.is-muted #pMute { opacity: .45; }
.ptext { font-size: .82rem; font-weight: 600; }
/* أزرار النص (للمس، زي يوتيوب): بتظهر وبتختفي مع شريط التحكم */
.player-center {
    position: absolute; inset: 0; z-index: 5; display: none; align-items: center; justify-content: center; gap: clamp(28px, 10vw, 72px);
    background: rgba(0, 0, 0, .38); pointer-events: none; transition: opacity .2s;
}
.player.is-touch.is-ready.is-started:not(.is-quality):not(.is-ended):not(.has-error) .player-center { display: flex; }
.player.is-touch.bar-hidden .player-center { opacity: 0; }
.player.is-touch.bar-hidden .player-center .pbtn { pointer-events: none; }
.player-center .pbtn { pointer-events: auto; position: relative; width: 52px; height: 52px; border-radius: 50%; background: rgba(0, 0, 0, .45); }
.player-center .pbtn:hover { background: rgba(0, 0, 0, .6); }
.player-center .pc-play { width: 68px; height: 68px; }
.player-center .pc-play .icon { width: 34px; height: 34px; fill: currentColor; stroke: none; }
.player-center .pc-skip .icon { width: 30px; height: 30px; }
.pc-skip span { position: absolute; font-size: .62rem; font-weight: 700; margin-top: 2px; }
/* على اللمس الإيقاف بيظهر أزرار النص بدل الغطاء */
.player.is-touch.is-started:not(.is-ended) .player-cover { display: none; }
/* كبستين على طرف الفيديو: رجوع أو تقديم 10 ثواني */
.seek-flash {
    position: absolute; top: 50%; z-index: 6; transform: translateY(-50%); padding: 10px 16px; border-radius: 999px;
    background: rgba(0, 0, 0, .55); color: #fff; font-weight: 700; font-size: .9rem; pointer-events: none; animation: seek-flash .6s ease-out forwards;
}
.seek-flash.is-back { left: 12%; }
.seek-flash.is-forward { right: 12%; }
@keyframes seek-flash { from { opacity: 1; } to { opacity: 0; } }
.ptime { font-size: .82rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pseek { flex: 1; min-width: 40px; accent-color: var(--blue); cursor: pointer; }
.pquality { font-size: .82rem; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; padding: 4px 8px; }
.pquality:not(.is-low) { cursor: default; }
.pquality.is-low { background: var(--blue); }

/* اختيار الجودة: الفيديو كامل، وشريطين من المنصة بيغطّوا عنوان يوتيوب وشريطه، وبيضل الترس بالزاوية ظاهر */
.quality-steps, .quality-foot { display: none; }
.player.is-quality .player-shield, .player.is-quality .player-cover, .player.is-quality .player-bar { display: none; }
.player.is-quality .quality-steps, .player.is-quality .quality-foot {
    position: absolute; left: 0; z-index: 5; display: flex; align-items: center; gap: 10px; padding: 0 14px; background: #0b1020; color: #fff; font-size: .85rem;
}
.player.is-quality .quality-steps { top: 0; right: 64px; height: 60px; }
.player.is-quality .quality-foot { bottom: 0; right: 0; height: 56px; justify-content: center; color: rgba(255, 255, 255, .7); }
.player.is-quality .quality-steps .pbtn { flex: none; background: rgba(255, 255, 255, .15); padding: 4px 10px; }
.player.is-quality .player-stage iframe { pointer-events: auto; }
.pspeed { background: rgba(255, 255, 255, .12); color: #fff; border: 0; border-radius: 6px; padding: 3px 4px; font: inherit; font-size: .8rem; cursor: pointer; }
.pspeed option { color: #000; }
@media (max-width: 560px) {
    .player.is-quality .quality-steps { font-size: .7rem; gap: 6px; padding: 6px; white-space: nowrap; }
    .ptext, #pDuration, #pSpeed { display: none; }
}
/* العلامة المائية: ما بتمنع الضغط على المشغّل */
.watermark {
    position: absolute; z-index: 3; pointer-events: none;
    color: rgba(255, 255, 255, .55); text-shadow: 0 0 3px rgba(0, 0, 0, .7);
    font-weight: 700; font-size: clamp(11px, 1.6vw, 15px); white-space: nowrap;
    top: 12%; left: 10%; transition: top 1.5s ease, left 1.5s ease;
}
.watch-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 16px; }
.watch-side { max-height: calc(100vh - 120px); overflow: auto; padding: 0; position: sticky; top: 90px; }
.watch-side .unit-head { position: sticky; top: 0; z-index: 1; }

/* ===== الباقات ===== */
.package-card { display: flex; flex-direction: column; gap: 12px; padding: 0; overflow: hidden; }
.package-top { background: radial-gradient(260px 140px at 90% 0%, rgba(92, 200, 255, .3), transparent 70%), linear-gradient(135deg, var(--blue-deep), var(--night)); color: #fff; padding: 22px 24px; }
.package-top h3 { color: #fff; margin: 0 0 4px; }
.package-top .price { color: #fff; font-size: 1.8rem; }
.package-body { padding: 0 22px 22px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.check-list { list-style: none; margin: 0; padding: 0; }
.check-list li { display: flex; gap: 8px; align-items: flex-start; padding: 4px 0; }
.check-list li::before { content: "✓"; color: var(--success); font-weight: 800; }

/* ===== النماذج ===== */
.form-card { max-width: 30rem; margin: clamp(20px, 5vw, 48px) auto; padding: clamp(20px, 5vw, 34px); border-radius: 24px; box-shadow: 0 30px 70px -40px rgba(10, 26, 51, .45); }
.form-card-wide { max-width: 47.5rem; }
.auth-head { text-align: center; margin-bottom: 18px; }
.auth-head .icon-bubble { margin: 0 auto 12px; }
.form-group { margin-bottom: 16px; }
.form-label { display: block; font-weight: 700; margin-bottom: 6px; color: var(--navy-900); }
.form-control {
    width: 100%; padding: 11px 14px; border: 1.5px solid var(--line); border-radius: 12px;
    font: inherit; background: #fff; color: var(--text); transition: border-color .15s, box-shadow .15s;
}
.form-control:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 4px color-mix(in srgb, var(--blue) 15%, transparent); }
select.form-control { appearance: auto; }
textarea.form-control { min-height: 110px; resize: vertical; }
.form-control-code { font-size: 1.5rem; text-align: center; letter-spacing: .15em; direction: ltr; text-transform: uppercase; font-weight: 800; color: var(--navy-800); }
input[type="color"].form-control { height: 48px; padding: 4px; width: 90px; }
.form-hint { color: var(--muted); font-size: .85rem; margin-top: 4px; }
.field-validation-error, .text-danger { color: var(--danger); font-size: .875rem; display: block; margin-top: 4px; }
.validation-summary-errors ul { margin: 0 0 12px; padding: 12px 28px; background: var(--danger-soft); color: var(--danger); border-radius: 12px; }
.validation-summary-valid { display: none; }
.check { display: flex; align-items: center; gap: 8px; font-weight: 500; cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--blue); }
.form-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }
.check-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 6px 16px; padding: 12px; border: 1.5px solid var(--line); border-radius: 12px; max-height: 360px; overflow: auto; }
.check-group-title { grid-column: 1 / -1; font-weight: 800; color: var(--navy-700); font-size: .85rem; margin-top: 6px; }

.empty { text-align: center; padding: 44px 20px; color: var(--muted); }
.empty .icon { width: 52px; height: 52px; color: var(--navy-200); margin-bottom: 8px; }

/* ===== الجداول ===== */
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; background: #fff; }
.table th, .table td { padding: 12px; text-align: start; border-bottom: 1px solid var(--line); vertical-align: middle; }
.table th { font-size: .82rem; color: var(--muted); font-weight: 700; background: var(--navy-50); white-space: nowrap; }
.table tr:last-child td { border-bottom: 0; }
.table tbody tr:hover td { background: #FAFCFF; }
.table .actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.table tr.highlight td { background: var(--warning-soft); }

/* ===== لوحة التحكم ===== */
.dash-body { display: grid; grid-template-columns: 16.25rem minmax(0, 1fr); min-height: 100vh; }
.dash-sidebar {
    background: radial-gradient(260px 200px at 100% 0%, color-mix(in srgb, var(--blue) 30%, transparent), transparent 70%), var(--night); color: #B8C4DB; display: flex; flex-direction: column;
    position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.dash-brand { display: flex; align-items: center; gap: 10px; padding: 20px 18px 16px; color: #fff !important; font-weight: 800; font-size: 1.2rem; }
.dash-brand img { width: 38px; height: 38px; border-radius: 10px; object-fit: contain; }
.dash-nav { display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; }
.dash-nav-label { font-size: .75rem; color: #7184A8; font-weight: 700; padding: 12px 12px 4px; }
.dash-nav-link { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 11px; color: #C3CEE3 !important; font-weight: 500; }
.dash-nav-link:hover { background: rgba(255, 255, 255, .06); color: #fff !important; }
.dash-nav-link.active { background: linear-gradient(135deg, var(--blue), var(--blue-deep)); color: #fff !important; box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--blue) 70%, transparent); }
.dash-nav-link svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.dash-sidebar-foot { margin-top: auto; padding: 16px 18px; border-top: 1px solid rgba(255, 255, 255, .08); font-size: .9rem; }
.dash-sidebar-foot a { color: #C3CEE3; }
.dash-main { min-width: 0; display: flex; flex-direction: column; }
.dash-topbar {
    display: flex; align-items: center; gap: 12px; min-height: 66px; padding: 10px 26px;
    background: rgba(255, 255, 255, .85); backdrop-filter: saturate(180%) blur(12px); -webkit-backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20;
}
.dash-title-wrap { flex: 1; min-width: 0; }
.dash-title-wrap small { display: block; color: var(--muted); font-size: .78rem; font-weight: 600; line-height: 1.3; }
.dash-page-title { font-size: 1.3rem; margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.4; }
.dash-icon-btn {
    width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 12px; border: 1px solid var(--line);
    background: #fff; color: var(--navy-800) !important; cursor: pointer;
}
.dash-icon-btn:hover { border-color: color-mix(in srgb, var(--blue) 32%, #fff); color: var(--blue) !important; }
.dash-icon-btn .icon { width: 18px; height: 18px; }
.dash-icon-btn.is-danger:hover { border-color: #F2B8B8; color: var(--danger) !important; }
.dash-user { margin-inline-start: auto; display: flex; align-items: center; gap: 10px; flex: none; }
.dash-user small { display: block; color: var(--muted); line-height: 1.2; }
.dash-user strong { display: block; line-height: 1.2; color: var(--navy-900); }
.dash-menu-btn { display: none; background: none; border: 0; padding: 6px; cursor: pointer; color: var(--navy-800); }
.dash-content { padding: 26px; }
.dash-backdrop { display: none; }

@media (max-width: 960px) {
    .dash-body { grid-template-columns: minmax(0, 1fr); }
    .dash-sidebar { position: fixed; inset-block: 0; inset-inline-start: 0; width: 270px; z-index: 60; transform: translateX(100%); transition: transform .2s; }
    .dash-sidebar.open { transform: none; }
    .dash-backdrop.open { display: block; position: fixed; inset: 0; background: color-mix(in srgb, var(--night) 45%, transparent); z-index: 55; }
    .dash-menu-btn { display: block; }
    .dash-content { padding: 16px; }
    .dash-topbar { padding: 10px 16px; }
    .dash-user-info { display: none; }
}

.stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; margin-bottom: 24px; }
.stat { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; display: flex; gap: 14px; align-items: center; }
.stat .icon-bubble { width: 46px; height: 46px; border-radius: 13px; }
.stat .icon-bubble .icon { width: 22px; height: 22px; }
.stat-value { font-size: 1.7rem; font-weight: 800; line-height: 1.2; color: var(--navy-900); }
.stat-label { color: var(--muted); font-size: .88rem; }

.panel { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 20px; overflow: hidden; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 15px 20px; border-bottom: 1px solid var(--line); }
.panel-head h2, .panel-head h3 { margin: 0; }
/* بطاقة صفحة التفعيل: الفضي بينقشط وإنت بتكتب، وبتلمع لما يكتمل الكود */
.activate-card {
    --reveal: 0%;
    position: relative; overflow: hidden; isolation: isolate; width: min(100%, 320px); aspect-ratio: 85.6 / 54; margin: 4px auto 22px;
    padding: 16px 18px; border-radius: 18px; color: #fff; display: flex; flex-direction: column; justify-content: space-between;
    background: linear-gradient(145deg, #2A5298, #163570 60%, #112B5C);
    box-shadow: 0 26px 50px -24px rgba(10, 26, 51, .75), 0 0 0 1px rgba(255, 255, 255, .08) inset;
    transform: rotate(-3deg); transition: transform .5s cubic-bezier(.2, .8, .2, 1), box-shadow .5s;
}
.activate-card::after {
    /* لمعة بتمر على البطاقة */
    content: ""; position: absolute; inset: -40% auto -40% -60%; width: 40%; z-index: 2; pointer-events: none;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .35), transparent); transform: skewX(-18deg);
    animation: card-shine 4.5s 1s ease-in-out infinite;
}
.activate-card .ac-code-wrap { position: relative; direction: ltr; text-align: center; border-radius: 10px; overflow: hidden; background: rgba(255, 255, 255, .1); padding: 10px 6px; }
.ac-code { position: relative; font-family: "Alexandria", sans-serif; font-weight: 700; font-size: 1.15rem; letter-spacing: .08em; white-space: nowrap; }
.ac-silver {
    position: absolute; inset: 0;
    background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .28) 0 2px, transparent 2px 6px), linear-gradient(135deg, #EEF2F8, #C5CFDE 45%, #A9B6CB);
    -webkit-mask-image: linear-gradient(90deg, transparent var(--reveal), #000 calc(var(--reveal) + 6%));
    mask-image: linear-gradient(90deg, transparent var(--reveal), #000 calc(var(--reveal) + 6%));
}
.ac-coin {
    position: absolute; top: 50%; left: var(--reveal); width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #FFF4C2, #F5C542 55%, #C99A1E); box-shadow: 0 4px 10px rgba(0, 0, 0, .35);
    transition: left .25s cubic-bezier(.2, .8, .2, 1), opacity .3s;
}
.activate-card.is-complete { transform: rotate(0) scale(1.03); box-shadow: 0 0 0 2px rgba(92, 200, 255, .7), 0 0 40px 6px color-mix(in srgb, var(--blue) 55%, transparent), 0 26px 50px -24px rgba(10, 26, 51, .75); }
.activate-card.is-complete .ac-coin { opacity: 0; }
.activate-card.is-complete .ac-code { animation: code-pop .5s cubic-bezier(.2, .8, .2, 1); }
@keyframes card-shine { 0%, 60% { left: -60%; } 100% { left: 130%; } }
@keyframes code-pop { 40% { transform: scale(1.12); text-shadow: 0 0 14px rgba(255, 255, 255, .8); } }

/* جلو ولمعة على الأزرار المهمة بس (فعّل، ابدأ، كمّل)، عشان ما تضيع بين باقي الأزرار */
.btn-glow, .btn-shine { position: relative; overflow: hidden; isolation: isolate; }
.btn-glow, .btn-shine { animation: glow-pulse 2.8s ease-in-out infinite; }
.btn-glow::after, .btn-shine::after {
    content: ""; position: absolute; inset: 0 auto 0 -70%; width: 45%; z-index: -1; pointer-events: none;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent); transform: skewX(-20deg);
    animation: btn-shine 3.6s 1.2s ease-in-out infinite;
}
@keyframes glow-pulse {
    0%, 100% { box-shadow: 0 10px 26px -12px color-mix(in srgb, var(--blue) 80%, transparent); }
    50% { box-shadow: 0 0 0 4px rgba(92, 200, 255, .18), 0 0 28px 2px color-mix(in srgb, var(--blue) 55%, transparent); }
}
@keyframes btn-shine { 0%, 55% { left: -70%; } 100% { left: 140%; } }
.resume-link { animation: glow-pulse 2.8s ease-in-out infinite; }

/* أشرطة التقدّم بتتعبّى قدام الطالب */
.progress-track > span { transform-origin: right center; animation: progress-fill 1.1s .2s cubic-bezier(.2, .8, .2, 1) both; transition: width .8s cubic-bezier(.2, .8, .2, 1); }
@keyframes progress-fill { from { transform: scaleX(0); } }

@media (prefers-reduced-motion: reduce) {
    .btn-glow, .btn-shine, .resume-link, .activate-card, .activate-card::after, .ac-code, .alert-celebrate,
    .done-toast, .done-check svg, .progress-track > span { animation: none !important; transition: none !important; }
    .btn-glow::after, .btn-shine::after { display: none; }
    .done-check svg { stroke-dashoffset: 0; }
}

/* احتفال تفعيل البطاقة */
.confetti { position: fixed; inset: 0; z-index: 100; pointer-events: none; overflow: hidden; }
.confetti span {
    position: absolute; top: -20px; width: 9px; height: 14px; border-radius: 2px; opacity: 0;
    animation: confetti-fall linear forwards;
}
@keyframes confetti-fall {
    0% { opacity: 1; transform: translate(0, 0) rotate(0); }
    100% { opacity: 0; transform: translate(var(--drift), 105vh) rotate(var(--spin)); }
}
.alert-celebrate { animation: celebrate-pop .6s cubic-bezier(.2, .8, .2, 1) both; box-shadow: 0 0 0 4px rgba(34, 195, 142, .15), 0 16px 40px -18px rgba(14, 122, 85, .6); }
@keyframes celebrate-pop { from { opacity: 0; transform: translateY(-12px) scale(.96); } }

/* تهنئة خلّصت الدرس: بتطلع من تحت وبتختفي لحالها */
.done-toast {
    position: fixed; bottom: 24px; left: 50%; z-index: 90; display: flex; align-items: center; gap: 12px; padding: 12px 20px 12px 14px;
    border-radius: 999px; background: var(--navy-900); color: #fff; font-weight: 700; white-space: nowrap;
    box-shadow: 0 0 0 1px rgba(92, 200, 255, .35), 0 0 34px color-mix(in srgb, var(--blue) 55%, transparent), 0 20px 40px -16px rgba(0, 0, 0, .6);
    transform: translateX(-50%); animation: toast-in .55s cubic-bezier(.2, .9, .25, 1.25) both;
}
.done-toast.is-leaving { animation: toast-out .5s ease forwards; }
.done-check { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: #22C38E; box-shadow: 0 0 18px rgba(34, 195, 142, .7); }
.done-check svg { width: 20px; height: 20px; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 24; stroke-dashoffset: 24; animation: check-draw .45s .3s ease forwards; }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 30px) scale(.9); } }
@keyframes toast-out { to { opacity: 0; transform: translate(-50%, 20px); } }
@keyframes check-draw { to { stroke-dashoffset: 0; } }

/* شريط "كمّل من وين وقفت" فوق الرئيسية للطالب الراجع */
.resume-bar { background: var(--night); padding: 14px 0 0; }
.resume-link {
    display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 18px; color: #fff !important;
    background: linear-gradient(135deg, var(--blue), var(--blue-deep)); box-shadow: 0 18px 40px -20px color-mix(in srgb, var(--blue) 90%, transparent);
}
.resume-play { width: 46px; height: 46px; flex: none; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .18); }
.resume-play .icon { width: 22px; height: 22px; fill: currentColor; stroke: none; }
.resume-text { display: grid; min-width: 0; flex: 1; line-height: 1.5; }
.resume-text small { color: color-mix(in srgb, var(--blue) 22%, #fff); font-size: .8rem; }
.resume-text strong { font-size: 1.05rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.resume-text span { color: color-mix(in srgb, var(--blue) 22%, #fff); font-size: .85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.resume-go { flex: none; padding: 8px 16px; border-radius: 999px; background: #fff; color: var(--blue-deep); font-weight: 700; }

/* صفحة الدخول لما الطالب يجي من "فعّل بطاقة": ليش هون، وطريق سريع للتسجيل */
.auth-context { display: grid; gap: 6px; padding: 14px 16px; margin-bottom: 6px; border-radius: 14px; background: var(--navy-50); border: 1px solid var(--line); }
.auth-context span { color: var(--muted); font-size: .92rem; }
.auth-context .btn { margin-top: 6px; }
.auth-or { display: flex; align-items: center; gap: 10px; margin: 16px 0; color: var(--muted); font-size: .88rem; }
.auth-or::before, .auth-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* حقول كلمة المرور: زر إظهار/إخفاء، وشروط بتتعلّم وإنت بتكتب */
.pw-field { position: relative; }
.pw-field .form-control { padding-inline-end: 48px; }
.pw-toggle {
    position: absolute; top: 50%; inset-inline-end: 6px; transform: translateY(-50%); width: 38px; height: 38px; border: 0; border-radius: 10px;
    display: grid; place-items: center; background: transparent; color: var(--muted); cursor: pointer;
}
.pw-toggle:hover { background: var(--navy-50); color: var(--navy-700); }
.pw-toggle:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
.pw-toggle .icon { width: 20px; height: 20px; }
.pw-toggle .pw-eye-off, .pw-toggle[aria-pressed="true"] .pw-eye { display: none; }
.pw-toggle[aria-pressed="true"] .pw-eye-off { display: block; }
.pw-divider { height: 1px; background: var(--line); margin: 6px 0 18px; }
.pw-rules { list-style: none; margin: -4px 0 20px; padding: 12px 14px; display: grid; gap: 6px; border-radius: 12px; background: var(--navy-50); font-size: .88rem; color: var(--muted); }
.pw-rules li { display: flex; align-items: center; gap: 8px; }
.pw-rules li::before {
    content: ""; width: 18px; height: 18px; flex: none; border-radius: 50%; border: 2px solid var(--line); background: #fff;
}
.pw-rules li.ok { color: var(--success); }
.pw-rules li.ok::before {
    border-color: var(--success); background: var(--success) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 12px no-repeat;
}

/* صفحة الخطأ: رقم الخطأ كبير وخفيف فوق العنوان */
.status-card { text-align: center; }
.status-card h1 { margin-top: 0; }
.status-code { font-family: "Alexandria", sans-serif; font-weight: 800; font-size: clamp(4rem, 14vw, 6.5rem); line-height: 1; color: var(--navy-100); -webkit-text-stroke: 2px var(--navy-300); margin-bottom: 8px; }

/* ===== رئيسية لوحة التحكم ===== */
.dash-hero {
    position: relative; overflow: hidden; isolation: isolate; display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
    padding: 24px 26px; margin-bottom: 18px; border-radius: 22px; color: #fff;
    background: radial-gradient(circle at 15% -20%, rgba(92, 200, 255, .35), transparent 45%), linear-gradient(135deg, var(--blue-deep), var(--night));
}
.dash-hero h2 { margin: 0 0 4px; color: #fff; font-size: clamp(1.3rem, 2.4vw, 1.7rem); }
.dash-hero p { margin: 0; color: color-mix(in srgb, var(--blue) 22%, #fff); }
.dash-hero strong { color: #fff; }
.dash-hero-date { display: inline-block; margin-inline-start: 10px; padding: 2px 10px; border-radius: 999px; background: rgba(255, 255, 255, .12); font-size: .82rem; }
.dash-hero-actions { display: flex; gap: 10px; flex-wrap: wrap; }

.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.kpi { display: grid; gap: 4px; padding: 18px 20px; border-radius: 18px; background: #fff; border: 1px solid var(--line); }
.kpi-label { color: var(--muted); font-size: .88rem; font-weight: 600; }
.kpi-value { font-family: "Alexandria", sans-serif; font-size: 1.8rem; font-weight: 800; color: var(--ink); line-height: 1.3; }
.kpi-trend { font-size: .8rem; font-weight: 600; }
.kpi-trend.up { color: var(--success); }
.kpi-trend.down { color: var(--danger); }
.kpi-trend.flat { color: var(--muted); }
@media (max-width: 1100px) { .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.dash-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 18px; margin-bottom: 18px; }
.dash-grid > .panel { margin: 0; }
@media (max-width: 1100px) { .dash-grid { grid-template-columns: minmax(0, 1fr); } }

/* عمود لكل يوم: أطراف مدوّرة فوق، وفراغ صغير بين الأعمدة، والرقم بيطلع لما تمرّر */
.bars { display: flex; align-items: flex-end; gap: 3px; height: 180px; direction: ltr; padding-top: 6px; border-bottom: 1px solid var(--line); }
.bar { position: relative; flex: 1; height: 100%; display: flex; align-items: flex-end; cursor: default; outline: none; }
.bar > span { display: block; width: 100%; border-radius: 4px 4px 0 0; background: var(--blue); transition: background .15s; }
.bar.is-zero > span { height: 2px !important; background: var(--line); border-radius: 2px; }
.bar:hover > span, .bar:focus-visible > span { background: var(--blue-deep); }
.bar-tip {
    position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); z-index: 2; display: none; white-space: nowrap; direction: rtl;
    padding: 5px 10px; border-radius: 8px; background: var(--navy-900); color: #fff; font-style: normal; font-size: .78rem; font-weight: 600;
}
.bar:hover .bar-tip, .bar:focus-visible .bar-tip { display: block; }
.bars-axis { display: flex; justify-content: space-between; direction: ltr; margin-top: 6px; color: var(--muted); font-size: .78rem; }

.top-list { list-style: none; margin: 0; padding: 8px 20px 18px; display: grid; gap: 14px; }
.top-list strong { font-size: .93rem; }
.top-list span { color: var(--muted); font-size: .85rem; }

.setup-panel { border-color: color-mix(in srgb, var(--blue) 32%, #fff); }
.setup-list { list-style: none; margin: 0; padding: 8px 12px 14px; display: grid; gap: 6px; }
.setup-list a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; color: inherit !important; }
.setup-list a:hover { background: var(--navy-50); }
.setup-list small { display: block; color: var(--muted); font-size: .82rem; }
.setup-list .chip { margin-inline-start: auto; }
.setup-mark { width: 30px; height: 30px; flex: none; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--line); color: var(--muted); }
.setup-mark .icon { width: 16px; height: 16px; }
.setup-list .done .setup-mark { background: var(--success); border-color: var(--success); color: #fff; }
.setup-list .done strong { color: var(--muted); text-decoration: line-through; }
.setup-list .next a { background: color-mix(in srgb, var(--blue) 9%, #fff); }
.setup-list .next .setup-mark { border-color: var(--blue); color: var(--blue); }

.action-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: 12px; margin-bottom: 18px; }
.action-tiles a {
    display: grid; justify-items: center; gap: 8px; padding: 16px 10px; border-radius: 16px; background: #fff; border: 1px solid var(--line);
    color: var(--navy-900) !important; font-weight: 700; font-size: .9rem; text-align: center; transition: border-color .15s, transform .15s;
}
.action-tiles a:hover { border-color: color-mix(in srgb, var(--blue) 32%, #fff); transform: translateY(-2px); }
.action-tiles .icon { width: 26px; height: 26px; padding: 8px; box-sizing: content-box; border-radius: 12px; background: color-mix(in srgb, var(--blue) 9%, #fff); color: var(--blue); }

/* حسابي */
.dash-user-link { display: flex; align-items: center; gap: 10px; color: inherit !important; padding: 4px 8px 4px 4px; border-radius: 14px; }
.dash-user-link:hover { background: var(--navy-50); }
.profile-head { display: flex; align-items: center; gap: 18px; margin-bottom: 22px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.profile-photo { width: 84px; height: 84px; flex: none; border-radius: 24px; overflow: hidden; display: grid; place-items: center; background: linear-gradient(135deg, var(--blue), var(--blue-deep)); color: #fff; font-family: "Alexandria", sans-serif; font-weight: 800; font-size: 2rem; }
.profile-photo img { width: 100%; height: 100%; object-fit: cover; }

/* فلاتر صفحات لوحة التحكم */
.dash-filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

/* تبويبات التقارير */
.report-tabs {
    display: flex; gap: 6px; padding: 5px; margin-bottom: 18px; background: #fff; border: 1px solid var(--line);
    border-radius: 14px; overflow-x: auto; scrollbar-width: none; width: fit-content; max-width: 100%;
}
.report-tabs a {
    display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 10px; white-space: nowrap;
    color: var(--muted) !important; font-weight: 700; font-size: .95rem; transition: background-color .15s, color .15s;
}
.report-tabs a .icon { width: 18px; height: 18px; }
.report-tabs a:hover { color: var(--navy-900) !important; background: var(--navy-50); }
.report-tabs a.active { background: var(--blue); color: #fff !important; box-shadow: 0 8px 18px -10px color-mix(in srgb, var(--blue) 90%, transparent); }
.dash-filters .form-control { width: auto; flex: 1 1 180px; }
.panel-body { padding: 20px; }

.tree-level { border: 1px solid var(--line); border-radius: var(--radius); background: #fff; margin-bottom: 18px; overflow: hidden; }
.tree-level > .tree-row { background: var(--navy-700); color: #fff; }
.tree-level > .tree-row .tree-label { color: #fff; font-size: 1.1rem; }
.tree-level > .tree-row .tree-kind { color: #BFD0EC; }
.tree-level > .tree-row .btn-outline { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .4); }
.tree-level > .tree-row .btn-ghost { color: #DCE4F3; }
.tree-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 16px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.tree-stage > .tree-row { background: var(--navy-50); }
.tree-stage > .tree-row { padding-inline-start: 28px; }
.tree-field > .tree-row { padding-inline-start: 52px; }
.tree-subject { padding-inline-start: 78px !important; }
.tree-label { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--navy-900); }
.tree-kind { font-size: .75rem; color: var(--muted); font-weight: 500; }

.tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.tab { padding: 6px 14px; border-radius: 999px; background: #fff; border: 1.5px solid var(--line); color: var(--navy-800) !important; font-weight: 700; }
.tab.active { background: var(--navy-700); border-color: var(--navy-700); color: #fff !important; }
.tab:hover { border-color: var(--navy-500); }

.logo-preview { width: 76px; height: 76px; border-radius: 18px; object-fit: contain; border: 1px solid var(--line); background: repeating-conic-gradient(#EEF1F6 0% 25%, #fff 0% 50%) 50% / 16px 16px; }

/* نصوص الصفحة الرئيسية: زر الحفظ بيضل ظاهر تحت */
.save-bar { position: sticky; bottom: 0; z-index: 5; padding: 14px 0; background: linear-gradient(0deg, var(--bg) 70%, transparent); }

/* ===== طباعة البطاقات ===== */
.print-sheet { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 8px; }
.print-card { border: 1.5px dashed #8FA3C6; border-radius: 10px; padding: 10px 12px; break-inside: avoid; font-size: 12px; line-height: 1.5; background: #fff; }
.print-card .pc-name { font-weight: 800; font-size: 14px; color: var(--navy-900); }
.print-card .pc-code { font-family: ui-monospace, Consolas, monospace; font-size: 17px; font-weight: 800; letter-spacing: .08em; direction: ltr; text-align: center; margin: 6px 0; padding: 5px; background: #EEF3FB; color: var(--navy-900); border-radius: 6px; }
.print-toolbar { display: flex; gap: 10px; align-items: center; padding: 12px 16px; background: #fff; border-bottom: 1px solid var(--line); }

/* ===== التناسب مع حجم الشاشة ===== */
/* الشاشات الكبيرة: الخط والمسافات اللي بالـ rem بتكبر مع الشاشة (16px لحد 1440 تقريباً) */
html { font-size: clamp(16px, 9.6px + .446vw, 22px); }
body { overflow-wrap: break-word; }
.hx-grid > *, .news-mosaic > *, .footer-grid > * { min-width: 0; }
.cta-band { padding: clamp(24px, 5vw, 44px); }
.section { padding-top: clamp(44px, 7vw, 72px); }
.print-toolbar { flex-wrap: wrap; }

@media (max-width: 640px) {
    h1 { font-size: 1.6rem; }
    .card { padding: 16px; }
    .news-article > *:not(img) { margin-inline: 16px; }
    .news-hero-body { padding: 18px; }
    .news-hero h3 { font-size: 1.35rem; }
    .hx-stats strong { font-size: 1.6rem; }
    .tree-stage > .tree-row { padding-inline-start: 16px; }
    .tree-field > .tree-row { padding-inline-start: 24px; }
    .tree-subject { padding-inline-start: 32px !important; }
    .print-sheet { grid-template-columns: repeat(2, 1fr); }
}

/* الجدول بيصير بطاقات حسب المساحة المتاحة إله، وأسماء الأعمدة من site.js */
.table-wrap { container-type: inline-size; }
@container (max-width: 860px) {
    .table thead { display: none; }
    .table, .table tbody, .table tr, .table td { display: block; width: 100%; }
    .table tr { padding: 10px 14px; border-bottom: 1px solid var(--line); }
    .table tr:last-child { border-bottom: 0; }
    .table td { padding: 6px 0; border: 0; text-align: start; }
    .table td[data-label] { display: flex; justify-content: space-between; align-items: center; gap: 14px; }
    .table td[data-label]::before { content: attr(data-label); flex: none; color: var(--muted); font-size: .82rem; font-weight: 700; }
    .table .actions { justify-content: flex-start; }
}

@media (max-width: 480px) {
    .btn { white-space: normal; }
    .hx-actions .btn, .cta-actions, .cta-actions .btn { width: 100%; }
    .filter-bar { grid-template-columns: 1fr; }
    .dash-user > .avatar, .dash-user > .btn-ghost { display: none; }
    .dash-content { padding: 12px; }
    .print-sheet { grid-template-columns: 1fr; }
}

@media (max-width: 360px) {
    #pMute { display: none; }
    .player-bar { gap: 4px; padding-inline: 8px; }
    .grid-4 { grid-template-columns: 1fr; }
}

/* لوحة التحكم: خط أصغر، والأزرار دايماً بسطر واحد */
.dash-body { font-size: .92rem; }
.dash-body .btn { font-size: .875rem; padding: 8px 14px; white-space: nowrap; }
.dash-body .btn-sm { font-size: .8rem; padding: 5px 10px; }
.dash-body .btn-lg { font-size: .95rem; padding: 11px 20px; }
.dash-body .dash-nav-link { font-size: .9rem; }
.dash-body .dash-page-title { font-size: 1.15rem; }
.dash-body .table th { font-size: .78rem; }

@media print {
    .no-print { display: none !important; }
    body { background: #fff; }
    .print-sheet { padding: 0; }
}

/* تسلسل الإعداد بلوحة التحكم */
.setup-steps { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.setup-steps a { display: flex; align-items: center; gap: 8px; padding: 7px 12px; border: 1.5px solid var(--line); border-radius: 999px; background: #fff; color: var(--text); font-size: .85rem; }
.setup-steps .current a { border-color: var(--navy-700); color: var(--navy-900); font-weight: 700; }
.setup-num { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--navy-50); color: var(--navy-900); font-size: .78rem; font-weight: 700; }
.setup-steps .current .setup-num { background: var(--navy-700); color: #fff; }

/* المرفقات عند الطالب */
.file-list { list-style: none; margin: 0; padding: 0; }
.file-item { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 12px 18px; border-top: 1px solid var(--line); color: var(--text); }
a.file-item:hover { background: var(--navy-50); color: var(--text); }
.file-item .lesson-title { flex: 1 1 10rem; min-width: 0; }

/* الامتحان */
.exam-page { padding-top: 20px; padding-bottom: 40px; max-width: 860px; }
.exam-bar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; padding: 12px 16px; margin-bottom: 14px; background: #fff; border: 1px solid var(--line); border-radius: 12px; }
.exam-bar-title { flex: 1 1 12rem; min-width: 0; color: var(--navy-900); }
.exam-timer { padding: 3px 12px; border-radius: 999px; background: var(--navy-50); color: var(--navy-900); font-weight: 700; font-variant-numeric: tabular-nums; }
.exam-timer.is-low { background: var(--danger-soft); color: var(--danger); }
.exam-question-card { margin: 0 0 14px; padding: 18px; min-width: 0; }
.exam-question-head { display: flex; align-items: flex-start; gap: 10px; }
.exam-q-number { flex: none; display: inline-grid; place-items: center; min-width: 30px; height: 30px; border-radius: 8px; background: var(--navy-900); color: #fff; font-weight: 700; }
.exam-q-text { flex: 1; min-width: 0; font-weight: 600; color: var(--navy-900); white-space: pre-line; overflow-wrap: anywhere; line-height: 1.9; }
.exam-q-points { flex: none; color: var(--muted, #667); font-size: .82rem; }
.exam-q-image { display: block; max-width: 100%; max-height: 360px; margin: 12px 0; border-radius: 8px; border: 1px solid var(--line); }
.exam-options { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.exam-option { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1.5px solid var(--line); border-radius: 10px; background: #fff; min-width: 0; overflow-wrap: anywhere; }
label.exam-option { cursor: pointer; }
label.exam-option:hover { border-color: var(--navy-700); }
.exam-option input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.exam-letter { flex: none; display: inline-grid; place-items: center; width: 34px; height: 34px; border: 2px solid var(--navy-700); border-radius: 50%; color: var(--navy-900); font-weight: 700; }
.exam-option input:checked + .exam-letter { background: var(--navy-900); border-color: var(--navy-900); color: #fff; }
.exam-option input:focus-visible + .exam-letter { outline: 3px solid var(--navy-700); outline-offset: 2px; }
.exam-option:has(input:checked) { border-color: var(--navy-900); background: var(--navy-50); }
.exam-option .math-text { min-width: 0; line-height: 1.9; }
.exam-option.is-correct { border-color: var(--success); background: var(--success-soft); }
.exam-option.is-correct .exam-letter { background: var(--success); border-color: var(--success); color: #fff; }
.exam-option.is-wrong { border-color: var(--danger); background: var(--danger-soft); }
.exam-option.is-wrong .exam-letter { background: var(--danger); border-color: var(--danger); color: #fff; }
.exam-your { margin-inline-start: auto; font-size: .78rem; font-weight: 700; flex: none; }
.exam-submit { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.exam-status { color: var(--muted, #667); font-size: .88rem; }
.exam-status.is-error { color: var(--danger); font-weight: 700; }
.exam-score { text-align: center; display: grid; gap: 8px; margin-bottom: 16px; }
.exam-score-value { font-size: 2.4rem; font-weight: 800; color: var(--navy-900); }
.exam-question-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; }
.katex { direction: ltr; unicode-bidi: isolate; font-size: 1.1em; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* محرر الأسئلة */
.rich-toolbar { margin-bottom: 6px; }
.rich-input { min-height: 90px; height: auto; line-height: 1.9; white-space: pre-wrap; overflow-wrap: anywhere; }
.rich-line { display: flex; align-items: flex-start; gap: 6px; }
.rich-line .rich-input { flex: 1; min-width: 0; min-height: 44px; }
.rich-math { display: inline-block; padding: 0 4px; margin: 0 2px; border-radius: 6px; background: var(--navy-50); cursor: pointer; direction: ltr; }
.rich-math:hover { outline: 1.5px solid var(--navy-700); }
.option-editors { display: grid; gap: 8px; }
.option-editor { display: flex; align-items: flex-start; gap: 10px; }
.option-editor .rich-field { flex: 1; min-width: 0; }
.option-correct { flex: none; cursor: pointer; padding-top: 4px; }
.option-correct input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.option-correct input:checked + .exam-letter { background: var(--success); border-color: var(--success); color: #fff; }
.option-correct input:focus-visible + .exam-letter { outline: 3px solid var(--navy-700); outline-offset: 2px; }
.math-dialog { width: min(720px, calc(100vw - 24px)); max-height: calc(100vh - 24px); border: 0; border-radius: 14px; padding: 18px; }
.math-dialog::backdrop { background: rgba(10, 26, 51, .5); }
.math-dialog h3 { margin: 0 0 4px; }
/* كتابة المعادلة بكيبورد التلفون: بتظهر بس على شاشات اللمس */
.math-type { display: none; gap: 6px; margin-top: 8px; align-items: center; }
.math-type input { flex: 1; min-width: 0; font-size: 16px; }
.math-type-keys { display: flex; gap: 4px; }
@media (pointer: coarse) { .math-type { display: flex; } }
.math-field-wrap math-field { display: block; width: 100%; font-size: 1.5rem; padding: 8px; border: 1.5px solid var(--line); border-radius: 10px; }
.math-quick { margin: 12px 0; display: grid; gap: 8px; }
.math-group { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.math-group-title { flex: 0 0 100%; font-size: .78rem; font-weight: 700; color: var(--navy-700); }
.math-key { min-width: 40px; height: 36px; padding: 0 8px; border: 1.5px solid var(--line); border-radius: 8px; background: #fff; color: var(--navy-900); font: inherit; cursor: pointer; }
.math-key:hover { background: var(--navy-50); border-color: var(--navy-700); }

/* صور الخيارات وتبويبات لوحة الرموز */
.exam-options.has-images { grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr)); }
.exam-option-img { display: block; max-width: 100%; max-height: 240px; border-radius: 6px; }
.exam-option-body { display: grid; gap: 6px; min-width: 0; }
.option-image-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.option-image-tools img { max-height: 70px; max-width: 120px; border: 1px solid var(--line); border-radius: 6px; }
.file-pick { position: relative; cursor: pointer; }
.file-pick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.math-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.math-tab { padding: 6px 12px; border: 1.5px solid var(--line); border-radius: 999px; background: #fff; color: var(--navy-900); font: inherit; font-size: .85rem; cursor: pointer; }
.math-tab.active { background: var(--navy-900); border-color: var(--navy-900); color: #fff; }
.chem-pane input { direction: ltr; text-align: left; font-size: 1.1rem; }
.chem-preview { min-height: 52px; display: flex; align-items: center; justify-content: center; margin: 8px 0; padding: 8px; border: 1.5px dashed var(--line); border-radius: 10px; overflow-x: auto; }
.math-field-wrap math-field::part(menu-toggle), .math-field-wrap math-field::part(virtual-keyboard-toggle) { display: none; }

/* ===== جرس التنبيهات (للطالب) ===== */
.bell-btn {
    position: relative; display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 12px;
    color: var(--navy-800) !important; border: 1px solid var(--line); background: #fff; transition: border-color .15s;
}
.bell-btn:hover { border-color: color-mix(in srgb, var(--blue) 32%, #fff); }
.bell-btn .icon { width: 21px; height: 21px; }
.bell-btn.has-unread .icon { animation: bell-ring 2.4s ease-in-out 1s 2; transform-origin: 50% 10%; }
.bell-count {
    position: absolute; top: -6px; inset-inline-end: -6px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px;
    background: #EF4444; color: #fff; font-size: .72rem; font-weight: 800; display: grid; place-items: center; border: 2px solid #fff;
}
@keyframes bell-ring { 0%, 100% { transform: rotate(0); } 10%, 30% { transform: rotate(14deg); } 20%, 40% { transform: rotate(-12deg); } 50% { transform: rotate(0); } }
.is-home .site-header:not(.is-scrolled) .bell-btn { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .18); color: #fff !important; }
.bell-mobile { display: none; }
@media (max-width: 360px) {
    .brand-name { font-size: 1.1rem; }
    .brand-name.is-latin b { font-size: 1.15rem; }
    .brand:has(.is-latin) .brand-logo { width: 42px; height: 42px; }
    .header-quick { padding-inline: 10px; }
}
/* موبايلات صغيرة كثير: اللوجو لحاله بدون الاسم */
@media (max-width: 340px) {
    .brand-name { display: none; }
}
@media (max-width: 900px) {
    .bell-mobile { display: inline-flex; }
    .bell-mobile + .nav-toggle { margin-inline-start: 0; }
    .bell-desktop { display: none; }
}

.notify-list { list-style: none; margin: 0 0 40px; padding: 0; display: grid; gap: 10px; }
.notify-list a {
    display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: #fff; border: 1px solid var(--line);
    border-radius: 16px; color: inherit !important; transition: border-color .15s, transform .15s;
}
.notify-list a:hover { border-color: color-mix(in srgb, var(--blue) 32%, #fff); transform: translateY(-1px); }
.notify-list a > span:nth-child(2) { flex: 1; display: grid; gap: 2px; }
.notify-list li.is-new a { border-color: color-mix(in srgb, var(--blue) 32%, #fff); background: linear-gradient(135deg, color-mix(in srgb, var(--blue) 5%, #fff), #fff); }

/* ===== أسئلة الدرس ===== */
.lesson-qa { margin-top: 18px; display: grid; gap: 14px; }
.lesson-qa h2 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 1.2rem; }
.lesson-qa h2 .icon { width: 22px; height: 22px; color: var(--blue); }
.qa-form { display: grid; gap: 8px; }
.qa-form .btn { justify-self: start; }
.qa-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.qa-list > li { padding-top: 12px; border-top: 1px solid var(--line); display: grid; gap: 8px; }
.qa-q { display: flex; gap: 10px; align-items: flex-start; }
.qa-q p { margin: 4px 0 0; line-height: 1.9; white-space: pre-line; }
.qa-a { margin-inline-start: 46px; padding: 10px 14px; border-radius: 14px; background: #F1F6FF; border-inline-start: 3px solid var(--blue); }
.qa-a strong { display: inline-flex; align-items: center; gap: 6px; color: var(--blue); font-size: .92rem; }
.qa-a strong .icon { width: 17px; height: 17px; }
.qa-a p { margin: 4px 0 0; line-height: 1.9; white-space: pre-line; }
.qa-admin .qa-text { margin: 10px 0; padding: 10px 14px; background: var(--navy-50); border-radius: 12px; line-height: 1.9; white-space: pre-line; }

/* ===== اختيارات الأستاذ (حسابي) ===== */
.option-list { border: 0; padding: 0; margin: 0 0 18px; display: grid; gap: 10px; }
.option-row {
    display: flex; gap: 12px; align-items: flex-start; padding: 14px; border: 1px solid var(--line); border-radius: 14px; cursor: pointer;
    transition: border-color .15s, background-color .15s;
}
.option-row:hover { border-color: color-mix(in srgb, var(--blue) 32%, #fff); }
.option-row:has(input:checked) { border-color: var(--blue); background: color-mix(in srgb, var(--blue) 5%, #fff); }
.option-row input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--blue); flex: none; }
.option-row strong { display: flex; align-items: center; gap: 6px; color: var(--navy-900); }
.option-row strong .icon { width: 18px; height: 18px; color: var(--blue); }
.option-row .muted { display: block; margin-top: 2px; line-height: 1.8; }

/* ===== الشهادات ===== */
.cert-card { display: flex; align-items: center; gap: 14px; }
.cert-card strong { display: block; color: var(--navy-900); font-size: 1.08rem; }
.cert-medal, .cert-seal {
    flex: none; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; color: #fff;
    background: radial-gradient(circle at 30% 30%, #FFD976, #E0A100); box-shadow: 0 10px 22px -10px rgba(224, 161, 0, .9);
}
.cert-medal .icon, .cert-seal .icon { width: 28px; height: 28px; }
.cert-ready {
    display: flex; align-items: center; gap: 10px; margin: 0 0 14px; padding: 12px 14px; border-radius: 14px;
    background: linear-gradient(135deg, #FFF6DB, #FFFDF5); border: 1px solid #F3D27A; color: #7A5A00 !important; font-size: .95rem;
}
.cert-ready .icon { width: 26px; height: 26px; color: #E0A100; flex: none; }
.cert-ready strong { display: block; }
.chip .icon { width: 14px; height: 14px; vertical-align: -2px; }

.cert-page { padding: 24px 0 48px; }
.cert-actions { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.certificate { max-width: 980px; margin: 0 auto; aspect-ratio: 1.414; background: #fff; padding: 18px; border-radius: 6px; box-shadow: 0 30px 60px -30px rgba(10, 26, 51, .45); }
.cert-border {
    height: 100%; border: 3px double #C9A227; border-radius: 4px; padding: clamp(16px, 4vw, 44px);
    display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 6px;
    background: radial-gradient(120% 90% at 50% 0%, #F7FAFF 0%, #fff 60%);
}
.cert-head { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.2rem; color: var(--navy-900); }
.cert-head img { width: 44px; height: 44px; border-radius: 12px; }
.cert-kicker { margin: 10px 0 0; font-family: Alexandria, sans-serif; font-weight: 800; letter-spacing: .02em; font-size: clamp(1.4rem, 3.4vw, 2.4rem); color: #9A7A10; }
.cert-lead { margin: 0; color: var(--muted); font-size: clamp(.9rem, 1.8vw, 1.1rem); }
.cert-name { margin: 4px 0; font-size: clamp(1.6rem, 4.4vw, 3rem); color: var(--navy-900); border-bottom: 2px solid #E8D9A0; padding: 0 24px 6px; }
.cert-course { margin: 4px 0 0; font-size: clamp(1.1rem, 2.6vw, 1.7rem); color: var(--blue); }
.cert-meta { margin: 0; color: var(--muted); font-size: .95rem; }
.cert-foot { display: flex; align-items: center; justify-content: space-between; gap: 24px; width: 100%; max-width: 640px; margin-top: auto; padding-top: 18px; }
.cert-foot > div:not(.cert-seal) { display: grid; gap: 2px; min-width: 140px; border-top: 1px solid var(--line); padding-top: 8px; }
.cert-foot strong { color: var(--navy-900); }
.cert-foot span { color: var(--muted); font-size: .85rem; }
.cert-verify { margin: 12px 0 0; font-size: .75rem; color: var(--muted); }
.verify-list { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; text-align: start; max-width: 420px; margin: 18px auto 0; }
.verify-list dt { color: var(--muted); }
.verify-list dd { margin: 0; font-weight: 700; color: var(--navy-900); }

@media print {
    @page { size: A4 landscape; margin: 0; }
    body { background: #fff !important; }
    .site-header, .site-footer, .alert, .no-print { display: none !important; }
    .cert-page { padding: 0; }
    .certificate { box-shadow: none; max-width: none; width: 100vw; height: 100vh; aspect-ratio: auto; border-radius: 0; }
    * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

@media (prefers-reduced-motion: reduce) {
    .bell-btn.has-unread .icon { animation: none; }
}

/* تنبيه بالرئيسية بلوحة التحكم (أسئلة بانتظار رد) */
.dash-notice { display: flex; align-items: center; gap: 10px; margin-top: 0; color: var(--navy-800) !important; transition: transform .15s; }
.dash-notice:hover { transform: translateY(-1px); }
.dash-notice-go { margin-inline-start: auto; font-weight: 700; color: var(--blue); white-space: nowrap; }

/* ===== أشكال خلفية الواجهة (إعدادات المنصة) =====
   كل شكل بيحدد لون أعلى الواجهة (للهيدر) وخلفيتها. "الكحلي الأصلي" = التوهّج القديم */
.hero-aurora { --hero-top: #071330; --hero-bg:
    radial-gradient(70% 90% at 88% 8%, rgba(56, 120, 255, .55), transparent 62%),
    radial-gradient(55% 70% at 6% 100%, rgba(34, 211, 238, .30), transparent 62%),
    linear-gradient(180deg, #071330 0%, #0B2257 55%, #11307A 100%); --hero-dots: rgba(255, 255, 255, .07); --hero-beam: rgba(120, 180, 255, .16); }
.hero-royal { --hero-top: #1A46C4; --hero-bg:
    radial-gradient(60% 80% at 90% 0%, rgba(125, 211, 252, .40), transparent 60%),
    radial-gradient(60% 70% at 0% 100%, rgba(99, 102, 241, .45), transparent 60%),
    linear-gradient(180deg, #1A46C4 0%, #1E3A8A 70%, #172E70 100%); --hero-dots: rgba(255, 255, 255, .09); --hero-beam: rgba(255, 255, 255, .14); }
.hero-violet { --hero-top: #1B1446; --hero-bg:
    radial-gradient(65% 85% at 90% 5%, rgba(168, 85, 247, .50), transparent 60%),
    radial-gradient(55% 70% at 5% 100%, rgba(236, 72, 153, .28), transparent 60%),
    linear-gradient(180deg, #1B1446 0%, #2E1A72 60%, #3B1F8F 100%); --hero-dots: rgba(255, 255, 255, .07); --hero-beam: rgba(216, 180, 254, .16); }
.hero-teal { --hero-top: #062A33; --hero-bg:
    radial-gradient(65% 85% at 90% 5%, rgba(45, 212, 191, .40), transparent 60%),
    radial-gradient(55% 70% at 5% 100%, rgba(56, 189, 248, .30), transparent 60%),
    linear-gradient(180deg, #062A33 0%, #0A4352 60%, #0B5466 100%); --hero-dots: rgba(255, 255, 255, .07); --hero-beam: rgba(153, 246, 228, .14); }

body[class*="hero-"]:not(.hero-classic) .hx { background: var(--hero-bg); }
body[class*="hero-"]:not(.hero-classic) .hx-glow { display: none; }
.is-home[class*="hero-"] .site-header:not(.is-scrolled) { background: var(--hero-top, var(--night)); }

/* نقاط ناعمة بتختفي لتحت */
body[class*="hero-"]:not(.hero-classic) .hx::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background-image: radial-gradient(var(--hero-dots) 1.2px, transparent 1.2px); background-size: 24px 24px;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .6) 45%, transparent 85%);
    mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .6) 45%, transparent 85%);
}

/* أشعة ضوء مائلة بتتحرك ببطء */
.hx-beams { display: none; }
body[class*="hero-"]:not(.hero-classic) .hx-beams { display: block; position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.hx-beams span {
    position: absolute; top: -40%; width: 140px; height: 180%; transform: rotate(24deg);
    background: linear-gradient(90deg, transparent, var(--hero-beam), transparent); filter: blur(6px);
    animation: hero-beam 14s ease-in-out infinite;
}
.hx-beams span:nth-child(1) { inset-inline-start: 18%; }
.hx-beams span:nth-child(2) { inset-inline-start: 46%; width: 90px; animation-delay: -5s; animation-duration: 18s; }
.hx-beams span:nth-child(3) { inset-inline-start: 78%; width: 200px; animation-delay: -9s; animation-duration: 22s; opacity: .7; }
@keyframes hero-beam { 0%, 100% { translate: -60px 0; opacity: .5; } 50% { translate: 60px 0; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .hx-beams span { animation: none; } }

/* اختيار شكل الخلفية بالإعدادات */
.hero-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.hero-choice { position: relative; cursor: pointer; }
.hero-choice input { position: absolute; opacity: 0; inset: 0; }
.hero-choice span {
    display: flex; align-items: flex-end; height: 86px; padding: 10px; border-radius: 14px; color: #fff; font-weight: 700; font-size: .9rem;
    border: 3px solid transparent; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); transition: border-color .15s, transform .15s;
}
.hero-choice:hover span { transform: translateY(-2px); }
.hero-choice input:checked + span { border-color: var(--blue); box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 25%, transparent); }
.hero-choice input:focus-visible + span { outline: 3px solid #9CC1FF; outline-offset: 2px; }

/* إنهاء الدورة */
.finish-list { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 8px; }
.finish-list li { display: flex; gap: 8px; align-items: baseline; line-height: 1.7; }
.finish-list li::before { flex: none; font-weight: 800; }
.finish-list .is-del::before { content: "✕"; color: var(--danger); }
.finish-list .is-keep::before { content: "✓"; color: var(--success); }
.finish-option h2 { display: flex; align-items: center; gap: 8px; }
.finish-option h2 .icon { width: 22px; height: 22px; color: var(--blue); }
.finish-option.is-danger { border-color: #F5C2C2; }
.finish-option.is-danger h2 .icon { color: var(--danger); }

/* خلفية الواجهة "ألوان المنصة": من اللون الغامق والأساسي اللي بالإعدادات */
.hero-brand { --hero-top: var(--night); --hero-bg:
    radial-gradient(70% 90% at 88% 8%, color-mix(in srgb, var(--blue) 55%, transparent), transparent 62%),
    radial-gradient(55% 70% at 6% 100%, color-mix(in srgb, var(--cyan) 30%, transparent), transparent 62%),
    linear-gradient(180deg, var(--night) 0%, var(--navy-900) 55%, var(--navy-800) 100%);
    --hero-dots: rgba(255, 255, 255, .07); --hero-beam: color-mix(in srgb, var(--blue) 22%, transparent); }

/* ألوان المنصة بالإعدادات */
.color-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.color-field { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; cursor: pointer; background: #fff; }
.color-field:hover { border-color: color-mix(in srgb, var(--blue) 32%, #fff); }
.color-field input[type=color] { width: 54px; height: 54px; padding: 0; border: 0; border-radius: 12px; background: none; cursor: pointer; flex: none; }
.color-field input[type=color]::-webkit-color-swatch-wrapper { padding: 0; }
.color-field input[type=color]::-webkit-color-swatch { border: 1px solid rgba(0, 0, 0, .12); border-radius: 12px; }
.color-field strong { display: block; color: var(--navy-900); }
.color-field small { color: var(--muted); }
.color-preview { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.color-preview span { height: 36px; border-radius: 10px; flex: 1; }
.cp-night { background: var(--night); }
.cp-brand { background: var(--brand); }
.cp-blue { background: var(--blue); }
.cp-btn { flex: 0 0 auto !important; display: grid; place-items: center; padding: 0 22px; color: #fff; font-weight: 700; background: var(--blue); box-shadow: 0 8px 18px -10px var(--blue); }
.link-inline { border: 0; background: none; padding: 0; color: var(--blue); font: inherit; font-weight: 700; cursor: pointer; text-decoration: underline; }

/* قائمة "السياسات" بالهيدر */
.nav-more { position: relative; }
.nav-more > summary {
    list-style: none; display: inline-flex; align-items: center; gap: 4px; cursor: pointer; color: var(--muted); font-weight: 600;
    padding: 10px 14px; border-radius: 10px; white-space: nowrap; transition: color .15s;
}
.nav-more > summary::-webkit-details-marker { display: none; }
.nav-more > summary .icon { width: 16px; height: 16px; transition: transform .2s; }
.nav-more[open] > summary .icon { transform: rotate(180deg); }
.nav-more > summary:hover, .nav-more.active > summary, .nav-more[open] > summary { color: var(--navy-900); }
.nav-more .nav-menu { inset-inline-end: auto; inset-inline-start: 0; }
.is-home .site-header:not(.is-scrolled) .nav-more > summary { color: color-mix(in srgb, var(--brand) 22%, #fff); }
.is-home .site-header:not(.is-scrolled) .nav-more > summary:hover { color: #fff; }
@media (min-width: 901px) { .nav-more > summary { font-size: 1.02rem; } }
@media (max-width: 900px) {
    .nav-more .nav-menu { position: static; box-shadow: none; border: 0; padding: 0 12px; animation: none; }
    .is-home .site-header:not(.is-scrolled) .nav-more > summary { color: var(--navy-900); }
}

/* نموذج تقرير PDF بمخزون البطاقات */
.pdf-panel h2 { display: flex; align-items: center; gap: 8px; }
.pdf-panel h2 .icon { width: 22px; height: 22px; color: var(--blue); }
.pdf-form { display: grid; grid-template-columns: 2fr 1fr 1fr auto auto; gap: 12px; align-items: end; }
.pdf-form .form-group { margin: 0; }
.pdf-codes { padding-bottom: 12px; white-space: nowrap; }
@media (max-width: 900px) { .pdf-form { grid-template-columns: 1fr 1fr; } .pdf-form .form-group:first-child { grid-column: 1 / -1; } }

/* ===== جداول أرتب بكل اللوحة =====
   الأرقام والهواتف والتواريخ (ltr) بتضل يمين مع عناوين الأعمدة بدل ما تروح للشمال */
.table .ltr, .table td.ltr { text-align: right !important; }
.table td .ltr[style*="display: block"] { text-align: right !important; }
.table th { padding: 12px 16px; color: var(--navy-800); background: var(--navy-50); font-size: .8rem; letter-spacing: .01em; border-bottom: 1px solid var(--line); }
.table td { padding: 14px 16px; }
.table tbody tr:nth-child(even) td { background: #FBFCFE; }
.table tbody tr:hover td { background: color-mix(in srgb, var(--blue) 4%, #fff); }
.table td strong { color: var(--navy-900); }
.panel > .table-wrap:last-child { border-radius: 0 0 var(--radius) var(--radius); }
.table bdi, .phone { direction: ltr; unicode-bidi: isolate; font-variant-numeric: tabular-nums; }
.table .num-col { text-align: center; }

/* شريط فوق الجدول: بحث + زر */
.table-toolbar { gap: 12px; flex-wrap: wrap; }
.search-box { position: relative; display: flex; align-items: center; gap: 8px; flex: 1 1 360px; max-width: 520px; }
.search-box > .icon { position: absolute; inset-inline-start: 12px; width: 18px; height: 18px; color: var(--muted); pointer-events: none; }
.search-box .form-control { padding-inline-start: 38px; flex: 1; }
.person { display: inline-flex; align-items: center; gap: 10px; color: inherit !important; }
.person:hover strong { color: var(--blue); }
.count-pill { display: inline-grid; place-items: center; min-width: 30px; height: 26px; padding: 0 8px; border-radius: 999px; background: color-mix(in srgb, var(--blue) 10%, #fff); color: var(--blue); font-weight: 800; font-size: .85rem; }
.table-note { padding: 10px 18px 16px; margin: 0; }
@container (max-width: 640px) {
    .table td.num-col { text-align: start; }
}

/* فيديوهات الشرح */
.help-page { padding-top: 28px; }
.help-video { position: relative; aspect-ratio: 16 / 9; background: var(--night); border-radius: 18px; overflow: hidden; box-shadow: var(--shadow-lg); }
.help-video video { width: 100%; height: 100%; display: block; object-fit: contain; background: var(--night); }
.help-page .help-video { max-width: 980px; margin: 0 auto 28px; }
.help-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; max-width: 980px; margin: 0 auto 24px; }
.help-step { display: flex; gap: 12px; align-items: flex-start; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 16px; }
.help-step > span { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--blue); color: #fff; font-weight: 800; }
.help-step strong { color: var(--navy-900); }
.help-step p { margin: 4px 0 0; color: var(--muted); font-size: .92rem; line-height: 1.7; }
.help-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 18px; }
.help-card { overflow: hidden; }
.help-card .help-video { border-radius: 0; box-shadow: none; }
.help-card h2 { margin: 0 0 6px; font-size: 1.15rem; }