/*
 * سامانهٔ طراحی «آکادمی روشن»
 *
 * این فایل مستقل پس از خروجی محافظت‌شدهٔ Tailwind بارگذاری می‌شود. فقط Tokenها و
 * اجزای مشترک را استاندارد می‌کند؛ چیدمان اختصاصی صفحه‌ها در مراحل بعدی است.
 */

:root {
  color-scheme: light;

  /* Reference color tokens: raw, brand-approved values. */
  --ref-color-neutral-0: #000000;
  --ref-color-neutral-10: #17212b;
  --ref-color-neutral-40: #56636d;
  --ref-color-neutral-95: #f7f7f3;
  --ref-color-neutral-100: #ffffff;
  --ref-color-neutral-variant-10: #173331;
  --ref-color-neutral-variant-50: #7d8c93;
  --ref-color-neutral-variant-80: #c8d2d7;
  --ref-color-neutral-variant-90: #eef3f4;
  --ref-color-navy-10: #0f2538;
  --ref-color-navy-20: #17324d;
  --ref-color-navy-70: #cad7df;
  --ref-color-navy-90: #e8f0f5;
  --ref-color-navy-footer-line: #365064;
  --ref-color-teal-40: #276b66;
  --ref-color-teal-90: #e4f1ef;
  --ref-color-copper-10: #3b1604;
  --ref-color-copper-30: #923c0d;
  --ref-color-copper-40: #b55216;
  --ref-color-copper-80: #f2c7a9;
  --ref-color-copper-90: #f8e9df;
  --ref-color-success-40: #216e4e;
  --ref-color-success-90: #e5f2eb;
  --ref-color-warning-40: #8a5a00;
  --ref-color-warning-90: #fff3d6;
  --ref-color-error-40: #b42318;
  --ref-color-error-90: #fff0ee;
  --ref-color-info-40: #245f83;
  --ref-color-info-90: #e7f1f7;
  --ref-color-surface-bright: #fbfcfa;
  --ref-color-surface-dim: #dce2e2;
  --ref-color-surface-container-low: #f3f5f3;
  --ref-color-surface-container-high: #e8edef;
  --ref-color-surface-container-highest: #e2e7e9;

  /* System color tokens: Material 3 roles for the Roshan Academy theme. */
  --sys-color-primary: var(--ref-color-navy-20);
  --sys-color-on-primary: var(--ref-color-neutral-100);
  --sys-color-primary-container: var(--ref-color-navy-90);
  --sys-color-on-primary-container: var(--ref-color-neutral-10);
  --sys-color-primary-hover: var(--ref-color-navy-10);
  --sys-color-secondary: var(--ref-color-teal-40);
  --sys-color-on-secondary: var(--ref-color-neutral-100);
  --sys-color-secondary-container: var(--ref-color-teal-90);
  --sys-color-on-secondary-container: var(--ref-color-neutral-variant-10);
  --sys-color-tertiary: var(--ref-color-copper-40);
  --sys-color-on-tertiary: var(--ref-color-neutral-100);
  --sys-color-tertiary-container: var(--ref-color-copper-90);
  --sys-color-on-tertiary-container: var(--ref-color-copper-10);
  --sys-color-tertiary-hover: var(--ref-color-copper-30);
  --sys-color-error: var(--ref-color-error-40);
  --sys-color-on-error: var(--ref-color-neutral-100);
  --sys-color-error-container: var(--ref-color-error-90);
  --sys-color-background: var(--ref-color-neutral-95);
  --sys-color-on-background: var(--ref-color-neutral-10);
  --sys-color-surface: var(--ref-color-neutral-100);
  --sys-color-on-surface: var(--ref-color-neutral-10);
  --sys-color-surface-variant: var(--ref-color-neutral-variant-90);
  --sys-color-on-surface-variant: var(--ref-color-neutral-40);
  --sys-color-surface-bright: var(--ref-color-surface-bright);
  --sys-color-surface-dim: var(--ref-color-surface-dim);
  --sys-color-surface-container-lowest: var(--ref-color-neutral-100);
  --sys-color-surface-container-low: var(--ref-color-surface-container-low);
  --sys-color-surface-container: var(--ref-color-neutral-variant-90);
  --sys-color-surface-container-high: var(--ref-color-surface-container-high);
  --sys-color-surface-container-highest: var(--ref-color-surface-container-highest);
  --sys-color-outline: var(--ref-color-neutral-variant-50);
  --sys-color-outline-variant: var(--ref-color-neutral-variant-80);
  --sys-color-inverse-surface: var(--ref-color-navy-10);
  --sys-color-inverse-on-surface: var(--ref-color-neutral-100);
  --sys-color-inverse-on-surface-variant: var(--ref-color-navy-70);
  --sys-color-inverse-outline: var(--ref-color-navy-footer-line);
  --sys-color-inverse-accent: var(--ref-color-copper-80);
  --sys-color-scrim: var(--ref-color-neutral-0);
  --sys-color-shadow: var(--ref-color-neutral-0);
  --sys-color-focus: var(--ref-color-info-40);
  --sys-color-link: var(--ref-color-info-40);
  --sys-color-heading: var(--sys-color-on-surface);
  --sys-color-success: var(--ref-color-success-40);
  --sys-color-success-container: var(--ref-color-success-90);
  --sys-color-warning: var(--ref-color-warning-40);
  --sys-color-warning-container: var(--ref-color-warning-90);
  --sys-color-info: var(--ref-color-info-40);
  --sys-color-info-container: var(--ref-color-info-90);

  /* Reference and system typography tokens, adapted for readable Persian. */
  --ref-type-weight-regular: 400;
  --ref-type-weight-medium: 600;
  --ref-type-weight-bold: 700;
  --ref-type-size-display-large: clamp(2.5rem, 5vw, 4rem);
  --ref-type-size-headline-large: clamp(2rem, 4vw, 3.25rem);
  --ref-type-size-headline-medium: clamp(1.65rem, 3vw, 2.25rem);
  --ref-type-size-headline-small: 1.5rem;
  --ref-type-size-title-large: 1.375rem;
  --ref-type-size-title-medium: 1.125rem;
  --ref-type-size-title-small: 1rem;
  --ref-type-size-body-large: clamp(1.025rem, 1.2vw, 1.125rem);
  --ref-type-size-body-medium: 1rem;
  --ref-type-size-body-small: 0.875rem;
  --ref-type-size-label-medium: 0.8125rem;
  --ref-type-size-label-small: 0.75rem;
  --ref-type-leading-display: 1.3;
  --ref-type-leading-heading: 1.5;
  --ref-type-leading-body: 1.9;
  --ref-type-leading-small: 1.7;
  --sys-type-display-large-size: var(--ref-type-size-display-large);
  --sys-type-display-large-line-height: var(--ref-type-leading-display);
  --sys-type-display-large-weight: var(--ref-type-weight-bold);
  --sys-type-headline-large-size: var(--ref-type-size-headline-large);
  --sys-type-headline-medium-size: var(--ref-type-size-headline-medium);
  --sys-type-headline-small-size: var(--ref-type-size-headline-small);
  --sys-type-headline-line-height: var(--ref-type-leading-heading);
  --sys-type-headline-weight: var(--ref-type-weight-bold);
  --sys-type-title-large-size: var(--ref-type-size-title-large);
  --sys-type-title-medium-size: var(--ref-type-size-title-medium);
  --sys-type-title-small-size: var(--ref-type-size-title-small);
  --sys-type-title-line-height: var(--ref-type-leading-heading);
  --sys-type-title-weight: var(--ref-type-weight-medium);
  --sys-type-body-large-size: var(--ref-type-size-body-large);
  --sys-type-body-medium-size: var(--ref-type-size-body-medium);
  --sys-type-body-small-size: var(--ref-type-size-body-small);
  --sys-type-body-line-height: var(--ref-type-leading-body);
  --sys-type-body-small-line-height: var(--ref-type-leading-small);
  --sys-type-body-weight: var(--ref-type-weight-regular);
  --sys-type-label-large-size: var(--ref-type-size-body-small);
  --sys-type-label-medium-size: var(--ref-type-size-label-medium);
  --sys-type-label-small-size: var(--ref-type-size-label-small);
  --sys-type-label-line-height: 1.5;
  --sys-type-label-weight: var(--ref-type-weight-medium);

  /* Reference spacing tokens and semantic layout roles. */
  --ref-space-0: 0;
  --ref-space-1: 0.25rem;
  --ref-space-2: 0.5rem;
  --ref-space-3: 0.75rem;
  --ref-space-4: 1rem;
  --ref-space-5: 1.25rem;
  --ref-space-6: 1.5rem;
  --ref-space-8: 2rem;
  --ref-space-10: 2.5rem;
  --ref-space-12: 3rem;
  --ref-space-16: 4rem;
  --ref-space-20: 5rem;
  --ref-space-24: 6rem;
  --sys-space-component-gap: var(--ref-space-3);
  --sys-space-container-padding: var(--ref-space-4);
  --sys-space-section: clamp(4rem, 8vw, 7rem);
  --sys-space-section-compact: clamp(3rem, 6vw, 5rem);

  /* Reference shape tokens and Material 3 shape roles. */
  --ref-shape-none: 0;
  --ref-shape-extra-small: 0.25rem;
  --ref-shape-small: 0.375rem;
  --ref-shape-medium: 0.625rem;
  --ref-shape-large: 0.875rem;
  --ref-shape-extra-large: 1.125rem;
  --ref-shape-extra-extra-large: 1.75rem;
  --ref-shape-full: 999px;
  --sys-shape-none: var(--ref-shape-none);
  --sys-shape-extra-small: var(--ref-shape-extra-small);
  --sys-shape-small: var(--ref-shape-small);
  --sys-shape-medium: var(--ref-shape-medium);
  --sys-shape-large: var(--ref-shape-large);
  --sys-shape-extra-large: var(--ref-shape-extra-large);
  --sys-shape-extra-extra-large: var(--ref-shape-extra-extra-large);
  --sys-shape-full: var(--ref-shape-full);

  /* Elevation stays restrained for an editorial educational website. */
  --ref-elevation-0: none;
  --ref-elevation-1: 0 0.25rem 0.75rem rgb(23 50 77 / 0.05);
  --ref-elevation-2: 0 0.75rem 2rem rgb(23 50 77 / 0.06);
  --ref-elevation-3: 0 1rem 2.5rem rgb(23 50 77 / 0.1);
  --sys-elevation-level-0: var(--ref-elevation-0);
  --sys-elevation-level-1: var(--ref-elevation-1);
  --sys-elevation-level-2: var(--ref-elevation-2);
  --sys-elevation-level-3: var(--ref-elevation-3);

  /* Motion and interaction state layers. */
  --ref-duration-short-1: 100ms;
  --ref-duration-short-2: 150ms;
  --ref-duration-medium-1: 220ms;
  --ref-duration-medium-2: 300ms;
  --ref-duration-long-1: 420ms;
  --ref-easing-standard: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ref-easing-emphasized-decelerate: cubic-bezier(0.16, 1, 0.3, 1);
  --sys-motion-duration-short: var(--ref-duration-short-2);
  --sys-motion-duration-medium: var(--ref-duration-medium-1);
  --sys-motion-duration-long: var(--ref-duration-long-1);
  --sys-motion-easing-standard: var(--ref-easing-standard);
  --sys-motion-easing-emphasized: var(--ref-easing-emphasized-decelerate);
  --sys-state-hover-opacity: 0.08;
  --sys-state-focus-opacity: 0.1;
  --sys-state-pressed-opacity: 0.1;
  --sys-state-dragged-opacity: 0.16;
  --sys-state-disabled-container-opacity: 0.12;
  --sys-state-disabled-content-opacity: 0.38;

  /* Foundation component tokens. */
  --button-filled-container-color: var(--sys-color-primary);
  --button-filled-label-color: var(--sys-color-on-primary);
  --button-filled-shape: var(--sys-shape-medium);
  --button-filled-hover-container-color: color-mix(in srgb, var(--sys-color-on-primary) 8%, var(--button-filled-container-color));
  --button-filled-pressed-container-color: color-mix(in srgb, var(--sys-color-on-primary) 10%, var(--button-filled-container-color));
  --button-tonal-container-color: var(--sys-color-secondary-container);
  --button-tonal-label-color: var(--sys-color-on-secondary-container);
  --button-tertiary-container-color: var(--sys-color-tertiary);
  --button-tertiary-label-color: var(--sys-color-on-tertiary);
  --button-outlined-label-color: var(--sys-color-secondary);
  --button-outlined-outline-color: var(--sys-color-outline);
  --button-text-label-color: var(--sys-color-primary);
  --button-container-height: 2.75rem;
  --button-disabled-container-color: var(--sys-color-surface-container-high);
  --button-disabled-label-color: var(--sys-color-on-surface-variant);
  --button-disabled-opacity: var(--sys-state-disabled-content-opacity);
  --icon-button-container-color: var(--sys-color-surface);
  --icon-button-icon-color: var(--sys-color-primary);
  --icon-button-outline-color: var(--sys-color-outline);
  --icon-button-selected-container-color: var(--sys-color-primary-container);
  --icon-button-selected-icon-color: var(--sys-color-on-primary-container);
  --icon-button-shape: var(--sys-shape-full);
  --text-field-container-color: var(--sys-color-surface);
  --text-field-input-color: var(--sys-color-on-surface);
  --text-field-supporting-color: var(--sys-color-on-surface-variant);
  --text-field-outline-color: var(--sys-color-outline);
  --text-field-focus-outline-color: var(--sys-color-focus);
  --text-field-disabled-container-color: var(--sys-color-surface-container);
  --text-field-error-color: var(--sys-color-error);
  --text-field-success-color: var(--sys-color-success);
  --text-field-shape: var(--sys-shape-medium);
  --select-container-color: var(--text-field-container-color);
  --select-label-color: var(--text-field-input-color);
  --select-outline-color: var(--text-field-outline-color);
  --selection-control-selected-color: var(--sys-color-primary);
  --selection-control-unselected-color: var(--sys-color-outline);
  --selection-control-disabled-color: var(--sys-color-on-surface);
  --switch-track-color: var(--sys-color-surface-container-highest);
  --switch-track-selected-color: var(--sys-color-primary);
  --switch-handle-color: var(--sys-color-outline);
  --switch-handle-selected-color: var(--sys-color-on-primary);
  --switch-outline-color: var(--sys-color-outline);
  --chip-container-color: var(--sys-color-surface);
  --chip-label-color: var(--sys-color-on-surface-variant);
  --chip-outline-color: var(--sys-color-outline);
  --chip-selected-container-color: var(--sys-color-secondary-container);
  --chip-selected-label-color: var(--sys-color-on-secondary-container);
  --chip-shape: var(--sys-shape-small);
  --badge-container-color: var(--sys-color-surface-variant);
  --badge-label-color: var(--sys-color-on-surface-variant);
  --badge-shape: var(--sys-shape-small);
  --badge-brand-container-color: var(--sys-color-primary-container);
  --badge-brand-label-color: var(--sys-color-on-primary-container);
  --badge-accent-container-color: var(--sys-color-tertiary-container);
  --badge-accent-label-color: var(--sys-color-on-tertiary-container);
  --badge-success-container-color: var(--sys-color-success-container);
  --badge-success-label-color: var(--sys-color-success);
  --badge-info-container-color: var(--sys-color-info-container);
  --badge-info-label-color: var(--sys-color-info);
  --alert-container-color: var(--sys-color-surface);
  --alert-label-color: var(--sys-color-on-surface);
  --alert-outline-color: var(--sys-color-outline-variant);
  --alert-shape: var(--sys-shape-medium);
  --alert-success-container-color: var(--sys-color-success-container);
  --alert-success-indicator-color: var(--sys-color-success);
  --alert-warning-container-color: var(--sys-color-warning-container);
  --alert-warning-indicator-color: var(--sys-color-warning);
  --alert-info-container-color: var(--sys-color-info-container);
  --alert-info-indicator-color: var(--sys-color-info);
  --snackbar-container-color: var(--sys-color-inverse-surface);
  --snackbar-label-color: var(--sys-color-inverse-on-surface);
  --snackbar-action-color: var(--sys-color-tertiary-container);
  --snackbar-shape: var(--sys-shape-small);
  --snackbar-elevation: var(--sys-elevation-level-3);
  --dialog-container-color: var(--sys-color-surface-container-high);
  --dialog-label-color: var(--sys-color-on-surface);
  --dialog-supporting-color: var(--sys-color-on-surface-variant);
  --dialog-shape: var(--sys-shape-extra-large);
  --dialog-elevation: var(--sys-elevation-level-3);
  --menu-container-color: var(--sys-color-surface-container);
  --menu-label-color: var(--sys-color-on-surface);
  --menu-hover-container-color: var(--sys-color-primary-container);
  --menu-shape: var(--sys-shape-small);
  --menu-elevation: var(--sys-elevation-level-2);
  --tooltip-container-color: var(--sys-color-inverse-surface);
  --tooltip-label-color: var(--sys-color-inverse-on-surface);
  --tooltip-shape: var(--sys-shape-extra-small);
  --tabs-label-color: var(--sys-color-on-surface-variant);
  --tabs-active-label-color: var(--sys-color-primary);
  --tabs-indicator-color: var(--sys-color-primary);
  --pagination-container-color: var(--sys-color-surface);
  --pagination-label-color: var(--sys-color-primary);
  --pagination-outline-color: var(--sys-color-outline);
  --card-outlined-container-color: var(--sys-color-surface);
  --card-outlined-outline-color: var(--sys-color-outline-variant);
  --card-filled-container-color: var(--sys-color-surface-container-low);
  --card-elevated-container-color: var(--sys-color-surface-container-lowest);
  --card-elevated-shadow: var(--sys-elevation-level-1);
  --card-shape: var(--sys-shape-large);
  --list-item-container-color: var(--sys-color-surface);
  --list-item-label-color: var(--sys-color-on-surface);
  --list-item-supporting-color: var(--sys-color-on-surface-variant);
  --list-item-divider-color: var(--sys-color-outline-variant);
  --header-container-color: var(--sys-color-surface);
  --header-label-color: var(--sys-color-on-surface-variant);
  --header-active-label-color: var(--sys-color-primary);
  --header-divider-color: var(--sys-color-outline-variant);
  --header-elevation: var(--sys-elevation-level-2);
  --desktop-navigation-label-color: var(--sys-color-on-surface-variant);
  --desktop-navigation-active-label-color: var(--sys-color-primary);
  --desktop-navigation-active-container-color: var(--sys-color-primary-container);
  --desktop-navigation-active-indicator-color: var(--sys-color-tertiary);
  --mobile-navigation-container-color: var(--sys-color-surface-container-lowest);
  --mobile-navigation-label-color: var(--sys-color-on-surface);
  --mobile-navigation-supporting-color: var(--sys-color-on-surface-variant);
  --mobile-navigation-active-container-color: var(--sys-color-primary-container);
  --mobile-navigation-active-label-color: var(--sys-color-on-primary-container);
  --mobile-navigation-divider-color: var(--sys-color-outline-variant);
  --footer-container-color: var(--sys-color-inverse-surface);
  --footer-label-color: var(--sys-color-inverse-on-surface);
  --footer-supporting-color: var(--sys-color-inverse-on-surface-variant);
  --footer-divider-color: var(--sys-color-inverse-outline);
  --footer-accent-color: var(--sys-color-inverse-accent);
  --breadcrumb-label-color: var(--sys-color-on-surface-variant);
  --breadcrumb-link-color: var(--sys-color-primary);
  --breadcrumb-current-label-color: var(--sys-color-on-surface);
  --breadcrumb-divider-color: var(--sys-color-outline);
  --page-container-max-inline-size: var(--content-max);
  --page-container-wide-max-inline-size: var(--content-wide-max);
  --page-header-container-color: var(--sys-color-surface);
  --page-header-supporting-container-color: var(--sys-color-surface-container-low);
  --page-header-label-color: var(--sys-color-on-surface);
  --page-header-supporting-color: var(--sys-color-on-surface-variant);
  --page-header-divider-color: var(--sys-color-outline-variant);
  --search-container-color: var(--sys-color-surface-container-low);
  --search-field-container-color: var(--sys-color-surface);
  --search-field-label-color: var(--sys-color-on-surface);
  --search-suggestion-container-color: var(--sys-color-surface-container-lowest);
  --search-suggestion-hover-container-color: var(--sys-color-primary-container);
  --public-form-container-color: var(--sys-color-surface);
  --public-form-outline-color: var(--sys-color-outline-variant);
  --public-form-shape: var(--sys-shape-extra-large);
  --public-form-field-gap: var(--ref-space-5);
  --public-form-action-padding: var(--ref-space-4);
  --message-region-gap: var(--sys-space-component-gap);
  --message-region-margin-block: var(--ref-space-4);
  --badge-neutral-container-color: var(--sys-color-surface-variant);
  --badge-neutral-label-color: var(--sys-color-on-surface-variant);
  --alert-error-container-color: var(--sys-color-error-container);
  --alert-error-label-color: var(--sys-color-error);
  --course-card-container-color: var(--card-outlined-container-color);
  --course-card-outline-color: var(--card-outlined-outline-color);
  --course-card-shape: var(--card-shape);

  /* Legacy aliases keep every existing template and module compatible. */
  --color-primary: var(--sys-color-primary);
  --color-primary-hover: var(--sys-color-primary-hover);
  --color-primary-soft: var(--sys-color-primary-container);
  --color-secondary: var(--sys-color-secondary);
  --color-secondary-soft: var(--sys-color-secondary-container);
  --color-accent: var(--sys-color-tertiary);
  --color-accent-hover: var(--sys-color-tertiary-hover);
  --color-accent-soft: var(--sys-color-tertiary-container);
  --color-background: var(--sys-color-background);
  --color-surface: var(--sys-color-surface);
  --color-surface-alt: var(--sys-color-surface-variant);
  --color-text-primary: var(--sys-color-on-surface);
  --color-text-secondary: var(--sys-color-on-surface-variant);
  --color-border: var(--sys-color-outline);
  --color-line: var(--sys-color-outline-variant);
  --color-success: var(--sys-color-success);
  --color-success-soft: var(--sys-color-success-container);
  --color-warning: var(--sys-color-warning);
  --color-warning-soft: var(--sys-color-warning-container);
  --color-error: var(--sys-color-error);
  --color-error-soft: var(--sys-color-error-container);
  --color-info: var(--sys-color-info);
  --color-info-soft: var(--sys-color-info-container);
  --color-focus: var(--sys-color-focus);
  --color-on-primary: var(--sys-color-on-primary);
  --color-on-accent: var(--sys-color-on-tertiary);
  --color-on-primary-muted: var(--ref-color-navy-70);
  --color-footer-line: var(--ref-color-navy-footer-line);
  --color-brand: var(--color-primary);
  --color-brand-dark: var(--color-primary-hover);
  --color-brand-light: var(--color-primary-soft);
  --color-accent-strong: var(--color-accent-hover);
  --color-surface-raised: var(--color-surface);
  --color-text: var(--color-text-primary);
  --color-text-muted: var(--color-text-secondary);
  --color-heading: var(--sys-color-heading);
  --color-link: var(--sys-color-link);
  --color-rich-link: var(--color-link);
  --color-link-primary: var(--color-link);
  --color-link-primary-hover: var(--color-primary-hover);
  --color-button-primary: var(--button-filled-container-color);
  --color-button-primary-hover: var(--color-primary-hover);
  --color-button-secondary: var(--button-outlined-label-color);
  --color-danger: var(--color-error);
  --color-danger-soft: var(--color-error-soft);
  --color-on-brand: var(--color-on-primary);
  --color-surface-muted: var(--color-surface-alt);
  --font-weight-regular: var(--ref-type-weight-regular);
  --font-weight-medium: var(--ref-type-weight-medium);
  --font-weight-semibold: var(--ref-type-weight-medium);
  --font-weight-bold: var(--ref-type-weight-bold);
  --font-weight-black: var(--ref-type-weight-bold);
  --text-display: var(--sys-type-display-large-size);
  --text-h1: var(--sys-type-headline-large-size);
  --text-h2: var(--sys-type-headline-medium-size);
  --text-h3: var(--sys-type-headline-small-size);
  --text-h4: var(--sys-type-title-large-size);
  --text-body-large: var(--sys-type-body-large-size);
  --text-body: var(--sys-type-body-medium-size);
  --text-small: var(--sys-type-body-small-size);
  --text-caption: var(--sys-type-label-small-size);
  --leading-tight: var(--ref-type-leading-display);
  --leading-heading: var(--sys-type-headline-line-height);
  --leading-body: var(--sys-type-body-line-height);
  --leading-small: var(--sys-type-body-small-line-height);
  --space-1: var(--ref-space-1);
  --space-2: var(--ref-space-2);
  --space-3: var(--ref-space-3);
  --space-4: var(--ref-space-4);
  --space-6: var(--ref-space-6);
  --space-8: var(--ref-space-8);
  --space-12: var(--ref-space-12);
  --space-16: var(--ref-space-16);
  --space-20: var(--ref-space-20);
  --space-section: var(--sys-space-section);
  --space-section-compact: var(--sys-space-section-compact);
  --radius-sm: var(--sys-shape-small);
  --radius-md: var(--sys-shape-medium);
  --radius-lg: var(--sys-shape-large);
  --radius-xl: var(--sys-shape-extra-large);
  --radius-pill: var(--sys-shape-full);
  --radius-button: var(--button-filled-shape);
  --radius-card: var(--card-shape);
  --shadow-soft: var(--sys-elevation-level-2);
  --shadow-card: var(--sys-elevation-level-0);
  --shadow-header: var(--header-elevation);
  --shadow-raised: var(--sys-elevation-level-3);

  /* Layout */
  --content-max: 76rem;
  --content-wide-max: 90rem;
  --text-measure: 42rem;
  --text-measure-narrow: 34rem;
  --breakpoint-sm: 40rem;
  --breakpoint-md: 48rem;
  --breakpoint-lg: 64rem;
  --breakpoint-xl: 80rem;

  /* Interaction */
  --duration-fast: var(--sys-motion-duration-short);
  --duration-normal: var(--sys-motion-duration-medium);
  --duration-slow: var(--sys-motion-duration-long);
  --ease-standard: var(--sys-motion-easing-standard);
  --ease-out: var(--sys-motion-easing-emphasized);
  --tap-target: 2.75rem;
  --control-height: 3rem;
  --z-header: 100;
  --z-overlay: 200;
  --z-toast: 300;
  --focus-ring: 0 0 0 3px var(--sys-color-surface), 0 0 0 6px var(--sys-color-focus);
}

html {
  background: var(--color-background);
}

body {
  background: var(--color-background);
  color: var(--color-text-primary);
  font-family: var(--font-body);
}

h1,
h2,
h3,
h4,
h5,
h6,
.type-display,
.type-h1,
.type-h2,
.type-h3,
.type-h4 {
  color: var(--color-heading);
  font-family: var(--font-heading);
  text-wrap: balance;
}

p,
li,
dd {
  text-wrap: pretty;
}

:focus-visible {
  border-radius: var(--radius-sm);
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
  box-shadow: none;
}

.btn {
  min-height: var(--tap-target);
  padding: 0.65rem 1.1rem;
  border: 1px solid transparent;
  border-radius: var(--radius-button);
  box-shadow: none;
  font-weight: var(--font-weight-semibold);
  transition:
    background-color var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard),
    color var(--duration-fast) var(--ease-standard),
    transform var(--duration-fast) var(--ease-standard);
}

.btn-primary {
  border-color: var(--color-button-primary);
  background: var(--color-button-primary);
  color: var(--color-on-primary);
}

.btn-primary:hover {
  border-color: var(--color-button-primary-hover);
  background: var(--color-button-primary-hover);
}

.btn:hover:not(:disabled):not([aria-disabled="true"]) {
  box-shadow: none;
  transform: translateY(-1px);
}

.btn-accent {
  border-color: var(--color-accent);
  background: var(--color-accent);
  color: var(--color-on-accent);
}

.btn-accent:hover {
  border-color: var(--color-accent-hover);
  background: var(--color-accent-hover);
}

.btn-secondary {
  border-color: var(--color-button-secondary);
  background: var(--color-surface);
  color: var(--color-button-secondary);
}

.btn-secondary:hover {
  border-color: var(--color-secondary);
  background: var(--color-secondary-soft);
  color: var(--color-primary-hover);
}

.btn-ghost {
  border-color: transparent;
  background: transparent;
  color: var(--color-primary);
}

.btn-ghost:hover {
  background: var(--color-primary-soft);
}

.btn:disabled,
.btn[aria-disabled="true"] {
  border-color: var(--color-line);
  background: var(--color-surface-alt);
  color: var(--color-text-secondary);
  box-shadow: none;
  cursor: not-allowed;
  opacity: 0.72;
}

input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
  min-height: var(--control-height);
  border-color: var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text-primary);
  box-shadow: none;
}

input::placeholder,
textarea::placeholder {
  color: var(--color-text-secondary);
  opacity: 0.9;
}

input:disabled,
select:disabled,
textarea:disabled {
  border-color: var(--color-line);
  background: var(--color-surface-alt);
  color: var(--color-text-secondary);
}

.field-error input,
.field-error select,
.field-error textarea,
input[aria-invalid="true"],
select[aria-invalid="true"],
textarea[aria-invalid="true"] {
  border-color: var(--color-danger);
}

.card,
.surface-panel,
.form-demo,
.content-filters {
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  box-shadow: none;
}

.card:hover,
.card:focus-within {
  border-color: color-mix(in srgb, var(--color-primary) 50%, var(--color-line));
  box-shadow: none;
  transform: none;
}

.surface-panel-soft {
  background: var(--color-surface-alt);
}

.badge {
  min-height: 1.75rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-weight: var(--font-weight-semibold);
}

.badge-brand {
  border-color: color-mix(in srgb, var(--color-primary) 24%, transparent);
  background: var(--color-primary-soft);
  color: var(--color-primary);
}

.badge-accent {
  border-color: color-mix(in srgb, var(--color-accent) 28%, transparent);
  background: var(--color-accent-soft);
  color: var(--color-accent-hover);
}

.badge-neutral {
  border-color: var(--color-line);
  background: var(--color-surface-alt);
  color: var(--color-text-secondary);
}

.badge-success {
  border-color: color-mix(in srgb, var(--color-success) 28%, transparent);
  background: var(--color-success-soft);
  color: var(--color-success);
}

.badge-info {
  border-color: color-mix(in srgb, var(--color-info) 28%, transparent);
  background: var(--color-info-soft);
  color: var(--color-info);
}

.text-link {
  color: var(--color-link);
  text-decoration-color: color-mix(in srgb, var(--color-link) 45%, transparent);
  text-underline-offset: 0.22em;
}

.text-link:hover {
  color: var(--color-primary-hover);
  text-decoration-color: currentColor;
}

.swatch-brand {
  background: var(--color-primary);
}

.swatch-secondary {
  background: var(--color-secondary);
}

.swatch-accent {
  background: var(--color-accent);
}

.swatch-surface {
  background: var(--color-background);
}

.swatch-text {
  background: var(--color-text-primary);
}

.swatch-border {
  background: var(--color-border);
}

.swatch-success {
  background: var(--color-success);
}

.swatch-warning {
  background: var(--color-warning);
}

.swatch-danger {
  background: var(--color-danger);
}

.swatch-info {
  background: var(--color-info);
}

/*
 * مرحلهٔ چهار: عناصر سراسری
 * این بخش فقط پوسته، ناوبری و اجزای تعاملی مشترک را یکپارچه می‌کند.
 */

:root {
  --header-height: 4.75rem;
}

.container {
  width: min(calc(100% - 2rem), var(--content-max));
  margin-inline: auto;
}

.container-wide {
  width: min(calc(100% - 2rem), var(--content-wide-max));
  margin-inline: auto;
}

.skip-link {
  z-index: var(--z-toast);
  border: 2px solid var(--color-surface);
  background: var(--color-primary);
  color: var(--color-on-primary);
}

.site-header {
  min-height: var(--header-height);
  border-bottom: 1px solid var(--color-line);
  background: var(--color-surface);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.site-header.is-scrolled {
  border-bottom-color: color-mix(in srgb, var(--color-primary) 24%, var(--color-line));
  background: var(--color-surface);
  box-shadow: var(--shadow-header);
}

.header-inner {
  min-height: var(--header-height);
  gap: clamp(0.75rem, 1.8vw, 1.5rem);
}

.brand-lockup {
  color: var(--color-primary);
}

.brand-mark {
  width: 3rem;
  height: 3rem;
  border-color: var(--color-line);
  background: var(--color-surface);
}

.brand-words strong {
  color: var(--color-primary);
  font-size: 0.95rem;
}

.brand-words span {
  color: var(--color-text-secondary);
}

.desktop-nav {
  gap: 0.1rem;
}

.desktop-nav > a,
.nav-dropdown > summary {
  min-height: var(--tap-target);
  padding: 0.65rem 0.7rem;
  border-radius: var(--radius-sm);
  color: var(--color-text-secondary);
  font-size: 0.84rem;
  font-weight: var(--font-weight-semibold);
  line-height: 1.5;
  white-space: nowrap;
}

.desktop-nav > a {
  display: inline-flex;
  align-items: center;
}

.desktop-nav > a::after,
.nav-dropdown-menu a::after {
  display: none;
}

.desktop-nav > a:hover,
.desktop-nav > a.is-active,
.nav-dropdown > summary:hover,
.nav-dropdown[open] > summary {
  background: var(--color-primary-soft);
  color: var(--color-primary);
}

.desktop-nav > a.is-active {
  box-shadow: inset 0 -2px 0 var(--color-accent);
}

.nav-dropdown {
  position: relative;
}

.nav-dropdown > summary {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  cursor: pointer;
  list-style: none;
}

.nav-dropdown > summary::-webkit-details-marker {
  display: none;
}

.nav-dropdown-chevron {
  width: 0.45rem;
  height: 0.45rem;
  border-inline-end: 1.5px solid currentColor;
  border-block-end: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-0.1rem);
  transition: transform var(--duration-fast) var(--ease-standard);
}

.nav-dropdown[open] .nav-dropdown-chevron {
  transform: rotate(225deg) translate(-0.1rem, -0.1rem);
}

.nav-dropdown-menu {
  position: absolute;
  z-index: calc(var(--z-header) + 2);
  inset-block-start: calc(100% + 0.5rem);
  inset-inline-end: 0;
  display: grid;
  min-width: 13rem;
  padding: 0.45rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-soft);
}

.nav-dropdown-menu a {
  min-height: var(--tap-target);
  padding: 0.6rem 0.7rem;
  border-radius: var(--radius-sm);
  color: var(--color-text-secondary);
  font-size: var(--text-small);
  font-weight: var(--font-weight-semibold);
}

.nav-dropdown-menu a:hover,
.nav-dropdown-menu a.is-active {
  background: var(--color-primary-soft);
  color: var(--color-primary);
}

.header-actions {
  gap: 0.35rem;
}

.header-search,
.header-account,
.header-actions .desktop-register,
.header-contact,
.header-social-links {
  display: none;
}

.header-actions .btn {
  white-space: nowrap;
}

.header-search {
  color: var(--color-primary);
}

.menu-toggle {
  border-color: var(--color-line);
  background: var(--color-surface);
  color: var(--color-primary);
}

.mobile-nav {
  max-height: calc(100dvh - var(--header-height) - env(safe-area-inset-top));
  border-top: 0;
  border-bottom: 1px solid var(--color-line);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-raised);
}

.mobile-nav-inner {
  gap: 1rem;
  padding-block: 1rem calc(1.25rem + env(safe-area-inset-bottom));
}

.mobile-nav-heading {
  align-items: center;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--color-line);
}

.mobile-nav-heading strong {
  color: var(--color-primary);
}

.mobile-nav-links {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  border-block: 1px solid var(--color-line);
}

.mobile-nav-links > a {
  min-height: 3.25rem;
  padding: 0.7rem 0.25rem;
  border: 0;
  border-bottom: 1px solid var(--color-line);
  border-radius: 0;
  background: transparent;
  color: var(--color-text-primary);
}

.mobile-nav-links > a:last-child {
  border-bottom: 0;
}

.mobile-nav-links > a:hover {
  background: var(--color-primary-soft);
  color: var(--color-primary);
}

.mobile-nav-links > a.is-active {
  border-color: var(--color-line);
  border-inline-start: 3px solid var(--color-accent);
  background: var(--color-primary-soft);
  color: var(--color-primary);
}

.mobile-nav-utilities {
  border-top: 0;
}

.mobile-nav-phone {
  padding-inline: 0.25rem;
  color: var(--color-text-secondary);
}

.mobile-nav-phone bdi {
  color: var(--color-primary);
}

.mobile-nav-social a {
  border-color: var(--color-border);
  color: var(--color-primary);
}

.mobile-nav-scrim {
  background: color-mix(in srgb, var(--sys-color-scrim) 52%, transparent);
}

.icon-button,
.icon-btn {
  display: inline-grid;
  width: var(--tap-target);
  height: var(--tap-target);
  min-height: var(--tap-target);
  padding: 0;
  place-items: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-button);
  background: var(--color-surface);
  color: var(--color-primary);
  box-shadow: none;
}

.icon-button:hover,
.icon-btn:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
}

.site-footer {
  padding-top: clamp(3.5rem, 7vw, 6rem);
  background: var(--color-primary-hover);
  color: var(--color-on-primary);
}

.footer-grid {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  padding-bottom: clamp(2.5rem, 5vw, 4.5rem);
}

.footer-grid > * {
  padding-block: 1.5rem;
  border-bottom-color: var(--color-footer-line);
}

.brand-lockup-footer {
  color: var(--color-on-primary);
}

.brand-lockup-footer .brand-words strong,
.footer-heading {
  color: var(--color-on-primary);
}

.brand-lockup-footer .brand-words span,
.footer-brand p,
.footer-links,
.footer-bottom {
  color: var(--color-on-primary-muted);
}

.brand-mark-footer {
  border-color: var(--color-footer-line);
}

.footer-heading {
  margin-bottom: 0.75rem;
  font-size: var(--text-small);
}

.footer-links {
  gap: 0.1rem;
}

.footer-links a {
  min-height: var(--tap-target);
  text-underline-offset: 0.25em;
}

.footer-links a:hover {
  color: var(--color-on-primary);
  text-decoration: underline;
}

.social-links {
  color: var(--color-on-primary-muted);
}

.social-links a {
  border-color: var(--color-footer-line);
}

.footer-contact {
  max-width: 22rem;
  gap: 0.7rem;
}

.footer-contact li {
  display: grid;
  gap: 0.1rem;
}

.footer-contact li > span {
  color: var(--color-on-primary-muted);
  font-size: var(--text-caption);
}

.footer-contact li > p {
  margin: 0;
  color: var(--color-on-primary);
  line-height: var(--leading-small);
}

.footer-contact li > a {
  min-height: auto;
  color: var(--color-on-primary);
}

.footer-bottom {
  border-top-color: var(--color-footer-line);
}

.footer-signature {
  color: var(--footer-accent-color);
}

.breadcrumb {
  margin-bottom: 1.5rem;
  color: var(--color-text-secondary);
}

.breadcrumb ol {
  gap: 0.25rem 0.4rem;
}

.breadcrumb li {
  gap: 0.4rem;
  min-width: 0;
}

.breadcrumb a {
  display: inline-flex;
  min-height: var(--tap-target);
  align-items: center;
  color: var(--color-info);
  font-weight: var(--font-weight-semibold);
  text-underline-offset: 0.2em;
}

.breadcrumb a:hover {
  color: var(--color-primary);
  text-decoration: underline;
}

.breadcrumb [aria-current="page"] {
  color: var(--color-text-primary);
  font-weight: var(--font-weight-semibold);
}

.breadcrumb-separator {
  color: var(--color-border);
  font-size: 1.1em;
}

.btn:active:not(:disabled):not([aria-disabled="true"]) {
  box-shadow: none;
  transform: translateY(0);
}

.btn-light {
  border-color: var(--color-surface);
  background: var(--color-surface);
  color: var(--color-primary);
}

.btn-light:hover {
  border-color: var(--color-primary-soft);
  background: var(--color-primary-soft);
  color: var(--color-primary-hover);
}

.field label,
.search-form label {
  color: var(--color-text-primary);
  font-weight: var(--font-weight-semibold);
}

input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
  padding: 0.7rem 0.85rem;
}

input:not([type="checkbox"]):not([type="radio"]):hover,
select:hover,
textarea:hover {
  border-color: var(--color-primary);
}

input:not([type="checkbox"]):not([type="radio"]):focus-visible,
select:focus-visible,
textarea:focus-visible {
  border-color: var(--color-focus);
  outline-color: var(--color-focus);
}

.field-error input,
.field-error select,
.field-error textarea,
input[aria-invalid="true"],
select[aria-invalid="true"],
textarea[aria-invalid="true"] {
  border-color: var(--color-error);
  background: var(--color-error-soft);
}

.field-error-text {
  color: var(--color-error);
}

.field-error-text::before {
  content: "خطا: ";
  font-weight: var(--font-weight-bold);
}

.field-success-text {
  color: var(--color-success);
}

.field-success-text::before {
  content: "تأیید: ";
  font-weight: var(--font-weight-bold);
}

.choice-group label,
.check-control,
.field-checkbox label {
  min-height: var(--tap-target);
}

input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--color-primary);
}

.messages-region {
  z-index: calc(var(--z-header) - 1);
  margin-block: 1rem;
}

.alert {
  gap: 0.8rem;
  padding: 0.9rem 1rem;
  border-color: var(--color-line);
  border-inline-start-width: 4px;
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text-primary);
}

.alert-mark {
  width: 0.65rem;
  height: 0.65rem;
  margin-top: 0.5rem;
  border-radius: 50%;
  background: currentColor;
}

.alert-copy {
  min-width: 0;
}

.alert-label {
  display: block;
  margin-bottom: 0.15rem;
  color: var(--color-text-primary);
  font-size: var(--text-caption);
}

.alert-success {
  border-inline-start-color: var(--color-success);
  background: var(--color-success-soft);
  color: var(--color-success);
}

.alert-error {
  border-inline-start-color: var(--color-error);
  background: var(--color-error-soft);
  color: var(--color-error);
}

.alert-warning {
  border-inline-start-color: var(--color-warning);
  background: var(--color-warning-soft);
  color: var(--color-warning);
}

.alert-info {
  border-inline-start-color: var(--color-info);
  background: var(--color-info-soft);
  color: var(--color-info);
}

.filter-fields-desktop {
  display: none;
}

.filter-drawer-toggle {
  gap: 0.5rem;
}

.filter-drawer-scrim {
  padding: 0;
  border: 0;
  background: color-mix(in srgb, var(--sys-color-scrim) 55%, transparent);
}

.filter-drawer {
  width: min(92vw, 26rem);
  border-inline-end: 1px solid var(--color-line);
  background: var(--color-surface);
  box-shadow: var(--shadow-raised);
}

.filter-drawer-header {
  border-bottom-color: var(--color-line);
}

.filter-drawer .content-filters {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.home-search-suggestions {
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-soft);
}

.home-search-suggestions a {
  border-radius: var(--radius-sm);
}

.home-search-suggestions a:hover,
.home-search-suggestions a:focus-visible {
  background: var(--color-primary-soft);
  color: var(--color-primary);
}

@media (min-width: 48rem) {
  .container,
  .container-wide {
    width: min(calc(100% - 3rem), var(--content-max));
  }

  .container-wide {
    width: min(calc(100% - 3rem), var(--content-wide-max));
  }

  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2.5rem 2rem;
  }

  .footer-grid > * {
    padding-block: 0;
    border-bottom: 0;
  }

  .footer-brand {
    grid-column: 1 / -1;
  }
}

@media (min-width: 64rem) {
  .desktop-nav {
    display: flex;
  }

  .header-search {
    display: inline-grid;
  }

  .header-account {
    display: inline-flex;
  }

  .menu-toggle,
  .mobile-nav,
  .mobile-nav-scrim {
    display: none;
  }

  .filter-fields-desktop {
    display: grid;
  }

  .filter-drawer-control,
  .filter-drawer-scrim,
  .filter-drawer {
    display: none;
  }

  .footer-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .footer-brand {
    grid-column: 1 / -1;
  }
}

@media (min-width: 80rem) {
  .header-actions .desktop-register {
    display: inline-flex;
  }

  .nav-dropdown-registration {
    display: none;
  }

  .footer-grid {
    grid-template-columns: minmax(18rem, 1.5fr) repeat(4, minmax(9rem, 1fr));
  }

  .footer-brand {
    grid-column: auto;
  }
}

@media (min-width: 90rem) {
  .header-contact {
    display: inline-flex;
  }

  .header-social-links {
    display: flex;
  }
}

@media (min-width: 64rem) and (max-width: 79.999rem) {
  .header-inner > .brand-lockup .brand-words span {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .btn,
  .nav-dropdown-chevron,
  .mobile-nav,
  .mobile-nav-scrim,
  .filter-drawer,
  .filter-drawer-scrim {
    transition: none;
  }
}

@media (forced-colors: active) {
  .btn,
  .card,
  .surface-panel,
  .form-demo,
  .content-filters,
  .site-header,
  .site-footer,
  .nav-dropdown-menu,
  .filter-drawer,
  input,
  select,
  textarea {
    border-color: CanvasText;
  }
}

/*
 * مرحلهٔ پنج: صفحهٔ اصلی
 *
 * ساختار صفحه بر انتخاب دوره، شواهد واقعی و یک CTA روشن متمرکز است. قواعد این
 * بخش فقط داخل .home-page اعمال می‌شوند و خروجی محافظت‌شده را تغییر نمی‌دهند.
 */

.home-page {
  overflow: clip;
  background: var(--color-background);
}

.home-page .section,
.home-page .section-compact {
  padding-block: var(--space-section-compact);
}

.home-page .section-alt {
  background: var(--color-surface-alt);
}

.home-hero {
  min-height: auto;
  padding-block: clamp(3rem, 7vw, 6.5rem);
  border-bottom: 1px solid var(--color-line);
  background: var(--color-surface);
}

.home-hero-grid {
  display: grid;
  gap: clamp(2.5rem, 7vw, 6rem);
  align-items: center;
}

.home-hero-copy {
  min-width: 0;
}

.home-hero-kicker {
  margin: 0 0 1rem;
  color: var(--color-secondary);
  font-size: var(--text-small);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.01em;
}

.home-hero .type-display {
  max-width: 15ch;
  margin: 0;
  color: var(--color-primary);
  font-size: clamp(2.15rem, 6vw, 4rem);
  line-height: 1.35;
}

.home-hero .hero-rotator {
  min-block-size: calc(2 * 1.35em);
}

.home-hero .hero-rotator-current {
  transition: none;
}

.home-hero .hero-rotator-current.is-changing {
  opacity: 1;
  transform: none;
}

.home-hero-description {
  max-width: 38rem;
  margin: 1.25rem 0 0;
  color: var(--color-text-secondary);
  line-height: var(--leading-body);
}

.home-hero-actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem 1.25rem;
  align-items: stretch;
  margin-top: 1.75rem;
}

.home-hero-actions .btn {
  justify-content: center;
}

.home-secondary-link {
  display: inline-flex;
  min-height: var(--tap-target);
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  color: var(--color-primary);
  font-weight: var(--font-weight-semibold);
  text-decoration: underline;
  text-decoration-color: var(--color-line);
  text-underline-offset: 0.3em;
}

.home-secondary-link:hover {
  color: var(--color-accent-hover);
  text-decoration-color: currentColor;
}

.home-hero-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 39rem;
  margin: 2.25rem 0 0;
  padding: 1rem 0 0;
  border-top: 1px solid var(--color-line);
  list-style: none;
}

.home-hero-facts li {
  display: grid;
  min-width: 0;
  gap: 0.15rem;
  padding: 0.65rem 0.75rem;
  border-inline-start: 1px solid var(--color-line);
}

.home-hero-facts li:first-child {
  padding-inline-start: 0;
  border-inline-start: 0;
}

.home-hero-facts strong {
  overflow: hidden;
  color: var(--color-text-primary);
  font-size: var(--text-small);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-hero-facts span {
  color: var(--color-text-secondary);
  font-size: var(--text-caption);
}

.home-hero-facts li:last-child:nth-child(odd) {
  grid-column: 1 / -1;
  padding-inline-start: 0;
  border-block-start: 1px solid var(--color-line);
  border-inline-start: 0;
}

.home-hero-media {
  width: min(100%, 30rem);
  margin: 0 auto;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  background: var(--color-surface-alt);
}

.home-hero-image {
  overflow: hidden;
  aspect-ratio: 4 / 5;
  border-radius: calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px) 0 0;
  background: var(--color-surface);
}

.home-hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.home-hero-media.is-logo {
  display: none;
  max-width: 24rem;
}

.home-hero-media.is-logo .home-hero-image {
  aspect-ratio: 1;
  padding: clamp(1.5rem, 7vw, 3.5rem);
}

.home-hero-media.is-logo .home-hero-image img {
  object-fit: contain;
}

.home-hero-media figcaption {
  display: grid;
  gap: 0.25rem;
  padding: 1rem 1.1rem;
  border-top: 1px solid var(--color-line);
}

.home-hero-media figcaption strong {
  color: var(--color-primary);
  font-size: var(--text-small);
}

.home-hero-media figcaption span {
  color: var(--color-text-secondary);
  font-size: var(--text-caption);
  line-height: var(--leading-small);
}

.home-section-heading {
  display: grid;
  gap: 1rem 3rem;
  margin-bottom: clamp(2rem, 5vw, 3.5rem);
}

.home-section-heading .eyebrow,
.home-section-heading h2,
.home-section-heading > p {
  margin-block-start: 0;
}

.home-section-heading h2 {
  max-width: 24ch;
}

.home-section-heading > p {
  max-width: 35rem;
  margin-block-end: 0;
  color: var(--color-text-secondary);
}

.home-finder-layout {
  display: grid;
  gap: 2rem;
}

.home-subheading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--color-line);
}

.home-subheading h3,
.home-subheading h4 {
  margin: 0;
}

.home-subheading > span {
  flex: 0 0 auto;
  color: var(--color-secondary);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-bold);
}

.home-age-grid {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--color-line);
}

.home-age-grid > a {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  min-height: 5.75rem;
  padding: 1rem 0;
  border: 0;
  border-bottom: 1px solid var(--color-line);
  border-radius: 0;
  background: transparent;
  color: var(--color-text-primary);
}

.home-age-grid > a:hover {
  border-color: var(--color-secondary);
  background: transparent;
  color: var(--color-primary);
  box-shadow: none;
  transform: none;
}

.home-age-index {
  color: var(--color-accent);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-bold);
}

.home-age-grid h4,
.home-age-grid p {
  margin: 0;
}

.home-age-grid h4 {
  font-size: var(--text-h4);
}

.home-age-grid p {
  margin-top: 0.2rem;
  color: var(--color-text-secondary);
  font-size: var(--text-small);
}

.home-age-grid .ui-icon {
  width: 1rem;
  height: 1rem;
  color: var(--color-secondary);
}

.home-finder-tools {
  align-self: start;
  padding: clamp(1.25rem, 4vw, 2rem);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  background: var(--color-surface-alt);
}

.home-finder-tools .home-subheading {
  border-bottom-color: var(--color-border);
}

.home-page .home-search {
  max-width: none;
  margin-top: 0;
}

.home-page .home-search label {
  display: block;
  margin-bottom: 0.45rem;
  color: var(--color-text-primary);
  font-size: var(--text-small);
  font-weight: var(--font-weight-semibold);
}

.home-page .home-search-control {
  display: grid;
  gap: 0.6rem;
}

.home-page .home-search-control input {
  min-height: 3.25rem;
  background: var(--color-surface);
  box-shadow: none;
}

.home-page .home-search-suggestions {
  margin-top: 0.75rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.home-page .home-search-suggestions > p {
  margin: 0 0 0.45rem;
  color: var(--color-text-secondary);
  font-size: var(--text-caption);
}

.home-page .home-search-suggestions > div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--color-line);
}

.home-page .home-search-suggestions a {
  display: grid;
  min-height: var(--tap-target);
  gap: 0.1rem;
  padding: 0.65rem 0;
  border: 0;
  border-bottom: 1px solid var(--color-line);
  border-radius: 0;
  background: transparent;
  color: var(--color-primary);
}

.home-page .home-search-suggestions a:nth-child(odd) {
  padding-inline-end: 0.65rem;
}

.home-page .home-search-suggestions a:nth-child(even) {
  padding-inline-start: 0.65rem;
  border-inline-start: 1px solid var(--color-line);
}

.home-page .home-search-suggestions a:hover,
.home-page .home-search-suggestions a:focus-visible {
  border-color: var(--color-line);
  background: var(--color-primary-soft);
}

.home-page .home-search-suggestions a small {
  color: var(--color-text-secondary);
  font-size: 0.68rem;
}

.home-language-paths {
  margin-top: 1.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--color-border);
}

.home-language-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.home-language-heading h4 {
  margin: 0;
  color: var(--color-text-primary);
}

.home-language-heading a {
  color: var(--color-info);
  font-size: var(--text-small);
  font-weight: var(--font-weight-semibold);
}

.home-language-paths ul {
  display: grid;
  margin: 0.75rem 0 0;
  padding: 0;
  border-top: 1px solid var(--color-line);
  list-style: none;
}

.home-language-paths li {
  border-bottom: 1px solid var(--color-line);
}

.home-language-paths li a {
  display: flex;
  min-height: var(--tap-target);
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.55rem;
}

.home-language-paths li a:hover {
  color: var(--color-accent-hover);
}

.home-language-paths bdi {
  color: var(--color-text-secondary);
  font-size: var(--text-caption);
}

.home-page .section-heading {
  margin-bottom: clamp(2rem, 5vw, 3.5rem);
}

.home-page .section-heading .type-h2 {
  max-width: 24ch;
}

.home-page .home-card-grid {
  gap: clamp(1rem, 2.5vw, 1.5rem);
}

.home-page .home-card-grid .card {
  box-shadow: none;
}

.home-learning {
  background: var(--color-primary-hover);
  color: var(--color-on-primary);
}

.home-learning-grid {
  display: grid;
  gap: clamp(2.5rem, 7vw, 6rem);
}

.home-learning .type-h2,
.home-learning .type-h4 {
  color: var(--color-on-primary);
}

.home-learning-intro > p:not(.eyebrow) {
  max-width: 36rem;
  margin: 1rem 0 1.5rem;
  color: var(--color-on-primary-muted);
}

.home-light-link {
  display: inline-flex;
  min-height: var(--tap-target);
  align-items: center;
  gap: 0.5rem;
  color: var(--color-on-primary);
  font-weight: var(--font-weight-semibold);
  text-decoration: underline;
  text-decoration-color: var(--color-footer-line);
  text-underline-offset: 0.3em;
}

.home-light-link:hover {
  color: var(--footer-accent-color);
  text-decoration-color: currentColor;
}

.home-learning-details {
  min-width: 0;
}

.home-learning .home-features-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid var(--color-footer-line);
}

.home-learning .home-feature {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0 1rem;
  padding: 1.25rem 0;
  border: 0;
  border-bottom: 1px solid var(--color-footer-line);
  border-radius: 0;
  background: transparent;
}

.home-learning .home-feature-icon {
  grid-row: span 2;
  margin: 0;
  background: transparent;
  color: var(--footer-accent-color);
}

.home-learning .home-feature p {
  margin-top: 0.3rem;
  color: var(--color-on-primary-muted);
}

.home-learning-note {
  margin-top: 1.5rem;
  padding-inline-start: 1rem;
  border-inline-start: 3px solid var(--color-accent);
}

.home-learning-note p {
  margin: 0.4rem 0;
  color: var(--color-on-primary-muted);
}

.home-learning-note a {
  color: var(--footer-accent-color);
  font-size: var(--text-small);
  font-weight: var(--font-weight-semibold);
}

.home-empty-dark {
  padding: 1.25rem 0;
  border-block: 1px solid var(--color-footer-line);
  border-inline: 0;
  border-radius: 0;
  color: var(--color-on-primary-muted);
}

.home-proof .home-section-heading {
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--color-line);
}

.home-statistics-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  border-block: 1px solid var(--color-line);
}

.home-statistics-grid .stat-card {
  min-width: 0;
  padding: clamp(1.25rem, 4vw, 2rem);
  border: 0;
  border-bottom: 1px solid var(--color-line);
  border-inline-start: 1px solid var(--color-line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.home-statistics-grid .stat-card:nth-child(odd) {
  border-inline-start: 0;
}

.home-statistics-grid .stat-card strong {
  font-size: clamp(2rem, 7vw, 4rem);
}

.home-testimonials-block {
  margin-top: clamp(2.5rem, 6vw, 4.5rem);
}

.home-page .testimonial-grid {
  gap: 1rem;
}

.home-page .testimonial-card {
  border-color: var(--color-line);
  box-shadow: none;
}

.home-inline-empty {
  margin: 0;
  padding: 1.25rem;
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text-secondary);
  text-align: center;
}

.home-updates-stack {
  display: grid;
  gap: var(--space-section-compact);
}

.home-updates-stack > section + section {
  padding-top: var(--space-section-compact);
  border-top: 1px solid var(--color-line);
}

.home-gallery-grid {
  gap: 0.75rem;
}

.home-gallery-grid .gallery-card {
  min-height: 16rem;
  border-radius: var(--radius-md);
}

.home-gallery-grid .gallery-card img {
  min-height: 16rem;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.home-faq-grid {
  display: grid;
  gap: clamp(2rem, 6vw, 5rem);
}

.home-faq-intro {
  align-self: start;
}

.home-faq-intro .type-h2 {
  max-width: 18ch;
}

.home-faq-intro > p:not(.eyebrow) {
  max-width: 30rem;
  margin: 1rem 0 1.5rem;
  color: var(--color-text-secondary);
}

.home-page .home-faq .faq-item {
  border-inline: 0;
  border-block-start: 0;
  border-block-end: 1px solid var(--color-line);
  border-radius: 0;
  background: transparent;
}

.home-final-cta {
  padding-block: clamp(3.5rem, 7vw, 6rem);
  background: var(--color-primary);
  color: var(--color-on-primary);
}

.home-final-cta-inner {
  display: grid;
  gap: 1.5rem 3rem;
  align-items: center;
}

.home-final-cta .type-h2 {
  max-width: 24ch;
  color: var(--color-on-primary);
}

.home-final-cta p:not(.eyebrow) {
  max-width: 42rem;
  margin: 0.75rem 0 0;
  color: var(--color-on-primary-muted);
}

.home-final-cta-media {
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--color-footer-line);
  border-radius: var(--radius-md);
}

.home-final-cta-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.home-final-cta-actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: stretch;
}

.home-final-cta-actions .btn {
  justify-content: center;
}

@media (min-width: 40rem) {
  .home-hero-actions,
  .home-final-cta-actions {
    flex-direction: row;
    align-items: center;
  }

  .home-hero-actions .btn,
  .home-final-cta-actions .btn {
    width: auto;
  }

  .home-hero-facts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .home-hero-facts li:last-child:nth-child(odd) {
    grid-column: auto;
    padding-inline-start: 0.75rem;
    border-block-start: 0;
    border-inline-start: 1px solid var(--color-line);
  }

  .home-search-control {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}

@media (min-width: 48rem) {
  .home-section-heading {
    grid-template-columns: minmax(0, 1fr) minmax(16rem, 0.65fr);
    align-items: end;
  }

  .home-age-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-age-grid > a:nth-child(odd) {
    padding-inline-end: 1.25rem;
  }

  .home-age-grid > a:nth-child(even) {
    padding-inline-start: 1.25rem;
    border-inline-start: 1px solid var(--color-line);
  }

  .home-final-cta-inner:has(.home-final-cta-media) {
    grid-template-columns: minmax(12rem, 0.45fr) minmax(0, 1fr);
  }

  .home-final-cta-inner:has(.home-final-cta-media) .home-final-cta-actions {
    grid-column: 2;
  }
}

@media (min-width: 64rem) {
  .home-hero-media.is-logo {
    display: block;
  }

  .home-page .section,
  .home-page .section-compact {
    padding-block: var(--space-section);
  }

  .home-hero-grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(20rem, 0.75fr);
  }

  .home-finder-layout {
    grid-template-columns: minmax(0, 1.15fr) minmax(20rem, 0.75fr);
    gap: clamp(2.5rem, 6vw, 5rem);
  }

  .home-learning-grid {
    grid-template-columns: minmax(0, 0.75fr) minmax(0, 1fr);
  }

  .home-learning .home-features-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-learning .home-feature:nth-child(odd) {
    padding-inline-end: 1.25rem;
  }

  .home-learning .home-feature:nth-child(even) {
    padding-inline-start: 1.25rem;
    border-inline-start: 1px solid var(--color-footer-line);
  }

  .home-statistics-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .home-statistics-grid .stat-card,
  .home-statistics-grid .stat-card:nth-child(odd) {
    border-bottom: 0;
    border-inline-start: 1px solid var(--color-line);
  }

  .home-statistics-grid .stat-card:first-child {
    border-inline-start: 0;
  }

  .home-faq-grid {
    grid-template-columns: minmax(18rem, 0.7fr) minmax(0, 1.3fr);
  }

  .home-faq-intro {
    position: sticky;
    inset-block-start: calc(var(--header-height) + 2rem);
  }

  .home-final-cta-inner:not(:has(.home-final-cta-media)) {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}

@media (min-width: 80rem) {
  .home-page .section-heading-inline {
    grid-template-columns: minmax(0, 1fr) minmax(19rem, 0.65fr);
  }

  .home-hero-media {
    margin-inline-end: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-page *,
  .home-page *::before,
  .home-page *::after {
    scroll-behavior: auto;
  }
}

@media (forced-colors: active) {
  .home-hero-media,
  .home-finder-tools,
  .home-age-grid,
  .home-language-paths,
  .home-learning,
  .home-final-cta {
    border: 1px solid CanvasText;
  }
}

/*
 * مرحلهٔ شش: صفحات دوره‌ها
 *
 * کشف دوره از گروه سنی آغاز می‌شود، فیلترهای ثانویه به‌صورت پیش‌رونده آشکار
 * می‌شوند و جزئیات دوره یک جریان خواندن خطی دارد. این لایه خروجی محافظت‌شده را
 * تغییر نمی‌دهد و فقط زیر Wrapperهای صفحه و کامپوننت مشترک دوره اعمال می‌شود.
 */

.courses-catalog-page,
.language-detail-page,
.course-detail-page {
  overflow: clip;
  background: var(--color-background);
}

.courses-catalog-hero,
.language-detail-page .language-hero,
.course-detail-page .course-detail-hero {
  padding-block: clamp(2.75rem, 7vw, 5.75rem);
  border-bottom: 1px solid var(--color-line);
  background: var(--color-surface);
}

.courses-catalog-hero-grid {
  display: grid;
  gap: clamp(2.5rem, 7vw, 5rem);
  align-items: end;
}

.courses-catalog-hero-copy .type-h1 {
  max-width: 17ch;
  margin-bottom: 1rem;
  color: var(--color-primary);
}

.courses-catalog-hero-copy .page-intro {
  max-width: 39rem;
  margin: 0;
  color: var(--color-text-secondary);
}

.courses-catalog-hero .hero-actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: stretch;
  margin-top: 1.75rem;
}

.courses-catalog-hero .hero-actions .btn {
  justify-content: center;
}

.courses-catalog-steps {
  display: grid;
  margin: 0;
  padding: 0;
  border-block: 1px solid var(--color-line);
  list-style: none;
}

.courses-catalog-steps li {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: 0.75rem;
  padding-block: 1rem;
  border-bottom: 1px solid var(--color-line);
}

.courses-catalog-steps li:last-child {
  border-bottom: 0;
}

.courses-catalog-steps li > span {
  color: var(--color-accent-hover);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-bold);
}

.courses-catalog-steps li > div {
  display: grid;
  gap: 0.15rem;
}

.courses-catalog-steps strong {
  color: var(--color-text-primary);
}

.courses-catalog-steps small {
  color: var(--color-text-secondary);
  line-height: var(--leading-small);
}

.course-entry-section {
  padding-block: var(--space-section-compact);
  border-bottom: 1px solid var(--color-line);
  background: var(--color-surface-alt);
}

.course-entry-heading,
.language-section-heading,
.course-section-heading {
  display: grid;
  gap: 1rem 3rem;
  margin-bottom: 2rem;
}

.course-entry-heading .eyebrow,
.course-entry-heading h2,
.course-entry-heading > p,
.language-section-heading .eyebrow,
.language-section-heading h2,
.language-section-heading > p,
.course-section-heading .eyebrow,
.course-section-heading h2,
.course-section-heading > p {
  margin-block: 0;
}

.course-entry-heading > p,
.language-section-heading > p,
.course-section-heading > p {
  max-width: 36rem;
  color: var(--color-text-secondary);
}

.course-age-paths {
  display: grid;
  border-block: 1px solid var(--color-border);
}

.course-age-paths > a {
  position: relative;
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr) auto;
  gap: 0.25rem 0.75rem;
  min-height: var(--tap-target);
  padding-block: 1.15rem;
  color: var(--color-text-primary);
  text-decoration: none;
}

.course-age-paths > a + a {
  border-block-start: 1px solid var(--color-line);
}

.course-age-paths > a > span {
  grid-row: 1 / span 3;
  color: var(--color-secondary);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-bold);
}

.course-age-paths > a > strong {
  font-size: var(--text-h4);
}

.course-age-paths > a > small,
.course-age-paths > a > p {
  grid-column: 2;
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--text-small);
  line-height: var(--leading-small);
}

.course-age-paths > a > b {
  grid-column: 3;
  grid-row: 1 / span 3;
  align-self: center;
  color: var(--color-accent-hover);
  transition: transform var(--duration-fast) var(--ease-standard);
}

.course-age-paths > a:hover {
  color: var(--color-primary);
}

.course-age-paths > a:hover > b {
  transform: translateX(-0.2rem);
}

.course-language-paths {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin-top: 1.5rem;
}

.course-language-paths > span {
  width: 100%;
  color: var(--color-text-secondary);
  font-size: var(--text-small);
  font-weight: var(--font-weight-semibold);
}

.course-language-paths > a {
  display: inline-flex;
  min-height: var(--tap-target);
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-button);
  background: var(--color-surface);
  color: var(--color-primary);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
}

.course-language-paths > a:hover {
  border-color: var(--color-secondary);
  background: var(--color-secondary-soft);
}

.course-language-paths small {
  color: var(--color-text-secondary);
  font-size: var(--text-caption);
}

.courses-results-section {
  padding-block: var(--space-section-compact);
  background: var(--color-background);
}

.courses-results-layout {
  min-width: 0;
}

.course-filter-sidebar {
  display: none;
}

.courses-results {
  min-width: 0;
}

.courses-results .active-filter-bar {
  margin: 0 0 1.5rem;
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.course-filter-more {
  grid-column: 1 / -1;
  border-block: 1px solid var(--color-line);
}

.course-filter-more > summary {
  display: grid;
  min-height: var(--tap-target);
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.1rem 1rem;
  align-items: center;
  padding-block: 0.7rem;
  color: var(--color-primary);
  cursor: pointer;
  font-weight: var(--font-weight-semibold);
  list-style: none;
}

.course-filter-more > summary::-webkit-details-marker {
  display: none;
}

.course-filter-more > summary::after {
  grid-column: 2;
  grid-row: 1 / span 2;
  color: var(--color-secondary);
  content: "+";
  font-size: 1.25rem;
}

.course-filter-more[open] > summary::after {
  content: "−";
}

.course-filter-more > summary small {
  color: var(--color-text-secondary);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-regular);
}

.course-filter-more-fields {
  display: grid;
  gap: 1rem;
  padding-block: 1rem;
  border-block-start: 1px solid var(--color-line);
}

.course-filter-sidebar .content-filters {
  margin: 0;
}

.course-filter-sidebar-heading {
  display: grid;
  gap: 0.35rem;
  margin-bottom: 1rem;
}

.course-filter-sidebar-heading strong {
  color: var(--color-primary);
  font-size: var(--text-h4);
}

.course-filter-sidebar-heading p {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--text-small);
  line-height: var(--leading-small);
}

.courses-grid,
.language-course-grid,
.course-related-grid {
  display: grid;
  gap: 1rem;
}

.card-course {
  padding: 1rem;
  border-color: var(--color-line);
  border-radius: var(--radius-card);
}

.card-course:hover {
  border-color: var(--color-border);
  box-shadow: var(--shadow-soft);
  transform: translateY(-2px);
}

.card-course .course-card-visual {
  min-height: 0;
  aspect-ratio: 16 / 10;
  margin: -1rem -1rem 1rem;
  border-radius: calc(var(--radius-card) - 1px) calc(var(--radius-card) - 1px) 0 0;
  background: var(--color-primary-soft);
}

.card-course .course-card-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card-course .course-image-fallback {
  border-radius: var(--radius-md);
  color: var(--color-primary);
}

.card-course .card-topline {
  margin-bottom: 0.85rem;
}

.card-course .card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
}

.card-course .card-eyebrow {
  margin-bottom: 0.4rem;
  color: var(--color-secondary);
}

.card-course .card-title {
  margin-bottom: 0.65rem;
}

.card-course .card-text {
  display: -webkit-box;
  overflow: hidden;
  margin-bottom: 1rem;
  color: var(--color-text-secondary);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.course-card-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin: auto 0 0;
  padding-block: 0.85rem;
  border-block: 1px solid var(--color-line);
}

.course-card-facts div {
  min-width: 0;
  padding-inline: 0.65rem;
  border-inline-start: 1px solid var(--color-line);
}

.course-card-facts div:first-child {
  padding-inline-start: 0;
  border-inline-start: 0;
}

.course-card-facts dt {
  color: var(--color-text-secondary);
  font-size: var(--text-caption);
}

.course-card-facts dd {
  overflow-wrap: anywhere;
  margin: 0.25rem 0 0;
  color: var(--color-text-primary);
  font-size: var(--text-small);
  font-weight: var(--font-weight-semibold);
  line-height: var(--leading-small);
}

.card-course .card-footer {
  margin-top: 0;
  padding-top: 0.9rem;
  border-top: 0;
}

.card-course .card-footer > span:first-child {
  color: var(--color-text-secondary);
  font-size: var(--text-small);
}

/* صفحهٔ دستهٔ زبان */

.language-detail-page .language-hero-grid {
  gap: clamp(2.5rem, 7vw, 5rem);
}

.language-detail-page .language-hero-copy .type-h1 {
  max-width: 15ch;
  margin-bottom: 0;
  color: var(--color-primary);
}

.language-detail-page .language-name-en {
  margin: 0.35rem 0 1rem;
}

.language-detail-page .page-intro {
  max-width: 38rem;
  color: var(--color-text-secondary);
}

.language-hero-actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: stretch;
  margin-top: 1.75rem;
}

.language-hero-actions .btn {
  justify-content: center;
}

.language-all-courses-link {
  display: inline-flex;
  min-height: var(--tap-target);
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  font-weight: var(--font-weight-semibold);
  text-decoration: underline;
  text-decoration-color: var(--color-line);
  text-underline-offset: 0.3em;
}

.language-all-courses-link:hover {
  color: var(--color-accent-hover);
  text-decoration-color: currentColor;
}

.language-detail-page .language-hero-visual {
  min-height: 0;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  background: var(--color-primary-soft);
  box-shadow: none;
}

.language-detail-page .language-hero-visual img {
  min-height: 0;
}

.language-detail-page .language-image-fallback {
  min-height: 100%;
  padding: 2rem;
  background: var(--color-primary);
  color: var(--color-on-primary);
}

.language-detail-page .language-image-fallback span {
  font-size: clamp(4rem, 16vw, 8rem);
  opacity: 0.18;
}

.language-detail-page .language-image-fallback small {
  opacity: 0.82;
}

.language-detail-page .language-image-fallback b {
  font-size: var(--text-small);
}

.language-age-section {
  border-bottom: 1px solid var(--color-line);
  background: var(--color-surface-alt);
}

.language-age-inner {
  display: grid;
  gap: 1.5rem 3rem;
  padding-block: 1.5rem;
}

.language-age-inner .eyebrow,
.language-age-inner h2 {
  margin-block: 0;
}

.language-age-paths {
  display: grid;
  border-block: 1px solid var(--color-border);
}

.language-age-paths a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.15rem 0.75rem;
  min-height: var(--tap-target);
  align-items: center;
  padding-block: 0.75rem;
  color: var(--color-primary);
  text-decoration: none;
}

.language-age-paths a + a {
  border-block-start: 1px solid var(--color-line);
}

.language-age-paths a > span {
  font-weight: var(--font-weight-bold);
}

.language-age-paths a > small {
  color: var(--color-text-secondary);
  font-size: var(--text-caption);
}

.language-age-paths a > b {
  grid-column: 2;
  grid-row: 1 / span 2;
  color: var(--color-accent-hover);
}

.language-detail-page .language-content-section,
.language-course-section,
.language-support-section,
.language-video-section {
  padding-block: var(--space-section-compact);
}

.language-detail-page .language-content-section {
  background: var(--color-surface);
}

.language-video-section,
.language-support-section {
  border-block: 1px solid var(--color-line);
  background: var(--color-surface-alt);
}

.language-section-action {
  margin-top: 1.5rem;
  text-align: center;
}

/* صفحهٔ جزئیات دوره */

.course-detail-page .detail-hero-copy .type-h1 {
  max-width: 16ch;
  color: var(--color-primary);
}

.course-detail-page .detail-hero-copy .page-intro {
  max-width: 40rem;
  color: var(--color-text-secondary);
}

.course-detail-page .detail-facts {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin-block: 1.75rem;
  border-block: 1px solid var(--color-border);
}

.course-detail-page .detail-facts div {
  min-height: 0;
  padding: 0.85rem 0.75rem;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.course-detail-page .detail-facts div:nth-child(n + 3) {
  border-block-start: 1px solid var(--color-line);
}

.course-detail-page .detail-facts div:nth-child(even) {
  border-inline-start: 1px solid var(--color-line);
}

.course-detail-page .detail-facts dt {
  color: var(--color-text-secondary);
}

.course-detail-page .detail-actions {
  grid-template-columns: 1fr;
}

.course-detail-page .detail-actions .btn {
  justify-content: center;
}

.course-detail-page .detail-visual {
  min-height: 0;
  aspect-ratio: 4 / 3;
  margin: 0;
  border-radius: var(--radius-lg);
  background: var(--color-primary-soft);
  box-shadow: none;
}

.course-detail-page .detail-visual::after {
  display: none;
}

.course-detail-page .detail-visual img {
  position: absolute;
  inset: 0;
}

.course-detail-page .detail-visual > small {
  display: none;
}

.course-detail-page .detail-visual figcaption {
  position: absolute;
  inset-inline: 1rem;
  inset-block-end: 1rem;
  color: var(--color-text-secondary);
  font-size: var(--text-caption);
  text-align: center;
}

.course-jump-bar {
  position: sticky;
  z-index: calc(var(--z-header) - 2);
  inset-block-start: var(--header-height);
  border-bottom: 1px solid var(--color-line);
  background: color-mix(in srgb, var(--sys-color-surface) 96%, transparent);
}

.course-jump-nav {
  display: flex;
  gap: 0.25rem;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  padding-block: 0.5rem;
  scroll-padding-inline: 1rem;
  scrollbar-width: thin;
}

.course-jump-nav a {
  display: inline-flex;
  min-height: var(--tap-target);
  flex: 0 0 auto;
  align-items: center;
  padding-inline: 0.75rem;
  border-radius: var(--radius-button);
  color: var(--color-text-secondary);
  font-size: var(--text-small);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
}

.course-jump-nav a:hover,
.course-jump-nav a:focus-visible {
  background: var(--color-primary-soft);
  color: var(--color-primary);
}

.course-detail-page .detail-content-section,
.course-resource-section,
.course-learning-section,
.course-continuation-section,
.course-teacher-section,
.course-classes-section,
.course-gallery-section,
.course-articles-section {
  padding-block: var(--space-section-compact);
}

.course-detail-page .detail-content-section {
  background: var(--color-surface);
}

.course-detail-page .detail-rich-content {
  max-width: 52rem;
}

.course-editorial-grid,
.course-section-split {
  display: grid;
  gap: 2rem clamp(2.5rem, 6vw, 5rem);
}

.course-section-intro {
  max-width: 32rem;
}

.course-section-intro .eyebrow,
.course-section-intro h2 {
  margin-block-start: 0;
}

.course-section-intro > p:last-child {
  color: var(--color-text-secondary);
  line-height: var(--leading-body);
}

.course-resource-section {
  border-block-start: 1px solid var(--color-line);
  background: var(--color-background);
}

.course-book-grid {
  grid-template-columns: 1fr;
}

.course-learning-section {
  border-block: 1px solid var(--color-line);
  background: var(--color-surface-alt);
}

.course-learning-path {
  display: grid;
  margin: 0;
  padding: 0;
  counter-reset: course-step;
  list-style: none;
}

.course-learning-path > li {
  position: relative;
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: 1rem;
  padding-block: 0 1.75rem;
  counter-increment: course-step;
}

.course-learning-path > li::before {
  position: relative;
  z-index: 1;
  display: grid;
  width: 2.25rem;
  height: 2.25rem;
  place-items: center;
  border: 1px solid var(--color-secondary);
  border-radius: 50%;
  background: var(--color-surface-alt);
  color: var(--color-secondary);
  content: counter(course-step, decimal-leading-zero);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-bold);
}

.course-learning-path > li::after {
  position: absolute;
  inset-block: 2.25rem 0;
  inset-inline-start: 1.1rem;
  width: 1px;
  background: var(--color-line);
  content: "";
}

.course-learning-path > li:last-child {
  padding-block-end: 0;
}

.course-learning-path > li:last-child::after {
  display: none;
}

.course-learning-path > li > div {
  padding-block-end: 1.5rem;
  border-block-end: 1px solid var(--color-line);
}

.course-learning-path > li:last-child > div {
  padding-block-end: 0;
  border-block-end: 0;
}

.course-learning-path .type-h4 {
  margin: 0 0 0.65rem;
}

.course-learning-path .rich-text-content {
  color: var(--color-text-secondary);
}

.course-continuation-section {
  background: var(--color-surface);
}

.course-teacher-section,
.course-articles-section,
.course-callback-section {
  border-block: 1px solid var(--color-line);
  background: var(--color-surface-alt);
}

.course-teacher-grid {
  align-content: start;
}

.course-teacher-grid .card-person {
  min-height: 0;
  box-shadow: none;
}

.course-classes-section {
  background: var(--color-surface);
}

.course-detail-page .class-schedule-card {
  box-shadow: none;
}

.course-detail-page .class-schedule-card:hover {
  transform: none;
}

.course-callback-section {
  scroll-margin-top: calc(var(--header-height) + 4rem);
}

.course-gallery-section {
  background: var(--color-surface);
}

.course-detail-page [id] {
  scroll-margin-top: calc(var(--header-height) + 5rem);
}

@media (min-width: 40rem) {
  .courses-catalog-hero .hero-actions,
  .language-hero-actions {
    flex-direction: row;
    align-items: center;
  }

  .course-age-paths {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .course-age-paths > a {
    display: grid;
    padding-inline: 1rem;
  }

  .course-age-paths > a + a {
    border-block-start: 0;
    border-inline-start: 1px solid var(--color-line);
  }

  .course-age-paths > a:first-child {
    padding-inline-start: 0;
  }

  .course-age-paths > a:last-child {
    padding-inline-end: 0;
  }

  .course-language-paths > span {
    width: auto;
  }

  .courses-grid,
  .language-course-grid,
  .course-related-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .course-filter-more-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .language-age-paths {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .language-age-paths a {
    padding-inline: 1rem;
  }

  .language-age-paths a + a {
    border-block-start: 0;
    border-inline-start: 1px solid var(--color-line);
  }

  .language-age-paths a:first-child {
    padding-inline-start: 0;
  }

  .language-age-paths a:last-child {
    padding-inline-end: 0;
  }

  .course-detail-page .detail-actions {
    grid-template-columns: repeat(2, minmax(0, max-content));
  }

  .course-book-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 48rem) {
  .courses-catalog-hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(16rem, 0.55fr);
  }

  .course-entry-heading,
  .language-section-heading,
  .course-section-heading {
    grid-template-columns: minmax(0, 1fr) minmax(16rem, 0.7fr);
    align-items: end;
  }

  .course-language-paths {
    gap: 0.65rem;
  }

  .language-age-inner {
    grid-template-columns: minmax(14rem, 0.55fr) minmax(0, 1fr);
    align-items: center;
  }

  .course-detail-page .detail-hero-grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(17rem, 0.72fr);
    align-items: center;
  }

  .course-editorial-grid,
  .course-section-split {
    grid-template-columns: minmax(15rem, 0.55fr) minmax(0, 1fr);
    align-items: start;
  }

  .course-editorial-grid .course-section-intro,
  .course-section-split .course-section-intro {
    position: sticky;
    inset-block-start: calc(var(--header-height) + 5rem);
  }
}

@media (min-width: 64rem) {
  .courses-results-layout {
    display: grid;
    grid-template-columns: minmax(16rem, 0.32fr) minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 4rem);
    align-items: start;
  }

  .course-filter-sidebar {
    display: block;
    position: sticky;
    inset-block-start: calc(var(--header-height) + 2rem);
    max-height: calc(100vh - var(--header-height) - 3rem);
    overflow-y: auto;
    padding-inline-end: 0.5rem;
    scrollbar-width: thin;
  }

  .course-filter-sidebar .filter-fields-desktop.course-filters {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    padding: 1rem;
    border-radius: var(--radius-md);
    box-shadow: none;
  }

  .course-filter-sidebar .course-filter-search,
  .course-filter-sidebar .course-filter-action {
    grid-column: 1;
  }

  .course-filter-sidebar .course-filter-action {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }

  .language-detail-page .language-hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(22rem, 0.72fr);
  }

  .language-course-grid,
  .course-related-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .course-detail-page .detail-hero-grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(22rem, 0.72fr);
  }

  .course-detail-page .detail-facts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .course-detail-page .detail-facts div:nth-child(even) {
    border-inline-start: 0;
  }

  .course-detail-page .detail-facts div:not(:nth-child(3n + 1)) {
    border-inline-start: 1px solid var(--color-line);
  }

  .course-detail-page .detail-facts div:nth-child(n) {
    border-block-start: 0;
  }

  .course-detail-page .detail-facts div:nth-child(n + 4) {
    border-block-start: 1px solid var(--color-line);
  }

  .course-book-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 90rem) {
  .courses-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 24rem) {
  .course-card-facts {
    grid-template-columns: 1fr;
  }

  .course-card-facts div,
  .course-card-facts div:first-child {
    padding: 0.5rem 0;
    border-block-start: 1px solid var(--color-line);
    border-inline-start: 0;
  }

  .course-card-facts div:first-child {
    border-block-start: 0;
  }

  .course-detail-page .detail-facts {
    grid-template-columns: 1fr;
  }

  .course-detail-page .detail-facts div:nth-child(n) {
    border-block-start: 1px solid var(--color-line);
    border-inline-start: 0;
  }

  .course-detail-page .detail-facts div:first-child {
    border-block-start: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .course-age-paths > a > b,
  .card-course {
    transition: none;
  }
}

@media (forced-colors: active) {
  .course-age-paths,
  .course-language-paths > a,
  .course-filter-more,
  .course-card-facts,
  .language-age-paths,
  .course-jump-bar,
  .course-learning-path > li::before {
    border-color: CanvasText;
  }
}

/*
 * مرحلهٔ هفت: فرم‌ها و حساب کاربری
 *
 * فرم‌های احراز هویت، تماس، پنل خصوصی و صفحات مالی از ساختار و منطق قبلی
 * استفاده می‌کنند. این لایه فقط سلسله‌مراتب، حالت‌ها و رفتار Responsive را
 * یکپارچه می‌کند.
 */

.field {
  min-width: 0;
}

.field label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

.field-required {
  color: var(--color-accent-hover);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-semibold);
}

.field-help {
  max-width: 42rem;
  line-height: 1.85;
}

.field-help ul {
  margin: 0.5rem 0 0;
  padding-inline-start: 1.25rem;
}

.field-error-text {
  margin: 0.45rem 0 0;
  font-size: var(--text-small);
  line-height: 1.8;
}

.field-checkbox {
  padding: 0.75rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-surface-alt);
}

.field-checkbox label {
  align-items: flex-start;
  justify-content: flex-start;
  margin: 0;
}

.field-checkbox label > span {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}

.field-checkbox.field-error {
  border-color: var(--color-error);
  background: var(--color-error-soft);
}

.form-errors {
  align-items: flex-start;
  margin: 0;
}

.form-errors strong {
  display: block;
  margin-bottom: 0.25rem;
  color: var(--color-text-primary);
}

.form-errors ul {
  display: grid;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.form-actions,
.form-submit-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.form-submit-row {
  justify-content: space-between;
  padding-top: 0.25rem;
}

.form-submit-row > p {
  max-width: 22rem;
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--text-caption);
}

.btn.is-loading::after {
  width: 1rem;
  height: 1rem;
  border: 2px solid currentColor;
  border-inline-end-color: transparent;
  border-radius: 50%;
  content: "";
  animation: sepas-button-spin 0.75s linear infinite;
}

@keyframes sepas-button-spin {
  to {
    transform: rotate(1turn);
  }
}

.auth-page {
  min-height: 72vh;
  background: var(--color-background);
}

.auth-shell {
  display: grid;
  max-width: 70rem;
  gap: clamp(1.25rem, 4vw, 3.5rem);
  align-items: center;
}

.auth-context {
  min-width: 0;
  padding: clamp(1.25rem, 4vw, 2.5rem);
  border: 1px solid var(--color-line);
  border-inline-start: 4px solid var(--color-secondary);
  border-radius: var(--radius-card);
  background: var(--color-secondary-soft);
}

.auth-context .type-h1 {
  max-width: 15ch;
  font-size: clamp(2rem, 6vw, 3.5rem);
}

.auth-context .type-body-large {
  max-width: 34rem;
  margin: 1rem 0 0;
  color: var(--color-text-secondary);
}

.auth-context .text-link {
  display: inline-flex;
  min-height: var(--tap-target);
  align-items: center;
  margin-top: 1rem;
}

.auth-context-list,
.auth-steps {
  display: grid;
  gap: 0;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}

.auth-context-list li {
  padding: 0.75rem 1.5rem 0.75rem 0;
  border-block-start: 1px solid color-mix(in srgb, var(--color-secondary) 20%, transparent);
  color: var(--color-text-primary);
  position: relative;
}

.auth-context-list li::before {
  position: absolute;
  inset-block-start: 1.15rem;
  inset-inline-start: 0;
  width: 0.55rem;
  height: 0.55rem;
  border: 2px solid var(--color-secondary);
  border-radius: 50%;
  content: "";
}

.auth-steps li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-block: 0.75rem;
  border-block-start: 1px solid color-mix(in srgb, var(--color-secondary) 20%, transparent);
}

.auth-steps li > span {
  display: grid;
  flex: 0 0 2rem;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border: 1px solid var(--color-secondary);
  border-radius: 50%;
  color: var(--color-secondary);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-bold);
}

.auth-steps li > div {
  display: grid;
  gap: 0.1rem;
}

.auth-steps small {
  color: var(--color-text-secondary);
}

.auth-card {
  min-width: 0;
  padding: clamp(1.25rem, 4vw, 2.25rem);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
  background: var(--color-surface);
}

.auth-card-heading {
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--color-line);
}

.auth-card-heading > p {
  margin: 0.4rem 0 0;
  color: var(--color-text-secondary);
  font-size: var(--text-small);
}

.auth-form {
  gap: 1.1rem;
}

.auth-card .btn-block {
  width: 100%;
  justify-self: stretch;
}

.auth-card-links {
  display: grid;
  gap: 0.65rem;
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-line);
  color: var(--color-text-secondary);
  font-size: var(--text-small);
}

.auth-card-links a,
.auth-card-footer a {
  color: var(--color-info);
  font-weight: var(--font-weight-semibold);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.auth-card-footer {
  margin: 1rem 0 0;
  color: var(--color-text-secondary);
  font-size: var(--text-small);
}

.auth-terms-link {
  margin-top: -0.75rem;
}

.auth-unavailable {
  align-self: stretch;
  place-content: center;
}

.auth-unavailable .type-h3 {
  margin-bottom: 0.75rem;
}

.auth-complete {
  text-align: center;
}

.auth-complete .result-mark {
  margin-inline: auto;
}

.auth-complete .type-h2 {
  margin-top: 0.75rem;
}

.result-mark {
  display: grid;
  width: 3rem;
  height: 3rem;
  place-items: center;
  border: 2px solid currentColor;
  border-radius: 50%;
  font-size: 1.25rem;
  font-weight: var(--font-weight-bold);
}

.result-mark.is-success {
  color: var(--color-success);
  background: var(--color-success-soft);
}

.account-page {
  min-height: 70vh;
  background: var(--color-background);
}

.account-container {
  max-width: 76rem;
}

.account-container-form {
  max-width: 64rem;
}

.account-heading {
  display: grid;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.account-heading > p {
  max-width: 36rem;
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--text-body-large);
}

.account-nav {
  display: grid;
  gap: 0.5rem;
  margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
  padding: 0.5rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
  background: var(--color-surface);
}

.account-nav a {
  display: grid;
  min-height: var(--tap-target);
  gap: 0.1rem;
  align-content: center;
  padding: 0.7rem 0.85rem;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  color: var(--color-text-secondary);
  text-decoration: none;
}

.account-nav a:hover {
  border-color: var(--color-line);
  background: var(--color-surface-alt);
  color: var(--color-primary);
}

.account-nav a[aria-current="page"] {
  border-color: color-mix(in srgb, var(--color-primary) 24%, var(--color-line));
  background: var(--color-primary-soft);
  color: var(--color-primary);
}

.account-nav span {
  font-weight: var(--font-weight-bold);
}

.account-nav small {
  color: inherit;
  font-size: var(--text-caption);
}

.account-overview-grid {
  display: grid;
  gap: 1rem;
}

.account-summary-primary,
.account-security {
  min-width: 0;
  padding: clamp(1.25rem, 4vw, 2rem);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
  background: var(--color-surface);
}

.account-section-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.account-summary-grid {
  gap: 0;
}

.account-summary-grid div {
  padding-block: 0.9rem;
}

.account-status-text {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-weight: var(--font-weight-semibold);
}

.account-status-text::before {
  width: 0.55rem;
  height: 0.55rem;
  border: 2px solid currentColor;
  border-radius: 50%;
  content: "";
}

.account-status-text.is-positive {
  color: var(--color-success);
}

.account-security .type-h3 {
  margin-bottom: 1rem;
}

.account-action-list {
  display: grid;
}

.account-action-list > a {
  display: flex;
  min-height: 4.5rem;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.8rem;
  border-block-start: 1px solid var(--color-line);
  text-decoration: none;
}

.account-action-list > a:hover strong {
  color: var(--color-primary);
}

.account-action-list > a > span:first-child {
  display: grid;
  gap: 0.15rem;
}

.account-action-list small {
  color: var(--color-text-secondary);
}

.account-logout-form {
  margin: 1rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--color-line);
}

.account-form-layout {
  display: grid;
  gap: 1rem;
  align-items: start;
}

.account-form-note {
  padding: 1rem;
  border-inline-start: 3px solid var(--color-secondary);
  background: var(--color-secondary-soft);
}

.account-form-note strong {
  display: block;
  margin-bottom: 0.35rem;
  color: var(--color-primary);
}

.account-form-note p {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--text-small);
}

.account-form {
  box-shadow: none;
}

.mobile-verification-number {
  margin: 0.5rem 0 1.25rem;
  color: var(--color-primary);
  font-size: clamp(1.45rem, 5vw, 2rem);
  font-weight: var(--font-weight-bold);
}

.account-status-callout {
  display: grid;
  gap: 0.25rem;
  margin: 0 0 1.25rem;
  padding: 1rem;
  border: 1px solid var(--color-line);
  border-inline-start: 4px solid var(--color-info);
  background: var(--color-info-soft);
}

.account-status-callout.is-positive {
  border-inline-start-color: var(--color-success);
  background: var(--color-success-soft);
}

.account-status-callout span {
  color: var(--color-text-secondary);
  font-size: var(--text-small);
}

.learning-dashboard {
  background: var(--color-background);
}

.learning-dashboard-filters {
  margin-bottom: 2rem;
  padding: 1rem;
  border-radius: var(--radius-card);
  box-shadow: none;
}

.learning-dashboard-filters label {
  display: block;
  margin-bottom: 0.45rem;
  font-weight: var(--font-weight-semibold);
}

.learning-dashboard-card {
  border-radius: var(--radius-card);
  box-shadow: none;
}

.learning-dashboard-card:focus-within {
  border-color: var(--color-primary);
}

.learning-dashboard-progress {
  height: 0.65rem;
  border-radius: var(--radius-sm);
}

.learning-dashboard-progress span {
  background: var(--color-secondary);
}

.learning-dashboard-empty {
  padding: clamp(1.25rem, 4vw, 2.5rem);
  border: 1px solid var(--color-line);
  border-inline-start: 4px solid var(--color-secondary);
  border-radius: var(--radius-card);
  background: var(--color-surface);
}

.contact-form-index {
  border-block: 1px solid var(--color-line);
  background: var(--color-surface);
}

.contact-form-index > div {
  display: grid;
  gap: 1rem;
  padding-block: 1rem;
}

.contact-form-index .type-h3 {
  font-size: var(--text-h4);
}

.contact-form-index nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}

.contact-form-index a {
  display: grid;
  min-height: 4.5rem;
  align-content: center;
  gap: 0.15rem;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  color: var(--color-text-primary);
  text-decoration: none;
}

.contact-form-index a:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
}

.contact-form-index small {
  color: var(--color-text-secondary);
  font-size: var(--text-caption);
}

.contact-form-section .form-demo {
  box-shadow: none;
}

.contact-form-section .section-heading > p {
  color: var(--color-text-secondary);
}

.inquiry-form {
  align-self: start;
}

.inquiry-form textarea {
  min-height: 9rem;
}

.form-unavailable {
  padding: 1rem;
  border: 1px solid var(--color-warning);
  border-inline-start-width: 4px;
  border-radius: var(--radius-md);
  background: var(--color-warning-soft);
  color: var(--color-text-primary);
}

.commerce-page {
  background: var(--color-background);
}

.commerce-heading {
  max-width: 52rem;
  margin-bottom: 1.5rem;
}

.commerce-heading > p:last-child {
  color: var(--color-text-secondary);
}

.commerce-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin: 0 0 2rem;
  padding: 0;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  list-style: none;
  overflow: hidden;
}

.commerce-steps li {
  display: grid;
  min-width: 0;
  min-height: 4.5rem;
  place-content: center;
  gap: 0.15rem;
  padding: 0.65rem;
  border-inline-start: 1px solid var(--color-line);
  color: var(--color-text-secondary);
  text-align: center;
  font-size: var(--text-caption);
}

.commerce-steps li:first-child {
  border-inline-start: 0;
}

.commerce-steps li > span {
  font-weight: var(--font-weight-bold);
}

.commerce-steps li.is-complete {
  color: var(--color-secondary);
}

.commerce-steps li[aria-current="step"] {
  background: var(--color-primary-soft);
  color: var(--color-primary);
  font-weight: var(--font-weight-bold);
}

.commerce-checkout-layout {
  gap: 1rem;
}

.commerce-panel {
  border-radius: var(--radius-card);
  box-shadow: none;
}

.commerce-items li {
  align-items: baseline;
}

.commerce-items li > span,
.commerce-summary dd,
.commerce-receipt-totals dd {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.commerce-summary {
  border-top: 3px solid var(--color-primary);
}

.commerce-summary dl > div,
.commerce-receipt-totals > div {
  padding-block: 0.25rem;
}

.commerce-total {
  border-top-color: var(--color-primary);
  color: var(--color-primary);
}

.commerce-buyer {
  border-top-color: var(--color-line);
}

.commerce-gateway {
  display: grid;
  gap: 0.15rem;
  padding: 0.75rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-surface-alt);
}

.commerce-gateway strong {
  color: var(--color-text-primary);
}

.commerce-confirm-form {
  display: grid;
  gap: 0.75rem;
}

.commerce-terms {
  min-height: var(--tap-target);
  margin: 0;
  padding: 0.75rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  cursor: pointer;
}

.commerce-privacy-note {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--text-caption);
  text-align: center;
}

.commerce-result {
  border-radius: var(--radius-card);
  box-shadow: none;
}

.commerce-result.is-success {
  border-color: color-mix(in srgb, var(--color-success) 35%, var(--color-line));
  background: var(--color-success-soft);
  color: var(--color-success);
}

.commerce-result.is-failed {
  border-color: color-mix(in srgb, var(--color-error) 35%, var(--color-line));
  background: var(--color-error-soft);
  color: var(--color-error);
}

.commerce-result h1 {
  color: var(--color-text-primary);
}

.commerce-result p:not(.eyebrow) {
  color: var(--color-text-secondary);
}

.commerce-receipt-heading > div {
  min-width: 0;
}

.commerce-receipt-heading .eyebrow {
  margin-bottom: 0.25rem;
}

.commerce-order-meta > div,
.commerce-fake-summary > div,
.commerce-payment-history li {
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-surface-alt);
}

.commerce-order-status {
  display: inline-flex;
  min-height: 1.75rem;
  align-items: center;
  gap: 0.4rem;
  width: fit-content;
  margin: 0;
  padding: 0.2rem 0.55rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  background: var(--color-surface-alt);
  color: var(--color-text-secondary);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-semibold);
}

.commerce-order-status::before {
  width: 0.5rem;
  height: 0.5rem;
  border: 1px solid currentColor;
  border-radius: 50%;
  content: "";
}

.commerce-order-status.status-paid,
.commerce-order-status.status-completed,
.commerce-order-status.status-succeeded {
  border-color: color-mix(in srgb, var(--color-success) 28%, var(--color-line));
  background: var(--color-success-soft);
  color: var(--color-success);
}

.commerce-order-status.status-failed,
.commerce-order-status.status-canceled,
.commerce-order-status.status-expired {
  border-color: color-mix(in srgb, var(--color-error) 28%, var(--color-line));
  background: var(--color-error-soft);
  color: var(--color-error);
}

.commerce-reference {
  color: var(--color-text-secondary);
  font-size: var(--text-caption);
  overflow-wrap: anywhere;
}

.commerce-order-card {
  border-radius: var(--radius-card);
  box-shadow: none;
}

.commerce-empty-state {
  max-width: 46rem;
  padding: clamp(1.25rem, 4vw, 2.5rem);
  border: 1px solid var(--color-line);
  border-inline-start: 4px solid var(--color-secondary);
  border-radius: var(--radius-card);
  background: var(--color-surface);
}

.commerce-empty-state .type-h3 {
  margin-bottom: 0.75rem;
}

.commerce-empty-state > p:not(.eyebrow) {
  color: var(--color-text-secondary);
}

/* مرحلهٔ هشت: خوانایی تیتر روی پنل تیرهٔ روند پیگیری. */
.contact-process-card .type-h2 {
  color: var(--color-on-primary);
}

/* مرحلهٔ نه: یکپارچگی Placeholderهای رسانه با Tokenهای معنایی. */
.book-cover-fallback {
  color: var(--color-on-brand);
}

@media (min-width: 40rem) {
  .account-nav {
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  }

  .contact-form-index nav {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 48rem) {
  .auth-shell {
    grid-template-columns: minmax(0, 0.9fr) minmax(23rem, 0.75fr);
  }

  .auth-shell-register {
    align-items: start;
  }

  .auth-shell-compact {
    grid-template-columns: minmax(0, 0.85fr) minmax(21rem, 0.65fr);
  }

  .account-heading {
    grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.65fr);
    align-items: end;
  }

  .account-overview-grid {
    grid-template-columns: minmax(0, 1.2fr) minmax(18rem, 0.8fr);
  }

  .account-form-layout {
    grid-template-columns: minmax(13rem, 0.42fr) minmax(0, 1fr);
  }

  .account-form-note {
    position: sticky;
    inset-block-start: calc(var(--header-height) + 1.5rem);
  }

  .inquiry-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .inquiry-form .field:has(textarea),
  .inquiry-form .field-checkbox,
  .inquiry-form .form-errors,
  .inquiry-form .form-submit-row {
    grid-column: 1 / -1;
  }
}

@media (min-width: 64rem) {
  .contact-form-index > div {
    grid-template-columns: minmax(13rem, 0.35fr) minmax(0, 1fr);
    align-items: center;
  }

  .contact-form-section > .container {
    display: grid;
    grid-template-columns: minmax(15rem, 0.55fr) minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 4rem);
    align-items: start;
    max-width: 72rem;
  }

  .contact-form-section .section-heading {
    margin: 0;
    position: sticky;
    inset-block-start: calc(var(--header-height) + 1.5rem);
  }

  .contact-form-section .section-heading-inline {
    display: block;
  }

  .contact-form-section .section-heading > p {
    margin-top: 0.75rem;
  }

  .commerce-summary {
    inset-block-start: calc(var(--header-height) + 1rem);
  }
}

@media (max-width: 31.999rem) {
  .auth-context .type-h1,
  .account-heading .type-h1 {
    font-size: clamp(1.85rem, 9vw, 2.45rem);
  }

  .form-actions > *,
  .form-submit-row > *,
  .mobile-verification-panel .form-actions > *,
  .commerce-actions > *,
  .commerce-fake-actions > * {
    width: 100%;
  }

  .form-submit-row > p {
    text-align: center;
  }

  .commerce-items li,
  .commerce-summary dl > div,
  .commerce-receipt-totals > div {
    align-items: stretch;
    flex-direction: column;
    gap: 0.25rem;
  }

  .commerce-items li > span,
  .commerce-summary dd,
  .commerce-receipt-totals dd {
    text-align: start;
  }

  .commerce-result {
    align-items: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .btn.is-loading::after {
    animation: none;
    border-inline-end-color: currentColor;
  }
}

@media (forced-colors: active) {
  .auth-context,
  .auth-card,
  .account-nav,
  .account-summary-primary,
  .account-security,
  .account-form-note,
  .account-status-callout,
  .contact-form-index,
  .contact-form-index a,
  .commerce-steps,
  .commerce-panel,
  .commerce-result,
  .commerce-empty-state,
  .field-checkbox {
    border-color: CanvasText;
  }
}

/*
 * Material 3 — مرحلهٔ چهار: قرارداد اجزای پایه
 *
 * این لایه در انتهای فایل قرار دارد تا اجزای تاریخی را بدون بازسازی فایل
 * محافظت‌شدهٔ Tailwind به Tokenهای مشترک متصل کند. رفتار Backend و JavaScript
 * موجود دست‌نخورده می‌ماند.
 */

/* 1. Button */
.btn {
  display: inline-flex;
  min-height: var(--button-container-height);
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.65rem 1.15rem;
  border: 1px solid transparent;
  border-radius: var(--button-filled-shape);
  font-size: var(--sys-type-label-large-size);
  font-weight: var(--sys-type-label-weight);
  line-height: var(--sys-type-label-line-height);
  text-align: center;
  transition:
    background-color var(--sys-motion-duration-short) var(--sys-motion-easing-standard),
    border-color var(--sys-motion-duration-short) var(--sys-motion-easing-standard),
    color var(--sys-motion-duration-short) var(--sys-motion-easing-standard);
}

.btn-sm {
  min-height: var(--tap-target);
  padding: 0.5rem 0.9rem;
  font-size: var(--sys-type-label-medium-size);
}

.btn-lg {
  min-height: 3.25rem;
  padding: 0.8rem 1.45rem;
  font-size: var(--sys-type-body-medium-size);
}

.btn-primary {
  border-color: var(--button-filled-container-color);
  background: var(--button-filled-container-color);
  color: var(--button-filled-label-color);
}

.btn-primary:hover:not(:disabled):not([aria-disabled="true"]) {
  border-color: var(--button-filled-hover-container-color);
  background: var(--button-filled-hover-container-color);
}

.btn-primary:active:not(:disabled):not([aria-disabled="true"]) {
  border-color: var(--button-filled-pressed-container-color);
  background: var(--button-filled-pressed-container-color);
}

.btn-tonal {
  border-color: transparent;
  background: var(--button-tonal-container-color);
  color: var(--button-tonal-label-color);
}

.btn-tonal:hover:not(:disabled):not([aria-disabled="true"]),
.btn-tonal:active:not(:disabled):not([aria-disabled="true"]) {
  background: color-mix(in srgb, var(--button-tonal-label-color) 10%, var(--button-tonal-container-color));
}

.btn-accent {
  border-color: var(--button-tertiary-container-color);
  background: var(--button-tertiary-container-color);
  color: var(--button-tertiary-label-color);
}

.btn-accent:hover:not(:disabled):not([aria-disabled="true"]),
.btn-accent:active:not(:disabled):not([aria-disabled="true"]) {
  border-color: color-mix(in srgb, var(--button-tertiary-label-color) 10%, var(--button-tertiary-container-color));
  background: color-mix(in srgb, var(--button-tertiary-label-color) 10%, var(--button-tertiary-container-color));
}

.btn-secondary {
  border-color: var(--button-outlined-outline-color);
  background: transparent;
  color: var(--button-outlined-label-color);
}

.btn-secondary:hover:not(:disabled):not([aria-disabled="true"]),
.btn-secondary:active:not(:disabled):not([aria-disabled="true"]) {
  border-color: var(--button-outlined-label-color);
  background: color-mix(in srgb, var(--button-outlined-label-color) 10%, transparent);
  color: var(--button-outlined-label-color);
}

.btn-ghost {
  border-color: transparent;
  background: transparent;
  color: var(--button-text-label-color);
}

.btn-ghost:hover:not(:disabled):not([aria-disabled="true"]),
.btn-ghost:active:not(:disabled):not([aria-disabled="true"]) {
  background: color-mix(in srgb, var(--button-text-label-color) 10%, transparent);
}

.btn-light {
  border-color: var(--sys-color-inverse-on-surface);
  background: var(--sys-color-inverse-on-surface);
  color: var(--sys-color-inverse-surface);
}

.btn-light:hover:not(:disabled):not([aria-disabled="true"]),
.btn-light:active:not(:disabled):not([aria-disabled="true"]) {
  background: color-mix(in srgb, var(--sys-color-inverse-surface) 8%, var(--sys-color-inverse-on-surface));
}

.btn:hover:not(:disabled):not([aria-disabled="true"]),
.btn:active:not(:disabled):not([aria-disabled="true"]) {
  box-shadow: none;
  transform: none;
}

.btn:disabled,
.btn[aria-disabled="true"] {
  border-color: transparent;
  background: var(--button-disabled-container-color);
  color: color-mix(in srgb, var(--button-disabled-label-color) 70%, transparent);
  cursor: not-allowed;
  opacity: var(--button-disabled-opacity);
}

.btn.is-loading {
  cursor: wait;
  pointer-events: none;
}

.btn.is-loading > .spinner {
  display: none;
}

/* 2. Icon Button */
.icon-button,
.icon-btn {
  display: inline-grid;
  width: var(--tap-target);
  height: var(--tap-target);
  min-height: var(--tap-target);
  padding: 0;
  place-items: center;
  border: 1px solid var(--icon-button-outline-color);
  border-radius: var(--icon-button-shape);
  background: var(--icon-button-container-color);
  color: var(--icon-button-icon-color);
  box-shadow: none;
  transition:
    background-color var(--sys-motion-duration-short) var(--sys-motion-easing-standard),
    border-color var(--sys-motion-duration-short) var(--sys-motion-easing-standard),
    color var(--sys-motion-duration-short) var(--sys-motion-easing-standard);
}

.icon-button:hover:not(:disabled):not([aria-disabled="true"]),
.icon-btn:hover:not(:disabled):not([aria-disabled="true"]),
.icon-button:active:not(:disabled):not([aria-disabled="true"]),
.icon-btn:active:not(:disabled):not([aria-disabled="true"]),
.icon-button.is-selected,
.icon-btn.is-selected,
.icon-button[aria-pressed="true"],
.icon-btn[aria-pressed="true"] {
  border-color: transparent;
  background: var(--icon-button-selected-container-color);
  color: var(--icon-button-selected-icon-color);
}

.icon-button:disabled,
.icon-btn:disabled,
.icon-button[aria-disabled="true"],
.icon-btn[aria-disabled="true"] {
  color: var(--selection-control-disabled-color);
  cursor: not-allowed;
  opacity: var(--sys-state-disabled-content-opacity);
}

/* 3. Text Field */
input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
  min-height: var(--control-height);
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--text-field-outline-color);
  border-radius: var(--text-field-shape);
  background: var(--text-field-container-color);
  color: var(--text-field-input-color);
  box-shadow: none;
  transition:
    background-color var(--sys-motion-duration-short) var(--sys-motion-easing-standard),
    border-color var(--sys-motion-duration-short) var(--sys-motion-easing-standard);
}

/* 4. Select */
select {
  border-color: var(--select-outline-color);
  background-color: var(--select-container-color);
  color: var(--select-label-color);
}

input:not([type="checkbox"]):not([type="radio"]):hover:not(:disabled),
select:hover:not(:disabled),
textarea:hover:not(:disabled) {
  border-color: var(--sys-color-on-surface);
}

input:not([type="checkbox"]):not([type="radio"]):focus-visible,
select:focus-visible,
textarea:focus-visible {
  border-color: var(--text-field-focus-outline-color);
}

input[readonly],
textarea[readonly] {
  background: var(--sys-color-surface-container-low);
}

input:disabled,
select:disabled,
textarea:disabled {
  border-color: var(--sys-color-outline-variant);
  background: var(--text-field-disabled-container-color);
  color: var(--text-field-supporting-color);
  cursor: not-allowed;
  opacity: var(--sys-state-disabled-content-opacity);
}

.field-help {
  color: var(--text-field-supporting-color);
}

.field-error input,
.field-error select,
.field-error textarea,
input[aria-invalid="true"],
select[aria-invalid="true"],
textarea[aria-invalid="true"] {
  border-color: var(--text-field-error-color);
  background: color-mix(in srgb, var(--text-field-error-color) 6%, var(--text-field-container-color));
}

.field-success input,
.field-success select,
.field-success textarea {
  border-color: var(--text-field-success-color);
}

/* 5. Checkbox */
.choice-group label,
.check-control,
.field-checkbox label {
  display: flex;
  min-height: var(--tap-target);
  align-items: center;
  gap: 0.65rem;
}

input[type="checkbox"] {
  width: 1.25rem;
  height: 1.25rem;
  flex: 0 0 auto;
  margin: 0;
  accent-color: var(--selection-control-selected-color);
}

input[type="checkbox"]:disabled {
  accent-color: var(--selection-control-disabled-color);
  cursor: not-allowed;
  opacity: var(--sys-state-disabled-content-opacity);
}

/* 6. Radio */
input[type="radio"] {
  width: 1.25rem;
  height: 1.25rem;
  flex: 0 0 auto;
  margin: 0;
  accent-color: var(--selection-control-selected-color);
}

input[type="radio"]:disabled {
  accent-color: var(--selection-control-disabled-color);
  cursor: not-allowed;
  opacity: var(--sys-state-disabled-content-opacity);
}

/* 7. Switch */
.switch-control {
  display: inline-flex;
  min-height: var(--tap-target);
  align-items: center;
  gap: 0.75rem;
  color: var(--sys-color-on-surface);
  cursor: pointer;
  font-weight: var(--sys-type-label-weight);
}

.switch-control > input[type="checkbox"] {
  width: 3.25rem;
  height: 2rem;
  margin: 0;
  appearance: none;
  border: 2px solid var(--switch-outline-color);
  border-radius: var(--sys-shape-full);
  background: var(--switch-track-color);
  cursor: pointer;
  transition:
    background-color var(--sys-motion-duration-short) var(--sys-motion-easing-standard),
    border-color var(--sys-motion-duration-short) var(--sys-motion-easing-standard);
}

.switch-control > input[type="checkbox"]::before {
  display: block;
  width: 1rem;
  height: 1rem;
  margin: 0.375rem;
  border-radius: var(--sys-shape-full);
  background: var(--switch-handle-color);
  content: "";
  transition:
    background-color var(--sys-motion-duration-short) var(--sys-motion-easing-standard),
    transform var(--sys-motion-duration-short) var(--sys-motion-easing-standard);
}

.switch-control > input[type="checkbox"]:checked {
  border-color: var(--switch-track-selected-color);
  background: var(--switch-track-selected-color);
}

.switch-control > input[type="checkbox"]:checked::before {
  background: var(--switch-handle-selected-color);
  transform: translateX(-1.25rem);
}

.switch-control:has(input:disabled) {
  cursor: not-allowed;
  opacity: var(--sys-state-disabled-content-opacity);
}

/* 8. Chip */
.chip,
.active-filter-chip {
  display: inline-flex;
  min-height: var(--tap-target);
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.45rem 0.75rem;
  border: 1px solid var(--chip-outline-color);
  border-radius: var(--chip-shape);
  background: var(--chip-container-color);
  color: var(--chip-label-color);
  font-size: var(--sys-type-label-medium-size);
  font-weight: var(--sys-type-label-weight);
}

.chip:hover:not(:disabled):not([aria-disabled="true"]),
.active-filter-chip:hover,
.chip:active:not(:disabled):not([aria-disabled="true"]),
.chip.is-selected,
.chip[aria-pressed="true"] {
  border-color: transparent;
  background: var(--chip-selected-container-color);
  color: var(--chip-selected-label-color);
}

.chip:disabled,
.chip[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: var(--sys-state-disabled-content-opacity);
}

/* 9. Badge */
.badge {
  display: inline-flex;
  min-height: 1.75rem;
  align-items: center;
  padding: 0.2rem 0.55rem;
  border: 1px solid transparent;
  border-radius: var(--badge-shape);
  background: var(--badge-container-color);
  color: var(--badge-label-color);
  font-size: var(--sys-type-label-small-size);
  font-weight: var(--sys-type-label-weight);
  line-height: var(--sys-type-label-line-height);
}

.badge-brand {
  border-color: color-mix(in srgb, var(--badge-brand-label-color) 24%, transparent);
  background: var(--badge-brand-container-color);
  color: var(--badge-brand-label-color);
}

.badge-accent {
  border-color: color-mix(in srgb, var(--badge-accent-label-color) 24%, transparent);
  background: var(--badge-accent-container-color);
  color: var(--badge-accent-label-color);
}

.badge-neutral {
  border-color: var(--sys-color-outline-variant);
  background: var(--badge-container-color);
  color: var(--badge-label-color);
}

.badge-success {
  border-color: color-mix(in srgb, var(--badge-success-label-color) 24%, transparent);
  background: var(--badge-success-container-color);
  color: var(--badge-success-label-color);
}

.badge-info {
  border-color: color-mix(in srgb, var(--badge-info-label-color) 24%, transparent);
  background: var(--badge-info-container-color);
  color: var(--badge-info-label-color);
}

/* 10. Alert */
.alert {
  display: flex;
  gap: 0.8rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--alert-outline-color);
  border-inline-start-width: 4px;
  border-radius: var(--alert-shape);
  background: var(--alert-container-color);
  color: var(--alert-label-color);
}

.alert p {
  margin: 0;
}

.alert-success {
  border-inline-start-color: var(--alert-success-indicator-color);
  background: var(--alert-success-container-color);
  color: var(--alert-success-indicator-color);
}

.alert-error {
  border-inline-start-color: var(--alert-error-label-color);
  background: var(--alert-error-container-color);
  color: var(--alert-error-label-color);
}

.alert-warning {
  border-inline-start-color: var(--alert-warning-indicator-color);
  background: var(--alert-warning-container-color);
  color: var(--alert-warning-indicator-color);
}

.alert-info {
  border-inline-start-color: var(--alert-info-indicator-color);
  background: var(--alert-info-container-color);
  color: var(--alert-info-indicator-color);
}

/* 11. Snackbar */
.snackbar {
  display: flex;
  width: min(100%, 34rem);
  min-height: var(--tap-target);
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.8rem 1rem;
  border-radius: var(--snackbar-shape);
  background: var(--snackbar-container-color);
  color: var(--snackbar-label-color);
  box-shadow: var(--snackbar-elevation);
}

.snackbar p {
  margin: 0;
}

.snackbar-action {
  display: inline-flex;
  min-height: var(--tap-target);
  align-items: center;
  color: var(--snackbar-action-color);
  font-weight: var(--sys-type-label-weight);
}

.snackbar-fixed {
  position: fixed;
  z-index: var(--z-toast);
  inset-block-end: max(1rem, env(safe-area-inset-bottom));
  inset-inline-start: 50%;
  transform: translateX(50%);
}

/* 12. Dialog */
.dialog-surface {
  width: min(100%, 35rem);
  padding: clamp(1.25rem, 4vw, 2rem);
  border: 1px solid var(--sys-color-outline-variant);
  border-radius: var(--dialog-shape);
  background: var(--dialog-container-color);
  color: var(--dialog-label-color);
  box-shadow: var(--dialog-elevation);
}

.dialog-surface > p {
  color: var(--dialog-supporting-color);
}

.dialog-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 1.25rem;
}

.filter-drawer {
  background: var(--dialog-container-color);
  color: var(--dialog-label-color);
  box-shadow: var(--dialog-elevation);
}

/* 13. Menu */
.menu-surface,
.nav-dropdown-menu {
  display: grid;
  padding: 0.45rem;
  border: 1px solid var(--sys-color-outline-variant);
  border-radius: var(--menu-shape);
  background: var(--menu-container-color);
  color: var(--menu-label-color);
  box-shadow: var(--menu-elevation);
}

.menu-surface a,
.menu-surface button,
.nav-dropdown-menu a {
  display: flex;
  min-height: var(--tap-target);
  align-items: center;
  padding: 0.55rem 0.75rem;
  border: 0;
  border-radius: var(--sys-shape-extra-small);
  background: transparent;
  color: var(--menu-label-color);
  font: inherit;
  text-align: start;
}

.menu-surface a:hover,
.menu-surface button:hover,
.nav-dropdown-menu a:hover,
.nav-dropdown-menu a.is-active {
  background: var(--menu-hover-container-color);
  color: var(--sys-color-on-primary-container);
}

/* 14. Tooltip */
.tooltip-trigger {
  position: relative;
  display: inline-flex;
}

.tooltip {
  position: absolute;
  z-index: var(--z-toast);
  inset-block-end: calc(100% + 0.5rem);
  inset-inline-start: 50%;
  width: max-content;
  max-width: min(18rem, 80vw);
  padding: 0.35rem 0.55rem;
  border-radius: var(--tooltip-shape);
  background: var(--tooltip-container-color);
  color: var(--tooltip-label-color);
  font-size: var(--sys-type-label-small-size);
  line-height: var(--sys-type-label-line-height);
  opacity: 0;
  pointer-events: none;
  transform: translate(50%, 0.25rem);
  transition:
    opacity var(--sys-motion-duration-short) var(--sys-motion-easing-standard),
    transform var(--sys-motion-duration-short) var(--sys-motion-easing-standard);
}

.tooltip-trigger:hover .tooltip,
.tooltip-trigger:focus-within .tooltip,
.tooltip.is-visible {
  opacity: 1;
  transform: translate(50%, 0);
}

/* 15. Tabs */
.tabs {
  display: flex;
  max-width: 100%;
  gap: 0.25rem;
  overflow-x: auto;
  border-block-end: 1px solid var(--sys-color-outline-variant);
  scrollbar-width: thin;
}

.tab {
  position: relative;
  display: inline-flex;
  min-width: max-content;
  min-height: var(--tap-target);
  align-items: center;
  justify-content: center;
  padding: 0.65rem 1rem;
  color: var(--tabs-label-color);
  font-size: var(--sys-type-label-large-size);
  font-weight: var(--sys-type-label-weight);
}

.tab:hover,
.tab:active,
.tab.is-active,
.tab[aria-selected="true"],
.tab[aria-current="page"] {
  background: color-mix(in srgb, var(--tabs-active-label-color) 8%, transparent);
  color: var(--tabs-active-label-color);
}

.tab[aria-disabled="true"] {
  color: var(--sys-color-on-surface-variant);
  cursor: not-allowed;
  opacity: var(--sys-state-disabled-content-opacity);
  pointer-events: none;
}

.tab.is-active::after,
.tab[aria-selected="true"]::after,
.tab[aria-current="page"]::after {
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0.75rem;
  height: 3px;
  border-radius: var(--sys-shape-full) var(--sys-shape-full) 0 0;
  background: var(--tabs-indicator-color);
  content: "";
}

/* 16. Pagination */
.pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding-top: 1rem;
  border-top: 1px solid var(--sys-color-outline-variant);
}

.pagination-control {
  display: inline-flex;
  min-width: 4.5rem;
  min-height: var(--tap-target);
  align-items: center;
  justify-content: center;
  padding: 0.55rem 0.8rem;
  border: 1px solid var(--pagination-outline-color);
  border-radius: var(--button-filled-shape);
  background: var(--pagination-container-color);
  color: var(--pagination-label-color);
  font-size: var(--sys-type-label-medium-size);
  font-weight: var(--sys-type-label-weight);
}

.pagination-control:hover:not(.is-disabled),
.pagination-control:active:not(.is-disabled) {
  border-color: var(--pagination-label-color);
  background: color-mix(in srgb, var(--pagination-label-color) 8%, var(--pagination-container-color));
}

.pagination-control.is-disabled {
  color: var(--sys-color-on-surface-variant);
  cursor: not-allowed;
  opacity: var(--sys-state-disabled-content-opacity);
}

.pagination-status {
  color: var(--sys-color-on-surface-variant);
  font-size: var(--sys-type-body-small-size);
}

/* 17. Card */
.card,
.card-outlined,
.card-filled,
.card-elevated {
  border-radius: var(--card-shape);
  color: var(--sys-color-on-surface);
  min-width: 0;
}

.card-outlined,
.card-filled,
.card-elevated {
  padding: clamp(1.25rem, 3vw, 1.7rem);
}

.card,
.card-outlined {
  border: 1px solid var(--card-outlined-outline-color);
  background: var(--card-outlined-container-color);
  box-shadow: none;
}

.card-filled {
  border: 1px solid transparent;
  background: var(--card-filled-container-color);
  box-shadow: none;
}

.card-elevated {
  border: 1px solid transparent;
  background: var(--card-elevated-container-color);
  box-shadow: var(--card-elevated-shadow);
}

.card:hover,
.card:focus-within,
.card-interactive:hover,
.card-interactive:focus-within {
  border-color: color-mix(in srgb, var(--sys-color-primary) 48%, var(--card-outlined-outline-color));
  box-shadow: none;
  transform: none;
}

/* 18. List Item */
.list {
  margin: 0;
  padding: 0;
  border: 1px solid var(--list-item-divider-color);
  border-radius: var(--sys-shape-medium);
  background: var(--list-item-container-color);
  list-style: none;
  overflow: hidden;
}

.list-item {
  display: flex;
  min-height: 3.5rem;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 1rem;
  color: var(--list-item-label-color);
}

.list-item + .list-item {
  border-block-start: 1px solid var(--list-item-divider-color);
}

.list-item-leading,
.list-item-trailing {
  flex: 0 0 auto;
  color: var(--sys-color-primary);
}

.list-item-copy {
  display: grid;
  min-width: 0;
  flex: 1;
}

.list-item-copy small {
  color: var(--list-item-supporting-color);
}

a.list-item:hover,
button.list-item:hover {
  background: color-mix(in srgb, var(--sys-color-primary) 8%, var(--list-item-container-color));
}

button.list-item {
  width: 100%;
  border: 0;
  background: var(--list-item-container-color);
  font: inherit;
  text-align: start;
}

@media (max-width: 31.999rem) {
  .snackbar,
  .dialog-surface {
    width: 100%;
  }

  .dialog-actions > * {
    flex: 1 1 100%;
  }

  .pagination-status {
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .btn,
  .icon-button,
  .icon-btn,
  .switch-control > input,
  .switch-control > input::before,
  .tooltip {
    transition: none;
  }
}

@media (forced-colors: active) {
  .btn,
  .icon-button,
  .icon-btn,
  .chip,
  .badge,
  .alert,
  .snackbar,
  .dialog-surface,
  .menu-surface,
  .tabs,
  .pagination-control,
  .card,
  .card-outlined,
  .card-filled,
  .card-elevated,
  .list,
  .switch-control > input {
    border-color: CanvasText;
  }

  .tab.is-active::after,
  .tab[aria-selected="true"]::after,
  .tab[aria-current="page"]::after {
    background: Highlight;
  }
}

/*
 * Material 3 — مرحلهٔ پنج: کامپوننت‌های سراسری
 *
 * پوستهٔ مشترک سایت در این لایه به Component Tokenها متصل می‌شود. ساختار
 * Template و Hookهای JavaScript موجود حفظ شده‌اند و قواعد اختصاصی صفحه‌ها در
 * این مرحله بازطراحی نمی‌شوند.
 */

/* 1. Header */
.site-header {
  min-height: var(--header-height);
  border-block-end: 1px solid var(--header-divider-color);
  background: var(--header-container-color);
  color: var(--header-label-color);
  box-shadow: var(--sys-elevation-level-0);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition:
    background-color var(--sys-motion-duration-short) var(--sys-motion-easing-standard),
    border-color var(--sys-motion-duration-short) var(--sys-motion-easing-standard),
    box-shadow var(--sys-motion-duration-short) var(--sys-motion-easing-standard);
}

.site-header.is-scrolled {
  border-block-end-color: color-mix(in srgb, var(--header-active-label-color) 24%, var(--header-divider-color));
  background: var(--header-container-color);
  box-shadow: var(--header-elevation);
}

.header-inner {
  min-height: var(--header-height);
}

.brand-lockup,
.brand-words strong {
  color: var(--header-active-label-color);
}

.brand-words span,
.header-contact {
  color: var(--header-label-color);
}

.brand-mark {
  border-color: var(--header-divider-color);
  background: var(--header-container-color);
}

.header-social-links a {
  border-color: var(--header-divider-color);
  color: var(--header-active-label-color);
}

.header-social-links a:hover,
.header-social-links a:active {
  background: var(--desktop-navigation-active-container-color);
  color: var(--desktop-navigation-active-label-color);
  transform: none;
}

/* 2. Desktop Navigation */
.desktop-nav > a,
.nav-dropdown > summary {
  color: var(--desktop-navigation-label-color);
}

.desktop-nav > a:hover,
.desktop-nav > a:active,
.desktop-nav > a.is-active,
.desktop-nav > a[aria-current],
.nav-dropdown > summary:hover,
.nav-dropdown > summary:active,
.nav-dropdown[open] > summary {
  background: var(--desktop-navigation-active-container-color);
  color: var(--desktop-navigation-active-label-color);
}

.desktop-nav > a.is-active,
.desktop-nav > a[aria-current] {
  box-shadow: inset 0 -3px 0 var(--desktop-navigation-active-indicator-color);
}

.nav-dropdown-chevron {
  border-color: currentColor;
  transition: transform var(--sys-motion-duration-short) var(--sys-motion-easing-standard);
}

/* 3. Mobile Navigation */
.mobile-nav {
  border-color: var(--mobile-navigation-divider-color);
  background: var(--mobile-navigation-container-color);
  color: var(--mobile-navigation-label-color);
  box-shadow: var(--dialog-elevation);
}

.mobile-nav-heading {
  border-color: var(--mobile-navigation-divider-color);
}

.mobile-nav-heading strong {
  color: var(--mobile-navigation-active-label-color);
}

.mobile-nav-heading span,
.mobile-nav-phone {
  color: var(--mobile-navigation-supporting-color);
}

.mobile-nav-links {
  border-color: var(--mobile-navigation-divider-color);
}

.mobile-nav-links > a {
  border-color: var(--mobile-navigation-divider-color);
  background: transparent;
  color: var(--mobile-navigation-label-color);
}

.mobile-nav-links > a:hover,
.mobile-nav-links > a:active,
.mobile-nav-links > a.is-active,
.mobile-nav-links > a[aria-current] {
  border-inline-start-width: 3px;
  border-inline-start-color: var(--desktop-navigation-active-indicator-color);
  background: var(--mobile-navigation-active-container-color);
  color: var(--mobile-navigation-active-label-color);
}

.mobile-nav-phone bdi,
.mobile-nav-social a {
  color: var(--mobile-navigation-active-label-color);
}

.mobile-nav-social a {
  border-color: var(--mobile-navigation-divider-color);
}

.mobile-nav-scrim {
  background: color-mix(in srgb, var(--sys-color-scrim) 52%, transparent);
}

/* 4. Footer */
.site-footer {
  background: var(--footer-container-color);
  color: var(--footer-label-color);
}

.footer-grid > *,
.footer-bottom {
  border-color: var(--footer-divider-color);
}

.brand-lockup-footer,
.brand-lockup-footer .brand-words strong,
.footer-heading,
.footer-contact li > p,
.footer-contact li > a {
  color: var(--footer-label-color);
}

.brand-lockup-footer .brand-words span,
.footer-brand p,
.footer-links,
.footer-bottom,
.footer-contact li > span,
.social-links {
  color: var(--footer-supporting-color);
}

.brand-mark-footer,
.social-links a {
  border-color: var(--footer-divider-color);
}

.footer-links a:hover,
.footer-links a:active,
.social-links a:hover,
.social-links a:active {
  color: var(--footer-label-color);
}

.social-links a:hover,
.social-links a:active {
  border-color: var(--footer-label-color);
  background: color-mix(in srgb, var(--footer-label-color) 10%, transparent);
  transform: none;
}

.footer-signature {
  color: var(--footer-accent-color);
}

/* 5. Breadcrumb */
.breadcrumb {
  color: var(--breadcrumb-label-color);
  font-size: var(--sys-type-body-small-size);
}

.breadcrumb a {
  color: var(--breadcrumb-link-color);
  font-weight: var(--sys-type-label-weight);
}

.breadcrumb a:hover,
.breadcrumb a:active {
  color: var(--breadcrumb-current-label-color);
  text-decoration: underline;
}

.breadcrumb [aria-current="page"] {
  color: var(--breadcrumb-current-label-color);
  font-weight: var(--sys-type-label-weight);
}

.breadcrumb-separator {
  color: var(--breadcrumb-divider-color);
}

/* 6. Page Container */
.container {
  width: min(calc(100% - 2rem), var(--page-container-max-inline-size));
  margin-inline: auto;
}

.container-wide {
  width: min(calc(100% - 2rem), var(--page-container-wide-max-inline-size));
  margin-inline: auto;
}

/* 7. Page Header */
.page-hero {
  border-block-end: 1px solid var(--page-header-divider-color);
  background: linear-gradient(
    145deg,
    var(--page-header-container-color),
    var(--page-header-supporting-container-color)
  );
  color: var(--page-header-label-color);
}

.page-hero .type-h1 {
  color: var(--page-header-label-color);
}

.page-hero .page-intro {
  color: var(--page-header-supporting-color);
}

/* 8. Search */
.search-form,
.home-page .home-search form {
  color: var(--search-field-label-color);
}

.search-form > label,
.home-page .home-search label {
  color: var(--search-field-label-color);
  font-weight: var(--sys-type-label-weight);
}

.search-form > div,
.home-page .home-search-control {
  display: grid;
  gap: var(--sys-space-component-gap);
}

.search-form input[type="search"],
.search-hero .search-form input[type="search"],
.home-page .home-search-control input[type="search"] {
  min-height: 3.25rem;
  background: var(--search-field-container-color);
  color: var(--search-field-label-color);
}

.home-page .home-search-suggestions {
  padding: 0.5rem;
  border: 1px solid var(--sys-color-outline-variant);
  border-radius: var(--menu-shape);
  background: var(--search-suggestion-container-color);
  box-shadow: var(--menu-elevation);
}

.home-page .home-search-suggestions > div {
  border-color: var(--sys-color-outline-variant);
}

.home-page .home-search-suggestions a {
  min-height: var(--tap-target);
  padding: 0.65rem;
  border-color: var(--sys-color-outline-variant);
  border-radius: var(--sys-shape-extra-small);
  color: var(--sys-color-primary);
}

.home-page .home-search-suggestions a:hover,
.home-page .home-search-suggestions a:focus-visible {
  background: var(--search-suggestion-hover-container-color);
  color: var(--sys-color-on-primary-container);
}

/* 9. Public Forms */
.form-demo {
  border: 1px solid var(--public-form-outline-color);
  border-radius: var(--public-form-shape);
  background: var(--public-form-container-color);
  box-shadow: var(--sys-elevation-level-0);
}

.form-grid {
  gap: var(--public-form-field-gap);
}

.form-submit-row {
  border-block-start: 1px solid var(--public-form-outline-color);
  padding-block-start: var(--public-form-action-padding);
}

/* 10. Django Messages */
.messages-region {
  display: grid;
  z-index: calc(var(--z-header) - 1);
  gap: var(--message-region-gap);
  margin-block: var(--message-region-margin-block);
}

.messages-region .alert {
  width: 100%;
  margin: 0;
}

@media (min-width: 40rem) {
  .search-form > div,
  .home-page .home-search-control {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }
}

@media (min-width: 48rem) {
  .container,
  .container-wide {
    width: min(calc(100% - 3rem), var(--page-container-max-inline-size));
  }

  .container-wide {
    width: min(calc(100% - 3rem), var(--page-container-wide-max-inline-size));
  }
}

@media (min-width: 64rem) {
  .desktop-nav {
    display: flex;
  }

  .menu-toggle,
  .mobile-nav,
  .mobile-nav-scrim {
    display: none;
  }
}

@media (max-width: 39.999rem) {
  .search-form .btn,
  .home-page .home-search-control .btn {
    width: 100%;
  }

  .form-submit-row > * {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-header,
  .nav-dropdown-chevron,
  .mobile-nav,
  .mobile-nav-scrim,
  .header-social-links a,
  .social-links a {
    transition: none;
  }
}

@media (forced-colors: active) {
  .site-header,
  .mobile-nav,
  .site-footer,
  .page-hero,
  .form-demo,
  .home-page .home-search-suggestions,
  .messages-region .alert {
    border-color: CanvasText;
  }

  .desktop-nav > a.is-active,
  .desktop-nav > a[aria-current],
  .mobile-nav-links > a.is-active,
  .mobile-nav-links > a[aria-current] {
    outline: 2px solid Highlight;
    outline-offset: -2px;
  }
}

/*
 * Material 3 — مرحلهٔ شش: صفحه‌های Pilot
 *
 * این لایه فقط روی چهار Wrapper نشانه‌گذاری‌شدهٔ خانه، فهرست دوره، جزئیات
 * دوره و ورود اعمال می‌شود. ساختار محتوا، URLها و رفتارهای موجود دست‌نخورده‌اند.
 */

:root {
  --pilot-page-container-color: var(--sys-color-background);
  --pilot-page-label-color: var(--sys-color-on-background);
  --pilot-hero-container-color: var(--page-header-container-color);
  --pilot-hero-supporting-container-color: var(--page-header-supporting-container-color);
  --pilot-section-container-color: var(--sys-color-surface);
  --pilot-section-alternate-container-color: var(--sys-color-surface-container-low);
  --pilot-panel-container-color: var(--card-filled-container-color);
  --pilot-panel-raised-container-color: var(--card-elevated-container-color);
  --pilot-panel-label-color: var(--sys-color-on-surface);
  --pilot-panel-supporting-color: var(--sys-color-on-surface-variant);
  --pilot-panel-outline-color: var(--card-outlined-outline-color);
  --pilot-panel-shape: var(--card-shape);
  --pilot-panel-elevation: var(--card-elevated-shadow);
  --pilot-divider-color: var(--sys-color-outline-variant);
  --pilot-hover-container-color: var(--sys-color-primary-container);
}

[data-design-pilot] {
  background: var(--pilot-page-container-color);
  color: var(--pilot-page-label-color);
}

/* 1. صفحهٔ اصلی */
.home-page[data-design-pilot="home"] .home-hero {
  border-color: var(--pilot-divider-color);
  background: linear-gradient(
    145deg,
    var(--pilot-hero-container-color),
    var(--pilot-hero-supporting-container-color)
  );
}

.home-page[data-design-pilot="home"] .home-hero-media {
  border-color: var(--pilot-panel-outline-color);
  border-radius: var(--pilot-panel-shape);
  background: var(--pilot-panel-container-color);
  box-shadow: var(--pilot-panel-elevation);
}

.home-page[data-design-pilot="home"] .home-hero-image {
  border-start-start-radius: calc(var(--pilot-panel-shape) - 1px);
  border-start-end-radius: calc(var(--pilot-panel-shape) - 1px);
  background: var(--pilot-panel-raised-container-color);
}

.home-page[data-design-pilot="home"] .home-finder-tools {
  padding: var(--sys-space-container-padding);
  border: 1px solid var(--pilot-panel-outline-color);
  border-radius: var(--pilot-panel-shape);
  background: var(--pilot-panel-container-color);
  color: var(--pilot-panel-label-color);
}

.home-page[data-design-pilot="home"] .home-age-grid > a {
  padding-inline: var(--sys-space-container-padding);
  border-radius: var(--sys-shape-small);
}

.home-page[data-design-pilot="home"] .home-age-grid > a:hover,
.home-page[data-design-pilot="home"] .home-age-grid > a:focus-visible {
  background: var(--pilot-hover-container-color);
}

.home-page[data-design-pilot="home"] .home-learning-note {
  border-color: var(--pilot-panel-outline-color);
  background: var(--pilot-panel-container-color);
}

/* 2. فهرست دوره‌ها */
.courses-catalog-page[data-design-pilot="course-list"] .courses-catalog-hero {
  border-color: var(--pilot-divider-color);
  background: linear-gradient(
    145deg,
    var(--pilot-hero-container-color),
    var(--pilot-hero-supporting-container-color)
  );
}

.courses-catalog-page[data-design-pilot="course-list"] .courses-catalog-steps {
  padding-inline: var(--sys-space-container-padding);
  border: 1px solid var(--pilot-panel-outline-color);
  border-radius: var(--pilot-panel-shape);
  background: var(--pilot-panel-container-color);
}

.courses-catalog-page[data-design-pilot="course-list"] .courses-catalog-steps li,
.courses-catalog-page[data-design-pilot="course-list"] .course-entry-section {
  border-color: var(--pilot-divider-color);
}

.courses-catalog-page[data-design-pilot="course-list"] .course-entry-section {
  background: var(--pilot-section-alternate-container-color);
}

.courses-catalog-page[data-design-pilot="course-list"] .course-age-paths > a {
  padding-inline: var(--sys-space-container-padding);
  border-radius: var(--sys-shape-small);
}

.courses-catalog-page[data-design-pilot="course-list"] .course-age-paths > a:hover,
.courses-catalog-page[data-design-pilot="course-list"] .course-age-paths > a:focus-visible {
  background: var(--pilot-hover-container-color);
}

.courses-catalog-page[data-design-pilot="course-list"] .course-filter-sidebar .filter-fields-desktop.course-filters,
.courses-catalog-page[data-design-pilot="course-list"] .card-course {
  border-color: var(--pilot-panel-outline-color);
  background: var(--pilot-panel-raised-container-color);
  box-shadow: var(--sys-elevation-level-0);
}

/* 3. جزئیات یک دوره */
.course-detail-page[data-design-pilot="course-detail"] .course-detail-hero {
  border-color: var(--pilot-divider-color);
  background: linear-gradient(
    145deg,
    var(--pilot-hero-container-color),
    var(--pilot-hero-supporting-container-color)
  );
}

.course-detail-page[data-design-pilot="course-detail"] .detail-facts {
  overflow: hidden;
  padding: var(--sys-space-component-gap);
  border: 1px solid var(--pilot-panel-outline-color);
  border-radius: var(--pilot-panel-shape);
  background: var(--pilot-panel-container-color);
}

.course-detail-page[data-design-pilot="course-detail"] .detail-facts div,
.course-detail-page[data-design-pilot="course-detail"] .course-jump-bar {
  border-color: var(--pilot-divider-color);
}

.course-detail-page[data-design-pilot="course-detail"] .detail-visual {
  border: 1px solid var(--pilot-panel-outline-color);
  border-radius: var(--pilot-panel-shape);
  background: var(--sys-color-primary-container);
  box-shadow: var(--pilot-panel-elevation);
}

.course-detail-page[data-design-pilot="course-detail"] .course-jump-bar {
  background: var(--pilot-panel-raised-container-color);
}

.course-detail-page[data-design-pilot="course-detail"] .course-jump-nav a:hover,
.course-detail-page[data-design-pilot="course-detail"] .course-jump-nav a:focus-visible {
  background: var(--pilot-hover-container-color);
}

/* 4. صفحهٔ ورود */
.auth-page[data-design-pilot="login"] {
  background: linear-gradient(
    145deg,
    var(--pilot-page-container-color),
    var(--pilot-section-alternate-container-color)
  );
}

.auth-page[data-design-pilot="login"] .auth-context {
  border-color: var(--pilot-panel-outline-color);
  border-inline-start-color: var(--sys-color-secondary);
  border-radius: var(--pilot-panel-shape);
  background: var(--sys-color-secondary-container);
  color: var(--pilot-panel-label-color);
}

.auth-page[data-design-pilot="login"] .auth-card {
  border-color: var(--pilot-panel-outline-color);
  border-radius: var(--pilot-panel-shape);
  background: var(--pilot-panel-raised-container-color);
  box-shadow: var(--pilot-panel-elevation);
}

.auth-page[data-design-pilot="login"] .auth-card-heading,
.auth-page[data-design-pilot="login"] .auth-card-links {
  border-color: var(--pilot-divider-color);
}

@media (max-width: 39.999rem) {
  .home-page[data-design-pilot="home"] .home-finder-tools,
  .courses-catalog-page[data-design-pilot="course-list"] .courses-catalog-steps,
  .course-detail-page[data-design-pilot="course-detail"] .detail-facts {
    border-radius: var(--sys-shape-medium);
  }

  .courses-catalog-page[data-design-pilot="course-list"] .courses-catalog-steps {
    padding-inline: var(--sys-space-container-padding);
  }

  .course-detail-page[data-design-pilot="course-detail"] .detail-facts {
    padding: var(--sys-space-component-gap);
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-design-pilot] *,
  [data-design-pilot] *::before,
  [data-design-pilot] *::after {
    scroll-behavior: auto;
  }
}

@media (forced-colors: active) {
  .home-page[data-design-pilot="home"] .home-hero-media,
  .home-page[data-design-pilot="home"] .home-finder-tools,
  .courses-catalog-page[data-design-pilot="course-list"] .courses-catalog-steps,
  .courses-catalog-page[data-design-pilot="course-list"] .course-filter-sidebar .filter-fields-desktop.course-filters,
  .course-detail-page[data-design-pilot="course-detail"] .detail-facts,
  .course-detail-page[data-design-pilot="course-detail"] .detail-visual,
  .auth-page[data-design-pilot="login"] .auth-context,
  .auth-page[data-design-pilot="login"] .auth-card {
    border-color: CanvasText;
  }
}

/*
 * Material 3 — مرحلهٔ هفت: تأیید و اصلاح Pilot
 *
 * بازبینی Pilot فقط سه نقطهٔ اصطکاک بصری را اصلاح می‌کند: تقدم اقدام ورود در
 * موبایل، تخت‌شدن راهنمای انتخاب دوره در دسکتاپ و کاهش Shape/Elevation در
 * پنل‌های اطلاعاتی. رنگ اصلی، تایپوگرافی، محتوا و رفتار صفحه‌ها ثابت می‌مانند.
 */

.course-detail-page[data-design-pilot="course-detail"] .detail-facts,
.auth-page[data-design-pilot="login"] .auth-context {
  border-radius: var(--sys-shape-medium);
}

.course-detail-page[data-design-pilot="course-detail"] .detail-visual {
  box-shadow: var(--sys-elevation-level-0);
}

@media (max-width: 47.999rem) {
  .auth-page[data-design-pilot="login"] .auth-card {
    order: -1;
  }

  .auth-page[data-design-pilot="login"] .auth-context {
    order: 0;
  }
}

@media (min-width: 48rem) {
  .courses-catalog-page[data-design-pilot="course-list"] .courses-catalog-steps {
    padding-inline: var(--sys-space-container-padding) 0;
    border-block: 0;
    border-inline: 0;
    border-inline-start: 3px solid var(--sys-color-secondary);
    border-radius: var(--sys-shape-none);
    background: transparent;
  }
}

@media (forced-colors: active) {
  .courses-catalog-page[data-design-pilot="course-list"] .courses-catalog-steps {
    border-inline-start-color: CanvasText;
  }
}

/*
 * Material 3 — مرحلهٔ هشت: صفحات عمومی
 *
 * این لایه فقط Wrapperهای عمومی صریح را به قرارداد تأییدشدهٔ Pilot متصل می‌کند.
 * URL، محتوا، انتشار، رفتار و صفحه‌های حساب یا فروش در این Scope نیستند.
 */

:root {
  --public-page-container-color: var(--sys-color-background);
  --public-page-label-color: var(--sys-color-on-background);
  --public-hero-container-color: var(--page-header-container-color);
  --public-hero-supporting-container-color: var(--page-header-supporting-container-color);
  --public-section-container-color: var(--sys-color-surface);
  --public-section-alternate-container-color: var(--sys-color-surface-container-low);
  --public-panel-container-color: var(--card-filled-container-color);
  --public-panel-raised-container-color: var(--card-elevated-container-color);
  --public-panel-label-color: var(--sys-color-on-surface);
  --public-panel-supporting-color: var(--sys-color-on-surface-variant);
  --public-panel-outline-color: var(--card-outlined-outline-color);
  --public-panel-shape: var(--card-shape);
  --public-divider-color: var(--sys-color-outline-variant);
  --public-hover-container-color: var(--sys-color-primary-container);
}

[data-design-public] {
  background: var(--public-page-container-color);
  color: var(--public-page-label-color);
}

[data-design-public] .page-hero {
  border-color: var(--public-divider-color);
  background: linear-gradient(
    145deg,
    var(--public-hero-container-color),
    var(--public-hero-supporting-container-color)
  );
}

[data-design-public] .section-alt {
  background: var(--public-section-alternate-container-color);
}

[data-design-public] .interior-hero-aside {
  border-color: var(--public-panel-outline-color);
  border-radius: var(--sys-shape-medium);
  background: var(--sys-color-secondary-container);
  box-shadow: var(--sys-elevation-level-0);
}

[data-design-public] .card,
[data-design-public] .content-filters,
[data-design-public] .class-schedule-card {
  border-color: var(--public-panel-outline-color);
  background: var(--public-panel-raised-container-color);
  box-shadow: var(--sys-elevation-level-0);
}

/* ۱ و ۲. سایر صفحات دوره و دسته‌بندی واقعی زبان */
.language-detail-page[data-design-public="course-language"] .language-hero-visual {
  border-color: var(--public-panel-outline-color);
  border-radius: var(--public-panel-shape);
  background: var(--sys-color-primary-container);
  box-shadow: var(--sys-elevation-level-0);
}

.language-detail-page[data-design-category="language"] .language-age-section {
  border-color: var(--public-divider-color);
  background: var(--public-section-container-color);
}

.language-detail-page[data-design-category="language"] .language-age-paths > a {
  border-radius: var(--sys-shape-small);
}

.language-detail-page[data-design-category="language"] .language-age-paths > a:hover,
.language-detail-page[data-design-category="language"] .language-age-paths > a:focus-visible {
  background: var(--public-hover-container-color);
}

.language-detail-page[data-design-public="course-language"] .language-video {
  border-color: var(--public-panel-outline-color);
  border-radius: var(--public-panel-shape);
  background: var(--public-panel-container-color);
  box-shadow: var(--sys-elevation-level-0);
}

@media (max-width: 39.999rem) {
  .language-detail-page[data-design-public="course-language"] .language-hero-visual,
  .language-detail-page[data-design-public="course-language"] .language-video {
    border-radius: var(--sys-shape-medium);
  }
}

@media (forced-colors: active) {
  [data-design-public] .interior-hero-aside,
  [data-design-public] .card,
  [data-design-public] .content-filters,
  [data-design-public] .class-schedule-card,
  .language-detail-page[data-design-public="course-language"] .language-hero-visual,
  .language-detail-page[data-design-public="course-language"] .language-video {
    border-color: CanvasText;
  }
}

/* ۳. دربارهٔ ما */
.static-page[data-design-public="about"] .static-page-reading-section {
  background: var(--public-section-container-color);
}

.static-page[data-design-public="about"] .static-page-content {
  padding-inline-start: var(--sys-space-container-padding);
  border-inline-start: 3px solid var(--sys-color-secondary);
}

.static-page[data-design-public="about"] .institute-video-section {
  border-color: var(--public-divider-color);
  background: var(--public-section-alternate-container-color);
}

@media (forced-colors: active) {
  .static-page[data-design-public="about"] .static-page-content {
    border-inline-start-color: CanvasText;
  }
}

/* ۴. استادان */
.teacher-public-page[data-design-public="teacher-detail"] .teacher-detail-visual {
  border-color: var(--public-panel-outline-color);
  border-radius: var(--public-panel-shape);
  background: var(--sys-color-primary-container);
  box-shadow: var(--sys-elevation-level-0);
}

.teacher-public-page[data-design-public="teacher-detail"] .teacher-professional-card {
  border-color: var(--public-panel-outline-color);
  border-radius: var(--sys-shape-medium);
  background: var(--public-panel-container-color);
  box-shadow: var(--sys-elevation-level-0);
}

.teacher-public-page[data-design-public="teacher-detail"] .detail-section-label,
.teacher-public-page[data-design-public="teacher-detail"] .related-section {
  border-color: var(--public-divider-color);
}

.teacher-public-page[data-design-public="teacher-detail"] .video-player,
.teacher-public-page[data-design-public="teacher-detail"] .gallery-card {
  border-color: var(--public-panel-outline-color);
  border-radius: var(--sys-shape-medium);
  box-shadow: var(--sys-elevation-level-0);
}

@media (max-width: 39.999rem) {
  .teacher-public-page[data-design-public="teacher-detail"] .teacher-detail-visual {
    border-radius: var(--sys-shape-medium);
  }
}

@media (forced-colors: active) {
  .teacher-public-page[data-design-public="teacher-detail"] .teacher-detail-visual,
  .teacher-public-page[data-design-public="teacher-detail"] .teacher-professional-card,
  .teacher-public-page[data-design-public="teacher-detail"] .video-player,
  .teacher-public-page[data-design-public="teacher-detail"] .gallery-card {
    border-color: CanvasText;
  }
}

/* ۵. تماس */
.contact-public-page[data-design-public="contact"] .contact-information-card {
  border-color: var(--public-panel-outline-color);
  border-radius: var(--sys-shape-medium);
  background: var(--public-panel-container-color);
  box-shadow: var(--sys-elevation-level-0);
}

.contact-public-page[data-design-public="contact"] .contact-process-card {
  border-color: var(--sys-color-primary);
  border-radius: var(--sys-shape-medium);
  background: var(--sys-color-primary);
  color: var(--sys-color-on-primary);
  box-shadow: var(--sys-elevation-level-0);
}

.contact-public-page[data-design-public="contact"] .contact-form-index {
  border-color: var(--public-divider-color);
  border-radius: var(--sys-shape-medium);
  background: var(--sys-color-secondary-container);
  box-shadow: var(--sys-elevation-level-0);
}

.contact-public-page[data-design-public="contact"] .contact-form-index a {
  border-color: var(--public-panel-outline-color);
  border-radius: var(--sys-shape-small);
}

.contact-public-page[data-design-public="contact"] .contact-form-index a:hover,
.contact-public-page[data-design-public="contact"] .contact-form-index a:focus-visible {
  background: var(--public-hover-container-color);
}

.contact-public-page[data-design-public="contact"] .contact-form-section {
  border-color: var(--public-divider-color);
}

@media (forced-colors: active) {
  .contact-public-page[data-design-public="contact"] .contact-information-card,
  .contact-public-page[data-design-public="contact"] .contact-process-card,
  .contact-public-page[data-design-public="contact"] .contact-form-index,
  .contact-public-page[data-design-public="contact"] .contact-form-index a {
    border-color: CanvasText;
  }
}

/* ۶. مقالات */
.article-public-page[data-design-public="article-detail"] .article-image-frame {
  border-color: var(--public-panel-outline-color);
  border-radius: var(--public-panel-shape);
  background: var(--public-panel-container-color);
  box-shadow: var(--sys-elevation-level-0);
}

.article-public-page[data-design-public="article-detail"] .article-content {
  padding-inline-start: var(--sys-space-container-padding);
  border-inline-start: 3px solid var(--sys-color-secondary);
}

.article-public-page[data-design-public="article-detail"] .article-tags-section {
  border-color: var(--public-divider-color);
  background: var(--public-section-alternate-container-color);
}

.article-public-page[data-design-public="article-detail"] .related-section,
.articles-public-page[data-design-public="article-list"] .listing-section {
  border-color: var(--public-divider-color);
}

@media (max-width: 39.999rem) {
  .article-public-page[data-design-public="article-detail"] .article-image-frame {
    border-radius: var(--sys-shape-medium);
  }
}

@media (forced-colors: active) {
  .article-public-page[data-design-public="article-detail"] .article-image-frame,
  .article-public-page[data-design-public="article-detail"] .article-content {
    border-color: CanvasText;
  }
}

/* ۷. سایر صفحات عمومی */
.book-public-page[data-design-public="book-detail"] .book-detail-cover {
  border-color: var(--public-panel-outline-color);
  border-radius: var(--public-panel-shape);
  background: var(--sys-color-primary-container);
  box-shadow: var(--sys-elevation-level-0);
}

.book-public-page[data-design-public="book-detail"] .detail-facts {
  border-color: var(--public-panel-outline-color);
  border-radius: var(--sys-shape-medium);
  background: var(--public-panel-container-color);
}

.book-public-page[data-design-public="book-detail"] .book-gallery > figure,
.gallery-public-page[data-design-public="gallery"] .gallery-card {
  border-color: var(--public-panel-outline-color);
  border-radius: var(--sys-shape-medium);
  background: var(--public-panel-container-color);
  box-shadow: var(--sys-elevation-level-0);
}

.calendar-public-page[data-design-public="class-calendar"] .calendar-term-heading,
.calendar-public-page[data-design-public="class-calendar"] .calendar-term-group,
.gallery-public-page[data-design-public="gallery"] .gallery-editorial-group {
  border-color: var(--public-divider-color);
}

.search-public-page[data-design-public="search"] .search-result-group {
  padding-inline-start: var(--sys-space-container-padding);
  border-inline-start: 3px solid var(--public-divider-color);
}

.search-public-page[data-design-public="search"] .search-language-list a {
  border-radius: var(--sys-shape-small);
}

.search-public-page[data-design-public="search"] .search-language-list a:hover,
.search-public-page[data-design-public="search"] .search-language-list a:focus-visible {
  background: var(--public-hover-container-color);
}

.static-page[data-design-public="static-page"] .static-page-reading-section {
  background: var(--public-section-container-color);
}

.static-page[data-design-public="static-page"] .static-page-content {
  padding-inline-start: var(--sys-space-container-padding);
  border-inline-start: 3px solid var(--public-divider-color);
}

.error-page[data-design-public="error"] {
  border-color: var(--public-divider-color);
  background: linear-gradient(
    145deg,
    var(--public-hero-container-color),
    var(--public-hero-supporting-container-color)
  );
}

@media (max-width: 39.999rem) {
  .book-public-page[data-design-public="book-detail"] .book-detail-cover {
    border-radius: var(--sys-shape-medium);
  }
}

@media (forced-colors: active) {
  .book-public-page[data-design-public="book-detail"] .book-detail-cover,
  .book-public-page[data-design-public="book-detail"] .detail-facts,
  .book-public-page[data-design-public="book-detail"] .book-gallery > figure,
  .gallery-public-page[data-design-public="gallery"] .gallery-card,
  .search-public-page[data-design-public="search"] .search-result-group,
  .static-page[data-design-public="static-page"] .static-page-content,
  .error-page[data-design-public="error"] {
    border-color: CanvasText;
  }
}

/*
 * Material 3 — مرحلهٔ نه: حساب کاربری
 *
 * این لایه فقط ظاهر صفحات موجود حساب و تجارت را Scope می‌کند. نام فیلد، Action،
 * Guard، وضعیت، مبلغ، Provider، Callback، Feature Flag و سیاست دسترسی ثابت‌اند.
 */

:root {
  --account-page-container-color: var(--sys-color-background);
  --account-page-label-color: var(--sys-color-on-background);
  --account-context-container-color: var(--sys-color-secondary-container);
  --account-panel-container-color: var(--sys-color-surface-container-lowest);
  --account-panel-tonal-container-color: var(--sys-color-surface-container-low);
  --account-panel-strong-container-color: var(--sys-color-surface-container-high);
  --account-panel-label-color: var(--sys-color-on-surface);
  --account-panel-supporting-color: var(--sys-color-on-surface-variant);
  --account-panel-outline-color: var(--sys-color-outline-variant);
  --account-panel-shape: var(--sys-shape-large);
  --account-compact-shape: var(--sys-shape-medium);
  --account-navigation-selected-container-color: var(--sys-color-primary-container);
  --account-navigation-selected-label-color: var(--sys-color-on-primary-container);
  --account-info-container-color: var(--sys-color-info-container);
  --account-success-container-color: var(--sys-color-success-container);
  --account-error-container-color: var(--sys-color-error-container);
  --account-divider-color: var(--sys-color-outline-variant);
}

[data-design-account] {
  background: var(--account-page-container-color);
  color: var(--account-page-label-color);
}

.auth-page[data-design-account] .auth-context {
  border-color: var(--account-panel-outline-color);
  border-inline-start-color: var(--sys-color-secondary);
  border-radius: var(--account-panel-shape);
  background: var(--account-context-container-color);
  box-shadow: var(--sys-elevation-level-0);
}

.auth-page[data-design-account] .auth-card {
  border-color: var(--account-panel-outline-color);
  border-radius: var(--account-panel-shape);
  background: var(--account-panel-container-color);
  box-shadow: var(--sys-elevation-level-0);
}

.auth-page[data-design-account] .auth-card-heading,
.auth-page[data-design-account] .auth-card-links {
  border-color: var(--account-divider-color);
}

/* ۱. ورود */
.auth-page[data-design-account="login"] .auth-card {
  border-block-start: 3px solid var(--sys-color-tertiary);
}

.auth-page[data-design-account="login"] .auth-context-list li {
  border-color: var(--account-divider-color);
}

@media (max-width: 39.999rem) {
  .auth-page[data-design-account] .auth-context,
  .auth-page[data-design-account] .auth-card {
    border-radius: var(--account-compact-shape);
  }
}

@media (forced-colors: active) {
  .auth-page[data-design-account] .auth-context,
  .auth-page[data-design-account] .auth-card {
    border-color: CanvasText;
  }
}

/* ۲. ثبت‌نام */
.auth-page[data-design-account="register"] .auth-card {
  border-block-start: 3px solid var(--sys-color-tertiary);
}

.auth-page[data-design-account="register"] .auth-steps li {
  border-color: var(--account-divider-color);
}

.auth-page[data-design-account="register"] .auth-steps li > span {
  border-color: var(--sys-color-secondary);
  border-radius: var(--sys-shape-full);
  background: var(--account-panel-container-color);
  color: var(--sys-color-secondary);
}

.auth-page[data-design-account="registration-complete"] .auth-card {
  border-color: var(--sys-color-success);
  background: var(--account-success-container-color);
}

@media (forced-colors: active) {
  .auth-page[data-design-account="registration-complete"] .auth-card {
    border-color: CanvasText;
  }
}

/* ۳. بازیابی رمز */
.auth-page[data-design-account="password-recovery"] .auth-card:not(.auth-complete) {
  border-block-start: 3px solid var(--sys-color-secondary);
}

.auth-page[data-design-account="password-recovery"] .auth-unavailable {
  border-color: var(--sys-color-warning);
  background: var(--sys-color-warning-container);
}

.auth-page[data-design-account="password-recovery"] .auth-complete {
  border-color: var(--sys-color-success);
  background: var(--account-success-container-color);
}

@media (forced-colors: active) {
  .auth-page[data-design-account="password-recovery"] .auth-unavailable,
  .auth-page[data-design-account="password-recovery"] .auth-complete {
    border-color: CanvasText;
  }
}

/* ۴. پروفایل */
.account-page[data-design-account] .account-nav {
  border-color: var(--account-panel-outline-color);
  border-radius: var(--account-compact-shape);
  background: var(--account-panel-tonal-container-color);
  box-shadow: var(--sys-elevation-level-0);
}

.account-page[data-design-account] .account-nav a {
  border-radius: var(--sys-shape-small);
}

.account-page[data-design-account] .account-nav a:hover,
.account-page[data-design-account] .account-nav a:focus-visible {
  border-color: var(--account-panel-outline-color);
  background: var(--account-panel-strong-container-color);
}

.account-page[data-design-account] .account-nav a[aria-current="page"] {
  border-color: var(--sys-color-primary);
  background: var(--account-navigation-selected-container-color);
  color: var(--account-navigation-selected-label-color);
}

.account-page[data-design-account] .account-summary-primary,
.account-page[data-design-account] .account-security,
.account-page[data-design-account] .account-form {
  border-color: var(--account-panel-outline-color);
  border-radius: var(--account-panel-shape);
  background: var(--account-panel-container-color);
  box-shadow: var(--sys-elevation-level-0);
}

.account-page[data-design-account] .account-form-note {
  border-inline-start-color: var(--sys-color-secondary);
  border-radius: var(--account-compact-shape);
  background: var(--account-context-container-color);
}

.account-page[data-design-account="profile"] .account-action-list > a,
.account-page[data-design-account="profile"] .account-logout-form {
  border-color: var(--account-divider-color);
}

.account-page[data-design-account="profile"] .account-action-list > a:hover,
.account-page[data-design-account="profile"] .account-action-list > a:focus-visible {
  background: var(--account-panel-tonal-container-color);
}

@media (max-width: 39.999rem) {
  .account-page[data-design-account] .account-summary-primary,
  .account-page[data-design-account] .account-security,
  .account-page[data-design-account] .account-form {
    border-radius: var(--account-compact-shape);
  }
}

@media (forced-colors: active) {
  .account-page[data-design-account] .account-nav,
  .account-page[data-design-account] .account-summary-primary,
  .account-page[data-design-account] .account-security,
  .account-page[data-design-account] .account-form,
  .account-page[data-design-account] .account-form-note {
    border-color: CanvasText;
  }
}

/* ۵. دوره‌های من */
.account-page[data-design-account="my-courses"] .learning-dashboard-filters {
  border: 1px solid var(--account-panel-outline-color);
  border-radius: var(--account-compact-shape);
  background: var(--account-panel-tonal-container-color);
  box-shadow: var(--sys-elevation-level-0);
}

.account-page[data-design-account="my-courses"] .learning-dashboard-card,
.account-page[data-design-account="my-courses"] .learning-dashboard-empty {
  border-color: var(--account-panel-outline-color);
  border-radius: var(--account-panel-shape);
  background: var(--account-panel-container-color);
  box-shadow: var(--sys-elevation-level-0);
}

.account-page[data-design-account="my-courses"] .learning-dashboard-cover {
  background: var(--sys-color-primary-container);
}

.account-page[data-design-account="my-courses"] .learning-dashboard-facts div {
  border-color: var(--account-divider-color);
}

.account-page[data-design-account="my-courses"] .learning-dashboard-progress {
  background: var(--sys-color-primary-container);
}

.account-page[data-design-account="my-courses"] .learning-dashboard-progress span {
  background: var(--sys-color-secondary);
}

@media (max-width: 39.999rem) {
  .account-page[data-design-account="my-courses"] .learning-dashboard-card,
  .account-page[data-design-account="my-courses"] .learning-dashboard-empty {
    border-radius: var(--account-compact-shape);
  }
}

@media (forced-colors: active) {
  .account-page[data-design-account="my-courses"] .learning-dashboard-filters,
  .account-page[data-design-account="my-courses"] .learning-dashboard-card,
  .account-page[data-design-account="my-courses"] .learning-dashboard-empty {
    border-color: CanvasText;
  }

  .account-page[data-design-account="my-courses"] .learning-dashboard-progress span {
    background: CanvasText;
  }
}

/* ۶. سفارش‌ها */
.account-page[data-design-account^="order-"] .commerce-order-card,
.account-page[data-design-account^="order-"] .commerce-panel,
.account-page[data-design-account^="order-"] .commerce-empty-state {
  border-color: var(--account-panel-outline-color);
  border-radius: var(--account-panel-shape);
  background: var(--account-panel-container-color);
  box-shadow: var(--sys-elevation-level-0);
}

.account-page[data-design-account^="order-"] .commerce-order-meta > div,
.account-page[data-design-account^="order-"] .commerce-payment-history li {
  border-color: var(--account-panel-outline-color);
  border-radius: var(--account-compact-shape);
  background: var(--account-panel-tonal-container-color);
}

.account-page[data-design-account^="order-"] .commerce-items li,
.account-page[data-design-account^="order-"] .commerce-receipt-totals > div {
  border-color: var(--account-divider-color);
}

.account-page[data-design-account="order-list"] .pagination {
  border-color: var(--account-panel-outline-color);
  background: var(--account-panel-tonal-container-color);
}

@media (max-width: 39.999rem) {
  .account-page[data-design-account^="order-"] .commerce-order-card,
  .account-page[data-design-account^="order-"] .commerce-panel,
  .account-page[data-design-account^="order-"] .commerce-empty-state {
    border-radius: var(--account-compact-shape);
  }
}

@media (forced-colors: active) {
  .account-page[data-design-account^="order-"] .commerce-order-card,
  .account-page[data-design-account^="order-"] .commerce-panel,
  .account-page[data-design-account^="order-"] .commerce-empty-state,
  .account-page[data-design-account^="order-"] .commerce-order-meta > div,
  .account-page[data-design-account^="order-"] .commerce-payment-history li {
    border-color: CanvasText;
  }
}

/* ۷. پرداخت */
.commerce-page[data-design-account] .commerce-panel {
  border-color: var(--account-panel-outline-color);
  border-radius: var(--account-panel-shape);
  background: var(--account-panel-container-color);
  box-shadow: var(--sys-elevation-level-0);
}

.commerce-page[data-design-account="checkout"] .commerce-steps {
  border-color: var(--account-panel-outline-color);
  border-radius: var(--account-compact-shape);
  background: var(--account-panel-container-color);
  box-shadow: var(--sys-elevation-level-0);
}

.commerce-page[data-design-account="checkout"] .commerce-steps li {
  border-color: var(--account-divider-color);
}

.commerce-page[data-design-account="checkout"] .commerce-steps li[aria-current="step"] {
  background: var(--account-navigation-selected-container-color);
  color: var(--account-navigation-selected-label-color);
}

.commerce-page[data-design-account="checkout"] .commerce-summary {
  border-block-start-color: var(--sys-color-primary);
}

.commerce-page[data-design-account="checkout"] .commerce-gateway,
.commerce-page[data-design-account="checkout"] .commerce-terms {
  border-color: var(--account-panel-outline-color);
  border-radius: var(--account-compact-shape);
  background: var(--account-panel-tonal-container-color);
}

.commerce-page[data-design-account="payment-fake"] .commerce-panel {
  border-color: var(--sys-color-info);
  background: var(--account-info-container-color);
}

.commerce-page[data-design-account^="payment-"] .commerce-result {
  border-radius: var(--account-panel-shape);
  box-shadow: var(--sys-elevation-level-0);
}

.commerce-page[data-design-account="payment-success"] .commerce-result {
  border-color: var(--sys-color-success);
  background: var(--account-success-container-color);
}

.commerce-page[data-design-account="payment-failed"] .commerce-result {
  border-color: var(--sys-color-error);
  background: var(--account-error-container-color);
}

.commerce-page[data-design-account^="payment-"] .commerce-order-meta > div,
.commerce-page[data-design-account^="payment-"] .commerce-fake-summary > div {
  border-color: var(--account-panel-outline-color);
  border-radius: var(--account-compact-shape);
  background: var(--account-panel-tonal-container-color);
}

@media (max-width: 39.999rem) {
  .commerce-page[data-design-account] .commerce-panel,
  .commerce-page[data-design-account^="payment-"] .commerce-result {
    border-radius: var(--account-compact-shape);
  }
}

@media (forced-colors: active) {
  .commerce-page[data-design-account] .commerce-panel,
  .commerce-page[data-design-account="checkout"] .commerce-steps,
  .commerce-page[data-design-account="checkout"] .commerce-gateway,
  .commerce-page[data-design-account="checkout"] .commerce-terms,
  .commerce-page[data-design-account^="payment-"] .commerce-result,
  .commerce-page[data-design-account^="payment-"] .commerce-order-meta > div,
  .commerce-page[data-design-account^="payment-"] .commerce-fake-summary > div {
    border-color: CanvasText;
  }
}

/* ۸. سایر صفحات حساب */
.account-page[data-design-account="account-status"] .account-summary-grid div {
  border-color: var(--account-divider-color);
}

.account-page[data-design-account="mobile-verification"] .account-status-callout {
  border-color: var(--account-panel-outline-color);
  border-inline-start-color: var(--sys-color-info);
  border-radius: var(--account-compact-shape);
  background: var(--account-info-container-color);
}

.account-page[data-design-account="mobile-verification"] .account-status-callout.is-positive {
  border-inline-start-color: var(--sys-color-success);
  background: var(--account-success-container-color);
}

.account-page[data-design-account="password-change"] .account-form {
  border-block-start: 3px solid var(--sys-color-secondary);
}

@media (forced-colors: active) {
  .account-page[data-design-account="mobile-verification"] .account-status-callout {
    border-color: CanvasText;
  }
}