/* ═══════════════════════════════════════════════════════════════════════════
   کامپوننت‌های مشترک — معادل صفحه‌ی «❖ Components» فیگما

   اندازه‌ها از get_design_context روی خودِ کامپوننت‌ست‌ها گرفته شده‌اند.
   دو انحراف عمدی که طراح تأیید کرده:

   ۱. رادیوس دکمه به «سایز» گره خورده، نه به «نوع». در فیگما سایز L در حالت
      Filled رادیوس ۱۶ و در حالت Tonal رادیوس ۱۲ داشت — یعنی یک سایز، دو رادیوس.
   ۲. استیت‌هایی که فیگما ندارد (focus، disabled، pressed، indeterminate و…)
      اینجا ساخته شده‌اند. فیگما دست نخورده است.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════ دکمه ═══════════════ */

.btn {
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  font-family: inherit;
  font-weight: var(--fw-med);
  line-height: var(--lh-tight);
  text-align: center;
  text-decoration: none;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;

  /* پیش‌فرض = سایز S */
  height: 38px;
  padding-inline: var(--space-xl);
  gap: var(--space-lg);
  border-radius: var(--radius-lg);
  font-size: var(--fs-xs);
}
/* بدون :not([hidden]) این قانون بر [hidden]{display:none} مرورگر غلبه می‌کند */
.btn:not([hidden]) {
  display: inline-flex;
}
.btn svg,
.btn img {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
}

/* ───── سایزها — رادیوس و آیکون به سایز گره خورده‌اند ───── */
.btn--l {
  height: 96px;
  padding-inline: var(--space-4xl);
  gap: var(--space-2xl);
  border-radius: var(--radius-2xl);
  font-size: var(--fs-3xl);
}
.btn--l svg,
.btn--l img { width: 48px; height: 48px; flex-basis: 48px; }

.btn--m {
  height: 68px;
  padding-inline: var(--space-3xl);
  gap: var(--space-lg);
  border-radius: var(--radius-xl);
  font-size: var(--fs-lg);
}
.btn--m svg,
.btn--m img { width: 28px; height: 28px; flex-basis: 28px; }

.btn--xs {
  height: 32px;
  padding-inline: var(--space-lg);
  gap: var(--space-md);
  border-radius: var(--radius-sm);
  font-size: var(--fs-xs);
}
.btn--xs svg,
.btn--xs img { width: 20px; height: 20px; flex-basis: 20px; }

.btn--2xs {
  height: 28px;
  padding-inline: var(--space-md);
  gap: var(--space-md);
  border-radius: var(--radius-sm);
  font-size: var(--fs-2xs);
}
.btn--2xs svg,
.btn--2xs img { width: 18px; height: 18px; flex-basis: 18px; }

.btn--3xs {
  height: 24px;
  padding-inline: var(--space-sm);
  gap: var(--space-sm);
  border-radius: var(--radius-sm);
  font-size: var(--fs-2xs);
}
.btn--3xs svg,
.btn--3xs img { width: 14px; height: 14px; flex-basis: 14px; }

.btn--pill { border-radius: var(--radius-full); }
.btn--block { width: 100%; }

/* ───── انواع ───── */
.btn--filled {
  background: var(--color-brand);
  color: var(--color-on-brand);
}
.btn--filled:hover  { background: color-mix(in srgb, var(--color-brand) 88%, black); }
.btn--filled:active { background: color-mix(in srgb, var(--color-brand) 78%, black); }

.btn--secondary {
  background: var(--secondary-500);
  color: var(--color-on-brand);
}
.btn--secondary:hover  { background: color-mix(in srgb, var(--secondary-500) 88%, black); }
.btn--secondary:active { background: color-mix(in srgb, var(--secondary-500) 78%, black); }

.btn--accent {
  background: var(--color-accent);
  color: var(--color-on-brand);
}
.btn--accent:hover  { background: var(--primary-600); }
.btn--accent:active { background: var(--primary-700); }

/* Tonal — در فیگما «Tunel» نوشته شده که غلط املایی Tonal است.
   نام واریانت در فیگما تغییر نکرد (۱۲۵ واریانت وابسته)، ولی در کد درست نوشته شده. */
.btn--tonal {
  background: var(--students-100);
  color: var(--color-brand);
}
.btn--tonal:hover  { background: var(--students-200); }
.btn--tonal:active { background: var(--students-300); }

.btn--outlined {
  background: var(--color-surface);
  color: var(--color-text);
  border-color: var(--color-border);
}
.btn--outlined:hover  { border-color: var(--neutral-800); }
.btn--outlined:active { background: var(--color-surface-alt); }

.btn--text {
  background: none;
  color: var(--color-brand);
  padding-inline: var(--space-lg);
}
.btn--text:hover  { background: var(--students-50); }
.btn--text:active { background: var(--students-100); }

.btn--danger {
  background: var(--color-danger);
  color: var(--color-on-brand);
}

/* ───── استیت‌های ساخته‌شده (در فیگما وجود نداشتند) ───── */
.btn:disabled,
.btn[aria-disabled="true"] {
  background: var(--color-surface-alt);
  color: var(--color-text-subtle);
  border-color: transparent;
  cursor: not-allowed;
  pointer-events: none;
}

.btn.is-loading {
  position: relative;
  color: transparent;
  pointer-events: none;
}
.btn.is-loading::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  width: 1em;
  height: 1em;
  margin: -0.5em 0 0 -0.5em;
  border: 2px solid currentcolor;
  border-top-color: transparent;
  border-radius: 50%;
  color: var(--color-on-brand);
  animation: btn-spin 0.7s linear infinite;
}
@keyframes btn-spin {
  to { transform: rotate(360deg); }
}

/* دکمه‌ی فقط-آیکون */
.icon-btn {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--color-text);
  align-items: center;
  justify-content: center;
}
.icon-btn:not([hidden]) {
  display: inline-flex;
}
.icon-btn:hover {
  background: var(--color-surface-alt);
}
.icon-btn svg,
.icon-btn img {
  width: 24px;
  height: 24px;
}

/* ═══════════════ فیلد ورودی ═══════════════ */

.field {
  flex-direction: column;
  gap: var(--space-md);
  margin-bottom: var(--space-2xl);
  text-align: start;
}
.field:not([hidden]) {
  display: flex;
}

.field__label {
  font-size: var(--fs-sm);
  font-weight: var(--fw-med);
  line-height: var(--lh-tight);
  color: var(--color-text-muted);
}

.field__control {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  min-height: 56px;
  padding-inline: var(--space-xl);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  transition: border-color 0.15s ease;
}

.field input,
.field select,
.field textarea,
.field__control input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  padding: 0;
  background: none;
  font-family: inherit;
  font-size: var(--fs-md);
  color: var(--color-text);
}
.field input:focus,
.field textarea:focus,
.field__control input:focus {
  outline: none;
}
/* فیگما همه‌جا placeholder را neutral/500 گذاشته، نه neutral/400 */
.field input::placeholder,
.field textarea::placeholder {
  color: var(--color-text-muted);
}

/* فیلدهای مستقل که پوسته‌ی field__control ندارند */
.field > input,
.field > select,
.field > textarea {
  min-height: 56px;
  padding: var(--space-xl);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.field__control:focus-within {
  border-color: var(--color-accent);
}

/* ───── استیت‌ها ───── */
.field--error .field__control,
.field--error > input {
  border-color: var(--color-danger);
  border-width: 1.5px;
}
.field--success .field__control,
.field--success > input {
  border-color: var(--color-success);
  border-width: 1.5px;
}
.field--disabled .field__control,
.field input:disabled,
.field > input:disabled {
  background: var(--color-surface-alt);
  color: var(--color-text-subtle);
  cursor: not-allowed;
}

.field__hint {
  font-size: var(--fs-xs);
  line-height: var(--lh-tight);
  color: var(--color-text-muted);
}
.field__hint--error {
  color: var(--color-danger);
}
.field__hint--success {
  color: var(--color-success);
}

/* ═══════════════ کارت ═══════════════ */

.card {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-xl);
  padding: var(--space-xl);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  overflow: hidden;
  text-align: end;
  text-decoration: none;
  color: inherit;
}
.card__media {
  display: block;
  width: 100%;
  aspect-ratio: 141 / 192;
  border-radius: var(--radius-sm);
  background: var(--color-surface-alt);
  object-fit: cover;
}
.card__title {
  width: 100%;
  font-size: var(--fs-sm);
  font-weight: var(--fw-med);
  line-height: var(--lh-tight);
}
.card__meta {
  width: 100%;
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}
.card[aria-disabled="true"] {
  opacity: 0.5;
  pointer-events: none;
}

/*
  محتوای کارت با ضریب همان بریک‌پوینت بزرگ می‌شود (۱٫۰۰ / ۱٫۳۶ / ۱٫۷۱)، نه یک
  پله. عنوان کارت در دسکتاپ ۲۴ می‌شود، نه ۱۶ — چون ۱۴ × ۱٫۷۱ ≈ ۲۴.
*/
@media (min-width: 768px) {
  .card {
    gap: var(--space-2xl);
    padding: var(--space-2xl);
    border-radius: var(--radius-xl);
  }
  .card__title { font-size: var(--fs-lg); }
  .card__meta  { font-size: var(--fs-sm); }
}
@media (min-width: 1024px) {
  .card {
    gap: var(--space-3xl);
    padding: var(--space-3xl);
  }
  .card__title { font-size: var(--fs-2xl); }
  .card__meta  { font-size: var(--fs-md); }
}

/* پنل ساده */
.panel {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-2xl);
}

/* ═══════════════ بج و چیپس ═══════════════ */

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  min-width: 56px;   /* در فیگما ۵۴ بود که روی هیچ پله‌ای نیست */
  height: 28px;
  padding-inline: var(--space-lg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  font-size: var(--fs-xs);
  font-weight: var(--fw-med);
  line-height: var(--lh-tight);
  color: var(--color-text);
}
.badge--selected {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-on-brand);
}
.badge--count {
  min-width: 0;
  width: 20px;
  height: 20px;
  padding: 0;
  border-radius: var(--radius-full);
  font-size: var(--fs-xs);
}

.chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  min-width: 56px;
  height: 28px;
  padding-inline: var(--space-xl);
  border: 0;
  border-radius: var(--radius-full);  /* در فیگما ۱۰۰px هاردکد بود */
  background: var(--color-accent);
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: var(--fw-med);
  line-height: var(--lh-tight);
  color: var(--color-on-brand);
}
.chip--m {
  min-width: 80px;
  height: 44px;   /* در فیگما ۴۲ بود و توالی ۲۰/۲۸/۴۲/۴۸ را می‌شکست */
  gap: var(--space-lg);
  font-size: var(--fs-md);
}
.chip--l {
  min-width: 80px;
  height: 48px;
  gap: var(--space-lg);
  font-size: var(--fs-lg);
}

/* ═══════════════ تب داخل صفحه ═══════════════ */

.tabs {
  display: flex;
  gap: var(--space-3xl);
  border-bottom: 1px solid var(--color-border);
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }

.tabs__btn {
  position: relative;
  flex: 0 0 auto;
  padding: var(--space-xl) 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: var(--fw-med);
  line-height: var(--lh-tight);
  color: var(--color-text-muted);
  white-space: nowrap;
}
.tabs__btn.is-active {
  color: var(--color-text);
  font-weight: var(--fw-bold);
}
/* در فیگما این خط یک تصویر SVG اکسپورت‌شده بود و رنگش از کد در دسترس نبود */
.tabs__btn.is-active::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: -1px;
  height: 2px;
  background: var(--color-brand);
  border-radius: var(--radius-full);
}
.tabs__btn:disabled {
  color: var(--color-text-subtle);
  cursor: not-allowed;
}
@media (min-width: 1024px) {
  .tabs__btn { font-size: var(--fs-2xl); }
}

/* ═══════════════ مودال و باتم‌شیت ═══════════════ */

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: var(--color-backdrop);
  align-items: center;
  justify-content: center;
  z-index: var(--z-modal);
  padding: calc(var(--space-2xl) + var(--safe-top))
           calc(var(--space-2xl) + var(--safe-start))
           calc(var(--space-2xl) + var(--safe-bottom))
           calc(var(--space-2xl) + var(--safe-end));
}
.modal-backdrop:not([hidden]) {
  display: flex;
}

.modal {
  position: relative;
  width: 100%;
  max-width: 342px;
  padding: var(--space-4xl) var(--space-2xl);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  box-shadow: var(--shadow-md);
  max-height: calc(100dvh - var(--space-2xl) * 2);
  overflow-y: auto;
  text-align: center;
  flex-direction: column;
  gap: var(--space-2xl);
}
.modal:not([hidden]) {
  display: flex;
}

.modal h2 {
  margin: 0;
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
}
.modal p {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}
.modal__actions {
  flex-wrap: wrap;
  gap: var(--space-lg);
  justify-content: center;
}
.modal__actions:not([hidden]) {
  display: flex;
}
.modal__exit {
  position: absolute;
  top: var(--space-lg);
  inset-inline-start: var(--space-lg);
  z-index: 1;
}
.modal__exit ~ h2 {
  padding-inline-start: calc(36px + var(--space-lg));
}
.modal__help {
  font-size: var(--fs-sm);
  color: var(--color-accent);
  text-decoration: none;
}

/* مودال در دسکتاپ بزرگ می‌شود و محتوایش با همان نسبت — نه اینکه فقط
   پس‌زمینه کِش بیاید. ۳۴۲ → ۴۶۴ → ۵۸۸ (همان ضریب ۱٫۷۲ که کارت‌ها می‌گیرند). */
@media (min-width: 768px) {
  .modal {
    max-width: 464px;
    padding: 40px var(--space-3xl);
    gap: var(--space-3xl);
  }
  .modal h2 { font-size: var(--fs-2xl); }
  .modal p  { font-size: var(--fs-md); }
}
@media (min-width: 1024px) {
  .modal {
    max-width: 588px;
    padding: 48px var(--space-4xl);
    border-radius: var(--radius-2xl);
  }
  .modal h2 { font-size: var(--fs-4xl); }
  .modal p  { font-size: var(--fs-lg); }
}

/*
  باتم‌شیت فقط روی موبایل «شیت» است. از ۷۶۸ به بالا مودال وسط‌چین می‌شود، هر
  چهار گوشه رادیوس می‌گیرد و دستگیره‌ی کشیدن حذف می‌شود — چون کشیدن با شست
  روی مانیتور معنا ندارد.
*/
.sheet {
  width: 100%;
  max-width: none;
  margin-block-start: auto;
  padding: var(--space-xl) 14px calc(var(--space-xl) + var(--safe-bottom));
  border-start-start-radius: var(--radius-xl);
  border-start-end-radius: var(--radius-xl);
  border-end-start-radius: 0;
  border-end-end-radius: 0;
  text-align: start;
  gap: var(--space-md);
}
.sheet__handle {
  width: 32px;
  height: 4px;
  margin: 0 auto var(--space-lg);
  border-radius: var(--radius-full);
  background: var(--color-border-strong);
}
.modal-backdrop:has(.sheet) {
  align-items: flex-end;
  padding: 0;
}

@media (min-width: 768px) {
  .modal-backdrop:has(.sheet) {
    align-items: center;
    padding: var(--space-3xl);
  }
  .sheet {
    max-width: 464px;
    margin-block-start: 0;
    border-radius: var(--radius-xl);
    padding: var(--space-3xl);
  }
  .sheet__handle {
    display: none;
  }
}

/* ═══════════════ سوییچ / چک‌باکس / رادیو ═══════════════
   در فیگما این‌ها به SVG فلت تبدیل شده بودند و رنگشان از کد در دسترس نبود.
   اینجا با المان واقعی و توکن ساخته شده‌اند تا تم‌پذیر باشند. */

.switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-lg);
  cursor: pointer;
}
.switch input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.switch__track {
  position: relative;
  width: 48px;
  height: 24px;
  flex: 0 0 48px;
  border-radius: var(--radius-full);
  background: var(--color-border-strong);
  transition: background-color 0.18s ease;
}
.switch__track::after {
  content: "";
  position: absolute;
  inset-block: 2px;
  inset-inline-start: 2px;
  width: 20px;
  border-radius: 50%;
  background: var(--neutral-white);
  box-shadow: var(--shadow-xs);
  transition: translate 0.18s ease;
}
.switch input:checked + .switch__track {
  background: var(--color-accent);
}
.switch input:checked + .switch__track::after {
  translate: -24px 0; /* RTL — تامب به سمت چپ می‌رود */
}
.switch input:focus-visible + .switch__track {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}
.switch input:disabled + .switch__track {
  background: var(--color-border);
  cursor: not-allowed;
}

.check,
.radio {
  display: inline-flex;
  align-items: center;
  gap: var(--space-lg);
  cursor: pointer;
  font-size: var(--fs-sm);
}
.check input,
.radio input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.check__box,
.radio__dot {
  position: relative;
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  border: 1.5px solid var(--color-border-strong);
  background: var(--color-surface);
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.check__box { border-radius: var(--radius-sm); }
.radio__dot { border-radius: 50%; }

.check input:checked + .check__box,
.radio input:checked + .radio__dot {
  background: var(--color-accent);
  border-color: var(--color-accent);
}
.check input:checked + .check__box::after {
  content: "";
  position: absolute;
  inset: 3px 4px;
  border: solid var(--neutral-white);
  border-width: 0 0 2px 2px;
  rotate: -45deg;
  translate: 0 -1px;
}
.radio input:checked + .radio__dot::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: var(--neutral-white);
}
/* استیت indeterminate — در فیگما اصلاً وجود نداشت */
.check input:indeterminate + .check__box {
  background: var(--color-accent);
  border-color: var(--color-accent);
}
.check input:indeterminate + .check__box::after {
  content: "";
  position: absolute;
  inset: 8px 3px;
  background: var(--neutral-white);
  border-radius: 1px;
}
.check input:focus-visible + .check__box,
.radio input:focus-visible + .radio__dot {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}
.check input:disabled + .check__box,
.radio input:disabled + .radio__dot {
  background: var(--color-surface-alt);
  border-color: var(--color-border);
  cursor: not-allowed;
}

/* سایز L برای رادیو — در فیگما نبود، چک‌باکس داشت */
.radio--l .radio__dot,
.check--l .check__box {
  width: 24px;
  height: 24px;
  flex-basis: 24px;
}

/* ═══════════════ اسپینر ═══════════════
   در فیگما ۲۱ فاز جدا به‌صورت SVG اکسپورت شده بود و در کد انیمیت نمی‌شد. */

.spinner {
  display: inline-block;
  width: 24px;
  height: 24px;
  border: 3px solid var(--opacity-n300, rgba(212, 212, 216, 0.5));
  border-top-color: var(--color-accent);
  border-radius: 50%;
  animation: btn-spin 0.7s linear infinite;
}
.spinner--l { width: 32px; height: 32px; border-width: 4px; }
.spinner--s { width: 20px; height: 20px; border-width: 2px; }

/* ═══════════════ توست ═══════════════
   واریانت Success مبنا قرار گرفته؛ بقیه فقط رنگ استیت را عوض می‌کنند. */

.toast {
  position: fixed;
  inset-block-end: calc(var(--tabs-height) + var(--space-2xl));
  inset-inline: var(--page-margin);
  z-index: var(--z-toast);
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  max-width: 420px;
  margin-inline: auto;
  padding: var(--space-2xl);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  box-shadow: var(--shadow-toast);
  font-size: var(--fs-sm);
}
.toast::before {
  content: "";
  flex: 0 0 4px;
  align-self: stretch;
  border-radius: var(--radius-full);
  background: var(--color-success);
}
.toast--error::before  { background: var(--color-danger); }
.toast--info::before   { background: var(--color-accent); }
.toast--warning::before { background: var(--secondary-500); }

/* ═══════════════ نوار پیشرفت ═══════════════ */

.progress {
  width: 100%;
  height: 4px;
  border-radius: var(--radius-full);
  background: var(--color-border);
  overflow: hidden;
}
.progress__bar {
  height: 100%;
  border-radius: var(--radius-full);
  background: var(--color-accent);
  transition: inline-size 0.2s ease;
}

/* ═══════════════ Breadcrumbs ═══════════════
   در فیگما کامپوننت نبود — یک فریم با سه کرامب ثابت و بدون تفکیک لینک از
   صفحه‌ی جاری. اینجا به کامپوننت واقعی تبدیل شده. */

.breadcrumbs {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}
.breadcrumbs a {
  color: var(--color-text-muted);
  text-decoration: none;
}
.breadcrumbs a:hover {
  color: var(--color-text);
  text-decoration: underline;
}
.breadcrumbs [aria-current="page"] {
  color: var(--color-text);
  font-weight: var(--fw-med);
}
.breadcrumbs__sep {
  color: var(--color-text-subtle);
}

/* ═══════════════════════════════════════════════════════════════════════════
   پنل «بروزرسانی آناتومیار» — لایه‌ی احتیاطی.
   مارکاپ این پنل از login.js/firstLogin.js/preview.js برداشته شده، ولی اگر روی
   هاست نسخه‌ی قدیمی یکی از آن فایل‌ها مانده باشد (یا مرورگر کش کرده باشد)، این
   backdrop تمام‌صفحه همه‌ی کلیک‌های صفحه‌ی ورود را می‌بلعد.
   ═══════════════════════════════════════════════════════════════════════════ */
.update-panel {
  display: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   لایه‌ی سازگاری با نام‌های قدیمی دکمه

   بازنویسی این فایل نام‌های btn--primary / btn--ghost / btn--wide را کنار گذاشت،
   ولی ۱۸۶ و ۱۳۷ و ۴ استفاده از آن‌ها در ۵۶ فایل باقی مانده بود — که ۳۹ تای آن‌ها
   صفحات بازی‌اند و طبق دامنه‌ی تأییدشده اصلاً دست نمی‌خورند. بدون این نگاشت،
   همه‌ی دکمه‌های آن صفحات بی‌استایل می‌شدند.

   صفحاتِ داخل دامنه هنگام مهاجرت به نام‌های جدید منتقل می‌شوند؛ این بلوک فقط
   برای صفحات خارج از دامنه باقی می‌ماند و نباید در کد جدید استفاده شود.
   ═══════════════════════════════════════════════════════════════════════════ */
.btn--primary {
  background: var(--color-brand);
  color: var(--color-on-brand);
}
.btn--primary:hover  { background: color-mix(in srgb, var(--color-brand) 88%, black); }
.btn--primary:active { background: color-mix(in srgb, var(--color-brand) 78%, black); }

.btn--ghost {
  background: none;
  color: var(--color-brand);
  padding-inline: var(--space-lg);
}
.btn--ghost:hover  { background: var(--students-50); }
.btn--ghost:active { background: var(--students-100); }

.btn--wide { width: 100%; }