/* ==========================================================================
   views.css — Per-view layouts.
   ==========================================================================
   MOBILE-FIRST REFACTOR — Phase A map of areas needing work:
     Phase B: .header-actions · .brand-name                   → hamburger menu
     Phase C: .tab-bar / .tab                                 → mobile tabs w/ scroll-snap
     Phase C: .students-table / .table-wrapper                → card list on mobile
     Phase C: .att-btn, .star-btn, .check-btn, .tri-btn       → ensure ≥ 44px on mobile
     Phase D: .class-card · .class-card-add                   → single column on mobile
     Phase D: .portfolio-section-*                            → accordion tighter on mobile
     Phase D: .schedule-table / .schedule-wrapper             → day-by-day stack / better h-scroll
     Phase D: .file-card · .book-card                         → stack on mobile
     Phase D: .students-toolbar · .students-actions           → full-width controls
     Phase D: .wizard-footer · .wizard-header                 → stack on mobile
     Phase D: .auth-card                                      → full-width on very small screens
   ========================================================================== */

.view { display: block; }
.view[hidden] { display: none !important; }

/* ---------- Header extras ---------- */
.header-actions {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}
.header-user {
    font-size: var(--fs-sm);
    color: var(--text-muted);
}

/* ==========================================================================
   Hamburger button (Phase B) — hidden on ≥ 768px
   ========================================================================== */
.hamburger-btn {
    display: none;                         /* Mobile-only: shown in @media below */
    width:  var(--touch-target-min);
    height: var(--touch-target-min);
    padding: 0;
    border: 0;
    background: transparent;
    border-radius: var(--radius-md);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    transition: background var(--dur-fast) var(--ease);
}
.hamburger-btn:hover,
.hamburger-btn:active { background: var(--surface-alt); }
.hamburger-lines {
    display: inline-flex;
    flex-direction: column;
    gap: 5px;
    width: 22px;
}
.hamburger-lines span {
    display: block;
    height: 2.5px;
    border-radius: 2px;
    background: var(--text);
    transition: transform var(--dur-fast) var(--ease);
}

/* ==========================================================================
   Drawer (Phase B) — slide-in from the right (RTL "side")
   ========================================================================== */
.drawer-root {
    position: fixed;
    inset: 0;
    z-index: 800;
    pointer-events: none;
}
.drawer-root[hidden] { display: none; }
.drawer-root .drawer-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    opacity: 0;
    transition: opacity var(--dur-base) var(--ease);
    pointer-events: auto;
}
.drawer-root.is-open .drawer-backdrop { opacity: 1; }

.drawer {
    position: absolute;
    top: 0;
    right: 0;
    height: 100dvh;
    height: 100vh;
    width: min(86vw, 340px);
    background: var(--surface);
    box-shadow: -8px 0 24px rgba(0, 0, 0, 0.15);
    transform: translateX(100%);
    transition: transform var(--dur-base) var(--ease);
    pointer-events: auto;
    display: flex;
    flex-direction: column;
    padding-top: var(--safe-top);
    padding-bottom: var(--safe-bottom);
}
.drawer-root.is-open .drawer { transform: translateX(0); }

.drawer-header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-5);
    border-bottom: 1px solid var(--border);
    background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 6%, transparent), color-mix(in srgb, var(--primary) 3%, transparent));
}
.drawer-avatar {
    width: 48px; height: 48px;
    flex-shrink: 0;
    border-radius: var(--radius-full);
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
    color: var(--text-inverse);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--fw-bold);
    font-size: var(--fs-lg);
}
.drawer-user { flex: 1; min-width: 0; }
.drawer-name {
    font-weight: var(--fw-bold);
    font-size: var(--fs-body);
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.drawer-school {
    font-size: var(--fs-sm);
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.drawer-close {
    flex-shrink: 0;
    width:  var(--touch-target-min);
    height: var(--touch-target-min);
    background: transparent;
    border: 0;
    border-radius: var(--radius-full);
    font-size: 24px;
    line-height: 1;
    color: var(--text-muted);
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease);
}
.drawer-close:hover { background: var(--surface-alt); color: var(--text); }

.drawer-nav {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-3) var(--space-2);
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}
.drawer-link {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-height: var(--touch-target-min);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    color: var(--text);
    text-decoration: none;
    font-size: var(--fs-body);
    transition: background var(--dur-fast) var(--ease);
}
.drawer-link:hover,
.drawer-link:active { background: var(--surface-alt); color: var(--text); }
.drawer-link-icon { font-size: 20px; line-height: 1; }

.drawer-footer {
    padding: var(--space-4);
    border-top: 1px solid var(--border);
}
.drawer-footer .btn {
    min-height: var(--touch-target-min);
    justify-content: center;
    gap: var(--space-2);
}

/* Prevent body scroll while drawer open */
body.drawer-open { overflow: hidden; }

/* ==========================================================================
   Bottom navigation (Phase B) — mobile only
   ========================================================================== */
/* الشريط السفلي (تصميم هـ): خلفية رصاصية متدرّجة، والتبويب النشط حبّة كحلية بارزة */
/* ── الشريطُ عائمٌ لا ملتصق ──
   كان يملأ عرض الشاشة ملتصقاً بحافّتها بخلفيةٍ صلبةٍ وحدٍّ علويّ، فيقطع
   الصفحةَ قطعاً وينتهي المحتوى عنده. صار يُرفع عن الحافّة وجانبيها
   ويُدوَّر، وتصير خلفيتُه زجاجاً ضبابياً يمرّ المحتوى تحته فيُرى لونُه
   خافتاً — كما فعل iOS 26.

   والقياساتُ محسوبة: الشريطُ ‎56px‎ بحشوته (‎4px‎ حولَ الحبّات، فالحبّةُ
   ‎48px‎ — وهي فوق أدنى هدفِ لمسٍ يقبله آبل: ‎44px‎)، والفجوةُ ‎12px‎ فوق
   المنطقة الآمنة. فما يحجزه من الشاشة =
   ‎الارتفاع + الفجوة + الآمنة‎، وهو ما تحسبه القواعدُ الخمسُ الأخرى. */
.bottom-nav {
    position: fixed;
    bottom: calc(var(--safe-bottom) + var(--bottom-nav-gap));
    inset-inline: var(--bottom-nav-gap);
    z-index: 70;
    display: none;                     /* Visible only on mobile (@media below) */
    padding: 4px;
    border-radius: 22px;
    /* ‎78٪‎ لا ‎72٪‎: الزجاجُ يجعل أرضيّةَ الاسم متغيّرةً بما يمرّ تحته،
       وعند ‎72٪‎ يهبط الاسمُ الخافت إلى ‎3.04:1‎ حين تمرّ بطاقةٌ كحليّة.
       والكثافةُ هنا تُبقي الشفَّ محسوساً وتُثبّت الأرضية. */
    background: rgba(255, 255, 255, .78);
    -webkit-backdrop-filter: blur(30px) saturate(200%);
    backdrop-filter: blur(30px) saturate(200%);
    /* والزجاجُ لا يُقرأ زجاجاً بالشفافية وحدها: يقرؤه الناظر من ثلاثة —
       ضبابٌ يُميّع ما تحته، وإشباعٌ يُبقي لونَه، وخيطٌ لامعٌ على حافّته
       العليا كأنّ الضوء يلمسها. فهذه الثلاثةُ مجتمعة. */
    border: 1px solid rgba(255, 255, 255, .55);
    box-shadow: 0 8px 28px rgba(16, 24, 40, .16),
                0 2px 6px rgba(16, 24, 40, .07),
                inset 0 1px 0 rgba(255, 255, 255, .75),
                inset 0 -1px 0 rgba(16, 24, 40, .05);
}
/* ومن لا يعرف الزجاج يرى سطحاً معتماً بدل شفٍّ لا يُقرأ خلفه. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .bottom-nav { background: #FFFFFF; }
}
.bottom-nav[hidden] { display: none !important; }

.bottom-nav .bn-item {
    flex: 1;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: calc(var(--bottom-nav-height) - 8px);
    padding: 5px 3px 4px;
    border-radius: 18px;
    /* حبرٌ أغمقُ من الخافت العام: يُقاس على أغمقِ أرضيةٍ قد يصنعها الزجاج
       (كحليٌّ تحته) فيبلغ ‎4.69:1‎، وعلى أفتحِها ‎7.26:1‎. */
    color: #575753;
    text-decoration: none;
    /* ‎10‎ لا ‎11‎ — درجةٌ واحدةٌ أصغر، بقرار المعلّم (٢٨ أغسطس ٢٠٢٦).
       والوزنُ ‎500‎ لا ‎700‎: العريضُ ثقيلٌ على اسمٍ في العاشرة، والعربيةُ
       تُظهِر ذلك أكثرَ من اللاتينية — حروفُها متّصلةٌ فتلتحم عند التغليظ.
       واللونُ لم يُمسّ: لا المقاسُ ولا الوزنُ يغيّر نسبةَ التباين، فتبقى
       ‎4.69:1‎ على أغمقِ أرضيةٍ يصنعها الزجاج و‎7.26:1‎ على أفتحها. */
    font-size: 10px;
    font-weight: var(--fw-medium);
    line-height: 1.2;
}

/* الحبّة الداخلية — هي التي تتلوّن عند التنشيط */
.bottom-nav .bn-item > * {
    position: relative;
    z-index: 1;
}
.bottom-nav .bn-item::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: transparent;
    transition: background var(--dur-fast) var(--ease),
                box-shadow var(--dur-fast) var(--ease);
}
.bottom-nav .bn-item.is-active {
    /* الحبّةُ بيضاء، فالحرفُ والرسمُ عليها بلونِ التطبيق لا أبيضَ على أبيض.
       (بقرار المعلّم ٣ سبتمبر ٢٠٢٦، بعد معاينةٍ بثلاثة ألوان.) */
    color: var(--ink-primary);
    /* ‎600‎ — درجةٌ واحدةٌ فوق إخوته الخاملين، تكفي لتمييزه ولا تُثقله.
       وكان ‎900‎، و`fonts.css` يحمّل ‎400/500/600/700‎ فقط — قيسَ في
       المتصفّح لا في الملفّ. فكان ‎900‎ وزناً لا وجودَ له يزوّره المتصفّح
       بمطّ حروف الـ‎700‎ بلا خطٍّ خلفها، فتخرج غليظةً مشوّهةً على الشاشات
       الكثيفة. */
    font-weight: var(--fw-semibold);
}
.bottom-nav .bn-item.is-active::before {
    /* بيضاءُ ممتلئةٌ لا تدرّجَ لون الهُويّة — والشريطُ نفسُه زجاجٌ أبيضُ
       شفّاف، فالحبّةُ تُرى بحدّها وظلّها لا بلونها. واللونُ المختارُ يبقى
       حاضراً في الحدّ وفي حبرِ الرسم والاسم. */
    background: #FFFFFF;
    border: 1px solid color-mix(in srgb, var(--primary) 22%, transparent);
    box-shadow: 0 2px 8px rgba(16, 24, 40, .16),
                inset 0 1px 0 rgba(255, 255, 255, .9);
}

.bottom-nav .bn-icon {
    /* صار المحتوى رسماً خطّيّاً لا حرفَ إيموجي (٢ سبتمبر ٢٠٢٦)، فسقط
       `font-size` — لم يعد يقيس شيئاً. والمقاسُ على الوسم نفسِه وفي
       القاعدة أدناه معاً: ‎22px‎، وهي الدرجةُ التي عُوير عليها الشريط.
       وارتفاعُ الشريط ومساحةُ اللمس لا يتبعانها: القياسُ من
       `--bottom-nav-height` و`min-height` (‎48px‎)، والمحتوى عندها ‎45px‎.
       و`line-height: 1` باقيةٌ: الغلافُ يرث ‎1.2‎ من `.bn-item` فيزيد
       ارتفاعَه بلا سبب. */
    line-height: 1;
    margin-bottom: 2px;
    transition: transform var(--dur-fast) var(--ease);
}
/* `display: block` تُلغي فجوةَ خطّ الأساس تحت الرسم — سابقتُها في
   `.doc-ib svg` أعلاه. ولا لونَ هنا: `currentColor` على الوسم يرث حبرَ
   الخانة في الحالات الثلاث. */
.bottom-nav .bn-icon svg {
    width: 22px;
    height: 22px;
    display: block;
}
.bottom-nav .bn-item.is-active .bn-icon { transform: scale(1.05); }

.bottom-nav .bn-label {
    /* ‎10‎ صراحةً: `--fs-xs` هنا كان يعيده إلى ‎11‎ فوق ما في `.bn-item`. */
    font-size: 10px;
    letter-spacing: -0.1px;
}

/* ==========================================================================
   Responsive visibility switches (Phase B)
   ========================================================================== */

/* Mobile (< 768px): hide desktop header actions, show hamburger & bottom-nav */
@media (max-width: 768px) {
    .header-actions { display: none; }
    .hamburger-btn  { display: inline-flex; }
    /* الجذورُ وحدها تحمل القائمة، وما عداها يحمل سهم الرجوع — والسمة
       `hidden` وحدها لا تكفي أمام `display` صريح. */
    .hamburger-btn[hidden] { display: none; }
    .bottom-nav     { display: flex; }

}

/* Desktop (≥ 768px): bottom-nav + drawer never show */
@media (min-width: 769px) {
    .hamburger-btn,
    .bottom-nav,
    .drawer-root { display: none !important; }
}

/* ==========================================================================
   Auth view (login / register)
   ========================================================================== */
.view-auth {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-8) var(--space-4);
    background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-light) 100%);
    background-attachment: fixed;
    position: relative;
}

.view-auth::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 20% 20%, rgba(255,255,255,0.10) 0, transparent 40%),
        radial-gradient(circle at 80% 70%, rgba(255,255,255,0.08) 0, transparent 45%);
    pointer-events: none;
}

/* TODO(phase-d): on very small phones (<480px), remove horizontal padding
   from .view-auth and let the card extend to edges. */
.auth-card {
    position: relative;
    width: 100%;
    max-width: 460px;
    background: var(--surface);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    padding: var(--space-10) var(--space-8);
    animation: slide-up var(--dur-slow) var(--ease);
}

@keyframes slide-up {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0);    }
}

.auth-logo {
    text-align: center;
    font-size: 48px;
    line-height: 1;
    margin-bottom: var(--space-4);
}

.auth-title {
    text-align: center;
    font-size: var(--fs-h1);
    color: var(--ink-primary);
    margin: 0 0 var(--space-2);
}

.auth-subtitle {
    text-align: center;
    color: var(--text-muted);
    margin-bottom: var(--space-8);
}

.auth-divider {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin: var(--space-6) 0;
    color: var(--text-muted);
    font-size: var(--fs-sm);
}
.auth-divider::before,
.auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
}

/* شرطُ التحقّق في شاشة الاستعادة: يُقرأ ولا يصرخ — تنبيهٌ لا خطأ. */
.auth-note {
    margin: var(--space-4) 0 0;
    padding: var(--space-3);
    border-radius: 10px;
    background: var(--beige, #EFEDE6);
    font-size: var(--fs-xs);
    line-height: 1.9;
    color: var(--text-muted);
    text-align: center;
}

.auth-switch {
    text-align: center;
    margin-top: var(--space-4);
    font-size: var(--fs-sm);
    color: var(--text-muted);
}
.auth-switch button {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    color: var(--ink-primary);
    cursor: pointer;
    font-weight: var(--fw-medium);
}
.auth-switch button:hover { text-decoration: underline; }

/* ==========================================================================
   Dashboard
   ========================================================================== */
.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-4);
    gap: var(--space-3);
    flex-wrap: wrap;
}

/* رأس صفحة الفصول: العنوان يميناً وزر الإضافة يساراً على سطر واحد.
   ‎.section-header عامّة تلتفّ عند الضيق — وهنا العنوان كلمة واحدة
   فيسع الاثنان، ويكفي أن نسمح للعنوان بالانكماش. */
.classes-header { flex-wrap: nowrap; }


/* Stat cards (desktop: vertical / mobile override below) */
.stat-card {
    padding: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}
.stat-value {
    font-size: var(--fs-display);
    font-weight: var(--fw-bold);
    color: var(--ink-primary);
    line-height: 1;
}
.stat-label {
    color: var(--text-muted);
    font-size: var(--fs-sm);
}
.stat-icon {
    font-size: 24px;
    margin-bottom: var(--space-2);
}

/* ==========================================================================
   Profile card (on dashboard) — big clickable card above the stat grid
   ========================================================================== */

/* ==========================================================================
   Profile screen (#/profile) — per-field inline edit
   ========================================================================== */

/* Compact info table used in portfolio read-only personal section */
.info-table-compact {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-sm);
}
.info-table-compact th {
    text-align: right;
    font-weight: var(--fw-medium);
    color: var(--text-muted);
    padding: var(--space-2) var(--space-3);
    width: 42%;
    vertical-align: top;
    border-bottom: 1px solid var(--border);
}
.info-table-compact td {
    padding: var(--space-2) var(--space-3);
    color: var(--text);
    border-bottom: 1px solid var(--border);
}
.info-table-compact tr:last-child th,
.info-table-compact tr:last-child td { border-bottom: 0; }


/* ==========================================================================
   Classes grouped by stage (#/classes)
   ========================================================================== */
.classes-stage-group {
    margin-bottom: var(--space-6);
}
/* بلا خط فاصل بين المراحل: لافتة كل مرحلة تُعرّف بنفسها، والخط كان
   يضيف ثِقلاً في صفحة قوامها صفوف خفيفة. التباعد وحده يفصل. */
.classes-stage-group + .classes-stage-group {
    padding-top: var(--space-4);
}
/* لافتة المرحلة: عنوان خفيف لا شريط — الفصول نفسها هي البطاقات. */
.cl-stage {
    display: flex; align-items: baseline; gap: 7px;
    margin: 0 3px var(--space-2);
    font-size: 12.5px; font-weight: var(--fw-bold); color: var(--text-muted);
}
.cl-stage b { color: var(--ink-primary); font-size: 13.5px; margin-inline-end: 2px; }

/* صفّ الفصل: بتدرّج الأزرار الرصاصية المعتمد في التطبيق. */
.cls-row {
    display: flex; align-items: center; gap: 11px; width: 100%;
    padding: 10px 13px; border-radius: 11px; cursor: pointer;
    font-family: inherit; text-align: right;
    background: linear-gradient(150deg, #fff 0%, color-mix(in srgb, var(--beige) 42%, var(--mix-base)) 50%, #ECEAE3 100%);
    border: 1.5px solid color-mix(in srgb, var(--beige) 85%, #000);
    box-shadow: inset 0 1.5px 0 var(--sheen), 0 3px 8px rgba(16, 24, 40, .09);
}
.cls-row + .cls-row { margin-top: 6px; }
.cls-row:active { transform: scale(.99); }
.cls-tx { flex: 1; min-width: 0; display: block; }
.cls-t {
    display: block; font-size: 14px; font-weight: var(--fw-bold);
    color: var(--ink-primary);
}
.cls-s { display: block; font-size: 11.5px; color: var(--text-muted); margin-top: 1px; }
/* زر إدارة الفصل في الشريط العلوي لصفحة الفصل — بمحاذاة زر الرجوع
   المقابل له، وبارتفاعه نفسه (٤٢px). */
/* شكلُ زرِّ «تعديل» في الجدول نفسه: حبّةٌ فيها كلمة لا مربّعٌ فيه رمز —
   فالرمزُ وحده يُخمَّن، والكلمةُ تُقرأ. */
.cls-edit-btn {
    min-height: 36px; flex-shrink: 0; padding: 0 12px;
    display: inline-flex; align-items: center;
    border-radius: 11px; cursor: pointer;
    font-family: inherit; font-size: 12.5px; font-weight: var(--fw-bold);
    color: var(--ink-primary);
    background: linear-gradient(150deg, #fff 0%, color-mix(in srgb, var(--beige) 42%, var(--mix-base)) 50%, #ECEAE3 100%);
    border: 1.5px solid color-mix(in srgb, var(--beige) 85%, #000);
    box-shadow: inset 0 1.5px 0 var(--sheen), 0 3px 8px rgba(16, 24, 40, .09);
}
.cls-edit-btn:active { transform: scale(.98); }

/* ==========================================================================
   Settings menu (Snapchat-style list)
   ========================================================================== */


/* Drawer avatar: support image */
.drawer-avatar { overflow: hidden; }
.drawer-avatar img { width: 100%; height: 100%; object-fit: cover; }

/* ==========================================================================
   Mobile stat card layout (Phase C) — 2×2 rectangular cards
   Icon top-left · Label top-right · Big number bottom-right
   ========================================================================== */
@media (max-width: 768px) {
    /* Reshape each stat card: icon + label top, value bottom-right */
    #view-dashboard .stat-card {
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-rows: auto 1fr;
        grid-template-areas:
            "label icon"
            "value value";
        align-items: start;
        gap: var(--space-2);
        min-height: 110px;
        padding: var(--space-4);
    }
    #view-dashboard .stat-card .stat-icon {
        grid-area: icon;
        margin: 0;
        font-size: 26px;
        line-height: 1;
    }
    #view-dashboard .stat-card .stat-label {
        grid-area: label;
        align-self: center;
        text-align: start;         /* logical: right in RTL */
        font-size: var(--fs-sm);
        color: var(--text-muted);
    }
    #view-dashboard .stat-card .stat-value {
        grid-area: value;
        justify-self: start;       /* logical: right in RTL */
        align-self: end;
        font-size: 22px;
        line-height: 1;
    }
}

/* ==========================================================================
   Mobile dashboard simplification (Phase C)
   Hide the classes section (#2) and shortcuts section (#3) — these are now
   dedicated routes (#/classes, #/shortcuts). On desktop keep everything.
   ========================================================================== */

/* Class cards */
/* TODO(phase-d): on mobile (<768px) place cards in a single column,
   reduce min-height, and make the tap area fill the full card. */
/* بطاقة مصغّرة بارزة — نفس تدرّج الألوان، مع إضاءة علوية وظل ملوّن */
.class-card {
    --card-color: var(--primary);
    position: relative;
    min-height: 104px;
    padding: 12px;
    color: var(--text-inverse);
    background: linear-gradient(135deg, var(--card-color) 0%, var(--primary-light) 120%);
    border: 0;
    border-radius: 15px;
    box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .3),
                inset 0 -2px 4px rgba(0, 0, 0, .18),
                0 6px 12px color-mix(in srgb, var(--card-color) 32%, transparent),
                0 2px 4px rgba(16, 24, 40, .18);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 7px;
    text-align: right;   /* البطاقة زر، والنص يبدأ من اليمين مثل نموذج أ */
    transition: transform var(--dur-base) var(--ease),
                box-shadow var(--dur-base) var(--ease);
}
.class-card:hover {
    transform: translateY(-3px);
}
.class-card-title {
    margin: 0;
    font-size: 13px;
    line-height: 1.35;
    color: var(--text-inverse);
}
.class-card-subject {
    font-size: 10.5px;
    font-weight: var(--fw-bold);
    opacity: 0.9;
}
.class-card-meta {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    font-size: 10px;
}
.class-card-count {
    font-size: var(--fs-h1);
    font-weight: var(--fw-bold);
}
/* البطاقة الفاتحة (اللوحة المعتمدة): أبيض يتدرّج للون المختار،
   كتابة كحلية، وإطار رفيع حتى تنفصل عن خلفية الصفحة */
.class-card.card-light {
    color: var(--ink-primary);
    background: linear-gradient(150deg, #fff 0%,
        color-mix(in srgb, var(--card-color) 42%, var(--mix-base)) 50%,
        var(--card-color) 100%);
    border: 1.5px solid color-mix(in srgb, var(--card-color) 85%, #000);
    box-shadow: inset 0 1.5px 0 var(--sheen),
                0 5px 11px rgba(16, 24, 40, .12),
                0 2px 4px color-mix(in srgb, var(--card-color) 45%, transparent);
}
.class-card.card-light .class-card-title { color: var(--ink-primary); }
.class-card.card-light .class-card-subject {
    color: color-mix(in srgb, var(--primary) 62%, var(--mix-base));
    opacity: 1;
}


/* Empty state */
.empty-state {
    padding: var(--space-12) var(--space-6);
    text-align: center;
    border: 2px dashed var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
}
.empty-state .icon {
    font-size: 48px;
    margin-bottom: var(--space-3);
    opacity: 0.8;
}
.empty-state h3 { margin-bottom: var(--space-2); }
.empty-state p  { color: var(--text-muted); margin-bottom: var(--space-5); }

/* Add-class tile (placeholder card with dashed border) */
.class-card-add {
    background: var(--surface);
    color: var(--ink-primary);
    border: 2px dashed var(--border-strong);
    box-shadow: none;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-weight: var(--fw-medium);
}

.class-card-add:hover {
    background: var(--surface-alt);
    border-color: var(--primary-light);
    color: var(--ink-primary);
}
.class-card-add .plus {
    font-size: 32px;
    line-height: 1;
    margin-bottom: var(--space-2);
}


/* ---------- Reminders ---------- */
.chip {
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-full);
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-muted);
    font-family: inherit;
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    cursor: pointer;
    transition: all var(--dur-fast) var(--ease);
}
.chip:hover { border-color: var(--primary-light); color: var(--text); }
.chip.active {
    background: var(--primary);
    color: var(--text-inverse);
    border-color: var(--primary);
}

/* ==========================================================================
   Class view
   ========================================================================== */
.class-topbar {
    display: flex;
    /* لم يبقَ فيه إلا زرُّ التعديل بعدما انتقل الرجوعُ إلى الشريط العلوي،
       فيُدفع إلى نهاية السطر — يسارِه في العربية. */
    justify-content: flex-end;
    align-items: center;
    gap: var(--space-4);
    flex-wrap: wrap;
    /* بلا حشو علوي: ‎.app-main تعطي الصفحة ٢١px أصلاً، فإضافته هنا
       تُنزل الشريط ٤٢px عن الترويسة بلا داعٍ. */
    padding-block: 0 var(--space-4);
}
/* Boxed back button — square card with a right-pointing back arrow.
   The arrow is drawn by ::before (CSS mask), so any <a>/<button> with this
   class renders identically with no inner markup. */
.btn-back-box {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    padding: 0;
    background: var(--surface, #fff);
    border: 1px solid #E7EAF0;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(23, 32, 55, .06);
    color: #475467;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease),
                transform var(--dur-fast) var(--ease);
}
.btn-back-box::before {
    content: '';
    width: 20px;
    height: 20px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.btn-back-box:hover { color: #475467; }
.btn-back-box:active { background: #F2F4F7; transform: scale(.96); }

/* ==========================================================================
   Class hero (design «ح») — split header: a bold diagonal wedge in the
   class's own color (--cls-color) carrying the section letter, beside the
   class name and info chips on white.
   ========================================================================== */
.class-hero-split {
    --cls-color: var(--primary);
    position: relative;
    display: flex;
    align-items: stretch;
    background: var(--surface, #fff);
    border-radius: var(--radius-lg);
    overflow: hidden;
    min-height: 118px;
    box-shadow: 0 8px 22px rgba(23, 32, 55, .08), 0 1px 3px rgba(23, 32, 55, .05);
    margin-bottom: var(--space-4);
}
.chs-side {
    position: relative;
    flex: 0 0 118px;
    width: 118px;
}
.chs-side::before {
    /* light tint wedge peeking behind the main one */
    content: '';
    position: absolute;
    inset: 0;
    background: color-mix(in srgb, var(--cls-color) 22%, var(--mix-base));
    clip-path: polygon(22% 0, 100% 0, 100% 100%, 2% 100%);
}
.chs-side::after {
    /* main diagonal gradient wedge */
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(205deg,
        color-mix(in srgb, var(--cls-color) 82%, var(--mix-base)) 0%,
        var(--cls-color) 55%,
        color-mix(in srgb, var(--cls-color) 72%, #000) 100%);
    clip-path: polygon(34% 0, 100% 0, 100% 100%, 14% 100%);
}
.chs-side-label {
    position: absolute;
    inset: 0;
    z-index: 1;
    /* keep the text off the slanted left edge (app is RTL-only) */
    padding-left: 26px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
}
.chs-side-word {
    font-size: 11px;
    font-weight: var(--fw-bold);
    color: rgba(255, 255, 255, .85);
    line-height: 1.4;
}
.chs-side-letter {
    font-size: 46px;
    font-weight: var(--fw-bold);
    color: #fff;
    line-height: 1.15;
}
.chs-side-letter.small { font-size: 22px; }
.chs-body {
    flex: 1;
    min-width: 0;
    padding: 15px 12px 14px 16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 9px;
}
.chs-name {
    margin: 0;
    font-size: 19px;
    font-weight: var(--fw-bold);
    color: var(--text);
    line-height: 1.4;
}
.chs-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}
.chs-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #F2F4F7;
    border: 1px solid #E7EAF0;
    color: #475467;
    border-radius: var(--radius-full);
    padding: 3px 10px;
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    line-height: 1.6;
}
.chs-chip.tinted {
    background: color-mix(in srgb, var(--cls-color) 10%, var(--mix-base));
    border-color: color-mix(in srgb, var(--cls-color) 22%, var(--mix-base));
    color: color-mix(in srgb, var(--cls-color) 60%, #000);
}
@media (min-width: 768px) {
    .chs-name { font-size: var(--fs-h2); }
    .chs-side { flex-basis: 132px; width: 132px; }
}

/* ==========================================================================
   Class hub — featured students card + section grid (design "و")
   ========================================================================== */
.hub-featured {
    --cls-color: var(--primary);
    display: block;
    position: relative;
    overflow: hidden;
    /* كحلي مصمت: التدرّج الثلاثي كان يُفتّح الزاوية السفلية ويُغمّق
       العليا، فيبدو اللون غير ثابت. */
    background: var(--primary);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    color: #fff;
    text-decoration: none;
    box-shadow: 0 8px 20px color-mix(in srgb, var(--cls-color) 25%, transparent);
    margin-bottom: var(--space-4);
}
.hub-featured:hover { color: #fff; }
.hub-featured-head {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}
/* `.hub-featured-icon` حُذفت (١٩ أغسطس ٢٠٢٦): كانت مربّعاً فيه 👥 يسبق
   «سجل متابعة الطلاب» في بطاقتَي الفصل والسجلّ. لا مستعملَ لها بعد. */
.hub-featured-titles { flex: 1; min-width: 0; }
.hub-featured-title { font-weight: var(--fw-bold); font-size: var(--fs-lg); }
.hub-featured-sub   { font-size: var(--fs-xs); opacity: .85; margin-top: 2px; }
/* السهم مرسوم بالحدود لا بحرف: حروف «‹›» تنعكس تلقائياً مع اتجاه
   النص، فاتجاهها في صفحة عربية غير مضمون. الحدّان العلوي واليسار
   بدوران ‎-٤٥ درجة يشيران يساراً دائماً. */
.hub-featured-chev {
    flex: none; width: 9px; height: 9px; margin-inline-start: 2px;
    border-top: 2.5px solid #fff;
    border-left: 2.5px solid #fff;
    transform: rotate(-45deg);
}
/* جُرّب وميضُ العنوان معه (١٩ أغسطس ٢٠٢٦) بمدّاتٍ أربع، فاختار المعلّم
   الرجوعَ إلى السهم وحدَه بإعداده الأوّل. */
@media (prefers-reduced-motion: no-preference) {
    .hub-featured-chev { animation: chev-blink 1.4s ease-in-out infinite; }
}
@keyframes chev-blink {
    0%, 100% { opacity: 1; }
    50%      { opacity: .3; }
}
.hub-featured-stats {
    display: flex;
    gap: var(--space-2);
    margin-top: var(--space-4);
}
.hf-stat {
    flex: 1;
    background: rgba(255, 255, 255, .13);
    border-radius: 11px;
    padding: var(--space-2);
    text-align: center;
}
.hf-num { font-weight: var(--fw-bold); font-size: 17px; }
.hf-lbl { font-size: 10px; opacity: .8; margin-top: 1px; }

.hub-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
    padding-bottom: var(--space-8);
}
.hub-tile {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    background: var(--surface);
    border: 1px solid #EEF1F5;
    border-radius: var(--radius-md);
    padding: var(--space-4);
    text-decoration: none;
    box-shadow: 0 1px 3px rgba(16, 24, 40, .05);
    transition: border-color var(--dur-fast) var(--ease),
                transform var(--dur-fast) var(--ease);
}
.hub-tile:hover { border-color: var(--primary-light); transform: translateY(-1px); }
.hub-tile-icon {
    width: 42px; height: 42px;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 21px;
    flex-shrink: 0;
}
.hub-tile-body  { flex: 1; min-width: 0; }
.hub-tile-label { font-weight: var(--fw-bold); font-size: var(--fs-sm); color: var(--text); }
.hub-tile-count { font-size: var(--fs-xs); font-weight: var(--fw-bold); margin-top: 1px; }


.att-stat {
    flex: 1;
    min-width: 64px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-1);
    font-family: inherit;
    font-size: var(--fs-xs);
    color: var(--text-muted);
    cursor: pointer;
    transition: border-color var(--dur-fast) var(--ease),
                background var(--dur-fast) var(--ease);
}
.att-stat.active {
    border-color: var(--stat-color, var(--primary));
    background: color-mix(in srgb, var(--stat-color, var(--primary)) 8%, #fff);
}

/* ==========================================================================
   نافذة طباعة السجل — أنواع ببطاقات قابلة للتوسّع (الشكل المعتمد)
   ========================================================================== */
.popt-lbl {
    font-size: var(--fs-xs);
    color: var(--text-muted);
    font-weight: var(--fw-bold);
    margin: var(--space-3) 2px var(--space-2);
}
.popt {
    border: 1.5px solid var(--border);
    border-radius: 14px;
    padding: 13px;
    margin-bottom: 10px;
    transition: border-color var(--dur-fast) var(--ease),
                background var(--dur-fast) var(--ease);
}
.popt.on {
    border-color: var(--primary);
    background: color-mix(in srgb, var(--primary) 5%, var(--mix-base));
}
.popt-hd { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; }
.popt-ic { font-size: 22px; flex-shrink: 0; line-height: 1.3; }
.popt-tx { min-width: 0; }
.popt-tt { font-weight: var(--fw-bold); font-size: 15px; color: var(--text); }
.popt-dd { font-size: 12.5px; color: var(--text-muted); margin-top: 2px; line-height: 1.5; }
.popt-rd {
    width: 22px; height: 22px;
    border-radius: 50%;
    border: 2px solid var(--border);
    flex-shrink: 0;
    margin-inline-start: auto;
    margin-top: 2px;
    display: grid; place-items: center;
}
.popt.on .popt-rd { border-color: var(--primary); }
.popt.on .popt-rd::after {
    content: '';
    width: 11px; height: 11px;
    border-radius: 50%;
    background: var(--primary);
}
.popt-sub {
    display: none;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed var(--border);
}
.popt.on .popt-sub { display: block; }
.pseg-row { display: flex; gap: 8px; }
.pseg {
    flex: 1;
    min-height: 42px;
    border: 1.5px solid var(--border);
    background: var(--surface);
    border-radius: 11px;
    font-family: inherit;
    font-weight: var(--fw-bold);
    font-size: 13.5px;
    color: var(--text-muted);
    cursor: pointer;
}
.pseg.on {
    border-color: var(--primary);
    background: color-mix(in srgb, var(--primary) 7%, var(--mix-base));
    color: var(--ink-primary);
}
.pdates { display: none; gap: 8px; margin-top: 10px; }
.pdates.show { display: flex; }
.pdates .fld { flex: 1; }
.pdates label {
    display: block;
    font-size: 11.5px;
    color: var(--text-muted);
    font-weight: var(--fw-bold);
    margin-bottom: 4px;
}
.pdates input {
    width: 100%;
    min-height: 42px;
    border: 1.5px solid var(--border);
    border-radius: 10px;
    padding: 0 10px;
    font-family: inherit;
    font-size: 13.5px;
    color: var(--text);
    background: var(--surface);
}
.pnote {
    font-size: 11.5px;
    color: #C9A961;
    font-weight: var(--fw-bold);
    margin-top: 8px;
}

/* ==========================================================================
   Register page header — class-colored hero + toolrow + mark-all bar
   ========================================================================== */

/* زر الطباعة داخل البطاقة الملوّنة */
/* زرُّ الطباعة كلمةٌ لا رمز: كان مربّعاً شفّافاً ‎18٪‎ فيه 🖨️ يذوب في
   البطاقة، ثمّ صار أبيضَ صلباً، ثمّ حلّت «طباعة» محلَّ الرمز — فلا يحتاج
   المعلّمُ أن يخمّن ما يفعله.
   وارتفاعُه ‎34px‎ بطلب المعلّم — لكنّ مساحةَ اللمس تبقى ‎44px‎ عبر زائفٍ
   شفّافٍ يمدّها خمسةَ بكسلاتٍ فوق وتحت. فالصغرُ في العين لا في الإصبع،
   وهو الحدُّ الذي تطلبه آبل لكل هدفِ لمس.
   وحالتُه المعطَّلة كانت ‎opacity: .45‎ فتكاد تختفي — وهي الحالةُ التي
   يراها المعلّمُ أوّلَ مرّةٍ إذ لا طلابَ بعد. صارت بيضاءَ خافتةً تبقى
   مرئيّةً وتقول «هنا زرٌّ لا يعمل الآن» بدل أن تقول لا شيء. */
.reg-hero-print {
    height: 34px;
    padding: 0 13px;
    position: relative;
    border-radius: 11px;
    background: #fff;
    color: var(--primary);
    border: 0;
    font-size: 13.5px;
    font-weight: var(--fw-bold);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    cursor: pointer;
    font-family: inherit;
    box-shadow: 0 2px 8px rgba(16, 24, 40, .2);
    transition: transform var(--dur-fast) var(--ease),
                box-shadow var(--dur-fast) var(--ease);
}
/* مساحةُ اللمس ‎44px‎ وإن صغر الزرّ — زائفٌ شفّافٌ لا يُرى ولا يزيح شيئاً. */
.reg-hero-print::after {
    content: "";
    position: absolute;
    inset: -5px -4px;
}
.reg-hero-print:hover { box-shadow: 0 4px 12px rgba(16, 24, 40, .28); }
.reg-hero-print:active { transform: scale(.94); }
/* والمعطَّلُ ‎60٪‎ لا ‎42٪‎: صار الزرُّ كلمةً لا رمزاً، والرمزُ يرسم نفسَه
   فلا يعنيه السطح، أمّا النصُّ فيلزمه ‎4.5:1‎. وعند ‎42٪‎ كان الحبرُ
   البتروليُّ عليه ‎3.35‎؛ وعند ‎60٪‎ يبلغ ‎5.13‎ ويبقى أخفتَ من الفعّال
   (‎11.52‎ على أبيضَ خالص) فيُفرَّق بينهما. */
.reg-hero-print[disabled] {
    background: rgba(255, 255, 255, .6);
    box-shadow: none;
    opacity: 1;
    cursor: default;
}

/* ══ قسمٌ فارغٌ داخل الفصل — نمطُ «و» ══
   يستعمل قطعَ الرئيسية نفسَها (`.start-note` و`.start-gap` و`.start-cta`)
   فلا لوحةَ ثانيةٌ تُصان. والحاويةُ عمودٌ مرنٌ بارتفاعٍ أدنى يملأ ما بين
   الترويسة والشريط السفلي، فتنزل اللافتةُ والزرُّ إلى متناول الإبهام.
   و‎175px‎ هي القيمةُ نفسُها المعايَرةُ في الرئيسية: ترويسةُ التطبيق ‎85‎
   + الشريطُ السفلي ‎58‎ + هامشُ الجسم ‎9‎ + فرجةٌ ‎23‎. */
@media (max-width: 767px) {
    #tab-panel.is-empty-tab {
        display: flex;
        flex-direction: column;
        min-height: calc(100dvh - 175px);
        padding-bottom: 28px;
    }
}

/* ══ صفُّ المحفوظ — اختباراً كان أو ورقةَ عمل ══
   الشكلُ «ب» باعتماد المعلّم (٢٢ أغسطس ٢٠٢٦): صفٌّ كصفِّ الطالب في
   الصفحة نفسِها، فالفصلُ كلُّه لغةٌ واحدة. وصفٌّ في السطر يعطي العنوانَ
   عرضَ الشاشة بلا كسرٍ في المنتصف، بخلاف بطاقتين متجاورتين.

   ويرث `.st-card` هيئتَه ومربّعَ رقمه، ولا يزيد إلا نصّاً في سطرين
   وثلاثةَ أفعال. */
.doc-row { margin-bottom: 9px; }
.doc-tx { flex: 1; min-width: 0; cursor: pointer; }
.doc-tt {
    display: block; font-size: 15px; font-weight: var(--fw-bold);
    color: var(--text); line-height: 1.4;
}
.doc-ss {
    display: block; margin-top: 2px;
    font-size: 11.5px; color: var(--text-muted);
}
.doc-acts { display: flex; align-items: center; gap: 5px; flex-shrink: 0; }
.doc-ib {
    width: 33px; height: 33px; border-radius: 10px; cursor: pointer;
    border: 1.5px solid var(--border); background: var(--surface);
    color: var(--text-muted); font-family: inherit;
    display: grid; place-items: center; padding: 0;
}
.doc-ib svg { display: block; }
/* «طباعة» كلمةً لا طابعةً — بطلب المعلّم في سجل المتابعة، والقاعدةُ
   واحدةٌ في التطبيق.

   ومملوءٌ لا مفرَّغ: المفرَّغُ حبرُه `--primary`، وهو على سطحٍ داكنٍ
   ‎1.48‎ — لا يُقرأ. والمملوءُ أبيضُ على البترولي ‎11.5‎ في المظهرين معاً،
   لأن لونَ الهُويّة واحدٌ فيهما. وهو مع ذلك أصدق: الطباعةُ هي الفعلُ
   الرئيس في الصفّ، والأيقونتان تابعتان. */
.doc-ib.p {
    width: auto; padding: 0 12px;
    font-size: 12px; font-weight: var(--fw-bold);
    color: #fff; background: var(--primary); border-color: var(--primary);
}
.doc-ib:active { transform: scale(.97); }

/* وسمُ الواجب: «اليوم» و«متأخر» بيانٌ عن الواقع لا شرحٌ للواجهة، فيبقى.
   وألوانُه تُخلط مع `--mix-base` لا مع الأبيض، فتتبع المظهرين. */
.doc-tag {
    display: inline-block; margin-inline-start: 5px;
    padding: 1px 7px; border-radius: 7px;
    font-size: 10.5px; font-weight: var(--fw-bold);
}
.doc-tag.warn {
    color: #7A6224;
    background: color-mix(in srgb, var(--pf-gold) 26%, var(--mix-base));
}
.doc-tag.late {
    color: #B42318;
    background: color-mix(in srgb, #B42318 14%, var(--mix-base));
}

/* ══ شريطُ الإنشاء — أسفلَ القائمة لا فوقها ══
   كان زرُّ الإضافة في الحالة الفارغة وحدَها، فمن أنشأ واحداً لم يجد
   سبيلاً إلى ثانٍ. ثمّ وُضع فوق القائمة، فطلب المعلّم إنزالَه.

   وهو ثابتٌ أسفل الشاشة فوق شريط التنقّل: القوائمُ تطول، ولو مضى مع
   التمرير لاحتاج المعلّمُ أن ينزل إلى آخرها ليضيف.

   وجُرّب أوّلاً بخلفيّةٍ صمّاء فبدا جداراً بترولـيّاً يقطع القائمة نصفين.
   فصار تحته **تلاشٍ** لا حافّة: تدرّجٌ من لون السطح إلى الشفافيّة، تذوب
   فيه البطاقاتُ وهي تمرّ فلا تُقطع. واللونُ من الرمز فيتبع المظهرين.

   وأسفلَ اللوحة مساحةٌ بقدره، فآخرُ بطاقةٍ تُرى كاملةً عند نهاية
   التمرير ولا تبقى تحته أبداً. */
.ws-addbar {
    position: sticky;
    bottom: calc(var(--safe-bottom) + 74px);
    z-index: 6;
    display: flex;
    margin-top: var(--space-5);
    padding: 18px 0 4px;
    background: linear-gradient(to top,
        var(--surface) 0%, var(--surface) 62%, transparent 100%);
}
.ws-addbar .btn {
    width: 100%;
    min-height: 52px;
    box-shadow: 0 5px 15px color-mix(in srgb, var(--primary) 30%, transparent);
}
#tab-panel:not(.is-empty-tab) { padding-bottom: calc(var(--space-10) + 58px); }

/* ══ وفي القاع ولو قصرت القائمة ══
   اللصوقُ لا يعمل إلا حين يفيض المحتوى، وثلاثةُ اختباراتٍ لا تفيض —
   فكان الشريطُ يقف تحت آخر صفٍّ في وسط الشاشة. (بلاغُ المعلّم، ٢٢
   أغسطس ٢٠٢٦.) وهو العطبُ عينُه الذي أُصلح في شريط المحرّر، والعلاجُ
   عينُه: اللوحةُ عمودٌ مرنٌ بقياسَي الحالة الفارغة ‎(175‎ و‎28)‎،
   و`margin-top: auto` يدفع الشريطَ إلى قاعها — فيقع حيث يقع زرُّ
   الحالة الفارغة تماماً. وإذا طالت القائمة انعدم `auto` وعاد اللصوق.

   و`:has(> .ws-addbar)` لا صنفٌ يُضاف في خمس شاشات: الشرطُ هو وجودُ
   الشريط نفسِه، فلا تُنسى شاشةٌ ولا يبقى صنفٌ بعد زواله. وأبناءُ
   العمود `flex: 0 0 auto` صراحةً لئلّا ينكمشوا حين يفيض. */
@media (max-width: 767px) {
    #tab-panel:has(> .ws-addbar) {
        min-height: calc(100dvh - 175px);
        display: flex; flex-direction: column;
        padding-bottom: calc(var(--safe-bottom) + 28px);
    }
    #tab-panel:has(> .ws-addbar) > * { flex: 0 0 auto; }
    .ws-addbar { margin-top: auto; }
}
@media (min-width: 768px) {
    .ws-addbar { position: static; background: none; padding: 0; }
    .ws-addbar .btn { width: auto; }
    #tab-panel:not(.is-empty-tab) { padding-bottom: var(--space-10); }
}

/* ══ قائمةُ الأيام — حلّت محلّ شريط التواريخ ══
   الشريطُ كان يأكل ‎65‎ بكسلاً من كلِّ فتحةٍ ليعرض سبعةَ أيامٍ أكثرُها
   فارغ. وهذه تُفتح بزرٍّ وتعرض ما عُبّئ فعلاً بحصيلته. */
.reg-hero-days { background: rgba(255, 255, 255, .22); color: #fff; }
.reg-hero-days.on { background: #fff; color: var(--primary); }
.rdl-back {
    margin-inline-start: 7px;
    background: rgba(255, 255, 255, .22); color: #fff;
    border: 0; border-radius: 8px; padding: 2px 9px;
    font-family: inherit; font-size: 11.5px; font-weight: var(--fw-bold);
    cursor: pointer;
}
.rdl-sheet {
    margin-top: var(--space-3);
    border: 1px solid var(--border);
    border-radius: 16px;
    overflow: hidden;
    background: var(--surface);
}
.rdl-h {
    padding: 10px 14px;
    font-size: 12.5px; font-weight: var(--fw-bold); color: var(--text-muted);
    background: var(--surface-alt);
    border-bottom: 1px solid var(--border);
}
.rdl-row, .rdl-any {
    display: flex; align-items: center; gap: 10px; width: 100%;
    padding: 12px 14px;
    background: var(--surface); border: 0;
    border-bottom: 1px solid var(--border);
    font-family: inherit; text-align: start; cursor: pointer;
    color: var(--ink-primary);
}
.rdl-row:last-of-type { border-bottom: 1px solid var(--border); }
.rdl-any { border-bottom: 0; justify-content: center; font-weight: var(--fw-bold);
    font-size: 13.5px; color: var(--text-muted); }
.rdl-row.on { background: color-mix(in srgb, var(--primary) 8%, var(--mix-base)); }
.rdl-tx { flex: 1; min-width: 0; }
.rdl-tx b { display: block; font-size: 14px; font-weight: var(--fw-bold); }
.rdl-tx span { display: block; font-size: 11.5px; color: var(--text-muted); }
.rdl-bd {
    flex: none;
    font-size: 11px; font-weight: var(--fw-bold);
    border-radius: 7px; padding: 3px 9px;
    background: color-mix(in srgb, var(--primary) 10%, var(--mix-base));
    color: var(--ink-primary);
}
.rdl-bd.none { background: transparent; color: var(--text-muted); }
.rdl-row.on .rdl-bd { background: var(--primary); color: #fff; }

/* إحصائيتا حاضر/غائب قابلتان للضغط (فلترة) */
.reg-hero button.hf-stat {
    border: 0;
    font-family: inherit;
    color: #fff;
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease),
                box-shadow var(--dur-fast) var(--ease);
}
.reg-hero .hf-stat.active {
    background: rgba(255, 255, 255, .32);
    box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .85);
}

/* البحث القصير + إضافة طلاب بلون الفصل */
.reg-toolrow {
    display: flex;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}
.reg-toolrow .search-input {
    flex: 1;
    min-width: 0;
    max-width: none;
}
.reg-add {
    --cls-color: var(--primary);
    background: var(--cls-color);
    border-color: var(--cls-color);
    color: #fff;
    flex-shrink: 0;
    white-space: nowrap;
}
.reg-add:hover {
    background: color-mix(in srgb, var(--cls-color) 88%, #000);
    border-color: color-mix(in srgb, var(--cls-color) 88%, #000);
    color: #fff;
}

/* شريط تحضير الكل: الزر يمين، وأسماء غير المحضَّرين يسار */
.mark-bar {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--space-2);
    margin-top: var(--space-3);
}
.mark-bar-btn {
    min-height: 38px;
    border: 0;
    border-radius: 11px;
    /* الأبيضُ على ‎#059669‎ = ‎3.77:1‎ — دون العتبة. و‎#0B6B4A‎ يبلغ ‎5.9:1‎
       ويبقى أخضرَ يُفهم أنه تأكيد. (وهو نفسُه المعتمد في الداكن.) */
    background: #0B6B4A;
    color: #fff;
    font-family: inherit;
    font-weight: var(--fw-bold);
    font-size: var(--fs-sm);
    padding: 0 var(--space-4);
    flex-shrink: 0;
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--dur-fast) var(--ease);
}
.mark-bar-btn.undo { background: #DC2626; }
.mark-bar-btn[disabled] { opacity: .6; cursor: default; }
/* الأسماء بالأحمر، وعبارة «لم يتم تحضير :» بالأسود */
.mark-bar-miss {
    flex: 1;
    min-width: 0;
    text-align: left;
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    color: #DC2626;
    line-height: 1.55;
    padding-left: var(--space-2);
}
.mark-bar-miss b { color: var(--text); }
.mark-bar-miss:empty { display: none; }

/* دليلُ الرموز: ⏰ و📝 لا يُفهمان بلا تعريف. يُدفع إلى آخر الشريط،
   وينزل سطراً على الجوّال بدل أن يزحم الزرّ. */
.mark-bar-key {
    margin-inline-start: auto;
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
    font-size: var(--fs-xs);
    color: var(--text-muted);
}
.mark-bar-key .mk { white-space: nowrap; }
.mark-bar-key b { font-weight: var(--fw-normal); margin-inline-end: 2px; }
@media (max-width: 480px) {
    .mark-bar { flex-wrap: wrap; }
    .mark-bar-key { width: 100%; margin-inline-start: 0; }
}

/* Tab bar */
.tab {
    flex: 1;
    min-width: max-content;
    padding: var(--space-3) var(--space-4);
    background: transparent;
    border: 0;
    border-radius: var(--radius-md);
    color: var(--text-muted);
    font-family: inherit;
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    justify-content: center;
    transition: all var(--dur-fast) var(--ease);
    white-space: nowrap;
}
.tab:hover { background: var(--surface-alt); color: var(--text); }
.tab.active {
    background: var(--primary);
    color: var(--text-inverse);
    box-shadow: var(--shadow-sm);
}
.tab-panel { padding-bottom: var(--space-10); }

/* ==========================================================================
   الرئيسية الجديدة (المعتمدة) — home-v2
   ========================================================================== */
.home-v2 { padding-bottom: var(--space-10); }

/* الهيدر: تحية + هجري + صورة */
.home-hd {
    display: flex;
    align-items: center;
    /* الصورةُ ملاصقةٌ للتحيّة على اليمين لا في الطرف المقابل — تصميم «أ»،
       اختاره المعلّم من ثلاثة (١٩ أغسطس ٢٠٢٦). فلا `space-between` يباعد
       بينهما بعرض الشاشة. */
    gap: var(--space-3);
    /* التحيةُ والتاريخُ والصورة ترتفع وحدها: `.app-main` تعطي الصفحة ٢١px
       أصلاً، وكان هذا الصفُّ يضيف مثلها فينزل ٤٢px عن الشريط.

       والمسافةُ المحذوفة من أعلاه تُردّ أسفلَه — فما تحته من بطاقاتٍ يبقى
       في موضعه تماماً، ولا يُجرّ الصفحةَ كلَّها معه. وتُردّ **حشواً لا
       هامشاً**: الهامشُ يلتحم بهامش ما يليه فتضيع ثمانيةُ بكسلات.

       والقيمةُ ٢١+٨: ٢١ هي المرفوعةُ من أعلاه، وثمانيةٌ تعويضُ حشوِه
       السفليّ القديم — فتقع البطاقةُ في موضعها الأول بالبكسل. */
    padding: 0 0 calc(var(--space-5) + var(--space-3));
}
.home-hd-tt h2 { margin: 0; font-size: 21px; font-weight: var(--fw-bold); color: var(--ink-primary); }
.home-hij {
    font-size: var(--fs-xs);
    color: var(--text-muted);
    margin-top: 3px;
    display: flex; align-items: center; gap: 6px;
}
.home-hij::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: #C9A961; }
.home-av {
    width: 44px; height: 44px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    display: grid; place-items: center;
    font-weight: var(--fw-bold); font-size: 17px;
    border: 1.5px solid #C9A961;
    flex-shrink: 0;
    overflow: hidden;
    text-decoration: none;
}
.home-av img { width: 100%; height: 100%; object-fit: cover; }

/* بطاقة التذكيرات المطويّة — تدرّج رصاصي كالفصول */
/* تُنزَّل مجموعة (التذكيرات ← حصص اليوم ← الحصة الحالية) عن الترحيب:
   كانت تلاصقه بمسافة صفر. الهامش على أوّلها وحده، فتبقى المسافات
   بينها كما هي (٨px ثم ٢٧px). */
.home-v2 .rem-card { margin-top: var(--space-5);     cursor: pointer;
}

.rem-card {
    border-radius: 15px;
    overflow: hidden;
    color: var(--ink-primary);
    background: linear-gradient(150deg, #fff 0%, color-mix(in srgb, var(--beige) 42%, var(--mix-base)) 50%, #ECEAE3 100%);
    border: 1.5px solid color-mix(in srgb, var(--beige) 85%, #000);
    box-shadow: inset 0 1.5px 0 var(--sheen), 0 5px 11px rgba(16, 24, 40, .12);
    margin-bottom: var(--space-3);
}
.rem-head { display: flex; align-items: center; gap: 10px; padding: 11px 13px; }
.rem-ic {
    width: 34px; height: 34px; border-radius: 50%;
    background: rgba(255, 255, 255, .75);
    display: grid; place-items: center; font-size: 16px;
}
/* ══ حبرُ الذهبيّ كحليٌّ مثبَّتٌ لا رمزٌ يتبع المظهر ══
   الذهبيُّ ‎#C9A961‎ سطحٌ فاتحٌ **لا يتبدّل** بين المظهرين، فحبرُه لا يجوز
   أن يتبدّل: كان `var(--ink-primary)` فصار في الداكن كحلياً فاتحاً
   (‎#8FB4F5‎) على ذهبيّ — نسبةٌ لا تُقرأ، **قبل أي تعديلٍ اليوم**. والفحصُ
   لم يمسكه لأن هذه الحالاتِ لا تُرى إلا بحدث: حصةٌ جاريةٌ الآن، وبطاقةٌ
   مختارة، وعمودُ يومٍ في الجدول. فيُكتب الكحليُّ صريحاً ويستوي المظهران. */
.rem-head b { font-size: var(--fs-sm); color: var(--ink-primary); }
.rem-bd {
    background: #C9A961; color: var(--on-gold);
    font-weight: var(--fw-bold); font-size: 12px;
    min-width: 22px; height: 22px; border-radius: 50%;
    display: grid; place-items: center;
}
/* زرّ إضافة تذكير — يسبق زرّ الطيّ ويأخذ المسافة الفاصلة، فيبقى الطيّ آخر
   عنصر في الرأس كما كان. */
.rem-add {
    margin-right: auto;
    width: 30px; height: 30px; border-radius: 50%;
    border: 0;
    background: linear-gradient(180deg, var(--primary-mid), var(--primary));
    color: #fff; font-size: 17px; font-weight: var(--fw-bold); line-height: 1;
    display: grid; place-items: center;
    cursor: pointer;
    box-shadow: 0 2px 6px color-mix(in srgb, var(--primary) 28%, transparent);
}
.rem-add:active { transform: scale(.94); }
.rem-empty-tx {
    margin-right: auto;
    font-size: 11.5px; font-weight: var(--fw-bold); color: var(--text-muted);
}
.rem-empty-tx + .rem-add { margin-right: 9px; }

.rem-body { display: none; }
.rem-card.open .rem-body { display: block; }
.rem-it {
    display: flex; align-items: center; gap: 10px;
    padding: 11px 13px;
    border-top: 1px solid color-mix(in srgb, var(--beige) 80%, #000);
}
.rem-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.rem-tx { flex: 1; min-width: 0; }
.rem-tt { font-size: 13.5px; font-weight: var(--fw-bold); color: var(--text); }
.rem-ss { font-size: 11.5px; color: var(--text-muted); margin-top: 1px; }
.rem-tag {
    font-size: 10.5px; font-weight: var(--fw-bold);
    border-radius: 7px; padding: 2px 8px; flex-shrink: 0;
}
.rem-it.rem-all { justify-content: center; }
.rem-it.rem-all a { font-size: 12.5px; color: var(--ink-primary); text-decoration: underline; }

/* صندوق حصص اليوم — بلون الهُويّة (البديل ب) */
.pday-box {
    border-radius: 19px;
    overflow: hidden;
    background: linear-gradient(180deg, var(--primary-lift) 0%, var(--primary) 55%, var(--primary-deep) 100%);
    border: 1px solid var(--primary-lift);
    box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .25), 0 8px 18px color-mix(in srgb, var(--primary) 32%, transparent);
    margin-bottom: var(--space-3);
}
.pday-head { display: flex; align-items: center; gap: 8px; padding: 13px 15px 11px; }
/* عنوان القسم — كان بحجم النص العادي فيضيع بين ما حوله. */
.pday-head b {
    font-size: 17px; font-weight: var(--fw-bold); color: #fff;
    letter-spacing: -.2px;
}
.pday-head a { margin-right: auto; font-size: 12.5px; color: rgba(255,255,255,.8); text-decoration: underline; }
/* فاصل بين صندوق حصص اليوم وبطاقة الحصة الحالية: كانا متلاصقين بعد
   إزالة مربعات التجهيز، والخط يفصل «يومك كلّه» عن «أين أنت الآن». */
.home-sep {
    height: 1px;
    margin: var(--space-4) 6px;
    background: linear-gradient(90deg,
        transparent 0%, var(--border) 18%, var(--border) 82%, transparent 100%);
}

.pday-chips {
    display: flex; gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 2px 15px 15px;
}
.pday-chips::-webkit-scrollbar { display: none; }
.pchip {
    flex-shrink: 0;
    width: 68px; height: 76px;
    border-radius: 13px;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .16);
    display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 2px;
    text-decoration: none;
}
.pchip .pc-n { font-weight: var(--fw-bold); font-size: var(--fs-sm); color: #fff; }
.pchip .pc-t { font-size: 11px; color: rgba(255, 255, 255, .6); }
.pchip .pc-c { font-size: 11px; font-weight: var(--fw-bold); color: rgba(255, 255, 255, .85); }
/* المرحلةُ سطرٌ تحت الاسم: «الأول/ب» وحدَها لا تميّز أوّلَ ابتدائيٍّ من
   أوّلِ متوسطٍ من أوّلِ ثانويّ. أصغرُ وأخفتُ فلا تزاحم الاسم — و‎5.87:1‎
   على الكحليّ. */
.pchip .pc-s {
    font-size: 9px; font-weight: var(--fw-bold);
    color: rgba(255, 255, 255, .6); margin-top: -1px;
}
.pchip.past { background: rgba(255, 255, 255, .05); border-color: transparent; }
.pchip.past .pc-n,
.pchip.past .pc-c,
.pchip.past .pc-s { color: rgba(255, 255, 255, .45); }
.pchip.past .pc-n::after { content: " ✓"; font-size: 11px; }
.pchip.live {
    background: #C9A961; border-color: transparent;
    transform: scale(1.05);
    box-shadow: 0 3px 13px rgba(201, 169, 97, .5);
}
.pchip.live .pc-n, .pchip.live .pc-t, .pchip.live .pc-c { color: var(--on-gold); font-weight: var(--fw-bold); }
.pchip.live .pc-s { color: color-mix(in srgb, var(--on-gold) 78%, transparent); font-weight: var(--fw-bold); }
/* القادمة: ذهبيّةٌ خافتةٌ بحدٍّ ذهبيٍّ صريح — تدلّ على «التالية» ولا
   تُلبس على الجارية. الفرقُ في الملء لا في الحدّ: الجاريةُ ذهبٌ صلبٌ
   مكبَّرٌ بظلّ، وهذه إطارٌ وحدَه. */
.pchip.next {
    background: rgba(201, 169, 97, .13);
    border-color: rgba(201, 169, 97, .55);
}
.pchip.next .pc-n, .pchip.next .pc-c { color: #E7C87B; font-weight: var(--fw-bold); }
.pchip.next .pc-t { color: rgba(231, 200, 123, .82); }
.pchip.next .pc-s { color: rgba(231, 200, 123, .62); }
.pchip.wait { background: rgba(231, 200, 123, .15); border-color: rgba(231, 200, 123, .45); }
.pchip.wait .pc-c { color: #E7C87B; }
/* وذيلُ الصندوق حين تمضي الحصصُ كلُّها — الحبّاتُ وحدَها صفُّ ✓ صامت. */
.pday-done {
    margin-top: 11px; padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, .12);
    text-align: center;
    font-size: 12.5px; font-weight: var(--fw-bold);
    color: rgba(255, 255, 255, .62);
}

/* أزرار التجهيز — تدرّج رصاصي */
/* مربع حصتك الحالية — كحلي سادة بارز */
.home-hero {
    margin-top: var(--space-3);
    border-radius: 21px;
    padding: 21px;
    color: #fff;
    position: relative;
    overflow: hidden;
    background: var(--primary);
    border: 1px solid var(--primary-lift);
    box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .22),
                0 8px 18px color-mix(in srgb, var(--primary) 42%, transparent), 0 2px 5px color-mix(in srgb, var(--primary) 30%, transparent);
}
.hh-badge {
    position: absolute; top: 15px; left: 15px;
    background: #C9A961; color: var(--on-gold);
    font-weight: var(--fw-bold); font-size: 12px;
    border-radius: 8px; padding: 3px 9px;
    display: flex; align-items: center; gap: 5px;
}
.hh-badge.soft { background: rgba(255, 255, 255, .14); color: #E0C486; }
.hh-badge i {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--primary);
    animation: hh-pulse 2s infinite;
    font-style: normal;
}
@keyframes hh-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
/* البطاقة فقدت سطرين بإزالة المادة والوقت المتبقّي، فقصرت. الحشو هنا
   يعيد ارتفاعها ويمنح السطرين مجالاً بدل أن يتلاصقا أعلى البطاقة. */
.hh-body {
    display: block; color: inherit; text-decoration: none;
    padding: 6px 0 12px;
}
/* «حصتك الحالية» — كانت ١٣px بشفافية ٦٥٪، أي أخفت عنصر في البطاقة
   رغم أنها العنوان الذي يقول ما هذه البطاقة أصلاً. */
.hh-l {
    font-size: 17px; font-weight: var(--fw-bold);
    color: #fff; letter-spacing: -.2px;
}
/* اسم الصف أصغر من عنوان البطاقة بطلب المستخدم: كان ٢٦px فيلتفّ على
   سطرين ويطغى على ما حوله. */
/* اسم الفصل يأخذ الذهبي الذي كان يحمله سطر المادة قبل إزالته — فيبقى
   واضحاً أنه المحتوى لا العنوان، رغم أنه أصغر منه. */
.hh-t {
    font-size: 14px; font-weight: var(--fw-bold);
    margin-top: 7px; color: #C9A961;
}
.hh-cta {
    display: flex; align-items: center; justify-content: center;
    margin-top: 18px;
    min-height: 55px;
    border-radius: 13px;
    background: #C9A961; color: var(--on-gold);
    font-weight: var(--fw-bold); font-size: 17px;
    text-decoration: none;
    box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .4), 0 4px 10px rgba(0, 0, 0, .2);
}
.hh-cta:active { transform: scale(.99); }

/* حالات بديلة للمربع: إجازة / انتهى اليوم / إعداد الجدول / أول فصل */
.home-hero-alt {
    margin-top: var(--space-3);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 21px;
    padding: var(--space-6);
    text-align: center;
    box-shadow: 0 3px 10px rgba(16, 24, 40, .07);
    display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.home-hero-alt.dashed { border: 2px dashed var(--border-strong); box-shadow: none; }
.home-hero-alt .ha-t { font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--ink-primary); }
.home-hero-alt .ha-s { font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.7; }
.home-alt-lk {
    display: inline-flex; align-items: center; gap: 5px;
    margin-top: var(--space-3);
    font-size: var(--fs-sm); color: var(--ink-primary);
    text-decoration: underline; font-weight: var(--fw-bold);
}

/* حالات البدء — بطاقة رصاصية «أضف فصلك الأول» / «أضف الجدول الأسبوعي» */
/* ══ «فصولٌ بلا جدول» تنزل إلى متناول الإبهام ══
   كانت المجموعةُ تلتصق بأعلى الشاشة ويبقى تحتها ‎266‎ بكسلاً فارغة — والزرّان
   في أبعد ما يكون عن إبهام الممسك بالجوال بيدٍ واحدة.
   وتُنزَّل بمرونةٍ لا برقمٍ ثابت: الحاويةُ عمودٌ مرنٌ بارتفاعٍ أدنى يملأ ما
   بين الترويسة والشريط السفلي، و`margin-top: auto` على الصندوق يبتلع الفائضَ
   كلَّه. فعلى جوالٍ طويلٍ ينزل كثيراً، وعلى قصيرٍ لا ينزل أصلاً ولا يفيض.
   وعلى الشاشات العريضة يبقى كما كان — فالإبهامُ ليس هناك. */
@media (max-width: 767px) {
    .home-v2.is-start {
        display: flex;
        flex-direction: column;
        /* الحشوُ السفليُّ يسقط هنا وحدَه: الحاويةُ العامّةُ تتركه ليمرَّ
           المحتوى المُمرَّرُ من تحت الشريط العائم — وهذه الشاشةُ لا تُمرَّر
           أصلاً، فكان يرفع الزرَّين بلا سبب. بقي منه ‎28‎ فظلّ قاعُ آخر زرٍّ
           يبعد عن الشريط ‎48‎px بينما زرُّ الفصول ‎23‎. */
        padding-bottom: 0;
        /* والمطروحُ من الرموز التي يقف عليها `.classes-fab` لا من أرقامٍ
           مقيسة، فلا تفترق أزرارُ البدء عن زرّ الفصول إن تحرّك مقاس:
           ترويسةٌ + حشوُ الجسم الأعلى + شريطٌ + فرجتُه + الآمنُ السفليّ +
           مسافةٌ + ‎12‎px حشوِ الشريط العائم السفليّ. وهي الصيغةُ نفسُها في
           `#tab-panel.is-empty-students` أدناه — الثلاثةُ على خطٍّ واحد. */
        min-height: calc(100dvh - var(--header-height) - var(--space-5)
                         - var(--bottom-nav-height) - var(--bottom-nav-gap)
                         - var(--safe-bottom) - var(--space-4) - 12px);
    }
}

/* ══ سجلُّ المتابعة بلا طلاب — موضعُ زرّ الفصول نفسُه ══
   اللوحةُ عمودٌ مرن، والفجوةُ تدفع الزرَّ إلى أسفل الشاشة.

   و`padding-bottom: 0` هو الإصلاح لا الزينة: القاعدةُ العامّة أعلاه
   (`#tab-panel:not(.is-empty-tab)`) تضع ‎113‎px حشواً أسفلَ اللوحة كي لا
   تختفي آخرُ بطاقةٍ خلف الشريط — والحالةُ الفارغةُ ترثه وليس تحتها ما
   يُمرَّر، فيأكل من الحاوية المرنة ويرفع الزرَّ ‎113‎px. قِيس: كان قاعُ
   الزرّ يبعد عن الشريط ‎132‎px بينما زرُّ الفصول ‎23‎.

   والمطروحُ يُبنى من الرموز نفسِها التي يقف عليها `.classes-fab`، فلا
   يفترق الزرّان إن تحرّك أحدُ المقاسات: ترويسةٌ + حشوُ الجسم الأعلى، ثمّ
   ما يقف عليه الزرُّ هناك (شريطٌ + فرجتُه + الآمنُ السفلي + مسافة)،
   وأخيراً ‎12‎px حشوُ `.classes-fab` السفليّ. المحصّلةُ على ‎812‎: قاعُ
   الزرّ ‎719‎ في الشاشتين، وفوق الشريط ‎23‎ في الشاشتين.
   وعلى الشاشات العريضة لا يتمدّد شيءٌ — فالإبهامُ ليس هناك. */
@media (max-width: 767px) {
    #tab-panel.is-empty-students {
        display: flex;
        flex-direction: column;
        padding-bottom: 0;
        min-height: calc(100dvh - var(--header-height) - var(--space-5)
                         - var(--bottom-nav-height) - var(--bottom-nav-gap)
                         - var(--safe-bottom) - var(--space-4) - 12px);
    }
}

/* ══ لافتةُ «بقي الجدول» — تصميم «و» ══
   حلّت محلَّ صندوقٍ فيه حلقةٌ ورمزُ تقويمٍ وعنوانٌ يكرّر نصَّ الزرّ. وهي
   تقول ما ينقص لا ما يفعله الزرّ، فلا تنافسه.
   وصبغتُها وحبرُها من الرموز لا من الأسماء، فتتبع المظهر وحدَها: على
   الأبيض ذهبيّةٌ خفيفة، وعلى الداكن زيتونيّةٌ عميقة — ولا تُستثنى من
   قلب المظهر كما تُستثنى الأسطحُ المثبَّتة. */
.start-note {
    margin-top: var(--space-3);
    padding: 15px 16px;
    border-radius: 16px;
    text-align: center;
    background: color-mix(in srgb, var(--pf-gold) 15%, var(--mix-base));
    border: 1px solid color-mix(in srgb, var(--pf-gold) 45%, var(--mix-base));
}
.start-note b {
    display: block;
    font-size: 15px; font-weight: var(--fw-bold);
    color: var(--ink-primary);
}
/* الشرحُ بحبر النصّ لا بالخافت — بقراره (٢٨ أغسطس ٢٠٢٦): «خلّ لون
   الشرح أوضح عشان ينقرى». وقيسَ على أرضيّة اللافتة نفسِها لا على
   الأبيض: الخافتُ كان ‎4.79‎ في الفاتح و‎5.81‎ في الداكن — فوق العتبة
   بالكاد، وهو سطرٌ يُقرأ مرّةً واحدةً في عمر الحساب فلا يُحتمل فيه
   «بالكاد». وصار ‎12.53‎ و‎10.99‎.
   والحجمُ والوزنُ والهامشُ كما هي — اللونُ وحدَه تغيّر، واللافتتان
   تشتركان في هذا التنسيق فتصفوان معاً. */
.start-note span {
    display: block; margin-top: 2px;
    font-size: 13px; color: var(--text);
}
/* والفراغُ الباقي كلُّه هنا: يدفع الزرَّين إلى أسفل الشاشة داخل الحاوية
   المرنة أعلاه. وعلى الشاشات العريضة (بلا `is-start`) لا يتمدّد شيء،
   فيكتفي بحدّه الأدنى. */
.start-gap { flex: 1 1 auto; min-height: var(--space-3); }
.start-cta {
    display: flex; align-items: center; justify-content: center;
    margin: 0;
    min-height: 55px; width: 100%;
    border-radius: 14px;
    background: var(--primary); color: #fff;
    /* ‎500‎ — نزل من ‎700‎ إلى ‎600‎ ثمّ إلى ‎500‎ بقراره في المرّتين
       (٢٨ أغسطس ٢٠٢٦): «مو بولد بزياده… نقّصه شوي».
       والزرُّ لا يخسر حضورَه: أرضيّتُه بترولية وحبرُه أبيضُ وارتفاعُه ‎55‎
       ومقاسُه ‎17‎ — يُعلن نفسَه بهذه لا بثِقَل حروفه. والعربيةُ حروفُها
       متّصلةٌ فتلتحم عند التغليظ أكثرَ من اللاتينية. */
    font-family: inherit; font-weight: var(--fw-medium); font-size: 17px;
    border: 0; cursor: pointer; text-decoration: none;
    position: relative;
    box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .22), 0 5px 13px color-mix(in srgb, var(--primary) 30%, transparent);
}
.start-cta:active { transform: scale(.99); }
.start-add-class {
    display: flex; align-items: center; justify-content: center;
    width: 100%;
    margin-top: 13px;
    min-height: 52px;
    border-radius: 14px;
    color: var(--ink-primary);
    font-family: inherit; font-weight: var(--fw-medium); font-size: 15px;
    background: linear-gradient(150deg, #fff 0%, color-mix(in srgb, var(--beige) 42%, var(--mix-base)) 50%, #ECEAE3 100%);
    border: 1.5px solid color-mix(in srgb, var(--beige) 85%, #000);
    box-shadow: inset 0 1.5px 0 var(--sheen), 0 5px 11px rgba(16, 24, 40, .12);
    cursor: pointer; text-decoration: none;
}
.start-add-class:active { transform: scale(.99); }

/* ==========================================================================
   Students tab
   ========================================================================== */
.search-input { min-width: 240px; max-width: 320px; }


/* Column chips bar — swipeable register-column selector */
.col-chips-bar {
    display: flex;
    gap: var(--space-2);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: var(--space-1);
    margin-bottom: var(--space-4);
}
.col-chips-bar::-webkit-scrollbar { display: none; }
.col-chip {
    flex-shrink: 0;
    min-height: 44px;
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-4);
    font-family: inherit;
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    color: var(--text-muted);
    cursor: pointer;
    transition: border-color var(--dur-fast) var(--ease),
                background var(--dur-fast) var(--ease),
                color var(--dur-fast) var(--ease);
}
.col-chip.active {
    border-color: var(--primary);
    background: color-mix(in srgb, var(--primary) 8%, var(--mix-base));
    color: var(--ink-primary);
}
.col-chip-add {
    font-size: var(--fs-lg);
    line-height: 1;
    color: var(--ink-primary);
}

/* TODO(phase-c): on mobile, hide .students-table and render student cards
   (.student-card) instead. Card layout: name top, colored attendance badge
   side, eval icons under name, expand indicator for more. */
.table-wrapper {
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}

.students-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 720px;
}
/* Focus mode (single column beside the name): fit the screen, no h-scroll */
.students-table.compact { min-width: 0; }

/* Notes focus: the note box takes the remaining width, name column stays tight */
.st-note { width: 60%; padding: var(--space-2); }
.st-note-input {
    display: block;
    width: 100%;
    min-height: 40px;
    resize: none;
    overflow: hidden;
    padding: var(--space-2) var(--space-3);
    font-size: var(--fs-sm);
    line-height: 1.5;
}
.students-table thead th {
    background: var(--surface-alt);
    color: var(--text-muted);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    text-align: right;
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}
.students-table tbody td {
    padding: var(--space-2) var(--space-4);
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}
.students-table tbody tr:last-child td { border-bottom: 0; }
.students-table tbody tr:hover { background: var(--surface-alt); }
.st-name  { min-width: 143px; }

/* Freeze the row-number + name columns horizontally. The wrapper only
   scrolls horizontally; vertical scroll stays at the page level so iOS
   momentum (smooth glide after release) keeps working naturally. */
.table-wrapper {
    overflow-x: auto;
    overflow-y: visible;
    /* NOTE: -webkit-overflow-scrolling: touch was removed on purpose —
       that legacy flag forces an async composited scroller on iOS, which is
       exactly what blanks the sticky name/number cells during page scroll.
       Modern iOS has native momentum without it. */
}

.students-table tbody tr       { background-color: #FFFFFF; }
.students-table tbody tr:hover { background-color: #F1F5F9; }

.students-table thead th:nth-child(1){
    position: sticky;
    right: 0;
    z-index: 3;
    background-color: #FFFFFF;
}
.students-table thead th:nth-child(1) {
    background-color: #F1F5F9;
    z-index: 4;
}

.students-table thead th:nth-child(2),
.students-table tbody td.st-name {
    position: sticky;
    right: 48px;
    z-index: 3;
    background-color: #FFFFFF;
    box-shadow: -1px 0 0 var(--border);
}
.students-table thead th:nth-child(2) {
    background-color: #F1F5F9;
    z-index: 4;
}
.students-table tbody tr:hover td.st-name { background-color: #F1F5F9; }

/* ==========================================================================
   Register CARDS (design «ج») — one card per student, colored status stripe.
   No horizontal scroll, nothing sticky → the iOS blank-names bug is impossible.
   ========================================================================== */
.st-cards { display: flex; flex-direction: column; gap: 9px; }
/* الشريطُ اللونيُّ على حافّة البطاقة حُذف (٢٠ أغسطس ٢٠٢٦): طلب المعلّم
   ألّا تُلوَّن الخاناتُ بالأخضر والأحمر، والزرُّ المضغوطُ وحدَه هو الخبر. */
.st-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 11px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 12px;
    overflow: hidden;
}
/* رقمُ الطالب في مربّعٍ هادئ — كان الحرفَ الأوّل من اسمه. */
.stc-av {
    flex-shrink: 0;
    width: 34px; height: 34px;
    border-radius: 10px;
    background: var(--surface-alt);
    color: var(--text-muted);
    display: grid; place-items: center;
    font-weight: var(--fw-bold);
    font-size: 14px;
}
.stc-info { flex: 1; min-width: 0; }
.st-card .st-name-link {
    display: block;
    font-weight: var(--fw-bold);
    font-size: 15px;
    color: var(--text);
    text-decoration: none;
    line-height: 1.4;
}
/* `.stc-status` حُذفت: لا سطرَ حالةٍ تحت الاسم. */
/* أزرار الحضور: مربعات صغيرة بجانب الاسم (نموذج ج) */
.stc-ab { display: flex; align-items: center; gap: 5px; flex-shrink: 0; }
.st-card .att-btn {
    width: 33px; height: 33px;
    margin-left: 0;
    border-width: 1.5px;
    border-radius: 10px;
    font-size: 13px;
}
.st-card .att-btn.active { transform: none; }
/* بطاقة الملاحظات: الحقل بعرض كامل تحت الاسم */
.st-card-note { flex-wrap: wrap; }
.stc-note { flex-basis: 100%; }
.stc-note .st-note-input { width: 100%; min-height: 46px; max-width: none; }

/* ==========================================================================
   Split register («الكل») — the #/name columns live in their own fixed table
   OUTSIDE the horizontal scroller. Nothing is position:sticky, so the iOS
   "names go blank while scrolling" WebKit bug cannot happen by construction.
   ========================================================================== */
.register-split {
    display: flex;
    align-items: flex-start;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    overflow: hidden;
}
.register-split .frozen-cols {
    flex-shrink: 0;
    width: 200px;
    min-width: 0;
    table-layout: fixed;
    border-inline-end: 1px solid var(--border);
}
/* table-layout: fixed reads column widths from the FIRST row (the thead) */
.register-split .frozen-cols thead th:nth-child(1) { width: 44px; }
.register-split .frozen-cols .st-name { min-width: 0; width: auto; }
.register-split .table-scroll {
    flex: 1;
    min-width: 0;
    overflow-x: auto;
}
.register-split .data-cols {
    width: 100%;
    min-width: 540px;
}
/* Inside the split, the old sticky rules must not apply: these cells are
   plain static cells in a table that never scrolls. */
.register-split .students-table thead th:nth-child(1),
.register-split .students-table thead th:nth-child(2),
.register-split .students-table tbody td.st-name {
    position: static;
    box-shadow: none;
    -webkit-transform: none;
    transform: none;
}
/* The split container draws the outer border/radius itself. */
.register-split .students-table { border: 0; }

.st-name-link {
    color: var(--text);
    font-weight: var(--fw-medium);
    text-decoration: none;
}
.st-name-link:hover { color: var(--ink-primary); text-decoration: underline; }

/* TODO(phase-c): enlarge to var(--touch-target-min) on mobile (44px square). */
.att-btn {
    --att-color: var(--border-strong);
    width: 36px;
    height: 36px;
    margin-left: 2px;
    border: 2px solid var(--border);
    border-radius: var(--radius-full);
    background: var(--surface);
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    transition: all var(--dur-fast) var(--ease);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.att-btn:hover { border-color: var(--att-color); color: var(--att-color); }
/* الزرُّ المضغوطُ بلونِ حالته — بقرار المعلّم (٢٧ أغسطس ٢٠٢٦، عكسُ قرارٍ
   سابقٍ كان يوحّدها بلون الهُويّة). فالأخضرُ والأحمرُ يُقرآن بطرَف العين
   في فصلٍ فيه ثلاثون طالباً، والمعلّمُ يمرّ عليهم بسرعة.
   و`--att-ink` لا `--att-color`: الأخيرُ فاتحٌ لا يحمل نصّاً أبيض. */
.att-btn.active {
    background: var(--att-ink, var(--primary));
    border-color: var(--att-ink, var(--primary));
    color: #fff;
    transform: scale(1.05);
}

/* ── حالتان تُحدَّد ولا تُملأ: ⏰ و📝 ──
   الرمزان إيموجي ملوّنة، والتعبئةُ تبتلعهما فلا يُقرآن. فالمختارُ يُعلَن
   بحدٍّ سميكٍ وحلقةٍ حوله، والأرضيّةُ تبقى كما هي.
   الغامقُ هنا لأنّ الأرضيّةَ بيضاء: ‎7.09‎ للمتأخّر و‎6.70‎ للمستأذن.
   والداكنُ يقلبه إلى الفاتح في theme-dark.css — قاعدةً لا رمزاً، وهناك
   بيانُ السبب. */
.att-btn.outline.active {
    background: var(--surface);
    border-color: var(--att-ink);
    border-width: 3px;
    color: var(--att-ink);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--att-ink) 28%, transparent);
}

/* Smaller inline inputs */
.input-sm{
    min-height: 36px;
    padding: var(--space-1) var(--space-3);
    font-size: var(--fs-sm);
    max-width: 120px;
}

.num-input {
    font-feature-settings: "tnum" 1;
    font-variant-numeric: tabular-nums;
    text-align: center;
    max-width: 90px;
}


/* Stars cell */
.stars-row {
    display: inline-flex;
    gap: 2px;
}
.star-btn {
    width: 28px;
    height: 32px;
    background: transparent;
    border: 0;
    padding: 0;
    font-size: 22px;
    line-height: 1;
    color: var(--border-strong);
    cursor: pointer;
    transition: transform var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.star-btn:hover { transform: scale(1.15); }
.star-btn.on { color: #F59E0B; }

/* Check cell */
.check-btn {
    width: 36px; height: 36px;
    border: 2px solid var(--border);
    border-radius: var(--radius-full);
    background: var(--surface);
    color: var(--text-muted);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    transition: all var(--dur-fast) var(--ease);
}
.check-btn:hover { border-color: var(--success); }
.check-btn.on {
    background: var(--success);
    border-color: var(--success);
    color: white;
}

/* Tri-state cell */
.tri-row {
    display: inline-flex;
    gap: 2px;
}
.tri-btn {
    --tri-color: var(--border-strong);
    width: 32px; height: 32px;
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    transition: all var(--dur-fast) var(--ease);
}
.tri-btn:hover { border-color: var(--tri-color); color: var(--tri-color); }
.tri-btn.on {
    background: var(--tri-color);
    border-color: var(--tri-color);
    color: white;
}

/* Column manager modal */
.columns-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.column-row {
    display: grid;
    grid-template-columns: 1.4fr 1.4fr auto auto;
    gap: var(--space-2);
    align-items: center;
    padding: var(--space-2);
    background: var(--surface-alt);
    border-radius: var(--radius-md);
}
.column-row .input,
.column-row .select {
    min-height: 40px;
    padding: var(--space-2) var(--space-3);
}
.column-row .num-input { max-width: 80px; }
@media (max-width: 560px) {
    .column-row { grid-template-columns: 1fr 1fr; }
    .column-row .num-input { grid-column: 1; }
    .column-row [data-remove] { grid-column: 2; justify-self: end; }
}

/* ==========================================================================
   Student view
   ========================================================================== */
.student-header {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-top: var(--space-4);
}
.student-avatar {
    width: 64px; height: 64px;
    border-radius: var(--radius-full);
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
    color: var(--text-inverse);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-h1);
    font-weight: var(--fw-bold);
    flex-shrink: 0;
}
.student-meta { flex: 1; min-width: 0; }
.student-header-actions {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.att-history {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    max-height: 320px;
    overflow-y: auto;
}
.att-history-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    background: var(--surface-alt);
    border-radius: var(--radius-sm);
    font-size: var(--fs-sm);
}
.att-dot {
    width: 10px; height: 10px;
    border-radius: var(--radius-full);
}

/* Responsive: tables scroll; hide certain columns on mobile */
@media (max-width: 640px) {
    .search-input { min-width: 100%; }
    .student-header { flex-direction: column; text-align: center; }
}

/* ==========================================================================
   Wizard (exams / worksheets)
   ========================================================================== */
.wizard { padding-bottom: var(--space-8); }

.wizard-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-5);
    flex-wrap: wrap;
}

.wizard-steps {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
}
.wiz-step {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--text-muted);
    font-size: var(--fs-sm);
}
.wiz-step-dot {
    width: 28px; height: 28px;
    border-radius: var(--radius-full);
    background: var(--surface-alt);
    border: 2px solid var(--border);
    display: flex; align-items: center; justify-content: center;
    font-weight: var(--fw-bold);
    font-size: var(--fs-sm);
}
.wiz-step.active .wiz-step-dot {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--text-inverse);
}
.wiz-step.done .wiz-step-dot {
    background: var(--success);
    border-color: var(--success);
    color: var(--text-inverse);
}
.wiz-step.active .wiz-step-label { color: var(--text); font-weight: var(--fw-medium); }

.wizard-title {
    font-size: var(--fs-h2);
    margin-bottom: var(--space-4);
}

/* TODO(phase-d): on mobile, sticky-bottom footer with full-width primary button. */
.wizard-footer {
    display: flex;
    justify-content: space-between;
    gap: var(--space-3);
    margin-top: var(--space-6);
    padding-top: var(--space-5);
    border-top: 1px solid var(--border);
    flex-wrap: wrap;
}


.callout {
    padding: var(--space-4);
    border-radius: var(--radius-md);
    font-size: var(--fs-sm);
}
.callout-warn {
    background: rgba(245, 158, 11, 0.10);
    border: 1px solid rgba(245, 158, 11, 0.3);
    color: #92400e;
}


/* Print-options checkboxes */
.checkbox-list {
    display: grid;
    gap: var(--space-3);
}
.cb-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2);
    border-radius: var(--radius-sm);
    cursor: pointer;
}
.cb-row:hover { background: var(--surface-alt); }
/* حقلٌ تابعٌ لخانةٍ فوقه — يزيح قليلاً ليُقرأ تابعاً لا مستقلّاً. */
.cb-sub {
    display: flex; gap: var(--space-2); align-items: center;
    margin: 2px var(--space-6) var(--space-2) var(--space-2);
}
.cb-sub .input { flex: 1; min-width: 0; }
.cb-sub .btn { flex: none; }
.cb-row input[type="checkbox"] {
    width: 20px; height: 20px;
    accent-color: var(--primary);
}


/* ==========================================================================
   Portfolio
   ========================================================================== */
/* TODO(phase-d): accordion already works, just tighten paddings on mobile
   and make section-header tap area full-row. */
.portfolio-sections {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding-bottom: var(--space-8);
}

.portfolio-section {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: box-shadow var(--dur-fast) var(--ease);
}
.portfolio-section:hover { box-shadow: var(--shadow-sm); }
.portfolio-section.is-open {
    box-shadow: var(--shadow);
    border-color: var(--primary-light);
}

.portfolio-section-header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    padding: var(--space-4) var(--space-5);
    background: transparent;
    border: 0;
    cursor: pointer;
    text-align: right;
    font-family: inherit;
    font-size: var(--fs-body);
    transition: background var(--dur-fast) var(--ease);
}
.portfolio-section-header:hover { background: var(--surface-alt); }

/* مربّعُ أيقونة القسم — الشكلُ «ب»: كمربّع رقم الطالب في السجل، فالتطبيقُ
   لغةٌ واحدة. والأيقونةُ داخله مرسومةٌ تتبع لونَ الهُويّة، إلّا في القسم
   المخصَّص فرمزُ المعلّم فيه كما كتبه. */
.pf-chip {
    width: 38px; height: 38px; flex: none; border-radius: 11px;
    display: grid; place-items: center;
    font-size: 19px; line-height: 1;
    color: var(--primary);
    background: color-mix(in srgb, var(--primary) 10%, var(--mix-base));
    border: 1.5px solid color-mix(in srgb, var(--primary) 22%, var(--mix-base));
}
.pf-chip svg { display: block; }
.portfolio-title {
    font-weight: var(--fw-bold);
    font-size: var(--fs-lg);
    flex: 1;
    min-width: 0;
}
.portfolio-chev {
    margin-right: auto;
    font-size: 14px;
    color: var(--text-muted);
    transition: transform var(--dur-fast) var(--ease);
}
.portfolio-section.is-open .portfolio-chev { color: var(--ink-primary); }

.portfolio-section-body {
    padding: var(--space-5) var(--space-5) var(--space-6);
    border-top: 1px solid var(--border);
    background: var(--surface-alt);
}
.portfolio-section-body[hidden] { display: none; }


/* Generic file list cards */
.file-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
/* TODO(phase-d): stack file-icon/body/actions vertically on mobile,
   actions row full-width with equal-sized buttons. */
.file-card {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}
.file-icon { font-size: 28px; line-height: 1; flex-shrink: 0; }
.file-body { flex: 1; min-width: 0; }
.file-name { font-weight: var(--fw-medium); }
.file-meta {
    font-size: var(--fs-sm);
    color: var(--text-muted);
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
    align-items: center;
    margin-top: var(--space-1);
}
.file-actions { display: flex; gap: var(--space-1); flex-shrink: 0; }

/* Auto-populated simple list */
.auto-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.auto-item {
    padding: var(--space-3) var(--space-4);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

/* Image preview grid (modal) */
.image-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: var(--space-2);
    margin-top: var(--space-2);
}
.image-grid img {
    width: 100%;
    height: 140px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
}

/* ==========================================================================
   Weekly schedule
   ========================================================================== */
/* TODO(phase-d): on mobile, consider a day-by-day stacked view (pick a day,
   see its periods vertically) instead of the horizontal 5-day grid. Keep
   the grid available on tablet+. */
/* الجدول الأسبوعي — التصميم المعتمد (ج١) */
/* الجدول كله في شاشة واحدة بلا تحريك: الصفحة عمود مرن مقيَّد بارتفاع الشاشة
   ناقص الشريط العلوي وحواف المحتوى والشريط السفلي، والجدول يأخذ ما تبقّى
   فتتوزّع الحصص عليه مهما كان عددها. max-height لا height حتى لا تتمدّد
   الصفوف بلا داعٍ حين تكون الحصص قليلة. */
.sched-v2 {
    display: flex;
    flex-direction: column;
    /* والفجوةُ تُخصم معها: الشريطُ صار عائماً فأخذ من الشاشة أكثر ممّا
       حُسب هنا، ولولاها لقُصّت آخرُ حصّةٍ بصمت. */
    max-height: calc(100dvh - 170px - var(--bottom-nav-gap));
    padding-bottom: 0;
    overflow: hidden;
}

.sched-head {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: var(--space-4) 0 var(--space-2);
    flex: none;
    /* الزرّان إلى نهاية السطر — يسارِه في العربية. كانا في بدايته يوم كان
       العنوانُ معهما يدفعهما، فلمّا انتقل العنوانُ إلى الشريط العلويّ بقيا
       حيث كانا بلا ما يدفعهما. */
    justify-content: flex-end;
}
.sched-head h2 {
    flex: 1;
    margin: 0;
    font-size: 20px;
    font-weight: var(--fw-bold);
    color: var(--ink-primary);
}
/* مربع «توقيت الحصص» الرصاصي الصغير */
.sched-time-btn {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    border-radius: 11px;
    padding: 0 12px;
    font-family: inherit;
    font-weight: var(--fw-bold);
    font-size: 12.5px;
    color: var(--ink-primary);
    white-space: nowrap;
    cursor: pointer;
    background: linear-gradient(150deg, #fff 0%, color-mix(in srgb, var(--beige) 42%, var(--mix-base)) 50%, #ECEAE3 100%);
    border: 1.5px solid color-mix(in srgb, var(--beige) 85%, #000);
    box-shadow: inset 0 1.5px 0 var(--sheen), 0 3px 8px rgba(16, 24, 40, .1);
}
.sched-time-btn:active { transform: scale(.98); }

/* زر التعديل: رصاصي كأخيه حتى يُضغط، فيصير كحلياً ليبقى واضحاً أن
   الجدول مفتوح — الحالة المفتوحة يجب أن تُرى بلا تأمّل. */
.sched-edit-btn.on {
    color: #fff;
    background: linear-gradient(150deg, var(--primary-lift) 0%, var(--primary) 55%, var(--primary-deep) 100%);
    border-color: color-mix(in srgb, var(--primary) 78%, #000);
    box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .18), 0 3px 9px color-mix(in srgb, var(--primary) 30%, transparent);
}

/* ── «+ حصة انتظار اليوم» ──
   يُسنَد للمعلّم انتظارٌ صباحَ يومه، فيسجّله بضغطتين بلا أن يفتح التعديل
   ويبحث عن الخانة ويختار نوعها. وهو كهرمانيٌّ كالحصة التي يصنعها، وفي صدر
   السطر — يمينِه في العربية — فلا يزاحم زرّي الجدول في نهايته. */
.sched-wait-btn {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    border-radius: 11px;
    padding: 0 12px;
    margin-inline-end: auto;
    font-family: inherit;
    font-weight: var(--fw-bold);
    font-size: 12.5px;
    color: #B45309;
    white-space: nowrap;
    cursor: pointer;
    background: color-mix(in srgb, #F59E0B 12%, var(--mix-base));
    border: 1.5px solid color-mix(in srgb, #F59E0B 34%, var(--mix-base));
    box-shadow: inset 0 1.5px 0 var(--sheen), 0 3px 8px rgba(16, 24, 40, .1);
}
.sched-wait-btn:active { transform: scale(.98); }

/* وهو مفتوحٌ على وضع الاختيار: يمتلئ لونه ويصير «إلغاء» — الجدولُ ينتظر
   ضغطةً، وهذا يجب أن يُرى بلا تأمّل كما في زرّ التعديل. */
/* والتدرّج يبدأ من ‎#B45309‎ لا من أفتحَ منه: الأفتحُ يحمل كتابةً بيضاء
   بنسبة ‎3.2:1‎ — دون العتبة، فيخفت أعلى الزرّ. وهو من ‎#B45309‎ نازلاً
   ‎5.05:1‎ في أضعف موضعِه. */
.sched-wait-btn.on {
    color: #fff;
    background: linear-gradient(150deg, #B45309 0%, #9A4507 55%, #7C2D12 100%);
    border-color: #7C2D12;
    box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .18), 0 3px 9px rgba(180, 83, 9, .3);
}

/* وضعُ الاختيار: الشاغرُ من عمود اليوم وحده هدفٌ — إطارٌ كهرمانيٌّ متقطّع
   و«+»، وما عداه يخفت فلا تتردّد العين أين تضغط. */
.sched-v2.is-picking .sched-cell.is-pick { cursor: pointer; }
/* والحدُّ يقرأ `currentColor`: فيتبع حبرَ الخانة نفسه — كهرمانيٌّ داكنٌ
   على الأبيض، وفاتحٌ على الداكن حين يبدّله `theme-dark` — بلا قاعدةٍ
   ثانيةٍ تُنسى عند التعديل. */
.sched-v2.is-picking .sched-cell.is-pick .sched-box.empty {
    border: 1.5px dashed currentColor;
    background: color-mix(in srgb, #F59E0B 12%, var(--mix-base));
    color: #B45309;
}
.sched-v2.is-picking .sched-cell:not(.is-pick) { opacity: .45; }

/* خارج وضع التعديل الخانة ليست هدفاً للضغط، فلا مؤشّر ولا استجابة لمس. */
.sched-v2:not(.is-editing) .sched-cell {
    cursor: default;
    -webkit-tap-highlight-color: transparent;
}
.sched-v2.is-editing .sched-cell { cursor: pointer; }

/* الفارغة في وضع التعديل: إطار متقطّع يقول «هنا مكان شاغر». */
.sched-v2.is-editing .sched-box.empty {
    border: 1.5px dashed color-mix(in srgb, var(--gold, #C9A961) 55%, transparent);
    background: color-mix(in srgb, var(--gold, #C9A961) 6%, transparent);
}

/* الحصص صفوفٌ على اليمين والأيام أعمدة أعلى (البديل ب) —
   الأيام الخمسة كلها ظاهرة بلا تمرير أفقي، وكل حصة شريط مستقل. */
.sched-wrap { overflow: hidden; flex: 1 1 auto; min-height: 0; }

/* الفراغ أفقي لا رأسي: كل يوم يُقرأ كعمود مستقل من الرأس حتى آخر حصة،
   والحصص داخل العمود يفصلها خط رفيع فقط. */
.sched-table {
    border-collapse: separate;
    border-spacing: 6px 0;
    width: 100%;
    table-layout: fixed;
    background: transparent;
}
.sched-table th,
.sched-table td { padding: 0; }

/* رؤوس الأيام رصاصية، وعمود الحصص بلون الهُويّة — فيتميّز محور الوقت عن محور الأيام. */
.sched-table thead th {
    background: linear-gradient(180deg, #fff, #ECEAE3);
    color: var(--ink-primary);
    border-bottom: 1px solid color-mix(in srgb, var(--beige) 84%, #000);
    padding: 9px 2px;
    font-size: 11.5px;
    font-weight: var(--fw-bold);
    text-align: center;
}
.sched-table thead th { border-radius: 12px 12px 0 0; }
/* عمود اليوم الحالي */
.sched-table thead th.is-today {
    background: linear-gradient(180deg, #D6B96F, #C9A961);
    color: var(--on-gold);
    border-bottom-color: color-mix(in srgb, #C9A961 70%, #000);
}
/* رأس «الحصة» رصاصي كرؤوس الأيام؛ لونُ الهُويّة لخلايا الأرقام تحته فقط. */
.sched-table thead th.sched-corner { width: 40px; }

/* الظل صار على الخلايا لا على الصف: الصف ممتد أفقياً بينما العمود هو
   الوحدة البصرية الآن، والجداول لا تسمح بتنسيق الأعمدة مباشرة. */
.sched-table tbody td {
    box-shadow: 2px 0 6px -5px rgba(16, 24, 40, .35),
               -2px 0 6px -5px rgba(16, 24, 40, .35);
}
.sched-table tbody tr:last-child td {
    border-radius: 0 0 12px 12px;
    box-shadow: 0 4px 8px -3px rgba(16, 24, 40, .16);
}
.sched-table tbody tr:not(:last-child) td { border-bottom: 1px solid var(--border); }

/* عمود الحصة الثابت على اليمين */
.sched-table td.sched-per {
    background: var(--primary);
    color: #fff;
    width: 40px;
    text-align: center;
}
.sched-table tbody tr:not(:last-child) td.sched-per {
    border-bottom: 1px solid rgba(255, 255, 255, .16);
}
.sched-table td.sched-per b { display: block; font-size: 13px; font-weight: var(--fw-bold); }
.sched-table td.sched-per span {
    display: block; margin-top: 1px;
    font-size: 9px; font-weight: var(--fw-bold); color: rgba(255, 255, 255, .7);
}

/* ارتفاع الخانة يُحسب من ارتفاع الشاشة مقسوماً على عدد الحصص (--rows تأتي
   من الـJS) فيبقى الجدول كله في شاشة واحدة مهما زادت الحصص.
   ولا يزيد أي صف عن جيرانه بسبب اسم طويل — النص يُقصّ بثلاث نقاط.

   ── و‎376‎ رقمٌ مقيسٌ لا مقدَّر (٤ سبتمبر ٢٠٢٦) ──
   قال المعلّم: «الجدول طويلٌ بزيادة، قصّره شوي». وكان الاحتياطُ ‎320‎ وقد
   تقادم: بطاقةُ التقويم الدراسيّ أُضيفت تحت الجدول بعده ولم تُحسب. فقِيس
   على شاشة ‎812px‎ فإذا ما حول الجدول ‎380‎ لا ‎332‎:

     الشريط العلوي ‎64‎ · صفُّ الأزرار ‎36‎ · رأس الجدول ‎38‎ ·
     بطاقة التقويم ‎68‎ · الشريط السفلي ‎58‎ · وهوامشُ ‎116‎

   فكانت الصفحةُ تفيض ‎48px‎ — تمريرةٌ صغيرةٌ لا معنى لها. وبـ‎376‎ (مع
   ‎--bottom-nav-gap‎) يستقرّ الجدولُ كلُّه في الشاشة بلا تمرير.

   وتنبيهٌ لمن يعدّل: `.sched-hint` مخفيّةٌ اليوم بقاعدة «بلا شروح» في
   `theme-white.css` — فإن أُعيدت زاد المطلوبُ نحو ‎26px‎ ولزم رفعُ الرقم. */
.sched-cell {
    background: var(--surface);
    height: clamp(44px, calc((100dvh - 376px - var(--bottom-nav-gap)) / var(--rows, 7)), 78px);
    cursor: pointer;
    overflow: hidden;
}
.sched-box .sb-c,
.sched-box .sb-s,
.sched-box .sb-sub,
.sched-box .sb-w {
    display: block;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sched-cell.is-today { background: color-mix(in srgb, #C9A961 9%, var(--mix-base)); }
.sched-box {
    height: 100%;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    transition: transform var(--dur-fast) var(--ease);
}
.sched-cell:active .sched-box { transform: scale(.96); }
/* الحصة المعبّأة: كتابة فقط بلا صندوق ولا إطار (البديل ج٣) */
.sched-box.filled {
    background: transparent;
    border: 0;
    box-shadow: none;
}
/* ‫٩.٥px هو أكبر قياس يتّسع فيه «السادس/ب» داخل عمود اليوم بلا قصّ. */
.sched-box.filled .sb-c {
    font-size: 9.5px;
    font-weight: var(--fw-bold);
    color: var(--ink-primary);
    line-height: 1.25;
}
.sched-box.filled .sb-s {
    font-size: 9px;
    font-weight: var(--fw-bold);
    color: var(--text-muted);
    line-height: 1.25;
}
.sched-box.wait {
    background: color-mix(in srgb, #F59E0B 12%, var(--mix-base));
    border: 1px solid color-mix(in srgb, #F59E0B 32%, var(--mix-base));
    color: #B45309;
    font-size: 9.5px;
    font-weight: var(--fw-bold);
}
/* انتظار مُسند له فصل اليوم */
.sched-box.wait .sb-sub { font-size: 10px; font-weight: var(--fw-bold); line-height: 1.2; }
.sched-box.wait .sb-w   { font-size: 8px; font-weight: var(--fw-bold); opacity: .8; }
.sched-box.empty { color: #CBBE9E; font-size: 19px; }


.sched-hint {
    text-align: center;
    color: var(--text-muted);
    font-size: 11.5px;
    margin: var(--space-2) 0 0;
    flex: none;
}

/* ==========================================================================
   لوحة اختيار الفصل / تعديل الحصة (باللمس فقط)
   ========================================================================== */
.sch-head { display: flex; align-items: center; gap: 10px; margin-bottom: 13px; }
.sch-back {
    width: 36px; height: 36px; border-radius: 11px;
    display: grid; place-items: center;
    font-size: 17px; color: var(--ink-primary); flex-shrink: 0;
    background: var(--surface); border: 1.5px solid var(--border);
    box-shadow: 0 2px 6px rgba(16, 24, 40, .07); cursor: pointer;
}
.sch-slot {
    width: 52px; height: 52px; border-radius: 15px; flex-shrink: 0;
    background: linear-gradient(180deg, var(--primary-mid), var(--primary));
    color: #fff; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 1px;
    box-shadow: 0 4px 11px color-mix(in srgb, var(--primary) 30%, transparent);
}
.sch-slot.amber {
    background: linear-gradient(180deg, #D97706, #B45309);
    box-shadow: 0 4px 11px rgba(180, 83, 9, .32);
}
.sch-slot b { font-size: 15px; font-weight: var(--fw-bold); }
.sch-slot span { font-size: 9px; opacity: .8; }
.sch-tt { flex: 1; min-width: 0; }
.sch-tt h3 { margin: 0; font-size: 17px; font-weight: var(--fw-bold); color: var(--ink-primary); }
.sch-tt div { font-size: 12px; color: var(--text-muted); font-weight: var(--fw-bold); margin-top: 2px; }

.sch-lbl { font-size: 12px; font-weight: var(--fw-bold); color: var(--text-muted); margin: 0 3px 9px; }
.sch-hint { text-align: center; font-size: 11.5px; color: var(--text-muted); font-weight: var(--fw-bold); margin-top: 11px; }

/* بطاقات الفصول */
.sch-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.sch-card {
    position: relative; border-radius: 15px; padding: 12px;
    text-align: right; cursor: pointer; font-family: inherit;
    display: flex; flex-direction: column; gap: 2px;
    background: linear-gradient(150deg, #fff 0%, color-mix(in srgb, var(--beige) 42%, var(--mix-base)) 50%, #ECEAE3 100%);
    border: 1.5px solid color-mix(in srgb, var(--beige) 85%, #000);
    box-shadow: inset 0 1.5px 0 var(--sheen), 0 3px 8px rgba(16, 24, 40, .09);
    transition: transform var(--dur-fast) var(--ease);
}
.sch-card:active { transform: scale(.97); }
.sch-card .g { font-size: 14px; font-weight: var(--fw-bold); color: var(--ink-primary); }
.sch-card .s { font-size: 11px; color: var(--text-muted); font-weight: var(--fw-bold); }
.sch-card.on {
    background: linear-gradient(180deg, var(--primary-mid), var(--primary));
    border-color: var(--primary);
    box-shadow: 0 6px 15px color-mix(in srgb, var(--primary) 33%, transparent);
}
.sch-card.on .g { color: #fff; }
.sch-card.on .s { color: rgba(201, 169, 97, .95); }
.sch-card.on::after {
    content: "✓"; position: absolute; top: 8px; left: 10px;
    width: 20px; height: 20px; border-radius: 50%;
    background: #C9A961; color: var(--on-gold);
    font-size: 12px; font-weight: var(--fw-bold);
    display: grid; place-items: center;
}
.sch-card.wait {
    grid-column: 1 / -1;
    background: color-mix(in srgb, #F59E0B 10%, var(--mix-base));
    border-color: color-mix(in srgb, #F59E0B 35%, var(--mix-base));
}
.sch-card.wait .g { color: #B45309; }
.sch-card.wait .s { color: #B45309; opacity: .75; }
.sch-card.wait .chev { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: #B45309; font-size: 16px; }
.sch-card.wait.on { background: linear-gradient(180deg, #D97706, #B45309); border-color: #B45309; }
.sch-card.wait.on .g,
.sch-card.wait.on .s,
.sch-card.wait.on .chev { color: #fff; }
.sch-card.wait.on::after { background: #fff; color: #B45309; }


/* إسناد فصل الانتظار: مرحلة ← صف ← شعبة */
.sch-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 13px; }
.sch-chip {
    border-radius: 12px; padding: 9px 15px; cursor: pointer; font-family: inherit;
    font-size: 13px; font-weight: var(--fw-bold); color: var(--ink-primary);
    background: var(--surface); border: 1.5px solid var(--border);
    box-shadow: 0 2px 6px rgba(16, 24, 40, .06);
}
.sch-chip.on {
    background: linear-gradient(180deg, var(--primary-mid), var(--primary));
    border-color: var(--primary); color: #fff;
    box-shadow: 0 4px 11px color-mix(in srgb, var(--primary) 30%, transparent);
}
.sch-g3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.sch-gcell {
    border-radius: 13px; padding: 12px 6px; cursor: pointer; font-family: inherit;
    text-align: center; font-size: 13px; font-weight: var(--fw-bold); color: var(--ink-primary);
    background: linear-gradient(150deg, #fff 0%, color-mix(in srgb, var(--beige) 42%, var(--mix-base)) 50%, #ECEAE3 100%);
    border: 1.5px solid color-mix(in srgb, var(--beige) 85%, #000);
    box-shadow: inset 0 1.5px 0 var(--sheen), 0 3px 8px rgba(16, 24, 40, .09);
}
/* الظلُّ يُكتب هنا ولا يُترك للحالة العاديّة: لمعتُها `inset 0 1.5px 0`
   بيضاءُ، فتبقى خطّاً أبيضَ فوق الفيروزيّ. ونظيرُه في `.sch-chip.on`. */
.sch-gcell.on {
    background: linear-gradient(180deg, var(--primary-mid), var(--primary));
    border-color: var(--primary); color: #fff;
    box-shadow: 0 4px 11px color-mix(in srgb, var(--primary) 30%, transparent);
}
.sch-secs { display: flex; gap: 8px; flex-wrap: wrap; }
.sch-sec {
    width: 52px; height: 52px; border-radius: 15px; cursor: pointer; font-family: inherit;
    display: grid; place-items: center; font-size: 17px; font-weight: var(--fw-bold); color: var(--ink-primary);
    background: linear-gradient(150deg, #fff 0%, color-mix(in srgb, var(--beige) 42%, var(--mix-base)) 50%, #ECEAE3 100%);
    border: 1.5px solid color-mix(in srgb, var(--beige) 85%, #000);
    box-shadow: inset 0 1.5px 0 var(--sheen), 0 3px 8px rgba(16, 24, 40, .09);
}
.sch-sec:active { transform: scale(.95); }
.sch-sec[disabled] { opacity: .4; cursor: default; }
/* الشعبة المختارة — تلزم في لوحة إضافة الفصل حيث لا يُحفظ فور اللمس. */
.sch-sec.on {
    background: linear-gradient(180deg, var(--primary-mid), var(--primary));
    border-color: var(--primary);
    color: #fff;
    box-shadow: 0 4px 11px color-mix(in srgb, var(--primary) 30%, transparent);
}

/* «أخرى» — حقل يكتب فيه المعلم شعبةً أو مادةً ليست في القائمة */
.sch-sec.wide { width: auto; padding: 0 14px; font-size: 13px; }
.sch-other { display: flex; gap: 8px; align-items: center; margin-top: 10px; }
.sch-other .input { flex: 1; min-height: 46px; }

/* حالة الانتظار الحالية */
.sch-cur {
    border-radius: 16px; padding: 13px 15px; margin-bottom: 11px;
    display: flex; align-items: center; gap: 11px;
    background: color-mix(in srgb, #F59E0B 10%, var(--mix-base));
    border: 1.5px solid color-mix(in srgb, #F59E0B 35%, var(--mix-base));
}
.sch-cur .em { font-size: 20px; }
.sch-cur .tx { display: flex; flex-direction: column; }
.sch-cur .t { font-size: 14.5px; font-weight: var(--fw-bold); color: #B45309; }
.sch-cur .h { font-size: 11.5px; color: #B45309; opacity: .85; font-weight: var(--fw-bold); margin-top: 1px; }
.sch-cur .x {
    margin-right: auto; width: 30px; height: 30px; border-radius: 50%;
    background: #fff; border: 1.5px solid color-mix(in srgb, #F59E0B 35%, var(--mix-base));
    color: #B45309; font-size: 14px; font-weight: var(--fw-bold);
    display: grid; place-items: center; cursor: pointer; flex-shrink: 0;
}
.sch-del {
    width: 100%; min-height: 52px; border-radius: 14px; margin-top: 15px;
    cursor: pointer; font-family: inherit; font-size: 14.5px; font-weight: var(--fw-bold);
    color: #DC2626;
    background: color-mix(in srgb, #DC2626 6%, var(--mix-base));
    border: 1.5px solid color-mix(in srgb, #DC2626 35%, var(--mix-base));
}

/* مسح الجدول — فعل خطر ونادر: رابط خفيف أسفل الصفحة */
.sched-clear {
    display: block;
    width: 100%;
    margin-top: var(--space-2);
    padding: 8px;
    flex: none;
    background: none;
    border: 0;
    font-family: inherit;
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    color: #DC2626;
    text-decoration: underline;
    cursor: pointer;
}

/* Period times editor */
/* ==========================================================================
   حقول البيانات (النموذج أ) — بطاقة هوية كحلية ثم صفوف تُلمس فتفتح للكتابة.
   مشتركة بين «بياناتي» و«معلومات المدرسة».
   ========================================================================== */
.idc {
    border-radius: 18px;
    overflow: hidden;
    margin-bottom: var(--space-4);
    color: #fff;
    background: linear-gradient(150deg, var(--primary-mid) 0%, var(--primary) 60%, var(--primary-deep) 100%);
    box-shadow: 0 6px 16px color-mix(in srgb, var(--primary) 30%, transparent), inset 0 1.5px 0 rgba(255, 255, 255, .18);
}
.idc-top { display: flex; align-items: center; gap: 12px; padding: 15px 17px; }
.idc-top .ph {
    width: 58px; height: 58px; border-radius: 14px; flex-shrink: 0; overflow: hidden;
    display: grid; place-items: center;
    background: rgba(255, 255, 255, .13);
    border: 1.5px solid rgba(201, 169, 97, .5);
    font-size: 18px; font-weight: var(--fw-bold); color: #D6B96F;
}
.idc-top .ph img { width: 100%; height: 100%; object-fit: cover; }
.idc-top .ph span { font-size: 18px; font-weight: var(--fw-bold); color: #D6B96F; }
.idc-top .tx { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.idc-top .nm {
    font-size: 16px; font-weight: var(--fw-bold);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.idc-top .rl {
    font-size: 11.5px; font-weight: var(--fw-bold); margin-top: 2px;
    color: rgba(255, 255, 255, .72);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* الخيط الذهبي يفصل الهوية عن أرقامها — نفس لمسة غلاف ملف الإنجاز. */
.idc-rule { height: 3px; background: linear-gradient(90deg, transparent, #C9A961, transparent); }
.idc-strip { display: flex; }
.idc-strip .cell { flex: 1; padding: 9px 6px; text-align: center; min-width: 0; }
.idc-strip .cell + .cell { border-right: 1px solid rgba(255, 255, 255, .14); }
.idc-strip .cell b {
    display: block; font-size: 13.5px; font-weight: var(--fw-bold); color: #D6B96F;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.idc-strip .cell span { display: block; font-size: 9.5px; font-weight: var(--fw-bold); color: rgba(255, 255, 255, .68); }

.fgrp-t {
    font-size: 12px; font-weight: var(--fw-bold); color: var(--text-muted);
    margin: 0 var(--space-1) var(--space-2);
}
.flist {
    border-radius: 14px;
    overflow: hidden;
    border: 1.5px solid color-mix(in srgb, var(--beige) 85%, #000);
    box-shadow: 0 3px 8px rgba(16, 24, 40, .08);
    margin-bottom: var(--space-4);
}
.frow {
    display: flex; align-items: center; gap: 10px; width: 100%;
    padding: 12px 15px;
    background: linear-gradient(150deg, #fff 0%, color-mix(in srgb, var(--beige) 28%, var(--mix-base)) 100%);
    border: 0;
    border-top: 1px solid color-mix(in srgb, var(--beige) 88%, #000);
    font-family: inherit; text-align: right; cursor: pointer;
}
.frow:first-child { border-top: 0; }
.frow .lb { font-size: 12.5px; font-weight: var(--fw-bold); color: var(--text-muted); width: 96px; flex-shrink: 0; }
.frow .vl {
    flex: 1; min-width: 0; font-size: 13.5px; font-weight: var(--fw-bold); color: var(--ink-primary);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* ‎#C0BAA8‎ كان ‎1.94:1‎ على الأبيض — خافتٌ إلى حدّ الاختفاء. و‎#7A756A‎
   يبلغ ‎4.59:1‎ ويبقى خافتاً في عين الناظر: الفرقُ يُقرأ ولا يُلاحَظ.
   (قِيس لا حُسب: ‎#8A8474‎ الذي قُدّر أوّلاً لم يبلغ غير ‎3.73‎.) */
.frow .vl.is-empty { color: #7A756A; font-weight: var(--fw-medium); }
/* النقطة الذهبية = حقل مطلوب ما زال فارغاً */
.frow .dot { width: 7px; height: 7px; border-radius: 50%; background: #C9A961; flex-shrink: 0; }
.frow-input {
    flex: 1; min-width: 0; border: 0; background: transparent; outline: none;
    font-family: inherit; font-size: 13.5px; font-weight: var(--fw-bold); color: var(--ink-primary);
    padding: 0; text-align: right;
}

/* بطاقة الصورة أو الشعار */
.flogo {
    display: flex; align-items: center; gap: 11px;
    padding: 12px 14px; margin-bottom: var(--space-4);
    border-radius: 14px;
    background: linear-gradient(150deg, #fff 0%, color-mix(in srgb, var(--beige) 42%, var(--mix-base)) 50%, #ECEAE3 100%);
    border: 1.5px solid color-mix(in srgb, var(--beige) 85%, #000);
    box-shadow: inset 0 1.5px 0 var(--sheen), 0 3px 8px rgba(16, 24, 40, .09);
}
.flogo .box {
    width: 50px; height: 50px; border-radius: 13px; flex-shrink: 0; overflow: hidden;
    display: grid; place-items: center; font-size: 21px;
    background: #fff; border: 1.5px dashed #C9A961;
}
.flogo .box img { width: 100%; height: 100%; object-fit: cover; }
/* الحبرُ من الرمز: المربّعُ يبدو أبيضَ مثبَّتاً هنا، لكنّ
   `body.theme-dark .box` قاعدةٌ عامّةٌ تقلب **أيَّ** ‎.box‎ — فيُقلب
   معها ويتبعه حبرُه. (ثُبِّت خطأً ثم رُدّ بعد القياس: كحليٌّ على
   داكنٍ = ‎1.25:1‎.) */
.flogo .box span { font-size: 16px; font-weight: var(--fw-bold); color: var(--ink-primary); }
.flogo .tx { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.flogo .t { font-size: 13px; font-weight: var(--fw-bold); color: var(--ink-primary); }
.flogo .h { font-size: 10.5px; font-weight: var(--fw-bold); color: var(--text-muted); }

.fchip {
    border-radius: 11px; padding: 7px 12px; cursor: pointer; font-family: inherit;
    font-size: 12px; font-weight: var(--fw-bold); color: var(--ink-primary);
    background: var(--surface); border: 1.5px solid var(--border); flex-shrink: 0;
}
.fchip.on {
    background: linear-gradient(180deg, var(--primary-mid), var(--primary));
    border-color: var(--primary); color: #fff;
}
.fchips { display: flex; flex-wrap: wrap; gap: 7px; }
.fsubj {
    padding: 12px 13px; margin-bottom: var(--space-4);
    border-radius: 14px;
    background: linear-gradient(150deg, #fff 0%, color-mix(in srgb, var(--beige) 42%, var(--mix-base)) 50%, #ECEAE3 100%);
    border: 1.5px solid color-mix(in srgb, var(--beige) 85%, #000);
    box-shadow: inset 0 1.5px 0 var(--sheen), 0 3px 8px rgba(16, 24, 40, .09);
}

.fsave {
    display: block; width: 100%; margin: var(--space-2) 0 var(--space-6);
    min-height: 48px; border: 0; border-radius: 13px;
    background: linear-gradient(180deg, var(--primary-mid), var(--primary));
    color: #fff; font-family: inherit; font-size: 14px; font-weight: var(--fw-bold);
    cursor: pointer; box-shadow: 0 4px 12px color-mix(in srgb, var(--primary) 28%, transparent);
}
.fsave:active { transform: scale(.99); }
.fsave:disabled { opacity: .6; }

/* ==========================================================================
   تهيئة المدرسة — أول شاشة بعد إنشاء الحساب (النموذج أ)
   ========================================================================== */
.setup-v1 { max-width: 480px; padding-bottom: var(--space-10); }

/* الترحيب: كتابةٌ كحلية لا صندوق. كان لوحاً كحلياً بظلٍّ وبريقٍ يملأ أعلى
   الشاشة — والشاشةُ الأولى يجب أن تبدو خفيفةً لا مُعلَنة. */
.setup-hero {
    display: flex; flex-direction: column;
    margin: var(--space-6) 0 var(--space-5);
    color: var(--ink-primary);
}
.setup-hero .t { font-size: 22px; font-weight: var(--fw-bold); }
.setup-hero .h {
    font-size: 12.5px; font-weight: var(--fw-medium); line-height: 1.75;
    color: var(--text-muted); margin-top: 5px;
}

.setup-fld {
    width: 100%; min-height: 48px; margin-bottom: var(--space-4);
    padding: 0 14px; border-radius: 12px;
    font-family: inherit; font-size: 14px; font-weight: var(--fw-bold);
    color: var(--ink-primary); background: var(--surface);
    border: 1.5px solid var(--border); outline: none;
}
.setup-fld:focus { border-color: #C9A961; }
.setup-fld::placeholder { color: #C0BAA8; font-weight: var(--fw-medium); }

.setup-v1 .fchips { margin-bottom: var(--space-4); }
.setup-v1 .fchip { padding: 10px 16px; font-size: 13.5px; }

/* زرّ يفتح منتقي إدارة التعليم — بمظهر الحقل نفسه فيقرأه المعلم كحقل. */
.dept-pick {
    display: flex; align-items: center; gap: 10px;
    width: 100%; min-height: 48px; margin-bottom: var(--space-4);
    padding: 0 14px; border-radius: 12px;
    font-family: inherit; font-size: 14px; font-weight: var(--fw-bold);
    color: var(--ink-primary); background: var(--surface);
    border: 1.5px solid var(--border); cursor: pointer; text-align: right;
}
.dept-pick .v { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dept-pick .v.is-empty { color: #C0BAA8; font-weight: var(--fw-medium); }
.dept-pick .chev { color: var(--text-muted); font-size: 12px; font-weight: var(--fw-bold); }

/* ==========================================================================
   منتقي إدارة التعليم — منطقة ثم إدارة
   ========================================================================== */
.dp-list {
    border-radius: 14px; overflow: hidden;
    border: 1.5px solid color-mix(in srgb, var(--beige) 85%, #000);
    box-shadow: 0 3px 8px rgba(16, 24, 40, .08);
}
.dp-item {
    display: flex; align-items: center; gap: 10px; width: 100%;
    padding: 13px 15px; border: 0;
    border-top: 1px solid color-mix(in srgb, var(--beige) 88%, #000);
    background: linear-gradient(150deg, #fff 0%, color-mix(in srgb, var(--beige) 28%, var(--mix-base)) 100%);
    font-family: inherit; text-align: right; cursor: pointer;
}
.dp-item:first-child { border-top: 0; }
.dp-item:active { background: color-mix(in srgb, var(--beige) 55%, var(--mix-base)); }
.dp-item .n { flex: 1; min-width: 0; font-size: 13.5px; font-weight: var(--fw-bold); color: var(--ink-primary); }
/* المنطقة تظهر فقط حين تختلف عن اسم الإدارة — جدة/مكة المكرمة مثلاً. */
.dp-item .rg { font-size: 10.5px; font-weight: var(--fw-bold); color: var(--text-muted); flex-shrink: 0; }
.dp-item .mk { color: #C9A961; font-weight: var(--fw-bold); font-size: 14px; }
.dp-item.on { background: color-mix(in srgb, #C9A961 10%, var(--mix-base)); }
.dp-item.on .n { font-weight: var(--fw-bold); }
.dp-hint {
    margin: 0 0 var(--space-3); text-align: center;
    font-size: 12px; font-weight: var(--fw-bold); color: var(--text-muted);
}

/* الصف المشتقّ لا يُفتح للكتابة — يعرض ما اختاره المعلم في حقل آخر. */
.frow.is-readonly { cursor: default; }
.frow.is-readonly .vl { opacity: .75; }

/* ==========================================================================
   شريط تاريخ السجل — تقويم ثابت ثم أيام الدراسة الأحدث أولاً
   ========================================================================== */

/* زرّ التقويم لا يمرّ مع الأيام: القفز لشهر مضى يجب أن يبقى في متناول اليد. */
.rd-cal {
    flex: 0 0 auto;
    width: 44px;
    border-radius: 12px;
    cursor: pointer;
    font-size: 17px;
    background: linear-gradient(150deg, #fff 0%, color-mix(in srgb, var(--beige) 42%, var(--mix-base)) 50%, #ECEAE3 100%);
    border: 1.5px solid color-mix(in srgb, var(--beige) 85%, #000);
    box-shadow: inset 0 1.5px 0 var(--sheen), 0 2px 6px rgba(16, 24, 40, .09);
}
.rd-cal:active { transform: scale(.95); }
/* الحقل موجود ليفتح تقويم النظام فقط — لا يُعرض. */
.rd-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }


/* ==========================================================================
   منطقة الخطر — مسح البيانات وحذف الحساب في قسم واحد
   ========================================================================== */
.dz {
    padding: 15px 16px;
    margin-bottom: var(--space-4);
    border-radius: 14px;
    background: var(--surface);
    border: 1.5px solid var(--border);
}
.dz-t { font-size: 14.5px; font-weight: var(--fw-bold); color: var(--ink-primary); margin-bottom: var(--space-2); }
.dz-h {
    margin: 0 0 var(--space-3);
    font-size: 12.5px; line-height: 1.85; color: var(--text-muted); font-weight: var(--fw-medium);
}
.dz-h strong { color: var(--text); font-weight: var(--fw-bold); }
.dz-btn {
    display: block; width: 100%; min-height: 46px;
    border-radius: 12px; cursor: pointer;
    font-family: inherit; font-size: 13.5px; font-weight: var(--fw-bold);
    color: #B42318; background: #fff; border: 1.5px solid #F3B4AE;
}
.dz-btn:active { transform: scale(.99); }

/* الحذف النهائي أشدّ نبرةً: أحمر مصمت وإطار أحمر حول القسم كله. */
.dz.is-final { border-color: #E9A49C; background: color-mix(in srgb, #DC2626 4%, var(--mix-base)); }
.dz-btn.is-final { background: #B42318; border-color: #B42318; color: #fff; }
.dz-btn.is-final:disabled {
    background: #EADFDE; border-color: #EADFDE; color: #A79694; cursor: default; transform: none;
}
.dz-ack {
    display: flex; align-items: flex-start; gap: 9px;
    margin-bottom: var(--space-3); cursor: pointer;
    font-size: 12.5px; line-height: 1.7; font-weight: var(--fw-bold); color: var(--text);
}
.dz-ack input { width: 19px; height: 19px; margin-top: 2px; flex-shrink: 0; accent-color: #B42318; }

/* ==========================================================================
   منبّه الحصص
   ========================================================================== */
.bell-main {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 16px; margin-bottom: var(--space-4);
    border-radius: 16px; cursor: pointer;
    color: #fff;
    background: linear-gradient(150deg, var(--primary-mid) 0%, var(--primary) 60%, var(--primary-deep) 100%);
    box-shadow: 0 6px 16px color-mix(in srgb, var(--primary) 30%, transparent), inset 0 1.5px 0 rgba(255, 255, 255, .18);
}
.bell-main .tx { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.bell-main .t { font-size: 15px; font-weight: var(--fw-bold); }
.bell-main .h { font-size: 11.5px; font-weight: var(--fw-bold); color: rgba(255, 255, 255, .72); margin-top: 2px; }
.bell-main input { position: absolute; opacity: 0; pointer-events: none; }
/* مفتاح منزلق: أوضح من مربّع اختيار للفعل الرئيسي في الشاشة */
.bell-main .sw {
    width: 48px; height: 28px; border-radius: 99px; flex-shrink: 0;
    background: rgba(255, 255, 255, .22);
    position: relative; transition: background var(--dur-fast) var(--ease);
}
.bell-main .sw::after {
    content: ""; position: absolute; top: 3px; right: 3px;
    width: 22px; height: 22px; border-radius: 50%; background: #fff;
    transition: transform var(--dur-fast) var(--ease);
}
.bell-main input:checked + .sw { background: #C9A961; }
.bell-main input:checked + .sw::after { transform: translateX(-20px); }
.bell-main input:focus-visible + .sw { outline: 2px solid #fff; outline-offset: 2px; }

.bell-row {
    display: flex; align-items: center; gap: 11px;
    padding: 12px 14px; margin-bottom: var(--space-2);
    border-radius: 14px; cursor: pointer;
    background: linear-gradient(150deg, #fff 0%, color-mix(in srgb, var(--beige) 42%, var(--mix-base)) 50%, #ECEAE3 100%);
    border: 1.5px solid color-mix(in srgb, var(--beige) 85%, #000);
    box-shadow: inset 0 1.5px 0 var(--sheen), 0 3px 8px rgba(16, 24, 40, .09);
}
.bell-row input { width: 20px; height: 20px; flex-shrink: 0; accent-color: var(--primary); }
.bell-row .tx { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.bell-row .t { font-size: 13.5px; font-weight: var(--fw-bold); color: var(--ink-primary); }
.bell-row .h { font-size: 10.5px; font-weight: var(--fw-bold); color: var(--text-muted); margin-top: 1px; }

.bell-note {
    margin: var(--space-5) 0 0;
    padding: 11px 13px;
    border-radius: 12px;
    background: color-mix(in srgb, #F59E0B 10%, var(--mix-base));
    border: 1px solid color-mix(in srgb, #F59E0B 32%, var(--mix-base));
    font-size: 11.5px; line-height: 1.8; font-weight: var(--fw-bold); color: #8A5A08;
}

/* ==========================================================================
   شاشة الإعدادات — بطاقة الحساب الكحلية فوق ثلاث مجموعات مختصرة
   ========================================================================== */
.set-v2 { max-width: 720px; }

/* والمسافةُ بين المجموعات هي ما يفصلها بعد أن زالت الخطوط، فتُوسَّع
   حتى تُرى فراغاً مقصوداً لا تباعداً عارضاً. */
.set-group { margin-bottom: 34px; }
.set-group-t {
    font-size: 12.5px;
    font-weight: var(--fw-bold);
    color: var(--text-muted);
    margin: 0 var(--space-1) var(--space-2);
}

/* الصفوف تُبنى كمجموعة واحدة بحواف مدوّرة. وبلا خطٍّ يفصلها وبلا أيقونات
   — بطلب المعلّم (٢٢ أغسطس ٢٠٢٦). فالمجموعةُ نفسُها هي الحدُّ، وعنوانُها
   فوقها يقول ما تجمع، والفراغُ بين السطور يكفي لفصلها. */
.set-list {
    border-radius: 14px;
    overflow: hidden;
    border: 1.5px solid color-mix(in srgb, var(--beige) 85%, #000);
    box-shadow: 0 3px 8px rgba(16, 24, 40, .08);
}
.set-row {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    padding: 13px 15px;
    background: linear-gradient(150deg, #fff 0%, color-mix(in srgb, var(--beige) 30%, var(--mix-base)) 100%);
    border: 0;
    font-family: inherit;
    text-align: right;
    text-decoration: none;
    cursor: pointer;
}
.set-row:active { background: color-mix(in srgb, var(--beige) 55%, var(--mix-base)); }
/* و`.ic` سقطت مع الأيقونات، فلا قاعدةَ لها. */
.set-row .tx { flex: 1; min-width: 0; display: flex; flex-direction: column; }
/* ‎15.5px‎ لا ‎14‎: طلبَ المعلّم تكبيراً يسيراً (٢٢ أغسطس ٢٠٢٦). والصفُّ
   صار نصّاً وحدَه بعد سقوط الأيقونة، فله سعةٌ يحتملها. */
.set-row .t { font-size: 15.5px; font-weight: var(--fw-bold); color: var(--ink-primary); }
.set-row .h {
    font-size: 11px; font-weight: var(--fw-bold); color: var(--text-muted); margin-top: 1px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.set-row .chev { color: var(--text-muted); font-weight: var(--fw-bold); font-size: 13px; flex-shrink: 0; }
.set-row.is-danger .t { color: #DC2626; }


.set-logout {
    display: block;
    width: 100%;
    margin-top: 0;
    padding: 10px;
    border: 0;
    border-radius: 12px;
    background: none;
    font-family: inherit;
    font-size: 13px;
    font-weight: var(--fw-bold);
    color: #DC2626;
    cursor: pointer;
}
/* لا سطر إصدار هنا: رقمه ورقم البناء داخل «عن التطبيق»، وتكراره كان يدفع
   آخر صفّ خلف الشريط السفلي. */

.set-fold {
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--border);
}
.set-fold > summary {
    cursor: pointer;
    font-size: 14px;
    font-weight: var(--fw-bold);
    color: var(--ink-primary);
    list-style: none;
}
.set-fold > summary::-webkit-details-marker { display: none; }
.set-fold > summary::after {
    content: " ❯";
    display: inline-block;
    font-size: 11px;
    color: var(--text-muted);
    transform: rotate(90deg);
    margin-inline-start: var(--space-2);
}
.set-fold[open] > summary::after { transform: rotate(-90deg); }

/* ==========================================================================
   شاشة «إنجاز» — ملخّص كحليّ ثم مربّعان رصاصيان وصفّ التذكيرات
   ========================================================================== */

/* المربّعات — نفس مادة بطاقات الفصول الرصاصية. */
.enjaz-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: var(--space-4);
}

.enjaz-tile {
    text-decoration: none;
    border-radius: 16px;
    background: linear-gradient(150deg, #fff 0%, color-mix(in srgb, var(--beige) 42%, var(--mix-base)) 50%, #ECEAE3 100%);
    border: 1.5px solid color-mix(in srgb, var(--beige) 85%, #000);
    box-shadow: inset 0 1.5px 0 var(--sheen), 0 3px 8px rgba(16, 24, 40, .09);
    padding: 15px 13px;
    display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center;
}
.enjaz-tile:active { transform: scale(.985); }
.enjaz-tile .ic { font-size: 26px; }
.enjaz-tile .t { font-size: 13.5px; font-weight: var(--fw-bold); color: var(--ink-primary); }
.enjaz-tile .h { font-size: 10.5px; font-weight: var(--fw-bold); color: var(--text-muted); }

/* ‫التعبئة التلقائية لأوقات الحصص: بداية + مدة + فسحة → الباقي يُحسب. */
.tf-box {
    background: linear-gradient(150deg, #fff 0%, color-mix(in srgb, var(--beige) 42%, var(--mix-base)) 50%, #ECEAE3 100%);
    border: 1.5px solid color-mix(in srgb, var(--beige) 85%, #000);
    box-shadow: inset 0 1.5px 0 var(--sheen), 0 3px 8px rgba(16, 24, 40, .08);
    border-radius: 14px;
    padding: var(--space-4);
    margin-bottom: var(--space-5);
}
/* والفاصلُ بين الأربعة أوسعُ من الفاصل داخل السطر الواحد: بثمانيةٍ كانت
   تُقرأ كتلةً واحدة، فتُرفع إلى ثلاثة عشر لتنفصل كلُّ فقرةٍ عن جارتها
   بلا أن ينتفخ الصندوق. */
.tf-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}
/* العنوانُ ملاصقٌ لحقله لا مدفوعٌ إلى الطرف الآخر: كان `flex: 1` يفرد
   بينهما عرضَ الصندوق كلَّه، فتقطع العينُ المسافة في كل سطر. */
.tf-lbl {
    flex: 0 0 auto;
    font-size: 12.5px;
    font-weight: var(--fw-bold);
    color: var(--text);
}
.tf-time, .tf-sel { min-height: 38px; width: auto; font-feature-settings: "tnum" 1; }
.tf-chips {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
    margin-bottom: var(--space-4);
}
.tf-chips:last-child { margin-bottom: 0; }
.tf-chip {
    min-height: 38px;
    padding: 0 12px;
    border-radius: 11px;
    border: 1.5px solid color-mix(in srgb, var(--beige) 88%, #000);
    background: #fff;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: var(--fw-bold);
    color: var(--ink-primary);
    cursor: pointer;
}
.tf-chip.on {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}
.tf-num { width: 62px; min-height: 38px; text-align: center; font-feature-settings: "tnum" 1; }
/* «أخرى» باهتةٌ تدلّ على الحقل ولا تُقرأ قيمةً فيه. */
.tf-num::placeholder { color: var(--text-muted); font-size: 12px; font-weight: var(--fw-medium); opacity: 1; }

/* سطرُ الطمأنة مكان الزرَّين: لا «حفظ» ولا «إلغاء»، فكلُّ تغييرٍ يُحفظ
   ساعةَ وقوعه. وبلا هذا السطر يظنّ المعلّمُ أن تغييرَه ضاع فيبحث عن زرٍّ
   ليس هناك. ويومض «حُفظت ✓» عند كلّ كتابة ثمّ يهدأ لونُه ويبقى نصُّه —
   فالتأكيدُ الباقي أطمنُ من وميضٍ يذهب ولا يُدرى أكان أم لا. */
.times-auto {
    margin: 0 0 var(--space-4);
    padding: 8px 11px; border-radius: 10px;
    font-size: 12px; font-weight: var(--fw-bold); text-align: center;
    color: var(--text-muted);
    background: color-mix(in srgb, var(--beige) 35%, var(--mix-base));
    transition: color .18s ease, background-color .18s ease;
}
.times-auto.on {
    color: #fff;
    background: var(--primary);
}

.times-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.times-row {
    display: grid;
    grid-template-columns: 80px auto auto auto;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2);
    background: var(--surface-alt);
    border-radius: var(--radius-sm);
}
.times-label { font-weight: var(--fw-medium); font-size: var(--fs-sm); }
.times-row input[type="time"] {
    min-height: 36px;
    font-family: inherit;
    font-feature-settings: "tnum" 1;
}


/* ==========================================================================
   Reports view — التصميم «ب»، وقواعدُه في ذيل الملفّ مع «rp-».
   ========================================================================== */

/* ==========================================================================
   Help view
   ========================================================================== */
.help-intro {
    margin-bottom: var(--space-5);
    background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 6%, transparent), color-mix(in srgb, var(--primary) 4%, transparent));
    border-right: 4px solid var(--primary);
}

.help-sections {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.help-section {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.help-section summary {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    cursor: pointer;
    font-weight: var(--fw-bold);
    font-size: var(--fs-lg);
    list-style: none;
    user-select: none;
}
.help-section summary::-webkit-details-marker { display: none; }
.help-section summary:hover { background: var(--surface-alt); }
.help-icon { font-size: 22px; line-height: 1; flex-shrink: 0; }
.help-chev {
    margin-right: auto;
    color: var(--text-muted);
    font-size: 16px;
    transition: transform var(--dur-fast) var(--ease);
}
.help-section[open] .help-chev { transform: rotate(180deg); color: var(--ink-primary); }

.help-section ul {
    margin: 0;
    padding: 0 var(--space-8) var(--space-5) var(--space-5);
    line-height: 2;
    color: var(--text);
}
.help-section li { margin-bottom: var(--space-1); }


/* Responsive */
@media (max-width: 640px) {
    .auth-card { padding: var(--space-6); }

    /* Dashboard: compact stats */
    .stat-card { padding: var(--space-4); }
    .stat-value { font-size: 26px; }

    /* Section headers stack — إلا رأس الفصول: عنوانه كلمة واحدة فيسع
       الاثنان على سطر، والزر يبقى في الطرف المقابل. */
    .section-header:not(.classes-header) { flex-direction: column; align-items: stretch; }
    .section-header:not(.classes-header) > .btn{ align-self: flex-start; }

    /* Class screen compact */
    .class-topbar { gap: var(--space-2); }
    .tab { padding: var(--space-2) var(--space-3); font-size: var(--fs-xs); }

    .search-input { min-width: 100%; max-width: 100%; }

    /* Smaller cells */
    .att-btn { width: 32px; height: 32px; }
    .star-btn { width: 24px; height: 28px; font-size: 18px; }

    /* Modals */
    /* ── الزوايا تبقى مقوّسةً على الجوّال ──
       كانت تُصفَّر هنا، فيصير مربّعُ «استيراد الجدول» و«إضافة الطلاب»
       قائمَ الزوايا وهو يطفو بهامشٍ من كلّ جهة — لا هو ورقةٌ ملتصقةٌ
       بالحافّة ولا بطاقةٌ كبقيّة بطاقات التطبيق. (بلاغُ المستخدم
       ٣٠ أغسطس ٢٠٢٦.) */
    .modal { max-height: 100vh; --modal-r: 20px; }
    .modal-body { padding: var(--space-4); }

    /* ── والشريطُ السفليُّ يقف عند حدّ المربّع ──
       يُرسم داخل `modal-body` ويُسحب إلى الحافّة بهامشٍ سالبٍ مكتوبٍ في
       الوسم نفسِه: `calc(var(--space-6) * -1)` أي ‎٢١‎. وحشوُ الجسم هنا
       `--space-4` أي ‎١٣‎ — فيتجاوز الشريطُ حدَّ المربّع ثمانيةَ بكسلات
       من كلّ جهة، وقِيس ذلك. والهامشُ في الوسم لا في النمط، وهو مكرّرٌ
       في ثلاثين موضعاً — فيُصحَّح هنا مرّةً واحدةً بـ!important. */
    /* وصلةُ نسبٍ لا أبوّة: النموذجُ يُغلَّف في div يُلحَق بجسم النافذة،
       فالشريطُ حفيدٌ لا ابنٌ مباشر — و«>» لا تصيبه. */
    .modal-body .modal-footer {
        margin-inline: calc(var(--space-4) * -1) !important;
        margin-bottom: calc(var(--space-4) * -1) !important;
    }

    /* File cards */
    .file-card { flex-wrap: wrap; }
    .file-actions { width: 100%; justify-content: flex-end; }

    .cell-subject, .cell-topic { display: none; }

    /* Wizard: tighter */
    .wizard-footer { flex-direction: column; }
    .wizard-footer .btn { width: 100%; }
    .wiz-step-label { display: none; }

    /* Help */
    .help-section summary { padding: var(--space-3) var(--space-4); font-size: var(--fs-body); }
    .help-section ul { padding: 0 var(--space-5) var(--space-4) var(--space-4); }

    /* Header compact */
    .header-actions { gap: var(--space-1); }
    .header-user { display: none; }
}


@media (max-width: 480px) {
    /* ‫«إلى» وحدها تُخفى؛ رقم الحصة يبقى وإلا بقي عمود فارغ يضغط حقلي الوقت. */
    .times-row { grid-template-columns: 44px 1fr 1fr; font-size: var(--fs-xs); }
    .times-row > span:not(.times-label) { display: none; }
    .times-label { font-size: 11.5px; font-weight: var(--fw-bold); }
}

/* ==========================================================================
   Phase D — Mobile polish pass for all remaining screens (≤ 768px).
   Pure CSS · desktop untouched · no JS changes.
   ========================================================================== */
@media (max-width: 768px) {

    /* ---- Auth / Login ---------------------------------------------------- */
    .view-auth { padding: var(--space-4); }
    .auth-card {
        padding: var(--space-6) var(--space-4);
        border-radius: var(--radius-lg);
    }
    .auth-logo { font-size: 40px; margin-bottom: var(--space-3); }
    .auth-title { font-size: var(--fs-h1); }
    .auth-subtitle { font-size: var(--fs-body); margin-bottom: var(--space-6); }

    /* ---- Settings -------------------------------------------------------- */
    #view-settings .flex.gap-3 {
        flex-wrap: wrap;
        gap: var(--space-2) !important;
    }
    #view-settings .flex.gap-3 > .btn {
        flex: 1 1 calc(50% - var(--space-1));
        min-height: var(--touch-target-min);
        justify-content: center;
    }
    /* The "خطرة" danger button: full-width on mobile */
    #view-settings .btn-danger { width: 100%; min-height: var(--touch-target-min); }
    /* Tighter padding inside setting cards */
    #view-settings .card { padding: var(--space-4); }

    /* ---- Student detail screen ------------------------------------------ */
    #view-student .grid.grid-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--card-gap);
    }
    #view-student .student-header-actions { gap: var(--space-1); }
    #view-student .att-history { max-height: 260px; }

    /* ---- Portfolio accordion + cards ------------------------------------ */
    .portfolio-section-header {
        padding: var(--space-4);
        gap: var(--space-2);
    }
    .portfolio-title { font-size: var(--fs-body); }
    /* على الجوال يضيق السطر، فيصغر المربّع قليلاً ويبقى فوق حدّ اللمس. */
    .pf-chip { width: 34px; height: 34px; border-radius: 10px; font-size: 17px; }
    .pf-chip svg { width: 18px; height: 18px; }
    .portfolio-section-body { padding: var(--space-4); }

    /* ---- File / book cards (stack on mobile) ---------------------------- */
    .file-card{
        flex-wrap: wrap;
        gap: var(--space-2);
    }
    .file-card .file-body{ flex: 1 1 100%; order: 1; }
    .file-icon{ flex: 0 0 auto; order: 0; }
    .file-actions{
        flex: 1 1 100%;
        order: 2;
        justify-content: flex-end;
        gap: var(--space-1);
    }
    .file-actions .btn{ min-height: var(--touch-target-min); min-width: var(--touch-target-min); }

    /* ---- Exams / Worksheets / Homework list cards ----------------------- */

    /* ---- Schedule screen ------------------------------------------------ */       /* allow horizontal scroll */
    .period-n    { font-size: var(--fs-xs); }
    .period-time { font-size: 10px; }
    .cell-subject,
    .cell-topic    { display: none; }

    /* ---- Reports ---------------------------------------------------------*/
    #view-reports .grid.grid-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* ---- Generic card title ripple avoid on touch ----------------------- */
    .card-title { font-size: var(--fs-lg); }

    /* ---- Buttons inside modals: make primary full width on very tight ---- */
    .modal-footer { flex-wrap: wrap; gap: var(--space-2); }
    .modal-footer > .btn { min-height: var(--touch-target-min); }
}

/* ==========================================================================
   مكتبة استراتيجيات التدريس (النموذج ب) — البطاقة تُفتح بالشرح في مكانها
   ========================================================================== */
.stg-head { margin-bottom: var(--space-3); }
.stg-sum {
    display: flex; align-items: baseline; gap: 8px;
    padding: 12px 14px; border-radius: 14px;
    color: #fff;
    background: linear-gradient(150deg, var(--primary-mid) 0%, var(--primary) 60%, var(--primary-deep) 100%);
    box-shadow: 0 6px 16px color-mix(in srgb, var(--primary) 30%, transparent), inset 0 1.5px 0 rgba(255, 255, 255, .18);
}
.stg-sum b { font-size: 22px; font-weight: var(--fw-bold); color: #D6B96F; }
.stg-sum span { font-size: 11.5px; font-weight: var(--fw-bold); color: rgba(255, 255, 255, .78); line-height: 1.6; }

/* سطرُ الإخبار تحت الحصيلة: حبرُه من الرمز لا لونٌ ثابت، فيتبع
   المظهرين — وهو الدرسُ الذي أخذناه من وسمَي الواجب. */
.stg-note {
    margin: 9px 0 0; padding: 9px 12px; border-radius: 11px;
    font-size: 12px; line-height: 1.85; font-weight: 500;
    color: var(--ink-primary);
    background: color-mix(in srgb, var(--pf-gold) 13%, var(--mix-base));
    border-inline-start: 3px solid color-mix(in srgb, var(--pf-gold) 65%, var(--mix-base));
}
.stg-note b { font-weight: var(--fw-bold); }

.stg-fams { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 5px; margin-bottom: var(--space-3); }
.stg-fams::-webkit-scrollbar { height: 0; }
.stg-fam {
    flex: 0 0 auto; border-radius: 11px; padding: 7px 13px;
    font-family: inherit; font-size: 12.5px; font-weight: var(--fw-bold);
    color: var(--ink-primary); background: var(--surface);
    border: 1.5px solid var(--border); cursor: pointer;
}
.stg-fam.on {
    background: linear-gradient(180deg, var(--primary-mid), var(--primary));
    border-color: var(--primary); color: #fff;
}

.stg-list { display: flex; flex-direction: column; gap: 8px; }
.stg-card {
    border-radius: 14px; overflow: hidden;
    background: linear-gradient(150deg, #fff 0%, color-mix(in srgb, var(--beige) 42%, var(--mix-base)) 50%, #ECEAE3 100%);
    border: 1.5px solid color-mix(in srgb, var(--beige) 85%, #000);
    box-shadow: inset 0 1.5px 0 var(--sheen), 0 3px 8px rgba(16, 24, 40, .09);
}
.stg-card.open { border-color: var(--primary); box-shadow: 0 4px 14px color-mix(in srgb, var(--primary) 16%, transparent); }
.stg-top {
    display: flex; align-items: center; gap: 11px; width: 100%;
    padding: 11px 13px; border: 0; background: none;
    font-family: inherit; text-align: right; cursor: pointer;
}
.stg-top .ic {
    width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0;
    display: grid; place-items: center; font-size: 18px;
    background: #fff; border: 1px solid var(--border);
}
.stg-top .tx { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.stg-top .nm { font-size: 14px; font-weight: var(--fw-bold); color: var(--ink-primary); }
.stg-top .sub {
    font-size: 11px; font-weight: var(--fw-bold); color: var(--text-muted); margin-top: 1px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.stg-top .badge {
    flex-shrink: 0; font-size: 10.5px; font-weight: var(--fw-bold);
    border-radius: 99px; padding: 2px 8px;
}
.stg-top .badge.done {
    background: color-mix(in srgb, #10B981 14%, var(--mix-base)); color: #047857;
    border: 1px solid color-mix(in srgb, #10B981 34%, var(--mix-base));
}
/* الحبرُ الخافت (‎#6B6B68‎) على ‎#ECEAE3‎ = ‎4.44:1‎ — تحت العتبة بشعرة.
   ودرجةٌ واحدة تكفي، فيُكتب صريحاً هنا لا من الرمز. */
.stg-top .badge.none { background: #ECEAE3; color: #63635F; }

/* ==========================================================================
   مكتبة المبادرات — تشارك أصناف الاستراتيجيات (.stg-*) وتزيد ثلاثة
   ========================================================================== */
.ini-add { width: 100%; margin-bottom: var(--space-3); }
/* وصف المبادرة لا يظهر إلا بعد فتح البطاقة — الصفّ المغلق اسمٌ وعدّاد
   فقط، فتُقرأ الثلاثون بنظرة واحدة. */
.ini-brief {
    margin: 0 0 8px; padding: 0 2px;
    font-size: 13px; line-height: 1.8; color: var(--text);
}
.ini-goal {
    margin: 0 0 9px; padding: 9px 11px; border-radius: 10px;
    font-size: 12.5px; line-height: 1.75; color: #6B6455;
    background: color-mix(in srgb, #C9A961 9%, var(--mix-base));
    border-inline-start: 2.5px solid #C9A961;
}
.ini-ev {
    margin-top: 9px; font-size: 11.5px; line-height: 1.8; color: var(--text-muted);
}
.ini-ev b { color: var(--ink-primary); }
.stg-log-h .ini-ben {
    font-size: 11.5px; font-weight: var(--fw-bold); color: #B8963F;
    margin-inline-start: auto; margin-inline-end: 8px;
}

.stg-steps { margin: 0; padding: 0 30px 4px 13px; }
.stg-steps li { font-size: 12.5px; line-height: 1.9; color: var(--text); opacity: .86; }
.stg-act { display: flex; gap: 7px; padding: 9px 13px 12px; border-top: 1px solid var(--border); }
.stg-btn {
    min-height: 40px; border: 0; border-radius: 11px;
    font-family: inherit; font-size: 12.5px; font-weight: var(--fw-bold); cursor: pointer;
}
.stg-btn.main { flex: 1; background: linear-gradient(180deg, var(--primary-mid), var(--primary)); color: #fff; }
.stg-btn.ghost { flex: 0 0 auto; padding: 0 14px; background: #fff; border: 1.5px solid var(--border); color: var(--ink-primary); }
.stg-btn:disabled { opacity: .45; cursor: default; }

/* لوحة التسجيل */
.stg-drop {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; min-height: 46px; border-radius: 12px; cursor: pointer;
    font-family: inherit; font-size: 12.5px; font-weight: var(--fw-bold); color: #B8963F;
    background: color-mix(in srgb, #C9A961 8%, var(--mix-base));
    border: 1.5px dashed #C9A961;
}
.stg-warn {
    margin: 8px 0 0; padding: 8px 10px; border-radius: 10px;
    font-size: 11px; line-height: 1.75; color: #6B6455;
    background: color-mix(in srgb, var(--beige) 45%, var(--mix-base));
    border-right: 2.5px solid #C9A961;
}
.stg-thumbs { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 9px; }
.stg-thumb {
    position: relative; width: 62px; height: 62px; border-radius: 10px; overflow: hidden;
    background: #ECEAE3; border: 1px solid var(--border); display: block;
}
.stg-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.stg-thumb .x {
    position: absolute; top: 2px; left: 2px;
    width: 20px; height: 20px; border-radius: 50%; border: 0;
    background: rgba(16, 24, 40, .72); color: #fff;
    font-size: 11px; font-weight: var(--fw-bold); cursor: pointer;
    display: grid; place-items: center;
}

/* شواهدي */
.stg-log {
    padding: 11px 13px; margin-bottom: 9px; border-radius: 13px;
    background: var(--surface); border: 1.5px solid var(--border);
}
.stg-log-h { display: flex; align-items: center; gap: 8px; }
.stg-log-h b { flex: 1; font-size: 13px; font-weight: var(--fw-bold); color: var(--ink-primary); }
.stg-log-h .x {
    border: 0; background: none; font-size: 15px; cursor: pointer; padding: 2px 4px;
}
.stg-log-n { margin: 5px 0 0; font-size: 12px; line-height: 1.8; color: var(--text-muted); font-weight: var(--fw-bold); }

/* ---------- ملف الإنجاز · استراتيجيات التدريس (مبنيّ من الشواهد) ---------- */
.pstg-sum {
    margin: 0 0 12px; padding: 10px 12px; border-radius: 12px;
    font-size: 12.5px; color: var(--ink-2, #4A4438); text-align: center;
    background: linear-gradient(150deg, #fff 0%,
                color-mix(in srgb, var(--beige) 42%, var(--mix-base)) 50%, #ECEAE3 100%);
    border: 1.5px solid color-mix(in srgb, var(--beige) 85%, #000);
    box-shadow: inset 0 1.5px 0 var(--sheen), 0 3px 8px rgba(16, 24, 40, .09);
}
/* حبرُ العدد يتبع المظهر لا يُثبَّت: سطحُ `.pstg-sum` يقلبه الداكن. */
.pstg-sum b { color: var(--ink-primary); font-weight: var(--fw-bold); }
.pstg-list { display: flex; flex-direction: column; gap: 10px; }
.pstg-card {
    padding: 12px 13px; border-radius: 14px; background: #fff;
    border: 1.5px solid color-mix(in srgb, var(--beige) 85%, #000);
    box-shadow: 0 2px 7px rgba(16, 24, 40, .06);
}
.pstg-head { display: flex; align-items: center; gap: 8px; }
.pstg-head h4 {
    margin: 0; flex: 1; font-size: 13.5px; font-weight: var(--fw-bold); color: var(--ink-fixed);
}
.pstg-times {
    flex: none; padding: 3px 9px; border-radius: 999px;
    font-size: 10.5px; font-weight: var(--fw-bold); color: #8A6D1F;
    background: color-mix(in srgb, #C9A961 16%, var(--mix-base));
    border: 1px solid color-mix(in srgb, #C9A961 42%, var(--mix-base));
}
.pstg-meta {
    display: flex; flex-wrap: wrap; gap: 5px 12px; margin-top: 7px;
    font-size: 11px; color: #6B6455;
}
.pstg-notes { margin: 9px 0 0; padding: 0; list-style: none; }
.pstg-notes li {
    font-size: 11.5px; line-height: 1.9; color: #4A4438;
    padding-right: 10px; border-right: 2px solid color-mix(in srgb, #C9A961 45%, var(--mix-base));
    margin-bottom: 4px;
}
.pstg-notes li span { color: #9A9384; font-size: 10.5px; margin-left: 5px; }
.pstg-notes li.more { border-right-color: transparent; color: #9A9384; }
.pstg-thumbs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.pstg-thumbs img {
    width: 56px; height: 56px; object-fit: cover; border-radius: 9px;
    border: 1px solid var(--border, #ECEAE3); background: #ECEAE3;
}

/* ---------- شريط تقدّم تجهيز ملف PDF ---------- */
.pf-prog { margin-top: 14px; }
.pf-prog-txt {
    font-size: 12px; font-weight: var(--fw-bold); color: var(--ink-fixed);
    text-align: center; margin-bottom: 7px;
}
.pf-prog-track {
    height: 7px; border-radius: 999px; overflow: hidden;
    background: color-mix(in srgb, var(--beige) 70%, var(--mix-base));
    border: 1px solid color-mix(in srgb, var(--beige) 85%, #000);
}
.pf-prog-fill {
    height: 100%; width: 0%; border-radius: 999px;
    background: linear-gradient(90deg, #C9A961, #B8963F);
    transition: width .25s ease;
}


/* ==========================================================================
   الرسالة والرؤية — بطاقات تُقرأ لا صناديق تُملأ
   ========================================================================== */
.mv-hint {
    margin: 0 0 var(--space-3); font-size: 11.5px; line-height: 1.8;
    color: var(--text-muted);
}
.mvc { display: flex; flex-direction: column; gap: 9px; }
.mvc-card {
    display: block; width: 100%; text-align: right; cursor: pointer;
    font-family: inherit; padding: 13px 14px; border-radius: 14px;
    background: #fff; border: 1.5px solid var(--border);
    box-shadow: 0 2px 6px rgba(16, 24, 40, .05);
}
.mvc-card:active { transform: scale(.995); }
/* الفارغة بإطار متقطّع: تقول «هنا مكان شاغر» بلا نصّ إضافي. */
.mvc-card.is-empty {
    border-style: dashed;
    background: color-mix(in srgb, var(--beige) 22%, var(--mix-base));
}
.mvc-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.mvc-lbl { flex: 1; font-size: 12.5px; font-weight: var(--fw-bold); color: var(--ink-primary); }
.mvc-edit { font-size: 11.5px; font-weight: var(--fw-bold); color: var(--primary); }
.mvc-tx { display: block; font-size: 13.5px; line-height: 1.95; color: var(--text); }
.mvc-empty { display: block; font-size: 12.5px; line-height: 1.9; color: var(--text-muted); }
.mvc-goals {
    margin: 0; padding: 0; list-style: none;
    display: flex; flex-direction: column; gap: 5px;
}
.mvc-goals li {
    position: relative; padding-inline-start: 14px;
    font-size: 13px; line-height: 1.9; color: var(--text);
}
.mvc-goals li::before {
    content: ""; position: absolute; inset-inline-start: 0; top: .78em;
    width: 5px; height: 5px; border-radius: 50%; background: var(--primary);
}

/* لوحة الحقل الواحد */
.mvs-tabs { display: flex; gap: 6px; margin-bottom: var(--space-3); }
.mvs-tab {
    flex: 1; min-height: 38px; border-radius: 11px; cursor: pointer;
    font-family: inherit; font-size: 13px; font-weight: var(--fw-bold);
    color: var(--ink-primary);
    background: linear-gradient(150deg, #fff 0%, color-mix(in srgb, var(--beige) 42%, var(--mix-base)) 50%, #ECEAE3 100%);
    border: 1.5px solid color-mix(in srgb, var(--beige) 85%, #000);
}
.mvs-tab.on {
    color: #fff;
    background: linear-gradient(150deg, var(--primary-lift) 0%, var(--primary) 55%, var(--primary-deep) 100%);
    border-color: color-mix(in srgb, var(--primary) 78%, #000);
}
.mv-own { width: 100%; margin-bottom: var(--space-3); }
.mv-note { margin: 0 0 var(--space-3); font-size: 11.5px; color: var(--text-muted); }
.mv-list { display: flex; flex-direction: column; gap: 8px; }
.mv-item {
    display: block; width: 100%; text-align: right; cursor: pointer;
    font-family: inherit; padding: 11px 13px; border-radius: 12px;
    background: #fff; border: 1.5px solid var(--border);
}
/* المختارةُ تبقى بيضاءَ كأختِها ولا تُصبغ — بطلب المعلّم (٢٢ أغسطس
   ٢٠٢٦: «أبيها تكون بيضا»). فالاختيارُ يقوله الإطارُ لا الأرضيّة:
   حلقةٌ داخليّةٌ تُثخّنه بلا أن تُزيح النصَّ بكسرِ بكسل، ومعها يتلوّن
   سطرُ المحور بلون الهُويّة — علامتان لا واحدة، فلا يلتبس المختارُ
   بغيره وإن تشابهت الأرضيّتان. */
.mv-item.on {
    background: #fff;
    border-color: var(--primary);
    box-shadow: inset 0 0 0 1px var(--primary);
}
.mv-item .ax {
    display: block; font-size: 10.5px; font-weight: var(--fw-bold);
    color: var(--pf-gray); margin-bottom: 3px;
}
.mv-item.on .ax { color: var(--primary); }
/* والمِثل: بطاقةُ الصياغة أرضيّتها `#fff` صريحةٌ في المظهرين. */
.mv-item .tx { display: block; font-size: 13px; line-height: 1.85; color: #2C2C2A; }

/* ==========================================================================
   محرّر الأسئلة (question-editor.js) — التصميم ب.

   الأسئلة تحت عناوين «السؤال الأول: …» كما ستُطبع، فما يبنيه المعلّم هو
   ما يراه على الورق. ولذلك سقط اختيار النوع من كل سؤال: القسم يحدّده.
   ========================================================================== */

/* ---------- رأس الورقة ---------- */
.qe-head {
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: 16px;
    padding: 13px 14px;
    margin-bottom: 12px;
    box-shadow: 0 2px 6px rgba(16, 24, 40, .05);
}
.qe-lbl {
    font-size: 11.5px; font-weight: var(--fw-bold);
    color: var(--text-muted); margin-bottom: 5px;
}
.qe-title {
    width: 100%; border: 0; padding: 0; font-family: inherit;
    font-size: 16px; font-weight: var(--fw-bold); color: var(--ink-primary);
    background: transparent; outline: none;
}
.qe-chips {
    display: flex; gap: 8px; margin-top: 11px;
    padding-top: 10px; border-top: 1px solid var(--border);
}
.qe-chip {
    font-size: 11.5px; font-weight: var(--fw-bold); color: var(--ink-primary);
    background: color-mix(in srgb, var(--beige) 45%, var(--surface));
    border: 1px solid var(--border); border-radius: 20px; padding: 4px 11px;
}
.qe-chip.gold { color: #7A6224; background: #F7F1E1; border-color: #E2D3AC; }

/* ---------- الأقسام ---------- */
.qe-secs { display: flex; flex-direction: column; gap: 14px; }
.qe-sec {
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: 16px; overflow: hidden;
    box-shadow: 0 2px 6px rgba(16, 24, 40, .05);
}
.qe-sec-head {
    display: flex; align-items: flex-start; gap: 8px;
    padding: 11px 13px; background: var(--primary); color: #fff;
}
.qe-sec-head .tx { flex: 1; min-width: 0; }
/* الترويسةُ كما تُطبع، وتحتها اسمُ النوع وعددُ فقراته: المعلّم يقرأ
   الأولى ليتأكّد من الورق، والثانية ليعرف أين هو من الورقة. */
.qe-sec-head .tx b {
    display: block; font-size: 12.5px; font-weight: var(--fw-bold); line-height: 1.6;
}
.qe-sec-head .tx span {
    display: block; font-size: 11px; font-weight: 500; opacity: .82; margin-top: 1px;
}
.qe-sec-head .g { flex: none; font-size: 11px; font-weight: var(--fw-bold); color: #E8D9A8; }
.qe-sec-del {
    flex: none; border: 0; background: transparent; color: #fff; opacity: .8;
    font-size: 14px; line-height: 1; padding: 3px 4px; cursor: pointer;
    position: relative;
}
/* مساحةُ لمسٍ ٤٤ حول أيقونةٍ صغيرة، بلا تكبيرها في الترويسة. */
.qe-sec-del::after { content: ""; position: absolute; inset: -12px -10px; }

.qe-items { padding: 11px 12px; display: flex; flex-direction: column; gap: 12px; }
.qe-item { display: flex; gap: 9px; align-items: flex-start; }
.qe-n {
    width: 24px; height: 24px; border-radius: 50%; flex: none; margin-top: 6px;
    background: color-mix(in srgb, var(--beige) 55%, var(--surface));
    color: var(--ink-primary); border: 1.5px solid var(--border);
    font-size: 11.5px; font-weight: var(--fw-bold);
    display: grid; place-items: center;
}
.qe-body { flex: 1; min-width: 0; }

/* ---------- الحقول ---------- */
.qe-ta, .qe-in {
    width: 100%; font-family: inherit; font-size: 13.5px; line-height: 1.85;
    color: var(--text); background: var(--surface);
    border: 1.5px solid var(--border); border-radius: 11px;
    padding: 9px 11px; outline: none;
}
.qe-ta { resize: vertical; }
.qe-ta:focus, .qe-in:focus, .qe-pts:focus { border-color: var(--primary); }

/* الحرف وخيارُه زوجٌ لا ينفصل عند نهاية السطر — شبكةٌ لا التفاف. */
.qe-mini {
    display: grid; grid-template-columns: auto 1fr auto 1fr;
    gap: 6px; margin-top: 7px; align-items: center;
}
.qe-mini.one { grid-template-columns: 1fr; }
.qe-mini .qe-in { font-size: 12.5px; padding: 6px 9px; }
.qe-lt {
    width: 26px; height: 26px; flex: none; border-radius: 50%; cursor: pointer;
    font-family: inherit; font-size: 11.5px; font-weight: var(--fw-bold);
    color: var(--text-muted); background: var(--surface);
    border: 1.5px solid var(--border); display: grid; place-items: center;
}
.qe-lt.on { color: #fff; background: #C9A961; border-color: #B8963F; }

/* المطابقة: طرفان موسومان — والوسمُ يبقى بعد الكتابة، بخلاف النائب. */
.qe-pair {
    display: grid; grid-template-columns: auto 1fr;
    gap: 7px; align-items: center;
}
.qe-pair + .qe-pair { margin-top: 6px; }
.qe-tag {
    width: 26px; height: 26px; flex: none; border-radius: 50%;
    font-size: 11.5px; font-weight: var(--fw-bold);
    color: var(--text-muted); background: var(--surface);
    border: 1.5px solid var(--border); display: grid; place-items: center;
}

.qe-tf { display: flex; gap: 6px; margin-top: 7px; }
.qe-tf button {
    flex: 1; min-height: 36px; border-radius: 10px; cursor: pointer;
    font-family: inherit; font-size: 12px; font-weight: var(--fw-bold);
    color: var(--ink-primary);
    background: color-mix(in srgb, var(--beige) 35%, var(--surface));
    border: 1.5px solid var(--border);
}
.qe-tf button.on { color: #fff; background: var(--primary); border-color: var(--primary); }

/* ---------- أدوات السؤال ---------- */
.qe-tools {
    display: flex; align-items: center; gap: 7px;
    margin-top: 8px; justify-content: flex-end;
}
.qe-pts-l { font-size: 11px; font-weight: var(--fw-bold); color: var(--text-muted); }
.qe-pts {
    width: 58px; text-align: center; font-family: inherit;
    font-size: 12.5px; font-weight: var(--fw-bold); color: var(--ink-primary);
    background: var(--surface); border: 1.5px solid var(--border);
    border-radius: 10px; padding: 5px 4px; outline: none;
}
.qe-del, .qe-tools .btn {
    width: 32px; height: 32px; flex: none; border-radius: 10px; cursor: pointer;
    background: var(--surface); border: 1.5px solid var(--border);
    font-size: 13px; line-height: 1; padding: 0;
}
.qe-del { display: grid; place-items: center; color: var(--text-muted); }
.qe-sec-del svg, .qe-del svg { display: block; }

/* ---------- الإضافة: «+ فقرة» داخل القسم ---------- */
.qe-add-in {
    display: block; width: calc(100% - 24px); margin: 0 12px 12px;
    min-height: 40px; border-radius: 11px; cursor: pointer; font-family: inherit;
    font-size: 12px; font-weight: var(--fw-bold); color: var(--ink-primary);
    background: color-mix(in srgb, var(--beige) 35%, var(--surface));
    border: 1.5px dashed var(--border-strong);
}

/* ══ شريطُ الأفعال — ثابتٌ أسفل الشاشة بتلاشٍ ══
   كنمط `.ws-addbar`: الورقةُ تطول بالفقرات، ولو مضى الشريطُ مع التمرير
   لاحتاج المعلّمُ أن ينزل إلى آخرها ليضيف سؤالاً أو يحفظ. والتدرّجُ تحته
   يُذيب ما يمرّ فلا يبدو جداراً. و‎74px‎ ارتفاعُ شريط التنقّل العائم. */
.qe-dock {
    position: sticky;
    bottom: calc(var(--safe-bottom) + 74px);
    z-index: 6;
    margin-top: var(--space-5);
    padding: 18px 0 4px;
    background: linear-gradient(to top,
        var(--surface) 0%, var(--surface) 66%, transparent 100%);
}
.qe-dock .wizard-footer {
    margin-top: 9px; padding-top: 0; border-top: 0;
    flex-direction: row; flex-wrap: nowrap;
}
/* «حفظ» و«حفظ وطباعة» صفٌّ واحدٌ حتى على الجوال: الشريطُ ثابتٌ، وثلاثةُ
   أزرارٍ مصفوفةً طولاً تأكل ثلثَ الشاشة. */
.qe-dock .wizard-footer .btn { flex: 1 1 0; width: auto; min-height: 48px; }
.qe-addsec {
    display: block; width: 100%; min-height: 52px; border: 0; border-radius: 15px;
    cursor: pointer; font-family: inherit; font-size: 15px;
    font-weight: var(--fw-bold); color: #fff; background: var(--primary);
    box-shadow: 0 5px 15px color-mix(in srgb, var(--primary) 30%, transparent);
}
/* ══ والشريطُ في القاع حتى لو خلت الورقة ══
   اللصوقُ لا يعمل إلا حين يفيض المحتوى، والمحرّرُ يُفتح فارغاً في الغالب
   — فكان الشريطُ يقع في منتصف الشاشة أوّلَ ما يُضغط «اختبار جديد».
   (بلاغُ المعلّم، ٢٢ أغسطس ٢٠٢٦.)

   فتُعامَل لوحتُه معاملةَ الحالة الفارغة بالقياسات نفسِها ‎(175‎ و‎28)‎،
   فيقع الشريطُ حيث يقع «+ اختبار جديد» تماماً. و`margin-top: auto` هو
   الذي يدفعه إلى القاع، فإذا طال المحتوى انعدم وعاد اللصوقُ يعمل.

   وأبناءُ العمود `flex: 0 0 auto` صراحةً: الانكماشُ الافتراضيّ في
   العمود المرن كان يضغط بطاقاتِ الأسئلة حين يفيض. */
#tab-panel.has-qe-dock { padding-bottom: calc(var(--safe-bottom) + 28px); }
@media (max-width: 767px) {
    #tab-panel.has-qe-dock { min-height: calc(100dvh - 175px); }
    #tab-panel.has-qe-dock,
    #tab-panel.has-qe-dock > .wizard,
    #tab-panel.has-qe-dock #wiz-body { display: flex; flex-direction: column; }
    #tab-panel.has-qe-dock > .wizard,
    #tab-panel.has-qe-dock #wiz-body { flex: 1 0 auto; }
    /* و`.wizard` تتنازل عن حاشيتها السفلى: تقع تحت الشريط فتزيحه عن
       القاع ‎34px‎، فلا يحاذي «+ اختبار جديد» في القائمة. */
    #tab-panel.has-qe-dock > .wizard { padding-bottom: 0; }
    #tab-panel.has-qe-dock > .wizard > *,
    #tab-panel.has-qe-dock #wiz-body > * { flex: 0 0 auto; }
    .qe-dock { margin-top: auto; }
}
@media (min-width: 768px) {
    .qe-dock { position: static; background: none; padding: 0; }
    #tab-panel.has-qe-dock { padding-bottom: var(--space-10); }
}

/* ══ ورقةُ الأنواع ══
   زرٌّ واحدٌ يفتحها بدل صفٍّ من خمسة أزرارٍ مبثوثةٍ في الصفحة — وهو ما
   شكا منه المعلّم: «معلومات كثيرة». */
/* ‎900‎ لا ‎60‎: شريطُ التنقّل ‎70‎ فكان يرسم فوق آخر نوعين فلا يُضغطان.
   (بلاغُ المعلّم، ٢٢ أغسطس ٢٠٢٦.) و‎900‎ هو نطاقُ النوافذ في التطبيق —
   `.modal-root` نفسُه — فالورقةُ نافذةٌ تحجب ما تحتها لا لوحةٌ تزاحمه. */
/* لوحةُ الأنواع في متن الصفحة — لا ورقةً منبثقةً فوقها. المنبثقةُ كانت
   طبقةً ثالثةً بين المعلّم وورقته، وهنا الأنواعُ في مكان القسم الذي
   ستفتحه — فالنظرُ لا ينتقل والإصبعُ لا يعود. */
.qe-panel { margin-top: 14px; }

.qe-panel .h {
    font-size: 12px; font-weight: var(--fw-bold);
    color: var(--text-muted); margin: 2px 4px 10px;
}

.qe-panel button {
    display: block; width: 100%; text-align: start; cursor: pointer;
    font-family: inherit; padding: 12px 14px; margin-bottom: 8px;
    border-radius: 13px; border: 1.5px solid var(--border);
    background: var(--surface);
}

.qe-panel button b {
    display: block; font-size: 14.5px; font-weight: var(--fw-bold);
    color: var(--ink-primary);
}

.qe-panel button small {
    display: block; font-size: 11.5px; font-weight: 500;
    line-height: 1.75; color: var(--text-muted); margin-top: 2px;
}

.qe-panel button.used { border-style: dashed; }

/* القسمُ المطويّ: رأسُه وحدَه، وهو بترولـيٌّ أصلاً — فالطيُّ إخفاءُ جسده
   لا صبغُ رأسه، شكلٌ يعرفه المعلّم لا سادسٌ يتعلّمه. والسهمُ يقول إنّه
   يُفتح، وكلُّ الشريط مساحةُ لمس. */
.qe-fold { cursor: pointer; }

.qe-fold .qe-sec-head::before {
    content: "▾"; align-self: center; font-size: 12px;
    opacity: .8; margin-inline-end: 2px;
}

/* «تم» يُنهي القسم المفتوح فيُطوى. بلون الزرّ الأساسي: هو الفعلُ الذي
   يُنتظر منه في هذه اللحظة، لا خياراً بين خيارات. */
.qe-done {
    display: block; width: 100%; min-height: 52px; border: 0;
    border-radius: 15px; cursor: pointer; font-family: inherit;
    font-size: 15px; font-weight: var(--fw-bold); color: #fff;
    background: var(--primary); margin-top: var(--space-4);
    box-shadow: 0 5px 15px color-mix(in srgb, var(--primary) 30%, transparent);
}

/* ══ طيُّ التعليمات ══
   حقلٌ يستعمله المعلّمُ أحياناً، فلا يشغل الشاشةَ دائماً. */
/* الطيّاتُ صفٌّ واحدٌ يلتفّ عند الضيق، لا سطرٌ لكلِّ واحدة. */
.qe-folds { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }
.qe-folds .qe-instfold { margin-top: 0; }
.qe-instfold {
    display: inline-block; cursor: pointer; font-family: inherit;
    margin-top: var(--space-4); padding: 9px 14px;
    font-size: 13px; font-weight: var(--fw-bold); color: var(--text-muted);
    background: transparent; border: 1.5px dashed var(--border-strong);
    border-radius: 12px;
}
/* ==========================================================================
   قارئ الكتب (book-reader.js) — التصميم ج.

   يملأ الشاشة كلّها: الكتاب يُقرأ لا يُطالَع في نافذة. والورق على خلفية
   داكنة كما في القرّاء المعروفين — أرحم للعين في الإضاءة المنخفضة، وأوضح
   لحدود الصفحة.
   ========================================================================== */
body.br-open { overflow: hidden; }          /* لا تمرير خلف القارئ */

.br-root {
    position: fixed; inset: 0; z-index: 950;
    background: #2C2C2A;
    display: flex; flex-direction: column;
    overscroll-behavior: contain;
}

.br-top {
    flex: none; display: flex; align-items: center; gap: 10px;
    padding: calc(9px + env(safe-area-inset-top)) 12px 9px;
    color: #fff; background: var(--primary);
}
.br-nm {
    flex: 1; min-width: 0; font-size: 13px; font-weight: var(--fw-bold);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.br-x, .br-go {
    flex: none; min-height: 34px; border-radius: 10px; cursor: pointer;
    font-family: inherit; font-weight: var(--fw-bold); color: #fff;
    background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.24);
}
.br-x  { width: 34px; font-size: 14px; padding: 0; }
.br-go { padding: 0 12px; font-size: 11.5px; }

.br-scroll {
    /* position يجعل الصفحات تُقاس من منطقة التمرير لا من جذر القارئ:
       بدونه يحمل offsetTop ارتفاعَ الشريط العلوي، فيقفز «اذهب إلى صفحة»
       أبعد من هدفه بمقداره، ويخطئ تمييزُ الصفحة الحالية. */
    position: relative;
    flex: 1; min-height: 0; padding: 12px 10px;
    overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.br-pg {
    display: block; margin: 0 auto 12px; max-width: 100%;
    background: #fff; box-shadow: 0 4px 16px rgba(0,0,0,.45);
}

.br-thumbs {
    flex: none; display: flex; gap: 8px; overflow-x: auto;
    padding: 9px 12px calc(9px + env(safe-area-inset-bottom));
    background: var(--primary);
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.br-thumbs::-webkit-scrollbar { display: none; }
.br-th {
    flex: none; width: 46px; padding: 0; border: 0; cursor: pointer;
    background: none; text-align: center; font-family: inherit;
}
.br-th canvas {
    width: 46px; display: block; background: #fff; border-radius: 4px;
    border: 2px solid transparent; box-shadow: 0 2px 6px rgba(0,0,0,.35);
}
.br-th.on canvas { border-color: #C9A961; }
.br-th .n { display: block; font-size: 9.5px; color: rgba(255,255,255,.7); margin-top: 3px; }
.br-th.on .n { color: #C9A961; font-weight: var(--fw-bold); }

.br-msg {
    position: absolute; inset: 0; z-index: 3;
    display: grid; place-items: center; text-align: center;
    background: #2C2C2A; color: #fff; font-size: 13px; line-height: 2; padding: 24px;
}
.br-retry {
    display: block; margin: 16px auto 0; min-height: 44px; padding: 0 20px;
    border-radius: 12px; cursor: pointer; font-family: inherit;
    /* أرضيّةٌ بيجٌ مثبَّتةٌ في المظهرين، فحبرُها صريح. */
    font-size: 13px; font-weight: var(--fw-bold); color: var(--ink-fixed);
    background: #ECEAE3; border: 1.5px solid #D8D5CC;
}

/* لوحة «اذهب إلى صفحة» */
.br-jump {
    position: absolute; inset: 0; z-index: 4; display: none;
    place-items: center; padding: 20px; background: rgba(0,0,0,.55);
}
.br-jump.open { display: grid; }
.br-jump-box {
    width: 100%; max-width: 300px; padding: 16px; text-align: center;
    background: var(--surface); border-radius: 16px;
}
.br-jump-box h4 { margin: 0 0 12px; font-size: 14px; color: var(--ink-primary); }
.br-jump-box input {
    width: 100%; font-family: inherit; font-size: 18px; font-weight: var(--fw-bold);
    text-align: center; color: var(--ink-primary); padding: 10px; outline: none;
    background: var(--surface); border: 1.5px solid var(--border); border-radius: 11px;
}
.br-jump-row { display: flex; gap: 8px; margin-top: 12px; }
.br-jump-row button {
    flex: 1; min-height: 44px; border-radius: 11px; cursor: pointer;
    font-family: inherit; font-size: 13px; font-weight: var(--fw-bold);
}
.br-jump-row .go { color: #fff; background: var(--primary); border: 1.5px solid var(--primary-deep); }
.br-jump-row .no { color: var(--ink-fixed); background: #ECEAE3; border: 1.5px solid #D8D5CC; }

/* ══ صفُّ رفع أسماء الطلاب ══
   بموادّ بطاقات التطبيق نفسِها — نفسُ تدرّج صفوف الفصول و«إنجاز» وزرِّ
   استيراد الجدول — فيدخل الشكلُ الجديد بلا أن يُشعر أنه غريب.
   ورمزُه يصير «✓» حين يُختار ملفٌّ فيقول حالَه بلا كلمات. */
.stu-up {
    display: flex; align-items: center; gap: 11px;
    width: 100%; margin-top: var(--space-4);
    padding: 13px 14px; border-radius: 14px;
    cursor: pointer; font-family: inherit; text-align: right;
    background: linear-gradient(150deg, #fff 0%, color-mix(in srgb, var(--beige) 42%, var(--mix-base)) 50%, #ECEAE3 100%);
    border: 1.5px solid color-mix(in srgb, var(--beige) 85%, #000);
    box-shadow: inset 0 1.5px 0 var(--sheen), 0 3px 8px rgba(16, 24, 40, .09);
}
.stu-up:active { transform: scale(.99); }
.stu-up .ic {
    width: 38px; height: 38px; flex: none; border-radius: 11px;
    display: grid; place-items: center; font-size: 17px;
    background: var(--surface); border: 1px solid var(--border);
}
.stu-up .tx { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.stu-up .t {
    font-size: 13.5px; font-weight: var(--fw-bold); color: var(--ink-primary);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.stu-up .s { font-size: 11px; font-weight: var(--fw-bold); color: var(--text-muted); margin-top: 1px; }
.stu-up .chev { color: var(--text-muted); font-size: 16px; font-weight: var(--fw-bold); transform: scaleX(-1); }

/* ---------- استيراد الجدول من صورة ---------- */
.sched-import {
    display: block; width: 100%; margin: var(--space-4) 0 var(--space-2);
    min-height: 46px; border-radius: 13px; cursor: pointer; font-family: inherit;
    font-size: 13.5px; font-weight: var(--fw-bold); color: var(--ink-primary);
    background: linear-gradient(150deg, #fff 0%, color-mix(in srgb, var(--beige) 42%, var(--mix-base)) 50%, #ECEAE3 100%);
    border: 1.5px solid color-mix(in srgb, var(--beige) 85%, #000);
    box-shadow: inset 0 1.5px 0 var(--sheen), 0 3px 8px rgba(16, 24, 40, .09);
}
.imp-box { margin-top: var(--space-4); }
.imp-sum {
    font-size: 12.5px; line-height: 2; color: var(--text);
    background: color-mix(in srgb, var(--beige) 30%, var(--surface));
    border: 1.5px solid var(--border); border-radius: 12px;
    padding: 10px 12px; margin-bottom: 10px;
}
.imp-sum b { color: var(--ink-primary); display: block; }
.imp-sum span { display: block; font-size: 11.5px; }
.imp-skip { color: var(--text-muted); }
.imp-warn { color: #A3651B; font-weight: var(--fw-bold); }

/* ==========================================================================
   بطاقة التقويم الدراسي (calendar-card.js) — أسفل الجدول الأسبوعي.

   مطويّة كبطاقة التذكيرات، وتنفتح على الفصل كلّه في شاشةٍ واحدة.
   البادئة ac- تخصّها وحدها فلا تصطدم بشيء.
   ========================================================================== */
/* حاوية البطاقة: خارج ‎.sched-v2‎ لأنه يملأ الشاشة بـoverflow:hidden
   فيقصّ كلّ ما بعد الشبكة. */
.ac-wrap { padding-bottom: var(--space-8); }

.ac-card {
    display: block; margin-top: var(--space-4);
    background: var(--surface); border: 1.5px solid var(--border);
    border-radius: 18px; overflow: hidden;
    box-shadow: 0 2px 6px rgba(16, 24, 40, .05);
}
.ac-card.open { border-color: var(--primary); box-shadow: 0 6px 20px color-mix(in srgb, var(--primary) 16%, transparent); }

.ac-top {
    display: flex; align-items: center; gap: 11px; width: 100%;
    padding: 13px 14px; background: none; border: 0; cursor: pointer;
    font-family: inherit; text-align: right;
}
.ac-ic {
    width: 34px; height: 34px; flex: none; border-radius: 10px;
    background: color-mix(in srgb, var(--beige) 55%, var(--surface));
    border: 1.5px solid var(--border);
    display: grid; place-items: center; font-size: 15px;
}
.ac-card.open .ac-ic { background: #F7F1E1; border-color: #E2D3AC; }
.ac-tx { flex: 1; min-width: 0; }
.ac-tx .nm { display: block; font-size: 13.5px; font-weight: var(--fw-bold); color: var(--ink-primary); }
.ac-tx .sub { display: block; font-size: 11.5px; color: var(--text-muted); margin-top: 2px; }
.ac-tx .sub b { color: var(--gold-ink); font-weight: var(--fw-bold); }

/* السهم مرسومٌ بحدود لا بحرف: الحروف المرآتية تنقلب مع الاتجاه.
   والحدود ماديّة لا منطقية، ليشير إلى أسفل في الاتجاهين معاً. */
.ac-chev {
    width: 8px; height: 8px; flex: none; margin-inline-start: 2px;
    border-right: 2px solid var(--text-muted);
    border-bottom: 2px solid var(--text-muted);
    transform: rotate(45deg); transition: transform var(--dur-base, .2s) ease;
}
.ac-card.open .ac-chev { transform: rotate(225deg); }

/* الجسم موجودٌ دائماً ويُطوى بالارتفاع: انتقالٌ يديره المتصفّح، فينكمش
   طول الصفحة تدريجياً وتتبعه الشاشة بلا قفزة. وإخفاؤه بـdisplay:none
   كان يجعل الطيّ لحظياً فيشدّ التمرير دفعةً واحدة. */
/* الفتح فوريّ والطيّ منسابٌ — والانتقال يخصّ الحالة المقصودة لا
   العنصر، فوضعُه في القاعدة المطويّة وحدها يعطي الاتجاهين ما يناسبهما:

   • الفتح فوريّ لأن التمرير يليه مباشرة. لو تمدّدت البطاقة تدريجياً
     لبدأ التمرير والصفحة ما زالت قصيرة، فيُقصّ مساره ثم يطول الطول
     تحته — وهو التعثّر الذي رآه المعلّم.
   • الطيّ منسابٌ لأن لا شيء يليه: ينكمش الطول تدريجياً وتتبعه الشاشة
     بلا قفزة.

   وvisibility مؤجَّلة حتى نهاية الانتقال، فلا تبقى أزرارٌ مخفيّة في
   مسار لوحة المفاتيح وقارئ الشاشة. */
.ac-body {
    max-height: 0; opacity: 0; overflow: hidden; visibility: hidden;
    transition: max-height .30s cubic-bezier(.4, 0, .2, 1),
                opacity .20s ease,
                visibility 0s linear .30s;
}
.ac-card.open .ac-body {
    max-height: 1400px; opacity: 1; visibility: visible;
    transition: none;
}
@media (prefers-reduced-motion: reduce) {
    /* بلا تأجيلٍ لvisibility أيضاً، وإلّا بقي الجسم مرئياً بعد الطيّ. */
    .ac-body { transition: visibility 0s; }
}

.ac-badges { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 13px 2px; }
.ac-which {
    display: inline-flex; align-items: center; gap: 5px;
    font-family: inherit; font-size: 10px; font-weight: var(--fw-bold);
    color: #7A6224; background: #F7F1E1; border: 1px solid #E2D3AC;
    border-radius: 20px; padding: 3px 10px; cursor: pointer;
}
.ac-which::after { content: '⇄'; font-size: 11px; opacity: .75; }
.ac-which.manual { border-style: dashed; }

/* ---------- لوحة تبديل التقويم ---------- */
.ac-swap { padding: 8px 13px 4px; display: flex; flex-direction: column; gap: 6px; }
.ac-swap .hint { font-size: 10.5px; color: var(--text-muted); line-height: 1.7; }
.ac-swap button {
    display: flex; align-items: center; gap: 8px; width: 100%; text-align: right;
    padding: 9px 11px; border-radius: 11px; cursor: pointer; font-family: inherit;
    background: var(--surface); border: 1.5px solid var(--border);
}
.ac-swap button.on { border-color: #C9A961; background: color-mix(in srgb, #C9A961 12%, var(--surface)); }
.ac-swap .tick {
    width: 17px; height: 17px; flex: none; border-radius: 50%;
    border: 2px solid var(--border); display: grid; place-items: center;
    font-size: 9px; color: #fff;
}
.ac-swap button.on .tick { background: #B8963F; border-color: #B8963F; }
.ac-swap .lb { flex: 1; min-width: 0; }
.ac-swap .lb b { display: block; font-size: 12px; font-weight: var(--fw-bold); color: var(--ink-primary); }
.ac-swap .lb span { display: block; font-size: 9.5px; color: var(--text-muted); margin-top: 1px; }

/* ---------- الشريط الكحليّ ---------- */
.ac-band {
    position: relative; overflow: hidden;
    display: flex; align-items: center; gap: 11px;
    padding: 11px 13px; margin-top: 9px; color: #fff;
    background: linear-gradient(155deg, var(--primary-lift) 0%, var(--primary) 60%, var(--primary-deep) 100%);
}
.ac-band::after {
    content: ''; position: absolute; inset-inline-end: -26px; top: -34px;
    width: 130px; height: 130px; border-radius: 50%;
    background: radial-gradient(circle, rgba(201,169,97,.30) 0%, transparent 68%);
}
.ac-arc { width: 54px; height: 54px; flex: none; position: relative; z-index: 1; }
.ac-arc svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ac-arc .mid {
    position: absolute; inset: 0; display: grid; place-items: center;
    font-size: 16px; font-weight: var(--fw-bold);
}
.ac-band-tx { flex: 1; min-width: 0; position: relative; z-index: 1; }
.ac-band-tx .ord { display: block; font-size: 14px; font-weight: var(--fw-bold); line-height: 1.35; }
.ac-band-tx .sub { display: block; font-size: 10.5px; opacity: .78; }
.ac-cd {
    flex: none; position: relative; z-index: 1; text-align: center;
    background: rgba(255,255,255,.10); border: 1px solid rgba(201,169,97,.45);
    border-radius: 11px; padding: 6px 10px; min-width: 66px;
}
.ac-cd b { display: block; font-size: 17px; font-weight: var(--fw-bold); color: #E2C983; line-height: 1.1; }
.ac-cd > span { display: block; font-size: 8.5px; opacity: .85; line-height: 1.4; margin-top: 1px; }

/* ---------- شريط الفصول ---------- */
.ac-terms { display: flex; gap: 5px; padding: 11px 13px 0; }
.ac-terms button {
    flex: 1; padding: 6px 3px; border-radius: 10px; cursor: pointer;
    font-family: inherit; font-size: 11px; font-weight: var(--fw-bold); line-height: 1.25;
    color: var(--ink-primary); background: color-mix(in srgb, var(--beige) 35%, var(--surface));
    border: 1.5px solid var(--border);
}
.ac-terms button.on { color: #fff; background: var(--primary); border-color: var(--primary); }
.ac-terms button small { display: block; font-size: 8.5px; font-weight: 500; opacity: .7; }

/* ---------- شبكة الأسابيع ---------- */
.ac-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; padding: 11px 13px 0; }
.ac-cell {
    aspect-ratio: 1 / 1.12; border-radius: 10px; cursor: pointer; padding: 0;
    font-family: inherit; border: 1.5px solid var(--border);
    background: color-mix(in srgb, var(--beige) 22%, var(--surface));
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
}
.ac-cell .n { font-size: 12px; font-weight: var(--fw-bold); color: var(--ink-primary); line-height: 1; }
.ac-cell .dd { display: flex; gap: 1.5px; align-items: center; }
.ac-cell .dd i {
    width: 3.5px; height: 3.5px; border-radius: 50%;
    background: color-mix(in srgb, var(--primary) 26%, var(--border));
}
/* نقطة الإجازة أكبر وأغمق: الذهبيّ الفاتح على أرضيةٍ عاجية لا يُرى. */
.ac-cell .dd i.off { width: 5px; height: 5px; background: #A8873F; }

.ac-cell.past { opacity: .5; }
.ac-cell.hol { background: #F7F1E1; border-color: #E2D3AC; }
.ac-cell.hol .n { color: #7A6224; }
.ac-cell.sel { border-color: var(--primary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 28%, transparent); }
.ac-cell.now {
    opacity: 1;
    background: linear-gradient(150deg, #D9BC78 0%, #C9A961 55%, #A8873F 100%);
    border-color: #A8873F; box-shadow: 0 3px 10px rgba(201,169,97,.4);
}
.ac-cell.now .n { color: #fff; }
.ac-cell.now .dd i { background: rgba(255,255,255,.55); }
.ac-cell.now .dd i.off { background: #fff; }

/* ---------- لوحة التفصيل ---------- */
.ac-det {
    margin: 11px 13px 13px; padding: 11px 12px; border-radius: 13px;
    background: color-mix(in srgb, var(--beige) 26%, var(--surface));
    border: 1.5px solid var(--border);
}
.ac-det.is-now { background: color-mix(in srgb, #C9A961 13%, var(--surface)); border-color: #C9A961; }
.ac-det.is-hol { background: color-mix(in srgb, #F5EEDC 55%, var(--surface)); border-color: #E2D3AC; }
.ac-det-h { display: flex; align-items: baseline; gap: 7px; }
.ac-det-h .t { flex: 1; font-size: 13px; font-weight: var(--fw-bold); color: var(--ink-primary); }
.ac-det-h .tag {
    font-size: 9px; font-weight: var(--fw-bold); color: #fff; background: #B8963F;
    border-radius: 20px; padding: 1px 8px;
}
.ac-det-d { display: flex; flex-direction: column; gap: 1px; margin-top: 4px; }
.ac-det-d span { font-size: 10.5px; color: var(--text-muted); line-height: 1.7; }
.ac-det-d i {
    font-style: normal; font-weight: var(--fw-bold); margin-inline-end: 4px;
    color: color-mix(in srgb, var(--primary) 50%, var(--text-muted));
}
.ac-det-days { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; margin-top: 8px; }
.ac-dy {
    text-align: center; font-size: 9.5px; font-weight: var(--fw-bold);
    border-radius: 7px; padding: 4px 2px;
    background: color-mix(in srgb, var(--beige) 45%, var(--surface));
    color: var(--text-muted); border: 1px solid var(--border);
}
.ac-dy.off { background: #C9A961; color: #fff; border-color: #A8873F; }
.ac-det-note {
    margin-top: 7px; padding-top: 7px; border-top: 1px dashed #E2D3AC;
    font-size: 10.5px; font-weight: var(--fw-bold); color: var(--gold-ink); line-height: 1.65;
}

/* ---------- فواصل التقويم: عودة المعلمين والإجازات ---------- */
.ac-span {
    grid-column: 1 / -1;
    display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
    padding: 7px 11px; border-radius: 10px;
    background: #F7F1E1; border: 1.5px solid #E2D3AC;
}
.ac-span .nm { font-size: 11px; font-weight: var(--fw-bold); color: #7A6224; }
.ac-span .rg { font-size: 9.5px; color: #8A7A50; margin-inline-start: auto; }
/* عودة المعلمين عملٌ لا إجازة — فلا تُلوّن بلون الإجازات. */
.ac-span.work {
    background: color-mix(in srgb, var(--beige) 40%, var(--surface));
    border-color: var(--border);
}
.ac-span.work .nm { color: var(--ink-primary); }
.ac-span.work .rg { color: var(--text-muted); }
.ac-span.past { opacity: .5; }
.ac-span.now { border-color: #C9A961; box-shadow: 0 2px 8px rgba(201,169,97,.3); opacity: 1; }

/* أسبوع الاختبارات */
.ac-cell.exam { border-color: var(--primary); border-style: dashed; }
.ac-det-h .tag.exam { background: var(--primary); }

/* ثلاث خانات لا سطرٌ بنقاطٍ فاصلة: النقطة الوسطى بعد رقمٍ عربي تُقرأ
   صفراً — «٨٨ ·» تُرى «٨٨٠». */
.ac-foot {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 6px;
    margin: 0; padding: 0 13px 13px;
}
.ac-foot span {
    font-size: 9.5px; color: var(--text-muted); line-height: 1.7;
    background: color-mix(in srgb, var(--beige) 35%, var(--surface));
    border: 1px solid var(--border); border-radius: 20px; padding: 2px 9px;
}

/* ==========================================================================
   الفصل الدراسي (الإعدادات) — تبديل الفصل ونقل الفصول
   ========================================================================== */

/* شريطُ الفصلين — اختيار المستخدم «ب» (٢٥ أغسطس ٢٠٢٦).
   والشاشةُ قبله كانت تقول «أنت في الفصل الأول» ولا تُري الثاني ولا ما فيه.

   وهو **عرضٌ لا زرّ** عن قصد: الانتقالُ يهاجر بياناتٍ ويُعيد تحميل
   التطبيق، فلا يُترك خلف لمسةٍ على شريطٍ يبدو مفتاحاً. ولذلك بلا
   `cursor:pointer` ولا استجابةٍ للمس. */
.tseg {
    display: flex;
    gap: 4px;
    padding: 4px;
    margin-bottom: var(--space-4);
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: 12px;
}
.tseg-i {
    flex: 1;
    padding: var(--space-3) var(--space-2);
    border-radius: 9px;
    text-align: center;
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    color: var(--text-muted);
}
.tseg-i.on {
    background: var(--ink-primary);
    color: var(--text-inverse);
}

/* السطرُ تحته يقول ما في كلِّ فصل — وهو ما يعوّض أنّ الشريط لا يُظهر
   العدد. ولولاه لكان الشريطُ أجملَ وأقلَّ نفعاً ممّا كان. */
.tseg-n {
    margin: 0 var(--space-1) var(--space-5);
    font-size: var(--fs-sm);
    line-height: 1.85;
    color: var(--text-muted);
}
.tseg-n b { color: var(--ink-primary); }

.term-done {
    background: color-mix(in srgb, var(--success) 12%, transparent);
    color: var(--success);
    border-radius: var(--radius-md); padding: var(--space-3);
    font-size: var(--fs-sm); margin: 0 0 var(--space-4);
}

.term-warn-h { font-weight: 700; margin: 0 0 var(--space-3); }
/* القائمة بحرفٍ عربي: النقطة الافتراضية تلتصق بالكلمة في RTL. */
.term-warn-l { list-style: none; padding: 0; margin: 0 0 var(--space-5); }
.term-warn-l li {
    position: relative; padding-inline-start: var(--space-5);
    margin-bottom: var(--space-3); font-size: var(--fs-sm); line-height: 1.7;
}
.term-warn-l li::before {
    content: '—'; position: absolute; inset-inline-start: 0; color: var(--accent);
}

.term-q { font-weight: 700; margin: 0 0 var(--space-3); }
.term-pick { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-5); }
.term-opt {
    display: flex; align-items: center; gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--border); border-radius: var(--radius-md);
    font-size: var(--fs-sm); cursor: pointer;
}
.term-opt input { width: 20px; height: 20px; accent-color: var(--primary); flex: none; }
.term-opt:has(input:checked) { border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 10%, transparent); }

.term-acts { display: flex; flex-direction: column; gap: var(--space-2); }
.term-acts .btn { width: 100%; }

/* ==========================================================================
   التهيئة على خطوتين — مؤشّر التقدّم وحقول «عنك»
   ========================================================================== */

.setup-steps {
    display: flex; align-items: center; gap: 7px;
    margin: 0 var(--space-1) var(--space-5);
}
.setup-steps .dot {
    width: 10px; height: 10px; border-radius: 50%; flex: none;
    background: color-mix(in srgb, var(--border) 70%, transparent);
}
.setup-steps .dot.on   { background: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent); }
.setup-steps .dot.done { background: var(--accent); }
.setup-steps .bar {
    height: 2px; width: 34px; flex: none; border-radius: 2px;
    background: color-mix(in srgb, var(--border) 70%, transparent);
}
.setup-steps .bar.on { background: var(--accent); }
.setup-steps .lbl {
    margin-inline-start: auto;
    font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--text-muted);
}

/* عنوانٌ يحمل توضيحه بجانبه بدل سطرٍ ثالث يطيل الشاشة. */
.fgrp-h {
    font-weight: var(--fw-medium); color: var(--text-muted);
    opacity: .85; margin-inline-start: var(--space-2);
}

/* المواد كثيرة، فتُلفّ ولا تُمدّ. */
.fchips.wrap { margin-bottom: var(--space-4); }

/* ==========================================================================
   استيراد الجدول — الفصول الجديدة التي سيُنشئها
   ========================================================================== */

.imp-new {
    margin: var(--space-4) 0;
    padding: var(--space-3);
    border-radius: var(--radius-md);
    border: 1.5px dashed var(--accent);
    background: color-mix(in srgb, var(--accent) 8%, transparent);
}
.imp-new-t {
    display: flex; align-items: baseline; gap: var(--space-2);
    font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--text);
    margin-bottom: var(--space-3);
}
.imp-new-t span {
    font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--text-muted);
}
/* الاسم والمادة في سطرين: «الأول المتوسط / ٣» مع قائمة مواد لا يتّسع
   لهما سطرٌ واحدٌ في شاشة جوال، فكان الاسم يُقصّ. */
.imp-new-row {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
    padding: var(--space-3) 0;
}
.imp-new-row + .imp-new-row { border-top: 1px solid color-mix(in srgb, var(--accent) 25%, transparent); }
.imp-new-row.off { opacity: .45; }
.imp-new-sub {
    flex: 1 1 100%; min-width: 0;
    padding: 8px 9px; border-radius: var(--radius-sm);
    border: 1.5px solid var(--border); background: var(--surface);
    font-family: inherit; font-size: var(--fs-xs); font-weight: var(--fw-bold);
    color: var(--text);
}

/* بطاقة «فصل جديد» في محرّر الخانة — مميّزةٌ عن الفصول بلا صخب. */
.sch-card.new {
    border-style: dashed;
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 8%, transparent);
}
.sch-card.new .g { color: var(--ink-primary); }

/* ==========================================================================
   التلميح — طبقةٌ معتمة تُبرز الهدف وحده (الشكل «أ» المعتمد)
   ========================================================================== */

.hint-layer { position: fixed; inset: 0; z-index: 900; }

/* الثقب بلا قصٍّ ولا أقنعة: ظلٌّ هائل الانتشار يُعتِّم ما حوله. */
.hint-hole {
    position: absolute; border-radius: 13px;
    box-shadow: 0 0 0 9999px rgba(10, 16, 32, .70);
    pointer-events: none;
}

.hint-tip {
    position: absolute; box-sizing: border-box;
    background: var(--surface); border-radius: 13px;
    padding: 12px 14px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .36);
}
.hint-tip b {
    display: block; font-size: var(--fs-sm);
    font-weight: var(--fw-bold); color: var(--text);
}
.hint-tip span {
    display: block; font-size: var(--fs-xs); color: var(--text-muted);
    margin-top: 3px; line-height: 1.65;
}
.hint-tip::after {
    content: ''; position: absolute; top: -7px;
    inset-inline-end: var(--hint-arrow, 26px);
    border-inline: 8px solid transparent;
    border-bottom: 8px solid var(--surface);
}
/* حين لا يتّسع ما تحت الهدف يعلوه الصندوق، فينقلب السهم معه. */
.hint-tip.up::after {
    top: auto; bottom: -7px;
    border-bottom: 0; border-top: 8px solid var(--surface);
}
.hint-go {
    display: block; width: 100%; margin-top: 10px;
    border: 0; border-radius: 9px; padding: 8px;
    background: var(--primary); color: var(--text-inverse);
    font-family: inherit; font-size: var(--fs-xs);
    font-weight: var(--fw-bold); cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
    .hint-layer { transition: none; }
}

/* استيراد الجدول — سؤال المرحلة حين لا يذكرها الجدول */
.imp-stage {
    margin-bottom: var(--space-4); padding: var(--space-3);
    border-radius: var(--radius-md);
    border: 1.5px solid var(--primary);
    background: color-mix(in srgb, var(--primary) 7%, transparent);
}
.imp-stage-t {
    font-size: var(--fs-sm); font-weight: var(--fw-bold);
    color: var(--text); margin-bottom: var(--space-3);
}
.imp-stage-c { display: flex; flex-wrap: wrap; gap: 7px; }

/* الفصول المعروفة مادّتها تُعرض ولا تُسأل — سطرٌ واحدٌ لا حقول. */
.imp-new-row.done { flex-wrap: nowrap; padding: var(--space-2) 0; }
.imp-new-row.done .nm { flex: 1; min-width: 0; }
.imp-new-row.done .sj {
    flex: none; font-size: var(--fs-xs); font-weight: var(--fw-bold);
    color: var(--ink-primary);
    background: color-mix(in srgb, var(--primary) 9%, transparent);
    padding: 3px 8px; border-radius: 999px;
}
.imp-new-row.done .cnt { flex: none; }
.imp-new-row .nm .cnt { margin-inline-start: var(--space-2); font-weight: var(--fw-medium); }

/* ==========================================================================
   معاينة الاستيراد شبكةً — تُقارَن بورقة المعلّم لا تُقرأ سطراً سطراً
   ========================================================================== */

.impg-hint {
    font-size: var(--fs-xs); color: var(--text-muted);
    margin: var(--space-4) 2px var(--space-2); line-height: 1.7;
}
.impg { display: flex; flex-direction: column; gap: 3px; }
.impg-row { display: flex; gap: 3px; }
.impg-row.head .impg-h {
    flex: 1; min-width: 0; text-align: center;
    font-size: 10px; font-weight: var(--fw-bold); color: var(--text-muted);
    padding: 3px 0;
}
.impg-row.head .impg-h:first-child { flex: 0 0 26px; }
.impg-p {
    flex: 0 0 26px; display: flex; align-items: center; justify-content: center;
    border-radius: var(--radius-sm); background: var(--primary);
    color: var(--text-inverse); font-size: 11px; font-weight: var(--fw-bold);
}
.impg-c {
    flex: 1; min-width: 0; min-height: 46px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 1px; padding: 3px 2px;
    border: 1.5px solid var(--border); border-radius: var(--radius-sm);
    background: var(--surface); font-family: inherit; cursor: default;
}
.impg-c b {
    font-size: 10px; font-weight: var(--fw-bold); color: var(--text);
    line-height: 1.25; overflow: hidden; text-overflow: ellipsis;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.impg-c i { font-size: 9px; font-style: normal; color: var(--text-muted); }
/* الفصل الجديد يُميَّز: المعلّم يرى ما سيُنشأ قبل أن يوافق. */
.impg-c.new { border-style: dashed; border-color: var(--accent);
              background: color-mix(in srgb, var(--accent) 8%, transparent); }
.impg-c.wait { border-color: var(--accent);
               background: color-mix(in srgb, var(--accent) 14%, transparent); }
.impg-c.wait b { color: var(--ink-primary); }
.impg-c.empty { background: color-mix(in srgb, var(--border) 14%, transparent);
                border-style: dashed; }

.impg.edit .impg-c { cursor: pointer; }
.impg.edit .impg-c.empty { color: var(--text-muted); font-size: 15px; }
.impg.edit .impg-c:active { transform: scale(.96); }

.impg-pick-t { font-size: var(--fs-sm); font-weight: var(--fw-bold); margin-bottom: var(--space-3); }
.impg-pick-l { display: flex; flex-wrap: wrap; gap: 7px; }
.impg-pick-l small { font-weight: var(--fw-medium); opacity: .75; }
.impg-pick-l .sch-chip.danger { border-color: var(--danger, #C0392B); color: var(--danger, #C0392B); }

.imp-acts { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-4); }
.imp-acts .btn { width: 100%; }

/* لوحة الخانة داخل المعاينة — لا نافذةٌ ثانية تمحو الأولى. */
.impg-pick {
    margin-bottom: var(--space-4); padding: var(--space-3);
    border: 1.5px solid var(--primary); border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--primary) 6%, transparent);
}
.impg-pick-t {
    display: flex; align-items: center;
    font-size: var(--fs-sm); font-weight: var(--fw-bold);
    color: var(--text); margin-bottom: var(--space-3);
}
.impg-pick-x {
    margin-inline-start: auto; border: 0; background: transparent;
    color: var(--text-muted); font-size: 16px; cursor: pointer; line-height: 1;
}

/* أدوات التعديل خارج شبكة الجدول — داخلها كانت تقصّ الحصة السابعة. */
.sched-tools { padding-top: var(--space-3); padding-bottom: var(--space-2); }
.sched-tools .sched-import { margin-top: 0; }


/* ==========================================================================
   منتقي المواد — قائمةٌ منسدلة وصفُّ مختار (js/components/subject-picker.js)
   ==========================================================================
   حلَّ محلَّ عشرين مربّعاً مبعثرة. والمنسدلةُ بمظهر الحقل نفسه فتُقرأ حقلاً،
   والمختارُ تحتها حبّاتٌ قليلةٌ تُحذف بضغطة.
   ========================================================================== */
.subp { margin-bottom: var(--space-4); }

.subp-select {
    width: 100%; min-height: 48px;
    padding: 0 14px; border-radius: 12px;
    font-family: inherit; font-size: 14px; font-weight: var(--fw-bold);
    color: var(--ink-primary); background: var(--surface);
    border: 1.5px solid var(--border); outline: none;
    /* سهمُ النظام يختلف بين آيفون وأندرويد والحاسوب، فيُطفأ ويُرسم واحدٌ
       ثابت — ومكانُه بدايةُ السطر (يسارُه في العربية). */
    appearance: none; -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 L6 6.5 L11 1.5' fill='none' stroke='%236B6B68' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left 14px center;
    padding-inline-start: 36px;
}
.subp-select:focus { border-color: #C9A961; }

.subp-other { display: flex; gap: 7px; margin-top: 9px; }
.subp-other-fld {
    flex: 1; min-height: 46px; padding: 0 14px; border-radius: 12px;
    font-family: inherit; font-size: 14px; font-weight: var(--fw-bold);
    color: var(--ink-primary); background: var(--surface);
    border: 1.5px solid var(--border); outline: none;
}
.subp-other-fld:focus { border-color: #C9A961; }
.subp-other-fld::placeholder { color: #C0BAA8; font-weight: var(--fw-medium); }
.subp-other-go {
    min-height: 46px; padding: 0 18px; border-radius: 12px; cursor: pointer;
    font-family: inherit; font-size: 14px; font-weight: var(--fw-bold);
    color: #fff; border: 1.5px solid var(--primary);
    background: linear-gradient(180deg, var(--primary-mid), var(--primary));
}

.subp-chosen { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.subp-chip {
    display: inline-flex; align-items: center; gap: 6px;
    border-radius: 11px; padding: 7px 12px;
    font-size: 12.5px; font-weight: var(--fw-bold); color: #fff;
    background: linear-gradient(180deg, var(--primary-mid), var(--primary));
    border: 1.5px solid var(--primary);
}
.subp-x {
    border: 0; background: transparent; cursor: pointer; padding: 0;
    font-family: inherit; font-size: 16px; line-height: 1; color: #fff; opacity: .75;
}
.subp-x:hover, .subp-x:active { opacity: 1; }

/* صفُّ المنتقي في الملف التعريفي: عنوانٌ فوق وحقلٌ تحته — لا صفُّ ضغط. */
.frow-picker {
    display: block; width: 100%; text-align: start;
    padding: 12px 13px; cursor: default;
}
.frow-picker .lb { display: block; margin-bottom: 8px; }
.frow-picker .subp { margin-bottom: 0; }

/* صفُّ الرجوع في شاشة التهيئة — الشاشةُ بلا شريطٍ علويّ، فيقوم مقامه.
   والزرُّ نفسه المستعمل في التطبيق (`.hdr-back`)، وموضعُه موضعُه: بداية
   السطر عند الحافّة اليسرى في العربية. */
.setup-topbar {
    display: flex; justify-content: flex-start;
    margin: calc(var(--space-3) * -1) calc(var(--space-2) * -1) var(--space-2);
}

/* ==========================================================================
   الفصول — زرُّ الإضافة العريض
   ==========================================================================
   كان زرّان يفتحان النافذة نفسها: واحدٌ أعلى الصفحة وآخرُ في وسط حالة
   الفراغ. فبقي واحدٌ حيث يبلغه الإبهام، ثابتٌ لا يتنقّل بين الحالتين.
   ========================================================================== */
.classes-fab {
    position: fixed;
    inset-inline: 0;
    /* يرتفع عن الشريط السفلي بمسافةٍ تُرى: كان يلتصق به فيُقرآن شريطاً
       واحداً. */
    bottom: calc(var(--bottom-nav-height) + var(--bottom-nav-gap) + var(--safe-bottom) + var(--space-4));
    z-index: 40;
    padding: 10px var(--mobile-padding) 12px;
    /* تدرّجٌ يذوب في الأرضية: الزرُّ يطفو ولا يقطع الصفحة بخطّ. */
    background: linear-gradient(180deg, rgba(255,255,255,0), var(--bg) 45%);
    pointer-events: none;
}
.classes-fab .btn {
    display: block; width: 100%; max-width: var(--container-max);
    margin-inline: auto; pointer-events: auto;
}
/* و`start-cta` تحمل عرضَها وتوسيطَها بنفسها — يبقى لها الحدُّ الأقصى
   وقابليّةُ الضغط، فالحاويةُ `pointer-events: none`. */
.classes-fab .start-cta {
    max-width: var(--container-max);
    margin-inline: auto;
    pointer-events: auto;
}

/* والمحتوى يترك له مكاناً فلا تختفي آخرُ بطاقةٍ تحته. */
.classes-v2 { padding-bottom: 91px; }

/* حالةُ الفراغ: نصٌّ في وسط الشاشة بلا إطار.

   والوسطُ يُحسب لا يُقدَّر: ارتفاعُ الشاشة ناقصَ الشريطين العلويّ والسفليّ
   وحشوِ المحتوى وموضعِ الزرّ — فتقع العبارةُ في منتصف الفراغ الباقي بين
   الشريط والزرّ، مهما كان طولُ الجهاز. و`dvh` لا `vh`: شريطُ المتصفّح على
   الجوال يتمدّد وينكمش، و`vh` لا يراه فتنزل العبارةُ تحت الطيّة. */
.empty-classes {
    min-height: calc(100dvh - var(--header-height) - var(--bottom-nav-height)
                     - var(--bottom-nav-gap) - var(--safe-bottom)
                     - var(--space-5) - 91px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 21px;
    text-align: center;
}
.empty-classes h3 {
    margin: 0;
    /* بلا ثقل: العبارةُ خبرٌ لا عنوان — تقول «لا شيء هنا» ولا تنادي. */
    font-size: 19px; font-weight: var(--fw-medium); color: var(--ink-primary);
}

/* على الحاسوب لا شريطَ سفليّاً، فيهبط الزرُّ إلى الحافّة. */
@media (min-width: 769px) {
    .classes-fab { bottom: 0; }
}

/* تحذيرُ الملفّات المحليّة — حقيقةٌ يعتمد عليها المعلّم، لا حشو. */
.local-note {
    margin: var(--space-4) 0 0;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    background: color-mix(in srgb, var(--accent) 7%, transparent);
    font-size: var(--fs-xs);
    line-height: 1.9;
    color: var(--text-muted);
}
.local-note b { color: var(--text); font-weight: var(--fw-bold); }

/* ══ مراجعةُ الأسماء المستورَدة قبل الحفظ ══
   لافتةٌ تقول من أين جاءت الأسماء وما احتمالُ خطئها. وصبغتُها ذهبيّةٌ
   خفيفة كلافتات البدء — تنبيهٌ لا إنذار: الأسماءُ في الغالب صحيحة،
   والمطلوبُ نظرةٌ لا تدقيق. */
.rev-note {
    margin: 0 0 var(--space-4);
    padding: 12px 14px;
    border-radius: 14px;
    background: color-mix(in srgb, var(--pf-gold) 15%, var(--mix-base));
    border: 1px solid color-mix(in srgb, var(--pf-gold) 45%, var(--mix-base));
}
.rev-note b {
    display: block;
    font-size: 14.5px; font-weight: var(--fw-bold); color: var(--ink-primary);
}
.rev-note span {
    display: block; margin-top: 3px;
    font-size: 12.5px; line-height: 1.75; color: var(--text);
}
/* ══ حقولُ محرّر الأسئلة حين تكون المادّة إنجليزيّة ══
   الواجهةُ تبقى عربيّة — الحقولُ وحدَها تُقلب، فمعلّمُ الإنجليزيّة يكتب
   سؤالَه فيبدأ من اليسار كما يُقرأ. والنائبُ (placeholder) عربيٌّ فيبقى
   على يمين الحقل. */
.qe-ltr { direction: ltr; text-align: left; }
.qe-ltr::placeholder { direction: rtl; text-align: right; }

/* ══ اختيارُ عمود الأسماء من جدولٍ مرفوع ══
   الجدولُ يُعرض كما هو ويُضغط رأسُ عموده — لا يُخمَّن. ويمرّ أفقيّاً داخل
   إطاره وحدَه: أعمدةُ إكسل قد تبلغ عشرين، والصفحةُ لا تُمَطّ لها. */
.sheet-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: var(--space-3); }
.sheet-tab {
    padding: 7px 13px; border-radius: 11px; cursor: pointer; font-family: inherit;
    font-size: 12.5px; font-weight: var(--fw-bold); color: var(--ink-primary);
    background: var(--surface); border: 1.5px solid var(--border);
}
.sheet-tab.on {
    background: linear-gradient(180deg, var(--primary-mid), var(--primary));
    border-color: var(--primary); color: #fff;
    box-shadow: 0 4px 11px color-mix(in srgb, var(--primary) 30%, transparent);
}
.sheet-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 12px; }
.sheet-tbl { border-collapse: collapse; width: max-content; min-width: 100%; }
.sheet-tbl th { padding: 0; }
.sheet-tbl td {
    border: 1px solid var(--border); padding: 8px 10px;
    font-size: 12.5px; color: var(--text); white-space: nowrap;
    max-width: 190px; overflow: hidden; text-overflow: ellipsis;
}
.sheet-col {
    display: block; width: 100%; cursor: pointer; font-family: inherit;
    padding: 10px; border: 1.5px solid var(--border); border-radius: 0;
    font-size: 12.5px; font-weight: var(--fw-bold); color: var(--ink-primary);
    background: color-mix(in srgb, var(--beige) 30%, var(--mix-base));
    white-space: nowrap;
}
/* المقترَحُ مميَّزٌ ليُرى، لا مختارٌ مفروض — الضغطُ هو الاختيار. */
.sheet-col.on {
    background: linear-gradient(180deg, var(--primary-mid), var(--primary));
    border-color: var(--primary); color: #fff;
}
.sheet-col:active { transform: scale(.98); }

/* العدّادُ يتبع ما يكتبه المعلّم، فيرى أثرَ حذفِ سطرٍ قبل أن يحفظ. */
.rev-count {
    margin-inline-start: 6px;
    font-weight: var(--fw-bold);
    color: var(--primary);
}

/* ==========================================================================
   الإعدادات: خطٌّ واحدٌ لا صندوق — طلبُ المستخدم (٢١–٢٤ أغسطس)
   ==========================================================================
   كانت كلُّ مجموعةٍ داخل مربّعٍ بارز: حدٌّ وظلٌّ وحوافُّ مدوّرة. فأُزيل،
   ثمّ طُلب أن يعود **بحدٍّ واحدٍ فقط**: خطٌّ رأسيٌّ يمتدّ بمحاذاة القسم
   من جهة اليمين، قبل الكتابة.

   فهو `border-inline-start` لا `border-right`: الجهةُ «البادئة» في نصٍّ
   عربيّ هي اليمين، فيبقى الخطُّ حيث يُنتظر إن قُلبت لغةُ الواجهة يوماً.
   ========================================================================== */
.set-list {
    border: 0;
    border-inline-start: 2px solid var(--border);
    padding-inline-start: 12px;   /* فراغٌ بين الخطّ والكتابة */
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
    background: transparent;
}
.set-list .set-row {
    background: transparent;
    border-bottom: 0;                 /* بلا خطوطٍ فاصلة — طلبُ المستخدم */
    padding: 12px var(--space-1);     /* كانت ١٣px ثم ٩px */
    min-height: 0;
}
/* والعنوانُ أصغرُ قليلاً ليتناسب مع صفوفٍ أقصر. */
.set-list .set-row .t { font-size: 14.5px; }
/* واللمسُ يُرى بخلفيّةٍ خفيفةٍ تمتدّ إلى الخطّ لا تتجاوزه. */
.set-list .set-row:active {
    background: color-mix(in srgb, var(--text) 5%, transparent);
}

/* ==========================================================================
   شريطُ تعطّل المخزن المحلّي
   ==========================================================================
   يظهر حين يتعذّر فتحُ `IndexedDB`. عندها تُرجع كلُّ قراءةٍ لا شيء، فتبدو
   الشاشةُ فارغةً وبياناتُ المعلّم سليمةٌ على الخادم — والفراغُ بلا تفسيرٍ
   يُقرأ «ضاع عملي». فالشريطُ **ثابتٌ لا نخبةٌ تمرّ**: الحالةُ باقيةٌ حتى
   يُعاد فتحُ التطبيق، فيبقى ما يشرحها باقياً معها.
   ========================================================================== */
.cache-down {
    margin: var(--space-3);
    padding: var(--space-4);
    border-radius: 10px;
    border: 1px solid #DC2626;
    background: color-mix(in srgb, #DC2626 8%, var(--mix-base));
    color: var(--ink-primary);
    font-size: var(--fs-sm);
    line-height: 1.7;
}
.cache-down b { color: #DC2626; }
.cache-down .cd-why { display: block; color: var(--text-muted); }

/* رابطُ «نسيت كلمة المرور» — فوق زرّ الدخول بطلب المستخدم (٢٥ أغسطس).
   بمحاذاة بدايةِ السطر لا وسطِه: العينُ تنزل من خانة كلمة المرور إليه. */
.auth-forgot { margin: -4px 2px 14px; text-align: start; }
.auth-forgot button {
    background: none; border: 0; padding: 0;
    font-family: inherit; font-size: var(--fs-sm); font-weight: var(--fw-bold);
    color: var(--primary); cursor: pointer; text-decoration: underline;
}

/* ==========================================================================
   شاشاتُ الدخول — التصميم «د» (اختيار المستخدم، ٢٥ أغسطس ٢٠٢٦)
   ==========================================================================
   بطاقةٌ بيضاءُ ترتفع على أرضيّةٍ بلون الهُويّة، وشعارٌ يتدلّى منها بحلقةٍ
   ذهبية. اختاره من استوديو المعاينة بعد تجربة الأربعة.

   وتشمل الشاشاتِ الأربعَ كلَّها — الدخول والتسجيل والاسترجاع واختيارَ
   الكلمة الجديدة — فهي بابٌ واحدٌ لا أربعة.
   ========================================================================== */
.view-auth {
    background: var(--ink-primary);
    background-attachment: scroll;
    padding: var(--space-6) var(--space-4);
}
/* والنقطُ الضوئيّةُ تُطفأ: كانت تُلطّف تدرّجاً، ولا معنى لها على لونٍ صافٍ. */
.view-auth::before { display: none; }

.view-auth .auth-card {
    max-width: 420px;
    border-radius: 18px;
    padding: var(--space-6) var(--space-5);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .20);
    /* مساحةٌ للشعار المتدلّي — وإلّا لصق العنوانُ بالحافّة. */
    margin-top: 30px;
}

/* الشعارُ حلقةٌ تتجاوز حافّةَ البطاقة إلى أعلى. */
.view-auth .auth-logo {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: var(--ink-primary);
    border: 2.5px solid var(--accent);
    display: grid;
    place-items: center;
    font-size: 25px;
    margin: -48px auto var(--space-3);
}

.view-auth .auth-title {
    font-size: 19.5px;
    font-weight: var(--fw-bold);
    margin-bottom: 3px;
}
.view-auth .auth-subtitle {
    font-size: var(--fs-sm);
    margin-bottom: var(--space-5);
    line-height: 1.7;
}

/* ثقلُ ٥٠٠ باختياره. والخطُّ لا يحمل ٨٠٠ أصلاً (`css/fonts.css`) —
   فما فوق ٧٠٠ يصطنعه المتصفّحُ تغليظاً فتتورّم الحروف. */
.view-auth .btn-primary { font-weight: var(--fw-medium); }

/* «الدخول كزائر» بلا شيء: نصٌّ هادئٌ لا زرٌّ يزاحم. ويسقط معه فاصلُ
   «أو» — فهو لم يعد بديلاً مكافئاً بل باباً جانبيّاً. */
.view-auth .auth-divider { display: none; }
.auth-guest {
    display: block;
    width: 100%;
    background: none;
    border: 0;
    padding: var(--space-4) 0 0;
    font-family: inherit;
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    color: var(--text-muted);
    text-decoration: underline;
    cursor: pointer;
}
.auth-guest:active { color: var(--ink-primary); }

/* موافقةُ إنشاء الحساب — مربّعٌ صريحٌ باختيار المستخدم (٢٥ أغسطس).
   ومساحةُ اللمس ١٧px لا ١٣: إصبعٌ لا مؤشّرُ فأرة. */
.auth-consent {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    margin: var(--space-4) 0 var(--space-5);
    font-size: var(--fs-sm);
    line-height: 1.75;
    color: var(--text-muted);
    cursor: pointer;
}
.auth-consent input {
    width: 17px;
    height: 17px;
    margin-top: 3px;
    flex-shrink: 0;
    accent-color: var(--ink-primary);
}
.auth-consent a {
    color: var(--ink-primary);
    font-weight: var(--fw-medium);
    text-decoration: underline;
}
/* والزرُّ المقفول يُرى مقفولاً — لا يُترك كامل اللون فيُظنّ عاطلاً. */
.view-auth .btn-primary:disabled { opacity: .45; }

/* ==========================================================================
   شاشةُ الزائر — الخصوصيّةُ وأينَ تُحفظ بياناتُه (٢٥ أغسطس ٢٠٢٦)
   ==========================================================================
   تُعرض بعد ضغطِ «الدخول كزائر» و**قبل إنشاء الجلسة** — فالموافقةُ قبل
   الحساب لا بعده. وتجمع أمرين: ما نفعله ببياناته، وأنّ حسابَه هذا
   **لا سبيل لاستعادته** بلا بريد.
   ========================================================================== */
.gc-warn {
    border-inline-start: 3px solid #DC2626;
    padding-inline-start: var(--space-3);
    margin: var(--space-4) 0 0;
    font-size: var(--fs-sm);
    line-height: 1.8;
    color: var(--text-muted);
}
.gc-warn b { color: #B42318; }
/* الرابطُ داخل الجملة لا زرٌّ تحتها: يُقرأ في موضعه من الكلام. */
.gc-link {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    font-weight: var(--fw-medium);
    color: var(--ink-primary);
    text-decoration: underline;
    cursor: pointer;
}


/* حبّاتُ نوع المدرسة في شاشة بياناتها — تُفصل عمّا بعدها كبقيّة المجموعات. */
#st-gender { margin-bottom: var(--space-5); }


/* ==========================================================================
   التقارير (views/reports.js) — التصميم «ب»: جوابٌ ثمّ دليلُه.

   ولا صنفَ مخترعاً حيث يوجد صنفُ التطبيق: البطاقةُ الكحليّةُ هي بطاقةُ
   «حصّتك القادمة» في الرئيسيّة بلونها وظلّها، والبيجُ في مسارب الأشرطة
   هو بيجُ شبكة الإنجاز. فالشاشةُ تشبه التطبيق لأنّها منه.
   ========================================================================== */

.rp-v2 { padding-bottom: var(--space-8); }

/* الصدر: رقمٌ واحدٌ يُقرأ من بعيد، وثلاثةٌ تسنده. */
.rp-hero {
    background: var(--primary);
    border-radius: var(--radius-lg);
    padding: 20px 18px;
    color: #fff;
    margin-top: var(--space-5);
    box-shadow: 0 8px 20px color-mix(in srgb, var(--primary) 25%, transparent);
}

.rp-hero .k { font-size: 12px; font-weight: var(--fw-bold); opacity: .8; }

.rp-hero .v {
    font-size: 52px; font-weight: var(--fw-bold); line-height: 1.05;
    margin-top: 2px; font-variant-numeric: tabular-nums;
}

.rp-hero .s { font-size: 12px; opacity: .85; margin-top: 4px; }

.rp-hero .row {
    display: flex; gap: 8px; margin-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, .2); padding-top: 14px;
}

.rp-hero .row > div { flex: 1; text-align: center; }
.rp-hero .row .n { font-size: 19px; font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
.rp-hero .row .c { font-size: 10.5px; opacity: .8; margin-top: 1px; }

.rp-h {
    font-size: 13px; font-weight: var(--fw-bold); color: var(--text-muted);
    margin: 22px 2px 9px;
}

.rp-card {
    background: var(--surface); border: 1.5px solid var(--border);
    border-radius: 16px; padding: 14px 13px;
    box-shadow: 0 2px 6px rgba(16, 24, 40, .05);
}

/* الأشرطة: أربعُ خاناتٍ تُقرأ دفعةً واحدة بدل أربعة أرقامٍ تُقرأ واحداً
   واحداً. والمسربُ بيجٌ لا رماديّ — لونُ التطبيق لا لونُ المتصفّح. */
.rp-meters { display: flex; flex-direction: column; gap: 9px; }
.rp-meter { display: flex; align-items: center; gap: 10px; }

.rp-meter .lb {
    font-size: 12.5px; font-weight: var(--fw-bold); color: var(--ink-primary);
    width: 66px; flex: none;
}

.rp-meter .tr {
    flex: 1; height: 10px; border-radius: 6px; overflow: hidden;
    background: color-mix(in srgb, var(--beige) 45%, var(--mix-base));
}

/* `display:block` شرط: العنصر سطريٌّ بأصله فلا تعمل عليه `height`،
   فيُرسم الشريطُ فارغاً وإن ضُبط عرضُه. */
.rp-meter .tr i { display: block; height: 100%; border-radius: 6px; }

.rp-meter .vn {
    font-size: 12px; font-weight: var(--fw-bold); color: var(--text-muted);
    width: 74px; text-align: end; flex: none; font-variant-numeric: tabular-nums;
}

/* صفُّ الطالب رابطٌ إلى صفحته — كما في سجلّ المتابعة. */
.rp-rows { display: flex; flex-direction: column; }

.rp-row {
    display: flex; align-items: center; gap: 9px;
    padding: 9px 2px; border-bottom: 1px solid var(--border);
    text-decoration: none;
}

.rp-row:last-child { border-bottom: 0; }

.rp-row .rk {
    width: 20px; flex: none; font-size: 12.5px; font-weight: var(--fw-bold);
    color: var(--text-muted); text-align: center;
}

.rp-row .nm {
    flex: 1; min-width: 0; font-size: 13.5px; font-weight: var(--fw-bold);
    color: var(--ink-primary);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* البيانُ ينكمش قبل الاسم: الاسمُ هو المقصود، والفصلُ زيادةُ إيضاح. */
.rp-row .mt {
    font-size: 10.5px; font-weight: var(--fw-bold); color: var(--text-muted);
    flex: 0 1 auto; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.rp-row .pc {
    font-size: 13.5px; font-weight: var(--fw-bold); flex: none;
    font-variant-numeric: tabular-nums;
}

/* بطاقةُ فصلٍ بدل صفٍّ في جدولٍ سباعيّ: الجدولُ يفيض على الجوّال
   فيُمرَّر أفقيّاً، والمعلّمُ لا يمرّر ورقةً ليقرأ صفَّه. */
.rp-cls { display: flex; flex-direction: column; gap: 10px; }

.rp-cls-card {
    display: block; text-decoration: none;
    background: var(--surface); border: 1.5px solid var(--border);
    border-radius: 14px; padding: 12px 13px;
    box-shadow: 0 2px 6px rgba(16, 24, 40, .05);
}

.rp-cls-card .top { display: flex; align-items: baseline; gap: 8px; }

.rp-cls-card .top .t {
    flex: 1; min-width: 0; font-size: 13.5px;
    font-weight: var(--fw-bold); color: var(--ink-primary);
}

.rp-cls-card .top .r {
    font-size: 15px; font-weight: var(--fw-bold); color: var(--primary);
    font-variant-numeric: tabular-nums;
}

.rp-cls-card .sub {
    font-size: 11px; font-weight: var(--fw-bold);
    color: var(--text-muted); margin-top: 2px;
}

.rp-cls-card .mini {
    height: 7px; border-radius: 5px; margin-top: 9px; overflow: hidden;
    background: color-mix(in srgb, var(--beige) 45%, var(--mix-base));
}

.rp-cls-card .mini i {
    display: block; height: 100%; border-radius: 5px; background: var(--primary);
}

.rp-cls-card .facts { display: flex; gap: 14px; margin-top: 9px; }
.rp-cls-card .facts span { font-size: 11px; font-weight: var(--fw-bold); color: var(--text-muted); }
.rp-cls-card .facts b { color: var(--ink-primary); font-variant-numeric: tabular-nums; }

.rp-export { width: 100%; min-height: 50px; margin-top: var(--space-6); }


/* ==========================================================================
   تذكيراتي (views/reminders.js) — التصميم «ج»: صدرٌ ثمّ قائمة.

   الصدرُ الكحليُّ هو صدرُ التقارير نفسُه، والمقسّمُ `pseg` مقسّمُ سجلّ
   المتابعة. فلا صنفَ مخترعاً حيث يوجد صنفُ التطبيق.
   ========================================================================== */

.rm-hero {
    background: var(--primary);
    border-radius: var(--radius-lg);
    padding: 18px;
    color: #fff;
    margin-top: var(--space-5);
    box-shadow: 0 8px 20px color-mix(in srgb, var(--primary) 25%, transparent);
}

.rm-hero .k { font-size: 12.5px; font-weight: var(--fw-bold); opacity: .8; }

/* رقمٌ صريحٌ لا رمزٌ من السلّم: `--fs-display` ينزل إلى ٢٦ على الجوّال —
   وهو مقاسُ عنوانٍ في صفحةٍ ضيّقة، لا مقاسُ رقمٍ يُقرأ من بعيدٍ في صدرها.
   جُرّب فانكمش الرقمُ من ٤٤ إلى ٢٦. */
.rm-hero .v {
    font-size: 44px; font-weight: var(--fw-bold); line-height: 1.1;
    margin-top: 2px; font-variant-numeric: tabular-nums;
}

.rm-hero .s { font-size: var(--fs-sm); opacity: .88; margin-top: 5px; }

.rm-hero .row {
    display: flex; gap: 8px; margin-top: 15px;
    border-top: 1px solid rgba(255, 255, 255, .2); padding-top: 13px;
}

.rm-hero .row > div { flex: 1; text-align: center; }
.rm-hero .row .n { font-size: 20px; font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
.rm-hero .row .c { font-size: var(--fs-xs); opacity: .8; margin-top: 1px; }

.rm-seg { display: flex; gap: 6px; margin: var(--space-5) 0 var(--space-2); }
/* بلا مقاسٍ خاصّ: يرث ١٣٫٥ من مقسّم التطبيق، فلا يصغُر حرفُه في مربّعه. */
.rm-seg .pseg { flex: 1; padding: 0 10px; }

.rm-list { display: flex; flex-direction: column; }

/* الحشوُ يتبع الحرف: كبُر العنوانُ فارتفع السطرُ معه، وإلّا ضاق حولَه. */
.rm-row {
    display: flex; align-items: center; gap: 10px;
    padding: 13px 2px; border-bottom: 1px solid var(--border);
}

.rm-row:last-child { border-bottom: 0; }

/* دائرةٌ لا مربّعُ نظام: هدفُ لمسٍ يُصاب بالإبهام. */
.rm-tick {
    width: 26px; height: 26px; flex: none; border-radius: 50%; padding: 0;
    border: 2px solid var(--border-strong); background: var(--surface);
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    font-size: 13px; color: transparent; font-family: inherit;
}

.rm-row.is-done .rm-tick { background: var(--primary); border-color: var(--primary); color: #fff; }

/* جسدُ السطر زرُّ تعديل: القلمُ الصغير كان هدفاً ضيّقاً، والسطرُ كلُّه أوسع. */
.rm-row .bd {
    flex: 1; min-width: 0; text-align: start; cursor: pointer;
    border: 0; background: transparent; padding: 0; font-family: inherit;
    display: flex; flex-direction: column; gap: 2px;
}

.rm-row .bd .t {
    font-size: 14.5px; font-weight: var(--fw-bold); color: var(--ink-primary);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.rm-row .bd .m {
    font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--text-muted);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.rm-row .when {
    font-size: 11.5px; font-weight: var(--fw-bold); flex: none; color: var(--text-muted);
}

/* المتأخّرُ يقولها بلونه — والتأخيرُ يبدأ من «أمس». */
.rm-row .when.late {
    color: var(--danger);
    background: color-mix(in srgb, var(--danger) 11%, var(--mix-base));
    padding: 3px 9px; border-radius: 999px;
}

.rm-del {
    flex: none; border: 0; background: transparent; color: var(--text-muted);
    padding: 4px; cursor: pointer; line-height: 1; opacity: .75; position: relative;
}

.rm-del::after { content: ""; position: absolute; inset: -10px -8px; }
.rm-del svg { display: block; }

.rm-empty {
    text-align: center; padding: var(--space-8) var(--space-4);
    color: var(--text-muted); font-size: var(--fs-sm);
    font-weight: var(--fw-bold); line-height: 1.9;
}

/* لا صنفَ للزرّ هنا: هو `start-cta` داخل `classes-fab` — زرُّ شاشة الفصول
   بعينه. والحشوُ السفليُّ هو حشوُها (91px) ليمرَّ آخرُ سطرٍ من تحته. */
.rm-v2 { padding-bottom: 91px; }


/* ==========================================================================
   ملفّ الإنجاز — قسمُ الجداول وتوزيع المنهج (portfolio.js/renderSchedules)
   ========================================================================== */

.sc-h {
    font-size: 12.5px; font-weight: var(--fw-bold); color: var(--text-muted);
    margin: 0 2px 9px; display: flex; align-items: baseline; gap: 7px;
}

.sc-h .n { margin-inline-start: auto; font-size: 11px; }

.sc-sep { border: 0; border-top: 1px solid var(--border); margin: 20px 0; }

/* جدولُ الفصول: ثلاثةُ أعمدةٍ تسع الجوّال — والستّةُ كانت تُمرَّر أفقيّاً. */
.sc-tbl { width: 100%; border-collapse: collapse; }

.sc-tbl th, .sc-tbl td {
    padding: 9px 6px; border-bottom: 1px solid var(--border); text-align: start;
}

.sc-tbl th {
    font-size: 11px; font-weight: var(--fw-bold); color: var(--text-muted);
    border-bottom: 1.5px solid var(--border-strong);
}

.sc-tbl td { font-size: 13px; font-weight: var(--fw-bold); color: var(--ink-primary); }
.sc-tbl td.s { font-weight: 500; color: var(--text-muted); font-size: 12px; }

.sc-tbl td.n, .sc-tbl th.n {
    text-align: center; width: 62px; font-variant-numeric: tabular-nums;
}

.sc-tbl tr:last-child td { border-bottom: 0; }

/* الحاويةُ تترك تحتها مكانَ الزرّ العائم — وإلّا غطّى «إضافة قسم جديد».
   ٩١px هو حشوُ شاشة الفصول نفسُه، فالزرُّ زرُّها. */
.pf-v2 { padding-bottom: 91px; }

/* ==========================================================================
   شاشةُ ألوان التطبيق (الإعدادات ← ألوان التطبيق)
   ==========================================================================
   المنزلقُ (`input[type=range]`) أوّلُ منزلقٍ في شاشات الإعدادات، فتنسيقُه
   هنا لا في `components.css`: لا يستعمله غيرُها.
   ========================================================================== */
/* صفٌّ واحدٌ يُسحب لا صفّان يلتفّان: الدرجاتُ سُلَّمٌ متدرّج، وكسرُه إلى
   سطرين يقطع تسلسلَه. */
.cl-shades {
    display: flex;
    gap: 8px;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
}
.cl-shades::-webkit-scrollbar { display: none; }
.cl-sw {
    flex: none;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, .14);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28);
    cursor: pointer;
    padding: 0;
}
.cl-sw.on {
    outline: 3px solid var(--ink-primary);
    outline-offset: 2px;
}
.cl-bul {
    display: inline-block;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    margin-inline-end: 6px;
    vertical-align: -1px;
    border: 1px solid rgba(0, 0, 0, .12);
}
.cl-range {
    width: 100%;
    accent-color: var(--primary);
}
.cl-prev {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: var(--space-4);
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    color: var(--text-muted);
}
.cl-dot {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, .14);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28);
}
.cl-tx { font-variant-numeric: tabular-nums; letter-spacing: .5px; }

/* الرسومُ الخطّيّة (`js/icons.js`) — السماتُ على الوسم، وهذه محاذاتُها فقط.
   `1em` تعني أنّها تكبر وتصغر مع نصِّها، فلا مقاسَ في كلّ موضع. */
.ic {
    vertical-align: -0.14em;
    flex: none;
}

/* ==========================================================================
   تحيّةُ نهاية الأسبوع — أرضيّةُ لافتة «لا يوجد لديك فصول»
   ==========================================================================
   الأرضيّةُ والحدُّ ونصفُ القطر منقولةٌ من `.start-note` حرفاً بحرف بقراره
   (٣ سبتمبر ٢٠٢٦): «خلفيّتها ذهبي نفس لا يوجد لديك فصول». فإن غُيِّرت هناك
   تُغيَّر هنا — لونان ذهبيّان مختلفان في شاشةٍ واحدةٍ يُريان خطأً لا نمطاً.

   والحجمُ ‎19px‎ بوزن ‎500‎: تحيّةٌ لا عنوانُ شاشة. والشرحُ بحبر النصّ لا
   بالخافت — كلافتة `.start-note` تماماً، والقياسُ على الأرضيّة الذهبيّة
   لا على الأبيض.
   ========================================================================== */
.home-hero-alt.is-weekend {
    gap: 0;
    padding: 15px 16px;
    border-radius: 16px;
    background: color-mix(in srgb, var(--pf-gold) 15%, var(--mix-base));
    border: 1px solid color-mix(in srgb, var(--pf-gold) 45%, var(--mix-base));
    box-shadow: none;
}
.home-hero-alt.is-weekend .ha-t {
    font-size: 19px;
    font-weight: var(--fw-medium);
    letter-spacing: -0.2px;
    line-height: 1.7;
}
/* والسطرُ الثاني يُستثنى من قاعدة «بلا شروح» في `theme-white.css`: تلك
   القاعدةُ تُخفي `.home-hero-alt .ha-s` كلَّها لأنّها شروحُ أزرارٍ في
   الغالب («يومك خالٍ من الحصص — وقتٌ مناسبٌ لـ…»). و«نلقاك الأحد بإذن
   الله» ليست شرحاً بل تتمّةُ التحيّة — وهي التي عُرضت عليه فاختار عليها.
   والاستثناءُ مقصورٌ على هذه البطاقة، فبقيّةُ `.ha-s` تبقى مخفيّة. */
.home-hero-alt.is-weekend .ha-s {
    display: block !important;
    margin-top: var(--space-4);
    font-size: 13px;
    color: var(--text);
}

/* ==========================================================================
   مميزاتُ التطبيق — صفوفُ الإعدادات نفسُها
   ==========================================================================
   لا تنسيقَ جديدٌ هنا تقريباً: الشاشةُ تستعير `.set-group` و`.set-list`
   و`.set-row` كما هي، بقوله «خلّها منسجمة مع تصميم التطبيق العام».
   وثلاثةُ فروقٍ لا أكثر، وكلُّها **طرحٌ لا إضافة**:

   • الصفُّ لا يُضغط — فلا مؤشّرُ يدٍ ولا وميضٌ عند اللمس. الوميضُ يَعِد
     بفتحٍ لا يقع، ومن ضغط مرّتين ولم يُفتح شيءٌ ظنّ التطبيق معطوباً.
   • السطرُ الخافتُ يلتفّ ولا يُقصّ: في الإعدادات هو شرحُ زرٍّ يُغني عنه
     العنوان، وهنا هو **الميزةُ نفسُها** — فقصُّه يحذف المعنى.
   • ولا سهمَ `❯`، لأنّه في الإعدادات علامةُ فتح.
   ========================================================================== */
.feat-group .set-row { cursor: default; }
.feat-group .set-row:active { background: linear-gradient(150deg, #fff 0%, color-mix(in srgb, var(--beige) 30%, var(--mix-base)) 100%); }
/* والسطرُ الخافتُ يُستثنى من قاعدة «بلا شروح» في `theme-white.css`: تلك
   القاعدةُ تُخفي `.set-row .h` كلَّها لأنّها في الإعدادات شرحُ زرٍّ يُغني
   عنه عنوانُه. وهنا العنوانُ اسمُ الميزة، والسطرُ **هو الميزةُ نفسُها** —
   فإخفاؤه يترك عشرةَ أسماءٍ لا تقول شيئاً. والاستثناءُ مقصورٌ على هذه
   الشاشة، وصفوفُ الإعدادات تبقى كما أرادها بلا شروح. */
.feat-group .set-row .h {
    display: block !important;
    white-space: normal;
    font-size: 12px;
    line-height: 1.7;
    margin-top: 3px;
}

/* ==========================================================================
   ملاحظاتكم
   ==========================================================================
   الصندوقُ كبيرٌ عمداً (‎7‎ أسطر): من رأى صندوقاً ضيّقاً كتب سطراً، ومن
   رأى صندوقاً واسعاً كتب ما عنده — وهذا كلُّه ما نريده منه.
   ========================================================================== */
.fb-wrap { max-width: 640px; padding-bottom: var(--space-10); }

.fb-hero {
    display: flex; flex-direction: column; align-items: center;
    text-align: center; gap: 6px;
    margin-top: var(--space-3);
    padding: var(--space-6) var(--space-5);
    border-radius: 20px;
    background: color-mix(in srgb, var(--pf-gold) 15%, var(--mix-base));
    border: 1px solid color-mix(in srgb, var(--pf-gold) 45%, var(--mix-base));
}
.fb-hero-ic { color: var(--pf-gold); }
.fb-hero-ic svg { width: 30px; height: 30px; stroke-width: 1.5; }
.fb-hero b { font-size: 19px; color: var(--ink-primary); }
.fb-hero span:last-child {
    font-size: 13px; color: var(--text); line-height: 1.8; max-width: 34ch;
}

.fb-kinds {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 8px; margin-top: var(--space-6);
}
.fb-kind {
    display: flex; flex-direction: column; align-items: center; gap: 5px;
    padding: 11px 4px;
    border-radius: 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text);
    font-size: 12.5px; font-weight: var(--fw-medium);
    cursor: pointer;
}
.fb-kind svg { width: 19px; height: 19px; }
.fb-kind.on {
    background: color-mix(in srgb, var(--pf-gold) 18%, var(--mix-base));
    border-color: var(--pf-gold);
    color: var(--ink-primary);
    font-weight: var(--fw-bold);
}

.fb-lbl {
    display: block; margin: var(--space-6) 0 var(--space-2);
    font-size: 13px; font-weight: var(--fw-bold); color: var(--ink-primary);
}
.fb-text {
    width: 100%;
    padding: var(--space-4);
    border-radius: 14px;
    border: 1px solid var(--border-strong);
    background: var(--surface);
    color: var(--text);
    font-family: inherit; font-size: 15px; line-height: 1.9;
    resize: vertical;
}
.fb-text:focus { outline: 2px solid var(--ink-primary); outline-offset: 1px; }
.fb-count {
    margin-top: 4px; text-align: left;
    font-size: var(--fs-xs); color: var(--text-muted);
}

.fb-who {
    display: flex; align-items: center; gap: 8px;
    margin-top: var(--space-4);
    padding: 11px 13px;
    border-radius: 12px;
    background: var(--surface-alt);
    border: 1px solid var(--border);
    font-size: 12.5px; color: var(--text-muted); line-height: 1.7;
}
.fb-who svg { flex: none; width: 17px; height: 17px; color: var(--ink-primary); }
.fb-who b { color: var(--ink-primary); }

.fb-send {
    width: 100%; margin-top: var(--space-5);
    padding: 14px;
    border: 0; border-radius: 14px;
    /* والحبرُ `--surface` لا `--text-inverse`: الأخيرُ أبيضُ في المظهرين
       معاً، و`--ink-primary` على الداكن أبيضُ أيضاً — فيصير الزرُّ أبيضَ
       على أبيض (‎1.09‎). و`--surface` يتبع المظهر فيقلب معه: أبيضُ على
       البتروليّ (‎10.32‎)، وداكنٌ على الفاتح (‎15.3‎). */
    background: var(--ink-primary); color: var(--surface);
    font-family: inherit; font-size: 15px; font-weight: var(--fw-bold);
    cursor: pointer;
}
.fb-send:disabled { opacity: .6; cursor: default; }

/* والنتيجةُ تُقال بلونٍ ونصّ معاً — لا بلونٍ وحدَه: من لا يميّز الأخضرَ
   من الأحمر يقرأ الجملة. */
.fb-note { margin: var(--space-3) 0 0; font-size: 13px; line-height: 1.8; min-height: 1.8em; }
/* ولا يُستعمل `--success`/`--danger` هنا: قيسا على الأبيض فكانا ‎2.54‎
   و‎3.76‎ — تحت العتبة. وهو الدرسُ المسجَّلُ في `class.js:21` نفسُه: لونُ
   الحالةِ الفاتحُ للأرضيّات لا للحبر. فحبرٌ غامقٌ صريحٌ هنا: ‎6.52‎ و‎6.57‎
   على الأبيض. */
.fb-note.is-good { color: #0E6B4A; }
.fb-note.is-bad  { color: #B42318; }