/*
  golden.css — «الشاشات الذهبية» (Golden Screens): الغلاف + الرئيسية + الطلاب + ملف الطالب + الحلقة + الحضور + التحفيز.
  يُحمَّل آخر ملف تنسيق للتطبيق المصادَق عليه (layout/app). لا ألوان ثابتة: tokens و data-accent فقط.
  الوثيقة: docs/ui-design-system.md §«الشاشات الذهبية».
*/

/* =====================================================================
   1) نظام عروض الصفحات (سطح المكتب مع الشريط الجانبي)
   wide = لوحات وجداول وتقارير · standard = تفاصيل متوازنة · focused = نماذج وإعدادات
   ===================================================================== */
@media (min-width: 1024px) {
  .app-shell--sidebar { grid-template-columns: 232px minmax(0, 1fr); }
  .app-shell--sidebar .app-main { padding-inline: var(--space-6); padding-top: var(--space-5); }
  .app-shell--sidebar .container.app-layout--wide { max-width: 1680px; }
  .app-shell--sidebar .container.app-layout--standard { max-width: 1440px; }
  .app-shell--sidebar .container.app-layout--focused { max-width: 780px; }
}
@media (min-width: 1440px) {
  .app-shell--sidebar .app-main { padding-inline: var(--space-8); }
}

/* =====================================================================
   2) الشريط الجانبي: أخف وأضيق، فواصل هادئة، تحديد واضح
   ===================================================================== */
@media (min-width: 1024px) {
  .sidebar {
    gap: var(--space-3);
    padding: var(--space-4) var(--space-3) var(--space-3);
    box-shadow: none;
    background: var(--color-surface);
  }
  .sidebar__brand {
    gap: 10px;
    padding: var(--space-1) var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--color-divider);
    font-size: var(--font-size-sm);
    line-height: 1.35;
  }
  .sidebar__logo { height: 36px; }
  .sidebar__nav { gap: var(--space-4); }
  .sidebar__group { gap: 1px; }
  .sidebar__label {
    margin: 0 10px 4px;
    font-size: 0.75rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-faint);
  }
  .sidebar__link {
    min-height: 40px;
    padding: 0 10px;
    gap: 10px;
    border-radius: var(--radius-control);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
  }
  .sidebar__link svg { width: 19px; height: 19px; color: var(--color-text-faint); }
  .sidebar__link:hover { background: var(--color-surface-secondary); color: var(--color-text); }
  .sidebar__link.is-active {
    background: color-mix(in srgb, var(--color-primary) 9%, #fff);
    color: var(--color-primary-dark);
    font-weight: var(--font-weight-semibold);
  }
  .sidebar__link.is-active::before { inset-block: 10px; width: 3px; }
  .sidebar__link.is-active svg { color: var(--color-primary); }
  .sidebar__account { padding-top: var(--space-2); border-top: 1px solid var(--color-divider); }
  .sidebar__logout-row { min-height: 38px; font-size: 0.8125rem; }
}

/* =====================================================================
   3) الشريط العلوي: سياق مفيد بدل الفراغ
   ===================================================================== */
.topbar__ctx { display: none; }

@media (min-width: 1024px) {
  .app-shell--sidebar .topbar.topbar { height: 60px; padding-inline: var(--space-6); gap: var(--space-5); }
  .topbar__ctx { display: flex; align-items: center; gap: var(--space-3); min-width: 0; margin-inline-end: auto; }
  .topbar__page { font-size: var(--font-size-lg); font-weight: var(--font-weight-bold); color: var(--color-text); }
  .topbar__date {
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    background: var(--color-fill);
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    white-space: nowrap;
  }
  .app-shell--sidebar .topbar .topbar__crumbs { flex: 1; }
  .topbar__tool { width: 38px; height: 38px; border-color: transparent; background: var(--color-fill); }
  .topbar__user { padding: 2px 3px 2px 12px; border-color: transparent; background: var(--color-fill); }
  .topbar__user:hover { background: var(--color-surface-secondary); }
}

/* =====================================================================
   4) الأساسيات المشتركة للشاشات الذهبية
   ===================================================================== */
.panel__sub { margin-inline-start: auto; font-size: var(--font-size-xs); color: var(--color-text-muted); }

/* رأس صفحة مدمج: العنوان + سطر سياق + إجراءات في سطر واحد */
.gh {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-4);
  margin: 0 0 var(--space-4);
}
.gh__text { flex: 1 1 280px; min-width: 0; }
.gh__title { margin: 0; font-size: var(--font-size-xl); font-weight: var(--font-weight-bold); line-height: 1.35; }
.gh__sub { margin: 2px 0 0; font-size: var(--font-size-sm); color: var(--color-text-muted); line-height: 1.5; }
.gh__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
@media (min-width: 1024px) { .gh__title { font-size: var(--font-size-2xl); } }

/* =====================================================================
   5) الرئيسية
   ===================================================================== */
.hero-banner {
  min-height: 0;
  margin-bottom: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-card);
}
.hero-banner__body { max-width: 62%; }
.hero-banner .hero__title { margin: 2px 0 2px; font-size: var(--font-size-xl); }
.hero-banner .hero__sub { margin: 0; font-size: var(--font-size-md); }
.hero-banner__day {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-muted);
}
.hero-banner__actions { margin-top: var(--space-3); }
.hero-banner__actions .btn { min-height: 44px; }

@media (min-width: 768px) {
  .hero-banner { padding: var(--space-5) var(--space-7); min-height: 150px; display: flex; align-items: center; }
  .hero-banner .hero__title { font-size: var(--font-size-2xl); }
}
@media (min-width: 1440px) {
  .hero-banner { min-height: 164px; }
  .hero-banner .hero__title { font-size: var(--font-size-hero-compact, 1.75rem); }
}
@media (max-width: 599px) {
  .hero-banner { padding: var(--space-4); }
  .hero-banner__body { max-width: none; }
}

/* رسم خطّي: قبّة ومئذنتان بخط رفيع + بقع ناعمة + نجمة مفرغة (ألوان العلامة فقط) */
.hero-art { max-width: 46%; aspect-ratio: 420 / 200; }
.hero-art__blob { fill: color-mix(in srgb, var(--color-primary) 11%, transparent); }
.hero-art__blob--b { fill: color-mix(in srgb, var(--color-accent-gold, var(--color-primary)) 16%, transparent); }
.hero-art__ring { fill: none; stroke: color-mix(in srgb, var(--color-primary) 22%, #fff); stroke-width: 1.2; }
.hero-art__ring--dash { stroke-dasharray: 3 6; stroke: color-mix(in srgb, var(--color-primary) 26%, #fff); }
.hero-art__star { fill: color-mix(in srgb, #fff 55%, transparent); stroke: color-mix(in srgb, var(--color-primary) 30%, #fff); stroke-width: 1.2; }
.hero-art__line { fill: none; stroke: color-mix(in srgb, var(--color-primary) 46%, #fff); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hero-art__fill { fill: color-mix(in srgb, var(--color-primary) 40%, #fff); stroke: none; }
.hero-art__dots { fill: color-mix(in srgb, var(--color-primary) 32%, #fff); }
.hero-art__city, .hero-art__door, .hero-art__disc { display: none; }

.kpis { gap: var(--space-3); margin-bottom: var(--space-4); }
@media (min-width: 1024px) { .kpis { gap: var(--space-4); } }
.kpi { padding: 14px 18px; }
.kpi__top { flex-direction: row-reverse; justify-content: space-between; }
@media (min-width: 1024px) { .kpi__value { font-size: 2rem; } .kpi__icon { width: 46px; height: 46px; } }

.dash { display: grid; gap: var(--space-4); }
.dash__main, .dash__side { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.dash .panel + .panel { margin-top: 0; }
@media (min-width: 1100px) {
  .dash { grid-template-columns: minmax(0, 1.6fr) minmax(320px, 1fr); align-items: start; }
}
@media (min-width: 1600px) {
  .dash { grid-template-columns: minmax(0, 1.8fr) minmax(380px, 1fr); }
}

.panel .attn { gap: 8px; }
@media (min-width: 1100px) {
  .dash .panel .attn { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dash .panel .attn .attn__more { grid-column: 1 / -1; }
}

.trend-pair { display: grid; gap: var(--space-5); }
@media (min-width: 900px) { .trend-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); } .trend-pair--single { grid-template-columns: 1fr; } }

.quick-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }

/* =====================================================================
   6) الطلاب: مساحة عمل واحدة (شريط أدوات + ملخص + جدول) وقائمة إجراءات «⋯»
   ===================================================================== */
.workspace {
  background: var(--color-surface);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}
.workspace > :first-child { border-start-start-radius: var(--radius-card); border-start-end-radius: var(--radius-card); }
.workspace .filter-bar {
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border: 0;
  border-radius: var(--radius-card) var(--radius-card) 0 0;
  box-shadow: none;
  background: none;
}
.workspace .filter-bar .search .field__input,
.workspace .filter-bar__select .field__select { min-height: 42px; }
.workspace .list-meta--bar {
  margin: 0;
  padding: 8px var(--space-4);
  border-block: 1px solid var(--color-divider);
  background: var(--color-surface-secondary);
  font-size: var(--font-size-xs);
}
.workspace .list-meta--bar .list-meta__count { font-weight: var(--font-weight-medium); color: var(--color-text-muted); }
.workspace .stbl { border: 0; border-radius: 0 0 var(--radius-card) var(--radius-card); box-shadow: none; }
.workspace .empty-state { margin: var(--space-6) auto; }

@media (min-width: 768px) {
  .workspace .filter-bar__select { width: 172px; }
}

/* الصف: هاتف = سطر هوية (صورة + اسم + «⋯») ثم وسوم؛ عريض = أعمدة */
.srow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  padding: 12px var(--space-4);
}
.srow__who { order: 0; flex: 1 1 calc(100% - 56px); display: flex; align-items: center; gap: var(--space-3); min-width: 0; color: inherit; }
.srow__menu { order: 1; }
.srow__cell { order: 2; }
.srow__who:hover .srow__name { color: var(--color-primary); }
.srow__name { font-size: var(--font-size-md); }
.srow__who .avatar { flex-shrink: 0; }
.srow__att { display: block; }
.srow__eval { display: none; }
@media (hover: hover) { .srow:hover { background: var(--color-surface-warm); } }

@media (min-width: 768px) {
  .stbl__head,
  .srow {
    display: grid;
    grid-template-columns: minmax(220px, 2.6fr) minmax(120px, 1.3fr) minmax(150px, 1.3fr) minmax(110px, 1fr) 84px 44px;
    gap: var(--space-3);
    padding: 10px var(--space-4);
  }
  .stbl__head { padding-block: 9px; background: var(--color-surface-secondary); }
  .srow { min-height: 64px; }
  .srow__who, .srow__menu, .srow__cell { order: 0; flex: none; }
  .srow__eval { display: block; }
  .srow__who .avatar { width: 40px; height: 40px; }
}

/* قائمة الإجراءات (details): زر دائري صغير + قائمة عائمة؛ تُغلق بالنقر خارجها (app.js) */
.rmenu { position: relative; justify-self: end; }
.rmenu > summary { list-style: none; }
.rmenu > summary::-webkit-details-marker { display: none; }
.rmenu__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: var(--color-text-muted);
  cursor: pointer;
}
.rmenu__btn:hover, .rmenu[open] > .rmenu__btn { background: var(--color-fill); color: var(--color-text); }
.rmenu__list {
  position: absolute;
  z-index: 30;
  inset-block-start: calc(100% + 4px);
  inset-inline-end: 0;
  display: flex;
  flex-direction: column;
  min-width: 190px;
  padding: 6px;
  background: var(--color-surface);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-float);
}
.rmenu__list a {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 42px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-control);
  color: var(--color-text);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}
.rmenu__list a svg { color: var(--color-text-faint); }
.rmenu__list a:hover { background: var(--color-surface-secondary); }
.rmenu__list a:hover svg { color: var(--color-primary); }
.app-main .rmenu__btn { min-height: 40px; justify-content: center; color: var(--color-text-muted); }
.app-main .rmenu__btn::after { display: none; }

/* =====================================================================
   7) ملف الطالب: مساحة عمل (هوية + تبويبات + محتوى التبويب)
   ===================================================================== */
.pcard { margin-bottom: var(--space-3); gap: var(--space-4); }
.pcard__photo .avatar { width: 88px; height: 88px; font-size: 32px; }
.pcard__name { font-size: var(--font-size-xl); }
.pcard__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.pcard__actions > :first-child:nth-last-child(odd) { grid-column: auto; }
.pcard__actions .btn { min-height: 44px; }
@media (max-width: 599px) {
  .pcard__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pcard__actions .btn { width: 100%; padding-inline: var(--space-2); }
  .pcard__actions > :first-child:nth-last-child(odd) { grid-column: 1 / -1; }
}
@media (min-width: 768px) {
  .pcard { padding: var(--space-5) var(--space-6); }
  .pcard__actions { width: auto; flex-direction: row; justify-content: flex-end; max-width: 46%; }
  .pcard__photo .avatar { width: 96px; height: 96px; font-size: 36px; }
  .pcard__name { font-size: var(--font-size-2xl); }
}

.pgrid { display: grid; gap: var(--space-4); margin-top: var(--space-4); }
.pgrid__main, .pgrid__side { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.pgrid .panel + .panel { margin-top: 0; }
@media (min-width: 1100px) { .pgrid { grid-template-columns: minmax(0, 1.7fr) minmax(300px, 1fr); align-items: start; } }

.panel__action { margin-inline-start: auto; }

/* ملخص المتابعة: بلاطات تفتح تبويباتها */
.fup { display: grid; gap: var(--space-3); }
@media (min-width: 700px) { .fup { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fup__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid var(--tint-line);
  border-radius: var(--radius-tile);
  background: var(--tint-soft);
  color: inherit;
}
@media (hover: hover) { .fup__item:hover { box-shadow: var(--shadow-sm); } }
.fup__icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0; background: color-mix(in srgb, var(--tint) 18%, #fff); color: var(--tint-ink); }
.fup__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.fup__title { font-weight: var(--font-weight-bold); font-size: var(--font-size-md); }
.fup__meta { font-size: var(--font-size-meta); color: var(--color-text-muted); line-height: 1.5; overflow-wrap: break-word; }
.fup__value { font-size: var(--font-size-xl); font-weight: var(--font-weight-bold); color: var(--tint-ink); font-variant-numeric: tabular-nums; }

.contacts { display: flex; flex-direction: column; gap: var(--space-3); }
.contacts--wide { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.contact { display: flex; align-items: center; gap: var(--space-3); min-width: 0; padding: 10px 12px; border: 1px solid var(--color-hairline); border-radius: var(--radius-tile); background: var(--color-surface-secondary); }
.contact__body { flex: 1; min-width: 0; display: flex; flex-direction: column; color: inherit; }
.contact__name { font-weight: var(--font-weight-semibold); overflow-wrap: break-word; }
.contact__meta { font-size: var(--font-size-meta); color: var(--color-text-muted); }

.kpis--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: var(--space-4); }
@media (min-width: 768px) { .kpis--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* جدول خفيف (سجل الحضور / التقييمات): صفوف بأعمدة على العريض، مركّبة على الهاتف */
.ltable { display: flex; flex-direction: column; border: 1px solid var(--color-hairline); border-radius: var(--radius-tile); overflow: hidden; }
.ltable__head { display: none; }
.ltable__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px var(--space-3);
  padding: 11px var(--space-4);
  color: inherit;
}
.ltable__row + .ltable__row { border-top: 1px solid var(--color-divider); }
.ltable__main { font-weight: var(--font-weight-semibold); }
.ltable__cell { min-width: 0; font-size: var(--font-size-sm); }
.ltable__note { color: var(--color-text-muted); overflow-wrap: break-word; grid-column: 1 / -1; }
.ltable__go { display: none; }
a.ltable__row:hover { background: var(--color-surface-warm); }
@media (min-width: 768px) {
  .ltable__head, .ltable__row { display: grid; grid-template-columns: minmax(180px, 1.3fr) minmax(140px, 1fr) minmax(100px, 0.8fr); }
  .ltable--eval .ltable__head, .ltable--eval .ltable__row { grid-template-columns: minmax(140px, 1fr) 120px minmax(160px, 2fr) 24px; }
  .ltable__head { padding: 9px var(--space-4); background: var(--color-surface-secondary); border-bottom: 1px solid var(--color-hairline); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); color: var(--color-text-muted); }
  .ltable__note { grid-column: auto; }
  .ltable__go { display: flex; color: var(--color-text-faint); }
}

.perf-row + .perf-row { margin-top: var(--space-4); }
.perf-row__top { display: flex; justify-content: space-between; gap: var(--space-3); font-weight: var(--font-weight-semibold); }
.perf-row__val { color: var(--tint-ink); }
.perf-row__bar { height: 8px; margin: 6px 0; border-radius: var(--radius-pill); background: var(--tint-soft); overflow: hidden; }
.perf-row__bar > span { display: block; height: 100%; border-radius: inherit; background: var(--tint); }
.perf-row__meta { font-size: var(--font-size-xs); color: var(--color-text-muted); }

.pmgmt { margin-top: var(--space-6); max-width: 980px; }

/* =====================================================================
   8) الحلقة: مساحة عمل (رأس + مقاييس + تبويبات + محتوى)
   ===================================================================== */
.gcard {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-bottom: var(--space-3);
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-card);
}
.gcard__id { display: flex; align-items: center; gap: var(--space-4); min-width: 0; }
.gcard__badge { display: grid; place-items: center; width: 64px; height: 64px; flex-shrink: 0; border-radius: var(--radius-card); background: var(--tint-soft); color: var(--tint-ink); }
.gcard__body { min-width: 0; flex: 1; }
.gcard__name { margin: 0 0 6px; font-size: var(--font-size-xl); font-weight: var(--font-weight-bold); line-height: 1.4; overflow-wrap: break-word; }
@media (min-width: 768px) {
  .gcard { flex-direction: row; align-items: center; justify-content: space-between; padding: var(--space-5) var(--space-6); }
  .gcard__badge { width: 76px; height: 76px; }
  .gcard__name { font-size: var(--font-size-2xl); }
}
.pgrid--flat { margin-top: 0; }

/* جدول طلاب الحلقة: صفوف بشريط حضور */
.gtbl { display: flex; flex-direction: column; border: 1px solid var(--color-hairline); border-radius: var(--radius-tile); overflow: hidden; }
.gtbl__head { display: none; }
.grow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 150px 24px;
  align-items: center;
  gap: var(--space-3);
  padding: 10px var(--space-4);
  color: inherit;
}
.grow + .grow { border-top: 1px solid var(--color-divider); }
@media (hover: hover) { a.grow:hover { background: var(--color-surface-warm); } a.grow:hover .grow__name { color: var(--color-primary); } }
.grow__who { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.grow__name { font-weight: var(--font-weight-semibold); line-height: 1.45; overflow-wrap: break-word; }
.grow__att { display: flex; align-items: center; gap: var(--space-2); --bar: var(--color-text-faint); }
.grow__att[data-tone='ok'] { --bar: var(--color-success); }
.grow__att[data-tone='warn'] { --bar: var(--color-warning); }
.grow__att[data-tone='danger'] { --bar: var(--color-danger); }
.grow__bar { flex: 1; height: 8px; border-radius: var(--radius-pill); background: var(--color-fill); overflow: hidden; }
.grow__bar > span { display: block; height: 100%; border-radius: inherit; background: var(--bar); }
.grow__pct { min-width: 36px; font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); text-align: end; }
.grow__eval, .grow__gm { display: none; font-size: var(--font-size-sm); }
.grow__go { display: flex; color: var(--color-text-faint); }
.grow__cta { display: none; align-items: center; gap: 4px; font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--color-primary); }
.grow--eval { grid-template-columns: minmax(0, 1fr) auto; }
.grow--eval .grow__eval { display: block; }
.grow--eval .grow__cta { display: inline-flex; }
@media (max-width: 599px) { .grow { grid-template-columns: minmax(0, 1fr) 96px 20px; padding-inline: var(--space-3); } .grow--eval { grid-template-columns: minmax(0, 1fr) auto; } .grow--eval .grow__cta { display: none; } }
@media (min-width: 768px) {
  .gtbl__head { display: grid; grid-template-columns: minmax(0, 1fr) 180px 24px; gap: var(--space-3); padding: 9px var(--space-4); background: var(--color-surface-secondary); border-bottom: 1px solid var(--color-hairline); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); color: var(--color-text-muted); }
  .grow { grid-template-columns: minmax(0, 1fr) 180px 24px; min-height: 60px; }
  .gtbl:not(.gtbl--compact) .gtbl__head, .gtbl:not(.gtbl--compact) .grow { grid-template-columns: minmax(0, 1.6fr) minmax(140px, 1fr) minmax(110px, 0.8fr) 24px; }
  .gtbl--gm .gtbl__head, .gtbl--gm .grow { grid-template-columns: minmax(0, 1.6fr) minmax(140px, 1fr) minmax(110px, 0.8fr) minmax(130px, 0.9fr) 24px; }
  .gtbl:not(.gtbl--compact) .grow__eval, .gtbl:not(.gtbl--compact) .grow__gm { display: block; }
  .gtbl--eval .gtbl__head, .gtbl--eval .grow { grid-template-columns: minmax(0, 1.6fr) minmax(140px, 1fr) 140px; }
}

.panel__foot { display: flex; align-items: center; justify-content: center; gap: 4px; margin: var(--space-3) calc(var(--space-4) * -1) calc(var(--space-4) * -1); padding: 12px; border-top: 1px solid var(--color-divider); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--color-primary); }

/* الجلسات: شريط حضور لكل جلسة */
.sess-list { display: flex; flex-direction: column; }
.sess { display: grid; grid-template-columns: minmax(150px, 1fr) minmax(80px, 1.4fr) auto; align-items: center; gap: var(--space-3); padding: 11px 0; color: inherit; }
.sess + .sess { border-top: 1px solid var(--color-divider); }
.sess__date { font-weight: var(--font-weight-semibold); font-size: var(--font-size-sm); }
.sess__bar { height: 8px; border-radius: var(--radius-pill); background: var(--accent-groups-soft); overflow: hidden; }
.sess__bar > span { display: block; height: 100%; border-radius: inherit; background: var(--accent-groups); }
.sess__num { font-size: var(--font-size-sm); color: var(--color-text-muted); white-space: nowrap; }
@media (max-width: 599px) { .sess { grid-template-columns: 1fr auto; } .sess__bar { grid-column: 1 / -1; order: 3; } }
@media (hover: hover) { a.sess:hover .sess__date { color: var(--color-primary); } }
.sess-list--full .sess { padding-inline: 0; }

/* بطاقة «اليوم» */
.today-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  border: 1px solid var(--tint-line);
  border-radius: var(--radius-card);
  background: var(--tint-soft);
  box-shadow: var(--shadow-card);
}
.today-card__day { display: inline-flex; align-items: center; gap: 6px; font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); color: var(--tint-ink); }
.today-card__title { margin: 0; font-size: var(--font-size-lg); font-weight: var(--font-weight-bold); }
.today-card__sub { margin: 0 0 var(--space-2); font-size: var(--font-size-sm); color: var(--color-text-muted); line-height: 1.6; }
.today-card .btn { align-self: flex-start; }

/* إنجازات الحلقة */
.gm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-3); }
.gm-card { display: flex; align-items: center; gap: var(--space-3); min-width: 0; padding: 12px 14px; border: 1px solid var(--tint-line); border-radius: var(--radius-tile); background: var(--tint-soft); color: inherit; }
.gm-card__art { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: color-mix(in srgb, var(--tint) 18%, #fff); color: var(--tint-ink); }
.gm-card__body { min-width: 0; display: flex; flex-direction: column; }
.gm-card__name { font-weight: var(--font-weight-bold); overflow-wrap: break-word; }
.gm-card__meta { font-size: var(--font-size-meta); color: var(--color-text-muted); }

/* =====================================================================
   9) الحضور: مهمة كثيفة وسريعة
   ===================================================================== */
.atask {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-card);
}
.atask__id { display: flex; align-items: center; gap: var(--space-3); min-width: 0; flex: 1; }
.atask__badge { display: grid; place-items: center; width: 48px; height: 48px; flex-shrink: 0; border-radius: var(--radius-control); background: var(--tint-soft); color: var(--tint-ink); }
.atask__body { min-width: 0; }
.atask__title { margin: 0; font-size: var(--font-size-lg); font-weight: var(--font-weight-bold); line-height: 1.4; overflow-wrap: break-word; }
.atask__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px var(--space-3); font-size: var(--font-size-xs); color: var(--color-text-muted); }
.atask__meta > span { display: inline-flex; align-items: center; gap: 5px; }
.atask__save { display: none; }
.atask__date { display: flex; align-items: center; gap: var(--space-2); }

.datenav__btn { display: grid; place-items: center; width: 40px; height: 40px; flex-shrink: 0; border: 1px solid var(--color-hairline); border-radius: var(--radius-control); background: var(--color-surface); color: var(--color-text-muted); }
.datenav__btn:hover { color: var(--color-primary); border-color: var(--tint-line); }
.datenav__field { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 1; min-width: 150px; height: 40px; padding-inline: var(--space-3); border: 1px solid var(--color-field-border); border-radius: var(--radius-control); background: var(--color-surface); }
.datenav__day { font-size: 0.6875rem; line-height: 1; color: var(--color-text-muted); font-weight: var(--font-weight-semibold); }
.datenav__input { width: 100%; padding: 0; border: 0; background: none; font: inherit; font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); text-align: center; color: var(--color-text); direction: ltr; }
.datenav__input:focus { outline: none; }
.datenav__field:focus-within { outline: 2px solid var(--color-primary); outline-offset: 1px; }

@media (min-width: 900px) {
  .atask { flex-direction: row; align-items: center; padding: var(--space-3) var(--space-5); gap: var(--space-5); }
  .atask__date { flex: 0 0 auto; }
  .atask__save { display: block; }
  .atask__save .btn { min-height: 46px; }
}

/* الملخص المضغوط: شرائح بأرقام الحالة (الدلالة الثابتة) + أدوات الدفعة */
.asum { display: flex; flex-direction: column; gap: var(--space-2); }
.asum__chips { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-2); }
.asum__chip {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 10px 14px;
  border-radius: var(--radius-tile);
  background: var(--tint-soft);
  color: var(--tint-ink);
  font-size: var(--font-size-sm);
}
.asum__chip svg { flex-shrink: 0; }
.asum__n { font-size: var(--font-size-xl); font-weight: var(--font-weight-bold); line-height: 1.1; min-width: 1ch; text-align: center; }
.asum__l { font-weight: var(--font-weight-semibold); }
/* ألوان الحضور: إجمالي أزرق · حاضر أخضر · غائب مرجاني · مستأذن عنبري · متأخر بنفسجي (مصمتة، والصف نفسه غير ملوَّن) */
.asum__chip--present { --tint-soft: var(--accent-habits-soft); --tint-ink: var(--accent-habits-ink); }
.asum__chip--absent { --tint-soft: var(--accent-registration-soft); --tint-ink: var(--accent-registration-ink); }
.asum__chip--late { --tint-soft: var(--accent-groups-soft); --tint-ink: var(--accent-groups-ink); }
.asum__chip--excused { --tint-soft: var(--accent-achievements-soft); --tint-ink: var(--accent-achievements-ink); }
.asum__tools { display: flex; gap: var(--space-1); }
.asum__tools .btn { min-height: 38px; }

/* قائمة الطلاب كثيفة: صف لكل طالب (هوية + أزرار شرائحية)، وعمودان على العريض */
.att-list { border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
.att-card { padding: 8px var(--space-3); }
.att-card__who { margin-bottom: 8px; }
.att-card__who .avatar { width: 40px; height: 40px; font-size: 15px; }
.att-card__name { font-size: var(--font-size-sm); }
.att-card__sub { display: block; font-size: 0.6875rem; font-weight: var(--font-weight-normal); color: var(--color-text-muted); }
.att-choices { gap: 4px; }
.att-choice { min-height: 44px; flex-direction: row; gap: 5px; border: 1px solid transparent; font-size: var(--font-size-xs); }
.att-choice svg { width: 16px; height: 16px; }
@media (max-width: 420px) { .att-choice { flex-direction: column; gap: 1px; min-height: 48px; font-size: 0.6875rem; } }
@media (hover: hover) { .att-choice:hover { border-color: var(--color-border-strong); background: var(--color-surface); } }
.att-choice__input--present:checked + .att-choice,
.att-choice__input--absent:checked + .att-choice,
.att-choice__input--late:checked + .att-choice,
.att-choice__input--excused:checked + .att-choice { border-color: transparent; box-shadow: 0 1px 2px rgb(0 0 0 / 0.12); }

@media (min-width: 640px) {
  .att-card { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: 8px var(--space-4); }
  .att-card__who { margin: 0; flex: 1; }
  .att-choices { flex: 0 0 auto; width: 340px; }
  .att-choice { min-height: 40px; }
}
@media (min-width: 1100px) {
  .att-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--color-divider-solid); }
  .att-card + .att-card { border-top: 0; }
  .att-choices { width: 320px; }
}

.sticky-actions { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.sticky-actions__sum { font-size: var(--font-size-sm); color: var(--color-text-muted); white-space: nowrap; }
.sticky-actions .btn { flex: 1; }
@media (min-width: 1024px) {
  .app-shell--sidebar .sticky-actions { margin-top: var(--space-4); padding: var(--space-3) var(--space-5); border-radius: var(--radius-card) var(--radius-card) 0 0; }
  .sticky-actions .btn { flex: 0 0 auto; min-width: 220px; min-height: 48px; font-size: var(--font-size-md); }
}

/* =====================================================================
   10) التحفيز والإنجازات: ميدان أكثر حيوية (كهرماني) بضبط
   ===================================================================== */
.tabstrip {
  gap: 6px;
  margin-bottom: var(--space-5);
  padding: 5px;
  border: 1px solid var(--accent-achievements-line);
  background: var(--accent-achievements-soft);
}
.tabstrip a { min-height: 46px; border-radius: var(--radius-control); font-weight: var(--font-weight-semibold); color: var(--accent-achievements-ink); }
.tabstrip a svg { opacity: 0.8; }
.tabstrip a[aria-current] {
  background: var(--accent-achievements-ink);
  color: #fff;
  box-shadow: 0 2px 8px -2px color-mix(in srgb, var(--accent-achievements-ink) 55%, transparent);
}
.tabstrip a[aria-current] svg { opacity: 1; }
@media (hover: hover) { .tabstrip a:hover:not([aria-current]) { background: color-mix(in srgb, #fff 70%, transparent); color: var(--accent-achievements-ink); } }
@media (min-width: 900px) { .tabstrip { display: inline-flex; max-width: 100%; } .tabstrip a { flex: 0 0 auto; padding-inline: var(--space-5); } }

.dash--gm { align-items: start; }
@media (min-width: 1100px) { .dash--gm { grid-template-columns: minmax(0, 1.7fr) minmax(320px, 1fr); } }

/* آخر المنح: بلاطات الشارة هي البطل */
.award-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
@media (min-width: 640px) { .award-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .award-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.award-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 0;
  padding: var(--space-4) var(--space-3) var(--space-3);
  border: 1px solid var(--tint-line);
  border-radius: var(--radius-card);
  background: var(--tint-soft);
  color: inherit;
  text-align: center;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
@media (hover: hover) { .award-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); } }
.award-tile__name { margin-top: 6px; font-weight: var(--font-weight-bold); font-size: var(--font-size-md); line-height: 1.4; overflow-wrap: anywhere; }
.award-tile__who { font-size: var(--font-size-sm); color: var(--color-text-muted); overflow-wrap: anywhere; }
.award-tile__meta { display: inline-flex; align-items: center; gap: 6px; font-size: var(--font-size-xs); color: var(--color-text-faint); }

/* التحديات: أسطح تقدّم */
.chal-list { display: flex; flex-direction: column; gap: var(--space-3); }
.chal {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  border: 1px solid var(--tint-line);
  border-radius: var(--radius-tile);
  background: var(--tint-soft);
  color: inherit;
}
.chal__top { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); }
.chal__title { font-weight: var(--font-weight-bold); overflow-wrap: anywhere; }
.chal__pct { font-size: var(--font-size-lg); font-weight: var(--font-weight-bold); color: var(--tint-ink); }
.chal__bar { height: 10px; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--tint) 16%, #fff); overflow: hidden; }
.chal__bar > span { display: block; height: 100%; border-radius: inherit; background: var(--tint); }
.chal__meta { font-size: var(--font-size-xs); color: var(--color-text-muted); }
.chal-grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.chal--lg { padding: var(--space-4); gap: 10px; }
.chal--lg .chal__title { font-size: var(--font-size-lg); }
.chal--muted { opacity: 0.72; --tint: var(--color-text-faint); --tint-soft: var(--color-fill); --tint-ink: var(--color-text-muted); --tint-line: var(--color-hairline); }
.chal__chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

/* أبرز الطلاب */
.top-list { display: flex; flex-direction: column; }
.top-item { display: flex; align-items: center; gap: var(--space-3); padding: 9px 0; color: inherit; }
.top-item + .top-item { border-top: 1px solid var(--color-divider); }
.top-item__rank { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--tint-soft); color: var(--tint-ink); font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); flex-shrink: 0; }
.top-item__name { flex: 1; min-width: 0; font-weight: var(--font-weight-semibold); overflow-wrap: anywhere; }
.top-item__pts { font-size: var(--font-size-sm); color: var(--tint-ink); font-weight: var(--font-weight-semibold); white-space: nowrap; }

/* مكتبة الشارات: شبكة بصرية، الفن هو الأكبر */
.bdg-grid { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: var(--space-4); }
.bdg-tile {
  gap: 6px;
  padding: var(--space-5) var(--space-3) var(--space-4);
  border-color: var(--tint-line);
  border-radius: var(--radius-card);
  background: var(--tint-soft);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
@media (hover: hover) { a.bdg-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); } }
.bdg-tile.is-locked { background: var(--color-surface-secondary); filter: saturate(0.6); }
.bdg-tile__name { font-size: var(--font-size-md); font-weight: var(--font-weight-bold); margin-top: 4px; }

/* سجل المنح (القائمة): جدول نظيف */
.gtable { display: flex; flex-direction: column; border: 1px solid var(--color-hairline); border-radius: var(--radius-card); background: var(--color-surface); box-shadow: var(--shadow-card); overflow: hidden; }
.gtable__head { display: none; }
.gtable__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--space-3); align-items: center; padding: 12px var(--space-4); color: inherit; }
.gtable__row + .gtable__row { border-top: 1px solid var(--color-divider); }
.gtable__who { display: flex; align-items: center; gap: var(--space-3); min-width: 0; font-weight: var(--font-weight-semibold); }
.gtable__reason { grid-column: 1 / -1; font-size: var(--font-size-sm); color: var(--color-text-muted); overflow-wrap: anywhere; }
.gtable__cell { font-size: var(--font-size-sm); color: var(--color-text-muted); }
.gtable__pts { font-weight: var(--font-weight-bold); font-variant-numeric: tabular-nums; }
.gtable__pts[data-sign='+'] { color: var(--color-success-strong); }
.gtable__pts[data-sign='-'] { color: var(--color-danger-strong); }
@media (min-width: 900px) {
  .gtable__head, .gtable__row { display: grid; grid-template-columns: minmax(200px, 1.5fr) minmax(200px, 2fr) 120px 110px 80px; gap: var(--space-4); }
  .gtable__head { padding: 10px var(--space-4); background: var(--color-surface-secondary); border-bottom: 1px solid var(--color-hairline); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); color: var(--color-text-muted); }
  .gtable__reason { grid-column: auto; font-size: var(--font-size-sm); color: var(--color-text); }
}
.gtable__pts--col { display: none; }
.gtable__cell { grid-column: 1 / -1; }
@media (min-width: 900px) {
  .gtable__row > .gtable__pts:not(.gtable__pts--col) { display: none; }
  .gtable__pts--col { display: block; text-align: end; }
  .gtable__cell { grid-column: auto; }
}

/* شريط التصفية: على الهاتف بحث ظاهر + زر «تصفية» يفتح المرشحات */
.filter-toggle { display: none; }
@media (max-width: 767px) {
  .filter-bar--inline { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2); }
  .filter-bar--inline .filter-bar__selects { grid-column: 1 / -1; }
  html.js .filter-bar--inline .filter-bar__selects { display: none; }
  html.js .filter-bar--inline .filter-bar__selects.is-open { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .filter-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 0 var(--space-4);
    border: 1px solid var(--color-field-border);
    border-radius: var(--radius-control);
    background: var(--color-surface);
    color: var(--color-text);
    font: inherit;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
  }
  .filter-toggle[aria-expanded='true'] { border-color: var(--color-primary); color: var(--color-primary-dark); background: var(--color-primary-soft); }
  .filter-toggle__n { display: grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: var(--radius-pill); background: var(--color-primary); color: #fff; font-size: 0.6875rem; }
  .gh { flex-wrap: wrap; }
  .gh__text { flex-basis: 100%; }
}
html:not(.js) .filter-toggle { display: none; }
@media (max-width: 767px) { .gh__actions { width: 100%; } .gh__actions .btn { width: 100%; } }

@media (max-width: 599px) {
  .asum__chips { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; width: 100%; }
  .asum__chip { flex-direction: column; gap: 0; padding: 6px 2px; border-radius: var(--radius-control); text-align: center; line-height: 1.3; }
  .asum__chip svg { display: none; }
  .asum__n { font-size: var(--font-size-lg); }
  .asum__l { font-size: 0.6875rem; }
  .asum__tools { width: 100%; justify-content: space-between; }
}

/* تابلت (768–1023): شريط الأدوات يلتف، والجدول يتخلى عن عمود «آخر تقييم» بدل أن يطفح */
@media (min-width: 768px) and (max-width: 1023px) {
  .filter-bar--inline { flex-wrap: wrap; }
  .filter-bar--inline .filter-bar__search { flex: 1 1 100%; }
  .filter-bar--inline .filter-bar__selects { flex-wrap: wrap; width: 100%; }
  .workspace .filter-bar__select { width: auto; flex: 1 1 150px; }
  .stbl__head, .srow { grid-template-columns: minmax(0, 2fr) minmax(0, 1.1fr) minmax(0, 1.3fr) 76px 44px; }
  .srow__eval, .stbl__head > :nth-child(4) { display: none; }
}
@media (min-width: 1024px) {
  .stbl__head, .srow { grid-template-columns: minmax(0, 2.6fr) minmax(0, 1.3fr) minmax(0, 1.3fr) minmax(0, 1fr) 84px 44px; }
}

/* =====================================================================
   8) رأس الطالب الثابت (.shead) + تبويبات الأقسام: التركيب نفسه في كل قسم من ملف الطالب
   ===================================================================== */
.sprofile { margin-bottom: var(--space-4); }
.shead {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-card) var(--radius-card) 0 0;
  border-bottom: 0;
}
.shead__id { display: flex; align-items: center; gap: var(--space-4); min-width: 0; }
.shead__photo { position: relative; flex-shrink: 0; }
.shead__photo .avatar { width: 72px; height: 72px; font-size: 28px; }
.shead__body { min-width: 0; flex: 1; }
.shead__name { margin: 0 0 6px; font-size: 1.375rem; font-weight: var(--font-weight-bold); line-height: 1.35; overflow-wrap: anywhere; color: var(--color-text); }
.shead__chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.shead__meta { display: flex; flex-direction: column; gap: 2px; margin: 8px 0 0; font-size: var(--font-size-sm); color: var(--color-text-muted); line-height: 1.5; }
.shead__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.shead__actions .btn { min-height: 44px; }
.btn--icon { width: 44px; min-width: 44px; padding: 0; justify-content: center; list-style: none; cursor: pointer; }
.btn--icon::-webkit-details-marker { display: none; }
.app-main .actmenu > summary::after { display: none; }

/* قائمة «المزيد» */
.actmenu { position: relative; }
.actmenu > summary { list-style: none; }
.actmenu > summary::-webkit-details-marker { display: none; }
.actmenu__list {
  position: absolute;
  inset-block-start: calc(100% + 6px);
  inset-inline-end: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  min-width: 220px;
  padding: 6px;
  background: var(--color-surface);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-lg, 0 12px 32px -8px color-mix(in srgb, var(--neutral-900) 22%, transparent));
}
.actmenu__list a {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 12px;
  border-radius: var(--radius-control);
  color: var(--color-text);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}
.actmenu__list a svg { color: var(--color-text-faint); }
@media (hover: hover) { .actmenu__list a:hover { background: var(--color-surface-secondary); } }

.sprofile .ptabs {
  margin: 0;
  padding: 0 var(--space-3);
  border-radius: 0 0 var(--radius-card) var(--radius-card);
  box-shadow: var(--shadow-card);
  border-top: 1px solid var(--color-divider);
}
.sprofile .ptabs a { min-height: 50px; }
.sprofile .ptabs a[aria-current] { color: var(--tint-ink); }
.sprofile .ptabs a[aria-current]::after { background: var(--tint); }
.sprofile .ptabs a[aria-current] svg { color: var(--tint); }
.sprofile + * { margin-top: 0; }

@media (max-width: 599px) {
  .shead { padding: var(--space-3); }
  .shead__photo .avatar { width: 60px; height: 60px; font-size: 22px; }
  .shead__name { font-size: 1.1875rem; }
  .shead__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)) 44px; }
  .shead__actions > :first-child:nth-last-child(n+4) { grid-column: 1 / -1; }
  .shead__actions .btn { width: 100%; padding-inline: var(--space-2); }
  .shead__actions .actmenu { justify-self: end; }
  .shead__actions .btn--icon { width: 44px; }
}
@media (min-width: 768px) {
  .shead { flex-direction: row; align-items: center; justify-content: space-between; padding: var(--space-4) var(--space-5); }
  .shead__photo .avatar { width: 92px; height: 92px; font-size: 34px; }
  .shead__name { font-size: 1.75rem; }
  .shead__actions { justify-content: flex-end; flex-shrink: 0; }
}

.gcard.shead { border-radius: var(--radius-card) var(--radius-card) 0 0; border-bottom: 0; margin-bottom: 0; }
.sprofile + .kpis { margin-top: var(--space-4); }

/* =====================================================================
   10) تنويه مدمج (طلبات التسجيل المعلّقة) + لافتة الرئيسية المدمجة
   ===================================================================== */
.callout--link { padding: 8px 14px; }
.callout--link .callout__body { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--space-3); }
.callout--link .callout__title { font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); }
.callout--link .callout__sub { font-size: var(--font-size-xs); }
@media (min-width: 768px) {
  .hero-banner { min-height: 168px; padding: var(--space-5) var(--space-6); }
}
.shead__meta bdi { white-space: nowrap; }