/* ══════════════════════════════════════════════════════════════════════════
   رِواق 7.8.98 — بنية واحدة، وألوان مأخوذة من المظهر المختار
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  --riwaq-block-paper: var(--panel, #fff);
  --riwaq-block-beige: var(--primary-soft, #e6f4f2);
  --riwaq-block-beige-soft: color-mix(in srgb, var(--primary-soft) 46%, var(--panel));
  --riwaq-block-beige-strong: color-mix(in srgb, var(--primary) 24%, var(--panel));
  --riwaq-block-gold: var(--accent, var(--primary));
  --riwaq-block-ink: var(--text, var(--primary-strong));
  --riwaq-block-action: var(--primary, var(--primary-strong));
  --riwaq-block-line: var(--line);
  --riwaq-block-shadow: var(--shadow, 0 12px 30px rgba(25, 52, 55, 0.075));
}

/* ── ١) الأسطح الرئيسية: شكل واحد في جميع الصفحات ─────────────────────── */
body:not(.printing) :is(
  .panel,
  .card,
  .stat,
  .table-shell,
  .card-v78,
  .student-course-card,
  .task-v89,
  .v492-task-card,
  .project-card,
  .v493-header,
  .sig-surface,
  .next-action-card,
  .dashboard-project-focus,
  .important-alert-card,
  .official-forms-intro,
  .official-form-card,
  .reference-card,
  .official-refresh-card,
  .library-folder-card,
  .library-file-row,
  .reference-simple-row,
  .journey-stage-card,
  .journey-active-summary,
  .journey-meeting-row,
  .journey-task-item,
  .scientific-support,
  .calendar-setup-block,
  .feed-device,
  .event-item,
  .admin-section,
  .admin-console-primary,
  .admin-pulse-card,
  .admin-work-dock,
  .access-row,
  .support-ticket-card,
  .support-detail,
  .supervisor-profile-card,
  .academic-archive-row,
  .post,
  .calendar-wrap,
  .support-create-panel,
  .support-workspace,
  .support-list-pane,
  .support-metrics article,
  .support-direct,
  .admin-health-panel,
  .admin-settings-shell,
  .modern-course-group,
  .course-details-panel
) {
  border: 1px solid var(--riwaq-block-line) !important;
  border-inline-start: 4px solid var(--riwaq-block-gold) !important;
  border-radius: 18px !important;
  background: var(--riwaq-block-paper) !important;
  background-image: none !important;
  box-shadow: var(--riwaq-block-shadow) !important;
  color: var(--riwaq-block-ink) !important;
}

/* البطاقات المتكررة لا تقفز عند المرور؛ الهدوء جزء من النموذج المرجعي. */
body:not(.printing) :is(
  .card-v78,
  .task-v89,
  .project-card,
  .library-folder-card,
  .official-form-card,
  .journey-stage-card,
  .support-ticket-card
):hover {
  border-color: var(--riwaq-block-gold) !important;
  transform: none !important;
  box-shadow: 0 14px 34px rgba(25, 52, 55, 0.09) !important;
}

/* إزالة دوائر وتدرجات زخرفية كانت تعيد ألوانًا غريبة إلى بعض البلوكات. */
body:not(.printing) .next-action-card::after,
body:not(.printing) .journey-stage-card::before,
body:not(.printing) .official-forms-intro::before {
  display: none !important;
  content: none !important;
}

/* ── ٢) العنوان والمعلومات: نقطة دخول كحلية واحدة ─────────────────────── */
body:not(.printing) :is(
  .panel,
  .card,
  .card-v78,
  .task-v89,
  .project-card,
  .sig-surface,
  .official-form-card,
  .reference-card,
  .library-folder-card,
  .journey-stage-card,
  .calendar-setup-block,
  .admin-section,
  .support-detail
) :is(h2, h3, h4, strong) {
  color: var(--riwaq-block-ink) !important;
}

body:not(.printing) :is(
  .next-action-card,
  .official-forms-intro,
  .journey-stage-card.selected,
  .journey-stage-card[aria-pressed="true"]
) :is(h2, h3, strong, p, small, span) {
  color: var(--riwaq-block-ink) !important;
}

body:not(.printing) :is(.panel-head, .library-section-head, .sig-section-head, .support-panel-heading, .admin-side-title) {
  border-bottom: 1px solid var(--riwaq-block-line) !important;
  padding-bottom: 12px;
}

/* ── ٣) المراسي الجانبية: البيج نفسه والنص كله كحلي ───────────────────── */
body:not(.printing) :is(
  .card-v78 .course-rail,
  .student-course-card .course-rail,
  .task-v89-rail,
  .project-model-rail,
  .v492-task-rail,
  .v493-task-rail
) {
  border: 1px solid color-mix(in srgb, var(--riwaq-block-gold) 28%, transparent) !important;
  border-radius: 16px !important;
  background: var(--riwaq-block-beige) !important;
  background-image: none !important;
  box-shadow: none !important;
  color: var(--riwaq-block-ink) !important;
}

body:not(.printing) :is(
  .card-v78 .course-rail,
  .student-course-card .course-rail,
  .task-v89-rail,
  .project-model-rail,
  .v492-task-rail,
  .v493-task-rail
) * {
  color: var(--riwaq-block-ink) !important;
  opacity: 1 !important;
}

/* «اليوم» داخل مربع الأسبوع يبقى نصه غامقًا كما طلب، لا أبيض على لون آخر. */
body:not(.printing) .card-v78 .course-rail-today,
body:not(.printing) .student-course-card .course-rail-today {
  border: 1px solid var(--riwaq-block-line) !important;
  background: color-mix(in srgb,var(--riwaq-block-paper) 78%,transparent) !important;
  color: var(--riwaq-block-ink) !important;
}

body:not(.printing) .task-v89-rail,
body:not(.printing) .project-model-rail {
  align-self: stretch !important;
  min-height: auto !important;
  height: auto !important;
  margin: 14px !important;
  box-sizing: border-box !important;
}

body:not(.printing) .task-v89-mark {
  max-width: 100%;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  line-height: 1.35 !important;
  text-align: center;
  white-space: normal !important;
  word-break: keep-all !important;
}

/* ── ٤) جسم أبيض وذيل بيج — نفس إخراج البطاقة المرجعية ───────────────── */
body:not(.printing) :is(.card-v78-main, .task-v89-body, .project-model-main, .project-model-copy) {
  background: var(--riwaq-block-paper) !important;
}

body:not(.printing) :is(.card-v78-foot, .project-model-foot, .card-footer, .plan-footer) {
  border-top: 1px solid var(--riwaq-block-line) !important;
  background: var(--riwaq-block-beige) !important;
  background-image: none !important;
}

body:not(.printing) .task-v89 :is(.task-actions-v60, .admin-task-actions) {
  margin-top: 14px !important;
  padding: 11px !important;
  border: 1px solid var(--riwaq-block-line) !important;
  border-radius: 13px !important;
  background: var(--riwaq-block-beige) !important;
}

body:not(.printing) .card-v78-week {
  border: 0 !important;
  border-inline-start: 3px solid var(--riwaq-block-gold) !important;
  background: var(--riwaq-block-beige-soft) !important;
  background-image: none !important;
}

body:not(.printing) .card-v78-week :is(span, strong, em) {
  color: var(--riwaq-block-ink) !important;
}

/* ── ٥) الصفوف والبلوكات الداخلية: نسخة أخف تمنع صندوقًا داخل صندوق ─── */
body:not(.printing) :is(
  .focused-upcoming > button,
  .today-strip > article,
  .student-quick-actions > button,
  .admin-action-grid > button,
  .task-fact,
  .project-reference-list article,
  .official-refresh-status > span,
  .official-refresh-source-list a,
  .notification-item,
  .update-row,
  .semester-row,
  .academic-archive-row,
  .support-message,
  .support-admin-controls,
  .support-attachment
) {
  border: 1px solid var(--riwaq-block-line) !important;
  border-radius: 13px !important;
  background: var(--riwaq-block-beige-soft) !important;
  background-image: none !important;
  box-shadow: none !important;
}

body:not(.printing) :is(.badge, .chip, .eyebrow, .project-type-chip, .official-source-badge) {
  border: 1px solid var(--riwaq-block-line) !important;
  background: var(--riwaq-block-beige) !important;
  background-image: none !important;
  color: var(--riwaq-block-ink) !important;
  box-shadow: none !important;
}

/* الحذف وحده يحتفظ بالتحذير؛ بقية الحالات تُقال بالنص لا بألوان متعددة. */
body:not(.printing) :is(.badge.danger, .badge.warn, .badge.success, .chip.danger, .chip.success):not(.btn) {
  border-color: var(--riwaq-block-line) !important;
  background: var(--riwaq-block-beige) !important;
  color: var(--riwaq-block-ink) !important;
}

body:not(.printing) .empty {
  border: 1px dashed var(--riwaq-block-gold) !important;
  border-radius: 16px !important;
  background: var(--riwaq-block-beige-soft) !important;
}

body:not(.printing) :is(.toolbar, .library-focus-toolbar, .official-form-filters, .student-course-toolbar) {
  border: 1px solid var(--riwaq-block-line) !important;
  border-radius: 16px !important;
  background: var(--riwaq-block-beige-soft) !important;
  box-shadow: none !important;
}

/* ── ٦) الأزرار والتحديد: الكحلي فعل، والبيج محتوى ────────────────────── */
body:not(.printing) :is(
  .card-v78,
  .task-v89,
  .project-card,
  .panel,
  .sig-surface,
  .official-form-card,
  .library-folder-card,
  .calendar-setup-block,
  .admin-section,
  .support-detail
) :is(.btn.primary, .workflow-primary, .task-state-segment button.active, .task-state-segment button[aria-pressed="true"]),
body:not(.printing) :is(.card-v78-action, .v492-open-project) {
  border-color: var(--riwaq-block-action) !important;
  background: var(--riwaq-block-action) !important;
  background-image: none !important;
  color: #fff !important;
  box-shadow: none !important;
}

body:not(.printing) .task-state-segment button:not(.active):not([aria-pressed="true"]) {
  border-color: var(--riwaq-block-line) !important;
  background: var(--riwaq-block-paper) !important;
  color: var(--riwaq-block-ink) !important;
}

body:not(.printing) :is(.journey-stage-card.selected, .journey-stage-card[aria-pressed="true"], .support-ticket-card.active) {
  border-color: var(--riwaq-block-gold) !important;
  border-inline-start-color: var(--riwaq-block-gold) !important;
  background: var(--riwaq-block-beige-soft) !important;
  box-shadow: 0 0 0 2px color-mix(in srgb,var(--riwaq-block-gold) 14%,transparent), var(--riwaq-block-shadow) !important;
}

/* ── ٧) الجداول: رأس بيج وسطح أبيض ─────────────────────────────────────── */
body:not(.printing) .table-shell th {
  background: var(--riwaq-block-beige) !important;
  color: var(--riwaq-block-ink) !important;
}

body:not(.printing) .table-shell tbody tr:hover {
  background: var(--riwaq-block-beige-soft) !important;
}

/* ── ٨) أختام الملكية: تغلب قواعد الصفحات القديمة ذات محددات #id ─────── */
/*
   بعض الملفات القديمة تستعمل `#page .card { ... !important }`. الترتيب وحده
   لا يغلب !important إذا كان المحدد القديم أقوى، لذلك تتكرر هنا الأسطح التي
   كانت تتسرب منها الأخضر والبنفسجي. هذه ليست طبقة شكل ثانية؛ إنها ختم يضمن أن
   النظام أعلاه هو المالك النهائي على كل صفحة.
*/
body:not(.printing) #dashboardPage :is(.next-action-card, .focused-dashboard-grid > .panel, .today-strip > article, .dashboard-project-focus),
body:not(.printing) #coursesPage :is(.student-course-card, .course-details-panel, .modern-course-group),
body:not(.printing) #tasksPage :is(.task-v89, .task-card-v60),
body:not(.printing) #projectsPage :is(.project-card, .course-model-project),
body:not(.printing) #filesPage :is(.library-folder-card, .library-file-row, .reference-simple-row, .official-form-card),
body:not(.printing) #calendarPage :is(.calendar-full, .calendar-wrap, .event-item),
body:not(.printing) #communityPage :is(.post, .panel),
body:not(.printing) #journeyPage :is(.panel, .journey-stage-card, .journey-active-summary, .scientific-support),
body:not(.printing) #adminPage :is(.panel, .admin-section, .admin-console-primary, .admin-health-panel, .admin-settings-shell),
body:not(.printing) #supportPage :is(.support-create-panel, .support-workspace, .support-list-pane, .support-detail, .support-ticket-card, .support-metrics article, .support-direct) {
  border: 1px solid var(--riwaq-block-line) !important;
  border-inline-start: 4px solid var(--riwaq-block-gold) !important;
  border-radius: 18px !important;
  background: var(--riwaq-block-paper) !important;
  background-image: none !important;
  box-shadow: var(--riwaq-block-shadow) !important;
  color: var(--riwaq-block-ink) !important;
}

body:not(.printing) #supportPage .support-ticket-card.active,
body:not(.printing) #supportPage .support-ticket-card:hover {
  border-color: var(--riwaq-block-gold) !important;
  border-inline-start-color: var(--riwaq-block-gold) !important;
  background: var(--riwaq-block-beige-soft) !important;
  box-shadow: 0 0 0 2px color-mix(in srgb,var(--riwaq-block-gold) 14%,transparent) !important;
}

body:not(.printing) #supportPage .btn.primary {
  border-color: var(--riwaq-block-action) !important;
  background: var(--riwaq-block-action) !important;
  color: #fff !important;
}

body:not(.printing) #dashboardPage .next-action-card::after {
  display: none !important;
  content: none !important;
}

body:not(.printing) #filesPage :is(.library-folder-card, .library-file-row, .reference-simple-row):hover {
  border-color: var(--riwaq-block-gold) !important;
  background: var(--riwaq-block-beige-soft) !important;
  transform: none !important;
  box-shadow: var(--riwaq-block-shadow) !important;
}

/* ── ٩) توحيد المهام فعليًا: النوع كلمة لا لونًا ──────────────────────── */
/*
   الملفات التاريخية كانت تعرّف اللون داخل محددات قوية مثل
   `#tasksPage .task-card-v60.task-kind-project`. لذلك لا يكفي حذف اللون من
   JavaScript؛ هذه الملكية النهائية توحّد المتغيرات والسطح والنص والفعل معًا.
*/
body:not(.printing) #tasksPage .task-card-v60:is(.task-kind-project, .task-kind-course, .task-kind-general) {
  --task-accent: var(--riwaq-block-action) !important;
  --task-tone: var(--riwaq-block-action) !important;
  --task-ink: var(--riwaq-block-ink) !important;
  --task-project: var(--riwaq-block-ink) !important;
  --task-course: var(--riwaq-block-ink) !important;
  --task-general: var(--riwaq-block-ink) !important;
  --task-project-color: var(--riwaq-block-action) !important;
  --task-course-color: var(--riwaq-block-action) !important;
  --task-general-color: var(--riwaq-block-action) !important;
  border: 1px solid var(--riwaq-block-line) !important;
  border-inline-start: 4px solid var(--riwaq-block-gold) !important;
  background: var(--riwaq-block-paper) !important;
  background-image: none !important;
  box-shadow: var(--riwaq-block-shadow) !important;
}

body:not(.printing) #tasksPage .task-card-v60:is(.task-kind-project, .task-kind-course, .task-kind-general)::before,
body:not(.printing) #tasksPage .task-card-v60:is(.task-kind-project, .task-kind-course, .task-kind-general)::after {
  display: none !important;
  content: none !important;
  background: none !important;
}

body:not(.printing) #tasksPage .task-card-v60:is(.task-kind-project, .task-kind-course, .task-kind-general) .task-v83-title {
  color: var(--riwaq-block-ink) !important;
}

body:not(.printing) #tasksPage .task-card-v60:is(.task-kind-project, .task-kind-course, .task-kind-general) :is(.task-v83-meta, .task-v83-desc) {
  color: color-mix(in srgb, var(--riwaq-block-ink) 62%, #fff) !important;
}

body:not(.printing) #tasksPage .task-card-v60:is(.task-kind-project, .task-kind-course, .task-kind-general) .task-shared-team {
  border-color: var(--riwaq-block-line) !important;
  background: var(--riwaq-block-beige-soft) !important;
  background-image: none !important;
}

body:not(.printing) #tasksPage .task-card-v60:is(.task-kind-project, .task-kind-course, .task-kind-general) .task-shared-badge {
  border: 1px solid var(--riwaq-block-line) !important;
  background: var(--riwaq-block-beige) !important;
  color: var(--riwaq-block-ink) !important;
}

body:not(.printing) #tasksPage .task-card-v60:is(.task-kind-project, .task-kind-course, .task-kind-general) :is(
  .task-state-segment button.active,
  .task-state-segment button[aria-pressed="true"],
  .workflow-primary:not(:disabled),
  .task-actions-v60 > .btn.primary,
  .admin-task-actions > .btn.primary
) {
  border-color: var(--riwaq-block-action) !important;
  background: var(--riwaq-block-action) !important;
  background-image: none !important;
  color: #fff !important;
  box-shadow: none !important;
}

body:not(.printing) #tasksPage .task-card-v60:is(.task-kind-project, .task-kind-course, .task-kind-general) .task-state-segment button:not(.active):not([aria-pressed="true"]),
body:not(.printing) #tasksPage .task-card-v60:is(.task-kind-project, .task-kind-course, .task-kind-general) :is(.btn.quiet, .btn.danger) {
  border-color: var(--riwaq-block-line) !important;
  background: var(--riwaq-block-paper) !important;
  background-image: none !important;
  color: var(--riwaq-block-ink) !important;
  box-shadow: none !important;
}

/* ── ١٠) بطاقة مشروع مركّزة: حقيقة واحدة في كل موضع ──────────────────── */
body:not(.printing) #projectsPage .project-model-main {
  min-height: 0 !important;
}

body:not(.printing) #projectsPage .project-model-copy {
  display: grid !important;
  align-content: center !important;
  gap: 9px !important;
  padding: 20px 22px !important;
}

body:not(.printing) #projectsPage .project-model-heading {
  display: flex !important;
  align-items: baseline !important;
  flex-wrap: wrap !important;
  gap: 6px 12px !important;
}

body:not(.printing) #projectsPage .project-model-heading h3 {
  margin: 0 !important;
  color: var(--riwaq-block-ink) !important;
}

body:not(.printing) #projectsPage .project-model-heading > span {
  color: color-mix(in srgb, var(--riwaq-block-ink) 60%, #fff) !important;
  font-size: 0.8rem !important;
  font-weight: 750 !important;
}

body:not(.printing) #projectsPage .project-model-copy > p {
  display: -webkit-box !important;
  overflow: hidden !important;
  margin: 0 !important;
  color: color-mix(in srgb, var(--riwaq-block-ink) 62%, #fff) !important;
  line-height: 1.55 !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
}

body:not(.printing) #projectsPage .project-model-summary {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 5px 0 !important;
  margin-top: 2px !important;
  color: color-mix(in srgb, var(--riwaq-block-ink) 68%, #fff) !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
}

body:not(.printing) #projectsPage .project-model-summary > span {
  display: inline-flex !important;
  align-items: center !important;
  min-width: 0 !important;
  padding: 0 9px !important;
  border: 0 !important;
  background: transparent !important;
  color: inherit !important;
}

body:not(.printing) #projectsPage .project-model-summary > span:first-child {
  padding-inline-start: 0 !important;
}

body:not(.printing) #projectsPage .project-model-summary > span:not(:last-child)::after {
  content: "·" !important;
  margin-inline-start: 14px !important;
  color: var(--riwaq-block-gold) !important;
}

body:not(.printing) #projectsPage .project-model-foot {
  min-height: 72px !important;
  padding: 12px 20px !important;
  gap: 14px !important;
}

body:not(.printing) #projectsPage .project-model-foot > span {
  color: var(--riwaq-block-ink) !important;
  font-weight: 750 !important;
}

body:not(.printing) #projectsPage .project-model-actions {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

body:not(.printing) #projectsPage .project-model-actions > :is(.v492-open-project, .v492-card-delete-project) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 164px !important;
  min-width: 164px !important;
  height: 46px !important;
  min-height: 46px !important;
  margin: 0 !important;
  padding: 0 18px !important;
  border: 1px solid var(--riwaq-block-action) !important;
  border-radius: 12px !important;
  background: var(--riwaq-block-action) !important;
  background-image: none !important;
  color: #fff !important;
  box-shadow: none !important;
  font-size: 0.88rem !important;
  font-weight: 850 !important;
  line-height: 1 !important;
}

body:not(.printing) #projectsPage .project-model-actions > :is(.v492-open-project, .v492-card-delete-project):hover {
  filter: brightness(1.08) !important;
  transform: none !important;
}

/* ── ١١) الجوال: المرساة أفقية وتحتفظ بالبيج دون قص النص ─────────────── */
@media (max-width: 760px) {
  body:not(.printing) .task-v89-rail,
  body:not(.printing) .project-model-rail {
    min-height: 58px !important;
    margin: 12px 12px 0 !important;
  }

  body:not(.printing) :is(.panel, .card, .stat, .support-ticket-card) {
    border-radius: 16px !important;
  }

  body:not(.printing) #projectsPage .project-model-copy {
    padding: 16px 14px !important;
  }

  body:not(.printing) #projectsPage .project-model-heading {
    align-items: flex-start !important;
    flex-direction: column !important;
  }

  body:not(.printing) #projectsPage .project-model-foot {
    align-items: stretch !important;
  }

  body:not(.printing) #projectsPage .project-model-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  body:not(.printing) #projectsPage .project-model-actions > :is(.v492-open-project, .v492-card-delete-project) {
    width: 100% !important;
    min-width: 0 !important;
  }
}

/* ── ١٢) الوصول والطباعة ───────────────────────────────────────────────── */
@media (forced-colors: active) {
  body:not(.printing) :is(.panel, .card, .card-v78, .task-v89, .project-card) {
    border-color: CanvasText !important;
    background: Canvas !important;
    color: CanvasText !important;
  }
}

/* كل القواعد مقيدة بـ body:not(.printing): مخرجات الطباعة تبقى بيضاء وموفرة للحبر. */

/* ── v7.8.98: شريط مسار النماذج ─────────────────────────────────────────── */
/* الكتالوج يجمع نماذج الكلية كلها، وفيها ما لا يخصّ طالب الدكتوراه. والترشيح
   افتراضيّ لا إجباريّ: يبدأ على مساره، وله زرٌّ يرى الكل متى شاء — لأن الحذف
   يفقد ما قد يحتاجه يومًا، والعرض الكامل يُغرقه كل يوم. */

.official-scope-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  margin: 0 0 12px;
  padding: 11px 16px;
  border-radius: 13px;
  border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}

.official-scope-bar > div {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  min-width: 0;
}

.official-scope-bar strong {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--sidebar);
}

/* عدد المخفي يُذكر صراحةً: الترشيح الصامت يُخفي ولا يُخبر، فيظنّ الطالب أن
   النموذج غير موجود. وذِكرُه يجعل الإخفاء قرارًا يراه لا حجبًا يقع عليه. */
.official-scope-bar small {
  font-size: 0.79rem;
  color: color-mix(in srgb, var(--sidebar) 68%, transparent);
}

.official-scope-bar .btn {
  flex: 0 0 auto;
  min-height: 36px;
  padding: 8px 15px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--accent) 34%, transparent);
  background: var(--card, #fff);
  font-size: 0.85rem;
  font-weight: 600;
  color: color-mix(in srgb, var(--sidebar) 88%, var(--text, #222));
}

.official-scope-bar .btn:hover {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}

@media (max-width: 560px) {
  .official-scope-bar { flex-direction: column; align-items: stretch; }
  .official-scope-bar .btn { width: 100%; }
}